editor-svg 1.0.0

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

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

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

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

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