Make Canvas too text transparency work (BL-16133)

src/BloomBrowserUI/bookEdit/toolbox/canvas/CanvasToolControls.tsx

@@ -50,6 +50,7 @@ import {
     kImageFitModeContainValue,
     kImageFitModeCoverValue,
 } from "./canvasElementUtils";
+import { getPersistedCanvasColor } from "./canvasColorUtils";
 import { deselectVideoContainers } from "../../js/videoUtils";
 import { CanvasElementKeyHints } from "./CanvasElementKeyHints";
 import { ToolBox } from "../toolbox";
@@ -542,7 +543,7 @@ const CanvasToolControls: React.FunctionComponent = () => {
 
     // We come into this from chooser change
     const updateTextColor = (newColor: IColorInfo) => {
-        const color = newColor.colors[0]; // text color is always monochrome
+        const color = getPersistedCanvasColor(newColor);
         const canvasElementManager = getCanvasElementManager();
         if (canvasElementManager) {
             // Update the toolbox controls
@@ -565,7 +566,7 @@ const CanvasToolControls: React.FunctionComponent = () => {
 
     // We come into this from chooser change
     const updateTextOutlineColor = (newColor: IColorInfo) => {
-        const color = newColor.colors[0];
+        const color = getPersistedCanvasColor(newColor);
         const canvasElementManager = getCanvasElementManager();
         if (canvasElementManager) {
             setTextOutlineColorIsDefault(false);

src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasColorUtils.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from "vitest";
+
+import { getPersistedCanvasColor } from "./canvasColorUtils";
+
+describe("getPersistedCanvasColor", () => {
+    test("keeps opaque colors unchanged", () => {
+        expect(
+            getPersistedCanvasColor({
+                colors: ["#123456"],
+                opacity: 1,
+            }),
+        ).toBe("#123456");
+    });
+
+    test("converts partial opacity to rgba for persistence", () => {
+        expect(
+            getPersistedCanvasColor({
+                colors: ["#123456"],
+                opacity: 0.25,
+            }),
+        ).toBe("rgba(18, 52, 86, 0.25)");
+    });
+});

src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasColorUtils.ts

@@ -0,0 +1,11 @@
+import { IColorInfo } from "../../../react_components/color-picking/colorSwatch";
+import { getRgbaColorStringFromColorAndOpacity } from "../../../utils/colorUtils";
+
+export function getPersistedCanvasColor(colorInfo: IColorInfo): string {
+    const firstColor = colorInfo.colors[0];
+    if (colorInfo.opacity >= 1) {
+        return firstColor;
+    }
+
+    return getRgbaColorStringFromColorAndOpacity(firstColor, colorInfo.opacity);
+}