editor-svg 1.0.2 → 1.0.3

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

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

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

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

@@ -1,155 +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 { 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()
-  }
-}