From 1a9bcfe3d09094424cc68f63bd13f2367b5da1c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Sat, 11 Dec 2021 10:34:00 +0800 Subject: [PATCH] feat:add table component --- index.html | 14 ++ src/assets/images/table.svg | 1 + src/editor/core/command/Command.ts | 8 +- src/editor/core/command/CommandAdapt.ts | 53 +++++ src/editor/core/draw/Draw.ts | 197 ++++++++++++++---- src/editor/core/draw/interactive/Search.ts | 2 +- .../core/draw/particle/table/TableParticle.ts | 172 +++++++++++++++ src/editor/core/event/CanvasEvent.ts | 69 +++++- src/editor/core/position/Position.ts | 101 +++++++-- src/editor/dataset/enum/Element.ts | 3 +- src/editor/index.ts | 20 +- src/editor/interface/Draw.ts | 19 ++ src/editor/interface/Editor.ts | 4 +- src/editor/interface/Element.ts | 35 +++- src/editor/interface/Position.ts | 31 +++ src/editor/interface/table/Colgroup.ts | 4 + src/editor/interface/table/Td.ts | 20 ++ src/editor/interface/table/Tr.ts | 7 + src/editor/utils/element.ts | 43 ++++ src/main.ts | 187 ++++++++++++++++- src/style.css | 89 +++++++- 21 files changed, 983 insertions(+), 96 deletions(-) create mode 100644 src/assets/images/table.svg create mode 100644 src/editor/core/draw/particle/table/TableParticle.ts create mode 100644 src/editor/interface/table/Colgroup.ts create mode 100644 src/editor/interface/table/Td.ts create mode 100644 src/editor/interface/table/Tr.ts create mode 100644 src/editor/utils/element.ts diff --git a/index.html b/index.html index 8b89f41..2778feb 100644 --- a/index.html +++ b/index.html @@ -96,10 +96,24 @@
+
+ +
+
+
×
+
+ 插入 + 表格 +
+
+
+
+
+
diff --git a/src/assets/images/table.svg b/src/assets/images/table.svg new file mode 100644 index 0000000..0a349fe --- /dev/null +++ b/src/assets/images/table.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 cd9cf3e..0f2355b 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -21,6 +21,7 @@ export class Command { private static center: Function private static right: Function private static rowMargin: Function + private static insertTable: Function private static image: Function private static search: Function private static print: Function @@ -46,6 +47,7 @@ export class Command { Command.center = adapt.rowFlex.bind(adapt) Command.right = adapt.rowFlex.bind(adapt) Command.rowMargin = adapt.rowMargin.bind(adapt) + Command.insertTable = adapt.insertTable.bind(adapt) Command.image = adapt.image.bind(adapt) Command.search = adapt.search.bind(adapt) Command.print = adapt.print.bind(adapt) @@ -124,7 +126,11 @@ export class Command { return Command.rowMargin(payload) } - // 图片上传、搜索、打印 + // 表格、图片上传、搜索、打印 + public executeInsertTable(row: number, col: number) { + return Command.insertTable(row, col) + } + 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 6c4040a..e61de04 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -6,7 +6,11 @@ import { RowFlex } from "../../dataset/enum/Row" import { IDrawImagePayload } from "../../interface/Draw" import { IEditorOption } from "../../interface/Editor" import { IElement, IElementStyle } from "../../interface/Element" +import { IColgroup } from "../../interface/table/Colgroup" +import { ITd } from "../../interface/table/Td" +import { ITr } from "../../interface/table/Tr" import { getUUID } from "../../utils" +import { formatElementList } from "../../utils/element" import { printImageBase64 } from "../../utils/print" import { Draw } from "../draw/Draw" import { HistoryManager } from "../history/HistoryManager" @@ -214,6 +218,55 @@ export class CommandAdapt { this.draw.render({ curIndex, isSetCursor }) } + public insertTable(row: number, col: number) { + const { startIndex, endIndex } = this.range.getRange() + if (startIndex === 0 && endIndex === 0) return + const elementList = this.draw.getElementList() + const { width, margins } = this.options + const innerWidth = width - margins[1] - margins[3] + // colgroup + const colgroup: IColgroup[] = [] + const colWidth = innerWidth / col + for (let c = 0; c < col; c++) { + colgroup.push({ + width: colWidth + }) + } + // trlist + const trList: ITr[] = [] + for (let r = 0; r < row; r++) { + const tdList: ITd[] = [] + const tr: ITr = { + height: 40, + tdList + } + for (let c = 0; c < col; c++) { + tdList.push({ + colspan: 1, + rowspan: 1, + value: [{ value: ZERO, size: 16 }] + }) + } + trList.push(tr) + } + const element: IElement = { + type: ElementType.TABLE, + value: ZERO, + colgroup, + trList + } + // 格式化element + formatElementList([element]) + 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, isSetCursor: false }) + } + public image(payload: IDrawImagePayload) { const { startIndex, endIndex } = this.range.getRange() if (startIndex === 0 && endIndex === 0) return diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 8580bc8..f668561 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -1,6 +1,6 @@ import { ZERO } from "../../dataset/constant/Common" import { RowFlex } from "../../dataset/enum/Row" -import { IDrawOption } from "../../interface/Draw" +import { IDrawOption, IDrawRowPayload, IDrawRowResult } from "../../interface/Draw" import { IEditorOption } from "../../interface/Editor" import { IElement, IElementMetrics, IElementPosition, IElementStyle } from "../../interface/Element" import { IRow, IRowElement } from "../../interface/Row" @@ -23,6 +23,7 @@ import { ImageParticle } from "./particle/ImageParticle" import { TextParticle } from "./particle/TextParticle" import { PageNumber } from "./frame/PageNumber" import { GlobalObserver } from "../observer/GlobalObserver" +import { TableParticle } from "./particle/table/TableParticle" export class Draw { @@ -47,6 +48,7 @@ export class Draw { private historyManager: HistoryManager private imageParticle: ImageParticle private textParticle: TextParticle + private tableParticle: TableParticle private pageNumber: PageNumber private rowList: IRow[] @@ -83,6 +85,7 @@ export class Draw { this.highlight = new Highlight(this) this.imageParticle = new ImageParticle(this) this.textParticle = new TextParticle(this) + this.tableParticle = new TableParticle(this) this.pageNumber = new PageNumber(this) new GlobalObserver(this) @@ -135,6 +138,10 @@ export class Draw { return this.options.defaultBasicRowMarginHeight * this.options.scale } + public getTdPadding(): number { + return this.options.tdPadding * this.options.scale + } + public getContainer(): HTMLDivElement { return this.container } @@ -202,6 +209,15 @@ export class Draw { } public getElementList(): IElement[] { + const positionContext = this.position.getPositionContext() + if (positionContext.isTable) { + const { index, trIndex, tdIndex } = positionContext + return this.elementList[index!].trList![trIndex!].tdList[tdIndex!].value + } + return this.elementList + } + + public getOriginalElementList() { return this.elementList } @@ -306,25 +322,25 @@ export class Draw { return `${el.italic ? 'italic ' : ''}${el.bold ? 'bold ' : ''}${(el.size || defaultSize) * scale}px ${el.font || defaultFont}` } - private _computeRowList() { - const { defaultSize, defaultRowMargin, scale } = this.options - const innerWidth = this.getInnerWidth() + private _computeRowList(innerWidth: number, elementList: IElement[]) { + const { defaultSize, defaultRowMargin, scale, tdPadding } = this.options const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight() + const tdGap = tdPadding * 2 const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') as CanvasRenderingContext2D const rowList: IRow[] = [] - if (this.elementList.length) { + if (elementList.length) { rowList.push({ width: 0, height: 0, ascent: 0, elementList: [], - rowFlex: this.elementList?.[1]?.rowFlex + rowFlex: elementList?.[1]?.rowFlex }) } - for (let i = 0; i < this.elementList.length; i++) { + for (let i = 0; i < elementList.length; i++) { const curRow: IRow = rowList[rowList.length - 1] - const element = this.elementList[i] + const element = elementList[i] const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin) let metrics: IElementMetrics = { width: 0, @@ -350,6 +366,40 @@ export class Draw { metrics.boundingBoxDescent = elementHeight } metrics.boundingBoxAscent = 0 + } else if (element.type === ElementType.TABLE) { + // 计算表格行列 + this.tableParticle.computeRowColInfo(element) + // 计算表格内元素信息 + const trList = element.trList! + for (let t = 0; t < trList.length; t++) { + const tr = trList[t] + let maxTrHeight = 0 + for (let d = 0; d < tr.tdList.length; d++) { + const td = tr.tdList[d] + const rowList = this._computeRowList((td.width! - tdGap) * scale, td.value) + const rowHeight = rowList.reduce((pre, cur) => pre + cur.height, 0) + td.rowList = rowList + // 移除缩放导致的行高变化-渲染时会进行缩放调整 + const curTrHeight = (rowHeight + tdGap) / scale + if (maxTrHeight < curTrHeight) { + maxTrHeight = curTrHeight + } + } + tr.height = maxTrHeight + } + // 需要重新计算表格内值 + this.tableParticle.computeRowColInfo(element) + // 计算出表格高度 + const tableHeight = trList.reduce((pre, cur) => pre + cur.height, 0) + const tableWidth = element.colgroup!.reduce((pre, cur) => pre + cur.width, 0) + element.width = tableWidth + element.height = tableHeight + const elementWidth = tableWidth * scale + const elementHeight = tableHeight * scale + metrics.width = elementWidth + metrics.height = elementHeight + metrics.boundingBoxDescent = elementHeight + metrics.boundingBoxAscent = 0 } else { metrics.height = (element.size || this.options.defaultSize) * scale ctx.font = this._getFont(element) @@ -367,7 +417,12 @@ export class Draw { style: this._getFont(element, scale) } // 超过限定宽度 - if (curRow.width + metrics.width > innerWidth || (i !== 0 && element.value === ZERO)) { + const preElement = elementList[i - 1] + if ( + (preElement && preElement.type === ElementType.TABLE) + || curRow.width + metrics.width > innerWidth + || (i !== 0 && element.value === ZERO) + ) { rowList.push({ width: metrics.width, height, @@ -388,35 +443,29 @@ export class Draw { curRow.elementList.push(rowElement) } } - this.rowList = rowList + return rowList } - private _drawElement(positionList: IElementPosition[], rowList: IRow[], pageNo: number) { - const width = this.getWidth() - const height = this.getHeight() - const margins = this.getMargins() - const ctx = this.ctxList[pageNo] - ctx.clearRect(0, 0, width, height) - // 绘制背景 - this.background.render(ctx) - // 绘制页边距 - const leftTopPoint: [number, number] = [margins[3], margins[0]] - this.margin.render(ctx) - // 渲染元素 - let x = leftTopPoint[0] - let y = leftTopPoint[1] - let index = positionList.length + private _drawRow(ctx: CanvasRenderingContext2D, payload: IDrawRowPayload): IDrawRowResult { + const { positionList, rowList, pageNo, startX, startY, startIndex, innerWidth } = payload + const { scale, tdPadding } = this.options + const tdGap = tdPadding * 2 + let x = startX + let y = startY + let index = startIndex for (let i = 0; i < rowList.length; i++) { const curRow = rowList[i] // 计算行偏移量（行居左、居中、居右） if (curRow.rowFlex && curRow.rowFlex !== RowFlex.LEFT) { - const canvasInnerWidth = width - margins[1] - margins[3] if (curRow.rowFlex === RowFlex.CENTER) { - x += (canvasInnerWidth - curRow.width) / 2 + x += (innerWidth - curRow.width) / 2 } else { - x += canvasInnerWidth - curRow.width + x += innerWidth - curRow.width } } + // 当前td所在位置 + let tablePreX = x + let tablePreY = y for (let j = 0; j < curRow.elementList.length; j++) { const element = curRow.elementList[j] const metrics = element.metrics @@ -456,25 +505,89 @@ export class Draw { 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) { - let rangeWidth = metrics.width - if (rangeWidth === 0 && curRow.elementList.length === 1) { - rangeWidth = this.options.rangeMinWidth + const positionContext = this.position.getPositionContext() + // 表格需限定上下文 + if ( + (!positionContext.isTable && !element.tdId) + || positionContext.tdId === element.tdId + ) { + let rangeWidth = metrics.width + if (rangeWidth === 0 && curRow.elementList.length === 1) { + rangeWidth = this.options.rangeMinWidth + } + this.range.render(ctx, x, y, rangeWidth, curRow.height) } - this.range.render(ctx, x, y, rangeWidth, curRow.height) } index++ x += metrics.width + // 绘制表格内元素 + if (element.type === ElementType.TABLE) { + for (let t = 0; t < element.trList!.length; t++) { + const tr = element.trList![t] + for (let d = 0; d < tr.tdList!.length; d++) { + const td = tr.tdList[d] + td.positionList = [] + const drawRowResult = this._drawRow(ctx, { + positionList: td.positionList, + rowList: td.rowList!, + pageNo, + startIndex: 0, + startX: (td.x! + tdPadding) * scale + tablePreX, + startY: td.y! * scale + tablePreY, + innerWidth: (td.width! - tdGap) * scale + }) + x = drawRowResult.x + y = drawRowResult.y + } + } + // 恢复初始x、y + x = tablePreX + y = tablePreY + } } this.textParticle.complete() - x = leftTopPoint[0] + x = startX y += curRow.height } + return { x, y, index } + } + + private _drawPage(positionList: IElementPosition[], rowList: IRow[], pageNo: number) { + const width = this.getWidth() + const height = this.getHeight() + const margins = this.getMargins() + const innerWidth = this.getInnerWidth() + const ctx = this.ctxList[pageNo] + ctx.clearRect(0, 0, width, height) + // 绘制背景 + this.background.render(ctx) + // 绘制页边距 + const leftTopPoint: [number, number] = [margins[3], margins[0]] + this.margin.render(ctx) + // 渲染元素 + let x = leftTopPoint[0] + let y = leftTopPoint[1] + let index = positionList.length + const drawRowResult = this._drawRow(ctx, { + positionList, + rowList, + pageNo, + startIndex: index, + startX: x, + startY: y, + innerWidth + }) + x = drawRowResult.x + y = drawRowResult.y + index = drawRowResult.index // 绘制页码 this.pageNumber.render(ctx, pageNo) // 搜索匹配绘制 @@ -491,14 +604,15 @@ export class Draw { isComputeRowList = true } = payload || {} const height = this.getHeight() + const innerWidth = this.getInnerWidth() // 计算行信息 if (isComputeRowList) { - this._computeRowList() + this.rowList = this._computeRowList(innerWidth, this.elementList) } // 清除光标等副作用 this.cursor.recoveryCursor() this.position.setPositionList([]) - const positionList = this.position.getPositionList() + const positionList = this.position.getOriginalPositionList() // 按页渲染 const margins = this.getMargins() const marginHeight = margins[0] + margins[2] @@ -522,7 +636,7 @@ export class Draw { this._createPage(i) } const rowList = pageRowList[i] - this._drawElement(positionList, rowList, i) + this._drawPage(positionList, rowList, i) } // 移除多余页 setTimeout(() => { @@ -540,7 +654,14 @@ export class Draw { if (curIndex === undefined) { curIndex = positionList.length - 1 } - this.position.setCursorPosition(positionList[curIndex!] || null) + const positionContext = this.position.getPositionContext() + if (positionContext.isTable) { + const { index, trIndex, tdIndex } = positionContext + const tablePosition = this.elementList[index!].trList?.[trIndex!].tdList[tdIndex!].positionList?.[curIndex!] + this.position.setCursorPosition(tablePosition || null) + } else { + this.position.setCursorPosition(positionList[curIndex!] || null) + } this.cursor.drawCursor() } // 历史记录用于undo、redo @@ -549,8 +670,10 @@ export class Draw { const oldElementList = deepClone(this.elementList) const { startIndex, endIndex } = this.range.getRange() const pageNo = this.pageNo + const oldPositionContext = deepClone(this.position.getPositionContext()) this.historyManager.execute(function () { self.setPageNo(pageNo) + self.position.setPositionContext(oldPositionContext) self.range.setRange(startIndex, endIndex) self.elementList = deepClone(oldElementList) self.render({ curIndex, isSubmitHistory: false }) diff --git a/src/editor/core/draw/interactive/Search.ts b/src/editor/core/draw/interactive/Search.ts index e0c8c04..e348c86 100644 --- a/src/editor/core/draw/interactive/Search.ts +++ b/src/editor/core/draw/interactive/Search.ts @@ -18,7 +18,7 @@ export class Search { const searchMatch = this.draw.getSearchMatch() if (!searchMatch || !searchMatch.length) return const searchMatchList = searchMatch.flat() - const positionList = this.position.getPositionList() + const positionList = this.position.getOriginalPositionList() ctx.save() ctx.globalAlpha = this.options.searchMatchAlpha ctx.fillStyle = this.options.searchMatchColor diff --git a/src/editor/core/draw/particle/table/TableParticle.ts b/src/editor/core/draw/particle/table/TableParticle.ts new file mode 100644 index 0000000..caca0cc --- /dev/null +++ b/src/editor/core/draw/particle/table/TableParticle.ts @@ -0,0 +1,172 @@ +import { IElement } from "../../../.." +import { IEditorOption } from "../../../../interface/Editor" +import { Draw } from "../../Draw" + +export class TableParticle { + + private options: Required + + constructor(draw: Draw) { + this.options = draw.getOptions() + } + + private _drawBorder(ctx: CanvasRenderingContext2D, startX: number, startY: number, width: number, height: number) { + ctx.beginPath() + ctx.moveTo(startX, startY) + ctx.lineTo(startX + width, startY) + ctx.lineTo(startX + width, startY + height) + ctx.lineTo(startX, startY + height) + ctx.closePath() + ctx.stroke() + } + + // @ts-ignore + private _drawRange(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number) { + const { rangeAlpha, rangeColor } = this.options + ctx.save() + ctx.globalAlpha = rangeAlpha + ctx.fillStyle = rangeColor + ctx.fillRect(x, y, width, height) + ctx.restore() + } + + public computeRowColInfo(element: IElement) { + const { colgroup, trList } = element + if (!colgroup || !trList) return + let x = 0 + let y = 0 + for (let t = 0; t < trList.length; t++) { + const tr = trList[t] + // 表格最后一行 + const isLastTr = trList.length - 1 === t + // 当前行最小高度 + let rowMinHeight = 0 + for (let d = 0; d < tr.tdList.length; d++) { + const td = tr.tdList[d] + // 计算之前行x轴偏移量 + let offsetXIndex = 0 + if (trList.length > 1 && t !== 0) { + for (let pT = 0; pT < t; pT++) { + const pTr = trList[pT] + // 相同x轴是否存在跨行 + for (let pD = 0; pD < pTr.tdList.length; pD++) { + const pTd = pTr.tdList[pD] + const pTdX = pTd.x! + const pTdY = pTd.y! + const pTdWidth = pTd.width! + const pTdHeight = pTd.height! + // 小于 + if (pTdX < x) continue + if (pTdX > x) break + if (pTd.x === x && pTdY + pTdHeight > y) { + x += pTdWidth + offsetXIndex += 1 + } + } + } + } + // 计算格列数 + let colIndex = 0 + const preTd = tr.tdList[d - 1] + if (preTd) { + colIndex = preTd.colIndex! + (offsetXIndex || 1) + if (preTd.colspan > 1) { + colIndex += preTd.colspan - 1 + } + } else { + colIndex += offsetXIndex + } + // 计算格宽高 + let width = 0 + for (let col = 0; col < td.colspan; col++) { + width += colgroup[col + colIndex].width + } + let height = 0 + for (let row = 0; row < td.rowspan; row++) { + height += trList[row + t].height + } + // y偏移量 + if (rowMinHeight === 0 || rowMinHeight > height) { + rowMinHeight = height + } + // 当前行最后一个td + const isLastRowTd = tr.tdList.length - 1 === d + // 当前列最后一个td + let isLastColTd = isLastTr + if (!isLastColTd) { + if (td.rowspan > 1) { + const nextTrLength = trList.length - 1 - t + isLastColTd = td.rowspan - 1 === nextTrLength + } + } + // 当前表格最后一个td + const isLastTd = isLastTr && isLastRowTd + td.isLastRowTd = isLastRowTd + td.isLastColTd = isLastColTd + td.isLastTd = isLastTd + // 修改当前格clientBox + td.x = x + td.y = y + td.width = width + td.height = height + td.rowIndex = t + td.colIndex = colIndex + // 当前列x轴累加 + x += width + // 一行中的最后td + if (isLastRowTd && !isLastTd) { + x = 0 + y += rowMinHeight + } + } + } + } + + public render(ctx: CanvasRenderingContext2D, element: IElement, startX: number, startY: number) { + const { colgroup, trList } = element + if (!colgroup || !trList) return + const { scale } = this.options + const tableWidth = element.width! * scale + const tableHeight = element.height! * scale + ctx.save() + // 渲染边框 + this._drawBorder(ctx, startX, startY, tableWidth, tableHeight) + // 渲染表格 + for (let t = 0; t < trList.length; t++) { + const tr = trList[t] + for (let d = 0; d < tr.tdList.length; d++) { + const td = tr.tdList[d] + const { isLastRowTd, isLastColTd, isLastTd } = td + const width = td.width! * scale + const height = td.height! * scale + const x = td.x! * scale + startX + width + const y = td.y! * scale + startY + // 绘制线条 + ctx.beginPath() + if (isLastRowTd && !isLastTd) { + // 是否跨行到底 + if (y + height < startY + tableHeight) { + ctx.moveTo(x, y + height) + ctx.lineTo(x - width, y + height) + } + } else if (isLastColTd && !isLastTd) { + ctx.moveTo(x, y) + ctx.lineTo(x, y + height) + } else if (!isLastRowTd && !isLastColTd && !isLastTd) { + ctx.moveTo(x, y) + ctx.lineTo(x, y + height) + ctx.lineTo(x - width, y + height) + } else if (isLastTd) { + // 是否跨列到最右 + if (x + width === startX + tableWidth) { + ctx.moveTo(x, y) + ctx.lineTo(x, y + height) + } + } + ctx.stroke() + } + } + 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 3265492..52efd66 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -80,7 +80,12 @@ export class CanvasEvent { this.draw.setPageNo(Number(pageIndex)) } // 结束位置 - const { index: endIndex } = this.position.getPositionByXY(evt.offsetX, evt.offsetY) + const positionResult = this.position.getPositionByXY({ + x: evt.offsetX, + y: evt.offsetY + }) + const { index, isTable, tdValueIndex } = positionResult + let endIndex = isTable ? tdValueIndex! : index let end = ~endIndex ? endIndex : 0 // 开始位置 let start = this.mouseDownStartIndex @@ -105,15 +110,46 @@ export class CanvasEvent { this.draw.setPageNo(Number(pageIndex)) } this.isAllowDrag = true - const { index, isDirectHit, isImage } = this.position.getPositionByXY(evt.offsetX, evt.offsetY) + const positionResult = this.position.getPositionByXY({ + x: evt.offsetX, + y: evt.offsetY + }) + const { + index, + isDirectHit, + isImage, + isTable, + trIndex, + tdIndex, + tdValueIndex, + tdId, + trId, + tableId + } = positionResult + // 设置位置上下文 + this.position.setPositionContext({ + isTable: isTable || false, + index, + trIndex, + tdIndex, + tdId, + trId, + tableId + }) // 记录选区开始位置 - this.mouseDownStartIndex = index + this.mouseDownStartIndex = isTable ? tdValueIndex! : index // 绘制 const isDirectHitImage = isDirectHit && isImage if (~index) { - this.range.setRange(index, index) + let curIndex = index + if (isTable) { + this.range.setRange(tdValueIndex!, tdValueIndex!) + curIndex = tdValueIndex! + } else { + this.range.setRange(index, index) + } this.draw.render({ - curIndex: index, + curIndex, isSubmitHistory: false, isSetCursor: !isDirectHitImage, isComputeRowList: false @@ -124,7 +160,8 @@ export class CanvasEvent { if (isDirectHitImage) { const elementList = this.draw.getElementList() const positionList = this.position.getPositionList() - this.imageParticle.drawResizer(elementList[index], positionList[index]) + const curIndex = isTable ? tdValueIndex! : index + this.imageParticle.drawResizer(elementList[curIndex], positionList[curIndex]) } } @@ -167,8 +204,16 @@ export class CanvasEvent { this.range.setRange(curIndex, curIndex) this.draw.render({ curIndex }) } else if (evt.key === KeyMap.Enter) { + // 表格需要上下文信息 + const positionContext = this.position.getPositionContext() + let restArg = {} + if (positionContext.isTable) { + const { tdId, trId, tableId } = positionContext + restArg = { tdId, trId, tableId } + } const enterText: IElement = { - value: ZERO + value: ZERO, + ...restArg } if (isCollspace) { elementList.splice(index + 1, 0, enterText) @@ -277,8 +322,16 @@ export class CanvasEvent { const { index } = cursorPosition const { startIndex, endIndex } = this.range.getRange() const isCollspace = startIndex === endIndex + // 表格需要上下文信息 + const positionContext = this.position.getPositionContext() + let restArg = {} + if (positionContext.isTable) { + const { tdId, trId, tableId } = positionContext + restArg = { tdId, trId, tableId } + } const inputData: IElement[] = data.split('').map(value => ({ - value + value, + ...restArg })) let start = 0 if (isCollspace) { diff --git a/src/editor/core/position/Position.ts b/src/editor/core/position/Position.ts index ad39db6..d2c1b59 100644 --- a/src/editor/core/position/Position.ts +++ b/src/editor/core/position/Position.ts @@ -1,29 +1,41 @@ import { ElementType } from "../.." import { ZERO } from "../../dataset/constant/Common" import { IEditorOption } from "../../interface/Editor" -import { IElement, IElementPosition } from "../../interface/Element" -import { ICurrentPosition } from "../../interface/Position" +import { IElementPosition } from "../../interface/Element" +import { ICurrentPosition, IGetPositionByXYPayload, IPositionContext } from "../../interface/Position" import { Draw } from "../draw/Draw" export class Position { private cursorPosition: IElementPosition | null + private positionContext: IPositionContext private positionList: IElementPosition[] - private elementList: IElement[] private draw: Draw private options: Required constructor(draw: Draw) { this.positionList = [] - this.elementList = [] this.cursorPosition = null + this.positionContext = { + isTable: false + } this.draw = draw this.options = draw.getOptions() } + public getOriginalPositionList(): IElementPosition[] { + return this.positionList + } + public getPositionList(): IElementPosition[] { + const { isTable } = this.positionContext + if (isTable) { + const { index, trIndex, tdIndex } = this.positionContext + const elementList = this.draw.getOriginalElementList() + return elementList[index!].trList![trIndex!].tdList[tdIndex!].positionList || [] + } return this.positionList } @@ -31,7 +43,7 @@ export class Position { this.positionList = payload } - public setCursorPosition(position: IElementPosition) { + public setCursorPosition(position: IElementPosition | null) { this.cursorPosition = position } @@ -39,22 +51,69 @@ export class Position { return this.cursorPosition } - public getPositionByXY(x: number, y: number): ICurrentPosition { - this.elementList = this.draw.getElementList() + public getPositionContext(): IPositionContext { + return this.positionContext + } + + public setPositionContext(payload: IPositionContext) { + this.positionContext = payload + } + + public getPositionByXY(payload: IGetPositionByXYPayload): ICurrentPosition { + const { x, y, isTable } = payload + let { elementList, positionList } = payload + if (!elementList) { + elementList = this.draw.getOriginalElementList() + } + if (!positionList) { + positionList = this.positionList + } const curPageNo = this.draw.getPageNo() - for (let j = 0; j < this.positionList.length; j++) { - const { index, pageNo, coordinate: { leftTop, rightTop, leftBottom } } = this.positionList[j] + for (let j = 0; j < positionList.length; j++) { + const { index, pageNo, coordinate: { leftTop, rightTop, leftBottom } } = positionList[j] if (curPageNo !== pageNo) continue // 命中元素 if (leftTop[0] <= x && rightTop[0] >= x && leftTop[1] <= y && leftBottom[1] >= y) { let curPostionIndex = j - const element = this.elementList[j] + const element = elementList[j] + // 表格被命中 + if (element.type === ElementType.TABLE) { + for (let t = 0; t < element.trList!.length; t++) { + const tr = element.trList![t] + for (let d = 0; d < tr.tdList.length; d++) { + const td = tr.tdList[d] + const tablePosition = this.getPositionByXY({ + x, + y, + td, + tablePosition: positionList[j], + isTable: true, + elementList: td.value, + positionList: td.positionList + }) + if (~tablePosition.index) { + return { + index, + isImage: tablePosition.isImage, + isDirectHit: tablePosition.isDirectHit, + isTable: true, + tdIndex: d, + trIndex: t, + tdValueIndex: tablePosition.index, + tdId: td.id, + trId: tr.id, + tableId: element.id + } + } + } + } + } // 图片区域均为命中 if (element.type === ElementType.IMAGE) { return { index: curPostionIndex, isDirectHit: true, isImage: true } } // 判断是否在文字中间前后 - if (this.elementList[index].value !== ZERO) { + if (elementList[index].value !== ZERO) { const valueWidth = rightTop[0] - leftTop[0] if (x < leftTop[0] + valueWidth / 2) { curPostionIndex = j - 1 @@ -66,8 +125,22 @@ export class Position { // 非命中区域 let isLastArea = false let curPostionIndex = -1 + // 判断是否在表格内 + if (isTable) { + const { td, tablePosition } = payload + if (td && tablePosition) { + const { leftTop } = tablePosition.coordinate + const tdX = td.x! + leftTop[0] + const tdY = td.y! + leftTop[1] + const tdWidth = td.width! + const tdHeight = td.height! + if (!(tdX < x && x < tdX + tdWidth && tdY < y && y < tdY + tdHeight)) { + return { index: curPostionIndex } + } + } + } // 判断所属行是否存在元素 - const firstLetterList = this.positionList.filter(p => p.isLastLetter && p.pageNo === curPageNo) + const firstLetterList = positionList.filter(p => p.isLastLetter && p.pageNo === curPageNo) for (let j = 0; j < firstLetterList.length; j++) { const { index, pageNo, coordinate: { leftTop, leftBottom } } = firstLetterList[j] if (curPageNo !== pageNo) continue @@ -75,7 +148,7 @@ export class Position { const isHead = x < this.options.margins[3] // 是否在头部 if (isHead) { - const headIndex = this.positionList.findIndex(p => p.rowNo === firstLetterList[j].rowNo) + const headIndex = positionList.findIndex(p => p.rowNo === firstLetterList[j].rowNo) curPostionIndex = ~headIndex ? headIndex : index } else { curPostionIndex = index @@ -86,7 +159,7 @@ export class Position { } if (!isLastArea) { // 当前页最后一行 - return { index: firstLetterList[firstLetterList.length - 1]?.index || this.positionList.length - 1 } + return { index: firstLetterList[firstLetterList.length - 1]?.index || positionList.length - 1 } } return { index: curPostionIndex } } diff --git a/src/editor/dataset/enum/Element.ts b/src/editor/dataset/enum/Element.ts index 92019a7..c429bd3 100644 --- a/src/editor/dataset/enum/Element.ts +++ b/src/editor/dataset/enum/Element.ts @@ -1,4 +1,5 @@ export enum ElementType { TEXT = 'text', - IMAGE = 'image' + IMAGE = 'image', + TABLE = 'table' } \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index a748ab6..6599a75 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -1,5 +1,4 @@ import './assets/css/index.css' -import { ZERO } from './dataset/constant/Common' import { IEditorOption } from './interface/Editor' import { IElement } from './interface/Element' import { Draw } from './core/draw/Draw' @@ -7,8 +6,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' +import { formatElementList } from './utils/element' export default class Editor { @@ -42,22 +41,11 @@ export default class Editor { marginIndicatorSize: 35, marginIndicatorColor: '#BABABA', margins: [100, 120, 100, 120], + tdPadding: 5, + defaultTdHeight: 40, ...options } - if (elementList[0]?.value !== ZERO) { - elementList.unshift({ - value: ZERO - }) - } - for (let i = 0; i < elementList.length; i++) { - const el = elementList[i] - if (el.value === '\n') { - el.value = ZERO - } - if (el.type === ElementType.IMAGE) { - el.id = getUUID() - } - } + formatElementList(elementList) // 监听 this.listener = new Listener() // 启动 diff --git a/src/editor/interface/Draw.ts b/src/editor/interface/Draw.ts index 3e36f3f..4ca27e8 100644 --- a/src/editor/interface/Draw.ts +++ b/src/editor/interface/Draw.ts @@ -1,3 +1,6 @@ +import { IElementPosition } from "./Element" +import { IRow } from "./Row" + export interface IDrawOption { curIndex?: number; isSetCursor?: boolean; @@ -16,4 +19,20 @@ export interface IImageParticleCreateResult { resizerHandleList: HTMLDivElement[]; resizerImageContainer: HTMLDivElement; resizerImage: HTMLImageElement; +} + +export interface IDrawRowPayload { + positionList: IElementPosition[]; + rowList: IRow[]; + pageNo: number; + startIndex: number; + startX: number; + startY: number; + innerWidth: number; +} + +export interface IDrawRowResult { + x: number; + y: number; + index: number; } \ No newline at end of file diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 872d3bf..5289add 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -23,5 +23,7 @@ export interface IEditorOption { resizerSize?: number; marginIndicatorSize?: number; marginIndicatorColor?: string, - margins?: [top: number, right: number, bootom: number, left: number] + margins?: [top: number, right: number, bootom: number, left: number], + tdPadding?: number; + defaultTdHeight?: number; } \ No newline at end of file diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts index 89c607e..7e2b241 100644 --- a/src/editor/interface/Element.ts +++ b/src/editor/interface/Element.ts @@ -1,11 +1,12 @@ import { ElementType } from "../dataset/enum/Element" import { RowFlex } from "../dataset/enum/Row" +import { IColgroup } from "./table/Colgroup" +import { ITr } from "./table/Tr" -export interface IElementMetrics { - width: number; - height: number; - boundingBoxAscent: number; - boundingBoxDescent: number; +export interface IElementBasic { + id?: string; + type?: ElementType; + value: string; } export interface IElementStyle { @@ -23,13 +24,27 @@ export interface IElementStyle { rowMargin?: number; } -export interface IElementBasic { - id?: string; - type?: ElementType; - value: string; +export interface ITableAttr { + colgroup?: IColgroup[]; + trList?: ITr[]; +} + +export interface ITableElement { + tdId?: string; + trId?: string; + tableId?: string; } -export type IElement = IElementBasic & IElementStyle +export type ITable = ITableAttr & ITableElement + +export type IElement = IElementBasic & IElementStyle & ITable + +export interface IElementMetrics { + width: number; + height: number; + boundingBoxAscent: number; + boundingBoxDescent: number; +} export interface IElementPosition { pageNo: number; diff --git a/src/editor/interface/Position.ts b/src/editor/interface/Position.ts index 89ab4a8..69c4dd4 100644 --- a/src/editor/interface/Position.ts +++ b/src/editor/interface/Position.ts @@ -1,5 +1,36 @@ +import { IElement } from ".." +import { IElementPosition } from "./Element" +import { ITd } from "./table/Td" + export interface ICurrentPosition { index: number; isImage?: boolean; + isTable?: boolean; isDirectHit?: boolean; + trIndex?: number; + tdIndex?: number; + tdValueIndex?: number; + tdId?: string; + trId?: string; + tableId?: string; +} + +export interface IGetPositionByXYPayload { + x: number; + y: number; + isTable?: boolean; + td?: ITd; + tablePosition?: IElementPosition; + elementList?: IElement[]; + positionList?: IElementPosition[]; +} + +export interface IPositionContext { + isTable: boolean; + index?: number; + trIndex?: number; + tdIndex?: number; + tdId?: string; + trId?: string; + tableId?: string; } \ No newline at end of file diff --git a/src/editor/interface/table/Colgroup.ts b/src/editor/interface/table/Colgroup.ts new file mode 100644 index 0000000..5a85ad1 --- /dev/null +++ b/src/editor/interface/table/Colgroup.ts @@ -0,0 +1,4 @@ +export interface IColgroup { + id?: string; + width: number; +} \ No newline at end of file diff --git a/src/editor/interface/table/Td.ts b/src/editor/interface/table/Td.ts new file mode 100644 index 0000000..1e13a2c --- /dev/null +++ b/src/editor/interface/table/Td.ts @@ -0,0 +1,20 @@ +import { IElement, IElementPosition } from "../Element" +import { IRow } from "../Row" + +export interface ITd { + id?: string; + x?: number; + y?: number; + width?: number; + height?: number; + colspan: number; + rowspan: number; + value: IElement[]; + isLastRowTd?: boolean; + isLastColTd?: boolean; + isLastTd?: boolean; + rowIndex?: number; + colIndex?: number; + rowList?: IRow[]; + positionList?: IElementPosition[]; +} \ No newline at end of file diff --git a/src/editor/interface/table/Tr.ts b/src/editor/interface/table/Tr.ts new file mode 100644 index 0000000..d530335 --- /dev/null +++ b/src/editor/interface/table/Tr.ts @@ -0,0 +1,7 @@ +import { ITd } from "./Td" + +export interface ITr { + id?: string; + height: number; + tdList: ITd[]; +} \ No newline at end of file diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts new file mode 100644 index 0000000..639787a --- /dev/null +++ b/src/editor/utils/element.ts @@ -0,0 +1,43 @@ +import { getUUID } from "." +import { ElementType, IElement } from ".." +import { ZERO } from "../dataset/constant/Common" + +export function formatElementList(elementList: IElement[]) { + if (elementList[0]?.value !== ZERO) { + elementList.unshift({ + value: ZERO + }) + } + for (let i = 0; i < elementList.length; i++) { + const el = elementList[i] + if (el.type === ElementType.TABLE) { + const tableId = getUUID() + el.id = tableId + if (el.trList) { + for (let t = 0; t < el.trList.length; t++) { + const tr = el.trList[t] + const trId = getUUID() + tr.id = trId + for (let d = 0; d < tr.tdList.length; d++) { + const td = tr.tdList[d] + const tdId = getUUID() + td.id = tdId + formatElementList(td.value) + for (let v = 0; v < td.value.length; v++) { + const value = td.value[v] + value.tdId = tdId + value.trId = trId + value.tableId = tableId + } + } + } + } + } + if (el.value === '\n') { + el.value = ZERO + } + if (el.type === ElementType.IMAGE) { + el.id = getUUID() + } + } +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index b8e9d3a..ea5c82a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,7 +3,7 @@ import Editor, { ElementType, IElement, RowFlex } from './editor' 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电子签名：【】` + 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 => { @@ -11,7 +11,7 @@ window.onload = function () { return ~i ? Array(c.length).fill(i).map((_, j) => i + j) : [] }).flat() // 模拟加粗字 - const boldText = ['主诉：', '现病史：', '既往史：', '流行病史：', '体格检查：', '辅助检查：', '门诊诊断：', '处置治疗：', '电子签名：'] + const boldText = ['主诉：', '现病史：', '既往史：', '流行病史：', '体格检查：', '辅助检查：', '门诊诊断：', '处置治疗：', '电子签名：', '其他记录：'] const boldIndex: number[] = boldText.map(b => { const i = text.indexOf(b) return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : [] @@ -69,12 +69,116 @@ window.onload = function () { id: 'signature', type: ElementType.IMAGE }) + data.push({ + type: ElementType.TABLE, + value: `\n`, + colgroup: [{ + width: 180 + }, { + width: 80 + }, { + width: 130 + }, { + width: 130 + }], + trList: [{ + height: 40, + tdList: [{ + colspan: 1, + rowspan: 2, + value: [ + { value: `1`, size: 16 }, + { value: '.', size: 16 } + ] + }, { + colspan: 1, + rowspan: 1, + value: [ + { value: `2`, size: 16 }, + { value: '.', size: 16 } + ] + }, { + colspan: 2, + rowspan: 1, + value: [ + { value: `3`, size: 16 }, + { value: '.', size: 16 } + ] + }] + }, { + height: 40, + tdList: [{ + colspan: 1, + rowspan: 1, + value: [ + { value: `4`, size: 16 }, + { value: '.', size: 16 } + ] + }, { + colspan: 1, + rowspan: 1, + value: [ + { value: `5`, size: 16 }, + { value: '.', size: 16 } + ] + }, { + colspan: 1, + rowspan: 1, + value: [ + { value: `6`, size: 16 }, + { value: '.', size: 16 } + ] + }] + }, { + height: 40, + tdList: [{ + colspan: 1, + rowspan: 1, + value: [ + { value: `7`, size: 16 }, + { value: '.', size: 16 } + ] + }, { + colspan: 1, + rowspan: 1, + value: [ + { value: `8`, size: 16 }, + { value: '.', size: 16 } + ] + }, { + colspan: 1, + rowspan: 1, + value: [ + { value: `9`, size: 16 }, + { value: '.', size: 16 } + ] + }, { + colspan: 1, + rowspan: 1, + value: [ + { value: `1`, size: 16 }, + { value: `0`, size: 16 }, + { value: '.', size: 16 } + ] + }] + }] + }) + data.push(...[{ + value: 'E', + size: 16 + }, { + value: 'O', + size: 16 + }, { + value: 'F', + size: 16 + }]) // 初始化编辑器 const container = document.querySelector('.editor')! const instance = new Editor(container, data, { margins: [100, 120, 100, 120] }) - console.log('编辑器实例: ', instance) + console.log('实例: ', instance) // 撤销、重做、格式刷、清除格式 const undoDom = document.querySelector('.menu-item__undo')! @@ -183,7 +287,81 @@ window.onload = function () { const li = evt.target as HTMLLIElement instance.command.executeRowMargin(Number(li.dataset.rowmargin!)) } - // 图片上传、搜索、打印 + // 表格插入、图片上传、搜索、打印 + const tableDom = document.querySelector('.menu-item__table')! + const tablePanelContainer = document.querySelector('.menu-item__table__collapse')! + const tableClose = document.querySelector('.table-close')! + const tableTitle = document.querySelector('.table-select')! + const tablePanel = document.querySelector('.table-panel')! + // 绘制行列 + const tableCellList: HTMLDivElement[][] = [] + for (let i = 0; i < 10; i++) { + const tr = document.createElement('tr') + tr.classList.add('table-row') + const trCellList: HTMLDivElement[] = [] + for (let j = 0; j < 10; j++) { + const td = document.createElement('td') + td.classList.add('table-cel') + tr.append(td) + trCellList.push(td) + } + tablePanel.append(tr) + tableCellList.push(trCellList) + } + let colIndex = 0 + let rowIndex = 0 + // 移除所有格选择 + function removeAllTableCellSelect() { + tableCellList.forEach(tr => { + tr.forEach(td => td.classList.remove('active')) + }) + } + // 设置标题内容 + function setTableTitle(payload: string) { + tableTitle.innerText = payload + } + // 恢复初始状态 + function recoveryTable() { + // 还原选择样式、标题、选择行列 + removeAllTableCellSelect() + setTableTitle('插入') + colIndex = 0 + rowIndex = 0 + // 隐藏panel + tablePanelContainer.style.display = 'none' + } + tableDom.onclick = function () { + console.log('table') + tablePanelContainer!.style.display = 'block' + } + tablePanel.onmousemove = function (evt) { + const celSize = 16 + const rowMarginTop = 10 + const celMarginRight = 6 + const { offsetX, offsetY } = evt + // 移除所有选择 + removeAllTableCellSelect() + colIndex = Math.ceil(offsetX / (celSize + celMarginRight)) || 1 + rowIndex = Math.ceil(offsetY / (celSize + rowMarginTop)) || 1 + // 改变选择样式 + tableCellList.forEach((tr, trIndex) => { + tr.forEach((td, tdIndex) => { + if (tdIndex < colIndex && trIndex < rowIndex) { + td.classList.add('active') + } + }) + }) + // 改变表格标题 + setTableTitle(`${rowIndex}×${colIndex}`) + } + tableClose.onclick = function () { + recoveryTable() + } + tablePanel.onclick = function () { + // 应用选择 + instance.command.executeInsertTable(rowIndex, colIndex) + recoveryTable() + } const imageDom = document.querySelector('.menu-item__image')! const imageFileDom = document.querySelector('#image')! imageDom.onclick = function () { @@ -308,7 +486,6 @@ window.onload = function () { } instance.listener.pageScaleChange = function (payload) { - console.log('payload: ', payload); document.querySelector('.page-scale-percentage')!.innerText = `${Math.floor(payload * 10 * 10)}%` } diff --git a/src/style.css b/src/style.css index 4b5ed6a..4f6184e 100644 --- a/src/style.css +++ b/src/style.css @@ -78,7 +78,7 @@ ul { display: flex; align-items: center; justify-content: center; - margin: 0 6px; + margin: 0 5px; } .menu-item>div:hover { @@ -97,7 +97,7 @@ ul { background-size: 100% 100%; } -.menu-item>div span { +.menu-item>div>span { width: 16px; height: 3px; display: inline-block; @@ -272,6 +272,91 @@ ul { display: none; } +.menu-item__table { + position: relative; +} + +.menu-item__table i { + background-image: url('./assets/images/table.svg'); +} + +.menu-item .menu-item__table__collapse { + width: 270px; + height: 310px; + background: #fff; + box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%); + border: 1px solid #e2e6ed; + box-sizing: border-box; + border-radius: 2px; + position: absolute; + display: none; + z-index: 99; + top: 25px; + left: 0; + padding: 14px 27px; + cursor: auto; +} + +.menu-item .menu-item__table__collapse .table-close { + position: absolute; + right: 10px; + top: 5px; + cursor: pointer; +} + +.menu-item .menu-item__table__collapse .table-close:hover { + color: #7d7e80; +} + +.menu-item .menu-item__table__collapse:hover { + background: #fff; +} + +.menu-item .menu-item__table__collapse .table-title { + display: flex; + justify-content: flex-start; + padding-bottom: 5px; + border-bottom: 1px solid #e2e6ed; +} + +.table-title span { + font-size: 12px; + color: #3d4757; + display: inline; + margin: 0; +} + +.table-panel { + cursor: pointer; +} + +.table-panel .table-row { + display: flex; + flex-wrap: nowrap; + margin-top: 10px; + pointer-events: none; +} + +.table-panel .table-cel { + width: 16px; + height: 16px; + box-sizing: border-box; + border: 1px solid #e2e6ed; + background: #fff; + position: relative; + margin-right: 6px; + pointer-events: none; +} + +.table-panel .table-cel.active { + border: 1px solid rgba(73, 145, 242, .2); + background: rgba(73, 145, 242, .15); +} + +.table-panel .table-row .table-cel:last-child { + margin-right: 0; +} + .menu-item__search { position: relative; }