Rotary control should dispatch values between -180, 180

googlefonts · Nov 15, 2023 · 35fbb05 · 35fbb05
1 parent 8a39624
commit 35fbb05
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/src/fontra/client/web-components/rotary-control.js b/src/fontra/client/web-components/rotary-control.js
@@ -46,7 +46,7 @@ export class RotaryControl extends html.UnlitElement {
       const diff = angle(origin, target) - this.angleWhenDragStart;
       let value = this.startAngle + diff;
       this.value = round(value);
-      this.onChangeCallback(this.value);
+      this.dispatch(this.value);
     });
 
     document.body.addEventListener("mouseup", () => {
@@ -57,7 +57,6 @@ export class RotaryControl extends html.UnlitElement {
 
   set value(value) {
     if (value < 0) {
-      // minus 90 degrees should be considered as 270
       value = 360 + value;
     }
     value = value % 360;
@@ -71,6 +70,13 @@ export class RotaryControl extends html.UnlitElement {
     return this._value;
   }
 
+  dispatch(value) {
+    if (value > 180) {
+      value -= 360;
+    }
+    this.onChangeCallback(value);
+  }
+
   render() {
     return html.div({ class: "rotary-control" }, [
       (this.knob = html.div(
@@ -81,7 +87,7 @@ export class RotaryControl extends html.UnlitElement {
                 ? -1 * event.deltaX
                 : event.deltaY;
             this.value = this.value + delta;
-            this.onChangeCallback(this.value);
+            this.dispatch(this.value);
           },
           class: "knob",
           style: `transform: rotate(${this.value}deg);`,
@@ -115,7 +121,6 @@ function angle(origin, target) {
   const vec = subVectors(target, origin);
   let deg = toDegrees(Math.atan2(vec.y, vec.x));
 
-  // the north of the target should be 0
   deg += 90;
 
   if (deg < 0) {

diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js
@@ -177,28 +177,27 @@ export class Form extends SimpleElement {
     inputElement.type = "number";
     inputElement.value = fieldItem.value;
 
-    inputElement.min = 0;
-    inputElement.max = 360;
     inputElement.step = "any";
 
     inputElement.disabled = fieldItem.disabled;
     inputElement.onchange = (event) => {
       let value = parseFloat(inputElement.value);
       this._fieldChanging(fieldItem.key, value);
+      rotaryControl.value = value;
     };
+
+    const rotaryControl = html.createDomElement("rotary-control", {
+      value: fieldItem.value,
+      onChangeCallback: (value) => {
+        inputElement.value = value;
+        this._fieldChanging(fieldItem.key, value);
+      },
+    });
+
     this._fieldGetters[fieldItem.key] = () => inputElement.value;
     this._fieldSetters[fieldItem.key] = (value) => (inputElement.value = value);
     valueElement.appendChild(
-      html.div({ style: "display: flex" }, [
-        inputElement,
-        html.createDomElement("rotary-control", {
-          value: fieldItem.value,
-          onChangeCallback: (value) => {
-            inputElement.value = value;
-            this._fieldChanging(fieldItem.key, value);
-          },
-        }),
-      ])
+      html.div({ style: "display: flex" }, [inputElement, rotaryControl])
     );
   }