editor-svg 1.0.0

package/src/editor/core/draw/control/text/TextControl.ts

@@ -0,0 +1,280 @@
+import {
+  CONTROL_STYLE_ATTR,
+  TEXTLIKE_ELEMENT_TYPE
+} from '../../../../dataset/constant/Element'
+import { ControlComponent } from '../../../../dataset/enum/Control'
+import { KeyMap } from '../../../../dataset/enum/KeyMap'
+import { DeepRequired } from '../../../../interface/Common'
+import {
+  IControlContext,
+  IControlInstance,
+  IControlRuleOption
+} from '../../../../interface/Control'
+import { IEditorOption } from '../../../../interface/Editor'
+import { IElement } from '../../../../interface/Element'
+import { omitObject, pickObject } from '../../../../utils'
+import { formatElementContext } from '../../../../utils/element'
+import { Control } from '../Control'
+
+export class TextControl implements IControlInstance {
+  protected element: IElement
+  protected control: Control
+  protected options: DeepRequired<IEditorOption>
+
+  constructor(element: IElement, control: Control) {
+    const draw = control.getDraw()
+    this.options = draw.getOptions()
+    this.element = element
+    this.control = control
+  }
+
+  public setElement(element: IElement) {
+    this.element = element
+  }
+
+  public getElement(): IElement {
+    return this.element
+  }
+
+  public getValue(context: IControlContext = {}): IElement[] {
+    const elementList = context.elementList || this.control.getElementList()
+    const { startIndex } = context.range || this.control.getRange()
+    const startElement = elementList[startIndex]
+    const data: IElement[] = []
+    // 向左查找
+    let preIndex = startIndex
+    while (preIndex > 0) {
+      const preElement = elementList[preIndex]
+      if (
+        preElement.controlId !== startElement.controlId ||
+        preElement.controlComponent === ControlComponent.PREFIX ||
+        preElement.controlComponent === ControlComponent.PRE_TEXT
+      ) {
+        break
+      }
+      if (preElement.controlComponent === ControlComponent.VALUE) {
+        data.unshift(preElement)
+      }
+      preIndex--
+    }
+    // 向右查找
+    let nextIndex = startIndex + 1
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex]
+      if (
+        nextElement.controlId !== startElement.controlId ||
+        nextElement.controlComponent === ControlComponent.POSTFIX ||
+        nextElement.controlComponent === ControlComponent.POST_TEXT
+      ) {
+        break
+      }
+      if (nextElement.controlComponent === ControlComponent.VALUE) {
+        data.push(nextElement)
+      }
+      nextIndex++
+    }
+    return data
+  }
+
+  public setValue(
+    data: IElement[],
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ): number {
+    // 校验是否可以设置
+    if (
+      !options.isIgnoreDisabledRule &&
+      this.control.getIsDisabledControl(context)
+    ) {
+      return -1
+    }
+    const elementList = context.elementList || this.control.getElementList()
+    const range = context.range || this.control.getRange()
+    // 收缩边界到Value内
+    this.control.shrinkBoundary(context)
+    const { startIndex, endIndex } = range
+    const draw = this.control.getDraw()
+    // 移除选区元素
+    if (startIndex !== endIndex) {
+      draw.spliceElementList(
+        elementList,
+        startIndex + 1,
+        endIndex - startIndex,
+        [],
+        {
+          isIgnoreDeletedRule: options.isIgnoreDeletedRule
+        }
+      )
+    } else {
+      // 移除空白占位符
+      this.control.removePlaceholder(startIndex, context)
+    }
+    // 非文本类元素或前缀过渡掉样式属性
+    const startElement = elementList[startIndex]
+    const anchorElement =
+      (startElement.type &&
+        !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type)) ||
+      startElement.controlComponent === ControlComponent.PREFIX ||
+      startElement.controlComponent === ControlComponent.PRE_TEXT
+        ? pickObject(startElement, [
+            'control',
+            'controlId',
+            ...CONTROL_STYLE_ATTR
+          ])
+        : omitObject(startElement, ['type'])
+    // 插入起始位置
+    const start = range.startIndex + 1
+    for (let i = 0; i < data.length; i++) {
+      const newElement: IElement = {
+        ...anchorElement,
+        ...data[i],
+        controlComponent: ControlComponent.VALUE
+      }
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      })
+      draw.spliceElementList(elementList, start + i, 0, [newElement])
+    }
+    return start + data.length - 1
+  }
+
+  public clearValue(
+    context: IControlContext = {},
+    options: IControlRuleOption = {}
+  ): number {
+    // 校验是否可以设置
+    if (
+      !options.isIgnoreDisabledRule &&
+      this.control.getIsDisabledControl(context)
+    ) {
+      return -1
+    }
+    const elementList = context.elementList || this.control.getElementList()
+    const range =
+      context.range || this.control.getValueRange() || this.control.getRange()
+    const { startIndex, endIndex } = range
+    this.control
+      .getDraw()
+      .spliceElementList(
+        elementList,
+        startIndex + 1,
+        endIndex - startIndex,
+        [],
+        {
+          isIgnoreDeletedRule: options.isIgnoreDeletedRule
+        }
+      )
+    const value = this.getValue({
+      range,
+      elementList
+    })
+    if (!value.length) {
+      this.control.addPlaceholder(startIndex, context)
+    }
+    return startIndex
+  }
+
+  public keydown(evt: KeyboardEvent): number | null {
+    if (this.control.getIsDisabledControl()) {
+      return null
+    }
+    const elementList = this.control.getElementList()
+    const range = this.control.getRange()
+    // 收缩边界到Value内
+    this.control.shrinkBoundary()
+    const { startIndex, endIndex } = range
+    const startElement = elementList[startIndex]
+    const endElement = elementList[endIndex]
+    const draw = this.control.getDraw()
+    // backspace
+    if (evt.key === KeyMap.Backspace) {
+      // 移除选区元素
+      if (startIndex !== endIndex) {
+        draw.spliceElementList(
+          elementList,
+          startIndex + 1,
+          endIndex - startIndex
+        )
+        const value = this.getValue()
+        if (!value.length) {
+          this.control.addPlaceholder(startIndex)
+        }
+        return startIndex
+      } else {
+        if (
+          startElement.controlComponent === ControlComponent.PREFIX ||
+          startElement.controlComponent === ControlComponent.PRE_TEXT ||
+          endElement.controlComponent === ControlComponent.POSTFIX ||
+          endElement.controlComponent === ControlComponent.POST_TEXT ||
+          startElement.controlComponent === ControlComponent.PLACEHOLDER
+        ) {
+          // 前缀、后缀、占位符
+          return this.control.removeControl(startIndex)
+        } else {
+          // 文本
+          draw.spliceElementList(elementList, startIndex, 1)
+          const value = this.getValue()
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex - 1)
+          }
+          return startIndex - 1
+        }
+      }
+    } else if (evt.key === KeyMap.Delete) {
+      // 移除选区元素
+      if (startIndex !== endIndex) {
+        draw.spliceElementList(
+          elementList,
+          startIndex + 1,
+          endIndex - startIndex
+        )
+        const value = this.getValue()
+        if (!value.length) {
+          this.control.addPlaceholder(startIndex)
+        }
+        return startIndex
+      } else {
+        const endNextElement = elementList[endIndex + 1]
+        if (
+          ((startElement.controlComponent === ControlComponent.PREFIX ||
+            startElement.controlComponent === ControlComponent.PRE_TEXT) &&
+            endNextElement.controlComponent === ControlComponent.PLACEHOLDER) ||
+          endNextElement.controlComponent === ControlComponent.POSTFIX ||
+          endNextElement.controlComponent === ControlComponent.POST_TEXT ||
+          startElement.controlComponent === ControlComponent.PLACEHOLDER
+        ) {
+          // 前缀、后缀、占位符
+          return this.control.removeControl(startIndex)
+        } else {
+          // 文本
+          draw.spliceElementList(elementList, startIndex + 1, 1)
+          const value = this.getValue()
+          if (!value.length) {
+            this.control.addPlaceholder(startIndex)
+          }
+          return startIndex
+        }
+      }
+    }
+    return endIndex
+  }
+
+  public cut(): number {
+    if (this.control.getIsDisabledControl()) {
+      return -1
+    }
+    this.control.shrinkBoundary()
+    const { startIndex, endIndex } = this.control.getRange()
+    if (startIndex === endIndex) {
+      return startIndex
+    }
+    const draw = this.control.getDraw()
+    const elementList = this.control.getElementList()
+    draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex)
+    const value = this.getValue()
+    if (!value.length) {
+      this.control.addPlaceholder(startIndex)
+    }
+    return startIndex
+  }
+}

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

@@ -0,0 +1,117 @@
+import {
+  BackgroundRepeat,
+  BackgroundSize
+} from '../../../dataset/enum/Background'
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { Draw } from '../Draw'
+
+export class Background {
+  private draw: Draw
+  private options: DeepRequired<IEditorOption>
+  private imageCache: Map<string, HTMLImageElement>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+    this.imageCache = new Map()
+  }
+
+  private _renderBackgroundColor(
+    ctx: CanvasRenderingContext2D,
+    color: string,
+    width: number,
+    height: number
+  ) {
+    ctx.save()
+    ctx.fillStyle = color
+    ctx.fillRect(0, 0, width, height)
+    ctx.restore()
+  }
+
+  private _drawImage(
+    ctx: CanvasRenderingContext2D,
+    imageElement: HTMLImageElement,
+    width: number,
+    height: number
+  ) {
+    const { background, scale } = this.options
+    // contain
+    if (background.size === BackgroundSize.CONTAIN) {
+      const imageWidth = imageElement.width * scale
+      const imageHeight = imageElement.height * scale
+      if (
+        !background.repeat ||
+        background.repeat === BackgroundRepeat.NO_REPEAT
+      ) {
+        ctx.drawImage(imageElement, 0, 0, imageWidth, imageHeight)
+      } else {
+        let startX = 0
+        let startY = 0
+        const repeatXCount =
+          background.repeat === BackgroundRepeat.REPEAT ||
+          background.repeat === BackgroundRepeat.REPEAT_X
+            ? Math.ceil((width * scale) / imageWidth)
+            : 1
+        const repeatYCount =
+          background.repeat === BackgroundRepeat.REPEAT ||
+          background.repeat === BackgroundRepeat.REPEAT_Y
+            ? Math.ceil((height * scale) / imageHeight)
+            : 1
+        for (let x = 0; x < repeatXCount; x++) {
+          for (let y = 0; y < repeatYCount; y++) {
+            ctx.drawImage(imageElement, startX, startY, imageWidth, imageHeight)
+            startY += imageHeight
+          }
+          startY = 0
+          startX += imageWidth
+        }
+      }
+    } else {
+      // cover
+      ctx.drawImage(imageElement, 0, 0, width * scale, height * scale)
+    }
+  }
+
+  private _renderBackgroundImage(
+    ctx: CanvasRenderingContext2D,
+    width: number,
+    height: number
+  ) {
+    const { background } = this.options
+    const imageElementCache = this.imageCache.get(background.image)
+    if (imageElementCache) {
+      this._drawImage(ctx, imageElementCache, width, height)
+    } else {
+      const img = new Image()
+      img.setAttribute('crossOrigin', 'Anonymous')
+      img.src = background.image
+      img.onload = () => {
+        this.imageCache.set(background.image, img)
+        this._drawImage(ctx, img, width, height)
+        // 避免层级上浮，触发编辑器二次渲染
+        this.draw.render({
+          isCompute: false,
+          isSubmitHistory: false
+        })
+      }
+    }
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    const {
+      background: { image, color, applyPageNumbers }
+    } = this.options
+    if (
+      image &&
+      (!applyPageNumbers?.length || applyPageNumbers.includes(pageNo))
+    ) {
+      const { width, height } = this.options
+      this._renderBackgroundImage(ctx, width, height)
+    } else {
+      const width = this.draw.getCanvasWidth(pageNo)
+      const height = this.draw.getCanvasHeight(pageNo)
+      this._renderBackgroundColor(ctx, color, width, height)
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+import { IAreaBadge, IBadge } from '../../../interface/Badge'
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { Draw } from '../Draw'
+
+export class Badge {
+  private draw: Draw
+  private options: DeepRequired<IEditorOption>
+  private imageCache: Map<string, HTMLImageElement>
+  private mainBadge: IBadge | null
+  private areaBadgeMap: Map<string, IBadge>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+    this.imageCache = new Map()
+    this.mainBadge = null
+    this.areaBadgeMap = new Map()
+  }
+
+  public setMainBadge(payload: IBadge | null) {
+    this.mainBadge = payload
+  }
+
+  public setAreaBadgeMap(payload: IAreaBadge[]) {
+    this.areaBadgeMap.clear()
+    payload.forEach(areaBadge => {
+      this.areaBadgeMap.set(areaBadge.areaId, areaBadge.badge)
+    })
+  }
+
+  private _drawImage(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    value: string
+  ) {
+    if (this.imageCache.has(value)) {
+      const img = this.imageCache.get(value)!
+      ctx.drawImage(img, x, y, width, height)
+    } else {
+      const img = new Image()
+      img.setAttribute('crossOrigin', 'Anonymous')
+      img.src = value
+      img.onload = () => {
+        this.imageCache.set(value, img)
+        ctx.drawImage(img, x, y, width, height)
+      }
+    }
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    // 文档签章
+    if (pageNo === 0 && this.mainBadge) {
+      const { scale, badge } = this.options
+      const { left, top, width, height, value } = this.mainBadge
+      // 默认从页眉下开始
+      const headerTop =
+        this.draw.getMargins()[0] + this.draw.getHeader().getExtraHeight()
+      const x = (left || badge.left) * scale
+      const y = (top || badge.top) * scale + headerTop
+      this._drawImage(ctx, x, y, width * scale, height * scale, value)
+    }
+    // 区域签章
+    if (this.areaBadgeMap.size) {
+      const areaInfo = this.draw.getArea().getAreaInfo()
+      if (areaInfo.size) {
+        const { scale, badge } = this.options
+        for (const areaItem of areaInfo) {
+          // 忽略非本页区域
+          const { positionList } = areaItem[1]
+          const firstPosition = positionList[0]
+          if (firstPosition.pageNo !== pageNo) continue
+          // 忽略未设置签章区域
+          const badgeItem = this.areaBadgeMap.get(areaItem[0])
+          if (!badgeItem) continue
+          const { left, top, width, height, value } = badgeItem
+          const x = (left || badge.left) * scale
+          const y =
+            (top || badge.top) * scale + firstPosition.coordinate.leftTop[1]
+          this._drawImage(ctx, x, y, width * scale, height * scale, value)
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,155 @@
+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 { Position } from '../../position/Position'
+import { Zone } from '../../zone/Zone'
+import { Draw } from '../Draw'
+
+export class Footer {
+  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()
+    this.rowList = this.draw.computeRowList({
+      innerWidth,
+      elementList: this.elementList
+    })
+  }
+
+  private _computePositionList() {
+    const footerBottom = this.getFooterBottom()
+    const innerWidth = this.draw.getInnerWidth()
+    const margins = this.draw.getMargins()
+    const startX = margins[3]
+    // 页面高度 - 页脚顶部距离页面底部高度
+    const pageHeight = this.draw.getHeight()
+    const footerHeight = this.getHeight()
+    const startY = pageHeight - footerBottom - footerHeight
+    this.position.computePageRowPosition({
+      positionList: this.positionList,
+      rowList: this.rowList,
+      pageNo: 0,
+      startRowIndex: 0,
+      startIndex: 0,
+      startX,
+      startY,
+      innerWidth,
+      zone: EditorZone.FOOTER
+    })
+  }
+
+  public getFooterBottom(): number {
+    const {
+      footer: { bottom, disabled },
+      scale
+    } = this.options
+    if (disabled) return 0
+    return Math.floor(bottom * scale)
+  }
+
+  public getMaxHeight(): number {
+    const {
+      footer: { maxHeightRadio }
+    } = this.options
+    const height = this.draw.getHeight()
+    return Math.floor(height * maxHeightRadioMapping[maxHeightRadio])
+  }
+
+  public getHeight(): number {
+    if (this.options.footer.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 footerHeight = this.getHeight()
+    const footerBottom = this.getFooterBottom()
+    const extraHeight = footerBottom + footerHeight - margins[2]
+    return extraHeight <= 0 ? 0 : extraHeight
+  }
+
+  public render(ctx: CanvasRenderingContext2D, pageNo: number) {
+    ctx.save()
+    ctx.globalAlpha = this.zone.isFooterActive()
+      ? 1
+      : this.options.footer.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.FOOTER
+    })
+    ctx.restore()
+  }
+}