point, little handle: refactor to preact

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -1 +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"}
+{"curve":"_curve_1u41l_5","curve__background":"_curve__background_1u41l_1","curve__svg-wrapper":"_curve__svg-wrapper_1u41l_1","curve__svg":"_curve__svg_1u41l_1","curve__svg-segment":"_curve__svg-segment_1u41l_1"}

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

@@ -25,7 +25,7 @@ $size: 10;
     margin-top:   calc( -$size*$PX );
   }
 
-  little-handle { display: none; }
+  [data-component="little-handle"] { display: none; }
 
   &:hover,
   &.is-selected {
@@ -34,13 +34,13 @@ $size: 10;
   }
 
   &.is-selected {
-    & little-handle {
+    & [data-component="little-handle"] {
       display:    block;
     }
   }
 
   &.is-hide-handles {
-    & little-handle {
+    & [data-component="little-handle"] {
       display:    none;
     } 
   }

app/css/blocks/curve.postcss.css

@@ -1 +1 @@
-{"point":"_point_1xqxg_5","point__touch":"_point__touch_1xqxg_1","is-selected":"_is-selected_1xqxg_31","is-hide-handles":"_is-hide-handles_1xqxg_42"}
+{"point":"_point_17pb1_5","point__touch":"_point__touch_17pb1_1","is-selected":"_is-selected_17pb1_31","is-hide-handles":"_is-hide-handles_17pb1_42"}

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

@@ -0,0 +1,7 @@
+
+
+export default (value, min, max) => {
+  return (value < min)
+    ? min
+    : (value > max) ? max : value;
+}

app/css/blocks/point.postcss.css

@@ -0,0 +1,7 @@
+export default (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 };
+}

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

@@ -4,7 +4,7 @@ import ResizeHandle from './resize-handle';
 
 const CLASSES = require('../../css/blocks/curve-editor.postcss.css.json');
 
-const CurveEditorRight = (state) => {
+const CurveEditorRight = ({state}) => {
   return (<div className={CLASSES['curve-editor__right']}>
             <Curve state ={ state } />
             <ResizeHandle type="top" className={ CLASSES['curve-editor__resize-handle'] } />

app/js/helpers/clamp.babel.js

@@ -1,54 +1,68 @@
 import { h, Component } from 'preact';
 import mod from '../helpers/resize-mod';
 import C from '../constants';
+import Point from './point';
 require('../../css/blocks/curve');
 
 const CLASSES = require('../../css/blocks/curve.postcss.css.json');
 class Curve extends Component {
   render () {
-    const styles = this._getStyle( this.props.state );
+    const {state} = this.props,
+          styles  = this._getStyle( state ),
+          points  = this._renderPoints( state );
 
     return <div className={CLASSES['curve']}>
-              <div
-                  className={ CLASSES['curve__background']}
-                  style={styles.background} />
-              <div
-                  className={ CLASSES['curve__svg-wrapper']}
-                  style={styles.transform}>
+              <div  className={ CLASSES['curve__background']}
+                    style={styles.background} />
+              <div  className={ CLASSES['curve__svg-wrapper']}
+                    style={styles.transform}>
+
+                { points }
 
                 <svg  height={ C.CURVE_SIZE }
                       viewBox="0 0 100 100"
                       preserveAspectRatio="none"
                       class={ CLASSES['curve__svg'] }>
-
                 </svg>
 
               </div>
 
             </div>;
   }
 
-  _getStyle({state}) {
+  _getStyle(state) {
     const {resize} = state;
-    let {temp_top, temp_bottom, temp_right} = resize;
+    let {temp_top, 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 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; height: ${C.CURVE_SIZE + Math.max(Math.abs(temp_top), 0) + Math.max(temp_bottom, 0)}px; ${bgTransform}`,
+          background = `background-position: 0 ${-temp_top - 1}px; ${bgTransform}`,
           transform  = `transform: translate(0px, ${-temp_top}px)`;
-
     return {
       background,
       transform: `${mojs.h.prefix.css}${transform}; ${transform};`
     };
   }
+
+  _renderPoints (state) {
+    const pointsData = state.points.present,
+          points     = [],
+          len        = pointsData.length;
+
+    for (var i = 0; i < len; i++) {
+      points.push(
+        <Point point={ pointsData[i] } state={state} index={i} pointsCount={len} />
+        );
+    }
+
+    return points;
+  }
 }
 
 export default Curve;