curve-editor: fix the later points to cause translate on parent

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -20,6 +20,7 @@
     top:          0;
     bottom:       0;
     padding:      calc( $gap * $PX );
+    cursor:       move;
 
     & [data-component="icon-divider"] {
       margin: calc( 10*$PX ) auto;

app/build/mojs-curve-editor.min.js

@@ -1 +1 @@
-{"curve-editor":"_curve-editor_ggsv0_4","curve-editor__left":"_curve-editor__left_ggsv0_1","curve-editor__right":"_curve-editor__right_ggsv0_1","curve-editor__resize-handle":"_curve-editor__resize-handle_ggsv0_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_ggsv0_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_ggsv0_1"}
+{"curve-editor":"_curve-editor_1f8r5_4","curve-editor__left":"_curve-editor__left_1f8r5_1","curve-editor__right":"_curve-editor__right_1f8r5_1","curve-editor__resize-handle":"_curve-editor__resize-handle_1f8r5_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_1f8r5_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_1f8r5_1"}

app/css/blocks/curve-editor.postcss.css

@@ -1 +1 @@
-{"curve":"_curve_1u41l_5","curve__background":"_curve__background_1u41l_1","curve__svg-wrapper":"_curve__svg-wrapper_1u41l_1","curve__svg":"_curve__svg_1u41l_1","curve__svg-segment":"_curve__svg-segment_1u41l_1"}
+{"curve":"_curve_gvcrn_5","curve__background":"_curve__background_gvcrn_1","curve__svg-wrapper":"_curve__svg-wrapper_gvcrn_1","curve__svg":"_curve__svg_gvcrn_1","curve__svg-segment":"_curve__svg-segment_gvcrn_1"}

app/css/blocks/curve-editor.postcss.css.json

@@ -11,7 +11,8 @@ const pointControls = (state = INITIAL_STATE, action) => {
     //   return { ...state, isShow: true, type: 'straight' };
     // }
     case 'POINT_SELECT': {
-      return { ...state, isShow: !action.isDeselect, type: action.data.type };
+      const type = action.data.type;
+      return { ...state, isShow: !action.isDeselect, type };
     }
     case 'POINT_CHANGE_TYPE': {
       return { ...state, type: action.data }; 

app/css/blocks/curve.postcss.css

@@ -8,7 +8,7 @@ import PointControls from './point-controls';
 const CLASSES = require('../../css/blocks/curve-editor.postcss.css.json');
 
 const CurveEditorLeft = ({state}) => {
-  return  <div className={CLASSES['curve-editor__left']}>
+  return  <div className={CLASSES['curve-editor__left']} id="js-left-panel">
             <IconButton shape="code" />
             <IconDivider />
             <PointControls  state={state}

app/css/blocks/curve.postcss.css.json

@@ -54,7 +54,8 @@ class CurveEditor extends Component {
 
   componentDidMount () {
     const {store} = this.context,
-          mc = propagating(new Hammer.Manager(this.base));
+          el = this.base.querySelector('#js-left-panel'),
+          mc = propagating(new Hammer.Manager(el));
 
     mc.add(new Hammer.Pan({ threshold: 0 }));
     mc
@@ -66,7 +67,7 @@ class CurveEditor extends Component {
         const x = e.deltaX, y = e.deltaY;
         store.dispatch({ type: 'EDITOR_TRANSLATE_END', data: { x, y } })
       })
-      .on('tap', (e) => { store.dispatch({ type: 'POINT_DESELECT_ALL' }); });
+      // .on('tap', (e) => { store.dispatch({ type: 'POINT_DESELECT_ALL' }); });
 
     this._addKeyUp();
     store.subscribe(this.forceUpdate.bind(this));

app/js/reducers/point-controls-reducer.babel.js

@@ -26,6 +26,7 @@ class Curve extends Component {
                 <svg  height={ C.CURVE_SIZE }
                       viewBox="0 0 100 100"
                       preserveAspectRatio="none"
+                      id="js-svg"
                       class={ CLASSES['curve__svg'] }>
 
                   <path d={path}
@@ -160,7 +161,7 @@ class Curve extends Component {
     const el = this.base.querySelector('#js-segments'),
           mc = propagating(new Hammer.Manager(el));
 
-    mc.add(new Hammer.Pan({ threshold: 0 }));
+    // mc.add(new Hammer.Pan({ threshold: 0 }));
     mc.add(new Hammer.Tap);
 
     mc
@@ -182,14 +183,20 @@ class Curve extends Component {
 
         store.dispatch({
           type: 'POINT_SELECT',
-          data: { index }
+          data: { index, type: 'straight' }
         });
 
         e.stopPropagation();
-      })
-    .on('tap', (e) => {
-      e.stopPropagation();
     });
+
+    const svg   = this.base.querySelector('#js-svg'),
+          svgMc = propagating(new Hammer.Manager(svg));
+
+    svgMc.add(new Hammer.Tap);
+
+    svgMc
+      .on('tap', (e) => { store.dispatch({ type: 'POINT_DESELECT_ALL' }); });
+
   }
 }