[background image] Add dialog for background image

src/fontra/client/core/font-controller.js

@@ -137,7 +137,9 @@ export class FontController {
       const imagePromise = this._getBackgroundImage(imageIdentifier);
       cacheEntry = { imagePromise, image: null };
       this._backgroundImageCache.put(imageIdentifier, cacheEntry);
-      imagePromise.then((image) => (cacheEntry.image = image));
+      imagePromise.then(
+        (image) => ((image.src = white2transparent(image)), (cacheEntry.image = image))
+      );
     }
     return cacheEntry.imagePromise;
   }
@@ -1053,3 +1055,35 @@ class InstanceRequestQueue {
     }
   }
 }
+
+// Reference: https://stackoverflow.com/questions/6755314/canvas-imagedata-remove-white-pixels
+function white2transparent(img) {
+  var c = document.createElement("canvas");
+
+  var w = img.width,
+    h = img.height;
+
+  c.width = w;
+  c.height = h;
+
+  var ctx = c.getContext("2d");
+
+  ctx.drawImage(img, 0, 0, w, h);
+  var imageData = ctx.getImageData(0, 0, w, h);
+  var pixel = imageData.data;
+
+  var r = 0,
+    g = 1,
+    b = 2,
+    a = 3;
+  for (var p = 0; p < pixel.length; p += 4) {
+    if (pixel[p + r] == 255 && pixel[p + g] == 255 && pixel[p + b] == 255) {
+      // if white then change alpha to 0
+      pixel[p + a] = 0;
+    }
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+
+  return c.toDataURL("image/png");
+}

src/fontra/client/core/ui-utils.js

@@ -171,6 +171,75 @@ export function labeledTextInput(label, controller, key, options) {
   return items;
 }
 
+export function labeledColorInput(label, controller, key, options) {
+  const inputElement = colorInput(controller, key, options);
+  const items = [labelForElement(label, inputElement), inputElement];
+
+  return items;
+}
+
+export function colorInput(controller, key, options) {
+  const inputID = options?.id || `color-input-${uniqueID()}-${key}`;
+  const style =
+    options?.style ||
+    `
+    margin: 0;
+    padding: 0;
+    outline: none;
+    border: none;
+    border-color: transparent;
+    border-radius: 0.25em;
+    width: 100%;`;
+  const inputElement = html.input({ type: "color", id: inputID, style: style });
+  inputElement.value = controller.model[key];
+
+  inputElement.onchange = () => {
+    controller.model[key] = inputElement.value;
+  };
+
+  controller.addKeyListener(key, (event) => {
+    inputElement.value = event.newValue;
+  });
+
+  return inputElement;
+}
+
+export function labeledSliderInput(label, controller, key, options) {
+  const inputElement = sliderInput(controller, key, options);
+  const items = [labelForElement(label, inputElement), inputElement];
+
+  return items;
+}
+
+// for now keep it as is, but maybe better use: return html.createDomElement("range-slider", parms);
+export function sliderInput(controller, key, options) {
+  const inputID = options?.id || `range-input-${uniqueID()}-${key}`;
+  const min = options?.min || 0;
+  const max = options?.max || 100;
+  const value = options?.value || 0;
+  const step = options?.step || 1;
+
+  const inputElement = html.input({
+    type: "range",
+    id: inputID,
+    min: min,
+    max: max,
+    step: step,
+    value: value,
+  });
+  inputElement.value = controller.model[key];
+
+  inputElement.onchange = () => {
+    controller.model[key] = inputElement.value;
+  };
+
+  controller.addKeyListener(key, (event) => {
+    inputElement.value = event.newValue;
+  });
+
+  return inputElement;
+}
+
 export const DefaultFormatter = {
   toString: (value) => (value !== undefined && value !== null ? value.toString() : ""),
   fromString: (value) => {

src/fontra/client/lang/de.js

@@ -25,6 +25,7 @@ export const strings = {
   "action.delete-glyph": "Glyph entfernen",
   "action.delete-selection": "Auswahl entfernen",
   "action.edit-anchor": "Anker bearbeiten",
+  "action.edit-background-image": "Hintergrund-Bild bearbeiten",
   "action.edit-guideline": "Hilfslinie bearbeiten",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -94,6 +95,8 @@ export const strings = {
   "axes.undo.add": "Achse %0 hinzufügen",
   "axes.undo.delete": "Achse %0 entfernen",
   "axes.undo.edit": "Achse %0 bearbeiten",
+  "backgroundImage.labels.color": "Farbe",
+  "backgroundImage.labels.opacity": "Opacity",
   "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

@@ -25,6 +25,7 @@ export const strings = {
   "action.delete-glyph": "Delete Glyph",
   "action.delete-selection": "Delete Selection",
   "action.edit-anchor": "Edit Anchor",
+  "action.edit-background-image": "Edit Background Image",
   "action.edit-guideline": "Edit Guideline",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -94,6 +95,8 @@ export const strings = {
   "axes.undo.add": "add axis %0",
   "axes.undo.delete": "delete axis %0",
   "axes.undo.edit": "edit axis %0",
+  "backgroundImage.labels.color": "Color",
+  "backgroundImage.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

@@ -25,6 +25,7 @@ export const strings = {
   "action.delete-glyph": "Supprimer le glyphe",
   "action.delete-selection": "Supprimer la sélection",
   "action.edit-anchor": "Edit Anchor",
+  "action.edit-background-image": "Edit Background Image",
   "action.edit-guideline": "Edit Guideline",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -94,6 +95,8 @@ export const strings = {
   "axes.undo.add": "add axis %0",
   "axes.undo.delete": "delete axis %0",
   "axes.undo.edit": "edit axis %0",
+  "backgroundImage.labels.color": "Color",
+  "backgroundImage.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

@@ -25,6 +25,7 @@ export const strings = {
   "action.delete-glyph": "グリフを削除",
   "action.delete-selection": "選択範囲を削除",
   "action.edit-anchor": "アンカーを編集",
+  "action.edit-background-image": "Edit Background Image",
   "action.edit-guideline": "ガイドラインを編集",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -94,6 +95,8 @@ export const strings = {
   "axes.undo.add": "補完軸%0を追加",
   "axes.undo.delete": "補完軸%0を削除",
   "axes.undo.edit": "補完軸%0を編集",
+  "backgroundImage.labels.color": "Color",
+  "backgroundImage.labels.opacity": "Opacity",
   "canvas.clean-view-and-hand-tool": "塗りのプレビューと手のひらツール",
   "cross-axis-mapping.axis-participates":
     "チェックすると、この補完軸がマッピング内で有効になります",

src/fontra/client/lang/nl.js

@@ -25,6 +25,7 @@ export const strings = {
   "action.delete-glyph": "Verwijder glyph",
   "action.delete-selection": "Verwijder selectie",
   "action.edit-anchor": "Edit Anchor",
+  "action.edit-background-image": "Edit Background Image",
   "action.edit-guideline": "Edit Guideline",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -94,6 +95,8 @@ export const strings = {
   "axes.undo.add": "add axis %0",
   "axes.undo.delete": "delete axis %0",
   "axes.undo.edit": "edit axis %0",
+  "backgroundImage.labels.color": "Color",
+  "backgroundImage.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

@@ -25,6 +25,7 @@ export const strings = {
   "action.delete-glyph": "删除字形",
   "action.delete-selection": "删除选中",
   "action.edit-anchor": "编辑锚点",
+  "action.edit-background-image": "Edit Background Image",
   "action.edit-guideline": "编辑参考线",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -94,6 +95,8 @@ export const strings = {
   "axes.undo.add": "添加参数轴 %0",
   "axes.undo.delete": "删除参数轴 %0",
   "axes.undo.edit": "编辑参数轴 %0",
+  "backgroundImage.labels.color": "Color",
+  "backgroundImage.labels.opacity": "Opacity",
   "canvas.clean-view-and-hand-tool": "预览与拖拽工具",
   "cross-axis-mapping.axis-participates": "选中后，该参数轴参与映射",
   "cross-axis-mapping.delete": "删除跨轴映射",

src/fontra/views/editor/edit-tools-pointer.js

@@ -236,6 +236,7 @@ export class PointerTool extends BaseTool {
         guideline: guidelineIndices,
         // TODO: Font Guidelines
         // fontGuideline: fontGuidelineIndices,
+        backgroundImage: backgroundImageIndices,
       } = parseSelection(sceneController.selection);
       if (componentIndices?.length && !pointIndices?.length && !anchorIndices?.length) {
         componentIndices.sort();
@@ -257,6 +258,13 @@ export class PointerTool extends BaseTool {
         guidelineIndices.sort();
         sceneController.doubleClickedGuidelineIndices = guidelineIndices;
         sceneController._dispatchEvent("doubleClickedGuidelines");
+      } else if (
+        backgroundImageIndices?.length &&
+        !guidelineIndices?.length &&
+        !pointIndices?.length &&
+        !componentIndices?.length
+      ) {
+        sceneController._dispatchEvent("doubleClickedBackgroundImage");
       } else if (pointIndices?.length && !sceneController.hoverPathHit) {
         await this.handlePointsDoubleClick(pointIndices);
       } else if (sceneController.hoverPathHit) {