fix: 修复emitter未正确卸载的问题(#35)

src/utils/emitter.ts

@@ -1,4 +1,4 @@
-import mitt, { Emitter } from 'mitt'
+import mitt, { Handler, Emitter } from 'mitt'
 
 export const enum EmitterEvents {
   UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE',
@@ -9,4 +9,6 @@ export const enum EmitterEvents {
 
 const emitter: Emitter = mitt()
 
+export type EmitterHandler = Handler
+
 export default emitter

src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue

@@ -195,7 +195,7 @@
 import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
 import { MutationTypes, useStore } from '@/store'
 import { PPTTableElement, TableCell, TableCellStyle, TableTheme } from '@/types/slides'
-import emitter, { EmitterEvents } from '@/utils/emitter'
+import emitter, { EmitterEvents, EmitterHandler } from '@/utils/emitter'
 import { createRandomCode } from '@/utils/common'
 import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -300,14 +300,14 @@ export default defineComponent({
     }
 
     // 监听并更新当前选中的单元格
-    const updateSelectedCells = (cells: string[]) => {
+    const updateSelectedCells: EmitterHandler = (cells: string[]) => {
       selectedCells.value = cells
       updateTextAttrState()
     }
 
-    emitter.on(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells))
+    emitter.on(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, updateSelectedCells)
     onUnmounted(() => {
-      emitter.off(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells))
+      emitter.off(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, updateSelectedCells)
     })
 
     // 设置单元格内容文本样式

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -221,7 +221,7 @@
 import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
 import { MutationTypes, useStore } from '@/store'
 import { PPTTextElement } from '@/types/slides'
-import emitter, { EmitterEvents } from '@/utils/emitter'
+import emitter, { EmitterEvents, EmitterHandler } from '@/utils/emitter'
 import { TextAttrs } from '@/utils/prosemirror/utils'
 import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -361,11 +361,11 @@ export default defineComponent({
     const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10]
 
     // 接收并更新当前光标所在位置的富文本状态
-    const updateRichTextAttrs = (attr: TextAttrs) => richTextAttrs.value = attr
+    const updateRichTextAttrs: EmitterHandler = (attr: TextAttrs) => richTextAttrs.value = attr
 
-    emitter.on(EmitterEvents.UPDATE_TEXT_STATE, attr => updateRichTextAttrs(attr))
+    emitter.on(EmitterEvents.UPDATE_TEXT_STATE, updateRichTextAttrs)
     onUnmounted(() => {
-      emitter.off(EmitterEvents.UPDATE_TEXT_STATE, attr => updateRichTextAttrs(attr))
+      emitter.off(EmitterEvents.UPDATE_TEXT_STATE, updateRichTextAttrs)
     })
 
     // 发射富文本设置命令

src/views/components/element/TableElement/index.vue

@@ -42,7 +42,7 @@
 import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import { MutationTypes, useStore } from '@/store'
 import { PPTTableElement, TableCell } from '@/types/slides'
-import emitter, { EmitterEvents } from '@/utils/emitter'
+import emitter, { EmitterEvents, EmitterHandler } from '@/utils/emitter'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -102,7 +102,7 @@ export default defineComponent({
     const isScaling = ref(false)
     const realHeightCache = ref(-1)
 
-    const scaleElementStateListener = (state: boolean) => {
+    const scaleElementStateListener: EmitterHandler = (state: boolean) => {
       if (handleElementId.value !== props.elementInfo.id) return
 
       isScaling.value = state
@@ -118,9 +118,9 @@ export default defineComponent({
       }
     }
 
-    emitter.on(EmitterEvents.SCALE_ELEMENT_STATE, state => scaleElementStateListener(state))
+    emitter.on(EmitterEvents.SCALE_ELEMENT_STATE, scaleElementStateListener)
     onUnmounted(() => {
-      emitter.off(EmitterEvents.SCALE_ELEMENT_STATE, state => scaleElementStateListener(state))
+      emitter.off(EmitterEvents.SCALE_ELEMENT_STATE, scaleElementStateListener)
     })
 
     const updateTableElementHeight = (entries: ResizeObserverEntry[]) => {

src/views/components/element/TextElement/index.vue

@@ -52,7 +52,7 @@ import { PPTTextElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import { initProsemirrorEditor } from '@/utils/prosemirror/'
 import { getTextAttrs } from '@/utils/prosemirror/utils'
-import emitter, { EmitterEvents } from '@/utils/emitter'
+import emitter, { EmitterEvents, EmitterHandler } from '@/utils/emitter'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 import { alignmentCommand } from '@/utils/prosemirror/commands/setTextAlign'
 import { toggleList } from '@/utils/prosemirror/commands/toggleList'
@@ -109,7 +109,7 @@ export default defineComponent({
 
     // 监听文本元素的尺寸变化，当高度变化时，更新高度到vuex
     // 如果高度变化时正处在缩放操作中，则等待缩放操作结束后再更新
-    const scaleElementStateListener = (state: boolean) => {
+    const scaleElementStateListener: EmitterHandler = (state: boolean) => {
       if (handleElementId.value !== props.elementInfo.id) return
 
       isScaling.value = state
@@ -123,9 +123,9 @@ export default defineComponent({
       }
     }
 
-    emitter.on(EmitterEvents.SCALE_ELEMENT_STATE, state => scaleElementStateListener(state))
+    emitter.on(EmitterEvents.SCALE_ELEMENT_STATE, scaleElementStateListener)
     onUnmounted(() => {
-      emitter.off(EmitterEvents.SCALE_ELEMENT_STATE, state => scaleElementStateListener(state))
+      emitter.off(EmitterEvents.SCALE_ELEMENT_STATE, scaleElementStateListener)
     })
 
     const updateTextElementHeight = (entries: ResizeObserverEntry[]) => {
@@ -220,7 +220,7 @@ export default defineComponent({
     
     // 执行富文本命令（可以是一个或多个）
     // 部分命令在执行前先判断当前选区是否为空，如果选区为空先进行全选操作
-    const execCommand = (payload: CommandPayload | CommandPayload[]) => {
+    const execCommand: EmitterHandler = (payload: CommandPayload | CommandPayload[]) => {
       if (handleElementId.value !== props.elementInfo.id) return
 
       const commands = ('command' in payload) ? [payload] : payload
@@ -310,9 +310,9 @@ export default defineComponent({
       handleClick()
     }
 
-    emitter.on(EmitterEvents.EXEC_TEXT_COMMAND, payload => execCommand(payload))
+    emitter.on(EmitterEvents.EXEC_TEXT_COMMAND, execCommand)
     onUnmounted(() => {
-      emitter.off(EmitterEvents.EXEC_TEXT_COMMAND, payload => execCommand(payload))
+      emitter.off(EmitterEvents.EXEC_TEXT_COMMAND, execCommand)
     })
 
     return {