aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

深度画布键盘事件-撤回功能

Browse Source
This commit is contained in:
lzp
2026-03-12 11:40:48 +08:00
parent adf562bbe4
commit 86f1efbf43
11 changed files with 228 additions and 951 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js
View File

@@ -6,6 +6,7 @@ export class CanvasEventManager {
this.canvas = canvas;
this.canvasManager = options.canvasManager;
this.toolManager = options.toolManager || null;
this.stateManager = options.stateManager || null;
this.animationManager = options.animationManager;
this.thumbnailManager = options.thumbnailManager;
this.activeElementId = options.activeElementId || { value: null };
@@ -44,7 +45,7 @@ export class CanvasEventManager {
// 共享事件
this.setupSelectionEvents();
// this.setupObjectEvents();
this.setupObjectEvents();
// this.setupDoubleClickEvents();
// this.setupHandlePathCreated();
@@ -632,129 +633,47 @@ export class CanvasEventManager {
setupObjectEvents() {
// 监听对象变化事件，用于更新缩略图
this.canvas.on("object:added", (e) => {
if (this.thumbnailManager && e.target && e.target.id) {
// 延迟更新以确保对象完全添加
setTimeout(() => {
// 现在图层就是元素本身，直接更新元素的缩略图
this.thumbnailManager.generateLayerThumbnail(e.target.layerId);
}, 300);
}
});
// this.canvas.on("object:added", (e) => {
// if (this.thumbnailManager && e.target && e.target.id) {
// // 延迟更新以确保对象完全添加
// setTimeout(() => {
// // 现在图层就是元素本身，直接更新元素的缩略图
// this.thumbnailManager.generateLayerThumbnail(e.target.layerId);
// }, 300);
// }
// });
const updateLayers = (e) => {
if (e.target._objects) return;
this.layerManager.updateLayers();
};
// 添加对象开始变换时的状态捕获
this.canvas.on(
"object:moving",
this._captureInitialTransformState.bind(this)
);
this.canvas.on(
"object:scaling",
this._captureInitialTransformState.bind(this)
);
this.canvas.on(
"object:rotating",
this._captureInitialTransformState.bind(this)
);
this.canvas.on(
"object:skewing",
this._captureInitialTransformState.bind(this)
);
this.canvas.on("object:moving", (e) => {
// console.log("object:moving", e);
updateLayers(e);
});
this.canvas.on("object:scaling", (e) => {
// console.log("object:scaling", e);
updateLayers(e);
});
this.canvas.on("object:rotating", (e) => {
// console.log("object:rotating", e);
updateLayers(e);
});
this.canvas.on("object:skewing", (e) => {
// console.log("object:skewing", e);
updateLayers(e);
});
this.canvas.on("object:modified", (e) => {
// 移除调试日志
// console.log("object:modified", e);
const activeObj = e.target || this.canvas.getActiveObject();
if (activeObj && this.layerManager?.commandManager) {
// 使用新的轻量级 TransformCommand 替代完整状态保存
// 检查对象是否有初始变换状态记录
if (activeObj._initialTransformState) {
// 创建并执行 TransformCommand，只记录变换属性的变化
const transformCmd = new TransformCommand({
canvas: this.canvas,
objectId: activeObj.id,
initialState: activeObj._initialTransformState,
finalState: TransformCommand.captureTransformState(activeObj),
objectType: activeObj.type,
name: `变换 ${activeObj.type || "对象"}`,
layerManager: this.layerManager,
layers: this.layers,
lastSelectLayerId: this.lastSelectLayerId,
});
// 执行并将命令添加到历史栈
this.layerManager.commandManager.execute(transformCmd, {
name: "对象修改",
});
// 清除临时状态记录
delete activeObj._initialTransformState;
}
} else {
this.canvasManager.changeCanvas();
}
if (this.thumbnailManager && e.target) {
if (e.target.id) {
this.updateLayerThumbnail(e.target.id, e.target);
// 如果该元素是分组图层的一部分，也更新分组图层的缩略图
if (e.target.parentId) {
this.updateLayerThumbnail(e.target.parentId);
}
}
}
updateLayers(e);
this.stateManager.recordState();
});
this.canvas.on("object:removed", (e) => {
if (this.thumbnailManager && e.target) {
if (e.target.id) {
// 如果该元素是分组图层的一部分，也更新分组图层的缩略图
if (e.target.parentId) {
// setTimeout(() => this.updateLayerThumbnail(e.target.parentId), 50);
this.thumbnailManager.generateLayerThumbnail(e.target.parentId);
}
}
}
updateLayers(e);
this.stateManager.recordState();
});
// // 鼠标抬起时，检查是否需要保存状态
// this.canvas.on("mouse:up", (e) => {
// // 只在选择模式下处理对象变换的状态保存
// if (this.toolManager.currentTool.value !== OperationType.SELECT) {
// // 绘画、擦除等模式通过各自的命令管理状态，不需要在这里保存
// return;
// }
// const activeObj = this.canvas.getActiveObject();
// if (
// activeObj &&
// activeObj._stateRecord &&
// activeObj._stateRecord.isModifying
// ) {
// const original = activeObj._stateRecord.originalState;
// // 检查是否是真正的变换操作（移动、缩放、旋转）
// const hasTransformChanged =
// original.left !== activeObj.left ||
// original.top !== activeObj.top ||
// original.scaleX !== activeObj.scaleX ||
// original.scaleY !== activeObj.scaleY ||
// original.angle !== activeObj.angle;
// // 只有在对象发生变换且不是命令执行过程中时才保存状态
// if (hasTransformChanged && this.layerManager) {
// // 立即保存状态，而不是延迟执行
// this.layerManager.saveCanvasState();
// delete activeObj._stateRecord;
// } else {
// // 清理状态记录，即使没有保存状态
// delete activeObj._stateRecord;
// }
// }
// });
}
setupDoubleClickEvents() {
// 双击处理
this.canvas.on("mouse:dblclick", (opt) => {
@@ -878,15 +797,11 @@ export class CanvasEventManager {
updateSelectedLayer(opt) {
const selected = opt.selected[0];
if (selected) {
if (selected && opt.selected.length === 1) {
this.layerManager.setActiveID(selected?.info?.id, false)
}
}
// clearSelectedElements() {
// this.activeElementId.value = null;
// }
// 更新图层缩略图
updateLayerThumbnail(layerId) {
if (!this.thumbnailManager || !layerId || !this.layers) return;
@@ -937,31 +852,6 @@ export class CanvasEventManager {
this.stopInertiaAnimation();
}
/**
* 捕获对象开始变换时的初始状态
* @private
* @param {Object} e 事件对象
*/
_captureInitialTransformState(e) {
const obj = e.target;
// 只在首次触发变换事件时记录初始状态
if (obj && !obj._initialTransformState && obj.id) {
// 捕获对象的初始变换状态
obj._initialTransformState = TransformCommand.captureTransformState(obj);
// 添加调试日志(可选)
// console.log(`捕获对象 ${obj.id} (${obj.type}) 的初始变换状态`);
}
const arrs = [];
if (e.target._objects) {
e.target._objects.forEach((v) => arrs.push(v));
} else {
arrs.push(e.target);
}
this.canvasManager.beforeChangeCanvas(arrs);
}
/**
* 精确检测设备类型，区分 PC、Mac、平板和移动设备
* @private