Merge pull request #1064 from googlefonts/issue-1051

Implementation of X/Y component transformation fields
googlefonts · Jan 23, 2024 · 1299133 · 1299133
2 parents ee3fb36 + b1c0fc6
commit 1299133
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 22 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,11 @@ export class Form extends SimpleElement {
     valueElement.appendChild(inputElement);
   }
 
+  _addEditNumberXY(valueElement, fieldItem) {
+    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 = [];
@@ -284,9 +324,15 @@ export default class SelectionInfoPanel extends Panel {
       }
     }
 
-    this._formFieldsByKey = Object.fromEntries(
-      formContents.map((field) => [field.key, field])
-    );
+    this._formFieldsByKey = {};
+    for (const field of formContents) {
+      if (field.fieldX) {
+        this._formFieldsByKey[field.fieldX.key] = field.fieldX;
+        this._formFieldsByKey[field.fieldY.key] = field.fieldY;
+      } else {
+        this._formFieldsByKey[field.key] = field;
+      }
+    }
 
     if (!formContents.length) {
       this.infoForm.setFieldDescriptions([{ type: "text", value: "(No selection)" }]);