@tmagic/editor 1.1.0-beta.4 → 1.1.0-beta.7

package/src/layouts/workspace/ViewerMenu.vue

@@ -2,163 +2,159 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
 import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
-import { NodeType } from '@tmagic/schema';
-import type StageCore from '@tmagic/stage';
+import { MNode, NodeType } from '@tmagic/schema';
+import StageCore from '@tmagic/stage';
+import { isPage } from '@tmagic/utils';
 
-import ContentMenu from '@editor/components/ContentMenu.vue';
-import { LayerOffset, Layout, MenuItem, Services } from '@editor/type';
-import { COPY_STORAGE_KEY } from '@editor/utils/editor';
+import ContentMenu from '../../components/ContentMenu.vue';
+import storageService from '../../services/storage';
+import { LayerOffset, Layout, MenuItem, Services } from '../../type';
+import { COPY_STORAGE_KEY } from '../../utils/editor';
 
-export default defineComponent({
-  components: { ContentMenu },
+const props = withDefaults(defineProps<{ isMultiSelect?: boolean }>(), { isMultiSelect: false });
 
-  setup() {
-    const services = inject<Services>('services');
-    const editorService = services?.editorService;
-    const menu = ref<InstanceType<typeof ContentMenu>>();
-    const canPaste = ref(false);
-    const canCenter = ref(false);
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+const menu = ref<InstanceType<typeof ContentMenu>>();
+const canPaste = ref(false);
+const canCenter = ref(false);
 
-    const node = computed(() => editorService?.get('node'));
-    const parent = computed(() => editorService?.get('parent'));
-    const isPage = computed(() => node.value?.type === NodeType.PAGE);
+const node = computed(() => editorService?.get<MNode>('node'));
+const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
+const parent = computed(() => editorService?.get('parent'));
+const stage = computed(() => editorService?.get<StageCore>('stage'));
 
-    const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);
+const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);
 
-    onMounted(() => {
-      const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
-      canPaste.value = data !== 'undefined' && !!data;
-    });
-
-    watch(
-      parent,
-      async () => {
-        if (!parent.value || !editorService) return (canCenter.value = false);
-        const layout = await editorService.getLayout(parent.value);
-        canCenter.value =
-          [Layout.ABSOLUTE, Layout.FIXED].includes(layout) &&
-          ![NodeType.ROOT, NodeType.PAGE, 'pop'].includes(`${node.value?.type}`);
-      },
-      { immediate: true },
-    );
+const menuData = reactive<MenuItem[]>([
+  {
+    type: 'button',
+    text: '水平居中',
+    display: () => canCenter.value && !props.isMultiSelect,
+    handler: () => {
+      if (!node.value) return;
+      editorService?.alignCenter(node.value);
+    },
+  },
+  {
+    type: 'button',
+    text: '复制',
+    icon: markRaw(DocumentCopy),
+    handler: () => {
+      nodes.value && editorService?.copy(nodes.value);
+      canPaste.value = true;
+    },
+  },
+  {
+    type: 'button',
+    text: '粘贴',
+    display: () => canPaste.value,
+    handler: () => {
+      const rect = menu.value?.$el.getBoundingClientRect();
+      const parentRect = stage.value?.container?.getBoundingClientRect();
+      const initialLeft = (rect?.left || 0) - (parentRect?.left || 0);
+      const initialTop = (rect?.top || 0) - (parentRect?.top || 0);
 
-    return {
-      menu,
-      menuData: reactive<MenuItem[]>([
-        {
-          type: 'button',
-          text: '水平居中',
-          display: () => canCenter.value,
-          handler: () => {
-            node.value && editorService?.alignCenter(node.value);
-          },
-        },
-        {
-          type: 'button',
-          text: '复制',
-          icon: markRaw(DocumentCopy),
-          handler: () => {
-            node.value && editorService?.copy(node.value);
-            canPaste.value = true;
-          },
-        },
-        {
-          type: 'button',
-          text: '粘贴',
-          display: () => canPaste.value,
-          handler: () => {
-            const stage = editorService?.get<StageCore>('stage');
+      if (!nodes.value || nodes.value.length === 0) return;
+      editorService?.paste({ left: initialLeft, top: initialTop });
+    },
+  },
+  {
+    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: '置顶',
+    display: () => !isPage(node.value) && !props.isMultiSelect,
+    handler: () => {
+      editorService?.moveLayer(LayerOffset.TOP);
+    },
+  },
+  {
+    type: 'button',
+    text: '置底',
+    display: () => !isPage(node.value) && !props.isMultiSelect,
+    handler: () => {
+      editorService?.moveLayer(LayerOffset.BOTTOM);
+    },
+  },
+  {
+    type: 'divider',
+    direction: 'horizontal',
+    display: () => !isPage(node.value) && !props.isMultiSelect,
+  },
+  {
+    type: 'button',
+    text: '删除',
+    icon: Delete,
+    display: () => !isPage(node.value),
+    handler: () => {
+      nodes.value && editorService?.remove(nodes.value);
+    },
+  },
+  {
+    type: 'divider',
+    direction: 'horizontal',
+  },
+  {
+    type: 'button',
+    text: '清空参考线',
+    handler: () => {
+      editorService?.get<StageCore>('stage').clearGuides();
+    },
+  },
+  ...stageContentMenu,
+]);
 
-            const rect = menu.value?.$el.getBoundingClientRect();
-            const parentRect = stage?.container?.getBoundingClientRect();
-            let left = (rect?.left || 0) - (parentRect?.left || 0);
-            let top = (rect?.top || 0) - (parentRect?.top || 0);
+onMounted(async () => {
+  const data = await storageService.getItem(COPY_STORAGE_KEY);
+  canPaste.value = data !== 'undefined' && !!data;
+});
 
-            if (node.value?.items && stage) {
-              const parentEl = stage.renderer.contentWindow?.document.getElementById(`${node.value.id}`);
-              const parentElRect = parentEl?.getBoundingClientRect();
-              left = left - (parentElRect?.left || 0);
-              top = top - (parentElRect?.top || 0);
-            }
+watch(
+  parent,
+  async () => {
+    if (!parent.value || !editorService) return (canCenter.value = false);
+    const layout = await editorService.getLayout(parent.value);
+    const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
+    const isTypeConform = nodes.value?.every(
+      (selectedNode) => ![NodeType.ROOT, NodeType.PAGE, 'pop'].includes(`${selectedNode?.type}`),
+    );
+    canCenter.value = isLayoutConform && !!isTypeConform;
+  },
+  { immediate: true },
+);
 
-            editorService?.paste({ left, top });
-          },
-        },
-        {
-          type: 'divider',
-          direction: 'horizontal',
-          display: () => !isPage.value,
-        },
-        {
-          type: 'button',
-          text: '上移一层',
-          icon: markRaw(Top),
-          display: () => !isPage.value,
-          handler: () => {
-            editorService?.moveLayer(1);
-          },
-        },
-        {
-          type: 'button',
-          text: '下移一层',
-          icon: markRaw(Bottom),
-          display: () => !isPage.value,
-          handler: () => {
-            editorService?.moveLayer(-1);
-          },
-        },
-        {
-          type: 'button',
-          text: '置顶',
-          display: () => !isPage.value,
-          handler: () => {
-            editorService?.moveLayer(LayerOffset.TOP);
-          },
-        },
-        {
-          type: 'button',
-          text: '置底',
-          display: () => !isPage.value,
-          handler: () => {
-            editorService?.moveLayer(LayerOffset.BOTTOM);
-          },
-        },
-        {
-          type: 'divider',
-          direction: 'horizontal',
-          display: () => !isPage.value,
-        },
-        {
-          type: 'button',
-          text: '删除',
-          icon: Delete,
-          display: () => !isPage.value,
-          handler: () => {
-            node.value && editorService?.remove(node.value);
-          },
-        },
-        {
-          type: 'divider',
-          direction: 'horizontal',
-        },
-        {
-          type: 'button',
-          text: '清空参考线',
-          handler: () => {
-            editorService?.get<StageCore>('stage').clearGuides();
-          },
-        },
-        ...stageContentMenu,
-      ]),
+const show = (e: MouseEvent) => {
+  menu.value?.show(e);
+};
 
-      show(e: MouseEvent) {
-        menu.value?.show(e);
-      },
-    };
-  },
-});
+defineExpose({ show });
 </script>

package/src/layouts/workspace/Workspace.vue

@@ -18,7 +18,7 @@ import KeyController from 'keycon';
 import type { MNode, MPage } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
-import type { Services } from '@editor/type';
+import type { Services } from '../../type';
 
 import PageBar from './PageBar.vue';
 import MagicStage from './Stage.vue';
@@ -34,7 +34,7 @@ export default defineComponent({
   setup() {
     const services = inject<Services>('services');
     const workspace = ref<HTMLDivElement>();
-    const node = computed(() => services?.editorService.get<MNode>('node'));
+    const nodes = computed(() => services?.editorService.get<MNode[]>('nodes'));
     let keycon: KeyController;
 
     const mouseenterHandler = () => {
@@ -58,27 +58,27 @@ export default defineComponent({
       keycon
         .keyup('delete', (e) => {
           e.inputEvent.preventDefault();
-          if (!node.value || isPage(node.value)) return;
-          services?.editorService.remove(node.value);
+          if (!nodes.value || isPage(nodes.value[0])) return;
+          services?.editorService.remove(nodes.value);
         })
         .keyup('backspace', (e) => {
           e.inputEvent.preventDefault();
-          if (!node.value || isPage(node.value)) return;
-          services?.editorService.remove(node.value);
+          if (!nodes.value || isPage(nodes.value[0])) return;
+          services?.editorService.remove(nodes.value);
         })
         .keydown([ctrl, 'c'], (e) => {
           e.inputEvent.preventDefault();
-          node.value && services?.editorService.copy(node.value);
+          nodes.value && services?.editorService.copy(nodes.value);
         })
         .keydown([ctrl, 'v'], (e) => {
           e.inputEvent.preventDefault();
-          node.value && services?.editorService.paste();
+          nodes.value && services?.editorService.paste();
         })
         .keydown([ctrl, 'x'], (e) => {
           e.inputEvent.preventDefault();
-          if (!node.value || isPage(node.value)) return;
-          services?.editorService.copy(node.value);
-          services?.editorService.remove(node.value);
+          if (!nodes.value || isPage(nodes.value[0])) return;
+          services?.editorService.copy(nodes.value);
+          services?.editorService.remove(nodes.value);
         })
         .keydown([ctrl, 'z'], (e) => {
           e.inputEvent.preventDefault();

package/src/services/BaseService.ts

@@ -18,7 +18,7 @@
 
 import { EventEmitter } from 'events';
 
-import { compose } from '@editor/utils/compose';
+import { compose } from '../utils/compose';
 
 const methodName = (prefix: string, name: string) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
 

package/src/services/componentList.ts

@@ -18,7 +18,7 @@
 
 import { reactive } from 'vue';
 
-import type { ComponentGroup, ComponentGroupState } from '@editor/type';
+import type { ComponentGroup, ComponentGroupState } from '../type';
 
 import BaseService from './BaseService';
 
@@ -34,11 +34,11 @@ class ComponentList extends BaseService {
   /**
    * @param componentGroupList 组件列表配置
    */
-  public setList(componentGroupList: ComponentGroup[]) {
+  public setList(componentGroupList: ComponentGroup[]): void {
     this.state.list = componentGroupList;
   }
 
-  public getList() {
+  public getList(): ComponentGroup[] {
     return this.state.list;
   }
 }