diff --git a/index.html b/index.html index dcd4e3a..1d81623 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,6 @@ -
@@ -70,6 +69,18 @@
+
+
+ +
+
+ +
+
+ +
+
+
diff --git a/src/assets/images/center.svg b/src/assets/images/center.svg new file mode 100644 index 0000000..28dc13c --- /dev/null +++ b/src/assets/images/center.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/left.svg b/src/assets/images/left.svg new file mode 100644 index 0000000..b41d2b2 --- /dev/null +++ b/src/assets/images/left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/right.svg b/src/assets/images/right.svg new file mode 100644 index 0000000..eca4643 --- /dev/null +++ b/src/assets/images/right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 1ca9c19..9bb22a2 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -1,3 +1,4 @@ +import { RowFlex } from "../../dataset/enum/Row" import { CommandAdapt } from "./CommandAdapt" export class Command { @@ -15,6 +16,9 @@ export class Command { private static strikeout: Function private static color: Function private static highlight: Function + private static left: Function + private static center: Function + private static right: Function private static search: Function private static print: Function @@ -32,6 +36,9 @@ export class Command { Command.strikeout = adapt.strikeout.bind(adapt) Command.color = adapt.color.bind(adapt) Command.highlight = adapt.highlight.bind(adapt) + Command.left = adapt.rowFlex.bind(adapt) + Command.center = adapt.rowFlex.bind(adapt) + Command.right = adapt.rowFlex.bind(adapt) Command.search = adapt.search.bind(adapt) Command.print = adapt.print.bind(adapt) } @@ -90,6 +97,18 @@ export class Command { return Command.highlight(payload) } + public executeLeft() { + return Command.left(RowFlex.LEFT) + } + + public executeCenter() { + return Command.center(RowFlex.CENTER) + } + + public executeRight() { + return Command.right(RowFlex.RIGHT) + } + // 搜索、打印 public executeSearch(payload: string | null) { return Command.search(payload) diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index a58dff6..bf4ada6 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -1,21 +1,25 @@ import { ElementStyleKey } from "../../dataset/enum/ElementStyle" +import { RowFlex } from "../../dataset/enum/Row" import { IEditorOption } from "../../interface/Editor" import { IElementStyle } from "../../interface/Element" import { printImageBase64 } from "../../utils/print" import { Draw } from "../draw/Draw" import { HistoryManager } from "../history/HistoryManager" +import { Position } from "../position/Position" import { RangeManager } from "../range/RangeManager" export class CommandAdapt { private draw: Draw private range: RangeManager + private position: Position private historyManager: HistoryManager private options: Required constructor(draw: Draw) { this.draw = draw this.range = draw.getRange() + this.position = draw.getPosition() this.historyManager = draw.getHistoryManager() this.options = draw.getOptions() } @@ -157,6 +161,28 @@ export class CommandAdapt { this.draw.render({ isSetCursor: false }) } + public rowFlex(payload: RowFlex) { + const { startIndex, endIndex } = this.range.getRange() + if (startIndex === 0 && endIndex === 0) return + 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 postion = positionList[p] + if (postion.rowNo > endRowNo) break + if (postion.rowNo >= startRowNo && postion.rowNo <= endRowNo) { + elementList[p].rowFlex = payload + } + } + // 光标定位 + const isSetCursor = startIndex === endIndex + const curIndex = isSetCursor ? endIndex : startIndex + this.draw.render({ curIndex, isSetCursor }) + } + public search(payload: string | null) { if (payload) { const elementList = this.draw.getElementList() diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 1ddb0b1..c65be6d 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -1,4 +1,5 @@ import { ZERO } from "../../dataset/constant/Common" +import { RowFlex } from "../../dataset/enum/Row" import { IDrawOption } from "../../interface/Draw" import { IEditorOption } from "../../interface/Editor" import { IElement, IElementPosition, IElementStyle } from "../../interface/Element" @@ -170,7 +171,8 @@ export class Draw { width: 0, height: 0, ascent: 0, - elementList: [] + elementList: [], + rowFlex: this.elementList[0].rowFlex }) } for (let i = 0; i < this.elementList.length; i++) { @@ -189,7 +191,8 @@ export class Draw { width, height: this.options.defaultSize, elementList: [lineText], - ascent: fontBoundingBoxAscent + ascent: fontBoundingBoxAscent, + rowFlex: lineText.rowFlex }) } else { curRow.width += width @@ -207,6 +210,15 @@ export class Draw { let index = 0 for (let i = 0; i < rowList.length; i++) { const curRow = rowList[i]; + // 计算行偏移量（行居左、居中、居右） + if (curRow.rowFlex && curRow.rowFlex !== RowFlex.LEFT) { + const canvasInnerWidth = this.canvas.width - margins[1] - margins[3] + if (curRow.rowFlex === RowFlex.CENTER) { + x += (canvasInnerWidth - curRow.width) / 2 + } else { + x += canvasInnerWidth - curRow.width + } + } for (let j = 0; j < curRow.elementList.length; j++) { this.ctx.save() const element = curRow.elementList[j] diff --git a/src/editor/core/event/GlobalEvent.ts b/src/editor/core/event/GlobalEvent.ts index 889be01..f304587 100644 --- a/src/editor/core/event/GlobalEvent.ts +++ b/src/editor/core/event/GlobalEvent.ts @@ -55,6 +55,7 @@ export class GlobalEvent { } this.cursor.recoveryCursor() this.range.recoveryRangeStyle() + this.range.setRange(0, 0) } setDragState() { diff --git a/src/editor/core/range/RangeManager.ts b/src/editor/core/range/RangeManager.ts index 5e8264d..fdecf15 100644 --- a/src/editor/core/range/RangeManager.ts +++ b/src/editor/core/range/RangeManager.ts @@ -59,6 +59,7 @@ export class RangeManager { let strikeout = !~curElementList.findIndex(el => !el.strikeout) const color = curElement.color || null const highlight = curElement.highlight || null + const rowFlex = curElement.rowFlex || null // 菜单 const painter = !!this.draw.getPainterStyle() const undo = this.historyManager.isCanUndo() @@ -73,7 +74,8 @@ export class RangeManager { underline, strikeout, color, - highlight + highlight, + rowFlex }) } @@ -93,7 +95,8 @@ export class RangeManager { underline: false, strikeout: false, color: null, - highlight: null + highlight: null, + rowFlex: null }) } diff --git a/src/editor/dataset/enum/Row.ts b/src/editor/dataset/enum/Row.ts new file mode 100644 index 0000000..deebe45 --- /dev/null +++ b/src/editor/dataset/enum/Row.ts @@ -0,0 +1,5 @@ +export enum RowFlex { + LEFT = 'left', + CENTER = 'center', + RIGHT = 'right' +} \ No newline at end of file diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts index e40ad41..d4c3de6 100644 --- a/src/editor/interface/Element.ts +++ b/src/editor/interface/Element.ts @@ -1,3 +1,5 @@ +import { RowFlex } from "../dataset/enum/Row" + export interface IElementStyle { font?: string; size?: number; @@ -9,6 +11,7 @@ export interface IElementStyle { italic?: boolean; underline?: boolean; strikeout?: boolean; + rowFlex?: RowFlex; } export interface IElementBasic { diff --git a/src/editor/interface/Listener.ts b/src/editor/interface/Listener.ts index 8efbb4b..42f28b8 100644 --- a/src/editor/interface/Listener.ts +++ b/src/editor/interface/Listener.ts @@ -1,3 +1,5 @@ +import { RowFlex } from "../dataset/enum/Row" + export interface IRangeStype { undo: boolean; redo: boolean; @@ -9,6 +11,7 @@ export interface IRangeStype { strikeout: boolean; color: string | null; highlight: string | null; + rowFlex: RowFlex | null; } export type IRangeStyleChange = (payload: IRangeStype) => void; diff --git a/src/editor/interface/Row.ts b/src/editor/interface/Row.ts index a6231db..7fe9084 100644 --- a/src/editor/interface/Row.ts +++ b/src/editor/interface/Row.ts @@ -1,3 +1,4 @@ +import { RowFlex } from "../dataset/enum/Row" import { IElement } from "./Element" export type IRowElement = IElement & { @@ -8,5 +9,6 @@ export interface IRow { width: number; height: number; ascent: number; + rowFlex?: RowFlex elementList: IRowElement[]; } diff --git a/src/main.ts b/src/main.ts index 44c812b..73a24fd 100644 --- a/src/main.ts +++ b/src/main.ts @@ -138,7 +138,22 @@ window.onload = function () { console.log('highlight') highlightControlDom?.click() } - + // 行布局 + const leftDom = document.querySelector('.menu-item__left')! + leftDom.onclick = function () { + console.log('left') + instance.command.executeLeft() + } + const centerDom = document.querySelector('.menu-item__center')! + centerDom.onclick = function () { + console.log('center') + instance.command.executeCenter() + } + const rightDom = document.querySelector('.menu-item__right')! + rightDom.onclick = function () { + console.log('right') + instance.command.executeRight() + } // 搜索、打印 const collspanDom = document.querySelector('.menu-item__search__collapse') const searchInputDom = document.querySelector('.menu-item__search__collapse__search input') @@ -193,6 +208,17 @@ window.onload = function () { highlightControlDom.value = '#ffff00' highlightSpanDom.style.backgroundColor = '#ffff00' } + // 行布局 + leftDom.classList.remove('active') + centerDom.classList.remove('active') + rightDom.classList.remove('active') + if (payload.rowFlex && payload.rowFlex === 'right') { + rightDom.classList.add('active') + } else if (payload.rowFlex && payload.rowFlex === 'center') { + centerDom.classList.add('active') + } else { + leftDom.classList.add('active') + } // 功能 payload.undo ? undoDom.classList.remove('no-allow') : undoDom.classList.add('no-allow') payload.redo ? redoDom.classList.remove('no-allow') : redoDom.classList.add('no-allow') diff --git a/src/style.css b/src/style.css index 1edd009..716a2d3 100644 --- a/src/style.css +++ b/src/style.css @@ -211,6 +211,18 @@ ul { background-color: #ffff00; } +.menu-item__left i { + background-image: url('./assets/images/left.svg'); +} + +.menu-item__center i { + background-image: url('./assets/images/center.svg'); +} + +.menu-item__right i { + background-image: url('./assets/images/right.svg'); +} + .menu-item__search { position: relative; }