editor-svg 1.0.2 → 1.0.3

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

@@ -1,158 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,188 +0,0 @@
-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)
-    }
-  }
-}