fix(editor): 组件销毁时移除service的时间监听

Tencent · Dec 13, 2022 · cfc57f1 · cfc57f1
1 parent 841b75e
commit cfc57f1
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 11 deletions.
diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
@@ -227,7 +227,7 @@ export default defineComponent({
   emits: ['props-panel-mounted', 'update:modelValue'],
 
   setup(props, { emit }) {
-    editorService.on('root-change', (value, preValue) => {
+    const rootChangeHandler = (value: MApp, preValue?: MApp | null) => {
       const nodeId = editorService.get<MNode | null>('node')?.id || props.defaultSelected;
       let node;
       if (nodeId) {
@@ -247,7 +247,9 @@ export default defineComponent({
       if (toRaw(value) !== toRaw(preValue)) {
         emit('update:modelValue', value);
       }
-    });
+    };
+
+    editorService.on('root-change', rootChangeHandler);
 
     // 初始值变化，重新设置节点信息
     watch(
@@ -326,6 +328,8 @@ export default defineComponent({
       uiService.resetState();
       componentListService.resetState();
       codeBlockService.resetState();
+
+      editorService.off('root-change', rootChangeHandler);
     });
 
     const services: Services = {

diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup name="MEditorPropsPanel">
-import { computed, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
 import type { FormValue } from '@tmagic/form';
@@ -56,6 +56,10 @@ onMounted(() => {
   emit('mounted', internalInstance);
 });
 
+onUnmounted(() => {
+  services?.propsService.off('props-configs-change', init);
+});
+
 watchEffect(() => {
   if (configForm.value && stage.value) {
     configForm.value.formState.stage = stage.value;

diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@@ -104,12 +104,6 @@ const filterText = ref('');
 // 默认展开节点
 const defaultExpandedKeys = computed(() => (selectedIds.value.length > 0 ? selectedIds.value : []));
 
-editorService?.on('remove', () => {
-  setTimeout(() => {
-    tree.value?.getNode(editorService.get('node').id)?.updateChildren();
-  }, 0);
-});
-
 // 触发画布单选
 const select = async (data: MNode) => {
   if (!data.id) {
@@ -273,9 +267,17 @@ const mouseleaveHandler = () => {
   isMultiSelectStatus.value = false;
 };
 
+const editorServiceRemoveHandler = () => {
+  setTimeout(() => {
+    tree.value?.getNode(editorService?.get('node').id)?.updateChildren();
+  }, 0);
+};
+
 let keycon: KeyController;
 
 onMounted(() => {
+  editorService?.on('remove', editorServiceRemoveHandler);
+
   keycon = new KeyController(tree.value?.$el);
   const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
   const ctrl = isMac ? 'meta' : 'ctrl';
@@ -293,6 +295,8 @@ onMounted(() => {
 
 onUnmounted(() => {
   keycon.destroy();
+
+  editorService?.off('remove', editorServiceRemoveHandler);
 });
 
 // 鼠标是否按下标志，用于高亮状态互斥

diff --git a/packages/editor/src/services/BaseService.ts b/packages/editor/src/services/BaseService.ts
@@ -170,8 +170,12 @@ export default class extends EventEmitter {
   }
 
   public removeAllPlugins() {
-    this.pluginOptionsList = {};
-    this.middleware = {};
+    Object.keys(this.pluginOptionsList).forEach((key) => {
+      this.pluginOptionsList[key] = [];
+    });
+    Object.keys(this.middleware).forEach((key) => {
+      this.middleware[key] = [];
+    });
   }
 
   private async doTask() {