github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 画布滚动鼠标翻页

Browse Source
This commit is contained in:
pipipi-pikachu 2021-05-10 21:19:29 +08:00
parent e08c26bb10
commit 476078531a
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/configs/hotkey.ts
View File

@ -55,8 +55,8 @@ export const HOTKEY_DOC = [
{ label: '放大画布', value: 'Ctrl + =' }, { label: '放大画布', value: 'Ctrl + =' },
{ label: '缩小画布', value: 'Ctrl + -' }, { label: '缩小画布', value: 'Ctrl + -' },
{ label: '缩放画布到合适大小', value: 'Ctrl + 0' }, { label: '缩放画布到合适大小', value: 'Ctrl + 0' },
{ label: '编辑上一页', value: '↑ / ←' }, { label: '编辑上一页', value: '↑ / ← / 鼠标上滚' },
{ label: '编辑下一页', value: '↓ / →' }, { label: '编辑下一页', value: '↓ / → / 鼠标下滚' },
], ],
}, },
{ {

27
src/views/Editor/Canvas/index.vue
View File

@ -2,7 +2,7 @@
<div <div
class="canvas" class="canvas"
ref="canvasRef" ref="canvasRef"
@mousewheel="$event => mousewheelScaleCanvas($event)" @mousewheel="$event => handleMousewheelCanvas($event)"
@mousedown="$event => handleClickBlankArea($event)" @mousedown="$event => handleClickBlankArea($event)"
v-contextmenu="contextmenus" v-contextmenu="contextmenus"
v-click-outside="removeEditorAreaFocus" v-click-outside="removeEditorAreaFocus"
@ -82,6 +82,7 @@ import { ContextmenuItem } from '@/components/Contextmenu/types'
import { PPTElement, Slide } from '@/types/slides' import { PPTElement, Slide } from '@/types/slides'
import { AlignmentLineProps } from '@/types/edit' import { AlignmentLineProps } from '@/types/edit'
import { removeAllRanges } from '@/utils/selection' import { removeAllRanges } from '@/utils/selection'
import { KEYS } from '@/configs/hotkey'
import useViewportSize from './hooks/useViewportSize' import useViewportSize from './hooks/useViewportSize'
import useMouseSelection from './hooks/useMouseSelection' import useMouseSelection from './hooks/useMouseSelection'
@ -98,6 +99,7 @@ import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
import useSelectAllElement from '@/hooks/useSelectAllElement' import useSelectAllElement from '@/hooks/useSelectAllElement'
import useScaleCanvas from '@/hooks/useScaleCanvas' import useScaleCanvas from '@/hooks/useScaleCanvas'
import useScreening from '@/hooks/useScreening' import useScreening from '@/hooks/useScreening'
import useSlideHandler from '@/hooks/useSlideHandler'
import EditableElement from './EditableElement.vue' import EditableElement from './EditableElement.vue'
import MouseSelection from './MouseSelection.vue' import MouseSelection from './MouseSelection.vue'
@ -158,6 +160,7 @@ export default defineComponent({
const { deleteAllElements } = useDeleteElement() const { deleteAllElements } = useDeleteElement()
const { pasteElement } = useCopyAndPasteElement() const { pasteElement } = useCopyAndPasteElement()
const { enterScreening } = useScreening() const { enterScreening } = useScreening()
const { updateSlideIndex } = useSlideHandler()
// 点击画布的空白区域：清空焦点元素、设置画布焦点、清除文字选区 // 点击画布的空白区域：清空焦点元素、设置画布焦点、清除文字选区
const handleClickBlankArea = (e: MouseEvent) => { const handleClickBlankArea = (e: MouseEvent) => {
@ -172,16 +175,24 @@ export default defineComponent({
if (editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, false) if (editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, false)
} }
// 按住Ctrl键滚动鼠标缩放画布 // 滚动鼠标
const { scaleCanvas } = useScaleCanvas() const { scaleCanvas } = useScaleCanvas()
const throttleScaleCanvas = throttle(scaleCanvas, 100, { leading: true, trailing: false }) const throttleScaleCanvas = throttle(scaleCanvas, 100, { leading: true, trailing: false })
const throttleUpdateSlideIndex = throttle(updateSlideIndex, 300, { leading: true, trailing: false })
const mousewheelScaleCanvas = (e: WheelEvent) => { const handleMousewheelCanvas = (e: WheelEvent) => {
if (!ctrlKeyState.value) return
e.preventDefault() e.preventDefault()
if (e.deltaY > 0) throttleScaleCanvas('-')
else if (e.deltaY < 0) throttleScaleCanvas('+') // 按住Ctrl键时：缩放画布
if (ctrlKeyState.value) {
if (e.deltaY > 0) throttleScaleCanvas('-')
else if (e.deltaY < 0) throttleScaleCanvas('+')
}
// 上下翻页
else {
if (e.deltaY > 0) throttleUpdateSlideIndex(KEYS.DOWN)
else if (e.deltaY < 0) throttleUpdateSlideIndex(KEYS.UP)
}
} }
// 开关网格线 // 开关网格线
@ -247,7 +258,7 @@ export default defineComponent({
scaleElement, scaleElement,
dragLineElement, dragLineElement,
scaleMultiElement, scaleMultiElement,
mousewheelScaleCanvas, handleMousewheelCanvas,
contextmenus, contextmenus,
} }
}, },