API: add destroy method

mojs · Jan 18, 2017 · fa68a68 · fa68a68
1 parent dccb319
commit fa68a68
Show file tree

Hide file tree

Showing 14 changed files with 937 additions and 912 deletions.
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.json b/app/css/blocks/curve-editor.postcss.css.json
@@ -1 +1 @@
-{"curve-editor":"_curve-editor_10g8s_3","curve-editor__left":"_curve-editor__left_10g8s_1","curve-editor__right":"_curve-editor__right_10g8s_133","curve-editor__resize-handle":"_curve-editor__resize-handle_10g8s_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_10g8s_128","curve-editor__mojs-logo":"_curve-editor__mojs-logo_10g8s_111","is-inactive":"_is-inactive_10g8s_110","is-minimized":"_is-minimized_10g8s_118","curve__svg-wrapper":"_curve__svg-wrapper_10g8s_137","is-hidden-on-min":"_is-hidden-on-min_10g8s_147"}
+{"curve-editor":"_curve-editor_d81sj_3","curve-editor__left":"_curve-editor__left_d81sj_1","curve-editor__right":"_curve-editor__right_d81sj_138","curve-editor__resize-handle":"_curve-editor__resize-handle_d81sj_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_d81sj_133","curve-editor__mojs-logo":"_curve-editor__mojs-logo_d81sj_116","is-inactive":"_is-inactive_d81sj_115","is-minimized":"_is-minimized_d81sj_123","curve__svg-wrapper":"_curve__svg-wrapper_d81sj_142","is-hidden-on-min":"_is-hidden-on-min_d81sj_152"}
diff --git a/app/index.html b/app/index.html
@@ -71,7 +71,12 @@
       name: 'some name',
       // onChange(path) { console.log(path); },
       // isHiddenOnMin: true
-    }).toggleSize();
+    });
+
+    // setTimeout( () => {
+    //   curveEditor.destroy();
+    // }, 5000 );
+
 
   </script>
 

diff --git a/app/js/app.babel.jsx b/app/js/app.babel.jsx
@@ -45,7 +45,7 @@ class API {
   }
 
   _vars () {
-    this.revision = '1.5.0';
+    this.revision = '1.6.0';
     this.store    = initStore();
 
     this._easings = [];
@@ -72,7 +72,7 @@ class API {
   }
 
   _renderApp () {
-    render(
+    this._rootEl = render(
       <Provider store={this.store}>
         <CurveEditor progressLines={this._progressLines}
                      options={this._props}
@@ -177,6 +177,11 @@ class API {
     el.style.left = `${p*100}%`;
   }
 
+  /****** Public API ******/
+
+  /*  Function to get the easing function compiled from the curve.
+      @param {Object} Options.
+  */
   getEasing (o={}) {
     // get the easing function regarding reverse options
     const fun = (() => {
@@ -196,17 +201,38 @@ class API {
     return fun;
   }
 
+  /*  Minimize the curve editor - save as clicking the `minimize` button.
+  */
   minimize() { this.store.dispatch({ type: 'SET_MINIMIZE', data: true }); }
 
+  /*  Maximize the curve editor - save as clicking the `maximize` button.
+  */
   maximize() { this.store.dispatch({ type: 'SET_MINIMIZE', data: false }); }
 
+  /*  Toggles between `maximize` and `minimize` states.
+  */
   toggleSize() {
     const state = this.store.getState();
     const {controls} = state;
 
     controls.isMinimize ? this.maximize() : this.minimize();
   }
 
+  /*  Destroys the app and ensures the `componentWillUnmount` is called
+      on the each component in the Components Tree.
+  */
+  destroy() {
+    // console.log(this._rootEl);
+    const NullComponent = () => { return null };
+    render(
+      <NullComponent />,
+      document.body,
+      this._rootEl
+    );
+  }
+
+
+
   // highlight() { this.store.dispatch({ type: 'SET_HIGHLIGHT', data: true }); }
   // dim() { this.store.dispatch({ type: 'SET_HIGHLIGHT', data: false }); }
   // toggleHighlight() {

diff --git a/app/js/tags/code-button.babel.jsx b/app/js/tags/code-button.babel.jsx
@@ -14,11 +14,13 @@ class CodeButton extends Component {
   }
   componentDidMount () {
     const {store} = this.context;
-    const mc = propagating(new Hammer.Manager(this.base));
-    mc.add(new Hammer.Tap);
+    this._mc = propagating(new Hammer.Manager(this.base));
+    this._mc.add(new Hammer.Tap);
 
-    mc.on('tap', (e) => { store.dispatch({ type: 'CODE_TAP' }); });
+    this._mc.on('tap', (e) => { store.dispatch({ type: 'CODE_TAP' }); });
   }
+
+  componentWillUnmount() { this._mc.off('tap'); }
 }
 
 export default CodeButton;
diff --git a/app/js/tags/curve-editor.babel.jsx b/app/js/tags/curve-editor.babel.jsx
@@ -69,12 +69,12 @@ 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));
+    const {store} = this.context;
+    const el = this.base.querySelector('#js-left-panel');
+    this._mc = propagating(new Hammer.Manager(el));
 
-    mc.add(new Hammer.Pan({ threshold: 0 }));
-    mc
+    this._mc.add(new Hammer.Pan({ threshold: 0 }));
+    this._mc
       .on('pan', (e) => {
         const x = e.deltaX, y = e.deltaY;
         store.dispatch({ type: 'EDITOR_TRANSLATE', data: { x, y } });
@@ -89,6 +89,11 @@ class CurveEditor extends Component {
     store.subscribe(this.forceUpdate.bind(this));
   }
 
+  componentWillUnmount() {
+    this._mc.off('pan');
+    this._mc.off('panend');
+  }
+
   _addKeyUp () { document.addEventListener('keyup', this._onKeyUp.bind(this)); }
 
   _onKeyUp (e) {
@@ -149,7 +154,6 @@ class CurveEditor extends Component {
       store.dispatch({ type: 'SET_ACTIVE', data: false });
     }
   }
-
 }
 
 

diff --git a/app/js/tags/curve.babel.jsx b/app/js/tags/curve.babel.jsx
@@ -171,15 +171,14 @@ class Curve extends Component {
   componentDidMount () {
     this._updateDomProgressLines();
 
-    const {store} = this.context,
-          el = this.base.querySelector('#js-segments'),
-          mc = propagating(new Hammer.Manager(el));
-
+    const {store} = this.context;
+    const el = this.base.querySelector('#js-segments');
+    this._mc = propagating(new Hammer.Manager(el));
 
     // mc.add(new Hammer.Pan({ threshold: 0 }));
-    mc.add(new Hammer.Tap);
+    this._mc.add(new Hammer.Tap);
 
-    mc
+    this._mc
       .on('tap', (e) => {
         const {state} = this.props;
         const ev      = e.srcEvent;
@@ -216,13 +215,13 @@ class Curve extends Component {
         e.stopPropagation();
     });
 
-    const svg   = this.base.querySelector('#js-svg'),
-          svgMc = propagating(new Hammer.Manager(this.base));
+    const svg   = this.base.querySelector('#js-svg');
+    this._svgMc = propagating(new Hammer.Manager(this.base));
 
-    svgMc.add(new Hammer.Tap);
-    svgMc.add(new Hammer.Pan);
+    this._svgMc.add(new Hammer.Tap);
+    this._svgMc.add(new Hammer.Pan);
 
-    svgMc
+    this._svgMc
       .on('tap', (e) => {
         store.dispatch({ type: 'POINT_DESELECT_ALL' });
       })
@@ -232,7 +231,13 @@ class Curve extends Component {
       .on('panend', (e) => {
         store.dispatch({ type: 'EDITOR_PAN_END', data: e.deltaY });
       });
+  }
 
+  componentWillUnmount() {
+    this._mc.off('tap');
+    this._svgMc.off('tap');
+    this._svgMc.off('pan');
+    this._svgMc.off('panend');
   }
 }
 

diff --git a/app/js/tags/icon-button.babel.jsx b/app/js/tags/icon-button.babel.jsx
@@ -9,19 +9,24 @@ class IconButton extends Component {
   render () {
     const p = this.props;
     const check = (p.isCheck) ? CLASSES['is-checked'] : '';
-    return  <div  className={`${CLASSES['icon-button']} ${check}`}
-                  title={ p.title || '' }
-                  data-component={'icon-button'}>
-              <Icon shape={this.props.shape} />
-            </div>;
+    return (
+      <div  className={`${CLASSES['icon-button']} ${check}`}
+            title={ p.title || '' }
+            data-component={'icon-button'}>
+        <Icon shape={this.props.shape} />
+      </div>
+    );
   }
 
   componentDidMount () {
     if ( typeof this.props.onTap === 'function' ) {
-      var hammertime = new Hammer(this.base)
+      this._mc = new Hammer(this.base)
         .on('tap', (e) => { this.props.onTap( e, this.props ) });
     }
   }
+
+  componentWillUnmount() {
+    if ( typeof this.props.onTap === 'function' ) { this._mc.off('tap'); } }
 }
 
 export default IconButton;
diff --git a/app/js/tags/maximize-button.babel.jsx b/app/js/tags/maximize-button.babel.jsx
@@ -14,13 +14,15 @@ class MaximizeButton extends Component {
   }
   componentDidMount () {
     const {store} = this.context;
-    const mc = propagating(new Hammer.Manager(this.base));
-    mc.add(new Hammer.Tap);
+    this._mc = propagating(new Hammer.Manager(this.base));
+    this._mc.add(new Hammer.Tap);
 
-    mc.on('tap', (e) => {
+    this._mc.on('tap', (e) => {
       store.dispatch({ type: 'SET_MINIMIZE', data: false });
     });
   }
+
+  componentWillUnmount() { this._mc.off('tap'); }
 }
 
 export default MaximizeButton;
diff --git a/app/js/tags/minimize-button.babel.jsx b/app/js/tags/minimize-button.babel.jsx
@@ -6,19 +6,23 @@ import Hammer from 'hammerjs';
 class MinimizeButton extends Component {
   render () {
     const {state} = this.props;
-    return  <div data-component="minimize-button" title="minimize">
-              <IconButton shape="minimize" />
-            </div>;
+    return (
+      <div data-component="minimize-button" title="minimize">
+        <IconButton shape="minimize" />
+      </div>
+    );
   }
   componentDidMount () {
     const {store} = this.context;
-    const mc = propagating(new Hammer.Manager(this.base));
-    mc.add(new Hammer.Tap);
+    this._mc = propagating(new Hammer.Manager(this.base));
+    this._mc.add(new Hammer.Tap);
 
-    mc.on('tap', (e) => {
+    this._mc.on('tap', (e) => {
       store.dispatch({ type: 'SET_MINIMIZE', data: true });
     });
   }
+
+  componentWillUnmount() { this._mc.off('tap'); }
 }
 
 export default MinimizeButton;
diff --git a/app/js/tags/point.babel.jsx b/app/js/tags/point.babel.jsx
@@ -19,15 +19,17 @@ class Point extends Component {
 
     const littleHandles = this._getLittleHandles( );
 
-    return  <div  className={`${CLASSES['point']} ${selected} ${handles}`}
-                  style={ this._getStyle(state) }
-                  data-component="point">
+    return (
+      <div  className={`${CLASSES['point']} ${selected} ${handles}`}
+            style={ this._getStyle(state) }
+            data-component="point">
 
-              <div className={ CLASSES['point__touch'] } id="js-point-touch" />
+        <div className={ CLASSES['point__touch'] } id="js-point-touch" />
 
-              { littleHandles }
+        { littleHandles }
 
-            </div>
+      </div>
+    );
   }
 
   _getStyle (state) {
@@ -52,13 +54,12 @@ class Point extends Component {
   }
 
   _createHandle (index, point)  {
-    return <LittleHandle
-        index={index}
-        state={this.props.state}
-        parentIndex={this.props.index}
-        handle={point[`handle${index}`]}
-        type={point.type}
-        />
+    return (
+      <LittleHandle index={index} state={this.props.state}
+          parentIndex={this.props.index}
+          handle={point[`handle${index}`]}
+          type={point.type} />
+    );
   }
 
   componentDidMount () {
@@ -103,12 +104,12 @@ class Point extends Component {
       return roundTo( returnValue, 5*C.CURVE_PERCENT, 2*C.CURVE_PERCENT ) - point.y;
     }
 
-    const el = this.base.querySelector('#js-point-touch'),
-          mc = propagating(new Hammer.Manager(el));
+    const el = this.base.querySelector('#js-point-touch');
+    this._mc = propagating(new Hammer.Manager(el));
 
-    mc.add(new Hammer.Pan({ threshold: 0 }));
+    this._mc.add(new Hammer.Pan({ threshold: 0 }));
 
-    mc
+    this._mc
       .on('pan', (e) => {
         const {point, index} = this.props;
         store.dispatch({
@@ -138,6 +139,11 @@ class Point extends Component {
         });
       } );
   }
+  componentWillUnmount() {
+    this._mc.off('tap');
+    this._mc.off('pan');
+    this._mc.off('panend');
+  }
 }
 
 export default Point;
diff --git a/app/js/tags/resize-handle.babel.jsx b/app/js/tags/resize-handle.babel.jsx
@@ -19,12 +19,12 @@ class ResizeHandle extends Component {
   }
 
   componentDidMount () {
-    const {type}  = this.props,
-          {store} = this.context,
-          mc      = propagating(new Hammer.Manager(this.base));
+    const {type}  = this.props;
+    const {store} = this.context;
+    this._mc      = propagating(new Hammer.Manager(this.base));
 
-    mc.add(new Hammer.Pan({ threshold: 0 }));
-    mc
+    this._mc.add(new Hammer.Pan({ threshold: 0 }));
+    this._mc
       .on('pan', (e) => {
         store.dispatch({ type: 'EDITOR_RESIZE', data: {
             ...modDeltas(e.deltaX, e.deltaY, type, this.props.state)
@@ -40,6 +40,11 @@ class ResizeHandle extends Component {
         e.stopPropagation();
       });
   }
+
+  componentWillUnmount() {
+    this._mc.off('pan');
+    this._mc.off('panend');
+  }
 }
 
 export default ResizeHandle;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mojs-curve-editor",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "mojs GUI for editing easing/property curves",
   "keywords": [
     "mojs",
@@ -31,7 +31,7 @@
   "homepage": "https://github.com/legomushroom/mojs-curve-editor#readme",
   "dependencies": {
     "hammerjs": "^2.0.8",
-    "preact": "^5.6.0",
+    "preact": "^7.1.0",
     "redux": "^3.5.2",
     "redux-recycle": "^1.2.0",
     "redux-undo": "^0.6.1"