Implementation of X/Y component transformation fields

googlefonts · Jan 23, 2024 · 4f80737 · 4f80737
1 parent d22e023
commit 4f80737
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 19 deletions.
diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js
@@ -68,6 +68,11 @@ export class Form extends SimpleElement {
     .ui-form-value.text {
       white-space: normal;
     }
+
+    .ui-form-value.edit-number-x-y {
+      display: flex;
+      gap: 0.3rem;
+    }
   `;
 
   constructor() {
@@ -141,6 +146,12 @@ export class Form extends SimpleElement {
     valueElement.appendChild(inputElement);
   }
 
+  _addEditNumberXY(valueElement, fieldItem) {
+    const div = document.createElement("div");
+    this._addEditNumber(valueElement, fieldItem.fieldX);
+    this._addEditNumber(valueElement, fieldItem.fieldY);
+  }
+
   _addEditNumber(valueElement, fieldItem) {
     const inputElement = document.createElement("input");
     inputElement.type = "number";

diff --git a/src/fontra/views/editor/panel-selection-info.js b/src/fontra/views/editor/panel-selection-info.js
@@ -217,25 +217,65 @@ export default class SelectionInfoPanel extends Panel {
       });
       formContents.push({ type: "header", label: "Transformation" });
 
-      for (const key of [
-        "translateX",
-        "translateY",
-        "rotation",
-        "scaleX",
-        "scaleY",
-        "skewX",
-        "skewY",
-        "tCenterX",
-        "tCenterY",
-      ]) {
-        const value = component.transformation[key];
-        formContents.push({
-          type: key === "rotation" ? "edit-angle" : "edit-number",
-          key: componentKey("transformation", key),
-          label: key,
-          value: value,
-        });
-      }
+      formContents.push({
+        type: "edit-number-x-y",
+        label: "translate",
+        fieldX: {
+          key: componentKey("transformation", "translateX"),
+          value: component.transformation.translateX,
+        },
+        fieldY: {
+          key: componentKey("transformation", "translateY"),
+          value: component.transformation.translateY,
+        },
+      });
+
+      formContents.push({
+        type: "edit-angle",
+        key: componentKey("transformation", "rotation"),
+        label: "rotation",
+        value: component.transformation.rotation,
+      });
+
+      formContents.push({
+        type: "edit-number-x-y",
+        label: "scale",
+        fieldX: {
+          key: componentKey("transformation", "scaleX"),
+          value: component.transformation.scaleX,
+        },
+        fieldY: {
+          key: componentKey("transformation", "scaleY"),
+          value: component.transformation.scaleY,
+        },
+      });
+
+      formContents.push({
+        type: "edit-number-x-y",
+        label: "skew",
+        fieldX: {
+          key: componentKey("transformation", "skewX"),
+          value: component.transformation.skewX,
+        },
+        fieldY: {
+          key: componentKey("transformation", "skewY"),
+          value: component.transformation.skewY,
+        },
+      });
+
+      formContents.push({
+        type: "edit-number-x-y",
+        label: "center",
+        fieldX: {
+          key: componentKey("transformation", "tCenterX"),
+          value: component.transformation.tCenterX,
+        },
+        fieldY: {
+          key: componentKey("transformation", "tCenterY"),
+          value: component.transformation.tCenterY,
+        },
+      });
+
       const baseGlyph = await this.fontController.getGlyph(component.name);
       if (baseGlyph && component.location) {
         const locationItems = [];