diff --git a/index.html b/index.html index 6c2b510..9925d65 100644 --- a/index.html +++ b/index.html @@ -96,6 +96,10 @@
+
+ + +
diff --git a/src/assets/images/image.svg b/src/assets/images/image.svg new file mode 100644 index 0000000..7b43678 --- /dev/null +++ b/src/assets/images/image.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 d73e0c3..acc8535 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -1,4 +1,5 @@ import { RowFlex } from "../../dataset/enum/Row" +import { IDrawImagePayload } from "../../interface/Draw" import { CommandAdapt } from "./CommandAdapt" export class Command { @@ -20,6 +21,7 @@ export class Command { private static center: Function private static right: Function private static rowMargin: Function + private static image: Function private static search: Function private static print: Function @@ -41,6 +43,7 @@ export class Command { Command.center = adapt.rowFlex.bind(adapt) Command.right = adapt.rowFlex.bind(adapt) Command.rowMargin = adapt.rowMargin.bind(adapt) + Command.image = adapt.image.bind(adapt) Command.search = adapt.search.bind(adapt) Command.print = adapt.print.bind(adapt) } @@ -115,7 +118,11 @@ export class Command { return Command.rowMargin(payload) } - // 搜索、打印 + // 图片上传、搜索、打印 + public executeImage(payload: IDrawImagePayload) { + return Command.image(payload) + } + 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 5686b52..fae8e5c 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -1,7 +1,11 @@ +import { ZERO } from "../../dataset/constant/Common" +import { ElementType } from "../../dataset/enum/Element" import { ElementStyleKey } from "../../dataset/enum/ElementStyle" import { RowFlex } from "../../dataset/enum/Row" +import { IDrawImagePayload } from "../../interface/Draw" import { IEditorOption } from "../../interface/Editor" -import { IElementStyle } from "../../interface/Element" +import { IElement, IElementStyle } from "../../interface/Element" +import { getUUID } from "../../utils" import { printImageBase64 } from "../../utils/print" import { Draw } from "../draw/Draw" import { HistoryManager } from "../history/HistoryManager" @@ -205,10 +209,32 @@ export class CommandAdapt { this.draw.render({ curIndex, isSetCursor }) } + public image(payload: IDrawImagePayload) { + const { startIndex, endIndex } = this.range.getRange() + if (startIndex === 0 && endIndex === 0) return + const elementList = this.draw.getElementList() + const { value, width, height } = payload + const element: IElement = { + value, + width, + height, + id: getUUID(), + type: ElementType.IMAGE + } + const curIndex = startIndex + 1 + if (startIndex === endIndex) { + elementList.splice(curIndex, 0, element) + } else { + elementList.splice(curIndex, endIndex - startIndex, element) + this.range.setRange(curIndex, curIndex) + } + this.draw.render({ curIndex }) + } + public search(payload: string | null) { if (payload) { const elementList = this.draw.getElementList() - const text = elementList.map(e => !e.type || e.type === 'TEXT' ? e.value : null) + const text = elementList.map(e => !e.type || e.type === ElementType.TEXT ? e.value : ZERO) .filter(Boolean) .join('') const matchStartIndexList = [] diff --git a/src/editor/core/cursor/Cursor.ts b/src/editor/core/cursor/Cursor.ts index 49563f8..74d3af7 100644 --- a/src/editor/core/cursor/Cursor.ts +++ b/src/editor/core/cursor/Cursor.ts @@ -1,3 +1,4 @@ +import { CURSOR_AGENT_HEIGHT } from "../../dataset/constant/Cursor" import { Draw } from "../draw/Draw" import { CanvasEvent } from "../event/CanvasEvent" import { Position } from "../position/Position" @@ -48,18 +49,19 @@ export class Cursor { if (!cursorPosition) return // 设置光标代理 const { metrics, coordinate: { leftTop, rightTop }, ascent } = cursorPosition - const height = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent + const height = metrics.boundingBoxAscent + metrics.boundingBoxDescent const agentCursorDom = this.cursorAgent.getAgentCursorDom() setTimeout(() => { agentCursorDom.focus() agentCursorDom.setSelectionRange(0, 0) }) - const curosrleft = `${rightTop[0]}px` - agentCursorDom.style.left = curosrleft - agentCursorDom.style.top = `${leftTop[1] + ascent - 12}px` + const cursorTop = leftTop[1] + ascent - metrics.boundingBoxAscent + const curosrleft = rightTop[0] + agentCursorDom.style.left = `${curosrleft}px` + agentCursorDom.style.top = `${cursorTop + height - CURSOR_AGENT_HEIGHT}px` // 模拟光标显示 - this.cursorDom.style.left = curosrleft - this.cursorDom.style.top = `${leftTop[1] + ascent - metrics.fontBoundingBoxAscent}px` + this.cursorDom.style.left = `${curosrleft}px` + this.cursorDom.style.top = `${cursorTop}px` this.cursorDom.style.display = 'block' this.cursorDom.style.height = `${height}px` setTimeout(() => { diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 14df5a1..0172345 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -2,8 +2,8 @@ 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" -import { IRow } from "../../interface/Row" +import { IElement, IElementMetrics, IElementPosition, IElementStyle } from "../../interface/Element" +import { IRow, IRowElement } from "../../interface/Row" import { deepClone } from "../../utils" import { Cursor } from "../cursor/Cursor" import { CanvasEvent } from "../event/CanvasEvent" @@ -12,12 +12,14 @@ import { HistoryManager } from "../history/HistoryManager" import { Listener } from "../listener/Listener" import { Position } from "../position/Position" import { RangeManager } from "../range/RangeManager" -import { Background } from "./Background" -import { Highlight } from "./Highlight" -import { Margin } from "./Margin" -import { Search } from "./Search" -import { Strikeout } from "./Strikeout" -import { Underline } from "./Underline" +import { Background } from "./frame/Background" +import { Highlight } from "./richtext/Highlight" +import { Margin } from "./frame/Margin" +import { Search } from "./interactive/Search" +import { Strikeout } from "./richtext/Strikeout" +import { Underline } from "./richtext/Underline" +import { ElementType } from "../../dataset/enum/Element" +import { ImageParticle } from "./particle/ImageParticle" export class Draw { @@ -37,6 +39,7 @@ export class Draw { private strikeout: Strikeout private highlight: Highlight private historyManager: HistoryManager + private imageParticle: ImageParticle private rowCount: number private painterStyle: IElementStyle | null @@ -64,6 +67,7 @@ export class Draw { this.underline = new Underline(ctx, options) this.strikeout = new Strikeout(ctx, options) this.highlight = new Highlight(ctx, options) + this.imageParticle = new ImageParticle(ctx) const canvasEvent = new CanvasEvent(canvas, this) this.cursor = new Cursor(canvas, this, canvasEvent) @@ -179,29 +183,47 @@ export class Draw { this.ctx.save() const curRow: IRow = rowList[rowList.length - 1] const element = this.elementList[i] - this.ctx.font = this.getFont(element) - const metrics = this.ctx.measureText(element.value) - const width = metrics.width const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin) - const fontBoundingBoxAscent = metrics.fontBoundingBoxAscent + rowMargin - const fontBoundingBoxDescent = metrics.fontBoundingBoxDescent + rowMargin - const height = fontBoundingBoxAscent + fontBoundingBoxDescent - const lineText = { ...element, metrics } - if (curRow.width + width > rightTopPoint[0] - leftTopPoint[0] || (i !== 0 && element.value === ZERO)) { + let metrics: IElementMetrics = { + width: 0, + boundingBoxAscent: 0, + boundingBoxDescent: 0 + } + if (element.type === ElementType.IMAGE) { + metrics.width = element.width! + metrics.boundingBoxAscent = 0 + metrics.boundingBoxDescent = element.height! + } else { + this.ctx.font = this.getFont(element) + const fontMetrics = this.ctx.measureText(element.value) + metrics.width = fontMetrics.width + metrics.boundingBoxAscent = fontMetrics.fontBoundingBoxAscent + metrics.boundingBoxDescent = fontMetrics.fontBoundingBoxDescent + } + const ascent = metrics.boundingBoxAscent + rowMargin + const descent = metrics.boundingBoxDescent + rowMargin + const height = ascent + descent + const rowElement: IRowElement = { ...element, metrics } + // 超过限定宽度 + if (curRow.width + metrics.width > rightTopPoint[0] - leftTopPoint[0] || (i !== 0 && element.value === ZERO)) { rowList.push({ - width, + width: metrics.width, height: this.options.defaultSize, - elementList: [lineText], - ascent: fontBoundingBoxAscent, - rowFlex: lineText.rowFlex + elementList: [rowElement], + ascent, + rowFlex: rowElement.rowFlex }) } else { - curRow.width += width + curRow.width += metrics.width if (curRow.height < height) { curRow.height = height - curRow.ascent = fontBoundingBoxAscent + if (element.type === ElementType.IMAGE) { + curRow.ascent = element.height! + } else { + curRow.ascent = ascent + } } - curRow.elementList.push(lineText) + curRow.elementList.push(rowElement) } this.ctx.restore() } @@ -224,16 +246,21 @@ export class Draw { this.ctx.save() const element = curRow.elementList[j] const metrics = element.metrics - this.ctx.font = this.getFont(element) - if (element.color) { - this.ctx.fillStyle = element.color + if (!element.type || element.type === ElementType.TEXT) { + this.ctx.font = this.getFont(element) + if (element.color) { + this.ctx.fillStyle = element.color + } } + const offsetY = element.type === ElementType.IMAGE + ? curRow.ascent - element.height! + : curRow.ascent const positionItem: IElementPosition = { index, value: element.value, rowNo: i, metrics, - ascent: curRow.ascent, + ascent: offsetY, lineHeight: curRow.height, isLastLetter: j === curRow.elementList.length - 1, coordinate: { @@ -252,12 +279,16 @@ export class Draw { if (element.strikeout) { this.strikeout.render(x, y + curRow.height / 2, metrics.width) } - // 文本高亮 + // 元素高亮 if (element.highlight) { this.highlight.render(element.highlight, x, y, metrics.width, curRow.height) } - // 文本 - this.ctx.fillText(element.value, x, y + curRow.ascent) + // 元素绘制 + if (element.type === ElementType.IMAGE) { + this.imageParticle.render(element, x, y + offsetY) + } else { + this.ctx.fillText(element.value, x, y + offsetY) + } // 选区绘制 const { startIndex, endIndex } = this.range.getRange() if (startIndex !== endIndex && startIndex < index && index <= endIndex) { diff --git a/src/editor/core/draw/Background.ts b/src/editor/core/draw/frame/Background.ts similarity index 100% rename from src/editor/core/draw/Background.ts rename to src/editor/core/draw/frame/Background.ts diff --git a/src/editor/core/draw/Margin.ts b/src/editor/core/draw/frame/Margin.ts similarity index 96% rename from src/editor/core/draw/Margin.ts rename to src/editor/core/draw/frame/Margin.ts index 7652914..c4169f0 100644 --- a/src/editor/core/draw/Margin.ts +++ b/src/editor/core/draw/frame/Margin.ts @@ -1,4 +1,4 @@ -import { IEditorOption } from "../../interface/Editor" +import { IEditorOption } from "../../../interface/Editor" export class Margin { diff --git a/src/editor/core/draw/Search.ts b/src/editor/core/draw/interactive/Search.ts similarity index 88% rename from src/editor/core/draw/Search.ts rename to src/editor/core/draw/interactive/Search.ts index 33af0f7..9b4d8b9 100644 --- a/src/editor/core/draw/Search.ts +++ b/src/editor/core/draw/interactive/Search.ts @@ -1,6 +1,6 @@ -import { IEditorOption } from "../../interface/Editor" -import { Position } from "../position/Position" -import { Draw } from "./Draw" +import { IEditorOption } from "../../../interface/Editor" +import { Position } from "../../position/Position" +import { Draw } from "../Draw" export class Search { diff --git a/src/editor/core/draw/particle/ImageParticle.ts b/src/editor/core/draw/particle/ImageParticle.ts new file mode 100644 index 0000000..1f38460 --- /dev/null +++ b/src/editor/core/draw/particle/ImageParticle.ts @@ -0,0 +1,31 @@ +import { IElement } from "../../../interface/Element"; + +export class ImageParticle { + + private ctx: CanvasRenderingContext2D + private imageCache: Map; + + constructor(ctx: CanvasRenderingContext2D) { + this.ctx = ctx + this.imageCache = new Map() + } + + public getImageCache(): Map { + return this.imageCache + } + + render(element: IElement, x: number, y: number) { + if (this.imageCache.has(element.id!)) { + const img = this.imageCache.get(element.id!)! + this.ctx.drawImage(img, x, y, element.width!, element.height!) + } else { + const img = new Image() + img.src = element.value + img.onload = () => { + this.ctx.drawImage(img, x, y, img.width, img.height) + this.imageCache.set(element.id!, img) + } + } + } + +} \ No newline at end of file diff --git a/src/editor/core/draw/Highlight.ts b/src/editor/core/draw/richtext/Highlight.ts similarity index 89% rename from src/editor/core/draw/Highlight.ts rename to src/editor/core/draw/richtext/Highlight.ts index 9d29669..c86bbae 100644 --- a/src/editor/core/draw/Highlight.ts +++ b/src/editor/core/draw/richtext/Highlight.ts @@ -1,4 +1,4 @@ -import { IEditorOption } from "../../interface/Editor" +import { IEditorOption } from "../../../interface/Editor" export class Highlight { diff --git a/src/editor/core/draw/Strikeout.ts b/src/editor/core/draw/richtext/Strikeout.ts similarity index 90% rename from src/editor/core/draw/Strikeout.ts rename to src/editor/core/draw/richtext/Strikeout.ts index 6b35ef8..8c97a24 100644 --- a/src/editor/core/draw/Strikeout.ts +++ b/src/editor/core/draw/richtext/Strikeout.ts @@ -1,4 +1,4 @@ -import { IEditorOption } from "../../interface/Editor" +import { IEditorOption } from "../../../interface/Editor" export class Strikeout { diff --git a/src/editor/core/draw/Underline.ts b/src/editor/core/draw/richtext/Underline.ts similarity index 90% rename from src/editor/core/draw/Underline.ts rename to src/editor/core/draw/richtext/Underline.ts index cb63f44..7726745 100644 --- a/src/editor/core/draw/Underline.ts +++ b/src/editor/core/draw/richtext/Underline.ts @@ -1,4 +1,4 @@ -import { IEditorOption } from "../../interface/Editor" +import { IEditorOption } from "../../../interface/Editor" export class Underline { diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index fb26e3b..3bb661a 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -2,7 +2,7 @@ import { ZERO } from "../../dataset/constant/Common" import { ElementStyleKey } from "../../dataset/enum/ElementStyle" import { KeyMap } from "../../dataset/enum/Keymap" import { IElement } from "../../interface/Element" -import { writeText } from "../../utils/clipboard" +import { writeTextByElementList } from "../../utils/clipboard" import { Cursor } from "../cursor/Cursor" import { Draw } from "../draw/Draw" import { HistoryManager } from "../history/HistoryManager" @@ -187,11 +187,11 @@ export class CanvasEvent { evt.preventDefault() } else if (evt.ctrlKey && evt.key === KeyMap.C) { if (!isCollspace) { - writeText(elementList.slice(startIndex + 1, endIndex + 1).map(p => p.value).join('')) + writeTextByElementList(elementList.slice(startIndex + 1, endIndex + 1)) } } else if (evt.ctrlKey && evt.key === KeyMap.X) { if (!isCollspace) { - writeText(position.slice(startIndex + 1, endIndex + 1).map(p => p.value).join('')) + writeTextByElementList(elementList.slice(startIndex + 1, endIndex + 1)) elementList.splice(startIndex + 1, endIndex - startIndex) const curIndex = startIndex this.range.setRange(curIndex, curIndex) diff --git a/src/editor/dataset/constant/Cursor.ts b/src/editor/dataset/constant/Cursor.ts new file mode 100644 index 0000000..780c4a0 --- /dev/null +++ b/src/editor/dataset/constant/Cursor.ts @@ -0,0 +1 @@ +export const CURSOR_AGENT_HEIGHT = 12 diff --git a/src/editor/dataset/enum/Element.ts b/src/editor/dataset/enum/Element.ts new file mode 100644 index 0000000..92019a7 --- /dev/null +++ b/src/editor/dataset/enum/Element.ts @@ -0,0 +1,4 @@ +export enum ElementType { + TEXT = 'text', + IMAGE = 'image' +} \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index abf0573..de5694c 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -7,6 +7,8 @@ import { Command } from './core/command/Command' import { CommandAdapt } from './core/command/CommandAdapt' import { Listener } from './core/listener/Listener' import { RowFlex } from './dataset/enum/Row' +import { getUUID } from './utils' +import { ElementType } from './dataset/enum/Element' export default class Editor { @@ -43,10 +45,11 @@ export default class Editor { value: ZERO }) } - elementList.forEach(text => { - if (text.value === '\n') { - text.value = ZERO + elementList.forEach(el => { + if (el.value === '\n') { + el.value = ZERO } + el.id = getUUID() }) // 监听 this.listener = new Listener() @@ -59,8 +62,14 @@ export default class Editor { } -// 对外属性 +// 对外对象 export { Editor, - RowFlex + RowFlex, + ElementType +} + +// 对外类型 +export type { + IElement } \ No newline at end of file diff --git a/src/editor/interface/Draw.ts b/src/editor/interface/Draw.ts index ac0253b..521d7f9 100644 --- a/src/editor/interface/Draw.ts +++ b/src/editor/interface/Draw.ts @@ -1,5 +1,11 @@ export interface IDrawOption { curIndex?: number; - isSetCursor?: boolean + isSetCursor?: boolean; isSubmitHistory?: boolean; +} + +export interface IDrawImagePayload { + width: number; + height: number; + value: string; } \ No newline at end of file diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts index 307fcee..eabf798 100644 --- a/src/editor/interface/Element.ts +++ b/src/editor/interface/Element.ts @@ -1,5 +1,12 @@ +import { ElementType } from "../dataset/enum/Element" import { RowFlex } from "../dataset/enum/Row" +export interface IElementMetrics { + width: number; + boundingBoxAscent: number; + boundingBoxDescent: number; +} + export interface IElementStyle { font?: string; size?: number; @@ -16,7 +23,8 @@ export interface IElementStyle { } export interface IElementBasic { - type?: 'TEXT' | 'IMAGE'; + id?: string; + type?: ElementType; value: string; } @@ -28,7 +36,7 @@ export interface IElementPosition { rowNo: number; ascent: number; lineHeight: number; - metrics: TextMetrics; + metrics: IElementMetrics; isLastLetter: boolean, coordinate: { leftTop: number[]; diff --git a/src/editor/interface/Row.ts b/src/editor/interface/Row.ts index 7fe9084..30a5337 100644 --- a/src/editor/interface/Row.ts +++ b/src/editor/interface/Row.ts @@ -1,8 +1,8 @@ import { RowFlex } from "../dataset/enum/Row" -import { IElement } from "./Element" +import { IElement, IElementMetrics } from "./Element" export type IRowElement = IElement & { - metrics: TextMetrics + metrics: IElementMetrics } export interface IRow { diff --git a/src/editor/utils/clipboard.ts b/src/editor/utils/clipboard.ts index fa1d3dc..7253e16 100644 --- a/src/editor/utils/clipboard.ts +++ b/src/editor/utils/clipboard.ts @@ -1,6 +1,14 @@ +import { ElementType, IElement } from ".." import { ZERO } from "../dataset/constant/Common" export function writeText(text: string) { if (!text) return window.navigator.clipboard.writeText(text.replaceAll(ZERO, `\n`)) +} + +export function writeTextByElementList(elementList: IElement[]) { + const text = elementList + .map(p => !p.type || p.type === ElementType.TEXT ? p.value : '') + .join('') + writeText(text) } \ No newline at end of file diff --git a/src/editor/utils/index.ts b/src/editor/utils/index.ts index db4038c..d8ef44a 100644 --- a/src/editor/utils/index.ts +++ b/src/editor/utils/index.ts @@ -41,4 +41,11 @@ export function findParent(node: Element, filterFn: Function, includeSelf: boole } } return null +} + +export function getUUID(): string { + function S4(): string { + return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + } + return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4()) } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 1709dd4..3ece8e1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,5 @@ import './style.css' -import Editor, { RowFlex } from './editor' +import Editor, { IElement, RowFlex } from './editor' window.onload = function () { @@ -31,7 +31,7 @@ window.onload = function () { return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : [] }).flat() // 组合数据 - const data = text.split('').map((value, index) => { + const data: IElement[] = text.split('').map((value, index) => { if (centerIndex.includes(index)) { return { value, @@ -177,7 +177,30 @@ window.onload = function () { const li = evt.target as HTMLLIElement instance.command.executeRowMargin(Number(li.dataset.rowmargin!)) } - // 搜索、打印 + // 图片上传、搜索、打印 + const imageDom = document.querySelector('.menu-item__image')! + const imageFileDom = document.querySelector('#image')! + imageDom.onclick = function () { + imageFileDom.click() + } + imageFileDom.onchange = function () { + const file = imageFileDom.files?.[0]! + const fileReader = new FileReader() + fileReader.readAsDataURL(file) + fileReader.onload = function () { + // 计算宽高 + const image = new Image() + const value = fileReader.result as string + image.src = value + image.onload = function () { + instance.command.executeImage({ + value, + width: image.width, + height: image.height, + }) + } + } + } const collspanDom = document.querySelector('.menu-item__search__collapse') const searchInputDom = document.querySelector('.menu-item__search__collapse__search input') document.querySelector('.menu-item__search')!.onclick = function () { diff --git a/src/style.css b/src/style.css index 8057424..6f5910f 100644 --- a/src/style.css +++ b/src/style.css @@ -232,6 +232,14 @@ ul { background-image: url('./assets/images/row-margin.svg'); } +.menu-item__image i { + background-image: url('./assets/images/image.svg'); +} + +.menu-item__image input { + display: none; +} + .menu-item__search { position: relative; }