@tmagic/editor 1.5.12 → 1.5.14

package/src/initService.ts

@@ -269,13 +269,13 @@ export const initServiceEvents = (
     }
   };
 
-  const dsDepCollectedHandler = async () => {
+  const dsDepCollectedHandler = () => {
     const root = editorService.get('root');
-    const app = await getTMagicApp();
-
-    if (root && app?.dsl) {
-      app.dsl.dataSourceDeps = root.dataSourceDeps;
-    }
+    getTMagicApp()?.then((app?: TMagicCore) => {
+      if (root && app?.dsl) {
+        app.dsl.dataSourceDeps = root.dataSourceDeps;
+      }
+    });
   };
 
   const collectIdle = (nodes: MComponent[], deep: boolean, type?: DepTargetType) =>
@@ -317,7 +317,7 @@ export const initServiceEvents = (
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
 
-  const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
+  const rootChangeHandler = (value: MApp | null, preValue?: MApp | null) => {
     if (!value) return;
 
     value.codeBlocks = value.codeBlocks || {};
@@ -347,39 +347,40 @@ export const initServiceEvents = (
       delete value.dataSourceCondDeps;
     }
 
-    const nodeId = editorService.get('node')?.id || props.defaultSelected;
-    let node;
-    if (nodeId) {
-      node = editorService.getNodeById(nodeId);
-    }
+    const handler = async () => {
+      const nodeId = editorService.get('node')?.id || props.defaultSelected;
+      let node;
+      if (nodeId) {
+        node = editorService.getNodeById(nodeId);
+      }
+      if (node && node !== value) {
+        await editorService.select(node.id);
+      } else if (value.items?.length) {
+        await editorService.select(value.items[0]);
+      } else if (value.id) {
+        editorService.set('nodes', [value]);
+        editorService.set('parent', null);
+        editorService.set('page', null);
+      }
 
-    if (node && node !== value) {
-      await editorService.select(node.id);
-    } else if (value.items?.length) {
-      await editorService.select(value.items[0]);
-    } else if (value.id) {
-      editorService.set('nodes', [value]);
-      editorService.set('parent', null);
-      editorService.set('page', null);
-    }
+      if (toRaw(value) !== toRaw(preValue)) {
+        emit('update:modelValue', value);
+      }
+    };
 
-    if (toRaw(value) !== toRaw(preValue)) {
-      emit('update:modelValue', value);
-    }
+    handler();
   };
 
   // 新增节点，收集依赖
-  const nodeAddHandler = async (nodes: MComponent[]) => {
-    await collectIdle(nodes, true);
-
-    updateStageNodes(nodes);
+  const nodeAddHandler = (nodes: MComponent[]) => {
+    collectIdle(nodes, true).then(() => {
+      updateStageNodes(nodes);
+    });
   };
 
   // 节点更新，收集依赖
   // 仅当修改到数据源相关的才收集
-  const nodeUpdateHandler = async (
-    data: { newNode: MComponent; oldNode: MComponent; changeRecords?: ChangeRecord[] }[],
-  ) => {
+  const nodeUpdateHandler = (data: { newNode: MComponent; oldNode: MComponent; changeRecords?: ChangeRecord[] }[]) => {
     const needRecollectNodes: MComponent[] = [];
     const normalNodes: MComponent[] = [];
     for (const { newNode, oldNode, changeRecords } of data) {
@@ -424,9 +425,12 @@ export const initServiceEvents = (
 
     if (needRecollectNodes.length) {
       // 有数据源依赖，需要等依赖重新收集完才更新stage
-      await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE);
-      await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
-      updateStageNodes(needRecollectNodes);
+      const handler = async () => {
+        await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE);
+        await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
+        updateStageNodes(needRecollectNodes);
+      };
+      handler();
     } else {
       updateStageNodes(normalNodes);
       // 在上面判断是否需要收集数据源依赖中已经更新stage
@@ -443,9 +447,10 @@ export const initServiceEvents = (
   };
 
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
-  const historyChangeHandler = async (page: MPage | MPageFragment) => {
-    await collectIdle([page], true);
-    updateStageNode(page);
+  const historyChangeHandler = (page: MPage | MPageFragment) => {
+    collectIdle([page], true).then(() => {
+      updateStageNode(page);
+    });
   };
 
   editorService.on('history-change', historyChangeHandler);
@@ -454,27 +459,28 @@ export const initServiceEvents = (
   editorService.on('remove', nodeRemoveHandler);
   editorService.on('update', nodeUpdateHandler);
 
-  const dataSourceAddHandler = async (config: DataSourceSchema) => {
-    initDataSourceDepTarget(config);
-    const app = await getTMagicApp();
+  const dataSourceAddHandler = (config: DataSourceSchema) => {
+    const handler = async () => {
+      initDataSourceDepTarget(config);
+      const app = await getTMagicApp();
 
-    if (!app?.dataSourceManager) {
-      return;
-    }
+      if (!app?.dataSourceManager) {
+        return;
+      }
 
-    app.dataSourceManager.addDataSource(config);
+      app.dataSourceManager.addDataSource(config);
 
-    const newDs = app.dataSourceManager.get(config.id);
+      const newDs = app.dataSourceManager.get(config.id);
 
-    if (newDs) {
-      app.dataSourceManager.init(newDs);
-    }
+      if (newDs) {
+        app.dataSourceManager.init(newDs);
+      }
+    };
+
+    handler();
   };
 
-  const dataSourceUpdateHandler = async (
-    config: DataSourceSchema,
-    { changeRecords }: { changeRecords: ChangeRecord[] },
-  ) => {
+  const dataSourceUpdateHandler = (config: DataSourceSchema, { changeRecords }: { changeRecords: ChangeRecord[] }) => {
     const updateDsData = async () => {
       const app = await getTMagicApp();
 
@@ -565,29 +571,33 @@ export const initServiceEvents = (
     depService.removeTarget(id, DepTargetType.DATA_SOURCE_METHOD);
   };
 
-  const dataSourceRemoveHandler = async (id: string) => {
+  const dataSourceRemoveHandler = (id: string) => {
     const root = editorService.get('root');
 
     if (!root) {
       return;
     }
 
-    const nodeIds = Object.keys(root.dataSourceDeps?.[id] || {});
-    const nodes = getNodes(nodeIds, root.items);
+    const handler = async () => {
+      const nodeIds = Object.keys(root.dataSourceDeps?.[id] || {});
+      const nodes = getNodes(nodeIds, root.items);
 
-    await Promise.all([
-      collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
-      collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
-      collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD),
-    ]);
+      await Promise.all([
+        collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
+        collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
+        collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD),
+      ]);
 
-    updateDataSourceSchema();
+      updateDataSourceSchema();
 
-    const app = await getTMagicApp();
-    app?.dataSourceManager?.removeDataSource(id);
+      const app = await getTMagicApp();
+      app?.dataSourceManager?.removeDataSource(id);
+
+      updateStageNodes(nodes);
+      removeDataSourceTarget(id);
+    };
 
-    updateStageNodes(nodes);
-    removeDataSourceTarget(id);
+    handler();
   };
 
   dataSourceService.on('add', dataSourceAddHandler);

package/src/layouts/Framework.vue

@@ -91,7 +91,7 @@ defineOptions({
 defineProps<{
   disabledPageFragment: boolean;
   pageBarSortOptions?: PageBarSortOptions;
-  pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
+  pageFilterFunction?: (_page: MPage | MPageFragment, _keyword: string) => boolean;
 }>();
 
 const codeOptions = inject('codeOptions', {});

package/src/layouts/NavMenu.vue

@@ -69,7 +69,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         type: 'button',
         className: 'delete',
         icon: markRaw(Delete),
-        tooltip: `刪除(Delete)`,
+        tooltip: '刪除(Delete)',
         disabled: () => editorService.get('node')?.type === NodeType.PAGE,
         handler: () => {
           const node = editorService.get('node');

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

@@ -91,7 +91,7 @@ const props = withDefaults(
   defineProps<{
     disabledPageFragment: boolean;
     pageBarSortOptions?: PageBarSortOptions;
-    filterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
+    filterFunction?: (_page: MPage | MPageFragment, _keyword: string) => boolean;
   }>(),
   {
     filterFunction: (page, keyword) => page.name?.includes(keyword) || `${page.id}`.includes(keyword),

package/src/layouts/props-panel/FormPanel.vue

@@ -56,7 +56,7 @@ import { useServices } from '@editor/hooks/use-services';
 import CodeEditor from '../CodeEditor.vue';
 
 defineSlots<{
-  'props-form-panel-header'(props: {}): any;
+  'props-form-panel-header'(_props: {}): any;
 }>();
 
 defineOptions({
@@ -70,7 +70,7 @@ const props = defineProps<{
   labelWidth?: string;
   codeValueKey?: string;
   labelPosition?: string;
-  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
 const emit = defineEmits<{

package/src/layouts/props-panel/PropsPanel.vue

@@ -82,7 +82,7 @@ defineOptions({
 
 defineProps<{
   disabledShowSrc?: boolean;
-  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
 const emit = defineEmits<{

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -80,7 +80,7 @@ const collapseValue = computed(() =>
     .map((x, i) => `${i}`),
 );
 
-let timeout: NodeJS.Timeout | undefined;
+let timeout: ReturnType<typeof setTimeout> | undefined;
 let clientX: number;
 let clientY: number;
 

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -55,7 +55,7 @@ defineOptions({
 const props = defineProps<{
   indent?: number;
   nextLevelIndentIncrement?: number;
-  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+  customError?: (_id: Id, _errorType: CodeDeleteErrorType) => any;
 }>();
 
 const emit = defineEmits<{
@@ -173,6 +173,7 @@ const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
 };
 
 defineExpose({
+  nodeStatusMap,
   filter: filterTextChangeHandler,
   deleteCode,
 });

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -32,6 +32,7 @@
     :disabled="!editable"
     :content="codeConfig"
     @submit="submitCodeBlockHandler"
+    @close="editDialogCloseHandler"
   ></CodeBlockEditor>
 
   <Teleport to="body">
@@ -46,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useTemplateRef } from 'vue';
+import { computed, inject, useTemplateRef, watch } from 'vue';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
@@ -77,7 +78,7 @@ defineOptions({
 const props = defineProps<{
   indent?: number;
   nextLevelIndentIncrement?: number;
-  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
+  customError?: (_id: Id, _errorType: CodeDeleteErrorType) => any;
   customContentMenu: CustomContentMenuFunction;
 }>();
 
@@ -87,7 +88,7 @@ const { codeBlockService } = useServices();
 
 const editable = computed(() => codeBlockService.getEditStatus());
 
-const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
+const { codeId, codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
   useCodeBlockEdit(codeBlockService);
 
 const codeBlockListRef = useTemplateRef<InstanceType<typeof CodeBlockList>>('codeBlockList');
@@ -100,6 +101,22 @@ eventBus?.on('edit-code', (id: string) => {
   editCode(id);
 });
 
+watch(codeId, () => {
+  if (codeBlockListRef.value) {
+    for (const [statusId, status] of codeBlockListRef.value.nodeStatusMap.entries()) {
+      status.selected = statusId === codeId.value;
+    }
+  }
+});
+
+const editDialogCloseHandler = () => {
+  if (codeBlockListRef.value) {
+    for (const [, status] of codeBlockListRef.value.nodeStatusMap.entries()) {
+      status.selected = false;
+    }
+  }
+};
+
 const {
   nodeContentMenuHandler,
   menuData: contentMenuData,

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, Ref, ref, watchEffect } from 'vue';
+import { inject, nextTick, Ref, ref, watch, watchEffect } from 'vue';
 
 import type { DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
@@ -48,6 +48,8 @@ const width = defineModel<number>('width', { default: 670 });
 
 const emit = defineEmits<{
   submit: [v: any, eventData: ContainerChangeEventData];
+  close: [];
+  open: [id: string];
 }>();
 
 const { uiService, dataSourceService } = useServices();
@@ -73,6 +75,16 @@ const errorHandler = (error: any) => {
   tMagicMessage.error(error.message);
 };
 
+watch(boxVisible, (visible) => {
+  nextTick(() => {
+    if (!visible) {
+      emit('close');
+    } else if (initValues.value?.id) {
+      emit('open', initValues.value.id);
+    }
+  });
+});
+
 defineExpose({
   show() {
     calcBoxPosition();

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -178,6 +178,7 @@ const nodeContentMenuHandler = (event: MouseEvent, data: TreeNodeData) => {
 };
 
 defineExpose({
+  nodeStatusMap,
   filter: filterTextChangeHandler,
 });
 </script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -45,6 +45,7 @@
     :values="dataSourceValues"
     :title="dialogTitle"
     @submit="submitDataSourceHandler"
+    @close="editDialogCloseHandler"
   ></DataSourceConfigPanel>
 
   <Teleport to="body">
@@ -59,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { computed, inject, useTemplateRef, watch } from 'vue';
 import { mergeWith } from 'lodash-es';
 
 import { TMagicButton, tMagicMessageBox, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
@@ -93,6 +94,22 @@ const { dataSourceService } = useServices();
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
   useDataSourceEdit(dataSourceService);
 
+const editDialogCloseHandler = () => {
+  if (dataSourceListRef.value) {
+    for (const [, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
+      status.selected = false;
+    }
+  }
+};
+
+watch(dataSourceValues, (dataSourceValues) => {
+  if (dataSourceListRef.value && dataSourceValues.id) {
+    for (const [statusId, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
+      status.selected = statusId === dataSourceValues.id;
+    }
+  }
+});
+
 const datasourceTypeList = computed(() =>
   [
     { text: '基础', type: 'base' },
@@ -130,10 +147,10 @@ const removeHandler = async (id: string) => {
   dataSourceService.remove(id);
 };
 
-const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
+const dataSourceListRef = useTemplateRef<InstanceType<typeof DataSourceList>>('dataSourceList');
 
 const filterTextChangeHandler = (val: string) => {
-  dataSourceList.value?.filter(val);
+  dataSourceListRef.value?.filter(val);
 };
 
 eventBus?.on('edit-data-source', (id: string) => {

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

@@ -149,7 +149,7 @@ watch(zoom, (zoom) => {
   stage.setZoom(zoom);
 });
 
-let timeoutId: NodeJS.Timeout | null = null;
+let timeoutId: ReturnType<typeof setTimeout> | null = null;
 watch(page, (page) => {
   if (runtime && page) {
     editorService.set('stageLoading', true);

package/src/services/BaseService.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *

package/src/services/editor.ts

@@ -1088,10 +1088,11 @@ class Editor extends BaseService {
     this.isHistoryStateChange = true;
     await this.update(value.data);
     this.set('modifiedNodeIds', value.modifiedNodeIds);
-    setTimeout(async () => {
+    setTimeout(() => {
       if (!value.nodeId) return;
-      await this.select(value.nodeId);
-      this.get('stage')?.select(value.nodeId);
+      this.select(value.nodeId).then(() => {
+        this.get('stage')?.select(value.nodeId);
+      });
     }, 0);
     this.emit('history-change', value.data);
   }

package/src/type.ts

@@ -65,6 +65,15 @@ import type { StageOverlayService } from './services/stageOverlay';
 import type { StorageService } from './services/storage';
 import type { UiService } from './services/ui';
 import type { UndoRedo } from './utils/undo-redo';
+
+export type EditorSlots = FrameworkSlots &
+  WorkspaceSlots &
+  SidebarSlots &
+  PropsPanelSlots & {
+    workspace(props: { editorService: EditorService }): any;
+    'workspace-content'(props: { editorService: EditorService }): any;
+  };
+
 export interface FrameworkSlots {
   header(props: {}): any;
   nav(props: {}): any;

package/src/utils/props.ts

@@ -179,13 +179,15 @@ export const fillConfig = (config: FormConfig = [], labelWidth = '80px'): FormCo
             append: {
               type: 'button',
               text: '复制',
-              handler: async (vm, { model }) => {
-                try {
-                  await navigator.clipboard.writeText(`${model.id}`);
-                  tMagicMessage.success('已复制');
-                } catch (err) {
-                  tMagicMessage.error('复制失败');
-                }
+              handler: (vm, { model }) => {
+                navigator.clipboard
+                  .writeText(`${model.id}`)
+                  .then(() => {
+                    tMagicMessage.success('已复制');
+                  })
+                  .catch(() => {
+                    tMagicMessage.error('复制失败');
+                  });
               },
             },
           },