diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 10b5b41..f89301a 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -22,7 +22,7 @@ export class Command { private static applyPainterStyle: CommandAdapt['applyPainterStyle'] private static format: CommandAdapt['format'] private static font: CommandAdapt['font'] - private static sizeSet: CommandAdapt['sizeSet'] + private static size: CommandAdapt['size'] private static sizeAdd: CommandAdapt['sizeAdd'] private static sizeMinus: CommandAdapt['sizeMinus'] private static bold: CommandAdapt['bold'] @@ -96,7 +96,7 @@ export class Command { Command.applyPainterStyle = adapt.applyPainterStyle.bind(adapt) Command.format = adapt.format.bind(adapt) Command.font = adapt.font.bind(adapt) - Command.sizeSet = adapt.sizeSet.bind(adapt) + Command.size = adapt.size.bind(adapt) Command.sizeAdd = adapt.sizeAdd.bind(adapt) Command.sizeMinus = adapt.sizeMinus.bind(adapt) Command.bold = adapt.bold.bind(adapt) @@ -212,8 +212,8 @@ export class Command { return Command.font(payload) } - public executeSize(size: number) { - return Command.sizeSet(size) + public executeSize(payload: number) { + return Command.size(payload) } public executeSizeAdd() { diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index ef5a3c9..82e3ec7 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -185,54 +185,70 @@ export class CommandAdapt { this.draw.render({ isSetCursor: false }) } - public sizeSet(size: number) { + public size(payload: number) { + const { minSize, maxSize, defaultSize } = this.options + if (payload < minSize || payload > maxSize) return 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) - if (!~lessThanMaxSizeIndex) return + const selection = this.range.getTextLikeSelection() + if (!selection || !selection.length) return + let isExistUpdate = false selection.forEach(el => { - if (size > 72) return - el.size = size + if ((!el.size && payload === defaultSize) || (el.size && el.size === payload)) return + el.size = payload + isExistUpdate = true }) - this.draw.render({ isSetCursor: false }) + if (isExistUpdate) { + this.draw.render({ isSetCursor: false }) + } } 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 + const selection = this.range.getTextLikeSelection() + if (!selection || !selection.length) return + const { defaultSize, maxSize } = this.options + let isExistUpdate = false selection.forEach(el => { if (!el.size) { el.size = defaultSize } - if (el.size + 2 > 72) return - el.size += 2 + if (el.size >= maxSize) return + if (el.size + 2 > maxSize) { + el.size = maxSize + } else { + el.size += 2 + } + isExistUpdate = true }) - this.draw.render({ isSetCursor: false }) + if (isExistUpdate) { + 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 + const selection = this.range.getTextLikeSelection() + if (!selection || !selection.length) return + const { defaultSize, minSize } = this.options + let isExistUpdate = false selection.forEach(el => { if (!el.size) { el.size = defaultSize } - if (el.size - 2 < 8) return - el.size -= 2 + if (el.size <= minSize) return + if (el.size - 2 < minSize) { + el.size = minSize + } else { + el.size -= 2 + } + isExistUpdate = true }) - this.draw.render({ isSetCursor: false }) + if (isExistUpdate) { + this.draw.render({ isSetCursor: false }) + } } public bold() { diff --git a/src/editor/core/range/RangeManager.ts b/src/editor/core/range/RangeManager.ts index 04d6f09..2dd7d71 100644 --- a/src/editor/core/range/RangeManager.ts +++ b/src/editor/core/range/RangeManager.ts @@ -1,5 +1,6 @@ import { ElementType } from '../..' import { ZERO } from '../../dataset/constant/Common' +import { TEXTLIKE_ELEMENT_TYPE } from '../../dataset/constant/Element' import { ControlComponent } from '../../dataset/enum/Control' import { IEditorOption } from '../../interface/Editor' import { IElement } from '../../interface/Element' @@ -45,6 +46,12 @@ export class RangeManager { return elementList.slice(startIndex + 1, endIndex + 1) } + public getTextLikeSelection(): IElement[] | null { + const selection = this.getSelection() + if (!selection) return null + return selection.filter(s => !s.type || TEXTLIKE_ELEMENT_TYPE.includes(s.type)) + } + // 获取光标所选位置行信息 public getRangeRow(): RangeRowMap | null { const { startIndex, endIndex } = this.range diff --git a/src/editor/index.ts b/src/editor/index.ts index 8b901f5..63f2312 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -66,6 +66,8 @@ export default class Editor { defaultType: 'TEXT', defaultFont: 'Yahei', defaultSize: 16, + minSize: 5, + maxSize: 72, defaultRowMargin: 1, defaultBasicRowMarginHeight: 8, defaultTabWidth: 32, diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index d5c1bb6..21d0cb5 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -18,6 +18,8 @@ export interface IEditorOption { defaultType?: string; defaultFont?: string; defaultSize?: number; + minSize?: number; + maxSize?: number; defaultBasicRowMarginHeight?: number; defaultRowMargin?: number; defaultTabWidth?: number; diff --git a/src/main.ts b/src/main.ts index 526357c..6eed966 100644 --- a/src/main.ts +++ b/src/main.ts @@ -91,8 +91,7 @@ window.onload = function () { } sizeOptionDom.onclick = function (evt) { const li = evt.target as HTMLLIElement - const size = Number(li.dataset.size!) as number - instance.command.executeSize(size) + instance.command.executeSize(Number(li.dataset.size!)) } const sizeAddDom = document.querySelector('.menu-item__size-add')! @@ -1003,6 +1002,8 @@ window.onload = function () { if (curSizeDom) { sizeSelectDom.innerText = curSizeDom.innerText curSizeDom.classList.add('active') + } else { + sizeSelectDom.innerText = `${payload.size}` } payload.bold ? boldDom.classList.add('active') : boldDom.classList.remove('active') payload.italic ? italicDom.classList.add('active') : italicDom.classList.remove('active') diff --git a/src/style.css b/src/style.css index 5420779..ac6d4f6 100644 --- a/src/style.css +++ b/src/style.css @@ -156,16 +156,19 @@ ul { background-color: #e2e6ed; } -.menu-item .menu-item__font,.menu-item .menu-item__size { +.menu-item .menu-item__font { width: 65px; position: relative; } -.menu-item .menu-item__size{ +.menu-item .menu-item__size { + width: 50px; text-align: center; + position: relative; } -.menu-item__font .select,.menu-item__size .select { +.menu-item__font .select, +.menu-item__size .select { width: 100%; height: 100%; }