editor-svg 1.0.0

package/src/editor/utils/hotkey.ts

@@ -0,0 +1,5 @@
+import { isApple } from './ua'
+
+export function isMod(evt: KeyboardEvent | MouseEvent) {
+  return isApple ? evt.metaKey : evt.ctrlKey
+}

package/src/editor/utils/index.ts

@@ -0,0 +1,445 @@
+import { UNICODE_SYMBOL_REG } from '../dataset/constant/Regular'
+import { IElementFillRect } from '../interface/Element'
+
+export function debounce<T extends unknown[]>(
+  func: (...arg: T) => unknown,
+  delay: number
+) {
+  let timer: number
+  return function (this: unknown, ...args: T) {
+    if (timer) {
+      window.clearTimeout(timer)
+    }
+    timer = window.setTimeout(() => {
+      func.apply(this, args)
+    }, delay)
+  }
+}
+
+export function throttle<T extends unknown[]>(
+  func: (...arg: T) => unknown,
+  delay: number
+) {
+  let lastExecTime = 0
+  let timer: number
+  return function (this: unknown, ...args: T) {
+    const currentTime = Date.now()
+    if (currentTime - lastExecTime >= delay) {
+      window.clearTimeout(timer)
+      func.apply(this, args)
+      lastExecTime = currentTime
+    } else {
+      window.clearTimeout(timer)
+      timer = window.setTimeout(() => {
+        func.apply(this, args)
+        lastExecTime = currentTime
+      }, delay)
+    }
+  }
+}
+
+export function deepCloneOmitKeys<T, K>(obj: T, omitKeys: (keyof K)[]): T {
+  if (!obj || typeof obj !== 'object') {
+    return obj
+  }
+  let newObj = {} as T
+  if (Array.isArray(obj)) {
+    newObj = obj.map(item => deepCloneOmitKeys(item, omitKeys)) as T
+  } else {
+    // prettier-ignore
+    (Object.keys(obj) as (keyof T)[]).forEach(key => {
+      if (omitKeys.includes(key as unknown as keyof K)) return
+      newObj[key] = deepCloneOmitKeys(obj[key] , omitKeys)
+    })
+  }
+  return newObj
+}
+
+export function deepClone<T>(obj: T): T {
+  if (typeof structuredClone === 'function') {
+    return structuredClone(obj)
+  }
+  if (!obj || typeof obj !== 'object') {
+    return obj
+  }
+  let newObj = {} as T
+  if (Array.isArray(obj)) {
+    newObj = obj.map(item => deepClone(item)) as T
+  } else {
+    // prettier-ignore
+    (Object.keys(obj) as (keyof T)[]).forEach(key => {
+      newObj[key] = deepClone(obj[key])
+    })
+  }
+  return newObj
+}
+
+export function isBody(node: Element): boolean {
+  return node && node.nodeType === 1 && node.tagName.toLowerCase() === 'body'
+}
+
+export function findParent(
+  node: Element,
+  filterFn: Function,
+  includeSelf: boolean
+) {
+  if (node && !isBody(node)) {
+    node = includeSelf ? node : (node.parentNode as Element)
+    while (node) {
+      if (!filterFn || filterFn(node) || isBody(node)) {
+        return filterFn && !filterFn(node) && isBody(node) ? null : node
+      }
+      node = node.parentNode as Element
+    }
+  }
+  return null
+}
+
+export function getUUID(): string {
+  function S4(): string {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+  }
+  return (
+    S4() +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    '-' +
+    S4() +
+    S4() +
+    S4()
+  )
+}
+
+export function splitText(text: string): string[] {
+  const data: string[] = []
+  if (Intl.Segmenter) {
+    const segmenter = new Intl.Segmenter()
+    const segments = segmenter.segment(text)
+    for (const { segment } of segments) {
+      data.push(segment)
+    }
+  } else {
+    const symbolMap = new Map<number, string>()
+    for (const match of text.matchAll(UNICODE_SYMBOL_REG)) {
+      symbolMap.set(match.index!, match[0])
+    }
+    let t = 0
+    while (t < text.length) {
+      const symbol = symbolMap.get(t)
+      if (symbol) {
+        data.push(symbol)
+        t += symbol.length
+      } else {
+        data.push(text[t])
+        t++
+      }
+    }
+  }
+  return data
+}
+
+export function downloadFile(href: string, fileName: string) {
+  const a = document.createElement('a')
+  a.href = href
+  a.download = fileName
+  a.click()
+}
+
+export function threeClick(dom: HTMLElement, fn: (evt: MouseEvent) => void) {
+  nClickEvent(3, dom, fn)
+}
+
+function nClickEvent(
+  n: number,
+  dom: HTMLElement,
+  fn: (evt: MouseEvent) => void
+) {
+  let count = 0
+  let lastTime = 0
+
+  const handler = function (evt: MouseEvent) {
+    const currentTime = new Date().getTime()
+    count = currentTime - lastTime < 300 ? count + 1 : 0
+    lastTime = new Date().getTime()
+    if (count >= n - 1) {
+      fn(evt)
+      count = 0
+    }
+  }
+
+  dom.addEventListener('click', handler)
+}
+
+export function isObject(type: unknown): type is Record<string, unknown> {
+  return Object.prototype.toString.call(type) === '[object Object]'
+}
+
+export function isArray(type: unknown): type is Array<unknown> {
+  return Array.isArray(type)
+}
+
+export function isNumber(type: unknown): type is number {
+  return Object.prototype.toString.call(type) === '[object Number]'
+}
+
+export function isString(type: unknown): type is string {
+  return Object.prototype.toString.call(type) === '[object String]'
+}
+
+export function mergeObject<T>(source: T, target: T): T {
+  if (isObject(source) && isObject(target)) {
+    const objectTarget = <Record<string, unknown>>target
+    for (const [key, val] of Object.entries(source)) {
+      if (!objectTarget[key]) {
+        objectTarget[key] = val
+      } else {
+        objectTarget[key] = mergeObject(val, objectTarget[key])
+      }
+    }
+  } else if (isArray(source) && isArray(target)) {
+    target.push(...source)
+  }
+  return target
+}
+
+export function nextTick(fn: Function) {
+  setTimeout(() => {
+    fn()
+  }, 0)
+}
+
+export function convertNumberToChinese(num: number) {
+  const chineseNum = [
+    '零',
+    '一',
+    '二',
+    '三',
+    '四',
+    '五',
+    '六',
+    '七',
+    '八',
+    '九'
+  ]
+  const chineseUnit = [
+    '',
+    '十',
+    '百',
+    '千',
+    '万',
+    '十',
+    '百',
+    '千',
+    '亿',
+    '十',
+    '百',
+    '千',
+    '万',
+    '十',
+    '百',
+    '千',
+    '亿'
+  ]
+  if (!num || isNaN(num)) return '零'
+  const numStr = num.toString().split('')
+  let result = ''
+  for (let i = 0; i < numStr.length; i++) {
+    const desIndex = numStr.length - 1 - i
+    result = `${chineseUnit[i]}${result}`
+    result = `${chineseNum[Number(numStr[desIndex])]}${result}`
+  }
+  result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十')
+  result = result.replace(/零+/g, '零')
+  result = result.replace(/零亿/g, '亿').replace(/零万/g, '万')
+  result = result.replace(/亿万/g, '亿')
+  result = result.replace(/零+$/, '')
+  result = result.replace(/^一十/g, '十')
+  return result
+}
+
+export function cloneProperty<T>(
+  properties: (keyof T)[],
+  sourceElement: T,
+  targetElement: T
+) {
+  for (let i = 0; i < properties.length; i++) {
+    const property = properties[i]
+    const value = sourceElement[property]
+    if (value !== undefined) {
+      targetElement[property] = value
+    } else {
+      delete targetElement[property]
+    }
+  }
+}
+
+export function deleteProperty<T>(sourceKeys: T[], deleteKeys: T[]) {
+  if (!deleteKeys.length || !sourceKeys.length) return
+  for (let i = sourceKeys.length - 1; i >= 0; i--) {
+    if (deleteKeys.includes(sourceKeys[i])) {
+      sourceKeys.splice(i, 1)
+    }
+  }
+}
+
+export function pickObject<T>(object: T, pickKeys: (keyof T)[]): T {
+  const newObject: T = <T>{}
+  for (const key in object) {
+    if (pickKeys.includes(key)) {
+      newObject[key] = object[key]
+    }
+  }
+  return newObject
+}
+
+export function omitObject<T>(object: T, omitKeys: (keyof T)[]): T {
+  const newObject: T = <T>{}
+  for (const key in object) {
+    if (!omitKeys.includes(key)) {
+      newObject[key] = object[key]
+    }
+  }
+  return newObject
+}
+
+export function convertStringToBase64(input: string) {
+  const encoder = new TextEncoder()
+  const data = encoder.encode(input)
+  const charArray = Array.from(data, byte => String.fromCharCode(byte))
+  const base64 = window.btoa(charArray.join(''))
+  return base64
+}
+
+export function findScrollContainer(element: HTMLElement) {
+  let parent = element.parentElement
+  while (parent) {
+    const style = window.getComputedStyle(parent)
+    const overflowY = style.getPropertyValue('overflow-y')
+    if (
+      parent.scrollHeight > parent.clientHeight &&
+      (overflowY === 'auto' || overflowY === 'scroll')
+    ) {
+      return parent
+    }
+    parent = parent.parentElement
+  }
+  return document.documentElement
+}
+
+export function isArrayEqual(arr1: unknown[], arr2: unknown[]): boolean {
+  if (arr1.length !== arr2.length) {
+    return false
+  }
+  return !arr1.some(item => !arr2.includes(item))
+}
+
+export function isObjectEqual(obj1: unknown, obj2: unknown): boolean {
+  if (!isObject(obj1) || !isObject(obj2)) return false
+  const obj1Keys = Object.keys(obj1)
+  const obj2Keys = Object.keys(obj2)
+  if (obj1Keys.length !== obj2Keys.length) {
+    return false
+  }
+  return !obj1Keys.some(key => obj2[key] !== obj1[key])
+}
+
+export function isRectIntersect(
+  rect1: IElementFillRect,
+  rect2: IElementFillRect
+): boolean {
+  const rect1Left = rect1.x
+  const rect1Right = rect1.x + rect1.width
+  const rect1Top = rect1.y
+  const rect1Bottom = rect1.y + rect1.height
+  const rect2Left = rect2.x
+  const rect2Right = rect2.x + rect2.width
+  const rect2Top = rect2.y
+  const rect2Bottom = rect2.y + rect2.height
+  if (
+    rect1Left > rect2Right ||
+    rect1Right < rect2Left ||
+    rect1Top > rect2Bottom ||
+    rect1Bottom < rect2Top
+  ) {
+    return false
+  }
+  return true
+}
+
+export function isNonValue(value: unknown): boolean {
+  return value === undefined || value === null
+}
+
+export function normalizeLineBreak(text: string): string {
+  return text.replace(/\r\n|\r/g, '\n')
+}
+
+// 支持正则的indexOf
+export function indexOf(
+  source: string,
+  search: string | RegExp,
+  fromIndex = 0
+): { index: number; length: number } {
+  const start = Math.max(0, Math.floor(fromIndex))
+
+  if (start >= source.length) {
+    if (typeof search === 'string' && search === '') {
+      return { index: source.length, length: 0 }
+    }
+    return { index: -1, length: 0 }
+  }
+
+  // 关键词匹配
+  if (typeof search === 'string') {
+    if (search === '') {
+      return { index: start, length: 0 }
+    }
+    const index = source.indexOf(search, start)
+    return index === -1
+      ? { index: -1, length: 0 }
+      : { index, length: search.length }
+  }
+
+  // 确保正则包含 "g" 才可以设置 lastIndex，从而从任意位置开始搜索
+  const originalFlags = search.flags
+  const flags = originalFlags.includes('g')
+    ? originalFlags
+    : originalFlags + 'g'
+  const re = new RegExp(search.source, flags)
+  re.lastIndex = start
+  const match = re.exec(source)
+  if (!match) {
+    return { index: -1, length: 0 }
+  }
+  return { index: match.index, length: match[0].length }
+}
+
+// 滚动到可视视野范围
+export function scrollIntoView(container: HTMLElement, selected: HTMLElement) {
+  if (!selected) {
+    container.scrollTop = 0
+    return
+  }
+  const offsetParents: HTMLElement[] = []
+  let pointer = <HTMLElement>selected.offsetParent
+  while (pointer && container !== pointer && container.contains(pointer)) {
+    offsetParents.push(pointer)
+    pointer = <HTMLElement>pointer.offsetParent
+  }
+  const top =
+    selected.offsetTop +
+    offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0)
+  const bottom = top + selected.offsetHeight
+  const viewRectTop = container.scrollTop
+  const viewRectBottom = viewRectTop + container.clientHeight
+  if (top < viewRectTop) {
+    container.scrollTop = top
+  } else if (bottom > viewRectBottom) {
+    container.scrollTop = bottom - container.clientHeight
+  }
+}

package/src/editor/utils/option.ts

@@ -0,0 +1,253 @@
+import { defaultBackground } from '../dataset/constant/Background'
+import { defaultCheckboxOption } from '../dataset/constant/Checkbox'
+import { LETTER_CLASS } from '../dataset/constant/Common'
+import { defaultControlOption } from '../dataset/constant/Control'
+import { defaultCursorOption } from '../dataset/constant/Cursor'
+import { defaultFooterOption } from '../dataset/constant/Footer'
+import { defaultGroupOption } from '../dataset/constant/Group'
+import { defaultHeaderOption } from '../dataset/constant/Header'
+import { defaultLabelOption } from '../dataset/constant/Label'
+import { defaultImgCaptionOption } from '../dataset/constant/ImgCaption'
+import { defaultLineBreak } from '../dataset/constant/LineBreak'
+import { defaultPageBreakOption } from '../dataset/constant/PageBreak'
+import { defaultPageNumberOption } from '../dataset/constant/PageNumber'
+import { defaultPlaceholderOption } from '../dataset/constant/Placeholder'
+import { defaultRadioOption } from '../dataset/constant/Radio'
+import { defaultSeparatorOption } from '../dataset/constant/Separator'
+import { defaultTableOption } from '../dataset/constant/Table'
+import { defaultTitleOption } from '../dataset/constant/Title'
+import { defaultWatermarkOption } from '../dataset/constant/Watermark'
+import { defaultZoneOption } from '../dataset/constant/Zone'
+import { defaultLineNumberOption } from '../dataset/constant/LineNumber'
+import { defaultListOption } from '../dataset/constant/List'
+import { IBackgroundOption } from '../interface/Background'
+import { ICheckboxOption } from '../interface/Checkbox'
+import { DeepRequired } from '../interface/Common'
+import { IControlOption } from '../interface/Control'
+import { ICursorOption } from '../interface/Cursor'
+import { IEditorOption, IModeRule } from '../interface/Editor'
+import { IFooter } from '../interface/Footer'
+import { IGroup } from '../interface/Group'
+import { IHeader } from '../interface/Header'
+import { ILabelOption } from '../interface/Label'
+import { IImgCaptionOption, IListOption } from '../interface/Element'
+import { ILineBreakOption } from '../interface/LineBreak'
+import { IPageBreak } from '../interface/PageBreak'
+import { IPageNumber } from '../interface/PageNumber'
+import { IPlaceholder } from '../interface/Placeholder'
+import { IRadioOption } from '../interface/Radio'
+import { ISeparatorOption } from '../interface/Separator'
+import { ITableOption } from '../interface/table/Table'
+import { ITitleOption } from '../interface/Title'
+import { IWatermark } from '../interface/Watermark'
+import { IZoneOption } from '../interface/Zone'
+import { ILineNumberOption } from '../interface/LineNumber'
+import { IPageBorderOption } from '../interface/PageBorder'
+import { defaultPageBorderOption } from '../dataset/constant/PageBorder'
+import {
+  EditorMode,
+  PageMode,
+  PaperDirection,
+  RenderMode,
+  WordBreak
+} from '../dataset/enum/Editor'
+import { defaultBadgeOption } from '../dataset/constant/Badge'
+import { IBadgeOption } from '../interface/Badge'
+import { defaultModeRuleOption } from '../dataset/constant/Editor'
+import { IGraffitiOption } from '../interface/Graffiti'
+import { defaultGraffitiOption } from '../dataset/constant/Graffiti'
+import { IWhiteSpaceOption } from '../interface/WhiteSpace'
+import { defaultWhiteSpaceOption } from '../dataset/constant/WhiteSpace'
+
+export function mergeOption(
+  options: IEditorOption = {}
+): DeepRequired<IEditorOption> {
+  const tableOptions: Required<ITableOption> = {
+    ...defaultTableOption,
+    ...options.table
+  }
+  const headerOptions: Required<IHeader> = {
+    ...defaultHeaderOption,
+    ...options.header
+  }
+  const footerOptions: Required<IFooter> = {
+    ...defaultFooterOption,
+    ...options.footer
+  }
+  const pageNumberOptions: Required<IPageNumber> = {
+    ...defaultPageNumberOption,
+    ...options.pageNumber
+  }
+  const waterMarkOptions: Required<IWatermark> = {
+    ...defaultWatermarkOption,
+    ...options.watermark
+  }
+  const controlOptions: Required<IControlOption> = {
+    ...defaultControlOption,
+    ...options.control
+  }
+  const checkboxOptions: Required<ICheckboxOption> = {
+    ...defaultCheckboxOption,
+    ...options.checkbox
+  }
+  const radioOptions: Required<IRadioOption> = {
+    ...defaultRadioOption,
+    ...options.radio
+  }
+  const cursorOptions: Required<ICursorOption> = {
+    ...defaultCursorOption,
+    ...options.cursor
+  }
+  const titleOptions: Required<ITitleOption> = {
+    ...defaultTitleOption,
+    ...options.title
+  }
+  const placeholderOptions: Required<IPlaceholder> = {
+    ...defaultPlaceholderOption,
+    ...options.placeholder
+  }
+  const groupOptions: Required<IGroup> = {
+    ...defaultGroupOption,
+    ...options.group
+  }
+  const pageBreakOptions: Required<IPageBreak> = {
+    ...defaultPageBreakOption,
+    ...options.pageBreak
+  }
+  const zoneOptions: Required<IZoneOption> = {
+    ...defaultZoneOption,
+    ...options.zone
+  }
+  const backgroundOptions: Required<IBackgroundOption> = {
+    ...defaultBackground,
+    ...options.background
+  }
+  const lineBreakOptions: Required<ILineBreakOption> = {
+    ...defaultLineBreak,
+    ...options.lineBreak
+  }
+  const whiteSpaceOptions: Required<IWhiteSpaceOption> = {
+    ...defaultWhiteSpaceOption,
+    ...options.whiteSpace
+  }
+  const separatorOptions: Required<ISeparatorOption> = {
+    ...defaultSeparatorOption,
+    ...options.separator
+  }
+  const lineNumberOptions: Required<ILineNumberOption> = {
+    ...defaultLineNumberOption,
+    ...options.lineNumber
+  }
+  const pageBorderOptions: Required<IPageBorderOption> = {
+    ...defaultPageBorderOption,
+    ...options.pageBorder
+  }
+  const badgeOptions: Required<IBadgeOption> = {
+    ...defaultBadgeOption,
+    ...options.badge
+  }
+  const graffitiOptions: Required<IGraffitiOption> = {
+    ...defaultGraffitiOption,
+    ...options.graffiti
+  }
+  const labelOptions: Required<ILabelOption> = {
+    ...defaultLabelOption,
+    ...options.label
+  }
+  const imgCaptionOptions: Required<IImgCaptionOption> = {
+    ...defaultImgCaptionOption,
+    ...options.imgCaption
+  }
+  const listOptions: Required<IListOption> = {
+    ...defaultListOption,
+    ...options.list
+  }
+  const modeRuleOption: DeepRequired<IModeRule> = {
+    print: {
+      ...defaultModeRuleOption.print,
+      ...options.modeRule?.print
+    },
+    readonly: {
+      ...defaultModeRuleOption.readonly,
+      ...options.modeRule?.readonly
+    },
+    form: {
+      ...defaultModeRuleOption.form,
+      ...options.modeRule?.form
+    }
+  }
+
+  return {
+    mode: EditorMode.EDIT,
+    locale: 'zhCN',
+    defaultType: 'TEXT',
+    defaultColor: '#000000',
+    defaultFont: 'Microsoft YaHei',
+    defaultSize: 16,
+    minSize: 5,
+    maxSize: 72,
+    defaultRowMargin: 1,
+    defaultBasicRowMarginHeight: 8,
+    defaultTabWidth: 32,
+    width: 794,
+    height: 1123,
+    scale: 1,
+    pageGap: 20,
+    underlineColor: '#000000',
+    strikeoutColor: '#FF0000',
+    rangeAlpha: 0.6,
+    rangeColor: '#AECBFA',
+    rangeMinWidth: 5,
+    searchMatchAlpha: 0.6,
+    searchMatchColor: '#FFFF00',
+    searchNavigateMatchColor: '#AAD280',
+    highlightAlpha: 0.6,
+    highlightMarginHeight: 8,
+    resizerColor: '#4182D9',
+    resizerSize: 5,
+    marginIndicatorSize: 35,
+    marginIndicatorColor: '#BABABA',
+    margins: [100, 120, 100, 120],
+    pageMode: PageMode.PAGING,
+    renderMode: RenderMode.SPEED,
+    defaultHyperlinkColor: '#0000FF',
+    paperDirection: PaperDirection.VERTICAL,
+    inactiveAlpha: 0.6,
+    historyMaxRecordCount: 100,
+    wordBreak: WordBreak.BREAK_WORD,
+    printPixelRatio: 3,
+    maskMargin: [0, 0, 0, 0],
+    letterClass: [LETTER_CLASS.ENGLISH],
+    contextMenuDisableKeys: [],
+    shortcutDisableKeys: [],
+    scrollContainerSelector: '',
+    pageOuterSelectionDisable: false,
+    ...options,
+    table: tableOptions,
+    header: headerOptions,
+    footer: footerOptions,
+    pageNumber: pageNumberOptions,
+    watermark: waterMarkOptions,
+    control: controlOptions,
+    checkbox: checkboxOptions,
+    radio: radioOptions,
+    cursor: cursorOptions,
+    title: titleOptions,
+    placeholder: placeholderOptions,
+    group: groupOptions,
+    pageBreak: pageBreakOptions,
+    zone: zoneOptions,
+    background: backgroundOptions,
+    lineBreak: lineBreakOptions,
+    whiteSpace: whiteSpaceOptions,
+    separator: separatorOptions,
+    lineNumber: lineNumberOptions,
+    pageBorder: pageBorderOptions,
+    badge: badgeOptions,
+    modeRule: modeRuleOption,
+    graffiti: graffitiOptions,
+    label: labelOptions,
+    imgCaption: imgCaptionOptions,
+    list: listOptions
+  }
+}