Merge branch 'master' into dev

# Conflicts:
#	app/build/mojs-curve-editor.js
#	app/build/mojs-curve-editor.min.js
#	app/js/app.babel.jsx
#	package.json

Author: legomushroom

app/index.html

@@ -69,6 +69,7 @@
   <script>
     var curveEditor = new MojsCurveEditor({
       name: 'some name',
+      // startPath: 'M0, 100 L100, 0'
       // onChange(path) { console.log(path); },
       // isHiddenOnMin: true
     });

app/js/app.babel.jsx

@@ -8,6 +8,7 @@ import fallbackTo   from './helpers/fallback-to';
 import defer        from './helpers/defer';
 import {reset}      from './actions/points';
 import addPointerDown from './helpers/add-pointer-down';
+import transformPathSegments from './helpers/get-points-from-path';
 
 /*
   API wrapper above the app itself.
@@ -32,6 +33,7 @@ class API {
       name:             'mojs-curve-editor',
       isSaveState:      true,
       isHiddenOnMin:    false,
+      startPath:        '',
       onChange:         null
     }
   }
@@ -101,8 +103,12 @@ class API {
 
   _tryToRestore () {
     const stored = localStorage.getItem(this._localStorage);
-    if ( stored ) { this.store.dispatch({ type: 'SET_STATE', data: JSON.parse(stored) });}
-    else { reset(this.store); }
+    const startPathIsSet = this._props.startPath.length > 0;
+    if ( stored ) {
+      this.store.dispatch({ type: 'SET_STATE', data: JSON.parse(stored) });
+    } else if (startPathIsSet) {
+      this._drawStartPath();
+    } else { reset(this.store); }
   }
 
   _subscribe () {
@@ -232,7 +238,33 @@ class API {
     );
   }
 
+  _getStartPathPoints() {
+    const { startPath } = this._props;
+    let newPoints = [];
+    try {
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', startPath);
+      newPoints = transformPathSegments(path);
+    } catch (e) {
+      console.log('Something went wrong while creating path element');
+    }
+
+    return newPoints;
+  }
 
+  _drawStartPath() {
+    const newPoints = this._getStartPathPoints();
+    if (newPoints.length) {
+      this.store.dispatch({ type: 'POINTS_REMOVE' });
+
+      newPoints.forEach((point, index) => {
+        this.store.dispatch({
+          type: 'POINT_ADD',
+          data: { point, index }
+        });
+      });
+    }
+  }
 
   // highlight() { this.store.dispatch({ type: 'SET_HIGHLIGHT', data: true }); }
   // dim() { this.store.dispatch({ type: 'SET_HIGHLIGHT', data: false }); }

app/js/helpers/get-points-from-path.babel.js

@@ -0,0 +1,44 @@
+import 'path-data-polyfill';
+import pointToAngle from './point-to-angle';
+import C from '../constants';
+const { CURVE_PERCENT } = C;
+
+export default (path) => {
+  const points = [];
+  const pathData = path.getPathData();
+
+  for (let i = 0; i < pathData.length; i++) {
+    const dataSegment = pathData[i];
+    const isFirstOrLastPoint = (i === 0 || i === pathData.length - 1);
+    const {type, values} = dataSegment;
+
+    if (type === 'M' || type === 'L') {
+      const [x, y] = values;
+      points.push({
+        x,
+        y: y * CURVE_PERCENT,
+        isLockedX: isFirstOrLastPoint
+      });
+    } else if (type === 'C') {
+      const [x1, y1, x2, y2, xNext, yNext] = values;
+      const prevPoint = points[i - 1];
+      const prevHandle = pointToAngle(
+        (x1 - prevPoint.x) * CURVE_PERCENT,
+        (y1 * CURVE_PERCENT) - prevPoint.y
+      );
+      prevPoint.handle2 = prevHandle;
+
+      const point = {
+        x: xNext,
+        y: yNext * CURVE_PERCENT,
+        type: 'disconnected',
+        handle1: pointToAngle((x2 - xNext) * CURVE_PERCENT, (y2 - yNext) * CURVE_PERCENT),
+        isLockedX: isFirstOrLastPoint
+      }
+
+      points.push(point);
+    }
+  }
+
+  return points;
+}

package.json

@@ -13,7 +13,10 @@
     "svg"
   ],
   "main": "app/build/mojs-curve-editor.js",
-  "scripts": {},
+  "scripts": {
+    "start": "webpack",
+    "dev": "webpack-dev-server"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/legomushroom/mojs-curve-editor.git"
@@ -32,6 +35,7 @@
   "dependencies": {
     "hammerjs": "^2.0.8",
     "preact": "^7.1.0",
+    "path-data-polyfill": "^1.0.0",
     "redux": "^3.5.2",
     "redux-recycle": "^1.2.0",
     "redux-undo": "^0.6.1"

readme.md

@@ -111,6 +111,9 @@ const curveEditor = new MojsCurveEditor({
   name:         'bounce curve'
   // if should preserve state on page reloads
   isSaveState:  true,
+  // start path - will be loaded on initialization of the curve,
+  // e.g. before any user modifications were made. Path of 'M0, 100 L100, 0' is set by default.
+  startPath:  'M0, 100 L100, 0',
   // callback on path change, accepts path string
   onChange:     function (path) {}
   // if should hide when minimized - useful when you try to embed the