Move css variable settings to the places where they should be

googlefonts · Jan 2, 2024 · f614603 · f614603
1 parent 87301e9
commit f614603
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
@@ -138,22 +138,6 @@ export class EditorController {
       }
     );
 
-    this.sceneSettingsController.addKeyListener("location", () => {
-      const fontVariationSettings = [];
-      for (const axis of this.fontController.globalAxes) {
-        fontVariationSettings.push(
-          `'${axis.tag}' ${this.sceneSettings.location[axis.tag]}`
-        );
-      }
-      const fontVariationSettingsCssString = fontVariationSettings.join(",");
-      this.canvasController.canvas.style.fontVariationSettings =
-        fontVariationSettingsCssString;
-      this.canvasController.requestUpdate();
-      const referenceFontsPanel = this.getSidebarPanel("reference-font");
-      referenceFontsPanel.contentElement.style.fontVariationSettings =
-        fontVariationSettingsCssString;
-    });
-
     this.cjkDesignFrame = new CJKDesignFrame(this);
 
     this.visualizationLayers = new VisualizationLayers(

diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js
@@ -305,6 +305,11 @@ export default class ReferenceFontPanel extends Panel {
         this.requestReferenceFontsPreview();
       }
     );
+
+    editorController.sceneSettingsController.addKeyListener("location", () => {
+      this.contentElement.style.fontVariationSettings =
+        editorController.sceneController.buildFontVariablesCssString();
+    });
   }
 
   async requestReferenceFontsPreview() {

diff --git a/src/fontra/views/editor/scene-controller.js b/src/fontra/views/editor/scene-controller.js
@@ -121,6 +121,7 @@ export class SceneController {
 
     // Set up the mutual dependencies between location and selectedSourceIndex
     this.sceneSettingsController.addKeyListener("location", async (event) => {
+      this.setCanvasFontVariables();
       if (event.senderInfo?.senderID === this) {
         return;
       }
@@ -1056,6 +1057,22 @@ export class SceneController {
     }
     return new PathConnectDetector(this, path);
   }
+
+  buildFontVariablesCssString() {
+    const fontVariationSettings = [];
+    for (const axis of this.fontController.globalAxes) {
+      fontVariationSettings.push(
+        `'${axis.tag}' ${this.sceneSettings.location[axis.tag]}`
+      );
+    }
+    return fontVariationSettings.join(",");
+  }
+
+  setCanvasFontVariables() {
+    this.canvasController.canvas.style.fontVariationSettings =
+      this.buildFontVariablesCssString();
+    this.canvasController.requestUpdate();
+  }
 }
 
 class PathConnectDetector {