Adding editor-behavior-panel to application settings

src/fontra/client/core/application-settings.js

@@ -0,0 +1,10 @@
+import { ObservableController } from "./observable-object.js";
+
+export const applicationSettingsController = new ObservableController({
+  clipboardFormat: "glif",
+  rectSelectLiveModifierKeys: false,
+});
+
+applicationSettingsController.synchronizeWithLocalStorage(
+  "fontra-application-settings-"
+);

src/fontra/client/lang/en.json

@@ -29,6 +29,7 @@
   "action.undo": "Undo",
   "application-settings.clipboard.title": "Clipboard",
   "application-settings.display-language.title": "Display Language",
+  "application-settings.editor-behavior.title": "Editor Behavior",
   "application-settings.plugins-manager.title": "Plugin Manager",
   "application-settings.server-info.title": "Server info",
   "application-settings.shortcuts.title": "Shortcuts",

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

@@ -28,6 +28,7 @@
   "action.undo": "撤销",
   "application-settings.clipboard.title": "剪贴板导出格式",
   "application-settings.display-language.title": "Display Language",
+  "application-settings.editor-behavior.title": "Editor Behavior",
   "application-settings.plugins-manager.title": "插件管理器",
   "application-settings.server-info.title": "服务器信息",
   "application-settings.shortcuts.title": "Shortcuts",

src/fontra/views/applicationsettings/applicationsettings.js

@@ -1,6 +1,7 @@
 import * as html from "../core/html-utils.js";
 import { ClipboardPanel } from "./panel-clipboard.js";
 import { DisplayLanguagePanel } from "./panel-display-language.js";
+import { EditorBehaviorPanel } from "./panel-editor-behavior.js";
 import { PluginsManagerPanel } from "./panel-plugins-manager.js";
 import { ServerInfoPanel } from "./panel-server-info.js";
 import { ShortCutsPanel } from "./panel-shortcuts.js";
@@ -23,12 +24,10 @@ export class ApplicationSettingsController {
 
     for (const panelClass of [
       ShortCutsPanel,
-      // TODO: Add more panels here:
-      // EditorAppearancePanel,
-      // ExtensionsPanel,
       ThemeSettingsPanel,
       DisplayLanguagePanel,
       ClipboardPanel,
+      EditorBehaviorPanel,
       PluginsManagerPanel,
       ServerInfoPanel,
     ]) {

src/fontra/views/applicationsettings/panel-clipboard.js

@@ -1,4 +1,4 @@
-import { clipboardFormatController } from "../core/clipboard-format.js";
+import { applicationSettingsController } from "../core/application-settings.js";
 import * as html from "../core/html-utils.js";
 import { addStyleSheet } from "../core/html-utils.js";
 import { translate } from "../core/localization.js";
@@ -33,10 +33,10 @@ export class ClipboardPanel extends BaseInfoPanel {
     return [
       {
         displayName: translate("sidebar.user-settings.clipboard"),
-        controller: clipboardFormatController,
+        controller: applicationSettingsController,
         descriptions: [
           {
-            key: "format",
+            key: "clipboardFormat",
             ui: "radio",
             options: [
               { key: "glif", displayName: "GLIF (RoboFont)" },

src/fontra/views/applicationsettings/panel-editor-behavior.js

@@ -0,0 +1,35 @@
+import { applicationSettingsController } from "../core/application-settings.js";
+import * as html from "../core/html-utils.js";
+import { addStyleSheet } from "../core/html-utils.js";
+import { labeledCheckbox } from "../core/ui-utils.js";
+import { BaseInfoPanel } from "./panel-base.js";
+
+addStyleSheet(`
+  .fontra-ui-editor-behavior-panel-card {
+    background-color: var(--ui-element-background-color);
+    border-radius: 0.5em;
+    padding: 1em;
+  }
+  `);
+
+export class EditorBehaviorPanel extends BaseInfoPanel {
+  static title = "application-settings.editor-behavior.title";
+  static id = "editor-behavior-panel";
+
+  async setupUI() {
+    this.panelElement.innerHTML = "";
+    const container = html.createDomElement("div", {
+      class: "fontra-ui-editor-behavior-panel-card",
+    });
+
+    container.appendChild(
+      labeledCheckbox(
+        "Rect-select live modifier keys",
+        applicationSettingsController,
+        "rectSelectLiveModifierKeys",
+        {}
+      )
+    );
+    this.panelElement.appendChild(container);
+  }
+}

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

@@ -290,7 +290,7 @@ export class PointerTool extends BaseTool {
     const sceneController = this.sceneController;
     const initialPoint = sceneController.localPoint(initialEvent);
     for await (const event of eventStream) {
-      const modifierEvent = sceneController.experimentalFeatures
+      const modifierEvent = sceneController.applicationSettings
         .rectSelectLiveModifierKeys
         ? event
         : initialEvent;
@@ -333,7 +333,7 @@ export class PointerTool extends BaseTool {
         const behaviorFactory = new EditBehaviorFactory(
           layerGlyph,
           sceneController.selection,
-          sceneController.experimentalFeatures.scalingEditBehavior
+          this.scalingEditBehavior
         );
         return {
           layerName,
@@ -482,7 +482,7 @@ export class PointerTool extends BaseTool {
         const behaviorFactory = new EditBehaviorFactory(
           layerGlyph,
           sceneController.selection,
-          sceneController.experimentalFeatures.scalingEditBehavior
+          this.scalingEditBehavior
         );
         const layerBounds =
           staticGlyphControllers[layerName].getSelectionBounds(selection);
@@ -656,6 +656,7 @@ export class PointerTool extends BaseTool {
 
   activate() {
     super.activate();
+    this.scalingEditBehavior = false;
     this.sceneController.sceneModel.showTransformSelection = true;
     this.canvasController.requestUpdate();
   }
@@ -770,11 +771,11 @@ export class PointerToolScale extends PointerTool {
 
   activate() {
     this.setCursor();
-    this.sceneController.experimentalFeatures.scalingEditBehavior = true;
+    this.scalingEditBehavior = true;
   }
 
   deactivate() {
-    this.sceneController.experimentalFeatures.scalingEditBehavior = false;
+    this.scalingEditBehavior = false;
   }
 }
 

src/fontra/views/editor/editor.js

@@ -86,7 +86,7 @@ import TextEntryPanel from "./panel-text-entry.js";
 import TransformationPanel from "./panel-transformation.js";
 import UserSettingsPanel from "./panel-user-settings.js";
 import Panel from "./panel.js";
-import { clipboardFormatController } from "/core/clipboard-format.js";
+import { applicationSettingsController } from "/core/application-settings.js";
 import { ensureLanguageHasLoaded, translate } from "/core/localization.js";
 
 const MIN_CANVAS_SPACE = 200;
@@ -129,19 +129,10 @@ export class EditorController {
       async (...args) => await this.editListenerCallback(...args)
     );
 
-    this.experimentalFeaturesController = new ObservableController({
-      scalingEditBehavior: false,
-      quadPenTool: false,
-      rectSelectLiveModifiers: false,
-    });
-    this.experimentalFeaturesController.synchronizeWithLocalStorage(
-      "fontra-editor-experimental-features."
-    );
-
     this.sceneController = new SceneController(
       this.fontController,
       canvasController,
-      this.experimentalFeaturesController
+      applicationSettingsController
     );
 
     this.sceneSettingsController = this.sceneController.sceneSettingsController;
@@ -666,6 +657,7 @@ export class EditorController {
             "theme-settings",
             "display-language",
             "clipboard",
+            "editor-behavior",
             "plugins-manager",
             "server-info",
           ];
@@ -1718,7 +1710,7 @@ export class EditorController {
 
     const mapping = { "svg": svgString, "glif": glifString, "fontra-json": jsonString };
     const plainTextString =
-      mapping[clipboardFormatController.model.format] || glifString;
+      mapping[applicationSettingsController.model.clipboardFormat] || glifString;
 
     localStorage.setItem("clipboardSelection.text-plain", plainTextString);
     localStorage.setItem("clipboardSelection.glyph", jsonString);

src/fontra/views/editor/panel-transformation.js

@@ -641,7 +641,7 @@ export default class TransformationPanel extends Panel {
         const behaviorFactory = new EditBehaviorFactory(
           layerGlyph,
           this.sceneController.selection,
-          this.sceneController.experimentalFeatures.scalingEditBehavior
+          this.sceneController.selectedTool.scalingEditBehavior
         );
         return {
           layerName,
@@ -903,7 +903,7 @@ class MovableObject {
     const behaviorFactory = new EditBehaviorFactory(
       layerGlyph,
       this.selection,
-      sceneController.experimentalFeatures.scalingEditBehavior
+      sceneController.selectedTool.scalingEditBehavior
     );
 
     const editBehavior = behaviorFactory.getBehavior("default");

src/fontra/views/editor/panel-user-settings.js

@@ -1,6 +1,7 @@
+// TODO: This whole "gear" sidebar panel will be removed soon.
 import { loaderSpinner } from "../core/loader-spinner.js";
 import Panel from "./panel.js";
-import { clipboardFormatController } from "/core/clipboard-format.js";
+import { applicationSettingsController } from "/core/application-settings.js";
 import * as html from "/core/html-utils.js";
 import { languageController, translate } from "/core/localization.js";
 import { themeController } from "/core/theme-settings.js";
@@ -59,10 +60,10 @@ export default class UserSettingsPanel extends Panel {
 
     items.push({
       displayName: translate("sidebar.user-settings.clipboard"),
-      controller: clipboardFormatController,
+      controller: applicationSettingsController,
       descriptions: [
         {
-          key: "format",
+          key: "clipboardFormat",
           ui: "radio",
           options: [
             { key: "glif", displayName: "GLIF (RoboFont)" },
@@ -92,18 +93,18 @@ export default class UserSettingsPanel extends Panel {
 
     items.push({
       displayName: translate("sidebar.user-settings.experimental"),
-      controller: this.editorController.experimentalFeaturesController,
+      controller: applicationSettingsController,
       descriptions: [
-        {
-          key: "scalingEditBehavior",
-          displayName: "Scaling edit tool behavior",
-          ui: "checkbox",
-        },
-        {
-          key: "quadPenTool",
-          displayName: "Pen tool draws quadratics",
-          ui: "checkbox",
-        },
+        // {
+        //   key: "scalingEditBehavior",
+        //   displayName: "Scaling edit tool behavior",
+        //   ui: "checkbox",
+        // },
+        // {
+        //   key: "quadPenTool",
+        //   displayName: "Pen tool draws quadratics",
+        //   ui: "checkbox",
+        // },
         {
           key: "rectSelectLiveModifierKeys",
           displayName: "Rect-select live modifier keys",

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

@@ -36,9 +36,9 @@ import { translate, translatePlural } from "/core/localization.js";
 import { dialog, message } from "/web-components/modal-dialog.js";
 
 export class SceneController {
-  constructor(fontController, canvasController, experimentalFeaturesController) {
+  constructor(fontController, canvasController, applicationSettingsController) {
     this.canvasController = canvasController;
-    this.experimentalFeatures = experimentalFeaturesController.model;
+    this.applicationSettings = applicationSettingsController.model;
     this.fontController = fontController;
     this.autoViewBox = true;
 
@@ -598,7 +598,7 @@ export class SceneController {
         const behaviorFactory = new EditBehaviorFactory(
           layerGlyph,
           this.selection,
-          this.experimentalFeatures.scalingEditBehavior
+          this.selectedTool.scalingEditBehavior
         );
         return {
           layerName,