feat(plainShapeObject): add function to create plain shape object

Author: colinmeinke

README.md

@@ -1,16 +1,51 @@
 # Wilderness DOM node
 
-Converts SVG DOM node <> Frame Shape.
+A set of functions to convert between SVG DOM nodes,
+Plain Shape Objects and Frame Shapes.
 
 **Only 2.8kb gzipped.**
 
-Firstly, let's define a *Frame Shape*. A Frame Shape is an object
-commonly used internally within
+## Definitions
+
+### Plain Shape Object
+
+A Plain Shape Object is the most basic way of defining shapes within
 [Wilderness](https://github.com/colinmeinke/wilderness).
+The core properties of a Plain Shape Object can be found in the
+[SVG Points spec](https://github.com/colinmeinke/svg-points#readme).
+
+### Frame Shape
+
+A Frame Shape is an object commonly used internally within Wilderness.
 A Frame Shape has two properties, `attributes` and a `points`
 [see the points spec](https://github.com/colinmeinke/points).
 
-## frameShape
+## Functions
+
+### plainShapeObject
+
+The `plainShapeObject` function converts a SVG DOM node to a Plain
+Shape Object. It will also add all of the node's HTML attributes as
+properties of the Plain Shape Object.
+
+```js
+import { frameShape } from 'wilderness-dom-node'
+
+console.log(
+  plainShapeObject(document.querySelector('rect'))
+)
+
+// {
+//   type: 'rect',
+//   x: 20,
+//   y: 20,
+//   width: 60,
+//   height: 60,
+//   fill: 'yellow'
+// }
+```
+
+### frameShape
 
 The `frameShape` function converts a SVG DOM node to a Frame Shape.
 
@@ -35,7 +70,7 @@ console.log(
 // }
 ```
 
-## node
+### node
 
 The `node` function converts a Frame Shape to a SVG DOM node.
 
@@ -60,7 +95,7 @@ document.querySelector('svg').appendChild(
 )
 ```
 
-## updateNode
+### updateNode
 
 The `updateNode` function updates the attributes of a SVG DOM node given
 a Frame Shape.

package.json

@@ -73,7 +73,7 @@
   "dependencies": {
     "svg-points": "^6.0.0"
   },
-  "description": "Converts SVG DOM node <> Frame Shape",
+  "description": "A set of functions to convert between SVG DOM nodes, Plain Shape Objects and Frame Shapes",
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-plugin-external-helpers": "^6.22.0",

src/index.js

@@ -29,6 +29,16 @@ import { toPath, toPoints } from 'svg-points'
  * @typedef {Object} Node
  */
 
+/**
+ * The data from a Node that is useful in Frame Shape and Plain Shape Object creation.
+ *
+ * @typedef {Object} NodeData
+ *
+ * @property {Object} attributes - All HTML attributes of the Node.
+ * @property {Object[]} childNodes
+ * @property {string} type - The nodeName of the Node.
+ */
+
 /**
  * Wilderness' accepted node types.
  */
@@ -104,7 +114,7 @@ const diff = (current, next) => {
 }
 
 /**
- * Creates a FrameShape from a Node.
+ * Creates a Frame Shape from a Node.
  *
  * @param {Node} node
  *
@@ -114,30 +124,23 @@ const diff = (current, next) => {
  * frameShapeFromNode(node)
  */
 const frameShape = el => {
-  const { attributes: attrs, childNodes, nodeName: type } = el
-  const attributes = {}
-
-  if (el.hasAttributes()) {
-    [ ...attrs ].map(({ name, value }) => {
-      attributes[ name ] = value
-    })
-  }
+  const { attributes, childNodes, type } = nodeData(el)
 
   if (type === 'g') {
     return {
       attributes,
-      childFrameShapes: [ ...childNodes ].filter(validNode).map(frameShape)
+      childFrameShapes: childNodes.filter(validNode).map(frameShape)
     }
   }
 
   return {
     attributes: removeCoreProps(type, attributes),
-    points: toPoints(plainShapeObject(type, attributes))
+    points: toPoints(plainShapeObjectFromAttrs(type, attributes))
   }
 }
 
 /**
- * Creates a group Node from a FrameShape array.
+ * Creates a group Node from a Frame Shape array.
  *
  * @param {FrameShape[]} childFrameShapes
  *
@@ -154,6 +157,51 @@ const groupNode = childFrameShapes => {
   return group
 }
 
+/**
+ * Creates a Node from a Frame Shape.
+ *
+ * @param {FrameShape} frameShape
+ *
+ * @returns {Node}
+ *
+ * @example
+ * node(frameShape)
+ */
+const node = ({ attributes, childFrameShapes, points }) => {
+  const el = childFrameShapes
+    ? groupNode(childFrameShapes)
+    : pathNode(points)
+
+  Object.keys(attributes).map(attr => {
+    el.setAttribute(attr, attributes[ attr ])
+  })
+
+  return el
+}
+
+/**
+ * Creates Node Data given a Node.
+ *
+ * @param {Node} el
+ *
+ * @returns {NodeData}
+ *
+ * @example
+ * nodeData(el)
+ */
+const nodeData = el => {
+  const { attributes: attrs, childNodes, nodeName: type } = el
+  const attributes = {}
+
+  if (el.hasAttributes()) {
+    [ ...attrs ].map(({ name, value }) => {
+      attributes[ name ] = value
+    })
+  }
+
+  return { attributes, childNodes: [ ...childNodes ], type }
+}
+
 /**
  * Creates a path Node from Points.
  *
@@ -172,6 +220,33 @@ const pathNode = points => {
   return path
 }
 
+/**
+ * Creates a Plain Shape Object from a Node.
+ *
+ * @param {Node} el
+ *
+ * @returns {PlainShapeObject}
+ *
+ * @example
+ * plainShapeObject(el)
+ */
+const plainShapeObject = el => {
+  const { attributes, childNodes, type } = nodeData(el)
+
+  if (type === 'g') {
+    return {
+      ...attributes,
+      type,
+      shapes: childNodes.filter(validNode).map(plainShapeObject)
+    }
+  }
+
+  return {
+    ...attributes,
+    ...plainShapeObjectFromAttrs(type, attributes)
+  }
+}
+
 /**
  * Creates a Plain Shape Object from type and an attribute object.
  *
@@ -181,9 +256,9 @@ const pathNode = points => {
  * @returns {PlainShapeObject}
  *
  * @example
- * plainShapeObject('rect', attributes)
+ * plainShapeObjectFromAttrs('rect', attributes)
  */
-const plainShapeObject = (type, attributes) => {
+const plainShapeObjectFromAttrs = (type, attributes) => {
   const props = coreProps(type)
   const result = { type }
 
@@ -198,28 +273,6 @@ const plainShapeObject = (type, attributes) => {
   return result
 }
 
-/**
- * Creates a Node from a FrameShape.
- *
- * @param {FrameShape} frameShape
- *
- * @returns {Node}
- *
- * @example
- * node(frameShape)
- */
-const node = ({ attributes, childFrameShapes, points }) => {
-  const el = childFrameShapes
-    ? groupNode(childFrameShapes)
-    : pathNode(points)
-
-  Object.keys(attributes).map(attr => {
-    el.setAttribute(attr, attributes[ attr ])
-  })
-
-  return el
-}
-
 /**
  * Removes type's core props from attributes object.
  *
@@ -245,7 +298,7 @@ const removeCoreProps = (type, attributes) => {
 }
 
 /**
- * Updates a Node from a FrameShape.
+ * Updates a Node from a Frame Shape.
  *
  * @param {Node} el
  * @param {FrameShape} frameShape