curve-editor: add reset shortcut

Author: legomushroom

app/build/mojs-curve-editor.js

@@ -36,17 +36,15 @@
 
     var scaleCurve = new window.MojsCurveEditor({ name: 'curve_scale', isSaveState: true });
 
-    var curveEditor11 = new window.MojsCurveEditor({ name: 'curve111', isSaveState: true });
-
     var curveEditor = new window.MojsCurveEditor({ name: 'curve1', isSaveState: true });
 
-    // var html = new mojs.Html({
-    //   el: '#js-el',
-    //   y:      { [-200] : -200, curve: curveEditor.getEasing() },
-    //   scaleX: { 2:2, curve: scaleCurve.getEasing() }
-    // });
+    var html = new mojs.Html({
+      el: '#js-el',
+      y:      { [-200] : -200, curve: curveEditor.getEasing() },
+      scaleX: { 2:2, curve: scaleCurve.getEasing() }
+    });
 
-    // new MojsPlayer({ add: html });
+    new MojsPlayer({ add: html });
     // scaleX/scaleY : M0, 0 C0.6729540169506724, -28.101525445522107 13.041331697335014, -94.89847455447803 40, -95 C74.3872397312364, -94.81581115980767 71.04133169733501, 0.10152544552201628 100, 0 
     // originY : M0, 0 C4.324651237095854, -97.09389091882751 -12.269098738159038, -100.52241754574061 40, -100 C69.70027963716932, -99.70315257828365 75, -100 75, -100 C75, -100 77.18670774544789, -105.94552943119928 80, 0 C93.51535255761112, -0.007114543223372127 100, 0 100, 0 
     // var curveEditor = new window.MojsCurveEditor({ name: 'curve1', isSaveState: true });

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

@@ -0,0 +1,7 @@
+import C from '../constants';
+
+export function reset (store) {
+  store.dispatch({ type: 'POINTS_REMOVE' });
+  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 } });
+}

app/index.html

@@ -6,6 +6,7 @@ import C            from './constants';
 import hash         from './helpers/hash';
 import fallbackTo   from './helpers/fallback-to';
 import defer        from './helpers/defer';
+import {reset}      from './actions/points';
 import addPointerDown from './helpers/add-pointer-down';
 
 /*
@@ -42,7 +43,7 @@ class API {
   }
 
   _vars () {
-    this.revision = '1.2.1';
+    this.revision = '1.3.0';
     this.store    = initStore();
 
     this._easings = [];
@@ -84,11 +85,7 @@ class API {
   _tryToRestore () {
     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' } });
-    }
+    else { reset(this.store); }
   }
 
   _subscribe () {
@@ -136,10 +133,10 @@ class API {
   _updateParent( easing ) {
     const parent = easing._parent;
 
-    // console.log(parent.timeline.callbacksContext);
-
     if ( parent && parent.setProgress ) {
       this._triggerParent( parent );
+    } else if (parent._o.callbacksContext) {
+      this._triggerParent( parent._o.callbacksContext.timeline );
     } else if ( parent.timeline ) {
       this._triggerParent( parent.timeline )
     } else if ( parent.tween ) {

app/js/actions/points.babel.js

@@ -160,6 +160,10 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
       return state;
     }
 
+    case 'POINTS_REMOVE': {
+      return {...state, points: []};
+    }
+
     // case 'EDITOR_RESIZE': {
     //   const {data} = action,
     //         points = [...state.points],

app/js/app.babel.jsx

@@ -9,6 +9,7 @@ import CodePanel from './code-panel';
 import Icons from './icons';
 import mod from '../helpers/resize-mod';
 import addPointerDown from '../helpers/add-pointer-down';
+import {reset} from '../actions/points';
 require('../../css/blocks/curve-editor');
 
 class CurveEditor extends Component {
@@ -59,6 +60,8 @@ class CurveEditor extends Component {
   }
 
   componentDidMount () {
+    this._resetCounter = 0;
+
     const {store} = this.context,
           el = this.base.querySelector('#js-left-panel'),
           mc = propagating(new Hammer.Manager(el));
@@ -90,6 +93,7 @@ class CurveEditor extends Component {
 
   _onKeyUp (e) {
     const {store} = this.context;
+    console.log( e.which );
     if ( !e.altKey ) { return; }
     switch (e.which) {
       // z
@@ -98,9 +102,18 @@ class CurveEditor extends Component {
       case 88: { return store.dispatch(ActionCreators.redo()); }
       // d
       case 68: { return store.dispatch({ type: 'POINT_DELETE' }); }
+      // \
+      case 220: { return e.shiftKey && this._tryToReset(store); }
     }
   }
 
+  _tryToReset (store) {
+    if (++this._resetCounter > 2) { reset(store); }
+    
+    clearTimeout(this._tm);
+    this._tm = setTimeout(() => { this._resetCounter = 0; }, 300);
+  }
+
 }
 
 

app/js/reducers/points-reducer.babel.js

@@ -1,6 +1,6 @@
 {
   "name": "mojs-curve-editor",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "mojs GUI for editing easing/property curves",
   "keywords": [
     "mojs",

app/js/tags/curve-editor.babel.jsx

@@ -108,6 +108,7 @@ After you are happy with the curve you need to change the `sample`(`mojsCurve.ge
 - `alt + z`  - `undo` curve action
 - `alt + x`  - `rendo` curve action
 - `alt + d`  - `delete` selected point(s)
+- [3 times] `alt + \`  - `reset` curve
 
 ## Development