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

feat: 裁剪组裁剪跟随选择组移动

Browse Source
This commit is contained in:
bighuixiang
2025-07-14 01:00:23 +08:00
parent 96e13cb22a
commit 24e9ba8ae5
80 changed files with 2052 additions and 4292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/component/Canvas/CanvasEditor/commands/CrossLevelMoveCommands.js
View File

@@ -85,9 +85,7 @@ export class CrossLevelMoveCommand extends Command {
this.layers.value.forEach((layer) => {
if (layer.fabricObject) {
states[layer.id] = {
isInCanvas: this.canvas
? this.canvas.contains(layer.fabricObject)
: false,
isInCanvas: this.canvas ? this.canvas.contains(layer.fabricObject) : false,
parentGroupId: null,
visible: layer.fabricObject.visible,
};
@@ -127,11 +125,7 @@ export class CrossLevelMoveCommand extends Command {
* 验证移动的有效性
*/
validateMove() {
const layer = this.findLayer(
this.layerId,
this.fromContainerType,
this.fromParentId
);
const layer = this.findLayer(this.layerId, this.fromContainerType, this.fromParentId);
if (!layer) {
throw new Error(`找不到要移动的图层: ${this.layerId}`);
@@ -153,9 +147,7 @@ export class CrossLevelMoveCommand extends Command {
// 检查目标父图层是否为组
if (this.toContainerType === "child") {
const targetParent = this.layers.value.find(
(layer) => layer.id === this.toParentId
);
const targetParent = this.layers.value.find((layer) => layer.id === this.toParentId);
if (!targetParent || !isGroupLayer(targetParent)) {
throw new Error("目标图层不是组图层");
}
@@ -198,15 +190,9 @@ export class CrossLevelMoveCommand extends Command {
try {
// 根据移动类型执行对应操作
if (
this.fromContainerType === "root" &&
this.toContainerType === "child"
) {
if (this.fromContainerType === "root" && this.toContainerType === "child") {
this.moveRootToGroup(draggedLayer);
} else if (
this.fromContainerType === "child" &&
this.toContainerType === "root"
) {
} else if (this.fromContainerType === "child" && this.toContainerType === "root") {
this.moveGroupToRoot(draggedLayer);
} else if (
this.fromContainerType === "child" &&
@@ -228,6 +214,17 @@ export class CrossLevelMoveCommand extends Command {
await this.layerManager?.updateLayersObjectsInteractivity();
this.canvas?.renderAll();
// 生成缩略图
this.fromParentId &&
this.layerManager?.canvasManager?.thumbnailManager?.generateLayerThumbnail?.(
this.fromParentId
);
this.toParentId &&
this.layerManager?.canvasManager?.thumbnailManager?.generateLayerThumbnail?.(
this.toParentId
);
console.log("✅ 跨层级移动命令执行成功");
return true;
} catch (error) {
@@ -266,7 +263,6 @@ export class CrossLevelMoveCommand extends Command {
this.restoreFabricObjectStates(this.beforeState.fabricObjects);
await this.layerManager?.updateLayersObjectsInteractivity();
this.canvas?.renderAll();
// 刷新画布
this.canvas?.renderAll();
console.log("✅ 跨层级移动命令撤销成功");
@@ -299,9 +295,7 @@ export class CrossLevelMoveCommand extends Command {
// 根据图层的parentId重新放置
if (layer.parentId) {
const parentLayer = this.layers.value.find(
(l) => l.id === layer.parentId
);
const parentLayer = this.layers.value.find((l) => l.id === layer.parentId);
if (
parentLayer &&
parentLayer.fabricObject &&
@@ -396,14 +390,9 @@ export class CrossLevelMoveCommand extends Command {
layer.children = layerData.children
.map((childData) => {
// 从原始图层数组中查找子图层
let childLayer = originalLayers.find(
(l) => l.id === childData.id
);
let childLayer = originalLayers.find((l) => l.id === childData.id);
if (!childLayer) {
childLayer = this.findLayerInOriginalStructure(
childData.id,
originalLayers
);
childLayer = this.findLayerInOriginalStructure(childData.id, originalLayers);
}
if (childLayer) {
// 更新子图层属性
@@ -465,9 +454,7 @@ export class CrossLevelMoveCommand extends Command {
// 根据目标状态放置对象
if (targetState.parentGroupId) {
// 应该在特定组中
const parentLayer = this.layers.value.find(
(l) => l.id === targetState.parentGroupId
);
const parentLayer = this.layers.value.find((l) => l.id === targetState.parentGroupId);
if (
parentLayer &&
parentLayer.fabricObject &&
@@ -532,12 +519,7 @@ export class CrossLevelMoveCommand extends Command {
*/
safeRemoveFromContainer(fabricObject, container, containerName) {
return this.safeFabricOperation(() => {
if (
container &&
container.remove &&
container.contains &&
container.contains(fabricObject)
) {
if (container && container.remove && container.contains && container.contains(fabricObject)) {
container.remove(fabricObject);
console.log(`✅ 成功从${containerName}移除对象`);
return true;
@@ -556,11 +538,7 @@ export class CrossLevelMoveCommand extends Command {
// 从所有组中移除
this.layers.value.forEach((layer) => {
if (layer.fabricObject && layer.fabricObject.type === "group") {
this.safeRemoveFromContainer(
fabricObject,
layer.fabricObject,
`组${layer.id}`
);
this.safeRemoveFromContainer(fabricObject, layer.fabricObject, `组${layer.id}`);
}
});
}
@@ -575,9 +553,7 @@ export class CrossLevelMoveCommand extends Command {
newIndex: this.newIndex,
});
const targetParent = this.layers.value.find(
(layer) => layer.id === this.toParentId
);
const targetParent = this.layers.value.find((layer) => layer.id === this.toParentId);
if (!targetParent) {
throw new Error(`找不到目标父图层: ${this.toParentId}`);
}
@@ -588,9 +564,7 @@ export class CrossLevelMoveCommand extends Command {
}
// 从顶级图层数组中移除
const rootIndex = this.layers.value.findIndex(
(layer) => layer.id === draggedLayer.id
);
const rootIndex = this.layers.value.findIndex((layer) => layer.id === draggedLayer.id);
if (rootIndex !== -1) {
this.layers.value.splice(rootIndex, 1);
console.log(`🗑️ 从顶级图层数组中移除图层 ${draggedLayer.id}`);
@@ -599,20 +573,14 @@ export class CrossLevelMoveCommand extends Command {
// 更新图层关系
draggedLayer.parentId = this.toParentId;
targetParent.children.splice(this.newIndex, 0, draggedLayer);
console.log(
`📂 将图层 ${draggedLayer.id} 添加到父图层 ${this.toParentId} 的children中`
);
console.log(`📂 将图层 ${draggedLayer.id} 添加到父图层 ${this.toParentId} 的children中`);
// 处理fabric对象的层级关系
if (draggedLayer.fabricObject && targetParent.fabricObject) {
console.log(`🎨 处理fabric对象层级关系`);
// 从画布中移除
this.safeRemoveFromContainer(
draggedLayer.fabricObject,
this.canvas,
"画布"
);
this.safeRemoveFromContainer(draggedLayer.fabricObject, this.canvas, "画布");
// 添加到父组
this.safeAddToContainer(
@@ -635,22 +603,16 @@ export class CrossLevelMoveCommand extends Command {
newIndex: this.newIndex,
});
const sourceParent = this.layers.value.find(
(layer) => layer.id === this.fromParentId
);
const sourceParent = this.layers.value.find((layer) => layer.id === this.fromParentId);
if (!sourceParent || !sourceParent.children) {
throw new Error(`找不到源父图层或其children数组: ${this.fromParentId}`);
}
// 从源父图层的children中移除
const childIndex = sourceParent.children.findIndex(
(child) => child.id === draggedLayer.id
);
const childIndex = sourceParent.children.findIndex((child) => child.id === draggedLayer.id);
if (childIndex !== -1) {
sourceParent.children.splice(childIndex, 1);
console.log(
`🗑️ 从父图层 ${this.fromParentId} 的children中移除图层 ${draggedLayer.id}`
);
console.log(`🗑️ 从父图层 ${this.fromParentId} 的children中移除图层 ${draggedLayer.id}`);
}
// 处理fabric对象的层级关系
@@ -675,9 +637,7 @@ export class CrossLevelMoveCommand extends Command {
// 计算在顶级图层中的插入位置
const targetIndex = Math.min(this.newIndex, this.layers.value.length);
this.layers.value.splice(targetIndex, 0, draggedLayer);
console.log(
`📂 将图层 ${draggedLayer.id} 添加到顶级图层数组位置 ${targetIndex}`
);
console.log(`📂 将图层 ${draggedLayer.id} 添加到顶级图层数组位置 ${targetIndex}`);
console.log("✅ 组内图层移动到顶级完成");
}
@@ -693,26 +653,18 @@ export class CrossLevelMoveCommand extends Command {
newIndex: this.newIndex,
});
const sourceParent = this.layers.value.find(
(layer) => layer.id === this.fromParentId
);
const targetParent = this.layers.value.find(
(layer) => layer.id === this.toParentId
);
const sourceParent = this.layers.value.find((layer) => layer.id === this.fromParentId);
const targetParent = this.layers.value.find((layer) => layer.id === this.toParentId);
if (!sourceParent || !targetParent) {
throw new Error("找不到源父图层或目标父图层");
}
// 从源父图层中移除
const childIndex = sourceParent.children.findIndex(
(child) => child.id === draggedLayer.id
);
const childIndex = sourceParent.children.findIndex((child) => child.id === draggedLayer.id);
if (childIndex !== -1) {
sourceParent.children.splice(childIndex, 1);
console.log(
`🗑️ 从源父图层 ${this.fromParentId} 中移除图层 ${draggedLayer.id}`
);
console.log(`🗑️ 从源父图层 ${this.fromParentId} 中移除图层 ${draggedLayer.id}`);
// 从源父组的fabricObject中移除
if (draggedLayer.fabricObject && sourceParent.fabricObject) {
@@ -726,9 +678,7 @@ export class CrossLevelMoveCommand extends Command {
// 更新图层的parentId
draggedLayer.parentId = this.toParentId;
console.log(
`🔗 更新图层 ${draggedLayer.id} 的parentId为 ${this.toParentId}`
);
console.log(`🔗 更新图层 ${draggedLayer.id} 的parentId为 ${this.toParentId}`);
// 确保目标父图层有children数组
if (!targetParent.children) {