@tmagic/editor 1.3.5 → 1.3.7

package/src/hooks/use-stage.ts

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 
 import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
@@ -31,6 +31,7 @@ export const useStage = (stageOptions: StageOptions) => {
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
     disabledDragStart: stageOptions.disabledDragStart,
+    renderType: stageOptions.renderType,
     canSelect: (el, event, stop) => {
       const elCanSelect = stageOptions.canSelect(el);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select
@@ -43,13 +44,30 @@ export const useStage = (stageOptions: StageOptions) => {
     },
     moveableOptions: stageOptions.moveableOptions,
     updateDragEl: stageOptions.updateDragEl,
+    guidesOptions: stageOptions.guidesOptions,
+    disabledMultiSelect: stageOptions.disabledMultiSelect,
   });
 
+  watch(
+    () => editorService.get('disabledMultiSelect'),
+    (disabledMultiSelect) => {
+      if (disabledMultiSelect) {
+        stage.disableMultiSelect();
+      } else {
+        stage.enableMultiSelect();
+      }
+    },
+  );
+
   stage.mask.setGuides([
     getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
   ]);
 
+  stage.on('page-el-update', () => {
+    editorService.set('stageLoading', false);
+  });
+
   stage.on('select', (el: HTMLElement) => {
     if (`${editorService.get('node')?.id}` === el.id && editorService.get('nodes').length === 1) return;
     editorService.select(el.id);

package/src/index.ts

@@ -30,6 +30,7 @@ import DataSourceMocks from './fields/DataSourceMocks.vue';
 import DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
+import PageFragmentSelect from './fields/PageFragmentSelect.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setConfig } from './utils/config';
@@ -79,6 +80,7 @@ export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
 export { default as Resizer } from './components/Resizer.vue';
 export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
+export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // eslint-disable-next-line no-eval
@@ -108,5 +110,6 @@ export default {
     app.component('m-fields-data-source-methods', DataSourceMethods);
     app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
     app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
+    app.component('m-fields-page-fragment-select', PageFragmentSelect);
   },
 };

package/src/initService.ts

@@ -1,16 +1,17 @@
-import { onUnmounted, reactive, toRaw, watch } from 'vue';
+import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
-import type { Target } from '@tmagic/dep';
 import {
   createCodeBlockTarget,
   createDataSourceCondTarget,
   createDataSourceMethodTarget,
   createDataSourceTarget,
+  createRelatedCompTarget,
   DepTargetType,
+  Target,
 } from '@tmagic/dep';
-import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
+import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { getNodes } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
@@ -46,6 +47,16 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.disabledMultiSelect,
+    (disabledMultiSelect) => {
+      editorService.set('disabledMultiSelect', disabledMultiSelect || false);
+    },
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.componentGroupList,
     (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList),
@@ -164,7 +175,7 @@ export const initServiceState = (
     },
   );
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     editorService.resetState();
     historyService.resetState();
     propsService.resetState();
@@ -186,7 +197,7 @@ export const initServiceEvents = (
     return stage?.renderer.runtime?.getApp?.();
   };
 
-  const updateDataSoucreSchema = () => {
+  const updateDataSourceSchema = () => {
     const root = editorService.get('root');
 
     if (root?.dataSources) {
@@ -194,7 +205,7 @@ export const initServiceEvents = (
     }
   };
 
-  const upateNodeWhenDataSourceChange = (nodes: MNode[]) => {
+  const updateNodeWhenDataSourceChange = (nodes: MNode[]) => {
     const root = editorService.get('root');
     const stage = editorService.get('stage');
 
@@ -210,7 +221,7 @@ export const initServiceEvents = (
       app.dsl.dataSources = root.dataSources;
     }
 
-    updateDataSoucreSchema();
+    updateDataSourceSchema();
 
     nodes.forEach((node) => {
       const deps = Object.values(root.dataSourceDeps || {});
@@ -258,11 +269,11 @@ export const initServiceEvents = (
   };
 
   const depUpdateHandler = (node: MNode) => {
-    upateNodeWhenDataSourceChange([node]);
+    updateNodeWhenDataSourceChange([node]);
   };
 
   const collectedHandler = (nodes: MNode[]) => {
-    upateNodeWhenDataSourceChange(nodes);
+    updateNodeWhenDataSourceChange(nodes);
   };
 
   depService.on('add-target', targetAddHandler);
@@ -291,7 +302,7 @@ export const initServiceEvents = (
       depService.addTarget(createCodeBlockTarget(id, code));
     });
 
-    value.dataSources.forEach((ds) => {
+    dataSourceService.get('dataSources').forEach((ds) => {
       initDataSourceDepTarget(ds);
     });
 
@@ -339,7 +350,7 @@ export const initServiceEvents = (
   };
 
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
-  const historyChangeHandler = (page: MPage) => {
+  const historyChangeHandler = (page: MPage | MPageFragment) => {
     depService.collect([page], true);
   };
 
@@ -350,8 +361,8 @@ export const initServiceEvents = (
   editorService.on('update', nodeUpdateHandler);
 
   const codeBlockAddOrUpdateHandler = (id: Id, codeBlock: CodeBlockContent) => {
-    if (depService.hasTarget(id)) {
-      depService.getTarget(id)!.name = codeBlock.name;
+    if (depService.hasTarget(id, DepTargetType.CODE_BLOCK)) {
+      depService.getTarget(id, DepTargetType.CODE_BLOCK)!.name = codeBlock.name;
       return;
     }
 
@@ -359,7 +370,7 @@ export const initServiceEvents = (
   };
 
   const codeBlockRemoveHandler = (id: Id) => {
-    depService.removeTarget(id);
+    depService.removeTarget(id, DepTargetType.CODE_BLOCK);
   };
 
   codeBlockService.on('addOrUpdate', codeBlockAddOrUpdateHandler);
@@ -372,16 +383,26 @@ export const initServiceEvents = (
 
   const dataSourceUpdateHandler = (config: DataSourceSchema) => {
     const root = editorService.get('root');
+    removeDataSourceTarget(config.id);
+    initDataSourceDepTarget(config);
+
+    depService.collect(root?.items || [], true);
 
     const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
 
     const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
 
-    upateNodeWhenDataSourceChange(nodes);
+    updateNodeWhenDataSourceChange(nodes);
+  };
+
+  const removeDataSourceTarget = (id: string) => {
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE);
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE_COND);
+    depService.removeTarget(id, DepTargetType.DATA_SOURCE_METHOD);
   };
 
   const dataSourceRemoveHandler = (id: string) => {
-    depService.removeTarget(id);
+    removeDataSourceTarget(id);
     getApp()?.dataSourceManager?.removeDataSource(id);
   };
 
@@ -389,7 +410,12 @@ export const initServiceEvents = (
   dataSourceService.on('update', dataSourceUpdateHandler);
   dataSourceService.on('remove', dataSourceRemoveHandler);
 
-  onUnmounted(() => {
+  // 初始化复制组件相关的依赖收集器
+  if (props.collectorOptions && !depService.hasTarget(DepTargetType.RELATED_COMP_WHEN_COPY)) {
+    depService.addTarget(createRelatedCompTarget(props.collectorOptions));
+  }
+
+  onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
     depService.off('dep-update', depUpdateHandler);

package/src/layouts/AddPageBox.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="m-editor-empty-panel">
     <div class="m-editor-empty-content">
-      <div class="m-editor-empty-button" @click="clickHandler">
+      <div class="m-editor-empty-button" @click="clickHandler(NodeType.PAGE)">
         <div>
           <MIcon :icon="Plus"></MIcon>
         </div>
         <p>新增页面</p>
       </div>
+
+      <div v-if="!disabledPageFragment" class="m-editor-empty-button" @click="clickHandler(NodeType.PAGE_FRAGMENT)">
+        <div>
+          <MIcon :icon="Plus"></MIcon>
+        </div>
+        <p>新增页面片</p>
+      </div>
     </div>
   </div>
 </template>
@@ -25,9 +32,13 @@ defineOptions({
   name: 'MEditorAddPageBox',
 });
 
+defineProps<{
+  disabledPageFragment: boolean;
+}>();
+
 const services = inject<Services>('services');
 
-const clickHandler = () => {
+const clickHandler = (type: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
   const { editorService } = services || {};
 
   if (!editorService) return;
@@ -36,8 +47,9 @@ const clickHandler = () => {
   if (!root) throw new Error('root 不能为空');
 
   editorService.add({
-    type: NodeType.PAGE,
-    name: generatePageNameByApp(root),
+    type,
+    name: generatePageNameByApp(root, type),
+    items: [],
   });
 };
 </script>

package/src/layouts/CodeEditor.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
@@ -188,7 +188,7 @@ onMounted(async () => {
   init();
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   resizeObserver.disconnect();
 });
 

package/src/layouts/Framework.vue

@@ -11,6 +11,8 @@
     </slot>
 
     <SplitView
+      v-loading="stageLoading"
+      element-loading-text="Runtime 加载中..."
       v-else
       ref="splitView"
       class="m-editor-content"
@@ -29,13 +31,18 @@
       </template>
 
       <template #center>
-        <slot v-if="pageLength > 0" name="workspace"></slot>
+        <slot v-if="page" name="workspace"></slot>
         <slot v-else name="empty">
-          <AddPageBox></AddPageBox>
+          <AddPageBox :disabled-page-fragment="disabledPageFragment"></AddPageBox>
         </slot>
+
+        <PageBar :disabled-page-fragment="disabledPageFragment">
+          <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>
       </template>
 
-      <template v-if="pageLength > 0" #right>
+      <template v-if="page" #right>
         <TMagicScrollbar>
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
@@ -56,6 +63,7 @@ import SplitView from '@editor/components/SplitView.vue';
 import type { FrameworkSlots, GetColumnWidth, Services } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
+import PageBar from './page-bar/PageBar.vue';
 import AddPageBox from './AddPageBox.vue';
 import CodeEditor from './CodeEditor.vue';
 
@@ -65,6 +73,10 @@ defineOptions({
   name: 'MEditorFramework',
 });
 
+defineProps<{
+  disabledPageFragment: boolean;
+}>();
+
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
@@ -75,8 +87,10 @@ const content = ref<HTMLDivElement>();
 const splitView = ref<InstanceType<typeof SplitView>>();
 
 const root = computed(() => editorService?.get('root'));
+const page = computed(() => editorService?.get('page'));
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
+const stageLoading = computed(() => editorService?.get('stageLoading') || false);
 const showSrc = computed(() => uiService?.get('showSrc'));
 
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';

package/src/layouts/PropsPanel.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
+import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
@@ -64,7 +64,7 @@ onMounted(() => {
   emit('mounted', internalInstance);
 });
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   services?.propsService.off('props-configs-change', init);
 });
 

package/src/layouts/page-bar/AddButton.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-if="showAddPageButton"
+    id="m-editor-page-bar-add-icon"
+    class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+    @click="addPage"
+  >
+    <Icon :icon="Plus"></Icon>
+  </div>
+  <div v-else style="width: 21px"></div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, toRaw } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+
+import { NodeType } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+import { generatePageNameByApp } from '@editor/utils/editor';
+
+defineOptions({
+  name: 'MEditorPageBarAddButton',
+});
+
+const props = defineProps<{
+  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+}>();
+
+const services = inject<Services>('services');
+const uiService = services?.uiService;
+const editorService = services?.editorService;
+
+const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
+
+const addPage = () => {
+  if (!editorService) return;
+  const root = toRaw(editorService.get('root'));
+  if (!root) throw new Error('root 不能为空');
+  const pageConfig = {
+    type: props.type,
+    name: generatePageNameByApp(root, props.type),
+    items: [],
+  };
+  editorService.add(pageConfig);
+};
+</script>

package/src/layouts/page-bar/PageBar.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="m-editor-page-bar-tabs">
+    <SwitchTypeButton v-if="!disabledPageFragment" v-model="active" />
+
+    <PageBarScrollContainer :type="active">
+      <template #prepend>
+        <AddButton :type="active"></AddButton>
+      </template>
+
+      <div
+        v-for="item in list"
+        class="m-editor-page-bar-item"
+        :key="item.id"
+        :class="{ active: page?.id === item.id }"
+        @click="switchPage(item.id)"
+      >
+        <div class="m-editor-page-bar-title">
+          <slot name="page-bar-title" :page="item">
+            <span :title="item.name">{{ item.name || item.id }}</span>
+          </slot>
+        </div>
+
+        <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+          <div>
+            <slot name="page-bar-popover" :page="item">
+              <ToolButton
+                :data="{
+                  type: 'button',
+                  text: '复制',
+                  icon: DocumentCopy,
+                  handler: () => copy(item),
+                }"
+              ></ToolButton>
+              <ToolButton
+                :data="{
+                  type: 'button',
+                  text: '删除',
+                  icon: Delete,
+                  handler: () => remove(item),
+                }"
+              ></ToolButton>
+            </slot>
+          </div>
+          <template #reference>
+            <TMagicIcon class="m-editor-page-bar-menu-icon">
+              <CaretBottom></CaretBottom>
+            </TMagicIcon>
+          </template>
+        </TMagicPopover>
+      </div>
+    </PageBarScrollContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref, watch } from 'vue';
+import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
+
+import { TMagicIcon, TMagicPopover } from '@tmagic/design';
+import { Id, type MPage, type MPageFragment, NodeType } from '@tmagic/schema';
+import { isPage, isPageFragment } from '@tmagic/utils';
+
+import ToolButton from '@editor/components/ToolButton.vue';
+import type { Services } from '@editor/type';
+import { getPageFragmentList, getPageList } from '@editor/utils';
+
+import AddButton from './AddButton.vue';
+import PageBarScrollContainer from './PageBarScrollContainer.vue';
+import SwitchTypeButton from './SwitchTypeButton.vue';
+
+defineOptions({
+  name: 'MEditorPageBar',
+});
+
+defineProps<{
+  disabledPageFragment: boolean;
+}>();
+
+const active = ref<NodeType.PAGE | NodeType.PAGE_FRAGMENT>(NodeType.PAGE);
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const root = computed(() => editorService?.get('root'));
+const page = computed(() => editorService?.get('page'));
+const pageList = computed(() => getPageList(root.value));
+const pageFragmentList = computed(() => getPageFragmentList(root.value));
+
+const list = computed(() => (active.value === NodeType.PAGE ? pageList.value : pageFragmentList.value));
+
+const activePage = ref<Id>('');
+const activePageFragment = ref<Id>('');
+
+watch(
+  page,
+  (page) => {
+    if (!page) {
+      if (active.value === NodeType.PAGE) {
+        activePage.value = '';
+      }
+      if (active.value === NodeType.PAGE_FRAGMENT) {
+        activePageFragment.value = '';
+      }
+      return;
+    }
+
+    if (isPage(page)) {
+      activePage.value = page?.id;
+      if (active.value !== NodeType.PAGE) {
+        active.value = NodeType.PAGE;
+      }
+    } else if (isPageFragment(page)) {
+      activePageFragment.value = page?.id;
+      if (active.value !== NodeType.PAGE_FRAGMENT) {
+        active.value = NodeType.PAGE_FRAGMENT;
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(active, (active) => {
+  if (active === NodeType.PAGE) {
+    if (!activePage.value) {
+      editorService?.selectRoot();
+      return;
+    }
+    switchPage(activePage.value);
+    return;
+  }
+
+  if (active === NodeType.PAGE_FRAGMENT) {
+    if (!activePageFragment.value) {
+      editorService?.selectRoot();
+      return;
+    }
+    switchPage(activePageFragment.value);
+  }
+});
+
+const switchPage = (id: Id) => {
+  editorService?.select(id);
+};
+
+const copy = (node: MPage | MPageFragment) => {
+  node && editorService?.copy(node);
+  editorService?.paste({
+    left: 0,
+    top: 0,
+  });
+};
+
+const remove = (node: MPage | MPageFragment) => {
+  editorService?.remove(node);
+};
+</script>