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-16 11:35:52 +08:00
parent e31a619bd6
commit 5f29e488ed
9 changed files with 372 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<script setup>
import { computed, ref, nextTick, inject } from "vue";
import { computed, ref, nextTick, inject, watch } from "vue";
import { findLayerRecursively, isGroupLayer } from "../../utils/layerHelper";
import ContextMenu from "./ContextMenu.vue";
import LayerItem from "./LayerItem.vue";
@@ -13,6 +13,7 @@ import { createCrossLevelMoveCommand } from "../../commands/CrossLevelMoveComman
// UngroupLayersCommand,
// } from "../../commands/LayerCommands";
import { findObjectById, generateId } from "../../utils/helper";
import { throttle } from "lodash-es";
const props = defineProps({
// layers: Array,
@@ -70,6 +71,7 @@ const contextMenuLayer = ref(null);
const contextMenuItems = ref([]);
// 颜色填充相关
const currLayerId = ref(null); // 当前图层ID
const fillColor = ref("#ffffff"); // 默认填充颜色
const fillColorRef = ref(null);
@@ -652,22 +654,28 @@ function buildContextMenuItems(layer) {
{
label: "填充图层",
icon: "CThemeColor",
disabled: layer.isBackground || layer.isFixed || !layerManager?.canRasterizeLayer?.(layer.id),
disabled:
layer.isBackground ||
layer.isFixed ||
!layerManager?.canRasterizeLayer?.(layer.id) ||
layer.isGroup ||
layer?.children?.length > 0, // 如果是组图层或有子图层则禁用
action: () => {
// 调用浏览器原生颜色选择器
fillColorRef.value.click();
// 监听颜色选择器的变化
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);
});
});
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();
},
@@ -790,6 +798,11 @@ function buildContextMenuItems(layer) {
].filter((item) => item !== null);
}
// 填充颜色选择器
function fillColorChange() {
layerManager.fillLayerBackground(currLayerId.value, fillColor.value, true);
}
// 右键菜单操作方法
function copySelectedLayers() {
const selectedLayers = getSelectedLayers();
@@ -806,6 +819,25 @@ function copySelectedLayers() {
hideContextMenu();
}
// watch(fillColor, (newColor) => {
// // 使用loadash-es 节流函数
// // 使用throttle节流 控制更新评率
// if (currLayerId.value) {
// throttle(() => {
// if (layerManager && layerManager.fillLayerBackground) {
// layerManager
// .fillLayerBackground(currLayerId.value, newColor, false)
// .then(() => {
// console.log(`✅ 已填充图层 ${currLayerId.value} 背景颜色: ${newColor}`);
// })
// .catch((error) => {
// console.error(`❌ 填充图层 ${currLayerId.value} 背景颜色失败:`, error);
// });
// }
// }, 300)(); // 每300毫秒执行一次
// }
// });
function toggleSelectedLayersLock() {
const selectedLayers = getSelectedLayers();
if (selectedLayers.length === 0) return;
@@ -1477,6 +1509,15 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
<template>
<div class="layers-panel-inner" @click="handlePanelClick">
<div class="layers-header">
<!-- 颜色填充选择组件 -->
<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})` : "" }}
@@ -1619,9 +1660,6 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
:items="contextMenuItems"
@close="hideContextMenu"
/>
<!-- 颜色填充选择组件 -->
<input v-model="fillColor" ref="fillColorRef" type="color" style="display: none" />
</div>
</template>