Delete onwheel, use dispatchEvent for continuous changes

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

@@ -106,14 +106,6 @@ export class RotaryControl extends html.UnlitElement {
     return html.div({ class: "rotary-control" }, [
       (this.knob = html.div(
         {
-          onwheel: (event) => {
-            const delta =
-              Math.abs(event.deltaX) > Math.abs(event.deltaY)
-                ? -1 * event.deltaX
-                : event.deltaY;
-            this.value = this.value + delta;
-            this.dispatch();
-          },
           class: "knob",
           style: `transform: rotate(${this.value}deg);`,
           onmousedown: (event) => {

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

@@ -3,7 +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 { RotaryControl } from "/web-components/rotary-control.js";
+import "/web-components/rotary-control.js";
 
 export class Form extends SimpleElement {
   static styles = `
@@ -200,14 +200,27 @@ export class Form extends SimpleElement {
       this._fieldChanging(fieldItem.key, value);
       rotaryControl.value = value;
     };
-
+    let valueStream;
     const rotaryControl = html.createDomElement("rotary-control", {
       value: fieldItem.value,
       onChangeCallback: (event) => {
         const value = event.value * -1;
         inputElement.value = value;
-        this._fieldChanging(fieldItem.key, value);
-        console.log(event);
+        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);
+        }
       },
     });