editor-svg 1.0.2 → 1.0.3

package/src/editor/core/draw/particle/ListParticle.ts

@@ -1,255 +0,0 @@
-import { ZERO } from '../../../dataset/constant/Common'
-import { ulStyleMapping } from '../../../dataset/constant/List'
-import { ElementType } from '../../../dataset/enum/Element'
-import { KeyMap } from '../../../dataset/enum/KeyMap'
-import { ListStyle, ListType, UlStyle } from '../../../dataset/enum/List'
-import { DeepRequired } from '../../../interface/Common'
-import { IEditorOption } from '../../../interface/Editor'
-import { IElement, IElementPosition } from '../../../interface/Element'
-import { IRow, IRowElement } from '../../../interface/Row'
-import { getUUID } from '../../../utils'
-import { RangeManager } from '../../range/RangeManager'
-import { Draw } from '../Draw'
-
-export class ListParticle {
-  private draw: Draw
-  private range: RangeManager
-  private options: DeepRequired<IEditorOption>
-
-  // 非递增样式直接返回默认值
-  private readonly UN_COUNT_STYLE_WIDTH = 20
-  private readonly MEASURE_BASE_TEXT = '0'
-  private readonly LIST_GAP = 10
-
-  constructor(draw: Draw) {
-    this.draw = draw
-    this.range = draw.getRange()
-    this.options = draw.getOptions()
-  }
-
-  public setList(listType: ListType | null, listStyle?: ListStyle) {
-    const isReadonly = this.draw.isReadonly()
-    if (isReadonly) return
-    const { startIndex, endIndex } = this.range.getRange()
-    if (!~startIndex && !~endIndex) return
-    // 需要改变的元素列表
-    const changeElementList = this.range.getRangeParagraphElementList()
-    if (!changeElementList || !changeElementList.length) return
-    // 如果包含列表则设置为取消列表
-    const isUnsetList = changeElementList.find(
-      el => el.listType === listType && el.listStyle === listStyle
-    )
-    if (isUnsetList || !listType) {
-      this.unsetList()
-      return
-    }
-    // 设置值
-    const listId = getUUID()
-    changeElementList.forEach(el => {
-      el.listId = listId
-      el.listType = listType
-      el.listStyle = listStyle
-    })
-    // 光标定位
-    const isSetCursor = startIndex === endIndex
-    const curIndex = isSetCursor ? endIndex : startIndex
-    this.draw.render({ curIndex, isSetCursor })
-  }
-
-  public unsetList() {
-    const isReadonly = this.draw.isReadonly()
-    if (isReadonly) return
-    const { startIndex, endIndex } = this.range.getRange()
-    if (!~startIndex && !~endIndex) return
-    // 需要改变的元素列表
-    const changeElementList = this.range
-      .getRangeParagraphElementList()
-      ?.filter(el => el.listId)
-    if (!changeElementList || !changeElementList.length) return
-    // 如果列表最后字符不是换行符则需插入换行符
-    const elementList = this.draw.getElementList()
-    const endElement = elementList[endIndex]
-    if (endElement.listId) {
-      let start = endIndex + 1
-      while (start < elementList.length) {
-        const element = elementList[start]
-        if (element.value === ZERO && !element.listWrap) break
-        if (element.listId !== endElement.listId) {
-          this.draw.spliceElementList(elementList, start, 0, [
-            {
-              value: ZERO
-            }
-          ])
-          break
-        }
-        start++
-      }
-    }
-    // 取消设置
-    changeElementList.forEach(el => {
-      delete el.listId
-      delete el.listType
-      delete el.listStyle
-      delete el.listWrap
-    })
-    // 光标定位
-    const isSetCursor = startIndex === endIndex
-    const curIndex = isSetCursor ? endIndex : startIndex
-    this.draw.render({ curIndex, isSetCursor })
-  }
-
-  public computeListStyle(
-    ctx: CanvasRenderingContext2D,
-    elementList: IElement[]
-  ): Map<string, number> {
-    const listStyleMap = new Map<string, number>()
-    let start = 0
-    let curListId = elementList[start].listId
-    let curElementList: IElement[] = []
-    const elementLength = elementList.length
-    while (start < elementLength) {
-      const curElement = elementList[start]
-      if (curListId && curListId === curElement.listId) {
-        curElementList.push(curElement)
-      } else {
-        if (curElement.listId && curElement.listId !== curListId) {
-          // 列表结束
-          if (curElementList.length) {
-            const width = this.getListStyleWidth(ctx, curElementList)
-            listStyleMap.set(curListId!, width)
-          }
-          curListId = curElement.listId
-          curElementList = curListId ? [curElement] : []
-        }
-      }
-      start++
-    }
-    if (curElementList.length) {
-      const width = this.getListStyleWidth(ctx, curElementList)
-      listStyleMap.set(curListId!, width)
-    }
-    return listStyleMap
-  }
-
-  private findStyledElement(elementList: IElement[]): IElement {
-    let styleElement = elementList[0]
-    for (let i = 1; i < elementList.length; i++) {
-      const element = elementList[i]
-      if (element.font || element.size || element.bold || element.italic) {
-        styleElement = element
-        break
-      }
-    }
-    return styleElement
-  }
-
-  private getListFontStyle(elementList: IElement[], scale: number): string {
-    if (this.options.list.inheritStyle) {
-      const styleElement = this.findStyledElement(elementList)
-      return this.draw.getElementFont(styleElement, scale)
-    } else {
-      const { defaultFont, defaultSize } = this.options
-      return `${defaultSize * scale}px ${defaultFont}`
-    }
-  }
-
-  public getListStyleWidth(
-    ctx: CanvasRenderingContext2D,
-    listElementList: IElement[]
-  ): number {
-    const { scale, checkbox } = this.options
-    const startElement = listElementList[0]
-    // 非递增样式返回固定值
-    if (
-      startElement.listStyle &&
-      startElement.listStyle !== ListStyle.DECIMAL
-    ) {
-      if (startElement.listStyle === ListStyle.CHECKBOX) {
-        return (checkbox.width + this.LIST_GAP) * scale
-      }
-      return this.UN_COUNT_STYLE_WIDTH * scale
-    }
-    // 计算列表数量
-    const count = listElementList.reduce((pre, cur) => {
-      if (cur.value === ZERO) {
-        pre += 1
-      }
-      return pre
-    }, 0)
-    if (!count) return 0
-    ctx.save()
-    ctx.font = this.getListFontStyle(listElementList, scale)
-    // 以递增样式最大宽度为准
-    const text = `${this.MEASURE_BASE_TEXT.repeat(String(count).length)}${
-      KeyMap.PERIOD
-    }`
-    const textMetrics = ctx.measureText(text)
-    ctx.restore()
-    return Math.ceil((textMetrics.width + this.LIST_GAP) * scale)
-  }
-
-  public drawListStyle(
-    ctx: CanvasRenderingContext2D,
-    row: IRow,
-    position: IElementPosition
-  ) {
-    const { elementList, offsetX, listIndex, ascent } = row
-    const startElement = elementList[0]
-    if (startElement.value !== ZERO || startElement.listWrap) return
-    // tab width
-    let tabWidth = 0
-    const { defaultTabWidth, scale } = this.options
-    for (let i = 1; i < elementList.length; i++) {
-      const element = elementList[i]
-      if (element?.type !== ElementType.TAB) break
-      tabWidth += defaultTabWidth * scale
-    }
-    // 列表样式渲染
-    const {
-      coordinate: {
-        leftTop: [startX, startY]
-      }
-    } = position
-    const x = startX - offsetX! + tabWidth
-    const y = startY + ascent
-    // 复选框样式特殊处理
-    if (startElement.listStyle === ListStyle.CHECKBOX) {
-      const { width, height, gap } = this.options.checkbox
-      const checkboxRowElement: IRowElement = {
-        ...startElement,
-        checkbox: {
-          value: !!startElement.checkbox?.value
-        },
-        metrics: {
-          ...startElement.metrics,
-          width: (width + gap * 2) * scale,
-          height: height * scale
-        }
-      }
-      this.draw.getCheckboxParticle().render({
-        ctx,
-        x: x - gap * scale,
-        y,
-        index: 0,
-        row: {
-          ...row,
-          elementList: [checkboxRowElement, ...row.elementList]
-        }
-      })
-    } else {
-      let text = ''
-      if (startElement.listType === ListType.UL) {
-        text =
-          ulStyleMapping[<UlStyle>(<unknown>startElement.listStyle)] ||
-          ulStyleMapping[UlStyle.DISC]
-      } else {
-        text = `${listIndex! + 1}${KeyMap.PERIOD}`
-      }
-      if (!text) return
-      ctx.save()
-      ctx.font = this.getListFontStyle(elementList, scale)
-      ctx.fillText(text, x, y)
-      ctx.restore()
-    }
-  }
-}

package/src/editor/core/draw/particle/PageBreakParticle.ts

@@ -1,54 +0,0 @@
-import { DeepRequired } from '../../../interface/Common'
-import { IEditorOption } from '../../../interface/Editor'
-import { IRowElement } from '../../../interface/Row'
-import { I18n } from '../../i18n/I18n'
-import { Draw } from '../Draw'
-
-export class PageBreakParticle {
-  private draw: Draw
-  private options: DeepRequired<IEditorOption>
-  private i18n: I18n
-
-  constructor(draw: Draw) {
-    this.draw = draw
-    this.options = draw.getOptions()
-    this.i18n = draw.getI18n()
-  }
-
-  public render(
-    ctx: CanvasRenderingContext2D,
-    element: IRowElement,
-    x: number,
-    y: number
-  ) {
-    const {
-      pageBreak: { font, fontSize, lineDash }
-    } = this.options
-    const displayName = this.i18n.t('pageBreak.displayName')
-    const { scale, defaultRowMargin } = this.options
-    const size = fontSize * scale
-    const elementWidth = element.width! * scale
-    const offsetY =
-      this.draw.getDefaultBasicRowMarginHeight() * defaultRowMargin
-    ctx.save()
-    ctx.font = `${size}px ${font}`
-    const textMeasure = ctx.measureText(displayName)
-    const halfX = (elementWidth - textMeasure.width) / 2
-    // 线段
-    ctx.setLineDash(lineDash)
-    ctx.translate(0, 0.5 + offsetY)
-    ctx.beginPath()
-    ctx.moveTo(x, y)
-    ctx.lineTo(x + halfX, y)
-    ctx.moveTo(x + halfX + textMeasure.width, y)
-    ctx.lineTo(x + elementWidth, y)
-    ctx.stroke()
-    // 文字
-    ctx.fillText(
-      displayName,
-      x + halfX,
-      y + textMeasure.actualBoundingBoxAscent - size / 2
-    )
-    ctx.restore()
-  }
-}

package/src/editor/core/draw/particle/RadioParticle.ts

@@ -1,99 +0,0 @@
-import { NBSP, ZERO } from '../../../dataset/constant/Common'
-import { VerticalAlign } from '../../../dataset/enum/VerticalAlign'
-import { DeepRequired } from '../../../interface/Common'
-import { IEditorOption } from '../../../interface/Editor'
-import { IElement } from '../../../interface/Element'
-import { IRow, IRowElement } from '../../../interface/Row'
-import { Draw } from '../Draw'
-
-interface IRadioRenderOption {
-  ctx: CanvasRenderingContext2D
-  x: number
-  y: number
-  row: IRow
-  index: number
-}
-
-export class RadioParticle {
-  private draw: Draw
-  private options: DeepRequired<IEditorOption>
-
-  constructor(draw: Draw) {
-    this.draw = draw
-    this.options = draw.getOptions()
-  }
-
-  public setSelect(element: IElement) {
-    const { radio } = element
-    if (radio) {
-      radio.value = !radio.value
-    } else {
-      element.radio = {
-        value: true
-      }
-    }
-    this.draw.render({
-      isCompute: false,
-      isSetCursor: false
-    })
-  }
-
-  public render(payload: IRadioRenderOption) {
-    const { ctx, x, index, row } = payload
-    let { y } = payload
-    const {
-      radio: { gap, lineWidth, fillStyle, strokeStyle, verticalAlign },
-      scale
-    } = this.options
-    const { metrics, radio } = row.elementList[index]
-    // 垂直布局设置
-    if (
-      verticalAlign === VerticalAlign.TOP ||
-      verticalAlign === VerticalAlign.MIDDLE
-    ) {
-      let nextIndex = index + 1
-      let nextElement: IRowElement | null = null
-      while (nextIndex < row.elementList.length) {
-        nextElement = row.elementList[nextIndex]
-        if (nextElement.value !== ZERO && nextElement.value !== NBSP) break
-        nextIndex++
-      }
-      // 以后一个非空格元素为基准
-      if (nextElement) {
-        const {
-          metrics: { boundingBoxAscent, boundingBoxDescent }
-        } = nextElement
-        const textHeight = boundingBoxAscent + boundingBoxDescent
-        if (textHeight > metrics.height) {
-          if (verticalAlign === VerticalAlign.TOP) {
-            y -= boundingBoxAscent - metrics.height
-          } else if (verticalAlign === VerticalAlign.MIDDLE) {
-            y -= (textHeight - metrics.height) / 2
-          }
-        }
-      }
-    }
-    // left top 四舍五入避免1像素问题
-    const left = Math.round(x + gap * scale)
-    const top = Math.round(y - metrics.height + lineWidth)
-    const width = metrics.width - gap * 2 * scale
-    const height = metrics.height
-    ctx.save()
-    ctx.beginPath()
-    ctx.translate(0.5, 0.5)
-    // 边框
-    ctx.strokeStyle = radio?.value ? fillStyle : strokeStyle
-    ctx.lineWidth = lineWidth
-    ctx.arc(left + width / 2, top + height / 2, width / 2, 0, Math.PI * 2)
-    ctx.stroke()
-    // 填充选中色
-    if (radio?.value) {
-      ctx.beginPath()
-      ctx.fillStyle = fillStyle
-      ctx.arc(left + width / 2, top + height / 2, width / 3, 0, Math.PI * 2)
-      ctx.fill()
-    }
-    ctx.closePath()
-    ctx.restore()
-  }
-}

package/src/editor/core/draw/particle/SeparatorParticle.ts

@@ -1,37 +0,0 @@
-import { DeepRequired } from '../../../interface/Common'
-import { IEditorOption } from '../../../interface/Editor'
-import { IRowElement } from '../../../interface/Row'
-import { Draw } from '../Draw'
-
-export class SeparatorParticle {
-  private options: DeepRequired<IEditorOption>
-
-  constructor(draw: Draw) {
-    this.options = draw.getOptions()
-  }
-
-  public render(
-    ctx: CanvasRenderingContext2D,
-    element: IRowElement,
-    x: number,
-    y: number
-  ) {
-    ctx.save()
-    const {
-      scale,
-      separator: { lineWidth, strokeStyle }
-    } = this.options
-    ctx.lineWidth = (element.lineWidth || lineWidth) * scale
-    ctx.strokeStyle = element.color || strokeStyle
-    if (element.dashArray?.length) {
-      ctx.setLineDash(element.dashArray)
-    }
-    const offsetY = Math.round(y) // 四舍五入避免绘制模糊
-    ctx.translate(0, ctx.lineWidth / 2)
-    ctx.beginPath()
-    ctx.moveTo(x, offsetY)
-    ctx.lineTo(x + element.width! * scale, offsetY)
-    ctx.stroke()
-    ctx.restore()
-  }
-}

package/src/editor/core/draw/particle/SubscriptParticle.ts

@@ -1,23 +0,0 @@
-import { IRowElement } from '../../../interface/Row'
-
-export class SubscriptParticle {
-  // 向下偏移字高的一半
-  public getOffsetY(element: IRowElement): number {
-    return element.metrics.height / 2
-  }
-
-  public render(
-    ctx: CanvasRenderingContext2D,
-    element: IRowElement,
-    x: number,
-    y: number
-  ) {
-    ctx.save()
-    ctx.font = element.style
-    if (element.color) {
-      ctx.fillStyle = element.color
-    }
-    ctx.fillText(element.value, x, y + this.getOffsetY(element))
-    ctx.restore()
-  }
-}

package/src/editor/core/draw/particle/SuperscriptParticle.ts

@@ -1,23 +0,0 @@
-import { IRowElement } from '../../../interface/Row'
-
-export class SuperscriptParticle {
-  // 向上偏移字高的一半
-  public getOffsetY(element: IRowElement): number {
-    return -element.metrics.height / 2
-  }
-
-  public render(
-    ctx: CanvasRenderingContext2D,
-    element: IRowElement,
-    x: number,
-    y: number
-  ) {
-    ctx.save()
-    ctx.font = element.style
-    if (element.color) {
-      ctx.fillStyle = element.color
-    }
-    ctx.fillText(element.value, x, y + this.getOffsetY(element))
-    ctx.restore()
-  }
-}

package/src/editor/core/draw/particle/TextParticle.ts

@@ -1,174 +0,0 @@
-import { ElementType, IEditorOption, IElement, RenderMode } from '../../..'
-import {
-  PUNCTUATION_LIST,
-  METRICS_BASIS_TEXT
-} from '../../../dataset/constant/Common'
-import { DeepRequired } from '../../../interface/Common'
-import { IRowElement } from '../../../interface/Row'
-import { ITextMetrics } from '../../../interface/Text'
-import { Draw } from '../Draw'
-
-export interface IMeasureWordResult {
-  width: number
-  endElement: IElement | null
-}
-
-export class TextParticle {
-  private draw: Draw
-  private options: DeepRequired<IEditorOption>
-
-  private ctx: CanvasRenderingContext2D
-  private curX: number
-  private curY: number
-  private text: string
-  private curStyle: string
-  private curColor?: string
-  public cacheMeasureText: Map<string, TextMetrics>
-
-  constructor(draw: Draw) {
-    this.draw = draw
-    this.options = draw.getOptions()
-    this.ctx = draw.getCtx()
-    this.curX = -1
-    this.curY = -1
-    this.text = ''
-    this.curStyle = ''
-    this.cacheMeasureText = new Map()
-  }
-
-  public measureBasisWord(
-    ctx: CanvasRenderingContext2D,
-    font: string
-  ): ITextMetrics {
-    ctx.save()
-    ctx.font = font
-    const textMetrics = this.measureText(ctx, {
-      value: METRICS_BASIS_TEXT
-    })
-    ctx.restore()
-    return textMetrics
-  }
-
-  public measureWord(
-    ctx: CanvasRenderingContext2D,
-    elementList: IElement[],
-    curIndex: number
-  ): IMeasureWordResult {
-    const LETTER_REG = this.draw.getLetterReg()
-    let width = 0
-    let endElement: IElement | null = null
-    let i = curIndex
-    while (i < elementList.length) {
-      const element = elementList[i]
-      if (
-        (element.type && element.type !== ElementType.TEXT) ||
-        !LETTER_REG.test(element.value)
-      ) {
-        endElement = element
-        break
-      }
-      width += this.measureText(ctx, element).width
-      i++
-    }
-    return {
-      width,
-      endElement
-    }
-  }
-
-  public measurePunctuationWidth(
-    ctx: CanvasRenderingContext2D,
-    element: IElement
-  ): number {
-    if (!element || !PUNCTUATION_LIST.includes(element.value)) return 0
-    ctx.font = this.draw.getElementFont(element)
-    return this.measureText(ctx, element).width
-  }
-
-  public measureText(
-    ctx: CanvasRenderingContext2D,
-    element: IElement
-  ): ITextMetrics {
-    // 优先使用自定义字宽设置
-    if (element.width) {
-      const textMetrics = ctx.measureText(element.value)
-      // TextMetrics是类无法解构
-      return {
-        width: element.width,
-        actualBoundingBoxAscent: textMetrics.actualBoundingBoxAscent,
-        actualBoundingBoxDescent: textMetrics.actualBoundingBoxDescent,
-        actualBoundingBoxLeft: textMetrics.actualBoundingBoxLeft,
-        actualBoundingBoxRight: textMetrics.actualBoundingBoxRight,
-        fontBoundingBoxAscent: textMetrics.fontBoundingBoxAscent,
-        fontBoundingBoxDescent: textMetrics.fontBoundingBoxDescent
-      }
-    }
-    const id = `${element.value}${ctx.font}`
-    const cacheTextMetrics = this.cacheMeasureText.get(id)
-    if (cacheTextMetrics) {
-      return cacheTextMetrics
-    }
-    const textMetrics = ctx.measureText(element.value)
-    this.cacheMeasureText.set(id, textMetrics)
-    return textMetrics
-  }
-
-  public getBasisWordBoundingBoxAscent(
-    ctx: CanvasRenderingContext2D,
-    font: string
-  ): number {
-    return this.measureBasisWord(ctx, font).actualBoundingBoxAscent
-  }
-
-  public complete() {
-    this._render()
-    this.text = ''
-  }
-
-  public record(
-    ctx: CanvasRenderingContext2D,
-    element: IRowElement,
-    x: number,
-    y: number
-  ) {
-    this.ctx = ctx
-    // 兼容模式立即绘制
-    if (this.options.renderMode === RenderMode.COMPATIBILITY) {
-      this._setCurXY(x, y)
-      this.text = element.value
-      this.curStyle = element.style
-      this.curColor = element.color
-      this.complete()
-      return
-    }
-    // 主动完成的重设起始点
-    if (!this.text) {
-      this._setCurXY(x, y)
-    }
-    // 样式发生改变
-    if (
-      (this.curStyle && element.style !== this.curStyle) ||
-      element.color !== this.curColor
-    ) {
-      this.complete()
-      this._setCurXY(x, y)
-    }
-    this.text += element.value
-    this.curStyle = element.style
-    this.curColor = element.color
-  }
-
-  private _setCurXY(x: number, y: number) {
-    this.curX = x
-    this.curY = y
-  }
-
-  private _render() {
-    if (!this.text || !~this.curX || !~this.curX) return
-    this.ctx.save()
-    this.ctx.font = this.curStyle
-    this.ctx.fillStyle = this.curColor || this.options.defaultColor
-    this.ctx.fillText(this.text, this.curX, this.curY)
-    this.ctx.restore()
-  }
-}

package/src/editor/core/draw/particle/WhiteSpaceParticle.ts

@@ -1,32 +0,0 @@
-import { DeepRequired } from '../../../interface/Common'
-import { IEditorOption } from '../../../interface/Editor'
-import { IRowElement } from '../../../interface/Row'
-import { Draw } from '../Draw'
-
-export class WhiteSpaceParticle {
-  private options: DeepRequired<IEditorOption>
-
-  constructor(draw: Draw) {
-    this.options = draw.getOptions()
-  }
-
-  public render(
-    ctx: CanvasRenderingContext2D,
-    element: IRowElement,
-    x: number,
-    y: number
-  ) {
-    const {
-      scale,
-      whiteSpace: { color, radius }
-    } = this.options
-    const metrics = element.metrics
-    ctx.save()
-    ctx.fillStyle = color
-    ctx.beginPath()
-    ctx.arc(x + metrics.width / 2, y, radius * scale, 0, Math.PI * 2)
-    ctx.fill()
-    ctx.closePath()
-    ctx.restore()
-  }
-}