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-17 13:46:13 +08:00
parent 26581b234a
commit 695f8045f9
8 changed files with 126 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
View File

@@ -653,35 +653,35 @@ function buildContextMenuItems(layer) {
action: () => deleteSelectedLayers(),
},
// 组合图层
{
label: "填充图层",
icon: "CThemeColor",
disabled:
layer.isBackground ||
layer.isFixed ||
!layerManager?.canRasterizeLayer?.(layer.id) ||
layer.isGroup ||
layer?.children?.length > 0, // 如果是组图层或有子图层则禁用
action: () => {
// 调用浏览器原生颜色选择器
fillColorRef.value.click();
currLayerId.value = layer.id;
// // 监听颜色选择器的变化
// fillColorRef.value.addEventListener("change", () => {
// const selectedColor = fillColor.value;
// layerManager
// .fillLayerBackground(layer.id, selectedColor)
// .then(() => {
// console.log(`✅ 已填充图层 ${layer.name} 背景颜色: ${selectedColor}`);
// })
// .catch((error) => {
// console.error(`❌ 填充图层 ${layer.name} 背景颜色失败:`, error);
// });
// });
// 隐藏右键菜单
hideContextMenu();
},
},
// {
// label: "填充图层",
// icon: "CThemeColor",
// disabled:
// layer.isBackground ||
// layer.isFixed ||
// !layerManager?.canRasterizeLayer?.(layer.id) ||
// layer.isGroup ||
// layer?.children?.length > 0, // 如果是组图层或有子图层则禁用
// action: () => {
// // 调用浏览器原生颜色选择器
// fillColorRef.value.click();
// currLayerId.value = layer.id;
// // // 监听颜色选择器的变化
// // fillColorRef.value.addEventListener("change", () => {
// // const selectedColor = fillColor.value;
// // layerManager
// // .fillLayerBackground(layer.id, selectedColor)
// // .then(() => {
// // console.log(`✅ 已填充图层 ${layer.name} 背景颜色: ${selectedColor}`);
// // })
// // .catch((error) => {
// // console.error(`❌ 填充图层 ${layer.name} 背景颜色失败:`, error);
// // });
// // });
// // 隐藏右键菜单
// hideContextMenu();
// },
// },
// 组合图层
{
label: "组合图层",
@@ -1512,14 +1512,14 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
<div class="layers-panel-inner" @click="handlePanelClick">
<div class="layers-header">
<!-- 颜色填充选择组件 -->
<input
<!-- <input
class="fillColor-input"
v-model="fillColor"
ref="fillColorRef"
type="color"
@change="fillColorChange"
style="width: 0; height: 0; opacity: 0"
/>
/> -->
<h3>
{{ $t("图层") }}
{{ selectedLayerIds.length > 0 ? `(${selectedLayerIds.length})` : "" }}

31
src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, inject, computed, onMounted, onUnmounted } from "vue";
import { OperationType } from "../utils/layerHelper";
import { findLayerRecursively, OperationType } from "../utils/layerHelper";
import ToolButton from "../../ExistsImageList/ToolButton.vue";
const emit = defineEmits([
@@ -29,11 +29,19 @@ const props = defineProps({
});
const commandManager = inject("commandManager");
const layerManager = inject("layerManager"); // 图层管理器
const lastSelectLayerId = inject("lastSelectLayerId"); // 上次选中的图层ID
// 撤销/重做按钮状态
const canUndo = ref(false);
const canRedo = ref(false);
// 颜色填充相关
const currLayerId = ref(null); // 当前图层ID
const fillColor = ref("#ffffff"); // 默认填充颜色
const fillColorRef = ref(null);
// 监听命令管理器状态变化
commandManager.setChangeCallback((info) => {
canUndo.value = info.canUndo;
@@ -80,6 +88,13 @@ const normalToolsList = ref([
icon: { name: "CEraser", size: "22" },
class: "eraser-btn",
},
{
id: "fillColor",
title: "Fill Color",
action: () => fillColorRef.value.click(),
icon: { name: "CThemeColor", size: "22" },
class: "fill-color-btn",
},
{
id: OperationType.PAN,
title: "Pan",
@@ -280,6 +295,11 @@ function handleKeyDown(event) {
}
}
// 填充颜色选择器
function fillColorChange() {
layerManager.fillLayerBackground(lastSelectLayerId.value, fillColor.value, true);
}
onMounted(() => {
// 添加键盘事件监听
window.addEventListener("keydown", handleKeyDown);
@@ -298,6 +318,15 @@ const handleToolClick = (tool) => {
<template>
<div class="tools-sidebar">
<input
class="fillColor-input"
v-model="fillColor"
ref="fillColorRef"
type="color"
@change="fillColorChange"
style="width: 0; height: 0; opacity: 0"
/>
<ToolButton
v-for="tool in toolsList"
:key="tool.id"