editor-svg 1.0.0

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

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

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

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

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