feat(shape): allow node to create plain shape object

colinmeinke · Jul 19, 2017 · 58bff6c · 58bff6c
1 parent 5fb9fc1
commit 58bff6c
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 5 deletions.
diff --git a/examples/dom-node/index.html b/examples/dom-node/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+  <title>DOM node</title>
+  <style>
+    html,
+    body {
+      height: 100%;
+    }
+
+    body {
+      margin: 0;
+    }
+
+    svg {
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <svg
+    height="100"
+    preserveAspectRatio="xMidYMid meet"
+    width="100"
+    viewBox="0 0 100 100"
+  >
+    <rect x="10" y="10" width="10" height="10" fill="#E54"></rect>
+  </svg>
+  <script src="dist.js"></script>
+</body>
diff --git a/examples/dom-node/src.js 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
@@ -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
@@ -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
@@ -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"