BL-15441 add canvas origami element, use css for placeHolders

DistFiles/localization/en/Bloom.xlf

@@ -1355,6 +1355,15 @@
       <trans-unit id="EditTab.CustomPage.Picture" sil:dynamic="true">
         <source xml:lang="en">Picture</source>
         <note>ID: EditTab.CustomPage.Picture</note>
+        <note>Obsolete as of 6.3</note>
+      </trans-unit>
+      <trans-unit id="EditTab.CustomPage.Image" sil:dynamic="true" translate="no">
+        <source xml:lang="en">Image</source>
+        <note>ID: EditTab.CustomPage.Image</note>
+      </trans-unit>
+      <trans-unit id="EditTab.CustomPage.Canvas" sil:dynamic="true" translate="no">
+        <source xml:lang="en">Canvas</source>
+        <note>ID: EditTab.CustomPage.Canvas</note>
       </trans-unit>
       <trans-unit id="EditTab.CustomPage.Text" sil:dynamic="true">
         <source xml:lang="en">Text</source>
@@ -1871,6 +1880,7 @@
       <trans-unit id="EditTab.Image.CutImage" sil:dynamic="true">
         <source xml:lang="en">Cut image</source>
         <note>ID: EditTab.Image.CutImage</note>
+        <note>Obsolete as of Bloom 6.3</note>
       </trans-unit>
       <trans-unit id="EditTab.Image.EditMetadata" sil:dynamic="true">
         <source xml:lang="en">Edit image credits, copyright, &amp; license</source>

src/BloomBrowserUI/bookEdit/css/editMode.less

@@ -1,6 +1,7 @@
 /*This stylesheet applied when a book is being edited. It does things like show that images can be changed by click on them.*/
 @import "../../bloomUI.less";
 @import "../sourceBubbles/sourceBubbles.less";
+@import "../../placeHolderImages.less";
 
 @bleed: 3mm; // Duplicated from basePage.less to remove circular dependency between BloomBrowserUI and content
 
@@ -491,7 +492,8 @@ body:not(.origami-drag) .bloom-canvas:hover {
 // In an active background canvas element, don't show the edit metadata icon if the image failed
 // to load.  Clicking on it would just show an error message anyway, and the button would
 // obscure part of the alt attribute error message.
-.bloom-canavas:has(.bloom-backgroundImage:has(img.bloom-imageLoadError)) {
+.bloom-canvas:has(.bloom-backgroundImage:has(img.bloom-imageLoadError)),
+.bloom-canvas:has(.bloom-backgroundImage:has(img[src*="placeHolder.png"])) {
     .editMetadataButton.imgMetadataProblem {
         display: none !important;
     }
@@ -590,9 +592,11 @@ body.bloom-fullBleed {
 // on each parent. We could conceivably compute a different transform for each child, but this is more
 // straightforward and less error-prone.
 .bloom-describedImage {
-    // for a reason I haven't tracked down, the rule that usually does this doesn't work here.
-    img[src="placeHolder.png"] {
-        display: none;
+    // Repeated class name so we override even the rules for data-tool-id="canvas" in placeHolderImages.less
+    .bloom-backgroundImage.bloom-canvas-element.bloom-canvas-element:has(
+            img[src*="placeHolder.png"]
+        ) {
+        background-image: none;
     }
     height: 100%;
     width: 100%;
@@ -664,16 +668,6 @@ body.bloom-fullBleed {
     }
 }
 
-// In a bloom-canvas that has canvas elements other than the background image, we want to
-// hide the placeholder except when the background image is active.
-.bloom-canvas:has(.bloom-canvas-element:not(.bloom-backgroundImage)) {
-    .bloom-backgroundImage:not([data-bloom-active="true"]) {
-        img[src^="placeHolder.png"] {
-            display: none;
-        }
-    }
-}
-
 button.deleteButton {
     position: absolute;
     left: 0;
@@ -1439,6 +1433,17 @@ canvas.moving {
         display: block;
     }
 
+    // We want the crop handles to look disabled on an empty/placeholder image. Disabling them is actually done in
+    // typescript code
+    &.bloom-image-control-frame-no-image {
+        .bloom-ui-canvas-element-side-handle,
+        .bloom-ui-canvas-element-move-crop-handle {
+            pointer-events: none;
+            cursor: unset;
+            opacity: 30%;
+        }
+    }
+
     // The resize handles are the small circles in the four corners.
     // The move crop handle is the small circle in the center, used to change how an
     // image is cropped by (apparently) moving the image within the frame.
@@ -1668,23 +1673,15 @@ svg.bloom-videoControl {
 }
 
 // If the background image hasn't been set in a game, we don't want to show the placeholder image.
-.bloom-page[data-tool-id="game"]:not([data-activity="simple-dom-choice"])
-    .bloom-backgroundImage
-    img[src="placeHolder.png"] {
-    visibility: hidden;
-}
-// We also want the crop handles to look disabled.  Disabling them is actually done in
-// typescript code.  The pointer-events: none; seems not to work on the handle divs but
-// is left as a reminder that we don't want to allow cropping in this case.  (BL-14703)
-.bloom-page[data-tool-id="game"]:not([data-activity="simple-dom-choice"])
-    #canvas-element-control-frame.bloom-backgroundImage-control-frame-no-image {
-    .bloom-ui-canvas-element-side-handle,
-    .bloom-ui-canvas-element-move-crop-handle {
-        pointer-events: none;
-        cursor: unset;
-        opacity: 30%;
+.bloom-page[data-tool-id="game"]:not([data-activity="simple-dom-choice"]) {
+    .bloom-canvas
+        .bloom-backgroundImage.bloom-canvas-element:has(
+            img[src="placeHolder.png"]
+        ) {
+        background-image: none;
     }
 }
+
 .bloom-passive-element[data-bloom-active="true"]
     ~ .bloom-ui-canvas-element-resize-handle,
 .bloom-passive-element[data-bloom-active="true"]

src/BloomBrowserUI/bookEdit/js/CanvasElementContextControls.tsx

@@ -22,6 +22,7 @@ import {
     doImageCommand,
     getImageUrlFromImageContainer,
     kImageContainerClass,
+    isPlaceHolderImage,
 } from "./bloomImages";
 import {
     doVideoCommand,
@@ -122,7 +123,7 @@ const CanvasElementContextControls: React.FunctionComponent<{
     const videoSource = video?.getElementsByTagName("source")[0];
     const videoAlreadyChosen = !!videoSource?.getAttribute("src");
     const isPlaceHolder =
-        hasImage && img?.getAttribute("src")?.startsWith("placeHolder.png");
+        hasImage && isPlaceHolderImage(img?.getAttribute("src"));
     const missingMetadata =
         hasImage &&
         !isPlaceHolder &&
@@ -374,9 +375,7 @@ const CanvasElementContextControls: React.FunctionComponent<{
         menuOptions.splice(index, 0, fillItem);
 
         // we can't delete the placeholder (or if there isn't an img, somehow)
-        deleteEnabled = !!(
-            img && !img.getAttribute("src")?.startsWith("placeHolder.png")
-        );
+        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
     }
@@ -1073,6 +1072,10 @@ function addVideoMenuItems(
     );
 }
 
+function hasRealImage(img) {
+    return img && !isPlaceHolderImage(img.getAttribute("src"));
+}
+
 function addImageMenuOptions(
     menuOptions: IMenuItemWithSubmenu[],
     canvasElement: HTMLElement,
@@ -1093,6 +1096,7 @@ function addImageMenuOptions(
         );
     };
 
+    const realImagePresent = hasRealImage(img);
     const imageMenuOptions: IMenuItemWithSubmenu[] = [
         {
             l10nId: "EditTab.Image.ChooseImage",
@@ -1114,13 +1118,15 @@ function addImageMenuOptions(
             english: "Copy image",
             onClick: () => doImageCommand(img, "copy"),
             icon: <CopyIcon css={getMenuIconCss()} />,
+            disabled: !realImagePresent,
         },
         {
             l10nId: "EditTab.Image.EditMetadataOverlay",
             english: "Set Image Information...",
             subLabelL10nId: "EditTab.Image.EditMetadataOverlayMore",
             onClick: runMetadataDialog,
             icon: <CopyrightIcon css={getMenuIconCss()} />,
+            disabled: !realImagePresent,
         },
         {
             l10nId: "EditTab.Image.Reset",