editor-svg 1.0.2 → 1.0.3

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

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

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

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