editor-svg 1.0.0

package/src/editor/core/register/Register.ts

@@ -0,0 +1,28 @@
+import { IRegisterContextMenu } from '../../interface/contextmenu/ContextMenu'
+import { IRegisterShortcut } from '../../interface/shortcut/Shortcut'
+import { ContextMenu } from '../contextmenu/ContextMenu'
+import { Shortcut } from '../shortcut/Shortcut'
+import { I18n } from '../i18n/I18n'
+import { ILang } from '../../interface/i18n/I18n'
+import { DeepPartial } from '../../interface/Common'
+
+interface IRegisterPayload {
+  contextMenu: ContextMenu
+  shortcut: Shortcut
+  i18n: I18n
+}
+
+export class Register {
+  public contextMenuList: (payload: IRegisterContextMenu[]) => void
+  public getContextMenuList: () => IRegisterContextMenu[]
+  public shortcutList: (payload: IRegisterShortcut[]) => void
+  public langMap: (locale: string, lang: DeepPartial<ILang>) => void
+
+  constructor(payload: IRegisterPayload) {
+    const { contextMenu, shortcut, i18n } = payload
+    this.contextMenuList = contextMenu.registerContextMenuList.bind(contextMenu)
+    this.getContextMenuList = contextMenu.getContextMenuList.bind(contextMenu)
+    this.shortcutList = shortcut.registerShortcutList.bind(shortcut)
+    this.langMap = i18n.registerLangMap.bind(i18n)
+  }
+}

package/src/editor/core/shortcut/Shortcut.ts

@@ -0,0 +1,80 @@
+import { IRegisterShortcut } from '../../interface/shortcut/Shortcut'
+import { richtextKeys } from './keys/richtextKeys'
+import { Command } from '../command/Command'
+import { Draw } from '../draw/Draw'
+import { isMod } from '../../utils/hotkey'
+import { titleKeys } from './keys/titleKeys'
+import { listKeys } from './keys/listKeys'
+
+export class Shortcut {
+  private command: Command
+  private globalShortcutList: IRegisterShortcut[]
+  private agentShortcutList: IRegisterShortcut[]
+
+  constructor(draw: Draw, command: Command) {
+    this.command = command
+    this.globalShortcutList = []
+    this.agentShortcutList = []
+    // 内部快捷键
+    this._addShortcutList([...richtextKeys, ...titleKeys, ...listKeys])
+    // 全局快捷键
+    this._addEvent()
+    // 编辑器快捷键
+    const agentDom = draw.getCursor().getAgentDom()
+    agentDom.addEventListener('keydown', this._agentKeydown.bind(this))
+  }
+
+  private _addEvent() {
+    document.addEventListener('keydown', this._globalKeydown)
+  }
+
+  public removeEvent() {
+    document.removeEventListener('keydown', this._globalKeydown)
+  }
+
+  private _addShortcutList(payload: IRegisterShortcut[]) {
+    for (let s = payload.length - 1; s >= 0; s--) {
+      const shortCut = payload[s]
+      if (shortCut.isGlobal) {
+        this.globalShortcutList.unshift(shortCut)
+      } else {
+        this.agentShortcutList.unshift(shortCut)
+      }
+    }
+  }
+
+  public registerShortcutList(payload: IRegisterShortcut[]) {
+    this._addShortcutList(payload)
+  }
+
+  private _globalKeydown = (evt: KeyboardEvent) => {
+    if (!this.globalShortcutList.length) return
+    this._execute(evt, this.globalShortcutList)
+  }
+
+  private _agentKeydown(evt: KeyboardEvent) {
+    if (!this.agentShortcutList.length) return
+    this._execute(evt, this.agentShortcutList)
+  }
+
+  private _execute(evt: KeyboardEvent, shortCutList: IRegisterShortcut[]) {
+    for (let s = 0; s < shortCutList.length; s++) {
+      const shortCut = shortCutList[s]
+      if (
+        (shortCut.mod
+          ? isMod(evt) === !!shortCut.mod
+          : evt.ctrlKey === !!shortCut.ctrl &&
+            evt.metaKey === !!shortCut.meta) &&
+        evt.shiftKey === !!shortCut.shift &&
+        evt.altKey === !!shortCut.alt &&
+        evt.key.toLowerCase() === shortCut.key.toLowerCase()
+      ) {
+        if (!shortCut.disable) {
+          shortCut?.callback?.(this.command)
+          evt.preventDefault()
+        }
+        break
+      }
+    }
+  }
+}

package/src/editor/core/shortcut/keys/listKeys.ts

@@ -0,0 +1,22 @@
+import { Command, ListStyle, ListType } from '../../..'
+import { KeyMap } from '../../../dataset/enum/KeyMap'
+import { IRegisterShortcut } from '../../../interface/shortcut/Shortcut'
+
+export const listKeys: IRegisterShortcut[] = [
+  {
+    key: KeyMap.I,
+    shift: true,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeList(ListType.UL, ListStyle.DISC)
+    }
+  },
+  {
+    key: KeyMap.U,
+    shift: true,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeList(ListType.OL)
+    }
+  }
+]

package/src/editor/core/shortcut/keys/richtextKeys.ts

@@ -0,0 +1,102 @@
+import { Command, RowFlex } from '../../..'
+import { KeyMap } from '../../../dataset/enum/KeyMap'
+import { IRegisterShortcut } from '../../../interface/shortcut/Shortcut'
+import { isApple } from '../../../utils/ua'
+
+export const richtextKeys: IRegisterShortcut[] = [
+  {
+    key: KeyMap.X,
+    ctrl: true,
+    shift: true,
+    callback: (command: Command) => {
+      command.executeStrikeout()
+    }
+  },
+  {
+    key: KeyMap.LEFT_BRACKET,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeSizeAdd()
+    }
+  },
+  {
+    key: KeyMap.RIGHT_BRACKET,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeSizeMinus()
+    }
+  },
+  {
+    key: KeyMap.B,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeBold()
+    }
+  },
+  {
+    key: KeyMap.I,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeItalic()
+    }
+  },
+  {
+    key: KeyMap.U,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeUnderline()
+    }
+  },
+  {
+    key: isApple ? KeyMap.COMMA : KeyMap.RIGHT_ANGLE_BRACKET,
+    mod: true,
+    shift: true,
+    callback: (command: Command) => {
+      command.executeSuperscript()
+    }
+  },
+  {
+    key: isApple ? KeyMap.PERIOD : KeyMap.LEFT_ANGLE_BRACKET,
+    mod: true,
+    shift: true,
+    callback: (command: Command) => {
+      command.executeSubscript()
+    }
+  },
+  {
+    key: KeyMap.L,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeRowFlex(RowFlex.LEFT)
+    }
+  },
+  {
+    key: KeyMap.E,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeRowFlex(RowFlex.CENTER)
+    }
+  },
+  {
+    key: KeyMap.R,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeRowFlex(RowFlex.RIGHT)
+    }
+  },
+  {
+    key: KeyMap.J,
+    mod: true,
+    callback: (command: Command) => {
+      command.executeRowFlex(RowFlex.ALIGNMENT)
+    }
+  },
+  {
+    key: KeyMap.J,
+    mod: true,
+    shift: true,
+    callback: (command: Command) => {
+      command.executeRowFlex(RowFlex.JUSTIFY)
+    }
+  }
+]

package/src/editor/core/shortcut/keys/titleKeys.ts

@@ -0,0 +1,62 @@
+import { Command, TitleLevel } from '../../..'
+import { KeyMap } from '../../../dataset/enum/KeyMap'
+import { IRegisterShortcut } from '../../../interface/shortcut/Shortcut'
+
+export const titleKeys: IRegisterShortcut[] = [
+  {
+    key: KeyMap.ZERO,
+    alt: true,
+    ctrl: true,
+    callback: (command: Command) => {
+      command.executeTitle(null)
+    }
+  },
+  {
+    key: KeyMap.ONE,
+    alt: true,
+    ctrl: true,
+    callback: (command: Command) => {
+      command.executeTitle(TitleLevel.FIRST)
+    }
+  },
+  {
+    key: KeyMap.TWO,
+    alt: true,
+    ctrl: true,
+    callback: (command: Command) => {
+      command.executeTitle(TitleLevel.SECOND)
+    }
+  },
+  {
+    key: KeyMap.THREE,
+    alt: true,
+    ctrl: true,
+    callback: (command: Command) => {
+      command.executeTitle(TitleLevel.THIRD)
+    }
+  },
+  {
+    key: KeyMap.FOUR,
+    alt: true,
+    ctrl: true,
+    callback: (command: Command) => {
+      command.executeTitle(TitleLevel.FOURTH)
+    }
+  },
+  {
+    key: KeyMap.FIVE,
+    alt: true,
+    ctrl: true,
+    callback: (command: Command) => {
+      command.executeTitle(TitleLevel.FIFTH)
+    }
+  },
+  {
+    key: KeyMap.SIX,
+    alt: true,
+    ctrl: true,
+    callback: (command: Command) => {
+      command.executeTitle(TitleLevel.SIXTH)
+    }
+  }
+]

package/src/editor/core/worker/WorkerManager.ts

@@ -0,0 +1,96 @@
+import { version } from '../../../../package.json'
+import { Draw } from '../draw/Draw'
+import WordCountWorker from './works/wordCount?worker&inline'
+import CatalogWorker from './works/catalog?worker&inline'
+import GroupWorker from './works/group?worker&inline'
+import ValueWorker from './works/value?worker&inline'
+import { ICatalog } from '../../interface/Catalog'
+import { IEditorResult } from '../../interface/Editor'
+import { IGetValueOption } from '../../interface/Draw'
+import { deepClone } from '../../utils'
+
+export class WorkerManager {
+  private draw: Draw
+  private wordCountWorker: Worker
+  private catalogWorker: Worker
+  private groupWorker: Worker
+  private valueWorker: Worker
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.wordCountWorker = new WordCountWorker()
+    this.catalogWorker = new CatalogWorker()
+    this.groupWorker = new GroupWorker()
+    this.valueWorker = new ValueWorker()
+  }
+
+  public getWordCount(): Promise<number> {
+    return new Promise((resolve, reject) => {
+      this.wordCountWorker.onmessage = evt => {
+        resolve(evt.data)
+      }
+
+      this.wordCountWorker.onerror = evt => {
+        reject(evt)
+      }
+
+      const elementList = this.draw.getOriginalMainElementList()
+      this.wordCountWorker.postMessage(elementList)
+    })
+  }
+
+  public getCatalog(): Promise<ICatalog | null> {
+    return new Promise((resolve, reject) => {
+      this.catalogWorker.onmessage = evt => {
+        resolve(evt.data)
+      }
+
+      this.catalogWorker.onerror = evt => {
+        reject(evt)
+      }
+
+      const elementList = this.draw.getOriginalMainElementList()
+      const positionList = this.draw.getPosition().getOriginalMainPositionList()
+      this.catalogWorker.postMessage({
+        elementList,
+        positionList
+      })
+    })
+  }
+
+  public getGroupIds(): Promise<string[]> {
+    return new Promise((resolve, reject) => {
+      this.groupWorker.onmessage = evt => {
+        resolve(evt.data)
+      }
+
+      this.groupWorker.onerror = evt => {
+        reject(evt)
+      }
+
+      const elementList = this.draw.getOriginalMainElementList()
+      this.groupWorker.postMessage(elementList)
+    })
+  }
+
+  public getValue(options?: IGetValueOption): Promise<IEditorResult> {
+    return new Promise((resolve, reject) => {
+      this.valueWorker.onmessage = evt => {
+        resolve({
+          version,
+          data: evt.data,
+          options: deepClone(this.draw.getOptions())
+        })
+      }
+
+      this.valueWorker.onerror = evt => {
+        reject(evt)
+      }
+
+      this.valueWorker.postMessage({
+        data: this.draw.getOriginValue(options),
+        options
+      })
+    })
+  }
+}

package/src/editor/core/worker/works/catalog.ts

@@ -0,0 +1,189 @@
+import { ICatalog, ICatalogItem } from '../../../interface/Catalog'
+import { IElement, IElementPosition } from '../../../interface/Element'
+
+interface IGetCatalogPayload {
+  elementList: IElement[]
+  positionList: IElementPosition[]
+}
+
+type ICatalogElement = IElement & {
+  pageNo: number
+}
+
+enum ElementType {
+  TEXT = 'text',
+  IMAGE = 'image',
+  TABLE = 'table',
+  HYPERLINK = 'hyperlink',
+  SUPERSCRIPT = 'superscript',
+  SUBSCRIPT = 'subscript',
+  SEPARATOR = 'separator',
+  PAGE_BREAK = 'pageBreak',
+  CONTROL = 'control',
+  CHECKBOX = 'checkbox',
+  RADIO = 'radio',
+  LATEX = 'latex',
+  TAB = 'tab',
+  DATE = 'date',
+  BLOCK = 'block',
+  TITLE = 'title',
+  AREA = 'area',
+  LIST = 'list',
+  LABEL = 'label'
+}
+
+enum TitleLevel {
+  FIRST = 'first',
+  SECOND = 'second',
+  THIRD = 'third',
+  FOURTH = 'fourth',
+  FIFTH = 'fifth',
+  SIXTH = 'sixth'
+}
+
+const titleOrderNumberMapping: Record<TitleLevel, number> = {
+  [TitleLevel.FIRST]: 1,
+  [TitleLevel.SECOND]: 2,
+  [TitleLevel.THIRD]: 3,
+  [TitleLevel.FOURTH]: 4,
+  [TitleLevel.FIFTH]: 5,
+  [TitleLevel.SIXTH]: 6
+}
+
+const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
+  ElementType.TEXT,
+  ElementType.HYPERLINK,
+  ElementType.SUBSCRIPT,
+  ElementType.SUPERSCRIPT,
+  ElementType.CONTROL,
+  ElementType.DATE,
+  ElementType.LABEL
+]
+
+const ZERO = '\u200B'
+
+function isTextLikeElement(element: IElement): boolean {
+  return !element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type)
+}
+
+function getCatalog(payload: IGetCatalogPayload): ICatalog | null {
+  const { elementList, positionList } = payload
+  // 筛选标题
+  const titleElementList: ICatalogElement[] = []
+  let t = 0
+  while (t < elementList.length) {
+    const element = elementList[t]
+    const getElementInfo = (
+      element: IElement,
+      elementList: IElement[],
+      position: number
+    ) => {
+      const titleId = element.titleId
+      const level = element.level
+      const titleElement: ICatalogElement = {
+        type: ElementType.TITLE,
+        value: '',
+        level,
+        titleId,
+        pageNo: positionList[t].pageNo
+      }
+      const valueList: IElement[] = []
+      while (position < elementList.length) {
+        const titleE = elementList[position]
+        if (titleId !== titleE.titleId) {
+          position--
+          break
+        }
+        valueList.push(titleE)
+        position++
+      }
+      titleElement.value = valueList
+        .filter(el => isTextLikeElement(el))
+        .map(el => el.value)
+        .join('')
+        .replace(new RegExp(ZERO, 'g'), '')
+      return { position, titleElement }
+    }
+    if (element.titleId) {
+      const { position, titleElement } = getElementInfo(element, elementList, t)
+      t = position
+      titleElementList.push(titleElement)
+    }
+    if (element.type === ElementType.TABLE) {
+      const trList = element.trList!
+      for (let r = 0; r < trList.length; r++) {
+        const tr = trList[r]
+        for (let d = 0; d < tr.tdList.length; d++) {
+          const td = tr.tdList[d]
+          const value = td.value
+          if (value.length > 1) {
+            let index = 1
+            while (index < value.length) {
+              if (value[index]?.titleId) {
+                const { titleElement, position } = getElementInfo(
+                  value[index],
+                  value,
+                  index
+                )
+                titleElementList.push(titleElement)
+                index = position
+              }
+              index++
+            }
+          }
+        }
+      }
+    }
+    t++
+  }
+  if (!titleElementList.length) return null
+  // 查找到比最新元素大的标题时终止
+  const recursiveInsert = (
+    title: ICatalogElement,
+    catalogItem: ICatalogItem
+  ) => {
+    const subCatalogItem =
+      catalogItem.subCatalog[catalogItem.subCatalog.length - 1]
+    const catalogItemLevel = titleOrderNumberMapping[subCatalogItem?.level]
+    const titleLevel = titleOrderNumberMapping[title.level!]
+    if (subCatalogItem && titleLevel > catalogItemLevel) {
+      recursiveInsert(title, subCatalogItem)
+    } else {
+      catalogItem.subCatalog.push({
+        id: title.titleId!,
+        name: title.value,
+        level: title.level!,
+        pageNo: title.pageNo,
+        subCatalog: []
+      })
+    }
+  }
+  // 循环标题组
+  // 如果当前列表级别小于标题组最新标题级别：则递归查找最小级别并追加
+  // 如果大于：则直接追加至当前标题组
+  const catalog: ICatalog = []
+  for (let e = 0; e < titleElementList.length; e++) {
+    const title = titleElementList[e]
+    const catalogItem = catalog[catalog.length - 1]
+    const catalogItemLevel = titleOrderNumberMapping[catalogItem?.level]
+    const titleLevel = titleOrderNumberMapping[title.level!]
+    if (catalogItem && titleLevel > catalogItemLevel) {
+      recursiveInsert(title, catalogItem)
+    } else {
+      catalog.push({
+        id: title.titleId!,
+        name: title.value,
+        level: title.level!,
+        pageNo: title.pageNo,
+        subCatalog: []
+      })
+    }
+  }
+  return catalog
+}
+
+onmessage = evt => {
+  const payload = <IGetCatalogPayload>evt.data
+  const catalog = getCatalog(payload)
+  postMessage(catalog)
+}

package/src/editor/core/worker/works/group.ts

@@ -0,0 +1,34 @@
+import { IElement } from '../../../interface/Element'
+
+enum ElementType {
+  TABLE = 'table'
+}
+
+function getGroupIds(elementList: IElement[]): string[] {
+  const groupIds: string[] = []
+  for (const element of elementList) {
+    if (element.type === ElementType.TABLE) {
+      const trList = element.trList!
+      for (let r = 0; r < trList.length; r++) {
+        const tr = trList[r]
+        for (let d = 0; d < tr.tdList.length; d++) {
+          const td = tr.tdList[d]
+          groupIds.push(...getGroupIds(td.value))
+        }
+      }
+    }
+    if (!element.groupIds) continue
+    for (const groupId of element.groupIds) {
+      if (!groupIds.includes(groupId)) {
+        groupIds.push(groupId)
+      }
+    }
+  }
+  return groupIds
+}
+
+onmessage = evt => {
+  const elementList = <IElement[]>evt.data
+  const groupIds = getGroupIds(elementList)
+  postMessage(groupIds)
+}

package/src/editor/core/worker/works/value.ts

@@ -0,0 +1,32 @@
+import { IGetValueOption } from '../../../interface/Draw'
+import { IEditorData } from '../../../interface/Editor'
+import { zipElementList } from '../../../utils/element'
+
+interface IGetValueWorkerOption {
+  data: Required<IEditorData>
+  options: IGetValueOption
+}
+
+onmessage = evt => {
+  const payload = <IGetValueWorkerOption>evt.data
+  const { options, data } = payload
+  const { extraPickAttrs = [] } = options || {}
+
+  const editorData: IEditorData = {
+    header: zipElementList(data.header, {
+      extraPickAttrs,
+      isClone: false
+    }),
+    main: zipElementList(data.main, {
+      extraPickAttrs,
+      isClassifyArea: true,
+      isClone: false
+    }),
+    footer: zipElementList(data.footer, {
+      extraPickAttrs,
+      isClone: false
+    })
+  }
+
+  postMessage(editorData)
+}