From 443607170a505495e5cbb3261654fc6ddb5c717a Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Wed, 9 Jun 2021 17:21:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=E5=AF=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E7=8A=B6=E6=80=81=E5=92=8C=E8=A1=A8=E6=A0=BC=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=8A=B6=E6=80=81=E7=9A=84=E7=9B=91=E5=90=AC/?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=9C=BA=E5=88=B6=E7=94=B1mitt=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BAvuex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/constants.ts                        |  2 ++
 src/store/mutations.ts                        | 16 ++++++++--
 src/store/state.ts                            |  5 +++
 src/utils/emitter.ts                          |  2 --
 src/utils/prosemirror/utils.ts                | 20 +++++++++++-
 .../ElementStylePanel/TableStylePanel.vue     | 17 ++--------
 .../ElementStylePanel/TextStylePanel.vue      | 32 ++-----------------
 .../components/element/TableElement/index.vue |  2 +-
 .../components/element/TextElement/index.vue  |  4 +--
 9 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/src/store/constants.ts b/src/store/constants.ts
index 2982f6ad..066d28da 100644
--- a/src/store/constants.ts
+++ b/src/store/constants.ts
@@ -14,6 +14,8 @@ export const enum MutationTypes {
   SET_AVAILABLE_FONTS = 'setAvailableFonts',
   SET_TOOLBAR_STATE = 'setToolbarState',
   SET_CLIPING_IMAGE_ELEMENT_ID = 'setClipingImageElementId',
+  SET_RICHTEXT_ATTRS = 'setRichTextAttrs',
+  SET_SELECTED_TABLE_CELLS = 'setSelectedTableCells',
 
   // slides
   SET_THEME = 'setTheme',
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index d4d8119d..4eebd920 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -6,6 +6,8 @@ import { Slide, PPTElement, SlideTheme } from '@/types/slides'
 import { CreatingElement } from '@/types/edit'
 import { SYS_FONTS } from '@/configs/font'
 import { isSupportFont } from '@/utils/font'
+import { ToolbarState } from '@/types/toolbar'
+import { TextAttrs } from '@/utils/prosemirror/utils'
 
 interface RemoveElementPropData {
   id: string;
@@ -68,14 +70,22 @@ export const mutations: MutationTree<State> = {
     state.availableFonts = SYS_FONTS.filter(font => isSupportFont(font.value))
   },
 
-  [MutationTypes.SET_TOOLBAR_STATE](state, type) {
-    state.toolbarState = type
+  [MutationTypes.SET_TOOLBAR_STATE](state, toolbarState: ToolbarState) {
+    state.toolbarState = toolbarState
   },
 
-  [MutationTypes.SET_CLIPING_IMAGE_ELEMENT_ID](state, elId) {
+  [MutationTypes.SET_CLIPING_IMAGE_ELEMENT_ID](state, elId: string) {
     state.clipingImageElementId = elId
   },
 
+  [MutationTypes.SET_RICHTEXT_ATTRS](state, attrs: TextAttrs) {
+    state.richTextAttrs = attrs
+  },
+
+  [MutationTypes.SET_SELECTED_TABLE_CELLS](state, cells: string[]) {
+    state.selectedTableCells = cells
+  },
+
   // slides
 
   [MutationTypes.SET_THEME](state, themeProps: Partial<SlideTheme>) {
diff --git a/src/store/state.ts b/src/store/state.ts
index bc0ae9eb..d617c2bb 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -4,6 +4,7 @@ import { ToolbarState } from '@/types/toolbar'
 import { slides } from '@/mocks/slides'
 import { theme } from '@/mocks/theme'
 import { SYS_FONTS } from '@/configs/font'
+import { TextAttrs, defaultRichTextAttrs } from '@/utils/prosemirror/utils'
 
 export interface State {
   activeElementIdList: string[];
@@ -29,6 +30,8 @@ export interface State {
   shiftKeyState: boolean;
   screening: boolean;
   clipingImageElementId: string;
+  richTextAttrs: TextAttrs;
+  selectedTableCells: string[];
 }
 
 export const state: State = {
@@ -55,4 +58,6 @@ export const state: State = {
   shiftKeyState: false, // shift键按下状态
   screening: false, // 是否进入放映状态
   clipingImageElementId: '', // 当前正在裁剪的图片ID  
+  richTextAttrs: defaultRichTextAttrs, // 富文本状态
+  selectedTableCells: [], // 选中的表格单元格
 }
\ No newline at end of file
diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts
index 618868c9..2ddd8e8f 100644
--- a/src/utils/emitter.ts
+++ b/src/utils/emitter.ts
@@ -1,9 +1,7 @@
 import mitt, { Handler, Emitter } from 'mitt'
 
 export const enum EmitterEvents {
-  UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE',
   EXEC_TEXT_COMMAND = 'EXEC_TEXT_COMMAND',
-  UPDATE_TABLE_SELECTED_CELL = 'UPDATE_TABLE_SELECTED_CELL',
   SCALE_ELEMENT_STATE = 'SCALE_ELEMENT_STATE',
 }
 
diff --git a/src/utils/prosemirror/utils.ts b/src/utils/prosemirror/utils.ts
index 4a5ac2c6..41ec6939 100644
--- a/src/utils/prosemirror/utils.ts
+++ b/src/utils/prosemirror/utils.ts
@@ -112,4 +112,22 @@ export const getTextAttrs = (view: EditorView) => {
   }
 }
 
-export type TextAttrs = ReturnType<typeof getTextAttrs>
\ No newline at end of file
+export type TextAttrs = ReturnType<typeof getTextAttrs>
+
+export const defaultRichTextAttrs: TextAttrs = {
+  bold: false,
+  em: false,
+  underline: false,
+  strikethrough: false,
+  superscript: false,
+  subscript: false,
+  code: false,
+  color: '#000',
+  backcolor: '#000',
+  fontsize: '20px',
+  fontname: '微软雅黑',
+  align: 'left',
+  bulletList: false,
+  orderedList: false,
+  blockquote: false,
+}
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index 8c693154..81f6ba59 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -192,10 +192,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { MutationTypes, useStore } from '@/store'
 import { PPTTableElement, TableCell, TableCellStyle, TableTheme } from '@/types/slides'
-import emitter, { EmitterEvents, EmitterHandler } from '@/utils/emitter'
 import { createRandomCode } from '@/utils/common'
 import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -216,6 +215,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const handleElement = computed<PPTTableElement>(() => store.getters.handleElement)
+    const selectedCells = computed(() => store.state.selectedTableCells)
     
     const availableFonts = computed(() => store.state.availableFonts)
     const fontSizeOptions = [
@@ -256,8 +256,6 @@ export default defineComponent({
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
-    const selectedCells = ref<string[]>([])
-
     // 更新当前选中单元格的文本样式状态
     const updateTextAttrState = () => {
       if (!handleElement.value || handleElement.value.type !== 'table') return
@@ -299,16 +297,7 @@ export default defineComponent({
       }
     }
 
-    // 监听并更新当前选中的单元格
-    const updateSelectedCells: EmitterHandler = (cells: string[]) => {
-      selectedCells.value = cells
-      updateTextAttrState()
-    }
-
-    emitter.on(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, updateSelectedCells)
-    onUnmounted(() => {
-      emitter.off(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, updateSelectedCells)
-    })
+    watch(selectedCells, updateTextAttrState)
 
     // 设置单元格内容文本样式
     const updateTextAttrs = (textAttrProp: Partial<TableCellStyle>) => {
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index fade7213..2965f368 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -218,11 +218,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onUnmounted, ref, watch } from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { MutationTypes, useStore } from '@/store'
 import { PPTTextElement } from '@/types/slides'
-import emitter, { EmitterEvents, EmitterHandler } from '@/utils/emitter'
-import { TextAttrs } from '@/utils/prosemirror/utils'
+import emitter, { EmitterEvents } from '@/utils/emitter'
 import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -320,6 +319,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const handleElement = computed<PPTTextElement>(() => store.getters.handleElement)
+    const richTextAttrs = computed(() => store.state.richTextAttrs)
 
     const fill = ref<string>()
     const lineHeight = ref<number>()
@@ -333,24 +333,6 @@ export default defineComponent({
       wordSpace.value = handleElement.value.wordSpace || 0
     }, { deep: true, immediate: true })
 
-    const richTextAttrs = ref<TextAttrs>({
-      bold: false,
-      em: false,
-      underline: false,
-      strikethrough: false,
-      superscript: false,
-      subscript: false,
-      code: false,
-      color: '#000',
-      backcolor: '#000',
-      fontsize: '20px',
-      fontname: '微软雅黑',
-      align: 'left',
-      bulletList: false,
-      orderedList: false,
-      blockquote: false,
-    })
-
     const availableFonts = computed(() => store.state.availableFonts)
     const fontSizeOptions = [
       '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
@@ -360,14 +342,6 @@ export default defineComponent({
     const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]
     const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10]
 
-    // 接收并更新当前光标所在位置的富文本状态
-    const updateRichTextAttrs: EmitterHandler = (attr: TextAttrs) => richTextAttrs.value = attr
-
-    emitter.on(EmitterEvents.UPDATE_TEXT_STATE, updateRichTextAttrs)
-    onUnmounted(() => {
-      emitter.off(EmitterEvents.UPDATE_TEXT_STATE, updateRichTextAttrs)
-    })
-
     // 发射富文本设置命令
     const emitRichTextCommand = (command: string, value?: string) => {
       emitter.emit(EmitterEvents.EXEC_TEXT_COMMAND, { command, value })
diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue
index 65df3331..436d8082 100644
--- a/src/views/components/element/TableElement/index.vue
+++ b/src/views/components/element/TableElement/index.vue
@@ -172,7 +172,7 @@ export default defineComponent({
 
     // 更新表格当前选中的单元格
     const updateSelectedCells = (cells: string[]) => {
-      nextTick(() => emitter.emit(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells))
+      nextTick(() => store.commit(MutationTypes.SET_SELECTED_TABLE_CELLS, cells))
     }
 
     return {
diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue
index e4cac399..dccd7e74 100644
--- a/src/views/components/element/TextElement/index.vue
+++ b/src/views/components/element/TextElement/index.vue
@@ -179,8 +179,8 @@ export default defineComponent({
     }
 
     const handleClick = debounce(function() {
-      const attr = getTextAttrs(editorView)
-      emitter.emit(EmitterEvents.UPDATE_TEXT_STATE, attr)
+      const attrs = getTextAttrs(editorView)
+      store.commit(MutationTypes.SET_RICHTEXT_ATTRS, attrs)
     }, 30, { trailing: true })
 
     const handleKeydown = () => {