From 34d778dcaa12e29fdb51eeb427dedc9fe865fabd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Wed, 22 Dec 2021 21:50:11 +0800 Subject: [PATCH] feat: add hyperlink --- index.html | 3 + src/assets/images/close.svg | 1 + src/assets/images/hyperlink.svg | 1 + src/components/dialog/Dialog.ts | 136 ++++++++++++++++++ src/components/dialog/dialog.css | 119 +++++++++++++++ src/editor/assets/css/index.css | 24 ++++ src/editor/core/command/Command.ts | 9 +- src/editor/core/command/CommandAdapt.ts | 27 +++- src/editor/core/draw/Draw.ts | 35 +++-- .../core/draw/particle/HyperlinkParticle.ts | 67 +++++++++ src/editor/core/draw/richtext/Underline.ts | 4 +- src/editor/core/event/CanvasEvent.ts | 63 +++++--- src/editor/core/event/GlobalEvent.ts | 4 + src/editor/dataset/enum/Editor.ts | 1 + src/editor/dataset/enum/Element.ts | 3 +- src/editor/index.ts | 7 +- src/editor/interface/Editor.ts | 1 + src/editor/interface/Element.ts | 8 +- src/editor/utils/clipboard.ts | 3 +- src/editor/utils/element.ts | 21 ++- src/main.ts | 56 +++++++- src/style.css | 4 + 22 files changed, 554 insertions(+), 43 deletions(-) create mode 100644 src/assets/images/close.svg create mode 100644 src/assets/images/hyperlink.svg create mode 100644 src/components/dialog/Dialog.ts create mode 100644 src/components/dialog/dialog.css create mode 100644 src/editor/core/draw/particle/HyperlinkParticle.ts diff --git a/index.html b/index.html index 2778feb..7948ea5 100644 --- a/index.html +++ b/index.html @@ -111,6 +111,9 @@ +
+ +
diff --git a/src/assets/images/close.svg b/src/assets/images/close.svg new file mode 100644 index 0000000..e5b1c23 --- /dev/null +++ b/src/assets/images/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/hyperlink.svg b/src/assets/images/hyperlink.svg new file mode 100644 index 0000000..45090f6 --- /dev/null +++ b/src/assets/images/hyperlink.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/dialog/Dialog.ts b/src/components/dialog/Dialog.ts new file mode 100644 index 0000000..3778a42 --- /dev/null +++ b/src/components/dialog/Dialog.ts @@ -0,0 +1,136 @@ +import { EditorComponent, EDITOR_COMPONENT } from '../../editor' +import './dialog.css' + +export interface IDialogData { + type: string; + label: string; + name: string; + value?: string; + placeholder?: string; +} + +export interface IDialogConfirm { + name: string; + value: string; +} + +export interface IDialogOptions { + onClose?: () => void; + onCancel?: () => void; + onConfirm?: (payload: IDialogConfirm[]) => void; + title: string; + data: IDialogData[]; +} + +export class Dialog { + + private options: IDialogOptions + private mask: HTMLDivElement | null + private container: HTMLDivElement | null + private inputList: HTMLInputElement[] + + constructor(options: IDialogOptions) { + this.options = options + this.mask = null + this.container = null + this.inputList = [] + this._render() + } + + private _render() { + const { title, data, onClose, onCancel, onConfirm } = this.options + // 渲染遮罩层 + const mask = document.createElement('div') + mask.classList.add('dialog-mask') + mask.setAttribute(EDITOR_COMPONENT, EditorComponent.COMPONENT) + document.body.append(mask) + // 渲染容器 + const container = document.createElement('div') + container.classList.add('dialog-container') + container.setAttribute(EDITOR_COMPONENT, EditorComponent.COMPONENT) + // 弹窗 + const dialogContainer = document.createElement('div') + dialogContainer.classList.add('dialog') + container.append(dialogContainer) + // 标题容器 + const titleContainer = document.createElement('div') + titleContainer.classList.add('dialog-title') + // 标题&关闭按钮 + const titleSpan = document.createElement('span') + titleSpan.append(document.createTextNode(title)) + const titleClose = document.createElement('i') + titleClose.onclick = () => { + if (onClose) { + onClose() + } + this._dispose() + } + titleContainer.append(titleSpan) + titleContainer.append(titleClose) + dialogContainer.append(titleContainer) + // 选项容器 + const optionContainer = document.createElement('div') + optionContainer.classList.add('dialog-option') + // 选项 + for (let i = 0; i < data.length; i++) { + const option = data[i] + const optionItemContainer = document.createElement('div') + optionItemContainer.classList.add('dialog-option__item') + // 选项名称 + const optionName = document.createElement('span') + optionName.append(document.createTextNode(option.label)) + optionItemContainer.append(optionName) + // 选项输入框 + const optionInput = document.createElement('input') + optionInput.type = option.type + optionInput.name = option.name + optionInput.value = option.value || '' + optionInput.placeholder = option.placeholder || '' + optionItemContainer.append(optionInput) + optionContainer.append(optionItemContainer) + this.inputList.push(optionInput) + } + dialogContainer.append(optionContainer) + // 按钮容器 + const menuContainer = document.createElement('div') + menuContainer.classList.add('dialog-menu') + // 取消按钮 + const cancelBtn = document.createElement('button') + cancelBtn.classList.add('dialog-menu__cancel') + cancelBtn.append(document.createTextNode('取消')) + cancelBtn.type = 'default' + cancelBtn.onclick = () => { + if (onCancel) { + onCancel() + } + this._dispose() + } + menuContainer.append(cancelBtn) + // 确认按钮 + const confirmBtn = document.createElement('button') + confirmBtn.append(document.createTextNode('确定')) + confirmBtn.type = 'primary' + confirmBtn.onclick = () => { + if (onConfirm) { + const payload = this.inputList.map(input => ({ + name: input.name, + value: input.value + })) + onConfirm(payload) + } + this._dispose() + } + menuContainer.append(confirmBtn) + dialogContainer.append(menuContainer) + // 渲染 + document.body.append(container) + this.container = container + this.mask = mask + } + + private _dispose() { + this.mask?.remove() + this.container?.remove() + } + +} \ No newline at end of file diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css new file mode 100644 index 0000000..a4b08d2 --- /dev/null +++ b/src/components/dialog/dialog.css @@ -0,0 +1,119 @@ +.dialog-mask { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: .5; + background: #000000; + z-index: 99; +} + +.dialog-container { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + z-index: 999; + margin: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.dialog { + position: absolute; + padding: 0 30px 30px; + background: #ffffff; + box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%); + border: 1px solid #e2e6ed; + border-radius: 2px; +} + +.dialog-title { + position: relative; + border-bottom: 1px solid #e2e6ed; + margin-bottom: 30px; + height: 60px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.dialog-title i { + width: 16px; + height: 16px; + cursor: pointer; + display: inline-block; + background: url(../../assets/images/close.svg); +} + +.dialog-option__item { + margin-bottom: 18px; + height: 30px; + display: flex; + align-items: center; +} + +.dialog-option__item span { + margin-right: 12px; + font-size: 14px; + color: #3d4757; +} + +.dialog-option__item input { + width: 276px; + height: 30px; + border-radius: 2px; + border: 1px solid #d3d3d3; + min-height: 30px; + line-height: 17px; + padding: 5px; + box-sizing: border-box; + outline: none; + appearance: none; + user-select: none; +} + +.dialog-option__item input:focus { + border-color: #4991f2; +} + +.dialog-menu { + display: flex; + align-items: center; + justify-content: flex-end; +} + +.dialog-menu button { + position: relative; + display: inline-block; + border: 1px solid #e2e6ed; + border-radius: 2px; + background: #ffffff; + line-height: 22px; + padding: 0 16px; + white-space: nowrap; + cursor: pointer; +} + +.dialog-menu button:hover { + background: rgba(25, 55, 88, .04); +} + +.dialog-menu__cancel { + margin-right: 16px; +} + +.dialog-menu button[type='primary'] { + color: #ffffff; + background: #4991f2; + border-color: #4991f2; +} + +.dialog-menu button[type='primary']:hover { + background: #5b9cf3; + border-color: #5b9cf3; +} \ No newline at end of file diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css index 1036a24..972bfda 100644 --- a/src/editor/assets/css/index.css +++ b/src/editor/assets/css/index.css @@ -306,4 +306,28 @@ .contextmenu-delete-table { background-image: url(../../assets/images/delete-table.svg); +} + +.hyperlink-popup { + min-width: 100px; + font-size: 12px; + line-height: 20px; + background: #fff; + box-shadow: 0 2px 12px 0 rgb(98 107 132 / 20%); + border-radius: 2px; + color: #3d4757; + padding: 16px; + white-space: nowrap; + position: absolute; + text-align: center; + display: none; +} + +.hyperlink-popup a { + cursor: pointer; + text-decoration: none; + border-bottom-width: 1px; + border-bottom-style: solid; + padding-bottom: 2px; + color: #0000ff; } \ No newline at end of file diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 97968d0..36715ae 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -1,3 +1,4 @@ +import { IElement } from "../.." import { RowFlex } from "../../dataset/enum/Row" import { IDrawImagePayload } from "../../interface/Draw" import { CommandAdapt } from "./CommandAdapt" @@ -34,6 +35,7 @@ export class Command { private static deleteTableCol: Function private static deleteTable: Function private static image: Function + private static hyperlink: Function private static search: Function private static print: Function private static pageScaleRecovery: Function @@ -71,6 +73,7 @@ export class Command { Command.deleteTableCol = adapt.deleteTableCol.bind(adapt) Command.deleteTable = adapt.deleteTable.bind(adapt) Command.image = adapt.image.bind(adapt) + Command.hyperlink = adapt.hyperlink.bind(adapt) Command.search = adapt.search.bind(adapt) Command.print = adapt.print.bind(adapt) Command.pageScaleRecovery = adapt.pageScaleRecovery.bind(adapt) @@ -165,7 +168,7 @@ export class Command { return Command.rowMargin(payload) } - // 表格、图片上传、搜索、打印 + // 表格、图片上传、超链接、搜索、打印 public executeInsertTable(row: number, col: number) { return Command.insertTable(row, col) } @@ -198,6 +201,10 @@ export class Command { return Command.deleteTable() } + public executeHyperlink(payload: IElement) { + return Command.hyperlink(payload) + } + public executeImage(payload: IDrawImagePayload) { return Command.image(payload) } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 06557a8..52833f0 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -654,6 +654,30 @@ export class CommandAdapt { } } + public hyperlink(payload: IElement) { + const { startIndex, endIndex } = this.range.getRange() + if (startIndex === 0 && endIndex === 0) return + const elementList = this.draw.getElementList() + const { valueList, url } = payload + const hyperlinkId = getUUID() + const newElementList = valueList?.map(v => ({ + url, + hyperlinkId, + value: v.value, + type: ElementType.HYPERLINK + })) + if (!newElementList) return + const start = startIndex + 1 + if (startIndex === endIndex) { + elementList.splice(start, 0, ...newElementList) + } else { + elementList.splice(start, endIndex - startIndex, ...newElementList) + } + const curIndex = start + newElementList.length - 1 + this.range.setRange(curIndex, curIndex) + this.draw.render({ curIndex }) + } + public image(payload: IDrawImagePayload) { const { startIndex, endIndex } = this.range.getRange() if (startIndex === 0 && endIndex === 0) return @@ -706,7 +730,8 @@ export class CommandAdapt { // 搜索文本 function searchClosure(payload: string | null, type: EditorContext, elementList: IElement[], restArgs?: ISearchResultRestArgs) { if (!payload) return - const text = elementList.map(e => !e.type || e.type === ElementType.TEXT ? e.value : ZERO) + const { TEXT, HYPERLINK } = ElementType + const text = elementList.map(e => !e.type || e.type === TEXT || e.type === HYPERLINK ? 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 b9adc50..d7cb387 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -26,6 +26,7 @@ import { GlobalObserver } from "../observer/GlobalObserver" import { TableParticle } from "./particle/table/TableParticle" import { ISearchResult } from "../../interface/Search" import { TableTool } from "./particle/table/TableTool" +import { HyperlinkParticle } from "./particle/HyperlinkParticle" export class Draw { @@ -54,6 +55,7 @@ export class Draw { private tableParticle: TableParticle private tableTool: TableTool private pageNumber: PageNumber + private hyperlinkParticle: HyperlinkParticle private rowList: IRow[] private painterStyle: IElementStyle | null @@ -92,6 +94,7 @@ export class Draw { this.tableParticle = new TableParticle(this) this.tableTool = new TableTool(this) this.pageNumber = new PageNumber(this) + this.hyperlinkParticle = new HyperlinkParticle(this) new GlobalObserver(this) this.canvasEvent = new CanvasEvent(this) @@ -251,6 +254,10 @@ export class Draw { return this.tableTool } + public getHyperlinkParticle(): HyperlinkParticle { + return this.hyperlinkParticle + } + public getRowCount(): number { return this.rowList.length } @@ -431,11 +438,10 @@ export class Draw { const ascent = metrics.boundingBoxAscent + rowMargin const descent = metrics.boundingBoxDescent + rowMargin const height = ascent + descent - const rowElement: IRowElement = { - ...element, + const rowElement: IRowElement = Object.assign(element, { metrics, style: this._getFont(element, scale) - } + }) // 超过限定宽度 const preElement = elementList[i - 1] if ( @@ -509,9 +515,21 @@ export class Draw { } } positionList.push(positionItem) + // 元素绘制 + if (element.type === ElementType.IMAGE) { + this.textParticle.complete() + this.imageParticle.render(ctx, element, x, y + offsetY) + } else if (element.type === ElementType.TABLE) { + this.tableParticle.render(ctx, element, x, y) + } else if (element.type === ElementType.HYPERLINK) { + this.textParticle.complete() + this.hyperlinkParticle.render(ctx, element, x, y + offsetY) + } else { + this.textParticle.record(ctx, element, x, y + offsetY) + } // 下划线绘制 if (element.underline) { - this.underline.render(ctx, x, y + curRow.height, metrics.width) + this.underline.render(ctx, element.color!, x, y + curRow.height, metrics.width) } // 删除线绘制 if (element.strikeout) { @@ -521,15 +539,6 @@ export class Draw { if (element.highlight) { this.highlight.render(ctx, element.highlight, x, y, metrics.width, curRow.height) } - // 元素绘制 - if (element.type === ElementType.IMAGE) { - this.textParticle.complete() - this.imageParticle.render(ctx, element, x, y + offsetY) - } else if (element.type === ElementType.TABLE) { - this.tableParticle.render(ctx, element, x, y) - } else { - this.textParticle.record(ctx, element, x, y + offsetY) - } // 选区绘制 const { startIndex, endIndex } = this.range.getRange() if (startIndex !== endIndex && startIndex < index && index <= endIndex) { diff --git a/src/editor/core/draw/particle/HyperlinkParticle.ts b/src/editor/core/draw/particle/HyperlinkParticle.ts new file mode 100644 index 0000000..dc53b12 --- /dev/null +++ b/src/editor/core/draw/particle/HyperlinkParticle.ts @@ -0,0 +1,67 @@ +import { IElement } from "../../.." +import { IEditorOption } from "../../../interface/Editor" +import { IElementPosition } from "../../../interface/Element" +import { IRowElement } from "../../../interface/Row" +import { Draw } from "../Draw" + +export class HyperlinkParticle { + + private draw: Draw + private options: Required + private container: HTMLDivElement + private hyperlinkPopupContainer: HTMLDivElement + private hyperlinkDom: HTMLAnchorElement + + constructor(draw: Draw) { + this.draw = draw + this.options = draw.getOptions() + this.container = draw.getContainer() + const { hyperlinkPopupContainer, hyperlinkDom } = this._createHyperlinkPopupDom() + this.hyperlinkDom = hyperlinkDom + this.hyperlinkPopupContainer = hyperlinkPopupContainer + } + + private _createHyperlinkPopupDom() { + const hyperlinkPopupContainer = document.createElement('div') + hyperlinkPopupContainer.classList.add('hyperlink-popup') + const hyperlinkDom = document.createElement('a') + hyperlinkDom.target = '_blank' + hyperlinkPopupContainer.append(hyperlinkDom) + this.container.append(hyperlinkPopupContainer) + return { hyperlinkPopupContainer, hyperlinkDom } + } + + public drawHyperlinkPopup(element: IElement, position: IElementPosition) { + const { coordinate: { leftTop: [left, top] }, lineHeight } = position + const height = this.draw.getHeight() + const pageGap = this.draw.getPageGap() + const preY = this.draw.getPageNo() * (height + pageGap) + // 位置 + this.hyperlinkPopupContainer.style.display = 'block' + this.hyperlinkPopupContainer.style.left = `${left}px` + this.hyperlinkPopupContainer.style.top = `${top + preY + lineHeight}px` + // 标签 + const url = element.url || '#' + this.hyperlinkDom.href = url + this.hyperlinkDom.innerText = url + } + + public clearHyperlinkPopup() { + this.hyperlinkPopupContainer.style.display = 'none' + } + + public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { + ctx.save() + ctx.font = element.style + if (!element.color) { + element.color = this.options.defaultHyperlinkColor + } + ctx.fillStyle = element.color + if (element.underline === undefined) { + element.underline = true + } + ctx.fillText(element.value, x, y) + ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/core/draw/richtext/Underline.ts b/src/editor/core/draw/richtext/Underline.ts index aed327d..7b25d2b 100644 --- a/src/editor/core/draw/richtext/Underline.ts +++ b/src/editor/core/draw/richtext/Underline.ts @@ -9,10 +9,10 @@ export class Underline { this.options = draw.getOptions() } - public render(ctx: CanvasRenderingContext2D, x: number, y: number, width: number) { + public render(ctx: CanvasRenderingContext2D, color: string, x: number, y: number, width: number) { const { underlineColor } = this.options ctx.save() - ctx.strokeStyle = underlineColor + ctx.strokeStyle = color || underlineColor ctx.beginPath() ctx.moveTo(x, y) ctx.lineTo(x + width, y) diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index 1cd40ba..c5ce430 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -1,3 +1,4 @@ +import { ElementType } from "../.." import { ZERO } from "../../dataset/constant/Common" import { ElementStyleKey } from "../../dataset/enum/ElementStyle" import { MouseEventButton } from "../../dataset/enum/Event" @@ -6,6 +7,7 @@ import { IElement } from "../../interface/Element" import { writeTextByElementList } from "../../utils/clipboard" import { Cursor } from "../cursor/Cursor" import { Draw } from "../draw/Draw" +import { HyperlinkParticle } from "../draw/particle/HyperlinkParticle" import { ImageParticle } from "../draw/particle/ImageParticle" import { TableTool } from "../draw/particle/table/TableTool" import { HistoryManager } from "../history/HistoryManager" @@ -27,6 +29,7 @@ export class CanvasEvent { private historyManager: HistoryManager private imageParticle: ImageParticle private tableTool: TableTool + private hyperlinkParticle: HyperlinkParticle constructor(draw: Draw) { this.isAllowDrag = false @@ -42,6 +45,7 @@ export class CanvasEvent { this.historyManager = this.draw.getHistoryManager() this.imageParticle = this.draw.getImageParticle() this.tableTool = this.draw.getTableTool() + this.hyperlinkParticle = this.draw.getHyperlinkParticle() } public register() { @@ -160,20 +164,26 @@ export class CanvasEvent { isComputeRowList: false }) } + const elementList = this.draw.getElementList() + const positionList = this.position.getPositionList() + const curIndex = isTable ? tdValueIndex! : index + const curElement = elementList[curIndex] // 图片尺寸拖拽组件 this.imageParticle.clearResizer() if (isDirectHitImage) { - const elementList = this.draw.getElementList() - const positionList = this.position.getPositionList() - const curIndex = isTable ? tdValueIndex! : index - this.imageParticle.drawResizer(elementList[curIndex], positionList[curIndex]) + this.imageParticle.drawResizer(curElement, positionList[curIndex]) } // 表格工具组件 this.tableTool.dispose() if (isTable) { - const elementList = this.draw.getOriginalElementList() - const positionList = this.position.getOriginalPositionList() - this.tableTool.render(elementList[index], positionList[index]) + const originalElementList = this.draw.getOriginalElementList() + const originalPositionList = this.position.getOriginalPositionList() + this.tableTool.render(originalElementList[index], originalPositionList[index]) + } + // 超链接 + this.hyperlinkParticle.clearHyperlinkPopup() + if (curElement.type === ElementType.HYPERLINK) { + this.hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex]) } } @@ -315,6 +325,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 = data.replaceAll(`\n`, ZERO) const elementList = this.draw.getElementList() const agentDom = this.cursor.getAgentDom() @@ -330,18 +341,32 @@ export class CanvasEvent { restArg = { tdId, trId, tableId } } const element = elementList[endIndex] - const inputData: IElement[] = text.split('').map(value => ({ - value, - font: element.font, - size: element.size, - bold: element.bold, - color: element.color, - highlight: element.highlight, - italic: element.italic, - underline: element.underline, - strikeout: element.strikeout, - ...restArg - })) + const inputData: IElement[] = text.split('').map(value => { + const newElement: IElement = { + value, + ...restArg + } + if ( + !element.type + || element.type === TEXT + || (element.type === HYPERLINK && elementList[endIndex + 1]?.type === HYPERLINK) + ) { + if (element.type) { + newElement.type = element.type + } + newElement.font = element.font + newElement.size = element.size + newElement.bold = element.bold + newElement.color = element.color + newElement.highlight = element.highlight + newElement.italic = element.italic + newElement.underline = element.underline + newElement.strikeout = element.strikeout + newElement.url = element.url + newElement.hyperlinkId = element.hyperlinkId + } + return newElement + }) let start = 0 if (isCollspace) { start = index + 1 diff --git a/src/editor/core/event/GlobalEvent.ts b/src/editor/core/event/GlobalEvent.ts index 8c58400..2cb015f 100644 --- a/src/editor/core/event/GlobalEvent.ts +++ b/src/editor/core/event/GlobalEvent.ts @@ -3,6 +3,7 @@ import { IEditorOption } from "../../interface/Editor" import { findParent } from "../../utils" import { Cursor } from "../cursor/Cursor" import { Draw } from "../draw/Draw" +import { HyperlinkParticle } from "../draw/particle/HyperlinkParticle" import { ImageParticle } from "../draw/particle/ImageParticle" import { TableTool } from "../draw/particle/table/TableTool" import { RangeManager } from "../range/RangeManager" @@ -18,6 +19,7 @@ export class GlobalEvent { private range: RangeManager private imageParticle: ImageParticle private tableTool: TableTool + private hyperlinkParticle: HyperlinkParticle constructor(draw: Draw, canvasEvent: CanvasEvent) { this.draw = draw @@ -28,6 +30,7 @@ export class GlobalEvent { this.range = draw.getRange() this.imageParticle = draw.getImageParticle() this.tableTool = draw.getTableTool() + this.hyperlinkParticle = draw.getHyperlinkParticle() } public register() { @@ -70,6 +73,7 @@ export class GlobalEvent { this.range.setRange(0, 0) this.imageParticle.clearResizer() this.tableTool.dispose() + this.hyperlinkParticle.clearHyperlinkPopup() } public setDragState() { diff --git a/src/editor/dataset/enum/Editor.ts b/src/editor/dataset/enum/Editor.ts index e677f8d..27701f0 100644 --- a/src/editor/dataset/enum/Editor.ts +++ b/src/editor/dataset/enum/Editor.ts @@ -1,4 +1,5 @@ export enum EditorComponent { + COMPONENT = 'component', MENU = 'menu', MAIN = 'main', FOOTER = 'footer', diff --git a/src/editor/dataset/enum/Element.ts b/src/editor/dataset/enum/Element.ts index c429bd3..4610f8f 100644 --- a/src/editor/dataset/enum/Element.ts +++ b/src/editor/dataset/enum/Element.ts @@ -1,5 +1,6 @@ export enum ElementType { TEXT = 'text', IMAGE = 'image', - TABLE = 'table' + TABLE = 'table', + HYPERLINK = 'hyperlink' } \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index a225ef1..844de52 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -13,6 +13,8 @@ import { globalMenus } from './core/contextmenu/menus/GlobalMenus' import { ContextMenu } from './core/contextmenu/ContextMenu' import { tableMenus } from './core/contextmenu/menus/tableMenus' import { IRegisterContextMenu } from './interface/contextmenu/ContextMenu' +import { EditorComponent } from './dataset/enum/Editor' +import { EDITOR_COMPONENT } from './dataset/constant/Editor' export default class Editor { @@ -49,6 +51,7 @@ export default class Editor { margins: [100, 120, 100, 120], tdPadding: 5, defaultTdHeight: 40, + defaultHyperlinkColor: '#0000FF', ...options } formatElementList(elementList) @@ -74,7 +77,9 @@ export default class Editor { export { Editor, RowFlex, - ElementType + ElementType, + EditorComponent, + EDITOR_COMPONENT } // 对外类型 diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 5289add..d698980 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -26,4 +26,5 @@ export interface IEditorOption { margins?: [top: number, right: number, bootom: number, left: number], tdPadding?: number; defaultTdHeight?: number; + defaultHyperlinkColor?: string; } \ No newline at end of file diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts index 7e2b241..5431f97 100644 --- a/src/editor/interface/Element.ts +++ b/src/editor/interface/Element.ts @@ -35,9 +35,15 @@ export interface ITableElement { tableId?: string; } +export interface IHyperlinkElement { + valueList?: IElement[]; + url?: string; + hyperlinkId?: string; +} + export type ITable = ITableAttr & ITableElement -export type IElement = IElementBasic & IElementStyle & ITable +export type IElement = IElementBasic & IElementStyle & ITable & IHyperlinkElement export interface IElementMetrics { width: number; diff --git a/src/editor/utils/clipboard.ts b/src/editor/utils/clipboard.ts index 7253e16..038868a 100644 --- a/src/editor/utils/clipboard.ts +++ b/src/editor/utils/clipboard.ts @@ -7,8 +7,9 @@ export function writeText(text: string) { } export function writeTextByElementList(elementList: IElement[]) { + const { TEXT, HYPERLINK } = ElementType const text = elementList - .map(p => !p.type || p.type === ElementType.TEXT ? p.value : '') + .map(p => !p.type || p.type === TEXT || p.type === HYPERLINK ? p.value : '') .join('') writeText(text) } \ No newline at end of file diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts index 639787a..bc2eacb 100644 --- a/src/editor/utils/element.ts +++ b/src/editor/utils/element.ts @@ -8,7 +8,8 @@ export function formatElementList(elementList: IElement[]) { value: ZERO }) } - for (let i = 0; i < elementList.length; i++) { + let i = 0 + while (i < elementList.length) { const el = elementList[i] if (el.type === ElementType.TABLE) { const tableId = getUUID() @@ -32,6 +33,23 @@ export function formatElementList(elementList: IElement[]) { } } } + } else if (el.type === ElementType.HYPERLINK) { + const valueList = el.valueList || [] + // 移除父节点 + elementList.splice(i, 1) + // 追加字节点 + if (valueList.length) { + const hyperlinkId = getUUID() + for (let v = 0; v < valueList.length; v++) { + const value = valueList[v] + value.type = el.type + value.url = el.url + value.hyperlinkId = hyperlinkId + elementList.splice(i, 0, value) + i++ + } + } + i-- } if (el.value === '\n') { el.value = ZERO @@ -39,5 +57,6 @@ export function formatElementList(elementList: IElement[]) { if (el.type === ElementType.IMAGE) { el.id = getUUID() } + i++ } } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index ea5c82a..f9b3331 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,9 +1,10 @@ import './style.css' import Editor, { ElementType, IElement, RowFlex } from './editor' +import { Dialog } from './components/dialog/Dialog' window.onload = function () { - const text = `人民医院门诊病历\n主诉：\n发热三天，咳嗽五天。\n现病史：\n患者于三天前无明显诱因，感冒后发现面部水肿，无皮疹，尿量减少，出现乏力，在外治疗无好转，现来我院就诊。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。没有报告其他既往疾病。\n流行病史：\n否认14天内接触过新冠肺炎确诊患者、疑似患者、无症状感染者及其密切接触者；否认14天内去过以下场所：水产、肉类批发市场，农贸市场，集市，大型超市，夜市；否认14天内与以下场所工作人员密切接触：水产、肉类批发市场，农贸市场，集市，大型超市；否认14天内周围（如家庭、办公室）有2例以上聚集性发病；否认14天内接触过有发热或呼吸道症状的人员；否认14天内自身有发热或呼吸道症状；否认14天内接触过纳入隔离观察的人员及其他可能与新冠肺炎关联的情形；陪同家属{有无选择代码}有以上情况。\n体格检查：\nT：36.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10^9/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n2.糖尿病\n3.病毒性感冒\n4.过敏性鼻炎\n5.过敏性鼻息肉\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n电子签名：【】\n其他记录：` + const text = `人民医院门诊病历\n主诉：\n发热三天，咳嗽五天。\n现病史：\n患者于三天前无明显诱因，感冒后发现面部水肿，无皮疹，尿量减少，出现乏力，在外治疗无好转，现来我院就诊。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。没有报告其他既往疾病。\n流行病史：\n否认14天内接触过确诊患者、疑似患者、无症状感染者及其密切接触者；否认14天内去过以下场所：水产、肉类批发市场，农贸市场，集市，大型超市，夜市；否认14天内与以下场所工作人员密切接触：水产、肉类批发市场，农贸市场，集市，大型超市；否认14天内周围（如家庭、办公室）有2例以上聚集性发病；否认14天内接触过有发热或呼吸道症状的人员；否认14天内自身有发热或呼吸道症状；否认14天内接触过纳入隔离观察的人员及其他可能与新冠肺炎关联的情形；陪同家属{有无选择代码}有以上情况。\n体格检查：\nT：36.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10^9/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n2.糖尿病\n3.病毒性感冒\n4.过敏性鼻炎\n5.过敏性鼻息肉\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n电子签名：【】\n其他记录：` // 模拟行居中 const centerText = ['人民医院门诊病历'] const centerIndex: number[] = centerText.map(c => { @@ -62,7 +63,25 @@ window.onload = function () { size: 16 } }) - data.splice(595, 0, { + data.splice(137, 0, { + type: ElementType.HYPERLINK, + value: '', + valueList: [{ + value: '新', + size: 16 + }, { + value: '冠', + size: 16 + }, { + value: '肺', + size: 16 + }, { + value: '炎', + size: 16 + }], + url: 'https://hufe.club/canvas-editor' + }) + data.splice(592, 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, @@ -386,6 +405,39 @@ window.onload = function () { } } } + const hyperlinkDom = document.querySelector('.menu-item__hyperlink')! + hyperlinkDom.onclick = function () { + console.log('hyperlink') + new Dialog({ + title: '超链接', + data: [{ + type: 'text', + label: '文本', + name: 'name', + placeholder: '请输入文本' + }, { + type: 'text', + label: '链接', + name: 'url', + placeholder: '请输入链接' + }], + onConfirm: (payload) => { + const name = payload.find(p => p.name === 'name')?.value + if (!name) return + const url = payload.find(p => p.name === 'url')?.value + if (!url) return + instance.command.executeHyperlink({ + type: ElementType.HYPERLINK, + value: '', + url, + valueList: name.split('').map(n => ({ + value: n, + size: 16 + })) + }) + } + }) + } 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 4f6184e..8089a1c 100644 --- a/src/style.css +++ b/src/style.css @@ -357,6 +357,10 @@ ul { margin-right: 0; } +.menu-item__hyperlink i { + background-image: url('./assets/images/hyperlink.svg'); +} + .menu-item__search { position: relative; }