diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 0db473f..1ae0d0a 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -6,6 +6,8 @@ export class Command { private static redo: Function private static painter: Function private static format: Function + private static sizeAdd: Function + private static sizeMinus: Function private static bold: Function private static search: Function private static print: Function @@ -15,6 +17,8 @@ export class Command { Command.redo = adapt.redo.bind(adapt) Command.painter = adapt.painter.bind(adapt) Command.format = adapt.format.bind(adapt) + Command.sizeAdd = adapt.sizeAdd.bind(adapt) + Command.sizeMinus = adapt.sizeMinus.bind(adapt) Command.bold = adapt.bold.bind(adapt) Command.search = adapt.search.bind(adapt) Command.print = adapt.print.bind(adapt) @@ -38,6 +42,14 @@ export class Command { } // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色 + public executeSizeAdd() { + return Command.sizeAdd() + } + + public executeSizeMinus() { + return Command.sizeMinus() + } + public executeBold() { return Command.bold() } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 8bf0275..1b154f7 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -1,4 +1,5 @@ import { ElementStyleKey } from "../../dataset/enum/ElementStyle" +import { IEditorOption } from "../../interface/Editor" import { IElementStyle } from "../../interface/Element" import { printImageBase64 } from "../../utils/print" import { Draw } from "../draw/Draw" @@ -10,11 +11,13 @@ export class CommandAdapt { private draw: Draw private range: RangeManager private historyManager: HistoryManager + private options: Required constructor(draw: Draw) { this.draw = draw this.range = draw.getRange() this.historyManager = draw.getHistoryManager() + this.options = draw.getOptions() } public undo() { @@ -55,11 +58,44 @@ export class CommandAdapt { this.draw.render({ isSetCursor: false }) } + public sizeAdd() { + 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 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 selection = this.range.getSelection() if (!selection) return + const noBoldIndex = selection.findIndex(s => !s.bold) selection.forEach(el => { - el.bold = true + el.bold = !!~noBoldIndex }) this.draw.render({ isSetCursor: false }) } diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 45cf0de..983901e 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -41,7 +41,7 @@ export class Draw { this.historyManager = new HistoryManager() this.position = new Position(this) - this.range = new RangeManager(ctx, elementList, options) + this.range = new RangeManager(ctx, options, this) this.margin = new Margin(ctx, options) this.background = new Background(ctx) this.search = new Search(ctx, options, this) @@ -57,6 +57,10 @@ export class Draw { this.searchMatchList = null } + public getOptions(): Required { + return this.options + } + public getHistoryManager(): HistoryManager { return this.historyManager } diff --git a/src/editor/core/range/RangeManager.ts b/src/editor/core/range/RangeManager.ts index 8c76dee..28d4c2d 100644 --- a/src/editor/core/range/RangeManager.ts +++ b/src/editor/core/range/RangeManager.ts @@ -1,18 +1,19 @@ import { IEditorOption } from "../../interface/Editor" import { IElement } from "../../interface/Element" import { IRange } from "../../interface/Range" +import { Draw } from "../draw/Draw" export class RangeManager { private ctx: CanvasRenderingContext2D - private elementList: IElement[] private options: Required private range: IRange + private draw: Draw - constructor(ctx: CanvasRenderingContext2D, elementList: IElement[], options: Required) { + constructor(ctx: CanvasRenderingContext2D, options: Required, draw: Draw) { this.ctx = ctx - this.elementList = elementList this.options = options + this.draw = draw this.range = { startIndex: 0, endIndex: 0 @@ -26,7 +27,8 @@ export class RangeManager { public getSelection(): IElement[] | null { const { startIndex, endIndex } = this.range if (startIndex === endIndex) return null - return this.elementList.slice(startIndex + 1, endIndex + 1) + const elementList = this.draw.getElementList() + return elementList.slice(startIndex + 1, endIndex + 1) } public setRange(startIndex: number, endIndex: number) { diff --git a/src/main.ts b/src/main.ts index 024d741..4d2c5bb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -64,6 +64,14 @@ window.onload = function () { } // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色 + document.querySelector('.menu-item__size-add')!.onclick = function () { + console.log('size-add') + instance.command.executeSizeAdd() + } + document.querySelector('.menu-item__size-minus')!.onclick = function () { + console.log('size-minus') + instance.command.executeSizeMinus() + } document.querySelector('.menu-item__bold')!.onclick = function () { console.log('bold') instance.command.executeBold()