From 1b0d6f0b6f80922e2e43a47920b6f3dd9c175f38 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Wed, 12 May 2021 21:32:06 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B3=A8=E9=87=8A=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/actions.ts | 14 +++++- src/store/state.ts | 44 ++++++++++--------- .../Editor/Canvas/hooks/useSelectElement.ts | 5 ++- 3 files changed, 39 insertions(+), 24 deletions(-) diff --git a/src/store/actions.ts b/src/store/actions.ts index c4a235cb..7b6ba440 100644 --- a/src/store/actions.ts +++ b/src/store/actions.ts @@ -23,26 +23,38 @@ export const actions: ActionTree = { }, 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 }) } diff --git a/src/store/state.ts b/src/store/state.ts index 4f1f6000..35d1285c 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -30,31 +30,33 @@ export interface State { } export const state: State = { - activeElementIdList: [], - handleElementId: '', - canvasPercentage: 90, - canvasScale: 1, - thumbnailsFocus: false, - editorAreaFocus: false, - disableHotkeys: false, - showGridLines: false, - creatingElement: null, - availableFonts: [], - toolbarState: 'slideStyle', + activeElementIdList: [], // 被选中的元素ID集合,包含 handleElementId + handleElementId: '', // 正在操作的元素ID + canvasPercentage: 90, // 画布可视区域百分比 + canvasScale: 1, // 画布缩放比例(基于宽度1000px) + thumbnailsFocus: false, // 左侧导航缩略图区域聚焦 + editorAreaFocus: false, // 编辑区域聚焦 + disableHotkeys: false, // 禁用快捷键 + showGridLines: false, // 显示网格线 + creatingElement: null, // 正在插入的元素信息,需要绘制插入的元素需要(文字、形状、线条) + availableFonts: [], // 当前环境可用字体 + 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: '', } \ No newline at end of file diff --git a/src/views/Editor/Canvas/hooks/useSelectElement.ts b/src/views/Editor/Canvas/hooks/useSelectElement.ts index 367afeb7..98184544 100644 --- a/src/views/Editor/Canvas/hooks/useSelectElement.ts +++ b/src/views/Editor/Canvas/hooks/useSelectElement.ts @@ -15,7 +15,8 @@ export default ( const ctrlOrShiftKeyActive = computed(() => 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) } // 选中页面内的全部元素