BL-16069 Disable tools during Change Layout mode

src/BloomBrowserUI/app/EditTabPane.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { css } from "@emotion/react";
 import { get } from "../utils/bloomApi";
+import { setToolboxEnabledHandler } from "../bookEdit/workspaceRoot";
 
 interface IEditFrameSources {
     pageListSrc: string;
@@ -22,6 +23,7 @@ export const EditTabPane: React.FunctionComponent<{ active: boolean }> = (
         defaultEditFrameSources,
     );
     const [toolboxIsShowing, setToolboxIsShowing] = React.useState(true);
+    const [toolboxIsEnabled, setToolboxIsEnabled] = React.useState(true);
 
     // Request edit-frame URLs from C# when edit mode becomes active so app.tsx controls iframe rendering.
     React.useEffect(() => {
@@ -39,6 +41,20 @@ export const EditTabPane: React.FunctionComponent<{ active: boolean }> = (
         });
     }, [props.active]);
 
+    React.useEffect(() => {
+        // We will use this to disable and hide the toolbox when in Change Layout mode (BL-16069)
+        setToolboxEnabledHandler((enabled) => {
+            setToolboxIsEnabled(enabled);
+            if (!enabled) {
+                setToolboxIsShowing(false);
+            }
+        });
+
+        return () => {
+            setToolboxEnabledHandler(undefined);
+        };
+    }, []);
+
     return (
         <div
             css={css`
@@ -88,6 +104,15 @@ export const EditTabPane: React.FunctionComponent<{ active: boolean }> = (
                     top: 3px;
                 }
 
+                .pure-toggle-label.toolbox-disabled {
+                    opacity: 0.45;
+                    cursor: default;
+                }
+
+                .pure-toggle-label.toolbox-disabled .pure-toggle-icon {
+                    filter: grayscale(1);
+                }
+
                 .pure-drawer {
                     position: absolute;
                     top: 0;
@@ -123,14 +148,21 @@ export const EditTabPane: React.FunctionComponent<{ active: boolean }> = (
                     id="pure-toggle-right"
                     data-toggle="right"
                     checked={toolboxIsShowing}
+                    disabled={!toolboxIsEnabled}
                     onChange={(event) => {
+                        if (!toolboxIsEnabled) {
+                            return;
+                        }
                         setToolboxIsShowing(event.currentTarget.checked);
                     }}
                 />
                 <label
-                    className="pure-toggle-label"
+                    className={`pure-toggle-label${
+                        toolboxIsEnabled ? "" : " toolbox-disabled"
+                    }`}
                     htmlFor="pure-toggle-right"
                     data-toggle-label="right"
+                    aria-disabled={!toolboxIsEnabled}
                 >
                     <span className="pure-toggle-icon" />
                 </label>

src/BloomBrowserUI/bookEdit/js/AbovePageControls.tsx

@@ -49,6 +49,7 @@ export function updateAbovePageControls(
 
 export function resetAbovePageControls(): void {
     currentState = defaultState;
+    getWorkspaceBundleExports().setToolboxEnabled(true);
 
     const container = document.getElementsByClassName(
         "above-page-control-container",

src/BloomBrowserUI/bookEdit/js/origami.ts

@@ -10,6 +10,7 @@ import "../../lib/jquery.i18n.custom";
 import { splitPane } from "../../lib/split-pane/split-pane";
 import { kCanvasToolId } from "../toolbox/toolIds";
 import { updateAbovePageControls } from "./AbovePageControls";
+import { getWorkspaceBundleExports } from "./workspaceFrames";
 
 $(() => {
     splitPane($("div.split-pane"));
@@ -32,15 +33,19 @@ export function setupOrigami() {
             )[0] as HTMLElement | undefined;
             if (bloomPage) {
                 const showChangeLayoutModeControls = customPages.length > 0;
+                const isChangeLayoutMode = $(".marginBox").hasClass(
+                    "origami-layout-mode",
+                );
                 updateAbovePageControls({
                     isGamePage:
                         bloomPage?.getAttribute("data-tool-id") === "game",
                     showChangeLayoutModeToggle: showChangeLayoutModeControls,
-                    isChangeLayoutMode: $(".marginBox").hasClass(
-                        "origami-layout-mode",
-                    ),
+                    isChangeLayoutMode,
                     onChangeLayoutModeToggle: handleChangeLayoutModeToggle,
                 });
+                getWorkspaceBundleExports().setToolboxEnabled(
+                    !isChangeLayoutMode,
+                );
             }
             // I'm not clear why the rest of this needs to wait until we have
             // the two results, but none of the controls shows up if we leave it all
@@ -190,9 +195,11 @@ function changeLayoutModeToggleClickHandler() {
 
 function handleChangeLayoutModeToggle() {
     changeLayoutModeToggleClickHandler();
+    const isChangeLayoutMode = $(".marginBox").hasClass("origami-layout-mode");
     updateAbovePageControls({
-        isChangeLayoutMode: $(".marginBox").hasClass("origami-layout-mode"),
+        isChangeLayoutMode,
     });
+    getWorkspaceBundleExports().setToolboxEnabled(!isChangeLayoutMode);
 }
 
 function GetTextBoxPropertiesDialog() {

src/BloomBrowserUI/bookEdit/workspaceRoot.ts

@@ -17,6 +17,7 @@ export interface IWorkspaceExports {
         options: JQueryUI.DialogOptions,
     ): JQuery;
     closeDialog(id: string): void;
+    setToolboxEnabled(enabled: boolean): void;
     toolboxIsShowing(): boolean;
     doWhenToolboxLoaded(
         task: (toolboxFrameExports: IToolboxFrameExports) => unknown,
@@ -188,6 +189,22 @@ export function toolboxIsShowing() {
     return checkbox ? checkbox.checked : true;
 }
 
+// The toolbox should be disabled whenever we are in Change Layout mode (BL-16069)
+let toolboxEnabled = true;
+let toolboxEnabledHandler: ((enabled: boolean) => void) | undefined;
+
+export function setToolboxEnabledHandler(
+    handler: ((enabled: boolean) => void) | undefined,
+): void {
+    toolboxEnabledHandler = handler;
+    toolboxEnabledHandler?.(toolboxEnabled);
+}
+
+export function setToolboxEnabled(enabled: boolean): void {
+    toolboxEnabled = enabled;
+    toolboxEnabledHandler?.(enabled);
+}
+
 // Do this task when the toolbox is loaded. If it isn't already, we set a timeout and do it when we can.
 // (The value passed to the task function will be the value from getToolboxBundleExports(). Unfortunately we
 // haven't yet managed to declare a type for that, so I can't easily specify it here.)
@@ -359,6 +376,7 @@ interface WorkspaceBundleApi {
     switchContentPage: typeof switchContentPage;
     showDialog: typeof showDialog;
     closeDialog: typeof closeDialog;
+    setToolboxEnabled: typeof setToolboxEnabled;
     toolboxIsShowing: typeof toolboxIsShowing;
     doWhenToolboxLoaded: typeof doWhenToolboxLoaded;
     canUndo: typeof canUndo;
@@ -399,6 +417,7 @@ window.workspaceBundle = {
     switchContentPage,
     showDialog,
     closeDialog,
+    setToolboxEnabled,
     toolboxIsShowing,
     doWhenToolboxLoaded,
     canUndo,