484 lines
22 KiB
JavaScript
484 lines
22 KiB
JavaScript
import { app } from "../../scripts/app.js";
|
||
import { api } from "../../scripts/api.js";
|
||
|
||
app.registerExtension({
|
||
name: "SigmasEditor.Interactive",
|
||
async beforeRegisterNodeDef(nodeType, nodeData) {
|
||
if (nodeData.name === "SigmasEditor") {
|
||
|
||
// 扩展节点的构造函数
|
||
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
||
nodeType.prototype.onNodeCreated = function() {
|
||
const result = onNodeCreated?.apply(this, arguments);
|
||
|
||
// 初始化节点数据
|
||
this.sigmas_data = null;
|
||
this.adjustments = []; // 存储实际调整后的sigma值
|
||
this.dragging_point = -1;
|
||
this.isAdjusting = false;
|
||
|
||
// 允许调整节点大小
|
||
this.resizable = true;
|
||
|
||
// 设置初始大小（宽度自动，高度400）
|
||
this.size = [this.size[0] || 600, 400];
|
||
|
||
// 设置WebSocket监听
|
||
this.setupWebSocket();
|
||
|
||
return result;
|
||
};
|
||
|
||
// 添加WebSocket设置方法
|
||
nodeType.prototype.setupWebSocket = function() {
|
||
const messageHandler = (event) => {
|
||
const data = event.detail;
|
||
|
||
if (!data || !data.node_id || !data.sigmas_data) {
|
||
return;
|
||
}
|
||
|
||
// 通过node_id查找对应的节点
|
||
const targetNode = app.graph.getNodeById(parseInt(data.node_id));
|
||
|
||
// 检查是否是当前节点
|
||
if (targetNode && targetNode === this) {
|
||
this.sigmas_data = data.sigmas_data.original;
|
||
// 从后端接收调整后的值，如果为空则使用原始值
|
||
this.adjustments = data.sigmas_data.adjusted || data.sigmas_data.original.slice();
|
||
|
||
// 第一次执行时，触发 sigmas_adjustments 组件更新
|
||
this.updateAdjustmentsWidget();
|
||
|
||
// 立即更新画布（强制重新计算尺寸）
|
||
if (this.canvas) {
|
||
this.updateCanvas(true);
|
||
} else {
|
||
// 如果画布还没创建，等待一下再尝试
|
||
setTimeout(() => {
|
||
if (this.canvas) {
|
||
this.updateCanvas(true);
|
||
}
|
||
}, 100);
|
||
}
|
||
this.setDirtyCanvas(true, true);
|
||
}
|
||
};
|
||
|
||
api.addEventListener("sigmas_editor_update", messageHandler);
|
||
|
||
// 存储handler引用以便后续清理
|
||
this._sigmasEditorMessageHandler = messageHandler;
|
||
};
|
||
|
||
// 添加节点时的处理
|
||
const onAdded = nodeType.prototype.onAdded;
|
||
nodeType.prototype.onAdded = function() {
|
||
const result = onAdded?.apply(this, arguments);
|
||
|
||
if (!this.canvasContainer && this.id !== undefined && this.id !== -1) {
|
||
// 创建画布容器（高度由节点自适应）
|
||
const container = document.createElement("div");
|
||
container.style.position = "relative";
|
||
container.style.width = "100%";
|
||
container.style.height = "100%";
|
||
container.style.minHeight = "300px";
|
||
container.style.backgroundColor = "#1e1e1e";
|
||
container.style.borderRadius = "8px";
|
||
container.style.overflow = "hidden";
|
||
|
||
// 创建画布
|
||
const canvas = document.createElement("canvas");
|
||
canvas.style.width = "100%";
|
||
canvas.style.height = "100%";
|
||
canvas.style.cursor = "crosshair";
|
||
|
||
container.appendChild(canvas);
|
||
this.canvas = canvas;
|
||
this.canvasContainer = container;
|
||
|
||
// 添加鼠标事件监听
|
||
this.addCanvasEventListeners();
|
||
|
||
// 添加DOM组件
|
||
this.widgets ||= [];
|
||
this.widgets_up = true;
|
||
|
||
requestAnimationFrame(() => {
|
||
if (this.widgets) {
|
||
this.canvasWidget = this.addDOMWidget("sigmas_canvas", "canvas", container);
|
||
|
||
// 初始化时强制计算画布尺寸
|
||
this.updateCanvas(true);
|
||
this.setDirtyCanvas(true, true);
|
||
}
|
||
});
|
||
}
|
||
|
||
return result;
|
||
};
|
||
|
||
// 添加画布事件监听器
|
||
nodeType.prototype.addCanvasEventListeners = function() {
|
||
const canvas = this.canvas;
|
||
|
||
// 获取缩放后的鼠标坐标
|
||
const getScaledMousePos = (e) => {
|
||
const rect = canvas.getBoundingClientRect();
|
||
// 计算缩放比例
|
||
const scaleX = canvas.width / rect.width;
|
||
const scaleY = canvas.height / rect.height;
|
||
|
||
// 鼠标相对于canvas显示区域的位置
|
||
const displayX = e.clientX - rect.left;
|
||
const displayY = e.clientY - rect.top;
|
||
|
||
// 转换为实际canvas坐标
|
||
const canvasX = displayX * scaleX;
|
||
const canvasY = displayY * scaleY;
|
||
|
||
return { x: canvasX, y: canvasY };
|
||
};
|
||
|
||
// 鼠标按下
|
||
canvas.addEventListener("mousedown", (e) => {
|
||
const pos = getScaledMousePos(e);
|
||
const pointIdx = this.findNearestPoint(pos.x, pos.y);
|
||
|
||
if (pointIdx !== -1) {
|
||
this.dragging_point = pointIdx;
|
||
this.isAdjusting = true;
|
||
this.updateCanvas(); // 只重绘，不resize
|
||
}
|
||
});
|
||
|
||
// 鼠标移动
|
||
canvas.addEventListener("mousemove", (e) => {
|
||
if (this.dragging_point !== -1 && this.isAdjusting) {
|
||
const pos = getScaledMousePos(e);
|
||
this.updatePointAdjustment(this.dragging_point, pos.y);
|
||
this.updateAdjustmentsWidget(); // 实时同步更新组件值
|
||
this.updateCanvas(); // 只重绘，不resize
|
||
}
|
||
});
|
||
|
||
// 鼠标释放
|
||
canvas.addEventListener("mouseup", (e) => {
|
||
if (this.dragging_point !== -1) {
|
||
this.dragging_point = -1;
|
||
this.isAdjusting = false;
|
||
|
||
// 更新adjustments widget
|
||
this.updateAdjustmentsWidget();
|
||
this.updateCanvas(); // 只重绘，不resize
|
||
}
|
||
});
|
||
|
||
// 鼠标离开
|
||
canvas.addEventListener("mouseleave", (e) => {
|
||
if (this.dragging_point !== -1) {
|
||
this.dragging_point = -1;
|
||
this.isAdjusting = false;
|
||
this.updateAdjustmentsWidget();
|
||
this.updateCanvas(); // 只重绘，不resize
|
||
}
|
||
});
|
||
};
|
||
|
||
// 查找最近的点
|
||
nodeType.prototype.findNearestPoint = function(mouseX, mouseY) {
|
||
if (!this.sigmas_data || this.sigmas_data.length === 0) return -1;
|
||
|
||
const paddingLeft = 60;
|
||
const paddingTop = 50;
|
||
const paddingRight = 20;
|
||
const paddingBottom = 50;
|
||
|
||
const canvas = this.canvas;
|
||
const chartWidth = canvas.width - paddingLeft - paddingRight;
|
||
const chartHeight = canvas.height - paddingTop - paddingBottom;
|
||
const chartX = paddingLeft;
|
||
const chartY = paddingTop;
|
||
|
||
const steps = this.sigmas_data.length;
|
||
|
||
let closestDist = Infinity;
|
||
let closestIdx = -1;
|
||
|
||
for (let i = 0; i < steps; i++) {
|
||
const x = chartX + (chartWidth / (steps - 1)) * i;
|
||
// adjustments存储的是实际调整后的sigma值
|
||
const adjustedValue = this.adjustments[i] !== undefined ? this.adjustments[i] : this.sigmas_data[i];
|
||
const y = chartY + chartHeight - (adjustedValue * chartHeight);
|
||
|
||
const dist = Math.sqrt(Math.pow(mouseX - x, 2) + Math.pow(mouseY - y, 2));
|
||
if (dist < 15 && dist < closestDist) {
|
||
closestDist = dist;
|
||
closestIdx = i;
|
||
}
|
||
}
|
||
|
||
return closestIdx;
|
||
};
|
||
|
||
// 更新点的调整值
|
||
nodeType.prototype.updatePointAdjustment = function(pointIdx, mouseY) {
|
||
if (!this.sigmas_data || pointIdx < 0 || pointIdx >= this.sigmas_data.length) return;
|
||
|
||
const paddingTop = 50;
|
||
const paddingBottom = 50;
|
||
|
||
const canvas = this.canvas;
|
||
const chartHeight = canvas.height - paddingTop - paddingBottom;
|
||
const chartY = paddingTop;
|
||
|
||
// 计算新的sigma值（范围0-1）
|
||
const clampedY = Math.max(chartY, Math.min(chartY + chartHeight, mouseY));
|
||
const newSigmaValue = (chartY + chartHeight - clampedY) / chartHeight;
|
||
|
||
// 直接存储调整后的sigma值，限制在0-1范围内
|
||
this.adjustments[pointIdx] = Math.max(0.0, Math.min(1.0, newSigmaValue));
|
||
};
|
||
|
||
// 向上取整到指定小数位
|
||
nodeType.prototype.ceilToFixed = function(value, decimals) {
|
||
const multiplier = Math.pow(10, decimals);
|
||
return Math.ceil(value * multiplier) / multiplier;
|
||
};
|
||
|
||
// 更新adjustments widget（向上取整到4位小数）
|
||
nodeType.prototype.updateAdjustmentsWidget = function() {
|
||
const widget = this.widgets?.find(w => w.name === "sigmas_adjustments");
|
||
if (widget) {
|
||
// 对所有调整后的值进行向上取整到4位小数，并格式化为字符串保留末尾的0
|
||
const formattedValues = this.adjustments.map(v => {
|
||
const rounded = this.ceilToFixed(v, 4);
|
||
return rounded.toFixed(4);
|
||
});
|
||
// 手动构建 JSON 数组字符串，保留4位小数格式
|
||
widget.value = '[' + formattedValues.join(', ') + ']';
|
||
}
|
||
};
|
||
|
||
// 更新画布
|
||
nodeType.prototype.updateCanvas = function(forceResize = false) {
|
||
if (!this.canvas) return;
|
||
|
||
requestAnimationFrame(() => {
|
||
const canvas = this.canvas;
|
||
const ctx = canvas.getContext("2d");
|
||
|
||
// 只在必要时重新设置画布尺寸
|
||
if (forceResize || !this._canvasInitialized) {
|
||
const rect = canvas.getBoundingClientRect();
|
||
|
||
// 确保画布有合理的尺寸
|
||
const width = rect.width > 0 ? rect.width : 600;
|
||
const height = rect.height > 0 ? rect.height : 300;
|
||
|
||
// 只有尺寸真正改变时才重新设置
|
||
if (canvas.width !== width || canvas.height !== height) {
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
}
|
||
|
||
this._canvasInitialized = true;
|
||
}
|
||
|
||
// 增加padding以容纳坐标轴标签
|
||
const paddingLeft = 60;
|
||
const paddingRight = 20;
|
||
const paddingTop = 50;
|
||
const paddingBottom = 50;
|
||
|
||
const chartWidth = canvas.width - paddingLeft - paddingRight;
|
||
const chartHeight = canvas.height - paddingTop - paddingBottom;
|
||
const chartX = paddingLeft;
|
||
const chartY = paddingTop;
|
||
|
||
// 清空画布
|
||
ctx.fillStyle = "#1e1e1e";
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
// 如果没有数据，显示提示
|
||
if (!this.sigmas_data || this.sigmas_data.length === 0) {
|
||
ctx.fillStyle = "#999";
|
||
ctx.font = "14px Arial";
|
||
ctx.textAlign = "center";
|
||
ctx.fillText("Connect Sigmas Input & Execute Workflow", canvas.width / 2, canvas.height / 2);
|
||
return;
|
||
}
|
||
|
||
// 绘制图表区域
|
||
ctx.fillStyle = "#2a2a2a";
|
||
ctx.fillRect(chartX, chartY, chartWidth, chartHeight);
|
||
|
||
// 绘制网格
|
||
ctx.strokeStyle = "#444";
|
||
ctx.lineWidth = 1;
|
||
for (let i = 0; i <= 10; i++) {
|
||
const y = chartY + (chartHeight / 10) * i;
|
||
ctx.beginPath();
|
||
ctx.moveTo(chartX, y);
|
||
ctx.lineTo(chartX + chartWidth, y);
|
||
ctx.stroke();
|
||
}
|
||
|
||
const steps = this.sigmas_data.length;
|
||
|
||
// 确保adjustments数组长度正确，初始化为原始sigma值
|
||
if (this.adjustments.length !== steps) {
|
||
this.adjustments = this.sigmas_data.slice();
|
||
}
|
||
|
||
// 绘制Y轴刻度和标签（Sigma值 0-1，刻度0.1）
|
||
ctx.fillStyle = "#999";
|
||
ctx.font = "10px Arial";
|
||
ctx.textAlign = "right";
|
||
for (let i = 0; i <= 10; i++) {
|
||
const value = 1.0 - (i / 10);
|
||
const y = chartY + (chartHeight / 10) * i;
|
||
ctx.fillText(value.toFixed(1), chartX - 5, y + 3);
|
||
}
|
||
|
||
// Y轴标签
|
||
ctx.save();
|
||
ctx.translate(15, chartY + chartHeight / 2);
|
||
ctx.rotate(-Math.PI / 2);
|
||
ctx.textAlign = "center";
|
||
ctx.font = "12px Arial";
|
||
ctx.fillStyle = "#ccc";
|
||
ctx.fillText("Sigma Value", 0, 0);
|
||
ctx.restore();
|
||
|
||
// 绘制X轴刻度和标签
|
||
ctx.fillStyle = "#999";
|
||
ctx.font = "10px Arial";
|
||
ctx.textAlign = "center";
|
||
|
||
// 根据步数决定显示哪些刻度
|
||
let stepInterval = 1;
|
||
if (steps > 30) stepInterval = 2;
|
||
if (steps > 50) stepInterval = 5;
|
||
if (steps > 100) stepInterval = 10;
|
||
|
||
for (let i = 0; i < steps; i += stepInterval) {
|
||
const x = chartX + (chartWidth / (steps - 1)) * i;
|
||
ctx.fillText(i.toString(), x, chartY + chartHeight + 15);
|
||
}
|
||
// 确保显示最后一步
|
||
if ((steps - 1) % stepInterval !== 0) {
|
||
const x = chartX + chartWidth;
|
||
ctx.fillText((steps - 1).toString(), x, chartY + chartHeight + 15);
|
||
}
|
||
|
||
// X轴标签
|
||
ctx.font = "12px Arial";
|
||
ctx.fillStyle = "#ccc";
|
||
ctx.fillText("Steps", chartX + chartWidth / 2, chartY + chartHeight + 30);
|
||
|
||
// 绘制曲线
|
||
ctx.strokeStyle = "#4a9eff";
|
||
ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
|
||
for (let i = 0; i < steps; i++) {
|
||
const x = chartX + (chartWidth / (steps - 1)) * i;
|
||
// adjustments存储的是实际调整后的sigma值
|
||
const adjustedValue = this.adjustments[i] !== undefined ? this.adjustments[i] : this.sigmas_data[i];
|
||
// 限制在0-1范围内
|
||
const clampedValue = Math.max(0, Math.min(1, adjustedValue));
|
||
const y = chartY + chartHeight - (clampedValue * chartHeight);
|
||
|
||
if (i === 0) {
|
||
ctx.moveTo(x, y);
|
||
} else {
|
||
ctx.lineTo(x, y);
|
||
}
|
||
}
|
||
ctx.stroke();
|
||
|
||
// 绘制控制点
|
||
for (let i = 0; i < steps; i++) {
|
||
const x = chartX + (chartWidth / (steps - 1)) * i;
|
||
const adjustedValue = this.adjustments[i] !== undefined ? this.adjustments[i] : this.sigmas_data[i];
|
||
const clampedValue = Math.max(0, Math.min(1, adjustedValue));
|
||
const y = chartY + chartHeight - (clampedValue * chartHeight);
|
||
|
||
ctx.fillStyle = this.dragging_point === i ? "#ff6b6b" : "#4a9eff";
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 5, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
}
|
||
|
||
// 绘制标题
|
||
ctx.fillStyle = "#ccc";
|
||
ctx.font = "14px Arial";
|
||
ctx.textAlign = "center";
|
||
ctx.fillText("Sigmas Schedule Editor", canvas.width / 2, 20);
|
||
|
||
// 显示当前拖拽点的信息
|
||
if (this.dragging_point !== -1) {
|
||
const orig = this.sigmas_data[this.dragging_point];
|
||
const adjusted = this.adjustments[this.dragging_point];
|
||
const multiplier = orig > 0 ? (adjusted / orig) : 1.0;
|
||
|
||
// 向上取整到4位小数显示
|
||
const origCeil = this.ceilToFixed(orig, 4);
|
||
const adjustedCeil = this.ceilToFixed(adjusted, 4);
|
||
|
||
ctx.fillStyle = "#ff6b6b";
|
||
ctx.textAlign = "center";
|
||
ctx.font = "11px Arial";
|
||
ctx.fillText(
|
||
`Step ${this.dragging_point}: Original=${origCeil.toFixed(4)}, Adjusted=${adjustedCeil.toFixed(4)}, Multiplier=${multiplier.toFixed(2)}x`,
|
||
canvas.width / 2,
|
||
35
|
||
);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 监听节点尺寸变化
|
||
const onResize = nodeType.prototype.onResize;
|
||
nodeType.prototype.onResize = function(size) {
|
||
const result = onResize?.apply(this, arguments);
|
||
|
||
// 节点尺寸改变时，强制重新计算画布尺寸
|
||
if (this.canvas) {
|
||
this._canvasInitialized = false; // 重置标志
|
||
this.updateCanvas(true);
|
||
}
|
||
|
||
return result;
|
||
};
|
||
|
||
// 节点移除时的处理
|
||
const onRemoved = nodeType.prototype.onRemoved;
|
||
nodeType.prototype.onRemoved = function() {
|
||
const result = onRemoved?.apply(this, arguments);
|
||
|
||
// 清理画布
|
||
if (this && this.canvas) {
|
||
const ctx = this.canvas.getContext("2d");
|
||
if (ctx) {
|
||
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||
}
|
||
this.canvas = null;
|
||
}
|
||
if (this) {
|
||
this.canvasContainer = null;
|
||
}
|
||
|
||
// 清理事件监听器
|
||
if (this._sigmasEditorMessageHandler) {
|
||
api.removeEventListener("sigmas_editor_update", this._sigmasEditorMessageHandler);
|
||
this._sigmasEditorMessageHandler = null;
|
||
}
|
||
|
||
return result;
|
||
};
|
||
}
|
||
}
|
||
});
|