editor-svg 1.0.0

package/src/editor/core/contextmenu/ContextMenu.ts

@@ -0,0 +1,363 @@
+import { NAME_PLACEHOLDER } from '../../dataset/constant/ContextMenu'
+import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../dataset/constant/Editor'
+import { EditorComponent } from '../../dataset/enum/Editor'
+import { DeepRequired } from '../../interface/Common'
+import { IEditorOption } from '../../interface/Editor'
+import { IElement } from '../../interface/Element'
+import {
+  IContextMenuContext,
+  IRegisterContextMenu
+} from '../../interface/contextmenu/ContextMenu'
+import { findParent } from '../../utils'
+import { zipElementList } from '../../utils/element'
+import { Command } from '../command/Command'
+import { Draw } from '../draw/Draw'
+import { I18n } from '../i18n/I18n'
+import { Position } from '../position/Position'
+import { RangeManager } from '../range/RangeManager'
+import { controlMenus } from './menus/controlMenus'
+import { globalMenus } from './menus/globalMenus'
+import { hyperlinkMenus } from './menus/hyperlinkMenus'
+import { imageMenus } from './menus/imageMenus'
+import { tableMenus } from './menus/tableMenus'
+
+interface IRenderPayload {
+  contextMenuList: IRegisterContextMenu[]
+  left: number
+  top: number
+  parentMenuContainer?: HTMLDivElement
+}
+
+export class ContextMenu {
+  private options: DeepRequired<IEditorOption>
+  private draw: Draw
+  private command: Command
+  private range: RangeManager
+  private position: Position
+  private i18n: I18n
+  private container: HTMLDivElement
+  private contextMenuList: IRegisterContextMenu[]
+  private contextMenuContainerList: HTMLDivElement[]
+  private contextMenuRelationShip: Map<HTMLDivElement, HTMLDivElement>
+  private context: IContextMenuContext | null
+
+  constructor(draw: Draw, command: Command) {
+    this.options = draw.getOptions()
+    this.draw = draw
+    this.command = command
+    this.range = draw.getRange()
+    this.position = draw.getPosition()
+    this.i18n = draw.getI18n()
+    this.container = draw.getContainer()
+    this.context = null
+    // 内部菜单
+    this.contextMenuList = [
+      ...globalMenus,
+      ...tableMenus,
+      ...imageMenus,
+      ...controlMenus,
+      ...hyperlinkMenus
+    ]
+    this.contextMenuContainerList = []
+    this.contextMenuRelationShip = new Map()
+    this._addEvent()
+  }
+
+  public getContextMenuList(): IRegisterContextMenu[] {
+    return this.contextMenuList
+  }
+
+  private _addEvent() {
+    // 菜单权限
+    this.container.addEventListener('contextmenu', this._proxyContextMenuEvent)
+    // 副作用处理
+    document.addEventListener('mousedown', this._handleSideEffect)
+  }
+
+  public removeEvent() {
+    this.container.removeEventListener(
+      'contextmenu',
+      this._proxyContextMenuEvent
+    )
+    document.removeEventListener('mousedown', this._handleSideEffect)
+  }
+
+  private _filterMenuList(
+    menuList: IRegisterContextMenu[]
+  ): IRegisterContextMenu[] {
+    const { contextMenuDisableKeys } = this.options
+    const renderList: IRegisterContextMenu[] = []
+    for (let m = 0; m < menuList.length; m++) {
+      const menu = menuList[m]
+      if (
+        menu.disable ||
+        (menu.key && contextMenuDisableKeys.includes(menu.key))
+      ) {
+        continue
+      }
+      if (menu.isDivider) {
+        renderList.push(menu)
+      } else {
+        if (menu.when?.(this.context!)) {
+          renderList.push(menu)
+        }
+      }
+    }
+    return renderList
+  }
+
+  private _proxyContextMenuEvent = (evt: MouseEvent) => {
+    this.context = this._getContext()
+    const renderList = this._filterMenuList(this.contextMenuList)
+    const isRegisterContextMenu = renderList.some(menu => !menu.isDivider)
+    if (isRegisterContextMenu) {
+      this.dispose()
+      this._render({
+        contextMenuList: renderList,
+        left: evt.x,
+        top: evt.y
+      })
+    }
+    evt.preventDefault()
+  }
+
+  private _handleSideEffect = (evt: MouseEvent) => {
+    if (this.contextMenuContainerList.length) {
+      // 点击非右键菜单内
+      const target = <Element>(evt?.composedPath()[0] || evt.target)
+      const contextMenuDom = findParent(
+        target,
+        (node: Node & Element) =>
+          !!node &&
+          node.nodeType === 1 &&
+          node.getAttribute(EDITOR_COMPONENT) === EditorComponent.CONTEXTMENU,
+        true
+      )
+      if (!contextMenuDom) {
+        this.dispose()
+      }
+    }
+  }
+
+  private _getContext(): IContextMenuContext {
+    // 是否是只读模式
+    const isReadonly = this.draw.isReadonly()
+    const {
+      isCrossRowCol: crossRowCol,
+      startIndex,
+      endIndex
+    } = this.range.getRange()
+    // 是否存在焦点
+    const editorTextFocus = !!(~startIndex || ~endIndex)
+    // 是否存在选区
+    const editorHasSelection = editorTextFocus && startIndex !== endIndex
+    // 是否在表格内
+    const { isTable, trIndex, tdIndex, index } =
+      this.position.getPositionContext()
+    let tableElement: IElement | null = null
+    if (isTable) {
+      const originalElementList = this.draw.getOriginalElementList()
+      const originTableElement = originalElementList[index!] || null
+      if (originTableElement) {
+        tableElement = zipElementList([originTableElement], {
+          extraPickAttrs: ['id']
+        })[0]
+      }
+    }
+    // 是否存在跨行/列
+    const isCrossRowCol = isTable && !!crossRowCol
+    // 当前元素
+    const elementList = this.draw.getElementList()
+    const startElement = elementList[startIndex] || null
+    const endElement = elementList[endIndex] || null
+    // 当前区域
+    const zone = this.draw.getZone().getZone()
+    return {
+      startElement,
+      endElement,
+      isReadonly,
+      editorHasSelection,
+      editorTextFocus,
+      isCrossRowCol,
+      zone,
+      isInTable: isTable,
+      trIndex: trIndex ?? null,
+      tdIndex: tdIndex ?? null,
+      tableElement,
+      options: this.options
+    }
+  }
+
+  private _createContextMenuContainer(): HTMLDivElement {
+    const contextMenuContainer = document.createElement('div')
+    contextMenuContainer.classList.add(`${EDITOR_PREFIX}-contextmenu-container`)
+    contextMenuContainer.setAttribute(
+      EDITOR_COMPONENT,
+      EditorComponent.CONTEXTMENU
+    )
+    this.container.append(contextMenuContainer)
+    return contextMenuContainer
+  }
+
+  private _render(payload: IRenderPayload): HTMLDivElement {
+    const { contextMenuList, left, top, parentMenuContainer } = payload
+    const contextMenuContainer = this._createContextMenuContainer()
+    const contextMenuContent = document.createElement('div')
+    contextMenuContent.classList.add(`${EDITOR_PREFIX}-contextmenu-content`)
+    // 直接子菜单
+    let childMenuContainer: HTMLDivElement | null = null
+    // 父菜单添加子菜单映射关系
+    if (parentMenuContainer) {
+      this.contextMenuRelationShip.set(
+        parentMenuContainer,
+        contextMenuContainer
+      )
+    }
+    for (let c = 0; c < contextMenuList.length; c++) {
+      const menu = contextMenuList[c]
+      if (menu.isDivider) {
+        // 分割线相邻 || 首尾分隔符时不渲染
+        if (
+          c !== 0 &&
+          c !== contextMenuList.length - 1 &&
+          !contextMenuList[c - 1]?.isDivider
+        ) {
+          const divider = document.createElement('div')
+          divider.classList.add(`${EDITOR_PREFIX}-contextmenu-divider`)
+          contextMenuContent.append(divider)
+        }
+      } else {
+        const menuItem = document.createElement('div')
+        menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-item`)
+        // 菜单事件
+        if (menu.childMenus) {
+          const childMenus = this._filterMenuList(menu.childMenus)
+          const isRegisterContextMenu = childMenus.some(menu => !menu.isDivider)
+          if (isRegisterContextMenu) {
+            menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-sub-item`)
+            menuItem.onmouseenter = () => {
+              this._setHoverStatus(menuItem, true)
+              this._removeSubMenu(contextMenuContainer)
+              // 子菜单
+              const subMenuRect = menuItem.getBoundingClientRect()
+              const left = subMenuRect.left + subMenuRect.width
+              const top = subMenuRect.top
+              childMenuContainer = this._render({
+                contextMenuList: childMenus,
+                left,
+                top,
+                parentMenuContainer: contextMenuContainer
+              })
+            }
+            menuItem.onmouseleave = evt => {
+              // 移动到子菜单选项选中状态不变化
+              if (
+                !childMenuContainer ||
+                !childMenuContainer.contains(evt.relatedTarget as Node)
+              ) {
+                this._setHoverStatus(menuItem, false)
+              }
+            }
+          }
+        } else {
+          menuItem.onmouseenter = () => {
+            this._setHoverStatus(menuItem, true)
+            this._removeSubMenu(contextMenuContainer)
+          }
+          menuItem.onmouseleave = () => {
+            this._setHoverStatus(menuItem, false)
+          }
+          menuItem.onclick = () => {
+            if (menu.callback && this.context) {
+              menu.callback(this.command, this.context)
+            }
+            this.dispose()
+          }
+        }
+        // 图标
+        const icon = document.createElement('i')
+        menuItem.append(icon)
+        if (menu.icon) {
+          icon.classList.add(`${EDITOR_PREFIX}-contextmenu-${menu.icon}`)
+        }
+        // 文本
+        const span = document.createElement('span')
+        const name = menu.i18nPath
+          ? this._formatName(this.i18n.t(menu.i18nPath))
+          : this._formatName(menu.name || '')
+        span.append(document.createTextNode(name))
+        menuItem.append(span)
+        // 快捷方式提示
+        if (menu.shortCut) {
+          const span = document.createElement('span')
+          span.classList.add(`${EDITOR_PREFIX}-shortcut`)
+          span.append(document.createTextNode(menu.shortCut))
+          menuItem.append(span)
+        }
+        contextMenuContent.append(menuItem)
+      }
+    }
+    contextMenuContainer.append(contextMenuContent)
+    contextMenuContainer.style.display = 'block'
+    // 右侧空间不足时，以菜单右上角作为起始点
+    const innerWidth = window.innerWidth
+    const contextmenuRect = contextMenuContainer.getBoundingClientRect()
+    const contextMenuWidth = contextmenuRect.width
+    const adjustLeft =
+      left + contextMenuWidth > innerWidth ? left - contextMenuWidth : left
+    contextMenuContainer.style.left = `${adjustLeft}px`
+    // 下侧空间不足时，以菜单底部作为起始点
+    const innerHeight = window.innerHeight
+    const contextMenuHeight = contextmenuRect.height
+    const adjustTop =
+      top + contextMenuHeight > innerHeight ? top - contextMenuHeight : top
+    contextMenuContainer.style.top = `${adjustTop}px`
+    this.contextMenuContainerList.push(contextMenuContainer)
+    return contextMenuContainer
+  }
+
+  private _removeSubMenu(payload: HTMLDivElement) {
+    const childMenu = this.contextMenuRelationShip.get(payload)
+    if (childMenu) {
+      this._removeSubMenu(childMenu)
+      childMenu.remove()
+      this.contextMenuRelationShip.delete(payload)
+    }
+  }
+
+  private _setHoverStatus(payload: HTMLDivElement, status: boolean) {
+    if (status) {
+      payload.parentNode
+        ?.querySelectorAll(`${EDITOR_PREFIX}-contextmenu-item`)
+        .forEach(child => child.classList.remove('hover'))
+      payload.classList.add('hover')
+    } else {
+      payload.classList.remove('hover')
+    }
+  }
+
+  private _formatName(name: string): string {
+    const placeholderValues = Object.values(NAME_PLACEHOLDER)
+    const placeholderReg = new RegExp(`${placeholderValues.join('|')}`)
+    let formatName = name
+    if (placeholderReg.test(formatName)) {
+      // 选区名称
+      const selectedReg = new RegExp(NAME_PLACEHOLDER.SELECTED_TEXT, 'g')
+      if (selectedReg.test(formatName)) {
+        const selectedText = this.range.toString()
+        formatName = formatName.replace(selectedReg, selectedText)
+      }
+    }
+    return formatName
+  }
+
+  public registerContextMenuList(payload: IRegisterContextMenu[]) {
+    this.contextMenuList.push(...payload)
+  }
+
+  public dispose() {
+    this.contextMenuContainerList.forEach(child => child.remove())
+    this.contextMenuContainerList = []
+    this.contextMenuRelationShip.clear()
+  }
+}

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

@@ -0,0 +1,25 @@
+import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
+import { EditorMode } from '../../../dataset/enum/Editor'
+import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
+import { Command } from '../../command/Command'
+const {
+  CONTROL: { DELETE }
+} = INTERNAL_CONTEXT_MENU_KEY
+
+export const controlMenus: IRegisterContextMenu[] = [
+  {
+    key: DELETE,
+    i18nPath: 'contextmenu.control.delete',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        !payload.editorHasSelection &&
+        !!payload.startElement?.controlId &&
+        payload.options.mode !== EditorMode.FORM
+      )
+    },
+    callback: (command: Command) => {
+      command.executeRemoveControl()
+    }
+  }
+]

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

@@ -0,0 +1,66 @@
+import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
+import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
+import { isApple } from '../../../utils/ua'
+import { Command } from '../../command/Command'
+const {
+  GLOBAL: { CUT, COPY, PASTE, SELECT_ALL, PRINT }
+} = INTERNAL_CONTEXT_MENU_KEY
+
+export const globalMenus: IRegisterContextMenu[] = [
+  {
+    key: CUT,
+    i18nPath: 'contextmenu.global.cut',
+    shortCut: `${isApple ? '⌘' : 'Ctrl'} + X`,
+    when: payload => {
+      return !payload.isReadonly
+    },
+    callback: (command: Command) => {
+      command.executeCut()
+    }
+  },
+  {
+    key: COPY,
+    i18nPath: 'contextmenu.global.copy',
+    shortCut: `${isApple ? '⌘' : 'Ctrl'} + C`,
+    when: payload => {
+      return payload.editorHasSelection || payload.isCrossRowCol
+    },
+    callback: (command: Command) => {
+      command.executeCopy()
+    }
+  },
+  {
+    key: PASTE,
+    i18nPath: 'contextmenu.global.paste',
+    shortCut: `${isApple ? '⌘' : 'Ctrl'} + V`,
+    when: payload => {
+      return !payload.isReadonly && payload.editorTextFocus
+    },
+    callback: (command: Command) => {
+      command.executePaste()
+    }
+  },
+  {
+    key: SELECT_ALL,
+    i18nPath: 'contextmenu.global.selectAll',
+    shortCut: `${isApple ? '⌘' : 'Ctrl'} + A`,
+    when: payload => {
+      return payload.editorTextFocus
+    },
+    callback: (command: Command) => {
+      command.executeSelectAll()
+    }
+  },
+  {
+    isDivider: true
+  },
+  {
+    key: PRINT,
+    i18nPath: 'contextmenu.global.print',
+    icon: 'print',
+    when: () => true,
+    callback: (command: Command) => {
+      command.executePrint()
+    }
+  }
+]

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

@@ -0,0 +1,58 @@
+import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
+import { ElementType } from '../../../dataset/enum/Element'
+import {
+  IContextMenuContext,
+  IRegisterContextMenu
+} from '../../../interface/contextmenu/ContextMenu'
+import { Command } from '../../command/Command'
+const {
+  HYPERLINK: { DELETE, CANCEL, EDIT }
+} = INTERNAL_CONTEXT_MENU_KEY
+
+export const hyperlinkMenus: IRegisterContextMenu[] = [
+  {
+    key: DELETE,
+    i18nPath: 'contextmenu.hyperlink.delete',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        payload.startElement?.type === ElementType.HYPERLINK
+      )
+    },
+    callback: (command: Command) => {
+      command.executeDeleteHyperlink()
+    }
+  },
+  {
+    key: CANCEL,
+    i18nPath: 'contextmenu.hyperlink.cancel',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        payload.startElement?.type === ElementType.HYPERLINK
+      )
+    },
+    callback: (command: Command) => {
+      command.executeCancelHyperlink()
+    }
+  },
+  {
+    key: EDIT,
+    i18nPath: 'contextmenu.hyperlink.edit',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        payload.startElement?.type === ElementType.HYPERLINK
+      )
+    },
+    callback: (command: Command, context: IContextMenuContext) => {
+      const url = window.prompt(
+        command.executeTranslate('contextmenu.hyperlink.edit'),
+        context.startElement?.url
+      )
+      if (url) {
+        command.executeEditHyperlink(url)
+      }
+    }
+  }
+]

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

@@ -0,0 +1,134 @@
+import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
+import { ImageDisplay } from '../../../dataset/enum/Common'
+import { ElementType } from '../../../dataset/enum/Element'
+import {
+  IContextMenuContext,
+  IRegisterContextMenu
+} from '../../../interface/contextmenu/ContextMenu'
+import { Command } from '../../command/Command'
+const {
+  IMAGE: {
+    CHANGE,
+    SAVE_AS,
+    TEXT_WRAP,
+    TEXT_WRAP_EMBED,
+    TEXT_WRAP_UP_DOWN,
+    TEXT_WRAP_SURROUND,
+    TEXT_WRAP_FLOAT_TOP,
+    TEXT_WRAP_FLOAT_BOTTOM
+  }
+} = INTERNAL_CONTEXT_MENU_KEY
+
+export const imageMenus: IRegisterContextMenu[] = [
+  {
+    key: CHANGE,
+    i18nPath: 'contextmenu.image.change',
+    icon: 'image-change',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        !payload.editorHasSelection &&
+        payload.startElement?.type === ElementType.IMAGE
+      )
+    },
+    callback: (command: Command) => {
+      // 创建代理元素
+      const proxyInputFile = document.createElement('input')
+      proxyInputFile.type = 'file'
+      proxyInputFile.accept = '.png, .jpg, .jpeg'
+      // 监听上传
+      proxyInputFile.onchange = () => {
+        const file = proxyInputFile.files![0]!
+        const fileReader = new FileReader()
+        fileReader.readAsDataURL(file)
+        fileReader.onload = () => {
+          const value = fileReader.result as string
+          command.executeReplaceImageElement(value)
+        }
+      }
+      proxyInputFile.click()
+    }
+  },
+  {
+    key: SAVE_AS,
+    i18nPath: 'contextmenu.image.saveAs',
+    icon: 'image',
+    when: payload => {
+      return (
+        !payload.editorHasSelection &&
+        payload.startElement?.type === ElementType.IMAGE
+      )
+    },
+    callback: (command: Command) => {
+      command.executeSaveAsImageElement()
+    }
+  },
+  {
+    key: TEXT_WRAP,
+    i18nPath: 'contextmenu.image.textWrap',
+    when: payload => {
+      return (
+        !payload.isReadonly &&
+        !payload.editorHasSelection &&
+        payload.startElement?.type === ElementType.IMAGE
+      )
+    },
+    childMenus: [
+      {
+        key: TEXT_WRAP_EMBED,
+        i18nPath: 'contextmenu.image.textWrapType.embed',
+        when: () => true,
+        callback: (command: Command, context: IContextMenuContext) => {
+          command.executeChangeImageDisplay(
+            context.startElement!,
+            ImageDisplay.BLOCK
+          )
+        }
+      },
+      {
+        key: TEXT_WRAP_UP_DOWN,
+        i18nPath: 'contextmenu.image.textWrapType.upDown',
+        when: () => true,
+        callback: (command: Command, context: IContextMenuContext) => {
+          command.executeChangeImageDisplay(
+            context.startElement!,
+            ImageDisplay.INLINE
+          )
+        }
+      },
+      {
+        key: TEXT_WRAP_SURROUND,
+        i18nPath: 'contextmenu.image.textWrapType.surround',
+        when: () => true,
+        callback: (command: Command, context: IContextMenuContext) => {
+          command.executeChangeImageDisplay(
+            context.startElement!,
+            ImageDisplay.SURROUND
+          )
+        }
+      },
+      {
+        key: TEXT_WRAP_FLOAT_TOP,
+        i18nPath: 'contextmenu.image.textWrapType.floatTop',
+        when: () => true,
+        callback: (command: Command, context: IContextMenuContext) => {
+          command.executeChangeImageDisplay(
+            context.startElement!,
+            ImageDisplay.FLOAT_TOP
+          )
+        }
+      },
+      {
+        key: TEXT_WRAP_FLOAT_BOTTOM,
+        i18nPath: 'contextmenu.image.textWrapType.floatBottom',
+        when: () => true,
+        callback: (command: Command, context: IContextMenuContext) => {
+          command.executeChangeImageDisplay(
+            context.startElement!,
+            ImageDisplay.FLOAT_BOTTOM
+          )
+        }
+      }
+    ]
+  }
+]