editor-svg 1.0.2 → 1.0.3

package/src/editor/core/draw/richtext/Underline.ts

@@ -1,106 +0,0 @@
-import { AbstractRichText } from './AbstractRichText'
-import { IEditorOption } from '../../../interface/Editor'
-import { Draw } from '../Draw'
-import { DashType, TextDecorationStyle } from '../../../dataset/enum/Text'
-
-export class Underline extends AbstractRichText {
-  private options: Required<IEditorOption>
-
-  constructor(draw: Draw) {
-    super()
-    this.options = draw.getOptions()
-  }
-
-  // 下划线
-  private _drawLine(
-    ctx: CanvasRenderingContext2D,
-    startX: number,
-    startY: number,
-    width: number,
-    dashType?: DashType
-  ) {
-    const endX = startX + width
-    ctx.beginPath()
-    switch (dashType) {
-      case DashType.DASHED:
-        // 长虚线- - - - - -
-        ctx.setLineDash([3, 1])
-        break
-      case DashType.DOTTED:
-        // 点虚线 . . . . . .
-        ctx.setLineDash([1, 1])
-        break
-    }
-    ctx.moveTo(startX, startY)
-    ctx.lineTo(endX, startY)
-    ctx.stroke()
-  }
-
-  // 双实线
-  private _drawDouble(
-    ctx: CanvasRenderingContext2D,
-    startX: number,
-    startY: number,
-    width: number
-  ) {
-    const SPACING = 3 // 双实线间距
-    const endX = startX + width
-    const endY = startY + SPACING * this.options.scale
-    ctx.beginPath()
-    ctx.moveTo(startX, startY)
-    ctx.lineTo(endX, startY)
-    ctx.stroke()
-    ctx.beginPath()
-    ctx.moveTo(startX, endY)
-    ctx.lineTo(endX, endY)
-    ctx.stroke()
-  }
-
-  // 波浪线
-  private _drawWave(
-    ctx: CanvasRenderingContext2D,
-    startX: number,
-    startY: number,
-    width: number
-  ) {
-    const { scale } = this.options
-    const AMPLITUDE = 1.2 * scale // 振幅
-    const FREQUENCY = 1 / scale // 频率
-    const adjustY = startY + 2 * AMPLITUDE // 增加2倍振幅
-    ctx.beginPath()
-    for (let x = 0; x < width; x++) {
-      const y = AMPLITUDE * Math.sin(FREQUENCY * x)
-      ctx.lineTo(startX + x, adjustY + y)
-    }
-    ctx.stroke()
-  }
-
-  public render(ctx: CanvasRenderingContext2D) {
-    if (!this.fillRect.width) return
-    const { underlineColor, scale } = this.options
-    const { x, y, width } = this.fillRect
-    ctx.save()
-    ctx.strokeStyle = this.fillColor || underlineColor
-    ctx.lineWidth = scale
-    const adjustY = Math.floor(y + 2 * ctx.lineWidth) + 0.5 // +0.5从1处渲染，避免线宽度等于3
-    switch (this.fillDecorationStyle) {
-      case TextDecorationStyle.WAVY:
-        this._drawWave(ctx, x, adjustY, width)
-        break
-      case TextDecorationStyle.DOUBLE:
-        this._drawDouble(ctx, x, adjustY, width)
-        break
-      case TextDecorationStyle.DASHED:
-        this._drawLine(ctx, x, adjustY, width, DashType.DASHED)
-        break
-      case TextDecorationStyle.DOTTED:
-        this._drawLine(ctx, x, adjustY, width, DashType.DOTTED)
-        break
-      default:
-        this._drawLine(ctx, x, adjustY, width)
-        break
-    }
-    ctx.restore()
-    this.clearFillInfo()
-  }
-}

package/src/editor/core/event/CanvasEvent.ts

@@ -1,215 +0,0 @@
-import { ElementStyleKey } from '../../dataset/enum/ElementStyle'
-import { IElement, IElementPosition } from '../../interface/Element'
-import { ICurrentPosition, IPositionContext } from '../../interface/Position'
-import { Draw } from '../draw/Draw'
-import { Position } from '../position/Position'
-import { RangeManager } from '../range/RangeManager'
-import { threeClick } from '../../utils'
-import { IRange, IRangeElementStyle } from '../../interface/Range'
-import { mousedown } from './handlers/mousedown'
-import { mouseup } from './handlers/mouseup'
-import { mouseleave } from './handlers/mouseleave'
-import { mousemove } from './handlers/mousemove'
-import { keydown } from './handlers/keydown'
-import { input } from './handlers/input'
-import { cut } from './handlers/cut'
-import { copy } from './handlers/copy'
-import { drop } from './handlers/drop'
-import click, { getWordRangeBySegmenter } from './handlers/click'
-import composition from './handlers/composition'
-import drag from './handlers/drag'
-import { isIOS } from '../../utils/ua'
-import { ICopyOption } from '../../interface/Event'
-
-export interface ICompositionInfo {
-  elementList: IElement[]
-  startIndex: number
-  endIndex: number
-  value: string
-  defaultStyle: IRangeElementStyle | null
-}
-
-export class CanvasEvent {
-  public isAllowSelection: boolean
-  public isComposing: boolean
-  public compositionInfo: ICompositionInfo | null
-
-  public isAllowDrag: boolean
-  public isAllowDrop: boolean
-  public cacheRange: IRange | null
-  public cacheElementList: IElement[] | null
-  public cachePositionList: IElementPosition[] | null
-  public cachePositionContext: IPositionContext | null
-  public mouseDownStartPosition: ICurrentPosition | null
-
-  private draw: Draw
-  private pageContainer: HTMLDivElement
-  private pageList: HTMLCanvasElement[]
-  private range: RangeManager
-  private position: Position
-
-  constructor(draw: Draw) {
-    this.draw = draw
-    this.pageContainer = draw.getPageContainer()
-    this.pageList = draw.getPageList()
-    this.range = this.draw.getRange()
-    this.position = this.draw.getPosition()
-
-    this.isAllowSelection = false
-    this.isComposing = false
-    this.compositionInfo = null
-    this.isAllowDrag = false
-    this.isAllowDrop = false
-    this.cacheRange = null
-    this.cacheElementList = null
-    this.cachePositionList = null
-    this.cachePositionContext = null
-    this.mouseDownStartPosition = null
-  }
-
-  public getDraw(): Draw {
-    return this.draw
-  }
-
-  public register() {
-    this.pageContainer.addEventListener('click', this.click.bind(this))
-    this.pageContainer.addEventListener('mousedown', this.mousedown.bind(this))
-    this.pageContainer.addEventListener('mouseup', this.mouseup.bind(this))
-    this.pageContainer.addEventListener(
-      'mouseleave',
-      this.mouseleave.bind(this)
-    )
-    this.pageContainer.addEventListener('mousemove', this.mousemove.bind(this))
-    this.pageContainer.addEventListener('dblclick', this.dblclick.bind(this))
-    this.pageContainer.addEventListener('dragover', this.dragover.bind(this))
-    this.pageContainer.addEventListener('drop', this.drop.bind(this))
-    threeClick(this.pageContainer, this.threeClick.bind(this))
-  }
-
-  public setIsAllowSelection(payload: boolean) {
-    this.isAllowSelection = payload
-    if (!payload) {
-      this.applyPainterStyle()
-    }
-  }
-
-  public setIsAllowDrag(payload: boolean) {
-    this.isAllowDrag = payload
-    this.isAllowDrop = payload
-  }
-
-  public clearPainterStyle() {
-    this.pageList.forEach(p => {
-      p.style.cursor = 'text'
-    })
-    this.draw.setPainterStyle(null)
-  }
-
-  public applyPainterStyle() {
-    const painterStyle = this.draw.getPainterStyle()
-    if (!painterStyle) return
-    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
-    if (isDisabled) return
-    let selection = this.range.getSelection()
-    // 当前不存在选区时：判断光标处是否存词组
-    if (!selection) {
-      const range = getWordRangeBySegmenter(this)
-      if (range) {
-        const elementList = this.draw.getElementList()
-        selection = elementList.slice(range.startIndex + 1, range.endIndex + 1)
-      }
-    }
-    if (!selection) return
-    const painterStyleKeys = Object.keys(painterStyle)
-    selection.forEach(s => {
-      painterStyleKeys.forEach(pKey => {
-        const key = pKey as keyof typeof ElementStyleKey
-        Reflect.set(s, key, painterStyle[key])
-      })
-    })
-    this.draw.render({ isSetCursor: false })
-    // 清除格式刷
-    const painterOptions = this.draw.getPainterOptions()
-    if (!painterOptions || !painterOptions.isDblclick) {
-      this.clearPainterStyle()
-    }
-  }
-
-  public selectAll() {
-    // 光标在表格内时选择整个表格
-    if (this.position.getPositionContext().isTable) {
-      this.draw.getTableOperate().tableSelectAll()
-    } else {
-      const positionList = this.position.getPositionList()
-      this.range.setRange(0, positionList.length - 1)
-      this.draw.render({
-        isSubmitHistory: false,
-        isSetCursor: false,
-        isCompute: false
-      })
-    }
-  }
-
-  public mousemove(evt: MouseEvent) {
-    mousemove(evt, this)
-  }
-
-  public mousedown(evt: MouseEvent) {
-    mousedown(evt, this)
-  }
-
-  public click() {
-    // IOS系统限制非用户主动触发事件的键盘弹出
-    if (isIOS && !this.draw.isReadonly()) {
-      this.draw.getCursor().getAgentDom().focus()
-    }
-  }
-
-  public mouseup(evt: MouseEvent) {
-    mouseup(evt, this)
-  }
-
-  public mouseleave(evt: MouseEvent) {
-    mouseleave(evt, this)
-  }
-
-  public keydown(evt: KeyboardEvent) {
-    keydown(evt, this)
-  }
-
-  public dblclick(evt: MouseEvent) {
-    click.dblclick(this, evt)
-  }
-
-  public threeClick() {
-    click.threeClick(this)
-  }
-
-  public input(data: string) {
-    input(data, this)
-  }
-
-  public async cut() {
-    await cut(this)
-  }
-
-  public async copy(options?: ICopyOption) {
-    await copy(this, options)
-  }
-
-  public compositionstart() {
-    composition.compositionstart(this)
-  }
-
-  public compositionend(evt: CompositionEvent) {
-    composition.compositionend(this, evt)
-  }
-
-  public drop(evt: DragEvent) {
-    drop(evt, this)
-  }
-
-  public dragover(evt: DragEvent | MouseEvent) {
-    drag.dragover(evt, this)
-  }
-}

package/src/editor/core/event/GlobalEvent.ts

@@ -1,173 +0,0 @@
-import { EDITOR_COMPONENT } from '../../dataset/constant/Editor'
-import { IEditorOption } from '../../interface/Editor'
-import { findParent } from '../../utils'
-import { Cursor } from '../cursor/Cursor'
-import { Control } from '../draw/control/Control'
-import { Draw } from '../draw/Draw'
-import { HyperlinkParticle } from '../draw/particle/HyperlinkParticle'
-import { DateParticle } from '../draw/particle/date/DateParticle'
-import { Previewer } from '../draw/particle/previewer/Previewer'
-import { TableTool } from '../draw/particle/table/TableTool'
-import { RangeManager } from '../range/RangeManager'
-import { CanvasEvent } from './CanvasEvent'
-import { ImageParticle } from '../draw/particle/ImageParticle'
-import { INTERNAL_SHORTCUT_KEY } from '../../dataset/constant/Shortcut'
-
-export class GlobalEvent {
-  private draw: Draw
-  private options: Required<IEditorOption>
-  private cursor: Cursor | null
-  private canvasEvent: CanvasEvent
-  private range: RangeManager
-  private previewer: Previewer
-  private tableTool: TableTool
-  private hyperlinkParticle: HyperlinkParticle
-  private control: Control
-  private dateParticle: DateParticle
-  private imageParticle: ImageParticle
-  private dprMediaQueryList: MediaQueryList
-
-  constructor(draw: Draw, canvasEvent: CanvasEvent) {
-    this.draw = draw
-    this.options = draw.getOptions()
-    this.canvasEvent = canvasEvent
-    this.cursor = null
-    this.range = draw.getRange()
-    this.previewer = draw.getPreviewer()
-    this.tableTool = draw.getTableTool()
-    this.hyperlinkParticle = draw.getHyperlinkParticle()
-    this.dateParticle = draw.getDateParticle()
-    this.imageParticle = draw.getImageParticle()
-    this.control = draw.getControl()
-    this.dprMediaQueryList = window.matchMedia(
-      `(resolution: ${window.devicePixelRatio}dppx)`
-    )
-  }
-
-  public register() {
-    this.cursor = this.draw.getCursor()
-    this.addEvent()
-  }
-
-  private addEvent() {
-    window.addEventListener('blur', this.clearSideEffect)
-    document.addEventListener('mousedown', this.clearSideEffect)
-    document.addEventListener('mouseup', this.setCanvasEventAbility)
-    document.addEventListener('wheel', this.setPageScale, { passive: false })
-    document.addEventListener('visibilitychange', this._handleVisibilityChange)
-    this.dprMediaQueryList.addEventListener('change', this._handleDprChange)
-  }
-
-  public removeEvent() {
-    window.removeEventListener('blur', this.clearSideEffect)
-    document.removeEventListener('mousedown', this.clearSideEffect)
-    document.removeEventListener('mouseup', this.setCanvasEventAbility)
-    document.removeEventListener('wheel', this.setPageScale)
-    document.removeEventListener(
-      'visibilitychange',
-      this._handleVisibilityChange
-    )
-    this.dprMediaQueryList.removeEventListener('change', this._handleDprChange)
-  }
-
-  public clearSideEffect = (evt: Event) => {
-    if (!this.cursor) return
-    // 编辑器内部dom
-    const target = <Element>(evt?.composedPath()[0] || evt.target)
-    const pageList = this.draw.getPageList()
-    const innerEditorDom = findParent(
-      target,
-      (node: HTMLCanvasElement) => pageList.includes(node),
-      true
-    )
-    if (innerEditorDom) return
-    // 编辑器外部组件dom
-    const outerEditorDom = findParent(
-      target,
-      (node: Node & Element) =>
-        !!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT),
-      true
-    )
-    if (outerEditorDom) {
-      this.watchCursorActive()
-      return
-    }
-    this.cursor.recoveryCursor()
-    this.range.recoveryRangeStyle()
-    this.previewer.clearResizer()
-    this.tableTool.dispose()
-    this.hyperlinkParticle.clearHyperlinkPopup()
-    this.control.destroyControl()
-    this.dateParticle.clearDatePicker()
-    this.imageParticle.destroyFloatImage()
-  }
-
-  public setCanvasEventAbility = () => {
-    this.canvasEvent.setIsAllowDrag(false)
-    this.canvasEvent.setIsAllowSelection(false)
-  }
-
-  public watchCursorActive() {
-    // 选区闭合&实际光标移出光标代理
-    if (!this.range.getIsCollapsed()) return
-    setTimeout(() => {
-      // 将模拟光标变成失活显示状态
-      if (!this.cursor?.getAgentIsActive()) {
-        this.cursor?.drawCursor({
-          isFocus: false,
-          isBlink: false
-        })
-      }
-    })
-  }
-
-  public setPageScale = (evt: WheelEvent) => {
-    // 设置禁用快捷键
-    if (
-      this.options.shortcutDisableKeys.includes(
-        INTERNAL_SHORTCUT_KEY.PAGE_SCALE
-      )
-    ) {
-      return
-    }
-    // 仅在按下Ctrl键时生效
-    if (!evt.ctrlKey) return
-    evt.preventDefault()
-    const { scale } = this.options
-    if (evt.deltaY < 0) {
-      // 放大
-      const nextScale = scale * 10 + 1
-      if (nextScale <= 30) {
-        this.draw.setPageScale(nextScale / 10)
-      }
-    } else {
-      // 缩小
-      const nextScale = scale * 10 - 1
-      if (nextScale >= 5) {
-        this.draw.setPageScale(nextScale / 10)
-      }
-    }
-  }
-
-  private _handleVisibilityChange = () => {
-    if (document.visibilityState === 'visible') {
-      // 页面可见时重新渲染激活页面
-      const range = this.range.getRange()
-      const isSetCursor =
-        !!~range.startIndex &&
-        !!~range.endIndex &&
-        range.startIndex === range.endIndex
-      this.range.replaceRange(range)
-      this.draw.render({
-        isSetCursor,
-        isCompute: false,
-        isSubmitHistory: false,
-        curIndex: range.startIndex
-      })
-    }
-  }
-
-  private _handleDprChange = () => {
-    this.draw.setPageDevicePixel()
-  }
-}

package/src/editor/core/event/eventbus/EventBus.ts

@@ -1,50 +0,0 @@
-export class EventBus<EventMap> {
-  private eventHub: Map<string, Set<Function>>
-
-  constructor() {
-    this.eventHub = new Map()
-  }
-
-  public on<K extends string & keyof EventMap>(
-    eventName: K,
-    callback: EventMap[K]
-  ) {
-    if (!eventName || typeof callback !== 'function') return
-    const eventSet = this.eventHub.get(eventName) || new Set()
-    eventSet.add(callback)
-    this.eventHub.set(eventName, eventSet)
-  }
-
-  public emit<K extends string & keyof EventMap>(
-    eventName: K,
-    payload?: EventMap[K] extends (payload: infer P) => void ? P : never
-  ) {
-    if (!eventName) return
-    const callBackSet = this.eventHub.get(eventName)
-    if (!callBackSet) return
-    if (callBackSet.size === 1) {
-      const callBack = [...callBackSet]
-      return callBack[0](payload)
-    }
-    callBackSet.forEach(callBack => callBack(payload))
-  }
-
-  public off<K extends string & keyof EventMap>(
-    eventName: K,
-    callback: EventMap[K]
-  ) {
-    if (!eventName || typeof callback !== 'function') return
-    const callBackSet = this.eventHub.get(eventName)
-    if (!callBackSet) return
-    callBackSet.delete(callback)
-  }
-
-  public isSubscribe<K extends string & keyof EventMap>(eventName: K): boolean {
-    const eventSet = this.eventHub.get(eventName)
-    return !!eventSet && eventSet.size > 0
-  }
-
-  public dangerouslyClearAll() {
-    this.eventHub.clear()
-  }
-}