@tmagic/editor 1.0.0-beta.13 → 1.0.0-beta.14

package/src/layouts/sidebar/LayerMenu.vue

@@ -1,91 +1,110 @@
 <template>
-  <div v-if="node" class="magic-editor-content-menu">
-    <div
-      v-if="node.items"
-      class="magic-editor-content-menu-item"
-      @mouseenter="setSubVisitable(true)"
-      @mouseleave="setSubVisitable(false)"
-    >
-      新增
-    </div>
-    <div v-if="node.type !== 'app'" class="magic-editor-content-menu-item" @click="() => copy(node)">复制</div>
-    <div
-      v-if="node.type !== 'app' && node.type !== 'page'"
-      class="magic-editor-content-menu-item"
-      @click="() => remove()"
-    >
-      删除
-    </div>
-    <div class="subMenu" v-show="subVisible" @mouseenter="setSubVisitable(true)" @mouseleave="setSubVisitable(false)">
-      <el-scrollbar>
-        <template v-if="node.type === 'tabs'">
-          <div
-            class="magic-editor-content-menu-item"
-            @click="
-              () =>
-                append({
-                  type: 'tab-pane',
-                })
-            "
-          >
-            标签
-          </div>
-        </template>
-        <template v-else-if="node.items">
-          <div v-for="list in componentGroupList" :key="list.title">
-            <template v-for="item in list.items">
-              <div class="magic-editor-content-menu-item" v-if="item" :key="item.type" @click="() => append(item)">
-                {{ item.text }}
-              </div>
-            </template>
-            <div class="separation"></div>
-          </div>
-        </template>
-      </el-scrollbar>
-    </div>
-  </div>
+  <content-menu :menu-data="menuData" ref="menu" style="overflow: initial"></content-menu>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons';
 
-import type { MNode } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
 
-import type { AddMNode, Services } from '@editor/type';
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { ComponentGroup, MenuButton, MenuItem, Services } from '@editor/type';
 
 export default defineComponent({
-  name: 'magic-editor-content-menu',
+  components: { ContentMenu },
 
   setup() {
     const services = inject<Services>('services');
-    const subVisible = ref(false);
+    const menu = ref<InstanceType<typeof ContentMenu>>();
     const node = computed(() => services?.editorService.get('node'));
+    const isRoot = computed(() => node.value?.type === NodeType.ROOT);
+    const isPage = computed(() => node.value?.type === NodeType.PAGE);
+    const componentList = computed(() => services?.componentListService.getList() || []);
 
-    return {
-      subVisible,
-
-      node,
-
-      componentGroupList: computed(() => services?.componentListService.getList()),
-
-      append(config: AddMNode) {
-        services?.editorService.add({
-          name: config.text,
-          type: config.type,
-          ...(config.data || {}),
-        });
-      },
+    const createMenuItems = (group: ComponentGroup): MenuButton[] =>
+      group.items.map((component) => ({
+        text: component.text,
+        type: 'button',
+        icon: component.icon,
+        handler: () => {
+          services?.editorService.add({
+            name: component.text,
+            type: component.type,
+            ...(component.data || {}),
+          });
+        },
+      }));
 
-      remove() {
-        node.value && services?.editorService.remove(node.value);
-      },
+    const getSubMenuData = computed<MenuButton[]>(() => {
+      if (node.value?.type === 'tabs') {
+        return [
+          {
+            text: '标签页',
+            type: 'button',
+            icon: Files,
+            handler: () => {
+              services?.editorService.add({
+                type: 'tab-pane',
+              });
+            },
+          },
+        ];
+      }
+      if (node.value?.items) {
+        return (
+          componentList.value.reduce(
+            (subMenuData: MenuButton[], group: ComponentGroup, index) =>
+              subMenuData.concat(
+                createMenuItems(group),
+                index < componentList.value.length - 1
+                  ? [
+                      {
+                        type: 'divider',
+                        direction: 'horizontal',
+                      },
+                    ]
+                  : [],
+              ),
+            [],
+          ) || []
+        );
+      }
+      return [];
+    });
 
-      copy(node?: MNode) {
-        node && services?.editorService.copy(node);
-      },
+    return {
+      menu,
+      menuData: computed<MenuItem[]>(() => [
+        {
+          type: 'button',
+          text: '新增',
+          icon: markRaw(Plus),
+          display: () => node.value?.items,
+          items: getSubMenuData.value,
+        },
+        {
+          type: 'button',
+          text: '复制',
+          icon: markRaw(DocumentCopy),
+          display: () => !isRoot.value,
+          handler: () => {
+            node.value && services?.editorService.copy(node.value);
+          },
+        },
+        {
+          type: 'button',
+          text: '删除',
+          icon: markRaw(Delete),
+          display: () => !isRoot.value && !isPage.value,
+          handler: () => {
+            node.value && services?.editorService.remove(node.value);
+          },
+        },
+      ]),
 
-      setSubVisitable(v: boolean) {
-        subVisible.value = v;
+      show(e: MouseEvent) {
+        menu.value?.show(e);
       },
     };
   },

package/src/layouts/sidebar/LayerPanel.vue

@@ -33,8 +33,8 @@
         <div
           :id="data.id"
           class="cus-tree-node"
-          @mousedown="toogleClickFlag"
-          @mouseup="toogleClickFlag"
+          @mousedown="toggleClickFlag"
+          @mouseup="toggleClickFlag"
           @mouseenter="highlightHandler(data)"
           :class="{ 'cus-tree-node-hover': canHighlight && data.id === highlightNode?.id }"
         >
@@ -48,13 +48,13 @@
     </el-tree>
 
     <teleport to="body">
-      <layer-menu :style="menuStyle"></layer-menu>
+      <layer-menu ref="menu"></layer-menu>
     </teleport>
   </el-scrollbar>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, onMounted, Ref, ref, watchEffect } from 'vue';
+import { computed, defineComponent, inject, Ref, ref, watchEffect } from 'vue';
 import type { ElTree } from 'element-plus';
 import { throttle } from 'lodash-es';
 
@@ -169,46 +169,6 @@ const useFilter = (tree: Ref<InstanceType<typeof ElTree> | undefined>) => ({
   },
 });
 
-const useContentMenu = (editorService?: EditorService) => {
-  const menuStyle = ref({
-    position: 'absolute',
-    left: '0',
-    top: '0',
-    display: 'none',
-  });
-
-  onMounted(() => {
-    document.addEventListener(
-      'click',
-      () => {
-        menuStyle.value.display = 'none';
-      },
-      true,
-    );
-  });
-
-  return {
-    menuStyle,
-
-    contextmenu(event: MouseEvent, data: MNode) {
-      const bodyHeight = globalThis.document.body.clientHeight;
-
-      const left = `${event.clientX + 20}px`;
-      let top = `${event.clientY - 10}px`;
-
-      if (event.clientY + 300 > bodyHeight) {
-        top = `${bodyHeight - 300}px`;
-      }
-
-      menuStyle.value.left = left;
-      menuStyle.value.top = top;
-      menuStyle.value.display = '';
-
-      select(data, editorService);
-    },
-  };
-};
-
 export default defineComponent({
   name: 'magic-editor-layer-panel',
 
@@ -217,13 +177,14 @@ export default defineComponent({
   setup() {
     const services = inject<Services>('services');
     const tree = ref<InstanceType<typeof ElTree>>();
+    const menu = ref<InstanceType<typeof LayerMenu>>();
     const clicked = ref(false);
     const editorService = services?.editorService;
     const highlightHandler = throttle((data: MNode) => {
       highlight(data, editorService);
     }, throttleTime);
 
-    const toogleClickFlag = () => {
+    const toggleClickFlag = () => {
       clicked.value = !clicked.value;
     };
 
@@ -232,12 +193,22 @@ export default defineComponent({
       () => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value,
     );
 
+    editorService?.on('remove', () => {
+      setTimeout(() => {
+        tree.value?.getNode(editorService.get('node').id)?.updateChildren();
+      }, 0);
+    });
+
     return {
       tree,
+      menu,
       ...statusData,
       ...useDrop(tree, editorService),
       ...useFilter(tree),
-      ...useContentMenu(editorService),
+
+      highlightHandler,
+      toggleClickFlag,
+      canHighlight,
 
       clickHandler(data: MNode): void {
         if (services?.uiService.get<boolean>('uiSelectMode')) {
@@ -247,9 +218,12 @@ export default defineComponent({
         tree.value?.setCurrentKey(data.id);
         select(data, editorService);
       },
-      highlightHandler,
-      toogleClickFlag,
-      canHighlight,
+
+      async contextmenu(event: MouseEvent, data: MNode) {
+        event.preventDefault();
+        await select(data, editorService);
+        menu.value?.show(event);
+      },
     };
   },
 });

package/src/layouts/workspace/PageBar.vue

@@ -22,11 +22,25 @@
           </slot>
         </div>
 
-        <el-popover placement="top" :width="160" trigger="hover">
+        <el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
           <div>
             <slot name="page-bar-popover" :page="item">
-              <div class="magic-editor-content-menu-item" @click="() => copy(item)">复制</div>
-              <div class="magic-editor-content-menu-item" @click="() => remove(item)">删除</div>
+              <tool-button
+                :data="{
+                  type: 'button',
+                  text: '复制',
+                  icon: DocumentCopy,
+                  handler: () => copy(item),
+                }"
+              ></tool-button>
+              <tool-button
+                :data="{
+                  type: 'button',
+                  text: '删除',
+                  icon: Delete,
+                  handler: () => remove(item),
+                }"
+              ></tool-button>
             </slot>
           </div>
           <template #reference>
@@ -44,12 +58,24 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
-import { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus } from '@element-plus/icons';
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  inject,
+  markRaw,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRaw,
+  watch,
+} from 'vue';
+import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons';
 
 import type { MApp, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 
+import ToolButton from '@editor/components/ToolButton.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
@@ -138,7 +164,7 @@ const useScroll = (root: ComputedRef<MApp | undefined>) => {
 };
 
 export default defineComponent({
-  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus },
+  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
 
   setup() {
     const services = inject<Services>('services');
@@ -147,6 +173,9 @@ export default defineComponent({
     const root = computed(() => editorService?.get<MApp>('root'));
 
     return {
+      Delete: markRaw(Delete),
+      DocumentCopy: markRaw(DocumentCopy),
+
       ...useScroll(root),
 
       root,

package/src/layouts/workspace/Stage.vue

@@ -9,11 +9,13 @@
     <div
       class="m-editor-stage-container"
       ref="stageContainer"
-      @contextmenu="contextmenuHandler"
       :style="`transform: scale(${zoom})`"
+      @contextmenu="contextmenuHandler"
+      @drop="dropHandler"
+      @dragover="dragoverHandler"
     ></div>
     <teleport to="body">
-      <viewer-menu ref="menu" :style="menuStyle"></viewer-menu>
+      <viewer-menu ref="menu"></viewer-menu>
     </teleport>
   </scroll-viewer>
 </template>
@@ -39,49 +41,10 @@ import type { MoveableOptions, Runtime, SortEventData, UpdateEventData } from '@
 import StageCore from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
-import type { Services, StageRect } from '@editor/type';
+import { Layout, Services, StageRect } from '@editor/type';
 
 import ViewerMenu from './ViewerMenu.vue';
 
-const useMenu = () => {
-  const menu = ref<InstanceType<typeof ViewerMenu>>();
-  const menuStyle = ref({
-    display: 'none',
-    left: '0',
-    top: '0',
-  });
-
-  onMounted(() => {
-    document.addEventListener(
-      'click',
-      () => {
-        menuStyle.value.display = 'none';
-      },
-      true,
-    );
-  });
-
-  return {
-    menu,
-    menuStyle,
-
-    contextmenuHandler(e: MouseEvent) {
-      e.preventDefault();
-
-      const menuHeight = menu.value?.$el.clientHeight;
-      let top = e.clientY;
-      if (menuHeight + e.clientY > document.body.clientHeight) {
-        top = document.body.clientHeight - menuHeight;
-      }
-      menuStyle.value = {
-        display: 'block',
-        top: `${top}px`,
-        left: `${e.clientX}px`,
-      };
-    },
-  };
-};
-
 export default defineComponent({
   name: 'magic-stage',
 
@@ -115,12 +78,13 @@ export default defineComponent({
 
     const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
     const stageContainer = ref<HTMLDivElement>();
+    const menu = ref<InstanceType<typeof ViewerMenu>>();
 
     const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
     const uiSelectMode = computed(() => services?.uiService.get<boolean>('uiSelectMode'));
     const root = computed(() => services?.editorService.get<MApp>('root'));
     const page = computed(() => services?.editorService.get<MPage>('page'));
-    const zoom = computed(() => services?.uiService.get<number>('zoom'));
+    const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
     const node = computed(() => services?.editorService.get<MNode>('node'));
 
     let stage: StageCore | null = null;
@@ -218,9 +182,42 @@ export default defineComponent({
     return {
       stageWrap,
       stageContainer,
+      menu,
       stageRect,
       zoom,
-      ...useMenu(),
+
+      contextmenuHandler(e: MouseEvent) {
+        e.preventDefault();
+        menu.value?.show(e);
+      },
+
+      dragoverHandler(e: DragEvent) {
+        e.preventDefault();
+        if (e.dataTransfer) {
+          e.dataTransfer.dropEffect = 'move';
+        }
+      },
+
+      async dropHandler(e: DragEvent) {
+        e.preventDefault();
+        if (e.dataTransfer && page.value && stageContainer.value && stage) {
+          // eslint-disable-next-line no-eval
+          const config = eval(`(${e.dataTransfer.getData('data')})`);
+          const layout = await services?.editorService.getLayout(page.value);
+
+          const containerRect = stageContainer.value.getBoundingClientRect();
+          const { scrollTop, scrollLeft } = stage.mask;
+          if (layout === Layout.ABSOLUTE) {
+            config.style = {
+              position: 'absolute',
+              top: e.clientY - containerRect.top + scrollTop,
+              left: e.clientX - containerRect.left + scrollLeft,
+            };
+          }
+
+          services?.editorService.add(config, page.value);
+        }
+      },
     };
   },
 });