@grame/faustwasm 0.4.4 → 0.4.6

package/assets/standalone/faust-ui/index.js

@@ -440,7 +440,7 @@ const _AbstractItem = class _AbstractItem extends _AbstractComponent__WEBPACK_IM
       const fromX = prevX - rect.left;
       const fromY = prevY - rect.top;
       const prevValue = this.state.value;
-      this.handlePointerDown({ x: fromX, y: fromY, originalEvent: e });
+      this.handleMouseOrTouchDown({ pointerId: -1, x: fromX, y: fromY, originalEvent: e });
       const handleTouchMove = (e2) => {
         e2.preventDefault();
         const clientX = e2.changedTouches[0].clientX;
@@ -451,13 +451,13 @@ const _AbstractItem = class _AbstractItem extends _AbstractComponent__WEBPACK_IM
         prevY = clientY;
         const x = clientX - rect.left;
         const y = clientY - rect.top;
-        this.handlePointerDrag({ prevValue, x, y, fromX, fromY, movementX, movementY, originalEvent: e2 });
+        this.handleMouseOrTouchMove({ pointerId: -1, prevValue, x, y, fromX, fromY, movementX, movementY, originalEvent: e2 });
       };
       const handleTouchEnd = (e2) => {
         e2.preventDefault();
         const x = e2.changedTouches[0].clientX - rect.left;
         const y = e2.changedTouches[0].clientY - rect.top;
-        this.handlePointerUp({ x, y, originalEvent: e2 });
+        this.handleMouseOrTouchUp({ pointerId: -1, x, y, originalEvent: e2 });
         document.removeEventListener("touchmove", handleTouchMove);
         document.removeEventListener("touchend", handleTouchEnd);
       };
@@ -475,18 +475,18 @@ const _AbstractItem = class _AbstractItem extends _AbstractComponent__WEBPACK_IM
       const fromX = e.clientX - rect.left;
       const fromY = e.clientY - rect.top;
       const prevValue = this.state.value;
-      this.handlePointerDown({ x: fromX, y: fromY, originalEvent: e });
+      this.handleMouseOrTouchDown({ pointerId: -1, x: fromX, y: fromY, originalEvent: e });
       const handleMouseMove = (e2) => {
         e2.preventDefault();
         const x = e2.clientX - rect.left;
         const y = e2.clientY - rect.top;
-        this.handlePointerDrag({ prevValue, x, y, fromX, fromY, movementX: e2.movementX, movementY: e2.movementY, originalEvent: e2 });
+        this.handleMouseOrTouchMove({ pointerId: -1, prevValue, x, y, fromX, fromY, movementX: e2.movementX, movementY: e2.movementY, originalEvent: e2 });
       };
       const handleMouseUp = (e2) => {
         e2.preventDefault();
         const x = e2.clientX - rect.left;
         const y = e2.clientY - rect.top;
-        this.handlePointerUp({ x, y, originalEvent: e2 });
+        this.handleMouseOrTouchUp({ pointerId: -1, x, y, originalEvent: e2 });
         document.removeEventListener("mousemove", handleMouseMove);
         document.removeEventListener("mouseup", handleMouseUp);
       };
@@ -500,10 +500,38 @@ const _AbstractItem = class _AbstractItem extends _AbstractComponent__WEBPACK_IM
     this.handleContextMenu = (e) => {
     };
     this.handlePointerDown = (e) => {
+      e.preventDefault();
+      e.currentTarget.focus();
+      const { pointerId } = e;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const fromX = e.clientX - rect.left;
+      const fromY = e.clientY - rect.top;
+      const prevValue = this.state.value;
+      this.handleMouseOrTouchDown({ pointerId, x: fromX, y: fromY, originalEvent: e });
+      const handlePointerMove = (e2) => {
+        if (e2.pointerId !== pointerId) return;
+        e2.preventDefault();
+        const x = e2.clientX - rect.left;
+        const y = e2.clientY - rect.top;
+        this.handleMouseOrTouchMove({ pointerId, prevValue, x, y, fromX, fromY, movementX: e2.movementX, movementY: e2.movementY, originalEvent: e2 });
+      };
+      const handlePointerUp = (e2) => {
+        if (e2.pointerId !== pointerId) return;
+        e2.preventDefault();
+        const x = e2.clientX - rect.left;
+        const y = e2.clientY - rect.top;
+        this.handleMouseOrTouchUp({ pointerId, x, y, originalEvent: e2 });
+        document.removeEventListener("pointermove", handlePointerMove);
+        document.removeEventListener("pointerup", handlePointerUp);
+      };
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+    };
+    this.handleMouseOrTouchDown = (e) => {
     };
-    this.handlePointerDrag = (e) => {
+    this.handleMouseOrTouchMove = (e) => {
     };
-    this.handlePointerUp = (e) => {
+    this.handleMouseOrTouchUp = (e) => {
     };
     this.handleFocusIn = (e) => this.setState({ focus: true });
     this.handleFocusOut = (e) => this.setState({ focus: false });
@@ -729,10 +757,13 @@ class Button extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       this.btn.style.fontFamily = `${fontname}, sans-serif`;
       this.btn.style.fontStyle = fontface;
     };
-    this.handlePointerDown = () => {
+    this.handleContextMenu = (e) => {
+      e.preventDefault();
+    };
+    this.handleMouseOrTouchDown = () => {
       this.setValue(1);
     };
-    this.handlePointerUp = () => {
+    this.handleMouseOrTouchUp = () => {
       this.setValue(0);
     };
   }
@@ -767,8 +798,8 @@ class Button extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
   }
   componentDidMount() {
     super.componentDidMount();
-    this.btn.addEventListener("mousedown", this.handleMouseDown);
-    this.btn.addEventListener("touchstart", this.handleTouchStart);
+    this.btn.addEventListener("pointerdown", this.handlePointerDown);
+    this.btn.addEventListener("contextmenu", this.handleContextMenu);
     this.on("style", () => this.schedule(this.setStyle));
     const labelChange = () => this.span.innerText = this.state.label;
     this.on("label", () => this.schedule(labelChange));
@@ -798,10 +829,10 @@ class Checkbox extends _Button__WEBPACK_IMPORTED_MODULE_0__["default"] {
   constructor() {
     super(...arguments);
     this.className = "checkbox";
-    this.handlePointerDown = () => {
+    this.handleMouseOrTouchDown = () => {
       this.setValue(1 - this.state.value);
     };
-    this.handlePointerUp = () => {
+    this.handleMouseOrTouchUp = () => {
     };
   }
 }
@@ -1315,7 +1346,7 @@ class Knob extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
     this.handleChange = (e) => {
       const value = parseFloat(e.currentTarget.value);
       if (isFinite(value)) {
-        const changed = this.setValue(+this.inputNumber.value);
+        const changed = this.setValue(+value);
         if (changed) return;
       }
       this.input.value = this.inputNumber.value + (this.state.unit || "");
@@ -1369,7 +1400,7 @@ class Knob extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       ctx.lineTo(valuePosX, valuePosY);
       ctx.stroke();
     };
-    this.handlePointerDrag = (e) => {
+    this.handleMouseOrTouchMove = (e) => {
       const newValue = this.getValueFromDelta(e);
       if (newValue !== this.state.value) this.setValue(newValue);
     };
@@ -1413,8 +1444,7 @@ class Knob extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
   componentDidMount() {
     super.componentDidMount();
     this.input.addEventListener("change", this.handleChange);
-    this.canvas.addEventListener("mousedown", this.handleMouseDown);
-    this.canvas.addEventListener("touchstart", this.handleTouchStart, { passive: false });
+    this.canvas.addEventListener("pointerdown", this.handlePointerDown);
     this.on("style", () => {
       this.schedule(this.setStyle);
       this.schedule(this.paint);
@@ -1590,8 +1620,7 @@ class Led extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
   }
   componentDidMount() {
     super.componentDidMount();
-    this.canvas.addEventListener("mousedown", this.handleMouseDown);
-    this.canvas.addEventListener("touchstart", this.handleTouchStart, { passive: false });
+    this.canvas.addEventListener("pointerdown", this.handlePointerDown);
     this.on("style", () => this.schedule(this.setStyle));
     this.on("label", () => this.schedule(this.paintLabel));
     this.on("value", () => this.schedule(this.paint));
@@ -2067,9 +2096,9 @@ class Soundfile extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       this.btn.style.fontFamily = `${fontname}, sans-serif`;
       this.btn.style.fontStyle = fontface;
     };
-    this.handlePointerDown = () => {
+    this.handleMouseOrTouchDown = () => {
     };
-    this.handlePointerUp = () => {
+    this.handleMouseOrTouchUp = () => {
     };
   }
   static get defaultProps() {
@@ -2103,8 +2132,7 @@ class Soundfile extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
   }
   componentDidMount() {
     super.componentDidMount();
-    this.btn.addEventListener("mousedown", this.handleMouseDown);
-    this.btn.addEventListener("touchstart", this.handleTouchStart);
+    this.btn.addEventListener("pointerdown", this.handlePointerDown);
     this.on("style", () => this.schedule(this.setStyle));
     const labelChange = () => this.span.innerText = this.state.label;
     this.on("label", () => this.schedule(labelChange));
@@ -2273,8 +2301,7 @@ class VBargraph extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
   }
   componentDidMount() {
     super.componentDidMount();
-    this.canvas.addEventListener("mousedown", this.handleMouseDown);
-    this.canvas.addEventListener("touchstart", this.handleTouchStart, { passive: false });
+    this.canvas.addEventListener("pointerdown", this.handlePointerDown);
     this.on("style", () => {
       this.schedule(this.setStyle);
       this.schedule(this.paint);
@@ -2388,13 +2415,13 @@ class VSlider extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       ctx.fillStyle = slidercolor;
       (0,_utils__WEBPACK_IMPORTED_MODULE_1__.fillRoundedRect)(ctx, left - drawWidth, top + drawHeight * (1 - distance) - drawWidth, drawWidth * 3, drawWidth * 2, borderRadius);
     };
-    this.handlePointerDown = (e) => {
+    this.handleMouseOrTouchDown = (e) => {
       const { value } = this.state;
       if (e.x < this.interactionRect[0] || e.x > this.interactionRect[0] + this.interactionRect[2] || e.y < this.interactionRect[1] || e.y > this.interactionRect[1] + this.interactionRect[3]) return;
       const newValue = this.getValueFromPos(e);
       if (newValue !== value) this.setValue(this.getValueFromPos(e));
     };
-    this.handlePointerDrag = (e) => {
+    this.handleMouseOrTouchMove = (e) => {
       const newValue = this.getValueFromPos(e);
       if (newValue !== this.state.value) this.setValue(newValue);
     };
@@ -2442,8 +2469,7 @@ class VSlider extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
   componentDidMount() {
     super.componentDidMount();
     this.input.addEventListener("change", this.handleChange);
-    this.canvas.addEventListener("mousedown", this.handleMouseDown);
-    this.canvas.addEventListener("touchstart", this.handleTouchStart, { passive: false });
+    this.canvas.addEventListener("pointerdown", this.handlePointerDown);
     this.on("style", () => {
       this.schedule(this.setStyle);
       this.schedule(this.paint);