Add component will unmount to deactivate to all tools (#657)

src/components/paint-editor/paint-editor.css

@@ -142,10 +142,6 @@ $border-radius: 0.25rem;
     margin-left: calc(2 * $grid-unit);
 }
 
-.hidden {
-    display: none;
-}
-
 .zoom-controls {
     display: flex;
     flex-direction: row-reverse;

src/components/paint-editor/paint-editor.jsx

@@ -132,8 +132,8 @@ const PaintEditorComponent = props => (
 
         <div className={styles.topAlignRow}>
             {/* Modes */}
-            {props.canvas !== null ? ( // eslint-disable-line no-negated-condition
-                <div className={isVector(props.format) ? styles.modeSelector : styles.hidden}>
+            {props.canvas !== null && isVector(props.format) ? ( // eslint-disable-line no-negated-condition
+                <div className={styles.modeSelector}>
                     <SelectMode
                         onUpdateImage={props.onUpdateImage}
                     />
@@ -165,8 +165,8 @@ const PaintEditorComponent = props => (
                 </div>
             ) : null}
 
-            {props.canvas !== null ? ( // eslint-disable-line no-negated-condition
-                <div className={isBitmap(props.format) ? styles.modeSelector : styles.hidden}>
+            {props.canvas !== null && isBitmap(props.format) ? ( // eslint-disable-line no-negated-condition
+                <div className={styles.modeSelector}>
                     <BitBrushMode
                         onUpdateImage={props.onUpdateImage}
                     />

src/containers/bit-brush-mode.jsx

@@ -44,6 +44,11 @@ class BitBrushMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isBitBrushModeActive !== this.props.isBitBrushModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();

src/containers/bit-eraser-mode.jsx

@@ -38,6 +38,11 @@ class BitEraserMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isBitEraserModeActive !== this.props.isBitEraserModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.tool = new BitBrushTool(

src/containers/bit-fill-mode.jsx

@@ -51,6 +51,11 @@ class BitFillMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isFillModeActive !== this.props.isFillModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
 

src/containers/bit-line-mode.jsx

@@ -44,6 +44,11 @@ class BitLineMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isBitLineModeActive !== this.props.isBitLineModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();

src/containers/bit-oval-mode.jsx

@@ -53,6 +53,11 @@ class BitOvalMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isOvalModeActive !== this.props.isOvalModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();

src/containers/bit-rect-mode.jsx

@@ -53,6 +53,11 @@ class BitRectMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isRectModeActive !== this.props.isRectModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();

src/containers/bit-select-mode.jsx

@@ -39,6 +39,11 @@ class BitSelectMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isSelectModeActive !== this.props.isSelectModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         this.props.clearGradient();
         this.tool = new BitSelectTool(

src/containers/brush-mode.jsx

@@ -45,6 +45,11 @@ class BrushMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isBrushModeActive !== this.props.isBrushModeActive;
     }
+    componentWillUnmount () {
+        if (this.blob.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         // TODO: Instead of clearing selection, consider a kind of "draw inside"
         // analogous to how selection works with eraser

src/containers/eraser-mode.jsx

@@ -39,6 +39,11 @@ class EraserMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isEraserModeActive !== this.props.isEraserModeActive;
     }
+    componentWillUnmount () {
+        if (this.blob.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         this.blob.activateTool({isEraser: true, ...this.props.eraserModeState});
     }

src/containers/fill-mode.jsx

@@ -55,6 +55,11 @@ class FillMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isFillModeActive !== this.props.isFillModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
 

src/containers/line-mode.jsx

@@ -51,6 +51,11 @@ class LineMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isLineModeActive !== this.props.isLineModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
 

src/containers/oval-mode.jsx

@@ -46,6 +46,11 @@ class OvalMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isOvalModeActive !== this.props.isOvalModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();

src/containers/rect-mode.jsx

@@ -46,6 +46,11 @@ class RectMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isRectModeActive !== this.props.isRectModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();

src/containers/reshape-mode.jsx

@@ -39,6 +39,11 @@ class ReshapeMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isReshapeModeActive !== this.props.isReshapeModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         this.tool = new ReshapeTool(
             this.props.setHoveredItem,

src/containers/rounded-rect-mode.jsx

@@ -39,6 +39,11 @@ class RoundedRectMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isRoundedRectModeActive !== this.props.isRoundedRectModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         this.tool = new RoundedRectTool(
             this.props.setHoveredItem,

src/containers/select-mode.jsx

@@ -43,6 +43,11 @@ class SelectMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isSelectModeActive !== this.props.isSelectModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         this.tool = new SelectTool(
             this.props.setHoveredItem,

src/containers/text-mode.jsx

@@ -64,6 +64,11 @@ class TextMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isTextModeActive !== this.props.isTextModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool (nextProps) {
         const selected = getSelectedLeafItems();
         let textBoxToStartEditing = null;