curve: add scaleable background

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -1 +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"}
+{"curve":"_curve_3s9gm_5","curve__background":"_curve__background_3s9gm_1","curve__svg-wrapper":"_curve__svg-wrapper_3s9gm_1","curve__svg":"_curve__svg_3s9gm_1","curve__svg-segment":"_curve__svg-segment_3s9gm_1"}

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

@@ -1,7 +1,12 @@
 
 require('./point');
 
-<curve class={ this.CLASSES['curve']} style={this.styles.background}>
+<curve class={ this.CLASSES['curve']}>
+  
+  <div
+        class={ this.CLASSES['curve__background']}
+        style={this.styles.background} />
+
   <div class={ this.CLASSES['curve__svg-wrapper']} style={this.styles.transform}>
 
     <point
@@ -123,13 +128,19 @@ require('./point');
     this.getStyle = () => {
       const {resize} = this.state;
       let {temp_top} = resize;
+      let {temp_bottom} = resize;
+      let {temp_right} = resize;
 
       temp_top += resize.top;
+      temp_bottom += resize.bottom;
+      temp_right += resize.right;
 
       if (C.CURVE_SIZE - temp_top < C.CURVE_SIZE) { temp_top = 0; }
       temp_top = mod( temp_top, -1 );
 
-      const background = `background-position: 0 ${-temp_top - 1}px`;
+      const scale = `transform: scaleX(${(C.CURVE_SIZE + Math.max(temp_right,0))/C.CURVE_SIZE})`;
+      const bgTransform = `${mojs.h.prefix.css}${scale}; ${scale};`;
+      const background = `background-position: 0 ${-temp_top - 1}px; height: ${C.CURVE_SIZE + Math.max(Math.abs(temp_top), 0) + Math.max(temp_bottom, 0)}px; ${bgTransform}`;
       const transform  = `transform: translate(0px, ${-temp_top}px)`;
 
       return {

app/css/blocks/curve.postcss.css

@@ -89,7 +89,7 @@ require('./little-handle');
         returnValue = e.deltaY;
       }
 
-      return roundTo( returnValue, 5*C.CURVE_PERCENT, 1*C.CURVE_PERCENT );
+      return roundTo( returnValue, 5*C.CURVE_PERCENT, 2*C.CURVE_PERCENT );
     }
 
     this.on('mount', () => {
@@ -99,10 +99,12 @@ require('./little-handle');
       mc.add(new Hammer.Pan({ threshold: 0 }));
       mc
         .on('pan', (e) => {
+          console.time('point translate');
           store.dispatch({
             type: 'POINT_TRANSLATE',
             data: { x: getTempX(e), y: getTempY(e), index: this._index }
           });
+          console.timeEnd('point translate');
           e.stopPropagation();
         })
         .on('panend', (e) => {

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

@@ -16,7 +16,10 @@
     require('../../css/blocks/icon');
 
     this.on('mount', () => {
-      var hammertime = propagating(new Hammer(this.root))
+      const mc = propagating(new Hammer.Manager(this.root));
+      mc.add(new Hammer.Pan({ threshold: 0 }));
+      mc
+      // var hammertime = propagating(new Hammer(this.root))
         .on('pan', (ev) => {
           const x = ev.deltaX, y = ev.deltaY;
           store.dispatch({ type: 'EDITOR_RESIZE', data: { x, y, type } });