editor-svg 1.0.0

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

@@ -0,0 +1,132 @@
+import { IElement } from '../../../interface/Element'
+
+enum ElementType {
+  TEXT = 'text',
+  TABLE = 'table',
+  HYPERLINK = 'hyperlink',
+  CONTROL = 'control'
+}
+
+enum ControlComponent {
+  VALUE = 'value'
+}
+
+const ZERO = '\u200B'
+const WRAP = '\n'
+
+function pickText(elementList: IElement[]): string {
+  let text = ''
+  let e = 0
+  while (e < elementList.length) {
+    const element = elementList[e]
+    // 表格、超链接递归处理
+    if (element.type === ElementType.TABLE) {
+      if (element.trList) {
+        for (let t = 0; t < element.trList.length; t++) {
+          const tr = element.trList[t]
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d]
+            text += pickText(td.value)
+          }
+        }
+      }
+    } else if (element.type === ElementType.HYPERLINK) {
+      const hyperlinkId = element.hyperlinkId
+      const valueList: IElement[] = []
+      while (e < elementList.length) {
+        const hyperlinkE = elementList[e]
+        if (hyperlinkId !== hyperlinkE.hyperlinkId) {
+          e--
+          break
+        }
+        delete hyperlinkE.type
+        valueList.push(hyperlinkE)
+        e++
+      }
+      text += pickText(valueList)
+    } else if (element.controlId) {
+      if (!element.control?.hide) {
+        const controlId = element.controlId
+        const valueList: IElement[] = []
+        while (e < elementList.length) {
+          const controlE = elementList[e]
+          if (controlId !== controlE.controlId) {
+            e--
+            break
+          }
+          if (controlE.controlComponent === ControlComponent.VALUE) {
+            delete controlE.controlId
+            valueList.push(controlE)
+          }
+          e++
+        }
+        text += pickText(valueList)
+      }
+    } else if (
+      (!element.type || element.type === ElementType.TEXT) &&
+      !element.area?.hide
+    ) {
+      text += element.value
+    }
+    e++
+  }
+  return text
+}
+
+function groupText(text: string): string[] {
+  const characterList: string[] = []
+  // 英文或数字整体分隔为一个字数
+  const numberReg = /[0-9]/
+  const letterReg = /[A-Za-z]/
+  const blankReg = /\s/
+  // for of 循环字符
+  let isPreLetter = false
+  let isPreNumber = false
+  let compositionText = ''
+  // 处理组合文本
+  function pushCompositionText() {
+    if (compositionText) {
+      characterList.push(compositionText)
+      compositionText = ''
+    }
+  }
+  for (const t of text) {
+    if (letterReg.test(t)) {
+      if (!isPreLetter) {
+        pushCompositionText()
+      }
+      compositionText += t
+      isPreLetter = true
+      isPreNumber = false
+    } else if (numberReg.test(t)) {
+      if (!isPreNumber) {
+        pushCompositionText()
+      }
+      compositionText += t
+      isPreLetter = false
+      isPreNumber = true
+    } else {
+      pushCompositionText()
+      isPreLetter = false
+      isPreNumber = false
+      if (!blankReg.test(t)) {
+        characterList.push(t)
+      }
+    }
+  }
+  pushCompositionText()
+  return characterList
+}
+
+onmessage = evt => {
+  const elementList = <IElement[]>evt.data
+  // 提取文本
+  const originText = pickText(elementList)
+  // 过滤文本
+  const filterText = originText
+    .replace(new RegExp(`^${ZERO}`), '')
+    .replace(new RegExp(ZERO, 'g'), WRAP)
+  // 文本分组
+  const textGroup = groupText(filterText)
+  postMessage(textGroup.length)
+}

package/src/editor/core/zone/Zone.ts

@@ -0,0 +1,183 @@
+import { EDITOR_PREFIX } from '../../dataset/constant/Editor'
+import { EditorZone } from '../../dataset/enum/Editor'
+import { IEditorOption } from '../../interface/Editor'
+import { nextTick } from '../../utils'
+import { Draw } from '../draw/Draw'
+import { I18n } from '../i18n/I18n'
+import { ZoneTip } from './ZoneTip'
+
+export class Zone {
+  private readonly INDICATOR_PADDING = 2
+  private readonly INDICATOR_TITLE_TRANSLATE = [20, 5]
+
+  private draw: Draw
+  private options: Required<IEditorOption>
+  private i18n: I18n
+  private container: HTMLDivElement
+
+  private currentZone: EditorZone
+  private indicatorContainer: HTMLDivElement | null
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.i18n = draw.getI18n()
+    this.options = draw.getOptions()
+    this.container = draw.getContainer()
+    this.currentZone = EditorZone.MAIN
+    this.indicatorContainer = null
+    // 区域提示
+    if (!this.options.zone.tipDisabled) {
+      new ZoneTip(draw, this)
+    }
+  }
+
+  public isHeaderActive(): boolean {
+    return this.getZone() === EditorZone.HEADER
+  }
+
+  public isMainActive(): boolean {
+    return this.getZone() === EditorZone.MAIN
+  }
+
+  public isFooterActive(): boolean {
+    return this.getZone() === EditorZone.FOOTER
+  }
+
+  public getZone(): EditorZone {
+    return this.currentZone
+  }
+
+  public setZone(payload: EditorZone) {
+    const { header, footer } = this.options
+    if (
+      (!header.editable && payload === EditorZone.HEADER) ||
+      (!footer.editable && payload === EditorZone.FOOTER)
+    ) {
+      return
+    }
+    if (this.currentZone === payload) return
+    this.currentZone = payload
+    this.draw.getRange().clearRange()
+    this.draw.render({
+      isSubmitHistory: false,
+      isSetCursor: false,
+      isCompute: false
+    })
+    // 指示器
+    this.drawZoneIndicator()
+    // 回调
+    nextTick(() => {
+      const listener = this.draw.getListener()
+      if (listener.zoneChange) {
+        listener.zoneChange(payload)
+      }
+      const eventBus = this.draw.getEventBus()
+      if (eventBus.isSubscribe('zoneChange')) {
+        eventBus.emit('zoneChange', payload)
+      }
+    })
+  }
+
+  public getZoneByY(y: number): EditorZone {
+    // 页眉底部距离页面顶部距离
+    const header = this.draw.getHeader()
+    const headerBottomY = header.getHeaderTop() + header.getHeight()
+    // 页脚上部距离页面顶部距离
+    const footer = this.draw.getFooter()
+    const pageHeight = this.draw.getHeight()
+    const footerTopY =
+      pageHeight - (footer.getFooterBottom() + footer.getHeight())
+    // 页眉：当前位置小于页眉底部位置
+    if (y < headerBottomY) {
+      return EditorZone.HEADER
+    }
+    // 页脚：当前位置大于页脚顶部位置
+    if (y > footerTopY) {
+      return EditorZone.FOOTER
+    }
+    return EditorZone.MAIN
+  }
+
+  public drawZoneIndicator() {
+    this._clearZoneIndicator()
+    if (!this.isHeaderActive() && !this.isFooterActive()) return
+    const { scale } = this.options
+    const isHeaderActive = this.isHeaderActive()
+    const [offsetX, offsetY] = this.INDICATOR_TITLE_TRANSLATE
+    const pageList = this.draw.getPageList()
+    const margins = this.draw.getMargins()
+    const innerWidth = this.draw.getInnerWidth()
+    const pageHeight = this.draw.getHeight()
+    const pageGap = this.draw.getPageGap()
+    const preY = pageHeight + pageGap
+    // 创建指示器容器
+    this.indicatorContainer = document.createElement('div')
+    this.indicatorContainer.classList.add(`${EDITOR_PREFIX}-zone-indicator`)
+    // 指示器位置
+    const header = this.draw.getHeader()
+    const footer = this.draw.getFooter()
+    const indicatorHeight = isHeaderActive
+      ? header.getHeight()
+      : footer.getHeight()
+    const indicatorTop = isHeaderActive
+      ? header.getHeaderTop()
+      : pageHeight - footer.getFooterBottom() - indicatorHeight
+    for (let p = 0; p < pageList.length; p++) {
+      const startY = preY * p + indicatorTop
+      const indicatorLeftX = margins[3] - this.INDICATOR_PADDING
+      const indicatorRightX = margins[3] + innerWidth + this.INDICATOR_PADDING
+      const indicatorTopY = isHeaderActive
+        ? startY - this.INDICATOR_PADDING
+        : startY + indicatorHeight + this.INDICATOR_PADDING
+      const indicatorBottomY = isHeaderActive
+        ? startY + indicatorHeight + this.INDICATOR_PADDING
+        : startY - this.INDICATOR_PADDING
+      // 标题
+      const indicatorTitle = document.createElement('div')
+      indicatorTitle.innerText = this.i18n.t(
+        `frame.${isHeaderActive ? 'header' : 'footer'}`
+      )
+      indicatorTitle.style.top = `${indicatorBottomY}px`
+      indicatorTitle.style.transform = `translate(${offsetX * scale}px, ${
+        offsetY * scale
+      }px) scale(${scale})`
+      this.indicatorContainer.append(indicatorTitle)
+
+      // 上边线
+      const lineTop = document.createElement('span')
+      lineTop.classList.add(`${EDITOR_PREFIX}-zone-indicator-border__top`)
+      lineTop.style.top = `${indicatorTopY}px`
+      lineTop.style.width = `${innerWidth}px`
+      lineTop.style.marginLeft = `${margins[3]}px`
+      this.indicatorContainer.append(lineTop)
+
+      // 左边线
+      const lineLeft = document.createElement('span')
+      lineLeft.classList.add(`${EDITOR_PREFIX}-zone-indicator-border__left`)
+      lineLeft.style.top = `${startY}px`
+      lineLeft.style.height = `${indicatorHeight}px`
+      lineLeft.style.left = `${indicatorLeftX}px`
+      this.indicatorContainer.append(lineLeft)
+
+      // 下边线
+      const lineBottom = document.createElement('span')
+      lineBottom.classList.add(`${EDITOR_PREFIX}-zone-indicator-border__bottom`)
+      lineBottom.style.top = `${indicatorBottomY}px`
+      this.indicatorContainer.append(lineBottom)
+
+      // 右边线
+      const lineRight = document.createElement('span')
+      lineRight.classList.add(`${EDITOR_PREFIX}-zone-indicator-border__right`)
+      lineRight.style.top = `${startY}px`
+      lineRight.style.height = `${indicatorHeight}px`
+      lineRight.style.left = `${indicatorRightX}px`
+      this.indicatorContainer.append(lineRight)
+    }
+    this.container.append(this.indicatorContainer)
+  }
+
+  private _clearZoneIndicator() {
+    this.indicatorContainer?.remove()
+    this.indicatorContainer = null
+  }
+}

package/src/editor/core/zone/ZoneTip.ts

@@ -0,0 +1,108 @@
+import { EDITOR_PREFIX } from '../../dataset/constant/Editor'
+import { EditorZone } from '../../dataset/enum/Editor'
+import { throttle } from '../../utils'
+import { Draw } from '../draw/Draw'
+import { I18n } from '../i18n/I18n'
+import { Zone } from './Zone'
+
+export class ZoneTip {
+  private draw: Draw
+  private zone: Zone
+  private i18n: I18n
+  private container: HTMLDivElement
+  private pageContainer: HTMLDivElement
+
+  private isDisableMouseMove: boolean
+  private tipContainer: HTMLDivElement
+  private tipContent: HTMLSpanElement
+  private currentMoveZone: EditorZone | undefined
+
+  constructor(draw: Draw, zone: Zone) {
+    this.draw = draw
+    this.zone = zone
+    this.i18n = draw.getI18n()
+    this.container = draw.getContainer()
+    this.pageContainer = draw.getPageContainer()
+
+    const { tipContainer, tipContent } = this._drawZoneTip()
+    this.tipContainer = tipContainer
+    this.tipContent = tipContent
+    this.isDisableMouseMove = true
+    this.currentMoveZone = EditorZone.MAIN
+    // 监听区域
+    const watchZones: EditorZone[] = []
+    const { header, footer } = draw.getOptions()
+    if (!header.disabled) {
+      watchZones.push(EditorZone.HEADER)
+    }
+    if (!footer.disabled) {
+      watchZones.push(EditorZone.FOOTER)
+    }
+    if (watchZones.length) {
+      this._watchMouseMoveZoneChange(watchZones)
+    }
+  }
+
+  private _watchMouseMoveZoneChange(watchZones: EditorZone[]) {
+    this.pageContainer.addEventListener(
+      'mousemove',
+      throttle((evt: MouseEvent) => {
+        if (this.isDisableMouseMove || !this.draw.getIsPagingMode()) return
+        if (!evt.offsetY) return
+        if (evt.target instanceof HTMLCanvasElement) {
+          const mousemoveZone = this.zone.getZoneByY(evt.offsetY)
+          if (!watchZones.includes(mousemoveZone)) {
+            this._updateZoneTip(false)
+            return
+          }
+          this.currentMoveZone = mousemoveZone
+          // 激活区域是正文，移动区域是页眉、页脚时绘制
+          this._updateZoneTip(
+            this.zone.getZone() === EditorZone.MAIN &&
+              (mousemoveZone === EditorZone.HEADER ||
+                mousemoveZone === EditorZone.FOOTER),
+            evt.x,
+            evt.y
+          )
+        } else {
+          this._updateZoneTip(false)
+        }
+      }, 250)
+    )
+    // mouseenter后mousemove有效，避免因节流导致的mouseleave后继续执行逻辑
+    this.pageContainer.addEventListener('mouseenter', () => {
+      this.isDisableMouseMove = false
+    })
+    this.pageContainer.addEventListener('mouseleave', () => {
+      this.isDisableMouseMove = true
+      this._updateZoneTip(false)
+    })
+  }
+
+  private _drawZoneTip() {
+    const tipContainer = document.createElement('div')
+    tipContainer.classList.add(`${EDITOR_PREFIX}-zone-tip`)
+    const tipContent = document.createElement('span')
+    tipContainer.append(tipContent)
+    this.container.append(tipContainer)
+    return {
+      tipContainer,
+      tipContent
+    }
+  }
+
+  private _updateZoneTip(visible: boolean, left?: number, top?: number) {
+    if (visible) {
+      this.tipContainer.classList.add('show')
+      this.tipContainer.style.left = `${left}px`
+      this.tipContainer.style.top = `${top}px`
+      this.tipContent.innerText = this.i18n.t(
+        `zone.${
+          this.currentMoveZone === EditorZone.HEADER ? 'headerTip' : 'footerTip'
+        }`
+      )
+    } else {
+      this.tipContainer.classList.remove('show')
+    }
+  }
+}

package/src/editor/dataset/constant/Background.ts

@@ -0,0 +1,10 @@
+import { IBackgroundOption } from '../../interface/Background'
+import { BackgroundRepeat, BackgroundSize } from '../enum/Background'
+
+export const defaultBackground: Readonly<Required<IBackgroundOption>> = {
+  color: '#FFFFFF',
+  image: '',
+  size: BackgroundSize.COVER,
+  repeat: BackgroundRepeat.NO_REPEAT,
+  applyPageNumbers: []
+}

package/src/editor/dataset/constant/Badge.ts

@@ -0,0 +1,6 @@
+import { IBadgeOption } from '../../interface/Badge'
+
+export const defaultBadgeOption: Readonly<Required<IBadgeOption>> = {
+  top: 0,
+  left: 5
+}

package/src/editor/dataset/constant/Checkbox.ts

@@ -0,0 +1,12 @@
+import { ICheckboxOption } from '../../interface/Checkbox'
+import { VerticalAlign } from '../enum/VerticalAlign'
+
+export const defaultCheckboxOption: Readonly<Required<ICheckboxOption>> = {
+  width: 14,
+  height: 14,
+  gap: 5,
+  lineWidth: 1,
+  fillStyle: '#5175f4',
+  strokeStyle: '#ffffff',
+  verticalAlign: VerticalAlign.BOTTOM
+}

package/src/editor/dataset/constant/Common.ts

@@ -0,0 +1,44 @@
+import { MaxHeightRatio } from '../enum/Common'
+
+export const ZERO = '\u200B'
+export const WRAP = '\n'
+export const HORIZON_TAB = '\t'
+export const NBSP = '\u0020'
+export const NON_BREAKING_SPACE = ' '
+export const PUNCTUATION_LIST = [
+  '·',
+  '、',
+  ':',
+  '：',
+  ',',
+  '，',
+  '.',
+  '。',
+  ';',
+  '；',
+  '?',
+  '？',
+  '!',
+  '！'
+]
+
+export const maxHeightRadioMapping: Record<MaxHeightRatio, number> = {
+  [MaxHeightRatio.HALF]: 1 / 2,
+  [MaxHeightRatio.ONE_THIRD]: 1 / 3,
+  [MaxHeightRatio.QUARTER]: 1 / 4
+}
+
+export const LETTER_CLASS = {
+  ENGLISH: 'A-Za-z',
+  SPANISH: 'A-Za-zÁÉÍÓÚáéíóúÑñÜü',
+  FRENCH: 'A-Za-zÀÂÇàâçÉéÈèÊêËëÎîÏïÔôÙùÛûŸÿ',
+  GERMAN: 'A-Za-zÄäÖöÜüß',
+  RUSSIAN: 'А-Яа-яЁё',
+  PORTUGUESE: 'A-Za-zÁÉÍÓÚáéíóúÃÕãõÇç',
+  ITALIAN: 'A-Za-zÀàÈèÉéÌìÍíÎîÓóÒòÙù',
+  DUTCH: 'A-Za-zÀàÁáÂâÄäÈèÉéÊêËëÌìÍíÎîÏïÓóÒòÔôÖöÙùÛûÜü',
+  SWEDISH: 'A-Za-zÅåÄäÖö',
+  GREEK: 'ΑαΒβΓγΔδΕεΖζΗηΘθΙιΚκΛλΜμΝνΞξΟοΠπΡρΣσςΤτΥυΦφΧχΨψΩω'
+}
+
+export const METRICS_BASIS_TEXT = '中'

package/src/editor/dataset/constant/ContextMenu.ts

@@ -0,0 +1,61 @@
+export const NAME_PLACEHOLDER = {
+  SELECTED_TEXT: '%s'
+}
+
+export const INTERNAL_CONTEXT_MENU_KEY = {
+  GLOBAL: {
+    CUT: 'globalCut',
+    COPY: 'globalCopy',
+    PASTE: 'globalPaste',
+    SELECT_ALL: 'globalSelectAll',
+    PRINT: 'globalPrint'
+  },
+  CONTROL: {
+    DELETE: 'controlDelete'
+  },
+  HYPERLINK: {
+    DELETE: 'hyperlinkDelete',
+    CANCEL: 'hyperlinkCancel',
+    EDIT: 'hyperlinkEdit'
+  },
+  IMAGE: {
+    CHANGE: 'imageChange',
+    SAVE_AS: 'imageSaveAs',
+    TEXT_WRAP: 'imageTextWrap',
+    TEXT_WRAP_EMBED: 'imageTextWrapEmbed',
+    TEXT_WRAP_UP_DOWN: 'imageTextWrapUpDown',
+    TEXT_WRAP_SURROUND: 'imageTextWrapSurround',
+    TEXT_WRAP_FLOAT_TOP: 'imageTextWrapFloatTop',
+    TEXT_WRAP_FLOAT_BOTTOM: 'imageTextWrapFloatBottom'
+  },
+  TABLE: {
+    BORDER: 'border',
+    BORDER_ALL: 'tableBorderAll',
+    BORDER_EMPTY: 'tableBorderEmpty',
+    BORDER_DASH: 'tableBorderDash',
+    BORDER_EXTERNAL: 'tableBorderExternal',
+    BORDER_INTERNAL: 'tableBorderInternal',
+    BORDER_TD: 'tableBorderTd',
+    BORDER_TD_TOP: 'tableBorderTdTop',
+    BORDER_TD_RIGHT: 'tableBorderTdRight',
+    BORDER_TD_BOTTOM: 'tableBorderTdBottom',
+    BORDER_TD_LEFT: 'tableBorderTdLeft',
+    BORDER_TD_FORWARD: 'tableBorderTdForward',
+    BORDER_TD_BACK: 'tableBorderTdBack',
+    VERTICAL_ALIGN: 'tableVerticalAlign',
+    VERTICAL_ALIGN_TOP: 'tableVerticalAlignTop',
+    VERTICAL_ALIGN_MIDDLE: 'tableVerticalAlignMiddle',
+    VERTICAL_ALIGN_BOTTOM: 'tableVerticalAlignBottom',
+    INSERT_ROW_COL: 'tableInsertRowCol',
+    INSERT_TOP_ROW: 'tableInsertTopRow',
+    INSERT_BOTTOM_ROW: 'tableInsertBottomRow',
+    INSERT_LEFT_COL: 'tableInsertLeftCol',
+    INSERT_RIGHT_COL: 'tableInsertRightCol',
+    DELETE_ROW_COL: 'tableDeleteRowCol',
+    DELETE_ROW: 'tableDeleteRow',
+    DELETE_COL: 'tableDeleteCol',
+    DELETE_TABLE: 'tableDeleteTable',
+    MERGE_CELL: 'tableMergeCell',
+    CANCEL_MERGE_CELL: 'tableCancelMergeCell'
+  }
+}

package/src/editor/dataset/constant/Control.ts

@@ -0,0 +1,14 @@
+import { IControlOption } from '../../interface/Control'
+
+export const defaultControlOption: Readonly<Required<IControlOption>> = {
+  placeholderColor: '#9c9b9b',
+  bracketColor: '#000000',
+  prefix: '{',
+  postfix: '}',
+  borderWidth: 1,
+  borderColor: '#000000',
+  activeBackgroundColor: '',
+  disabledBackgroundColor: '',
+  existValueBackgroundColor: '',
+  noValueBackgroundColor: ''
+}

package/src/editor/dataset/constant/Cursor.ts

@@ -0,0 +1,11 @@
+import { ICursorOption } from '../../interface/Cursor'
+
+export const CURSOR_AGENT_OFFSET_HEIGHT = 12
+
+export const defaultCursorOption: Readonly<Required<ICursorOption>> = {
+  width: 1,
+  color: '#000000',
+  dragWidth: 2,
+  dragColor: '#0000FF',
+  dragFloatImageDisabled: false
+}

package/src/editor/dataset/constant/Editor.ts

@@ -0,0 +1,19 @@
+import { DeepRequired } from '../../interface/Common'
+import { IModeRule } from '../../interface/Editor'
+
+export const EDITOR_COMPONENT = 'editor-component'
+export const EDITOR_PREFIX = 'ce'
+export const EDITOR_CLIPBOARD = `${EDITOR_PREFIX}-clipboard`
+
+export const defaultModeRuleOption: Readonly<DeepRequired<IModeRule>> = {
+  print: {
+    imagePreviewerDisabled: false,
+    backgroundDisabled: false
+  },
+  readonly: {
+    imagePreviewerDisabled: false
+  },
+  form: {
+    controlDeletableDisabled: false
+  }
+}