@rogieking/figui3 1.2.9 → 1.3.0

package/example.html

@@ -23,7 +23,8 @@
         <h2>UI3 Components</h2>
     </fig-header>
     <fig-content>
-        <fig-input-joystick text="true"></fig-input-joystick>
+        <fig-input-joystick text="true"
+                            onInput="console.log(event.target.value)"></fig-input-joystick>
         <fig-header>
             <h2>Details</h2>
         </fig-header>

package/fig.js

@@ -1792,13 +1792,19 @@ class FigInputJoystick extends HTMLElement {
   }
 
   handleXInput(e) {
+    e.stopPropagation();
     this.position.x = e.target.value;
     this.#syncHandlePosition();
+    this.#emitInputEvent();
+    this.#emitChangeEvent();
   }
 
   handleYInput(e) {
+    e.stopPropagation();
     this.position.y = e.target.value;
     this.#syncHandlePosition();
+    this.#emitInputEvent();
+    this.#emitChangeEvent();
   }
 
   snapToGuide(value) {
@@ -1817,7 +1823,7 @@ class FigInputJoystick extends HTMLElement {
     return { x, y };
   }
 
-  updatePosition(e) {
+  #updatePosition(e) {
     const rect = this.plane.getBoundingClientRect();
     let x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
     let y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
@@ -1839,7 +1845,24 @@ class FigInputJoystick extends HTMLElement {
       this.yInput.setAttribute("value", snapped.y.toFixed(3));
     }
 
-    this.dispatchEvent(new CustomEvent("input", { detail: this.position }));
+    this.#emitInputEvent();
+  }
+  #emitInputEvent() {
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+  }
+
+  #emitChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
   }
 
   #syncHandlePosition() {
@@ -1849,12 +1872,12 @@ class FigInputJoystick extends HTMLElement {
 
   handleMouseDown(e) {
     this.isDragging = true;
-    this.updatePosition(e);
+    this.#updatePosition(e);
 
     this.plane.style.cursor = "grabbing";
 
     const handleMouseMove = (e) => {
-      if (this.isDragging) this.updatePosition(e);
+      if (this.isDragging) this.#updatePosition(e);
     };
 
     const handleMouseUp = () => {
@@ -1862,7 +1885,7 @@ class FigInputJoystick extends HTMLElement {
       this.plane.style.cursor = "";
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
-      this.dispatchEvent(new CustomEvent("change", { detail: this.position }));
+      this.#emitChangeEvent();
     };
 
     window.addEventListener("mousemove", handleMouseMove);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {