complete basic shapes(ios)

elements/Shape.js

@@ -3,32 +3,43 @@ import React, {
     PropTypes
 } from 'react-native';
 import Path from './Path';
+import _ from 'lodash';
 import extractProps from '../lib/extract/extractProps';
 import {ShapeAttributes} from '../lib/attributes';
+import SerializableShape from '../lib/SerializableShape';
 import createReactNativeComponentClass from 'react-native/Libraries/ReactNative/createReactNativeComponentClass';
+import {circleProps, ellipseProps, lineProps, rectProps} from '../lib/props';
 
 /**
  * Circle shape type
  */
 const CIRCLE = 0;
+/**
+ * ELLIPSE shape type
+ */
+const ELLIPSE = 1;
+/**
+ * LINE shape type
+ */
+const LINE = 2;
+/**
+ * RECT shape type
+ */
+const RECT = 3;
 
 /**
  * coord props
- *
- * algorithm for radius in percentage
- * radius = Math.sqrt(Math.pow((width*percent), 2) + Math.pow((height*percent), 2)) / Math.sqrt(2);
  */
-const CIRCLE_COORDS = ['cx', 'cy', 'r'];
-
-const ELLIPSE = 1;
-const ELLIPSE_COORDS = ['cx', 'cy', 'rx', 'ry'];
-
-const LINE = 2;
-const LINE_COORDS = ['x1', 'y1', 'x2', 'y2'];
-
-const RECT = 5;
-const RECT_COORDS = ['x', 'y', 'width', 'height'];
-
+const COORD_PROPS = {
+    /**
+     * algorithm for radius in percentage
+     * radius = Math.sqrt(Math.pow((width*percent), 2) + Math.pow((height*percent), 2)) / Math.sqrt(2);
+     */
+    [CIRCLE]: Object.keys(circleProps),
+    [ELLIPSE]: Object.keys(ellipseProps),
+    [LINE]: Object.keys(lineProps),
+    [RECT]: Object.keys(rectProps)
+};
 
 /**
  * virtualNode component for shape elements
@@ -37,14 +48,29 @@ class Shape extends Component{
     static displayName = 'Shape';
 
     render() {
-        let {props} = this;
+        let props = this.props;
+
+        if (this.context.isInGroup) {
+            props = _.defaults(this.context, props, {
+                isInGroup: null
+            });
+        }
+
+        let shape = new SerializableShape(props, COORD_PROPS[this.type]).toJSON();
 
         return <NativePath
             {...props}
-            {...extractProps.call(props)}
-            shape={new SerializableShape(props).toArray()}
+            {...extractProps(this.type === 3 ? {
+                ...props,
+                x: null,
+                y: null
+            } : props)}
+            shape={{
+                ...shape,
+                type: this.type
+            }}
         />;
-    }
+    };
 }
 
 let NativePath = createReactNativeComponentClass({
@@ -53,3 +79,10 @@ let NativePath = createReactNativeComponentClass({
 });
 
 export default Shape;
+
+export {
+    CIRCLE,
+    ELLIPSE,
+    LINE,
+    RECT
+};