@tmagic/editor 1.1.0-beta.7 → 1.1.0

package/src/layouts/sidebar/LayerPanel.vue

@@ -15,6 +15,7 @@
       v-if="values.length"
       ref="tree"
       node-key="id"
+      empty-text="页面空荡荡的"
       draggable
       :default-expanded-keys="expandedKeys"
       :load="loadItems"
@@ -29,7 +30,8 @@
       @node-click="clickHandler"
       @node-contextmenu="contextmenu"
       @node-drag-end="handleDragEnd"
-      empty-text="页面空荡荡的"
+      @node-collapse="handleCollapse"
+      @node-expand="handleExpand"
     >
       <template #default="{ node, data }">
         <div
@@ -60,7 +62,7 @@ import { computed, defineComponent, inject, Ref, ref, watchEffect } from 'vue';
 import type { ElTree } from 'element-plus';
 import { throttle } from 'lodash-es';
 
-import type { MNode, MPage } from '@tmagic/schema';
+import type { Id, MNode, MPage } from '@tmagic/schema';
 import { MContainer, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
@@ -122,22 +124,41 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
 });
 
 const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => {
-  const highlightNode = ref<MNode>();
   const node = ref<MNode>();
   const page = computed(() => editorService?.get('page'));
+  const expandedKeys = new Map<Id, Id>();
+
+  const expandNodes = () => {
+    expandedKeys.forEach((key) => {
+      if (!tree.value) return;
+      tree.value.getNode(key)?.expand();
+    });
+  };
 
   watchEffect(() => {
     if (!tree.value) return;
-    node.value = editorService?.get('node');
-    node.value && tree.value.setCurrentKey(node.value.id, true);
+    if (!editorService) return;
+    node.value = editorService.get('node');
+
+    if (!node.value) return;
 
-    const parent = editorService?.get('parent');
+    tree.value.setCurrentKey(node.value.id, true);
+
+    const parent = editorService.get('parent');
     if (!parent?.id) return;
 
     const treeNode = tree.value.getNode(parent.id);
     treeNode?.updateChildren();
 
-    highlightNode.value = editorService?.get('highlightNode');
+    setTimeout(() => {
+      tree.value &&
+        Object.entries(tree.value.store.nodesMap).forEach(([id, node]) => {
+          if (node.expanded && node.data.items) {
+            expandedKeys.set(id, id);
+          }
+        });
+      expandNodes();
+    });
   });
 
   return {
@@ -153,9 +174,19 @@ const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorSer
       resolve([]);
     },
 
-    highlightNode,
+    highlightNode: computed(() => editorService?.get('highlightNode')),
     clickNode: node,
     expandedKeys: computed(() => (node.value ? [node.value.id] : [])),
+
+    handleCollapse: (data: MNode) => {
+      expandedKeys.delete(data.id);
+    },
+
+    handleExpand: (data: MNode) => {
+      const parent = editorService?.getParentById(data.id);
+      if (!parent?.id) return;
+      expandedKeys.set(parent.id, parent.id);
+    },
   };
 };
 

package/src/layouts/workspace/PageBar.vue

@@ -10,7 +10,7 @@
       <div class="m-editor-page-bar-title">
         <slot name="page-bar-title" :page="item">
           <el-tooltip effect="dark" placement="top-start" :content="item.name">
-            <span>{{ item.name }}</span>
+            <span>{{ item.name || item.id }}</span>
           </el-tooltip>
         </slot>
       </div>

package/src/layouts/workspace/Stage.vue

@@ -4,12 +4,14 @@
     ref="stageWrap"
     :width="stageRect?.width"
     :height="stageRect?.height"
+    :wrap-width="stageContainerRect?.width"
+    :wrap-height="stageContainerRect?.height"
     :zoom="zoom"
   >
     <div
       class="m-editor-stage-container"
       ref="stageContainer"
-      :style="`transform: scale(${zoom})`"
+      :style="`transform: scale(${zoom});`"
       @contextmenu="contextmenuHandler"
       @drop="dropHandler"
       @dragover="dragoverHandler"
@@ -25,25 +27,11 @@ import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, w
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
-import StageCore, {
-  calcValueByFontsize,
-  getOffset,
-  GuidesType,
-  Runtime,
-  SortEventData,
-  UpdateEventData,
-} from '@tmagic/stage';
+import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '../../components/ScrollViewer.vue';
-import {
-  H_GUIDE_LINE_STORAGE_KEY,
-  Layout,
-  Services,
-  StageOptions,
-  StageRect,
-  V_GUIDE_LINE_STORAGE_KEY,
-} from '../../type';
-import { getGuideLineFromCache } from '../../utils';
+import { Layout, Services, StageOptions, StageRect } from '../../type';
+import { useStage } from '../../utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 
@@ -59,90 +47,24 @@ const menu = ref<InstanceType<typeof ViewerMenu>>();
 
 const isMultiSelect = computed(() => services?.editorService.get('nodes')?.length > 1);
 const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
-const uiSelectMode = computed(() => services?.uiService.get<boolean>('uiSelectMode'));
+const stageContainerRect = computed(() => services?.uiService.get<StageRect>('stageContainerRect'));
 const root = computed(() => services?.editorService.get<MApp>('root'));
 const page = computed(() => services?.editorService.get<MPage>('page'));
 const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
 const node = computed(() => services?.editorService.get<MNode>('node'));
 
-const getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;
-
 watchEffect(() => {
   if (stage) return;
 
   if (!stageContainer.value) return;
   if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
 
-  stage = new StageCore({
-    render: stageOptions.render,
-    runtimeUrl: stageOptions.runtimeUrl,
-    zoom: zoom.value,
-    autoScrollIntoView: stageOptions.autoScrollIntoView,
-    isContainer: stageOptions.isContainer,
-    containerHighlightClassName: stageOptions.containerHighlightClassName,
-    containerHighlightDuration: stageOptions.containerHighlightDuration,
-    canSelect: (el, event, stop) => {
-      const elCanSelect = stageOptions.canSelect(el);
-      // 在组件联动过程中不能再往下选择，返回并触发 ui-select
-      if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
-        document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
-        return stop();
-      }
-
-      return elCanSelect;
-    },
-    moveableOptions: stageOptions.moveableOptions,
-    updateDragEl: stageOptions.updateDragEl,
-  });
+  stage = useStage(stageOptions);
 
   services?.editorService.set('stage', markRaw(stage));
 
   stage?.mount(stageContainer.value);
 
-  stage.mask.setGuides([
-    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
-    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
-  ]);
-
-  stage?.on('select', (el: HTMLElement) => {
-    services?.editorService.select(el.id);
-  });
-
-  stage?.on('highlight', (el: HTMLElement) => {
-    services?.editorService.highlight(el.id);
-  });
-
-  stage?.on('multiSelect', (els: HTMLElement[]) => {
-    services?.editorService.multiSelect(els.map((el) => el.id));
-  });
-
-  stage?.on('update', (ev: UpdateEventData) => {
-    if (ev.parentEl) {
-      services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
-      return;
-    }
-    services?.editorService.update({ id: ev.el.id, style: ev.style });
-  });
-
-  stage?.on('sort', (ev: SortEventData) => {
-    services?.editorService.sort(ev.src, ev.dist);
-  });
-
-  stage?.on('changeGuides', (e) => {
-    services?.uiService.set('showGuides', true);
-
-    if (!root.value || !page.value) return;
-
-    const storageKey = getGuideLineKey(
-      e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY,
-    );
-    if (e.guides.length) {
-      globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
-    } else {
-      globalThis.localStorage.removeItem(storageKey);
-    }
-  });
-
   if (!node.value?.id) return;
   stage?.on('runtime-ready', (rt) => {
     runtime = rt;

package/src/layouts/workspace/ViewerMenu.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
+import { computed, inject, markRaw, reactive, ref, watch } from 'vue';
 import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
 import { MNode, NodeType } from '@tmagic/schema';
@@ -12,7 +12,7 @@ import { isPage } from '@tmagic/utils';
 
 import ContentMenu from '../../components/ContentMenu.vue';
 import storageService from '../../services/storage';
-import { LayerOffset, Layout, MenuItem, Services } from '../../type';
+import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '../../type';
 import { COPY_STORAGE_KEY } from '../../utils/editor';
 
 const props = withDefaults(defineProps<{ isMultiSelect?: boolean }>(), { isMultiSelect: false });
@@ -28,16 +28,16 @@ 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<(MenuButton | MenuComponent)[]>('stageContentMenu', []);
 
-const menuData = reactive<MenuItem[]>([
+const menuData = reactive<(MenuButton | MenuComponent)[]>([
   {
     type: 'button',
     text: '水平居中',
-    display: () => canCenter.value && !props.isMultiSelect,
+    display: () => canCenter.value,
     handler: () => {
-      if (!node.value) return;
-      editorService?.alignCenter(node.value);
+      if (!nodes.value) return;
+      editorService?.alignCenter(nodes.value);
     },
   },
   {
@@ -133,11 +133,6 @@ const menuData = reactive<MenuItem[]>([
   ...stageContentMenu,
 ]);
 
-onMounted(async () => {
-  const data = await storageService.getItem(COPY_STORAGE_KEY);
-  canPaste.value = data !== 'undefined' && !!data;
-});
-
 watch(
   parent,
   async () => {
@@ -152,8 +147,10 @@ watch(
   { immediate: true },
 );
 
-const show = (e: MouseEvent) => {
+const show = async (e: MouseEvent) => {
   menu.value?.show(e);
+  const data = await storageService.getItem(COPY_STORAGE_KEY);
+  canPaste.value = data !== 'undefined' && !!data;
 };
 
 defineExpose({ show });

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();
-        })
-        .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;