curve: ADD_POINT scaler issue fix

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -1,8 +1,18 @@
-// class Pool {
-//   constructor () {
-//     this._states = []
-//   }
-// }
+class Pool {
+  constructor () {
+    this._states = [];
+  }
+  push (states) {
+    // this._states.push(states);
+    // console.log(this._states.length);
+    return this;
+  }
 
+  clear () {
+    this._states = [];
+    return this;
+  }
+}
 
-export default [];
+
+export default new Pool;

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

@@ -1,9 +1,12 @@
+import pool from '../pool';
+
 const INITIAL_STATE = {
   isShow: false,
   type:   'straight'
 }
 
 const pointControls = (state = INITIAL_STATE, action) => {
+  pool.push( state );
   switch (action.type) {
     // probably redundant
     // case 'POINT_ADD': {

app/js/pool.babel.js

@@ -4,6 +4,7 @@ import initPoints from '../helpers/init-points';
 import calculatePath from '../helpers/calculate-path';
 import deselectAll from '../helpers/deselect-all';
 import findSelectedIndecies from '../helpers/find-selected-indecies';
+import pool from '../pool';
 
 const INITIAL_STATE = {
   path:       '',
@@ -18,6 +19,7 @@ const INITIAL_STATE = {
 }
 
 const pointsReducer = (state = INITIAL_STATE, action) => {
+  pool.push( state );
   switch( action.type ) {
     case 'SET_EDITOR_NAME': {
       return { ...state, name: action.data };
@@ -72,8 +74,6 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
         ...deselected.points.slice( index )
       ];
 
-      console.log( index, point, newPoints );
-
       const points = (newPoints.length > 1)
                         ? initPoints( newPoints ) : newPoints;
 

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

@@ -1,3 +1,5 @@
+import pool from '../pool';
+
 const INITIAL_STATE = {
   selected:   0,
   lines:      []
@@ -19,6 +21,8 @@ const makeProgressLine = (o ={}, state) => {
 }
 
 const progresses = (state = INITIAL_STATE, action) => {
+  pool.push( state );
+  
   switch (action.type) {
 
     case 'ADD_PROGRESS_LINE': {

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

@@ -1,4 +1,5 @@
 import C from '../constants';
+import pool from '../pool';
 
 const INITIAL_STATE = {
   x:            20,
@@ -24,6 +25,8 @@ const INITIAL_STATE = {
 }
 
 const resizeReducer = (state = INITIAL_STATE, action) => {
+  pool.push( state );
+  
   switch (action.type) {
     case 'EDITOR_RESIZE': {
       const {data} = action,

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

@@ -23,9 +23,8 @@ class Curve extends Component {
               <div  id="js-background"
                     className={ CLASSES['curve__background']}
                     style={ styles.background }>
-
-                <svg preserveAspectRatio="none" height="700px" viewBox="0 0 350 700" version="1.1">
-                  <pattern id="rect-paper" x="0" y="0" width="1" height="1">
+                <svg preserveAspectRatio="none" height={`${styles.height}px`} viewBox={`0 0 ${350+Math.random()*0.0001} ${styles.height}`}>
+                  <pattern id="rect-paper" x="0" y={`${-styles.svgTop}`} height="350" width="350" patternUnits="userSpaceOnUse">
                     <g id="Group" transform="translate(-1.000000, 0.000000)" stroke="#FFFFFF" stroke-width="1" fill="none">
                         <path vector-effect="non-scaling-stroke" d="M333.497821,350.501088 L333.497821,0.501088302" opacity="0.25"></path>
                         <path vector-effect="non-scaling-stroke" d="M315.997821,350.501088 L315.997821,0.501088302" opacity="0.25"></path>
@@ -69,7 +68,7 @@ class Curve extends Component {
                       </g>
                     </pattern>
 
-                  <rect width="350" height="700" fill="url(#rect-paper)" />
+                  <rect width="350" height={styles.height} fill="url(#rect-paper)" />
                   </svg>
 
               </div>
@@ -107,17 +106,14 @@ class Curve extends Component {
 
   _getStyle(state) {
     const {resize} = state;
-    let {temp_top, temp_right, panTempY} = resize;
-
-    panTempY    += resize.panY;
+    let {temp_top, temp_bottom, temp_right, panTempY} = resize;
+    let height = C.CURVE_SIZE - (temp_top + resize.top)
+                              + (temp_bottom + resize.bottom);
 
-    temp_top    += resize.top - panTempY;
-    temp_right  += resize.right;
+    panTempY   += resize.panY;
 
-    // const scale = `transform: scaleX(${(C.CURVE_SIZE + Math.max(temp_right,0))/C.CURVE_SIZE})`,
-    //       bgTransform = `${mojs.h.prefix.css}${scale}; ${scale};`,
-    //       background = `background-position: 0 ${-temp_top - 1}px; ${bgTransform}`,
-    //       transform  = `transform: translate(0px, ${-temp_top}px)`;
+    temp_top   += resize.top - panTempY;
+    temp_right += resize.right;
 
     const scaleX = (C.CURVE_SIZE + Math.max(temp_right,0))/C.CURVE_SIZE;
     const scale = `width: ${C.CURVE_SIZE*scaleX}px`,
@@ -126,8 +122,10 @@ class Curve extends Component {
           transform  = `transform: translate(0px, ${-temp_top}px)`;
 
     return {
+      transform: `${mojs.h.prefix.css}${transform}; ${transform};`,
       background,
-      transform: `${mojs.h.prefix.css}${transform}; ${transform};`
+      height,
+      svgTop: temp_top
     };
   }
 
@@ -204,12 +202,13 @@ class Curve extends Component {
 
     mc
       .on('tap', (e) => {
-        const ev     = e.srcEvent,
-              target = ev.target;
+        const {state} = this.props;
+        const ev      = e.srcEvent;
+        const target  = ev.target;
         // handle paths only
         if ( target.tagName.toLowerCase() !== 'path' ) { return; }
         // coordinates
-        const x  = ev.offsetX/C.CURVE_PERCENT,
+        const x  = ev.offsetX/state.resize.scalerX,
               y  = ev.offsetY,
               index = parseInt(target.getAttribute('data-index')) + 1;
 

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

@@ -2,6 +2,7 @@ import {h, Component} from 'preact';
 import angleToPoint from '../helpers/angle-to-point';
 import pointToAngle from '../helpers/point-to-angle';
 import C from '../constants';
+import pool from '../pool';
 
 import Hammer from 'hammerjs';
 import propagating from 'propagating-hammerjs';
@@ -76,6 +77,7 @@ class LittleHandle extends Component {
       })
       .on('panend', (e) => {
         store.dispatch({ type: 'HANDLE_TRANSLATE_END', isRecord: true });
+        pool.clear();
         e.stopPropagation();
       });
   }