lsadmin/canvas-editor_fex765
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: table cell background color

Browse Source
This commit is contained in:
Hufe921
2023-05-24 21:44:35 +08:00
parent a500402dd4
commit dbcab3b485
6 changed files with 145 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/editor/core/command/Command.ts
+6
View File
@@ -53,6 +53,7 @@ export class Command {
private static cancelMergeTableCell: CommandAdapt['cancelMergeTableCell']
private static tableTdVerticalAlign: CommandAdapt['tableTdVerticalAlign']
private static tableBorderType: CommandAdapt['tableBorderType']
private static tableTdBackgroundColor: CommandAdapt['tableTdBackgroundColor']
private static image: CommandAdapt['image']
private static hyperlink: CommandAdapt['hyperlink']
private static deleteHyperlink: CommandAdapt['deleteHyperlink']
@@ -133,6 +134,7 @@ export class Command {
Command.cancelMergeTableCell = adapt.cancelMergeTableCell.bind(adapt)
Command.tableTdVerticalAlign = adapt.tableTdVerticalAlign.bind(adapt)
Command.tableBorderType = adapt.tableBorderType.bind(adapt)
Command.tableTdBackgroundColor = adapt.tableTdBackgroundColor.bind(adapt)
Command.image = adapt.image.bind(adapt)
Command.hyperlink = adapt.hyperlink.bind(adapt)
Command.deleteHyperlink = adapt.deleteHyperlink.bind(adapt)
@@ -347,6 +349,10 @@ export class Command {
return Command.tableBorderType(payload)
}
public executeTableTdBackgroundColor(payload: string) {
return Command.tableTdBackgroundColor(payload)
}
public executeHyperlink(payload: IElement) {
return Command.hyperlink(payload)
}
src/editor/core/command/CommandAdapt.ts
+19
View File
@@ -1151,6 +1151,25 @@ export class CommandAdapt {
})
}
public tableTdBackgroundColor(payload: string) {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
const rowCol = this.draw.getTableParticle().getRangeRowCol()
if (!rowCol) return
for (let r = 0; r < rowCol.length; r++) {
const row = rowCol[r]
for (let c = 0; c < row.length; c++) {
const col = row[c]
col.backgroundColor = payload
}
}
const { endIndex } = this.range.getRange()
this.range.setRange(endIndex, endIndex)
this.draw.render({
isCompute: false
})
}
public hyperlink(payload: IElement) {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
src/editor/core/draw/Draw.ts
+4
View File
@@ -516,6 +516,10 @@ export class Draw {
return this.tableTool
}
public getTableParticle(): TableParticle {
return this.tableParticle
}
public getHeader(): Header {
return this.header
}
src/editor/core/draw/particle/table/TableParticle.ts
+112 -39
View File
@@ -1,5 +1,6 @@
import { ElementType, IElement, TableBorder } from '../../../..'
import { IEditorOption } from '../../../../interface/Editor'
import { ITd } from '../../../../interface/table/Td'
import { ITr } from '../../../../interface/table/Tr'
import { deepClone } from '../../../../utils'
import { RangeManager } from '../../../range/RangeManager'
@@ -16,10 +17,12 @@ interface IDrawTableBorderOption {
export class TableParticle {
private draw: Draw
private range: RangeManager
private options: Required<IEditorOption>
constructor(draw: Draw) {
this.draw = draw
this.range = draw.getRange()
this.options = draw.getOptions()
}
@@ -41,7 +44,51 @@ export class TableParticle {
return trList
}
private _drawBorder(payload: IDrawTableBorderOption) {
public getRangeRowCol(): ITd[][] | null {
const { isTable, index, trIndex, tdIndex } = this.draw.getPosition().getPositionContext()
if (!isTable) return null
const { isCrossRowCol, startTdIndex, endTdIndex, startTrIndex, endTrIndex } = this.range.getRange()
const originalElementList = this.draw.getOriginalElementList()
const element = originalElementList[index!]
const curTrList = element.trList!
// 非跨列直接返回光标所在单元格
if (!isCrossRowCol) {
return [[curTrList[trIndex!].tdList[tdIndex!]]]
}
let startTd = curTrList[startTrIndex!].tdList[startTdIndex!]
let endTd = curTrList[endTrIndex!].tdList[endTdIndex!]
// 交换起始位置
if (startTd.x! > endTd.x! || startTd.y! > endTd.y!) {
[startTd, endTd] = [endTd, startTd]
}
const startColIndex = startTd.colIndex!
const endColIndex = endTd.colIndex! + (endTd.colspan - 1)
const startRowIndex = startTd.rowIndex!
const endRowIndex = endTd.rowIndex! + (endTd.rowspan - 1)
// 选区行列
const rowCol: ITd[][] = []
for (let t = 0; t < curTrList.length; t++) {
const tr = curTrList[t]
const tdList: ITd[] = []
for (let d = 0; d < tr.tdList.length; d++) {
const td = tr.tdList[d]
const tdColIndex = td.colIndex!
const tdRowIndex = td.rowIndex!
if (
tdColIndex >= startColIndex && tdColIndex <= endColIndex
&& tdRowIndex >= startRowIndex && tdRowIndex <= endRowIndex
) {
tdList.push(td)
}
}
if (tdList.length) {
rowCol.push(tdList)
}
}
return rowCol.length ? rowCol : null
}
private _drawOuterBorder(payload: IDrawTableBorderOption) {
const { ctx, startX, startY, width, height, isDrawFullBorder } = payload
ctx.beginPath()
const x = Math.round(startX)
@@ -58,6 +105,68 @@ export class TableParticle {
ctx.translate(-0.5, -0.5)
}
private _drawBorder(ctx: CanvasRenderingContext2D, element: IElement, startX: number, startY: number) {
const { colgroup, trList, borderType } = element
if (!colgroup || !trList || borderType === TableBorder.EMPTY) return
const { scale } = this.options
const tableWidth = element.width! * scale
const tableHeight = element.height! * scale
const isExternalBorderType = borderType === TableBorder.EXTERNAL
ctx.save()
// 渲染边框
this._drawOuterBorder({
ctx,
startX,
startY,
width: tableWidth,
height: tableHeight,
isDrawFullBorder: isExternalBorderType
})
if (!isExternalBorderType) {
// 渲染表格
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 width = td.width! * scale
const height = td.height! * scale
const x = Math.round(td.x! * scale + startX + width)
const y = Math.round(td.y! * scale + startY)
ctx.translate(0.5, 0.5)
// 绘制线条
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(x, y + height)
ctx.lineTo(x - width, y + height)
ctx.stroke()
ctx.translate(-0.5, -0.5)
}
}
}
ctx.restore()
}
private _drawBackgroundColor(ctx: CanvasRenderingContext2D, element: IElement, startX: number, startY: number) {
const { trList } = element
if (!trList) return
const { scale } = this.options
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]
if (!td.backgroundColor) continue
ctx.save()
const width = td.width! * scale
const height = td.height! * scale
const x = Math.round(td.x! * scale + startX)
const y = Math.round(td.y! * scale + startY)
ctx.fillStyle = td.backgroundColor
ctx.fillRect(x, y, width, height)
ctx.restore()
}
}
}
public computeRowColInfo(element: IElement) {
const { colgroup, trList } = element
if (!colgroup || !trList) return
@@ -192,44 +301,8 @@ export class TableParticle {
}
public render(ctx: CanvasRenderingContext2D, element: IElement, startX: number, startY: number) {
const { colgroup, trList, borderType } = element
if (!colgroup || !trList || borderType === TableBorder.EMPTY) return
const { scale } = this.options
const tableWidth = element.width! * scale
const tableHeight = element.height! * scale
const isExternalBorderType = borderType === TableBorder.EXTERNAL
ctx.save()
// 渲染边框
this._drawBorder({
ctx,
startX,
startY,
width: tableWidth,
height: tableHeight,
isDrawFullBorder: isExternalBorderType
})
if (!isExternalBorderType) {
// 渲染表格
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 width = td.width! * scale
const height = td.height! * scale
const x = Math.round(td.x! * scale + startX + width)
const y = Math.round(td.y! * scale + startY)
ctx.translate(0.5, 0.5)
// 绘制线条
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(x, y + height)
ctx.lineTo(x - width, y + height)
ctx.stroke()
ctx.translate(-0.5, -0.5)
}
}
}
ctx.restore()
this._drawBackgroundColor(ctx, element, startX, startY)
this._drawBorder(ctx, element, startX, startY)
}
}
src/editor/interface/table/Td.ts
+1
View File
@@ -19,6 +19,7 @@ export interface ITd {
rowList?: IRow[];
positionList?: IElementPosition[];
verticalAlign?: VerticalAlign;
backgroundColor?: string;
mainHeight?: number; // 内容 + 内边距高度
realHeight?: number; // 真实高度（包含跨列）
realMinHeight?: number; // 真实最小高度（包含跨列）
src/editor/utils/element.ts
+3
View File
@@ -426,6 +426,9 @@ export function zipElementList(payload: IElement[]): IElement[] {
if (td.verticalAlign) {
zipTd.verticalAlign = td.verticalAlign
}
if (td.backgroundColor) {
zipTd.backgroundColor = td.backgroundColor
}
tr.tdList[d] = zipTd
}
}