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-20 19:31:43 +08:00
parent c44aadc9e3
commit 666cbc8470
5 changed files with 2438 additions and 2165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
src/component/Canvas/CanvasEditor/managers/LayerManager.js
View File

@@ -52,18 +52,27 @@ import {
} from "../commands/RasterizeLayerCommand";
// 导入图层排序相关类和混入
import { LayerSort, createLayerSort, LayerSortMixin, LayerSortUtils } from "../utils/LayerSort";
import {
LayerSort,
createLayerSort,
LayerSortMixin,
LayerSortUtils,
} from "../utils/LayerSort";
import CanvasConfig from "../config/canvasConfig";
import { isBoolean, template } from "lodash-es";
import { findObjectById, generateId, optimizeCanvasRendering } from "../utils/helper";
import {
findObjectById,
generateId,
optimizeCanvasRendering,
} from "../utils/helper";
import { message } from "ant-design-vue";
import { fabric } from "fabric-with-all";
import { getOriginObjectInfo } from "../utils/layerUtils";
import { restoreFabricObject } from "../utils/objectHelper";
import { UpdateGroupMaskPositionCommand } from "../commands/UpdateGroupMaskPositionCommand";
import { useI18n } from 'vue-i18n'
const {t} = useI18n()
// import { useI18n } from 'vue-i18n'
// const {t} = useI18n()
/**
* 图层管理器 - 负责管理画布上的所有图层
* 包含图层的创建、删除、修改、排序等操作
@@ -83,6 +92,7 @@ export class LayerManager {
* @param {Number} options.canvasWidth 画布宽度
* @param {Number} options.canvasHeight 画布高度
* @param {String} options.backgroundColor 背景颜色
* @param {Function} options.t 国际化函数
*/
constructor(options) {
this.canvas = options.canvas;
@@ -91,6 +101,7 @@ export class LayerManager {
this.commandManager = options.commandManager;
this.canvasManager = options.canvasManager || null;
this.lastSelectLayerId = options.lastSelectLayerId || { value: null }; // 上次选中的图层ID
this.t = options.t || ((key) => key); // 国际化函数，默认为直接返回key
this.backgroundFillManager = new BackgroundFillManager({
canvas: this.canvas,
@@ -221,7 +232,11 @@ export class LayerManager {
// 基于 fabric-with-erasing 库的 erasable 属性设置擦除权限
// 只有活动图层、可见、非锁定、非背景、非固定图层的对象才可擦除
obj.erasable =
isInActiveLayer && layer.visible && !layer.locked && !layer.isBackground && !layer.isFixed;
isInActiveLayer &&
layer.visible &&
!layer.locked &&
!layer.isBackground &&
!layer.isFixed;
// 图层状态决定交互性
if (layer.isBackground || obj.isBackground || layer.isFixed) {
@@ -268,7 +283,11 @@ export class LayerManager {
if (this.isRedGreenMode) {
// 红绿图模式下 所有普通图层都可擦除
obj.erasable = layer.visible && !layer.locked && !layer.isBackground && !layer.isFixed;
obj.erasable =
layer.visible &&
!layer.locked &&
!layer.isBackground &&
!layer.isFixed;
}
// 平移模式下，禁用多选和擦除
@@ -319,7 +338,9 @@ export class LayerManager {
// 设置子图层对象的交互性
layer?.childLayer?.forEach(async (childLayer) => {
const childObj = this.canvas.getObjects().find((o) => o.layerId === childLayer.id);
const childObj = this.canvas
.getObjects()
.find((o) => o.layerId === childLayer.id);
if (childObj) {
await this._setObjectInteractivity(childObj, childLayer, editorMode);
}
@@ -331,7 +352,10 @@ export class LayerManager {
let clippingMaskFabricObject = null;
if (layer.clippingMask) {
// 反序列化 clippingMask
clippingMaskFabricObject = await restoreFabricObject(layer.clippingMask, this.canvas);
clippingMaskFabricObject = await restoreFabricObject(
layer.clippingMask,
this.canvas
);
clippingMaskFabricObject.clipPath = null;
clippingMaskFabricObject.set({
@@ -351,7 +375,9 @@ export class LayerManager {
// }
// }
layer.children.forEach((childLayer) => {
const childObj = this.canvas.getObjects().find((o) => o.layerId === childLayer.id);
const childObj = this.canvas
.getObjects()
.find((o) => o.layerId === childLayer.id);
if (childObj) {
childObj.clipPath = clippingMaskFabricObject;
childObj.dirty = true; // 标记为脏对象
@@ -369,7 +395,9 @@ export class LayerManager {
});
} else {
layer.fabricObjects?.forEach((obj) => {
const fabricObject = this.canvas.getObjects().find((o) => o.id === obj.id);
const fabricObject = this.canvas
.getObjects()
.find((o) => o.id === obj.id);
if (fabricObject) {
fabricObject.clipPath = clippingMaskFabricObject;
fabricObject.dirty = true; // 标记为脏对象
@@ -397,7 +425,11 @@ export class LayerManager {
*/
async fillLayerBackground(layerId, fillColor, undoable = true) {
layerId = this.activeLayerId.value || layerId;
await this.backgroundFillManager.fillLayerBackground(layerId, fillColor, undoable);
await this.backgroundFillManager.fillLayerBackground(
layerId,
fillColor,
undoable
);
}
/**
@@ -470,7 +502,9 @@ export class LayerManager {
*/
createBackgroundLayer(name = "背景") {
// 检查是否已有背景图层
const hasBackgroundLayer = this.layers.value.some((layer) => layer.isBackground);
const hasBackgroundLayer = this.layers.value.some(
(layer) => layer.isBackground
);
if (hasBackgroundLayer) {
console.warn("已存在背景层，不再创建新的背景层");
@@ -523,7 +557,9 @@ export class LayerManager {
}
// 生成唯一ID
const layerId = `fixed_layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
const layerId = `fixed_layer_${Date.now()}_${Math.floor(
Math.random() * 1000
)}`;
// 创建固定图层
const fixedLayer = createFixedLayer({
@@ -574,19 +610,21 @@ export class LayerManager {
// 如果没有任何图层，创建背景层、固定图层和一个空白图层
if (this.layers.value.length === 0) {
// 创建背景图层
this.createBackgroundLayer();
this.createBackgroundLayer(this.t("Canvas.Background"));
// 创建固定图层，位于背景图层之上
this.createFixedLayer();
this.createFixedLayer(this.t("Canvas.FixedLayer"));
// 创建一个空白图层（默认位于背景图层和固定图层之上）
await this.createLayer(t('Canvas.Layer1'));
await this.createLayer(this.t("Canvas.Layer1"));
} else {
// 检查是否已有背景层
const hasBackgroundLayer = this.layers.value.some((layer) => layer.isBackground);
const hasBackgroundLayer = this.layers.value.some(
(layer) => layer.isBackground
);
if (!hasBackgroundLayer) {
this.createBackgroundLayer();
this.createBackgroundLayer(this.t("Canvas.Background"));
}
// 检查是否已有固定图层
@@ -602,7 +640,7 @@ export class LayerManager {
);
if (!hasNormalLayer) {
await this.createLayer(t('Canvas.Layer1'));
await this.createLayer(this.t("Canvas.Layer1"));
}
}
@@ -629,7 +667,10 @@ export class LayerManager {
}
// 验证目标图层是否存在
const { layer: targetLayer } = findLayerRecursively(this.layers.value, targetLayerId);
const { layer: targetLayer } = findLayerRecursively(
this.layers.value,
targetLayerId
);
if (!targetLayer) {
console.error(`目标图层 ${targetLayerId} 不存在`);
return null;
@@ -683,7 +724,8 @@ export class LayerManager {
*/
removeObjectFromLayer(objectOrId) {
// 获取对象ID
const objectId = typeof objectOrId === "string" ? objectOrId : objectOrId.id;
const objectId =
typeof objectOrId === "string" ? objectOrId : objectOrId.id;
if (!objectId) {
console.error("无效的对象ID");
@@ -743,7 +785,9 @@ export class LayerManager {
*/
getActiveLayer() {
if (!this.activeLayerId.value) {
console.warn("没有活动图层ID，无法获取活动图层 ==== 默认设置第一个图层为活动图层");
console.warn(
"没有活动图层ID，无法获取活动图层 ==== 默认设置第一个图层为活动图层"
);
this.activeLayerId.value = this.layers.value[0]?.id || null;
}
@@ -848,8 +892,13 @@ export class LayerManager {
}
const tempFabricObject =
fabricObject?.toObject?.(["id", "layerId", "layerName", "isBackgroud", "isFixed"]) ||
fabricObject;
fabricObject?.toObject?.([
"id",
"layerId",
"layerName",
"isBackgroud",
"isFixed",
]) || fabricObject;
if (layer.isFixed || layer.isBackground) {
layer.fabricObject = tempFabricObject;
} else {
@@ -875,7 +924,9 @@ export class LayerManager {
// 如果是背景层或固定层，不允许移动
if (layer && (layer.isBackground || layer.isFixed)) {
console.warn(layer.isBackground ? $t("背景层不可移动") : $t("固定层不可移动"));
console.warn(
layer.isBackground ? this.t("背景层不可移动") : this.t("固定层不可移动")
);
return false;
}
@@ -1300,7 +1351,11 @@ export class LayerManager {
async ungroupLayers(groupId) {
// 查找组图层
const groupLayer = this.layers.value.find((l) => l.id === groupId);
if (!groupLayer || !groupLayer.children || groupLayer.children.length === 0) {
if (
!groupLayer ||
!groupLayer.children ||
groupLayer.children.length === 0
) {
console.error(`${groupId} 不是有效的组图层或不包含子图层`);
return null;
}
@@ -1357,7 +1412,9 @@ export class LayerManager {
*/
resizeCanvasWithScale(width, height, options = {}) {
// 检查是否有除背景层外的其他元素
const hasOtherElements = this.canvas.getObjects().some((obj) => !obj.isBackground);
const hasOtherElements = this.canvas
.getObjects()
.some((obj) => !obj.isBackground);
if (hasOtherElements) {
// 有其他元素时使用带缩放的命令
@@ -1426,7 +1483,9 @@ export class LayerManager {
if (!this.canvas) return;
// 获取画布上的所有对象
const canvasObjects = [...this.canvas.getObjects(["id", "layerId", "layerName"])];
const canvasObjects = [
...this.canvas.getObjects(["id", "layerId", "layerName"]),
];
// 清空画布
this.canvas.clear();
@@ -1441,13 +1500,19 @@ export class LayerManager {
if (layer.isBackground && layer.fabricObject) {
// 背景图层
const originalObj = canvasObjects.find((o) => o.id === layer.fabricObject.id);
const originalObj = canvasObjects.find(
(o) => o.id === layer.fabricObject.id
);
if (originalObj) {
this.canvas.add(originalObj);
} else {
this.canvas.add(layer.fabricObject);
}
} else if (layer.isFixed && layer.fabricObjects && layer.fabricObjects.length > 0) {
} else if (
layer.isFixed &&
layer.fabricObjects &&
layer.fabricObjects.length > 0
) {
// 固定图层
layer.fabricObjects.forEach((obj) => {
const originalObj = canvasObjects.find((o) => o.id === obj.id);
@@ -1457,7 +1522,10 @@ export class LayerManager {
this.canvas.add(obj);
}
});
} else if (Array.isArray(layer.fabricObjects) && layer.fabricObjects.length > 0) {
} else if (
Array.isArray(layer.fabricObjects) &&
layer.fabricObjects.length > 0
) {
// 普通图层，添加所有fabricObjects
layer.fabricObjects.forEach((obj) => {
const originalObj = canvasObjects.find((o) => o.id === obj.id);
@@ -1486,7 +1554,9 @@ export class LayerManager {
if (layer.isBackground) {
// 背景图层处理
if (layer.fabricObject) {
const existsOnCanvas = canvasObjects.some((obj) => obj.id === layer.fabricObject.id);
const existsOnCanvas = canvasObjects.some(
(obj) => obj.id === layer.fabricObject.id
);
if (!existsOnCanvas) {
this.canvas.add(layer.fabricObject);
}
@@ -1621,7 +1691,8 @@ export class LayerManager {
layerCopy.children = layer.children.map((child) => {
const childCopy = JSON.parse(JSON.stringify(child));
if (child.fabricObjects && child.fabricObjects.length > 0) {
childCopy.serializedObjects = this.getCurrLayerSerializedObjects(child);
childCopy.serializedObjects =
this.getCurrLayerSerializedObjects(child);
}
return childCopy;
});
@@ -1667,7 +1738,9 @@ export class LayerManager {
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
layerCopy.serializedObjects = layer.fabricObjects
.map((obj) =>
typeof obj.toObject === "function" ? obj.toObject(["id", "layerId", "layerName"]) : null
typeof obj.toObject === "function"
? obj.toObject(["id", "layerId", "layerName"])
: null
)
.filter(Boolean);
}
@@ -1800,7 +1873,8 @@ export class LayerManager {
// 查找第一个非背景、非锁定的图层，排除指定的图层
return (
this.layers.value.find(
(layer) => layer.id !== excludeLayerId && !layer.isBackground && !layer.locked
(layer) =>
layer.id !== excludeLayerId && !layer.isBackground && !layer.locked
) || null
);
}
@@ -1935,7 +2009,9 @@ export class LayerManager {
* @param {string} backgroundColor 背景颜色
*/
updateBackgroundColor(backgroundColor, options = {}) {
const backgroundLayer = this.layers.value.find((layer) => layer.isBackground);
const backgroundLayer = this.layers.value.find(
(layer) => layer.isBackground
);
if (!backgroundLayer) {
console.warn("没有找到背景图层");
@@ -2135,7 +2211,8 @@ export class LayerManager {
if (!this.canvas || !textObject) return null;
// 确保对象有ID
textObject.id = textObject.id || `text_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
textObject.id =
textObject.id || `text_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
// 创建文本图层
const layerName = options.name || "文本图层";
@@ -2152,7 +2229,9 @@ export class LayerManager {
overline: options.overline || textObject.overline || false,
fill: options.fill || textObject.fill || "#000000",
textBackgroundColor:
options.textBackgroundColor || textObject.textBackgroundColor || "transparent",
options.textBackgroundColor ||
textObject.textBackgroundColor ||
"transparent",
lineHeight: options.lineHeight || textObject.lineHeight || 1.16,
charSpacing: options.charSpacing || textObject.charSpacing || 0,
},
@@ -2163,7 +2242,9 @@ export class LayerManager {
textObject.layerName = layerName;
// 添加到画布，如果还未添加
const isOnCanvas = this.canvas.getObjects().some((obj) => obj.id === textObject.id);
const isOnCanvas = this.canvas
.getObjects()
.some((obj) => obj.id === textObject.id);
if (!isOnCanvas) {
this.canvas.add(textObject);
}
@@ -2172,7 +2253,9 @@ export class LayerManager {
const layer = this.getLayerById(layerId);
if (layer) {
layer.fabricObjects = layer.fabricObjects || [];
layer.fabricObjects.push(textObject.toObject(["id", "layerId", "layerName"]));
layer.fabricObjects.push(
textObject.toObject(["id", "layerId", "layerName"])
);
}
// 设置此图层为活动图层
@@ -2205,7 +2288,9 @@ export class LayerManager {
// 检查普通图层
if (layer.fabricObjects && Array.isArray(layer.fabricObjects)) {
const foundObject = layer.fabricObjects.find((obj) => obj.id === fabricObject.id);
const foundObject = layer.fabricObjects.find(
(obj) => obj.id === fabricObject.id
);
if (foundObject) {
return layer;
}
@@ -2286,7 +2371,12 @@ export class LayerManager {
* @returns {boolean} 是否排序成功
*/
reorderChildLayers(parentId, oldIndex, newIndex, layerId) {
return this.layerSort?.reorderChildLayers(parentId, oldIndex, newIndex, layerId);
return this.layerSort?.reorderChildLayers(
parentId,
oldIndex,
newIndex,
layerId
);
}
/**
@@ -2467,13 +2557,19 @@ export class LayerManager {
const layersCount = this.layers?.value?.length || 0;
const shouldUseAsync =
async !== null ? async : LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount);
async !== null
? async
: LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount);
if (shouldUseAsync) {
console.log(`使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`);
console.log(
`使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
);
return this.layerSort.rearrangeObjectsAsync();
} else {
console.log(`使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`);
console.log(
`使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
);
this.layerSort.rearrangeObjects();
}
}
@@ -2582,7 +2678,10 @@ export class LayerManager {
moveLayerToIndex({ parentId, oldIndex, newIndex, layerId }) {
if (!this.layerSort) {
console.warn("图层排序工具未初始化，使用基础移动方法");
return this.moveLayer(layerId, newIndex > this.getLayerIndex(layerId) ? "down" : "up");
return this.moveLayer(
layerId,
newIndex > this.getLayerIndex(layerId) ? "down" : "up"
);
}
const result = this.layerSort.moveLayerToIndex({
@@ -2593,7 +2692,9 @@ export class LayerManager {
});
if (result) {
console.log(`图层 ${layerId} - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}`);
console.log(
`图层 ${layerId} - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}`
);
// 更新对象交互性
// this.updateLayersObjectsInteractivity();
}
@@ -2637,7 +2738,9 @@ export class LayerManager {
return -1;
}
let layerIndex = this.layers.value.findIndex((layer) => layer.id === layerId);
let layerIndex = this.layers.value.findIndex(
(layer) => layer.id === layerId
);
if (layerIndex >= 0) return layerIndex;
// 如果未找到，尝试在子图层中查找
const { parent } = findLayerRecursively(this.layers.value, layerId);
@@ -2668,7 +2771,9 @@ export class LayerManager {
const result = this.layerSort.reorderLayers(oldIndex, newIndex, layerId);
if (result) {
console.log(`高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}`);
console.log(
`高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}`
);
// 更新对象交互性
this.updateLayersObjectsInteractivity();
}
@@ -2685,7 +2790,12 @@ export class LayerManager {
* @returns {boolean} 是否排序成功
*/
advancedReorderChildLayers(parentId, oldIndex, newIndex, layerId) {
const result = this.reorderChildLayers(parentId, oldIndex, newIndex, layerId);
const result = this.reorderChildLayers(
parentId,
oldIndex,
newIndex,
layerId
);
if (result) {
console.log(
@@ -2802,8 +2912,12 @@ export class LayerManager {
async mergeGroupLayers(groupId) {
// 查找组图层
const groupLayer = this.layers.value.find((l) => l.id === groupId);
if (!groupLayer || !groupLayer.children || groupLayer.children.length === 0) {
console.warn($t("找不到有效的组图层或组图层为空"));
if (
!groupLayer ||
!groupLayer.children ||
groupLayer.children.length === 0
) {
console.warn(this.t("找不到有效的组图层或组图层为空"));
return [];
}
@@ -2837,22 +2951,25 @@ export class LayerManager {
const targetLayerId = layerId || this.activeLayerId.value;
if (!targetLayerId) {
console.warn($t("没有指定要栅格化的图层"));
console.warn(this.t("没有指定要栅格化的图层"));
return false;
}
// 查找目标图层
// const targetLayer = this.getLayerById(targetLayerId);
const { layer: targetLayer } = findLayerRecursively(this.layers.value, targetLayerId);
const { layer: targetLayer } = findLayerRecursively(
this.layers.value,
targetLayerId
);
if (!targetLayer) {
console.error($t("图层不存在", { layerId: targetLayerId }));
console.error(this.t("图层不存在", { layerId: targetLayerId }));
return false;
}
// 不允许栅格化背景图层和固定图层
if (targetLayer.isBackground || targetLayer.isFixed) {
console.warn($t("背景图层和固定图层不能栅格化"));
console.warn(this.t("背景图层和固定图层不能栅格化"));
return false;
}
@@ -2898,7 +3015,9 @@ export class LayerManager {
// 检查图层是否有内容可以栅格化
if (layer.type === "group" || layer.children.length > 0) {
// 组图层：检查是否有子图层且子图层有内容
return layer.children.some((child) => child.fabricObjects && child.fabricObjects.length > 0);
return layer.children.some(
(child) => child.fabricObjects && child.fabricObjects.length > 0
);
} else {
// 普通图层：检查是否有对象
return layer.fabricObjects && layer.fabricObjects.length > 0;
@@ -2913,16 +3032,19 @@ export class LayerManager {
const targetLayerId = layerId || this.activeLayerId.value;
if (!targetLayerId) {
console.warn($t("没有指定要栅格化的图层"));
console.warn(this.t("没有指定要栅格化的图层"));
return false;
}
// 查找目标图层
// const targetLayer = this.getLayerById(targetLayerId);
const { layer: targetLayer } = findLayerRecursively(this.layers.value, targetLayerId);
const { layer: targetLayer } = findLayerRecursively(
this.layers.value,
targetLayerId
);
if (!targetLayer) {
console.error($t("图层不存在", { layerId: targetLayerId }));
console.error(this.t("图层不存在", { layerId: targetLayerId }));
return false;
}