editor-svg 1.0.2 → 1.0.3

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

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

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

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

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

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