From 58bff6c0daca0e284dfa7779a93752b08ba17615 Mon Sep 17 00:00:00 2001 From: Colin Meinke Date: Wed, 19 Jul 2017 17:27:40 -0500 Subject: [PATCH] feat(shape): allow node to create plain shape object --- examples/dom-node/index.html | 30 ++++++++++++++++++++++++++++++ examples/dom-node/src.js | 19 +++++++++++++++++++ package.json | 2 +- src/shape.js | 18 +++++++++++++++++- yarn.lock | 6 +++--- 5 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 examples/dom-node/index.html create mode 100644 examples/dom-node/src.js diff --git a/examples/dom-node/index.html b/examples/dom-node/index.html new file mode 100644 index 0000000..fe9effd --- /dev/null +++ b/examples/dom-node/index.html @@ -0,0 +1,30 @@ + + + DOM node + + + + + + + + diff --git a/examples/dom-node/src.js b/examples/dom-node/src.js new file mode 100644 index 0000000..895082f --- /dev/null +++ b/examples/dom-node/src.js @@ -0,0 +1,19 @@ +import { shape, render, timeline, play } from '../../src' + +const el = document.querySelector('rect') + +const square = shape({ el }, { + el, + fill: 'yellow', + transforms: [[ 'offset', 80, 80 ]] +}) + +const animation = timeline(square, { + alternate: true, + duration: 2000, + iterations: Infinity +}) + +render(document.querySelector('svg'), animation) + +play(animation) diff --git a/package.json b/package.json index 04534d1..5de0fe9 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ }, "dependencies": { "wilderness-core": "^1.1.0", - "wilderness-dom-node": "^1.0.0" + "wilderness-dom-node": "^1.1.1" }, "description": "A javascript API for making SVG animations", "devDependencies": { diff --git a/src/shape.js b/src/shape.js index 680d580..4686312 100644 --- a/src/shape.js +++ b/src/shape.js @@ -1,5 +1,21 @@ +import { plainShapeObject } from 'wilderness-dom-node' import { shape as coreShape } from 'wilderness-core' -const shape = coreShape +const shape = (...props) => { + return coreShape(...props.map(prop => { + if (prop.el) { + const p = { + ...plainShapeObject(prop.el), + ...prop + } + + delete p.el + + return p + } + + return prop + })) +} export default shape diff --git a/yarn.lock b/yarn.lock index 33ad98f..f64b928 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2933,9 +2933,9 @@ wilderness-core@^1.1.0: svg-points "^6.0.0" tween-functions "^1.2.0" -wilderness-dom-node@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/wilderness-dom-node/-/wilderness-dom-node-1.0.0.tgz#e0c4dd9f16e45a011b74e1e100274b87e36827c9" +wilderness-dom-node@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/wilderness-dom-node/-/wilderness-dom-node-1.1.1.tgz#c5fdc8f13352a723e26b64ae4a32328e33d2e9af" dependencies: svg-points "^6.0.0"