editor-svg 1.0.0

package/src/editor/core/draw/particle/block/BlockParticle.ts

@@ -0,0 +1,76 @@
+import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor'
+import { ElementType } from '../../../../dataset/enum/Element'
+import { IRowElement } from '../../../../interface/Row'
+import { Draw } from '../../Draw'
+import { BaseBlock } from './modules/BaseBlock'
+
+export class BlockParticle {
+  private draw: Draw
+  private container: HTMLDivElement
+  private blockContainer: HTMLDivElement
+  private blockMap: Map<string, BaseBlock>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.container = draw.getContainer()
+    this.blockMap = new Map()
+    this.blockContainer = this._createBlockContainer()
+    this.container.append(this.blockContainer)
+  }
+
+  private _createBlockContainer(): HTMLDivElement {
+    const blockContainer = document.createElement('div')
+    blockContainer.classList.add(`${EDITOR_PREFIX}-block-container`)
+    return blockContainer
+  }
+
+  public getDraw(): Draw {
+    return this.draw
+  }
+
+  public getBlockContainer(): HTMLDivElement {
+    return this.blockContainer
+  }
+
+  public render(
+    ctx: CanvasRenderingContext2D,
+    pageNo: number,
+    element: IRowElement,
+    x: number,
+    y: number
+  ) {
+    // 优先使用缓存block
+    const id = element.id!
+    let cacheBlock = this.blockMap.get(id)
+    if (!cacheBlock) {
+      cacheBlock = new BaseBlock(this, element)
+      cacheBlock.render()
+      this.blockMap.set(id, cacheBlock)
+    }
+    // 打印模式截图，其他模式更新位置
+    if (this.draw.isPrintMode()) {
+      cacheBlock.snapshot(ctx, x, y)
+    } else {
+      cacheBlock.setClientRects(pageNo, x, y)
+    }
+  }
+
+  public clear() {
+    if (!this.blockMap.size) return
+    const elementList = this.draw.getOriginalMainElementList()
+    const blockElementIds: string[] = []
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e]
+      if (element.type === ElementType.BLOCK) {
+        blockElementIds.push(element.id!)
+      }
+    }
+    this.blockMap.forEach(block => {
+      const id = block.getBlockElement().id!
+      if (!blockElementIds.includes(id)) {
+        block.remove()
+        this.blockMap.delete(id)
+      }
+    })
+  }
+}

package/src/editor/core/draw/particle/block/modules/BaseBlock.ts

@@ -0,0 +1,280 @@
+import { EDITOR_PREFIX } from '../../../../../dataset/constant/Editor'
+import { BlockType } from '../../../../../dataset/enum/Block'
+import { IEditorOption } from '../../../../../interface/Editor'
+import { IRowElement } from '../../../../../interface/Row'
+import { Draw } from '../../../Draw'
+import { BlockParticle } from '../BlockParticle'
+import { IFrameBlock } from './IFrameBlock'
+import { VideoBlock } from './VideoBlock'
+
+export class BaseBlock {
+  private draw: Draw
+  private options: Required<IEditorOption>
+  private element: IRowElement
+  private block: IFrameBlock | VideoBlock | null
+  private blockContainer: HTMLDivElement
+  private blockItem: HTMLDivElement
+  protected blockCache: Map<string, IFrameBlock | VideoBlock>
+  // 缩放业务
+  private resizerMask: HTMLDivElement
+  private resizerSelection: HTMLDivElement
+  private resizerHandleList: HTMLDivElement[]
+  private width: number
+  private height: number
+  private mousedownX: number
+  private mousedownY: number
+  private curHandleIndex: number
+  private isAllowResize: boolean
+
+  constructor(blockParticle: BlockParticle, element: IRowElement) {
+    this.draw = blockParticle.getDraw()
+    this.options = this.draw.getOptions()
+    this.blockContainer = blockParticle.getBlockContainer()
+    this.element = element
+    this.block = null
+    const { blockItem, resizerMask, resizerSelection, resizerHandleList } =
+      this._createBlockItem()
+    this.blockItem = blockItem
+    this.blockContainer.append(this.blockItem)
+    this.blockCache = new Map()
+    this.resizerMask = resizerMask
+    this.resizerSelection = resizerSelection
+    this.resizerHandleList = resizerHandleList
+    this.width = 0
+    this.height = 0
+    this.mousedownX = 0
+    this.mousedownY = 0
+    this.curHandleIndex = 0
+    this.isAllowResize = false
+  }
+
+  public getBlockElement(): IRowElement {
+    return this.element
+  }
+
+  public getBlockWidth(): number {
+    return this.element.width || this.element.metrics.width
+  }
+
+  private _createBlockItem() {
+    const { scale, resizerColor } = this.options
+    const blockItem = document.createElement('div')
+    blockItem.classList.add(`${EDITOR_PREFIX}-block-item`)
+    // 拖拽边框
+    const resizerSelection = document.createElement('div')
+    resizerSelection.style.display = 'none'
+    resizerSelection.classList.add(`${EDITOR_PREFIX}-resizer-selection`)
+    resizerSelection.style.borderColor = resizerColor
+    resizerSelection.style.borderWidth = `${scale}px`
+    // 拖拽点
+    const resizerHandleList: HTMLDivElement[] = []
+    for (let i = 0; i < 8; i++) {
+      const handleDom = document.createElement('div')
+      handleDom.style.background = resizerColor
+      handleDom.classList.add(`resizer-handle`)
+      handleDom.classList.add(`handle-${i}`)
+      handleDom.setAttribute('data-index', String(i))
+      handleDom.onmousedown = this._mousedown.bind(this)
+      resizerSelection.append(handleDom)
+      resizerHandleList.push(handleDom)
+    }
+    // 拖拽元素遮盖（不遮盖影响mouseup事件执行）
+    const resizerMask = document.createElement('div')
+    resizerMask.classList.add(`${EDITOR_PREFIX}-resizer-mask`)
+    resizerMask.style.display = 'none'
+    blockItem.append(resizerMask)
+    // 光标进入block时显示拖拽边框
+    blockItem.onmouseenter = () => {
+      const isReadonly = this.draw.isReadonly()
+      if (isReadonly) return
+      const { width, height } = this.element.metrics
+      this._updateResizerRect(width, height)
+      resizerSelection.style.display = 'block'
+    }
+    // 光标离开block时隐藏拖拽边框
+    blockItem.onmouseleave = () => {
+      if (this.isAllowResize) return
+      resizerSelection.style.display = 'none'
+    }
+    blockItem.append(resizerSelection)
+    return {
+      blockItem,
+      resizerMask,
+      resizerSelection,
+      resizerHandleList
+    }
+  }
+
+  private _updateResizerRect(width: number, height: number) {
+    const { resizerSize: handleSize, scale } = this.options
+    this.resizerSelection.style.width = `${width}px`
+    this.resizerSelection.style.height = `${height}px`
+    for (let i = 0; i < 8; i++) {
+      const left =
+        i === 0 || i === 6 || i === 7
+          ? -handleSize
+          : i === 1 || i === 5
+          ? width / 2
+          : width - handleSize
+      const top =
+        i === 0 || i === 1 || i === 2
+          ? -handleSize
+          : i === 3 || i === 7
+          ? height / 2 - handleSize
+          : height - handleSize
+      this.resizerHandleList[i].style.transform = `scale(${scale})`
+      this.resizerHandleList[i].style.left = `${left}px`
+      this.resizerHandleList[i].style.top = `${top}px`
+    }
+  }
+
+  private _mousedown(evt: MouseEvent) {
+    const canvas = this.draw.getPage()
+    this.mousedownX = evt.x
+    this.mousedownY = evt.y
+    this.isAllowResize = true
+    const target = evt.target as HTMLDivElement
+    this.curHandleIndex = Number(target.dataset.index)
+    // 显示遮盖元素
+    this.resizerMask.style.display = 'block'
+    // 改变光标样式
+    const cursor = window.getComputedStyle(target).cursor
+    document.body.style.cursor = cursor
+    canvas.style.cursor = cursor
+    // 追加mousemove事件
+    const mousemoveFn = this._mousemove.bind(this)
+    document.addEventListener('mousemove', mousemoveFn)
+    // 追加mouseup事件
+    document.addEventListener(
+      'mouseup',
+      () => {
+        this.element.width = Math.min(this.width, this.draw.getInnerWidth())
+        this.element.height = this.height
+        this.isAllowResize = false
+        this.resizerSelection.style.display = 'none'
+        this.resizerMask.style.display = 'none'
+        document.removeEventListener('mousemove', mousemoveFn)
+        document.body.style.cursor = ''
+        canvas.style.cursor = 'text'
+        // 更新文档
+        this.draw.render()
+      },
+      {
+        once: true
+      }
+    )
+    evt.preventDefault()
+  }
+
+  private _mousemove(evt: MouseEvent) {
+    if (!this.isAllowResize) return
+    const { scale } = this.options
+    let dx = 0
+    let dy = 0
+    switch (this.curHandleIndex) {
+      case 0:
+        {
+          const offsetX = this.mousedownX - evt.x
+          const offsetY = this.mousedownY - evt.y
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3)
+          dy = (this.element.height! * dx) / this.getBlockWidth()
+        }
+        break
+      case 1:
+        dy = this.mousedownY - evt.y
+        break
+      case 2:
+        {
+          const offsetX = evt.x - this.mousedownX
+          const offsetY = this.mousedownY - evt.y
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3)
+          dy = (this.element.height! * dx) / this.getBlockWidth()
+        }
+        break
+      case 4:
+        {
+          const offsetX = evt.x - this.mousedownX
+          const offsetY = evt.y - this.mousedownY
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3)
+          dy = (this.element.height! * dx) / this.getBlockWidth()
+        }
+        break
+      case 3:
+        dx = evt.x - this.mousedownX
+        break
+      case 5:
+        dy = evt.y - this.mousedownY
+        break
+      case 6:
+        {
+          const offsetX = this.mousedownX - evt.x
+          const offsetY = evt.y - this.mousedownY
+          dx = Math.cbrt(offsetX ** 3 + offsetY ** 3)
+          dy = (this.element.height! * dx) / this.getBlockWidth()
+        }
+        break
+      case 7:
+        dx = this.mousedownX - evt.x
+        break
+    }
+    // 图片实际宽高（变化大小除掉缩放比例）
+    const dw = this.getBlockWidth() + dx / scale
+    const dh = this.element.height! + dy / scale
+    if (dw <= 0 || dh <= 0) return
+    this.width = dw
+    this.height = dh
+    // 图片显示宽高
+    const elementWidth = dw * scale
+    const elementHeight = dh * scale
+    // 更新预览包围框尺寸
+    this._updateResizerRect(elementWidth, elementHeight)
+    this.blockItem.style.width = `${elementWidth}px`
+    this.blockItem.style.height = `${elementHeight}px`
+    evt.preventDefault()
+  }
+
+  public snapshot(ctx: CanvasRenderingContext2D, x: number, y: number) {
+    const block = this.element.block!
+    if (block.type === BlockType.VIDEO) {
+      this.blockItem.style.display = 'none'
+      if (this.blockCache.has(this.element.id!)) {
+        const videoBlock = <VideoBlock>this.blockCache.get(this.element.id!)
+        videoBlock.snapshot(ctx, x, y)
+      } else {
+        this.block = new VideoBlock(this.element)
+        const promise = this.block.snapshot(ctx, x, y)
+        this.draw.getImageObserver().add(promise)
+        this.blockCache.set(this.element.id!, this.block)
+      }
+    }
+  }
+
+  public render() {
+    const block = this.element.block!
+    if (block.type === BlockType.IFRAME) {
+      this.block = new IFrameBlock(this.element)
+      this.block.render(this.blockItem)
+    } else if (block.type === BlockType.VIDEO) {
+      this.block = new VideoBlock(this.element)
+      this.block.render(this.blockItem)
+    }
+  }
+
+  public setClientRects(pageNo: number, x: number, y: number) {
+    const height = this.draw.getHeight()
+    const pageGap = this.draw.getPageGap()
+    const preY = pageNo * (height + pageGap)
+    // 尺寸
+    const { metrics } = this.element
+    this.blockItem.style.display = 'block'
+    this.blockItem.style.width = `${metrics.width}px`
+    this.blockItem.style.height = `${metrics.height}px`
+    // 位置
+    this.blockItem.style.left = `${x}px`
+    this.blockItem.style.top = `${preY + y}px`
+  }
+
+  public remove() {
+    this.blockItem.remove()
+  }
+}

package/src/editor/core/draw/particle/block/modules/IFrameBlock.ts

@@ -0,0 +1,47 @@
+import { IRowElement } from '../../../../../interface/Row'
+
+export class IFrameBlock {
+  public static readonly sandbox = ['allow-scripts', 'allow-same-origin']
+  public static readonly allow = ['fullscreen']
+
+  private element: IRowElement
+
+  constructor(element: IRowElement) {
+    this.element = element
+  }
+
+  private _defineIframeProperties(iframeWindow: Window) {
+    Object.defineProperties(iframeWindow, {
+      // 禁止获取parent避免安全漏洞
+      parent: {
+        get: () => null
+      },
+      // 用于区分上下文
+      __POWERED_BY_CANVAS_EDITOR__: {
+        get: () => true
+      }
+    })
+  }
+
+  public render(blockItemContainer: HTMLDivElement) {
+    const { iframeBlock } = this.element.block || {}
+    const iframe = document.createElement('iframe')
+    iframe.setAttribute('data-id', this.element.id!)
+    iframe.sandbox.add(...(iframeBlock?.sandbox || IFrameBlock.sandbox))
+    iframe.setAttribute(
+      'allow',
+      [iframeBlock?.allow || IFrameBlock.allow].join(' ')
+    )
+    iframe.style.border = 'none'
+    iframe.style.width = '100%'
+    iframe.style.height = '100%'
+    if (iframeBlock?.src) {
+      iframe.src = iframeBlock.src
+    } else if (iframeBlock?.srcdoc) {
+      iframe.srcdoc = iframeBlock.srcdoc
+    }
+    blockItemContainer.append(iframe)
+    // 重新定义iframe上属性
+    this._defineIframeProperties(iframe.contentWindow!)
+  }
+}

package/src/editor/core/draw/particle/block/modules/VideoBlock.ts

@@ -0,0 +1,61 @@
+import { IRowElement } from '../../../../../interface/Row'
+
+export class VideoBlock {
+  private element: IRowElement
+  protected videoCache: Map<string, HTMLVideoElement>
+
+  constructor(element: IRowElement) {
+    this.element = element
+    this.videoCache = new Map()
+  }
+
+  public snapshot(ctx: CanvasRenderingContext2D, x: number, y: number) {
+    return new Promise((resolve, reject) => {
+      const src = this.element.block?.videoBlock?.src || ''
+      if (this.videoCache.has(src)) {
+        const video = this.videoCache.get(src)!
+        ctx.drawImage(
+          video,
+          x,
+          y,
+          this.element.metrics.width,
+          this.element.metrics.height
+        )
+        resolve(this.element)
+      } else {
+        const video = document.createElement('video')
+        video.src = src
+        video.muted = true
+        video.crossOrigin = 'anonymous'
+        video.onloadeddata = () => {
+          ctx.drawImage(
+            video,
+            x,
+            y,
+            this.element.metrics.width,
+            this.element.metrics.height
+          )
+          this.videoCache.set(src, video)
+          resolve(this.element)
+        }
+        video.onerror = error => {
+          reject(error)
+        }
+        video.play().then(() => {
+          video.pause()
+        })
+      }
+    })
+  }
+
+  public render(blockItemContainer: HTMLDivElement) {
+    const block = this.element.block!
+    const video = document.createElement('video')
+    video.style.width = '100%'
+    video.style.height = '100%'
+    video.style.objectFit = 'contain'
+    video.src = block.videoBlock?.src || ''
+    video.controls = true
+    blockItemContainer.append(video)
+  }
+}

package/src/editor/core/draw/particle/date/DateParticle.ts

@@ -0,0 +1,111 @@
+import { ElementType } from '../../../../dataset/enum/Element'
+import { DeepRequired } from '../../../../interface/Common'
+import { IEditorOption } from '../../../../interface/Editor'
+import { IElement, IElementPosition } from '../../../../interface/Element'
+import { formatElementContext } from '../../../../utils/element'
+import { RangeManager } from '../../../range/RangeManager'
+import { Draw } from '../../Draw'
+import { DatePicker } from './DatePicker'
+
+export class DateParticle {
+  private draw: Draw
+  private range: RangeManager
+  private datePicker: DatePicker
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.options = draw.getOptions()
+    this.range = draw.getRange()
+    this.datePicker = new DatePicker(draw, {
+      onSubmit: this._setValue.bind(this)
+    })
+  }
+
+  private _setValue(date: string) {
+    if (!date) return
+    const range = this.getDateElementRange()
+    if (!range) return
+    const [leftIndex, rightIndex] = range
+    const elementList = this.draw.getElementList()
+    const startElement = elementList[leftIndex + 1]
+    // 删除旧时间
+    this.draw.spliceElementList(
+      elementList,
+      leftIndex + 1,
+      rightIndex - leftIndex
+    )
+    this.range.setRange(leftIndex, leftIndex)
+    // 插入新时间
+    const dateElement: IElement = {
+      type: ElementType.DATE,
+      value: '',
+      dateFormat: startElement.dateFormat,
+      valueList: [
+        {
+          value: date
+        }
+      ]
+    }
+    formatElementContext(elementList, [dateElement], leftIndex, {
+      editorOptions: this.options
+    })
+    this.draw.insertElementList([dateElement])
+  }
+
+  public getDateElementRange(): [number, number] | null {
+    let leftIndex = -1
+    let rightIndex = -1
+    const { startIndex, endIndex } = this.range.getRange()
+    if (!~startIndex && !~endIndex) return null
+    const elementList = this.draw.getElementList()
+    const startElement = elementList[startIndex]
+    if (startElement.type !== ElementType.DATE) return null
+    // 向左查找
+    let preIndex = startIndex
+    while (preIndex >= 0) {
+      const preElement = elementList[preIndex]
+      if (preElement.dateId !== startElement.dateId) {
+        leftIndex = preIndex
+        break
+      }
+      preIndex--
+    }
+    // 向右查找
+    let nextIndex = startIndex + 1
+    while (nextIndex < elementList.length) {
+      const nextElement = elementList[nextIndex]
+      if (nextElement.dateId !== startElement.dateId) {
+        rightIndex = nextIndex - 1
+        break
+      }
+      nextIndex++
+    }
+    // 控件在最后
+    if (nextIndex === elementList.length) {
+      rightIndex = nextIndex - 1
+    }
+    if (!~leftIndex || !~rightIndex) return null
+    return [leftIndex, rightIndex]
+  }
+
+  public clearDatePicker() {
+    this.datePicker.dispose()
+  }
+
+  public renderDatePicker(element: IElement, position: IElementPosition) {
+    const elementList = this.draw.getElementList()
+    const range = this.getDateElementRange()
+    const value = range
+      ? elementList
+          .slice(range[0] + 1, range[1] + 1)
+          .map(el => el.value)
+          .join('')
+      : ''
+    this.datePicker.render({
+      value,
+      position,
+      dateFormat: element.dateFormat
+    })
+  }
+}