little-handle: add angle/radius properties instead of x/y

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -8,6 +8,7 @@
   border-radius:  calc( 6 * $PX ) calc( 6 * $PX ) 0 0;
   background:     rgba( 61, 27, 60, 1 );
   z-index:        1;
+  display:        none;
 
   &__input-wrap {
     margin:         calc( 4 * $PX ) calc( 5 * $PX ) calc( 5 * $PX );
@@ -24,7 +25,6 @@
     font-size:      9px;
     font-family:    Arial, Helvetica, sans-serif;
     letter-spacing: 0.45px;
-    line-height:    21px;
     font-weight:    100;
     padding:        0 0.3em 0 0.8em;
     border:         none;

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

@@ -1 +1 @@
-{"code-panel":"_code-panel_1tvha_3","code-panel__input-wrap":"_code-panel__input-wrap_1tvha_1","code-panel__input-field":"_code-panel__input-field_1tvha_1"}
+{"code-panel":"_code-panel_1furt_3","code-panel__input-wrap":"_code-panel__input-wrap_1furt_1","code-panel__input-field":"_code-panel__input-field_1furt_1"}

app/css/blocks/code-panel.postcss.css

@@ -38,7 +38,8 @@ $size: 10;
 
   &:hover,
   &.is-selected {
-    border-color: #8C6D8B;
+    /*border-color: #8C6D8B;*/
+    border-color: $c-orange;
   }
 
   &.is-selected {

app/css/blocks/code-panel.postcss.css.json

@@ -1 +1 @@
-{"point":"_point_at09i_5","is-selected":"_is-selected_at09i_40","is-hide-handles":"_is-hide-handles_at09i_50"}
+{"point":"_point_3a5h7_5","is-selected":"_is-selected_3a5h7_40","is-hide-handles":"_is-hide-handles_3a5h7_51"}

app/css/blocks/point.postcss.css

@@ -3,6 +3,23 @@ const fallback = ( value, fallback ) => {
   return ( value != null ) ? value : fallback;
 }
 
+
+const makeHandlePoint = (o={}) => {
+  return {
+    index:    fallback( o.index, 0 ),
+    // coordinates
+    angle:    fallback( o.angle, -45 ),
+    radius:   fallback( o.radius, 25 ),
+    // temporary coordinates (when user moves the point) -
+    // should not be in history
+    tempAngle:  fallback( o.tempAngle, 0 ),
+    tempRadius: fallback( o.tempRadius, 0 ),
+    // state
+    isTouched:  fallback( o.isTouched, false ),
+    isSelected: fallback( o.isSelected, false ),
+  };
+}
+
 const makePositionPoint = (o={}) => {
   return {
     // coordinates
@@ -30,8 +47,8 @@ const makePoint = (o = {}) => {
     // add position attributes to self
     ...makePositionPoint(o),
     // add curve handles
-    handle1: makePositionPoint(o.handle1 || { x: -25, y: -25 }),
-    handle2: makePositionPoint(o.handle2 || { x:  25, y: -25 })
+    handle1: makeHandlePoint(o.handle1 || { index: 1 }),
+    handle2: makeHandlePoint(o.handle2 || { index: 2 })
   };
 }
 

app/css/blocks/point.postcss.css.json

@@ -98,10 +98,29 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
 
       return newState;
     }
-
+    
     case 'POINT_DESELECT_ALL': {
       return deslectAll( state );
     }
+
+
+    // HANDLES
+    case 'HANDLE_TRANSLATE': {
+      const {data} = action;
+      // create new state and copy the new point into it
+      const newState = [...state];
+      const newPoint = { ...newState[data.parentIndex] };
+      newState[data.parentIndex] = newPoint;
+      // create handle and copy it into the new point
+      const handleName = `handle${data.index}`;
+      const newHandle = { ...newPoint[handleName] };
+      newPoint[ handleName ] = newHandle;
+      // finally add angle and radius
+      newHandle.angle  = data.angle;
+      newHandle.radius = data.radius;
+      
+      return newState;
+    }
   }
   return state;
 }

app/js/helpers/make-point.babel.js

@@ -1,6 +1,6 @@
 
 const INITIAL_STATE = {
-  translate:    { x: 150, y: 150 },
+  translate:    { x: 150, y: 100 },
   top:          0,
   temp_top:     0,
 

app/js/reducers/points-reducer.babel.js

@@ -1,23 +1,85 @@
 
+
+
 <little-handle class={ this.CLASSES['little-handle'] } style={this.getStyle()}>
 
   <script type="babel">
     this.CLASSES = require('../../css/blocks/little-handle.postcss.css.json');
     require('../../css/blocks/little-handle');
+    import store from '../store';
+    store.subscribe(() => {
+      this.update();
+    });
+
+    const angleToPoint = (angle, radius) => {
+      return mojs.h.getRadialPoint({ angle, radius, center: { x: 0, y: 0 } })
+    }
+
+    const anglePointToAngle = (x, y) => {
+      let   radius  = Math.sqrt( x*x + y*y ),
+            angle   = Math.atan( y/x ) * (180/Math.PI) - 90;
+      if ( x > 0 ) { angle = angle - 180 };
+
+      return { radius, angle };
+    }
 
     this.getStyle = () => {
-      // const {resize}  = store.getState(),
-      //       x         = clamp(this.point.x + this.point.tempX, 0, 100),
-      //       cleanX    = x * resize.scalerX;
-      
-      // let y = this.point.y + this.point.tempY;
-      const x = this.x + this.tempX,
-            y = this.y + this.tempY;
-
-      const translate = `transform: translate(${x}px, ${y}px)`;
+      const point = angleToPoint( this.angle, this.radius );
+
+      const translate = `transform: translate(${point.x}px, ${point.y}px) rotate(${this.angle}deg)`;
       return `${mojs.h.prefix.css}${translate}; ${translate}`;
     }
 
+    import Hammer from 'hammerjs';
+    import propagating from 'propagating-hammerjs';
+    this.on('mount', () => {
+      var hammertime = propagating(new Hammer(this.root))
+        .on('pan', (e) => {
+          const point = angleToPoint( this.angle, this.radius ),
+                newX  = point.x + e.deltaX,
+                newY  = point.y + e.deltaY;
+
+          store.dispatch({
+            type: 'HANDLE_TRANSLATE',
+            data: {
+              index: this.index,
+              parentIndex: this.opts.parentIndex,
+              ...anglePointToAngle( newX, newY )
+            }
+          });
+
+          e.stopPropagation();
+        })
+        .on('panend', (e) => {
+        //   // reset temporary deltas
+        //   store.dispatch({ type: 'POINT_TRANSLATE', data: { x: 0, y: 0, index: this._index } });
+        //   // fire translate end and save it to the store
+        //   store.dispatch({
+        //     type: 'POINT_TRANSLATE_END',
+        //     data: {
+        //       x: this.point.x + getTempX(e),
+        //       y: getY(e),
+        //       index: this._index
+        //     },
+        //     isRecord: true
+        //   });
+
+          e.stopPropagation();
+        })
+        // .on('tap', (e) => {
+        //   store.dispatch({
+        //     type: 'POINT_SELECT',
+        //     data: {
+        //       index:      this._index,
+        //       type:       this.point.type,
+        //       isDeselect: !e.srcEvent.shiftKey
+        //     }
+
+        //   });
+        //   e.stopPropagation();
+        // });
+    });
+
   </script>
 
 </little-handle>