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

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);
+        }
+      },
     };
   },
 });

package/src/layouts/workspace/ViewerMenu.vue

@@ -1,47 +1,31 @@
 <template>
-  <div class="magic-editor-content-menu" ref="menu">
-    <div>
-      <div class="magic-editor-content-menu-item" @click="() => center()" v-if="canCenter">水平居中</div>
-      <div class="magic-editor-content-menu-item" @click="() => copy()">复制</div>
-      <div class="magic-editor-content-menu-item" @click="paste" v-if="canPaste">粘贴</div>
-      <template v-if="canMoveZPos">
-        <div class="separation"></div>
-        <div class="magic-editor-content-menu-item" @click="topItem">上移一层</div>
-        <div class="magic-editor-content-menu-item" @click="bottomItem">下移一层</div>
-        <div class="magic-editor-content-menu-item" @click="top">置顶</div>
-        <div class="magic-editor-content-menu-item" @click="bottom">置底</div>
-      </template>
-      <template v-if="canDelete">
-        <div class="separation"></div>
-        <div class="magic-editor-content-menu-item" @click="() => remove()">删除</div>
-      </template>
-      <div class="separation"></div>
-      <div class="magic-editor-content-menu-item" @click="clearGuides">清空参考线</div>
-    </div>
-  </div>
+  <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue';
+import { computed, defineComponent, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
+import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons';
 
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 
-import { LayerOffset, Layout, Services } from '@editor/type';
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import { LayerOffset, Layout, MenuItem, Services } from '@editor/type';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
 export default defineComponent({
-  name: 'magic-editor-ui-viewer-menu',
+  components: { ContentMenu },
 
   setup() {
     const services = inject<Services>('services');
     const editorService = services?.editorService;
-    const menu = ref<HTMLDivElement>();
+    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);
 
     onMounted(() => {
       const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
@@ -62,49 +46,102 @@ export default defineComponent({
 
     return {
       menu,
-      canPaste,
-
-      canDelete: computed(() => node.value?.type !== NodeType.PAGE),
-      canMoveZPos: computed(() => node.value?.type !== NodeType.PAGE),
-      canCenter,
-
-      center() {
-        node.value && editorService?.alignCenter(node.value);
-      },
-
-      copy() {
-        node.value && editorService?.copy(node.value);
-        canPaste.value = true;
-      },
-
-      paste() {
-        const top = menu.value?.offsetTop || 0;
-        const left = menu.value?.offsetLeft || 0;
-        editorService?.paste({ left, top });
-      },
-
-      remove() {
-        node.value && editorService?.remove(node.value);
-      },
-
-      top() {
-        editorService?.moveLayer(LayerOffset.TOP);
-      },
-
-      bottom() {
-        editorService?.moveLayer(LayerOffset.BOTTOM);
-      },
-
-      topItem() {
-        editorService?.moveLayer(1);
-      },
-
-      bottomItem() {
-        editorService?.moveLayer(-1);
-      },
-
-      clearGuides() {
-        editorService?.get<StageCore>('stage').clearGuides();
+      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 top = menu.value?.$el.offsetTop || 0;
+            const left = menu.value?.$el.offsetLeft || 0;
+            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();
+          },
+        },
+      ]),
+
+      show(e: MouseEvent) {
+        menu.value?.show(e);
       },
     };
   },

package/src/layouts/workspace/Workspace.vue

@@ -84,11 +84,11 @@ export default defineComponent({
           e.inputEvent.preventDefault();
           node.value && services?.editorService.copy(node.value);
         })
-        .keyup([ctrl, 'v'], (e) => {
+        .keydown([ctrl, 'v'], (e) => {
           e.inputEvent.preventDefault();
           node.value && services?.editorService.paste();
         })
-        .keyup([ctrl, 'x'], (e) => {
+        .keydown([ctrl, 'x'], (e) => {
           e.inputEvent.preventDefault();
           if (!node.value || isPage(node.value)) return;
           services?.editorService.copy(node.value);

package/src/services/editor.ts

@@ -54,6 +54,7 @@ class Editor extends BaseService {
     stage: null,
     highlightNode: null,
     modifiedNodeIds: new Map(),
+    pageLength: 0,
   });
 
   constructor() {
@@ -69,6 +70,7 @@ class Editor extends BaseService {
         'paste',
         'alignCenter',
         'moveLayer',
+        'move',
         'undo',
         'redo',
         'highlight',
@@ -89,6 +91,7 @@ class Editor extends BaseService {
     log('store set ', name, ' ', value);
 
     if (name === 'root') {
+      this.state.pageLength = (value as unknown as MApp)?.items?.length || 0;
       this.emit('root-change', value);
     }
   }
@@ -190,6 +193,9 @@ class Editor extends BaseService {
     } else {
       historyService.empty();
     }
+
+    this.emit('select', node);
+
     return node!;
   }
 
@@ -249,8 +255,9 @@ class Editor extends BaseService {
     const curNode = this.get<MContainer>('node');
 
     let parentNode: MNode | undefined;
+    const isPage = type === NodeType.PAGE;
 
-    if (type === NodeType.PAGE) {
+    if (isPage) {
       parentNode = this.get<MApp>('root');
       // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
     } else if (parent && typeof parent !== 'function') {
@@ -284,12 +291,18 @@ class Editor extends BaseService {
     await this.select(newNode);
 
     this.addModifiedNodeId(newNode.id);
-    if (type !== NodeType.PAGE) {
+    if (!isPage) {
       this.pushHistoryState();
     }
 
     stage?.select(newNode.id);
 
+    if (isPage) {
+      this.state.pageLength += 1;
+    }
+
+    this.emit('add', newNode);
+
     return newNode;
   }
 
@@ -318,9 +331,23 @@ class Editor extends BaseService {
     stage?.remove({ id: node.id, root: this.get('root') });
 
     if (node.type === NodeType.PAGE) {
+      this.state.pageLength -= 1;
+
       if (root.items[0]) {
         await this.select(root.items[0]);
         stage?.select(root.items[0].id);
+      } else {
+        this.set('node', null);
+        this.set('parent', null);
+        this.set('page', null);
+        this.set('stage', null);
+        this.set('highlightNode', null);
+        this.resetModifiedNodeId();
+        historyService.reset();
+
+        this.emit('remove', node);
+
+        return node;
       }
     } else {
       await this.select(parent);
@@ -330,6 +357,8 @@ class Editor extends BaseService {
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
 
+    this.emit('remove', node);
+
     return node;
   }
 
@@ -391,6 +420,8 @@ class Editor extends BaseService {
     this.addModifiedNodeId(newConfig.id);
     this.pushHistoryState();
 
+    this.emit('update', newConfig);
+
     return newConfig;
   }
 

package/src/services/history.ts

@@ -51,6 +51,13 @@ class History extends BaseService {
     this.on('change', this.setCanUndoRedo);
   }
 
+  public reset() {
+    this.state.pageSteps = {};
+    this.state.pageId = undefined;
+    this.state.canRedo = false;
+    this.state.canUndo = false;
+  }
+
   public changePage(page: MPage): void {
     if (!page) return;
 

package/src/services/props.ts

@@ -17,7 +17,7 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
 import type { MComponent, MNode } from '@tmagic/schema';
@@ -100,8 +100,7 @@ class Props extends BaseService {
 
     return cloneDeep({
       ...getDefaultPropsValue(type),
-      ...defaultValue,
-      ...(this.state.propsValueMap[type] || {}),
+      ...mergeWith(this.state.propsValueMap[type] || {}, defaultValue),
     });
   }
 }

package/src/theme/common/var.scss

@@ -2,6 +2,7 @@ $--theme-color: #2882e0;
 
 $--font-color: #070303;
 $--border-color: #d9dbdd;
+$--hover-color: #f3f5f9;
 
 $--nav-height: 35px;
 $--nav-color: #070303;

package/src/theme/component-list-panel.scss

@@ -12,6 +12,7 @@
     top: 0;
     left: 0;
     box-sizing: border-box;
+    z-index: 1;
 
     .el-input__prefix {
       padding: 10px;
@@ -62,6 +63,7 @@
       color: $--font-color;
       flex-direction: column;
       width: 42px;
+      cursor: pointer;
 
       i {
         font-size: 20px;

package/src/theme/content-menu.scss

@@ -2,38 +2,45 @@
   position: fixed;
   font-size: 12px;
   background: #fff;
-  color: #333;
   box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
   z-index: 9999;
   transform-origin: 0% 0%;
   font-weight: 600;
   padding: 4px 0px;
+  overflow: auto;
+  max-height: 100%;
 
-  .separation {
-    width: 100%;
-    height: 0;
-    border-color: rgba(155, 155, 155, 0.1);
-  }
-
-  .subMenu {
-    position: absolute;
-    right: 0;
-    transform: translate(100%, 0);
-    background-color: #fff;
+  .menu-item {
     color: #333;
-    box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
-    top: 0;
-    height: 223px;
-  }
-}
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    cursor: pointer;
+    min-width: 140px;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+    border-left: 2px solid transparent;
+
+    .el-button {
+      width: 100%;
+      justify-content: flex-start;
+    }
 
-.magic-editor-content-menu-item {
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  cursor: pointer;
-  min-width: 140px;
-  transition: all 0.2s ease 0s;
-  padding: 10px 14px;
-  border-left: 2px solid transparent;
+    .el-button--text,
+    i {
+      color: $--font-color;
+    }
+
+    &.divider {
+      padding: 0 14px;
+
+      .el-divider {
+        margin: 0;
+      }
+    }
+
+    &:hover {
+      background-color: $--hover-color;
+    }
+  }
 }

package/src/theme/layer-panel.scss

@@ -56,7 +56,7 @@
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {
-  background-color: #f3f5f9;
+  background-color: $--hover-color;
   width: 100%;
 }
 

package/src/theme/nav-menu.scss

@@ -43,13 +43,17 @@
     display: flex !important;
     transition: all 0.3s ease 0s;
     border-bottom: 2px solid transparent;
-    margin: 0 5px;
+    margin: 0;
 
     .is-disabled {
       opacity: 0.5;
     }
 
-    .el-button--text,
+    .is-text {
+      padding: 5px;
+    }
+
+    .is-text,
     i {
       color: $--font-color;
     }