Refactor canvas elements: registry-driven controls

CanvasElementManager had grown too large and UI affordances (context menu + mini toolbar) were being assembled imperatively, which made ordering/section dividers hard to reason about and encouraged cross-bundle imports.

This change introduces a declarative canvas element registry that drives which buttons and menus are available per element type.

It also makes context menu/mini-toolbar composition deterministic: fixed section ordering, exactly one divider/spacer between non-empty sections, and Duplicate/Delete always last.

To reduce runtime import-cycle risk across the edit view + toolbox bundles, DOM selectors/constants move to a dependency-light module (canvasElementConstants) while canvasElementUtils is narrowed to a cross-frame bridge (getCanvasElementManager) with type-only imports.

CanvasElementManager is partially decomposed into focused helper modules (Geometry/Positioning/Alternates) plus public-function wrappers, and related call sites were updated. Misc hardening: safer MUI Menu anchoring, avoid non-null assertions, fix closest() selector typo, and remove duplicate pxToNumber helper.

Follow-ups in this series:

- Make mini-toolbar + menu more declarative and consistent
  - Make `toolbarButtons` the sole source of truth for the mini-toolbar (including explicit spacers) and normalize spacer runs.
  - Share menu + toolbar definitions via a single command registry to keep icons/tooltips/click behavior in sync.

  - Replace “Set Up Hyperlink” with the “Set Destination” command in this context, and do not show either on simple image elements.

Author: hatton

src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts

@@ -41,7 +41,7 @@ import { kBloomYellow } from "../../bloomMaterialUITheme";
 import { RenderRoot } from "./AudioHilitePage";
 import { RenderCanvasElementRoot } from "./CanvasElementFormatPage";
 import { CanvasElementManager } from "../js/CanvasElementManager";
-import { kCanvasElementSelector } from "../toolbox/canvas/canvasElementUtils";
+import { kCanvasElementSelector } from "../toolbox/canvas/canvasElementConstants";
 import { getPageIFrame } from "../../utils/shared";
 
 // Controls the CSS text-align value

src/BloomBrowserUI/bookEdit/editViewFrame.ts

@@ -61,7 +61,7 @@ export { showRegistrationDialogForEditTab as showRegistrationDialog };
 import { showAboutDialog } from "../react_components/aboutDialog";
 export { showAboutDialog };
 import { reportError } from "../lib/errorHandler";
-import { IToolboxFrameExports } from "./toolbox/toolboxBootstrap";
+import type { IToolboxFrameExports } from "./toolbox/toolboxBootstrap";
 import { showCopyrightAndLicenseInfoOrDialog } from "./copyrightAndLicense/CopyrightAndLicenseDialog";
 import { showTopicChooserDialog } from "./TopicChooser/TopicChooserDialog";
 import * as ReactDOM from "react-dom";

src/BloomBrowserUI/bookEdit/js/CanvasElementContextControls.tsx

@@ -1,7 +1,7 @@
 // Originally this was wired into CanvasSnapProvider.ts, but we're going to do that PR separately and later.
 // And the way it was wired in, just using the grid size, may not be enough. We may need to ask the snap provider
 // to give us the snap location. We'll see.
-import { kBackgroundImageClass } from "./CanvasElementManager";
+import { kBackgroundImageClass } from "../toolbox/canvas/canvasElementConstants";
 import { CanvasSnapProvider } from "./CanvasSnapProvider";
 
 export interface ICanvasElementKeyboardActions {

src/BloomBrowserUI/bookEdit/js/CanvasElementKeyboardProvider.ts

@@ -0,0 +1,43 @@
+// Small public helpers that other modules can call without importing the full
+// CanvasElementManager class.
+//
+// This file exists to keep CanvasElementManager.ts smaller and to reduce coupling
+// between the page bundle and toolbox UI code.
+
+import { kCanvasToolId } from "../toolbox/toolIds";
+import { getToolboxBundleExports } from "./bloomFrames";
+import { kImageContainerClass } from "./bloomImages";
+
+// This is just for debugging. It produces a string that describes the canvas element, generally
+// well enough to identify it in console.log.
+export const canvasElementDescription = (
+    e: Element | null | undefined,
+): string => {
+    const elt = e as HTMLElement;
+    if (!elt) {
+        return "no canvas element";
+    }
+    const result =
+        "canvas element at (" + elt.style.left + ", " + elt.style.top + ") ";
+    const imageContainer = elt.getElementsByClassName(kImageContainerClass)[0];
+    if (imageContainer) {
+        const img = (imageContainer as HTMLElement).getElementsByTagName(
+            "img",
+        )[0];
+        if (img) {
+            return result + "with image : " + img.getAttribute("src");
+        }
+    }
+    const videoSrc = elt.getElementsByTagName("source")[0];
+    if (videoSrc) {
+        return result + "with video " + videoSrc.getAttribute("src");
+    }
+    // Enhance: look for videoContainer similarly
+    return result + "with text " + elt.innerText;
+};
+
+export const showCanvasTool = () => {
+    getToolboxBundleExports()
+        ?.getTheOneToolbox()
+        .activateToolFromId(kCanvasToolId);
+};

src/BloomBrowserUI/bookEdit/js/CanvasElementManager.ts

@@ -1,7 +1,7 @@
 // This class that helps visually align elements during drag operations by showing red lines
 // and highlighting elements with equal dimensions during resize operations.
 
-import { kBackgroundImageClass } from "./CanvasElementManager";
+import { kBackgroundImageClass } from "../toolbox/canvas/canvasElementConstants";
 
 // ALIGNMENT RULES:
 // 1. When a dragged element aligns horizontally (top/middle/bottom) or vertically (left/center/right)

src/BloomBrowserUI/bookEdit/js/CanvasElementManagerPublicFunctions.ts

@@ -24,11 +24,11 @@ import {
     initializeCanvasElementManager,
     theOneCanvasElementManager,
 } from "./CanvasElementManager";
+import { getCanvasElementManager } from "../toolbox/canvas/canvasElementUtils";
 import {
-    getCanvasElementManager,
     kCanvasElementClass,
     kCanvasElementSelector,
-} from "../toolbox/canvas/canvasElementUtils";
+} from "../toolbox/canvas/canvasElementConstants";
 import { showTopicChooserDialog } from "../TopicChooser/TopicChooserDialog";
 import "../../modified_libraries/jquery-ui/jquery-ui-1.10.3.custom.min.js";
 import "./jquery.hasAttr.js"; //reviewSlog for CenterVerticallyInParent

src/BloomBrowserUI/bookEdit/js/CanvasGuideProvider.ts

@@ -13,9 +13,9 @@
         to hide the details so that we can easily change it later.
 */
 
-import { IPageFrameExports } from "../editablePage";
-import { IEditViewFrameExports } from "../editViewFrame";
-import { IToolboxFrameExports } from "../toolbox/toolboxBootstrap";
+import type { IPageFrameExports } from "../editablePage";
+import type { IEditViewFrameExports } from "../editViewFrame";
+import type { IToolboxFrameExports } from "../toolbox/toolboxBootstrap";
 
 interface WindowWithExports extends Window {
     editTabBundle: any;

src/BloomBrowserUI/bookEdit/js/bloomEditing.ts

@@ -10,14 +10,11 @@ import theOneLocalizationManager from "../../lib/localizationManager/localizatio
 
 import {
     kBackgroundImageClass,
-    theOneCanvasElementManager,
-    updateCanvasElementClass,
-} from "./CanvasElementManager";
-import {
-    kCanvasElementSelector,
     kBloomCanvasClass,
     kBloomCanvasSelector,
-} from "../toolbox/canvas/canvasElementUtils";
+    kCanvasElementSelector,
+} from "../toolbox/canvas/canvasElementConstants";
+import { updateCanvasElementClass } from "../toolbox/canvas/canvasElementDomUtils";
 
 import { farthest } from "../../utils/elementUtils";
 import { EditableDivUtils } from "./editableDivUtils";
@@ -415,7 +412,7 @@ function DisableImageTooltip(container: HTMLElement | undefined | null) {
     }
 
     // If the canvas element manager hasn't been set up at all we can at least clear the current one.
-    const bloomCanvas = container.closest(kBloomCanvasClass) as HTMLElement; // this is the one we want to clear the title on, if any
+    const bloomCanvas = container.closest(kBloomCanvasSelector) as HTMLElement; // this is the one we want to clear the title on, if any
 
     if (bloomCanvas) {
         bloomCanvas.title = "";
@@ -821,18 +818,17 @@ export function SetupResizableElement(element) {
         // caption centered, but currently we are NOT centering it. However, it makes sense
         // to resize the picture and its captions together anyway. We at least want the text
         // boxes to stay the same size as the bloom-canvas.)
+        const canvasElementManager = getCanvasElementManager();
         const img = $(bloomCanvas).find("img");
         $(element).resizable({
             handles: "nw, ne, sw, se",
             containment: "parent",
             alsoResize: bloomCanvas,
             start(e, ui) {
-                theOneCanvasElementManager.suspendComicEditing(
-                    "forJqueryResize",
-                );
+                canvasElementManager?.suspendComicEditing("forJqueryResize");
             },
             stop(e, ui) {
-                theOneCanvasElementManager.resumeComicEditing();
+                canvasElementManager?.resumeComicEditing();
             },
         });
     }