2199 lines
59 KiB
JavaScript
2199 lines
59 KiB
JavaScript
|
import {
|
|||
|
|
AddLayerCommand,
|
|||
|
|
PasteLayerCommand,
|
|||
|
|
RemoveLayerCommand,
|
|||
|
|
MoveLayerCommand,
|
|||
|
|
ToggleLayerVisibilityCommand,
|
|||
|
|
RenameLayerCommand,
|
|||
|
|
LayerLockCommand,
|
|||
|
|
SetLayerOpacityCommand,
|
|||
|
|
SetLayerBlendModeCommand,
|
|||
|
|
MergeLayersCommand,
|
|||
|
|
GroupLayersCommand,
|
|||
|
|
UngroupLayersCommand,
|
|||
|
|
MergeLayerObjectsCommand,
|
|||
|
|
LayerObjectsToGroupCommand,
|
|||
|
|
ReorderLayersCommand,
|
|||
|
|
ReorderChildLayersCommand,
|
|||
|
|
} from "../commands/LayerCommands";
|
|||
|
|
import {
|
|||
|
|
SetActiveLayerCommand,
|
|||
|
|
AddObjectToLayerCommand,
|
|||
|
|
RemoveObjectFromLayerCommand,
|
|||
|
|
} from "../commands/ObjectLayerCommands";
|
|||
|
|
import {
|
|||
|
|
LayerType,
|
|||
|
|
BlendMode,
|
|||
|
|
createLayer,
|
|||
|
|
createBackgroundLayer,
|
|||
|
|
createFixedLayer,
|
|||
|
|
OperationType,
|
|||
|
|
OperationTypes,
|
|||
|
|
} from "../utils/layerHelper";
|
|||
|
|
import {
|
|||
|
|
CreateBackgroundLayerCommand,
|
|||
|
|
UpdateBackgroundCommand,
|
|||
|
|
BackgroundSizeCommand,
|
|||
|
|
BackgroundSizeWithScaleCommand,
|
|||
|
|
} from "../commands/BackgroundCommands";
|
|||
|
|
|
|||
|
|
import CanvasConfig from "../config/canvasConfig";
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 图层管理器 - 负责管理画布上的所有图层
|
|||
|
|
* 包含图层的创建、删除、修改、排序等操作
|
|||
|
|
* 现在统一使用命令管理器进行状态管理
|
|||
|
|
*/
|
|||
|
|
export class LayerManager {
|
|||
|
|
/**
|
|||
|
|
* 创建图层管理器
|
|||
|
|
* @param {Object} options 配置选项
|
|||
|
|
* @param {Object} options.canvas fabric.js画布实例
|
|||
|
|
* @param {Object} options.layers 图层数组响应式引用
|
|||
|
|
* @param {Object} options.activeLayerId 当前激活图层ID响应式引用
|
|||
|
|
* @param {Object} options.commandManager 命令管理器
|
|||
|
|
* @param {Object} options.canvasManager 画布管理器
|
|||
|
|
* @param {String} options.editorMode 编辑器模式
|
|||
|
|
* @param {Number} options.canvasWidth 画布宽度
|
|||
|
|
* @param {Number} options.canvasHeight 画布高度
|
|||
|
|
* @param {String} options.backgroundColor 背景颜色
|
|||
|
|
*/
|
|||
|
|
constructor(options) {
|
|||
|
|
this.canvas = options.canvas;
|
|||
|
|
this.layers = options.layers;
|
|||
|
|
this.activeLayerId = options.activeLayerId;
|
|||
|
|
this.commandManager = options.commandManager;
|
|||
|
|
this.canvasManager = options.canvasManager || null;
|
|||
|
|
|
|||
|
|
// 编辑器模式：draw(绘画)、select(选择)、pan(拖拽)
|
|||
|
|
this.editorMode = options.editorMode || CanvasConfig.defaultTool;
|
|||
|
|
|
|||
|
|
// 画布尺寸
|
|||
|
|
this.canvasWidth = options.canvasWidth || 800;
|
|||
|
|
this.canvasHeight = options.canvasHeight || 600;
|
|||
|
|
|
|||
|
|
// 默认背景颜色
|
|||
|
|
this.backgroundColor = options.backgroundColor || "#ffffff";
|
|||
|
|
|
|||
|
|
// 复制粘贴相关
|
|||
|
|
this.clipboardData = null;
|
|||
|
|
|
|||
|
|
// 操作状态标志，用于控制状态保存
|
|||
|
|
this.isExecutingCommand = false;
|
|||
|
|
// 是否正在执行操作
|
|||
|
|
this.operationInProgress = false;
|
|||
|
|
|
|||
|
|
// 红绿图模式相关
|
|||
|
|
this.isRedGreenMode = false;
|
|||
|
|
this.redGreenModeManager = null;
|
|||
|
|
|
|||
|
|
// 初始化相关命令
|
|||
|
|
this.initCommandManager();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化命令管理器
|
|||
|
|
* 现在直接使用命令类，不再需要注册命令
|
|||
|
|
*/
|
|||
|
|
initCommandManager() {
|
|||
|
|
// 命令注册逻辑已移除，现在直接使用命令类实例化和执行
|
|||
|
|
console.log("CommandManager 已初始化，使用直接命令调用模式");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置编辑器模式
|
|||
|
|
* @param {string} mode 'draw'、'select'或'pan'
|
|||
|
|
*/
|
|||
|
|
toolChanged(mode) {
|
|||
|
|
if (!OperationTypes.includes(mode)) {
|
|||
|
|
console.warn(`不支持的编辑器模式: ${mode}`);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.editorMode = mode;
|
|||
|
|
|
|||
|
|
// 更新所有对象的交互性
|
|||
|
|
this.updateLayersObjectsInteractivity();
|
|||
|
|
|
|||
|
|
console.log(`已切换到${mode}模式`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setToolManager(toolManager) {
|
|||
|
|
this.toolManager = toolManager;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 更新所有画布对象的交互性
|
|||
|
|
* 根据当前编辑模式和图层状态设置对象的交互属性
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
updateLayersObjectsInteractivity() {
|
|||
|
|
if (!this.canvas) return;
|
|||
|
|
|
|||
|
|
// 性能优化：使用requestAnimationFrame
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
// 暂停渲染以提高性能
|
|||
|
|
this.canvas.skipTargetFind = true;
|
|||
|
|
// this.canvas.discardActiveObject();
|
|||
|
|
|
|||
|
|
// 暂停实时渲染和对象查找
|
|||
|
|
const wasRenderOnAddRemove = this.canvas.renderOnAddRemove;
|
|||
|
|
this.canvas.renderOnAddRemove = false;
|
|||
|
|
|
|||
|
|
// 应用图层交互规则
|
|||
|
|
this._applyInteractionRules();
|
|||
|
|
|
|||
|
|
// 恢复渲染设置
|
|||
|
|
this.canvas.renderOnAddRemove = wasRenderOnAddRemove;
|
|||
|
|
this.canvas.skipTargetFind = false;
|
|||
|
|
// this.canvas.renderAll();
|
|||
|
|
this.canvas.renderAll(); // 确保画布重新渲染 - 同步渲染
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 私有方法：应用交互规则
|
|||
|
|
_applyInteractionRules() {
|
|||
|
|
console.log("updateLayersObjectsInteractivity ===>", this.editorMode);
|
|||
|
|
const objects = this.canvas.getObjects();
|
|||
|
|
const editorMode = this.editorMode || CanvasConfig.defaultTool;
|
|||
|
|
const layers = this.layers?.value || [];
|
|||
|
|
|
|||
|
|
// 创建缓存以避免重复查找
|
|||
|
|
const layerMap = {};
|
|||
|
|
layers.forEach((layer) => {
|
|||
|
|
layerMap[layer.id] = layer;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 获取当前活动图层ID
|
|||
|
|
const currentActiveLayerId = this.activeLayerId?.value;
|
|||
|
|
|
|||
|
|
// 批量更新对象
|
|||
|
|
objects.forEach((obj) => {
|
|||
|
|
if (!obj.layerId) {
|
|||
|
|
// 没有关联图层的对象使用默认设置
|
|||
|
|
obj.selectable = false;
|
|||
|
|
obj.evented = false;
|
|||
|
|
obj.erasable = false; // 未关联图层的对象不可擦除
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const layer = layerMap[obj.layerId];
|
|||
|
|
if (!layer) return;
|
|||
|
|
|
|||
|
|
// 设置可见性
|
|||
|
|
obj.visible = layer.visible;
|
|||
|
|
|
|||
|
|
// 判断对象是否在当前活动图层上
|
|||
|
|
const isInActiveLayer = obj.layerId === currentActiveLayerId;
|
|||
|
|
|
|||
|
|
// 基于 fabric-with-erasing 库的 erasable 属性设置擦除权限
|
|||
|
|
// 只有活动图层、可见、非锁定、非背景、非固定图层的对象才可擦除
|
|||
|
|
obj.erasable =
|
|||
|
|
isInActiveLayer &&
|
|||
|
|
layer.visible &&
|
|||
|
|
!layer.locked &&
|
|||
|
|
!layer.isBackground &&
|
|||
|
|
!layer.isFixed;
|
|||
|
|
|
|||
|
|
// 图层状态决定交互性
|
|||
|
|
if (layer.isBackground || obj.isBackground || layer.isFixed) {
|
|||
|
|
// 背景层永远不可选择和擦除
|
|||
|
|
obj.selectable = false;
|
|||
|
|
obj.evented = false;
|
|||
|
|
obj.erasable = false;
|
|||
|
|
} else if (layer.locked) {
|
|||
|
|
// 锁定图层不可交互和擦除
|
|||
|
|
obj.selectable = false;
|
|||
|
|
obj.evented = false;
|
|||
|
|
obj.erasable = false;
|
|||
|
|
} else {
|
|||
|
|
// 根据编辑模式设置交互性
|
|||
|
|
switch (editorMode) {
|
|||
|
|
case OperationType.SELECT:
|
|||
|
|
obj.selectable = true;
|
|||
|
|
obj.evented = true;
|
|||
|
|
break;
|
|||
|
|
case OperationType.ERASER:
|
|||
|
|
// 橡皮擦模式：利用 fabric-with-erasing 的内置机制
|
|||
|
|
// 只需要设置 erasable 属性，库会自动处理擦除逻辑
|
|||
|
|
obj.selectable = false;
|
|||
|
|
obj.evented = true; // 需要设置为 true 以接收鼠标事件
|
|||
|
|
// erasable 已在上面根据图层状态设置
|
|||
|
|
break;
|
|||
|
|
case OperationType.DRAW:
|
|||
|
|
case OperationType.EYEDROPPER:
|
|||
|
|
case OperationType.PAN:
|
|||
|
|
case OperationType.WAVE:
|
|||
|
|
case OperationType.LIQUIFY:
|
|||
|
|
case OperationType.LASSO:
|
|||
|
|
case OperationType.LASSO_RECTANGLE:
|
|||
|
|
case OperationType.AREA_CUSTOM:
|
|||
|
|
case OperationType.AREA_RECTANGLE:
|
|||
|
|
obj.selectable = false;
|
|||
|
|
obj.evented = false;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
obj.selectable = false;
|
|||
|
|
obj.evented = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 平移模式下，禁用多选和擦除
|
|||
|
|
if (editorMode === OperationType.PAN) {
|
|||
|
|
obj.selectable = false;
|
|||
|
|
obj.evented = false;
|
|||
|
|
obj.erasable = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 应用图层视觉属性
|
|||
|
|
if (layer.opacity !== undefined) obj.opacity = layer.opacity;
|
|||
|
|
if (layer.blendMode) obj.globalCompositeOperation = layer.blendMode;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 创建新图层
|
|||
|
|
* @param {string} name 图层名称
|
|||
|
|
* @param {string} type 图层类型
|
|||
|
|
* @param {Object} options 额外选项
|
|||
|
|
* @returns {string} 新创建的图层ID
|
|||
|
|
*/
|
|||
|
|
createLayer(name = null, type = LayerType.EMPTY, options = {}) {
|
|||
|
|
// 生成唯一ID
|
|||
|
|
const layerId = `layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
|
|||
|
|
const layerIndex = this.layers.value.length;
|
|||
|
|
|
|||
|
|
// 计算插入位置，如果没有指定insertIndex，则根据当前选中图层决定插入位置
|
|||
|
|
// 添加到图层列表
|
|||
|
|
let insertIndex = this._getInsertIndexAboveActiveLayer();
|
|||
|
|
if (options.insertIndex !== undefined) {
|
|||
|
|
insertIndex = options.insertIndex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建新图层
|
|||
|
|
const newLayer = createLayer({
|
|||
|
|
id: layerId,
|
|||
|
|
name: name || `图层 ${layerIndex + 1}`,
|
|||
|
|
type: type,
|
|||
|
|
visible: true,
|
|||
|
|
locked: false,
|
|||
|
|
opacity: 1.0,
|
|||
|
|
blendMode: BlendMode.NORMAL,
|
|||
|
|
fabricObjects: [],
|
|||
|
|
children: [],
|
|||
|
|
...options,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new AddLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
newLayer: newLayer,
|
|||
|
|
activeLayerId: this.activeLayerId,
|
|||
|
|
insertIndex: insertIndex,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 计算普通图层数量（非背景、非固定）
|
|||
|
|
const normalLayersCount = this.layers.value.filter(
|
|||
|
|
(layer) => !layer.isBackground && !layer.isFixed
|
|||
|
|
).length;
|
|||
|
|
|
|||
|
|
// 如果是第一个图层，或者普通图层数量小于等于3，设置为不可撤销
|
|||
|
|
if (this.layers.value.length === 1 || normalLayersCount <= 3) {
|
|||
|
|
command.undoable = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return layerId;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 创建背景图层
|
|||
|
|
* @param {string} name 图层名称
|
|||
|
|
* @returns {string} 创建的背景层ID
|
|||
|
|
*/
|
|||
|
|
createBackgroundLayer(name = "背景") {
|
|||
|
|
// 检查是否已有背景图层
|
|||
|
|
const hasBackgroundLayer = this.layers.value.some(
|
|||
|
|
(layer) => layer.isBackground
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (hasBackgroundLayer) {
|
|||
|
|
console.warn("已存在背景层，不再创建新的背景层");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建背景图层
|
|||
|
|
const bgLayer = createBackgroundLayer({
|
|||
|
|
name: name,
|
|||
|
|
canvasWidth: this.canvasWidth,
|
|||
|
|
canvasHeight: this.canvasHeight,
|
|||
|
|
backgroundColor: this.backgroundColor,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new CreateBackgroundLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
activeLayerId: this.activeLayerId,
|
|||
|
|
canvasManager: this.canvasManager,
|
|||
|
|
backgroundLayer: bgLayer,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 背景图层设置为不可撤销
|
|||
|
|
command.undoable = false;
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 返回创建的背景层ID
|
|||
|
|
return bgLayer.id;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 创建固定图层 - 位于背景图层之上，普通图层之下
|
|||
|
|
* @param {string} name 图层名称
|
|||
|
|
* @returns {string} 创建的固定图层ID
|
|||
|
|
*/
|
|||
|
|
createFixedLayer(name = "固定图层") {
|
|||
|
|
// 检查是否已有固定图层
|
|||
|
|
const hasFixedLayer = this.layers.value.some((layer) => layer.isFixed);
|
|||
|
|
|
|||
|
|
if (hasFixedLayer) {
|
|||
|
|
console.warn("已存在固定图层，不再创建新的固定图层");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生成唯一ID
|
|||
|
|
const layerId = `fixed_layer_${Date.now()}_${Math.floor(
|
|||
|
|
Math.random() * 1000
|
|||
|
|
)}`;
|
|||
|
|
|
|||
|
|
// 创建固定图层
|
|||
|
|
const fixedLayer = createFixedLayer({
|
|||
|
|
id: layerId,
|
|||
|
|
name: name,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new AddLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
newLayer: fixedLayer,
|
|||
|
|
activeLayerId: this.activeLayerId,
|
|||
|
|
insertIndex: this._getFixedLayerInsertionIndex(),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 固定图层设置为不可撤销
|
|||
|
|
command.undoable = false;
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return layerId;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取应该插入固定图层的位置索引（在背景图层之上）
|
|||
|
|
* @private
|
|||
|
|
* @returns {Number} 插入索引
|
|||
|
|
*/
|
|||
|
|
_getFixedLayerInsertionIndex() {
|
|||
|
|
// 找到背景图层的位置
|
|||
|
|
const bgIndex = this.layers.value.findIndex((layer) => layer.isBackground);
|
|||
|
|
if (bgIndex !== -1) {
|
|||
|
|
return bgIndex; // 插入到背景图层之前（在数组中这意味着位于背景图层之上）
|
|||
|
|
}
|
|||
|
|
return this.layers.value.length; // 如果没有背景图层，则添加到最后
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 创建普通图层
|
|||
|
|
* @param {String} name 图层名称 (默认: null，将生成自动名称)
|
|||
|
|
* @param {String} type 图层类型 (默认: LayerType.EMPTY)
|
|||
|
|
* @param {Object} options 附加选项
|
|||
|
|
* @returns {String} 新创建的图层ID
|
|||
|
|
*/
|
|||
|
|
createLayer(name = null, type = LayerType.EMPTY, options = {}) {
|
|||
|
|
// 生成唯一ID
|
|||
|
|
const layerId = `layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
|
|||
|
|
const layerIndex = this.layers.value.length;
|
|||
|
|
|
|||
|
|
// 计算插入位置，如果没有指定insertIndex，则根据当前选中图层决定插入位置
|
|||
|
|
// 添加到图层列表
|
|||
|
|
let insertIndex = this._getInsertIndexAboveActiveLayer();
|
|||
|
|
if (options.insertIndex !== undefined) {
|
|||
|
|
insertIndex = options.insertIndex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建新图层
|
|||
|
|
const newLayer = createLayer({
|
|||
|
|
id: layerId,
|
|||
|
|
name: name || `图层 ${layerIndex + 1}`,
|
|||
|
|
type: type,
|
|||
|
|
visible: true,
|
|||
|
|
locked: false,
|
|||
|
|
opacity: 1.0,
|
|||
|
|
blendMode: BlendMode.NORMAL,
|
|||
|
|
fabricObjects: [],
|
|||
|
|
children: [],
|
|||
|
|
...options,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new AddLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
newLayer: newLayer,
|
|||
|
|
activeLayerId: this.activeLayerId,
|
|||
|
|
insertIndex: insertIndex,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 如果是第一个图层，设置为不可撤销
|
|||
|
|
if (this.layers.value.length === 1) {
|
|||
|
|
command.undoable = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return layerId;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 创建背景图层
|
|||
|
|
* @param {string} name 图层名称
|
|||
|
|
* @returns {string} 创建的背景层ID
|
|||
|
|
*/
|
|||
|
|
createBackgroundLayer(name = "背景") {
|
|||
|
|
// 检查是否已有背景图层
|
|||
|
|
const hasBackgroundLayer = this.layers.value.some(
|
|||
|
|
(layer) => layer.isBackground
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (hasBackgroundLayer) {
|
|||
|
|
console.warn("已存在背景层，不再创建新的背景层");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建背景图层
|
|||
|
|
const bgLayer = createBackgroundLayer({
|
|||
|
|
name: name,
|
|||
|
|
canvasWidth: this.canvasWidth,
|
|||
|
|
canvasHeight: this.canvasHeight,
|
|||
|
|
backgroundColor: this.backgroundColor,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new CreateBackgroundLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
activeLayerId: this.activeLayerId,
|
|||
|
|
canvasManager: this.canvasManager,
|
|||
|
|
backgroundLayer: bgLayer,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 背景图层设置为不可撤销
|
|||
|
|
command.undoable = false;
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 返回创建的背景层ID
|
|||
|
|
return bgLayer.id;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化图层，确保有背景层、固定图层和一个空白图层
|
|||
|
|
*/
|
|||
|
|
initializeLayers() {
|
|||
|
|
// 如果没有任何图层，创建背景层、固定图层和一个空白图层
|
|||
|
|
if (this.layers.value.length === 0) {
|
|||
|
|
// 创建背景图层
|
|||
|
|
this.createBackgroundLayer();
|
|||
|
|
|
|||
|
|
// 创建固定图层，位于背景图层之上
|
|||
|
|
this.createFixedLayer();
|
|||
|
|
|
|||
|
|
// 创建一个空白图层（默认位于背景图层和固定图层之上）
|
|||
|
|
this.createLayer("图层 1");
|
|||
|
|
} else {
|
|||
|
|
// 检查是否已有背景层
|
|||
|
|
const hasBackgroundLayer = this.layers.value.some(
|
|||
|
|
(layer) => layer.isBackground
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (!hasBackgroundLayer) {
|
|||
|
|
this.createBackgroundLayer();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查是否已有固定图层
|
|||
|
|
const hasFixedLayer = this.layers.value.some((layer) => layer.isFixed);
|
|||
|
|
|
|||
|
|
if (!hasFixedLayer) {
|
|||
|
|
this.createFixedLayer();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查是否至少有一个普通图层（非背景、非固定）
|
|||
|
|
const hasNormalLayer = this.layers.value.some(
|
|||
|
|
(layer) => !layer.isBackground && !layer.isFixed
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (!hasNormalLayer) {
|
|||
|
|
this.createLayer("图层 1");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 排序图层
|
|||
|
|
this.sortLayers();
|
|||
|
|
|
|||
|
|
// 更新对象交互性
|
|||
|
|
this.updateLayersObjectsInteractivity();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 添加对象到图层
|
|||
|
|
* @param {Object} fabricObject fabric对象
|
|||
|
|
* @param {string} layerId 目标图层ID，如果不提供则使用当前活动图层
|
|||
|
|
* @returns {Object} 添加的对象
|
|||
|
|
*/
|
|||
|
|
addObjectToLayer(fabricObject, layerId = null) {
|
|||
|
|
const targetLayerId = layerId || this.activeLayerId.value;
|
|||
|
|
|
|||
|
|
// 如果没有指定图层ID，也没有活动图层，则返回错误
|
|||
|
|
if (!targetLayerId) {
|
|||
|
|
console.warn("没有指定目标图层ID且没有活动图层，无法添加对象");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证目标图层是否存在
|
|||
|
|
const targetLayer = this.getLayerById(targetLayerId);
|
|||
|
|
if (!targetLayer) {
|
|||
|
|
console.error(`目标图层 ${targetLayerId} 不存在`);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new AddObjectToLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerId: targetLayerId,
|
|||
|
|
fabricObject: fabricObject,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return fabricObject;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 向固定图层添加对象
|
|||
|
|
* @param {Object} fabricObject fabric对象
|
|||
|
|
* @returns {Object|null} 添加的对象或null（如果添加失败）
|
|||
|
|
*/
|
|||
|
|
addObjectToFixedLayer(fabricObject) {
|
|||
|
|
// 查找固定图层
|
|||
|
|
const fixedLayer = this.layers.value.find((layer) => layer.isFixed);
|
|||
|
|
|
|||
|
|
// 如果没有固定图层，则创建一个
|
|||
|
|
if (!fixedLayer) {
|
|||
|
|
const fixedLayerId = this.createFixedLayer();
|
|||
|
|
return this.addObjectToLayer(fabricObject, fixedLayerId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加对象到固定图层
|
|||
|
|
return this.addObjectToLayer(fabricObject, fixedLayer.id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 从图层中移除对象
|
|||
|
|
* @param {string|Object} objectOrId 要移除的对象或其ID
|
|||
|
|
* @returns {boolean} 是否移除成功
|
|||
|
|
*/
|
|||
|
|
removeObjectFromLayer(objectOrId) {
|
|||
|
|
// 获取对象ID
|
|||
|
|
const objectId =
|
|||
|
|
typeof objectOrId === "string" ? objectOrId : objectOrId.id;
|
|||
|
|
|
|||
|
|
if (!objectId) {
|
|||
|
|
console.error("无效的对象ID");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new RemoveObjectFromLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
objectId: objectId,
|
|||
|
|
objectOrId: objectOrId,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
return this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
return command.execute();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置活动图层
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
*/
|
|||
|
|
setActiveLayer(layerId, options = {}) {
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new SetActiveLayerCommand({
|
|||
|
|
layers: this.layers,
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layerManager: this,
|
|||
|
|
activeLayerId: this.activeLayerId,
|
|||
|
|
layerId: layerId,
|
|||
|
|
editorMode: this.editorMode,
|
|||
|
|
...options,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取当前活动图层
|
|||
|
|
* @return {Object} layer 图层对象
|
|||
|
|
*/
|
|||
|
|
getActiveLayer() {
|
|||
|
|
// 查找当前活动图层
|
|||
|
|
const activeLayer = this.layers.value.find(
|
|||
|
|
(layer) => layer.id === this.activeLayerId.value
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (activeLayer) {
|
|||
|
|
return activeLayer;
|
|||
|
|
} else {
|
|||
|
|
console.warn("没有活动图层");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取当前活动图层ID
|
|||
|
|
getActiveLayerId() {
|
|||
|
|
return this.activeLayerId.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 根据ID获取图层
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @returns {Object|null} 图层对象或null
|
|||
|
|
*/
|
|||
|
|
getLayerById(layerId) {
|
|||
|
|
if (!layerId || !this.layers.value) return null;
|
|||
|
|
return this.layers.value.find((layer) => layer.id === layerId) || null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取当前图层对象的列表
|
|||
|
|
* @param {string} layerId 可选，指定图层ID，默认使用当前活动图层
|
|||
|
|
* @returns {Array} 图层中的对象列表
|
|||
|
|
*/
|
|||
|
|
getLayerObjects(layerId = null) {
|
|||
|
|
const targetLayerId = layerId || this.activeLayerId.value;
|
|||
|
|
if (!targetLayerId) return [];
|
|||
|
|
|
|||
|
|
const layer = this.getLayerById(targetLayerId);
|
|||
|
|
if (!layer) return [];
|
|||
|
|
|
|||
|
|
// 如果是背景图层且有单个对象
|
|||
|
|
if (layer.isBackground && layer.fabricObject) {
|
|||
|
|
return [layer.fabricObject];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 普通图层返回对象列表
|
|||
|
|
return Array.isArray(layer.fabricObjects) ? layer.fabricObjects : [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 移除图层
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @returns {boolean} 是否移除成功
|
|||
|
|
*/
|
|||
|
|
removeLayer(layerId) {
|
|||
|
|
// 查找要删除的图层
|
|||
|
|
const layer = this.layers.value.find((layer) => layer.id === layerId);
|
|||
|
|
|
|||
|
|
// 如果是背景层或固定层，不允许删除
|
|||
|
|
if (layer && (layer.isBackground || layer.isFixed)) {
|
|||
|
|
console.warn(layer.isBackground ? "背景层不可删除" : "固定层不可删除");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果图层有子图层，提示确认
|
|||
|
|
if (layer && layer.children && layer.children.length > 0) {
|
|||
|
|
console.warn("该图层包含子图层，删除将同时删除所有子图层");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new RemoveLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerId: layerId,
|
|||
|
|
activeLayerId: this.activeLayerId,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 移动图层位置
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @param {string} direction 移动方向，'up'或'down'
|
|||
|
|
* @returns {boolean} 是否移动成功
|
|||
|
|
*/
|
|||
|
|
moveLayer(layerId, direction) {
|
|||
|
|
// 查找要移动的图层
|
|||
|
|
const layer = this.layers.value.find((layer) => layer.id === layerId);
|
|||
|
|
|
|||
|
|
// 如果是背景层或固定层，不允许移动
|
|||
|
|
if (layer && (layer.isBackground || layer.isFixed)) {
|
|||
|
|
console.warn(layer.isBackground ? "背景层不可移动" : "固定层不可移动");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new MoveLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerId: layerId,
|
|||
|
|
direction: direction,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新画布渲染顺序
|
|||
|
|
this._rearrangeObjects();
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 切换图层可见性
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @returns {boolean} 更新后的可见性状态
|
|||
|
|
*/
|
|||
|
|
toggleLayerVisibility(layerId) {
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new ToggleLayerVisibilityCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerId: layerId,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新对象交互性
|
|||
|
|
this.updateLayersObjectsInteractivity();
|
|||
|
|
|
|||
|
|
// 获取当前可见性
|
|||
|
|
const layer = this.layers.value.find((layer) => layer.id === layerId);
|
|||
|
|
return layer ? layer.visible : false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 切换图层锁定状态
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @returns {boolean} 更新后的锁定状态
|
|||
|
|
*/
|
|||
|
|
toggleLayerLock(layerId) {
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new LayerLockCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerId: layerId,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新对象交互性
|
|||
|
|
this.updateLayersObjectsInteractivity();
|
|||
|
|
|
|||
|
|
// 获取当前锁定状态
|
|||
|
|
const layer = this.layers.value.find((layer) => layer.id === layerId);
|
|||
|
|
return layer ? layer.locked : false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置图层不透明度
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @param {number} opacity 不透明度值 (0-1)
|
|||
|
|
*/
|
|||
|
|
setLayerOpacity(layerId, opacity) {
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new SetLayerOpacityCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerId: layerId,
|
|||
|
|
opacity: opacity,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新图层对象不透明度
|
|||
|
|
const layer = this.layers.value.find((layer) => layer.id === layerId);
|
|||
|
|
if (layer && layer.fabricObjects) {
|
|||
|
|
layer.fabricObjects.forEach((obj) => {
|
|||
|
|
obj.opacity = opacity;
|
|||
|
|
});
|
|||
|
|
this.canvas.renderAll();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 设置图层混合模式
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @param {string} blendMode 混合模式
|
|||
|
|
*/
|
|||
|
|
setLayerBlendMode(layerId, blendMode) {
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new SetLayerBlendModeCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerId: layerId,
|
|||
|
|
blendMode: blendMode,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新图层对象混合模式
|
|||
|
|
const layer = this.layers.value.find((layer) => layer.id === layerId);
|
|||
|
|
if (layer && layer.fabricObjects) {
|
|||
|
|
layer.fabricObjects.forEach((obj) => {
|
|||
|
|
obj.globalCompositeOperation = blendMode;
|
|||
|
|
});
|
|||
|
|
this.canvas.renderAll();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重命名图层
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @param {string} newName 新名称
|
|||
|
|
*/
|
|||
|
|
renameLayer(layerId, newName) {
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new RenameLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerId: layerId,
|
|||
|
|
newName: newName,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新图层对象上的图层名称
|
|||
|
|
const layer = this.layers.value.find((layer) => layer.id === layerId);
|
|||
|
|
if (layer && layer.fabricObjects) {
|
|||
|
|
layer.fabricObjects.forEach((obj) => {
|
|||
|
|
obj.layerName = newName;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 合并多个图层
|
|||
|
|
* @param {Array<string>} layerIds 要合并的图层ID数组
|
|||
|
|
* @param {string} newName 合并后的图层名称，可选
|
|||
|
|
* @returns {string} 合并后的新图层ID
|
|||
|
|
*/
|
|||
|
|
mergeLayers(layerIds, newName = null) {
|
|||
|
|
// 检查参数
|
|||
|
|
if (!layerIds || !Array.isArray(layerIds) || layerIds.length < 2) {
|
|||
|
|
console.error("合并图层至少需要两个图层ID");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new MergeLayersCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerIds: layerIds,
|
|||
|
|
newName: newName,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return command.newLayerId;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 将多个图层组合为一个组
|
|||
|
|
* @param {Array<string>} layerIds 要组合的图层ID数组
|
|||
|
|
* @param {string} groupName 组名称，可选
|
|||
|
|
* @returns {string} 新组图层ID
|
|||
|
|
*/
|
|||
|
|
groupLayers(layerIds, groupName = null) {
|
|||
|
|
// 检查参数
|
|||
|
|
if (!layerIds || !Array.isArray(layerIds) || layerIds.length < 2) {
|
|||
|
|
console.error("组合图层至少需要两个图层ID");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new GroupLayersCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerIds: layerIds,
|
|||
|
|
groupName: groupName,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return command.groupId;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 解组一个组图层
|
|||
|
|
* @param {string} groupId 要解组的组图层ID
|
|||
|
|
* @returns {Array<string>} 解组后的图层ID数组
|
|||
|
|
*/
|
|||
|
|
ungroupLayers(groupId) {
|
|||
|
|
// 查找组图层
|
|||
|
|
const groupLayer = this.layers.value.find((l) => l.id === groupId);
|
|||
|
|
if (
|
|||
|
|
!groupLayer ||
|
|||
|
|
!groupLayer.children ||
|
|||
|
|
groupLayer.children.length === 0
|
|||
|
|
) {
|
|||
|
|
console.error(`${groupId} 不是有效的组图层或不包含子图层`);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new UngroupLayersCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
groupId: groupId,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return command.childLayerIds;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 调整画布和背景图层尺寸
|
|||
|
|
* @param {number} width 宽度
|
|||
|
|
* @param {number} height 高度
|
|||
|
|
*/
|
|||
|
|
resizeCanvas(width, height, options = {}) {
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new BackgroundSizeCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
canvasManager: this.canvasManager,
|
|||
|
|
newWidth: width,
|
|||
|
|
newHeight: height,
|
|||
|
|
isRedGreenMode: this.isInRedGreenMode(), // 传递红绿图模式状态
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
command.undoable = !!options.undoable; // 设置为可撤销
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新存储的尺寸
|
|||
|
|
this.canvasWidth = width;
|
|||
|
|
this.canvasHeight = height;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 调整背景大小并等比缩放所有其他元素
|
|||
|
|
* @param {number} width 宽度
|
|||
|
|
* @param {number} height 高度
|
|||
|
|
*/
|
|||
|
|
resizeCanvasWithScale(width, height, options = {}) {
|
|||
|
|
// 检查是否有除背景层外的其他元素
|
|||
|
|
const hasOtherElements = this.canvas
|
|||
|
|
.getObjects()
|
|||
|
|
.some((obj) => !obj.isBackground);
|
|||
|
|
|
|||
|
|
if (hasOtherElements) {
|
|||
|
|
// 有其他元素时使用带缩放的命令
|
|||
|
|
const command = new BackgroundSizeWithScaleCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
canvasManager: this.canvasManager,
|
|||
|
|
newWidth: width,
|
|||
|
|
newHeight: height,
|
|||
|
|
isRedGreenMode: this.isInRedGreenMode(), // 传递红绿图模式状态
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
command.undoable = !!options.undoable; // 设置为可撤销
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 没有其他元素时使用普通的背景尺寸调整命令
|
|||
|
|
this.resizeCanvas(width, height, options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新存储的尺寸
|
|||
|
|
this.canvasWidth = width;
|
|||
|
|
this.canvasHeight = height;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 排序图层，确保图层顺序: 普通图层 > 固定图层 > 背景图层
|
|||
|
|
*/
|
|||
|
|
sortLayers() {
|
|||
|
|
// 对图层进行排序：背景图层在最底层（数组最后），固定图层在中间
|
|||
|
|
this.layers.value.sort((a, b) => {
|
|||
|
|
// 如果a是背景图层，它应该排在后面（最底层）
|
|||
|
|
if (a.isBackground) return 1;
|
|||
|
|
// 如果b是背景图层，它应该排在后面（最底层）
|
|||
|
|
if (b.isBackground) return -1;
|
|||
|
|
|
|||
|
|
// 如果a是固定图层而b不是固定图层，a应该排在后面（固定图层在普通图层下方）
|
|||
|
|
if (a.isFixed && !b.isFixed) return 1;
|
|||
|
|
// 如果b是固定图层而a不是固定图层，b应该排在后面（固定图层在普通图层下方）
|
|||
|
|
if (b.isFixed && !a.isFixed) return -1;
|
|||
|
|
|
|||
|
|
// 其他情况保持原有顺序
|
|||
|
|
return 0;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 更新画布对象顺序
|
|||
|
|
this._rearrangeObjects();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重新排列画布上的对象以匹配图层顺序
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_rearrangeObjects() {
|
|||
|
|
if (!this.canvas) return;
|
|||
|
|
|
|||
|
|
// 获取画布上的所有对象
|
|||
|
|
const canvasObjects = [...this.canvas.getObjects()];
|
|||
|
|
|
|||
|
|
// 清空画布
|
|||
|
|
this.canvas.clear();
|
|||
|
|
|
|||
|
|
// 按图层顺序(从底到顶)重新添加对象
|
|||
|
|
// 注意：图层数组是从顶到底的顺序，需要反向遍历
|
|||
|
|
for (let i = this.layers.value.length - 1; i >= 0; i--) {
|
|||
|
|
const layer = this.layers.value[i];
|
|||
|
|
|
|||
|
|
// 跳过不可见图层
|
|||
|
|
if (!layer.visible) continue;
|
|||
|
|
|
|||
|
|
if (layer.isBackground) {
|
|||
|
|
// 背景图层特殊处理
|
|||
|
|
if (layer.fabricObject) {
|
|||
|
|
const bgObject = canvasObjects.find(
|
|||
|
|
(obj) => obj.id === layer.fabricObject.id
|
|||
|
|
);
|
|||
|
|
if (bgObject) {
|
|||
|
|
this.canvas.add(bgObject);
|
|||
|
|
} else if (layer.fabricObject) {
|
|||
|
|
this.canvas.add(layer.fabricObject);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else if (
|
|||
|
|
Array.isArray(layer.fabricObjects) &&
|
|||
|
|
layer.fabricObjects.length > 0
|
|||
|
|
) {
|
|||
|
|
// 普通图层，添加所有fabricObjects
|
|||
|
|
layer.fabricObjects.forEach((obj) => {
|
|||
|
|
const originalObj = canvasObjects.find((o) => o.id === obj.id);
|
|||
|
|
if (originalObj) {
|
|||
|
|
this.canvas.add(originalObj);
|
|||
|
|
} else {
|
|||
|
|
this.canvas.add(obj);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新对象交互性
|
|||
|
|
this.updateLayersObjectsInteractivity();
|
|||
|
|
|
|||
|
|
// 渲染画布
|
|||
|
|
this.canvas.renderAll();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 同步画布对象到图层数据
|
|||
|
|
* 确保画布上的对象和图层数据一致
|
|||
|
|
*/
|
|||
|
|
syncCanvasToLayers() {
|
|||
|
|
if (!this.canvas) return;
|
|||
|
|
|
|||
|
|
// 获取画布上的所有对象
|
|||
|
|
const canvasObjects = this.canvas.getObjects();
|
|||
|
|
|
|||
|
|
// 遍历所有图层
|
|||
|
|
this.layers.value.forEach((layer) => {
|
|||
|
|
if (layer.isBackground) {
|
|||
|
|
// 背景图层处理
|
|||
|
|
if (layer.fabricObject) {
|
|||
|
|
const existsOnCanvas = canvasObjects.some(
|
|||
|
|
(obj) => obj.id === layer.fabricObject.id
|
|||
|
|
);
|
|||
|
|
if (!existsOnCanvas) {
|
|||
|
|
this.canvas.add(layer.fabricObject);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else if (Array.isArray(layer.fabricObjects)) {
|
|||
|
|
// 更新图层中的对象列表
|
|||
|
|
const updatedObjects = [];
|
|||
|
|
|
|||
|
|
// 处理已有对象
|
|||
|
|
layer.fabricObjects.forEach((obj) => {
|
|||
|
|
const canvasObj = canvasObjects.find((cObj) => cObj.id === obj.id);
|
|||
|
|
if (canvasObj) {
|
|||
|
|
updatedObjects.push(canvasObj);
|
|||
|
|
} else {
|
|||
|
|
// 对象不在画布上，添加到画布
|
|||
|
|
this.canvas.add(obj);
|
|||
|
|
updatedObjects.push(obj);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 检查是否有新对象需要添加到图层
|
|||
|
|
canvasObjects.forEach((canvasObj) => {
|
|||
|
|
if (
|
|||
|
|
canvasObj.layerId === layer.id &&
|
|||
|
|
!updatedObjects.some((obj) => obj.id === canvasObj.id)
|
|||
|
|
) {
|
|||
|
|
updatedObjects.push(canvasObj);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 更新图层的对象列表
|
|||
|
|
layer.fabricObjects = updatedObjects;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 重新排列对象以匹配图层顺序
|
|||
|
|
this._rearrangeObjects();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 导出当前图层数据
|
|||
|
|
* @returns {Object} 图层数据对象
|
|||
|
|
*/
|
|||
|
|
exportLayersData() {
|
|||
|
|
// 深拷贝图层数据，避免修改原始数据
|
|||
|
|
const layersData = JSON.parse(JSON.stringify(this.layers.value));
|
|||
|
|
|
|||
|
|
// 移除无法序列化的属性
|
|||
|
|
layersData.forEach((layer) => {
|
|||
|
|
if (layer.fabricObjects) {
|
|||
|
|
// 序列化对象
|
|||
|
|
layer.serializedObjects = layer.fabricObjects
|
|||
|
|
.map((obj) => {
|
|||
|
|
if (typeof obj.toObject === "function") {
|
|||
|
|
return obj.toObject(["id", "layerId", "layerName"]);
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
})
|
|||
|
|
.filter(Boolean);
|
|||
|
|
|
|||
|
|
// 删除原始对象引用
|
|||
|
|
delete layer.fabricObjects;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (layer.fabricObject) {
|
|||
|
|
layer.serializedBackgroundObject =
|
|||
|
|
typeof layer.fabricObject.toObject === "function"
|
|||
|
|
? layer.fabricObject.toObject(["id", "layerId", "layerName"])
|
|||
|
|
: null;
|
|||
|
|
|
|||
|
|
delete layer.fabricObject;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
layers: layersData,
|
|||
|
|
activeLayerId: this.activeLayerId.value,
|
|||
|
|
canvasWidth: this.canvasWidth,
|
|||
|
|
canvasHeight: this.canvasHeight,
|
|||
|
|
backgroundColor: this.backgroundColor,
|
|||
|
|
editorMode: this.editorMode,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 导入图层数据
|
|||
|
|
* @param {Object} data 图层数据对象
|
|||
|
|
* @returns {boolean} 是否导入成功
|
|||
|
|
*/
|
|||
|
|
importLayersData(data) {
|
|||
|
|
if (!data || !data.layers || !Array.isArray(data.layers)) {
|
|||
|
|
console.error("无效的图层数据");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const fabric = window.fabric;
|
|||
|
|
if (!fabric) {
|
|||
|
|
console.error("未找到fabric库");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清除画布
|
|||
|
|
this.canvas.clear();
|
|||
|
|
|
|||
|
|
// 清空图层列表
|
|||
|
|
this.layers.value = [];
|
|||
|
|
|
|||
|
|
// 设置画布尺寸
|
|||
|
|
if (data.canvasWidth && data.canvasHeight) {
|
|||
|
|
this.canvasWidth = data.canvasWidth;
|
|||
|
|
this.canvasHeight = data.canvasHeight;
|
|||
|
|
this.canvas.setWidth(data.canvasWidth);
|
|||
|
|
this.canvas.setHeight(data.canvasHeight);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置背景颜色
|
|||
|
|
if (data.backgroundColor) {
|
|||
|
|
this.backgroundColor = data.backgroundColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置编辑模式
|
|||
|
|
if (data.editorMode) {
|
|||
|
|
this.editorMode = data.editorMode;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 导入图层
|
|||
|
|
const promises = data.layers.map((layerData) => {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
const newLayer = {
|
|||
|
|
...layerData,
|
|||
|
|
fabricObjects: [],
|
|||
|
|
children: layerData.children || [],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 如果有序列化的对象，恢复它们
|
|||
|
|
if (
|
|||
|
|
layerData.serializedObjects &&
|
|||
|
|
Array.isArray(layerData.serializedObjects)
|
|||
|
|
) {
|
|||
|
|
fabric.util.enlivenObjects(layerData.serializedObjects, (objects) => {
|
|||
|
|
objects.forEach((obj) => {
|
|||
|
|
// 关联到图层
|
|||
|
|
obj.layerId = newLayer.id;
|
|||
|
|
obj.layerName = newLayer.name;
|
|||
|
|
|
|||
|
|
// 添加到画布
|
|||
|
|
this.canvas.add(obj);
|
|||
|
|
|
|||
|
|
// 添加到图层
|
|||
|
|
newLayer.fabricObjects.push(obj);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
resolve(newLayer);
|
|||
|
|
});
|
|||
|
|
} else if (
|
|||
|
|
layerData.isBackground &&
|
|||
|
|
layerData.serializedBackgroundObject
|
|||
|
|
) {
|
|||
|
|
// 恢复背景对象
|
|||
|
|
fabric.util.enlivenObjects(
|
|||
|
|
[layerData.serializedBackgroundObject],
|
|||
|
|
([bgObject]) => {
|
|||
|
|
if (bgObject) {
|
|||
|
|
bgObject.layerId = newLayer.id;
|
|||
|
|
bgObject.layerName = newLayer.name;
|
|||
|
|
this.canvas.add(bgObject);
|
|||
|
|
newLayer.fabricObject = bgObject;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resolve(newLayer);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
resolve(newLayer);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 等待所有图层加载完成
|
|||
|
|
Promise.all(promises).then((layers) => {
|
|||
|
|
// 更新图层列表
|
|||
|
|
this.layers.value = layers;
|
|||
|
|
|
|||
|
|
// 设置活动图层
|
|||
|
|
if (data.activeLayerId) {
|
|||
|
|
const activeLayer = layers.find(
|
|||
|
|
(layer) => layer.id === data.activeLayerId
|
|||
|
|
);
|
|||
|
|
if (activeLayer && !activeLayer.isBackground && !activeLayer.locked) {
|
|||
|
|
this.activeLayerId.value = data.activeLayerId;
|
|||
|
|
} else {
|
|||
|
|
// 查找第一个非背景、非锁定的图层
|
|||
|
|
const firstNormalLayer = layers.find(
|
|||
|
|
(layer) => !layer.isBackground && !layer.locked
|
|||
|
|
);
|
|||
|
|
if (firstNormalLayer) {
|
|||
|
|
this.activeLayerId.value = firstNormalLayer.id;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确保至少有一个背景图层和一个普通图层
|
|||
|
|
this.initializeLayers();
|
|||
|
|
|
|||
|
|
// 更新对象交互性
|
|||
|
|
this.updateLayersObjectsInteractivity();
|
|||
|
|
|
|||
|
|
// 重新排列对象
|
|||
|
|
this._rearrangeObjects();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 复制图层数据到剪贴板
|
|||
|
|
* @param {string} layerId 要复制的图层ID
|
|||
|
|
* @returns {Object} 复制的图层数据
|
|||
|
|
*/
|
|||
|
|
copyLayer(layerId) {
|
|||
|
|
const layer = this.layers.value.find((l) => l.id === layerId);
|
|||
|
|
if (!layer) {
|
|||
|
|
console.error(`图层 ${layerId} 不存在`);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 不允许复制背景图层
|
|||
|
|
if (layer.isBackground) {
|
|||
|
|
console.warn("不能复制背景图层");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 序列化图层对象
|
|||
|
|
const layerCopy = JSON.parse(JSON.stringify(layer));
|
|||
|
|
|
|||
|
|
// 序列化fabricObjects数组
|
|||
|
|
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
|
|||
|
|
layerCopy.serializedObjects = layer.fabricObjects
|
|||
|
|
.map((obj) =>
|
|||
|
|
typeof obj.toObject === "function"
|
|||
|
|
? obj.toObject(["id", "layerId", "layerName"])
|
|||
|
|
: null
|
|||
|
|
)
|
|||
|
|
.filter(Boolean);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 存储到剪贴板
|
|||
|
|
this.clipboardData = layerCopy;
|
|||
|
|
|
|||
|
|
console.log(`已复制图层：${layer.name}`);
|
|||
|
|
|
|||
|
|
return this.clipboardData;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 剪切图层数据到剪贴板
|
|||
|
|
* @param {string} layerId 要剪切的图层ID
|
|||
|
|
* @returns {Object} 剪切的图层数据
|
|||
|
|
*/
|
|||
|
|
cutLayer(layerId) {
|
|||
|
|
const layer = this.layers.value.find((l) => l.id === layerId);
|
|||
|
|
if (!layer) {
|
|||
|
|
console.error(`图层 ${layerId} 不存在`);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 不允许剪切背景图层
|
|||
|
|
if (layer.isBackground) {
|
|||
|
|
console.warn("不能剪切背景图层");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查是否是唯一的普通图层
|
|||
|
|
const normalLayers = this.layers.value.filter((l) => !l.isBackground);
|
|||
|
|
if (normalLayers.length === 1) {
|
|||
|
|
console.warn("不能剪切唯一的普通图层");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 序列化图层对象
|
|||
|
|
const layerCopy = JSON.parse(JSON.stringify(layer));
|
|||
|
|
|
|||
|
|
// 序列化fabricObjects数组
|
|||
|
|
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
|
|||
|
|
layerCopy.serializedObjects = layer.fabricObjects
|
|||
|
|
.map((obj) =>
|
|||
|
|
typeof obj.toObject === "function"
|
|||
|
|
? obj.toObject(["id", "layerId", "layerName"])
|
|||
|
|
: null
|
|||
|
|
)
|
|||
|
|
.filter(Boolean);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 存储到剪贴板
|
|||
|
|
this.clipboardData = layerCopy;
|
|||
|
|
|
|||
|
|
// 记录是剪切操作，用于粘贴时的处理
|
|||
|
|
this.clipboardData.isCut = true;
|
|||
|
|
|
|||
|
|
// 从画布中移除图层中的所有对象
|
|||
|
|
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
|
|||
|
|
layer.fabricObjects.forEach((obj) => {
|
|||
|
|
this.canvas.remove(obj);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果剪切的是当前活动图层，需要切换到其他图层
|
|||
|
|
if (this.activeLayerId.value === layerId) {
|
|||
|
|
// 查找下一个可用的图层
|
|||
|
|
const nextLayer = this._findNextAvailableLayer(layerId);
|
|||
|
|
if (nextLayer) {
|
|||
|
|
this.setActiveLayer(nextLayer.id);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new RemoveLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
layerId: layerId,
|
|||
|
|
activeLayerId: this.activeLayerId,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新对象交互性
|
|||
|
|
this.updateLayersObjectsInteractivity();
|
|||
|
|
|
|||
|
|
console.log(`已剪切图层：${layer.name}`);
|
|||
|
|
|
|||
|
|
return this.clipboardData;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 粘贴图层
|
|||
|
|
* @returns {string} 新创建的图层ID
|
|||
|
|
*/
|
|||
|
|
/**
|
|||
|
|
* 粘贴图层
|
|||
|
|
* @returns {string} 新创建的图层ID
|
|||
|
|
*/
|
|||
|
|
pasteLayer() {
|
|||
|
|
if (!this.clipboardData) {
|
|||
|
|
console.error("剪贴板中没有图层数据");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用命令管理器执行粘贴命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
return this.commandManager.executeByName("PasteLayer", {
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
activeLayerId: this.activeLayerId,
|
|||
|
|
clipboardData: this.clipboardData,
|
|||
|
|
layerManager: this, // 传递LayerManager实例
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 创建粘贴图层命令
|
|||
|
|
const command = new PasteLayerCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
activeLayerId: this.activeLayerId,
|
|||
|
|
clipboardData: this.clipboardData,
|
|||
|
|
layerManager: this, // 传递LayerManager实例
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
return command.execute();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 查找下一个可用的图层（非背景、非锁定）
|
|||
|
|
* @param {string} excludeLayerId 要排除的图层ID
|
|||
|
|
* @returns {Object|null} 下一个可用的图层
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_findNextAvailableLayer(excludeLayerId) {
|
|||
|
|
// 查找第一个非背景、非锁定的图层，排除指定的图层
|
|||
|
|
return (
|
|||
|
|
this.layers.value.find(
|
|||
|
|
(layer) =>
|
|||
|
|
layer.id !== excludeLayerId && !layer.isBackground && !layer.locked
|
|||
|
|
) || null
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取活动图层上方的插入索引
|
|||
|
|
* @returns {number} 插入索引
|
|||
|
|
* @private
|
|||
|
|
*/
|
|||
|
|
_getInsertIndexAboveActiveLayer() {
|
|||
|
|
if (!this.activeLayerId.value) return 0;
|
|||
|
|
|
|||
|
|
const activeLayerIndex = this.layers.value.findIndex(
|
|||
|
|
(layer) => layer.id === this.activeLayerId.value
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return activeLayerIndex !== -1 ? activeLayerIndex : 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 保存画布状态
|
|||
|
|
* 现在统一通过命令管理器的智能状态保存
|
|||
|
|
*/
|
|||
|
|
saveCanvasState() {
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
// 使用智能状态保存，避免不必要的状态保存
|
|||
|
|
this.commandManager.saveStateIfNeeded({
|
|||
|
|
name: "图层状态更新",
|
|||
|
|
stateType: "full",
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 执行带状态保存的操作
|
|||
|
|
* 统一的状态管理入口
|
|||
|
|
*/
|
|||
|
|
executeWithState(operation, name = "图层操作") {
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
return this.commandManager.executeWithState(operation, {
|
|||
|
|
name,
|
|||
|
|
stateType: "full",
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 降级处理
|
|||
|
|
return typeof operation === "function" ? operation() : operation;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 批量执行图层操作
|
|||
|
|
*/
|
|||
|
|
batchExecute(operations, name = "批量图层操作") {
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
return this.commandManager.batch(operations, name);
|
|||
|
|
} else {
|
|||
|
|
// 降级处理
|
|||
|
|
const results = [];
|
|||
|
|
for (const operation of operations) {
|
|||
|
|
results.push(typeof operation === "function" ? operation() : operation);
|
|||
|
|
}
|
|||
|
|
return results;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 清理画布，移除所有图层
|
|||
|
|
*/
|
|||
|
|
clearCanvas() {
|
|||
|
|
// 清空画布
|
|||
|
|
this.canvas.clear();
|
|||
|
|
|
|||
|
|
// 清空图层列表
|
|||
|
|
this.layers.value = [];
|
|||
|
|
|
|||
|
|
// 重新初始化基本图层
|
|||
|
|
this.initializeLayers();
|
|||
|
|
|
|||
|
|
console.log("已清空画布");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 合并图层内的对象为单一图像
|
|||
|
|
* @param {string} layerId 图层ID，默认使用当前活动图层
|
|||
|
|
* @param {fabric.Image} newImage 要合并的新图像（可选）
|
|||
|
|
* @returns {Promise<string>} 合并后的图像ID
|
|||
|
|
*/
|
|||
|
|
async mergeLayerObjects(activeLayer, fabricImage = null) {
|
|||
|
|
if (!activeLayer) {
|
|||
|
|
console.error(`活动图层不存在`);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new MergeLayerObjectsCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
fabricImage,
|
|||
|
|
activeLayer,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
return command;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 合并图层内对象成组的命令
|
|||
|
|
* 将新的图像与图层内现有对象合并为一个组对象
|
|||
|
|
* 注意：此命令与 MergeLayerObjectsCommand 类似，但它创建一个组而不是单个图像对象
|
|||
|
|
*/
|
|||
|
|
async LayerObjectsToGroup(activeLayer, fabricImage = null) {
|
|||
|
|
// 检查活动图层是否存在
|
|||
|
|
if (!activeLayer) {
|
|||
|
|
console.error(`活动图层不存在`);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new LayerObjectsToGroupCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
fabricImage,
|
|||
|
|
activeLayer,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
return command;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 更新背景图层颜色
|
|||
|
|
* @param {string} backgroundColor 背景颜色
|
|||
|
|
*/
|
|||
|
|
updateBackgroundColor(backgroundColor) {
|
|||
|
|
// 查找背景图层
|
|||
|
|
const backgroundLayer = this.layers.value.find(
|
|||
|
|
(layer) => layer.isBackground
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (!backgroundLayer) {
|
|||
|
|
console.warn("没有找到背景图层");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 直接创建和执行命令
|
|||
|
|
const command = new UpdateBackgroundCommand({
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
layers: this.layers,
|
|||
|
|
canvasManager: this.canvasManager,
|
|||
|
|
backgroundColor: backgroundColor,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
command.execute();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新存储的背景颜色
|
|||
|
|
this.backgroundColor = backgroundColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取图层缩略图
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @param {number} width 缩略图宽度
|
|||
|
|
* @param {number} height 缩略图高度
|
|||
|
|
* @returns {string} Base64编码的缩略图
|
|||
|
|
*/
|
|||
|
|
getLayerThumbnail(layerId, width = 100, height = 100) {
|
|||
|
|
const layer = this.getLayerById(layerId);
|
|||
|
|
if (!layer) {
|
|||
|
|
console.error(`图层 ${layerId} 不存在`);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建临时画布
|
|||
|
|
const tempCanvas = document.createElement("canvas");
|
|||
|
|
tempCanvas.width = width;
|
|||
|
|
tempCanvas.height = height;
|
|||
|
|
const ctx = tempCanvas.getContext("2d");
|
|||
|
|
|
|||
|
|
// 设置背景色
|
|||
|
|
ctx.fillStyle = "#ffffff";
|
|||
|
|
ctx.fillRect(0, 0, width, height);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
if (layer.isBackground && layer.fabricObject) {
|
|||
|
|
// 背景图层
|
|||
|
|
const bgObj = layer.fabricObject;
|
|||
|
|
if (bgObj.toCanvasElement) {
|
|||
|
|
const element = bgObj.toCanvasElement();
|
|||
|
|
ctx.drawImage(element, 0, 0, width, height);
|
|||
|
|
}
|
|||
|
|
} else if (layer.fabricObjects && layer.fabricObjects.length > 0) {
|
|||
|
|
// 普通图层
|
|||
|
|
layer.fabricObjects.forEach((obj) => {
|
|||
|
|
if (obj.toCanvasElement) {
|
|||
|
|
const element = obj.toCanvasElement();
|
|||
|
|
const scaleX = width / this.canvasWidth;
|
|||
|
|
const scaleY = height / this.canvasHeight;
|
|||
|
|
|
|||
|
|
ctx.save();
|
|||
|
|
ctx.scale(scaleX, scaleY);
|
|||
|
|
ctx.drawImage(element, obj.left || 0, obj.top || 0);
|
|||
|
|
ctx.restore();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return tempCanvas.toDataURL();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("生成图层缩略图失败:", error);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 检查图层是否为空
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @returns {boolean} 是否为空图层
|
|||
|
|
*/
|
|||
|
|
isLayerEmpty(layerId) {
|
|||
|
|
const layer = this.getLayerById(layerId);
|
|||
|
|
if (!layer) return true;
|
|||
|
|
|
|||
|
|
if (layer.isBackground) {
|
|||
|
|
return !layer.fabricObject;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return !layer.fabricObjects || layer.fabricObjects.length === 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取图层统计信息
|
|||
|
|
* @returns {Object} 图层统计信息
|
|||
|
|
*/
|
|||
|
|
getLayerStats() {
|
|||
|
|
const stats = {
|
|||
|
|
totalLayers: this.layers.value.length,
|
|||
|
|
backgroundLayers: 0,
|
|||
|
|
normalLayers: 0,
|
|||
|
|
lockedLayers: 0,
|
|||
|
|
hiddenLayers: 0,
|
|||
|
|
emptyLayers: 0,
|
|||
|
|
totalObjects: 0,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.layers.value.forEach((layer) => {
|
|||
|
|
if (layer.isBackground) {
|
|||
|
|
stats.backgroundLayers++;
|
|||
|
|
if (layer.fabricObject) {
|
|||
|
|
stats.totalObjects++;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
stats.normalLayers++;
|
|||
|
|
if (layer.fabricObjects) {
|
|||
|
|
stats.totalObjects += layer.fabricObjects.length;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (layer.locked) stats.lockedLayers++;
|
|||
|
|
if (!layer.visible) stats.hiddenLayers++;
|
|||
|
|
if (this.isLayerEmpty(layer.id)) stats.emptyLayers++;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return stats;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 清理空图层
|
|||
|
|
* @returns {Array<string>} 被清理的图层ID数组
|
|||
|
|
*/
|
|||
|
|
cleanupEmptyLayers() {
|
|||
|
|
const emptyLayerIds = [];
|
|||
|
|
|
|||
|
|
// 找出所有空的非背景图层
|
|||
|
|
this.layers.value.forEach((layer) => {
|
|||
|
|
if (!layer.isBackground && this.isLayerEmpty(layer.id)) {
|
|||
|
|
emptyLayerIds.push(layer.id);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 删除空图层
|
|||
|
|
emptyLayerIds.forEach((layerId) => {
|
|||
|
|
this.removeLayer(layerId);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (emptyLayerIds.length > 0) {
|
|||
|
|
console.log(`已清理 ${emptyLayerIds.length} 个空图层`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return emptyLayerIds;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 销毁图层管理器
|
|||
|
|
* 清理所有引用和事件监听器
|
|||
|
|
*/
|
|||
|
|
dispose() {
|
|||
|
|
// 清空画布
|
|||
|
|
if (this.canvas) {
|
|||
|
|
this.canvas.clear();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清空图层数据
|
|||
|
|
if (this.layers && this.layers.value) {
|
|||
|
|
this.layers.value = [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清空剪贴板
|
|||
|
|
this.clipboardData = null;
|
|||
|
|
|
|||
|
|
// 清除引用
|
|||
|
|
this.canvas = null;
|
|||
|
|
this.layers = null;
|
|||
|
|
this.activeLayerId = null;
|
|||
|
|
this.commandManager = null;
|
|||
|
|
this.canvasManager = null;
|
|||
|
|
this.toolManager = null;
|
|||
|
|
|
|||
|
|
console.log("LayerManager 已销毁");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 创建文本图层并添加文本对象
|
|||
|
|
* @param {Object} textObject Fabric文本对象
|
|||
|
|
* @param {Object} options 文本选项
|
|||
|
|
* @returns {Object} 创建的文本对象
|
|||
|
|
*/
|
|||
|
|
createTextLayerWithObject(textObject, options = {}) {
|
|||
|
|
if (!this.canvas || !textObject) return null;
|
|||
|
|
|
|||
|
|
// 确保对象有ID
|
|||
|
|
textObject.id =
|
|||
|
|
textObject.id || `text_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
|
|||
|
|
|
|||
|
|
// 创建文本图层
|
|||
|
|
const layerName = options.name || "文本图层";
|
|||
|
|
const layerId = this.createLayer(layerName, LayerType.TEXT, {
|
|||
|
|
layerProperties: {
|
|||
|
|
text: options.text || textObject.text || "新文本",
|
|||
|
|
fontFamily: options.fontFamily || textObject.fontFamily || "Arial",
|
|||
|
|
fontSize: options.fontSize || textObject.fontSize || 24,
|
|||
|
|
fontWeight: options.fontWeight || textObject.fontWeight || "normal",
|
|||
|
|
fontStyle: options.fontStyle || textObject.fontStyle || "normal",
|
|||
|
|
textAlign: options.textAlign || textObject.textAlign || "left",
|
|||
|
|
underline: options.underline || textObject.underline || false,
|
|||
|
|
linethrough: options.linethrough || textObject.linethrough || false,
|
|||
|
|
overline: options.overline || textObject.overline || false,
|
|||
|
|
fill: options.fill || textObject.fill || "#000000",
|
|||
|
|
textBackgroundColor:
|
|||
|
|
options.textBackgroundColor ||
|
|||
|
|
textObject.textBackgroundColor ||
|
|||
|
|
"transparent",
|
|||
|
|
lineHeight: options.lineHeight || textObject.lineHeight || 1.16,
|
|||
|
|
charSpacing: options.charSpacing || textObject.charSpacing || 0,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 把对象添加到新图层
|
|||
|
|
textObject.layerId = layerId;
|
|||
|
|
textObject.layerName = layerName;
|
|||
|
|
|
|||
|
|
// 添加到画布，如果还未添加
|
|||
|
|
const isOnCanvas = this.canvas
|
|||
|
|
.getObjects()
|
|||
|
|
.some((obj) => obj.id === textObject.id);
|
|||
|
|
if (!isOnCanvas) {
|
|||
|
|
this.canvas.add(textObject);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新图层中的对象列表
|
|||
|
|
const layer = this.getLayerById(layerId);
|
|||
|
|
if (layer) {
|
|||
|
|
layer.fabricObjects = layer.fabricObjects || [];
|
|||
|
|
layer.fabricObjects.push(textObject);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置此图层为活动图层
|
|||
|
|
this.setActiveLayer(layerId);
|
|||
|
|
|
|||
|
|
// 更新交互性
|
|||
|
|
this.updateLayersObjectsInteractivity();
|
|||
|
|
|
|||
|
|
return textObject;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 根据fabric对象查找所属图层
|
|||
|
|
* @param {Object} fabricObject fabric对象
|
|||
|
|
* @returns {Object|null} 图层对象或null
|
|||
|
|
*/
|
|||
|
|
findLayerByObject(fabricObject) {
|
|||
|
|
if (!fabricObject || !fabricObject.id) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 遍历所有图层查找包含该对象的图层
|
|||
|
|
for (const layer of this.layers.value) {
|
|||
|
|
// 检查背景图层
|
|||
|
|
if (layer.isBackground && layer.fabricObject) {
|
|||
|
|
if (layer.fabricObject.id === fabricObject.id) {
|
|||
|
|
return layer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查普通图层
|
|||
|
|
if (layer.fabricObjects && Array.isArray(layer.fabricObjects)) {
|
|||
|
|
const foundObject = layer.fabricObjects.find(
|
|||
|
|
(obj) => obj.id === fabricObject.id
|
|||
|
|
);
|
|||
|
|
if (foundObject) {
|
|||
|
|
return layer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 拖拽排序图层
|
|||
|
|
* @param {number} oldIndex 原索引
|
|||
|
|
* @param {number} newIndex 新索引
|
|||
|
|
* @param {string} layerId 图层ID
|
|||
|
|
* @returns {boolean} 是否排序成功
|
|||
|
|
*/
|
|||
|
|
reorderLayers(oldIndex, newIndex, layerId) {
|
|||
|
|
// 检查索引有效性
|
|||
|
|
if (
|
|||
|
|
oldIndex < 0 ||
|
|||
|
|
newIndex < 0 ||
|
|||
|
|
oldIndex >= this.layers.value.length ||
|
|||
|
|
newIndex >= this.layers.value.length
|
|||
|
|
) {
|
|||
|
|
console.warn("图层排序索引无效");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查是否是同一位置
|
|||
|
|
if (oldIndex === newIndex) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取要移动的图层
|
|||
|
|
const layer = this.layers.value[oldIndex];
|
|||
|
|
if (!layer || layer.id !== layerId) {
|
|||
|
|
console.warn("图层ID与索引不匹配");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查是否是背景层或固定层（不允许排序）
|
|||
|
|
if (layer.isBackground || layer.isFixed) {
|
|||
|
|
console.warn("背景层和固定层不能参与排序");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查目标位置是否合法（不能移到背景层或固定层的位置）
|
|||
|
|
const targetLayer = this.layers.value[newIndex];
|
|||
|
|
if (targetLayer && (targetLayer.isBackground || targetLayer.isFixed)) {
|
|||
|
|
console.warn("不能移动到背景层或固定层的位置");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建并执行拖拽排序命令
|
|||
|
|
const command = new ReorderLayersCommand({
|
|||
|
|
layers: this.layers,
|
|||
|
|
oldIndex: oldIndex,
|
|||
|
|
newIndex: newIndex,
|
|||
|
|
layerId: layerId,
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
return this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
return command.execute();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 拖拽排序子图层
|
|||
|
|
* @param {string} parentId 父图层ID
|
|||
|
|
* @param {number} oldIndex 原索引
|
|||
|
|
* @param {number} newIndex 新索引
|
|||
|
|
* @param {string} layerId 子图层ID
|
|||
|
|
* @returns {boolean} 是否排序成功
|
|||
|
|
*/
|
|||
|
|
reorderChildLayers(parentId, oldIndex, newIndex, layerId) {
|
|||
|
|
// 检查父图层是否存在
|
|||
|
|
const parentLayer = this.getLayerById(parentId);
|
|||
|
|
if (!parentLayer) {
|
|||
|
|
console.warn(`父图层 ${parentId} 不存在`);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取所有子图层
|
|||
|
|
const childLayers = this.layers.value.filter(
|
|||
|
|
(layer) => layer.parentId === parentId
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 检查索引有效性
|
|||
|
|
if (
|
|||
|
|
oldIndex < 0 ||
|
|||
|
|
newIndex < 0 ||
|
|||
|
|
oldIndex >= childLayers.length ||
|
|||
|
|
newIndex >= childLayers.length
|
|||
|
|
) {
|
|||
|
|
console.warn("子图层排序索引无效");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查是否是同一位置
|
|||
|
|
if (oldIndex === newIndex) {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证图层ID
|
|||
|
|
const layer = childLayers[oldIndex];
|
|||
|
|
if (!layer || layer.id !== layerId) {
|
|||
|
|
console.warn("子图层ID与索引不匹配");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建并执行子图层拖拽排序命令
|
|||
|
|
const command = new ReorderChildLayersCommand({
|
|||
|
|
layers: this.layers,
|
|||
|
|
parentId: parentId,
|
|||
|
|
oldIndex: oldIndex,
|
|||
|
|
newIndex: newIndex,
|
|||
|
|
layerId: layerId,
|
|||
|
|
canvas: this.canvas,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 执行命令
|
|||
|
|
if (this.commandManager) {
|
|||
|
|
return this.commandManager.execute(command);
|
|||
|
|
} else {
|
|||
|
|
return command.execute();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置红绿图模式管理器
|
|||
|
|
setRedGreenModeManager(redGreenModeManager) {
|
|||
|
|
this.redGreenModeManager = redGreenModeManager;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 启用红绿图模式
|
|||
|
|
enableRedGreenMode() {
|
|||
|
|
this.isRedGreenMode = true;
|
|||
|
|
console.log("图层管理器：红绿图模式已启用");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 禁用红绿图模式
|
|||
|
|
disableRedGreenMode() {
|
|||
|
|
this.isRedGreenMode = false;
|
|||
|
|
console.log("图层管理器：红绿图模式已禁用");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查是否为红绿图模式
|
|||
|
|
isInRedGreenMode() {
|
|||
|
|
return this.isRedGreenMode;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检查背景图层是否需要跟随画布大小变化（红绿图模式下）
|
|||
|
|
shouldBackgroundFollowCanvasSize() {
|
|||
|
|
return this.isRedGreenMode;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 在红绿图模式下创建图层 - 限制功能
|
|||
|
|
createLayerInRedGreenMode() {
|
|||
|
|
console.warn("红绿图模式下不支持创建新图层");
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 在红绿图模式下移除图层 - 限制功能
|
|||
|
|
removeLayerInRedGreenMode(layerId) {
|
|||
|
|
console.warn("红绿图模式下不支持删除图层");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|