docs: 注释更新

src/store/actions.ts

@@ -23,26 +23,38 @@ export const actions: ActionTree<State, State> = {
   },
 
   async [ActionTypes.ADD_SNAPSHOT]({ state, commit }) {
+
+    // 获取当前indexeddb中全部快照的ID
     const allKeys = await snapshotDB.snapshots.orderBy('id').keys()
 
     let needDeleteKeys: IndexableTypeArray = []
 
+    // 记录需要删除的快照ID
+    // 若当前快照指针不处在最后一位，那么再添加快照时，应该将当前指针位置后面的快照全部删除，对应的实际情况是：
+    // 用户撤回多次后，再进行操作（添加快照），此时原先被撤销的快照都应该被删除
     if (state.snapshotCursor >= 0 && state.snapshotCursor < allKeys.length - 1) {
       needDeleteKeys = allKeys.slice(state.snapshotCursor + 1)
     }
 
+    // 添加新快照
     const snapshot = {
       index: state.slideIndex,
       slides: state.slides,
     }
     await snapshotDB.snapshots.add(snapshot)
 
+    // 计算当前快照长度，用于设置快照指针的位置（此时指针应该处在最后一位，即：快照长度 - 1）
     let snapshotLength = allKeys.length - needDeleteKeys.length + 1
 
-    if (snapshotLength > 20) {
+    // 快照数量超过长度限制时，应该将头部多余的快照删除
+    const snapshotLengthLimit = 20
+    if (snapshotLength > snapshotLengthLimit) {
       needDeleteKeys.push(allKeys[0])
       snapshotLength--
     }
+
+    // 快照数大于1时，需要保证撤回操作后维持页面焦点不变：也就是将倒数第二个快照对应的索引设置为当前页的索引
+    // https://github.com/pipipi-pikachu/PPTist/issues/27
     if (snapshotLength >= 2) {
       snapshotDB.snapshots.update(allKeys[snapshotLength - 2] as number, { index: state.slideIndex })
     }

src/store/state.ts

@@ -30,31 +30,33 @@ export interface State {
 }
 
 export const state: State = {
-  activeElementIdList: [],
+  activeElementIdList: [], // 被选中的元素ID集合，包含 handleElementId
-  handleElementId: '',
+  handleElementId: '', // 正在操作的元素ID
-  canvasPercentage: 90,
+  canvasPercentage: 90, // 画布可视区域百分比
-  canvasScale: 1,
+  canvasScale: 1, // 画布缩放比例（基于宽度1000px）
-  thumbnailsFocus: false,
+  thumbnailsFocus: false, // 左侧导航缩略图区域聚焦
-  editorAreaFocus: false,
+  editorAreaFocus: false, //  编辑区域聚焦
-  disableHotkeys: false,
+  disableHotkeys: false, // 禁用快捷键
-  showGridLines: false,
+  showGridLines: false, // 显示网格线
-  creatingElement: null,
+  creatingElement: null, // 正在插入的元素信息，需要绘制插入的元素需要（文字、形状、线条）
-  availableFonts: [],
+  availableFonts: [], // 当前环境可用字体
-  toolbarState: 'slideStyle',
+  toolbarState: 'slideStyle', // 右侧工具栏状态
+  viewportRatio: 0.5625, // 可是区域比例，默认16:9
+  slides: slides, // 幻灯片页面数据
+  slideIndex: 0, // 当前页面索引
+  selectedSlidesIndex: [], // 当前被选中的页面索引集合
+  snapshotCursor: -1, // 历史快照指针
+  snapshotLength: 0, // 历史快照长度
+  ctrlKeyState: false, // ctrl键按下状态
+  shiftKeyState: false, // shift键按下状态
+  screening: false, // 是否进入放映状态
+  clipingImageElementId: '', // 当前正在裁剪的图片ID
+
+  // 主题样式
   theme: {
     themeColor: '#5b9bd5',
     fontColor: '#333',
     fontName: '微软雅黑',
     backgroundColor: '#fff',
   },
-  viewportRatio: 0.5625,
-  slides: slides,
-  slideIndex: 0,
-  selectedSlidesIndex: [],
-  snapshotCursor: -1,
-  snapshotLength: 0,
-  ctrlKeyState: false,
-  shiftKeyState: false,
-  screening: false,
-  clipingImageElementId: '',
 }

src/views/Editor/Canvas/hooks/useSelectElement.ts

@@ -15,7 +15,8 @@ export default (
   const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
 
   // 选中元素
-  const selectElement = (e: MouseEvent, element: PPTElement, canMove = true) => {
+  // startMove 表示是否需要再选中操作后进入到开始移动的状态
+  const selectElement = (e: MouseEvent, element: PPTElement, startMove = true) => {
     if (!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true)
 
     // 如果目标元素当前未被选中，则将他设为选中状态
@@ -84,7 +85,7 @@ export default (
       }
     }
 
-    if (canMove) moveElement(e, element)
+    if (startMove) moveElement(e, element)
   }
 
   // 选中页面内的全部元素