curve-editor: add state restore

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -7,4 +7,30 @@
   &.is-show {
     display:    block;
   }
+  
+  [data-component="icon-button"] {
+    $width: 3;
+    $height: 2.5*$width;
+    
+    &:after {
+      content:        '';
+      position:       absolute;
+      width:          calc( $width*$PX );
+      height:         calc( $height*$PX );
+      background:     $c-orange;
+      border-top-right-radius:    calc( 2*$PX );
+      border-bottom-right-radius: calc( 2*$PX );
+      /*border-radius:  50%;*/
+      left:           calc( -(3*$width + 1)*$PX );
+      top:            50%;
+      margin-top:     calc( -($height/2)*$PX );
+      display:        none;
+    }
+    
+    &[class*="is-checked"] {
+      &:after {
+        display:      block; 
+      }
+    }
+  }
 }

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

@@ -1 +1 @@
-{"point-controls":"_point-controls_1j5f4_4","is-show":"_is-show_1j5f4_7"}
+{"point-controls":"_point-controls_1xcu7_4","is-show":"_is-show_1xcu7_7"}

app/css/blocks/point-controls.postcss.css

@@ -11,5 +11,9 @@
   <script src="/node_modules/mo-js/build/mo.js" charset="utf-8"></script>
   <script src="build/mojs-curve-editor.js" charset="utf-8"></script>
 
+  <script>
+    new window.MojsCurveEditor;
+  </script>
+
 </body>
 </html>

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

@@ -3,30 +3,100 @@ require('../css/main');
 import { Provider } from 'preact-redux';
 import {render, h}  from 'preact';
 import CurveEditor  from './tags/curve-editor';
-import store        from './store';
+import initStore    from './store';
 import C            from './constants';
+import hash         from './helpers/hash';
+import fallbackTo   from './helpers/fallback-to';
 
 // TODO
-//   - instance dropdown on code panel
-//   - add orange point on seleced point control/ hightlight the control
-//   - save state to LC
 //   - add APIs
+//   - resize down when points are above the editor border
+//   - instance dropdown on code panel
 //   - import path data
 //   - move bunch of points at once
 
-document.addEventListener('DOMContentLoaded', () => {
-  render(
-    <Provider store={store}>
-      <CurveEditor />
-    </Provider>, document.body);
-});
+class API {
+  constructor ( o = {} ) {
+    this._o = o;
+
+    this._decalareDefaults();
+    this._vars();
+    this._render();
+    this._tryToRestore();
+    this._listenUnload();
+
+    this._subscribe()
+  }
+
+  _decalareDefaults ( ) {
+    this._defaults = {
+      name:        'mojs-curve-editor',
+      isSaveState: true,
+    }
+  }
+
+  _vars () {
+    this.revision = '1.0.0';
+    this.store    = initStore();
+
+    let str = fallbackTo( this._o.name, this._defaults.name );
+    str += ( str === this._defaults.name ) ? '' : `__${this._defaults.name}`;
+    this._localStorage = `${str}__${ hash( str ) }`;
+  }
+
+  _render () {
+    document.addEventListener('DOMContentLoaded', () => {
+      render(
+        <Provider store={this.store}>
+          <CurveEditor />
+        </Provider>, document.body);
+    });
+  }
+
+  _listenUnload () {
+    const unloadEvent = ('onpagehide' in window) ? 'pagehide' : 'beforeunload';
+    window.addEventListener( unloadEvent, () => {
+      
+      const preState = { ...this.store.getState() };
+
+      delete preState.points.history;
+      delete preState.pointControls.history;
+
+      localStorage.setItem(this._localStorage, JSON.stringify( preState ) );
+    });
+  }
+
+  _tryToRestore () {
+    // localStorage.removeItem(this._localStorage);
+    const stored = localStorage.getItem(this._localStorage);
+    if ( stored ) { this.store.dispatch({ type: 'SET_STATE', data: JSON.parse(stored) });}
+    else {
+      this.store.dispatch({ type: 'POINT_ADD', data: { point: {x: 0,   y: C.CURVE_SIZE, isLockedX: true}, index: 0 } });
+      this.store.dispatch({ type: 'POINT_ADD', data: { point: {x: 100, y: 0, isLockedX: true}, index: 1 } });
+      this.store.dispatch({ type: 'POINT_SELECT', data: { index: 0, type: 'straight' } });
+    }
+  }
+
+  _subscribe () {
+    this._compilePath();
+    this.store.subscribe( this._compilePath.bind(this) );
+  }
+
+  _compilePath () {
+    const state     = this.store.getState(),
+          points    = state.points.present,
+          {path}    = points;
+
+    if ( this._prevPath !== path ) {
+      this._prevPath = path;
+      this._easing = mojs.easing.path( path );
+    }
+  }
 
-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 })
+export default API;
+window.MojsCurveEditor = API;
 
 // curve
 //   .getFunction({ isInverseX: false, isInverseY: true, name: 'Some name' })

app/index.html

@@ -0,0 +1,10 @@
+/*
+  Function that returns the second argument if the first one isn't set.
+  @private
+  @param {Any} Property to set.
+  @param {Any} Property to return as fallback.
+  @returns {Any} If set - the first property, if not - the second.
+*/
+export default (prop, fallback) => {
+  return ( prop != null ) ? prop : fallback;
+}

app/js/app.babel.jsx

@@ -0,0 +1,16 @@
+/*
+  Function to generate hash code.
+  @private
+  @return {String} Hash code.
+*/
+
+export default (str) => {
+  var hash = 0, i, chr, len;
+  if (str.length === 0) return hash;
+  for (i = 0, len = str.length; i < len; i++) {
+    chr   = str.charCodeAt(i);
+    hash  = ((hash << 5) - hash) + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return Math.abs( hash );
+}

app/js/helpers/fallback-to.babel.js

@@ -16,11 +16,13 @@ const UNDOABLE_OPTS = {
   debug: false
 };
 
-const reducer = combineReducers({
+import recycleState from 'redux-recycle'
+
+const reducer = recycleState(combineReducers({
   resize:        resizeReducer,
   points:        undoable(pointsReducer, { ...UNDOABLE_OPTS }),
   controls:      controlsReducer,
   pointControls: undoable(pointControlsReducer, { ...UNDOABLE_OPTS })
-});
+}), ['SET_STATE'], (state, action) => action.data );
 
 export default reducer;

app/js/helpers/hash.babel.js

@@ -2,6 +2,6 @@ import {createStore} from 'redux';
 // import reducer
 import reducer from './reducers/index-reducer';
 
-const store = createStore( reducer );
+const initStore = () => { return createStore( reducer );  }
 
-export default store;
+export default initStore;