diff --git a/index.html b/index.html index 7948ea5..335df87 100644 --- a/index.html +++ b/index.html @@ -57,6 +57,12 @@
+
+ +
+
+ +
diff --git a/src/assets/images/subscript.svg b/src/assets/images/subscript.svg new file mode 100644 index 0000000..9ec06b7 --- /dev/null +++ b/src/assets/images/subscript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/superscript.svg b/src/assets/images/superscript.svg new file mode 100644 index 0000000..053bd3e --- /dev/null +++ b/src/assets/images/superscript.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 575bd5e..e66161b 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -20,6 +20,8 @@ export class Command { private static italic: Function private static underline: Function private static strikeout: Function + private static superscript: Function + private static subscript: Function private static color: Function private static highlight: Function private static left: Function @@ -60,6 +62,8 @@ export class Command { Command.italic = adapt.italic.bind(adapt) Command.underline = adapt.underline.bind(adapt) Command.strikeout = adapt.strikeout.bind(adapt) + Command.superscript = adapt.superscript.bind(adapt) + Command.subscript = adapt.subscript.bind(adapt) Command.color = adapt.color.bind(adapt) Command.highlight = adapt.highlight.bind(adapt) Command.left = adapt.rowFlex.bind(adapt) @@ -148,6 +152,14 @@ export class Command { return Command.strikeout() } + public executeSuperscript() { + return Command.superscript() + } + + public executeSubscript() { + return Command.subscript() + } + public executeColor(payload: string) { return Command.color(payload) } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index c6ae06e..76b8b52 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -1,5 +1,5 @@ import { ZERO } from "../../dataset/constant/Common" -import { EDITOR_ELEMENT_STYLE_ATTR } from "../../dataset/constant/Element" +import { EDITOR_ELEMENT_STYLE_ATTR, TEXTLIKE_ELEMENT_TYPE } from "../../dataset/constant/Element" import { EditorContext } from "../../dataset/enum/Editor" import { ElementType } from "../../dataset/enum/Element" import { ElementStyleKey } from "../../dataset/enum/ElementStyle" @@ -181,6 +181,48 @@ export class CommandAdapt { this.draw.render({ isSetCursor: false }) } + public superscript() { + const selection = this.range.getSelection() + if (!selection) return + const superscriptIndex = selection.findIndex(s => s.type === ElementType.SUPERSCRIPT) + selection.forEach(el => { + // 取消上标 + if (~superscriptIndex) { + if (el.type === ElementType.SUPERSCRIPT) { + el.type = ElementType.TEXT + delete el.actualSize + } + } else { + // 设置上标 + if (!el.type || el.type === ElementType.TEXT || el.type === ElementType.SUBSCRIPT) { + el.type = ElementType.SUPERSCRIPT + } + } + }) + this.draw.render({ isSetCursor: false }) + } + + public subscript() { + const selection = this.range.getSelection() + if (!selection) return + const subscriptIndex = selection.findIndex(s => s.type === ElementType.SUBSCRIPT) + selection.forEach(el => { + // 取消下标 + if (~subscriptIndex) { + if (el.type === ElementType.SUBSCRIPT) { + el.type = ElementType.TEXT + delete el.actualSize + } + } else { + // 设置下标 + if (!el.type || el.type === ElementType.TEXT || el.type === ElementType.SUPERSCRIPT) { + el.type = ElementType.SUBSCRIPT + } + } + }) + this.draw.render({ isSetCursor: false }) + } + public color(payload: string) { const selection = this.range.getSelection() if (!selection) return @@ -911,8 +953,7 @@ export class CommandAdapt { // 搜索文本 function searchClosure(payload: string | null, type: EditorContext, elementList: IElement[], restArgs?: ISearchResultRestArgs) { if (!payload) return - const { TEXT, HYPERLINK } = ElementType - const text = elementList.map(e => !e.type || e.type === TEXT || e.type === HYPERLINK ? e.value : ZERO) + const text = elementList.map(e => !e.type || TEXTLIKE_ELEMENT_TYPE.includes(e.type) ? e.value : ZERO) .filter(Boolean) .join('') const matchStartIndexList = [] diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index a9bc980..f2cdfd7 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -28,6 +28,8 @@ import { ISearchResult } from "../../interface/Search" import { TableTool } from "./particle/table/TableTool" import { HyperlinkParticle } from "./particle/HyperlinkParticle" import { Header } from "./frame/Header" +import { SuperscriptParticle } from "./particle/Superscript" +import { SubscriptParticle } from "./particle/Subscript" export class Draw { @@ -58,6 +60,8 @@ export class Draw { private pageNumber: PageNumber private header: Header private hyperlinkParticle: HyperlinkParticle + private superscriptParticle: SuperscriptParticle + private subscriptParticle: SubscriptParticle private rowList: IRow[] private painterStyle: IElementStyle | null @@ -98,6 +102,9 @@ export class Draw { this.pageNumber = new PageNumber(this) this.header = new Header(this) this.hyperlinkParticle = new HyperlinkParticle(this) + this.superscriptParticle = new SuperscriptParticle() + this.subscriptParticle = new SubscriptParticle() + new GlobalObserver(this) this.canvasEvent = new CanvasEvent(this) @@ -351,7 +358,9 @@ export class Draw { private _getFont(el: IElement, scale: number = 1): string { const { defaultSize, defaultFont } = this.options - return `${el.italic ? 'italic ' : ''}${el.bold ? 'bold ' : ''}${(el.size || defaultSize) * scale}px ${el.font || defaultFont}` + const font = el.font || defaultFont + const size = el.actualSize || el.size || defaultSize + return `${el.italic ? 'italic ' : ''}${el.bold ? 'bold ' : ''}${size * scale}px ${font}` } private _computeRowList(innerWidth: number, elementList: IElement[]) { @@ -435,12 +444,22 @@ export class Draw { metrics.boundingBoxDescent = elementHeight metrics.boundingBoxAscent = 0 } else { - metrics.height = (element.size || this.options.defaultSize) * scale + // 设置上下标真实字体尺寸 + const size = element.size || this.options.defaultSize + if (element.type === ElementType.SUPERSCRIPT || element.type === ElementType.SUBSCRIPT) { + element.actualSize = Math.ceil(size * 0.6) + } + metrics.height = (element.actualSize || size) * scale ctx.font = this._getFont(element) const fontMetrics = this.textParticle.measureText(ctx, element) metrics.width = fontMetrics.width * scale metrics.boundingBoxAscent = (element.value === ZERO ? defaultSize : fontMetrics.actualBoundingBoxAscent) * scale metrics.boundingBoxDescent = fontMetrics.actualBoundingBoxDescent * scale + if (element.type === ElementType.SUPERSCRIPT) { + metrics.boundingBoxAscent += metrics.height / 2 + } else if (element.type === ElementType.SUBSCRIPT) { + metrics.boundingBoxDescent += metrics.height / 2 + } } const ascent = metrics.boundingBoxAscent + rowMargin const descent = metrics.boundingBoxDescent + rowMargin @@ -545,6 +564,12 @@ export class Draw { } else if (element.type === ElementType.HYPERLINK) { this.textParticle.complete() this.hyperlinkParticle.render(ctx, element, x, y + offsetY) + } else if (element.type === ElementType.SUPERSCRIPT) { + this.textParticle.complete() + this.superscriptParticle.render(ctx, element, x, y + offsetY) + } else if (element.type === ElementType.SUBSCRIPT) { + this.textParticle.complete() + this.subscriptParticle.render(ctx, element, x, y + offsetY) } else { this.textParticle.record(ctx, element, x, y + offsetY) } diff --git a/src/editor/core/draw/particle/Subscript.ts b/src/editor/core/draw/particle/Subscript.ts new file mode 100644 index 0000000..6525639 --- /dev/null +++ b/src/editor/core/draw/particle/Subscript.ts @@ -0,0 +1,15 @@ +import { IRowElement } from "../../../interface/Row" + +export class SubscriptParticle { + + public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { + ctx.save() + ctx.font = element.style + if (element.color) { + ctx.fillStyle = element.color + } + ctx.fillText(element.value, x, y + element.metrics.height / 2) + ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/core/draw/particle/Superscript.ts b/src/editor/core/draw/particle/Superscript.ts new file mode 100644 index 0000000..17fd710 --- /dev/null +++ b/src/editor/core/draw/particle/Superscript.ts @@ -0,0 +1,15 @@ +import { IRowElement } from "../../../interface/Row" + +export class SuperscriptParticle { + + public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { + ctx.save() + ctx.font = element.style + if (element.color) { + ctx.fillStyle = element.color + } + ctx.fillText(element.value, x, y - element.metrics.height / 2) + ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index cda6425..d734f6b 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -368,7 +368,7 @@ export class CanvasEvent { if (!this.cursor) return const cursorPosition = this.position.getCursorPosition() if (!data || !cursorPosition || this.isCompositing) return - const { TEXT, HYPERLINK } = ElementType + const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT } = ElementType const text = data.replaceAll(`\n`, ZERO) const elementList = this.draw.getElementList() const agentDom = this.cursor.getAgentDom() @@ -389,10 +389,13 @@ export class CanvasEvent { value, ...restArg } + const nextElement = elementList[endIndex + 1] if ( element.type === TEXT || (!element.type && element.value !== ZERO) - || (element.type === HYPERLINK && elementList[endIndex + 1]?.type === HYPERLINK) + || (element.type === HYPERLINK && nextElement?.type === HYPERLINK) + || (element.type === SUBSCRIPT && nextElement?.type === SUBSCRIPT) + || (element.type === SUPERSCRIPT && nextElement?.type === SUPERSCRIPT) ) { EDITOR_ELEMENT_COPY_ATTR.forEach(attr => { const value = element[attr] as never diff --git a/src/editor/core/range/RangeManager.ts b/src/editor/core/range/RangeManager.ts index 51325eb..46dccde 100644 --- a/src/editor/core/range/RangeManager.ts +++ b/src/editor/core/range/RangeManager.ts @@ -1,3 +1,4 @@ +import { ElementType } from "../.." import { IEditorOption } from "../../interface/Editor" import { IElement } from "../../interface/Element" import { IRange } from "../../interface/Range" @@ -65,6 +66,8 @@ export class RangeManager { } const curElement = curElementList[curElementList.length - 1] if (!curElement) return + // 类型 + const type = curElement.type || ElementType.TEXT // 富文本 const font = curElement.font || this.options.defaultFont let bold = !~curElementList.findIndex(el => !el.bold) @@ -80,6 +83,7 @@ export class RangeManager { const undo = this.historyManager.isCanUndo() const redo = this.historyManager.isCanRedo() this.listener.rangeStyleChange({ + type, undo, redo, painter, @@ -103,6 +107,7 @@ export class RangeManager { const undo = this.historyManager.isCanUndo() const redo = this.historyManager.isCanRedo() this.listener.rangeStyleChange({ + type: null, undo, redo, painter, diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts index a2a32ba..0d32f6f 100644 --- a/src/editor/dataset/constant/Element.ts +++ b/src/editor/dataset/constant/Element.ts @@ -1,3 +1,4 @@ +import { ElementType } from "../enum/Element" import { IElement } from "../../interface/Element" export const EDITOR_ELEMENT_STYLE_ATTR = [ @@ -43,4 +44,11 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array = [ 'url', 'colgroup', 'valueList' +] + +export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [ + ElementType.TEXT, + ElementType.HYPERLINK, + ElementType.SUBSCRIPT, + ElementType.SUPERSCRIPT ] \ No newline at end of file diff --git a/src/editor/dataset/enum/Element.ts b/src/editor/dataset/enum/Element.ts index 4610f8f..e2a10f1 100644 --- a/src/editor/dataset/enum/Element.ts +++ b/src/editor/dataset/enum/Element.ts @@ -2,5 +2,7 @@ export enum ElementType { TEXT = 'text', IMAGE = 'image', TABLE = 'table', - HYPERLINK = 'hyperlink' + HYPERLINK = 'hyperlink', + SUPERSCRIPT = 'superscript', + SUBSCRIPT = 'subscript' } \ No newline at end of file diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts index 2eb1621..f0fdaa1 100644 --- a/src/editor/interface/Element.ts +++ b/src/editor/interface/Element.ts @@ -43,7 +43,11 @@ export interface IHyperlinkElement { export type ITable = ITableAttr & ITableElement -export type IElement = IElementBasic & IElementStyle & ITable & IHyperlinkElement +export interface ISuperscriptSubscript { + actualSize?: number; +} + +export type IElement = IElementBasic & IElementStyle & ITable & IHyperlinkElement & ISuperscriptSubscript export interface IElementMetrics { width: number; diff --git a/src/editor/interface/Listener.ts b/src/editor/interface/Listener.ts index ec86f66..edc34f4 100644 --- a/src/editor/interface/Listener.ts +++ b/src/editor/interface/Listener.ts @@ -1,7 +1,9 @@ +import { ElementType } from ".." import { RowFlex } from "../dataset/enum/Row" import { IEditorResult } from "./Editor" export interface IRangeStype { + type: ElementType | null; undo: boolean; redo: boolean; painter: boolean; diff --git a/src/editor/utils/clipboard.ts b/src/editor/utils/clipboard.ts index 038868a..ba0e335 100644 --- a/src/editor/utils/clipboard.ts +++ b/src/editor/utils/clipboard.ts @@ -1,5 +1,6 @@ -import { ElementType, IElement } from ".." +import { IElement } from ".." import { ZERO } from "../dataset/constant/Common" +import { TEXTLIKE_ELEMENT_TYPE } from "../dataset/constant/Element" export function writeText(text: string) { if (!text) return @@ -7,9 +8,8 @@ export function writeText(text: string) { } export function writeTextByElementList(elementList: IElement[]) { - const { TEXT, HYPERLINK } = ElementType const text = elementList - .map(p => !p.type || p.type === TEXT || p.type === HYPERLINK ? p.value : '') + .map(p => !p.type || TEXTLIKE_ELEMENT_TYPE.includes(p.type) ? p.value : '') .join('') writeText(text) } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 844a75f..c645847 100644 --- a/src/main.ts +++ b/src/main.ts @@ -81,7 +81,15 @@ window.onload = function () { }], url: 'https://hufe.club/canvas-editor' }) - data.splice(592, 0, { + data.splice(383, 0, { + value: '轻', + type: ElementType.SUBSCRIPT + }) + data.splice(392, 0, { + value: '急', + type: ElementType.SUPERSCRIPT + }) + data.splice(594, 0, { value: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFkAAAAgCAYAAAB5JtSmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQ0SURBVGhD7dhrUSNBFAVgvKACEVjAAhJQgAIUYAABGEAABvgfAdn6UnWou01PppOZhIXNj1P9vo9zH5PK1Waz2V5wWlxIPgMuJJ8Bi0h+fn7eXl9fb29ubrYPDw/dO/8DHh8fu/vB4kym4Orqaofb29vund8OSSbhemewSrugBMnG3vlvw9vb265yn56edmtz/t/f33+5C8MkixQSZSsl9UzLOHUmcwTYAN/Rpl5eXnY+pnIB0Xd3d7s5m3rvDsrkCGszNiQ7r/tr4v39fSc/uipOqRcqufTHBiO78GGdzG5xcLtIFmVde7L9NsvXRo9s84+Pj+79pUAwn5GcD1wIz5r+fYGeJdnjGiF9hwL7iWAcfX19/evtKVHJXrtN8Rf4A3TVczqhrut5i1mSZQgnIriSWtdzP2N+EvIhi3/GWqHWtWXuy2IYbheiKarJZIZknkxyrryc2Utrgal+9S8iScUXIx/3kcxfe/jotcuDezLFlIbARDrzHpytXdKnQr4xyc74Vu9YV5Ih2Q/tT7mDSEYw5ZU4wu3nJx64k/1z9umlUG0hah/JSbC6Jzi5exDJWoTHERoBxu8uf/pT1j3HDkUIJitjbRfRA/iwVzlgy1RCfSF5ili9xj7BUWKs9wJZ3MpditYu+lsc+/PRx53cVF9Pdg/syE9Hb6cS75PkmhUEUFofmTvLGEXKimHueJP9Y3swWQwGLUiA9xEbHKuvgs4pPe1+1myTAKlw81buJ8kigjAXKauXPLQPhEYgJSEYsgdTUR0BmTVgc6C359wcvKGnBrGO8dO5VlD1ZZ519nrBHvrwKVMCas9hgL0YUI2wV98fC4FqCWizzXyqF44A0ZKLHkilgvPs1zbiTuZIdZ414KvqGCKZYx4zple+MSrrJVncAyL02/TOqncJwVMglx5zI4QDZ5WPvBGEcNP+7TlEcqJIAQFGsIdQjmZt7MlYA5yiI3pOQTCQXUm2TuVmXgmewxDJQDgl6deJJoU5y7p9uwZagmu1mCvbNoOOBfkhOf6lRZjzPb8qRjBMMiUhM9GNMZQq5/oRXBP7Mlj/i12A7EMIaJGqDcl8I79+/N1xTvdINQ2TDAQSvI9Md479vdqCHKSFQKAfEmgBqCTDkjaSgOZXQkg2jy1ti0xApnBQJo/0obQRipeQXbN3CmxKGQch5xgki4Efghl/kFqzPD//2DnXIodIRpaoETaXxcmwGNO7N4I2Oyuc6b+xK/tL9IH3kY/E+r1JdST4yM+7VUiuJbuPZHBeHZcNvXtziMMV9mRuvUOX8Vg9IFjRx9dUYM3s2oJyNx9ahFfSWwyRHKHG3nmL2q/mojyFVAWnEdi2Hg7OBXwUCCKr1QEtoe0+/9jI3xqIiuF2QRD0zqcwpfQnge9TVSI4tWrNe79shj98F0xDC0N4bTUVF5LPgAvJJ8dm+wcP2iJuZNdC5QAAAABJRU5ErkJggg==`, width: 89, height: 32, @@ -263,6 +271,16 @@ window.onload = function () { console.log('strikeout') instance.command.executeStrikeout() } + const superscriptDom = document.querySelector('.menu-item__superscript')! + superscriptDom.onclick = function () { + console.log('superscript') + instance.command.executeSuperscript() + } + const subscriptDom = document.querySelector('.menu-item__subscript')! + subscriptDom.onclick = function () { + console.log('subscript') + instance.command.executeSubscript() + } const colorControlDom = document.querySelector('#color')! colorControlDom.onchange = function () { instance.command.executeColor(colorControlDom!.value) @@ -479,6 +497,9 @@ window.onload = function () { // 内部事件监听 instance.listener.rangeStyleChange = function (payload) { + // 控件类型 + payload.type === ElementType.SUBSCRIPT ? subscriptDom.classList.add('active') : subscriptDom.classList.remove('active') + payload.type === ElementType.SUPERSCRIPT ? superscriptDom.classList.add('active') : superscriptDom.classList.remove('active') // 富文本 const curFontDom = fontOptionDom.querySelector(`[data-family=${payload.font}]`)! fontSelectDom.innerText = curFontDom.innerText diff --git a/src/style.css b/src/style.css index 8089a1c..f528b0f 100644 --- a/src/style.css +++ b/src/style.css @@ -213,6 +213,14 @@ ul { background-image: url('./assets/images/strikeout.svg'); } +.menu-item__superscript i { + background-image: url('./assets/images/superscript.svg'); +} + +.menu-item__subscript i { + background-image: url('./assets/images/subscript.svg'); +} + .menu-item__color, .menu-item__highlight { display: flex;