working on refactor to preact

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -32,33 +32,33 @@
     top:            0;
     right:          0;
     bottom:         0;
+  }
 
-    $radius: 16;
-    $leftPanel: 42;
-    & resize-handle {
-      position:       absolute;
-
-      &[type="top"] {
-        top:          calc( -$radius*$PX );
-      }
+  $radius: 16;
+  $leftPanel: 42;
+  &__resize-handle {
+    position:       absolute;
 
-      &[type="bottom"] {
-        bottom:       0;
-      }
+    &[data-type="top"] {
+      top:          calc( -$radius*$PX );
+    }
 
-      &[type="top"],
-      &[type="bottom"] {
-        left:         50%;
-        margin-left:  calc( (-$radius - $gap/2)*$PX );
-      }
+    &[data-type="bottom"] {
+      bottom:       0;
+    }
 
-      &[type="right"] {
-        right:        calc( -$radius*$PX );
-        top:          50%;
-        margin-top:   calc( -$radius*$PX );
-      }
+    &[data-type="top"],
+    &[data-type="bottom"] {
+      left:         50%;
+      margin-left:  calc( (-$radius - $gap/2)*$PX );
+    }
 
+    &[data-type="right"] {
+      right:        calc( -$radius*$PX );
+      top:          50%;
+      margin-top:   calc( -$radius*$PX );
     }
+
   }
 
   &__anchor-buttons {
@@ -81,7 +81,7 @@
     margin-left:  calc( 1 * $PX );
     transform:    translateX(-50%);
 
-    & icon {
+    & [data-component="icon"] {
       fill:       $c-orange;
       width:      calc( 12*$PX );
       height:     calc( 12*$PX );

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

@@ -1 +1 @@
-{"curve-editor":"_curve-editor_1vq6l_4","curve-editor__left":"_curve-editor__left_1vq6l_1","curve-editor__right":"_curve-editor__right_1vq6l_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_1vq6l_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_1vq6l_1"}
+{"curve-editor":"_curve-editor_1co9o_4","curve-editor__left":"_curve-editor__left_1co9o_1","curve-editor__right":"_curve-editor__right_1co9o_1","curve-editor__resize-handle":"_curve-editor__resize-handle_1co9o_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_1co9o_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_1co9o_1"}

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

@@ -1 +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"}
+{"curve":"_curve_v5h9c_5","curve__background":"_curve__background_v5h9c_1","curve__svg-wrapper":"_curve__svg-wrapper_v5h9c_1","curve__svg":"_curve__svg_v5h9c_1","curve__svg-segment":"_curve__svg-segment_v5h9c_1"}

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

@@ -23,7 +23,7 @@ $radius: 16;
     z-index:      2;
   }
 
-  & icon {
+  & [data-component="icon"] {
     position:     absolute;
     left:         0;
     top:          calc( -7*$PX )

app/css/blocks/curve.postcss.css

@@ -1 +1 @@
-{"resize-handle":"_resize-handle_5gtb1_4","resize-handle--right":"_resize-handle--right_5gtb1_1","resize-handle--bottom":"_resize-handle--bottom_5gtb1_1"}
+{"resize-handle":"_resize-handle_k81kc_4","resize-handle--right":"_resize-handle--right_k81kc_1","resize-handle--bottom":"_resize-handle--bottom_k81kc_1"}

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

@@ -3,13 +3,16 @@ require('../css/main');
 import {render, h} from 'preact';
 import CurveEditor from './tags/curve-editor';
 import store from './store';
+import { Provider } from 'preact-redux';
 
 // TODO
 //   - init points with function
 //   - move bunch of points at once
 //   - add grid background
 
 document.addEventListener('DOMContentLoaded', () => {
-  render(<CurveEditor state={ store.getState() }  />, document.body);
-  // store.subscribe(renderRoot);
+  render(
+    <Provider store={store}>
+      <CurveEditor />
+    </Provider>, document.body);
 });

app/css/blocks/resize-handle.postcss.css

@@ -1,7 +1,12 @@
 import C from '../constants';
 
 const INITIAL_STATE = {
-  translate:    { x: 150, y: 100 },
+  x:            150,
+  tempX:        0,
+
+  y:            100,
+  tempY:        0,
+
   top:          0,
   temp_top:     0,
 
@@ -44,7 +49,18 @@ const resizeReducer = (state = INITIAL_STATE, action) => {
       return newState;
     }
 
-    case 'EDITOR_TRANSLATE': { return { ...state, translate: action.data }; }
+    case 'EDITOR_TRANSLATE': {
+      const {x, y} = action.data;
+      return { ...state, tempX: x, tempY: y };
+    }
+
+    case 'EDITOR_TRANSLATE_END': {
+      let {x, y} = action.data;
+      x += state.x;
+      y += state.y;
+      return { ...state, x, y, tempX: 0, tempY: 0 };
+    }
+
   }
   return state;
 }