Improve support for NLI by decoupling the editing layer from the location

src/fontra/backends/designspace.py

@@ -435,7 +435,7 @@ def _prepareUFOSourceLayer(
             normalizedLayerName = f"{ufoLayer.fileName}/{ufoLayerName}"
             defaultUFOLayerName = ufoLayer.reader.getDefaultLayerName()
 
-            localSourceDict = {}
+            localSourceDict = {"name": source.name}
             if ufoLayerName != defaultUFOLayerName:
                 localSourceDict["layername"] = ufoLayerName
             localSourceDict["location"] = source.location

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

@@ -269,17 +269,16 @@ export class FontController {
     return varGlyph.getLayerGlyphController(layerName, sourceIndex, getGlyphFunc);
   }
 
-  async getGlyphInstance(glyphName, location, instanceCacheKey) {
+  async getGlyphInstance(glyphName, location, layerName) {
     if (!this.hasGlyph(glyphName)) {
       return Promise.resolve(null);
     }
-    // instanceCacheKey must be unique for glyphName + location
-    if (instanceCacheKey === undefined) {
-      instanceCacheKey = glyphName + locationToString(location);
-    }
+    // instanceCacheKey must be unique for glyphName + location + layerName
+    const instanceCacheKey = glyphName + locationToString(location) + (layerName || "");
+
     let instancePromise = this._glyphInstancePromiseCache.get(instanceCacheKey);
     if (instancePromise === undefined) {
-      instancePromise = this._getGlyphInstance(glyphName, location, instanceCacheKey);
+      instancePromise = this._getGlyphInstance(glyphName, location, layerName);
       const deletedItem = this._glyphInstancePromiseCache.put(
         instanceCacheKey,
         instancePromise
@@ -296,11 +295,12 @@ export class FontController {
     return await instancePromise;
   }
 
-  async _getGlyphInstance(glyphName, location) {
+  async _getGlyphInstance(glyphName, location, layerName) {
     const varGlyph = await this.getGlyph(glyphName);
     const getGlyphFunc = this.getGlyph.bind(this);
     const instanceController = await varGlyph.instantiateController(
       location,
+      layerName,
       getGlyphFunc
     );
     return instanceController;

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

@@ -314,14 +314,19 @@ export class VariableGlyphController {
     }
   }
 
-  async instantiateController(location, getGlyphFunc) {
+  async instantiateController(location, layerName, getGlyphFunc) {
     const sourceIndex = this.getSourceIndex(location);
-    location = this.mapLocationGlobalToLocal(location);
+    if (!layerName || !(layerName in this.layers)) {
+      if (sourceIndex !== undefined) {
+        layerName = this.sources[sourceIndex].layerName;
+      }
+    }
 
     let instance;
-    if (sourceIndex !== undefined) {
-      instance = this.layers[this.sources[sourceIndex].layerName].glyph;
+    if (layerName !== undefined) {
+      instance = this.layers[layerName].glyph;
     } else {
+      location = this.mapLocationGlobalToLocal(location);
       instance = await this.instantiate(
         normalizeLocation(location, this.combinedAxes),
         getGlyphFunc
@@ -334,7 +339,8 @@ export class VariableGlyphController {
     const instanceController = new StaticGlyphController(
       this.name,
       instance,
-      sourceIndex
+      sourceIndex,
+      layerName
     );
 
     await instanceController.setupComponents(getGlyphFunc, location);
@@ -391,11 +397,12 @@ export class VariableGlyphController {
 }
 
 export class StaticGlyphController {
-  constructor(name, instance, sourceIndex) {
+  constructor(name, instance, sourceIndex, layerName) {
     this.name = name;
     this.instance = instance;
     this.sourceIndex = sourceIndex;
-    this.canEdit = sourceIndex !== undefined;
+    this.layerName = layerName;
+    this.canEdit = layerName !== undefined;
     this.components = [];
   }
 

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

@@ -163,15 +163,20 @@ export default class DesignspaceNavigationPanel extends Panel {
       }, 100)
     );
 
-    this.sceneSettingsController.addKeyListener("location", (event) => {
-      this.updateResetAllAxesButtonState();
-      this.updateInterpolationContributions();
-      if (event.senderInfo?.senderID === this) {
-        // Sent by us, ignore
-        return;
-      }
-      this.designspaceLocation.values = event.newValue;
-    });
+    this.sceneSettingsController.addKeyListener(
+      "location",
+      (event) => {
+        this.sceneSettings.editLayerName = null;
+        this.updateResetAllAxesButtonState();
+        this.updateInterpolationContributions();
+        if (event.senderInfo?.senderID === this) {
+          // Sent by us, ignore
+          return;
+        }
+        this.designspaceLocation.values = event.newValue;
+      },
+      true
+    );
 
     this.sceneSettingsController.addKeyListener("selectedSourceIndex", (event) => {
       this.sourcesList.setSelectedItemIndex(event.newValue);
@@ -255,6 +260,14 @@ export default class DesignspaceNavigationPanel extends Panel {
       this.sceneController.scrollAdjustBehavior = "pin-glyph-center";
       const sourceIndex = this.sourcesList.getSelectedItemIndex();
       this.sceneSettings.selectedSourceIndex = sourceIndex;
+      if (sourceIndex != undefined) {
+        const varGlyphController =
+          await this.sceneModel.getSelectedVariableGlyphController();
+        if (varGlyphController) {
+          this.sceneSettings.editLayerName =
+            varGlyphController.sources[sourceIndex]?.layerName;
+        }
+      }
     });
 
     this.sourcesList.addEventListener("rowDoubleClicked", (event) => {

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

@@ -139,7 +139,8 @@ export class SceneController {
         const location = varGlyphController.mapSourceLocationToGlobal(sourceIndex);
 
         this.sceneSettingsController.setItem("location", location, { senderID: this });
-      }
+      },
+      true
     );
 
     // Set up convenience property "selectedGlyphName"

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

@@ -9,7 +9,7 @@ import {
   unionRect,
 } from "../core/rectangle.js";
 import { pointInConvexPolygon, rectIntersectsPolygon } from "../core/convex-hull.js";
-import { enumerate, parseSelection } from "../core/utils.js";
+import { consolidateCalls, enumerate, parseSelection } from "../core/utils.js";
 import { difference, isEqualSet, updateSet } from "../core/set-ops.js";
 
 export class SceneModel {
@@ -25,9 +25,14 @@ export class SceneModel {
     this.cachedGlyphNames = new Set();
     this.backgroundLayers = {};
 
-    this.sceneSettingsController.addKeyListener(["glyphLines", "align"], (event) => {
-      this.updateScene();
-    });
+    this.updateScene = consolidateCalls(() => this._updateScene());
+
+    this.sceneSettingsController.addKeyListener(
+      ["glyphLines", "align", "selectedGlyph"],
+      (event) => {
+        this.updateScene();
+      }
+    );
 
     this.sceneSettingsController.addKeyListener("location", (event) => {
       this._syncLocalLocations();
@@ -105,7 +110,10 @@ export class SceneModel {
   }
 
   async getSelectedStaticGlyphController() {
-    return await this.getGlyphInstance(this.sceneSettings.selectedGlyphName);
+    return await this.getGlyphInstance(
+      this.sceneSettings.selectedGlyphName,
+      this.sceneSettings.editLayerName
+    );
   }
 
   getGlobalLocation() {
@@ -244,7 +252,7 @@ export class SceneModel {
     }
   }
 
-  async updateScene() {
+  async _updateScene() {
     this.updateBackgroundGlyphs();
     // const startTime = performance.now();
     await this.buildScene();
@@ -288,6 +296,9 @@ export class SceneModel {
     const fontController = this.fontController;
     const glyphLines = this.glyphLines;
     const align = this.sceneSettings.align;
+    const { lineIndex: selectedLineIndex, glyphIndex: selectedGlyphIndex } =
+      this.selectedGlyph || {};
+    const editLayerName = this.sceneSettings.editLayerName;
 
     let y = 0;
     const lineDistance = 1.1 * fontController.unitsPerEm; // TODO make factor user-configurable
@@ -301,11 +312,21 @@ export class SceneModel {
     );
     await fontController.loadGlyphs([...neededGlyphs]);
 
-    for (const glyphLine of glyphLines) {
+    for (const [lineIndex, glyphLine] of enumerate(glyphLines)) {
       const positionedLine = { glyphs: [] };
       let x = 0;
-      for (const glyphInfo of glyphLine) {
-        let glyphInstance = await this.getGlyphInstance(glyphInfo.glyphName);
+      for (const [glyphIndex, glyphInfo] of enumerate(glyphLine)) {
+        const thisGlyphEditLayerName =
+          editLayerName &&
+          lineIndex == selectedLineIndex &&
+          glyphIndex == selectedGlyphIndex
+            ? editLayerName
+            : undefined;
+
+        let glyphInstance = await this.getGlyphInstance(
+          glyphInfo.glyphName,
+          thisGlyphEditLayerName
+        );
         const isUndefined = !glyphInstance;
         if (isUndefined) {
           glyphInstance = fontController.getDummyGlyphInstanceController(
@@ -374,12 +395,12 @@ export class SceneModel {
     this.sceneSettings.positionedLines = positionedLines;
   }
 
-  async getGlyphInstance(glyphName) {
+  async getGlyphInstance(glyphName, layerName) {
     const location = {
       ...this._localLocations[glyphName],
       ...this.getGlobalLocation(),
     };
-    return await this.fontController.getGlyphInstance(glyphName, location);
+    return await this.fontController.getGlyphInstance(glyphName, location, layerName);
   }
 
   selectionAtPoint(point, size, currentSelection, preferTCenter) {

test-py/data/mutatorsans/MutatorSansLightCondensed.ufo/glyphs.rotate_end/contents.plist

@@ -0,0 +1,8 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>nlitest</key>
+    <string>nlitest.glif</string>
+  </dict>
+</plist>

test-py/data/mutatorsans/MutatorSansLightCondensed.ufo/glyphs.rotate_end/nlitest.glif

@@ -0,0 +1,12 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<glyph name="nlitest" format="2">
+  <advance width="750"/>
+  <outline>
+    <contour>
+      <point x="0" y="50" type="line"/>
+      <point x="0" y="0" type="line"/>
+      <point x="50" y="0" type="line"/>
+      <point x="750" y="0" type="line"/>
+    </contour>
+  </outline>
+</glyph>

test-py/data/mutatorsans/MutatorSansLightCondensed.ufo/glyphs.rotate_off/contents.plist

@@ -0,0 +1,8 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>nlitest</key>
+    <string>nlitest.glif</string>
+  </dict>
+</plist>

test-py/data/mutatorsans/MutatorSansLightCondensed.ufo/glyphs.rotate_off/nlitest.glif

@@ -0,0 +1,12 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<glyph name="nlitest" format="2">
+  <advance width="750"/>
+  <outline>
+    <contour>
+      <point x="0" y="50" type="line"/>
+      <point x="0" y="0" type="line"/>
+      <point x="50" y="0" type="line"/>
+      <point x="750" y="750" type="line"/>
+    </contour>
+  </outline>
+</glyph>

test-py/data/mutatorsans/MutatorSansLightCondensed.ufo/glyphs/R_.alt.glif

@@ -75,6 +75,8 @@
               <key>weight</key>
               <integer>1</integer>
             </dict>
+            <key>name</key>
+            <string>weight=1</string>
           </dict>
           <dict>
             <key>layername</key>
@@ -84,6 +86,8 @@
               <key>width</key>
               <integer>1</integer>
             </dict>
+            <key>name</key>
+            <string>width=1</string>
           </dict>
           <dict>
             <key>layername</key>
@@ -95,6 +99,8 @@
               <key>width</key>
               <integer>1</integer>
             </dict>
+            <key>name</key>
+            <string>width=1,weight=1</string>
           </dict>
         </array>
       </dict>

test-py/data/mutatorsans/MutatorSansLightCondensed.ufo/glyphs/contents.plist

@@ -88,6 +88,8 @@
     <string>dot.glif</string>
     <key>em</key>
     <string>em.glif</string>
+    <key>nlitest</key>
+    <string>nlitest.glif</string>
     <key>period</key>
     <string>period.glif</string>
     <key>quotedblbase</key>