@tmagic/editor 1.1.0-beta.9 → 1.1.2

package/src/layouts/workspace/Workspace.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="m-editor-workspace" tabindex="1" ref="workspace">
-    <magic-stage :key="page?.id"></magic-stage>
+    <slot name="stage">
+      <MagicStage :key="page?.id"></MagicStage>
+    </slot>
 
     <slot name="workspace-content"></slot>
 
-    <page-bar>
+    <PageBar>
       <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
       <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
-    </page-bar>
+    </PageBar>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
 import type { MNode, MPage } from '@tmagic/schema';
@@ -23,140 +25,133 @@ import type { Services } from '../../type';
 import PageBar from './PageBar.vue';
 import MagicStage from './Stage.vue';
 
-export default defineComponent({
-  name: 'm-editor-workspace',
-
-  components: {
-    PageBar,
-    MagicStage,
-  },
-
-  setup() {
-    const services = inject<Services>('services');
-    const workspace = ref<HTMLDivElement>();
-    const nodes = computed(() => services?.editorService.get<MNode[]>('nodes'));
-    let keycon: KeyController;
-
-    const mouseenterHandler = () => {
-      workspace.value?.focus();
-    };
-
-    const mouseleaveHandler = () => {
-      workspace.value?.blur();
-    };
-
-    onMounted(() => {
-      workspace.value?.addEventListener('mouseenter', mouseenterHandler);
-      workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
-
-      keycon = new KeyController(workspace.value);
-
-      const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
-
-      const ctrl = isMac ? 'meta' : 'ctrl';
-
-      keycon
-        .keyup('delete', (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || isPage(nodes.value[0])) return;
-          services?.editorService.remove(nodes.value);
-        })
-        .keyup('backspace', (e) => {
-          e.inputEvent.preventDefault();
-          if (!nodes.value || isPage(nodes.value[0])) return;
-          services?.editorService.remove(nodes.value);
-        })
-        .keydown([ctrl, 'c'], (e) => {
-          e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.copy(nodes.value);
-        })
-        .keydown([ctrl, 'v'], (e) => {
-          e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
-        })
-        .keydown([ctrl, 'x'], (e) => {
-          e.inputEvent.preventDefault();
-          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();
-          services?.editorService.undo();
-        })
-        .keydown([ctrl, 'shift', 'z'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.redo();
-        })
-        .keydown('up', (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, -1);
-        })
-        .keydown('down', (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, 1);
-        })
-        .keydown('left', (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(-1, 0);
-        })
-        .keydown('right', (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(1, 0);
-        })
-        .keydown([ctrl, 'up'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, -10);
-        })
-        .keydown([ctrl, 'down'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(0, 10);
-        })
-        .keydown([ctrl, 'left'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(-10, 0);
-        })
-        .keydown([ctrl, 'right'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.move(10, 0);
-        })
-        .keydown('tab', (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.selectNextNode();
-        })
-        .keydown([ctrl, 'tab'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.editorService.selectNextPage();
-        })
-        .keydown([ctrl, '='], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(0.1);
-        })
-        .keydown([ctrl, 'numpadplus'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(0.1);
-        })
-        .keydown([ctrl, '-'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(-0.1);
-        })
-        .keydown([ctrl, 'numpad-'], (e) => {
-          e.inputEvent.preventDefault();
-          services?.uiService.zoom(-0.1);
-        });
+const services = inject<Services>('services');
+const workspace = ref<HTMLDivElement>();
+const nodes = computed(() => services?.editorService.get<MNode[]>('nodes'));
+const page = computed(() => services?.editorService.get<MPage>('page'));
+
+const mouseenterHandler = () => {
+  workspace.value?.focus();
+};
+
+const mouseleaveHandler = () => {
+  workspace.value?.blur();
+};
+
+let keycon: KeyController;
+
+onMounted(() => {
+  workspace.value?.addEventListener('mouseenter', mouseenterHandler);
+  workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
+
+  keycon = new KeyController(workspace.value);
+
+  const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+
+  const ctrl = isMac ? 'meta' : 'ctrl';
+
+  keycon
+    .keyup('delete', (e) => {
+      e.inputEvent.preventDefault();
+      if (!nodes.value || isPage(nodes.value[0])) return;
+      services?.editorService.remove(nodes.value);
+    })
+    .keyup('backspace', (e) => {
+      e.inputEvent.preventDefault();
+      if (!nodes.value || isPage(nodes.value[0])) return;
+      services?.editorService.remove(nodes.value);
+    })
+    .keydown([ctrl, 'c'], (e) => {
+      e.inputEvent.preventDefault();
+      nodes.value && services?.editorService.copy(nodes.value);
+    })
+    .keydown([ctrl, 'v'], (e) => {
+      e.inputEvent.preventDefault();
+      nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
+    })
+    .keydown([ctrl, 'x'], (e) => {
+      e.inputEvent.preventDefault();
+      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();
+      services?.editorService.undo();
+    })
+    .keydown([ctrl, 'shift', 'z'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.redo();
+    })
+    .keydown('up', (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.move(0, -1);
+    })
+    .keydown('down', (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.move(0, 1);
+    })
+    .keydown('left', (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.move(-1, 0);
+    })
+    .keydown('right', (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.move(1, 0);
+    })
+    .keydown([ctrl, 'up'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.move(0, -10);
+    })
+    .keydown([ctrl, 'down'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.move(0, 10);
+    })
+    .keydown([ctrl, 'left'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.move(-10, 0);
+    })
+    .keydown([ctrl, 'right'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.move(10, 0);
+    })
+    .keydown('tab', (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.selectNextNode();
+    })
+    .keydown([ctrl, 'tab'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.editorService.selectNextPage();
+    })
+    .keydown([ctrl, '='], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.zoom(0.1);
+    })
+    .keydown([ctrl, 'numpadplus'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.zoom(0.1);
+    })
+    .keydown([ctrl, '-'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.zoom(-0.1);
+    })
+    .keydown([ctrl, 'numpad-'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.zoom(-0.1);
+    })
+    .keydown([ctrl, '0'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.set('zoom', services.uiService.calcZoom());
+    })
+    .keydown([ctrl, '1'], (e) => {
+      e.inputEvent.preventDefault();
+      services?.uiService.set('zoom', 1);
     });
+});
 
-    onUnmounted(() => {
-      workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
-      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
-      keycon.destroy();
-    });
-
-    return {
-      workspace,
-
-      page: computed(() => services?.editorService.get<MPage>('page')),
-    };
-  },
+onUnmounted(() => {
+  workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+  workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
+  keycon.destroy();
 });
 </script>

package/src/services/componentList.ts

@@ -41,6 +41,11 @@ class ComponentList extends BaseService {
   public getList(): ComponentGroup[] {
     return this.state.list;
   }
+
+  public destroy() {
+    this.state.list = [];
+    this.removeAllListeners();
+  }
 }
 
 export type ComponentListService = ComponentList;

package/src/services/editor.ts

@@ -71,6 +71,7 @@ class Editor extends BaseService {
         'sort',
         'copy',
         'paste',
+        'doPaste',
         'duAlignCenter',
         'alignCenter',
         'moveLayer',
@@ -296,17 +297,27 @@ class Editor extends BaseService {
       throw new Error('app下不能添加组件');
     }
 
+    if (parent.id !== curNode.id) {
+      const index = parent.items.indexOf(curNode);
+      parent?.items?.splice(index + 1, 0, node);
+    } else {
+      // 新增节点添加到配置中
+      parent?.items?.push(node);
+    }
+
     const layout = await this.getLayout(toRaw(parent), node as MNode);
     node.style = getInitPositionStyle(node.style, layout);
 
-    await stage?.add({ config: cloneDeep(node), parent: cloneDeep(parent), root: cloneDeep(root) });
+    await stage?.add({
+      config: cloneDeep(node),
+      parent: cloneDeep(parent),
+      parentId: parent.id,
+      root: cloneDeep(root),
+    });
 
     node.style = fixNodePosition(node, parent, stage);
 
-    await stage?.update({ config: cloneDeep(node), root: cloneDeep(root) });
-
-    // 新增节点添加到配置中
-    parent?.items?.push(node);
+    await stage?.update({ config: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
 
     this.addModifiedNodeId(node.id);
 
@@ -322,9 +333,6 @@ class Editor extends BaseService {
   public async add(addNode: AddMNode | MNode[], parent?: MContainer | null): Promise<MNode | MNode[]> {
     const stage = this.get<StageCore | null>('stage');
 
-    const parentNode = parent && typeof parent !== 'function' ? parent : getAddParent(addNode);
-    if (!parentNode) throw new Error('未找到父元素');
-
     // 新增多个组件只存在于粘贴多个组件,粘贴的是一个完整的config,所以不再需要getPropsValue
     const addNodes = [];
     if (!Array.isArray(addNode)) {
@@ -337,7 +345,13 @@ class Editor extends BaseService {
       addNodes.push(...addNode);
     }
 
-    const newNodes = await Promise.all(addNodes.map((node) => this.doAdd(node, parentNode)));
+    const newNodes = await Promise.all(
+      addNodes.map((node) => {
+        const parentNode = parent && typeof parent !== 'function' ? parent : getAddParent(node);
+        if (!parentNode) throw new Error('未找到父元素');
+        return this.doAdd(node, parentNode);
+      }),
+    );
 
     if (newNodes.length > 1) {
       const newNodeIds = newNodes.map((node) => node.id);
@@ -359,7 +373,7 @@ class Editor extends BaseService {
 
     this.emit('add', newNodes);
 
-    return newNodes.length > 1 ? newNodes[0] : newNodes;
+    return Array.isArray(addNode) ? newNodes : newNodes[0];
   }
 
   public async doRemove(node: MNode): Promise<void> {
@@ -377,7 +391,7 @@ class Editor extends BaseService {
 
     parent.items?.splice(index, 1);
     const stage = this.get<StageCore | null>('stage');
-    stage?.remove({ id: node.id, root: this.get('root') });
+    stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
 
     if (node.type === NodeType.PAGE) {
       this.state.pageLength -= 1;
@@ -386,7 +400,7 @@ class Editor extends BaseService {
         await this.select(root.items[0]);
         stage?.select(root.items[0].id);
       } else {
-        this.set('node', null);
+        this.set('nodes', [root]);
         this.set('parent', null);
         this.set('page', null);
         this.set('stage', null);
@@ -417,7 +431,7 @@ class Editor extends BaseService {
     // 更新历史记录
     this.pushHistoryState();
 
-    this.emit('remove');
+    this.emit('remove', nodes);
   }
 
   public async doUpdate(config: MNode) {
@@ -466,7 +480,11 @@ class Editor extends BaseService {
     nodes.splice(targetIndex, 1, newConfig);
     this.set('nodes', nodes);
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: cloneDeep(this.get('root')) });
+    this.get<StageCore | null>('stage')?.update({
+      config: cloneDeep(newConfig),
+      parentId: parent.id,
+      root: cloneDeep(this.get('root')),
+    });
 
     if (newConfig.type === NodeType.PAGE) {
       this.set('page', newConfig);
@@ -491,7 +509,7 @@ class Editor extends BaseService {
 
     this.emit('update', newNodes);
 
-    return newNodes.length > 1 ? newNodes[0] : newNodes;
+    return Array.isArray(config) ? newNodes : newNodes[0];
   }
 
   /**
@@ -513,7 +531,11 @@ class Editor extends BaseService {
     await this.update(parent);
     await this.select(node);
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: cloneDeep(this.get('root')) });
+    this.get<StageCore | null>('stage')?.update({
+      config: cloneDeep(node),
+      parentId: parent.id,
+      root: cloneDeep(this.get('root')),
+    });
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
@@ -540,11 +562,16 @@ class Editor extends BaseService {
 
     if (!Array.isArray(config)) return;
 
-    const pasteConfigs = await beforePaste(position, config);
+    const pasteConfigs = await this.doPaste(config, position);
 
     return this.add(pasteConfigs);
   }
 
+  public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
+    const pasteConfigs = await beforePaste(position, cloneDeep(config));
+    return pasteConfigs;
+  }
+
   public async doAlignCenter(config: MNode): Promise<MNode> {
     const parent = this.getParentById(config.id);
 
@@ -598,7 +625,7 @@ class Editor extends BaseService {
    */
   public async moveLayer(offset: number | LayerOffset): Promise<void> {
     const parent = this.get<MContainer>('parent');
-    const node = this.get('node');
+    const node = this.get<MNode>('node');
     const brothers: MNode[] = parent?.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
 
@@ -610,10 +637,15 @@ class Editor extends BaseService {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
 
+    const grandparent = this.getParentById(parent.id);
     this.get<StageCore | null>('stage')?.update({
       config: cloneDeep(toRaw(parent)),
+      parentId: grandparent?.id,
       root: cloneDeep(this.get<MApp>('root')),
     });
+
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
   }
 
   /**
@@ -632,7 +664,7 @@ class Editor extends BaseService {
       const index = getNodeIndex(node, parent);
       parent.items?.splice(index, 1);
 
-      await stage.remove({ id: node.id, root });
+      await stage.remove({ id: node.id, parentId: parent.id, root });
 
       const layout = await this.getLayout(target);
 
@@ -647,7 +679,8 @@ class Editor extends BaseService {
 
       await stage.select(targetId);
 
-      await stage.update({ config: cloneDeep(target), root });
+      const targetParent = this.getParentById(target.id);
+      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root });
 
       await this.select(newConfig);
       stage.select(newConfig.id);
@@ -708,6 +741,10 @@ class Editor extends BaseService {
     this.set('nodes', []);
     this.set('page', null);
     this.set('parent', null);
+    this.set('stage', null);
+    this.set('highlightNode', null);
+    this.set('modifiedNodeIds', new Map());
+    this.set('pageLength', new Map());
   }
 
   public resetModifiedNodeId() {

package/src/services/events.ts

@@ -26,8 +26,8 @@ import type { ComponentGroup } from '../type';
 
 import BaseService from './BaseService';
 
-const eventMap: Record<string, EventOption[]> = reactive({});
-const methodMap: Record<string, EventOption[]> = reactive({});
+let eventMap: Record<string, EventOption[]> = reactive({});
+let methodMap: Record<string, EventOption[]> = reactive({});
 
 class Events extends BaseService {
   constructor() {
@@ -75,6 +75,12 @@ class Events extends BaseService {
   public getMethod(type: string) {
     return cloneDeep(methodMap[type] || DEFAULT_METHODS);
   }
+
+  public destroy() {
+    eventMap = reactive({});
+    methodMap = reactive({});
+    this.removeAllListeners();
+  }
 }
 
 export type EventsService = Events;