curve-editor: implement pool

legomushroom · legomushroom · commit 185188934627 · 2016-09-28T13:08:29.000-05:00
diff --git a/app/build/mojs-curve-editor.js b/app/build/mojs-curve-editor.js
diff --git a/app/build/mojs-curve-editor.min.js b/app/build/mojs-curve-editor.min.js
diff --git a/app/css/blocks/curve-editor.postcss.css b/app/css/blocks/curve-editor.postcss.css
@@ -113,6 +113,14 @@
                 height .15s ease-out,
                 border-radius .15s ease-out;
   }*/
+  
+  &.is-inactive {
+    .curve-editor__mojs-logo {
+      & [data-component="icon"] {
+        fill: $c-pastel-purple;
+      }
+    }
+  }
 
   &.is-minimized {
     width:    calc(100*$PX) !important;
diff --git a/app/css/blocks/curve-editor.postcss.css.json b/app/css/blocks/curve-editor.postcss.css.json
@@ -1 +1 @@
-{"curve-editor":"_curve-editor_1v48l_3","curve-editor__left":"_curve-editor__left_1v48l_1","curve-editor__right":"_curve-editor__right_1v48l_132","curve-editor__resize-handle":"_curve-editor__resize-handle_1v48l_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_1v48l_127","curve-editor__mojs-logo":"_curve-editor__mojs-logo_1v48l_128","is-minimized":"_is-minimized_1v48l_117","curve__svg-wrapper":"_curve__svg-wrapper_1v48l_136"}
+{"curve-editor":"_curve-editor_12556_3","curve-editor__left":"_curve-editor__left_12556_1","curve-editor__right":"_curve-editor__right_12556_140","curve-editor__resize-handle":"_curve-editor__resize-handle_12556_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_12556_135","curve-editor__mojs-logo":"_curve-editor__mojs-logo_12556_118","is-inactive":"_is-inactive_12556_117","is-minimized":"_is-minimized_12556_125","curve__svg-wrapper":"_curve__svg-wrapper_12556_144"}
diff --git a/app/js/app.babel.jsx b/app/js/app.babel.jsx
@@ -24,7 +24,7 @@ class API {
     this._listenUnload();
 
     this._subscribe();
-    this._subscribeFocus();
+    // this._subscribeFocus();
   }
 
   _decalareDefaults ( ) {
@@ -43,7 +43,7 @@ class API {
   }
 
   _vars () {
-    this.revision = '1.3.0';
+    this.revision = '1.4.0';
     this.store    = initStore();
 
     this._easings = [];
@@ -60,7 +60,8 @@ class API {
     document.addEventListener('DOMContentLoaded', () => {
       render(
         <Provider store={this.store}>
-          <CurveEditor progressLines={this._progressLines} />
+          <CurveEditor  progressLines = {this._progressLines}
+                        ref={ (el) => { this._el = el; }} />
         </Provider>, document.body);
     });
   }
@@ -93,13 +94,13 @@ 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' });
-      }
-    });
-  }
+  // _subscribeFocus () {
+    // addPointerDown( document.body, (e) => {
+    //   if (this._localStorage !== e._mojsCurveEditorName) {
+    //     this.store.dispatch({ type: 'POINT_DESELECT_ALL' });
+    //   }
+    // });
+  // }
 
   _compilePath () {
 
@@ -150,7 +151,6 @@ class API {
           updateProgress = (progress + step < 1 )
             ? (progress + step) : (progress - step);
 
-    // console.log(updateProgress, progress);
     parent.setProgress( updateProgress );
     parent.setProgress( progress );
   }
diff --git a/app/js/constants.babel.js b/app/js/constants.babel.js
@@ -4,5 +4,6 @@ export default {
   CURVE_SIZE,
   RESIZE_NEGATIVE_OFFSET: 150,
   CURVE_PERCENT: CURVE_SIZE/100,
-  CURVE_PADDING: 10
+  CURVE_PADDING: 10,
+  ACTIVE_POOL_NAME: '_mojsCurveEditorPool'
 }
diff --git a/app/js/helpers/active-pool.babel.js b/app/js/helpers/active-pool.babel.js
@@ -0,0 +1,15 @@
+class ActivePool {
+  constructor () {
+    this._subscribers = [];
+  }
+
+  add (fn) { this._subscribers.push(fn); }
+
+  resetActive (name) {
+    for (let i = 0; i < this._subscribers.length; i++) {
+      this._subscribers[i](name);
+    }
+  }
+}
+
+export default ActivePool;
diff --git a/app/js/pool.babel.js b/app/js/pool.babel.js
@@ -4,7 +4,6 @@ class Pool {
   }
   push (states) {
     // this._states.push(states);
-    // console.log(this._states.length);
     return this;
   }
 
diff --git a/app/js/reducers/controls-reducer.babel.js b/app/js/reducers/controls-reducer.babel.js
@@ -1,7 +1,11 @@
 import calculatePath from '../helpers/calculate-path';
 import pool from '../pool';
 
-const INITIAL_STATE = { isCode: false, isMinimize: false }
+const INITIAL_STATE = {
+  isCode: false,
+  isMinimize: false,
+  isActive: false
+}
 
 const controls = (state = INITIAL_STATE, action) => {
   pool.push( state );
@@ -12,8 +16,11 @@ const controls = (state = INITIAL_STATE, action) => {
     case 'SET_MINIMIZE': {
       return { ...state, isMinimize: action.data };
     }
-    case 'RESET_MINIMIZE_TRANISTION': {
-      return { ...state, isTransition: false };
+    // case 'RESET_MINIMIZE_TRANISTION': {
+    //   return { ...state, isTransition: false };
+    // }
+    case 'SET_ACTIVE': {
+      return { ...state, isActive: action.data };
     }
   }
   return state;
diff --git a/app/js/reducers/points-reducer.babel.js b/app/js/reducers/points-reducer.babel.js
@@ -135,6 +135,10 @@ const pointsReducer = (state = INITIAL_STATE, action) => {
       return { ...deselectAll( state ) };
     }
 
+    case 'SET_ACTIVE': {
+      return (!action.data) ? { ...deselectAll( state ) } : state;
+    }
+
     // HANDLES
     case 'HANDLE_TRANSLATE': {
       const {points}  = state,
diff --git a/app/js/tags/curve-editor.babel.jsx b/app/js/tags/curve-editor.babel.jsx
@@ -10,10 +10,10 @@ import Icons from './icons';
 import mod from '../helpers/resize-mod';
 import addPointerDown from '../helpers/add-pointer-down';
 import {reset} from '../actions/points';
+import ActivePool from '../helpers/active-pool';
 require('../../css/blocks/curve-editor');
 
 class CurveEditor extends Component {
-
   render () {
     const CLASSES = require('../../css/blocks/curve-editor.postcss.css.json');
 
@@ -27,9 +27,8 @@ class CurveEditor extends Component {
     className += (state.controls.isMinimize)
       ? ` ${CLASSES['is-minimized']}` : '';
     
-    // className += (state.controls.isTransition)
-    //   ? ` ${CLASSES['is-minimize-transition']}` : '';
-    // this._resetTransition( state.controls.isTransition );
+    className += (!state.controls.isActive)
+      ? ` ${CLASSES['is-inactive']}` : '';
 
     this._state = state;
     return  ( <div className={className} style={ style }>
@@ -83,17 +82,14 @@ class CurveEditor extends Component {
     store.subscribe(this.forceUpdate.bind(this));
   }
 
-  _subscribeFocus () {
-    addPointerDown( this.base, (e) => {
-      e._mojsCurveEditorName = this._state.points.present.name;
-    });
-  }
-
   _addKeyUp () { document.addEventListener('keyup', this._onKeyUp.bind(this)); }
 
   _onKeyUp (e) {
     const {store} = this.context;
-    console.log( e.which );
+    const {controls} = this._state;
+    // don't react on shortcuts if inactive or minimized
+    if (!controls.isActive || controls.isMinimize) { return; }
+    // don't react if `alt` key is not set
     if ( !e.altKey ) { return; }
     switch (e.which) {
       // z
@@ -114,6 +110,39 @@ class CurveEditor extends Component {
     this._tm = setTimeout(() => { this._resetCounter = 0; }, 300);
   }
 
+  _subscribeFocus () {
+    this._createActivePool();
+    const {store} = this.context;
+    addPointerDown( this.base, (e) => {
+      const pool = mojs[C['ACTIVE_POOL_NAME']];
+      pool && pool.resetActive(this);
+      if (!this._state.controls.isActive) {
+        store.dispatch({ type: 'SET_ACTIVE', data: true });
+      }
+    });
+  }
+
+  _getPool () {
+    let activePool = null;
+    if (!mojs[C['ACTIVE_POOL_NAME']]) {
+      mojs[C['ACTIVE_POOL_NAME']] = new ActivePool;
+    }
+    return mojs[C['ACTIVE_POOL_NAME']];
+  }
+
+  _createActivePool () {
+    const activePool = this._getPool();
+    activePool.add(this._setInactive.bind(this));
+    mojs[C['ACTIVE_POOL_NAME']] = activePool;
+  }
+
+  _setInactive (module) {
+    const {store} = this.context;
+    if (module !== this) {
+      store.dispatch({ type: 'SET_ACTIVE', data: false });
+    }
+  }
+
 }
 
 
diff --git a/mockups/curve-editor.sketch b/mockups/curve-editor.sketch
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mojs-curve-editor",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "mojs GUI for editing easing/property curves",
   "keywords": [
     "mojs",
diff --git a/readme.md b/readme.md
@@ -110,6 +110,8 @@ After you are happy with the curve you need to change the `sample`(`mojsCurve.ge
 - `alt + d`  - `delete` selected point(s)
 - [3 times] `alt + \`  - `reset` curve
 
+`Please note:` all shortcuts work only for active editor - it should have `orange mojs logo indicator` at bottom left.
+
 ## Development
 
 Install [webpack](https://webpack.github.io/) globally:

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"curve-editor":"_curve-editor_1v48l_3","curve-editor__left":"_curve-editor__left_1v48l_1","curve-editor__right":"_curve-editor__right_1v48l_132","curve-editor__resize-handle":"_curve-editor__resize-handle_1v48l_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_1v48l_127","curve-editor__mojs-logo":"_curve-editor__mojs-logo_1v48l_128","is-minimized":"_is-minimized_1v48l_117","curve__svg-wrapper":"_curve__svg-wrapper_1v48l_136"}`
	`1`	`+{"curve-editor":"_curve-editor_12556_3","curve-editor__left":"_curve-editor__left_12556_1","curve-editor__right":"_curve-editor__right_12556_140","curve-editor__resize-handle":"_curve-editor__resize-handle_12556_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_12556_135","curve-editor__mojs-logo":"_curve-editor__mojs-logo_12556_118","is-inactive":"_is-inactive_12556_117","is-minimized":"_is-minimized_12556_125","curve__svg-wrapper":"_curve__svg-wrapper_12556_144"}`
Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,6 @@ export default {`
`4`	`4`	`CURVE_SIZE,`
`5`	`5`	`RESIZE_NEGATIVE_OFFSET: 150,`
`6`	`6`	`CURVE_PERCENT: CURVE_SIZE/100,`
`7`		`- CURVE_PADDING: 10`
	`7`	`+ CURVE_PADDING: 10,`
	`8`	`+ ACTIVE_POOL_NAME: '_mojsCurveEditorPool'`
`8`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,6 @@ class Pool {`
`4`	`4`	`}`
`5`	`5`	`push (states) {`
`6`	`6`	`// this._states.push(states);`
`7`		`- // console.log(this._states.length);`
`8`	`7`	`return this;`
`9`	`8`	`}`
`10`	`9`