clickable ui

This commit is contained in:
siraxe
2025-10-10 20:21:40 +01:00
parent 2cd82dd21e
commit 220c5f30c7
2 changed files with 28 additions and 2 deletions
+27 -1
View File
@@ -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 = '▶';
+1 -1
View File
@@ -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);
});