feature: 梳理了toolkey

AnsGoo · May 14, 2024 · b0b1bc2 · b0b1bc2
1 parent 61ba44c
commit b0b1bc2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 23 deletions.
diff --git 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
@@ -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<ContextmenuItem[]> => {
       // 如果当前有选中组件，并且接受到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
@@ -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
@@ -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
+}