- ),
- };
- let index = menuOptions.findIndex(
- (option) => option.l10nId === "EditTab.Image.Reset",
- );
- if (index < 0) {
- index = menuOptions.indexOf(divider);
- }
- menuOptions.splice(index, 0, fillItem);
-
- // we can't delete the placeholder (or if there isn't an img, somehow)
- deleteEnabled = hasRealImage(img);
- } else if (isSpecialGameElementSelected || isLinkGrid) {
- deleteEnabled = false; // don't allow deleting the single drag item in a sentence drag game or link grids
- }
-
- // last one
- if (!isLinkGrid) {
- menuOptions.push({
- l10nId: "Common.Delete",
- english: "Delete",
- disabled: !deleteEnabled,
- onClick: theOneCanvasElementManager?.deleteCurrentCanvasElement,
- icon:
- {isBackgroundImage && canvasHasMultipleElements && (
-
-
- {backgroundImageText}
-
- )}
-
- {isLinkGrid && (
- <>
- {
- if (!linkGrid) return;
- editLinkGrid(linkGrid);
- }}
- />
- {
- if (!linkGrid) return;
- editLinkGrid(linkGrid);
- }}
- >
- {chooseBooksLabel}
-
-
- )}
- {isNavButton && (
-
- {
- // Want an attention-grabbing version of set metadata if there is none and image exists.
- missingMetadata &&
- !isNavButton &&
- hasRealImage(img) && (
- runMetadataDialog()}
- />
- )
- }
- {
- // Choose image is only a LIKELY choice if we don't yet have one.
- // (or if it's a background image...not sure why, except otherwise
- // the toolbar might not have any icons for a background image.)
- (isPlaceHolder || isBackgroundImage) && (
- {
- if (!props.canvasElement) return;
- const imgContainer =
- props.canvasElement.getElementsByClassName(
- kImageContainerClass,
- )[0] as HTMLElement;
- if (!imgContainer) return;
- doImageCommand(
- imgContainer.getElementsByTagName(
- "img",
- )[0] as HTMLImageElement,
- "change",
- );
- }}
- />
- )
- }
- {(isPlaceHolder || isBackgroundImage) && (
- {
- if (!props.canvasElement) return;
- const imgContainer =
- props.canvasElement.getElementsByClassName(
- kImageContainerClass,
- )[0] as HTMLElement;
- if (!imgContainer) return;
- doImageCommand(
- imgContainer.getElementsByTagName(
- "img",
- )[0] as HTMLImageElement,
- "paste",
- );
- }}
- >
- )}
-
- )}
- {editableTextElement && !isNavButton && (
- {
- if (!props.canvasElement) return;
- GetEditor().runFormatDialog(
- editableTextElement,
- );
- }}
- />
- )}
- {hasVideo && !videoAlreadyChosen && (
-
-
- doVideoCommand(videoContainer, "choose")
- }
- />
-
- doVideoCommand(videoContainer, "record")
- }
- />
-
- )}
- {(!(hasImage && isPlaceHolder) &&
- !editableTextElement &&
- !(hasVideo && !videoAlreadyChosen)) || (
- // Add a spacer if there is any button before these
-
- )}
- {!hasVideo &&
- !isBackgroundImage &&
- !isSpecialGameElementSelected &&
- !isLinkGrid && (
- {
- if (!props.canvasElement) return;
- makeDuplicateOfDragBubble();
- }}
- />
- )}
- {
- // Not sure of the reasoning here, since we do have a way to 'delete' a background image,
- // not by removing the canvas element but by setting the image back to a placeholder.
- // But the mockup in BL-14069 definitely doesn't have it.
- isBackgroundImage ||
- isSpecialGameElementSelected ||
- isLinkGrid || (
- {
- if (!props.canvasElement) return;
- theOneCanvasElementManager?.deleteCurrentCanvasElement();
- }}
- />
- )
- }
- {isBackgroundImage && (
- {
- if (!props.canvasElement) return;
- theOneCanvasElementManager?.expandImageToFillSpace();
- }}
- />
- )}
-
-
-
- {langName && (
-
- {langName}
-
- )}
- 
- ),
- },
- ];
-
- if (
- // Don't include the Set Up Hyperlink item for navigation buttons
- // because they have their own Set Destination item.
- !isNavigationButton(canvasElement) &&
- // It would be too confusing and difficult for the element to be both draggable and clickable with different
- // behavior such that we'd have to distinguish between the two.
- !isDraggable(canvasElement)
- ) {
- imageMenuOptions.push({
- l10nId: "EditTab.SetupHyperlink",
- english: "Set Up Hyperlink",
- subLabel: imgContainer.getAttribute("data-href") && (
-
- Currently: %0
-
- ),
- featureName: "canvas",
- onClick: () => {
- // Initially, we could only set links on images. For some reason,
- // we decided to put it on the image container rather than the canvas element.
- // Now we have implemented other canvas elements (navigation buttons) which
- // can have links. Those set the data-href on the canvas element itself.
- // But we didn't modify how the existing image link setup works so as not to break 6.2.
- // Thus, for images, we put data-href on the image container, but for other elements, we
- // put it on the canvas element.
- const imgContainer = canvasElement.getElementsByClassName(
- kImageContainerClass,
- )[0] as HTMLElement;
- showLinkTargetChooserDialog(
- imgContainer.getAttribute("data-href") || "",
- (url) => {
- if (url) {
- imgContainer.setAttribute("data-href", url);
- } else if (imgContainer.hasAttribute("data-href")) {
- imgContainer.removeAttribute("data-href");
- }
- },
- );
- },
- });
- }
-
- menuOptions.unshift(...imageMenuOptions);
-}
-
-// applies the modification to all classes of element
-function modifyClassNames(
- element: HTMLElement,
- modification: (className: string) => string,
-): void {
- const classList = Array.from(element.classList);
- const newClassList = classList
- .map(modification)
- .filter((className) => className !== "");
- element.classList.remove(...classList);
- element.classList.add(...newClassList);
-}
-
-// applies the modification to all classes of element and all its descendants
-function modifyAllDescendantsClassNames(
- element: HTMLElement,
- modification: (className: string) => string,
-): void {
- const descendants = element.querySelectorAll("*");
- descendants.forEach((descendant) => {
- modifyClassNames(descendant as HTMLElement, modification);
- });
-}
-
-function addMenuItemForTogglingDraggability(
- menuOptions: IMenuItemWithSubmenu[],
- canvasElement: HTMLElement,
- currentDraggableTarget: HTMLElement | undefined,
- setCurrentDraggableTarget: (target: HTMLElement | undefined) => void,
-) {
- const toggleDragability = () => {
- if (isDraggable(canvasElement)) {
- if (currentDraggableTarget) {
- currentDraggableTarget.ownerDocument
- .getElementById("target-arrow")
- ?.remove();
- currentDraggableTarget.remove();
- setCurrentDraggableTarget(undefined);
- }
- canvasElement.removeAttribute(kDraggableIdAttribute);
- if (
- canvasElement.getElementsByClassName("bloom-editable").length >
- 0
- ) {
- modifyAllDescendantsClassNames(canvasElement, (className) =>
- className.replace(
- /GameDrag((?:Small|Medium|Large)(?:Start|Center))-style/,
- "GameText$1-style",
- ),
- );
- canvasElement.classList.remove("draggable-text");
- }
- } else {
- setGeneratedDraggableId(canvasElement);
- setCurrentDraggableTarget(makeTargetForDraggable(canvasElement));
- // Draggables cannot have hyperlinks, otherwise Bloom Player will launch the hyperlink when you click on it
- // and you won't be able to drag it.
- const imageContainer = canvasElement.getElementsByClassName(
- kImageContainerClass,
- )[0] as HTMLElement;
- if (imageContainer) {
- imageContainer.removeAttribute("data-href");
- }
-
- theOneCanvasElementManager.setActiveElement(canvasElement);
- if (
- canvasElement.getElementsByClassName("bloom-editable").length >
- 0
- ) {
- modifyAllDescendantsClassNames(canvasElement, (className) =>
- className.replace(
- /GameText((?:Small|Medium|Large)(?:Start|Center))-style/,
- "GameDrag$1-style",
- ),
- );
- canvasElement.classList.add("draggable-text");
- }
- }
- };
- const visibilityCss = isDraggable(canvasElement)
- ? ""
- : "visibility: hidden;";
- menuOptions.push(divider, {
- l10nId: "EditTab.Toolbox.DragActivity.Draggability",
- english: "Draggable",
- subLabelL10nId: "EditTab.Toolbox.DragActivity.DraggabilityMore",
- onClick: toggleDragability,
- icon: ";
-
- const transGroupDivClasses = `bloom-translationGroup bloom-leadingElement`;
- const transGroupHtml =
- "
" +
- editableDivHtml +
- "
";
- return transGroupHtml;
- }
-
- private addVideoCanvasElement(
- location: Point,
- bloomCanvasJQuery: JQuery,
- rightTopOffset?: string,
- ): HTMLElement {
- const standardVideoClasses =
- kVideoContainerClass +
- " bloom-noVideoSelected bloom-leadingElement";
- const videoContainerHtml =
- "";
- return this.finishAddingCanvasElement(
- bloomCanvasJQuery,
- videoContainerHtml,
- location,
- {
- comicalBubbleStyle: "none",
- setElementActive: true,
- rightTopOffset,
- },
- );
- }
-
- public getActiveOrFirstBloomCanvasOnPage(): HTMLElement | null {
- // If there is an active element, use its bloom canvas.
- // Otherwise, return the first bloom canvas on the page.
- if (this.activeElement) {
- const bloomCanvas = CanvasElementManager.getBloomCanvas(
- this.activeElement,
- );
- if (bloomCanvas) {
- return bloomCanvas;
- }
- }
- const bloomCanvases = this.getAllBloomCanvasesOnPage();
- return bloomCanvases.length > 0 ? bloomCanvases[0] : null;
- }
-
- // This is called when the user pastes an image from the clipboard.
- // If there is an active canvas element that is an image, and it is empty (placeholder),
- // set its image to the pasted image.
- // Otherwise, if there is a bloom canvas on the page, it will pick the one that has the active element
- // or the first one if none has an active element.
- // (If there is no canvas, it returns false.)
- // If the canvas is empty (including the background), set the background to the image.
- // Else if canvas is allowed by the subscription tier, add the image as a canvas/game item.
- // Make it up to 1/3 width and 1/3 height of the canvas, roughly centered on the canvas.
- // Is it a draggable item? Yes, if we are in the "Start" mode of a game.
- // In that case, we put it a bit higher and further left, so there is room for the target.
- // Otherwise it's just a normal canvas overlay item (restricted to the appropriate state,
- // if we're in the Correct or Wrong state of a game).
- public pasteImageFromClipboard(): boolean {
- const bloomCanvas = this.getActiveOrFirstBloomCanvasOnPage();
- if (!bloomCanvas) {
- return false; // No canvas to paste into.
- }
- const activeGameTab = getActiveGameTab();
- if (activeGameTab === playTabIndex) {
- // Can't paste an image into the play tab.
- return false;
- }
- // The rest of the job happens after the C# code calls changeImage(), passing this fake ID along
- // with the rest of the information about the new image. The special ID causes a call back to
- // finishPastingImageFromClipboard() with the real image information.
- postJson("editView/pasteImage", {
- imageId: kMakeNewCanvasElement,
- imageSrc: "",
- imageIsGif: false,
- });
- return true;
- }
- public finishPasteImageFromClipboard(imageInfo: IImageInfo): void {
- const bloomCanvas = this.getActiveOrFirstBloomCanvasOnPage()!;
- const canvasElements =
- bloomCanvas.getElementsByClassName(kCanvasElementClass);
- // If it's an empty canvas, make this its background image.
- // A possible special case is the custom game page, where the only canvas element is the
- // header. But that works out to our advantage, since we think a background is unlikely
- // in games, and would prefer to interpret the pasted image as a game item.
- if (
- canvasElements.length === 1 &&
- canvasElements[0].classList.contains(kBackgroundImageClass)
- ) {
- const bgimg = canvasElements[0].getElementsByTagName("img")[0];
- if (isPlaceHolderImage(bgimg.getAttribute("src"))) {
- changeImageInfo(bgimg, imageInfo);
- this.adjustBackgroundImageSize(
- bloomCanvas,
- canvasElements[0] as HTMLElement,
- true,
- );
- notifyToolOfChangedImage(bgimg);
- return;
- }
- }
- // If there is an image canvas element (other than the background one) already selected
- // and it is a placeholder, just set its image.
- const activeElement = this.activeElement as HTMLElement | undefined;
- if (
- activeElement &&
- !activeElement.classList.contains(kBackgroundImageClass)
- ) {
- const img = activeElement
- .getElementsByClassName(kImageContainerClass)[0]
- ?.getElementsByTagName("img")[0];
- if (img && isPlaceHolderImage(img.getAttribute("src"))) {
- changeImageInfo(img, imageInfo);
- this.adjustContainerAspectRatio(
- activeElement as HTMLElement,
- true,
- );
- adjustTarget(activeElement, getTarget(activeElement));
- notifyToolOfChangedImage(img);
- return;
- }
- }
- // otherwise we will add a new canvas element...but only if subscription allows it.
- get("features/status?featureName=canvas&forPublishing=false", (c) => {
- const features = c.data as FeatureStatus;
- if (features.enabled) {
- // If the feature is enabled, we can proceed with adding the canvas element.
- const width = Math.max(
- this.snapProvider.getSnappedX(
- bloomCanvas.offsetWidth / 3,
- undefined,
- ),
- this.minWidth,
- );
- const height = Math.max(
- this.snapProvider.getSnappedY(
- bloomCanvas.offsetHeight / 3,
- undefined,
- ),
- this.minHeight,
- );
- if (
- width > bloomCanvas.offsetWidth ||
- height > bloomCanvas.offsetHeight
- ) {
- // Can't paste image into such a tiny canvas
- return;
- }
- const activeGameTab = getActiveGameTab();
- let positionX = (bloomCanvas.offsetWidth - width) / 2;
- let positionY = (bloomCanvas.offsetHeight - height) / 2;
- if (activeGameTab === startTabIndex) {
- // If we're in the start tab, we want to put it further towards the top left,
- // so there is room for the target.
- positionX = positionX / 2;
- positionY = positionY / 2;
- }
- const { x: adjustedX, y: adjustedY } =
- this.snapProvider.getPosition(
- undefined,
- positionX,
- positionY,
- );
- const positionInBloomCanvas = new Point(
- adjustedX,
- adjustedY,
- PointScaling.Scaled,
- "pasteImageFromClipboard",
- );
- this.addPictureCanvasElement(
- positionInBloomCanvas,
- $(bloomCanvas),
- undefined,
- imageInfo,
- { width, height },
- (newCanvasElement) => {
- switch (activeGameTab) {
- case startTabIndex:
- // make it a draggable, with a target.
- // We want to do this after its shape and position are stable, so we arrange for a callback
- // after the aspect ratio is adjusted.
- // (It would be nice to do this using async and await, or by passing this action as a param
- // all the way down to adjustContainerAspectRatio, but there are eight layers of methods
- // and at least one settimeout in between, and if each has to await the others, yet other
- // callers of those methods have to become async. It would be a mess.)
- // We do this as an action passed to addPictureCanvasElement so that doAfterNewImageAdjusted
- // is set before the call to adjustContainerAspectRatio, which would be hard to guarantee
- // if we did it after the call to addPictureCanvasElement.
- this.doAfterNewImageAdjusted = () => {
- makeTargetAndMatchSize(newCanvasElement);
- };
- break;
- case correctTabIndex:
- newCanvasElement.classList.add(
- "drag-item-correct",
- );
- break;
- case wrongTabIndex:
- newCanvasElement.classList.add(
- "drag-item-wrong",
- );
- }
- },
- );
- notifyToolOfChangedImage();
- } else {
- // If the feature is not enabled, we need to show the subscription dialog.
- showRequiresSubscriptionDialogInEditView("canvas");
- }
- });
- }
-
- private addPictureCanvasElement(
- location: Point,
- bloomCanvasJQuery: JQuery,
- rightTopOffset?: string,
- imageInfo?: {
- imageId: string;
- src: string; // must already appropriately URL-encoded.
- copyright: string;
- creator: string;
- license: string;
- },
- size?: { width: number; height: number },
- doAfterElementCreated?: (newElement: HTMLElement) => void,
- ): HTMLElement {
- const standardImageClasses =
- kImageContainerClass + " bloom-leadingElement";
- const imagePlaceHolderHtml = "
";
- const imageContainerHtml =
- // The tabindex here is necessary to get focus to work on an image.
- "" +
- imagePlaceHolderHtml +
- "
";
- return this.finishAddingCanvasElement(
- bloomCanvasJQuery,
- imageContainerHtml,
- location,
- {
- comicalBubbleStyle: "none",
- setElementActive: true,
- rightTopOffset,
- imageInfo,
- size,
- doAfterElementCreated,
- },
- );
- }
- private addNavigationImageButtonElement(
- location: Point,
- bloomCanvasJQuery: JQuery,
- rightTopOffset?: string,
- imageInfo?: {
- imageId: string;
- src: string; // must already appropriately URL-encoded.
- copyright: string;
- creator: string;
- license: string;
- },
- doAfterElementCreated?: (newElement: HTMLElement) => void,
- ): HTMLElement {
- const imageContainerHtml = this.makeImageContainerHtml();
- const result = this.finishAddingCanvasElement(
- bloomCanvasJQuery,
- imageContainerHtml,
- location,
- {
- comicalBubbleStyle: "none",
- setElementActive: true,
- rightTopOffset,
- imageInfo,
- size: { width: 120, height: 120 },
- doAfterElementCreated,
- limitToCanvasBounds: true,
- },
- );
- result.classList.add(kBloomButtonClass);
- return result;
- }
-
- private makeImageContainerHtml() {
- const standardImageClasses =
- kImageContainerClass + " bloom-leadingElement";
- const imagePlaceHolderHtml = "";
- const imageContainerHtml =
- // The tabindex here is necessary to get focus to work on an image.
- ` ${imagePlaceHolderHtml}
`;
- return imageContainerHtml;
- }
-
- private addNavigationImageWithLabelButtonElement(
- location: Point,
- bloomCanvasJQuery: JQuery,
- rightTopOffset?: string,
- imageInfo?: {
- imageId: string;
- src: string; // must already appropriately URL-encoded.
- copyright: string;
- creator: string;
- license: string;
- },
- ): HTMLElement {
- const imageContainerHtml = this.makeImageContainerHtml();
- const transGroupHtml = this.makeTranslationGroup(
- "Navigation-Button-With-Image-Label",
- );
- const result = this.finishAddingCanvasElement(
- bloomCanvasJQuery,
- imageContainerHtml + transGroupHtml,
- location,
- {
- comicalBubbleStyle: "none",
- setElementActive: true,
- rightTopOffset,
- imageInfo,
- size: { width: 120, height: 120 },
- limitToCanvasBounds: true,
- },
- );
- result.classList.add(kBloomButtonClass);
- result.classList.add("bloom-noAutoHeight");
- return result;
- }
-
- private addNavigationLabelButtonElement(
- location: Point,
- bloomCanvasJQuery: JQuery,
- rightTopOffset?: string,
- ): HTMLElement {
- const result = this.addCanvasElementCore(
- location,
- bloomCanvasJQuery,
- "none", // no comical bubble style
- "Navigation-Button-Label",
- rightTopOffset,
- true,
- );
- result.classList.add(kBloomButtonClass);
- result.classList.add("bloom-noAutoHeight");
- // The methods used in the other two get to set a size; here we just do it.
- // We need to make it a bit higher than the default so it doesn't overflow
- // with the additional padding that buttons get.
- result.style.height = "50px";
- // result.style.width = "120px";
- return result;
- }
-
- private addSoundCanvasElement(
- location: Point,
- bloomCanvasJQuery: JQuery,
- rightTopOffset?: string,
- ): HTMLElement {
- const standardImageClasses =
- kImageContainerClass + " bloom-leadingElement";
- // This svg is basically the same as the one in AudioIcon.tsx.
- // Likely, changes to one should be mirrored in the other.
- //
- // The data-icon-type is so we can, in the future, find these and migrate/update them.
- const html = `
-
-
`;
- return this.finishAddingCanvasElement(
- bloomCanvasJQuery,
- html,
- location,
- {
- comicalBubbleStyle: "none",
- setElementActive: true,
- rightTopOffset,
- },
- );
- }
-
- private addBookLinkGridCanvasElement(
- location: Point,
- bloomCanvasJQuery: JQuery,
- rightTopOffset?: string,
- ): HTMLElement {
- const html =
- // The tabindex here is necessary to allow it to be focused.
- "";
- const canvasElement = this.finishAddingCanvasElement(
- bloomCanvasJQuery,
- html,
- location,
- {
- comicalBubbleStyle: "none",
- setElementActive: true,
- rightTopOffset,
- size: { width: 360, height: 360 },
- limitToCanvasBounds: true,
- },
- );
- // Add skeleton to the newly created empty grid
- const linkGrid = canvasElement.querySelector(
- ".bloom-link-grid",
- ) as HTMLElement;
- if (linkGrid) {
- addSkeletonIfEmpty(linkGrid);
- }
- return canvasElement;
- }
-
- private addRectangleCanvasElement(
- location: Point,
- bloomCanvasJQuery: JQuery,
- rightTopOffset?: string,
- ): HTMLElement {
- const html =
- // The tabindex here is necessary to allow it to be focused.
- "";
- const result = this.finishAddingCanvasElement(
- bloomCanvasJQuery,
- html,
- location,
- {
- comicalBubbleStyle: "none",
- setElementActive: true,
- rightTopOffset,
- },
- );
- // reorder it after the element with class kBackgroundImageClass. This puts it in front of
- // the background but but behind the other canvas elements it is meant to frame.
- this.reorderRectangleCanvasElement(result, bloomCanvasJQuery.get(0));
- return result;
- }
-
- // Put the rectangle in the right place in the DOM so it is behind the other canvas elements
- // but in front of the background image. Also adjust the ComicalJS bubble level so it is in
- // front of the the background image.
- private reorderRectangleCanvasElement(
- rectangle: HTMLElement,
- bloomCanvas: HTMLElement,
- ): void {
- const backgroundImage = bloomCanvas.getElementsByClassName(
- kBackgroundImageClass,
- )[0] as HTMLElement;
- if (backgroundImage) {
- bloomCanvas.insertBefore(rectangle, backgroundImage.nextSibling);
- // Being first in document order gives it the right z-order, but it also has to be
- // in the right sequence by ComicalJs Bubble level for the hit test to work right.
- CanvasElementManager.putBubbleBefore(
- rectangle,
- (
- Array.from(
- bloomCanvas.getElementsByClassName(kCanvasElementClass),
- ) as HTMLElement[]
- ).filter((x) => x !== backgroundImage),
- Bubble.getBubbleSpec(backgroundImage).level + 1,
- );
- }
- }
-
- // Note: This is distinct from ensureCanvasElementsIntersectParent(), which is intended to
- // keep *existing* canvas elements at least partly visible (and also keeps tails inside).
- // Here we try to keep a *newly created* element entirely within the canvas (if possible),
- // without changing its size and without moving it above/left of the canvas.
- private ensureCanvasElementInsideCanvasIfPossible(
- canvasElement: HTMLElement,
- bloomCanvas: HTMLElement,
- ): void {
- const canvasSize = getExactClientSize(bloomCanvas);
- const canvasElementSize = getExactClientSize(canvasElement);
- const currentCanvasElementLeft = CanvasElementManager.pxToNumber(
- canvasElement.style.left,
- );
- const currentCanvasElementTop = CanvasElementManager.pxToNumber(
- canvasElement.style.top,
- );
- const currentCanvasElementWidth = canvasElementSize.width;
- const currentCanvasElementHeight = canvasElementSize.height;
-
- const maxLeft = canvasSize.width - currentCanvasElementWidth;
- const maxTop = canvasSize.height - currentCanvasElementHeight;
- const clampedLeft = Math.max(
- 0,
- Math.min(currentCanvasElementLeft, maxLeft),
- );
- const clampedTop = Math.max(
- 0,
- Math.min(currentCanvasElementTop, maxTop),
- );
- if (
- clampedLeft !== currentCanvasElementLeft ||
- clampedTop !== currentCanvasElementTop
- ) {
- CanvasElementManager.setCanvasElementPosition(
- canvasElement,
- clampedLeft,
- clampedTop,
- );
- this.adjustTarget(canvasElement);
- }
- }
-
- private finishAddingCanvasElement(
- bloomCanvasJQuery: JQuery,
- internalHtml: string,
- location: Point,
- options?: {
- comicalBubbleStyle?: string;
- setElementActive?: boolean;
- rightTopOffset?: string;
- imageInfo?: {
- imageId: string;
- src: string; // must already appropriately URL-encoded.
- copyright: string;
- creator: string;
- license: string;
- };
- size?: { width: number; height: number };
- doAfterElementCreated?: (newElement: HTMLElement) => void;
- limitToCanvasBounds?: boolean;
- },
- ): HTMLElement {
- // add canvas element as last child of .bloom-canvas (BL-7883)
- const lastChildOfBloomCanvas = bloomCanvasJQuery.children().last();
- const canvasElementHtml =
- "" +
- internalHtml +
- "
";
- // It's especially important that the new canvas element comes AFTER the main image,
- // since that's all that keeps it on top of the image. We're deliberately not
- // using z-index so that the bloom-canvas is not a stacking context so we
- // can use z-index on the buttons inside it to put them above the comicaljs canvas.
- const canvasElementJQuery = $(canvasElementHtml).insertAfter(
- lastChildOfBloomCanvas,
- );
- const canvasElement = canvasElementJQuery.get(0);
- if (options?.imageInfo) {
- const img = canvasElement.getElementsByTagName("img")[0];
- if (img) {
- changeImageInfo(img, options.imageInfo);
- }
- }
- if (options?.size) {
- canvasElement.style.width = options.size.width + "px";
- canvasElement.style.height = options.size.height + "px";
- } else {
- this.setDefaultHeightFromWidth(canvasElement);
- }
- this.placeElementAtPosition(
- canvasElementJQuery,
- bloomCanvasJQuery.get(0),
- location,
- options?.rightTopOffset,
- );
-
- if (options?.limitToCanvasBounds) {
- const bloomCanvas = bloomCanvasJQuery.get(0) as HTMLElement;
- this.ensureCanvasElementInsideCanvasIfPossible(
- canvasElement,
- bloomCanvas,
- );
- }
-
- // The following code would not be needed for Picture and Video canvas elements if the focusin
- // handler were reliably called after being attached by refreshBubbleEditing() below.
- // However, calling the jquery.focus() method in bloomEditing.focusOnChildIfFound()
- // causes the handler to fire ONLY for Text canvas elements. This is a complete mystery to me.
- // Therefore, for Picture and Video canvas elements, we set the content active and notify the
- // canvas element tool. But we don't need/want the actions of setActiveElement() which overlap
- // with refreshBubbleEditing(). This code actually prevents bloomEditing.focusOnChildIfFound()
- // from being called, but that doesn't really matter since calling it does no good.
- // See https://issues.bloomlibrary.org/youtrack/issue/BL-11620.
- if (options?.setElementActive) {
- this.activeElement = canvasElement;
- this.doNotifyChange();
- this.showCorrespondingTextBox(canvasElement);
- }
- const bubble = new Bubble(canvasElement);
- const bubbleSpec: BubbleSpec = Bubble.getDefaultBubbleSpec(
- canvasElement,
- options?.comicalBubbleStyle || "speech",
- );
- bubble.setBubbleSpec(bubbleSpec);
- const bloomCanvas = bloomCanvasJQuery.get(0);
- if (options?.doAfterElementCreated) {
- // It's not obvious when the best time to do this is. Obviously it has to be after
- // the element is created. For the current purpose, the main thing is that it be
- // before refreshBubbleEditing() is called, since (for picture elements) that is
- // what gets the element selected and triggers a call to adjustContainerAspectRatio().
- options.doAfterElementCreated(canvasElement);
- }
- // background image in parent bloom-canvas may need to become canvas element
- // (before we refreshBubbleEditing, since we may change some canvas elements here.)
- this.handleResizeAdjustments();
- this.refreshCanvasElementEditing(bloomCanvas, bubble, true, true);
- const editable = canvasElement.getElementsByClassName(
- "bloom-editable bloom-visibility-code-on",
- )[0] as HTMLElement;
- editable?.focus();
- return canvasElement;
- }
-
- // All of the text-based canvas elements' default heights are based on the min-height of 30px set
- // in canvasTool.less for a .bloom-canvas-element. For other elements, we usually want something else.
- public setDefaultHeightFromWidth(canvasElement: HTMLElement) {
- const width = parseInt(getComputedStyle(canvasElement).width, 10);
-
- if (
- canvasElement.querySelector(`.${kVideoContainerClass}`) !== null ||
- canvasElement.querySelector(`.bloom-rectangle`) !== null
- ) {
- // Set the default video aspect to 4:3, the same as the sign language tool generates.
- canvasElement.style.height = `${(width * 3) / 4}px`;
- } else if (
- canvasElement.querySelector(kImageContainerSelector) !== null
- ) {
- // Set the default image aspect to square.
- canvasElement.style.height = `${width}px`;
- }
- }
-
- // mouseX and mouseY are the location in the viewport of the mouse
- // The desired element might be covered by a .MuiModal-backdrop, so we may
- // need to check multiple elements at that location.
- private getBloomCanvasFromMouse(mouseX: number, mouseY: number): JQuery {
- const elements = document.elementsFromPoint(mouseX, mouseY);
- for (let i = 0; i < elements.length; i++) {
- const trial = CanvasElementManager.getBloomCanvas(elements[i]);
- if (trial) {
- return $(trial);
- }
- }
- return $();
- }
-
- // This method is used both for creating new elements and in dragging/resizing.
- // positionInBloomCanvas and rightTopOffset determine where to place the element.
- // If rightTopOffset is falsy, we put the element's top left at positionInBloomCanvas.
- // If rightTopOffset is truthy, it is a string like "10,-20" which are values to
- // add to positionInBloomCanvas (which in this case is the mouse position where
- // something was dropped, relative to canvas) to get the top right of the visual object that was dropped.
- // Then we position the new element so its top right is at that same point.
- // Note: I wish we could just make this adjustment in the dragEnd event handler
- // which receives both the point and the rightTopOffset data, but it does not
- // have access to the element being created to get its width. We could push it up
- // one level into finishAddingCanvasElement, but it's simpler here where we're
- // already extracting and adjusting the offsets from positionInViewport
- private placeElementAtPosition(
- wrapperBox: JQuery,
- container: Element,
- positionInBloomCanvas: Point,
- rightTopOffset?: string,
- ) {
- let xOffset = positionInBloomCanvas.getUnscaledX();
- let yOffset = positionInBloomCanvas.getUnscaledY();
- let right = 0;
- let top = 0;
- if (rightTopOffset) {
- const parts = rightTopOffset.split(",");
- right = parseInt(parts[0]);
- top = parseInt(parts[1]);
- // The wrapperBox width seems to always be 140 at this point, but gets
- // changed before the dropped item displays. Images (including videos and
- // GIFs) are positioned correctly if we assume their actual width is about 60
- // instead, so we need to adjust the xOffset by 80 pixels. Text boxes are
- // positioned correctly if we assume their actual width is about 150 instead,
- // so we adjust their xOFfset by -10. This is a bit of a hack, but it works.
- // I don't know how to get the actual width that will show up in the browser.
- // (The displayed widths for fixed images, videos, and GIFs are really not 60,
- // but they are positioned correctly if we treat them that way here.)
- // See BL-14594.
- let fudgeFactor = 80;
- if (wrapperBox.find(".bloom-translationGroup").length > 0) {
- fudgeFactor = -10;
- }
- xOffset = xOffset + right - wrapperBox.width() + fudgeFactor;
- yOffset = yOffset + top;
- // This is a bit of a kludge, but we want the position snapped here in exactly the cases
- // (dragging from the toolbox) where snapping has not already been handled...and can't easily
- // be handled at a higher level because we want the snap to take effect AFTER we adjust for
- // rightTopOffset, that is, the final position should be snapped.
- // It's conceivable that somewhere in the call stack there's an event we could use to see
- // whether the ctrl key is down, but initial placement of new elements is so inexact that
- // I don't see any point in allowing it to be unsnapped.
- const { x, y } = this.snapProvider.getPosition(
- undefined,
- xOffset,
- yOffset,
- );
- xOffset = x;
- yOffset = y;
- }
-
- // Note: This code will not clear out the rest of the style properties... they are preserved.
- // If some or all style properties need to be removed before doing this processing, it is the caller's responsibility to do so beforehand
- // The reason why we do this is because a canvas element's onmousemove handler calls this function,
- // and in that case we want to preserve the canvas element's width/height which are set in the style
- wrapperBox.css("left", xOffset); // assumes numbers are in pixels
- wrapperBox.css("top", yOffset); // assumes numbers are in pixels
-
- CanvasElementManager.setCanvasElementPosition(
- wrapperBox.get(0) as HTMLElement,
- xOffset,
- yOffset,
- );
-
- this.adjustTarget(wrapperBox.get(0));
- }
-
- private adjustTarget(draggable: HTMLElement | undefined) {
- if (!draggable) {
- // I think this is just to remove the arrow if any.
- adjustTarget(document.firstElementChild as HTMLElement, undefined);
- return;
- }
- const targetId = draggable.getAttribute(kDraggableIdAttribute);
- const target = targetId
- ? document.querySelector(`[data-target-of="${targetId}"]`)
- : undefined;
- adjustTarget(draggable, target as HTMLElement);
- }
-
- // This used to be called from a right-click context menu, but now it only gets called
- // from the comicTool where we verify that we have an active element BEFORE calling this
- // method. That simplifies things here.
- public deleteCanvasElement(textOverPicDiv: HTMLElement) {
- // Simple guard, just in case.
- if (!textOverPicDiv || !textOverPicDiv.parentElement) {
- return;
- }
- if (textOverPicDiv.classList.contains(kBackgroundImageClass)) {
- // just revert it to a placeholder
- const img = getImageFromCanvasElement(textOverPicDiv);
- if (img) {
- img.classList.remove("bloom-imageLoadError");
- img.onerror = HandleImageError;
- img.src = "placeHolder.png";
- this.updateCanvasElementForChangedImage(img);
- notifyToolOfChangedImage(img);
- }
- return;
- }
- const containerElement = textOverPicDiv.parentElement;
- // Make sure comical is up-to-date.
- if (
- containerElement.getElementsByClassName(kComicalGeneratedClass)
- .length > 0
- ) {
- Comical.update(containerElement);
- }
-
- Comical.deleteBubbleFromFamily(textOverPicDiv, containerElement);
-
- // Update UI and make sure things get redrawn correctly.
- this.refreshCanvasElementEditing(
- containerElement,
- undefined,
- false,
- false,
- );
- // We no longer have an active element, but the old active element may be
- // needed by the removeControlFrame method called by refreshCanvasElementEditing
- // to remove a popup menu.
- this.setActiveElement(undefined);
- // By this point it's really gone, so this will clean up if it had a target.
- this.removeDetachedTargets();
- }
-
- // We verify that 'textElement' is the active element before calling this method.
- public duplicateCanvasElementBox(
- textElement: HTMLElement,
- sameLocation?: boolean,
- ): HTMLElement | undefined {
- // simple guard
- if (!textElement || !textElement.parentElement) {
- return undefined;
- }
- const bloomCanvas = textElement.parentElement;
- // Make sure comical is up-to-date before we clone things.
- if (
- bloomCanvas.getElementsByClassName(kComicalGeneratedClass).length >
- 0
- ) {
- Comical.update(bloomCanvas);
- }
- // Get the patriarch canvas element of this comical family. Can only be undefined if no active element.
- const patriarchBubble = this.getPatriarchBubbleOfActiveElement();
- if (patriarchBubble) {
- if (textElement !== patriarchBubble.content) {
- this.setActiveElement(patriarchBubble.content);
- }
- const bubbleSpecToDuplicate = this.getSelectedItemBubbleSpec();
- if (!bubbleSpecToDuplicate) {
- // Oddness! Bail!
- // reset active element to what it was
- this.setActiveElement(textElement as HTMLElement);
- return;
- }
-
- const result = this.duplicateCanvasElementFamily(
- patriarchBubble,
- bubbleSpecToDuplicate,
- sameLocation,
- );
- if (result) {
- const isRectangle =
- result.getElementsByClassName("bloom-rectangle").length > 0;
- if (isRectangle) {
- // adjust the new rectangle's z-order and comical level to match the original.
- this.reorderRectangleCanvasElement(result, bloomCanvas);
- }
- }
- // The JQuery resizable event handler needs to be removed after the duplicate canvas element
- // family is created, and then the over picture editing needs to be initialized again.
- // See BL-13617.
- this.removeJQueryResizableWidget();
- this.initializeCanvasElementEditing();
- return result;
- }
- return undefined;
- }
-
- // Should duplicate all canvas elements and their size and relative placement and color, etc.,
- // and the actual text in the canvas elements.
- // The 'patriarchSourceBubble' is the head of a family of canvas elements to duplicate,
- // although this one canvas element may be all there is.
- // The content of 'patriarchSourceBubble' is now the active element.
- // The 'bubbleSpecToDuplicate' param is the bubbleSpec for the patriarch source canvas element.
- // The function returns the patriarch canvas element of the new
- // duplicated canvas element family.
- // This method handles all needed refreshing of the duplicate canvas elements.
- private duplicateCanvasElementFamily(
- patriarchSourceBubble: Bubble,
- bubbleSpecToDuplicate: BubbleSpec,
- sameLocation: boolean = false,
- ): HTMLElement | undefined {
- const sourceElement = patriarchSourceBubble.content;
- const proposedOffset = 15;
- const newPoint = this.findBestLocationForNewCanvasElement(
- sourceElement,
- sameLocation ? 0 : proposedOffset + sourceElement.clientWidth, // try to not overlap too much
- sameLocation ? 0 : proposedOffset,
- );
- if (!newPoint) {
- return;
- }
- const patriarchDuplicateElement = this.addCanvasElementFromOriginal(
- newPoint.getScaledX(),
- newPoint.getScaledY(),
- sourceElement,
- bubbleSpecToDuplicate.style,
- );
- if (!patriarchDuplicateElement) {
- return;
- }
- patriarchDuplicateElement.classList.remove(kBackgroundImageClass);
- patriarchDuplicateElement.style.color = sourceElement.style.color; // preserve text color
- patriarchDuplicateElement.innerHTML =
- this.safelyCloneHtmlStructure(sourceElement);
- // Preserve the Auto Height setting. See BL-13931.
- if (sourceElement.classList.contains("bloom-noAutoHeight"))
- patriarchDuplicateElement.classList.add("bloom-noAutoHeight");
- // Preserve the bloom-gif class, which is used to indicate that this is a GIF. (BL-15037)
- if (sourceElement.classList.contains("bloom-gif"))
- patriarchDuplicateElement.classList.add("bloom-gif");
- if (sourceElement.classList.contains(kBloomButtonClass))
- patriarchDuplicateElement.classList.add(kBloomButtonClass);
- const imageFitMode = sourceElement.getAttribute(kImageFitModeAttribute);
- // Could just copy it unconditionally, but we're using the absence of the
- // attribute to represent the default state, so that would introduce a
- // fourth state (empty string) that may complicate things. We don't need
- // to remove it if absent because we created a fresh element.
- if (imageFitMode) {
- patriarchDuplicateElement.setAttribute(
- kImageFitModeAttribute,
- imageFitMode,
- );
- }
-
- // copy any data-sound
- const sourceDataSound = sourceElement.getAttribute("data-sound");
- if (sourceDataSound) {
- patriarchDuplicateElement.setAttribute(
- "data-sound",
- sourceDataSound,
- );
- }
- // copy any sound files found in an editable div
- this.copyAnySoundFileAndAttributesForEditable(
- sourceElement,
- patriarchDuplicateElement,
- );
-
- this.setActiveElement(patriarchDuplicateElement);
- this.matchSizeOfSource(sourceElement, patriarchDuplicateElement);
- const container = CanvasElementManager.getBloomCanvas(
- patriarchDuplicateElement,
- );
- if (!container) {
- return; // highly unlikely!
- }
- const adjustedTailSpec = this.getAdjustedTailSpec(
- container,
- bubbleSpecToDuplicate.tails,
- sourceElement,
- patriarchDuplicateElement,
- );
- // This is the bubbleSpec for the brand new (now active) copy of the patriarch canvas element.
- // We will overwrite most of it, but keep its level and version properties. The level will be
- // different so the copied canvas element(s) will be in a separate child chain from the original(s).
- // The version will probably be the same, but if it differs, we want the new one.
- // We will update this bubbleSpec with an adjusted version of the original tail and keep
- // other original properties (like backgroundColor and border style/color and order).
- const specOfCopiedElement = this.getSelectedItemBubbleSpec();
- if (!specOfCopiedElement) {
- return; // highly unlikely!
- }
- this.updateSelectedItemBubbleSpec({
- ...bubbleSpecToDuplicate,
- tails: adjustedTailSpec,
- level: specOfCopiedElement.level,
- version: specOfCopiedElement.version,
- });
- // OK, now we're done with our manipulation of the patriarch canvas element and we're about to go on
- // and deal with the child canvas elements (if any). But we replaced the innerHTML after creating the
- // initial duplicate canvas element and the editable divs may not have the appropriate events attached,
- // so we'll refresh again with 'attachEventsToEditables' set to 'true'.
- this.refreshCanvasElementEditing(
- container,
- new Bubble(patriarchDuplicateElement),
- true,
- true,
- );
- const childBubbles = Comical.findRelatives(patriarchSourceBubble);
- childBubbles.forEach((childBubble) => {
- const childOffsetFromPatriarch = this.getOffsetFrom(
- sourceElement,
- childBubble.content,
- );
- this.duplicateOneChildCanvasElement(
- childOffsetFromPatriarch,
- patriarchDuplicateElement,
- childBubble,
- );
- // Make sure comical knows about each child as it's created, otherwise it gets the order wrong.
- Comical.convertBubbleJsonToCanvas(container as HTMLElement);
- });
- return patriarchDuplicateElement;
- }
-
- private copyAnySoundFileAndAttributesForEditable(
- sourceElement: HTMLElement,
- copiedElement: HTMLElement,
- ): void {
- const sourceEditable = sourceElement.querySelector(".bloom-editable");
- if (!sourceEditable) return;
- const copiedEditable = copiedElement.querySelector(".bloom-editable");
- if (!copiedEditable) return;
- const sourceId = sourceEditable.getAttribute("id");
- const mode = sourceEditable.getAttribute("data-audiorecordingmode");
- if (sourceId && mode === "TextBox") {
- this.copySoundFileAndAttributes(
- sourceEditable,
- sourceId,
- copiedEditable,
- );
- } else if (mode === "Sentence") {
- const sourceSpans = sourceEditable.querySelectorAll(
- "span.audio-sentence[id][recordingmd5]",
- );
- const copiedSpans = copiedEditable.querySelectorAll(
- "span.audio-sentence[recordingmd5]",
- );
- if (
- sourceSpans.length === copiedSpans.length &&
- sourceSpans.length > 0
- ) {
- sourceSpans.forEach((sourceSpan, index) => {
- const copiedSpan = copiedSpans[index];
- const sourceSpanId = sourceSpan.getAttribute("id");
- if (sourceSpanId) {
- this.copySoundFileAndAttributes(
- sourceSpan,
- sourceSpanId,
- copiedSpan,
- );
- }
- });
- }
- }
- }
-
- private copySoundFileAndAttributes(
- sourceElement: Element,
- sourceId: string,
- copiedElement: Element,
- ) {
- const newId = AudioRecording.createValidXhtmlUniqueId();
- copiedElement.setAttribute("id", newId);
- copyAudioFileAsync(sourceId, newId); // we don't need to wait for this to finish
- const duration = sourceElement.getAttribute("data-duration");
- if (duration) {
- copiedElement.setAttribute("data-duration", duration);
- }
- const endTimes = sourceElement.getAttribute(
- "data-audiorecordingendtimes",
- );
- if (endTimes) {
- copiedElement.setAttribute("data-audiorecordingendtimes", endTimes);
- }
- }
-
- private getAdjustedTailSpec(
- bloomCanvas: Element,
- originalTailSpecs: TailSpec[],
- sourceElement: HTMLElement,
- duplicateElement: HTMLElement,
- ): TailSpec[] {
- if (originalTailSpecs.length === 0) {
- return originalTailSpecs;
- }
- const offSetFromSource = this.getOffsetFrom(
- sourceElement,
- duplicateElement,
- );
- return originalTailSpecs.map((spec) => {
- const tipPoint = this.adjustRelativePointToBloomCanvas(
- bloomCanvas,
- new Point(
- spec.tipX + offSetFromSource.getUnscaledX(),
- spec.tipY + offSetFromSource.getUnscaledY(),
- PointScaling.Unscaled,
- "getAdjustedTailSpec.tip",
- ),
- );
- const midPoint = this.adjustRelativePointToBloomCanvas(
- bloomCanvas,
- new Point(
- spec.midpointX + offSetFromSource.getUnscaledX(),
- spec.midpointY + offSetFromSource.getUnscaledY(),
- PointScaling.Unscaled,
- "getAdjustedTailSpec.mid",
- ),
- );
- return {
- ...spec,
- tipX: tipPoint.getUnscaledX(),
- tipY: tipPoint.getUnscaledY(),
- midpointX: midPoint.getUnscaledX(),
- midpointY: midPoint.getUnscaledY(),
- };
- });
- }
-
- private matchSizeOfSource(
- sourceElement: HTMLElement,
- destElement: HTMLElement,
- ) {
- destElement.style.width = sourceElement.clientWidth.toFixed(0) + "px";
- // text elements adjust their height automatically based on width and content...
- // picture over picture and video over picture don't.
- destElement.style.height = sourceElement.clientHeight.toFixed(0) + "px";
- }
-
- private getOffsetFrom(
- sourceElement: HTMLElement,
- destElement: HTMLElement,
- ): Point {
- return new Point(
- destElement.offsetLeft - sourceElement.offsetLeft,
- destElement.offsetTop - sourceElement.offsetTop,
- PointScaling.Scaled,
- "Destination scaled offset from Source",
- );
- }
-
- private duplicateOneChildCanvasElement(
- offsetFromPatriarch: Point,
- parentElement: HTMLElement,
- childSourceBubble: Bubble,
- ) {
- const newChildElement = this.addChildInternal(
- parentElement,
- offsetFromPatriarch.getScaledX(),
- offsetFromPatriarch.getScaledY(),
- );
- if (!newChildElement) {
- return;
- }
- const sourceElement = childSourceBubble.content;
- newChildElement.innerHTML =
- this.safelyCloneHtmlStructure(sourceElement);
- this.copyAnySoundFileAndAttributesForEditable(
- sourceElement,
- newChildElement,
- );
- // Preserve the Auto Height setting. See BL-13931.
- if (sourceElement.classList.contains("bloom-noAutoHeight"))
- newChildElement.classList.add("bloom-noAutoHeight");
- // Preserve the bloom-gif class, which is used to indicate that this is a GIF. (BL-15037)
- if (sourceElement.classList.contains("bloom-gif"))
- newChildElement.classList.add("bloom-gif");
-
- this.matchSizeOfSource(sourceElement, newChildElement);
- // We just replaced the bloom-editables from the 'addChildInternal' with a clone of the source
- // canvas element's HTML. This will undo any event handlers that might have been attached by the
- // refresh triggered by 'addChildInternal'. So we send the newly modified child through again,
- // with 'attachEventsToEditables' set to 'true'.
- this.refreshCanvasElementEditing(
- CanvasElementManager.getBloomCanvas(parentElement)!,
- new Bubble(newChildElement),
- true,
- true,
- );
- }
-
- private safelyCloneHtmlStructure(elementToClone: HTMLElement): string {
- // eliminate .bloom-ui and ?
- const clonedElement = elementToClone.cloneNode(true) as HTMLElement;
- this.cleanClonedNode(clonedElement);
- return clonedElement.innerHTML;
- }
-
- private cleanClonedNode(element: Element) {
- if (this.clonedNodeNeedsDeleting(element)) {
- element.parentElement!.removeChild(element);
- return;
- }
- if (element.nodeName === "#text") {
- return;
- }
-
- // Cleanup this node
- this.safelyRemoveAttribute(element, "id");
- // Picture over picture elements need the tabindex (="0") in order to be focusable.
- // But for text-based canvas elements we need to delete positive tabindex, so we don't do weird
- // things to talking book playback order when we duplicate a family of canvas elements.
- this.removePositiveTabindex(element);
- this.safelyRemoveAttribute(element, "data-duration");
- this.safelyRemoveAttribute(element, "data-audiorecordingendtimes");
-
- // Clean children
- const childArray = Array.from(element.childNodes);
- childArray.forEach((element) => {
- this.cleanClonedNode(element as Element);
- });
- }
-
- private removePositiveTabindex(element: Element) {
- if (!element.hasAttribute("tabindex")) {
- return;
- }
- const indexStr = element.getAttribute("tabindex");
- if (!indexStr) {
- return;
- }
- const indexValue = parseInt(indexStr, 10);
- if (indexValue > 0) {
- element.attributes.removeNamedItem("tabindex");
- }
- }
-
- private safelyRemoveAttribute(element: Element, attrName: string) {
- if (element.hasAttribute(attrName)) {
- element.attributes.removeNamedItem(attrName);
- }
- }
-
- private clonedNodeNeedsDeleting(element: Element): boolean {
- const htmlElement = element as HTMLElement;
- return (
- !htmlElement ||
- (htmlElement.classList &&
- (htmlElement.classList.contains("bloom-ui") ||
- htmlElement.classList.contains("nicescroll-rails") ||
- htmlElement.classList.contains("nicescroll-cursors")))
- );
- }
-
- // Notes that comic editing either has not been suspended...isComicEditingOn might be true or false...
- // or that it was suspended because of a drag in progress that might affect page layout
- // (current example: mouse is down over an origami splitter), or because some longer running
- // process that affects layout is happening (current example: origami layout tool is active),
- // or because we're testing a bloom game.
- // When in one of the latter states, it may be inferred that isComicEditingOn was true when
- // suspendComicEditing was called, that it is now false, and that resumeComicEditing should
- // turn it on again.
- private comicEditingSuspendedState:
- | "none"
- | "forDrag"
- | "forTool"
- | "forJqueryResize"
- | "forGamePlayMode" = "none";
-
- private splitterResizeObservers: ResizeObserver[] = [];
- public startDraggingSplitter() {
- this.getAllBloomCanvasesOnPage().forEach((bloomCanvas) => {
- const backgroundCanvasElement = bloomCanvas.getElementsByClassName(
- kBackgroundImageClass,
- )[0] as HTMLElement;
- if (backgroundCanvasElement) {
- // These two attributes are what the resize observer will mess with to make
- // the background resize as the splitter moves. We will restore them in
- // endDraggingSplitter so the code that adjusts all the canvas elements has the
- // correct starting size.
- backgroundCanvasElement.setAttribute(
- "data-oldStyle",
- backgroundCanvasElement.getAttribute("style") ?? "",
- );
- const img = getImageFromCanvasElement(backgroundCanvasElement);
- img?.setAttribute(
- "data-oldStyle",
- img.getAttribute("style") ?? "",
- );
- const resizeObserver = new ResizeObserver(() => {
- this.adjustBackgroundImageSize(
- bloomCanvas,
- backgroundCanvasElement,
- false,
- );
- });
- resizeObserver.observe(bloomCanvas);
- this.splitterResizeObservers.push(resizeObserver);
- }
- });
- }
-
- public endDraggingSplitter() {
- this.getAllBloomCanvasesOnPage().forEach((bloomCanvas) => {
- const backgroundCanvasElement = bloomCanvas.getElementsByClassName(
- kBackgroundImageClass,
- )[0] as HTMLElement;
- // We need to remove the results of the continuous adjustments so that we can make the change again,
- // but this time adjust all the other canvas elements with it.
- if (backgroundCanvasElement) {
- backgroundCanvasElement.setAttribute(
- "style",
- backgroundCanvasElement.getAttribute("data-oldStyle") ?? "",
- );
- backgroundCanvasElement.removeAttribute("data-oldStyle");
- const img = getImageFromCanvasElement(backgroundCanvasElement);
- img?.setAttribute(
- "style",
- img.getAttribute("data-oldStyle") ?? "",
- );
- img?.removeAttribute("data-oldStyle");
- }
- while (this.splitterResizeObservers.length) {
- this.splitterResizeObservers.pop()?.disconnect();
- }
- });
- }
-
- public suspendComicEditing(
- forWhat: "forDrag" | "forTool" | "forGamePlayMode" | "forJqueryResize",
- ) {
- if (!this.isCanvasElementEditingOn) {
- // Note that this prevents us from getting into one of the suspended states
- // unless it was on to begin with. Therefore a subsequent resume won't turn
- // it back on unless it was to start with.
- return;
- }
- this.turnOffCanvasElementEditing();
- if (forWhat === "forDrag" || forWhat === "forJqueryResize") {
- this.startDraggingSplitter();
- }
-
- if (forWhat === "forGamePlayMode") {
- const allCanvasElements = Array.from(
- document.getElementsByClassName(kCanvasElementClass),
- );
- // We don't want the user to be able to edit the text in the canvas elements while playing a game.
- // This doesn't need to be in the game prepareActivity because we remove contenteditable
- // from all elements when publishing a book.
- allCanvasElements.forEach((element) => {
- const editables = Array.from(
- element.getElementsByClassName("bloom-editable"),
- );
- editables.forEach((editable) => {
- editable.removeAttribute("contenteditable");
- });
- });
- }
- // We don't want to switch to state 'forDrag' while it is suspended by a tool.
- // But we don't need to prevent it because if it's suspended by a tool (e.g., origami layout),
- // any mouse events will find that comic editing is off and won't get this far.
- this.comicEditingSuspendedState = forWhat;
- }
-
- public checkActiveElementIsVisible() {
- if (!this.activeElement) {
- return;
- }
- if (window.getComputedStyle(this.activeElement).display === "none") {
- this.setActiveElement(undefined);
- }
- }
-
- public resumeComicEditing() {
- if (this.comicEditingSuspendedState === "none") {
- // This guards against both mouse up events that are nothing to do with
- // splitters and (if this is even possible) a resume that matches a suspend
- // call when comic editing wasn't on to begin with.
- return;
- }
- if (
- this.comicEditingSuspendedState === "forDrag" ||
- this.comicEditingSuspendedState === "forJqueryResize"
- ) {
- this.endDraggingSplitter();
- }
- if (this.comicEditingSuspendedState === "forTool") {
- // after a forTool suspense, we might have new dividers to put handlers on.
- this.setupSplitterEventHandling();
- }
- if (this.comicEditingSuspendedState === "forGamePlayMode") {
- const allCanvasElements = Array.from(
- document.getElementsByClassName(kCanvasElementClass),
- );
- allCanvasElements.forEach((element) => {
- const editables = Array.from(
- element.getElementsByClassName("bloom-editable"),
- );
- editables.forEach((editable) => {
- editable.setAttribute("contenteditable", "true");
- });
- });
- this.setupControlFrame();
- }
- this.comicEditingSuspendedState = "none";
- this.turnOnCanvasElementEditing();
- }
-
- public adjustAfterOrigamiDoubleClick() {
- // make sure we're not still in a dragging-the-splitter state
- theOneCanvasElementManager.resumeComicEditing();
- // this is automatic for changes that happen while we're dragging,
- // but dragging gets stopped by mouse up, so we need to do it here.
- theOneCanvasElementManager.handleResizeAdjustments();
- }
-
- private draggingSplitter = false;
-
- // mouse down in an origami slider: if comic editing is on, remember that, and turn it off.
- private dividerMouseDown = (ev: Event) => {
- if (this.comicEditingSuspendedState === "forTool") {
- // We're in change layout mode. We want to get the usual behavior of any
- // existing images while dragging the splitter, but we don't need to turn
- // off comic editing since it already is.
- this.draggingSplitter = true;
- this.startDraggingSplitter();
- } else {
- // Unless we're suspended for some other reason, this will call startDraggingSplitter
- // after turning stuff off.
- this.suspendComicEditing("forDrag");
- }
- };
-
- public removeDetachedTargets() {
- const detachedTargets = Array.from(
- document.querySelectorAll("[data-target-of]"),
- );
- const canvasElements = getAllDraggables(document);
- canvasElements.forEach((canvasElement) => {
- const draggableId = canvasElement.getAttribute(
- kDraggableIdAttribute,
- );
- if (draggableId) {
- const index = detachedTargets.findIndex(
- (target: Element) =>
- target.getAttribute("data-target-of") === draggableId,
- );
- if (index > -1) {
- detachedTargets.splice(index, 1); // not detached if draggable points to it
- }
- }
- });
- detachedTargets.forEach((target) => {
- target.remove();
- });
- }
-
- // on ANY mouse up, if comic editing was turned off by an origami click, turn it back on.
- // (This is attached to the document because I don't want it missed if the mouseUp
- // doesn't happen inside the origami slider.)
- // We don't want it turned back on for a tool or in game play mode, because we'll
- // still be in that state after the mouseup.
- private documentMouseUp = (ev: Event) => {
- if (this.comicEditingSuspendedState === "forDrag") {
- // The mousedown was in an origami slider.
- // Clean up and don't let the mouse up affect anything else.
- // (Note: we're not stopping IMMEDATE propagation, so another mouseup handler
- // on the document can remove the origami-drag class.)
- ev.preventDefault();
- ev.stopPropagation();
- setTimeout(() => {
- // in timeout to be sure that another mouseup handler will have removed
- // the origami-drag class from the body, so we can get the right
- // resize behavior when turning back on.
- this.resumeComicEditing();
- }, 0);
- } else if (this.draggingSplitter) {
- // dragging the splitter while in origami mode. We need to clean up
- // in the way resume normally does
- this.draggingSplitter = false;
- this.endDraggingSplitter();
- for (const bloomCanvas of this.getAllBloomCanvasesOnPage()) {
- this.AdjustChildrenIfSizeChanged(bloomCanvas);
- }
- }
- };
-
- public initializeCanvasElementEditing(): void {
- // This gets called in bloomEditable's SetupElements method. This is how it gets set up on page
- // load, so that canvas element editing works even when the Canvas element tool is not active. So it definitely
- // needs to be called there when we're calling SetupElements during page load. It's possible
- // that's the only time it needs to be called from there, but I'm not sure so I'm leaving it
- // called always. However, there's at least one situation where we call SetupElements but do
- // NOT want comic editing turned on: when we're creating an image description translation group
- // in the process of switching to the image description tool. Comic editing is deliberately
- // suspended while that tool is active. For now I'm going with a more-or-less minimal change:
- // if comic editing is not only already initialized, but suspended, we won't turn it on again
- // here.
- if (this.comicEditingSuspendedState !== "none") {
- return;
- }
- // Cleanup old .bloom-ui elements and old drag handles etc.
- // We want to clean these up sooner rather than later so that there's less chance of accidentally blowing away
- // a UI element that we'll actually need now
- // (e.g. the ui-resizable-handles or the format gear, which both have .bloom-ui applied to them)
- this.cleanupCanvasElements();
-
- this.setupSplitterEventHandling();
-
- this.turnOnCanvasElementEditing();
- }
-
- // When dragging origami sliders, turn comical off.
- // With this, we get some weirdness during dragging: canvas element text moves, but
- // the canvas elements do not. But everything clears up when we turn it back on afterwards.
- // Without it, things are even weirder, and the end result may be weird, too.
- // The comical canvas does not change size as the slider moves, and things may end
- // up in strange states with canvas elements cut off where the boundary used to be.
- // It's possible that we could do better by forcing the canvas to stay the same
- // size as the bloom-canvas, but I'm very unsure how resizing an active canvas
- // containing objects will affect ComicalJs and the underlying PaperJs.
- // It should be pretty rare to resize an image after adding canvas elements, so I think it's
- // better to go with this, which at least gives a predictable result.
- // Note: we don't ever need to remove these; they can usefully hang around until
- // we load some other page. (We don't turn off comical when we hide the tool, since
- // the canvas elements are still visible and editable, and we need it's help to support
- // all the relevant behaviors and keep the canvas elements in sync with the text.)
- // Because we're adding a fixed method, not a local function, adding multiple
- // times will not cause duplication.
- public setupSplitterEventHandling() {
- Array.from(
- document.getElementsByClassName("split-pane-divider"),
- ).forEach((d) =>
- d.addEventListener("mousedown", this.dividerMouseDown),
- );
- document.addEventListener("mouseup", this.documentMouseUp, {
- capture: true,
- });
- }
-
- public cleanupCanvasElements() {
- const allCanvasElements = $("body").find(kCanvasElementSelector);
- allCanvasElements.each((index, element) => {
- const thisCanvasElement = $(element);
-
- // Not sure about keeping this. Apparently at one point there could be some left-over controls.
- // But we clean out everything bloom-ui when we save a page, so they couldn't persist long.
- // And now I've added these video controls, which get added before we call this, so it was
- // destroying stuff we want. For now I'm just filtering out the new controls and NOT removing them.
- thisCanvasElement
- .find(".bloom-ui")
- .filter(
- (_, x) =>
- !x.classList.contains("bloom-videoControlContainer"),
- )
- .remove();
- thisCanvasElement.find(".bloom-dragHandleTOP").remove(); // BL-7903 remove any left over drag handles (this was the class used in 4.7 alpha)
- });
- }
-
- private removeJQueryResizableWidget() {
- try {
- const allCanvasElements = $("body").find(kCanvasElementSelector);
- // Removes the resizable functionality completely. This will return the element back to its pre-init state.
- allCanvasElements.resizable("destroy");
- } catch (e) {
- //console.log(`Error removing resizable widget: ${e}`);
- }
- }
-
- // Converts a canvas element's position to absolute in pixels (using CSS styling)
- // (Used to be a percentage of parent size. See comments on setTextboxPosition.)
- // canvasElement: The thing we want to position
- // bloomCanvas: Optional. The bloom-canvas the canvas element is in. If this parameter is not defined, the function will automatically determine it.
- private static convertCanvasElementPositionToAbsolute(
- canvasElement: HTMLElement,
- bloomCanvas?: Element | null | undefined,
- ): void {
- let unscaledRelativeLeft: number;
- let unscaledRelativeTop: number;
-
- const left = canvasElement.style.left;
- const top = canvasElement.style.top;
- if (left.endsWith("px") && top.endsWith("px")) {
- // We're already in absolute pixel position.
- return;
- }
-
- // Note: if the convasElement is scaled by a transform applied to an ancestor
- // element, then the following calculations will be woefully off. See BL-14312.
- // We think all such cases will be caught by the check above for already being
- // in absolute pixel position. But this is still something worth considering
- // if canvas elements show up in strange positions. (Showing image descriptions
- // was the original case where we discovered this problem, and led to realizing
- // that most calls to this method are not really needed.)
-
- if (!bloomCanvas) {
- bloomCanvas = CanvasElementManager.getBloomCanvas(canvasElement);
- }
-
- if (bloomCanvas) {
- const positionInfo = canvasElement.getBoundingClientRect();
- const wrapperBoxPos = new Point(
- positionInfo.left,
- positionInfo.top,
- PointScaling.Scaled,
- "convertTextboxPositionToAbsolute()",
- );
- const reframedPoint = this.convertPointFromViewportToElementFrame(
- wrapperBoxPos,
- bloomCanvas,
- );
- unscaledRelativeLeft = reframedPoint.getUnscaledX();
- unscaledRelativeTop = reframedPoint.getUnscaledY();
- } else {
- console.assert(
- false,
- "convertTextboxPositionToAbsolute(): container was null or undefined.",
- );
-
- // If can't find the container for some reason, fallback to the old, deprecated calculation.
- // (This algorithm does not properly account for the border of the bloom-canvas when zoomed,
- // so the results may be slightly off by perhaps up to 2 pixels)
- const scale = EditableDivUtils.getPageScale();
- const pos = $(canvasElement).position();
- unscaledRelativeLeft = pos.left / scale;
- unscaledRelativeTop = pos.top / scale;
- }
- this.setCanvasElementPosition(
- canvasElement,
- unscaledRelativeLeft,
- unscaledRelativeTop,
- );
- }
-
- // Sets a canvas element's position to what is passed in.
- // (This code also tries to update the canvas element's size if it's not already
- // set as "px". Earlier versions of Bloom
- // stored the canvas element position and size as a percentage of the bloom-canvas size.
- // The reasons for that are lost in history; probably we thought that it would better
- // preserve the user's intent to keep in the same shape and position.
- // But in practice it didn't work well, especially since everything was relative to the
- // bloom-canvas, and the image moves around in that as determined by content:fit etc
- // to keep its aspect ratio. The reasons to prefer an absolute position and
- // size are in BL-11667. Basically, we don't want the canvas element to change its size or position
- // relative to its own tail when the image is resized, either because the page size changed
- // or because of dragging a splitter. It would usually be even better if everything kept
- // its position relative to the image itself, but that is much harder to do since the canvas element
- // isn't (can't be) a child of the img.)
- private static setCanvasElementPosition(
- canvasElement: HTMLElement,
- unscaledRelativeLeft: number,
- unscaledRelativeTop: number,
- ) {
- if (canvasElement.classList.contains("bloom-passive-element")) {
- // Don't set possition for passive elements. They are not supposed to be moved. (BL-14685)
- return;
- }
- // We always want to set the position here.
- canvasElement.style.left = unscaledRelativeLeft + "px";
- canvasElement.style.top = unscaledRelativeTop + "px";
- // The width value should always end in "px" (even if it is 0px).
- // In days of yore, we used %, but that turned out to be a bad idea, as
- // discussed above. We don't need to change the width/height if they're
- // already in px.
- const currentWidth = canvasElement.style.width;
- if (!currentWidth || !currentWidth.endsWith("px")) {
- const clientWidth = canvasElement.clientWidth;
- const clientHeight = canvasElement.clientHeight;
- canvasElement.style.width = clientWidth + "px";
- canvasElement.style.height = clientHeight + "px";
- // if the width/height have changed in actuality, not just in representation,
- // then we have a problem.
- console.assert(
- clientWidth === canvasElement.clientWidth &&
- clientHeight === canvasElement.clientHeight,
- "CanvasElementManager.setCanvasElementPosition(): clientWidth/Height mismatch!",
- );
- }
- }
-
- // Determines the unrounded width/height of the content of an element (i.e, excluding its margin, border, padding)
- //
- // This differs from JQuery width/height because those functions give you values rounded to the nearest pixel.
- // This differs from getBoundingClientRect().width because that function includes the border and padding of the element in the width.
- // This function returns the interior content's width/height (unrounded), without any margin, border, or padding
- private static getInteriorWidthHeight(element: HTMLElement): Point {
- const boundingRect = element.getBoundingClientRect();
-
- const exterior = new Point(
- boundingRect.width,
- boundingRect.height,
- PointScaling.Scaled,
- "getBoundingClientRect() result (Relative to viewport)",
- );
-
- // Exterior gives the location of the outside edge of the border. But we want values relative to the inside edge of the padding.
- // So we need to subtract out the border and padding, once for each side of the box
- const borderAndPadding = this.getCombinedBordersAndPaddings(element);
- const interior = exterior.subtract(borderAndPadding);
- return interior;
- }
-
- // Lots of places we need to find the bloom-canvas that a particular element resides in.
- // Method is static because several of the callers are static.
- // Return null if element isn't in a bloom-canvas at all.
- private static getBloomCanvas(element: Element): HTMLElement | null {
- if (!element?.closest) {
- // It's possible for the target to be the root document object. If so, it doesn't
- // have a 'closest' function, so we'd better not try to call it.
- // It's also certainly not inside a bloom-canvas, so null is a safe result.
- return null;
- }
- return element.closest(kBloomCanvasSelector);
- }
-
- // When showing a tail for a canvas element style that doesn't have one by default, we get one here.
- public getDefaultTailSpec(): TailSpec | undefined {
- const activeElement = this.getActiveElement();
- if (activeElement) {
- return Bubble.makeDefaultTail(activeElement);
- }
- return undefined;
- }
-
- private static inPlayMode(someElt: Element) {
- return someElt
- .closest(".bloom-page")
- ?.parentElement?.classList.contains("drag-activity-play");
- }
-
- public deleteCurrentCanvasElement(): void {
- // "this" might be a menu item that was clicked. Calling explicitly again fixes that. See BL-13928.
- if (this !== theOneCanvasElementManager) {
- theOneCanvasElementManager.deleteCurrentCanvasElement();
- return;
- }
- const active = this.getActiveElement();
- if (active) {
- this.deleteCanvasElement(active);
- }
- }
-
- public duplicateCanvasElement(): HTMLElement | undefined {
- // "this" might be a menu item that was clicked. Calling explicitly again fixes that. See BL-13928.
- if (this !== theOneCanvasElementManager) {
- return theOneCanvasElementManager.duplicateCanvasElement();
- }
- const active = this.getActiveElement();
- if (active) {
- return this.duplicateCanvasElementBox(active);
- }
- return undefined;
- }
-
- public addChildCanvasElement(): void {
- // "this" might be a menu item that was clicked. Calling explicitly again fixes that. See BL-13928.
- if (this !== theOneCanvasElementManager) {
- theOneCanvasElementManager.addChildCanvasElement();
- return;
- }
- const parentElement = this.getActiveElement();
- if (!parentElement) {
- // No parent to attach to
- toastr.info("No element is currently active.");
- return;
- }
-
- // Enhance: Is there a cleaner way to keep activeBubbleSpec up to date?
- // Comical would need to call the notifier a lot more often like when the tail moves.
-
- // Retrieve the latest bubbleSpec
- const bubbleSpec = this.getSelectedItemBubbleSpec();
- const [offsetX, offsetY] =
- CanvasElementManager.GetChildPositionFromParentCanvasElement(
- parentElement,
- bubbleSpec,
- );
- this.addChildCanvasElementAndRefreshPage(
- parentElement,
- offsetX,
- offsetY,
- );
- }
-
- // Returns a 2-tuple containing the desired x and y offsets of the child canvas element from the parent canvas element
- // (i.e., offsetX = child.left - parent.left)
- public static GetChildPositionFromParentCanvasElement(
- parentElement: HTMLElement,
- parentBubbleSpec: BubbleSpec | undefined,
- ): number[] {
- let offsetX = parentElement.clientWidth;
- let offsetY = parentElement.clientHeight;
-
- if (
- parentBubbleSpec &&
- parentBubbleSpec.tails &&
- parentBubbleSpec.tails.length > 0
- ) {
- const tail = parentBubbleSpec.tails[0];
-
- const canvasElementCenterX =
- parentElement.offsetLeft + parentElement.clientWidth / 2.0;
- const canvasElementCenterY =
- parentElement.offsetTop + parentElement.clientHeight / 2.0;
-
- const deltaX = tail.tipX - canvasElementCenterX;
- const deltaY = tail.tipY - canvasElementCenterY;
-
- // Place the new child in the opposite quandrant of the tail
- if (deltaX > 0) {
- // ENHANCE: SHould be the child's width
- offsetX = -parentElement.clientWidth;
- } else {
- offsetX = parentElement.clientWidth;
- }
-
- if (deltaY > 0) {
- // ENHANCE: SHould be the child's height
- offsetY = -parentElement.clientHeight;
- } else {
- offsetY = parentElement.clientHeight;
- }
- }
-
- return [offsetX, offsetY];
- }
-
- // 6.2 is the release that should properly handle background canvas elements.
- // Reverting them is a temporary hack to prevent problems in 6.1 and 6.0.
- // So this is not currently called in 6.2 like it is in 6.1 and 6.0.
- // But I'm leaving the code for now, because last I heard, we want to use this (or some variation of it)
- // at publish time to set the image containers back to the original, more simple state.
- private revertBackgroundCanvasElements() {
- for (const bgo of Array.from(
- document.getElementsByClassName(kBackgroundImageClass),
- )) {
- const bgImage = getImageFromCanvasElement(bgo as HTMLElement);
- const mainImage = getImageFromContainer(
- bgo.parentElement as HTMLElement,
- );
- if (bgImage && mainImage) {
- // Note that we must use get/setAttribute here rather than e.g. mainImage.src (a property
- // of HTMLImageElement) because the src property is a full URL, and we want to preserve
- // what is actually stored in the src attribute, the path relative to the book file.
- mainImage.setAttribute(
- "src",
- bgImage.getAttribute("src") || "",
- );
- // maintain the intellectual properties of the image (BL-14511)
- const copyright = bgImage.getAttribute("data-copyright");
- if (copyright) {
- mainImage.setAttribute("data-copyright", copyright);
- } else {
- mainImage.removeAttribute("data-copyright");
- }
- const creator = bgImage.getAttribute("data-creator");
- if (creator) {
- mainImage.setAttribute("data-creator", creator);
- } else {
- mainImage.removeAttribute("data-creator");
- }
- const license = bgImage.getAttribute("data-license");
- if (license) {
- mainImage.setAttribute("data-license", license);
- } else {
- mainImage.removeAttribute("data-license");
- }
- bgo.remove();
- }
- }
- }
-
- private handleResizeAdjustments() {
- const bloomCanvases = this.getAllBloomCanvasesOnPage();
- bloomCanvases.forEach((bloomCanvas) => {
- this.switchBackgroundToCanvasElementIfNeeded(bloomCanvas);
- this.AdjustChildrenIfSizeChanged(bloomCanvas);
- });
- }
-
- // If a bloom-canvas has a non-placeholder background image, we switch the
- // background image to an image canvas element. This allows it to be manipuluated more easily.
- // More importantly, it prevents the difficult-to-account-for movement of the
- // background image when the container is resized. Once it is a canvas element,
- // we can apply our algorithm to adjust all the canvas elements together when the container
- // is resized. A further benefit is that it is somewhat backwards compatible:
- // older code will not mess with canvas element positioning like it would tend to
- // if we put position and size attributes on the background image directly.
- private switchBackgroundToCanvasElementIfNeeded(bloomCanvas: HTMLElement) {
- const bgCanvasElement = bloomCanvas.getElementsByClassName(
- kBackgroundImageClass,
- )[0] as HTMLElement;
- if (bgCanvasElement) {
- // I think this is redundant, but it got added by mistake at one point,
- // and will hide the placeholder if it's there, so make sure it's not.
- bgCanvasElement.classList.remove(kHasCanvasElementClass);
- return; // already have one.
- }
- this.switchBackgroundToCanvasElement(bloomCanvas);
- }
-
- private switchBackgroundToCanvasElement(bloomCanvas: HTMLElement) {
- const oldBgImage = getImageFromContainer(bloomCanvas);
- let bgCanvasElement = bloomCanvas.getElementsByClassName(
- kBackgroundImageClass,
- )[0] as HTMLElement;
- if (!bgCanvasElement) {
- // various legacy behavior, such as hiding the old-style background placeholder.
- bloomCanvas.classList.add(kHasCanvasElementClass);
- bgCanvasElement = document.createElement("div");
- bgCanvasElement.classList.add(kCanvasElementClass);
- bgCanvasElement.classList.add(kBackgroundImageClass);
-
- // Make a new image-container to hold just the background image, inside the new canvas element.
- // We don't want a deep clone...that will copy all the canvas elements, too.
- // I'm not sure how much good it does to clone rather than making a new one, now the classes are
- // not the same.
- const newImgContainer = bloomCanvas.cloneNode(false) as HTMLElement;
- newImgContainer.classList.add(kImageContainerClass);
- newImgContainer.classList.remove(kBloomCanvasClass);
- newImgContainer.classList.remove(kHasCanvasElementClass);
- bgCanvasElement.appendChild(newImgContainer);
- let newImg: HTMLElement;
- if (oldBgImage) {
- // If we have an image, we want to clone it and put it in the new image-container.
- // (Could just move it, but that complicates the code for inserting the canvas element.)
- newImg = oldBgImage.cloneNode(false) as HTMLElement;
- } else {
- // Otherwise, we'll make a placeholder image. Src may get set below.
- newImg = document.createElement("img");
- newImg.setAttribute("src", "placeHolder.png");
- }
- newImg.classList.remove("bloom-imageLoadError");
- newImgContainer.appendChild(newImg);
-
- // Set level so Comical will consider the new canvas element to be under the existing ones.
- const canvasElementElements = Array.from(
- bloomCanvas.getElementsByClassName(kCanvasElementClass),
- ) as HTMLElement[];
- CanvasElementManager.putBubbleBefore(
- bgCanvasElement,
- canvasElementElements,
- 1,
- );
- bgCanvasElement.style.visibility = "none"; // hide it until we adjust its shape and position
- // consistent with level, we want it in front of the (new, placeholder) background image
- // and behind the other canvas elements.
- if (oldBgImage) {
- bloomCanvas.insertBefore(
- bgCanvasElement,
- oldBgImage.nextSibling,
- );
- } else {
- const canvas = bloomCanvas.getElementsByTagName(
- "canvas",
- )[0] as HTMLElement;
- if (canvas) {
- bloomCanvas.insertBefore(
- bgCanvasElement,
- canvas.nextSibling,
- );
- } else {
- // Some old books can be in this state. See BL-15298.
- // Put it at the start of the bloom-canvas. This is safer than appending because
- // we want the implicit z-order of the background image to be at the back.
- bloomCanvas.prepend(bgCanvasElement);
- }
- }
- }
- const bgImage = getBackgroundImageFromBloomCanvas(
- bloomCanvas,
- ) as HTMLElement; // must exist by now
- // Whether it's a new bgImage or not, copy its src from the old-style img
- bgImage.classList.remove("bloom-imageLoadError");
- bgImage.onerror = HandleImageError;
- bgImage.setAttribute(
- "src",
- oldBgImage?.getAttribute("src") ?? "placeHolder.png",
- );
- this.adjustBackgroundImageSize(bloomCanvas, bgCanvasElement, true);
- bgCanvasElement.style.visibility = ""; // now we can show it, if it was new and hidden
- SetupMetadataButton(bloomCanvas);
- if (oldBgImage) {
- oldBgImage.remove();
- }
- }
-
- // Adjust the levels of all the bubbles of all the listed canvas elements so that
- // the one passed can be given the required level and all the others (keeping their
- // current order) will be perceived by ComicalJs as having a higher level
- private static putBubbleBefore(
- canvasElement: HTMLElement,
- canvasElementElements: HTMLElement[],
- requiredLevel: number,
- ) {
- let minLevel = Math.min(
- ...canvasElementElements.map(
- (b) => Bubble.getBubbleSpec(b as HTMLElement).level ?? 0,
- ),
- );
- if (minLevel <= requiredLevel) {
- // bump all the others up so we can insert one at level 1 below them all
- // We don't want to use zero as a level...some Comical code complains that
- // the canvas element doesn't have a level at all. And I'm nervous about using
- // negative numbers...something that wants a level one higher might get zero.
- canvasElementElements.forEach((b) => {
- const bubble = new Bubble(b as HTMLElement);
- const spec = bubble.getBubbleSpec();
- // the one previously at minLevel will now be at requiredLevel+1, others higher in same sequence.
- spec.level += requiredLevel - minLevel + 1;
- bubble.persistBubbleSpec();
- });
- minLevel = 2;
- }
- const bubble = new Bubble(canvasElement as HTMLElement);
- bubble.getBubbleSpec().level = requiredLevel;
- bubble.persistBubbleSpec();
- Comical.update(canvasElement.parentElement as HTMLElement);
- }
-
- private pageContentDelayRequestId = "adjustBackgroundImageSize";
- private adjustBackgroundImageSize(
- bloomCanvas: HTMLElement,
- bgCanvasElement: HTMLElement,
- useSizeOfNewImage: boolean,
- ) {
- // adjustBackgroundImageSizeInternal may wait for the image to load and make modifications after, and we want to make
- // sure those modifications are included in any save that occurs in the meanwhile.
- // wrapWithRequestPageContentDelay will add the delay before calling the function and remove it when the promise settles.
- wrapWithRequestPageContentDelay(
- () =>
- this.adjustBackgroundImageSizeInternal(
- bloomCanvas,
- bgCanvasElement,
- useSizeOfNewImage,
- ),
- this.pageContentDelayRequestId,
- );
- }
-
- // Track background image load listener to prevent duplicates
- // Even if we adjustBackgroundImageSize is somehow running simultaneously on different images and they race on
- // these, currently nothing bad can happen (worst case we leave around an event listener that does nothing when triggered)
- private bgImageLoadListener: ((event: Event) => void) | undefined;
- private clearImageLoadListener(img) {
- if (this.bgImageLoadListener) {
- img.removeEventListener("load", this.bgImageLoadListener);
- this.bgImageLoadListener = undefined;
- }
- }
-
- // Given a bg canvas element, which is a canvas element having the bloom-backgroundImage
- // class, and the height and width of the parent bloom-canvas, this method attempts to
- // make the bgCanvasElement the right size and position to fill as much as possible of the parent,
- // rather like object-fit:contain. It is used in two main scenarios: the user may have
- // selected a different image, which means we must adjust to suit a different image aspect
- // ratio. Or, the size of the container may have changed, e.g., using origami. We must also
- // account for the possibility that the image has been cropped, in which case, we want to
- // keep the cropped aspect ratio. (Cropping attributes will already have been removed if it
- // is a new image.)
- // Things are complicated because it's possible the image has not loaded yet, so we can't
- // get its natural dimensions to figure an aspect ratio. In this case, the method arranges
- // to be called again after the image loads or a timeout.
- // A further complication is that the image may fail to load, so we never get natural
- // dimensions. In this case, we expand the bgCanvasElement to the full size of the container so
- // all the space is available to display the error icon and message.
- //
- // This method returns a Promise that resolves when the background image size has been adjusted.
- // If the image needs to load, the promise will resolve after the image loads (or after a timeout).
- // The caller should use wrapWithRequestPageContentDelay to ensure page content requests wait for this to complete.
- private adjustBackgroundImageSizeInternal(
- bloomCanvas: HTMLElement,
- // The canvas element div that contains the background image.
- // (Since this is the background that we overlay things on, it is itself a
- // canvas element only in the sense that it has the same HTML structure in order to
- // allow many commands and functions to work on it as if it were an ordinary canvas element.)
- bgCanvasElement: HTMLElement,
- // if this is set true, we've updated the src of the background image and want to
- // ignore any cropping (assumes the img doesn't have any
- // cropping-related style settings) and just adjust the canvas element to fit the image.
- // We'll always have to wait for it to load in this case, otherwise, we may get
- // the dimensions of a previous image.
- useSizeOfNewImage: boolean,
- ): Promise
+ {isBackgroundImage && canvasHasMultipleElements && (
+
+
+ {backgroundImageText}
+
+ )}
+
+ {toolbarItems.map((item) => (
+
+ {item.node}
+
+ ))}
+
+
+
+ {langName && (
+
+ {langName}
+
+ )}
+ ";
+
+ const transGroupDivClasses = `bloom-translationGroup bloom-leadingElement`;
+ const transGroupHtml =
+ "
" +
+ editableDivHtml +
+ "
";
+ return transGroupHtml;
+ }
+
+ public addVideoCanvasElement(
+ location: Point,
+ bloomCanvasJQuery: JQuery,
+ rightTopOffset?: string,
+ ): HTMLElement {
+ const standardVideoClasses =
+ kVideoContainerClass +
+ " bloom-noVideoSelected bloom-leadingElement";
+ const videoContainerHtml =
+ "";
+ return this.finishAddingCanvasElement(
+ bloomCanvasJQuery,
+ videoContainerHtml,
+ location,
+ {
+ comicalBubbleStyle: "none",
+ setElementActive: true,
+ rightTopOffset,
+ },
+ );
+ }
+
+ public addPictureCanvasElement(
+ location: Point,
+ bloomCanvasJQuery: JQuery,
+ rightTopOffset?: string,
+ imageInfo?: {
+ imageId: string;
+ src: string; // must already appropriately URL-encoded.
+ copyright: string;
+ creator: string;
+ license: string;
+ },
+ size?: { width: number; height: number },
+ doAfterElementCreated?: (newElement: HTMLElement) => void,
+ ): HTMLElement {
+ const standardImageClasses =
+ kImageContainerClass + " bloom-leadingElement";
+ const imagePlaceHolderHtml = "";
+ const imageContainerHtml =
+ // The tabindex here is necessary to get focus to work on an image.
+ "" +
+ imagePlaceHolderHtml +
+ "
";
+ return this.finishAddingCanvasElement(
+ bloomCanvasJQuery,
+ imageContainerHtml,
+ location,
+ {
+ comicalBubbleStyle: "none",
+ setElementActive: true,
+ rightTopOffset,
+ imageInfo,
+ size,
+ doAfterElementCreated,
+ },
+ );
+ }
+
+ public addNavigationImageButtonElement(
+ location: Point,
+ bloomCanvasJQuery: JQuery,
+ rightTopOffset?: string,
+ imageInfo?: {
+ imageId: string;
+ src: string; // must already appropriately URL-encoded.
+ copyright: string;
+ creator: string;
+ license: string;
+ },
+ doAfterElementCreated?: (newElement: HTMLElement) => void,
+ ): HTMLElement {
+ const imageContainerHtml = this.makeImageContainerHtml();
+ const result = this.finishAddingCanvasElement(
+ bloomCanvasJQuery,
+ imageContainerHtml,
+ location,
+ {
+ comicalBubbleStyle: "none",
+ setElementActive: true,
+ rightTopOffset,
+ imageInfo,
+ size: { width: 120, height: 120 },
+ doAfterElementCreated,
+ limitToCanvasBounds: true,
+ },
+ );
+ result.classList.add(kBloomButtonClass);
+ return result;
+ }
+
+ public addNavigationImageWithLabelButtonElement(
+ location: Point,
+ bloomCanvasJQuery: JQuery,
+ rightTopOffset?: string,
+ imageInfo?: {
+ imageId: string;
+ src: string; // must already appropriately URL-encoded.
+ copyright: string;
+ creator: string;
+ license: string;
+ },
+ ): HTMLElement {
+ const imageContainerHtml = this.makeImageContainerHtml();
+ const transGroupHtml = this.makeTranslationGroup("Label");
+ const result = this.finishAddingCanvasElement(
+ bloomCanvasJQuery,
+ imageContainerHtml + transGroupHtml,
+ location,
+ {
+ comicalBubbleStyle: "none",
+ setElementActive: true,
+ rightTopOffset,
+ imageInfo,
+ size: { width: 120, height: 120 },
+ limitToCanvasBounds: true,
+ },
+ );
+ result.classList.add(kBloomButtonClass);
+ result.classList.add("bloom-noAutoHeight");
+ return result;
+ }
+
+ public addNavigationLabelButtonElement(
+ location: Point,
+ bloomCanvasJQuery: JQuery,
+ rightTopOffset?: string,
+ ): HTMLElement {
+ const result = this.addCanvasElementCore(
+ location,
+ bloomCanvasJQuery,
+ "none", // no comical bubble style
+ "navigation-label-button",
+ rightTopOffset,
+ true,
+ );
+ result.classList.add(kBloomButtonClass);
+ result.classList.add("bloom-noAutoHeight");
+ // The methods used in the other two get to set a size; here we just do it.
+ // We need to make it a bit higher than the default so it doesn't overflow
+ // with the additional padding that buttons get.
+ result.style.height = "50px";
+ return result;
+ }
+
+ public addSoundCanvasElement(
+ location: Point,
+ bloomCanvasJQuery: JQuery,
+ rightTopOffset?: string,
+ ): HTMLElement {
+ const standardImageClasses =
+ kImageContainerClass + " bloom-leadingElement";
+ // This svg is basically the same as the one in AudioIcon.tsx.
+ // Likely, changes to one should be mirrored in the other.
+ //
+ // The data-icon-type is so we can, in the future, find these and migrate/update them.
+ const html = `
+
+
`;
+ return this.finishAddingCanvasElement(
+ bloomCanvasJQuery,
+ html,
+ location,
+ {
+ comicalBubbleStyle: "none",
+ setElementActive: true,
+ rightTopOffset,
+ },
+ );
+ }
+
+ public addBookLinkGridCanvasElement(
+ location: Point,
+ bloomCanvasJQuery: JQuery,
+ rightTopOffset?: string,
+ ): HTMLElement {
+ const html =
+ // The tabindex here is necessary to allow it to be focused.
+ "";
+ const canvasElement = this.finishAddingCanvasElement(
+ bloomCanvasJQuery,
+ html,
+ location,
+ {
+ comicalBubbleStyle: "none",
+ setElementActive: true,
+ rightTopOffset,
+ size: { width: 360, height: 360 },
+ limitToCanvasBounds: true,
+ },
+ );
+ // Add skeleton to the newly created empty grid
+ const linkGrid = canvasElement.querySelector(
+ ".bloom-link-grid",
+ ) as HTMLElement;
+ if (linkGrid) {
+ addSkeletonIfEmpty(linkGrid);
+ }
+ return canvasElement;
+ }
+
+ public addRectangleCanvasElement(
+ location: Point,
+ bloomCanvasJQuery: JQuery,
+ rightTopOffset?: string,
+ ): HTMLElement {
+ const html =
+ // The tabindex here is necessary to allow it to be focused.
+ "";
+ const result = this.finishAddingCanvasElement(
+ bloomCanvasJQuery,
+ html,
+ location,
+ {
+ comicalBubbleStyle: "none",
+ setElementActive: true,
+ rightTopOffset,
+ },
+ );
+ // Keep z-ordering as before by moving rectangles behind other overlays.
+ this.reorderRectangleCanvasElement(result, bloomCanvasJQuery.get(0));
+ return result;
+ }
+
+ private makeImageContainerHtml(): string {
+ const standardImageClasses =
+ kImageContainerClass + " bloom-leadingElement";
+ const imagePlaceHolderHtml = "";
+ const imageContainerHtml =
+ // The tabindex here is necessary to get focus to work on an image.
+ ` ${imagePlaceHolderHtml}
`;
+ return imageContainerHtml;
+ }
+
+ public reorderRectangleCanvasElement(
+ rectangle: HTMLElement,
+ bloomCanvas: HTMLElement,
+ ): void {
+ const backgroundImage = bloomCanvas.getElementsByClassName(
+ kBackgroundImageClass,
+ )[0] as HTMLElement;
+ if (backgroundImage) {
+ bloomCanvas.insertBefore(rectangle, backgroundImage.nextSibling);
+ // Being first in document order gives it the right z-order, but it also has to be
+ // in the right sequence by ComicalJs Bubble level for the hit test to work right.
+ putBubbleBefore(
+ rectangle,
+ (
+ Array.from(
+ bloomCanvas.getElementsByClassName(kCanvasElementClass),
+ ) as HTMLElement[]
+ ).filter((x) => x !== backgroundImage),
+ Bubble.getBubbleSpec(backgroundImage).level + 1,
+ );
+ }
+ }
+
+ // Note: This is distinct from ensureCanvasElementsIntersectParent(), which is intended to
+ // keep *existing* canvas elements at least partly visible (and also keeps tails inside).
+ // Here we try to keep a *newly created* element entirely within the canvas (if possible),
+ // without changing its size and without moving it above/left of the canvas.
+ private ensureCanvasElementInsideCanvasIfPossible(
+ canvasElement: HTMLElement,
+ bloomCanvas: HTMLElement,
+ ): void {
+ const canvasSize = getExactClientSize(bloomCanvas);
+ const canvasElementSize = getExactClientSize(canvasElement);
+ const currentCanvasElementLeft = this.pxToNumber(
+ canvasElement.style.left,
+ );
+ const currentCanvasElementTop = this.pxToNumber(
+ canvasElement.style.top,
+ );
+ const currentCanvasElementWidth = canvasElementSize.width;
+ const currentCanvasElementHeight = canvasElementSize.height;
+
+ const maxLeft = canvasSize.width - currentCanvasElementWidth;
+ const maxTop = canvasSize.height - currentCanvasElementHeight;
+ const clampedLeft = Math.max(
+ 0,
+ Math.min(currentCanvasElementLeft, maxLeft),
+ );
+ const clampedTop = Math.max(
+ 0,
+ Math.min(currentCanvasElementTop, maxTop),
+ );
+ if (
+ clampedLeft !== currentCanvasElementLeft ||
+ clampedTop !== currentCanvasElementTop
+ ) {
+ canvasElement.style.left = clampedLeft + "px";
+ canvasElement.style.top = clampedTop + "px";
+ this.adjustTarget(canvasElement);
+ }
+ }
+
+ private pxToNumber(px: string, fallback: number = NaN): number {
+ if (!px) {
+ return fallback;
+ }
+ const trimmed = px.trim();
+ if (trimmed.endsWith("px")) {
+ const result = parseFloat(trimmed.substring(0, trimmed.length - 2));
+ return isNaN(result) ? fallback : result;
+ }
+ const result = parseFloat(trimmed);
+ return isNaN(result) ? fallback : result;
+ }
+
+ private adjustTarget(draggable: HTMLElement | undefined): void {
+ if (!draggable) {
+ // I think this is just to remove the arrow if any.
+ adjustTargetFromGameTool(
+ document.firstElementChild as HTMLElement,
+ undefined,
+ );
+ return;
+ }
+ const targetId = draggable.getAttribute(kDraggableIdAttribute);
+ const target = targetId
+ ? document.querySelector(`[data-target-of="${targetId}"]`)
+ : undefined;
+ adjustTargetFromGameTool(draggable, target as HTMLElement);
+ }
+
+ // This method is used both for creating new elements and in dragging/resizing.
+ // positionInBloomCanvas and rightTopOffset determine where to place the element.
+ // If rightTopOffset is falsy, we put the element's top left at positionInBloomCanvas.
+ // If rightTopOffset is truthy, it is a string like "10,-20" which are values to
+ // add to positionInBloomCanvas (which in this case is the mouse position where
+ // something was dropped, relative to canvas) to get the top right of the visual object that was dropped.
+ // Then we position the new element so its top right is at that same point.
+ // Note: I wish we could just make this adjustment in the dragEnd event handler
+ // which receives both the point and the rightTopOffset data, but it does not
+ // have access to the element being created to get its width. We could push it up
+ // one level into finishAddingCanvasElement, but it's simpler here where we're
+ // already extracting and adjusting the offsets from positionInViewport
+ public placeElementAtPosition(
+ wrapperBox: JQuery,
+ container: Element,
+ positionInBloomCanvas: Point,
+ rightTopOffset?: string,
+ ): void {
+ let xOffset = positionInBloomCanvas.getUnscaledX();
+ let yOffset = positionInBloomCanvas.getUnscaledY();
+ let right = 0;
+ let top = 0;
+ if (rightTopOffset) {
+ const parts = rightTopOffset.split(",");
+ right = parseInt(parts[0]);
+ top = parseInt(parts[1]);
+ // The wrapperBox width seems to always be 140 at this point, but gets
+ // changed before the dropped item displays. Images (including videos and
+ // GIFs) are positioned correctly if we assume their actual width is about 60
+ // instead, so we need to adjust the xOffset by 80 pixels. Text boxes are
+ // positioned correctly if we assume their actual width is about 150 instead,
+ // so we adjust their xOFfset by -10. This is a bit of a hack, but it works.
+ // I don't know how to get the actual width that will show up in the browser.
+ // (The displayed widths for fixed images, videos, and GIFs are really not 60,
+ // but they are positioned correctly if we treat them that way here.)
+ // See BL-14594.
+ let fudgeFactor = 80;
+ if (wrapperBox.find(".bloom-translationGroup").length > 0) {
+ fudgeFactor = -10;
+ }
+ xOffset = xOffset + right - wrapperBox.width() + fudgeFactor;
+ yOffset = yOffset + top;
+ // This is a bit of a kludge, but we want the position snapped here in exactly the cases
+ // (dragging from the toolbox) where snapping has not already been handled...and can't easily
+ // be handled at a higher level because we want the snap to take effect AFTER we adjust for
+ // rightTopOffset, that is, the final position should be snapped.
+ // It's conceivable that somewhere in the call stack there's an event we could use to see
+ // whether the ctrl key is down, but initial placement of new elements is so inexact that
+ // I don't see any point in allowing it to be unsnapped.
+ const { x, y } = this.host.snapProvider.getPosition(
+ undefined,
+ xOffset,
+ yOffset,
+ );
+ xOffset = x;
+ yOffset = y;
+ }
+
+ // Note: This code will not clear out the rest of the style properties... they are preserved.
+ // If some or all style properties need to be removed before doing this processing, it is the caller's responsibility to do so beforehand
+ // The reason why we do this is because a canvas element's onmousemove handler calls this function,
+ // and in that case we want to preserve the canvas element's width/height which are set in the style
+ wrapperBox.css("left", xOffset); // assumes numbers are in pixels
+ wrapperBox.css("top", yOffset); // assumes numbers are in pixels
+
+ const elt = wrapperBox.get(0) as HTMLElement;
+ setCanvasElementPosition(elt, xOffset, yOffset);
+ this.adjustTarget(elt);
+ }
+
+ private finishAddingCanvasElement(
+ bloomCanvasJQuery: JQuery,
+ internalHtml: string,
+ location: Point,
+ options?: IFinishAddingCanvasElementOptions,
+ ): HTMLElement {
+ // add canvas element as last child of .bloom-canvas (BL-7883)
+ const lastChildOfBloomCanvas = bloomCanvasJQuery.children().last();
+ const canvasElementHtml =
+ "" +
+ internalHtml +
+ "
";
+ // It's especially important that the new canvas element comes AFTER the main image,
+ // since that's all that keeps it on top of the image. We're deliberately not
+ // using z-index so that the bloom-canvas is not a stacking context so we
+ // can use z-index on the buttons inside it to put them above the comicaljs canvas.
+ const canvasElementJQuery = $(canvasElementHtml).insertAfter(
+ lastChildOfBloomCanvas,
+ );
+ const canvasElement = canvasElementJQuery.get(0);
+ if (options?.imageInfo) {
+ const img = canvasElement.getElementsByTagName("img")[0];
+ if (img) {
+ changeImageInfo(img, options.imageInfo);
+ }
+ }
+ if (options?.size) {
+ canvasElement.style.width = options.size.width + "px";
+ canvasElement.style.height = options.size.height + "px";
+ } else {
+ this.setDefaultHeightFromWidth(canvasElement);
+ }
+ this.placeElementAtPosition(
+ canvasElementJQuery,
+ bloomCanvasJQuery.get(0),
+ location,
+ options?.rightTopOffset,
+ );
+
+ if (options?.limitToCanvasBounds) {
+ const bloomCanvas = bloomCanvasJQuery.get(0) as HTMLElement;
+ this.ensureCanvasElementInsideCanvasIfPossible(
+ canvasElement,
+ bloomCanvas,
+ );
+ }
+
+ // The following code would not be needed for Picture and Video canvas elements if the focusin
+ // handler were reliably called after being attached by refreshBubbleEditing() below.
+ // However, calling the jquery.focus() method in bloomEditing.focusOnChildIfFound()
+ // causes the handler to fire ONLY for Text canvas elements. This is a complete mystery to me.
+ // Therefore, for Picture and Video canvas elements, we set the content active and notify the
+ // canvas element tool. But we don't need/want the actions of setActiveElement() which overlap
+ // with refreshBubbleEditing(). This code actually prevents bloomEditing.focusOnChildIfFound()
+ // from being called, but that doesn't really matter since calling it does no good.
+ // See https://issues.bloomlibrary.org/youtrack/issue/BL-11620.
+ if (options?.setElementActive) {
+ this.host.setActiveElementDirect(canvasElement);
+ this.host.doNotifyChange();
+ this.host.showCorrespondingTextBox(canvasElement);
+ }
+ const bubble = new Bubble(canvasElement);
+ const bubbleSpec: BubbleSpec = Bubble.getDefaultBubbleSpec(
+ canvasElement,
+ options?.comicalBubbleStyle || "speech",
+ );
+ bubble.setBubbleSpec(bubbleSpec);
+ const bloomCanvas = bloomCanvasJQuery.get(0);
+ if (options?.doAfterElementCreated) {
+ // It's not obvious when the best time to do this is. Obviously it has to be after
+ // the element is created. For the current purpose, the main thing is that it be
+ // before refreshBubbleEditing() is called, since (for picture elements) that is
+ // what gets the element selected and triggers a call to adjustContainerAspectRatio().
+ options.doAfterElementCreated(canvasElement);
+ }
+ // background image in parent bloom-canvas may need to become canvas element
+ // (before we refreshBubbleEditing, since we may change some canvas elements here.)
+ this.host.handleResizeAdjustments();
+ this.host.refreshCanvasElementEditing(bloomCanvas, bubble, true, true);
+ const editable = canvasElement.getElementsByClassName(
+ "bloom-editable bloom-visibility-code-on",
+ )[0] as HTMLElement;
+ editable?.focus();
+ return canvasElement;
+ }
+}
diff --git a/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementGeometry.ts b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementGeometry.ts
new file mode 100644
index 000000000000..9ece65ae295d
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementGeometry.ts
@@ -0,0 +1,172 @@
+// Helper functions extracted from CanvasElementManager.
+//
+// These are geometry/pixel conversion utilities used by the editable-page bundle
+// when positioning and hit-testing canvas elements. They intentionally avoid taking
+// a dependency on the full CanvasElementManager class to help keep that file smaller
+// and reduce import coupling.
+
+import { Point, PointScaling } from "../point";
+import { reportError } from "../../../lib/errorHandler";
+
+export const convertPointFromViewportToElementFrame = (
+ pointRelativeToViewport: Point,
+ element: Element,
+): Point => {
+ const referenceBounds = element.getBoundingClientRect();
+ const origin = new Point(
+ referenceBounds.left,
+ referenceBounds.top,
+ PointScaling.Scaled,
+ "BoundingClientRect (Relative to viewport)",
+ );
+
+ const border = getLeftAndTopBorderWidths(element);
+ const padding = getLeftAndTopPaddings(element);
+ const borderAndPadding = border.add(padding);
+
+ const scroll = getScrollAmount(element);
+ if (scroll.length() > 0.001) {
+ const error = new Error(
+ `Assert failed. container.scroll expected to be (0, 0), but it was: (${scroll.getScaledX()}, ${scroll.getScaledY()})`,
+ );
+ reportError(error.message, error.stack || "");
+ }
+
+ return pointRelativeToViewport.subtract(origin).subtract(borderAndPadding);
+};
+
+export const getLeftAndTopBorderWidths = (element: Element): Point => {
+ return new Point(
+ element.clientLeft,
+ element.clientTop,
+ PointScaling.Unscaled,
+ "Element ClientLeft/Top (Unscaled)",
+ );
+};
+
+export const getRightAndBottomBorderWidths = (
+ element: Element,
+ styleInfo?: CSSStyleDeclaration,
+): Point => {
+ if (!styleInfo) {
+ styleInfo = window.getComputedStyle(element);
+ }
+
+ const borderRight: number = extractNumber(
+ styleInfo.getPropertyValue("border-right-width"),
+ );
+ const borderBottom: number = extractNumber(
+ styleInfo.getPropertyValue("border-bottom-width"),
+ );
+
+ return new Point(
+ borderRight,
+ borderBottom,
+ PointScaling.Unscaled,
+ "Element ClientRight/Bottom (Unscaled)",
+ );
+};
+
+export const getCombinedBorderWidths = (
+ element: Element,
+ styleInfo?: CSSStyleDeclaration,
+): Point => {
+ if (!styleInfo) {
+ styleInfo = window.getComputedStyle(element);
+ }
+
+ return getLeftAndTopBorderWidths(element).add(
+ getRightAndBottomBorderWidths(element, styleInfo),
+ );
+};
+
+export const getPadding = (
+ side: string,
+ styleInfo: CSSStyleDeclaration,
+): number => {
+ const propertyKey = `padding-${side}`;
+ const paddingString = styleInfo.getPropertyValue(propertyKey);
+ return extractNumber(paddingString);
+};
+
+export const getLeftAndTopPaddings = (
+ element: Element,
+ styleInfo?: CSSStyleDeclaration,
+): Point => {
+ if (!styleInfo) {
+ styleInfo = window.getComputedStyle(element);
+ }
+
+ return new Point(
+ getPadding("left", styleInfo),
+ getPadding("top", styleInfo),
+ PointScaling.Unscaled,
+ "CSSStyleDeclaration padding",
+ );
+};
+
+export const getRightAndBottomPaddings = (
+ element: Element,
+ styleInfo?: CSSStyleDeclaration,
+): Point => {
+ if (!styleInfo) {
+ styleInfo = window.getComputedStyle(element);
+ }
+
+ return new Point(
+ getPadding("right", styleInfo),
+ getPadding("bottom", styleInfo),
+ PointScaling.Unscaled,
+ "Padding",
+ );
+};
+
+export const getCombinedPaddings = (
+ element: Element,
+ styleInfo?: CSSStyleDeclaration,
+): Point => {
+ if (!styleInfo) {
+ styleInfo = window.getComputedStyle(element);
+ }
+
+ return getLeftAndTopPaddings(element, styleInfo).add(
+ getRightAndBottomPaddings(element, styleInfo),
+ );
+};
+
+export const getCombinedBordersAndPaddings = (element: Element): Point => {
+ const styleInfo = window.getComputedStyle(element);
+ const borders = getCombinedBorderWidths(element);
+ const paddings = getCombinedPaddings(element, styleInfo);
+ return borders.add(paddings);
+};
+
+export const getScrollAmount = (element: Element): Point => {
+ return new Point(
+ element.scrollLeft,
+ element.scrollTop,
+ PointScaling.Unscaled,
+ "Element ScrollLeft/Top (Unscaled)",
+ );
+};
+
+export const extractNumber = (text: string | undefined | null): number => {
+ if (!text) {
+ return 0;
+ }
+
+ let i = 0;
+ for (i = 0; i < text.length; ++i) {
+ const c = text.charAt(i);
+ if ((c < "0" || c > "9") && c !== "-" && c !== "+" && c !== ".") {
+ break;
+ }
+ }
+
+ let numberStr = "";
+ if (i > 0) {
+ numberStr = text.substring(0, i);
+ }
+
+ return Number(numberStr);
+};
diff --git a/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementHandleDragInteractions.ts b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementHandleDragInteractions.ts
new file mode 100644
index 000000000000..fb8393e78f89
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementHandleDragInteractions.ts
@@ -0,0 +1,852 @@
+import {
+ getImageFromCanvasElement,
+ kImageContainerClass,
+} from "../bloomImages";
+import {
+ kBackgroundImageClass,
+ kBloomButtonClass,
+ kBloomCanvasSelector,
+ kCanvasElementSelector,
+} from "../../toolbox/canvas/canvasElementConstants";
+import { renderCanvasElementContextControls } from "./CanvasElementContextControls";
+import { CanvasGuideProvider } from "./CanvasGuideProvider";
+import { CanvasSnapProvider } from "./CanvasSnapProvider";
+
+export interface ICanvasElementHandleDragInteractionsHost {
+ getActiveElement: () => HTMLElement | undefined;
+
+ getMinWidth: () => number;
+ getMinHeight: () => number;
+
+ adjustTarget: (canvasElement: HTMLElement) => void;
+ alignControlFrameWithActiveElement: () => void;
+ adjustBackgroundImageSize: (
+ bloomCanvas: HTMLElement,
+ bgCanvasElement: HTMLElement,
+ useSizeOfNewImage: boolean,
+ ) => void;
+
+ adjustCanvasElementHeightToContentOrMarkOverflow: (
+ editable: HTMLElement,
+ ) => void;
+
+ adjustStuffRelatedToImage: (
+ activeElement: HTMLElement,
+ img: HTMLImageElement | undefined,
+ ) => void;
+
+ getHandleTitlesAsync: (
+ controlFrame: HTMLElement,
+ className: string,
+ l10nId: string,
+ force?: boolean,
+ attribute?: string,
+ ) => Promise
@@ -651,216 +606,76 @@ const CanvasToolControls: React.FunctionComponent = () => {
);
- const imageFillControl = (
-