finish Text props extract refactoring

lib/attributes.js

@@ -44,7 +44,7 @@ const NodeAttributes = {
     responsible: true
 };
 
-const RenderableOnlyAttributes = {
+const FillAndStrokeAttributes = {
     fill: {
         diff: arrayDiffer
     },
@@ -64,7 +64,7 @@ const RenderableOnlyAttributes = {
     strokeMiterlimit: true
 };
 
-const RenderableAttributes = merge({}, NodeAttributes, RenderableOnlyAttributes);
+const RenderableAttributes = merge({}, NodeAttributes, FillAndStrokeAttributes);
 
 const GroupAttributes = RenderableAttributes;
 
@@ -172,7 +172,6 @@ export {
     LineAttributes,
     RectAttributes,
     UseAttributes,
-    RenderableOnlyAttributes,
     LinearGradientAttributes,
     RadialGradientAttributes,
     ViewBoxAttributes

lib/extract/extractProps.js

@@ -4,12 +4,12 @@ import extractTransform from './extractTransform';
 import extractClipping from './extractClipping';
 import extractResponder from './extractResponder';
 import extractOpacity from './extractOpacity';
-import {RenderableOnlyAttributes} from '../attributes';
+import {fillAndStrokePropsKeys} from '../props';
 import _ from 'lodash';
 
 export default function(props, options = {stroke: true, transform: true, fill: true, responder: true}) {
     let propList = [];
-    Object.keys(RenderableOnlyAttributes).forEach(name => {
+    fillAndStrokePropsKeys.forEach(name => {
         if (!_.isNil(props[name])) {
             // clipPath prop may provide `clipPathRef` as native prop
             if (name === 'clipPath') {

lib/extract/extractText.js

@@ -1,5 +1,8 @@
 import SerializablePath from '../SerializablePath';
 import _ from 'lodash';
+import {Children} from 'react';
+import {fontAndRenderPropsKeys} from '../props';
+
 const fontRegExp = /^\s*((?:(?:normal|bold|italic)\s+)*)(?:(\d+(?:\.\d+)?)[ptexm%]*(?:\s*\/.*?)?\s+)?\s*"?([^"]*)/i;
 const fontFamilyPrefix = /^[\s"']*/;
 const fontFamilySuffix = /[\s"']*$/;
@@ -63,20 +66,95 @@ function extractFont(props) {
     return _.defaults(ownedFont, font);
 }
 
-function parseText(props, inheritedProps) {
+function parseText(props, inheritedProps = {}, deltas = []) {
     let {
         children,
         dx = '',
-        dy = ''
+        dy = '',
+        x,
+        y
     } = props;
 
-    if (typeof children === 'string') {
+    const spanArray = [];
+    const deltaXArray = parseDelta(dx);
+    const deltaYArray = parseDelta(dy);
+    const maxDeltaLength = Math.max(deltaXArray.length, deltaYArray.length);
 
-    } else {
+    for (let i = 0; i < maxDeltaLength; i++) {
+        let result = {};
 
+        if (deltaXArray.length > i && deltaXArray[i]) {
+            result.x = deltaXArray[i];
+        } else {
+            let inheritedDeltaX = _.get(deltas, `${i}.x`);
+            if (inheritedDeltaX) {
+                result.x = inheritedDeltaX;
+            }
+        }
+
+        if (deltaYArray.length > i && deltaYArray[i]) {
+            result.y = deltaYArray[i];
+        } else {
+            let inheritedDeltaY = _.get(deltas, `${i}.y`);
+            if (inheritedDeltaY) {
+                result.y = inheritedDeltaY;
+            }
+        }
+
+        deltas[i] = result;
     }
 
-    console.log(dx, dy, children);
+
+    if (typeof children === 'string') {
+        let computedProps = _.reduce(inheritedProps, (prev, value, name) => {
+            if (!prev.hasOwnProperty(name)) {
+                prev[name] = value;
+            }
+
+            return prev;
+        }, _.omit(props, ['children', 'x', 'y']));
+
+        let delta = deltas.shift();
+
+        while (delta) {
+            let text;
+            if (deltas.length) {
+                text = children.slice(0, 1);
+                children = children.slice(1);
+            } else {
+                text = children;
+            }
+
+            spanArray.push({
+                content: text,
+                props: computedProps,
+                deltaX: +delta.x || 0,
+                deltaY: +delta.y || 0,
+                positionX: x || null,
+                positionY: y || null
+            });
+
+            if (!text) {
+                return spanArray;
+            } else {
+                delta = deltas.shift();
+            }
+        };
+
+    } else {
+        fontAndRenderPropsKeys.forEach(inheritablePropName => {
+            if (props.hasOwnProperty(inheritablePropName)) {
+                inheritedProps[inheritablePropName] = props[inheritablePropName];
+            }
+        });
+
+        Children.forEach(children, child => {
+            spanArray.push(...parseText(child.props, inheritedProps, deltas));
+        })
+    }
+
+
+    return spanArray;
 }
 
 function parseDelta(delta) {
@@ -84,22 +162,35 @@ function parseDelta(delta) {
 }
 
 export default function(props) {
-    parseText(props, null);
-
+    let frame = parseText(props);
     let alignment;
-    //if (firstSpan && firstSpan.props.hasOwnProperty('textAnchor')) {
-    //    alignment = anchors[firstSpan.props.textAnchor];
-    //} else if (anchors[props.textAnchor]) {
-    //    alignment = anchors[props.textAnchor];
-    //}
-    //
-    //if (!alignment) {
-    //    alignment = 0;
-    //}
+
+    if (frame[0]) {
+        let firstSpan = frame[0];
+
+        if (firstSpan.positionX === null && props.hasOwnProperty('x')) {
+            firstSpan.positionX = props.x;
+        }
+
+        if (firstSpan.positionY === null && props.hasOwnProperty('y')) {
+            firstSpan.positionY = props.y;
+        }
+
+        if (firstSpan.props.hasOwnProperty('textAnchor')) {
+            alignment = anchors[firstSpan.props.textAnchor];
+        } else if (anchors[props.textAnchor]) {
+            alignment = anchors[props.textAnchor];
+        }
+
+        if (!alignment) {
+            alignment = 0;
+        }
+    }
 
     return {
-        //alignment,
-        //children,
+        alignment,
+        frame,
+        children : null,
         fontFamily: 'Helvetica Neue',
         fontSize: 12,
         fontStyle: 'normal',

lib/props.js

@@ -32,6 +32,8 @@ const fillProps = {
     fillRule: PropTypes.oneOf(['evenodd', 'nonzero'])
 };
 
+const fillPropsKeys = Object.keys(fillProps);
+
 const clipProps = {
     clipRule: PropTypes.oneOf(['evenodd', 'nonzero']),
     clipPath: PropTypes.string
@@ -52,6 +54,21 @@ const strokeProps = {
     strokeMiterlimit: numberProp
 };
 
+const strokePropsKeys = Object.keys(strokeProps);
+
+const fillAndStrokePropsKeys = [...fillPropsKeys, ...strokePropsKeys];
+
+const fontProps = {
+    fontFamily: PropTypes.string,
+    fontSize: numberProp,
+    fontWeight: numberProp,
+    fontStyle: PropTypes.string,
+    font: PropTypes.object
+};
+
+const fontPropsKeys = Object.keys(fontProps);
+const fontAndRenderPropsKeys = [...fillAndStrokePropsKeys, ...fontPropsKeys];
+
 const transformProps = {
     scale: numberProp,
     scaleX: numberProp,
@@ -85,8 +102,14 @@ const pathProps = {
 export {
     numberProp,
     fillProps,
-    clipProps,
+    fillPropsKeys,
     strokeProps,
+    strokePropsKeys,
+    fillAndStrokePropsKeys,
+    fontProps,
+    fontPropsKeys,
+    fontAndRenderPropsKeys,
+    clipProps,
     transformProps,
     pathProps,
     responderProps,