editor-svg 1.0.0

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

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

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

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

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

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

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

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

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