From 3e7952fd9809cc83950af9ea39a701e126fd37d5 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Wed, 26 Oct 2022 21:10:57 +0800 Subject: [PATCH] feat:add richtext shortcut key --- index.html | 18 ++-- src/editor/core/command/CommandAdapt.ts | 86 ++-------------- src/editor/core/event/CanvasEvent.ts | 127 +++++++++++++++++++++++- src/editor/dataset/enum/KeyMap.ts | 11 ++ 4 files changed, 152 insertions(+), 90 deletions(-) diff --git a/index.html b/index.html index 07bc24e..509de7f 100644 --- a/index.html +++ b/index.html @@ -39,19 +39,19 @@ -
+
-
+
-
+
-
+
-
+
@@ -76,16 +76,16 @@
-
+
-
+
-
+
-
+
diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 6a355cf..bc4530b 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -183,75 +183,23 @@ export class CommandAdapt { } public sizeAdd() { - const isReadonly = this.draw.isReadonly() - if (isReadonly) return - const selection = this.range.getSelection() - if (!selection) return - const lessThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size + 2 <= 72) - const { defaultSize } = this.options - if (!~lessThanMaxSizeIndex) return - selection.forEach(el => { - if (!el.size) { - el.size = defaultSize - } - if (el.size + 2 > 72) return - el.size += 2 - }) - this.draw.render({ isSetCursor: false }) + this.canvasEvent.sizeAdd() } public sizeMinus() { - const isReadonly = this.draw.isReadonly() - if (isReadonly) return - const selection = this.range.getSelection() - if (!selection) return - const greaterThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size - 2 >= 8) - if (!~greaterThanMaxSizeIndex) return - const { defaultSize } = this.options - selection.forEach(el => { - if (!el.size) { - el.size = defaultSize - } - if (el.size - 2 < 8) return - el.size -= 2 - }) - this.draw.render({ isSetCursor: false }) + this.canvasEvent.sizeMinus() } public bold() { - const isReadonly = this.draw.isReadonly() - if (isReadonly) return - const selection = this.range.getSelection() - if (!selection) return - const noBoldIndex = selection.findIndex(s => !s.bold) - selection.forEach(el => { - el.bold = !!~noBoldIndex - }) - this.draw.render({ isSetCursor: false }) + this.canvasEvent.bold() } public italic() { - const isReadonly = this.draw.isReadonly() - if (isReadonly) return - const selection = this.range.getSelection() - if (!selection) return - const noItalicIndex = selection.findIndex(s => !s.italic) - selection.forEach(el => { - el.italic = !!~noItalicIndex - }) - this.draw.render({ isSetCursor: false }) + this.canvasEvent.italic() } public underline() { - const isReadonly = this.draw.isReadonly() - if (isReadonly) return - const selection = this.range.getSelection() - if (!selection) return - const noUnderlineIndex = selection.findIndex(s => !s.underline) - selection.forEach(el => { - el.underline = !!~noUnderlineIndex - }) - this.draw.render({ isSetCursor: false }) + this.canvasEvent.underline() } public strikeout() { @@ -339,29 +287,7 @@ export class CommandAdapt { } public rowFlex(payload: RowFlex) { - const isReadonly = this.draw.isReadonly() - if (isReadonly) return - const { startIndex, endIndex } = this.range.getRange() - if (!~startIndex && !~endIndex) return - const pageNo = this.draw.getPageNo() - const positionList = this.position.getPositionList() - // 开始/结束行号 - const startRowNo = positionList[startIndex].rowNo - const endRowNo = positionList[endIndex].rowNo - const elementList = this.draw.getElementList() - // 当前选区所在行 - for (let p = 0; p < positionList.length; p++) { - const position = positionList[p] - if (position.pageNo !== pageNo) continue - if (position.rowNo > endRowNo) break - if (position.rowNo >= startRowNo && position.rowNo <= endRowNo) { - elementList[p].rowFlex = payload - } - } - // 光标定位 - const isSetCursor = startIndex === endIndex - const curIndex = isSetCursor ? endIndex : startIndex - this.draw.render({ curIndex, isSetCursor }) + this.canvasEvent.rowFlex(payload) } public rowMargin(payload: number) { diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index 2f137aa..e9aa790 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -1,4 +1,4 @@ -import { ElementType, IEditorOption } from '../..' +import { ElementType, IEditorOption, RowFlex } from '../..' import { ZERO } from '../../dataset/constant/Common' import { EDITOR_ELEMENT_COPY_ATTR } from '../../dataset/constant/Element' import { ElementStyleKey } from '../../dataset/enum/ElementStyle' @@ -464,6 +464,33 @@ export class CanvasEvent { this.listener.saved(this.draw.getValue()) } evt.preventDefault() + } else if (evt.ctrlKey && evt.key === KeyMap.LEFT_BRACKET) { + this.sizeAdd() + evt.preventDefault() + } else if (evt.ctrlKey && evt.key === KeyMap.RIGHT_BRACKET) { + this.sizeMinus() + evt.preventDefault() + } else if (evt.ctrlKey && evt.key === KeyMap.B) { + this.bold() + evt.preventDefault() + } else if (evt.ctrlKey && evt.key === KeyMap.I) { + this.italic() + evt.preventDefault() + } else if (evt.ctrlKey && evt.key === KeyMap.U) { + this.underline() + evt.preventDefault() + } else if (evt.ctrlKey && evt.key === KeyMap.L) { + this.rowFlex(RowFlex.LEFT) + evt.preventDefault() + } else if (evt.ctrlKey && evt.key === KeyMap.E) { + this.rowFlex(RowFlex.CENTER) + evt.preventDefault() + } else if (evt.ctrlKey && evt.key === KeyMap.R) { + this.rowFlex(RowFlex.RIGHT) + evt.preventDefault() + } else if (evt.ctrlKey && evt.key === KeyMap.J) { + this.rowFlex(RowFlex.ALIGNMENT) + evt.preventDefault() } else if (evt.key === KeyMap.ESC) { this.clearPainterStyle() } else if (evt.key === KeyMap.TAB) { @@ -670,6 +697,104 @@ export class CanvasEvent { }) } + public sizeAdd() { + const isReadonly = this.draw.isReadonly() + if (isReadonly) return + const selection = this.range.getSelection() + if (!selection) return + const lessThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size + 2 <= 72) + const { defaultSize } = this.options + if (!~lessThanMaxSizeIndex) return + selection.forEach(el => { + if (!el.size) { + el.size = defaultSize + } + if (el.size + 2 > 72) return + el.size += 2 + }) + this.draw.render({ isSetCursor: false }) + } + + public sizeMinus() { + const isReadonly = this.draw.isReadonly() + if (isReadonly) return + const selection = this.range.getSelection() + if (!selection) return + const greaterThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size - 2 >= 8) + if (!~greaterThanMaxSizeIndex) return + const { defaultSize } = this.options + selection.forEach(el => { + if (!el.size) { + el.size = defaultSize + } + if (el.size - 2 < 8) return + el.size -= 2 + }) + this.draw.render({ isSetCursor: false }) + } + + public bold() { + const isReadonly = this.draw.isReadonly() + if (isReadonly) return + const selection = this.range.getSelection() + if (!selection) return + const noBoldIndex = selection.findIndex(s => !s.bold) + selection.forEach(el => { + el.bold = !!~noBoldIndex + }) + this.draw.render({ isSetCursor: false }) + } + + public italic() { + const isReadonly = this.draw.isReadonly() + if (isReadonly) return + const selection = this.range.getSelection() + if (!selection) return + const noItalicIndex = selection.findIndex(s => !s.italic) + selection.forEach(el => { + el.italic = !!~noItalicIndex + }) + this.draw.render({ isSetCursor: false }) + } + + public underline() { + const isReadonly = this.draw.isReadonly() + if (isReadonly) return + const selection = this.range.getSelection() + if (!selection) return + const noUnderlineIndex = selection.findIndex(s => !s.underline) + selection.forEach(el => { + el.underline = !!~noUnderlineIndex + }) + this.draw.render({ isSetCursor: false }) + } + + public rowFlex(payload: RowFlex) { + const isReadonly = this.draw.isReadonly() + if (isReadonly) return + const { startIndex, endIndex } = this.range.getRange() + if (!~startIndex && !~endIndex) return + const pageNo = this.draw.getPageNo() + const positionList = this.position.getPositionList() + // 开始/结束行号 + const startRowNo = positionList[startIndex].rowNo + const endRowNo = positionList[endIndex].rowNo + const elementList = this.draw.getElementList() + // 当前选区所在行 + for (let p = 0; p < positionList.length; p++) { + const position = positionList[p] + if (position.pageNo !== pageNo) continue + if (position.rowNo > endRowNo) break + if (position.rowNo >= startRowNo && position.rowNo <= endRowNo) { + elementList[p].rowFlex = payload + } + } + // 光标定位 + const isSetCursor = startIndex === endIndex + const curIndex = isSetCursor ? endIndex : startIndex + this.draw.render({ curIndex, isSetCursor }) + } + public compositionstart() { this.isCompositing = true } diff --git a/src/editor/dataset/enum/KeyMap.ts b/src/editor/dataset/enum/KeyMap.ts index df1db32..289f889 100644 --- a/src/editor/dataset/enum/KeyMap.ts +++ b/src/editor/dataset/enum/KeyMap.ts @@ -8,9 +8,20 @@ export enum KeyMap { Down = 'ArrowDown', ESC = 'Escape', TAB = 'Tab', + LEFT_BRACKET = '[', + RIGHT_BRACKET = ']', A = 'a', + B = 'b', C = 'c', + E = 'e', + F = 'f', + I = 'i', + J = 'j', + L = 'l', + P = 'p', + R = 'r', S = 's', + U = 'u', X = 'x', Y = 'y', Z = 'z'