@tmagic/editor 1.5.0-beta.9 → 1.5.1

package/src/layouts/sidebar/data-source/useContentMenu.ts

@@ -0,0 +1,81 @@
+import { inject, markRaw, useTemplateRef } from 'vue';
+import { CopyDocument, Delete, Edit } from '@element-plus/icons-vue';
+import { cloneDeep } from 'lodash-es';
+
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { EventBus, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
+
+export const useContentMenu = () => {
+  const eventBus = inject<EventBus>('eventBus');
+  const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
+
+  let selectId = '';
+
+  const menuData: (MenuButton | MenuComponent)[] = [
+    {
+      type: 'button',
+      text: '编辑',
+      icon: Edit,
+      display: (services) => services?.dataSourceService?.get('editable') ?? true,
+      handler: () => {
+        if (!selectId) {
+          return;
+        }
+
+        eventBus?.emit('edit-data-source', selectId);
+      },
+    },
+    {
+      type: 'button',
+      text: '复制并粘贴至当前',
+      icon: markRaw(CopyDocument),
+      handler: ({ dataSourceService }: Services) => {
+        if (!selectId) {
+          return;
+        }
+
+        const ds = dataSourceService.getDataSourceById(selectId);
+        if (!ds) {
+          return;
+        }
+
+        dataSourceService.add(cloneDeep(ds));
+      },
+    },
+    {
+      type: 'button',
+      text: '删除',
+      icon: Delete,
+      handler: () => {
+        if (!selectId) {
+          return;
+        }
+
+        eventBus?.emit('remove-data-source', selectId);
+      },
+    },
+  ];
+
+  const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
+    event.preventDefault();
+
+    if (data.type === 'ds') {
+      menuRef.value?.show(event);
+      if (data.id) {
+        selectId = `${data.id}`;
+      } else {
+        selectId = '';
+      }
+    }
+  };
+
+  const contentMenuHideHandler = () => {
+    selectId = '';
+  };
+
+  return {
+    menuData,
+    nodeContentMenuHandler,
+    contentMenuHideHandler,
+  };
+};

package/src/layouts/sidebar/layer/LayerMenu.vue

@@ -3,37 +3,31 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, ref } from 'vue';
+import { computed, inject, markRaw, useTemplateRef } from 'vue';
 import { Files, Plus } from '@element-plus/icons-vue';
 
 import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import FolderMinusIcon from '@editor/icons/FolderMinusIcon.vue';
-import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
+import type { ComponentGroup, CustomContentMenuFunction, MenuButton, MenuComponent, Services } from '@editor/type';
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 
 defineOptions({
   name: 'MEditorLayerMenu',
 });
 
-const props = withDefaults(
-  defineProps<{
-    layerContentMenu: (MenuButton | MenuComponent)[];
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
-  }>(),
-  {
-    layerContentMenu: () => [],
-    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
-  },
-);
+const props = defineProps<{
+  layerContentMenu: (MenuButton | MenuComponent)[];
+  customContentMenu: CustomContentMenuFunction;
+}>();
 
 const emit = defineEmits<{
   'collapse-all': [];
 }>();
 
 const services = inject<Services>('services');
-const menu = ref<InstanceType<typeof ContentMenu>>();
+const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const node = computed(() => services?.editorService.get('node'));
 const nodes = computed(() => services?.editorService.get('nodes'));
 const componentList = computed(() => services?.componentListService.getList() || []);

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, useTemplateRef } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicScrollbar } from '@tmagic/design';
@@ -55,7 +55,14 @@ import { TMagicScrollbar } from '@tmagic/design';
 import SearchInput from '@editor/components/SearchInput.vue';
 import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
-import type { LayerPanelSlots, MenuButton, MenuComponent, Services, TreeNodeData } from '@editor/type';
+import type {
+  CustomContentMenuFunction,
+  LayerPanelSlots,
+  MenuButton,
+  MenuComponent,
+  Services,
+  TreeNodeData,
+} from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 import LayerNodeTool from './LayerNodeTool.vue';
@@ -74,13 +81,13 @@ defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
   indent?: number;
   nextLevelIndentIncrement?: number;
-  customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+  customContentMenu: CustomContentMenuFunction;
 }>();
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
-const tree = ref<InstanceType<typeof Tree>>();
+const tree = useTemplateRef<InstanceType<typeof Tree>>('tree');
 
 const page = computed(() => editorService?.get('page'));
 const nodeData = computed<TreeNodeData[]>(() => (!page.value ? [] : [page.value]));

package/src/layouts/sidebar/layer/use-click.ts

@@ -1,4 +1,4 @@
-import { computed, type ComputedRef, nextTick, type Ref, ref } from 'vue';
+import { computed, type ComputedRef, nextTick, type Ref, useTemplateRef } from 'vue';
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/core';
@@ -99,7 +99,7 @@ export const useClick = (
   };
 
   // 右键菜单
-  const menu = ref<InstanceType<typeof LayerMenu>>();
+  const menu = useTemplateRef<InstanceType<typeof LayerMenu>>('menu');
 
   return {
     menu,

package/src/layouts/sidebar/layer/use-keybinding.ts

@@ -1,4 +1,4 @@
-import { type Ref, ref, watchEffect } from 'vue';
+import { ref, type ShallowRef, watchEffect } from 'vue';
 
 import Tree from '@editor/components/Tree.vue';
 import type { Services } from '@editor/type';
@@ -6,7 +6,7 @@ import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
 export const useKeybinding = (
   services: Services | undefined,
-  container: Ref<InstanceType<typeof Tree> | undefined>,
+  container: ShallowRef<InstanceType<typeof Tree> | null>,
 ) => {
   const keybindingService = services?.keybindingService;
 

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -1,10 +1,9 @@
 import { computed, ref, watch } from 'vue';
 
 import type { Id, MNode, MPage, MPageFragment } from '@tmagic/core';
-import { getNodePath, isPage, isPageFragment } from '@tmagic/utils';
+import { getNodePath, isPage, isPageFragment, traverseNode } from '@tmagic/utils';
 
-import { LayerNodeStatus, Services } from '@editor/type';
-import { traverseNode } from '@editor/utils';
+import type { LayerNodeStatus, Services } from '@editor/type';
 import { updateStatus } from '@editor/utils/tree';
 
 const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {

package/src/layouts/workspace/Workspace.vue

@@ -4,7 +4,8 @@
 
     <slot name="stage">
       <MagicStage
-        v-if="page"
+        v-if="page && (stageOptions?.render || stageOptions?.runtimeUrl)"
+        :stage-options="stageOptions"
         :disabled-stage-overlay="disabledStageOverlay"
         :stage-content-menu="stageContentMenu"
         :custom-content-menu="customContentMenu"
@@ -18,7 +19,14 @@
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
 
-import type { MenuButton, MenuComponent, Services, WorkspaceSlots } from '@editor/type';
+import type {
+  CustomContentMenuFunction,
+  MenuButton,
+  MenuComponent,
+  Services,
+  StageOptions,
+  WorkspaceSlots,
+} from '@editor/type';
 
 import MagicStage from './viewer/Stage.vue';
 import Breadcrumb from './Breadcrumb.vue';
@@ -33,13 +41,15 @@ withDefaults(
   defineProps<{
     stageContentMenu: (MenuButton | MenuComponent)[];
     disabledStageOverlay?: boolean;
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+    customContentMenu: CustomContentMenuFunction;
   }>(),
   {
     disabledStageOverlay: false,
   },
 );
 
+const stageOptions = inject<StageOptions>('stageOptions');
+
 const services = inject<Services>('services');
 
 const page = computed(() => services?.editorService.get('page'));

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

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicTooltip } from '@tmagic/design';
@@ -39,8 +39,8 @@ const editorService = services?.editorService;
 
 const visible = ref(false);
 const buttonVisible = ref(false);
-const button = ref<HTMLDivElement>();
-const box = ref<InstanceType<typeof FloatingBox>>();
+const button = useTemplateRef<HTMLDivElement>('button');
+const box = useTemplateRef<InstanceType<typeof FloatingBox>>('box');
 
 const stage = computed(() => editorService?.get('stage'));
 const page = computed(() => editorService?.get('page'));

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

@@ -3,6 +3,8 @@
     class="m-editor-stage"
     ref="stageWrap"
     tabindex="-1"
+    v-loading="stageLoading"
+    element-loading-text="Runtime 加载中..."
     :width="stageRect?.width"
     :height="stageRect?.height"
     :wrap-width="stageContainerRect?.width"
@@ -41,7 +43,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch, watchEffect } from 'vue';
+import {
+  computed,
+  inject,
+  markRaw,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  toRaw,
+  useTemplateRef,
+  watch,
+  watchEffect,
+} from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer } from '@tmagic/core';
@@ -50,7 +63,8 @@ import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useStage } from '@editor/hooks/use-stage';
-import { DragType, Layout, type MenuButton, type MenuComponent, type Services, type StageOptions } from '@editor/type';
+import type { CustomContentMenuFunction, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
+import { DragType, Layout } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
 import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
@@ -62,11 +76,12 @@ defineOptions({
   name: 'MEditorStage',
 });
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
+    stageOptions: StageOptions;
     stageContentMenu: (MenuButton | MenuComponent)[];
     disabledStageOverlay?: boolean;
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+    customContentMenu: CustomContentMenuFunction;
   }>(),
   {
     disabledStageOverlay: false,
@@ -77,11 +92,12 @@ let stage: StageCore | null = null;
 let runtime: Runtime | null = null;
 
 const services = inject<Services>('services');
-const stageOptions = inject<StageOptions>('stageOptions');
 
-const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
-const stageContainer = ref<HTMLDivElement>();
-const menu = ref<InstanceType<typeof ViewerMenu>>();
+const stageLoading = computed(() => services?.editorService.get('stageLoading') || false);
+
+const stageWrap = useTemplateRef<InstanceType<typeof ScrollViewer>>('stageWrap');
+const stageContainer = useTemplateRef<HTMLDivElement>('stageContainer');
+const menu = useTemplateRef<InstanceType<typeof ViewerMenu>>('menu');
 
 const nodes = computed(() => services?.editorService.get('nodes') || []);
 const isMultiSelect = computed(() => nodes.value.length > 1);
@@ -96,9 +112,9 @@ watchEffect(() => {
   if (stage || !page.value) return;
 
   if (!stageContainer.value) return;
-  if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
+  if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
 
-  stage = useStage(stageOptions);
+  stage = useStage(props.stageOptions);
 
   stage.on('select', () => {
     stageWrap.value?.container?.focus();
@@ -125,6 +141,7 @@ watchEffect(() => {
 
 onBeforeUnmount(() => {
   stage?.destroy();
+  services?.editorService.set('stage', null);
 });
 
 watch(zoom, (zoom) => {
@@ -132,9 +149,20 @@ watch(zoom, (zoom) => {
   stage.setZoom(zoom);
 });
 
+let timeoutId: NodeJS.Timeout | null = null;
 watch(page, (page) => {
   if (runtime && page) {
     services?.editorService.set('stageLoading', true);
+
+    if (timeoutId) {
+      globalThis.clearTimeout(timeoutId);
+    }
+
+    timeoutId = globalThis.setTimeout(() => {
+      services?.editorService.set('stageLoading', false);
+      timeoutId = null;
+    }, 3000);
+
     runtime.updatePageId?.(page.id);
     nextTick(() => {
       stage?.select(page.id);
@@ -201,7 +229,9 @@ const dropHandler = async (e: DragEvent) => {
   e.preventDefault();
 
   const doc = stage?.renderer?.contentWindow?.document;
-  const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+  const parentEl: HTMLElement | null | undefined = doc?.querySelector(
+    `.${props.stageOptions?.containerHighlightClassName}`,
+  );
 
   let parent: MContainer | undefined | null = page.value;
   const parentId = getIdFromEl()(parentEl);

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

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, useTemplateRef, watch } from 'vue';
 import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
@@ -19,7 +19,7 @@ const services = inject<Services>('services');
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
-const stageOverlay = ref<HTMLDivElement>();
+const stageOverlay = useTemplateRef<HTMLDivElement>('stageOverlay');
 
 const stageOverlayVisible = computed(() => services?.stageOverlayService.get('stageOverlayVisible'));
 const wrapWidth = computed(() => services?.stageOverlayService.get('wrapWidth') || 0);

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

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, ref, watch } from 'vue';
+import { computed, inject, markRaw, ref, useTemplateRef, watch } from 'vue';
 import { Bottom, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
@@ -11,7 +11,7 @@ import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import CenterIcon from '@editor/icons/CenterIcon.vue';
-import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
+import { CustomContentMenuFunction, LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from '@editor/utils/content-menu';
 
 defineOptions({
@@ -22,18 +22,16 @@ const props = withDefaults(
   defineProps<{
     isMultiSelect?: boolean;
     stageContentMenu: (MenuButton | MenuComponent)[];
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+    customContentMenu: CustomContentMenuFunction;
   }>(),
   {
     isMultiSelect: false,
-    stageContentMenu: () => [],
-    customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus,
   },
 );
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
-const menu = ref<InstanceType<typeof ContentMenu>>();
+const menu = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 const canCenter = ref(false);
 
 const node = computed(() => editorService?.get('node'));

package/src/services/dataSource.ts

@@ -4,7 +4,7 @@ import type { Writable } from 'type-fest';
 
 import type { DataSourceSchema, EventOption, Id, MNode, TargetOptions } from '@tmagic/core';
 import { Target, Watcher } from '@tmagic/core';
-import type { FormConfig } from '@tmagic/form';
+import type { ChangeRecord, FormConfig } from '@tmagic/form';
 import { guid, toLine } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
@@ -115,15 +115,22 @@ class DataSource extends BaseService {
     return newConfig;
   }
 
-  public update(config: DataSourceSchema) {
+  public update(config: DataSourceSchema, { changeRecords = [] }: { changeRecords?: ChangeRecord[] } = {}) {
     const dataSources = this.get('dataSources');
 
     const index = dataSources.findIndex((ds) => ds.id === config.id);
-    dataSources[index] = cloneDeep(config);
 
-    this.emit('update', config);
+    const oldConfig = dataSources[index];
+    const newConfig = cloneDeep(config);
 
-    return config;
+    dataSources[index] = newConfig;
+
+    this.emit('update', newConfig, {
+      oldConfig,
+      changeRecords,
+    });
+
+    return newConfig;
   }
 
   public remove(id: string) {

package/src/services/dep.ts

@@ -31,11 +31,29 @@ export interface DepEvents {
   collected: [nodes: MNode[], deep: boolean];
 }
 
+interface State {
+  collecting: boolean;
+}
+
+type StateKey = keyof State;
+
 const idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
 
 class Dep extends BaseService {
+  private state = reactive<State>({
+    collecting: false,
+  });
+
   private watcher = new Watcher({ initialTargets: reactive({}) });
 
+  public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
+    this.state[name] = value;
+  }
+
+  public get<K extends StateKey>(name: K): State[K] {
+    return this.state[name];
+  }
+
   public removeTargets(type: string = DepTargetType.DEFAULT) {
     this.watcher.removeTargets(type);
 
@@ -71,33 +89,40 @@ class Dep extends BaseService {
   }
 
   public collect(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+    this.set('collecting', true);
     this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
       this.collectNode(node, target, depExtendedData, deep);
     });
+    this.set('collecting', false);
 
     this.emit('collected', nodes, deep);
   }
 
   public collectIdle(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+    this.set('collecting', true);
+    let startTask = false;
     this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
-      idleTask.enqueueTask(
-        ({ node, deep, target }) => {
-          this.collectNode(node, target, depExtendedData, deep);
-        },
-        {
-          node,
-          deep,
-          target,
-        },
-      );
+      startTask = true;
+
+      this.enqueueTask(node, target, depExtendedData, deep);
     });
 
-    idleTask.once('finish', () => {
-      this.emit('collected', nodes, deep);
+    return new Promise<void>((resolve) => {
+      if (!startTask) {
+        this.emit('collected', nodes, deep);
+        this.set('collecting', false);
+        resolve();
+        return;
+      }
+      idleTask.once('finish', () => {
+        this.emit('collected', nodes, deep);
+        this.set('collecting', false);
+        resolve();
+      });
     });
   }
 
-  collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
+  public collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
     // 先删除原有依赖，重新收集
     if (isPage(node)) {
       Object.entries(target.deps).forEach(([depKey, dep]) => {
@@ -128,6 +153,10 @@ class Dep extends BaseService {
     return this.watcher.hasSpecifiedTypeTarget(type);
   }
 
+  public clearIdleTasks() {
+    idleTask.clearTasks();
+  }
+
   public on<Name extends keyof DepEvents, Param extends DepEvents[Name]>(
     eventName: Name,
     listener: (...args: Param) => void | Promise<void>,
@@ -145,6 +174,25 @@ class Dep extends BaseService {
   public emit<Name extends keyof DepEvents, Param extends DepEvents[Name]>(eventName: Name, ...args: Param) {
     return super.emit(eventName, ...args);
   }
+
+  private enqueueTask(node: MNode, target: Target, depExtendedData: DepExtendedData, deep: boolean) {
+    idleTask.enqueueTask(
+      ({ node, deep, target }) => {
+        this.collectNode(node, target, depExtendedData, deep);
+      },
+      {
+        node,
+        deep: false,
+        target,
+      },
+    );
+
+    if (deep && Array.isArray(node.items) && node.items.length) {
+      node.items.forEach((item) => {
+        this.enqueueTask(item, target, depExtendedData, deep);
+      });
+    }
+  }
 }
 
 export type DepService = Dep;