3649 lines
132 KiB
JavaScript
3649 lines
132 KiB
JavaScript
import { app } from "../../scripts/app.js";
|
||
import { api } from "../../scripts/api.js";
|
||
import { fabric } from "./lib/fabric-slim.min.js"; // 使用精简版fabric.js以提高性能
|
||
import { queueManager } from "./queue_shortcut.js";
|
||
|
||
// 定义常量
|
||
const CANVAS_SIZE = {
|
||
WIDTH: 420,
|
||
HEIGHT: 200,
|
||
BOTTOM_MARGIN: 110, // 节点下沿扩展值
|
||
RIGHT_MARGIN: 20, // 节点右沿扩展值
|
||
CONTROL_PANEL_HEIGHT: 30 // 控制面板高度
|
||
};
|
||
|
||
// 模块级变量
|
||
const instances = [];
|
||
let eventHandlersInitialized = false;
|
||
let globalUpdateHandler, globalGetStateHandler;
|
||
|
||
// 模块级函数 - 清理指定节点ID的实例
|
||
function cleanup(nodeId) {
|
||
const index = instances.findIndex(inst => inst.node?.id === nodeId);
|
||
if (index !== -1) {
|
||
const instance = instances[index];
|
||
|
||
// 从数组中移除
|
||
instances.splice(index, 1);
|
||
|
||
// 清理核心资源
|
||
if (instance.canvas) {
|
||
instance.canvas.off();
|
||
instance.canvas.dispose();
|
||
}
|
||
if (instance.canvasContainer?.parentNode) {
|
||
instance.canvasContainer.parentNode.removeChild(instance.canvasContainer);
|
||
}
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
// 模块级函数 - 设置全局事件处理
|
||
function setupGlobalEventHandling() {
|
||
// 如果已经设置了全局处理，则不重复设置
|
||
if (eventHandlersInitialized) return;
|
||
|
||
// 设置全局事件处理函数
|
||
globalUpdateHandler = async (event) => {
|
||
const data = event.detail;
|
||
if (!data || !data.node_id) return;
|
||
|
||
const nodeId = data.node_id;
|
||
const instance = instances.find(inst => inst.node?.id.toString() === nodeId);
|
||
|
||
if (!instance) return;
|
||
|
||
if (data.canvas_data) {
|
||
await instance.updateCanvas(data.canvas_data, data.transform_data);
|
||
} else {
|
||
await instance.sendCanvasState();
|
||
}
|
||
};
|
||
|
||
globalGetStateHandler = async (event) => {
|
||
const data = event.detail;
|
||
if (!data || !data.node_id) return;
|
||
|
||
const nodeId = data.node_id;
|
||
const instance = instances.find(inst => inst.node?.id.toString() === nodeId);
|
||
|
||
if (instance) {
|
||
await instance.sendCanvasState();
|
||
}
|
||
};
|
||
|
||
// 添加全局事件监听器
|
||
api.addEventListener("fast_canvas_update", globalUpdateHandler);
|
||
api.addEventListener("fast_canvas_get_state", globalGetStateHandler);
|
||
|
||
eventHandlersInitialized = true;
|
||
}
|
||
class FastCanvas {
|
||
constructor(node, initialSize = null) {
|
||
this.node = node;
|
||
this.lastCanvasState = null;
|
||
|
||
// 使用传入的初始尺寸或默认尺寸
|
||
this.originalSize = initialSize || {
|
||
width: CANVAS_SIZE.WIDTH,
|
||
height: CANVAS_SIZE.HEIGHT
|
||
};
|
||
|
||
// 添加到实例数组
|
||
instances.push(this);
|
||
|
||
// 确保全局事件处理已设置
|
||
setupGlobalEventHandling();
|
||
|
||
// 其他初始化代码...
|
||
this.currentSize = { ...this.originalSize };
|
||
this.maxDisplaySize = 768;
|
||
// 创建缩放值显示元素
|
||
this.scaleText = document.createElement('div');
|
||
this.scaleText.style.cssText = `
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
background: rgba(0,0,0,0.5);
|
||
color: white;
|
||
padding: 2px 5px;
|
||
border-radius: 3px;
|
||
font-size: 12px;
|
||
pointer-events: none;
|
||
z-index: 1000;
|
||
display: none;
|
||
`;
|
||
this.initCanvas();
|
||
this.setupDragAndDrop();
|
||
this.setupPaste();
|
||
}
|
||
|
||
cleanup() {
|
||
try {
|
||
|
||
if (this.node?.id) {
|
||
cleanup(this.node.id);
|
||
} else {
|
||
const index = instances.indexOf(this);
|
||
if (index !== -1) {
|
||
instances.splice(index, 1);
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('[清理错误]', e);
|
||
}
|
||
}
|
||
|
||
initCanvas() {
|
||
this.canvasContainer = document.createElement('div');
|
||
this.canvasContainer.className = 'fast-canvas-container';
|
||
|
||
// 创建 canvas 元素
|
||
const canvasElement = document.createElement('canvas');
|
||
|
||
// 使用原始尺寸创建画布
|
||
this.canvas = new fabric.Canvas(canvasElement, {
|
||
width: this.originalSize.width,
|
||
height: this.originalSize.height,
|
||
preserveObjectStacking: true,
|
||
selection: true
|
||
});
|
||
// 设置选中框样式
|
||
this.canvas.selectionColor = 'rgba(0, 123, 255, 0.3)'; // 选中区域填充色
|
||
this.canvas.selectionBorderColor = '#007bff'; // 选中框边框颜色
|
||
this.canvas.selectionLineWidth = 2; // 选中框边框宽度
|
||
|
||
// 设置控制点样式
|
||
fabric.Object.prototype.set({
|
||
transparentCorners: false, // 控制点不透明
|
||
cornerColor: '#007bff', // 控制点颜色
|
||
cornerSize: 20, // 控制点大小
|
||
cornerStyle: 'circle', // 控制点形状为圆形
|
||
cornerStrokeColor: '#ffffff', // 控制点边框颜色
|
||
cornerStrokeWidth: 2, // 控制点边框宽度
|
||
padding: 5, // 选中框内边距
|
||
borderColor: '#007bff', // 边框颜色
|
||
borderScaleFactor: 2, // 边框宽度
|
||
hasRotatingPoint: true, // 显示旋转控制点
|
||
rotatingPointOffset: 30 // 旋转控制点偏移距离
|
||
});
|
||
|
||
// 创建默认背景图像
|
||
const defaultBackground = new fabric.Rect({
|
||
width: this.originalSize.width,
|
||
height: this.originalSize.height,
|
||
left: 0,
|
||
top: 0,
|
||
fill: '#000000',
|
||
selectable: false,
|
||
evented: false,
|
||
excludeFromExport: false
|
||
});
|
||
|
||
// 设置为背景图像
|
||
this.canvas.setBackgroundImage(defaultBackground, () => {
|
||
this.canvas.renderAll();
|
||
});
|
||
|
||
this.canvasContainer.style.cssText = `
|
||
position: relative;
|
||
width: ${this.originalSize.width}px;
|
||
height: ${this.originalSize.height + CANVAS_SIZE.CONTROL_PANEL_HEIGHT}px;
|
||
background: transparent; // 改为透明背景
|
||
`;
|
||
|
||
// 创建画布包装容器
|
||
const canvasWrapper = document.createElement('div');
|
||
canvasWrapper.style.cssText = `
|
||
width: 100%;
|
||
height: ${this.originalSize.height}px;
|
||
`;
|
||
canvasWrapper.appendChild(this.canvas.wrapperEl);
|
||
this.canvasContainer.appendChild(canvasWrapper);
|
||
this.canvasContainer.appendChild(this.scaleText);
|
||
|
||
// 创建控制面板
|
||
this.controlPanel = new ControlPanel(this.canvas, this.node);
|
||
this.canvasContainer.appendChild(this.controlPanel.getContainer());
|
||
|
||
// 初始化状态
|
||
this.layers = new Map();
|
||
this.background = defaultBackground; // 保存背景引用
|
||
this.isDragging = false;
|
||
this.isLocked = false;
|
||
this.initContextMenu();
|
||
// 设置事件监听
|
||
this.setupEventListeners();
|
||
// 设置节点的初始尺寸
|
||
this.node.size = [
|
||
this.originalSize.width + CANVAS_SIZE.RIGHT_MARGIN,
|
||
this.originalSize.height + CANVAS_SIZE.CONTROL_PANEL_HEIGHT + CANVAS_SIZE.BOTTOM_MARGIN
|
||
];
|
||
}
|
||
|
||
initContextMenu() {
|
||
// 创建菜单元素
|
||
const menu = document.createElement('div');
|
||
menu.className = 'fast-canvas-context-menu';
|
||
menu.style.cssText = `
|
||
position: fixed;
|
||
display: none;
|
||
background: #2a2a2a;
|
||
border: 1px solid #3f3f3f;
|
||
border-radius: 6px;
|
||
padding: 3px;
|
||
z-index: 1000;
|
||
color: white;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||
transition: background-color 0.2s ease;
|
||
min-width: 120px;
|
||
`;
|
||
|
||
const menuItems = [
|
||
{ text: '设为背景', action: () => this.setLayerAsBackground() },
|
||
{
|
||
text: '变换',
|
||
submenu: [
|
||
{ text: '水平翻转', action: () => this.flipObject('horizontal') },
|
||
{ text: '垂直翻转', action: () => this.flipObject('vertical') },
|
||
{ text: '居中', action: () => this.centerObject('both') },
|
||
{ text: '水平居中', action: () => this.centerObject('horizontal') },
|
||
{ text: '垂直居中', action: () => this.centerObject('vertical') }
|
||
]
|
||
},
|
||
{
|
||
text: '调整图层',
|
||
submenu: [
|
||
{ text: '上移一层', action: () => {
|
||
const obj = this.canvas.getActiveObject();
|
||
if (obj) {
|
||
obj.bringForward();
|
||
this.canvas.renderAll();
|
||
|
||
}
|
||
}},
|
||
{ text: '下移一层', action: () => {
|
||
const obj = this.canvas.getActiveObject();
|
||
if (obj) {
|
||
obj.sendBackwards();
|
||
this.canvas.renderAll();
|
||
|
||
}
|
||
}},
|
||
{ text: '置于顶层', action: () => {
|
||
const obj = this.canvas.getActiveObject();
|
||
if (obj) {
|
||
obj.bringToFront();
|
||
this.canvas.renderAll();
|
||
|
||
}
|
||
}},
|
||
{ text: '置于底层', action: () => {
|
||
const obj = this.canvas.getActiveObject();
|
||
if (obj) {
|
||
obj.sendToBack();
|
||
this.canvas.renderAll();
|
||
|
||
}
|
||
}}
|
||
]
|
||
},
|
||
{
|
||
text: '混合模式',
|
||
submenu: [
|
||
{ text: '正常 (source-over)', action: () => this.setObjectCompositeMode('source-over') },
|
||
{ text: '正片叠底 (multiply)', action: () => this.setObjectCompositeMode('multiply') },
|
||
{ text: '滤色 (screen)', action: () => this.setObjectCompositeMode('screen') },
|
||
{ text: '叠加 (overlay)', action: () => this.setObjectCompositeMode('overlay') },
|
||
{ text: '变亮 (lighten)', action: () => this.setObjectCompositeMode('lighten') },
|
||
{ text: '变暗 (darken)', action: () => this.setObjectCompositeMode('darken') },
|
||
{ text: '强光 (hard-light)', action: () => this.setObjectCompositeMode('hard-light') },
|
||
{ text: '柔光 (soft-light)', action: () => this.setObjectCompositeMode('soft-light') },
|
||
{ text: '差值 (difference)', action: () => this.setObjectCompositeMode('difference') },
|
||
{ text: '排除 (exclusion)', action: () => this.setObjectCompositeMode('exclusion') },
|
||
]
|
||
},
|
||
{ text: '调整透明度', action: () => this.showOpacityDialog() },
|
||
{ text: '恢复原尺寸', action: () => this.resetObjectSize() }
|
||
];
|
||
|
||
// 创建菜单项
|
||
menuItems.forEach(item => {
|
||
const menuItem = document.createElement('div');
|
||
menuItem.textContent = item.text;
|
||
menuItem.style.cssText = `
|
||
padding: 6px 15px;
|
||
margin: 1px 3px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: background-color 0.15s ease;
|
||
font-size: 13px;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
`;
|
||
|
||
if (item.submenu) {
|
||
// 添加子菜单指示器
|
||
menuItem.style.paddingRight = '25px';
|
||
const arrow = document.createElement('span');
|
||
arrow.textContent = '▶';
|
||
arrow.style.cssText = `
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 10px;
|
||
`;
|
||
menuItem.appendChild(arrow);
|
||
|
||
// 创建子菜单
|
||
const submenu = document.createElement('div');
|
||
submenu.style.cssText = `
|
||
position: absolute;
|
||
left: 100%;
|
||
top: 0;
|
||
display: none;
|
||
background: #2a2a2a;
|
||
border: 1px solid #3f3f3f;
|
||
border-radius: 6px;
|
||
padding: 3px;
|
||
z-index: 1001;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||
`;
|
||
|
||
// 创建子菜单项
|
||
item.submenu.forEach(subItem => {
|
||
const subMenuItem = document.createElement('div');
|
||
subMenuItem.textContent = subItem.text;
|
||
subMenuItem.style.cssText = `
|
||
padding: 6px 15px;
|
||
margin: 1px 3px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
transition: background-color 0.15s ease;
|
||
font-size: 13px;
|
||
border-radius: 4px;
|
||
`;
|
||
subMenuItem.onmouseover = () => subMenuItem.style.backgroundColor = '#3f3f3f';
|
||
subMenuItem.onmouseout = () => subMenuItem.style.backgroundColor = '';
|
||
subMenuItem.onclick = (e) => {
|
||
e.stopPropagation();
|
||
subItem.action();
|
||
menu.style.display = 'none';
|
||
};
|
||
submenu.appendChild(subMenuItem);
|
||
});
|
||
|
||
// 显示/隐藏子菜单
|
||
menuItem.onmouseover = () => {
|
||
submenu.style.display = 'block';
|
||
menuItem.style.backgroundColor = '#3f3f3f';
|
||
};
|
||
menuItem.onmouseout = (e) => {
|
||
if (!e.relatedTarget || !submenu.contains(e.relatedTarget)) {
|
||
submenu.style.display = 'none';
|
||
menuItem.style.backgroundColor = '';
|
||
}
|
||
};
|
||
submenu.onmouseover = () => {
|
||
submenu.style.display = 'block';
|
||
menuItem.style.backgroundColor = '#3f3f3f';
|
||
};
|
||
submenu.onmouseout = (e) => {
|
||
if (!menuItem.contains(e.relatedTarget)) {
|
||
submenu.style.display = 'none';
|
||
menuItem.style.backgroundColor = '';
|
||
}
|
||
};
|
||
|
||
menuItem.appendChild(submenu);
|
||
} else {
|
||
// 普通菜单项的鼠标悬停效果
|
||
menuItem.onmouseover = () => menuItem.style.backgroundColor = '#3f3f3f';
|
||
menuItem.onmouseout = () => menuItem.style.backgroundColor = '';
|
||
menuItem.onclick = (e) => {
|
||
e.stopPropagation();
|
||
item.action();
|
||
menu.style.display = 'none';
|
||
};
|
||
}
|
||
|
||
menu.appendChild(menuItem);
|
||
});
|
||
// 在画布容器上监听右键事件
|
||
this.canvasContainer.addEventListener('contextmenu', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
|
||
const activeObject = this.canvas.getActiveObject();
|
||
if (activeObject) {
|
||
menu.style.left = `${e.pageX}px`;
|
||
menu.style.top = `${e.pageY}px`;
|
||
menu.style.display = 'block';
|
||
|
||
// 添加一次性点击事件监听器
|
||
const closeMenu = (e) => {
|
||
if (!menu.contains(e.target)) {
|
||
menu.style.display = 'none';
|
||
document.removeEventListener('click', closeMenu);
|
||
document.removeEventListener('contextmenu', closeMenu);
|
||
}
|
||
};
|
||
|
||
// 延迟添加事件监听器，避免立即触发
|
||
setTimeout(() => {
|
||
document.addEventListener('click', closeMenu);
|
||
document.addEventListener('contextmenu', closeMenu);
|
||
}, 0);
|
||
}
|
||
|
||
return false;
|
||
}, true);
|
||
|
||
// 阻止菜单内右键点击
|
||
menu.addEventListener('contextmenu', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
return false;
|
||
});
|
||
|
||
document.body.appendChild(menu);
|
||
}
|
||
|
||
// 菜单操作方法
|
||
flipObject(direction) {
|
||
const activeObject = this.canvas.getActiveObject();
|
||
if (activeObject) {
|
||
if (direction === 'horizontal') {
|
||
activeObject.flipX = !activeObject.flipX;
|
||
} else {
|
||
activeObject.flipY = !activeObject.flipY;
|
||
}
|
||
this.canvas.renderAll();
|
||
}
|
||
}
|
||
|
||
centerObject(direction) {
|
||
const activeObject = this.canvas.getActiveObject();
|
||
if (activeObject) {
|
||
if (direction === 'both') {
|
||
activeObject.center();
|
||
} else if (direction === 'horizontal') {
|
||
activeObject.centerH();
|
||
} else {
|
||
activeObject.centerV();
|
||
}
|
||
activeObject.setCoords();
|
||
this.canvas.renderAll();
|
||
}
|
||
}
|
||
|
||
resetObjectSize() {
|
||
const activeObject = this.canvas.getActiveObject();
|
||
if (activeObject && activeObject.originalWidth && activeObject.originalHeight) {
|
||
// 重置对象到原始尺寸
|
||
const originalWidth = activeObject.originalWidth;
|
||
const originalHeight = activeObject.originalHeight;
|
||
|
||
// 计算比例
|
||
const scaleX = originalWidth / activeObject.width;
|
||
const scaleY = originalHeight / activeObject.height;
|
||
|
||
// 应用变换
|
||
activeObject.set({
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
width: originalWidth,
|
||
height: originalHeight
|
||
});
|
||
|
||
this.canvas.renderAll();
|
||
|
||
}
|
||
}
|
||
|
||
// 设置图层混合模式
|
||
setObjectCompositeMode(mode) {
|
||
const activeObject = this.canvas.getActiveObject();
|
||
if (activeObject) {
|
||
activeObject.set({
|
||
globalCompositeOperation: mode
|
||
});
|
||
this.canvas.renderAll();
|
||
|
||
}
|
||
}
|
||
|
||
// 显示透明度调整对话框
|
||
showOpacityDialog() {
|
||
const activeObject = this.canvas.getActiveObject();
|
||
if (!activeObject) return;
|
||
|
||
// 创建对话框元素
|
||
const dialog = document.createElement('div');
|
||
dialog.className = 'opacity-dialog';
|
||
dialog.style.cssText = `
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: #2a2a2a;
|
||
border: 1px solid #3f3f3f;
|
||
border-radius: 6px;
|
||
padding: 15px;
|
||
z-index: 1000;
|
||
color: white;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||
min-width: 250px;
|
||
`;
|
||
|
||
// 创建滑动条
|
||
const slider = document.createElement('input');
|
||
slider.type = 'range';
|
||
slider.min = '0';
|
||
slider.max = '100';
|
||
slider.value = Math.round(activeObject.opacity * 100);
|
||
slider.style.cssText = `
|
||
width: 100%;
|
||
margin: 5px 0;
|
||
`;
|
||
|
||
// 当前透明度值显示
|
||
const valueDisplay = document.createElement('div');
|
||
valueDisplay.style.cssText = `
|
||
margin: 5px 0;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
`;
|
||
valueDisplay.textContent = `${Math.round(activeObject.opacity * 100)}%`;
|
||
|
||
// 滑动时实时更新透明度
|
||
slider.addEventListener('input', (e) => {
|
||
const opacity = parseInt(e.target.value) / 100;
|
||
activeObject.set({ opacity });
|
||
valueDisplay.textContent = `${Math.round(opacity * 100)}%`;
|
||
this.canvas.renderAll();
|
||
});
|
||
|
||
// 按钮容器
|
||
const buttonContainer = document.createElement('div');
|
||
buttonContainer.style.cssText = `
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
`;
|
||
|
||
// 关闭对话框函数
|
||
const closeDialog = () => {
|
||
activeObject.set({ opacity: activeObject._originalOpacity });
|
||
try {
|
||
document.body.removeChild(dialog);
|
||
// 移除ESC键监听器
|
||
document.removeEventListener('keydown', handleKeyDown);
|
||
} catch (error) {
|
||
console.log("对话框已被移除");
|
||
}
|
||
this.canvas.renderAll();
|
||
};
|
||
|
||
// 应用更改并关闭对话框
|
||
const applyChanges = () => {
|
||
try {
|
||
document.body.removeChild(dialog);
|
||
// 移除所有事件监听器
|
||
document.removeEventListener('keydown', handleKeyDown);
|
||
document.removeEventListener('mousedown', handleClickOutside);
|
||
} catch (error) {
|
||
console.log("对话框已被移除");
|
||
}
|
||
|
||
};
|
||
|
||
// ESC键监听器
|
||
const handleKeyDown = (e) => {
|
||
if (e.key === 'Escape') {
|
||
closeDialog();
|
||
}
|
||
};
|
||
|
||
// 添加ESC键监听
|
||
document.addEventListener('keydown', handleKeyDown);
|
||
|
||
// 取消按钮
|
||
const cancelButton = document.createElement('button');
|
||
cancelButton.textContent = '取消';
|
||
cancelButton.style.cssText = `
|
||
background: #444;
|
||
border: none;
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
`;
|
||
cancelButton.onclick = closeDialog;
|
||
|
||
// 确认按钮
|
||
const confirmButton = document.createElement('button');
|
||
confirmButton.textContent = '确认';
|
||
confirmButton.style.cssText = `
|
||
background: #007bff;
|
||
border: none;
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
`;
|
||
confirmButton.onclick = applyChanges;
|
||
|
||
// 添加所有元素
|
||
dialog.appendChild(valueDisplay);
|
||
dialog.appendChild(slider);
|
||
buttonContainer.appendChild(cancelButton);
|
||
buttonContainer.appendChild(confirmButton);
|
||
dialog.appendChild(buttonContainer);
|
||
|
||
// 保存原始透明度以便取消时恢复
|
||
activeObject._originalOpacity = activeObject.opacity;
|
||
|
||
// 添加到文档
|
||
document.body.appendChild(dialog);
|
||
|
||
// 在函数内部创建并存储mousedown监听器的引用
|
||
let handleClickOutside;
|
||
|
||
// 定义并存储监听器引用
|
||
handleClickOutside = function(e) {
|
||
if (!dialog.contains(e.target)) {
|
||
closeDialog();
|
||
document.removeEventListener('mousedown', handleClickOutside);
|
||
}
|
||
};
|
||
|
||
// 添加监听器
|
||
document.addEventListener('mousedown', handleClickOutside);
|
||
}
|
||
|
||
updateContainerSize(width, height) {
|
||
// 更新画布容器尺寸为缩放后的显示尺寸
|
||
this.canvasContainer.style.width = `${width}px`;
|
||
this.canvasContainer.style.height = `${height + CANVAS_SIZE.CONTROL_PANEL_HEIGHT}px`;
|
||
|
||
// 确保控制面板始终在最上层
|
||
this.canvasContainer.style.position = 'relative'; // 添加这行
|
||
this.canvasContainer.style.zIndex = '1'; // 添加这行
|
||
|
||
// 更新控制面板尺寸
|
||
this.controlPanel.updateSize(width);
|
||
|
||
// 更新节点的 DOM 元素尺寸
|
||
if (this.node.canvasElement) {
|
||
this.node.canvasElement.style.width = `${width}px`;
|
||
this.node.canvasElement.style.height = `${height + CANVAS_SIZE.CONTROL_PANEL_HEIGHT}px`;
|
||
}
|
||
|
||
// 更新节点尺寸
|
||
this.node.size = [
|
||
width + CANVAS_SIZE.RIGHT_MARGIN,
|
||
height + CANVAS_SIZE.BOTTOM_MARGIN + CANVAS_SIZE.CONTROL_PANEL_HEIGHT
|
||
];
|
||
|
||
// 强制更新节点
|
||
this.node.setDirtyCanvas(true, true);
|
||
}
|
||
|
||
updateCanvasSize(displayWidth, displayHeight) {
|
||
// 1. 计算缩放比例
|
||
const scaleX = displayWidth / this.originalSize.width;
|
||
const scaleY = displayHeight / this.originalSize.height;
|
||
const scale = Math.min(scaleX, scaleY); // 使用统一的缩放比例
|
||
|
||
// 2. 设置画布为原始尺寸
|
||
this.canvas.setDimensions({
|
||
width: this.originalSize.width,
|
||
height: this.originalSize.height
|
||
});
|
||
|
||
// 3. 更新画布包装器的CSS transform
|
||
this.canvas.wrapperEl.style.transform = `scale(${scale})`;
|
||
this.canvas.wrapperEl.style.transformOrigin = 'top left';
|
||
this.canvas.wrapperEl.style.width = `${displayWidth}px`;
|
||
this.canvas.wrapperEl.style.height = `${displayHeight}px`;
|
||
|
||
// 4. 同步Fabric.js的缩放
|
||
this.canvas.setZoom(1); // 重置zoom，因为我们使用CSS缩放
|
||
|
||
// 5. 如果有背景图片，确保它使用原始尺寸
|
||
if (this.canvas.backgroundImage) {
|
||
this.canvas.backgroundImage.set({
|
||
width: this.originalSize.width,
|
||
height: this.originalSize.height,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
left: 0,
|
||
top: 0,
|
||
originX: 'left',
|
||
originY: 'top'
|
||
});
|
||
// 强制更新背景坐标
|
||
this.canvas.backgroundImage.setCoords();
|
||
}
|
||
|
||
// 6. 更新容器尺寸
|
||
this.updateContainerSize(displayWidth, displayHeight);
|
||
|
||
// 7. 重新渲染
|
||
this.canvas.renderAll();
|
||
|
||
// 8. 更新事件监听区域
|
||
this.canvas.calcOffset();
|
||
}
|
||
// 修改 updateDisplayScale 方法
|
||
updateDisplayScale(maxSize) {
|
||
this.maxDisplaySize = maxSize;
|
||
if (this.originalSize?.width && this.originalSize?.height) {
|
||
const scaledSize = this.calculateScaledSize(
|
||
this.originalSize.width,
|
||
this.originalSize.height,
|
||
maxSize
|
||
);
|
||
|
||
// 更新显示尺寸，但保持画布原始尺寸
|
||
this.updateCanvasSize(scaledSize.width, scaledSize.height);
|
||
|
||
// 确保画布完全重置和更新
|
||
this.canvas.requestRenderAll();
|
||
}
|
||
}
|
||
|
||
// 计算缩放后的尺寸
|
||
calculateScaledSize(width, height, maxSize) {
|
||
if (width <= maxSize && height <= maxSize) {
|
||
return { width, height };
|
||
}
|
||
|
||
const ratio = width / height;
|
||
if (width > height) {
|
||
return {
|
||
width: maxSize,
|
||
height: Math.round(maxSize / ratio)
|
||
};
|
||
} else {
|
||
return {
|
||
width: Math.round(maxSize * ratio),
|
||
height: maxSize
|
||
};
|
||
}
|
||
}
|
||
|
||
|
||
|
||
setupPaste() {
|
||
// 移除可能存在的旧事件监听器
|
||
if (this._pasteHandler) {
|
||
document.removeEventListener('paste', this._pasteHandler);
|
||
}
|
||
|
||
let canvasActive = false;
|
||
|
||
// 创建新的粘贴处理函数
|
||
this._pasteHandler = async (e) => {
|
||
if (!canvasActive) return; // 如果画布不是活动状态，不处理粘贴
|
||
|
||
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
||
for (const item of items) {
|
||
if (item.type.indexOf('image') === 0) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const blob = item.getAsFile();
|
||
await this.handleImageUpload(blob, { center: true, autoScale: true });
|
||
break;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 添加内部复制功能
|
||
document.addEventListener('keydown', (e) => {
|
||
// 检查是否在画布区域内且画布处于活动状态
|
||
const activeElement = document.activeElement;
|
||
const isInputActive = activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA';
|
||
if (isInputActive || !canvasActive) return;
|
||
|
||
// 复制 (Ctrl+C)
|
||
if (e.ctrlKey && e.key === 'c') {
|
||
const activeObjects = this.canvas.getActiveObjects();
|
||
if (activeObjects.length > 0) {
|
||
activeObjects.forEach(obj => {
|
||
// 创建图层的副本
|
||
obj.clone((cloned) => {
|
||
// 生成新的图层ID
|
||
const newId = this.controlPanel.maxLayerId + 1;
|
||
this.controlPanel.maxLayerId = newId;
|
||
|
||
cloned.set({
|
||
left: obj.left + 20,
|
||
top: obj.top + 20,
|
||
id: newId
|
||
});
|
||
|
||
// 添加到画布和图层管理
|
||
this.canvas.add(cloned);
|
||
this.layers.set(newId, cloned);
|
||
});
|
||
});
|
||
|
||
this.canvas.renderAll();
|
||
this.controlPanel.updateLayerSelector();
|
||
|
||
}
|
||
}
|
||
});
|
||
|
||
// 添加新的事件监听器到 document
|
||
document.addEventListener('paste', this._pasteHandler, true);
|
||
|
||
// 点击画布时设置活动状态
|
||
this.canvasContainer.addEventListener('mousedown', () => {
|
||
canvasActive = true;
|
||
});
|
||
|
||
// 点击其他地方时取消活动状态
|
||
document.addEventListener('mousedown', (e) => {
|
||
if (!this.canvasContainer.contains(e.target)) {
|
||
canvasActive = false;
|
||
}
|
||
});
|
||
|
||
// 清理函数
|
||
this.cleanup = () => {
|
||
document.removeEventListener('paste', this._pasteHandler, true);
|
||
};
|
||
}
|
||
|
||
setupDragAndDrop() {
|
||
// 防止浏览器默认的拖放行为
|
||
this.canvasContainer.addEventListener('dragenter', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this.canvasContainer.classList.add('drag-over');
|
||
});
|
||
|
||
this.canvasContainer.addEventListener('dragover', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
});
|
||
|
||
this.canvasContainer.addEventListener('dragleave', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
if (e.target === this.canvasContainer) {
|
||
this.canvasContainer.classList.remove('drag-over');
|
||
}
|
||
});
|
||
|
||
this.canvasContainer.addEventListener('drop', async (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this.canvasContainer.classList.remove('drag-over');
|
||
|
||
const files = e.dataTransfer.files;
|
||
if (files.length > 0) {
|
||
const file = files[0];
|
||
if (file.type.startsWith('image/')) {
|
||
await this.handleImageUpload(file, { center: true, autoScale: true });
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
// 添加样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.fast-canvas-container.drag-over::after {
|
||
content: '拖放图片到这里';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: ${CANVAS_SIZE.CONTROL_PANEL_HEIGHT}px;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
pointer-events: none;
|
||
z-index: 1000;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
}
|
||
|
||
async handleImageUpload(file, options = { center: true, autoScale: true }) {
|
||
try {
|
||
const reader = new FileReader();
|
||
|
||
const imageLoadPromise = new Promise((resolve, reject) => {
|
||
reader.onload = (e) => {
|
||
const dataUrl = e.target.result;
|
||
resolve(dataUrl);
|
||
};
|
||
reader.onerror = reject;
|
||
});
|
||
|
||
reader.readAsDataURL(file);
|
||
const imageData = await imageLoadPromise;
|
||
|
||
// 统一按图层方式加载图片
|
||
fabric.Image.fromURL(imageData, (img) => {
|
||
if (options.center && options.autoScale) {
|
||
// 计算适合画布的缩放比例
|
||
const scale = Math.min(
|
||
this.canvas.width / img.width,
|
||
this.canvas.height / img.height
|
||
);
|
||
|
||
// 计算居中位置
|
||
const canvasCenter = this.canvas.getCenter();
|
||
img.set({
|
||
scaleX: scale,
|
||
scaleY: scale,
|
||
left: canvasCenter.left,
|
||
top: canvasCenter.top,
|
||
originX: 'center',
|
||
originY: 'center'
|
||
});
|
||
} else {
|
||
// 不进行居中和缩放，使用原始尺寸和位置
|
||
img.set({
|
||
left: 0,
|
||
top: 0,
|
||
originX: 'left',
|
||
originY: 'top'
|
||
});
|
||
}
|
||
|
||
// 添加到画布并更新图层ID
|
||
this.canvas.add(img);
|
||
this.controlPanel.updateLayerIds();
|
||
|
||
this.canvas.setActiveObject(img);
|
||
this.canvas.renderAll();
|
||
|
||
});
|
||
|
||
} catch (error) {
|
||
console.error('图片上传失败:', error);
|
||
alert('图片上传失败，请重试');
|
||
}
|
||
}
|
||
|
||
|
||
|
||
setupEventListeners() {
|
||
|
||
// 添加一个计算相对缩放值的辅助方法
|
||
const getRelativeScale = (obj) => {
|
||
const backgroundImage = this.canvas.backgroundImage;
|
||
if (!backgroundImage) return obj.scaleX;
|
||
|
||
// 计算背景图片的缩放比例
|
||
const bgScaleRatio = backgroundImage.width / backgroundImage.getScaledWidth();
|
||
// 计算相对于背景图片的实际缩放比例
|
||
return Number((obj.scaleX * bgScaleRatio).toFixed(2));
|
||
};
|
||
// 创建一个绑定到当前实例的事件处理函数
|
||
this._handleKeyDown = (e) => {
|
||
// 首先检查画布和节点是否还存在
|
||
if (!this.canvas || !this.node) {
|
||
// 如果画布或节点不存在，移除事件监听器
|
||
document.removeEventListener('keydown', this._handleKeyDown);
|
||
return;
|
||
}
|
||
|
||
// 检查是否有选中的对象且当前焦点不在输入框上
|
||
if (this.canvas.getActiveObject() &&
|
||
document.activeElement.tagName !== 'INPUT' &&
|
||
document.activeElement.tagName !== 'TEXTAREA') {
|
||
|
||
// Delete 键或 Backspace 键
|
||
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||
e.preventDefault();
|
||
|
||
const activeObject = this.canvas.getActiveObject();
|
||
// 确保不是背景图片
|
||
if (activeObject !== this.canvas.backgroundImage) {
|
||
// 如果是图层，从图层映射中移除
|
||
if (activeObject.id) {
|
||
this.layers.delete(activeObject.id);
|
||
}
|
||
|
||
// 从画布中移除
|
||
this.canvas.remove(activeObject);
|
||
this.canvas.renderAll();
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
// 添加滚轮缩放
|
||
this.canvas.on('mouse:wheel', (opt) => {
|
||
const delta = opt.e.deltaY;
|
||
const activeObject = this.canvas.getActiveObject();
|
||
|
||
if (activeObject) {
|
||
let scale = activeObject.scaleX;
|
||
|
||
if (delta < 0) {
|
||
scale *= 1.1; // 放大
|
||
} else {
|
||
scale *= 0.9; // 缩小
|
||
}
|
||
|
||
// 限制缩放范围
|
||
scale = Math.min(Math.max(scale, 0.01), 10);
|
||
|
||
activeObject.scale(scale);
|
||
this.canvas.renderAll();
|
||
|
||
// 更新缩放值显示
|
||
const relativeScale = getRelativeScale(activeObject);
|
||
this.scaleText.innerHTML = `scale: ${relativeScale}×`;
|
||
this.scaleText.style.display = 'block';
|
||
|
||
opt.e.preventDefault();
|
||
opt.e.stopPropagation();
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
async updateCanvas(canvasData, transformData = null) {
|
||
if (!canvasData) return;
|
||
|
||
try {
|
||
// 先获取当前所有图层的状态（只在没有传入transformData时保留状态）
|
||
const currentLayers = !transformData ? this.canvas.getObjects().map(obj => ({
|
||
object: obj,
|
||
state: {
|
||
left: obj.left,
|
||
top: obj.top,
|
||
scaleX: obj.scaleX,
|
||
scaleY: obj.scaleY,
|
||
angle: obj.angle,
|
||
flipX: obj.flipX,
|
||
flipY: obj.flipY
|
||
}
|
||
})) : [];
|
||
|
||
// 先设置背景
|
||
if (canvasData.background) {
|
||
await this.setBackground(canvasData.background);
|
||
}
|
||
|
||
// 再更新图层
|
||
if (canvasData.layers) {
|
||
await this.updateLayers(canvasData.layers);
|
||
|
||
// 如果有transformData，应用变换数据
|
||
if (transformData) {
|
||
this.applyTransformData(transformData);
|
||
} else {
|
||
// 否则恢复图层状态
|
||
currentLayers.forEach(({object, state}) => {
|
||
const existingObj = this.canvas.getObjects().find(obj => obj.id === object.id);
|
||
if (existingObj) {
|
||
existingObj.set(state);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 确保画布完全渲染
|
||
await new Promise(resolve => {
|
||
requestAnimationFrame(() => {
|
||
this.canvas.renderAll();
|
||
resolve();
|
||
});
|
||
});
|
||
await this.sendCanvasState();
|
||
} catch (error) {
|
||
console.error('[FastCanvas] updateCanvas error:', error);
|
||
}
|
||
}
|
||
|
||
// 应用变换数据到图层
|
||
applyTransformData(transformData) {
|
||
if (!transformData) return;
|
||
|
||
try {
|
||
// 遍历transform_data中的每个图层
|
||
for (const [layerId, trans] of Object.entries(transformData)) {
|
||
// 跳过background
|
||
if (layerId === 'background') continue;
|
||
|
||
// 查找对应的图层对象
|
||
const layerObj = this.layers.get(parseInt(layerId));
|
||
if (!layerObj) {
|
||
console.warn(`[FastCanvas] Layer ${layerId} not found`);
|
||
continue;
|
||
}
|
||
|
||
// 应用变换参数
|
||
const updates = {
|
||
originX: 'center',
|
||
originY: 'center'
|
||
};
|
||
|
||
// 设置中心点位置
|
||
if (trans.centerX !== undefined) updates.left = trans.centerX;
|
||
if (trans.centerY !== undefined) updates.top = trans.centerY;
|
||
|
||
// 缩放
|
||
if (trans.scaleX !== undefined) updates.scaleX = trans.scaleX;
|
||
if (trans.scaleY !== undefined) updates.scaleY = trans.scaleY;
|
||
|
||
// 旋转（注意：fabric.js使用正角度，transform_data可能需要调整）
|
||
if (trans.angle !== undefined) updates.angle = trans.angle;
|
||
|
||
// 翻转
|
||
if (trans.flipX !== undefined) updates.flipX = trans.flipX;
|
||
if (trans.flipY !== undefined) updates.flipY = trans.flipY;
|
||
|
||
// 应用所有变换
|
||
layerObj.set(updates);
|
||
layerObj.setCoords(); // 更新对象坐标
|
||
}
|
||
|
||
// 渲染画布
|
||
this.canvas.renderAll();
|
||
|
||
console.log('[FastCanvas] Applied transform data to layers');
|
||
} catch (error) {
|
||
console.error('[FastCanvas] Error applying transform data:', error);
|
||
}
|
||
}
|
||
|
||
// 添加一个通用的图像加载函数
|
||
loadImage(imageUrl, timeout = 5000) {
|
||
return new Promise((resolve, reject) => {
|
||
const timeoutId = setTimeout(() => {
|
||
reject(new Error('Image loading timeout'));
|
||
}, timeout);
|
||
|
||
fabric.Image.fromURL(imageUrl,
|
||
(img) => {
|
||
clearTimeout(timeoutId);
|
||
if (!img) {
|
||
|
||
reject(new Error('Failed to create image'));
|
||
return;
|
||
}
|
||
resolve(img);
|
||
},
|
||
(error) => {
|
||
clearTimeout(timeoutId);
|
||
reject(error);
|
||
},
|
||
{ crossOrigin: 'anonymous' } // 添加跨域支持
|
||
);
|
||
});
|
||
}
|
||
|
||
setLayerAsBackground() {
|
||
const activeObject = this.canvas.getActiveObject();
|
||
if (!activeObject) return;
|
||
|
||
// 移除当前图层
|
||
this.canvas.remove(activeObject);
|
||
// 移除图层ID
|
||
this.controlPanel.removeLayerId(activeObject);
|
||
// 准备背景数据
|
||
const backgroundData = {
|
||
image: activeObject.getSrc()
|
||
};
|
||
|
||
// 使用现有的 setBackground 方法设置背景
|
||
this.setBackground(backgroundData);
|
||
}
|
||
|
||
async setBackground(backgroundData) {
|
||
if (!backgroundData?.image) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const img = await this.loadImage(backgroundData.image);
|
||
|
||
// 保存当前所有图层的状态
|
||
const layerStates = this.canvas.getObjects().map(obj => ({
|
||
object: obj,
|
||
state: {
|
||
left: obj.left,
|
||
top: obj.top,
|
||
scaleX: obj.scaleX,
|
||
scaleY: obj.scaleY,
|
||
angle: obj.angle
|
||
}
|
||
}));
|
||
|
||
// 保存原始尺寸
|
||
this.originalSize = {
|
||
width: img.width,
|
||
height: img.height
|
||
};
|
||
|
||
// 计算显示尺寸
|
||
const scaledSize = this.calculateScaledSize(
|
||
img.width,
|
||
img.height,
|
||
this.maxDisplaySize
|
||
);
|
||
|
||
// 设置画布尺寸为原始尺寸
|
||
this.canvas.setDimensions({
|
||
width: this.originalSize.width,
|
||
height: this.originalSize.height
|
||
});
|
||
|
||
// 设置背景图片属性
|
||
img.set({
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
left: 0,
|
||
top: 0,
|
||
selectable: false,
|
||
evented: false,
|
||
originX: 'left',
|
||
originY: 'top'
|
||
});
|
||
|
||
// 设置CSS缩放
|
||
const scale = scaledSize.width / this.originalSize.width;
|
||
this.canvas.wrapperEl.style.transform = `scale(${scale})`;
|
||
this.canvas.wrapperEl.style.transformOrigin = 'top left';
|
||
|
||
// 更新容器尺寸
|
||
this.updateContainerSize(scaledSize.width, scaledSize.height);
|
||
|
||
// 更新尺寸输入框
|
||
if (this.node?.sizeOverlay?.updateSizeInputs) {
|
||
this.node.sizeOverlay.updateSizeInputs(
|
||
this.originalSize.width,
|
||
this.originalSize.height
|
||
);
|
||
}
|
||
|
||
// 直接设置背景图片
|
||
return new Promise((resolve) => {
|
||
this.canvas.setBackgroundImage(img, () => {
|
||
// 恢复所有图层的状态
|
||
layerStates.forEach(({object, state}) => {
|
||
object.set(state);
|
||
});
|
||
|
||
this.canvas.renderAll();
|
||
resolve();
|
||
});
|
||
});
|
||
|
||
} catch (error) {
|
||
|
||
this.sendErrorState("Background loading failed");
|
||
}
|
||
}
|
||
|
||
|
||
addLayer(layerData) {
|
||
return new Promise((resolve) => {
|
||
fabric.Image.fromURL(layerData.image, (img) => {
|
||
if (!img) {
|
||
|
||
resolve();
|
||
return;
|
||
}
|
||
|
||
// 计算适合画布的缩放比例
|
||
const scale = Math.min(
|
||
this.canvas.width / img.width,
|
||
this.canvas.height / img.height
|
||
);
|
||
|
||
// 计算居中位置
|
||
const centerX = (this.canvas.width - img.width * scale) / 2;
|
||
const centerY = (this.canvas.height - img.height * scale) / 2;
|
||
|
||
img.set({
|
||
id: layerData.id,
|
||
scaleX: scale,
|
||
scaleY: scale,
|
||
left: centerX,
|
||
top: centerY,
|
||
selectable: true,
|
||
hasControls: true,
|
||
hasBorders: true,
|
||
originalWidth: img.width,
|
||
originalHeight: img.height
|
||
});
|
||
|
||
this.canvas.add(img);
|
||
this.layers.set(layerData.id, img);
|
||
|
||
// 添加以下代码来保持选中状态
|
||
this.canvas.setActiveObject(img);
|
||
this.canvas.renderAll();
|
||
|
||
resolve();
|
||
});
|
||
});
|
||
}
|
||
|
||
updateLayer(layerData) {
|
||
return new Promise((resolve) => {
|
||
const existingObj = this.layers.get(layerData.id);
|
||
if (existingObj) {
|
||
// 保存当前的变换状态（补充透明度与混合模式）
|
||
const currentState = {
|
||
scaleX: existingObj.scaleX,
|
||
scaleY: existingObj.scaleY,
|
||
left: existingObj.left,
|
||
top: existingObj.top,
|
||
angle: existingObj.angle,
|
||
flipX: existingObj.flipX,
|
||
flipY: existingObj.flipY,
|
||
opacity: existingObj.opacity,
|
||
globalCompositeOperation: existingObj.globalCompositeOperation
|
||
};
|
||
|
||
// 检查当前对象是否被选中
|
||
const wasActive = this.canvas.getActiveObject() === existingObj;
|
||
|
||
fabric.Image.fromURL(layerData.image, (newImg) => {
|
||
if (!newImg) {
|
||
resolve();
|
||
return;
|
||
}
|
||
|
||
// 直接应用所有保存的变换状态
|
||
newImg.set({
|
||
...currentState,
|
||
id: layerData.id,
|
||
selectable: true,
|
||
hasControls: true,
|
||
hasBorders: true,
|
||
originalWidth: newImg.width,
|
||
originalHeight: newImg.height
|
||
});
|
||
|
||
// 替换旧图层
|
||
const index = this.canvas.getObjects().indexOf(existingObj);
|
||
this.canvas.remove(existingObj);
|
||
this.canvas.insertAt(newImg, index);
|
||
this.layers.set(layerData.id, newImg);
|
||
|
||
// 如果原对象是选中状态，则保持新对象的选中状态
|
||
if (wasActive) {
|
||
this.canvas.setActiveObject(newImg);
|
||
}
|
||
|
||
this.canvas.renderAll();
|
||
resolve();
|
||
});
|
||
} else {
|
||
// 如果图层不存在，作为新图层添加
|
||
this.addLayer(layerData).then(resolve);
|
||
}
|
||
});
|
||
}
|
||
|
||
async updateLayers(layersData) {
|
||
try {
|
||
// 异步移除不再需要的图层
|
||
const currentIds = new Set(layersData.map(layer => layer.id));
|
||
const removePromises = [];
|
||
|
||
for (const [id, fabricObj] of this.layers.entries()) {
|
||
if (!currentIds.has(id)) {
|
||
removePromises.push(
|
||
new Promise(resolve => {
|
||
this.canvas.remove(fabricObj);
|
||
this.layers.delete(id);
|
||
requestAnimationFrame(resolve);
|
||
})
|
||
);
|
||
}
|
||
}
|
||
|
||
if (removePromises.length > 0) {
|
||
|
||
await Promise.all(removePromises);
|
||
this.canvas.renderAll();
|
||
}
|
||
|
||
for (const layerData of layersData) {
|
||
if (this.layers.has(layerData.id)) {
|
||
await this.updateLayer(layerData);
|
||
} else {
|
||
await this.addLayer(layerData);
|
||
}
|
||
// 更新最大图层ID
|
||
this.controlPanel.maxLayerId = Math.max(
|
||
this.controlPanel.maxLayerId,
|
||
layerData.id
|
||
);
|
||
}
|
||
|
||
this.controlPanel.updateLayerSelector();
|
||
|
||
// 确保最终渲染
|
||
return new Promise(resolve => {
|
||
requestAnimationFrame(() => {
|
||
this.canvas.renderAll();
|
||
resolve();
|
||
});
|
||
});
|
||
|
||
} catch (error) {
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
async getLayerMask(selectedLayer, ignoreOcclusion = false) {
|
||
if (!selectedLayer || !this.canvas.backgroundImage) {
|
||
return null;
|
||
}
|
||
|
||
// 创建与原始画布相同尺寸的遮罩画布
|
||
const maskCanvas = document.createElement('canvas');
|
||
maskCanvas.width = this.originalSize.width;
|
||
maskCanvas.height = this.originalSize.height;
|
||
const ctx = maskCanvas.getContext('2d');
|
||
|
||
// 清除画布，保持透明背景
|
||
ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
|
||
|
||
// 渲染选中图层
|
||
if (selectedLayer.visible !== false) {
|
||
ctx.save();
|
||
|
||
// 直接使用图层的变换矩阵
|
||
const matrix = selectedLayer.calcTransformMatrix();
|
||
ctx.transform(
|
||
matrix[0],
|
||
matrix[1],
|
||
matrix[2],
|
||
matrix[3],
|
||
matrix[4],
|
||
matrix[5]
|
||
);
|
||
|
||
// 绘制图层 - 图像对象
|
||
if (selectedLayer._element) {
|
||
ctx.drawImage(
|
||
selectedLayer._element,
|
||
-selectedLayer.width / 2,
|
||
-selectedLayer.height / 2,
|
||
selectedLayer.width,
|
||
selectedLayer.height
|
||
);
|
||
}
|
||
else if (selectedLayer.type === 'text' || selectedLayer.type === 'i-text') {
|
||
// 设置文本样式
|
||
ctx.fillStyle = 'white';
|
||
ctx.font = `${selectedLayer.fontSize}px ${selectedLayer.fontFamily}`;
|
||
ctx.textAlign = 'left';
|
||
ctx.textBaseline = 'top';
|
||
|
||
// 处理行间距和多行文本
|
||
const lines = selectedLayer.text.split('\n');
|
||
const lineHeight = selectedLayer.lineHeight || 1.16; // Fabric默认值
|
||
|
||
for (let i = 0; i < lines.length; i++) {
|
||
// 计算每行Y位置，考虑行高
|
||
const y = -selectedLayer.height / 2 + i * lineHeight * selectedLayer.fontSize + lineHeight*1.8;
|
||
|
||
// 绘制每行文本，保留字间距处理
|
||
ctx.fillText(lines[i], -selectedLayer.width / 2, y);
|
||
}
|
||
}
|
||
ctx.restore();
|
||
}
|
||
|
||
// 上层遮挡处理部分也需要修改
|
||
if (!ignoreOcclusion) {
|
||
const allLayers = this.canvas.getObjects()
|
||
.filter(obj => obj !== this.canvas.backgroundImage);
|
||
const selectedLayerIndex = allLayers.indexOf(selectedLayer);
|
||
const upperLayers = allLayers.slice(selectedLayerIndex + 1);
|
||
|
||
if (upperLayers.length > 0) {
|
||
ctx.globalCompositeOperation = 'destination-out';
|
||
|
||
upperLayers.forEach(layer => {
|
||
if (layer.visible !== false) {
|
||
ctx.save();
|
||
|
||
const matrix = layer.calcTransformMatrix();
|
||
ctx.transform(
|
||
matrix[0], matrix[1], matrix[2],
|
||
matrix[3], matrix[4], matrix[5]
|
||
);
|
||
|
||
if (layer._element) {
|
||
ctx.drawImage(
|
||
layer._element,
|
||
-layer.width / 2,
|
||
-layer.height / 2,
|
||
layer.width,
|
||
layer.height
|
||
);
|
||
}
|
||
else if (layer.type === 'text' || layer.type === 'i-text') {
|
||
// 设置文本样式
|
||
ctx.fillStyle = 'white';
|
||
ctx.font = `${layer.fontSize}px ${layer.fontFamily}`;
|
||
ctx.textAlign = 'left';
|
||
ctx.textBaseline = 'top';
|
||
|
||
// 处理行间距和多行文本
|
||
const lines = layer.text.split('\n');
|
||
const lineHeight = layer.lineHeight || 1.16; // Fabric默认值
|
||
|
||
for (let i = 0; i < lines.length; i++) {
|
||
// 计算每行Y位置，考虑行高
|
||
const y = -selectedLayer.height / 2 + i * lineHeight * selectedLayer.fontSize + lineHeight*1.8;
|
||
|
||
// 绘制每行文本，保留字间距处理
|
||
ctx.fillText(lines[i], -layer.width / 2, y);
|
||
}
|
||
}
|
||
ctx.restore();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
return maskCanvas;
|
||
}
|
||
|
||
async sendCanvasState() {
|
||
if (!this.canvas || !this.canvas.contextContainer) {
|
||
console.log('[FastCanvas] 画布或上下文不存在，跳过状态发送');
|
||
return;
|
||
}
|
||
|
||
|
||
try {
|
||
const timestamp = Date.now();
|
||
|
||
// 创建临时画布来处理尺寸
|
||
const tempCanvas = document.createElement('canvas');
|
||
tempCanvas.width = this.originalSize.width;
|
||
tempCanvas.height = this.originalSize.height;
|
||
const tempCtx = tempCanvas.getContext('2d');
|
||
|
||
const activeObjects = this.canvas.getActiveObjects();
|
||
const activeObject = this.canvas.getActiveObject();
|
||
|
||
// 主图像处理
|
||
this.canvas.discardActiveObject();
|
||
this.canvas.renderAll();
|
||
|
||
// 将高分辨率画布内容绘制到正确尺寸的临时画布
|
||
tempCtx.drawImage(
|
||
this.canvas.lowerCanvasEl,
|
||
0, 0, this.canvas.lowerCanvasEl.width, this.canvas.lowerCanvasEl.height, // 源尺寸（高分辨率）
|
||
0, 0, this.originalSize.width, this.originalSize.height // 目标尺寸
|
||
);
|
||
|
||
if (activeObject) {
|
||
this.canvas.setActiveObject(activeObject);
|
||
this.canvas.renderAll();
|
||
}
|
||
|
||
// 从临时画布获取正确尺寸的Blob
|
||
const imageBlob = await new Promise(resolve => {
|
||
tempCanvas.toBlob(async (blob) => {
|
||
const tempImg = await createImageBitmap(blob);
|
||
|
||
resolve(blob);
|
||
}, 'image/png', 1.0);
|
||
});
|
||
|
||
// 将Blob转换为ArrayBuffer
|
||
const imageBuffer = await imageBlob.arrayBuffer();
|
||
|
||
// 遮罩处理
|
||
const maskCanvas = document.createElement('canvas');
|
||
maskCanvas.width = this.originalSize.width;
|
||
maskCanvas.height = this.originalSize.height;
|
||
const ctx = maskCanvas.getContext('2d');
|
||
|
||
// 处理选中对象的遮罩
|
||
if (activeObjects && activeObjects.length > 1) {
|
||
// 设置混合模式为"lighter"，确保重叠的白色区域保持白色
|
||
ctx.globalCompositeOperation = 'lighter';
|
||
|
||
// 按照画布中的顺序获取选中的图层
|
||
const allLayers = this.canvas.getObjects().filter(obj => obj !== this.canvas.backgroundImage);
|
||
const orderedSelectedObjects = allLayers.filter(obj => activeObjects.includes(obj));
|
||
|
||
// 按顺序处理每个选中的对象
|
||
for (const obj of orderedSelectedObjects) {
|
||
// 获取带遮挡关系的遮罩（注意这里传入 false 表示不忽略遮挡）
|
||
const layerMask = await this.getLayerMask(obj, false);
|
||
if (layerMask) {
|
||
ctx.drawImage(layerMask, 0, 0);
|
||
}
|
||
}
|
||
} else if (activeObject) {
|
||
const layerMask = await this.getLayerMask(activeObject, false);
|
||
if (layerMask) {
|
||
ctx.drawImage(layerMask, 0, 0);
|
||
}
|
||
} else {
|
||
ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
|
||
}
|
||
|
||
// 主遮罩转换为二进制
|
||
const maskBlob = await new Promise(resolve => {
|
||
maskCanvas.toBlob(resolve, 'image/png', 1.0);
|
||
});
|
||
const maskBuffer = await maskBlob.arrayBuffer();
|
||
|
||
// 收集变换信息（使用之前获取的activeObjects）
|
||
const layerTransforms = {};
|
||
if (activeObjects && activeObjects.length > 0) {
|
||
activeObjects.forEach(obj => {
|
||
if (obj.id) {
|
||
// 获取对象的中心点坐标
|
||
const centerPoint = obj.getCenterPoint();
|
||
|
||
layerTransforms[obj.id] = {
|
||
centerX: centerPoint.x, // 使用中心点 X 坐标
|
||
centerY: centerPoint.y, // 使用中心点 Y 坐标
|
||
scaleX: obj.scaleX,
|
||
scaleY: obj.scaleY,
|
||
angle: obj.angle,
|
||
width: obj.width,
|
||
height: obj.height,
|
||
flipX: obj.flipX,
|
||
flipY: obj.flipY
|
||
};
|
||
}
|
||
});
|
||
}
|
||
|
||
// 构建发送的数据对象
|
||
const data = {
|
||
node_id: this.node.id.toString(),
|
||
timestamp: timestamp.toString(),
|
||
type: 'temp',
|
||
subfolder: 'fast_canvas',
|
||
overwrite: 'true',
|
||
main_image: Array.from(new Uint8Array(imageBuffer)),
|
||
main_mask: Array.from(new Uint8Array(maskBuffer)),
|
||
layer_transforms: layerTransforms // 替换原来的 layer_masks
|
||
};
|
||
|
||
|
||
// 发送数据
|
||
const response = await api.fetchApi('/fast_canvas_all', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(data)
|
||
});
|
||
|
||
console.log('[FastCanvas] 数据发送成功，服务器响应:', response);
|
||
|
||
await new Promise(resolve => setTimeout(resolve, 200));
|
||
|
||
} catch (error) {
|
||
console.error('[FastCanvas] 更新画布状态失败:', error);
|
||
throw error;
|
||
}
|
||
}
|
||
|
||
// 使用fabric.js内置方法序列化画布（不包含图像数据）
|
||
serializeCanvasJSON() {
|
||
if (!this.canvas) {
|
||
return null;
|
||
}
|
||
|
||
try {
|
||
// 保存当前选中状态
|
||
const activeObjectIds = [];
|
||
const activeObjects = this.canvas.getActiveObjects();
|
||
if (activeObjects) {
|
||
activeObjects.forEach(obj => {
|
||
if (obj.id) activeObjectIds.push(obj.id);
|
||
});
|
||
}
|
||
|
||
// 序列化画布，包含自定义属性（混合模式/透明度/文字相关）
|
||
const json = this.canvas.toJSON([
|
||
'id', 'originalWidth', 'originalHeight',
|
||
'globalCompositeOperation', 'opacity',
|
||
'text', 'fontFamily', 'fontSize', 'fill', 'backgroundColor',
|
||
'fontWeight', 'fontStyle', 'underline',
|
||
'charSpacing', 'lineHeight', 'stroke', 'strokeWidth', 'textAlign'
|
||
]);
|
||
|
||
// 添加元数据
|
||
json.metadata = {
|
||
version: '1.0',
|
||
timestamp: Date.now(),
|
||
canvasSize: this.originalSize,
|
||
activeObjectIds: activeObjectIds
|
||
};
|
||
|
||
// 移除图像数据，仅保留引用
|
||
if (json.objects) {
|
||
json.objects.forEach(obj => {
|
||
if (obj.type === 'image') {
|
||
obj.imageRef = `layer_${obj.id}`;
|
||
delete obj.src;
|
||
}
|
||
});
|
||
}
|
||
|
||
if (json.backgroundImage) {
|
||
json.backgroundImage.imageRef = 'background';
|
||
delete json.backgroundImage.src;
|
||
}
|
||
|
||
return JSON.stringify(json);
|
||
} catch (error) {
|
||
return null;
|
||
}
|
||
}
|
||
// 从JSON恢复画布状态（需要提供图像数据）
|
||
async deserializeCanvasJSON(jsonString, imageDataProvider) {
|
||
if (!this.canvas || !jsonString) {
|
||
return false;
|
||
}
|
||
|
||
try {
|
||
// 解析JSON
|
||
const json = JSON.parse(jsonString);
|
||
|
||
// 处理对象中的图像引用
|
||
if (json.objects) {
|
||
for (let i = 0; i < json.objects.length; i++) {
|
||
const obj = json.objects[i];
|
||
if (obj.type === 'image' && obj.imageRef && imageDataProvider) {
|
||
// 获取图像数据
|
||
const imageData = await imageDataProvider(obj.imageRef);
|
||
if (imageData) {
|
||
obj.src = imageData;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 处理背景图像引用
|
||
if (json.backgroundImage && json.backgroundImage.imageRef && imageDataProvider) {
|
||
const bgImageData = await imageDataProvider(json.backgroundImage.imageRef);
|
||
if (bgImageData) {
|
||
json.backgroundImage.src = bgImageData;
|
||
}
|
||
}
|
||
|
||
// 使用fabric.js的loadFromJSON方法恢复画布
|
||
return new Promise(resolve => {
|
||
this.canvas.loadFromJSON(json, () => {
|
||
// 恢复选中状态
|
||
if (json.metadata && json.metadata.activeObjectIds && json.metadata.activeObjectIds.length > 0) {
|
||
const objectsToSelect = [];
|
||
json.metadata.activeObjectIds.forEach(id => {
|
||
const obj = this.canvas.getObjects().find(o => o.id === id);
|
||
if (obj) objectsToSelect.push(obj);
|
||
});
|
||
|
||
if (objectsToSelect.length === 1) {
|
||
this.canvas.setActiveObject(objectsToSelect[0]);
|
||
} else if (objectsToSelect.length > 1) {
|
||
const selection = new fabric.ActiveSelection(objectsToSelect, {
|
||
canvas: this.canvas
|
||
});
|
||
this.canvas.setActiveObject(selection);
|
||
}
|
||
}
|
||
|
||
// 设置画布尺寸
|
||
if (json.metadata && json.metadata.canvasSize) {
|
||
this.originalSize = json.metadata.canvasSize;
|
||
}
|
||
|
||
// 更新图层引用
|
||
this.layers = new Map();
|
||
this.canvas.getObjects().forEach(obj => {
|
||
if (obj.id) {
|
||
this.layers.set(obj.id, obj);
|
||
}
|
||
});
|
||
|
||
this.canvas.renderAll();
|
||
|
||
resolve(true);
|
||
});
|
||
});
|
||
} catch (error) {
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 控制面板类
|
||
class ControlPanel {
|
||
constructor(canvas, node) {
|
||
this.canvas = canvas; // fabric.js canvas 实例
|
||
this.node = node; // ComfyUI 节点实例
|
||
this.container = this.createContainer();
|
||
this.currentLayerId = null; // 当前选中的图层ID
|
||
this.maxLayerId = 0; // 最大图层ID
|
||
this.textPanelVisible = false; // 文字面板可见性状态
|
||
this.initializeControls();
|
||
}
|
||
|
||
// 创建控制面板容器
|
||
createContainer() {
|
||
const container = document.createElement('div');
|
||
container.className = 'fast-canvas-control-panel';
|
||
container.style.cssText = `
|
||
position: absolute;
|
||
bottom: -5px; // 将bottom设为负值，使控制面板向下移动
|
||
left: 0;
|
||
width: 100%;
|
||
height: ${CANVAS_SIZE.CONTROL_PANEL_HEIGHT}px;
|
||
background-color: #353535;
|
||
padding: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
box-sizing: border-box;
|
||
`;
|
||
return container;
|
||
}
|
||
|
||
// 创建按钮
|
||
createButton(text, onClick) {
|
||
const button = document.createElement('button');
|
||
button.textContent = text;
|
||
button.style.cssText = `
|
||
padding: 5px 10px;
|
||
height: 28px;
|
||
line-height: 18px;
|
||
background: #444;
|
||
border: 1px solid #666;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
`;
|
||
button.onclick = onClick;
|
||
return button;
|
||
}
|
||
|
||
// 创建数字输入框
|
||
createNumberInput(placeholder, defaultValue, onInput) {
|
||
const input = document.createElement('input');
|
||
input.type = 'number';
|
||
input.placeholder = placeholder;
|
||
|
||
input.style.cssText = `
|
||
padding: 5px 10px;
|
||
height: 28px;
|
||
line-height: 18px;
|
||
background: #333;
|
||
border: 1px solid #666;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
width: 80px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
`;
|
||
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
input[type="number"]::-webkit-inner-spin-button,
|
||
input[type="number"]::-webkit-outer-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
input[type="number"] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
input[type="number"]::placeholder {
|
||
color: #888;
|
||
opacity: 1;
|
||
text-align: center;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
input.dataset.defaultValue = defaultValue;
|
||
input.oninput = (e) => {
|
||
const value = parseInt(e.target.value);
|
||
if (value > 0) {
|
||
onInput(e);
|
||
} else {
|
||
e.target.value = input.dataset.defaultValue;
|
||
onInput({ target: { value: input.dataset.defaultValue } });
|
||
}
|
||
};
|
||
return input;
|
||
}
|
||
// 创建图层选择器
|
||
createLayerSelector() {
|
||
const container = document.createElement('div');
|
||
container.className = 'layer-selector';
|
||
container.style.cssText = `
|
||
position: relative;
|
||
display: inline-block;
|
||
`;
|
||
|
||
const button = document.createElement('button');
|
||
button.className = 'layer-selector-btn';
|
||
button.style.cssText = `
|
||
padding: 5px 8px;
|
||
height: 28px;
|
||
background: #444;
|
||
border: 1px solid #666;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 80px;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
`;
|
||
|
||
const buttonText = document.createElement('span');
|
||
buttonText.textContent = '图层';
|
||
button.appendChild(buttonText);
|
||
|
||
const arrow = document.createElement('span');
|
||
arrow.textContent = '▼';
|
||
arrow.style.marginLeft = '5px';
|
||
button.appendChild(arrow);
|
||
|
||
const dropdown = document.createElement('div');
|
||
dropdown.className = 'layer-dropdown';
|
||
dropdown.style.cssText = `
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
background: #2a2a2a;
|
||
border: 1px solid #666;
|
||
border-radius: 4px;
|
||
display: none;
|
||
z-index: 1000;
|
||
min-width: 100%;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
`;
|
||
|
||
// 点击按钮显示/隐藏下拉菜单
|
||
button.onclick = (e) => {
|
||
e.stopPropagation();
|
||
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
|
||
};
|
||
|
||
// 点击其他地方关闭下拉菜单
|
||
document.addEventListener('click', () => {
|
||
dropdown.style.display = 'none';
|
||
});
|
||
|
||
container.appendChild(button);
|
||
container.appendChild(dropdown);
|
||
|
||
// 保存引用以便更新
|
||
this.layerButton = button;
|
||
this.layerButtonText = buttonText;
|
||
this.layerDropdown = dropdown;
|
||
|
||
return container;
|
||
}
|
||
|
||
// 更新图层选择器
|
||
updateLayerSelector() {
|
||
const dropdown = this.layerDropdown;
|
||
dropdown.innerHTML = '';
|
||
|
||
// 获取所有图层，保持原有顺序
|
||
const layers = Array.from(this.canvas.getObjects())
|
||
.filter(obj => obj !== this.canvas.backgroundImage && obj.id);
|
||
|
||
// 获取当前选中的图层
|
||
const activeObject = this.canvas.getActiveObject();
|
||
if (activeObject && activeObject !== this.canvas.backgroundImage) {
|
||
this.currentLayerId = activeObject.id;
|
||
}
|
||
|
||
// 更新按钮文本
|
||
this.layerButtonText.textContent = this.currentLayerId ?
|
||
`图层 ${this.currentLayerId}` : '图层';
|
||
|
||
// 创建下拉选项
|
||
layers.forEach(layer => {
|
||
if (layer.id !== this.currentLayerId) {
|
||
const option = document.createElement('div');
|
||
option.className = 'layer-option';
|
||
option.textContent = `图层 ${layer.id}`;
|
||
option.style.cssText = `
|
||
padding: 5px 10px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
&:hover {
|
||
background: #444;
|
||
}
|
||
`;
|
||
|
||
option.onclick = (e) => {
|
||
e.stopPropagation();
|
||
|
||
// 只选中图层，不改变叠加顺序
|
||
this.canvas.setActiveObject(layer);
|
||
this.currentLayerId = layer.id;
|
||
this.updateLayerSelector();
|
||
|
||
// 触发画布更新，但不改变图层顺序
|
||
this.canvas.requestRenderAll();
|
||
|
||
this.layerDropdown.style.display = 'none';
|
||
};
|
||
|
||
dropdown.appendChild(option);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 创建设置弹窗
|
||
createSettingsDialog() {
|
||
const dialog = document.createElement('dialog');
|
||
dialog.style.cssText = `
|
||
background: #353535;
|
||
border: 1px solid #666;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
padding: 20px;
|
||
min-width: 300px;
|
||
`;
|
||
|
||
const title = document.createElement('h3');
|
||
title.textContent = '设置';
|
||
title.style.cssText = `
|
||
margin: 0 0 20px 0;
|
||
font-size: 16px;
|
||
`;
|
||
|
||
// 创建设置项容器
|
||
const settingsContainer = document.createElement('div');
|
||
settingsContainer.style.cssText = `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
`;
|
||
|
||
// 窗口最大尺寸设置项
|
||
const maxSizeInput = this.createNumberInput('最大尺寸', 1024, (e) => {
|
||
const maxSize = parseInt(e.target.value);
|
||
if (maxSize > 0) {
|
||
this.node.canvasInstance.updateDisplayScale(maxSize);
|
||
}
|
||
});
|
||
const maxSizeItem = this.createSettingItem(
|
||
'窗口最大尺寸:',
|
||
'限制画布显示尺寸',
|
||
maxSizeInput
|
||
);
|
||
|
||
const buttonContainer = document.createElement('div');
|
||
buttonContainer.style.cssText = `
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
`;
|
||
|
||
const saveButton = this.createButton('保存', () => {
|
||
dialog.close();
|
||
});
|
||
|
||
const cancelButton = this.createButton('取消', () => {
|
||
dialog.close();
|
||
});
|
||
|
||
settingsContainer.appendChild(maxSizeItem);
|
||
buttonContainer.appendChild(cancelButton);
|
||
buttonContainer.appendChild(saveButton);
|
||
|
||
dialog.appendChild(title);
|
||
dialog.appendChild(settingsContainer);
|
||
dialog.appendChild(buttonContainer);
|
||
|
||
return dialog;
|
||
}
|
||
|
||
// 创建单个设置项
|
||
createSettingItem(labelText, tooltipText, inputElement) {
|
||
const container = document.createElement('div');
|
||
container.style.cssText = `
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
position: relative;
|
||
`;
|
||
|
||
const label = document.createElement('label');
|
||
label.style.cssText = `
|
||
flex: 1;
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
`;
|
||
label.textContent = labelText;
|
||
|
||
// 添加问号图标
|
||
const helpIcon = document.createElement('span');
|
||
helpIcon.textContent = '?';
|
||
helpIcon.style.cssText = `
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
background: #666;
|
||
font-size: 12px;
|
||
cursor: help;
|
||
`;
|
||
|
||
// 创建tooltip
|
||
const tooltip = document.createElement('div');
|
||
tooltip.textContent = tooltipText;
|
||
tooltip.style.cssText = `
|
||
position: absolute;
|
||
background: #1a1a1a;
|
||
border: 1px solid #666;
|
||
border-radius: 4px;
|
||
padding: 8px 12px;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
width: max-content;
|
||
max-width: 200px;
|
||
left: 0;
|
||
top: -45px;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 0.2s, visibility 0.2s;
|
||
z-index: 1000;
|
||
line-height: 1.4;
|
||
pointer-events: none;
|
||
`;
|
||
|
||
// 添加悬停事件
|
||
helpIcon.addEventListener('mouseenter', () => {
|
||
tooltip.style.opacity = '1';
|
||
tooltip.style.visibility = 'visible';
|
||
});
|
||
|
||
helpIcon.addEventListener('mouseleave', () => {
|
||
tooltip.style.opacity = '0';
|
||
tooltip.style.visibility = 'hidden';
|
||
});
|
||
|
||
label.appendChild(helpIcon);
|
||
container.appendChild(label);
|
||
container.appendChild(inputElement);
|
||
container.appendChild(tooltip);
|
||
|
||
return container;
|
||
}
|
||
|
||
// 创建文字功能面板
|
||
createTextPanel() {
|
||
const panel = document.createElement('div');
|
||
panel.className = 'text-function-panel';
|
||
panel.style.cssText = `
|
||
position: absolute;
|
||
top: calc(100% + 5px);
|
||
left: 0;
|
||
width: 100%;
|
||
background-color: #353535;
|
||
padding: 10px;
|
||
display: none;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
border-top: 1px solid #666;
|
||
border-radius: 8px;
|
||
z-index: 100;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
`;
|
||
|
||
// 添加文字按钮
|
||
const addTextBtn = this.createButton('添加文字', () => {
|
||
const text = new fabric.IText('双击编辑文字', {
|
||
fontSize: 48,
|
||
fill: '#ffffff',
|
||
fontFamily: 'Arial',
|
||
originX: 'center',
|
||
originY: 'center'
|
||
});
|
||
|
||
// 为新添加的文本对象分配ID
|
||
this.maxLayerId++;
|
||
text.id = this.maxLayerId;
|
||
|
||
// 获取画布中心点
|
||
const canvasCenter = this.canvas.getCenter();
|
||
text.set({
|
||
left: canvasCenter.left,
|
||
top: canvasCenter.top
|
||
});
|
||
|
||
this.canvas.add(text);
|
||
this.canvas.setActiveObject(text);
|
||
this.currentLayerId = text.id;
|
||
this.updateLayerSelector();
|
||
this.canvas.renderAll();
|
||
});
|
||
|
||
// 字体选择器
|
||
const fontSelector = document.createElement('select');
|
||
fontSelector.style.cssText = `
|
||
padding: 5px 10px;
|
||
height: 28px;
|
||
background: #444;
|
||
border: 1px solid #666;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
min-width: 100px;
|
||
`;
|
||
|
||
const fonts = ['Arial', 'Times New Roman', 'Courier New', '宋体', '黑体', '微软雅黑'];
|
||
fonts.forEach(font => {
|
||
const option = document.createElement('option');
|
||
option.value = font;
|
||
option.textContent = font;
|
||
fontSelector.appendChild(option);
|
||
});
|
||
|
||
fontSelector.oninput = () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('fontFamily', fontSelector.value);
|
||
this.canvas.renderAll();
|
||
}
|
||
};
|
||
|
||
// 字号选择器
|
||
const sizeSelector = document.createElement('select');
|
||
sizeSelector.style.cssText = `
|
||
padding: 5px 10px;
|
||
height: 28px;
|
||
background: #444;
|
||
border: 1px solid #666;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
min-width: 60px;
|
||
`;
|
||
|
||
const sizes = [12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72];
|
||
sizes.forEach(size => {
|
||
const option = document.createElement('option');
|
||
option.value = size;
|
||
option.textContent = size;
|
||
sizeSelector.appendChild(option);
|
||
});
|
||
|
||
sizeSelector.oninput = () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('fontSize', parseInt(sizeSelector.value));
|
||
this.canvas.renderAll();
|
||
}
|
||
};
|
||
|
||
// 文字颜色选择器
|
||
const colorPicker = document.createElement('input');
|
||
colorPicker.type = 'color';
|
||
colorPicker.value = '#ffffff';
|
||
colorPicker.style.cssText = `
|
||
width: 28px;
|
||
height: 28px;
|
||
padding: 0;
|
||
border: 1px solid #666;
|
||
border-radius: 4px;
|
||
background: #444;
|
||
cursor: pointer;
|
||
`;
|
||
|
||
colorPicker.oninput = () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('fill', colorPicker.value);
|
||
this.canvas.renderAll();
|
||
}
|
||
};
|
||
|
||
// 背景色选择器
|
||
const bgColorPicker = document.createElement('input');
|
||
bgColorPicker.type = 'color';
|
||
bgColorPicker.value = '#000000';
|
||
bgColorPicker.style.cssText = `
|
||
width: 28px;
|
||
height: 28px;
|
||
padding: 0;
|
||
border: 1px solid #666;
|
||
border-radius: 4px;
|
||
background: #444;
|
||
cursor: pointer;
|
||
`;
|
||
|
||
const bgColorLabel = document.createElement('span');
|
||
bgColorLabel.textContent = '背景';
|
||
bgColorLabel.style.cssText = `
|
||
color: #fff;
|
||
font-size: 12px;
|
||
margin-right: 4px;
|
||
`;
|
||
|
||
const bgColorContainer = document.createElement('div');
|
||
bgColorContainer.style.cssText = `
|
||
display: flex;
|
||
align-items: center;
|
||
`;
|
||
bgColorContainer.appendChild(bgColorLabel);
|
||
bgColorContainer.appendChild(bgColorPicker);
|
||
|
||
bgColorPicker.oninput = () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('backgroundColor', bgColorPicker.value);
|
||
this.canvas.renderAll();
|
||
}
|
||
};
|
||
|
||
// 文字样式按钮组
|
||
const styleContainer = document.createElement('div');
|
||
styleContainer.style.cssText = `
|
||
display: flex;
|
||
gap: 5px;
|
||
`;
|
||
|
||
// 加粗按钮
|
||
const boldBtn = this.createButton('B', () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('fontWeight', activeObj.fontWeight === 'bold' ? 'normal' : 'bold');
|
||
this.canvas.renderAll();
|
||
boldBtn.style.background = activeObj.fontWeight === 'bold' ? '#666' : '#444';
|
||
}
|
||
});
|
||
boldBtn.style.fontWeight = 'bold';
|
||
boldBtn.style.padding = '5px 8px';
|
||
|
||
// 斜体按钮
|
||
const italicBtn = this.createButton('I', () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('fontStyle', activeObj.fontStyle === 'italic' ? 'normal' : 'italic');
|
||
this.canvas.renderAll();
|
||
italicBtn.style.background = activeObj.fontStyle === 'italic' ? '#666' : '#444';
|
||
}
|
||
});
|
||
italicBtn.style.fontStyle = 'italic';
|
||
italicBtn.style.padding = '5px 8px';
|
||
|
||
// 下划线按钮
|
||
const underlineBtn = this.createButton('U', () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('underline', !activeObj.underline);
|
||
this.canvas.renderAll();
|
||
underlineBtn.style.background = activeObj.underline ? '#666' : '#444';
|
||
}
|
||
});
|
||
underlineBtn.style.textDecoration = 'underline';
|
||
underlineBtn.style.padding = '5px 8px';
|
||
|
||
styleContainer.appendChild(boldBtn);
|
||
styleContainer.appendChild(italicBtn);
|
||
styleContainer.appendChild(underlineBtn);
|
||
|
||
// 字间距控制
|
||
const charSpacingLabel = document.createElement('span');
|
||
charSpacingLabel.textContent = '字间距';
|
||
charSpacingLabel.style.cssText = `
|
||
color: #fff;
|
||
font-size: 12px;
|
||
margin-right: 4px;
|
||
`;
|
||
|
||
const charSpacingInput = document.createElement('input');
|
||
charSpacingInput.type = 'number';
|
||
charSpacingInput.min = '0';
|
||
charSpacingInput.max = '1000';
|
||
charSpacingInput.value = '0';
|
||
charSpacingInput.style.cssText = `
|
||
width: 50px;
|
||
padding: 3px;
|
||
background: #444;
|
||
border: 1px solid #666;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
`;
|
||
|
||
const charSpacingContainer = document.createElement('div');
|
||
charSpacingContainer.style.cssText = `
|
||
display: flex;
|
||
align-items: center;
|
||
`;
|
||
charSpacingContainer.appendChild(charSpacingLabel);
|
||
charSpacingContainer.appendChild(charSpacingInput);
|
||
|
||
charSpacingInput.oninput = () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('charSpacing', parseInt(charSpacingInput.value));
|
||
this.canvas.renderAll();
|
||
}
|
||
};
|
||
|
||
// 行间距控制
|
||
const lineHeightLabel = document.createElement('span');
|
||
lineHeightLabel.textContent = '行间距';
|
||
lineHeightLabel.style.cssText = `
|
||
color: #fff;
|
||
font-size: 12px;
|
||
margin-right: 4px;
|
||
`;
|
||
|
||
const lineHeightInput = document.createElement('input');
|
||
lineHeightInput.type = 'number';
|
||
lineHeightInput.min = '0';
|
||
lineHeightInput.max = '10';
|
||
lineHeightInput.step = '0.1';
|
||
lineHeightInput.value = '1';
|
||
lineHeightInput.style.cssText = `
|
||
width: 50px;
|
||
padding: 3px;
|
||
background: #444;
|
||
border: 1px solid #666;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
`;
|
||
|
||
const lineHeightContainer = document.createElement('div');
|
||
lineHeightContainer.style.cssText = `
|
||
display: flex;
|
||
align-items: center;
|
||
`;
|
||
lineHeightContainer.appendChild(lineHeightLabel);
|
||
lineHeightContainer.appendChild(lineHeightInput);
|
||
|
||
lineHeightInput.oninput = () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('lineHeight', parseFloat(lineHeightInput.value));
|
||
this.canvas.renderAll();
|
||
}
|
||
};
|
||
|
||
// 描边控制
|
||
const strokeLabel = document.createElement('span');
|
||
strokeLabel.textContent = '描边';
|
||
strokeLabel.style.cssText = `
|
||
color: #fff;
|
||
font-size: 12px;
|
||
margin-right: 4px;
|
||
`;
|
||
|
||
const strokeColorPicker = document.createElement('input');
|
||
strokeColorPicker.type = 'color';
|
||
strokeColorPicker.value = '#000000';
|
||
strokeColorPicker.style.cssText = `
|
||
width: 28px;
|
||
height: 28px;
|
||
padding: 0;
|
||
border: 1px solid #666;
|
||
border-radius: 4px;
|
||
background: #444;
|
||
cursor: pointer;
|
||
margin-right: 4px;
|
||
`;
|
||
|
||
const strokeWidthInput = document.createElement('input');
|
||
strokeWidthInput.type = 'number';
|
||
strokeWidthInput.min = '0';
|
||
strokeWidthInput.max = '10';
|
||
strokeWidthInput.step = '0.5';
|
||
strokeWidthInput.value = '0';
|
||
strokeWidthInput.style.cssText = `
|
||
width: 40px;
|
||
padding: 3px;
|
||
background: #444;
|
||
border: 1px solid #666;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
`;
|
||
|
||
const strokeContainer = document.createElement('div');
|
||
strokeContainer.style.cssText = `
|
||
display: flex;
|
||
align-items: center;
|
||
`;
|
||
strokeContainer.appendChild(strokeLabel);
|
||
strokeContainer.appendChild(strokeColorPicker);
|
||
strokeContainer.appendChild(strokeWidthInput);
|
||
|
||
strokeColorPicker.oninput = () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('stroke', strokeColorPicker.value);
|
||
this.canvas.renderAll();
|
||
}
|
||
};
|
||
|
||
strokeWidthInput.oninput = () => {
|
||
const activeObj = this.canvas.getActiveObject();
|
||
if (activeObj && activeObj.type === 'i-text') {
|
||
activeObj.set('strokeWidth', parseFloat(strokeWidthInput.value));
|
||
this.canvas.renderAll();
|
||
}
|
||
};
|
||
|
||
|
||
|
||
// 添加所有控件到面板
|
||
panel.appendChild(addTextBtn);
|
||
panel.appendChild(fontSelector);
|
||
panel.appendChild(sizeSelector);
|
||
panel.appendChild(colorPicker);
|
||
panel.appendChild(bgColorContainer);
|
||
panel.appendChild(styleContainer);
|
||
panel.appendChild(charSpacingContainer);
|
||
panel.appendChild(lineHeightContainer);
|
||
panel.appendChild(strokeContainer);
|
||
|
||
|
||
|
||
// 监听文本对象选择事件，更新控件状态
|
||
this.canvas.on('selection:created', (e) => {
|
||
const obj = e.selected[0];
|
||
if (obj && obj.type === 'i-text') {
|
||
fontSelector.value = obj.fontFamily;
|
||
sizeSelector.value = obj.fontSize;
|
||
colorPicker.value = obj.fill;
|
||
bgColorPicker.value = obj.backgroundColor || '#000000';
|
||
boldBtn.style.background = obj.fontWeight === 'bold' ? '#666' : '#444';
|
||
italicBtn.style.background = obj.fontStyle === 'italic' ? '#666' : '#444';
|
||
underlineBtn.style.background = obj.underline ? '#666' : '#444';
|
||
charSpacingInput.value = obj.charSpacing || 0;
|
||
lineHeightInput.value = obj.lineHeight || 1.2;
|
||
strokeWidthInput.value = obj.strokeWidth || 0;
|
||
strokeColorPicker.value = obj.stroke || '#000000';
|
||
}
|
||
});
|
||
|
||
this.canvas.on('selection:updated', (e) => {
|
||
const obj = e.selected[0];
|
||
if (obj && obj.type === 'i-text') {
|
||
fontSelector.value = obj.fontFamily;
|
||
sizeSelector.value = obj.fontSize;
|
||
colorPicker.value = obj.fill;
|
||
bgColorPicker.value = obj.backgroundColor || '#000000';
|
||
boldBtn.style.background = obj.fontWeight === 'bold' ? '#666' : '#444';
|
||
italicBtn.style.background = obj.fontStyle === 'italic' ? '#666' : '#444';
|
||
underlineBtn.style.background = obj.underline ? '#666' : '#444';
|
||
charSpacingInput.value = obj.charSpacing || 0;
|
||
lineHeightInput.value = obj.lineHeight || 1.2;
|
||
strokeWidthInput.value = obj.strokeWidth || 0;
|
||
strokeColorPicker.value = obj.stroke || '#000000';
|
||
}
|
||
});
|
||
|
||
return panel;
|
||
}
|
||
|
||
// 切换文字功能面板显示状态
|
||
toggleTextPanel() {
|
||
if (!this.textPanel) {
|
||
this.textPanel = this.createTextPanel();
|
||
this.node.canvasElement.appendChild(this.textPanel);
|
||
}
|
||
|
||
this.textPanelVisible = !this.textPanelVisible;
|
||
this.textPanel.style.display = this.textPanelVisible ? 'flex' : 'none';
|
||
}
|
||
|
||
initializeControls() {
|
||
const layerSelector = this.createLayerSelector();
|
||
this.container.appendChild(layerSelector);
|
||
|
||
const loadButton = this.createButton('加载', () => {
|
||
if (this.node.id) {
|
||
queueManager.queueOutputNodes([this.node.id]);
|
||
}
|
||
});
|
||
|
||
// 添加文字功能按钮
|
||
const textButton = this.createButton('文字', () => {
|
||
this.toggleTextPanel();
|
||
});
|
||
|
||
const resetButton = this.createButton('重置', () => {
|
||
if (this.node.id) {
|
||
// 保存当前节点的状态
|
||
const currentNode = this.node;
|
||
const currentSize = [...currentNode.size];
|
||
const currentPos = [...currentNode.pos];
|
||
const currentOriginalSize = {...currentNode.canvasInstance.originalSize};
|
||
const currentMaxDisplaySize = currentNode.canvasInstance.maxDisplaySize;
|
||
|
||
// 获取当前节点的存储键和尺寸
|
||
const STORAGE_KEY = 'canvas_size_';
|
||
const savedSize = localStorage.getItem(STORAGE_KEY + currentNode.id);
|
||
|
||
// 创建新节点
|
||
let new_node = LiteGraph.createNode("FastCanvas");
|
||
new_node.pos = currentPos;
|
||
app.graph.add(new_node, false);
|
||
|
||
requestAnimationFrame(() => {
|
||
// 复制节点信息（包括连接）
|
||
node_info_copy(currentNode, new_node, true);
|
||
|
||
if (new_node.canvasInstance) {
|
||
// 设置画布实例的属性
|
||
new_node.canvasInstance.originalSize = currentOriginalSize;
|
||
new_node.canvasInstance.maxDisplaySize = currentMaxDisplaySize;
|
||
|
||
// 保持原有尺寸
|
||
new_node.size = currentSize;
|
||
|
||
// 如果有保存的尺寸，转移到新节点
|
||
if (savedSize) {
|
||
localStorage.setItem(STORAGE_KEY + new_node.id, savedSize);
|
||
// 删除旧节点的存储
|
||
localStorage.removeItem(STORAGE_KEY + currentNode.id);
|
||
}
|
||
|
||
// 设置画布容器尺寸
|
||
if (new_node.canvasElement) {
|
||
const width = currentOriginalSize.width;
|
||
const height = currentOriginalSize.height;
|
||
|
||
// 计算缩放后的尺寸
|
||
const scaledSize = new_node.canvasInstance.calculateScaledSize(
|
||
width,
|
||
height,
|
||
currentMaxDisplaySize
|
||
);
|
||
|
||
// 更新画布容器尺寸
|
||
new_node.canvasElement.style.width = `${scaledSize.width}px`;
|
||
new_node.canvasElement.style.height = `${scaledSize.height + CANVAS_SIZE.CONTROL_PANEL_HEIGHT}px`;
|
||
|
||
// 更新画布尺寸
|
||
if (new_node.canvasInstance.canvas) {
|
||
new_node.canvasInstance.updateCanvasSize(
|
||
scaledSize.width,
|
||
scaledSize.height
|
||
);
|
||
}
|
||
|
||
// 更新尺寸输入框显示
|
||
if (new_node.sizeOverlay?.updateSizeInputs) {
|
||
new_node.sizeOverlay.updateSizeInputs(width, height);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 更新画布
|
||
app.graph.setDirtyCanvas(true, true);
|
||
// 移除旧节点
|
||
app.graph.remove(currentNode);
|
||
});
|
||
}
|
||
});
|
||
|
||
const settingsButton = this.createButton('⚙️', () => {
|
||
const dialog = this.createSettingsDialog();
|
||
document.body.appendChild(dialog);
|
||
dialog.showModal();
|
||
dialog.addEventListener('close', () => {
|
||
document.body.removeChild(dialog);
|
||
});
|
||
});
|
||
settingsButton.style.padding = '5px 8px';
|
||
|
||
// 添加控件到容器
|
||
this.container.appendChild(loadButton);
|
||
this.container.appendChild(textButton); // 添加文字按钮
|
||
this.container.appendChild(resetButton);
|
||
this.container.appendChild(settingsButton);
|
||
|
||
// 监听画布选择变化
|
||
this.canvas.on('selection:created', (e) => {
|
||
const obj = e.selected[0];
|
||
if (obj && obj !== this.canvas.backgroundImage) {
|
||
this.currentLayerId = obj.id;
|
||
this.updateLayerSelector();
|
||
}
|
||
});
|
||
|
||
this.canvas.on('selection:updated', (e) => {
|
||
const obj = e.selected[0];
|
||
if (obj && obj !== this.canvas.backgroundImage) {
|
||
this.currentLayerId = obj.id;
|
||
this.updateLayerSelector();
|
||
}
|
||
});
|
||
|
||
this.canvas.on('selection:cleared', () => {
|
||
this.currentLayerId = null;
|
||
this.updateLayerSelector();
|
||
});
|
||
}
|
||
// 获取控制面板容器
|
||
getContainer() {
|
||
return this.container;
|
||
}
|
||
|
||
// 更新控制面板尺寸
|
||
updateSize(width) {
|
||
this.container.style.width = `${width}px`;
|
||
}
|
||
// 更新图层ID
|
||
updateLayerIds() {
|
||
const objects = this.canvas.getObjects();
|
||
let maxId = this.maxLayerId;
|
||
|
||
objects.forEach(obj => {
|
||
if (obj !== this.canvas.backgroundImage) {
|
||
if (!obj.id) {
|
||
// 为新图层分配ID
|
||
maxId++;
|
||
obj.id = maxId;
|
||
}
|
||
}
|
||
});
|
||
|
||
this.maxLayerId = maxId;
|
||
|
||
// 更新当前选中的图层ID
|
||
const activeObject = this.canvas.getActiveObject();
|
||
if (activeObject && activeObject !== this.canvas.backgroundImage) {
|
||
this.currentLayerId = activeObject.id;
|
||
}
|
||
|
||
this.updateLayerSelector();
|
||
}
|
||
|
||
// 设置背景时移除图层ID
|
||
removeLayerId(obj) {
|
||
if (obj.id) {
|
||
delete obj.id;
|
||
if (this.currentLayerId === obj.id) {
|
||
this.currentLayerId = null;
|
||
}
|
||
this.updateLayerSelector();
|
||
}
|
||
}
|
||
}
|
||
|
||
// 创建覆盖层扩展
|
||
class FastCanvasOverlay {
|
||
static createOverlay(node) {
|
||
|
||
// 创建覆盖层容器
|
||
const overlayContainer = document.createElement("div");
|
||
overlayContainer.style.cssText = `
|
||
position: absolute;
|
||
left: 0;
|
||
top: -35px;
|
||
width: 100%;
|
||
height: ${CANVAS_SIZE.CONTROL_PANEL_HEIGHT}px;
|
||
background: #353535;
|
||
display: flex;
|
||
gap: 10px;
|
||
padding: 10px;
|
||
z-index: 10;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
`;
|
||
|
||
// 创建输入框样式
|
||
const inputStyle = `
|
||
padding: 5px 10px;
|
||
height: 28px;
|
||
line-height: 18px;
|
||
background: #333;
|
||
border: 1px solid #666;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
width: 60px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
`;
|
||
|
||
// 创建按钮样式
|
||
const buttonStyle = `
|
||
padding: 5px 10px;
|
||
height: 28px;
|
||
line-height: 18px;
|
||
background: #444;
|
||
border: 1px solid #666;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
`;
|
||
|
||
const STORAGE_KEY = 'canvas_size_';
|
||
|
||
// 从本地存储中获取保存的尺寸
|
||
const savedSize = localStorage.getItem(STORAGE_KEY + node.id);
|
||
const initialSize = savedSize ? JSON.parse(savedSize) : {
|
||
width: node.canvasInstance.originalSize.width,
|
||
height: node.canvasInstance.originalSize.height
|
||
};
|
||
|
||
// 创建宽度输入框时使用保存的值
|
||
const widthInput = document.createElement("input");
|
||
widthInput.type = "number";
|
||
widthInput.id = "canvas-width";
|
||
widthInput.placeholder = "宽度";
|
||
widthInput.value = initialSize.width; // 使用保存的宽度
|
||
widthInput.style.cssText = inputStyle;
|
||
|
||
// 创建高度输入框时使用保存的值
|
||
const heightInput = document.createElement("input");
|
||
heightInput.type = "number";
|
||
heightInput.id = "canvas-height";
|
||
heightInput.placeholder = "高度";
|
||
heightInput.value = initialSize.height; // 使用保存的高度
|
||
heightInput.style.cssText = inputStyle;
|
||
// 更新尺寸显示函数（显示实际尺寸）
|
||
const updateSizeInputs = (width, height) => {
|
||
widthInput.value = width;
|
||
heightInput.value = height;
|
||
};
|
||
|
||
// 创建更新按钮
|
||
const updateButton = document.createElement("button");
|
||
updateButton.textContent = "更新尺寸";
|
||
updateButton.style.cssText = buttonStyle;
|
||
updateButton.onclick = async () => {
|
||
if (!node.canvasInstance?.canvas) return;
|
||
|
||
let customWidth = parseInt(widthInput.value, 10);
|
||
let customHeight = parseInt(heightInput.value, 10);
|
||
|
||
if (isNaN(customWidth) && isNaN(customHeight)) {
|
||
console.warn('[FastCanvas] 无效的尺寸输入');
|
||
return;
|
||
}
|
||
|
||
// 获取当前背景尺寸
|
||
const currentBg = node.canvasInstance.canvas.backgroundImage;
|
||
const currentWidth = currentBg ? currentBg.width : node.canvasInstance.originalSize.width;
|
||
const currentHeight = currentBg ? currentBg.height : node.canvasInstance.originalSize.height;
|
||
|
||
// 处理按边等比例缩放
|
||
if (customWidth === 0 && customHeight > 0) {
|
||
// 按高度等比例计算宽度
|
||
const ratio = customHeight / currentHeight;
|
||
customWidth = Math.round(currentWidth * ratio);
|
||
} else if (customHeight === 0 && customWidth > 0) {
|
||
// 按宽度等比例计算高度
|
||
const ratio = customWidth / currentWidth;
|
||
customHeight = Math.round(currentHeight * ratio);
|
||
} else if (customWidth === 0 && customHeight === 0) {
|
||
console.warn('[FastCanvas] 宽度和高度不能同时为0');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 1. 确保尺寸能被8整除
|
||
const adjustedWidth = Math.floor(customWidth / 8) * 8;
|
||
const adjustedHeight = Math.floor(customHeight / 8) * 8;
|
||
|
||
// 2. 更新原始尺寸
|
||
node.canvasInstance.originalSize = {
|
||
width: adjustedWidth,
|
||
height: adjustedHeight
|
||
};
|
||
|
||
// 3. 计算显示尺寸（应用限制窗口大小的功能）
|
||
const scaledSize = node.canvasInstance.calculateScaledSize(
|
||
adjustedWidth,
|
||
adjustedHeight,
|
||
node.canvasInstance.maxDisplaySize
|
||
);
|
||
|
||
// 4. 如果有现有背景，创建新的背景
|
||
const currentBg = node.canvasInstance.canvas.backgroundImage;
|
||
let newBackground;
|
||
|
||
if (currentBg) {
|
||
// 创建临时画布
|
||
const tempCanvas = document.createElement('canvas');
|
||
tempCanvas.width = adjustedWidth;
|
||
tempCanvas.height = adjustedHeight;
|
||
const ctx = tempCanvas.getContext('2d');
|
||
|
||
// 获取当前背景的原始尺寸
|
||
const origWidth = currentBg.width;
|
||
const origHeight = currentBg.height;
|
||
|
||
// 计算填充比例
|
||
const scaleX = adjustedWidth / origWidth;
|
||
const scaleY = adjustedHeight / origHeight;
|
||
const scale = Math.max(scaleX, scaleY); // 使用较大的缩放比例以填充
|
||
|
||
// 计算居中位置
|
||
const scaledWidth = origWidth * scale;
|
||
const scaledHeight = origHeight * scale;
|
||
const left = (adjustedWidth - scaledWidth) / 2;
|
||
const top = (adjustedHeight - scaledHeight) / 2;
|
||
|
||
// 先填充黑色背景
|
||
ctx.fillStyle = '#000000';
|
||
ctx.fillRect(0, 0, adjustedWidth, adjustedHeight);
|
||
|
||
// 绘制并居中裁剪背景
|
||
if (currentBg instanceof fabric.Image) {
|
||
// 如果是 Image 对象，使用 getElement()
|
||
ctx.drawImage(
|
||
currentBg.getElement(),
|
||
left, top, scaledWidth, scaledHeight
|
||
);
|
||
} else if (currentBg instanceof fabric.Rect) {
|
||
// 如果是 Rect 对象，创建一个新的临时画布来渲染矩形
|
||
const tempRectCanvas = document.createElement('canvas');
|
||
tempRectCanvas.width = origWidth;
|
||
tempRectCanvas.height = origHeight;
|
||
const tempCtx = tempRectCanvas.getContext('2d');
|
||
|
||
// 绘制矩形
|
||
tempCtx.fillStyle = currentBg.fill || '#000000';
|
||
tempCtx.fillRect(0, 0, origWidth, origHeight);
|
||
|
||
// 使用临时画布作为源
|
||
ctx.drawImage(
|
||
tempRectCanvas,
|
||
left, top, scaledWidth, scaledHeight
|
||
);
|
||
} else if (currentBg._element) {
|
||
// 如果有 _element 属性（某些 fabric 对象的情况）
|
||
ctx.drawImage(
|
||
currentBg._element,
|
||
left, top, scaledWidth, scaledHeight
|
||
);
|
||
} else {
|
||
// 如果都不是，填充黑色
|
||
ctx.fillStyle = '#000000';
|
||
ctx.fillRect(0, 0, adjustedWidth, adjustedHeight);
|
||
}
|
||
|
||
// 创建新的背景图像
|
||
newBackground = new fabric.Image(tempCanvas, {
|
||
width: adjustedWidth,
|
||
height: adjustedHeight,
|
||
left: 0,
|
||
top: 0,
|
||
selectable: false,
|
||
evented: false,
|
||
excludeFromExport: false,
|
||
originX: 'left',
|
||
originY: 'top'
|
||
});
|
||
} else {
|
||
// 如果没有背景，创建黑色矩形
|
||
newBackground = new fabric.Rect({
|
||
width: adjustedWidth,
|
||
height: adjustedHeight,
|
||
left: 0,
|
||
top: 0,
|
||
fill: '#000000',
|
||
selectable: false,
|
||
evented: false,
|
||
excludeFromExport: false
|
||
});
|
||
}
|
||
|
||
// 5. 设置新背景并等待完成
|
||
await new Promise(resolve => {
|
||
node.canvasInstance.canvas.setBackgroundImage(newBackground, resolve);
|
||
});
|
||
|
||
// 6. 更新背景引用
|
||
node.canvasInstance.background = newBackground;
|
||
|
||
// 7. 更新画布尺寸和缩放
|
||
node.canvasInstance.updateCanvasSize(scaledSize.width, scaledSize.height);
|
||
|
||
// 8. 更新输入框显示实际尺寸
|
||
widthInput.value = adjustedWidth;
|
||
heightInput.value = adjustedHeight;
|
||
localStorage.setItem(STORAGE_KEY + node.id, JSON.stringify({
|
||
width: adjustedWidth,
|
||
height: adjustedHeight
|
||
}));
|
||
|
||
|
||
} catch (error) {
|
||
console.error('[FastCanvas] 更新尺寸失败:', error);
|
||
}
|
||
};
|
||
|
||
// 创建颜色选择器
|
||
const colorInput = document.createElement("input");
|
||
colorInput.type = "color";
|
||
colorInput.value = "#000000";
|
||
colorInput.style.cssText = `
|
||
padding: 0;
|
||
width: 28px;
|
||
height: 28px;
|
||
background: #333;
|
||
border: 1px solid #666;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
`;
|
||
|
||
colorInput.oninput = (e) => {
|
||
const newColor = e.target.value;
|
||
if (node.canvasInstance?.canvas) {
|
||
// 创建新的纯色矩形背景
|
||
const newBackground = new fabric.Rect({
|
||
width: node.canvasInstance.originalSize.width,
|
||
height: node.canvasInstance.originalSize.height,
|
||
left: 0,
|
||
top: 0,
|
||
fill: newColor,
|
||
selectable: false,
|
||
evented: false,
|
||
excludeFromExport: false,
|
||
originX: 'left',
|
||
originY: 'top'
|
||
});
|
||
|
||
// 设置新背景
|
||
node.canvasInstance.canvas.setBackgroundImage(newBackground);
|
||
node.canvasInstance.background = newBackground;
|
||
node.canvasInstance.canvas.renderAll();
|
||
}
|
||
};
|
||
|
||
// 统一的样式规则
|
||
if (!document.getElementById('fast-canvas-overlay-styles')) {
|
||
const style = document.createElement('style');
|
||
style.id = 'fast-canvas-overlay-styles'; // 添加ID避免重复
|
||
style.textContent = `
|
||
input[type="number"]::-webkit-inner-spin-button,
|
||
input[type="number"]::-webkit-outer-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
input[type="number"] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
input[type="number"]::placeholder {
|
||
color: #888;
|
||
opacity: 1;
|
||
text-align: center;
|
||
}
|
||
input[type="color"]::-webkit-color-swatch-wrapper {
|
||
padding: 0;
|
||
}
|
||
input[type="color"]::-webkit-color-swatch {
|
||
border: none;
|
||
border-radius: 2px;
|
||
}
|
||
input[type="color"]::-moz-color-swatch {
|
||
border: none;
|
||
border-radius: 2px;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
}
|
||
|
||
// 创建文件输入框（隐藏）
|
||
const fileInput = document.createElement('input');
|
||
fileInput.type = 'file';
|
||
fileInput.accept = 'image/*';
|
||
fileInput.style.display = 'none';
|
||
|
||
// 创建上传按钮
|
||
const uploadButton = document.createElement("button");
|
||
uploadButton.textContent = "上传图片";
|
||
uploadButton.style.cssText = buttonStyle; // 使用已有的按钮样式
|
||
|
||
// 处理点击上传按钮
|
||
uploadButton.onclick = () => {
|
||
fileInput.click();
|
||
};
|
||
|
||
// 处理文件选择
|
||
fileInput.onchange = async (e) => {
|
||
const file = e.target.files[0];
|
||
if (file && node.canvasInstance) {
|
||
await node.canvasInstance.handleImageUpload(file);
|
||
}
|
||
// 清除文件选择，允许选择相同文件
|
||
fileInput.value = '';
|
||
};
|
||
const lockButton = document.createElement("button");
|
||
lockButton.innerHTML = '🔓'; // 默认未锁定状态
|
||
lockButton.style.cssText = buttonStyle;
|
||
lockButton.style.marginLeft = 'auto'; // 将按钮推到最右边
|
||
lockButton.dataset.locked = 'false';
|
||
|
||
const updateLockStyle = (isLocked) => {
|
||
if (isLocked) {
|
||
lockButton.innerHTML = '🔒';
|
||
lockButton.style.background = '#663c3c';
|
||
overlayContainer.classList.add('canvas-locked');
|
||
|
||
// 禁用控制按钮和输入
|
||
colorInput.disabled = true;
|
||
widthInput.disabled = true;
|
||
heightInput.disabled = true;
|
||
updateButton.disabled = true;
|
||
uploadButton.disabled = true;
|
||
|
||
if (node.canvasInstance?.canvas) {
|
||
const canvas = node.canvasInstance.canvas;
|
||
|
||
// 创建透明覆盖层
|
||
if (!canvas.lockOverlay) {
|
||
const overlayDiv = document.createElement('div');
|
||
overlayDiv.style.cssText = `
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1000;
|
||
background: transparent;
|
||
cursor: default;
|
||
`;
|
||
canvas.wrapperEl.appendChild(overlayDiv);
|
||
canvas.lockOverlay = overlayDiv;
|
||
}
|
||
|
||
canvas.selection = false;
|
||
canvas.skipTargetFind = true;
|
||
canvas.renderAll();
|
||
}
|
||
} else {
|
||
lockButton.innerHTML = '🔓';
|
||
lockButton.style.background = '#444';
|
||
overlayContainer.classList.remove('canvas-locked');
|
||
|
||
// 启用控制按钮和输入
|
||
colorInput.disabled = false;
|
||
widthInput.disabled = false;
|
||
heightInput.disabled = false;
|
||
updateButton.disabled = false;
|
||
uploadButton.disabled = false;
|
||
|
||
if (node.canvasInstance?.canvas) {
|
||
const canvas = node.canvasInstance.canvas;
|
||
|
||
// 移除覆盖层
|
||
if (canvas.lockOverlay) {
|
||
canvas.wrapperEl.removeChild(canvas.lockOverlay);
|
||
delete canvas.lockOverlay;
|
||
}
|
||
|
||
canvas.selection = true;
|
||
canvas.skipTargetFind = false;
|
||
canvas.renderAll();
|
||
}
|
||
}
|
||
};
|
||
|
||
// 添加点击事件
|
||
lockButton.onclick = () => {
|
||
const isLocked = lockButton.dataset.locked === 'true';
|
||
const newLockState = !isLocked;
|
||
lockButton.dataset.locked = newLockState.toString();
|
||
updateLockStyle(newLockState);
|
||
|
||
// 保存锁定状态到节点实例
|
||
if (node.canvasInstance) {
|
||
node.canvasInstance.isLocked = newLockState;
|
||
}
|
||
};
|
||
|
||
// 添加禁用状态的样式
|
||
const additionalStyles = `
|
||
.canvas-locked button:disabled,
|
||
.canvas-locked input:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.canvas-locked input[type="color"]:disabled {
|
||
pointer-events: none;
|
||
}
|
||
`;
|
||
|
||
// 添加样式到已有的样式表中
|
||
if (document.getElementById('fast-canvas-overlay-styles')) {
|
||
const styleElement = document.getElementById('fast-canvas-overlay-styles');
|
||
styleElement.textContent += additionalStyles;
|
||
}
|
||
// 将元素添加到容器
|
||
overlayContainer.appendChild(colorInput);
|
||
overlayContainer.appendChild(widthInput);
|
||
overlayContainer.appendChild(heightInput);
|
||
overlayContainer.appendChild(updateButton);
|
||
overlayContainer.appendChild(uploadButton);
|
||
overlayContainer.appendChild(fileInput);
|
||
overlayContainer.appendChild(lockButton);
|
||
|
||
// 保存更新函数引用
|
||
overlayContainer.updateSizeInputs = updateSizeInputs;
|
||
if (node.canvasInstance?.isLocked) {
|
||
lockButton.dataset.locked = 'false';
|
||
updateLockStyle(false);
|
||
}
|
||
return overlayContainer;
|
||
}
|
||
}
|
||
|
||
function node_info_copy(src, dest, connect_both) {
|
||
// copy input connections
|
||
for(let i in src.inputs) {
|
||
let input = src.inputs[i];
|
||
if (input.widget !== undefined) {
|
||
const destWidget = dest.widgets.find(x => x.name === input.widget.name);
|
||
dest.convertWidgetToInput(destWidget);
|
||
}
|
||
if(input.link) {
|
||
let link = app.graph.links[input.link];
|
||
let src_node = app.graph.getNodeById(link.origin_id);
|
||
src_node.connect(link.origin_slot, dest.id, input.name);
|
||
}
|
||
}
|
||
|
||
// copy output connections
|
||
if(connect_both) {
|
||
let output_links = {};
|
||
for(let i in src.outputs) {
|
||
let output = src.outputs[i];
|
||
if(output.links) {
|
||
let links = [];
|
||
for(let j in output.links) {
|
||
links.push(app.graph.links[output.links[j]]);
|
||
}
|
||
output_links[output.name] = links;
|
||
}
|
||
}
|
||
|
||
for(let i in dest.outputs) {
|
||
let links = output_links[dest.outputs[i].name];
|
||
if(links) {
|
||
for(let j in links) {
|
||
let link = links[j];
|
||
let target_node = app.graph.getNodeById(link.target_id);
|
||
dest.connect(parseInt(i), target_node, link.target_slot);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
dest.color = src.color;
|
||
dest.bgcolor = src.bgcolor;
|
||
dest.size = src.size;
|
||
|
||
app.graph.afterChange();
|
||
}
|
||
|
||
// 修改节点执行处理
|
||
app.registerExtension({
|
||
name: "Custom.FastCanvas",
|
||
async beforeRegisterNodeDef(nodeType, nodeData) {
|
||
if (nodeData.name === "FastCanvas") {
|
||
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
||
|
||
nodeType.prototype.onNodeCreated = function() {
|
||
const result = onNodeCreated?.apply(this, arguments);
|
||
|
||
// 添加随机种子输入框
|
||
const seedWidget = this.addWidget(
|
||
"text",
|
||
"seed",
|
||
"initial_seed", // 给一个初始值
|
||
(v) => {
|
||
this.seed = v;
|
||
},
|
||
{
|
||
multiline: false,
|
||
readonly: true
|
||
}
|
||
);
|
||
|
||
// 生成随机种子的方法
|
||
this.generateSeed = () => {
|
||
const timestamp = Date.now();
|
||
const random = Math.floor(Math.random() * 1000000);
|
||
return `${timestamp}_${random}`;
|
||
};
|
||
|
||
// 更新种子值的方法
|
||
this.updateSeed = () => {
|
||
const newSeed = this.generateSeed();
|
||
const seedWidget = this.widgets?.find(w => w.name === "seed");
|
||
if (seedWidget) {
|
||
seedWidget.value = newSeed;
|
||
this.seed = newSeed; // 确保也更新节点的属性
|
||
|
||
if (!this.widgets_values) {
|
||
this.widgets_values = [];
|
||
}
|
||
const widgetIndex = this.widgets.findIndex(w => w.name === "seed");
|
||
if (widgetIndex !== -1) {
|
||
this.widgets_values[widgetIndex] = newSeed;
|
||
}
|
||
|
||
this.setDirtyCanvas(true, false);
|
||
}
|
||
};
|
||
|
||
// 添加队列执行前的钩子到种子widget上
|
||
seedWidget.beforeQueued = () => {
|
||
// 如果画布未锁定，则更新种子
|
||
if (!this.canvasInstance?.isLocked) {
|
||
this.updateSeed();
|
||
}
|
||
};
|
||
|
||
return result;
|
||
};
|
||
|
||
nodeType.prototype.onAdded = function() {
|
||
if (this.id !== undefined && this.id !== -1) {
|
||
|
||
// 从本地存储获取保存的尺寸
|
||
const STORAGE_KEY = 'canvas_size_';
|
||
const savedSize = localStorage.getItem(STORAGE_KEY + this.id);
|
||
const size = savedSize ? JSON.parse(savedSize) : {
|
||
width: CANVAS_SIZE.WIDTH,
|
||
height: CANVAS_SIZE.HEIGHT
|
||
};
|
||
|
||
// 创建画布容器
|
||
const element = document.createElement("div");
|
||
element.style.position = "relative";
|
||
element.style.width = "100%";
|
||
element.style.height = "100%";
|
||
|
||
// 存储 element 引用
|
||
this.canvasElement = element;
|
||
|
||
// 先创建画布实例
|
||
this.canvasInstance = new FastCanvas(this, size);
|
||
|
||
// 计算缩放后的尺寸
|
||
const scaledSize = this.canvasInstance.calculateScaledSize(
|
||
size.width,
|
||
size.height,
|
||
this.canvasInstance.maxDisplaySize
|
||
);
|
||
|
||
// 更新容器尺寸
|
||
element.style.minWidth = `${scaledSize.width}px`;
|
||
element.style.minHeight = `${scaledSize.height + CANVAS_SIZE.CONTROL_PANEL_HEIGHT}px`;
|
||
|
||
// 更新画布尺寸
|
||
this.canvasInstance.updateCanvasSize(scaledSize.width, scaledSize.height);
|
||
|
||
// 更新节点尺寸计算方法
|
||
this.computeSize = () => [
|
||
scaledSize.width + CANVAS_SIZE.RIGHT_MARGIN,
|
||
scaledSize.height + CANVAS_SIZE.BOTTOM_MARGIN + CANVAS_SIZE.CONTROL_PANEL_HEIGHT
|
||
];
|
||
|
||
// 创建覆盖层
|
||
const overlay = FastCanvasOverlay.createOverlay(this);
|
||
element.appendChild(overlay);
|
||
this.sizeOverlay = overlay;
|
||
|
||
// 添加画布组件
|
||
this.canvasWidget = this.addDOMWidget("canvas", "canvas", element);
|
||
|
||
// 添加画布到容器
|
||
this.canvasElement.appendChild(this.canvasInstance.canvasContainer);
|
||
|
||
// 强制更新节点尺寸
|
||
requestAnimationFrame(() => {
|
||
this.size = this.computeSize();
|
||
this.setDirtyCanvas(true, true);
|
||
|
||
// 如果有保存的尺寸，立即更新输入框显示
|
||
if (this.sizeOverlay?.updateSizeInputs) {
|
||
this.sizeOverlay.updateSizeInputs(size.width, size.height);
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
|
||
nodeType.prototype.onRemoved = function() {
|
||
if (!this) return;
|
||
|
||
const nodeId = this.id;
|
||
|
||
// 清理实例
|
||
cleanup(nodeId);
|
||
|
||
// 清除引用
|
||
if (this.canvasInstance) {
|
||
this.canvasInstance = null;
|
||
}
|
||
|
||
};
|
||
// 在FastCanvas节点定义中添加
|
||
nodeType.prototype.onConfigure = function(o) {
|
||
// 不要调用原始的onConfigure方法，因为会导致递归
|
||
|
||
// 发送need_update=true标记到后端
|
||
setTimeout(() => {
|
||
api.fetchApi('/fast_canvas_refresh_signal', {
|
||
method: 'POST',
|
||
body: JSON.stringify({
|
||
node_id: this.id.toString(),
|
||
need_update: true
|
||
})
|
||
}).then(() => {
|
||
console.log(`[FastCanvas] 已发送刷新信号给节点 ${this.id}`);
|
||
}).catch(error => {
|
||
console.error(`[FastCanvas] 发送刷新信号失败:`, error);
|
||
});
|
||
}, 0);
|
||
|
||
|
||
};
|
||
|
||
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
app.registerExtension({
|
||
name: "Custom.FastCanvasTool",
|
||
async beforeRegisterNodeDef(nodeType, nodeData) {
|
||
if (nodeData.name === "FastCanvasTool") {
|
||
// 处理连接变化
|
||
nodeType.prototype.onConnectionsChange = async function(type, index, connected, link_info) {
|
||
if (!link_info || type == LiteGraph.OUTPUT) return;
|
||
|
||
const stackTrace = new Error().stack;
|
||
|
||
// 如果是背景图片端口，不进行删除操作
|
||
if (this.inputs[index]?.name === "bg_img") {
|
||
return;
|
||
}
|
||
|
||
// 处理断开连接
|
||
if (!connected) {
|
||
if (!stackTrace.includes('LGraphNode.prototype.connect') &&
|
||
!stackTrace.includes('LGraphNode.connect') &&
|
||
!stackTrace.includes('loadGraphData')) {
|
||
|
||
// 只删除非背景图片的输入端口
|
||
if (this.inputs[index]?.name.startsWith("img_")) {
|
||
this.removeInput(index);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 处理新连接
|
||
if (connected) {
|
||
await app.queuePromise;
|
||
}
|
||
|
||
// 重新编号图层输入（跳过背景图片端口）
|
||
let imgIndex = 1;
|
||
this.inputs.forEach(input => {
|
||
if (input.name.startsWith("img_")) {
|
||
const newName = `img_${imgIndex}`;
|
||
if (input.name !== newName) {
|
||
input.name = newName;
|
||
}
|
||
imgIndex++;
|
||
}
|
||
});
|
||
|
||
// 只有在最后一个非背景端口被连接时添加新端口
|
||
const nonBgInputs = this.inputs.filter(input => input.name.startsWith("img_"));
|
||
const lastInput = nonBgInputs[nonBgInputs.length - 1];
|
||
|
||
if (lastInput?.link != null) {
|
||
const newIndex = `img_${imgIndex}`;
|
||
this.addInput(newIndex, "IMAGE");
|
||
}
|
||
|
||
this.setDirtyCanvas(true, true);
|
||
};
|
||
|
||
// 添加初始化方法
|
||
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
||
nodeType.prototype.onNodeCreated = function() {
|
||
if (onNodeCreated) {
|
||
onNodeCreated.apply(this, arguments);
|
||
}
|
||
|
||
// 确保始终有一个背景图片端口和一个图层端口
|
||
if (!this.inputs.find(input => input.name === "bg_img")) {
|
||
this.addInput("bg_img", "IMAGE");
|
||
}
|
||
if (!this.inputs.find(input => input.name === "img_1")) {
|
||
this.addInput("img_1", "IMAGE");
|
||
}
|
||
};
|
||
}
|
||
|
||
// AFL_PSD_Layer 动态输入处理
|
||
if (nodeData.name === "AFL2_PSD_Layer") {
|
||
nodeType.prototype.onConnectionsChange = async function(type, index, connected, link_info) {
|
||
if (!link_info || type == LiteGraph.OUTPUT) return;
|
||
|
||
const stackTrace = new Error().stack;
|
||
|
||
// 处理断开连接
|
||
if (!connected) {
|
||
if (!stackTrace.includes('LGraphNode.prototype.connect') &&
|
||
!stackTrace.includes('LGraphNode.connect') &&
|
||
!stackTrace.includes('loadGraphData')) {
|
||
|
||
if (this.inputs[index]?.name.startsWith("layer_")) {
|
||
this.removeInput(index);
|
||
}
|
||
}
|
||
}
|
||
|
||
if (connected) {
|
||
await app.queuePromise;
|
||
}
|
||
|
||
// 重新编号图层输入
|
||
let layerIndex = 1;
|
||
this.inputs.forEach(input => {
|
||
if (input.name.startsWith("layer_")) {
|
||
const newName = `layer_${layerIndex}`;
|
||
if (input.name !== newName) {
|
||
input.name = newName;
|
||
}
|
||
layerIndex++;
|
||
}
|
||
});
|
||
|
||
// 最后一个端口被连接时添加新端口
|
||
const layerInputs = this.inputs.filter(input => input.name.startsWith("layer_"));
|
||
const lastInput = layerInputs[layerInputs.length - 1];
|
||
|
||
if (lastInput?.link != null) {
|
||
const newIndex = `layer_${layerIndex}`;
|
||
this.addInput(newIndex, "IMAGE");
|
||
}
|
||
|
||
this.setDirtyCanvas(true, true);
|
||
};
|
||
|
||
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
||
nodeType.prototype.onNodeCreated = function() {
|
||
if (onNodeCreated) {
|
||
onNodeCreated.apply(this, arguments);
|
||
}
|
||
|
||
if (!this.inputs.find(input => input.name === "layer_1")) {
|
||
this.addInput("layer_1", "IMAGE");
|
||
}
|
||
};
|
||
}
|
||
}
|
||
});
|