Delete number input in rotary control

googlefonts · Nov 14, 2023 · 8a39624 · 8a39624
1 parent be69fec
commit 8a39624
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 30 deletions.
diff --git a/src/fontra/client/web-components/rotary-control.js b/src/fontra/client/web-components/rotary-control.js
@@ -5,7 +5,7 @@ import { subVectors } from "../core/vector.js";
 export class RotaryControl extends html.UnlitElement {
   static styles = `
   :host {
-    --knob-size: 2rem;
+    --knob-size: 1.4rem;
     --thumb-size: calc(var(--knob-size) / 5);
   }
 
@@ -31,10 +31,6 @@ export class RotaryControl extends html.UnlitElement {
     gap: 0.4rem;
     margin: 0.2rem;
   }
-
-  .number-input {
-    width: 5rem;
-  }
   `;
 
   constructor() {
@@ -69,9 +65,6 @@ export class RotaryControl extends html.UnlitElement {
     if (this.knob) {
       this.knob.style.transform = `rotate(${this.value}deg)`;
     }
-    if (this.numberInput) {
-      this.numberInput.value = this.value;
-    }
   }
 
   get value() {
@@ -80,20 +73,6 @@ export class RotaryControl extends html.UnlitElement {
 
   render() {
     return html.div({ class: "rotary-control" }, [
-      (this.numberInput = html.input({
-        class: "number-input",
-        type: "number",
-        step: "any",
-        required: "required",
-        min: 0,
-        max: 360,
-        value: this.value,
-        onchange: (event) => {
-          if (event.target.reportValidity()) {
-            this.value = event.target.valueAsNumber;
-          }
-        },
-      })),
       (this.knob = html.div(
         {
           onwheel: (event) => {
@@ -102,6 +81,7 @@ export class RotaryControl extends html.UnlitElement {
                 ? -1 * event.deltaX
                 : event.deltaY;
             this.value = this.value + delta;
+            this.onChangeCallback(this.value);
           },
           class: "knob",
           style: `transform: rotate(${this.value}deg);`,

diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js
@@ -188,15 +188,17 @@ export class Form extends SimpleElement {
     };
     this._fieldGetters[fieldItem.key] = () => inputElement.value;
     this._fieldSetters[fieldItem.key] = (value) => (inputElement.value = value);
-    valueElement.appendChild(inputElement);
     valueElement.appendChild(
-      html.createDomElement("rotary-control", {
-        value: fieldItem.value,
-        onChangeCallback: (value) => {
-          inputElement.value = value;
-          this._fieldChanging(fieldItem.key, value);
-        },
-      })
+      html.div({ style: "display: flex" }, [
+        inputElement,
+        html.createDomElement("rotary-control", {
+          value: fieldItem.value,
+          onChangeCallback: (value) => {
+            inputElement.value = value;
+            this._fieldChanging(fieldItem.key, value);
+          },
+        }),
+      ])
     );
   }