80 lines
3.1 KiB
JavaScript
80 lines
3.1 KiB
JavaScript
// Header widget that displays column labels for spline layers
|
|
import { app } from '../../../scripts/app.js';
|
|
import { isLowQuality, drawTogglePart, drawNumberWidgetPart, RgthreeBaseWidget } from './drawing_utils.js';
|
|
|
|
export class PowerSplineHeaderWidget extends RgthreeBaseWidget {
|
|
constructor(name = "PowerSplineHeaderWidget") {
|
|
super(name);
|
|
this.value = { type: "PowerSplineHeaderWidget" };
|
|
this.type = "custom";
|
|
this.options = { serialize: false };
|
|
this.hitAreas = {
|
|
toggle: { bounds: [0, 0], onDown: this.onToggleDown },
|
|
};
|
|
}
|
|
|
|
draw(ctx, node, w, posY, height) {
|
|
const margin = 10;
|
|
const innerMargin = margin * 0.33;
|
|
const lowQuality = isLowQuality();
|
|
const allSplineState = node.allSplinesState ? node.allSplinesState() : false;
|
|
posY += 2;
|
|
const midY = posY + height * 0.5;
|
|
let posX = 10;
|
|
ctx.save();
|
|
this.hitAreas.toggle.bounds = drawTogglePart(ctx, { posX, posY, height, value: allSplineState });
|
|
if (!lowQuality) {
|
|
posX += this.hitAreas.toggle.bounds[1] + innerMargin;
|
|
ctx.globalAlpha = app.canvas.editor_alpha * 0.55;
|
|
ctx.fillStyle = LiteGraph.WIDGET_TEXT_COLOR;
|
|
ctx.textAlign = "left";
|
|
ctx.textBaseline = "middle";
|
|
ctx.fillText("Toggle All", posX, midY);
|
|
|
|
let rposX = node.size[0] - margin - innerMargin - innerMargin;
|
|
ctx.textAlign = "center";
|
|
|
|
// Match the widget layout exactly:
|
|
// 1. Repeat control (far right) - drawNumberWidgetPart.WIDTH_TOTAL = 56
|
|
const repeatWidth = drawNumberWidgetPart.WIDTH_TOTAL;
|
|
ctx.fillText("Repeat", rposX - repeatWidth / 2, midY);
|
|
rposX -= repeatWidth + 10;
|
|
|
|
// 2. Interpolation selector - just text, no arrows (width = 70)
|
|
const interpTextWidth = 70;
|
|
ctx.fillText("Type", rposX - interpTextWidth / 2, midY);
|
|
rposX -= interpTextWidth + 10;
|
|
|
|
const numberWidth = drawNumberWidgetPart.WIDTH_TOTAL;
|
|
ctx.fillText("Z-Pause", rposX - numberWidth / 2, midY);
|
|
rposX -= numberWidth + 10;
|
|
ctx.fillText("A-Pause", rposX - numberWidth / 2, midY);
|
|
rposX -= numberWidth + 10;
|
|
ctx.fillText("Offset", rposX - numberWidth / 2, midY);
|
|
rposX -= numberWidth + 10;
|
|
|
|
// Easing column - same width as interpolation
|
|
const easingTextWidth = 70;
|
|
ctx.fillText("Easing", rposX - easingTextWidth / 2, midY);
|
|
rposX -= easingTextWidth + 10;
|
|
|
|
// Scale column
|
|
ctx.fillText("Scale", rposX - numberWidth / 2, midY);
|
|
rposX -= numberWidth + 10;
|
|
|
|
// Driven column (moved after Scale)
|
|
ctx.fillText("Driven", rposX - numberWidth / 2, midY);
|
|
rposX -= numberWidth + 10;
|
|
}
|
|
ctx.restore();
|
|
}
|
|
|
|
onToggleDown(event, pos, node) {
|
|
if (node.toggleAllSplines) {
|
|
node.toggleAllSplines();
|
|
}
|
|
this.cancelMouseDown();
|
|
return true;
|
|
}
|
|
}
|