editor-svg 1.0.0

package/src/editor/core/draw/frame/Header.ts

@@ -0,0 +1,158 @@
+import { maxHeightRadioMapping } from '../../../dataset/constant/Common'
+import { EditorZone } from '../../../dataset/enum/Editor'
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { IElement, IElementPosition } from '../../../interface/Element'
+import { IRow } from '../../../interface/Row'
+import { pickSurroundElementList } from '../../../utils/element'
+import { Position } from '../../position/Position'
+import { Zone } from '../../zone/Zone'
+import { Draw } from '../Draw'
+
+export class Header {
+  private draw: Draw
+  private position: Position
+  private zone: Zone
+  private options: DeepRequired<IEditorOption>
+
+  private elementList: IElement[]
+  private rowList: IRow[]
+  private positionList: IElementPosition[]
+
+  constructor(draw: Draw, data?: IElement[]) {
+    this.draw = draw
+    this.position = draw.getPosition()
+    this.zone = draw.getZone()
+    this.options = draw.getOptions()
+
+    this.elementList = data || []
+    this.rowList = []
+    this.positionList = []
+  }
+
+  public getRowList(): IRow[] {
+    return this.rowList
+  }
+
+  public setElementList(elementList: IElement[]) {
+    this.elementList = elementList
+  }
+
+  public getElementList(): IElement[] {
+    return this.elementList
+  }
+
+  public getPositionList(): IElementPosition[] {
+    return this.positionList
+  }
+
+  public compute() {
+    this.recovery()
+    this._computeRowList()
+    this._computePositionList()
+  }
+
+  public recovery() {
+    this.rowList = []
+    this.positionList = []
+  }
+
+  private _computeRowList() {
+    const innerWidth = this.draw.getInnerWidth()
+    const margins = this.draw.getMargins()
+    const surroundElementList = pickSurroundElementList(this.elementList)
+    this.rowList = this.draw.computeRowList({
+      startX: margins[3],
+      startY: this.getHeaderTop(),
+      innerWidth,
+      elementList: this.elementList,
+      surroundElementList
+    })
+  }
+
+  private _computePositionList() {
+    const headerTop = this.getHeaderTop()
+    const innerWidth = this.draw.getInnerWidth()
+    const margins = this.draw.getMargins()
+    const startX = margins[3]
+    const startY = headerTop
+    this.position.computePageRowPosition({
+      positionList: this.positionList,
+      rowList: this.rowList,
+      pageNo: 0,
+      startRowIndex: 0,
+      startIndex: 0,
+      startX,
+      startY,
+      innerWidth,
+      zone: EditorZone.HEADER
+    })
+  }
+
+  public getHeaderTop(): number {
+    const {
+      header: { top, disabled },
+      scale
+    } = this.options
+    if (disabled) return 0
+    return Math.floor(top * scale)
+  }
+
+  public getMaxHeight(): number {
+    const {
+      header: { maxHeightRadio }
+    } = this.options
+    const height = this.draw.getHeight()
+    return Math.floor(height * maxHeightRadioMapping[maxHeightRadio])
+  }
+
+  public getHeight(): number {
+    if (this.options.header.disabled) return 0
+    const maxHeight = this.getMaxHeight()
+    const rowHeight = this.getRowHeight()
+    return rowHeight > maxHeight ? maxHeight : rowHeight
+  }
+
+  public getRowHeight(): number {
+    return this.rowList.reduce((pre, cur) => pre + cur.height, 0)
+  }
+
+  public getExtraHeight(): number {
+    // 页眉上边距 + 实际高 - 页面上边距
+    const margins = this.draw.getMargins()
+    const headerHeight = this.getHeight()
+    const headerTop = this.getHeaderTop()
+    const extraHeight = headerTop + headerHeight - margins[0]
+    return extraHeight <= 0 ? 0 : extraHeight
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    ctx.save()
+    ctx.globalAlpha = this.zone.isHeaderActive()
+      ? 1
+      : this.options.header.inactiveAlpha
+    const innerWidth = this.draw.getInnerWidth()
+    const maxHeight = this.getMaxHeight()
+    // 超出最大高度不渲染
+    const rowList: IRow[] = []
+    let curRowHeight = 0
+    for (let r = 0; r < this.rowList.length; r++) {
+      const row = this.rowList[r]
+      if (curRowHeight + row.height > maxHeight) {
+        break
+      }
+      rowList.push(row)
+      curRowHeight += row.height
+    }
+    this.draw.drawRow(ctx, {
+      elementList: this.elementList,
+      positionList: this.positionList,
+      rowList,
+      pageNo,
+      startIndex: 0,
+      innerWidth,
+      zone: EditorZone.HEADER
+    })
+    ctx.restore()
+  }
+}

package/src/editor/core/draw/frame/LineNumber.ts

@@ -0,0 +1,43 @@
+import { LineNumberType } from '../../../dataset/enum/LineNumber'
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { Draw } from '../Draw'
+
+export class LineNumber {
+  private draw: Draw
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    const {
+      scale,
+      lineNumber: { color, size, font, right, type }
+    } = this.options
+    const textParticle = this.draw.getTextParticle()
+    const margins = this.draw.getMargins()
+    const positionList = this.draw.getPosition().getOriginalMainPositionList()
+    const pageRowList = this.draw.getPageRowList()
+    const rowList = pageRowList[pageNo]
+    ctx.save()
+    ctx.fillStyle = color
+    ctx.font = `${size * scale}px ${font}`
+    for (let i = 0; i < rowList.length; i++) {
+      const row = rowList[i]
+      const {
+        coordinate: { leftBottom }
+      } = positionList[row.startIndex]
+      const seq = type === LineNumberType.PAGE ? i + 1 : row.rowIndex + 1
+      const textMetrics = textParticle.measureText(ctx, {
+        value: `${seq}`
+      })
+      const x = margins[3] - (textMetrics.width + right) * scale
+      const y = leftBottom[1] - textMetrics.actualBoundingBoxAscent * scale
+      ctx.fillText(`${seq}`, x, y)
+    }
+    ctx.restore()
+  }
+}

package/src/editor/core/draw/frame/Margin.ts

@@ -0,0 +1,53 @@
+import { PageMode } from '../../../dataset/enum/Editor'
+import { IEditorOption } from '../../../interface/Editor'
+import { Draw } from '../Draw'
+
+export class Margin {
+  private draw: Draw
+  private options: Required<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    const { marginIndicatorColor, pageMode } = this.options
+    const width = this.draw.getWidth()
+    const height =
+      pageMode === PageMode.CONTINUITY
+        ? this.draw.getCanvasHeight(pageNo) / this.draw.getPagePixelRatio()
+        : this.draw.getHeight()
+    const margins = this.draw.getMargins()
+    const marginIndicatorSize = this.draw.getMarginIndicatorSize()
+    ctx.save()
+    ctx.translate(0.5, 0.5)
+    ctx.strokeStyle = marginIndicatorColor
+    ctx.beginPath()
+    const leftTopPoint: [number, number] = [margins[3], margins[0]]
+    const rightTopPoint: [number, number] = [width - margins[1], margins[0]]
+    const leftBottomPoint: [number, number] = [margins[3], height - margins[2]]
+    const rightBottomPoint: [number, number] = [
+      width - margins[1],
+      height - margins[2]
+    ]
+    // 上左
+    ctx.moveTo(leftTopPoint[0] - marginIndicatorSize, leftTopPoint[1])
+    ctx.lineTo(...leftTopPoint)
+    ctx.lineTo(leftTopPoint[0], leftTopPoint[1] - marginIndicatorSize)
+    // 上右
+    ctx.moveTo(rightTopPoint[0] + marginIndicatorSize, rightTopPoint[1])
+    ctx.lineTo(...rightTopPoint)
+    ctx.lineTo(rightTopPoint[0], rightTopPoint[1] - marginIndicatorSize)
+    // 下左
+    ctx.moveTo(leftBottomPoint[0] - marginIndicatorSize, leftBottomPoint[1])
+    ctx.lineTo(...leftBottomPoint)
+    ctx.lineTo(leftBottomPoint[0], leftBottomPoint[1] + marginIndicatorSize)
+    // 下右
+    ctx.moveTo(rightBottomPoint[0] + marginIndicatorSize, rightBottomPoint[1])
+    ctx.lineTo(...rightBottomPoint)
+    ctx.lineTo(rightBottomPoint[0], rightBottomPoint[1] + marginIndicatorSize)
+    ctx.stroke()
+    ctx.restore()
+  }
+}

package/src/editor/core/draw/frame/PageBorder.ts

@@ -0,0 +1,47 @@
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { Draw } from '../Draw'
+import { Footer } from './Footer'
+import { Header } from './Header'
+
+export class PageBorder {
+  private draw: Draw
+  private header: Header
+  private footer: Footer
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.header = draw.getHeader()
+    this.footer = draw.getFooter()
+    this.options = draw.getOptions()
+  }
+
+  public render(ctx: CanvasRenderingContext2D) {
+    const {
+      scale,
+      pageBorder: { color, lineWidth, padding }
+    } = this.options
+    ctx.save()
+    ctx.translate(0.5, 0.5)
+    ctx.strokeStyle = color
+    ctx.lineWidth = lineWidth * scale
+    const margins = this.draw.getMargins()
+    // x：左边距 - 左距离正文距离
+    const x = margins[3] - padding[3] * scale
+    // y：页眉上边距 + 页眉高度 - 上距离正文距离
+    const y = margins[0] + this.header.getExtraHeight() - padding[0] * scale
+    // width：页面宽度 + 左右距离正文距离
+    const width = this.draw.getInnerWidth() + (padding[1] + padding[3]) * scale
+    // height：页面高度 - 正文起始位置 - 页脚高度 - 下边距 - 下距离正文距离
+    const height =
+      this.draw.getHeight() -
+      y -
+      this.footer.getExtraHeight() -
+      margins[2] +
+      padding[2] * scale
+    ctx.rect(x, y, width, height)
+    ctx.stroke()
+    ctx.restore()
+  }
+}

package/src/editor/core/draw/frame/PageNumber.ts

@@ -0,0 +1,88 @@
+import { FORMAT_PLACEHOLDER } from '../../../dataset/constant/PageNumber'
+import { NumberType } from '../../../dataset/enum/Common'
+import { RowFlex } from '../../../dataset/enum/Row'
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { convertNumberToChinese } from '../../../utils'
+import { Draw } from '../Draw'
+
+export class PageNumber {
+  private draw: Draw
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+  }
+
+  static formatNumberPlaceholder(
+    text: string,
+    pageNo: number,
+    replaceReg: RegExp,
+    numberType: NumberType
+  ) {
+    const pageNoText =
+      numberType === NumberType.CHINESE
+        ? convertNumberToChinese(pageNo)
+        : `${pageNo}`
+    return text.replace(replaceReg, pageNoText)
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    const {
+      scale,
+      pageNumber: {
+        size,
+        font,
+        color,
+        rowFlex,
+        numberType,
+        format,
+        startPageNo,
+        fromPageNo
+      }
+    } = this.options
+    if (pageNo < fromPageNo) return
+    // 处理页码格式
+    let text = format
+    const pageNoReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_NO)
+    if (pageNoReg.test(text)) {
+      text = PageNumber.formatNumberPlaceholder(
+        text,
+        pageNo + startPageNo - fromPageNo,
+        pageNoReg,
+        numberType
+      )
+    }
+    const pageCountReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_COUNT)
+    if (pageCountReg.test(text)) {
+      text = PageNumber.formatNumberPlaceholder(
+        text,
+        this.draw.getPageCount() - fromPageNo,
+        pageCountReg,
+        numberType
+      )
+    }
+    const width = this.draw.getWidth()
+    // 计算y位置
+    const height = this.draw.getHeight()
+    const pageNumberBottom = this.draw.getPageNumberBottom()
+    const y = height - pageNumberBottom
+    ctx.save()
+    ctx.fillStyle = color
+    ctx.font = `${size * scale}px ${font}`
+    // 计算x位置-居左、居中、居右
+    let x = 0
+    const margins = this.draw.getMargins()
+    const { width: textWidth } = ctx.measureText(text)
+    if (rowFlex === RowFlex.CENTER) {
+      x = (width - textWidth) / 2
+    } else if (rowFlex === RowFlex.RIGHT) {
+      x = width - textWidth - margins[1]
+    } else {
+      x = margins[3]
+    }
+    ctx.fillText(text, x, y)
+    ctx.restore()
+  }
+}

package/src/editor/core/draw/frame/Placeholder.ts

@@ -0,0 +1,114 @@
+import { IEditorOption, IElement } from '../../..'
+import { DeepRequired } from '../../../interface/Common'
+import { IElementPosition } from '../../../interface/Element'
+import { IPlaceholder } from '../../../interface/Placeholder'
+import { IRow } from '../../../interface/Row'
+import { formatElementList } from '../../../utils/element'
+import { Position } from '../../position/Position'
+import { Draw } from '../Draw'
+import { LineBreakParticle } from '../particle/LineBreakParticle'
+
+export interface IPlaceholderRenderOption {
+  placeholder: Required<IPlaceholder>
+  startY?: number
+}
+
+export class Placeholder {
+  private draw: Draw
+  private position: Position
+  private options: DeepRequired<IEditorOption>
+
+  private elementList: IElement[]
+  private rowList: IRow[]
+  private positionList: IElementPosition[]
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.position = draw.getPosition()
+    this.options = <DeepRequired<IEditorOption>>draw.getOptions()
+
+    this.elementList = []
+    this.rowList = []
+    this.positionList = []
+  }
+
+  private _recovery() {
+    this.elementList = []
+    this.rowList = []
+    this.positionList = []
+  }
+
+  public _compute(options?: IPlaceholderRenderOption) {
+    this._computeRowList()
+    this._computePositionList(options)
+  }
+
+  private _computeRowList() {
+    const innerWidth = this.draw.getInnerWidth()
+    this.rowList = this.draw.computeRowList({
+      innerWidth,
+      elementList: this.elementList
+    })
+  }
+
+  private _computePositionList(options?: IPlaceholderRenderOption) {
+    const { lineBreak, scale } = this.options
+    const headerExtraHeight = this.draw.getHeader().getExtraHeight()
+    const innerWidth = this.draw.getInnerWidth()
+    const margins = this.draw.getMargins()
+    let startX = margins[3]
+    // 换行符绘制开启时，移动起始位置
+    if (!lineBreak.disabled) {
+      startX += (LineBreakParticle.WIDTH + LineBreakParticle.GAP) * scale
+    }
+    const startY = options?.startY || margins[0] + headerExtraHeight
+    this.position.computePageRowPosition({
+      positionList: this.positionList,
+      rowList: this.rowList,
+      pageNo: 0,
+      startRowIndex: 0,
+      startIndex: 0,
+      startX,
+      startY,
+      innerWidth
+    })
+  }
+
+  public render(
+    ctx: CanvasRenderingContext2D,
+    options?: IPlaceholderRenderOption
+  ) {
+    const { placeholder = this.options.placeholder } = options || {}
+    const { data, font, size, color, opacity } = placeholder
+    this._recovery()
+    // 构建元素列表并格式化
+    this.elementList = [
+      {
+        value: data,
+        font,
+        size,
+        color
+      }
+    ]
+    formatElementList(this.elementList, {
+      editorOptions: this.options,
+      isForceCompensation: true
+    })
+    // 计算
+    this._compute(options)
+    const innerWidth = this.draw.getInnerWidth()
+    // 绘制
+    ctx.save()
+    ctx.globalAlpha = opacity
+    this.draw.drawRow(ctx, {
+      elementList: this.elementList,
+      positionList: this.positionList,
+      rowList: this.rowList,
+      pageNo: 0,
+      startIndex: 0,
+      innerWidth,
+      isDrawLineBreak: false
+    })
+    ctx.restore()
+  }
+}

package/src/editor/core/draw/frame/Watermark.ts

@@ -0,0 +1,188 @@
+import { IEditorOption } from '../../..'
+import { FORMAT_PLACEHOLDER } from '../../../dataset/constant/PageNumber'
+import { WatermarkType } from '../../../dataset/enum/Watermark'
+import { DeepRequired } from '../../../interface/Common'
+import { Draw } from '../Draw'
+import { PageNumber } from './PageNumber'
+
+export class Watermark {
+  private draw: Draw
+  private options: DeepRequired<IEditorOption>
+  private imageCache: Map<string, HTMLImageElement>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = <DeepRequired<IEditorOption>>draw.getOptions()
+    this.imageCache = new Map()
+  }
+
+  public renderText(ctx: CanvasRenderingContext2D, pageNo: number) {
+    const {
+      watermark: { data, opacity, font, size, color, repeat, gap, numberType },
+      scale
+    } = this.options
+    const width = this.draw.getWidth()
+    const height = this.draw.getHeight()
+    // 开始绘制
+    ctx.save()
+    ctx.globalAlpha = opacity
+    ctx.font = `${size * scale}px ${font}`
+    // 格式化文本
+    let text = data
+    const pageNoReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_NO)
+    if (pageNoReg.test(text)) {
+      text = PageNumber.formatNumberPlaceholder(
+        text,
+        pageNo + 1,
+        pageNoReg,
+        numberType
+      )
+    }
+    const pageCountReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_COUNT)
+    if (pageCountReg.test(text)) {
+      text = PageNumber.formatNumberPlaceholder(
+        text,
+        this.draw.getPageCount(),
+        pageCountReg,
+        numberType
+      )
+    }
+    // 测量长度并绘制
+    const measureText = ctx.measureText(text)
+    if (repeat) {
+      const dpr = this.draw.getPagePixelRatio()
+      const temporaryCanvas = document.createElement('canvas')
+      const temporaryCtx = temporaryCanvas.getContext('2d')!
+      // 勾股定理计算旋转后的宽高对角线尺寸 a^2 + b^2 = c^2
+      const textWidth = measureText.width
+      const textHeight =
+        measureText.actualBoundingBoxAscent +
+        measureText.actualBoundingBoxDescent
+      const diagonalLength = Math.sqrt(
+        Math.pow(textWidth, 2) + Math.pow(textHeight, 2)
+      )
+      // 加上 gap 间距
+      const patternWidth = diagonalLength + 2 * gap[0] * scale
+      const patternHeight = diagonalLength + 2 * gap[1] * scale
+      // 宽高设置
+      temporaryCanvas.width = patternWidth
+      temporaryCanvas.height = patternHeight
+      temporaryCanvas.style.width = `${patternWidth * dpr}px`
+      temporaryCanvas.style.height = `${patternHeight * dpr}px`
+      // 旋转45度
+      temporaryCtx.translate(patternWidth / 2, patternHeight / 2)
+      temporaryCtx.rotate((-45 * Math.PI) / 180)
+      temporaryCtx.translate(-patternWidth / 2, -patternHeight / 2)
+      // 绘制文本
+      temporaryCtx.font = `${size * scale}px ${font}`
+      temporaryCtx.fillStyle = color
+      temporaryCtx.fillText(
+        text,
+        (patternWidth - textWidth) / 2,
+        (patternHeight - textHeight) / 2 + measureText.actualBoundingBoxAscent
+      )
+      // 创建平铺模式
+      const pattern = ctx.createPattern(temporaryCanvas, 'repeat')
+      if (pattern) {
+        ctx.fillStyle = pattern
+        ctx.fillRect(0, 0, width, height)
+      }
+    } else {
+      const x = width / 2
+      const y = height / 2
+      ctx.fillStyle = color
+      ctx.translate(x, y)
+      ctx.rotate((-45 * Math.PI) / 180)
+      ctx.fillText(
+        text,
+        -measureText.width / 2,
+        measureText.actualBoundingBoxAscent - (size * scale) / 2
+      )
+    }
+    ctx.restore()
+  }
+
+  public renderImage(ctx: CanvasRenderingContext2D) {
+    const {
+      watermark: { width, height, data, opacity, repeat, gap },
+      scale
+    } = this.options
+    if (!this.imageCache.has(data)) {
+      const img = new Image()
+      img.setAttribute('crossOrigin', 'Anonymous')
+      img.src = data
+      img.onload = () => {
+        this.imageCache.set(data, img)
+        // 避免层级上浮，触发编辑器二次渲染
+        this.draw.render({
+          isCompute: false,
+          isSubmitHistory: false
+        })
+      }
+      return
+    }
+    const docWidth = this.draw.getWidth()
+    const docHeight = this.draw.getHeight()
+    const imageWidth = width * scale
+    const imageHeight = height * scale
+    // 开始绘制
+    ctx.save()
+    ctx.globalAlpha = opacity
+    if (repeat) {
+      const dpr = this.draw.getPagePixelRatio()
+      const temporaryCanvas = document.createElement('canvas')
+      const temporaryCtx = temporaryCanvas.getContext('2d')!
+      // 勾股定理计算旋转后的宽高对角线尺寸 a^2 + b^2 = c^2
+      const diagonalLength = Math.sqrt(
+        Math.pow(imageWidth, 2) + Math.pow(imageHeight, 2)
+      )
+      // 加上 gap 间距
+      const patternWidth = diagonalLength + 2 * gap[0] * scale
+      const patternHeight = diagonalLength + 2 * gap[1] * scale
+      // 宽高设置
+      temporaryCanvas.width = patternWidth
+      temporaryCanvas.height = patternHeight
+      temporaryCanvas.style.width = `${patternWidth * dpr}px`
+      temporaryCanvas.style.height = `${patternHeight * dpr}px`
+      // 旋转45度
+      temporaryCtx.translate(patternWidth / 2, patternHeight / 2)
+      temporaryCtx.rotate((-45 * Math.PI) / 180)
+      temporaryCtx.translate(-patternWidth / 2, -patternHeight / 2)
+      // 绘制图片
+      temporaryCtx.drawImage(
+        this.imageCache.get(data)!,
+        (patternWidth - imageWidth) / 2,
+        (patternHeight - imageHeight) / 2,
+        imageWidth,
+        imageHeight
+      )
+      // 创建平铺模式
+      const pattern = ctx.createPattern(temporaryCanvas, 'repeat')
+      if (pattern) {
+        ctx.fillStyle = pattern
+        ctx.fillRect(0, 0, docWidth, docHeight)
+      }
+    } else {
+      const x = docWidth / 2
+      const y = docHeight / 2
+      ctx.translate(x, y)
+      ctx.rotate((-45 * Math.PI) / 180)
+      ctx.drawImage(
+        this.imageCache.get(data)!,
+        -imageWidth / 2,
+        -imageHeight / 2,
+        imageWidth,
+        imageHeight
+      )
+    }
+    ctx.restore()
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    if (this.options.watermark.type === WatermarkType.IMAGE) {
+      this.renderImage(ctx)
+    } else {
+      this.renderText(ctx, pageNo)
+    }
+  }
+}