Add actions to transformation panel

src/fontra/client/lang/en.json

@@ -3,6 +3,7 @@
   "action-topics.glyph-editor-appearance": "Glyph editor appearance",
   "action-topics.menu.edit": "Edit",
   "action-topics.menu.view": "View",
+  "action-topics.selection-transformations": "Selection Transformations",
   "action-topics.sidebars": "Sidebars",
   "action-topics.tools": "Tools",
   "action.add-anchor": "Add Anchor",

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

@@ -3,6 +3,7 @@
   "action-topics.glyph-editor-appearance": "字符形编辑器外观",
   "action-topics.menu.edit": "编辑",
   "action-topics.menu.view": "视图",
+  "action-topics.selection-transformations": "Selection Transformations",
   "action-topics.sidebars": "Sidebars",
   "action-topics.tools": "Tools",
   "action.add-anchor": "添加锚点",

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

@@ -1,3 +1,4 @@
+import { registerAction } from "../core/actions.js";
 import { ChangeCollector, applyChange, consolidateChanges } from "../core/changes.js";
 import { EditBehaviorFactory } from "./edit-behavior.js";
 import Panel from "./panel.js";
@@ -101,6 +102,46 @@ export default class TransformationPanel extends Panel {
       skewY: 0,
       customDistributionSpacing: null,
     };
+    this.registerActions();
+  }
+
+  registerActions() {
+    const topic = "0070-action-topics.selection-transformations";
+
+    const registerActions = [
+      ["align.left", alignLeft],
+      ["align.center", alignCenter],
+      ["align.right", alignRight],
+      ["align.top", alignTop],
+      ["align.middle", alignMiddle],
+      ["align.bottom", alignBottom],
+      ["distribute.horizontally", distributeHorizontally],
+      ["distribute.vertically", distributeVertically],
+    ];
+    for (const [keyPart, moveDescriptor] of registerActions) {
+      registerAction(
+        `action.selection-transformation.${keyPart}`,
+        { topic, titleKey: `sidebar.selection-transformation.${keyPart}` },
+        () => this.moveObjects(moveDescriptor)
+      );
+    }
+
+    const registerActionsPathOperations = [
+      ["union", unionPath],
+      ["subtract", subtractPath],
+      ["intersect", intersectPath],
+      ["exclude", excludePath],
+    ];
+    for (const [keyPart, pathOperationFunc] of registerActionsPathOperations) {
+      registerAction(
+        `action.selection-transformation.path-operations.${keyPart}`,
+        {
+          topic,
+          titleKey: `sidebar.selection-transformation.path-operations.${keyPart}`,
+        },
+        () => this.doPathOperations(pathOperationFunc, keyPart)
+      );
+    }
   }
 
   getContentElement() {
@@ -449,32 +490,23 @@ export default class TransformationPanel extends Panel {
     });
 
     formContents.push({ type: "spacer" });
+
+    const labelKeyPathOperations = "sidebar.selection-transformation.path-operations";
+
     formContents.push({
       type: "header",
-      label: translate("sidebar.selection-transformation.path-operations"),
+      label: translate(labelKeyPathOperations),
     });
 
-    const labelUnion = translate(
-      "sidebar.selection-transformation.path-operations.union"
-    );
-    const labelSubtract = translate(
-      "sidebar.selection-transformation.path-operations.subtract"
-    );
-    const labelIntersect = translate(
-      "sidebar.selection-transformation.path-operations.intersect"
-    );
-    const labelExclude = translate(
-      "sidebar.selection-transformation.path-operations.exclude"
-    );
     formContents.push({
       type: "universal-row",
       field1: {
         type: "auxiliaryElement",
         key: "removeOverlaps",
         auxiliaryElement: html.createDomElement("icon-button", {
           "src": "/tabler-icons/layers-union.svg",
-          "onclick": (event) => this.doPathOperations(unionPath, labelUnion),
-          "data-tooltip": labelUnion,
+          "onclick": (event) => this.doPathOperations(unionPath, "union"),
+          "data-tooltip": translate(`${labelKeyPathOperations}.union`),
           "data-tooltipposition": "top-left",
           "class": "ui-form-icon ui-form-icon-button",
         }),
@@ -484,8 +516,8 @@ export default class TransformationPanel extends Panel {
         key: "subtractContours",
         auxiliaryElement: html.createDomElement("icon-button", {
           "src": "/tabler-icons/layers-subtract.svg",
-          "onclick": (event) => this.doPathOperations(subtractPath, labelSubtract),
-          "data-tooltip": labelSubtract,
+          "onclick": (event) => this.doPathOperations(subtractPath, "subtract"),
+          "data-tooltip": translate(`${labelKeyPathOperations}.subtract`),
           "data-tooltipposition": "top",
           "class": "ui-form-icon",
         }),
@@ -495,8 +527,8 @@ export default class TransformationPanel extends Panel {
         key: "intersectContours",
         auxiliaryElement: html.createDomElement("icon-button", {
           "src": "/tabler-icons/layers-intersect-2.svg",
-          "onclick": (event) => this.doPathOperations(intersectPath, labelIntersect),
-          "data-tooltip": labelIntersect,
+          "onclick": (event) => this.doPathOperations(intersectPath, "intersect"),
+          "data-tooltip": translate(`${labelKeyPathOperations}.intersect`),
           "data-tooltipposition": "top-right",
           "class": "ui-form-icon",
         }),
@@ -510,8 +542,8 @@ export default class TransformationPanel extends Panel {
         key: "excludeContours",
         auxiliaryElement: html.createDomElement("icon-button", {
           "src": "/tabler-icons/layers-difference.svg",
-          "onclick": (event) => this.doPathOperations(excludePath, labelExclude),
-          "data-tooltip": labelExclude,
+          "onclick": (event) => this.doPathOperations(excludePath, "exclude"),
+          "data-tooltip": translate(`${labelKeyPathOperations}.exclude`),
           "data-tooltipposition": "top-left",
           "class": "ui-form-icon ui-form-icon-button",
         }),
@@ -537,7 +569,21 @@ export default class TransformationPanel extends Panel {
     };
   }
 
-  async doPathOperations(pathOperationFunc, undoLabel) {
+  async doPathOperations(pathOperationFunc, key) {
+    if (!this.sceneController.sceneSettings.selectedGlyph?.isEditing) {
+      return;
+    }
+
+    const positionedGlyph =
+      this.sceneController.sceneModel.getSelectedPositionedGlyph();
+
+    if (!positionedGlyph) {
+      return;
+    }
+
+    const undoLabel = translate(
+      `sidebar.selection-transformation.path-operations.${key}`
+    );
     const doUnion = pathOperationFunc === unionPath;
     let { point: pointIndices } = parseSelection(this.sceneController.selection);
     pointIndices = pointIndices || [];
@@ -546,9 +592,6 @@ export default class TransformationPanel extends Panel {
       return;
     }
 
-    const positionedGlyph =
-      this.sceneController.sceneModel.getSelectedPositionedGlyph();
-
     const selectedContourIndicesMap = getSelectionByContour(
       positionedGlyph.glyph.path,
       pointIndices