From 220c5f30c7b126ff7e7ef51f7793d3d8043bfa18 Mon Sep 17 00:00:00 2001
From: siraxe <demi.eugene@gmail.com>
Date: Fri, 10 Oct 2025 20:21:40 +0100
Subject: [PATCH] clickable ui

---
 web/power_spline_editor/context_menu.js | 28 ++++++++++++++++++++++++-
 web/power_spline_editor/spline_utils.js |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/web/power_spline_editor/context_menu.js b/web/power_spline_editor/context_menu.js
index 882f41d..2937e29 100644
--- a/web/power_spline_editor/context_menu.js
+++ b/web/power_spline_editor/context_menu.js
@@ -39,7 +39,7 @@ function createNumberInput(widget, configObj, field, min, max, step, precision =
         app.graph.setDirtyCanvas(true, true);
     };
 
-    // Number display (draggable only)
+    // Number display (draggable and clickable)
     const numberDisplay = document.createElement('div');
     numberDisplay.textContent = configObj[field].toFixed(precision);
     numberDisplay.style.cssText = `
@@ -53,6 +53,7 @@ function createNumberInput(widget, configObj, field, min, max, step, precision =
     `;
 
     let isDragging = false;
+    let hasDragged = false;
     let startX = 0;
     let startValue = 0;
 
@@ -61,6 +62,10 @@ function createNumberInput(widget, configObj, field, min, max, step, precision =
             e.stopPropagation();
             e.preventDefault();
             const deltaX = e.clientX - startX;
+            // Only mark as dragged if movement exceeds threshold
+            if (Math.abs(deltaX) > 3) {
+                hasDragged = true;
+            }
             const delta = Math.round(deltaX / 5) * step;
             const newValue = Math.max(min, Math.min(max, startValue + delta));
             configObj[field] = newValue;
@@ -88,6 +93,7 @@ function createNumberInput(widget, configObj, field, min, max, step, precision =
         e.preventDefault();
         if (e.button === 0) {
             isDragging = true;
+            hasDragged = false;
             startX = e.clientX;
             startValue = configObj[field];
             numberDisplay.style.cursor = 'ew-resize';
@@ -96,6 +102,26 @@ function createNumberInput(widget, configObj, field, min, max, step, precision =
         }
     };
 
+    numberDisplay.onclick = (e) => {
+        e.stopPropagation();
+        // Only show prompt if user didn't drag
+        if (!hasDragged) {
+            const fieldLabel = field === 'd_scale' ? 'D Scale' : field.charAt(0).toUpperCase() + field.slice(1);
+            app.canvas.prompt(fieldLabel, configObj[field], (v) => {
+                const newValue = Math.max(min, Math.min(max, Number(v)));
+                configObj[field] = newValue;
+                // Sync back to both driven and _drivenConfig
+                if (widget.value.driven && typeof widget.value.driven === 'object') {
+                    widget.value.driven[field] = newValue;
+                }
+                widget.value._drivenConfig[field] = newValue;
+                numberDisplay.textContent = newValue.toFixed(precision);
+                app.graph.setDirtyCanvas(true, true);
+            });
+        }
+        hasDragged = false;
+    };
+
     // Right arrow
     const rightArrow = document.createElement('div');
     rightArrow.textContent = '▶';
diff --git a/web/power_spline_editor/spline_utils.js b/web/power_spline_editor/spline_utils.js
index 38f6d40..ba9da3b 100644
--- a/web/power_spline_editor/spline_utils.js
+++ b/web/power_spline_editor/spline_utils.js
@@ -1624,7 +1624,7 @@ export class PowerSplineWidget extends RgthreeBaseWidget {
         if (this.haveMouseMovedValue) return;
         const canvas = app.canvas;
         // Offset creates pause frames: +5 waits 5 frames then plays, -5 plays then holds 5 frames
-        canvas.prompt("Offset (timing shift: +N waits N frames, -N holds N frames)", this.value.offset || 0, (v) => {
+        canvas.prompt("Offset", this.value.offset || 0, (v) => {
             this.value.offset = Math.max(-100, Math.min(100, Number(v)));
             this.parent.setDirtyCanvas(true, true);
         });