快捷键补充

This commit is contained in:
pipipi-pikachu 2021-02-01 22:29:55 +08:00
parent f429561668
commit 0172630ee7
5 changed files with 54 additions and 1 deletions

View File

@ -8,6 +8,7 @@ export const enum KEYS {
L = 'L', L = 'L',
F = 'F', F = 'F',
D = 'D', D = 'D',
B = 'B',
MINUS = '-', MINUS = '-',
EQUAL = '=', EQUAL = '=',
DIGIT_0 = '0', DIGIT_0 = '0',

View File

@ -101,6 +101,10 @@ export const SHAPE_LIST = [
viewBox: 200, viewBox: 200,
path: 'M 60 0 L 140 0 L 200 60 L 200 140 L 140 200 L 60 200 L 0 140 L 0 60 L 60 0 Z' path: 'M 60 0 L 140 0 L 200 60 L 200 140 L 140 200 L 60 200 L 0 140 L 0 60 L 60 0 Z'
}, },
{
viewBox: 200,
path: 'M 75 0 L 125 0 L 175 25 L 200 75 L 200 125 L 175 175 L 125 200 L 75 200 L 25 175 L 0 125 L 0 75 L 25 25 L 75 0 Z'
},
{ {
viewBox: 200, viewBox: 200,
path: 'M 100 0 L 0 50 L 0 200 L 200 200 L 200 50 L 100 0 Z' path: 'M 100 0 L 0 50 L 0 200 L 200 200 L 200 50 L 100 0 Z'

View File

@ -116,6 +116,8 @@ const hotkeys = [
{ label: '锁定', value: 'Ctrl + L' }, { label: '锁定', value: 'Ctrl + L' },
{ label: '组合', value: 'Ctrl + G' }, { label: '组合', value: 'Ctrl + G' },
{ label: '取消组合', value: 'Ctrl + Shift + G' }, { label: '取消组合', value: 'Ctrl + Shift + G' },
{ label: '置顶层', value: 'Alt + F' },
{ label: '置底层', value: 'Alt + B' },
{ label: '多选', value: '按住 Ctrl 或 Shift' }, { label: '多选', value: '按住 Ctrl 或 Shift' },
{ label: '锁定宽高比例', value: '按住 Ctrl 或 Shift' }, { label: '锁定宽高比例', value: '按住 Ctrl 或 Shift' },
{ label: '创建水平 / 垂直线条', value: '按住 Ctrl 或 Shift' }, { label: '创建水平 / 垂直线条', value: '按住 Ctrl 或 Shift' },
@ -126,6 +128,10 @@ const hotkeys = [
type: '表格编辑', type: '表格编辑',
children: [ children: [
{ label: '聚焦到下一个单元格', value: 'Tab' }, { label: '聚焦到下一个单元格', value: 'Tab' },
{ label: '在上方插入一行', value: 'Ctrl + ↑' },
{ label: '在下方插入一行', value: 'Ctrl + ↓' },
{ label: '在左侧插入一列', value: 'Ctrl + ←' },
{ label: '在右侧插入一列', value: 'Ctrl + →' },
], ],
}, },
{ {

View File

@ -1,5 +1,7 @@
import { computed, onMounted, onUnmounted } from 'vue' import { computed, onMounted, onUnmounted } from 'vue'
import { MutationTypes, useStore } from '@/store' import { MutationTypes, useStore } from '@/store'
import { ElementOrderCommand, ElementOrderCommands } from '@/types/edit'
import { PPTElement } from '@/types/slides'
import { KEYS } from '@/configs/hotkey' import { KEYS } from '@/configs/hotkey'
import useSlideHandler from '@/hooks/useSlideHandler' import useSlideHandler from '@/hooks/useSlideHandler'
@ -9,6 +11,7 @@ import useCombineElement from '@/hooks/useCombineElement'
import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement' import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
import useSelectAllElement from '@/hooks/useSelectAllElement' import useSelectAllElement from '@/hooks/useSelectAllElement'
import useMoveElement from '@/hooks/useMoveElement' import useMoveElement from '@/hooks/useMoveElement'
import useOrderElement from '@/hooks/useOrderElement'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import useScreening from '@/hooks/useScreening' import useScreening from '@/hooks/useScreening'
import useScaleCanvas from '@/hooks/useScaleCanvas' import useScaleCanvas from '@/hooks/useScaleCanvas'
@ -20,6 +23,7 @@ export default () => {
const shiftKeyActive = computed(() => store.state.shiftKeyState) const shiftKeyActive = computed(() => store.state.shiftKeyState)
const disableHotkeys = computed(() => store.state.disableHotkeys) const disableHotkeys = computed(() => store.state.disableHotkeys)
const activeElementIdList = computed(() => store.state.activeElementIdList) const activeElementIdList = computed(() => store.state.activeElementIdList)
const handleElement = computed<PPTElement>(() => store.getters.handleElement)
const editorAreaFocus = computed(() => store.state.editorAreaFocus) const editorAreaFocus = computed(() => store.state.editorAreaFocus)
const thumbnailsFocus = computed(() => store.state.thumbnailsFocus) const thumbnailsFocus = computed(() => store.state.thumbnailsFocus)
@ -39,6 +43,7 @@ export default () => {
const { copyElement, cutElement, quickCopyElement } = useCopyAndPasteElement() const { copyElement, cutElement, quickCopyElement } = useCopyAndPasteElement()
const { selectAllElement } = useSelectAllElement() const { selectAllElement } = useSelectAllElement()
const { moveElement } = useMoveElement() const { moveElement } = useMoveElement()
const { orderElement } = useOrderElement()
const { redo, undo } = useHistorySnapshot() const { redo, undo } = useHistorySnapshot()
const { enterScreening } = useScreening() const { enterScreening } = useScreening()
const { scaleCanvas, setCanvasPercentage } = useScaleCanvas() const { scaleCanvas, setCanvasPercentage } = useScaleCanvas()
@ -87,13 +92,18 @@ export default () => {
else if(key === KEYS.UP || key === KEYS.DOWN) updateSlideIndex(key) else if(key === KEYS.UP || key === KEYS.DOWN) updateSlideIndex(key)
} }
const order = (command: ElementOrderCommand) => {
if(!handleElement.value) return
orderElement(handleElement.value, command)
}
const create = () => { const create = () => {
if(!thumbnailsFocus.value) return if(!thumbnailsFocus.value) return
createSlide() createSlide()
} }
const keydownListener = (e: KeyboardEvent) => { const keydownListener = (e: KeyboardEvent) => {
const { ctrlKey, shiftKey, metaKey } = e const { ctrlKey, shiftKey, altKey, metaKey } = e
const key = e.key.toUpperCase() const key = e.key.toUpperCase()
@ -153,6 +163,16 @@ export default () => {
e.preventDefault() e.preventDefault()
uncombine() uncombine()
} }
if(altKey && key === KEYS.F) {
if(disableHotkeys.value) return
e.preventDefault()
order(ElementOrderCommands.TOP)
}
if(altKey && key === KEYS.B) {
if(disableHotkeys.value) return
e.preventDefault()
order(ElementOrderCommands.BOTTOM)
}
if(key === KEYS.DELETE) { if(key === KEYS.DELETE) {
if(disableHotkeys.value) return if(disableHotkeys.value) return
e.preventDefault() e.preventDefault()

View File

@ -457,12 +457,34 @@ export default defineComponent({
} }
const keydownListener = (e: KeyboardEvent) => { const keydownListener = (e: KeyboardEvent) => {
if(!props.editable || !selectedCells.value.length) return
const key = e.key.toUpperCase() const key = e.key.toUpperCase()
if(selectedCells.value.length < 2) { if(selectedCells.value.length < 2) {
if(key === KEYS.TAB) { if(key === KEYS.TAB) {
e.preventDefault() e.preventDefault()
tabActiveCell() tabActiveCell()
} }
if(e.ctrlKey && key === KEYS.UP) {
e.preventDefault()
const rowIndex = +selectedCells.value[0].split('_')[0]
insertRow(rowIndex)
}
if(e.ctrlKey && key === KEYS.DOWN) {
e.preventDefault()
const rowIndex = +selectedCells.value[0].split('_')[0]
insertRow(rowIndex + 1)
}
if(e.ctrlKey && key === KEYS.LEFT) {
e.preventDefault()
const colIndex = +selectedCells.value[0].split('_')[1]
insertCol(colIndex)
}
if(e.ctrlKey && key === KEYS.RIGHT) {
e.preventDefault()
const colIndex = +selectedCells.value[0].split('_')[1]
insertCol(colIndex + 1)
}
} }
else if(key === KEYS.DELETE) { else if(key === KEYS.DELETE) {
clearSelectedCellText() clearSelectedCellText()