From beb3274a581867c7bd2655d1b7b83645f0665e8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Tue, 14 Dec 2021 21:56:22 +0800 Subject: [PATCH] feat:add table tool --- src/editor/assets/css/index.css | 80 ++++++++++++++++ src/editor/core/draw/Draw.ts | 7 ++ .../core/draw/particle/table/TableTool.ts | 93 +++++++++++++++++++ src/editor/core/event/CanvasEvent.ts | 10 ++ src/editor/core/event/GlobalEvent.ts | 4 + 5 files changed, 194 insertions(+) create mode 100644 src/editor/core/draw/particle/table/TableTool.ts diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css index 0860908..f81b73b 100644 --- a/src/editor/assets/css/index.css +++ b/src/editor/assets/css/index.css @@ -107,4 +107,84 @@ .resizer-image { position: absolute; opacity: 0.5; +} + +.table-tool__row { + position: absolute; + width: 12px; + border-radius: 6.5px; + overflow: hidden; + background-color: #E2E6ED; +} + +.table-tool__row .table-tool__row__item { + width: 100%; + position: relative; +} + +.table-tool__row .table-tool__row__item::after { + content: ''; + position: absolute; + bottom: 0; + left: 2px; + width: 8px; + height: 1px; + background-color: #C0C6CF; +} + +.table-tool__row .table-tool__row__item:last-child:after { + display: none; +} + +.table-tool__col { + position: absolute; + height: 12px; + border-radius: 6.5px; + overflow: hidden; + background-color: #E2E6ED; + display: flex; +} + +.table-tool__col .table-tool__col__item { + height: 100%; + position: relative; +} + +.table-tool__col .table-tool__col__item::after { + content: ''; + position: absolute; + top: 2px; + left: -1px; + width: 1px; + height: 8px; + z-index: 1; + background-color: #C0C6CF; +} + +.table-tool__col .table-tool__col__item:first-child:after { + display: none; +} + +.table-tool__row .table-tool__row__item.active, +.table-tool__col .table-tool__col__item.active { + background-color: #C4D7FA; +} + +.table-tool__col .table-tool__anchor { + right: -5px; + width: 10px; + height: 12px; + z-index: 9; + position: absolute; + cursor: col-resize; +} + +.table-tool__row .table-tool__anchor { + bottom: -5px; + left: 0; + width: 12px; + height: 10px; + z-index: 9; + position: absolute; + cursor: row-resize; } \ No newline at end of file diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 55266de..45efde8 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -25,6 +25,7 @@ import { PageNumber } from "./frame/PageNumber" import { GlobalObserver } from "../observer/GlobalObserver" import { TableParticle } from "./particle/table/TableParticle" import { ISearchResult } from "../../interface/Search" +import { TableTool } from "./particle/table/TableTool" export class Draw { @@ -50,6 +51,7 @@ export class Draw { private imageParticle: ImageParticle private textParticle: TextParticle private tableParticle: TableParticle + private tableTool: TableTool private pageNumber: PageNumber private rowList: IRow[] @@ -87,6 +89,7 @@ export class Draw { this.imageParticle = new ImageParticle(this) this.textParticle = new TextParticle(this) this.tableParticle = new TableParticle(this) + this.tableTool = new TableTool(this) this.pageNumber = new PageNumber(this) new GlobalObserver(this) @@ -234,6 +237,10 @@ export class Draw { return this.imageParticle } + public getTableTool(): TableTool { + return this.tableTool + } + public getRowCount(): number { return this.rowList.length } diff --git a/src/editor/core/draw/particle/table/TableTool.ts b/src/editor/core/draw/particle/table/TableTool.ts new file mode 100644 index 0000000..d83bcb6 --- /dev/null +++ b/src/editor/core/draw/particle/table/TableTool.ts @@ -0,0 +1,93 @@ +import { IElement } from "../../../.." +import { IEditorOption } from "../../../../interface/Editor" +import { IElementPosition } from "../../../../interface/Element" +import { Position } from "../../../position/Position" +import { Draw } from "../../Draw" + +export class TableTool { + + private readonly translate = 18 + + private draw: Draw + private options: Required + private position: Position + private container: HTMLDivElement + private toolRowContainer: HTMLDivElement | null + private toolColContainer: HTMLDivElement | null + + constructor(draw: Draw) { + this.draw = draw + this.options = draw.getOptions() + this.position = draw.getPosition() + this.container = draw.getContainer() + // x、y轴 + this.toolRowContainer = null + this.toolColContainer = null + } + + public dispose() { + this.toolRowContainer?.remove() + this.toolColContainer?.remove() + } + + public render(element: IElement, position: IElementPosition) { + this.dispose() + const { trIndex, tdIndex } = this.position.getPositionContext() + const { scale } = this.options + const height = this.draw.getHeight() + const pageGap = this.draw.getPageGap() + const { colgroup, trList } = element + const { coordinate: { leftTop } } = position + const prePageHeight = this.draw.getPageNo() * (height + pageGap) + const td = element.trList![trIndex!].tdList[tdIndex!] + const rowIndex = td.rowIndex + const colIndex = td.colIndex + // 计算表格行列信息 + const rowList = trList!.map(tr => tr.height) + const colList = colgroup!.map(col => col.width) + // 渲染行 + const rowContainer = document.createElement('div') + rowContainer.classList.add('table-tool__row') + rowContainer.style.transform = `translateX(-${this.translate * scale}px)` + for (let r = 0; r < rowList.length; r++) { + const rowHeight = rowList[r] * scale + const rowItem = document.createElement('div') + rowItem.classList.add('table-tool__row__item') + if (r === rowIndex) { + rowItem.classList.add('active') + } + const rowItemAnchor = document.createElement('div') + rowItemAnchor.classList.add('table-tool__anchor') + rowItem.append(rowItemAnchor) + rowItem.style.height = `${rowHeight}px` + rowContainer.append(rowItem) + } + rowContainer.style.left = `${leftTop[0]}px` + rowContainer.style.top = `${leftTop[1] + prePageHeight}px` + this.container.append(rowContainer) + this.toolRowContainer = rowContainer + + // 渲染列 + const colContainer = document.createElement('div') + colContainer.classList.add('table-tool__col') + colContainer.style.transform = `translateY(-${this.translate * scale}px)` + for (let c = 0; c < colList.length; c++) { + const colHeight = colList[c] * scale + const colItem = document.createElement('div') + colItem.classList.add('table-tool__col__item') + if (c === colIndex) { + colItem.classList.add('active') + } + const colItemAnchor = document.createElement('div') + colItemAnchor.classList.add('table-tool__anchor') + colItem.append(colItemAnchor) + colItem.style.width = `${colHeight}px` + colContainer.append(colItem) + } + colContainer.style.left = `${leftTop[0]}px` + colContainer.style.top = `${leftTop[1] + prePageHeight}px` + this.container.append(colContainer) + this.toolColContainer = colContainer + } + +} \ No newline at end of file diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index 52efd66..876cdcc 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -6,6 +6,7 @@ import { writeTextByElementList } from "../../utils/clipboard" import { Cursor } from "../cursor/Cursor" import { Draw } from "../draw/Draw" import { ImageParticle } from "../draw/particle/ImageParticle" +import { TableTool } from "../draw/particle/table/TableTool" import { HistoryManager } from "../history/HistoryManager" import { Position } from "../position/Position" import { RangeManager } from "../range/RangeManager" @@ -24,6 +25,7 @@ export class CanvasEvent { private cursor: Cursor | null private historyManager: HistoryManager private imageParticle: ImageParticle + private tableTool: TableTool constructor(draw: Draw) { this.isAllowDrag = false @@ -38,6 +40,7 @@ export class CanvasEvent { this.range = this.draw.getRange() this.historyManager = this.draw.getHistoryManager() this.imageParticle = this.draw.getImageParticle() + this.tableTool = this.draw.getTableTool() } public register() { @@ -163,6 +166,13 @@ export class CanvasEvent { const curIndex = isTable ? tdValueIndex! : index this.imageParticle.drawResizer(elementList[curIndex], positionList[curIndex]) } + // 表格工具组件 + this.tableTool.dispose() + if (isTable) { + const elementList = this.draw.getOriginalElementList() + const positionList = this.position.getOriginalPositionList() + this.tableTool.render(elementList[index], positionList[index]) + } } public mouseleave(evt: MouseEvent) { diff --git a/src/editor/core/event/GlobalEvent.ts b/src/editor/core/event/GlobalEvent.ts index f364126..8c58400 100644 --- a/src/editor/core/event/GlobalEvent.ts +++ b/src/editor/core/event/GlobalEvent.ts @@ -4,6 +4,7 @@ import { findParent } from "../../utils" import { Cursor } from "../cursor/Cursor" import { Draw } from "../draw/Draw" import { ImageParticle } from "../draw/particle/ImageParticle" +import { TableTool } from "../draw/particle/table/TableTool" import { RangeManager } from "../range/RangeManager" import { CanvasEvent } from "./CanvasEvent" @@ -16,6 +17,7 @@ export class GlobalEvent { private canvasEvent: CanvasEvent private range: RangeManager private imageParticle: ImageParticle + private tableTool: TableTool constructor(draw: Draw, canvasEvent: CanvasEvent) { this.draw = draw @@ -25,6 +27,7 @@ export class GlobalEvent { this.cursor = null this.range = draw.getRange() this.imageParticle = draw.getImageParticle() + this.tableTool = draw.getTableTool() } public register() { @@ -66,6 +69,7 @@ export class GlobalEvent { this.range.recoveryRangeStyle() this.range.setRange(0, 0) this.imageParticle.clearResizer() + this.tableTool.dispose() } public setDragState() {