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

平铺元素ui更改

Browse Source
This commit is contained in:
李志鹏
2026-01-13 14:41:20 +08:00
parent e1ca896764
commit 6eda04a81e
18 changed files with 1544 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/component/Canvas/CanvasEditor/managers/ToolManager.js
View File

@@ -67,6 +67,12 @@ export class ToolManager {
// 工具列表 - 与OperationType保持一致
this.tools = {
// 禁用工具
[OperationType.DISABLED]: {
name: "禁用工具",
icon: "disabled",
cursor: "not-allowed",
},
// 基础工具
[OperationType.SELECT]: {
name: "选择工具",
@@ -83,6 +89,7 @@ export class ToolManager {
shortcut: "B",
setup: this.setupBrushTool.bind(this),
allowedInRedGreen: false,
specialLayerDisabled: true,
},
[OperationType.ERASER]: {
name: "橡皮擦",
@@ -91,6 +98,7 @@ export class ToolManager {
shortcut: "E",
setup: this.setupEraserTool.bind(this),
allowedInRedGreen: true, // 红绿图模式允许橡皮擦
specialLayerDisabled: true,
},
[OperationType.EYEDROPPER]: {
name: "吸色工具",
@@ -117,6 +125,7 @@ export class ToolManager {
shortcut: "L",
setup: this.setupLassoTool.bind(this),
allowedInRedGreen: false,
specialLayerDisabled: true,
},
[OperationType.LASSO_RECTANGLE]: {
name: "矩形套索工具",
@@ -126,6 +135,7 @@ export class ToolManager {
altKey: true,
setup: this.setupRectangleLassoTool.bind(this),
allowedInRedGreen: false,
specialLayerDisabled: true,
},
[OperationType.LASSO_ELLIPSE]: {
name: "椭圆形套索工具",
@@ -135,6 +145,7 @@ export class ToolManager {
altKey: true,
setup: this.setupEllipseLassoTool.bind(this),
allowedInRedGreen: false,
specialLayerDisabled: true,
},
// 选区工具 - 只需要矩形选区
@@ -164,6 +175,7 @@ export class ToolManager {
shortcut: "J",
setup: this.setupLiquifyTool.bind(this),
allowedInRedGreen: false, // 红绿图模式不允许液化
specialLayerDisabled: true,
},
[OperationType.TEXT]: {
name: "文本工具",
@@ -174,6 +186,36 @@ export class ToolManager {
allowedInRedGreen: false, // 红绿图模式不允许文本
},
// 部件选取工具
[OperationType.PART]: {
name: "部件选取工具",
icon: "part",
cursor: "crosshair",
// setup: this.setupLassoTool.bind(this),
specialLayerDisabled: true,
},
[OperationType.PART_RECTANGLE]: {
name: "部件选取工具-矩形",
icon: "part",
cursor: "crosshair",
// setup: this.setupRectangleLassoTool.bind(this),
specialLayerDisabled: true,
},
[OperationType.PART_BRUSH]: {
name: "部件选取工具-画笔",
icon: "part",
cursor: "crosshair",
// setup: this.setupEllipseLassoTool.bind(this),
specialLayerDisabled: true,
},
[OperationType.PART_ERASER]: {
name: "部件选取工具-橡皮擦",
icon: "part",
cursor: "crosshair",
// setup: this.setupEllipseLassoTool.bind(this),
specialLayerDisabled: true,
},
// 红绿图模式专用工具
[OperationType.RED_BRUSH]: {
name: "红色笔刷",
@@ -331,8 +373,9 @@ export class ToolManager {
* @param {String} toolId 工具ID
*/
setTool(toolId) {
const tool = this.tools[toolId];
// 检查工具是否存在
if (!this.tools[toolId]) {
if (!tool) {
console.error(`工具 '${toolId}' 不存在`);
return;
}
@@ -348,15 +391,20 @@ export class ToolManager {
console.warn(`工具 '${toolId}' 只能在红绿图模式下使用`);
return;
}
if(tool?.specialLayerDisabled && this.checkToolCanOperateSelectedObject()){
console.warn(`工具 '${toolId}' 不能在当前选中对象上操作`);
toolId = OperationType.DISABLED;
}
// 保存先前的工具
// 保存先前的工具
this.previousTool = this.activeTool.value;
// 取消画布的选中状态
this.canvas?.discardActiveObject();
this.canvasManager?.layerManager?.updateLayersObjectsInteractivity?.();
this.canvas?.renderAll();
if(toolId !== OperationType.DISABLED){
this.canvas?.discardActiveObject();
this.canvasManager?.layerManager?.updateLayersObjectsInteractivity?.();
this.canvas?.renderAll();
}
// 隐藏文本编辑面板
this.hideTextEditor();
@@ -374,7 +422,6 @@ export class ToolManager {
}
// 设置工具特定的状态
const tool = this.tools[toolId];
if (tool && typeof tool.setup === "function") {
console.log(`画布切换工具:${tool.name}(${toolId})`)
this.canvas.toolId = toolId;
@@ -424,7 +471,7 @@ export class ToolManager {
const currentTool = this.activeTool.value;
const tool = this.tools[currentTool];
if(tool?.specialLayerDisabled && this.checkToolCanOperateSelectedObject()) return;
// 根据当前工具设置selection状态
if (currentTool === OperationType.SELECT) {
this.canvas.selection = true;
@@ -460,19 +507,15 @@ export class ToolManager {
/**
* 检查当前工具是否禁止操作当前选中的对象
* @param {Boolean} isBrushTool 是否为画笔工具
* @returns {Boolean} 是否可以切换
*/
checkToolCanOperateSelectedObject(isBrushTool = false) {
checkToolCanOperateSelectedObject() {
const layer = this.layerManager?.getActiveLayer();
const isSpecialLayer = !!layer?.specialType;
if (isSpecialLayer) {
if(isBrushTool){
this._disableBrushIndicator();
}
this._disableBrushIndicator();
this.canvas.defaultCursor = "not-allowed";
}
console.log("===========",isSpecialLayer, this.canvas.defaultCursor);
return isSpecialLayer;
}
@@ -482,7 +525,7 @@ export class ToolManager {
*/
setupBrushTool() {
if (!this.canvas) return;
if (this.checkToolCanOperateSelectedObject(true)) return;
if (this.checkToolCanOperateSelectedObject()) return;
this.canvas.isDrawingMode = true;
this.canvas.selection = false;
@@ -526,7 +569,7 @@ export class ToolManager {
*/
setupEraserTool() {
if (!this.canvas) return;
if (this.checkToolCanOperateSelectedObject(true)) return;
if (this.checkToolCanOperateSelectedObject()) return;
this.canvas.isDrawingMode = true;
this.canvas.selection = false;
@@ -580,6 +623,7 @@ export class ToolManager {
*/
setupLassoTool() {
if (!this.canvas) return;
if (this.checkToolCanOperateSelectedObject()) return;
this.canvas.isDrawingMode = false;
this.canvas.selection = false;
@@ -676,7 +720,7 @@ export class ToolManager {
*/
setupLiquifyTool() {
if (!this.canvas || !this.layerManager) return;
if (this.checkToolCanOperateSelectedObject(true)) return;
if (this.checkToolCanOperateSelectedObject()) return;
this.canvas.isDrawingMode = false;
this.canvas.selection = false;