editor-svg 1.0.0

package/src/editor/core/contextmenu/menus/tableMenus.ts

@@ -0,0 +1,331 @@
+import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
+import { EditorMode } from '../../../dataset/enum/Editor'
+import { VerticalAlign } from '../../../dataset/enum/VerticalAlign'
+import {
+  TableBorder,
+  TdBorder,
+  TdSlash
+} from '../../../dataset/enum/table/Table'
+import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
+import { Command } from '../../command/Command'
+const {
+  TABLE: {
+    BORDER,
+    BORDER_ALL,
+    BORDER_EMPTY,
+    BORDER_DASH,
+    BORDER_EXTERNAL,
+    BORDER_INTERNAL,
+    BORDER_TD,
+    BORDER_TD_TOP,
+    BORDER_TD_LEFT,
+    BORDER_TD_BOTTOM,
+    BORDER_TD_RIGHT,
+    BORDER_TD_BACK,
+    BORDER_TD_FORWARD,
+    VERTICAL_ALIGN,
+    VERTICAL_ALIGN_TOP,
+    VERTICAL_ALIGN_MIDDLE,
+    VERTICAL_ALIGN_BOTTOM,
+    INSERT_ROW_COL,
+    INSERT_TOP_ROW,
+    INSERT_BOTTOM_ROW,
+    INSERT_LEFT_COL,
+    INSERT_RIGHT_COL,
+    DELETE_ROW_COL,
+    DELETE_ROW,
+    DELETE_COL,
+    DELETE_TABLE,
+    MERGE_CELL,
+    CANCEL_MERGE_CELL
+  }
+} = INTERNAL_CONTEXT_MENU_KEY
+
+export const tableMenus: IRegisterContextMenu[] = [
+  {
+    isDivider: true
+  },
+  {
+    key: BORDER,
+    i18nPath: 'contextmenu.table.border',
+    icon: 'border-all',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        payload.isInTable &&
+        payload.options.mode !== EditorMode.FORM
+      )
+    },
+    childMenus: [
+      {
+        key: BORDER_ALL,
+        i18nPath: 'contextmenu.table.borderAll',
+        icon: 'border-all',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeTableBorderType(TableBorder.ALL)
+        }
+      },
+      {
+        key: BORDER_EMPTY,
+        i18nPath: 'contextmenu.table.borderEmpty',
+        icon: 'border-empty',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeTableBorderType(TableBorder.EMPTY)
+        }
+      },
+      {
+        key: BORDER_DASH,
+        i18nPath: 'contextmenu.table.borderDash',
+        icon: 'border-dash',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeTableBorderType(TableBorder.DASH)
+        }
+      },
+      {
+        key: BORDER_EXTERNAL,
+        i18nPath: 'contextmenu.table.borderExternal',
+        icon: 'border-external',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeTableBorderType(TableBorder.EXTERNAL)
+        }
+      },
+      {
+        key: BORDER_INTERNAL,
+        i18nPath: 'contextmenu.table.borderInternal',
+        icon: 'border-internal',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeTableBorderType(TableBorder.INTERNAL)
+        }
+      },
+      {
+        key: BORDER_TD,
+        i18nPath: 'contextmenu.table.borderTd',
+        icon: 'border-td',
+        when: () => true,
+        childMenus: [
+          {
+            key: BORDER_TD_TOP,
+            i18nPath: 'contextmenu.table.borderTdTop',
+            icon: 'border-td-top',
+            when: () => true,
+            callback: (command: Command) => {
+              command.executeTableTdBorderType(TdBorder.TOP)
+            }
+          },
+          {
+            key: BORDER_TD_RIGHT,
+            i18nPath: 'contextmenu.table.borderTdRight',
+            icon: 'border-td-right',
+            when: () => true,
+            callback: (command: Command) => {
+              command.executeTableTdBorderType(TdBorder.RIGHT)
+            }
+          },
+          {
+            key: BORDER_TD_BOTTOM,
+            i18nPath: 'contextmenu.table.borderTdBottom',
+            icon: 'border-td-bottom',
+            when: () => true,
+            callback: (command: Command) => {
+              command.executeTableTdBorderType(TdBorder.BOTTOM)
+            }
+          },
+          {
+            key: BORDER_TD_LEFT,
+            i18nPath: 'contextmenu.table.borderTdLeft',
+            icon: 'border-td-left',
+            when: () => true,
+            callback: (command: Command) => {
+              command.executeTableTdBorderType(TdBorder.LEFT)
+            }
+          },
+          {
+            key: BORDER_TD_FORWARD,
+            i18nPath: 'contextmenu.table.borderTdForward',
+            icon: 'border-td-forward',
+            when: () => true,
+            callback: (command: Command) => {
+              command.executeTableTdSlashType(TdSlash.FORWARD)
+            }
+          },
+          {
+            key: BORDER_TD_BACK,
+            i18nPath: 'contextmenu.table.borderTdBack',
+            icon: 'border-td-back',
+            when: () => true,
+            callback: (command: Command) => {
+              command.executeTableTdSlashType(TdSlash.BACK)
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    key: VERTICAL_ALIGN,
+    i18nPath: 'contextmenu.table.verticalAlign',
+    icon: 'vertical-align',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        payload.isInTable &&
+        payload.options.mode !== EditorMode.FORM
+      )
+    },
+    childMenus: [
+      {
+        key: VERTICAL_ALIGN_TOP,
+        i18nPath: 'contextmenu.table.verticalAlignTop',
+        icon: 'vertical-align-top',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeTableTdVerticalAlign(VerticalAlign.TOP)
+        }
+      },
+      {
+        key: VERTICAL_ALIGN_MIDDLE,
+        i18nPath: 'contextmenu.table.verticalAlignMiddle',
+        icon: 'vertical-align-middle',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeTableTdVerticalAlign(VerticalAlign.MIDDLE)
+        }
+      },
+      {
+        key: VERTICAL_ALIGN_BOTTOM,
+        i18nPath: 'contextmenu.table.verticalAlignBottom',
+        icon: 'vertical-align-bottom',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeTableTdVerticalAlign(VerticalAlign.BOTTOM)
+        }
+      }
+    ]
+  },
+  {
+    key: INSERT_ROW_COL,
+    i18nPath: 'contextmenu.table.insertRowCol',
+    icon: 'insert-row-col',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        payload.isInTable &&
+        payload.options.mode !== EditorMode.FORM
+      )
+    },
+    childMenus: [
+      {
+        key: INSERT_TOP_ROW,
+        i18nPath: 'contextmenu.table.insertTopRow',
+        icon: 'insert-top-row',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeInsertTableTopRow()
+        }
+      },
+      {
+        key: INSERT_BOTTOM_ROW,
+        i18nPath: 'contextmenu.table.insertBottomRow',
+        icon: 'insert-bottom-row',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeInsertTableBottomRow()
+        }
+      },
+      {
+        key: INSERT_LEFT_COL,
+        i18nPath: 'contextmenu.table.insertLeftCol',
+        icon: 'insert-left-col',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeInsertTableLeftCol()
+        }
+      },
+      {
+        key: INSERT_RIGHT_COL,
+        i18nPath: 'contextmenu.table.insertRightCol',
+        icon: 'insert-right-col',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeInsertTableRightCol()
+        }
+      }
+    ]
+  },
+  {
+    key: DELETE_ROW_COL,
+    i18nPath: 'contextmenu.table.deleteRowCol',
+    icon: 'delete-row-col',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        payload.isInTable &&
+        payload.options.mode !== EditorMode.FORM
+      )
+    },
+    childMenus: [
+      {
+        key: DELETE_ROW,
+        i18nPath: 'contextmenu.table.deleteRow',
+        icon: 'delete-row',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeDeleteTableRow()
+        }
+      },
+      {
+        key: DELETE_COL,
+        i18nPath: 'contextmenu.table.deleteCol',
+        icon: 'delete-col',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeDeleteTableCol()
+        }
+      },
+      {
+        key: DELETE_TABLE,
+        i18nPath: 'contextmenu.table.deleteTable',
+        icon: 'delete-table',
+        when: () => true,
+        callback: (command: Command) => {
+          command.executeDeleteTable()
+        }
+      }
+    ]
+  },
+  {
+    key: MERGE_CELL,
+    i18nPath: 'contextmenu.table.mergeCell',
+    icon: 'merge-cell',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        payload.isCrossRowCol &&
+        payload.options.mode !== EditorMode.FORM
+      )
+    },
+    callback: (command: Command) => {
+      command.executeMergeTableCell()
+    }
+  },
+  {
+    key: CANCEL_MERGE_CELL,
+    i18nPath: 'contextmenu.table.mergeCancelCell',
+    icon: 'merge-cancel-cell',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        payload.isInTable &&
+        payload.options.mode !== EditorMode.FORM
+      )
+    },
+    callback: (command: Command) => {
+      command.executeCancelMergeTableCell()
+    }
+  }
+]

package/src/editor/core/cursor/Cursor.ts

@@ -0,0 +1,248 @@
+import { CURSOR_AGENT_OFFSET_HEIGHT } from '../../dataset/constant/Cursor'
+import { EDITOR_PREFIX } from '../../dataset/constant/Editor'
+import { MoveDirection } from '../../dataset/enum/Observer'
+import { DeepRequired } from '../../interface/Common'
+import { ICursorOption } from '../../interface/Cursor'
+import { IEditorOption } from '../../interface/Editor'
+import { IElementPosition } from '../../interface/Element'
+import { findScrollContainer, nextTick } from '../../utils'
+import { isMobile } from '../../utils/ua'
+import { Draw } from '../draw/Draw'
+import { CanvasEvent } from '../event/CanvasEvent'
+import { Position } from '../position/Position'
+import { CursorAgent } from './CursorAgent'
+
+export type IDrawCursorOption = ICursorOption & {
+  isShow?: boolean
+  isBlink?: boolean
+  isFocus?: boolean
+  hitLineStartIndex?: number
+}
+
+export interface IMoveCursorToVisibleOption {
+  direction: MoveDirection
+  cursorPosition: IElementPosition
+}
+
+export class Cursor {
+  private readonly ANIMATION_CLASS = `${EDITOR_PREFIX}-cursor--animation`
+
+  private draw: Draw
+  private container: HTMLDivElement
+  private options: DeepRequired<IEditorOption>
+  private position: Position
+  private cursorDom: HTMLDivElement
+  private cursorAgent: CursorAgent
+  private blinkTimeout: number | null
+  private hitLineStartIndex: number | undefined
+
+  constructor(draw: Draw, canvasEvent: CanvasEvent) {
+    this.draw = draw
+    this.container = draw.getContainer()
+    this.position = draw.getPosition()
+    this.options = draw.getOptions()
+
+    this.cursorDom = document.createElement('div')
+    this.cursorDom.classList.add(`${EDITOR_PREFIX}-cursor`)
+    this.container.append(this.cursorDom)
+    this.cursorAgent = new CursorAgent(draw, canvasEvent)
+    this.blinkTimeout = null
+  }
+
+  public getCursorDom(): HTMLDivElement {
+    return this.cursorDom
+  }
+
+  public getAgentDom(): HTMLTextAreaElement {
+    return this.cursorAgent.getAgentCursorDom()
+  }
+
+  public getAgentIsActive(): boolean {
+    return this.getAgentDom() === document.activeElement
+  }
+
+  public getAgentDomValue(): string {
+    return this.getAgentDom().value
+  }
+
+  public clearAgentDomValue() {
+    this.getAgentDom().value = ''
+  }
+
+  public getHitLineStartIndex() {
+    return this.hitLineStartIndex
+  }
+
+  private _blinkStart() {
+    this.cursorDom.classList.add(this.ANIMATION_CLASS)
+  }
+
+  private _blinkStop() {
+    this.cursorDom.classList.remove(this.ANIMATION_CLASS)
+  }
+
+  private _setBlinkTimeout() {
+    this._clearBlinkTimeout()
+    this.blinkTimeout = window.setTimeout(() => {
+      this._blinkStart()
+    }, 500)
+  }
+
+  private _clearBlinkTimeout() {
+    if (this.blinkTimeout) {
+      this._blinkStop()
+      window.clearTimeout(this.blinkTimeout)
+      this.blinkTimeout = null
+    }
+  }
+
+  public focus() {
+    // 移动端只读模式禁用聚焦避免唤起输入法，web端允许聚焦避免事件无法捕获
+    if (isMobile && this.draw.isReadonly()) return
+    const agentCursorDom = this.cursorAgent.getAgentCursorDom()
+    // 光标不聚焦时重新定位
+    if (document.activeElement !== agentCursorDom) {
+      agentCursorDom.focus()
+      agentCursorDom.setSelectionRange(0, 0)
+    }
+  }
+
+  public drawCursor(payload?: IDrawCursorOption) {
+    let cursorPosition = this.position.getCursorPosition()
+    if (!cursorPosition) return
+    const { scale, cursor } = this.options
+    const {
+      color,
+      width,
+      isShow = true,
+      isBlink = true,
+      isFocus = true,
+      hitLineStartIndex
+    } = { ...cursor, ...payload }
+    // 设置光标代理
+    const height = this.draw.getHeight()
+    const pageGap = this.draw.getPageGap()
+    // 光标位置
+    this.hitLineStartIndex = hitLineStartIndex
+    if (hitLineStartIndex) {
+      const positionList = this.position.getPositionList()
+      cursorPosition = positionList[hitLineStartIndex]
+    }
+    const {
+      metrics,
+      coordinate: { leftTop, rightTop },
+      ascent,
+      pageNo
+    } = cursorPosition
+    const zoneManager = this.draw.getZone()
+    const curPageNo = zoneManager.isMainActive()
+      ? pageNo
+      : this.draw.getPageNo()
+    const preY = curPageNo * (height + pageGap)
+    // 默认偏移高度
+    const defaultOffsetHeight = CURSOR_AGENT_OFFSET_HEIGHT * scale
+    // 增加1/4字体大小（最小为defaultOffsetHeight即默认偏移高度）
+    const increaseHeight = Math.min(metrics.height / 4, defaultOffsetHeight)
+    const cursorHeight = metrics.height + increaseHeight * 2
+    const agentCursorDom = this.cursorAgent.getAgentCursorDom()
+    if (isFocus) {
+      setTimeout(() => {
+        this.focus()
+      })
+    }
+    // fillText位置 + 文字基线到底部距离 - 模拟光标偏移量
+    const descent =
+      metrics.boundingBoxDescent < 0 ? 0 : metrics.boundingBoxDescent
+    const cursorTop =
+      leftTop[1] + ascent + descent - (cursorHeight - increaseHeight) + preY
+    const cursorLeft = hitLineStartIndex ? leftTop[0] : rightTop[0]
+    agentCursorDom.style.left = `${cursorLeft}px`
+    agentCursorDom.style.top = `${
+      cursorTop + cursorHeight - defaultOffsetHeight
+    }px`
+    // 模拟光标显示
+    if (!isShow) {
+      this.recoveryCursor()
+      return
+    }
+    // 记录旧光标位置：用于光标移动到可视范围内
+    const oldTop = this.cursorDom.style.top
+    // 设置光标位置
+    const isReadonly = this.draw.isReadonly()
+    this.cursorDom.style.width = `${width * scale}px`
+    this.cursorDom.style.backgroundColor = color
+    this.cursorDom.style.left = `${cursorLeft}px`
+    this.cursorDom.style.top = `${cursorTop}px`
+    this.cursorDom.style.display = isReadonly ? 'none' : 'block'
+    this.cursorDom.style.height = `${cursorHeight}px`
+    if (isBlink) {
+      this._setBlinkTimeout()
+    } else {
+      this._clearBlinkTimeout()
+    }
+    // 移动到视野范围内
+    nextTick(() => {
+      // nexttick后执行 => 避免画布没有渲染完成造成残影
+      this.moveCursorToVisible({
+        cursorPosition: cursorPosition!,
+        direction:
+          parseInt(oldTop) > cursorTop ? MoveDirection.UP : MoveDirection.DOWN
+      })
+    })
+  }
+
+  public recoveryCursor() {
+    this.cursorDom.style.display = 'none'
+    this._clearBlinkTimeout()
+  }
+
+  public moveCursorToVisible(payload: IMoveCursorToVisibleOption) {
+    const { cursorPosition, direction } = payload
+    if (!cursorPosition || !direction) return
+    const {
+      pageNo,
+      coordinate: { leftTop, leftBottom }
+    } = cursorPosition
+    // 查找滚动容器，如果是滚动容器是document，则限制范围为当前窗口
+    const scrollContainer = findScrollContainer(this.container)
+    const rect = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    }
+    const isDocumentScroll = scrollContainer === document.documentElement
+    if (isDocumentScroll) {
+      rect.right = window.innerWidth
+      rect.bottom = window.innerHeight
+    } else {
+      const { left, right, top, bottom } =
+        scrollContainer.getBoundingClientRect()
+      rect.left = left
+      rect.right = right
+      rect.top = top
+      rect.bottom = bottom
+    }
+    // 当前页面距离滚动容器顶部距离
+    const prePageY =
+      pageNo * (this.draw.getHeight() + this.draw.getPageGap()) +
+      this.container.getBoundingClientRect().top
+    // 向上移动时：以顶部距离为准，向下移动时：以底部位置为准
+    const isUp = direction === MoveDirection.UP
+    const x = leftBottom[0] + (isDocumentScroll ? 0 : rect.left)
+    const y = isUp ? leftTop[1] + prePageY : leftBottom[1] + prePageY
+    // 可视范围根据参数调整
+    const { maskMargin } = this.options
+    rect.top += maskMargin[0]
+    rect.bottom -= maskMargin[2]
+    // 不在可视范围时，移动滚动条到合适位置
+    if (
+      !(x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom)
+    ) {
+      const { scrollLeft, scrollTop } = scrollContainer
+      isUp
+        ? scrollContainer.scroll(scrollLeft, scrollTop - (rect.top - y))
+        : scrollContainer.scroll(scrollLeft, scrollTop + y - rect.bottom)
+    }
+  }
+}

package/src/editor/core/cursor/CursorAgent.ts

@@ -0,0 +1,75 @@
+import { EDITOR_PREFIX } from '../../dataset/constant/Editor'
+import { EventBusMap } from '../../interface/EventBus'
+import { Draw } from '../draw/Draw'
+import { CanvasEvent } from '../event/CanvasEvent'
+import { EventBus } from '../event/eventbus/EventBus'
+import { pasteByEvent } from '../event/handlers/paste'
+
+export class CursorAgent {
+  private draw: Draw
+  private container: HTMLDivElement
+  private agentCursorDom: HTMLTextAreaElement
+  private canvasEvent: CanvasEvent
+  private eventBus: EventBus<EventBusMap>
+
+  constructor(draw: Draw, canvasEvent: CanvasEvent) {
+    this.draw = draw
+    this.container = draw.getContainer()
+    this.canvasEvent = canvasEvent
+    this.eventBus = draw.getEventBus()
+    // 代理光标绘制
+    const agentCursorDom = document.createElement('textarea')
+    agentCursorDom.autocomplete = 'off'
+    agentCursorDom.classList.add(`${EDITOR_PREFIX}-inputarea`)
+    agentCursorDom.innerText = ''
+    this.container.append(agentCursorDom)
+    this.agentCursorDom = agentCursorDom
+    // 事件
+    agentCursorDom.onkeydown = (evt: KeyboardEvent) => this._keyDown(evt)
+    agentCursorDom.oninput = this._input.bind(this)
+    agentCursorDom.onpaste = (evt: ClipboardEvent) => this._paste(evt)
+    agentCursorDom.addEventListener(
+      'compositionstart',
+      this._compositionstart.bind(this)
+    )
+    agentCursorDom.addEventListener(
+      'compositionend',
+      this._compositionend.bind(this)
+    )
+  }
+
+  public getAgentCursorDom(): HTMLTextAreaElement {
+    return this.agentCursorDom
+  }
+
+  private _keyDown(evt: KeyboardEvent) {
+    this.canvasEvent.keydown(evt)
+  }
+
+  private _input(evt: Event) {
+    const data = (<InputEvent>evt).data
+    if (data) {
+      this.canvasEvent.input(data)
+    }
+    if (this.eventBus.isSubscribe('input')) {
+      this.eventBus.emit('input', evt)
+    }
+  }
+
+  private _paste(evt: ClipboardEvent) {
+    const isReadonly = this.draw.isReadonly()
+    if (isReadonly) return
+    const clipboardData = evt.clipboardData
+    if (!clipboardData) return
+    pasteByEvent(this.canvasEvent, evt)
+    evt.preventDefault()
+  }
+
+  private _compositionstart() {
+    this.canvasEvent.compositionstart()
+  }
+
+  private _compositionend(evt: CompositionEvent) {
+    this.canvasEvent.compositionend(evt)
+  }
+}