[background image] Add support for background image in the selection info panel

src/fontra/backends/designspace.py

@@ -1820,14 +1820,29 @@ def unpackBackgroundImage(imageDict: dict | None) -> BackgroundImage | None:
         return None
 
     t = Transform(*(imageDict.get(k, dv) for k, dv in imageTransformFields))
-    colorChannels = [
-        float(ch.strip()) for ch in imageDict.get("color", "-1").split(",")
-    ]
+    colorChannels = (
+        [float(ch.strip()) for ch in imageDict["color"].split(",")]
+        if "color" in imageDict
+        else None
+    )
+
+    opacity = 1.0
+
+    if colorChannels:
+        if len(colorChannels) == 4:
+            opacity = colorChannels[3]
+            if colorChannels[:3] != [0, 0, 0]:
+                colorChannels[3] = 1.0
+            else:
+                colorChannels = None
+        else:
+            colorChannels = None
 
     return BackgroundImage(
         identifier=imageDict["fileName"],
         transformation=DecomposedTransform.fromTransform(t),
-        color=RGBAColor(*colorChannels) if len(colorChannels) == 4 else None,
+        opacity=opacity,
+        color=RGBAColor(*colorChannels) if colorChannels else None,
     )
 
 
@@ -1842,8 +1857,11 @@ def packBackgroundImage(backgroundImage, imageFileName) -> dict:
     if backgroundImage.color is not None:
         c = backgroundImage.color
         imageDict["color"] = ",".join(
-            _formatChannelValue(ch) for ch in [c.red, c.green, c.blue, c.alpha]
+            _formatChannelValue(ch)
+            for ch in [c.red, c.green, c.blue, backgroundImage.opacity]
         )
+    elif backgroundImage.opacity != 1.0:
+        imageDict["color"] = f"0,0,0,{_formatChannelValue(backgroundImage.opacity)}"
 
     return imageDict
 

src/fontra/client/core/classes.json

@@ -311,6 +311,9 @@
     "transformation": {
       "type": "DecomposedTransform"
     },
+    "opacity": {
+      "type": "float"
+    },
     "color": {
       "type": "RGBAColor",
       "optional": true

src/fontra/client/core/var-glyph.js

@@ -84,6 +84,7 @@ export function copyBackgroundImage(image) {
   return {
     identifier: image.identifier,
     transformation: { ...getDecomposedIdentity(), ...image.transformation },
+    opacity: image.opacity !== undefined ? image.opacity : 1.0,
     color: image.color ? { ...image.color } : undefined,
     customData: copyCustomData(image.customData || {}),
   };

src/fontra/client/lang/de.js

@@ -96,6 +96,7 @@ export const strings = {
   "axes.undo.add": "Achse %0 hinzufügen",
   "axes.undo.delete": "Achse %0 entfernen",
   "axes.undo.edit": "Achse %0 bearbeiten",
+  "background-image.labels.opacity": "Transparenz",
   "canvas.clean-view-and-hand-tool": "Ungehinderte Sicht und Hand Werkzeug",
   "cross-axis-mapping.axis-participates":
     "Wenn markiert, dann ist diese Achse teil des Mappings",

src/fontra/client/lang/en.js

@@ -96,6 +96,7 @@ export const strings = {
   "axes.undo.add": "add axis %0",
   "axes.undo.delete": "delete axis %0",
   "axes.undo.edit": "edit axis %0",
+  "background-image.labels.opacity": "Opacity",
   "canvas.clean-view-and-hand-tool": "Clean View and Hand Tool",
   "cross-axis-mapping.axis-participates":
     "When checked, this axis participates in the mapping",

src/fontra/client/lang/fr.js

@@ -96,6 +96,7 @@ export const strings = {
   "axes.undo.add": "add axis %0",
   "axes.undo.delete": "delete axis %0",
   "axes.undo.edit": "edit axis %0",
+  "background-image.labels.opacity": "Opacity",
   "canvas.clean-view-and-hand-tool": "Prévisualisation et outil de déplacement",
   "cross-axis-mapping.axis-participates":
     "When checked, this axis participates in the mapping",

src/fontra/client/lang/ja.js

@@ -96,6 +96,7 @@ export const strings = {
   "axes.undo.add": "補完軸%0を追加",
   "axes.undo.delete": "補完軸%0を削除",
   "axes.undo.edit": "補完軸%0を編集",
+  "background-image.labels.opacity": "Opacity",
   "canvas.clean-view-and-hand-tool": "塗りのプレビューと手のひらツール",
   "cross-axis-mapping.axis-participates":
     "チェックすると、この補完軸がマッピング内で有効になります",

src/fontra/client/lang/nl.js

@@ -96,6 +96,7 @@ export const strings = {
   "axes.undo.add": "add axis %0",
   "axes.undo.delete": "delete axis %0",
   "axes.undo.edit": "edit axis %0",
+  "background-image.labels.opacity": "Opacity",
   "canvas.clean-view-and-hand-tool": "Schone weergave en Hand gereedschap",
   "cross-axis-mapping.axis-participates":
     "When checked, this axis participates in the mapping",

src/fontra/client/lang/zh-CN.js

@@ -96,6 +96,7 @@ export const strings = {
   "axes.undo.add": "添加参数轴 %0",
   "axes.undo.delete": "删除参数轴 %0",
   "axes.undo.edit": "编辑参数轴 %0",
+  "background-image.labels.opacity": "透明度",
   "canvas.clean-view-and-hand-tool": "预览与拖拽工具",
   "cross-axis-mapping.axis-participates": "选中后，该参数轴参与映射",
   "cross-axis-mapping.delete": "删除跨轴映射",

src/fontra/client/web-components/ui-form.js

@@ -43,6 +43,11 @@ export class Form extends SimpleElement {
       grid-column: 1 / span 2;
     }
 
+    .ui-form-line-spacer {
+      grid-column: 1 / span 2;
+      height: 0.2em;
+    }
+
     .ui-form-label.header {
       overflow-x: unset;
       font-weight: bold;
@@ -140,6 +145,10 @@ export class Form extends SimpleElement {
         this.contentElement.appendChild(html.hr());
         continue;
       }
+      if (fieldItem.type === "line-spacer") {
+        this.contentElement.appendChild(html.div({ class: "ui-form-line-spacer" }));
+        continue;
+      }
       if (fieldItem.type === "spacer") {
         this.contentElement.appendChild(html.br());
         continue;

src/fontra/core/classes.py

@@ -209,6 +209,7 @@ class RGBAColor:
 class BackgroundImage:
     identifier: str
     transformation: DecomposedTransform = field(default_factory=DecomposedTransform)
+    opacity: float = 1.0
     color: Optional[RGBAColor] = None
     customData: CustomData = field(default_factory=dict)
 

src/fontra/views/editor/editor.js

@@ -2234,6 +2234,7 @@ export class EditorController {
         layerGlyph.backgroundImage = {
           identifier: imageIdentifier,
           transformation: getDecomposedIdentity(),
+          opacity: 1.0,
         };
         imageIdentifiers.push(imageIdentifier);
       }

src/fontra/views/editor/panel-selection-info.js

@@ -5,6 +5,7 @@ import { translate } from "/core/localization.js";
 import { rectFromPoints, rectSize, unionRect } from "/core/rectangle.js";
 import { getDecomposedIdentity } from "/core/transform.js";
 import {
+  assert,
   enumerate,
   getCharFromCodePoint,
   makeUPlusStringFromCodePoint,
@@ -114,9 +115,10 @@ export default class SelectionInfoPanel extends Panel {
   async update(senderInfo) {
     if (
       senderInfo?.senderID === this &&
-      senderInfo?.fieldKeyPath?.length !== 3 &&
-      senderInfo?.fieldKeyPath?.[0] !== "component" &&
-      senderInfo?.fieldKeyPath?.[2] !== "name"
+      ((senderInfo?.fieldKeyPath?.length !== 3 &&
+        senderInfo?.fieldKeyPath?.[0] !== "component" &&
+        senderInfo?.fieldKeyPath?.[2] !== "name") ||
+        senderInfo?.fieldKeyPath?.[0] === "backgroundImage")
     ) {
       // Don't rebuild, just update the Dimensions field
       await this.updateDimensions();
@@ -255,14 +257,51 @@ export default class SelectionInfoPanel extends Panel {
       }
     }
 
-    const { pointIndices, componentIndices } = this._getSelection();
+    const { pointIndices, componentIndices, backgroundImageIndices } =
+      this._getSelection();
 
     if (glyphController) {
       formContents.push(
         ...this._setupDimensionsInfo(glyphController, pointIndices, componentIndices)
       );
     }
 
+    for (const index of backgroundImageIndices) {
+      assert(index === 0, "only a single bg image is supported");
+
+      const backgroundImage = instance?.backgroundImage;
+      if (!backgroundImage) {
+        continue;
+      }
+
+      const backgroundImageKey = (...path) =>
+        JSON.stringify(["backgroundImage", ...path]);
+
+      formContents.push({ type: "divider" });
+      formContents.push({
+        type: "header",
+        label: translate("sidebar.user-settings.glyph.background-image"),
+      });
+
+      formContents.push({
+        type: "edit-number-slider",
+        key: backgroundImageKey("opacity"),
+        label: translate("background-image.labels.opacity"),
+        value: backgroundImage.opacity,
+        minValue: 0,
+        defaultValue: 1.0,
+        maxValue: 1.0,
+      });
+
+      formContents.push({ type: "line-spacer" });
+
+      addTransformationItems(
+        formContents,
+        backgroundImageKey,
+        backgroundImage.transformation
+      );
+    }
+
     for (const index of componentIndices) {
       if (!instance) {
         break;
@@ -299,64 +338,7 @@ export default class SelectionInfoPanel extends Panel {
         }),
       });
 
-      formContents.push({
-        type: "edit-number-x-y",
-        label: translate("sidebar.selection-info.component.translate"),
-        fieldX: {
-          key: componentKey("transformation", "translateX"),
-          value: component.transformation.translateX,
-        },
-        fieldY: {
-          key: componentKey("transformation", "translateY"),
-          value: component.transformation.translateY,
-        },
-      });
-
-      formContents.push({
-        type: "edit-angle",
-        key: componentKey("transformation", "rotation"),
-        label: translate("sidebar.selection-info.component.rotation"),
-        value: component.transformation.rotation,
-      });
-
-      formContents.push({
-        type: "edit-number-x-y",
-        label: translate("sidebar.selection-info.component.scale"),
-        fieldX: {
-          key: componentKey("transformation", "scaleX"),
-          value: component.transformation.scaleX,
-        },
-        fieldY: {
-          key: componentKey("transformation", "scaleY"),
-          value: component.transformation.scaleY,
-        },
-      });
-
-      formContents.push({
-        type: "edit-number-x-y",
-        label: translate("sidebar.selection-info.component.skew"),
-        fieldX: {
-          key: componentKey("transformation", "skewX"),
-          value: component.transformation.skewX,
-        },
-        fieldY: {
-          key: componentKey("transformation", "skewY"),
-          value: component.transformation.skewY,
-        },
-      });
-
-      formContents.push({
-        type: "edit-number-x-y",
-        label: translate("sidebar.selection-info.component.center"),
-        fieldX: {
-          key: componentKey("transformation", "tCenterX"),
-          value: component.transformation.tCenterX,
-        },
-        fieldY: {
-          key: componentKey("transformation", "tCenterY"),
-          value: component.transformation.tCenterY,
-        },
-      });
+      addTransformationItems(formContents, componentKey, component.transformation);
 
       const baseGlyph = await this.fontController.getGlyph(component.name);
       if (baseGlyph && component.location) {
@@ -561,9 +543,8 @@ export default class SelectionInfoPanel extends Panel {
   }
 
   _getSelection() {
-    const { point, component, componentOrigin, componentTCenter } = parseSelection(
-      this.sceneController.selection
-    );
+    const { point, component, componentOrigin, componentTCenter, backgroundImage } =
+      parseSelection(this.sceneController.selection);
 
     const componentIndices = [
       ...new Set([
@@ -572,7 +553,11 @@ export default class SelectionInfoPanel extends Panel {
         ...(componentTCenter || []),
       ]),
     ].sort((a, b) => a - b);
-    return { pointIndices: point || [], componentIndices };
+    return {
+      pointIndices: point || [],
+      componentIndices,
+      backgroundImageIndices: backgroundImage || [],
+    };
   }
 
   _getDimensionsString(glyphController, pointIndices, componentIndices) {
@@ -705,6 +690,67 @@ export default class SelectionInfoPanel extends Panel {
   }
 }
 
+function addTransformationItems(formContents, keyFunc, transformation) {
+  formContents.push({
+    type: "edit-number-x-y",
+    label: translate("sidebar.selection-info.component.translate"),
+    fieldX: {
+      key: keyFunc("transformation", "translateX"),
+      value: transformation.translateX,
+    },
+    fieldY: {
+      key: keyFunc("transformation", "translateY"),
+      value: transformation.translateY,
+    },
+  });
+
+  formContents.push({
+    type: "edit-angle",
+    key: keyFunc("transformation", "rotation"),
+    label: translate("sidebar.selection-info.component.rotation"),
+    value: transformation.rotation,
+  });
+
+  formContents.push({
+    type: "edit-number-x-y",
+    label: translate("sidebar.selection-info.component.scale"),
+    fieldX: {
+      key: keyFunc("transformation", "scaleX"),
+      value: transformation.scaleX,
+    },
+    fieldY: {
+      key: keyFunc("transformation", "scaleY"),
+      value: transformation.scaleY,
+    },
+  });
+
+  formContents.push({
+    type: "edit-number-x-y",
+    label: translate("sidebar.selection-info.component.skew"),
+    fieldX: {
+      key: keyFunc("transformation", "skewX"),
+      value: transformation.skewX,
+    },
+    fieldY: {
+      key: keyFunc("transformation", "skewY"),
+      value: transformation.skewY,
+    },
+  });
+
+  formContents.push({
+    type: "edit-number-x-y",
+    label: translate("sidebar.selection-info.component.center"),
+    fieldX: {
+      key: keyFunc("transformation", "tCenterX"),
+      value: transformation.tCenterX,
+    },
+    fieldY: {
+      key: keyFunc("transformation", "tCenterY"),
+      value: transformation.tCenterY,
+    },
+  });
+}
+
 function defaultGetFieldValue(glyph, glyphController, fieldItem) {
   const changePath = JSON.parse(fieldItem.key);
   return getNestedValue(glyph, changePath);