Rotary-like control for angles

src/fontra/client/web-components/rotary-control.js

@@ -0,0 +1,123 @@
+import * as html from "../core/html-utils.js";
+
+export class RotaryControl extends html.UnlitElement {
+  static styles = `
+  :host {
+    --knob-size: 1.4rem;
+    --thumb-size: calc(var(--knob-size) / 5);
+  }
+
+  .knob {
+    width: var(--knob-size);
+    height: var(--knob-size);
+    border-radius: 50%;
+    background: #e3e3e3;
+    display: flex;
+    justify-content: center;
+  }
+
+  .knob:before {
+    content: "";
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    background: rgb(89, 89, 89);
+    border-radius: 50%;
+    margin-top: calc(var(--knob-size) / 8);
+  }
+
+  .rotary-control {
+    display: flex;
+    gap: 0.4rem;
+    margin: 0 0.2rem;
+  }
+
+  .overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+  `;
+
+  constructor() {
+    super();
+    this.onChangeCallback = () => {};
+  }
+
+  set value(value) {
+    this._value = value;
+    if (this.knob) {
+      this.knob.style.transform = `rotate(${this.value}deg)`;
+    }
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  dispatch() {
+    const event = { value: this.value };
+
+    if (this.dragBegin) {
+      event.dragBegin = true;
+      this.dragBegin = false;
+    }
+
+    if (this.dragEnd) {
+      event.dragEnd = true;
+      this.dragEnd = false;
+    }
+
+    this.onChangeCallback(event);
+  }
+
+  attachOverlay() {
+    const overlay = html.div(
+      {
+        class: "overlay",
+        onmouseup: () => {
+          this.positionDragBegin = undefined;
+          this.angleWhenDragStart = undefined;
+          this.shadowRoot.removeChild(overlay);
+          this.dragEnd = true;
+          this.dispatch();
+        },
+        onmousemove: (event) => {
+          if (this.positionDragBegin === undefined) {
+            return;
+          }
+          const value =
+            this.angleWhenDragStart + (this.positionDragBegin - event.clientY);
+          this.value = value;
+          this.dispatch();
+        },
+      },
+      []
+    );
+    this.overlay = overlay;
+    this.shadowRoot.appendChild(overlay);
+  }
+
+  render() {
+    return html.div({ class: "rotary-control" }, [
+      (this.knob = html.div(
+        {
+          class: "knob",
+          style: `transform: rotate(${this.value}deg);`,
+          onmousedown: (event) => {
+            this.positionDragBegin = event.clientY;
+            this.angleWhenDragStart = this.value;
+            this.dragBegin = true;
+            event.preventDefault();
+            this.attachOverlay();
+          },
+        },
+        []
+      )),
+    ]);
+  }
+}
+
+customElements.define("rotary-control", RotaryControl);

src/fontra/client/web-components/ui-form.js

@@ -3,6 +3,7 @@ import { SimpleElement } from "../core/html-utils.js";
 import { QueueIterator } from "../core/queue-iterator.js";
 import { hyphenatedToCamelCase } from "../core/utils.js";
 import { RangeSlider } from "/web-components/range-slider.js";
+import "/web-components/rotary-control.js";
 
 export class Form extends SimpleElement {
   static styles = `
@@ -186,6 +187,54 @@ export class Form extends SimpleElement {
     valueElement.appendChild(inputElement);
   }
 
+  _addEditAngle(valueElement, fieldItem) {
+    const inputElement = html.input({
+      type: "number",
+      value: fieldItem.value,
+      step: "any",
+      disabled: fieldItem.disabled,
+      onchange: () => {
+        let value = parseFloat(inputElement.value);
+        this._fieldChanging(fieldItem.key, value);
+        rotaryControl.value = value * -1;
+      },
+    });
+    const rotaryControl = html.createDomElement("rotary-control", {
+      value: fieldItem.value,
+    });
+    {
+      // Rotary change closure
+      let valueStream;
+
+      rotaryControl.onChangeCallback = (event) => {
+        const value = -event.value;
+        inputElement.value = value;
+        if (event.dragBegin) {
+          valueStream = new QueueIterator(5, true);
+          this._fieldChanging(fieldItem.key, value, valueStream);
+        }
+
+        if (valueStream) {
+          valueStream.put(value);
+          this._dispatchEvent("doChange", { key: fieldItem.key, value: value });
+          if (event.dragEnd) {
+            valueStream.done();
+            valueStream = undefined;
+            this._dispatchEvent("endChange", { key: fieldItem.key });
+          }
+        } else {
+          this._fieldChanging(fieldItem.key, value, undefined);
+        }
+      };
+    }
+
+    this._fieldGetters[fieldItem.key] = () => inputElement.value;
+    this._fieldSetters[fieldItem.key] = (value) => (inputElement.value = value);
+    valueElement.appendChild(
+      html.div({ style: "display: flex; gap: 0.15rem;" }, [inputElement, rotaryControl])
+    );
+  }
+
   _addEditNumberSlider(valueElement, fieldItem) {
     const rangeElement = new RangeSlider();
     rangeElement.value = fieldItem.value;

src/fontra/views/editor/panel-selection-info.js

@@ -226,7 +226,7 @@ export default class SelectionInfoPanel extends Panel {
       ]) {
         const value = component.transformation[key];
         formContents.push({
-          type: "edit-number",
+          type: key === "rotation" ? "edit-angle" : "edit-number",
           key: componentKey("transformation", key),
           label: key,
           value: value,