refactor to preact

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -4,14 +4,35 @@
   position:       absolute;
   left:           calc( 10 * $PX );
   right:          calc( 10 * $PX );
-  margin-top:     calc( -32 * $PX );
-  border-radius:  calc( 6 * $PX ) calc( 6 * $PX ) 0 0;
-  background:     rgba( 61, 27, 60, 1 );
+  bottom:         100%;
+  /*margin-top:     calc( -32 * $PX );*/
   z-index:        1;
-  display:        none;
+  overflow:       hidden;
+  /*border:         1px solid red;*/
+  padding-top:    calc( 16*$PX );
+  box-sizing:     content-box;
+  /*height:         0;*/
+  /*transition:     height .2s ease-out;*/
+  /*transform:      scale(0); */
+  
+  &__inner {
+    border-radius:  calc( 6 * $PX ) calc( 6 * $PX ) 0 0;
+    background:     rgba( 61, 27, 60, 1 );
+    padding:        calc( 4 * $PX ) calc( 5 * $PX ) calc( 5 * $PX );
+    /*width:          100%;
+    height:         100%;
+    position:       absolute;*/
+    transform:      translateY(100%);
+    transition:     all .2s ease-out;
+  }
+
+  [data-component="resize-handle"] {
+    position:     absolute;
+    left:         50%;
+    bottom:       100%;
+  }
 
   &__input-wrap {
-    margin:         calc( 4 * $PX ) calc( 5 * $PX ) calc( 5 * $PX );
     border-radius:  calc( 2 * $PX );
     background:     #42103F;
     border:         1px solid $c-pastel-purple;
@@ -24,14 +45,25 @@
     color:          $c-white;
     font-size:      9px;
     font-family:    Arial, Helvetica, sans-serif;
-    letter-spacing: 0.45px;
+    letter-spacing: calc(0.45 * $PX);
     font-weight:    100;
     padding:        0 0.3em 0 0.8em;
     border:         none;
     width:          100%;
     height:         calc( 21*$PX );
+    white-space:    nowrap;
+    text-overflow:  ellipsis;
+  }
+  & ::selection {
+   background: $c-orange;
+  }
+
+  /*&.is-open {
+    transform:      none;
+    height:         calc( 40*$PX );
+  }*/
+
+  &.is-open &__inner {
+    transform:    translateY(0);
   }
-   & ::selection {
-     background: $c-orange;
-   }
 }

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

@@ -1 +1 @@
-{"code-panel":"_code-panel_1furt_3","code-panel__input-wrap":"_code-panel__input-wrap_1furt_1","code-panel__input-field":"_code-panel__input-field_1furt_1"}
+{"code-panel":"_code-panel_nnb9p_3","code-panel__inner":"_code-panel__inner_nnb9p_1","code-panel__input-wrap":"_code-panel__input-wrap_nnb9p_1","code-panel__input-field":"_code-panel__input-field_nnb9p_1","is-open":"_is-open_nnb9p_61"}

app/css/blocks/code-panel.postcss.css

@@ -1,18 +1,36 @@
 // import './tags/curve-editor.tag';
 require('../css/main');
-import {render, h} from 'preact';
-import CurveEditor from './tags/curve-editor';
-import store from './store';
 import { Provider } from 'preact-redux';
+import {render, h}  from 'preact';
+import CurveEditor  from './tags/curve-editor';
+import store        from './store';
+import C            from './constants';
 
 // TODO
-//   - select at touch
-//   - move bunch of points at once
+//   - instance dropdown on code panel
+//   - add orange point on seleced point control/ hightlight the control
+//   - save state to LC
 //   - add APIs
+//   - import path data
+//   - move bunch of points at once
 
 document.addEventListener('DOMContentLoaded', () => {
   render(
     <Provider store={store}>
       <CurveEditor />
     </Provider>, document.body);
 });
+
+store.dispatch({ type: 'POINT_ADD', data: { point: {x: 0,   y: C.CURVE_SIZE, isLockedX: true}, index: 0 } });
+store.dispatch({ type: 'POINT_ADD', data: { point: {x: 100, y: 0, isLockedX: true}, index: 1 } });
+
+//   makePoint({ x: 0,   y: C.CURVE_SIZE, isLockedX: true, type: 'straight' }),
+//   // makePoint({ x: 50,  y: C.CURVE_SIZE/2, type: 'mirrored' }),
+//   makePoint({ x: 100, y: 0, isLockedX: true })
+
+// curve
+//   .getFunction({ isInverseX: false, isInverseY: true, name: 'Some name' })
+//   .getCode()
+
+
+

app/css/blocks/code-panel.postcss.css.json

@@ -0,0 +1,10 @@
+export default (el, fn) => {
+  if (window.navigator.msPointerEnabled) {
+    el.addEventListener('MSPointerDown', fn);
+  } else if ( window.ontouchstart !== undefined ) {
+    el.addEventListener('touchstart', fn);
+    el.addEventListener('mousedown', fn);
+  } else {
+    el.addEventListener('mousedown', fn);
+  }
+}

app/js/app.babel.jsx

@@ -0,0 +1,19 @@
+
+import calculateSegment from './calculate-segment';
+
+export default (points) => {
+  let path     = '',
+      segments = [];
+
+  for (let index = 0; index < points.length-1; index++) {
+    const point     = points[index],
+          nextPoint = points[index+1];
+
+    const segment = calculateSegment( point, nextPoint, index );
+    segments.push(segment);
+    
+    path += segment.string;
+  }
+
+  return { path, segments };
+}

app/js/helpers/add-pointer-down.babel.js

@@ -0,0 +1,17 @@
+
+import angleToPoint from './angle-to-point';
+import C from '../constants';
+
+export default (point, handleIndex = 1) => {
+    const x      = point.x + point.tempX,
+          y      = point.y + point.tempY,
+          handle = point[`handle${handleIndex}`];
+
+  const CHAR = ( handleIndex === 2 ) ? 'C' : '';
+  if ( point.type !== 'straight' ) {
+    const handleCoords = angleToPoint( handle.angle, handle.radius );
+    return `${CHAR}${x + handleCoords.x/C.CURVE_PERCENT}, ${(y + handleCoords.y)/C.CURVE_PERCENT} `;
+  } else {
+    return `${CHAR}${x}, ${y/C.CURVE_PERCENT} `;
+  }
+}

app/js/helpers/calculate-path.babel.js

@@ -0,0 +1,32 @@
+import C from '../constants';
+import calculatePoint from './calculate-point';
+
+export default (point, nextPoint, index) => {
+    if ( !nextPoint ) { return 1; }
+
+    let string = '',
+        segmentString = '';
+
+    const x = point.x + point.tempX,
+          y = point.y + point.tempY,
+          xNext = nextPoint.x + nextPoint.tempX,
+          yNext = nextPoint.y + nextPoint.tempY;
+
+    const part1 = `M${x}, ${y/C.CURVE_PERCENT} `;
+    if ( index === 0 ) { string += part1 }
+    segmentString += part1;
+
+    const part2 = calculatePoint( point, 2 );
+    string += part2;
+    segmentString += part2;
+
+    const part3 = calculatePoint( nextPoint, 1 );
+    string += part3;
+    segmentString += part3;
+
+    const part4 = `${xNext}, ${yNext/C.CURVE_PERCENT} `;
+    string += part4;
+    segmentString += part4;
+
+    return { string, segmentString, index };
+}

app/js/helpers/calculate-point.babel.js

@@ -0,0 +1,16 @@
+import calculatePath from '../helpers/calculate-path';
+
+const INITIAL_STATE = {
+  isCode: false
+}
+
+const pointControls = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case 'CODE_TAP': {
+      return { ...state, isCode: !state.isCode };
+    }
+  }
+  return state;
+}
+
+export default pointControls;