@tmagic/editor 1.5.11 → 1.5.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.11",
+  "version": "1.5.13",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/form": "1.5.11",
-    "@tmagic/design": "1.5.11",
-    "@tmagic/utils": "1.5.11",
-    "@tmagic/stage": "1.5.11",
-    "@tmagic/table": "1.5.11"
+    "@tmagic/design": "1.5.13",
+    "@tmagic/stage": "1.5.13",
+    "@tmagic/form": "1.5.13",
+    "@tmagic/table": "1.5.13",
+    "@tmagic/utils": "1.5.13"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -76,7 +76,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.11"
+    "@tmagic/core": "1.5.13"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/CodeBlockEditor.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, Ref, ref, useTemplateRef } from 'vue';
+import { computed, inject, nextTick, Ref, ref, useTemplateRef, watch } from 'vue';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
@@ -95,6 +95,8 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   submit: [values: CodeBlockContent, eventData: ContainerChangeEventData];
+  close: [];
+  open: [];
 }>();
 
 const { codeBlockService, uiService } = useServices();
@@ -261,6 +263,16 @@ const closedHandler = () => {
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
 
+watch(boxVisible, (visible) => {
+  nextTick(() => {
+    if (!visible) {
+      emit('close');
+    } else {
+      emit('open');
+    }
+  });
+});
+
 defineExpose({
   async show() {
     calcBoxPosition();

package/src/components/ContentMenu.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, type Ref, ref, useTemplateRef } from 'vue';
 
 import { useZIndex } from '@tmagic/design';
 
@@ -73,7 +73,7 @@ const menuEl = useTemplateRef<HTMLDivElement>('menu');
 const buttonRefs = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
 const subMenuRef = useTemplateRef<any>('subMenu');
 const visible = ref(false);
-const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
+const subMenuData: Ref<(MenuButton | MenuComponent)[]> = ref<(MenuButton | MenuComponent)[]>([]);
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);
 

package/src/initService.ts

@@ -502,6 +502,7 @@ export const initServiceEvents = (
       isModifyField =
         changeRecord.propPath === 'fields' ||
         /fields.(\d)+.name/.test(changeRecord.propPath) ||
+        /fields.(\d)+.defaultValue/.test(changeRecord.propPath) ||
         /fields.(\d)+$/.test(changeRecord.propPath);
 
       isModifyMock = changeRecord.propPath === 'mocks';
@@ -523,25 +524,35 @@ export const initServiceEvents = (
       if (Array.isArray(root?.items)) {
         depService.clearIdleTasks();
 
-        removeDataSourceTarget(config.id);
-        initDataSourceDepTarget(config);
-
         let collectIdlePromises: Promise<void[]>[] = [];
         if (isModifyField) {
+          depService.removeTarget(config.id, DepTargetType.DATA_SOURCE);
+          depService.removeTarget(config.id, DepTargetType.DATA_SOURCE_COND);
+
+          depService.addTarget(createDataSourceTarget(config, reactive({})));
+          depService.addTarget(createDataSourceCondTarget(config, reactive({})));
+
           collectIdlePromises = [
             collectIdle(root.items, true, DepTargetType.DATA_SOURCE),
             collectIdle(root.items, true, DepTargetType.DATA_SOURCE_COND),
           ];
         } else if (isModifyMock) {
+          depService.removeTarget(config.id, DepTargetType.DATA_SOURCE);
+
+          depService.addTarget(createDataSourceTarget(config, reactive({})));
+
           collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE)];
         } else if (isModifyMethod) {
+          depService.removeTarget(config.id, DepTargetType.DATA_SOURCE_METHOD);
+
+          depService.addTarget(createDataSourceMethodTarget(config, reactive({})));
+
           collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE_METHOD)];
         }
-        Promise.all(collectIdlePromises).then(() => {
-          updateDataSourceSchema();
-          updateDsData();
-          updateStageNodes(root.items);
-        });
+        Promise.all(collectIdlePromises)
+          .then(() => updateDataSourceSchema())
+          .then(() => updateDsData())
+          .then(() => updateStageNodes(root.items));
       }
     } else if (root?.dataSources) {
       updateDsData();
@@ -616,20 +627,31 @@ export const initServiceEvents = (
       }
       root.dataSourceCondDeps[target.id] = target.deps;
     }
+
+    if (target.type === DepTargetType.DATA_SOURCE_METHOD) {
+      if (!root.dataSourceMethodDeps) {
+        root.dataSourceMethodDeps = {};
+      }
+      root.dataSourceMethodDeps[target.id] = target.deps;
+    }
   };
 
-  const targetRemoveHandler = (id: string | number) => {
+  const targetRemoveHandler = (id: string | number, type: DepTargetType) => {
     const root = editorService.get('root');
 
     if (!root) return;
 
-    if (root.dataSourceDeps) {
+    if (root.dataSourceDeps && type === DepTargetType.DATA_SOURCE) {
       delete root.dataSourceDeps[id];
     }
 
-    if (root.dataSourceCondDeps) {
+    if (root.dataSourceCondDeps && type === DepTargetType.DATA_SOURCE_COND) {
       delete root.dataSourceCondDeps[id];
     }
+
+    if (root.dataSourceMethodDeps && type === DepTargetType.DATA_SOURCE_METHOD) {
+      delete root.dataSourceMethodDeps[id];
+    }
   };
 
   depService.on('add-target', targetAddHandler);

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

@@ -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,8 @@
     :disabled="!editable"
     :content="codeConfig"
     @submit="submitCodeBlockHandler"
+    @close="editDialogCloseHandler"
+    @open="editDialogOpenHandler"
   ></CodeBlockEditor>
 
   <Teleport to="body">
@@ -87,7 +89,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 +102,22 @@ eventBus?.on('edit-code', (id: string) => {
   editCode(id);
 });
 
+const editDialogOpenHandler = () => {
+  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,8 @@
     :values="dataSourceValues"
     :title="dialogTitle"
     @submit="submitDataSourceHandler"
+    @close="editDialogCloseHandler"
+    @open="editDialogOpenHandler"
   ></DataSourceConfigPanel>
 
   <Teleport to="body">
@@ -93,6 +95,22 @@ const { dataSourceService } = useServices();
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
   useDataSourceEdit(dataSourceService);
 
+const editDialogOpenHandler = (id: string) => {
+  if (dataSourceList.value) {
+    for (const [statusId, status] of dataSourceList.value.nodeStatusMap.entries()) {
+      status.selected = statusId === id;
+    }
+  }
+};
+
+const editDialogCloseHandler = () => {
+  if (dataSourceList.value) {
+    for (const [, status] of dataSourceList.value.nodeStatusMap.entries()) {
+      status.selected = false;
+    }
+  }
+};
+
 const datasourceTypeList = computed(() =>
   [
     { text: '基础', type: 'base' },

package/src/services/dep.ts

@@ -28,7 +28,7 @@ import BaseService from './BaseService';
 
 export interface DepEvents {
   'add-target': [target: Target];
-  'remove-target': [id: string | number];
+  'remove-target': [id: string | number, type: string | DepTargetType];
   collected: [nodes: MNode[], deep: boolean];
   'ds-collected': [nodes: MNode[], deep: boolean];
 }
@@ -77,7 +77,7 @@ class Dep extends BaseService {
     if (!targets) return;
 
     for (const target of Object.values(targets)) {
-      this.emit('remove-target', target.id);
+      this.emit('remove-target', target.id, type);
     }
   }
 
@@ -96,7 +96,7 @@ class Dep extends BaseService {
 
   public removeTarget(id: Id, type: string = DepTargetType.DEFAULT) {
     this.watcher.removeTarget(id, type);
-    this.emit('remove-target', id);
+    this.emit('remove-target', id, type);
   }
 
   public clearTargets() {

package/src/services/events.ts

@@ -57,7 +57,7 @@ class Events extends BaseService {
   }
 
   public getMethod(type: string) {
-    return cloneDeep(methodMap[toLine(type)]);
+    return cloneDeep(methodMap[toLine(type)]) || [];
   }
 
   public resetState() {