curve-editor: add background

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -1 +1 @@
-{"curve":"_curve_1y7gw_5","curve__svg-wrapper":"_curve__svg-wrapper_1y7gw_1","curve__svg":"_curve__svg_1y7gw_1","curve__svg-segment":"_curve__svg-segment_1y7gw_1"}
+{"curve":"_curve_19x0u_5","curve__svg-wrapper":"_curve__svg-wrapper_19x0u_1","curve__svg":"_curve__svg_19x0u_1","curve__svg-segment":"_curve__svg-segment_19x0u_1"}

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

@@ -3,6 +3,11 @@ require('../css/main');
 
 import store from './store';
 
+// TODO
+//   - init points with function
+//   - move bunch of points at once
+//   - add grid background
+
 document.addEventListener('DOMContentLoaded', () => {
   riot.mount('curve-editor', { store });
 });

app/css/blocks/curve.postcss.css

@@ -36,15 +36,15 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
     }
 
     case 'POINT_TRANSLATE_END': {
-      const {data}   = action,
-            {index}  = data,
+      const index    = action.data,
             oldPoint = state[index],
             newState = [ ...state ];
 
-      newState[ data.index ] = {
+      newState[ index ] = {
           ...oldPoint,
-          tempX: 0, tempY: 0,
-          x: data.x, y: data.y
+          x: oldPoint.x + oldPoint.tempX,
+          y: oldPoint.y + oldPoint.tempY,
+          tempX: 0, tempY: 0
         }
 
       return newState;
@@ -126,7 +126,6 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
         // if item was selected - set the new `type`
         ( selected.indexOf(i) !== -1 ) && (newState[i].type = type);
 
-        
         const index = i;
         const point = newState[index];
         const sibPoint = (index === newState.length-1)

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

@@ -7,11 +7,6 @@ require('./icon-divider');
 require('./resize-handle');
 require('./point-controls');
 
-<!--
-  TODO:
-    - move bunch of points at once
-  -->
-
 <curve-editor class={this.CLASSES['curve-editor']} style={this.getStyle()}>
   <code-panel />
   <icons />
@@ -38,7 +33,10 @@ require('./point-controls');
     import C from '../constants';
 
     const {store} = opts;
-    store.subscribe(this.update.bind(this));
+    store.subscribe( () => {
+      this.resize = store.getState().resize;
+      this.update();
+    });
 
     import Hammer from 'hammerjs';
     import propagating from 'propagating-hammerjs';

app/js/app.babel.js

@@ -6,7 +6,8 @@ require('./point');
 
     <point
           each={ point, _index in points }
-          points-count={parent.points.length} />
+          points-count={parent.points.length}
+          resize = {parent.state.resize} />
 
     <svg  height="350"
           viewBox="0 0 100 100"

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

@@ -43,6 +43,8 @@
     import Hammer from 'hammerjs';
     import propagating from 'propagating-hammerjs';
     this.on('mount', () => {
+      // const mc = propagating(new Hammer.Manager(this.root));
+      // mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
       var hammertime = propagating(new Hammer(this.root))
         .on('pan', (e) => {
           const point = angleToPoint( this.angle, this.radius ),

app/js/tags/curve-editor.tag

@@ -24,9 +24,13 @@ require('./little-handle');
       // dont set the handle2 for end point
       (this._index !== this.opts.pointsCount-1) && this.handles.push(this.point.handle2);
     }
-    
+
+    this.resize = this.opts.resize;
     this.getHandles();
-    store.subscribe(() => { this.getHandles(); this.update(); });
+    store.subscribe(() => {
+      this.resize = this.opts.resize;
+      this.getHandles(); this.update();
+    });
 
     this.getClass = () => {
       const isSelected = (this.point.isSelected)
@@ -38,10 +42,8 @@ require('./little-handle');
     }
 
     this.getStyle = () => {
-      // console.log(this.point.tempX, this.point.handle1, this.point.handle2);
-      const {resize}  = store.getState(),
-            x         = clamp(this.point.x + this.point.tempX, 0, 100),
-            cleanX    = x * resize.scalerX;
+      const x         = clamp(this.point.x + this.point.tempX, 0, 100),
+            cleanX    = x * this.resize.scalerX;
 
       let y = this.point.y + this.point.tempY;
 
@@ -55,44 +57,44 @@ require('./little-handle');
     import roundTo from '../helpers/round-to';
 
     const getTempX = (e) => {
-      const {resize} = store.getState();
 
       // if point is not locked to x axes ->
       // calculate delta regarding scaler
       if ( this.point.isLockedX ) { return 0 };
 
-      const x = e.deltaX/resize.scalerX;
+      const x = e.deltaX/this.resize.scalerX;
       if ( this.point.x + x < 0 ) { return 0 - this.point.x; }
       else if ( this.point.x + x > 100 ) { return 100 - this.point.x; }
       return roundTo( x, 5, 1.5 );
     }
 
     const getY = (e) => {
-      const {resize} = store.getState();
       const y = this.point.y + e.deltaY
       // clamp y to the size of curve
-      return clamp( y, resize.top, C.CURVE_SIZE + resize.bottom ); 
+      return clamp( y, this.resize.top, C.CURVE_SIZE + this.resize.bottom ); 
     }
 
     // get y delta reagarding curve bounds
     const getTempY = (e) => {
-      let {resize} = store.getState(),
-            y = this.point.y + e.deltaY;
+      let y = this.point.y + e.deltaY;
 
       let returnValue = y;
-      if ( y < resize.top ) {
-        returnValue = (resize.top - this.point.y);
-      } else if ( y > C.CURVE_SIZE + resize.bottom ) { returnValue = C.CURVE_SIZE + resize.bottom - this.point.y
+      if ( y < this.resize.top ) {
+        returnValue = (this.resize.top - this.point.y);
+      } else if ( y > C.CURVE_SIZE + this.resize.bottom ) {
+        returnValue = C.CURVE_SIZE + this.resize.bottom - this.point.y;
       } else {
         returnValue = e.deltaY;
       }
 
-      return roundTo( returnValue, 10*C.CURVE_PERCENT, 2*C.CURVE_PERCENT );
-    
+      return roundTo( returnValue, 5*C.CURVE_PERCENT, 1*C.CURVE_PERCENT );
     }
 
     this.on('mount', () => {
-      var hammertime = propagating(new Hammer(this.root))
+      const mc = propagating(new Hammer.Manager(this.root));
+      mc.add(new Hammer.Pan({ threshold: 5, pointers: 0 }));
+      // var hammertime = propagating(new Hammer(this.root, { threshold: 0, pointers: 0 }))
+      mc
         .on('pan', (e) => {
           store.dispatch({
             type: 'POINT_TRANSLATE',
@@ -101,16 +103,10 @@ require('./little-handle');
           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
-            },
+            data: this._index,
             isRecord: true
           });