From b0b1bc2a4d95114a32c82393df4514ca4545234f Mon Sep 17 00:00:00 2001 From: ansgoo Date: Tue, 14 May 2024 22:58:19 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E6=A2=B3=E7=90=86=E4=BA=86toolkey?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/src/editor/Editor.vue | 13 ++-------- packages/designer/src/editor/Shape/Shape.tsx | 12 ++-------- .../src/pane/LeftSideBar/Layer/Layer.vue | 4 +++- packages/designer/src/toolbars.ts | 24 ++++++++++++++++++- 4 files changed, 30 insertions(+), 23 deletions(-) diff --git a/packages/designer/src/editor/Editor.vue b/packages/designer/src/editor/Editor.vue index 0d761efa..a5f2b614 100644 --- a/packages/designer/src/editor/Editor.vue +++ b/packages/designer/src/editor/Editor.vue @@ -55,6 +55,8 @@ import type { CustomComponent } from '@open-data-v/base' import { computed, onMounted, onUnmounted, reactive, ref } from 'vue' +import { clearCanvas, paste } from '@/toolbars' + import Area from '../editor/Area.vue' import Grid from '../editor/Grid.vue' import MarkLine from '../editor/MarkLine.vue' @@ -82,17 +84,6 @@ const getShapeStyle = (style) => { return filterStyle(style, ['top', 'left', 'width', 'height', 'rotate']) } -const clearCanvas = () => { - canvasState.clearCanvas() -} - -const paste = (_: HTMLElement, event: MouseEvent) => { - const editorRectInfo = document.querySelector('#editor')!.getBoundingClientRect() - const y = event.pageY - editorRectInfo.top - const x = event.pageX - editorRectInfo.left - clipBoardState.paste(true, x, y) -} - const contextMenus = (): ContextmenuItem[] => { return [ { diff --git a/packages/designer/src/editor/Shape/Shape.tsx b/packages/designer/src/editor/Shape/Shape.tsx index bb8ad58e..dbbe5673 100644 --- a/packages/designer/src/editor/Shape/Shape.tsx +++ b/packages/designer/src/editor/Shape/Shape.tsx @@ -4,7 +4,8 @@ import type { ComponentPublicInstance, PropType } from 'vue' import { computed, defineComponent, onErrorCaptured, onMounted, ref, watch } from 'vue' import { stretchedComponents } from '../../component' -import { useActionState, useCanvasState, useClipBoardState } from '../../state' +import { useActionState, useCanvasState } from '../../state' +import { copy, decompose } from '../../toolbars' import type { ComponentStyle, ContextmenuItem, Vector } from '../../type' import { copyText, mod360, systemLogger, throttleFrame } from '../../utils' import styles from './shape.module.less' @@ -26,11 +27,6 @@ export default defineComponent({ setup(props, { slots }) { const canvasState = useCanvasState() const actionState = useActionState() - const clipBoardState = useClipBoardState() - - const copy = () => { - clipBoardState.copy(canvasState.activeComponent!) - } const deleteComponent = () => { canvasState.removeComponent(props.index!, props.info!.parent) @@ -60,10 +56,6 @@ export default defineComponent({ canvasState.bottomComponent(props.index!, props.info!.parent) } - const decompose = () => { - canvasState.decompose() - } - const contextmenus = (_: HTMLDivElement, event: MouseEvent): Optional => { // 如果当前有选中组件,并且接受到contextmenu事件的组件正是当前组件,就停止事件冒泡 if (canvasState.activeComponent && canvasState.activeComponent.id === props.info!.id) { diff --git a/packages/designer/src/pane/LeftSideBar/Layer/Layer.vue b/packages/designer/src/pane/LeftSideBar/Layer/Layer.vue index 48b418f9..48697657 100644 --- a/packages/designer/src/pane/LeftSideBar/Layer/Layer.vue +++ b/packages/designer/src/pane/LeftSideBar/Layer/Layer.vue @@ -19,6 +19,8 @@ import { OMenu } from '@open-data-v/ui' import { cloneDeep } from 'lodash-es' import { computed, h, ref, watch } from 'vue' +import { decompose } from '@/toolbars' + import { ComponentGroupList } from '../../../enum' import { useEmpty } from '../../../modules' import { useCanvasState, useClipBoardState } from '../../../state' @@ -213,7 +215,7 @@ const contextmenus = (index: string): ContextmenuItem[] => { disable: canvasState.getComponentByIndex(index.split('-').map((i) => Number(i)))?.component !== 'Group', - handler: () => canvasState.decompose() + handler: decompose }, { text: '删除', diff --git a/packages/designer/src/toolbars.ts b/packages/designer/src/toolbars.ts index 76b923f9..bb91d494 100644 --- a/packages/designer/src/toolbars.ts +++ b/packages/designer/src/toolbars.ts @@ -84,4 +84,26 @@ const fullScreen = () => { } } -export { copy, decompose, exportCanvas, fullScreen, importCanvas, recoveryDraft, setShowEm, undo } +const paste = (_: HTMLElement, event: MouseEvent) => { + const editorRectInfo = document.querySelector('#editor')!.getBoundingClientRect() + const y = event.pageY - editorRectInfo.top + const x = event.pageX - editorRectInfo.left + clipBoardState.paste(true, x, y) +} + +const clearCanvas = () => { + canvasState.clearCanvas() +} + +export { + clearCanvas, + copy, + decompose, + exportCanvas, + fullScreen, + importCanvas, + paste, + recoveryDraft, + setShowEm, + undo +}