Background layers, part 2

src/fontra/client/lang/de.js

@@ -291,6 +291,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "Glyph-Achsen",
   "sidebar.designspace-navigation.glyph-axes.edit": "Glyph-Achsen bearbeiten",
   "sidebar.designspace-navigation.glyph-axes.reset": "Glyph-Achsen zurücksetzen",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "Glyph-Sourcen",
   "sidebar.designspace-navigation.glyph-sources.name": "Source Name",
   "sidebar.designspace-navigation.glyph-sources.status": "Status",

src/fontra/client/lang/en.js

@@ -284,6 +284,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "Glyph axes",
   "sidebar.designspace-navigation.glyph-axes.edit": "Edit glyph axes",
   "sidebar.designspace-navigation.glyph-axes.reset": "Reset glyph axes",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "Glyph sources",
   "sidebar.designspace-navigation.glyph-sources.name": "source name",
   "sidebar.designspace-navigation.glyph-sources.status": "status",

src/fontra/client/lang/fr.js

@@ -295,6 +295,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "Axes du glyphe",
   "sidebar.designspace-navigation.glyph-axes.edit": "Éditer les axes du glyphe",
   "sidebar.designspace-navigation.glyph-axes.reset": "Réinitialiser les axes du glyphe",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "Sources du glyphe",
   "sidebar.designspace-navigation.glyph-sources.name": "nom de la source",
   "sidebar.designspace-navigation.glyph-sources.status": "statut",

src/fontra/client/lang/ja.js

@@ -288,6 +288,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "グリフの補完軸",
   "sidebar.designspace-navigation.glyph-axes.edit": "グリフの補完軸を編集",
   "sidebar.designspace-navigation.glyph-axes.reset": "グリフの補完軸をリセット",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "グリフソース",
   "sidebar.designspace-navigation.glyph-sources.name": "ソース名",
   "sidebar.designspace-navigation.glyph-sources.status": "ステータス",

src/fontra/client/lang/nl.js

@@ -288,6 +288,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "Glyph assen",
   "sidebar.designspace-navigation.glyph-axes.edit": "Wijzig glyph assen",
   "sidebar.designspace-navigation.glyph-axes.reset": "Reset glyph assen",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "Glyph sources",
   "sidebar.designspace-navigation.glyph-sources.name": "sourcenaam",
   "sidebar.designspace-navigation.glyph-sources.status": "status",

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

@@ -273,6 +273,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "字形参数轴",
   "sidebar.designspace-navigation.glyph-axes.edit": "编辑字形参数轴",
   "sidebar.designspace-navigation.glyph-axes.reset": "重置字形参数轴",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "字形源",
   "sidebar.designspace-navigation.glyph-sources.name": "源名称",
   "sidebar.designspace-navigation.glyph-sources.status": "状态",

src/fontra/views/editor/editor.js

@@ -1392,8 +1392,8 @@ export class EditorController extends ViewController {
         { actionIdentifier: "action.select-next-glyph" },
         { actionIdentifier: "action.select-previous-source" },
         { actionIdentifier: "action.select-next-source" },
-        // { actionIdentifier: "action.select-previous-source-layer" },
-        // { actionIdentifier: "action.select-next-source-layer" },
+        { actionIdentifier: "action.select-previous-source-layer" },
+        { actionIdentifier: "action.select-next-source-layer" },
       ],
     });
 

src/fontra/views/editor/panel-designspace-navigation.js

@@ -18,7 +18,7 @@ import {
   scheduleCalls,
   throttleCalls,
 } from "/core/utils.js";
-import { GlyphSource, Layer } from "/core/var-glyph.js";
+import { GlyphSource, Layer, StaticGlyph } from "/core/var-glyph.js";
 import {
   isLocationAtDefault,
   locationToString,
@@ -192,7 +192,7 @@ export default class DesignspaceNavigationPanel extends Panel {
       },
       {
         id: "glyph-layers-accordion-item",
-        label: "Source layers", // XXXX TODO add translate strings
+        label: translate("sidebar.designspace-navigation.glyph-source-layers"),
         open: true,
         content: html.div(
           {
@@ -202,7 +202,7 @@ export default class DesignspaceNavigationPanel extends Panel {
             html.createDomElement("ui-list", { id: "layers-list" }),
             html.createDomElement("add-remove-buttons", {
               style: "padding: 0.5em 0 0 0;",
-              id: "glyph-layers-add-remove-buttons",
+              id: "source-layers-add-remove-buttons",
             }),
           ]
         ),
@@ -387,10 +387,16 @@ export default class DesignspaceNavigationPanel extends Panel {
     this.addRemoveSourceButtons = this.accordion.querySelector(
       "#sources-list-add-remove-buttons"
     );
-
     this.addRemoveSourceButtons.addButtonCallback = () => this.addSource();
     this.addRemoveSourceButtons.removeButtonCallback = () => this.removeSource();
 
+    this.addRemoveSourceLayerButtons = this.accordion.querySelector(
+      "#source-layers-add-remove-buttons"
+    );
+    this.addRemoveSourceLayerButtons.addButtonCallback = () => this.addSourceLayer();
+    this.addRemoveSourceLayerButtons.removeButtonCallback = () =>
+      this.removeSourceLayer();
+
     this.sourcesList.addEventListener("listSelectionChanged", async (event) => {
       this.sceneController.scrollAdjustBehavior = "pin-glyph-center";
       const selectedItem = this.sourcesList.getSelectedItem();
@@ -835,10 +841,6 @@ export default class DesignspaceNavigationPanel extends Panel {
   }
 
   async _updateSourceLayersList() {
-    // TODO: the background layers feature is not yet functional, disable for now
-    this.glyphLayersAccordionItem.hidden = true;
-    return;
-
     const sourceIndex = this.sceneModel.sceneSettings.selectedSourceIndex;
     const haveLayers =
       this.sceneModel.selectedGlyph?.isEditing && sourceIndex != undefined;
@@ -1314,6 +1316,67 @@ export default class DesignspaceNavigationPanel extends Panel {
     return { contentElement, warningElement };
   }
 
+  async addSourceLayer() {
+    const glyphController = await this.sceneModel.getSelectedVariableGlyphController();
+    const glyph = glyphController.glyph;
+
+    const selectedSourceItem = this.sourcesList.getSelectedItem();
+    if (!selectedSourceItem) {
+      return;
+    }
+
+    const dialog = await dialogSetup("Add layer for source", null, [
+      { title: translate("dialog.cancel"), isCancelButton: true },
+      { title: translate("dialog.okay"), isDefaultButton: true, result: "ok" },
+    ]);
+
+    const nameController = new ObservableController({});
+    const contentElement = html.div(
+      {
+        style: `overflow: hidden;
+          white-space: nowrap;
+          display: grid;
+          gap: 0.5em;
+          grid-template-columns: max-content auto;
+          align-items: center;
+        `,
+      },
+      labeledTextInput("name", nameController, "sourceLayerName", {
+        id: "source-layer-name-text-input",
+      })
+    );
+    dialog.setContent(contentElement);
+
+    setTimeout(
+      () => contentElement.querySelector("#source-layer-name-text-input")?.focus(),
+      0
+    );
+
+    const result = await dialog.run();
+    if (!result) {
+      return;
+    }
+
+    const newLayerName = `${selectedSourceItem.layerName}.${nameController.model.sourceLayerName}`;
+    if (glyph.layers[newLayerName]) {
+      console.log("layer already exists");
+      return;
+    }
+
+    const newLayer = Layer.fromObject({
+      glyph: StaticGlyph.fromObject({ xAdvance: 488 }),
+    });
+
+    await this.sceneController.editGlyphAndRecordChanges((glyph) => {
+      glyph.layers[newLayerName] = newLayer;
+      return "add source layer";
+    });
+  }
+
+  removeSourceLayer() {
+    console.log("remove source layer");
+  }
+
   async editGlyphAxes() {
     const varGlyphController =
       await this.sceneModel.getSelectedVariableGlyphController();

src/fontra/views/editor/scene-controller.js

@@ -1401,14 +1401,18 @@ export class SceneController {
 
     const layerGlyphs = this.getEditingLayerFromGlyphLayers(varGlyph.layers);
     const staticGlyphControllers = {};
+
     for (const [i, source] of enumerate(varGlyph.sources)) {
-      if (source.layerName in layerGlyphs) {
-        staticGlyphControllers[source.layerName] =
-          await this.fontController.getLayerGlyphController(
-            varGlyph.name,
-            source.layerName,
-            i
-          );
+      for (const layerInfo of varGlyph.getSourceLayerNamesForSourceIndex(i)) {
+        const layerName = layerInfo.fullName;
+        if (layerName in layerGlyphs) {
+          staticGlyphControllers[layerName] =
+            await this.fontController.getLayerGlyphController(
+              varGlyph.name,
+              layerName,
+              i
+            );
+        }
       }
     }
     return staticGlyphControllers;

src/fontra/views/editor/visualization-layer-definitions.js

@@ -1411,6 +1411,9 @@ registerVisualizationLayerDefinition({
 
     for (const pointIndex of pointSelection || []) {
       const pt = glyph.path.getPoint(pointIndex);
+      if (!pt) {
+        continue;
+      }
       const xString = `${pointIndex}`;
       const width = context.measureText(xString).width + 2 * margin;
       context.fillStyle = parameters.boxColor;