From 698c3451ff85bfdb07310fa001253943c9a7f8e8 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Mon, 18 Dec 2023 20:37:10 +0800 Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=96=B0=E5=A2=9E=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E5=87=BD?= =?UTF-8?q?=E6=95=B0=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor/src/Editor.vue | 4 +- packages/editor/src/editorProps.ts | 1 + .../editor/src/layouts/sidebar/Sidebar.vue | 2 + .../src/layouts/sidebar/layer/LayerMenu.vue | 64 ++++--- .../src/layouts/sidebar/layer/LayerPanel.vue | 8 +- .../src/layouts/workspace/Workspace.vue | 7 +- .../src/layouts/workspace/viewer/Stage.vue | 8 +- .../layouts/workspace/viewer/ViewerMenu.vue | 171 ++++++++++-------- 8 files changed, 155 insertions(+), 110 deletions(-) diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue index 8115f1c4..76672144 100644 --- a/packages/editor/src/Editor.vue +++ b/packages/editor/src/Editor.vue @@ -16,7 +16,7 @@ @@ -52,6 +57,7 @@ defineOptions({ defineProps<{ stageContentMenu: (MenuButton | MenuComponent)[]; + customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]; }>(); let stage: StageCore | null = null; diff --git a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue index 83b926f6..5ff4770c 100644 --- a/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue +++ b/packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue @@ -19,8 +19,16 @@ defineOptions({ }); const props = withDefaults( - defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(), - { isMultiSelect: false }, + defineProps<{ + isMultiSelect?: boolean; + stageContentMenu: (MenuButton | MenuComponent)[]; + customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]; + }>(), + { + isMultiSelect: false, + stageContentMenu: () => [], + customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus, + }, ); const services = inject('services'); @@ -32,83 +40,88 @@ const node = computed(() => editorService?.get('node')); const nodes = computed(() => editorService?.get('nodes')); const parent = computed(() => editorService?.get('parent')); -const menuData = computed<(MenuButton | MenuComponent)[]>(() => [ - { - type: 'button', - text: '水平居中', - icon: markRaw(CenterIcon), - display: () => canCenter.value, - handler: () => { - if (!nodes.value) return; - editorService?.alignCenter(nodes.value); - }, - }, - useCopyMenu(), - usePasteMenu(menu), - { - type: 'divider', - direction: 'horizontal', - display: () => { - if (!node.value) return false; - return !isPage(node.value); - }, - }, - { - type: 'button', - text: '上移一层', - icon: markRaw(Top), - display: () => !isPage(node.value) && !props.isMultiSelect, - handler: () => { - editorService?.moveLayer(1); - }, - }, - { - type: 'button', - text: '下移一层', - icon: markRaw(Bottom), - display: () => !isPage(node.value) && !props.isMultiSelect, - handler: () => { - editorService?.moveLayer(-1); - }, - }, - { - type: 'button', - text: '置顶', - icon: markRaw(Top), - display: () => !isPage(node.value) && !props.isMultiSelect, - handler: () => { - editorService?.moveLayer(LayerOffset.TOP); - }, - }, - { - type: 'button', - text: '置底', - icon: markRaw(Bottom), - display: () => !isPage(node.value) && !props.isMultiSelect, - handler: () => { - editorService?.moveLayer(LayerOffset.BOTTOM); - }, - }, - useMoveToMenu(services), - { - type: 'divider', - direction: 'horizontal', - display: () => !isPage(node.value) && !props.isMultiSelect, - }, - useDeleteMenu(), - { - type: 'divider', - direction: 'horizontal', - }, - { - type: 'button', - text: '清空参考线', - handler: () => { - editorService?.get('stage')?.clearGuides(); - }, - }, - ...props.stageContentMenu, -]); +const menuData = computed<(MenuButton | MenuComponent)[]>(() => + props.customContentMenu( + [ + { + type: 'button', + text: '水平居中', + icon: markRaw(CenterIcon), + display: () => canCenter.value, + handler: () => { + if (!nodes.value) return; + editorService?.alignCenter(nodes.value); + }, + }, + useCopyMenu(), + usePasteMenu(menu), + { + type: 'divider', + direction: 'horizontal', + display: () => { + if (!node.value) return false; + return !isPage(node.value); + }, + }, + { + type: 'button', + text: '上移一层', + icon: markRaw(Top), + display: () => !isPage(node.value) && !props.isMultiSelect, + handler: () => { + editorService?.moveLayer(1); + }, + }, + { + type: 'button', + text: '下移一层', + icon: markRaw(Bottom), + display: () => !isPage(node.value) && !props.isMultiSelect, + handler: () => { + editorService?.moveLayer(-1); + }, + }, + { + type: 'button', + text: '置顶', + icon: markRaw(Top), + display: () => !isPage(node.value) && !props.isMultiSelect, + handler: () => { + editorService?.moveLayer(LayerOffset.TOP); + }, + }, + { + type: 'button', + text: '置底', + icon: markRaw(Bottom), + display: () => !isPage(node.value) && !props.isMultiSelect, + handler: () => { + editorService?.moveLayer(LayerOffset.BOTTOM); + }, + }, + useMoveToMenu(services), + { + type: 'divider', + direction: 'horizontal', + display: () => !isPage(node.value) && !props.isMultiSelect, + }, + useDeleteMenu(), + { + type: 'divider', + direction: 'horizontal', + }, + { + type: 'button', + text: '清空参考线', + handler: () => { + editorService?.get('stage')?.clearGuides(); + }, + }, + ...props.stageContentMenu, + ], + 'viewer', + ), +); watch( parent,