mockups: initial commit

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -8,7 +8,7 @@
   width:          calc( 403 * $PX );
   height:         calc( 378 * $PX );
   border-radius:  calc( 12 * $PX );
-  background:     rgba( 58, 8, 58, .85 );
+  background:     #572B51;
   z-index:        100;
   box-shadow:     2px 2px 2px rgba(0,0,0,.38);
 

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

@@ -1 +1 @@
-{"curve-editor":"_curve-editor_1f8r5_4","curve-editor__left":"_curve-editor__left_1f8r5_1","curve-editor__right":"_curve-editor__right_1f8r5_1","curve-editor__resize-handle":"_curve-editor__resize-handle_1f8r5_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_1f8r5_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_1f8r5_1"}
+{"curve-editor":"_curve-editor_1itz1_4","curve-editor__left":"_curve-editor__left_1itz1_1","curve-editor__right":"_curve-editor__right_1itz1_1","curve-editor__resize-handle":"_curve-editor__resize-handle_1itz1_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_1itz1_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_1itz1_1"}

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

@@ -1 +1 @@
-{"curve":"_curve_gvcrn_5","curve__background":"_curve__background_gvcrn_1","curve__svg-wrapper":"_curve__svg-wrapper_gvcrn_1","curve__svg":"_curve__svg_gvcrn_1","curve__svg-segment":"_curve__svg-segment_gvcrn_1"}
+{"curve":"_curve_k9lsx_5","curve__background":"_curve__background_k9lsx_1","curve__svg-wrapper":"_curve__svg-wrapper_k9lsx_1","curve__svg":"_curve__svg_k9lsx_1","curve__svg-segment":"_curve__svg-segment_k9lsx_1"}

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

@@ -26,7 +26,7 @@
   <script src="build/mojs-curve-editor.js" charset="utf-8"></script>
 
   <script>
-    var curveEditor = new window.MojsCurveEditor({ name: 'curve1', isSaveState: false });
+    var curveEditor = new window.MojsCurveEditor({ name: 'curve1', isSaveState: true });
     var curveEditor2 = new window.MojsCurveEditor({ name: 'curve2', isSaveState: true });
 
     // var shape = new mojs.Shape({

app/css/blocks/curve.postcss.css

@@ -8,15 +8,18 @@ import C            from './constants';
 import hash         from './helpers/hash';
 import fallbackTo   from './helpers/fallback-to';
 import defer        from './helpers/defer';
+import addPointerDown from './helpers/add-pointer-down';
 
 // TODO
-//   - handle translate isRecord
-//   - multiple editors short cuts
 //   - resize down when points are above the editor border
-//   - instance dropdown on code panel
+//   - performance
 //   - import path data
 //   - move bunch of points at once
 
+
+/*
+  API wrapper above the app itself.
+*/
 class API {
   constructor ( o = {} ) {
     this._o = o;
@@ -29,6 +32,7 @@ class API {
     this._listenUnload();
 
     this._subscribe();
+    this._subscribeFocus();
   }
 
   _decalareDefaults ( ) {
@@ -57,6 +61,8 @@ class API {
     let str = fallbackTo( this._o.name, this._defaults.name );
     str += ( str === this._defaults.name ) ? '' : `__${this._defaults.name}`;
     this._localStorage = `${str}__${ hash( str ) }`;
+
+    this.store.dispatch({ type: 'SET_EDITOR_NAME', data: this._localStorage });
   }
 
   _render () {
@@ -83,6 +89,8 @@ class API {
         localStorage.removeItem( this._localStorage );
       }
     });
+
+
   }
 
   _tryToRestore () {
@@ -100,6 +108,14 @@ class API {
     this.store.subscribe( this._compilePath.bind(this) );
   }
 
+  _subscribeFocus () {
+    addPointerDown( document.body, (e) => {
+      if (this._localStorage !== e._mojsCurveEditorName) {
+        this.store.dispatch({ type: 'POINT_DESELECT_ALL' });
+      }
+    });
+  }
+
   _compilePath () {
     const state     = this.store.getState(),
           points    = state.points.present,
@@ -172,11 +188,6 @@ class API {
     if ( !el ) { return; }
 
     el.style.left = `${p*100}%`;
-
-    // const x = p * ( C.CURVE_SIZE + resize.temp_right + resize.right ),
-    //       transform = `translateX(${x}px)`;
-
-    // mojs.h.setPrefixedStyle( el, 'transform', transform );
   }
 
 }

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

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