From 128004b832141b2370a158d5f2d12471f9dcd1c4 Mon Sep 17 00:00:00 2001
From: Fatih Erikli <fatih.erikli.work@gmail.com>
Date: Wed, 29 Nov 2023 14:41:21 +0300
Subject: [PATCH] Delete onwheel, use dispatchEvent for continuous changes

---
 .../client/web-components/rotary-control.js   |  8 -------
 src/fontra/client/web-components/ui-form.js   | 21 +++++++++++++++----
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/fontra/client/web-components/rotary-control.js b/src/fontra/client/web-components/rotary-control.js
index 01c206dc8..90cd32e15 100644
--- a/src/fontra/client/web-components/rotary-control.js
+++ b/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) => {
diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js
index eabd89462..c673db15b 100644
--- a/src/fontra/client/web-components/ui-form.js
+++ b/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);
+        }
       },
     });