Disable brush and eraser when canvas is hidden

Resolves #42.

Author: leonhard-s

index.css

@@ -234,12 +234,12 @@ body {
     user-select: none;
 }
 
-#toolbox>div:hover {
+#toolbox>div:not([data-disabled]):hover {
     background-color: var(--widget-color-bg-hover);
     color: var(--text-hover);
 }
 
-#toolbox>div:active {
+#toolbox>div:not([data-disabled]):active {
     opacity: var(--widget-active-opacity);
 }
 
@@ -249,6 +249,11 @@ body {
     left: 8px;
 }
 
+#toolbox>div[data-disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
 .settings-form {
     display: grid;
     grid-template-columns: 4fr 1fr;

index.js

@@ -54,6 +54,12 @@ function setUpHeroMap(element: HTMLDivElement): HeroMap {
             else
                 toggle.removeAttribute("data-active");
         }
+        if (layer.id == "canvas") {
+            if (isVisible)
+                StateManager.dispatch(State.toolbox.canvasEnabled, {} as never);
+            else
+                StateManager.dispatch(State.toolbox.canvasDisabled, {} as never);
+        }
     });
 
     const layerNameFromId = (id: string) => {

index.js.map

@@ -3,17 +3,21 @@
 namespace State {
 
     export namespace toolbox {
+        export const canvasDisabled = "toolbox/canvas/disabled";
+        export const canvasEnabled = "toolbox/canvas/enabled";
         export const setup = "toolbox/setup";
         export const setTool = "toolbox/setTool";
     }
 
     export interface ToolBoxState {
         current: string | null;
+        canvasEnabled: boolean;
         map: HeroMap | null;
     }
 
     export const defaultToolboxState: ToolBoxState = {
         current: null,
+        canvasEnabled: true,
         map: null,
     };
 
@@ -24,6 +28,16 @@ namespace State {
         data: never,
     ): ToolBoxState {
         switch (action) {
+            case toolbox.canvasDisabled:
+                return {
+                    ...state,
+                    canvasEnabled: false,
+                };
+            case toolbox.canvasEnabled:
+                return {
+                    ...state,
+                    canvasEnabled: true,
+                };
             case toolbox.setup:
                 return {
                     ...state,

src/index.ts

@@ -18,6 +18,8 @@ document.addEventListener("DOMContentLoaded", () => {
             btn.innerText = tool.displayName;
             btn.setAttribute("data-tool-id", tool.id);
             btn.addEventListener("click", () => {
+                if (btn.hasAttribute("data-disabled"))
+                    return;
                 StateManager.dispatch(
                     State.toolbox.setTool, { id: tool.id } as never);
             });
@@ -78,4 +80,23 @@ document.addEventListener("DOMContentLoaded", () => {
                 document.getElementById("tool-help")!.innerText = help;
         }
     });
+
+    // Toggle canvas
+    const onCanvasToggle = (state: State.AppState) => {
+        const isEnabled = state.toolbox.canvasEnabled;
+        ["brush", "eraser"].forEach(id => {
+            const tool = toolInstances.get(id);
+            if (tool && state.toolbox.current === id && !isEnabled)
+                StateManager.dispatch(State.toolbox.setTool, { id: Tool.id } as never);
+
+            const btn = document.querySelector<HTMLDivElement>(
+                `[data-tool-id="${id}"]`);
+            if (isEnabled)
+                btn?.removeAttribute("data-disabled");
+            else
+                btn?.setAttribute("data-disabled", "");
+        });
+    };
+    StateManager.subscribe(State.toolbox.canvasEnabled, onCanvasToggle);
+    StateManager.subscribe(State.toolbox.canvasDisabled, onCanvasToggle);
 });