editor-svg 1.0.0

package/src/editor/core/draw/particle/table/TableParticle.ts

@@ -0,0 +1,558 @@
+import { ElementType, IElement, TableBorder } from '../../../..'
+import { TdBorder, TdSlash } from '../../../../dataset/enum/table/Table'
+import { DeepRequired } from '../../../../interface/Common'
+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'
+import { Draw } from '../../Draw'
+
+interface IDrawTableBorderOption {
+  ctx: CanvasRenderingContext2D
+  startX: number
+  startY: number
+  width: number
+  height: number
+  borderExternalWidth?: number
+  isDrawFullBorder?: boolean
+}
+
+export class TableParticle {
+  private draw: Draw
+  private range: RangeManager
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.range = draw.getRange()
+    this.options = draw.getOptions()
+  }
+
+  public getTrListGroupByCol(payload: ITr[]): ITr[] {
+    const trList = deepClone(payload)
+    for (let t = 0; t < payload.length; t++) {
+      const tr = trList[t]
+      for (let d = tr.tdList.length - 1; d >= 0; d--) {
+        const td = tr.tdList[d]
+        const { rowspan, rowIndex, colIndex } = td
+        const curRowIndex = rowIndex! + rowspan - 1
+        if (curRowIndex !== d) {
+          const changeTd = tr.tdList.splice(d, 1)[0]
+          trList[curRowIndex]?.tdList.splice(colIndex!, 0, changeTd)
+        }
+      }
+    }
+    return trList
+  }
+
+  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!) {
+      // prettier-ignore
+      [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,
+      borderExternalWidth
+    } = payload
+    const { scale } = this.options
+    // 外部边框单独设置
+    const lineWidth = ctx.lineWidth
+    if (borderExternalWidth) {
+      ctx.lineWidth = borderExternalWidth * scale
+    }
+    ctx.beginPath()
+    const x = Math.round(startX)
+    const y = Math.round(startY)
+    ctx.translate(0.5, 0.5)
+    if (isDrawFullBorder) {
+      ctx.rect(x, y, width, height)
+    } else {
+      ctx.moveTo(x, y + height)
+      ctx.lineTo(x, y)
+      ctx.lineTo(x + width, y)
+    }
+    ctx.stroke()
+    // 还原边框设置
+    if (borderExternalWidth) {
+      ctx.lineWidth = lineWidth
+    }
+    ctx.translate(-0.5, -0.5)
+  }
+
+  private _drawSlash(
+    ctx: CanvasRenderingContext2D,
+    td: ITd,
+    startX: number,
+    startY: number
+  ) {
+    const { scale } = this.options
+    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)
+    // 正斜线 /
+    if (td.slashTypes?.includes(TdSlash.FORWARD)) {
+      ctx.moveTo(x + width, y)
+      ctx.lineTo(x, y + height)
+    }
+    // 反斜线 \
+    if (td.slashTypes?.includes(TdSlash.BACK)) {
+      ctx.moveTo(x, y)
+      ctx.lineTo(x + width, y + height)
+    }
+    ctx.stroke()
+    ctx.restore()
+  }
+
+  private _drawBorder(
+    ctx: CanvasRenderingContext2D,
+    element: IElement,
+    startX: number,
+    startY: number
+  ) {
+    const {
+      colgroup,
+      trList,
+      borderType,
+      borderColor,
+      borderWidth = 1,
+      borderExternalWidth
+    } = element
+    if (!colgroup || !trList) return
+    const {
+      scale,
+      table: { defaultBorderColor }
+    } = this.options
+    const tableWidth = element.width! * scale
+    const tableHeight = element.height! * scale
+    // 无边框
+    const isEmptyBorderType = borderType === TableBorder.EMPTY
+    // 仅外边框
+    const isExternalBorderType = borderType === TableBorder.EXTERNAL
+    // 内边框
+    const isInternalBorderType = borderType === TableBorder.INTERNAL
+    ctx.save()
+    // 虚线
+    if (borderType === TableBorder.DASH) {
+      ctx.setLineDash([3, 3])
+    }
+    ctx.lineWidth = borderWidth * scale
+    ctx.strokeStyle = borderColor || defaultBorderColor
+    // 渲染边框
+    if (!isEmptyBorderType && !isInternalBorderType) {
+      this._drawOuterBorder({
+        ctx,
+        startX,
+        startY,
+        width: tableWidth,
+        height: tableHeight,
+        borderExternalWidth,
+        isDrawFullBorder: 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]
+        // 单元格内斜线
+        if (td.slashTypes?.length) {
+          this._drawSlash(ctx, td, startX, startY)
+        }
+        // 没有设置单元格边框 && 没有设置表格边框则忽略
+        if (
+          !td.borderTypes?.length &&
+          (isEmptyBorderType || isExternalBorderType)
+        ) {
+          continue
+        }
+        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()
+        // 单元格边框
+        if (td.borderTypes?.includes(TdBorder.TOP)) {
+          ctx.moveTo(x - width, y)
+          ctx.lineTo(x, y)
+          ctx.stroke()
+        }
+        if (td.borderTypes?.includes(TdBorder.RIGHT)) {
+          ctx.moveTo(x, y)
+          ctx.lineTo(x, y + height)
+          ctx.stroke()
+        }
+        if (td.borderTypes?.includes(TdBorder.BOTTOM)) {
+          ctx.moveTo(x, y + height)
+          ctx.lineTo(x - width, y + height)
+          ctx.stroke()
+        }
+        if (td.borderTypes?.includes(TdBorder.LEFT)) {
+          ctx.moveTo(x - width, y)
+          ctx.lineTo(x - width, y + height)
+          ctx.stroke()
+        }
+        // 表格线
+        if (!isEmptyBorderType && !isExternalBorderType) {
+          // 右边框
+          if (
+            !isInternalBorderType ||
+            td.colIndex! + td.colspan < colgroup.length
+          ) {
+            ctx.moveTo(x, y)
+            ctx.lineTo(x, y + height)
+            // 外部边框宽度设置时 => 最右边框宽度单独设置
+            if (
+              borderExternalWidth &&
+              borderExternalWidth !== borderWidth &&
+              td.colIndex! + td.colspan === colgroup.length
+            ) {
+              const lineWidth = ctx.lineWidth
+              ctx.lineWidth = borderExternalWidth * scale
+              ctx.stroke()
+              // 清空path
+              ctx.beginPath()
+              ctx.lineWidth = lineWidth
+            }
+          }
+          // 下边框
+          if (
+            !isInternalBorderType ||
+            td.rowIndex! + td.rowspan < trList.length
+          ) {
+            // 外部边框宽度设置时 => 立即绘制竖线
+            const isSetExternalBottomBorder =
+              borderExternalWidth &&
+              borderExternalWidth !== borderWidth &&
+              td.rowIndex! + td.rowspan === trList.length
+            if (isSetExternalBottomBorder) {
+              ctx.stroke()
+              // 清空path
+              ctx.beginPath()
+            }
+            ctx.moveTo(x, y + height)
+            ctx.lineTo(x - width, y + height)
+            // 外部边框宽度设置时 => 最下边框宽度单独设置
+            if (isSetExternalBottomBorder) {
+              const lineWidth = ctx.lineWidth
+              ctx.lineWidth = borderExternalWidth * scale
+              ctx.stroke()
+              // 清空path
+              ctx.beginPath()
+              ctx.lineWidth = lineWidth
+            }
+          }
+          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 getTableWidth(element: IElement): number {
+    return element.colgroup!.reduce((pre, cur) => pre + cur.width, 0)
+  }
+
+  public getTableHeight(element: IElement): number {
+    const trList = element.trList
+    if (!trList?.length) return 0
+    return this.getTdListByColIndex(trList, 0).reduce(
+      (pre, cur) => pre + cur.height!,
+      0
+    )
+  }
+
+  public getRowCountByColIndex(trList: ITr[], colIndex: number): number {
+    return this.getTdListByColIndex(trList, colIndex).reduce(
+      (pre, cur) => pre + cur.rowspan,
+      0
+    )
+  }
+
+  public getTdListByColIndex(trList: ITr[], colIndex: number): ITd[] {
+    const data: ITd[] = []
+    for (let r = 0; r < trList.length; r++) {
+      const tdList = trList[r].tdList
+      for (let d = 0; d < tdList.length; d++) {
+        const td = tdList[d]
+        const min = td.colIndex!
+        const max = min + td.colspan - 1
+        if (colIndex >= min && colIndex <= max) {
+          data.push(td)
+        }
+      }
+    }
+    return data
+  }
+
+  public getTdListByRowIndex(trList: ITr[], rowIndex: number) {
+    const data: ITd[] = []
+    for (let r = 0; r < trList.length; r++) {
+      const tdList = trList[r].tdList
+      for (let d = 0; d < tdList.length; d++) {
+        const td = tdList[d]
+        const min = td.rowIndex!
+        const max = min + td.rowspan - 1
+        if (rowIndex >= min && rowIndex <= max) {
+          data.push(td)
+        }
+      }
+    }
+    return data
+  }
+
+  public computeRowColInfo(element: IElement) {
+    const { colgroup, trList } = element
+    if (!colgroup || !trList) return
+    let preX = 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]
+        // 计算当前td所属列索引
+        let colIndex = 0
+        // 第一行td位置为当前列索引+上一个单元格colspan，否则从第一行开始计算列偏移量
+        if (trList.length > 1 && t !== 0) {
+          // 当前列起始索引：以之前单元格为起始点
+          const preTd = tr.tdList[d - 1]
+          const start = preTd ? preTd.colIndex! + preTd.colspan : d
+          for (let c = start; c < colgroup.length; c++) {
+            // 查找相同索引列之前行数，相加判断是否位置被挤占
+            const rowCount = this.getRowCountByColIndex(trList.slice(0, t), c)
+            // 不存在挤占则默认当前单元格可以存在该位置
+            if (rowCount === t) {
+              colIndex = c
+              // 重置单元格起始位置坐标
+              let preColWidth = 0
+              for (let preC = 0; preC < c; preC++) {
+                preColWidth += colgroup[preC].width
+              }
+              preX = preColWidth
+              break
+            }
+          }
+        } else {
+          const preTd = tr.tdList[d - 1]
+          if (preTd) {
+            colIndex = preTd.colIndex! + preTd.colspan
+          }
+        }
+        // 计算格宽高
+        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++) {
+          const curTr = trList[row + t] || trList[t]
+          height += curTr.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 = preX
+        // 之前行相同列的高度
+        let preY = 0
+        for (let preR = 0; preR < t; preR++) {
+          const preTdList = trList[preR].tdList
+          for (let preD = 0; preD < preTdList.length; preD++) {
+            const td = preTdList[preD]
+            if (
+              colIndex >= td.colIndex! &&
+              colIndex < td.colIndex! + td.colspan
+            ) {
+              preY += td.height!
+              break
+            }
+          }
+        }
+        td.y = preY
+        td.width = width
+        td.height = height
+        td.rowIndex = t
+        td.colIndex = colIndex
+        td.trIndex = t
+        td.tdIndex = d
+        // 当前列x轴累加
+        preX += width
+        // 一行中的最后td
+        if (isLastRowTd && !isLastTd) {
+          preX = 0
+        }
+      }
+    }
+  }
+
+  public drawRange(
+    ctx: CanvasRenderingContext2D,
+    element: IElement,
+    startX: number,
+    startY: number
+  ) {
+    const { scale, rangeAlpha, rangeColor } = this.options
+    const { type, trList } = element
+    if (!trList || type !== ElementType.TABLE) return
+    const {
+      isCrossRowCol,
+      startTdIndex,
+      endTdIndex,
+      startTrIndex,
+      endTrIndex
+    } = this.range.getRange()
+    // 存在跨行/列
+    if (!isCrossRowCol) return
+    let startTd = trList[startTrIndex!].tdList[startTdIndex!]
+    let endTd = trList[endTrIndex!].tdList[endTdIndex!]
+    // 交换起始位置
+    if (startTd.x! > endTd.x! || startTd.y! > endTd.y!) {
+      // prettier-ignore
+      [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)
+    ctx.save()
+    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 tdColIndex = td.colIndex!
+        const tdRowIndex = td.rowIndex!
+        if (
+          tdColIndex >= startColIndex &&
+          tdColIndex <= endColIndex &&
+          tdRowIndex >= startRowIndex &&
+          tdRowIndex <= endRowIndex
+        ) {
+          const x = td.x! * scale
+          const y = td.y! * scale
+          const width = td.width! * scale
+          const height = td.height! * scale
+          ctx.globalAlpha = rangeAlpha
+          ctx.fillStyle = rangeColor
+          ctx.fillRect(x + startX, y + startY, width, height)
+        }
+      }
+    }
+    ctx.restore()
+  }
+
+  public render(
+    ctx: CanvasRenderingContext2D,
+    element: IElement,
+    startX: number,
+    startY: number
+  ) {
+    this._drawBackgroundColor(ctx, element, startX, startY)
+    this._drawBorder(ctx, element, startX, startY)
+  }
+}