@tmagic/editor 1.3.6 → 1.3.7

package/src/layouts/workspace/viewer/Stage.vue

@@ -25,13 +25,18 @@
     <NodeListMenu></NodeListMenu>
 
     <Teleport to="body">
-      <ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
+      <ViewerMenu
+        ref="menu"
+        :is-multi-select="isMultiSelect"
+        :stage-content-menu="stageContentMenu"
+        :custom-content-menu="customContentMenu"
+      ></ViewerMenu>
     </Teleport>
   </ScrollViewer>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
+import { computed, inject, markRaw, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer } from '@tmagic/schema';
@@ -52,6 +57,7 @@ defineOptions({
 
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();
 
 let stage: StageCore | null = null;
@@ -108,6 +114,7 @@ watch(zoom, (zoom) => {
 
 watch(page, (page) => {
   if (runtime && page) {
+    services?.editorService.set('stageLoading', true);
     runtime.updatePageId?.(page.id);
     nextTick(() => {
       stage?.select(page.id);
@@ -135,15 +142,15 @@ const resizeObserver = new ResizeObserver((entries) => {
 onMounted(() => {
   if (stageWrap.value?.container) {
     resizeObserver.observe(stageWrap.value.container);
-    services?.keybindingService.registeEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
+    services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
   }
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   stage?.destroy();
   resizeObserver.disconnect();
   services?.editorService.set('stage', null);
-  services?.keybindingService.unregisteEl('stage');
+  services?.keybindingService.unregisterEl('stage');
   services?.editorService.off('root-change', rootChangeHandler);
 });
 

package/src/layouts/workspace/viewer/ViewerMenu.vue

@@ -7,7 +7,7 @@ import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Bottom, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
-import { isPage } from '@tmagic/utils';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import CenterIcon from '@editor/icons/CenterIcon.vue';
@@ -19,8 +19,16 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
-  { isMultiSelect: false },
+  defineProps<{
+    isMultiSelect?: boolean;
+    stageContentMenu: (MenuButton | MenuComponent)[];
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  }>(),
+  {
+    isMultiSelect: false,
+    stageContentMenu: () => [],
+    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
+  },
 );
 
 const services = inject<Services>('services');
@@ -32,83 +40,88 @@ const node = computed(() => editorService?.get('node'));
 const nodes = computed(() => editorService?.get('nodes'));
 const parent = computed(() => editorService?.get('parent'));
 
-const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
-  {
-    type: 'button',
-    text: '水平居中',
-    icon: markRaw(CenterIcon),
-    display: () => canCenter.value,
-    handler: () => {
-      if (!nodes.value) return;
-      editorService?.alignCenter(nodes.value);
-    },
-  },
-  useCopyMenu(),
-  usePasteMenu(menu),
-  {
-    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: '置顶',
-    icon: markRaw(Top),
-    display: () => !isPage(node.value) && !props.isMultiSelect,
-    handler: () => {
-      editorService?.moveLayer(LayerOffset.TOP);
-    },
-  },
-  {
-    type: 'button',
-    text: '置底',
-    icon: markRaw(Bottom),
-    display: () => !isPage(node.value) && !props.isMultiSelect,
-    handler: () => {
-      editorService?.moveLayer(LayerOffset.BOTTOM);
-    },
-  },
-  useMoveToMenu(services),
-  {
-    type: 'divider',
-    direction: 'horizontal',
-    display: () => !isPage(node.value) && !props.isMultiSelect,
-  },
-  useDeleteMenu(),
-  {
-    type: 'divider',
-    direction: 'horizontal',
-  },
-  {
-    type: 'button',
-    text: '清空参考线',
-    handler: () => {
-      editorService?.get('stage')?.clearGuides();
-    },
-  },
-  ...props.stageContentMenu,
-]);
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
+  props.customContentMenu(
+    [
+      {
+        type: 'button',
+        text: '水平居中',
+        icon: markRaw(CenterIcon),
+        display: () => canCenter.value,
+        handler: () => {
+          if (!nodes.value) return;
+          editorService?.alignCenter(nodes.value);
+        },
+      },
+      useCopyMenu(),
+      usePasteMenu(menu),
+      {
+        type: 'divider',
+        direction: 'horizontal',
+        display: () => {
+          if (!node.value) return false;
+          return !isPage(node.value) && !isPageFragment(node.value);
+        },
+      },
+      {
+        type: 'button',
+        text: '上移一层',
+        icon: markRaw(Top),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(1);
+        },
+      },
+      {
+        type: 'button',
+        text: '下移一层',
+        icon: markRaw(Bottom),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(-1);
+        },
+      },
+      {
+        type: 'button',
+        text: '置顶',
+        icon: markRaw(Top),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(LayerOffset.TOP);
+        },
+      },
+      {
+        type: 'button',
+        text: '置底',
+        icon: markRaw(Bottom),
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        handler: () => {
+          editorService?.moveLayer(LayerOffset.BOTTOM);
+        },
+      },
+      useMoveToMenu(services),
+      {
+        type: 'divider',
+        direction: 'horizontal',
+        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+      },
+      useDeleteMenu(),
+      {
+        type: 'divider',
+        direction: 'horizontal',
+      },
+      {
+        type: 'button',
+        text: '清空参考线',
+        handler: () => {
+          editorService?.get('stage')?.clearGuides();
+        },
+      },
+      ...props.stageContentMenu,
+    ],
+    'viewer',
+  ),
+);
 
 watch(
   parent,

package/src/services/editor.ts

@@ -20,10 +20,9 @@ import { reactive, toRaw } from 'vue';
 import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
 
 import { DepTargetType } from '@tmagic/dep';
-import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
-import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
+import { getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import depService from '@editor/services/dep';
 import historyService from '@editor/services/history';
@@ -37,8 +36,10 @@ import {
   fixNodePosition,
   getInitPositionStyle,
   getNodeIndex,
+  getPageFragmentList,
+  getPageList,
   isFixed,
-  setChilrenLayout,
+  setChildrenLayout,
   setLayout,
 } from '@editor/utils/editor';
 import { beforePaste, getAddParent } from '@editor/utils/operator';
@@ -54,9 +55,12 @@ class Editor extends BaseService {
     node: null,
     nodes: [],
     stage: null,
+    stageLoading: true,
     highlightNode: null,
     modifiedNodeIds: new Map(),
     pageLength: 0,
+    pageFragmentLength: 0,
+    disabledMultiSelect: false,
   });
   private isHistoryStateChange = false;
 
@@ -92,7 +96,7 @@ class Editor extends BaseService {
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
    * @param value MNode
    */
   public set<K extends StoreStateKey, T extends StoreState[K]>(name: K, value: T) {
@@ -109,10 +113,15 @@ class Editor extends BaseService {
         throw new Error('root 不能为数组');
       }
 
-      if (value && isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
-        this.state.pageLength = value.items?.length || 0;
+      if (value && isObject(value)) {
+        const app = value as MApp;
+        this.state.pageLength = getPageList(app).length || 0;
+        this.state.pageFragmentLength = getPageFragmentList(app).length || 0;
+        this.state.stageLoading = this.state.pageLength !== 0;
       } else {
         this.state.pageLength = 0;
+        this.state.pageFragmentLength = 0;
+        this.state.stageLoading = false;
       }
 
       this.emit('root-change', value, preValue);
@@ -121,7 +130,7 @@ class Editor extends BaseService {
 
   /**
    * 获取当前指点节点配置
-   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
+   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
    * @returns MNode
    */
   public get<K extends StoreStateKey>(name: K): StoreState[K] {
@@ -163,8 +172,8 @@ class Editor extends BaseService {
     info.parent = path[path.length - 2] as MContainer;
 
     path.forEach((item) => {
-      if (item.type === NodeType.PAGE) {
-        info.page = item as MPage;
+      if (isPage(item) || isPageFragment(item)) {
+        info.page = item as MPage | MPageFragment;
         return;
       }
     });
@@ -312,6 +321,17 @@ class Editor extends BaseService {
     this.set('nodes', nodes);
   }
 
+  public selectRoot() {
+    const root = this.get('root');
+    if (!root) return;
+
+    this.set('nodes', [root]);
+    this.set('parent', null);
+    this.set('page', null);
+    this.set('stage', null);
+    this.set('highlightNode', null);
+  }
+
   public async doAdd(node: MNode, parent: MContainer): Promise<MNode> {
     const root = this.get('root');
 
@@ -322,11 +342,11 @@ class Editor extends BaseService {
 
     if (!curNode) throw new Error('当前选中节点为空');
 
-    if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
+    if ((parent.type === NodeType.ROOT || curNode?.type === NodeType.ROOT) && !(isPage(node) || isPageFragment(node))) {
       throw new Error('app下不能添加组件');
     }
 
-    if (parent.id !== curNode.id && node.type !== NodeType.PAGE) {
+    if (parent.id !== curNode.id && !(isPage(node) || isPageFragment(node))) {
       const index = parent.items.indexOf(curNode);
       parent.items?.splice(index + 1, 0, node);
     } else {
@@ -380,7 +400,7 @@ class Editor extends BaseService {
     const newNodes = await Promise.all(
       addNodes.map((node) => {
         const root = this.get('root');
-        if (isPage(node) && root) {
+        if ((isPage(node) || isPageFragment(node)) && root) {
           return this.doAdd(node, root);
         }
         const parentNode = parent && typeof parent !== 'function' ? parent : getAddParent(node);
@@ -399,13 +419,15 @@ class Editor extends BaseService {
 
       if (isPage(newNodes[0])) {
         this.state.pageLength += 1;
+      } else if (isPageFragment(newNodes[0])) {
+        this.state.pageFragmentLength += 1;
       } else {
         // 新增页面，这个时候页面还有渲染出来，此时select会出错，在runtime-ready的时候回去select
         stage?.select(newNodes[0].id);
       }
     }
 
-    if (!isPage(newNodes[0])) {
+    if (!(isPage(newNodes[0]) || isPageFragment(newNodes[0]))) {
       this.pushHistoryState();
     }
 
@@ -418,7 +440,7 @@ class Editor extends BaseService {
     const root = this.get('root');
     if (!root) throw new Error('root不能为空');
 
-    const { parent, node: curNode } = this.getNodeInfo(node.id);
+    const { parent, node: curNode } = this.getNodeInfo(node.id, false);
 
     if (!parent || !curNode) throw new Error('找不要删除的节点');
 
@@ -430,29 +452,38 @@ class Editor extends BaseService {
     const stage = this.get('stage');
     stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(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);
+    const selectDefault = async (pages: MNode[]) => {
+      if (pages[0]) {
+        await this.select(pages[0]);
+        stage?.select(pages[0].id);
       } else {
-        this.set('nodes', [root]);
-        this.set('parent', null);
-        this.set('page', null);
-        this.set('stage', null);
-        this.set('highlightNode', null);
-        this.resetModifiedNodeId();
-        historyService.reset();
+        this.selectRoot();
 
-        return;
+        historyService.resetPage();
       }
+    };
+
+    const rootItems = root.items || [];
+
+    if (isPage(node)) {
+      this.state.pageLength -= 1;
+
+      await selectDefault(getPageList(root));
+    } else if (isPageFragment(node)) {
+      this.state.pageFragmentLength -= 1;
+
+      await selectDefault(getPageFragmentList(root));
     } else {
       await this.select(parent);
       stage?.select(parent.id);
+
+      this.addModifiedNodeId(parent.id);
     }
 
-    this.addModifiedNodeId(parent.id);
+    if (!rootItems.length) {
+      this.resetModifiedNodeId();
+      historyService.reset();
+    }
   }
 
   /**
@@ -464,7 +495,7 @@ class Editor extends BaseService {
 
     await Promise.all(nodes.map((node) => this.doRemove(node)));
 
-    if (!isPage(nodes[0])) {
+    if (!(isPage(nodes[0]) || isPageFragment(nodes[0]))) {
       // 更新历史记录
       this.pushHistoryState();
     }
@@ -514,7 +545,7 @@ class Editor extends BaseService {
     const newLayout = await this.getLayout(newConfig);
     const layout = await this.getLayout(node);
     if (Array.isArray(newConfig.items) && newLayout !== layout) {
-      newConfig = setChilrenLayout(newConfig as MContainer, newLayout);
+      newConfig = setChildrenLayout(newConfig as MContainer, newLayout);
     }
 
     parentNodeItems[index] = newConfig;
@@ -531,8 +562,8 @@ class Editor extends BaseService {
       root: cloneDeep(root),
     });
 
-    if (newConfig.type === NodeType.PAGE) {
-      this.set('page', newConfig as MPage);
+    if (isPage(newConfig) || isPageFragment(newConfig)) {
+      this.set('page', newConfig as MPage | MPageFragment);
     }
 
     this.addModifiedNodeId(newConfig.id);

package/src/services/history.ts

@@ -18,7 +18,7 @@
 
 import { reactive } from 'vue';
 
-import type { MPage } from '@tmagic/schema';
+import type { MPage, MPageFragment } from '@tmagic/schema';
 
 import type { HistoryState, StepValue } from '@editor/type';
 import { UndoRedo } from '@editor/utils/undo-redo';
@@ -41,12 +41,16 @@ class History extends BaseService {
 
   public reset() {
     this.state.pageSteps = {};
+    this.resetPage();
+  }
+
+  public resetPage() {
     this.state.pageId = undefined;
     this.state.canRedo = false;
     this.state.canUndo = false;
   }
 
-  public changePage(page: MPage): void {
+  public changePage(page: MPage | MPageFragment): void {
     if (!page) return;
 
     this.state.pageId = page.id;

package/src/services/keybinding.ts

@@ -1,6 +1,6 @@
 import KeyController, { KeyControllerEvent } from 'keycon';
 
-import { isPage } from '@tmagic/utils';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import { KeyBindingCacheItem, KeyBindingCommand, KeyBindingItem } from '@editor/type';
 
@@ -19,7 +19,7 @@ class Keybinding extends BaseService {
     [KeyBindingCommand.DELETE_NODE]: () => {
       const nodes = editorService.get('nodes');
 
-      if (!nodes || isPage(nodes[0])) return;
+      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
       editorService.remove(nodes);
     },
     [KeyBindingCommand.COPY_NODE]: () => {
@@ -29,7 +29,7 @@ class Keybinding extends BaseService {
     [KeyBindingCommand.CUT_NODE]: () => {
       const nodes = editorService.get('nodes');
 
-      if (!nodes || isPage(nodes[0])) return;
+      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
       editorService.copy(nodes);
       editorService.remove(nodes);
     },
@@ -84,15 +84,29 @@ class Keybinding extends BaseService {
     },
   };
 
-  public registeCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
+  public registerCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
     this.commands[command] = handler;
   }
 
-  public unregisteCommand(command: string) {
+  /**
+   * @deprecated
+   */
+  public registeCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
+    this.registerCommand(command, handler);
+  }
+
+  public unregisterCommand(command: string) {
     delete this.commands[command];
   }
 
-  public registeEl(name: string, el?: HTMLElement) {
+  /**
+   * @deprecated
+   */
+  public unregisteCommand(command: string) {
+    this.unregisterCommand(command);
+  }
+
+  public registerEl(name: string, el?: HTMLElement) {
     if (name !== 'global' && !el) {
       throw new Error('只有name为global可以不传el');
     }
@@ -102,20 +116,34 @@ class Keybinding extends BaseService {
     this.bind(name);
   }
 
-  public unregisteEl(name: string) {
+  /**
+   * @deprecated
+   */
+  public registeEl(name: string, el?: HTMLElement) {
+    this.registerEl(name, el);
+  }
+
+  public unregisterEl(name: string) {
     this.controllers.get(name)?.destroy();
     this.controllers.delete(name);
     this.bindingList.forEach((item) => {
-      item.binded = false;
+      item.bound = false;
     });
   }
 
-  public registe(maps: KeyBindingItem[]) {
+  /**
+   * @deprecated
+   */
+  public unregisteEl(name: string) {
+    this.unregisterEl(name);
+  }
+
+  public register(maps: KeyBindingItem[]) {
     for (const keybindingItem of maps) {
       const { command, keybinding, when } = keybindingItem;
 
       for (const [type = '', eventType = 'keydown'] of when) {
-        const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, binded: false };
+        const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, bound: false };
 
         this.bindingList.push(cacheItem);
       }
@@ -124,6 +152,13 @@ class Keybinding extends BaseService {
     this.bind();
   }
 
+  /**
+   * @deprecated
+   */
+  public registe(map: KeyBindingItem[]) {
+    this.register(map);
+  }
+
   public reset() {
     this.controllers.forEach((keycon) => {
       keycon.destroy();
@@ -138,13 +173,13 @@ class Keybinding extends BaseService {
 
   private bind(name?: string) {
     for (const item of this.bindingList) {
-      const { type, eventType, command, keybinding, binded } = item;
+      const { type, eventType, command, keybinding, bound } = item;
 
       if (name && name !== type) {
         continue;
       }
 
-      if (binded) {
+      if (bound) {
         continue;
       }
 
@@ -166,7 +201,7 @@ class Keybinding extends BaseService {
         }
       });
 
-      item.binded = true;
+      item.bound = true;
     }
   }
 

package/src/theme/code-block.scss

@@ -1,21 +1,5 @@
 .m-editor-code-block-list {
   height: 100%;
-
-  .list-container {
-    .list-item {
-      .codeIcon {
-        width: 22px;
-        height: 22px;
-        margin-right: 5px;
-      }
-
-      .compIcon {
-        width: 22px;
-        height: 22px;
-        margin-right: 5px;
-      }
-    }
-  }
 }
 
 .m-fields-code-select {