@tmagic/editor 1.3.6 → 1.3.8

package/src/layouts/workspace/Workspace.vue

@@ -3,15 +3,14 @@
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
-      <MagicStage v-if="page" :stage-content-menu="stageContentMenu"></MagicStage>
+      <MagicStage
+        v-if="page"
+        :stage-content-menu="stageContentMenu"
+        :custom-content-menu="customContentMenu"
+      ></MagicStage>
     </slot>
 
     <slot name="workspace-content"></slot>
-
-    <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>
-    </PageBar>
   </div>
 </template>
 
@@ -22,7 +21,6 @@ import type { MenuButton, MenuComponent, Services, WorkspaceSlots } from '@edito
 
 import MagicStage from './viewer/Stage.vue';
 import Breadcrumb from './Breadcrumb.vue';
-import PageBar from './PageBar.vue';
 
 defineSlots<WorkspaceSlots>();
 
@@ -32,6 +30,7 @@ defineOptions({
 
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }>();
 
 const services = inject<Services>('services');

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

@@ -56,6 +56,8 @@ const unWatch = watch(
   (stage) => {
     if (!stage) return;
 
+    nextTick(() => unWatch());
+
     stage.on('select', (el: HTMLElement, event: MouseEvent) => {
       const els = stage.renderer.getElementsFromPoint(event) || [];
       const ids = els.map((el) => el.id).filter((id) => Boolean(id));
@@ -64,8 +66,6 @@ const unWatch = watch(
 
       filterTextChangeHandler(ids);
     });
-
-    unWatch();
   },
   {
     immediate: true,

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/dataSource.ts

@@ -33,6 +33,23 @@ class DataSource extends BaseService {
     methods: {},
   });
 
+  constructor() {
+    super([
+      { name: 'getFormConfig', isAsync: false },
+      { name: 'setFormConfig', isAsync: false },
+      { name: 'getFormValue', isAsync: false },
+      { name: 'setFormValue', isAsync: false },
+      { name: 'getFormEvent', isAsync: false },
+      { name: 'setFormEvent', isAsync: false },
+      { name: 'getFormMethod', isAsync: false },
+      { name: 'setFormMethod', isAsync: false },
+      { name: 'add', isAsync: false },
+      { name: 'update', isAsync: false },
+      { name: 'remove', isAsync: false },
+      { name: 'createId', isAsync: false },
+    ]);
+  }
+
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
     this.state[name] = value;
   }

package/src/services/dep.ts

@@ -62,6 +62,10 @@ class Dep extends BaseService {
     return this.watcher.clear(nodes);
   }
 
+  public clearByType(type: DepTargetType, nodes?: MNode[]) {
+    return this.watcher.clearByType(type, nodes);
+  }
+
   public hasTarget(id: Id, type: string = DepTargetType.DEFAULT) {
     return this.watcher.hasTarget(id, type);
   }

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);
@@ -613,7 +644,7 @@ class Editor extends BaseService {
   public copyWithRelated(config: MNode | MNode[]): void {
     const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
     // 关联的组件也一并复制
-    depService.getTarget(DepTargetType.RELATED_COMP_WHEN_COPY, DepTargetType.RELATED_COMP_WHEN_COPY)?.removeDep();
+    depService.clearByType(DepTargetType.RELATED_COMP_WHEN_COPY);
     depService.collect(copyNodes, true, DepTargetType.RELATED_COMP_WHEN_COPY);
     const customTarget = depService.getTarget(
       DepTargetType.RELATED_COMP_WHEN_COPY,

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;