From 4f80737c48eec994461cdb9514520a681732b9cb Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Tue, 23 Jan 2024 10:00:09 +0300 Subject: [PATCH 1/3] Implementation of X/Y component transformation fields --- src/fontra/client/web-components/ui-form.js | 11 +++ .../views/editor/panel-selection-info.js | 78 ++++++++++++++----- 2 files changed, 70 insertions(+), 19 deletions(-) diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js index 36861c6d6..869ce8fed 100644 --- 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 index 40b2de182..2a6ef35ea 100644 --- 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 = []; From 38c51afa85188ceab00971e421536a700630bd80 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Tue, 23 Jan 2024 10:01:59 +0300 Subject: [PATCH 2/3] Delete leftover --- src/fontra/client/web-components/ui-form.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js index 869ce8fed..76f02099d 100644 --- a/src/fontra/client/web-components/ui-form.js +++ b/src/fontra/client/web-components/ui-form.js @@ -147,7 +147,6 @@ export class Form extends SimpleElement { } _addEditNumberXY(valueElement, fieldItem) { - const div = document.createElement("div"); this._addEditNumber(valueElement, fieldItem.fieldX); this._addEditNumber(valueElement, fieldItem.fieldY); } From b1c0fc60b0032feecb41dda64882ca1411c26e4d Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Tue, 23 Jan 2024 11:04:58 +0100 Subject: [PATCH 3/3] Handle x/y fields separately --- src/fontra/views/editor/panel-selection-info.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/fontra/views/editor/panel-selection-info.js b/src/fontra/views/editor/panel-selection-info.js index 2a6ef35ea..fcccc6288 100644 --- a/src/fontra/views/editor/panel-selection-info.js +++ b/src/fontra/views/editor/panel-selection-info.js @@ -324,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)" }]);