98 lines
3.5 KiB
JavaScript
98 lines
3.5 KiB
JavaScript
/**
|
|
* Main redraw orchestration
|
|
*/
|
|
|
|
import { drawCurve } from "./drawCurve.js";
|
|
import { drawBackgroundImage } from "./drawBackground.js";
|
|
import { evaluateFrame } from "../core/frameEvaluator.js";
|
|
|
|
/**
|
|
* Redraw the canvas with all curves and background
|
|
* @param {CanvasRenderingContext2D} ctx - Canvas context
|
|
* @param {HTMLCanvasElement} canvas - Canvas element
|
|
* @param {Object} state - Editor state
|
|
* @param {Object} callbacks - Callback functions
|
|
* @param {Function} callbacks.getActiveShape - Get active shape
|
|
* @param {Function} callbacks.drawBackgroundImage - Draw background image
|
|
* @param {Function} callbacks.updateCurveList - Update curve list
|
|
* @param {Function} callbacks.updateAddPointButton - Update add point button
|
|
* @param {Object} node - ComfyUI node
|
|
* @param {Object} app - ComfyUI app instance
|
|
*/
|
|
export function redraw(ctx, canvas, state, callbacks, node, app) {
|
|
try {
|
|
// Clear canvas
|
|
ctx.fillStyle = "#1a1a1a";
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Draw input image if available
|
|
if (callbacks.drawBackgroundImage) {
|
|
callbacks.drawBackgroundImage(ctx, canvas, state, node, app);
|
|
}
|
|
|
|
// Get curves for current frame
|
|
const shape = callbacks.getActiveShape();
|
|
const curves = evaluateFrame(shape, state.currentFrame, { hold: true });
|
|
|
|
// Draw all curves
|
|
curves.forEach(curve => {
|
|
if (curve && curve.points && curve.points.length >= 2) {
|
|
const isSelected = state.selectedCurves.has(curve.id);
|
|
drawCurve(ctx, curve, state, isSelected);
|
|
}
|
|
});
|
|
|
|
// Draw selection box if active
|
|
if (state.selectionBox !== null) {
|
|
ctx.save();
|
|
|
|
// Calculate normalized box bounds
|
|
const minX = Math.min(state.selectionBox.start.x, state.selectionBox.end.x);
|
|
const maxX = Math.max(state.selectionBox.start.x, state.selectionBox.end.x);
|
|
const minY = Math.min(state.selectionBox.start.y, state.selectionBox.end.y);
|
|
const maxY = Math.max(state.selectionBox.start.y, state.selectionBox.end.y);
|
|
const width = maxX - minX;
|
|
const height = maxY - minY;
|
|
|
|
// Draw filled rectangle with semi-transparent fill
|
|
ctx.fillStyle = "rgba(74, 158, 255, 0.2)";
|
|
ctx.fillRect(minX, minY, width, height);
|
|
|
|
// Draw dashed border
|
|
ctx.strokeStyle = "rgba(74, 158, 255, 0.8)";
|
|
ctx.lineWidth = 1;
|
|
ctx.setLineDash([5, 5]);
|
|
ctx.strokeRect(minX, minY, width, height);
|
|
|
|
// Restore line dash
|
|
ctx.setLineDash([]);
|
|
ctx.restore();
|
|
}
|
|
|
|
// Update Add Point button state
|
|
if (callbacks.updateAddPointButton) {
|
|
callbacks.updateAddPointButton();
|
|
}
|
|
|
|
// Update Toggle Smooth button state
|
|
if (callbacks.updateToggleSmoothButton) {
|
|
callbacks.updateToggleSmoothButton();
|
|
}
|
|
|
|
// Cancel add point mode if no curve is selected
|
|
if (state.selectedCurves.size === 0 && state.addPointMode) {
|
|
state.addPointMode = false;
|
|
if (callbacks.updateAddPointButton) {
|
|
callbacks.updateAddPointButton();
|
|
}
|
|
}
|
|
|
|
// Update curve list
|
|
if (callbacks.updateCurveList) {
|
|
callbacks.updateCurveList();
|
|
}
|
|
} catch (error) {
|
|
console.error("[ComfyUI Roto] Error during redraw:", error);
|
|
}
|
|
}
|