editor-svg 1.0.2 → 1.0.3

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

@@ -1,86 +0,0 @@
-import { IElement } from '../../..'
-import { EDITOR_PREFIX } from '../../../dataset/constant/Editor'
-import { IEditorOption } from '../../../interface/Editor'
-import { IElementPosition } from '../../../interface/Element'
-import { IRowElement } from '../../../interface/Row'
-import { Draw } from '../Draw'
-
-export class HyperlinkParticle {
-  private draw: Draw
-  private options: Required<IEditorOption>
-  private container: HTMLDivElement
-  private hyperlinkPopupContainer: HTMLDivElement
-  private hyperlinkDom: HTMLAnchorElement
-
-  constructor(draw: Draw) {
-    this.draw = draw
-    this.options = draw.getOptions()
-    this.container = draw.getContainer()
-    const { hyperlinkPopupContainer, hyperlinkDom } =
-      this._createHyperlinkPopupDom()
-    this.hyperlinkDom = hyperlinkDom
-    this.hyperlinkPopupContainer = hyperlinkPopupContainer
-  }
-
-  private _createHyperlinkPopupDom() {
-    const hyperlinkPopupContainer = document.createElement('div')
-    hyperlinkPopupContainer.classList.add(`${EDITOR_PREFIX}-hyperlink-popup`)
-    const hyperlinkDom = document.createElement('a')
-    hyperlinkDom.target = '_blank'
-    hyperlinkDom.rel = 'noopener'
-    hyperlinkPopupContainer.append(hyperlinkDom)
-    this.container.append(hyperlinkPopupContainer)
-    return { hyperlinkPopupContainer, hyperlinkDom }
-  }
-
-  public drawHyperlinkPopup(element: IElement, position: IElementPosition) {
-    const {
-      coordinate: {
-        leftTop: [left, top]
-      },
-      lineHeight
-    } = position
-    const height = this.draw.getHeight()
-    const pageGap = this.draw.getPageGap()
-    const preY = this.draw.getPageNo() * (height + pageGap)
-    // 位置
-    this.hyperlinkPopupContainer.style.display = 'block'
-    this.hyperlinkPopupContainer.style.left = `${left}px`
-    this.hyperlinkPopupContainer.style.top = `${top + preY + lineHeight}px`
-    // 标签
-    const url = element.url || '#'
-    this.hyperlinkDom.href = url
-    this.hyperlinkDom.title = url
-    this.hyperlinkDom.innerText = url
-  }
-
-  public clearHyperlinkPopup() {
-    this.hyperlinkPopupContainer.style.display = 'none'
-  }
-
-  public openHyperlink(element: IElement) {
-    const newTab = window.open(element.url, '_blank')
-    if (newTab) {
-      newTab.opener = null
-    }
-  }
-
-  public render(
-    ctx: CanvasRenderingContext2D,
-    element: IRowElement,
-    x: number,
-    y: number
-  ) {
-    ctx.save()
-    ctx.font = element.style
-    if (!element.color) {
-      element.color = this.options.defaultHyperlinkColor
-    }
-    ctx.fillStyle = element.color
-    if (element.underline === undefined) {
-      element.underline = true
-    }
-    ctx.fillText(element.value, x, y)
-    ctx.restore()
-  }
-}

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

@@ -1,280 +0,0 @@
-import { EDITOR_PREFIX } from '../../../dataset/constant/Editor'
-import { ImageDisplay } from '../../../dataset/enum/Common'
-import { ElementType } from '../../../dataset/enum/Element'
-import { DeepRequired } from '../../../interface/Common'
-import { IEditorOption } from '../../../interface/Editor'
-import { IElement } from '../../../interface/Element'
-import { convertStringToBase64 } from '../../../utils'
-import { Draw } from '../Draw'
-
-export class ImageParticle {
-  private draw: Draw
-  protected options: DeepRequired<IEditorOption>
-  protected imageCache: Map<string, HTMLImageElement>
-  private container: HTMLDivElement
-  private floatImageContainer: HTMLDivElement | null
-  private floatImage: HTMLImageElement | null
-
-  constructor(draw: Draw) {
-    this.draw = draw
-    this.options = draw.getOptions()
-    this.container = draw.getContainer()
-    this.imageCache = new Map()
-    this.floatImageContainer = null
-    this.floatImage = null
-  }
-
-  public getOriginalMainImageList(): IElement[] {
-    const imageList: IElement[] = []
-    const getImageList = (elementList: IElement[]) => {
-      for (const element of elementList) {
-        if (element.type === ElementType.TABLE) {
-          const trList = element.trList!
-          for (let r = 0; r < trList.length; r++) {
-            const tr = trList[r]
-            for (let d = 0; d < tr.tdList.length; d++) {
-              const td = tr.tdList[d]
-              getImageList(td.value)
-            }
-          }
-        } else if (element.type === ElementType.IMAGE) {
-          imageList.push(element)
-        }
-      }
-    }
-    // 获取正文图片列表
-    getImageList(this.draw.getOriginalMainElementList())
-    return imageList
-  }
-
-  private _countImagesBeforeTarget(
-    elementList: IElement[],
-    targetElement: IElement
-  ): number {
-    let count = 0
-    for (const element of elementList) {
-      if (element === targetElement) break
-      if (element.type === ElementType.TABLE) {
-        const trList = element.trList!
-        for (const tr of trList) {
-          for (const td of tr.tdList) {
-            count += this._countImagesBeforeTarget(td.value, targetElement)
-          }
-        }
-      } else if (element.type === ElementType.IMAGE) {
-        count++
-      }
-    }
-    return count
-  }
-
-  public createFloatImage(element: IElement) {
-    const { scale } = this.options
-    // 复用浮动元素
-    let floatImageContainer = this.floatImageContainer
-    let floatImage = this.floatImage
-    if (!floatImageContainer) {
-      floatImageContainer = document.createElement('div')
-      floatImageContainer.classList.add(`${EDITOR_PREFIX}-float-image`)
-      this.container.append(floatImageContainer)
-      this.floatImageContainer = floatImageContainer
-    }
-    if (!floatImage) {
-      floatImage = document.createElement('img')
-      floatImageContainer.append(floatImage)
-      this.floatImage = floatImage
-    }
-    floatImageContainer.style.display = 'none'
-    floatImage.style.width = `${element.width! * scale}px`
-    floatImage.style.height = `${element.height! * scale}px`
-    // 浮动图片初始信息
-    const height = this.draw.getHeight()
-    const pageGap = this.draw.getPageGap()
-    const preY = this.draw.getPageNo() * (height + pageGap)
-    const imgFloatPosition = element.imgFloatPosition!
-    floatImageContainer.style.left = `${imgFloatPosition.x * scale}px`
-    floatImageContainer.style.top = `${preY + imgFloatPosition.y * scale}px`
-    floatImage.src = element.value
-  }
-
-  public dragFloatImage(movementX: number, movementY: number) {
-    if (!this.floatImageContainer) return
-    this.floatImageContainer.style.display = 'block'
-    // 之前的坐标加移动长度
-    const x = parseFloat(this.floatImageContainer.style.left) + movementX
-    const y = parseFloat(this.floatImageContainer.style.top) + movementY
-    this.floatImageContainer.style.left = `${x}px`
-    this.floatImageContainer.style.top = `${y}px`
-  }
-
-  public destroyFloatImage() {
-    if (this.floatImageContainer) {
-      this.floatImageContainer.style.display = 'none'
-    }
-  }
-
-  protected addImageObserver(promise: Promise<unknown>) {
-    this.draw.getImageObserver().add(promise)
-  }
-
-  protected getFallbackImage(width: number, height: number): HTMLImageElement {
-    const tileSize = 8
-    const x = (width - Math.ceil(width / tileSize) * tileSize) / 2
-    const y = (height - Math.ceil(height / tileSize) * tileSize) / 2
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
-                  <rect width="${width}" height="${height}" fill="url(#mosaic)" />
-                  <defs>
-                    <pattern id="mosaic" x="${x}" y="${y}" width="${
-                      tileSize * 2
-                    }" height="${tileSize * 2}" patternUnits="userSpaceOnUse">
-                      <rect width="${tileSize}" height="${tileSize}" fill="#cccccc" />
-                      <rect width="${tileSize}" height="${tileSize}" fill="#cccccc" transform="translate(${tileSize}, ${tileSize})" />
-                    </pattern>
-                  </defs>
-                </svg>`
-    const fallbackImage = new Image()
-    fallbackImage.src = `data:image/svg+xml;base64,${convertStringToBase64(
-      svg
-    )}`
-    return fallbackImage
-  }
-
-  private _drawImageWithCrop(
-    ctx: CanvasRenderingContext2D,
-    img: HTMLImageElement,
-    element: IElement,
-    x: number,
-    y: number,
-    width: number,
-    height: number
-  ) {
-    if (element.imgCrop) {
-      const {
-        x: cropX,
-        y: cropY,
-        width: cropWidth,
-        height: cropHeight
-      } = element.imgCrop
-      ctx.drawImage(
-        img,
-        cropX,
-        cropY,
-        cropWidth,
-        cropHeight,
-        x,
-        y,
-        width,
-        height
-      )
-    } else {
-      ctx.drawImage(img, x, y, width, height)
-    }
-  }
-
-  private _renderCaption(
-    ctx: CanvasRenderingContext2D,
-    element: IElement,
-    x: number,
-    y: number,
-    width: number,
-    height: number
-  ) {
-    if (!element.imgCaption?.value) return
-    const { scale, imgCaption } = this.options
-    let captionText = element.imgCaption.value
-    // 替换特殊字符
-    if (captionText.includes('{imageNo}')) {
-      const elementList = this.draw.getOriginalMainElementList()
-      const imageNo = this._countImagesBeforeTarget(elementList, element) + 1
-      captionText = captionText.replace(/\{imageNo\}/g, String(imageNo))
-    }
-    const fontSize = (element.imgCaption.size || imgCaption.size) * scale
-    const fontFamily = element.imgCaption.font || imgCaption.font
-    const color = element.imgCaption.color || imgCaption.color
-    ctx.save()
-    ctx.font = `${fontSize}px ${fontFamily}`
-    ctx.fillStyle = color
-    ctx.textAlign = 'center'
-    // 超出图片宽度后省略
-    let displayText = captionText
-    const textMetrics = ctx.measureText(captionText)
-    if (textMetrics.width > width) {
-      let left = 0
-      let right = captionText.length
-      while (left < right) {
-        const mid = Math.ceil((left + right) / 2)
-        const truncated = captionText.substring(0, mid)
-        if (ctx.measureText(truncated + '...').width <= width) {
-          left = mid
-        } else {
-          right = mid - 1
-        }
-      }
-      displayText = captionText.substring(0, left) + '...'
-    }
-    const captionTop = (element.imgCaption.top ?? imgCaption.top) * scale
-    const captionY =
-      y + height + captionTop + textMetrics.actualBoundingBoxAscent
-    const captionX = x + width / 2
-    ctx.fillText(displayText, captionX, captionY)
-    ctx.restore()
-  }
-
-  public render(
-    ctx: CanvasRenderingContext2D,
-    element: IElement,
-    x: number,
-    y: number
-  ) {
-    const { scale } = this.options
-    const width = element.width! * scale
-    const height = element.height! * scale
-    if (this.imageCache.has(element.value)) {
-      const img = this.imageCache.get(element.value)!
-      this._drawImageWithCrop(ctx, img, element, x, y, width, height)
-      this._renderCaption(ctx, element, x, y, width, height)
-    } else {
-      const cacheRenderCount = this.draw.getRenderCount()
-      const imageLoadPromise = new Promise((resolve, reject) => {
-        const img = new Image()
-        img.setAttribute('crossOrigin', 'Anonymous')
-        img.src = element.value
-        img.onload = () => {
-          this.imageCache.set(element.value, img)
-          resolve(element)
-          // 因图片加载异步，图片加载后可能属于上一次渲染方法
-          if (cacheRenderCount !== this.draw.getRenderCount()) return
-          // 衬于文字下方图片需要重新首先绘制
-          if (element.imgDisplay === ImageDisplay.FLOAT_BOTTOM) {
-            this.draw.render({
-              isCompute: false,
-              isSetCursor: false,
-              isSubmitHistory: false
-            })
-          } else {
-            this._drawImageWithCrop(ctx, img, element, x, y, width, height)
-            this._renderCaption(ctx, element, x, y, width, height)
-          }
-        }
-        img.onerror = error => {
-          const fallbackImage = this.getFallbackImage(width, height)
-          fallbackImage.onload = () => {
-            this._drawImageWithCrop(
-              ctx,
-              fallbackImage,
-              element,
-              x,
-              y,
-              width,
-              height
-            )
-            this.imageCache.set(element.value, fallbackImage)
-            this._renderCaption(ctx, element, x, y, width, height)
-          }
-          reject(error)
-        }
-      })
-      this.addImageObserver(imageLoadPromise)
-    }
-  }
-}

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

@@ -1,79 +0,0 @@
-import { DeepRequired } from '../../../interface/Common'
-import { IEditorOption } from '../../../interface/Editor'
-import { IRowElement } from '../../../interface/Row'
-import { Draw } from '../Draw'
-
-export class LabelParticle {
-  private options: DeepRequired<IEditorOption>
-
-  constructor(draw: Draw) {
-    this.options = draw.getOptions()
-  }
-
-  public render(
-    ctx: CanvasRenderingContext2D,
-    element: IRowElement,
-    x: number,
-    y: number
-  ) {
-    const {
-      scale,
-      label: {
-        defaultBackgroundColor,
-        defaultColor,
-        defaultBorderRadius,
-        defaultPadding
-      }
-    } = this.options
-
-    // 默认样式
-    const backgroundColor =
-      element.label?.backgroundColor || defaultBackgroundColor
-    const color = element.label?.color || defaultColor
-    const borderRadius = element.label?.borderRadius || defaultBorderRadius
-    const padding = element.label?.padding || defaultPadding
-
-    // 设置字体大小
-    ctx.save()
-    ctx.font = element.style
-    const { width, height, boundingBoxAscent } = element.metrics
-
-    // 绘制圆角矩形背景
-    ctx.fillStyle = backgroundColor
-    this._drawRoundedRect(
-      ctx,
-      x,
-      y - boundingBoxAscent,
-      width,
-      height + (padding[0] + padding[3]) * scale,
-      borderRadius * scale
-    )
-    ctx.fill()
-
-    // 绘制文本
-    ctx.fillStyle = color
-    ctx.fillText(element.value, x + padding[3] * scale, y)
-    ctx.restore()
-  }
-
-  private _drawRoundedRect(
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    radius: number
-  ) {
-    ctx.beginPath()
-    ctx.moveTo(x + radius, y)
-    ctx.lineTo(x + width - radius, y)
-    ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
-    ctx.lineTo(x + width, y + height - radius)
-    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
-    ctx.lineTo(x + radius, y + height)
-    ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
-    ctx.lineTo(x, y + radius)
-    ctx.quadraticCurveTo(x, y, x + radius, y)
-    ctx.closePath()
-  }
-}

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

@@ -1,55 +0,0 @@
-import { DeepRequired } from '../../../interface/Common'
-import { IEditorOption } from '../../../interface/Editor'
-import { IRowElement } from '../../../interface/Row'
-import { Draw } from '../Draw'
-
-export class LineBreakParticle {
-  private options: DeepRequired<IEditorOption>
-  public static readonly WIDTH = 12
-  public static readonly HEIGHT = 9
-  public static readonly GAP = 3 // 距离左边间隙
-
-  constructor(draw: Draw) {
-    this.options = draw.getOptions()
-  }
-
-  public render(
-    ctx: CanvasRenderingContext2D,
-    element: IRowElement,
-    x: number,
-    y: number
-  ) {
-    const {
-      scale,
-      lineBreak: { color, lineWidth }
-    } = this.options
-    ctx.save()
-    ctx.beginPath()
-    // 换行符尺寸设置为9像素
-    const top = y - (LineBreakParticle.HEIGHT * scale) / 2
-    const left = x + element.metrics.width
-    // 移动位置并设置缩放
-    ctx.translate(left, top)
-    ctx.scale(scale, scale)
-    // 样式设置
-    ctx.strokeStyle = color
-    ctx.lineWidth = lineWidth
-    ctx.lineCap = 'round'
-    ctx.lineJoin = 'round'
-    ctx.beginPath()
-    // 回车折线
-    ctx.moveTo(8, 0)
-    ctx.lineTo(12, 0)
-    ctx.lineTo(12, 6)
-    ctx.lineTo(3, 6)
-    // 箭头向上
-    ctx.moveTo(3, 6)
-    ctx.lineTo(6, 3)
-    // 箭头向下
-    ctx.moveTo(3, 6)
-    ctx.lineTo(6, 9)
-    ctx.stroke()
-    ctx.closePath()
-    ctx.restore()
-  }
-}