clickable ui
This commit is contained in:
@@ -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 = '▶';
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user