editor-svg 1.0.0

package/src/editor/core/event/handlers/click.ts

@@ -0,0 +1,234 @@
+import { ZERO } from '../../../dataset/constant/Common'
+import { TEXTLIKE_ELEMENT_TYPE } from '../../../dataset/constant/Element'
+import { NUMBER_LIKE_REG } from '../../../dataset/constant/Regular'
+import { ElementType } from '../../../dataset/enum/Element'
+import { IRange } from '../../../interface/Range'
+import { CanvasEvent } from '../CanvasEvent'
+
+// 通过分词器获取单词所在选区
+export function getWordRangeBySegmenter(host: CanvasEvent): IRange | null {
+  if (!Intl.Segmenter) return null
+  const draw = host.getDraw()
+  const cursorPosition = draw.getPosition().getCursorPosition()
+  if (!cursorPosition) return null
+  const rangeManager = draw.getRange()
+  const paragraphInfo = rangeManager.getRangeParagraphInfo()
+  if (!paragraphInfo) return null
+  // 组装段落文本
+  const paragraphText =
+    paragraphInfo?.elementList
+      ?.map(e =>
+        !e.type ||
+        (e.type !== ElementType.CONTROL &&
+          TEXTLIKE_ELEMENT_TYPE.includes(e.type))
+          ? e.value
+          : ZERO
+      )
+      .join('') || ''
+  if (!paragraphText) return null
+  // 光标所在位置：光标在开头时只能选择选择当前行进行分词，光标后移
+  const cursorStartIndex =
+    cursorPosition.isFirstLetter || draw.getCursor().getHitLineStartIndex()
+      ? cursorPosition.index + 1
+      : cursorPosition.index
+  // 段落首字符相对文档起始位置
+  const offset = paragraphInfo.startIndex
+  const segmenter = new Intl.Segmenter(undefined, { granularity: 'word' })
+  const segments = segmenter.segment(paragraphText)
+  // 新的光标位置
+  let startIndex = -1
+  let endIndex = -1
+  for (const { segment, index, isWordLike } of segments) {
+    const realSegmentStartIndex = index + offset
+    if (
+      isWordLike &&
+      cursorStartIndex >= realSegmentStartIndex &&
+      cursorStartIndex < realSegmentStartIndex + segment.length
+    ) {
+      startIndex = realSegmentStartIndex - 1
+      endIndex = startIndex + segment.length
+      break
+    }
+  }
+  return ~startIndex && ~endIndex ? { startIndex, endIndex } : null
+}
+
+// 通过光标位置获取单词所在选区
+export function getWordRangeByCursor(host: CanvasEvent): IRange | null {
+  const draw = host.getDraw()
+  const cursorPosition = draw.getPosition().getCursorPosition()
+  if (!cursorPosition) return null
+  const { value, index } = cursorPosition
+  // 判断是否是数字或英文
+  const LETTER_REG = draw.getLetterReg()
+  let upCount = 0
+  let downCount = 0
+  const isNumber = NUMBER_LIKE_REG.test(value)
+  if (isNumber || LETTER_REG.test(value)) {
+    const elementList = draw.getElementList()
+    // 向上查询
+    let upStartIndex = index - 1
+    while (upStartIndex > 0) {
+      const value = elementList[upStartIndex].value
+      if (
+        (isNumber && NUMBER_LIKE_REG.test(value)) ||
+        (!isNumber && LETTER_REG.test(value))
+      ) {
+        upCount++
+        upStartIndex--
+      } else {
+        break
+      }
+    }
+    // 向下查询
+    let downStartIndex = index + 1
+    while (downStartIndex < elementList.length) {
+      const value = elementList[downStartIndex].value
+      if (
+        (isNumber && NUMBER_LIKE_REG.test(value)) ||
+        (!isNumber && LETTER_REG.test(value))
+      ) {
+        downCount++
+        downStartIndex++
+      } else {
+        break
+      }
+    }
+  }
+  // 新的光标位置
+  const startIndex = index - upCount - 1
+  if (startIndex < 0) return null
+  return {
+    startIndex,
+    endIndex: index + downCount
+  }
+}
+
+function dblclick(host: CanvasEvent, evt: MouseEvent) {
+  const draw = host.getDraw()
+  const position = draw.getPosition()
+  const positionContext = position.getPositionByXY({
+    x: evt.offsetX,
+    y: evt.offsetY
+  })
+  if (positionContext.isImage && positionContext.isDirectHit) {
+    // 双击图片事件
+    const elementList = draw.getElementList()
+    const eventBus = draw.getEventBus()
+    const curElement = elementList[positionContext.index]
+    if (eventBus.isSubscribe('imageDblclick')) {
+      eventBus.emit('imageDblclick', {
+        evt,
+        element: curElement
+      })
+    }
+    // 图片预览
+    if (curElement.imgPreviewDisabled) return
+    draw.getPreviewer().render()
+    return
+  }
+  // 切换区域
+  if (draw.getIsPagingMode()) {
+    if (!~positionContext.index && positionContext.zone) {
+      draw.getZone().setZone(positionContext.zone)
+      draw.clearSideEffect()
+      position.setPositionContext({
+        isTable: false
+      })
+      return
+    }
+  }
+  // 复选/单选框双击时是切换选择状态，禁用扩选
+  if (
+    (positionContext.isCheckbox || positionContext.isRadio) &&
+    positionContext.isDirectHit
+  ) {
+    return
+  }
+  // 自动扩选文字-分词处理，优先使用分词器否则降级使用光标所在位置
+  const rangeManager = draw.getRange()
+  const segmenterRange =
+    getWordRangeBySegmenter(host) || getWordRangeByCursor(host)
+  if (!segmenterRange) return
+  rangeManager.setRange(segmenterRange.startIndex, segmenterRange.endIndex)
+  // 刷新文档
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isCompute: false
+  })
+  // 更新选区
+  rangeManager.setRangeStyle()
+}
+
+function threeClick(host: CanvasEvent) {
+  const draw = host.getDraw()
+  // 优先选择控件内容
+  const control = draw.getControl()
+  if (control.getActiveControl() && control.selectValue()) return
+  // 选择整个段落
+  const position = draw.getPosition()
+  const cursorPosition = position.getCursorPosition()
+  if (!cursorPosition) return
+  const { index } = cursorPosition
+  const elementList = draw.getElementList()
+  // 判断是否是零宽字符
+  let upCount = 0
+  let downCount = 0
+  // 向上查询
+  let upStartIndex = index - 1
+  while (upStartIndex > 0) {
+    const element = elementList[upStartIndex]
+    const preElement = elementList[upStartIndex - 1]
+    if (
+      (element.value === ZERO && !element.listWrap) ||
+      element.listId !== preElement?.listId ||
+      element.titleId !== preElement?.titleId
+    ) {
+      break
+    }
+    upCount++
+    upStartIndex--
+  }
+  // 向下查询
+  let downStartIndex = index + 1
+  while (downStartIndex < elementList.length) {
+    const element = elementList[downStartIndex]
+    const nextElement = elementList[downStartIndex + 1]
+    if (
+      (element.value === ZERO && !element.listWrap) ||
+      element.listId !== nextElement?.listId ||
+      element.titleId !== nextElement?.titleId
+    ) {
+      break
+    }
+    downCount++
+    downStartIndex++
+  }
+  // 设置选中区域-不选择段落首尾换行符
+  const rangeManager = draw.getRange()
+  let newStartIndex = index - upCount - 1
+  if (elementList[newStartIndex]?.value !== ZERO) {
+    newStartIndex -= 1
+  }
+  if (newStartIndex < 0) return
+  let newEndIndex = index + downCount + 1
+  if (
+    elementList[newEndIndex]?.value === ZERO ||
+    newEndIndex > elementList.length - 1
+  ) {
+    newEndIndex -= 1
+  }
+  rangeManager.setRange(newStartIndex, newEndIndex)
+  // 刷新文档
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isCompute: false
+  })
+}
+
+export default {
+  dblclick,
+  threeClick
+}

package/src/editor/core/event/handlers/composition.ts

@@ -0,0 +1,45 @@
+import { isFirefox } from '../../../utils/ua'
+import { CanvasEvent } from '../CanvasEvent'
+import { input, removeComposingInput } from './input'
+
+function compositionstart(host: CanvasEvent) {
+  host.isComposing = true
+}
+
+function compositionend(host: CanvasEvent, evt: CompositionEvent) {
+  host.isComposing = false
+  // 处理输入框关闭
+  const draw = host.getDraw()
+  // 不存在值：删除合成输入
+  if (!evt.data) {
+    removeComposingInput(host)
+    const rangeManager = draw.getRange()
+    const { endIndex: curIndex } = rangeManager.getRange()
+    draw.render({
+      curIndex,
+      isSubmitHistory: false
+    })
+  } else {
+    // 存在值：无法触发input事件需手动检测并触发渲染
+    if (isFirefox) {
+      // 如果为0，火狐浏览器会在input事件之前执行导致重复输入
+      setTimeout(() => {
+        if (host.compositionInfo) {
+          input(evt.data, host)
+        }
+      }, 1)
+    } else {
+      if (host.compositionInfo) {
+        input(evt.data, host)
+      }
+    }
+  }
+  // 移除代理输入框数据
+  const cursor = draw.getCursor()
+  cursor.clearAgentDomValue()
+}
+
+export default {
+  compositionstart,
+  compositionend
+}

package/src/editor/core/event/handlers/copy.ts

@@ -0,0 +1,72 @@
+import { ElementType } from '../../../dataset/enum/Element'
+import { IElement } from '../../../interface/Element'
+import { ICopyOption } from '../../../interface/Event'
+import { ITr } from '../../../interface/table/Tr'
+import { writeElementList } from '../../../utils/clipboard'
+import { getTextFromElementList, zipElementList } from '../../../utils/element'
+import { IOverrideResult } from '../../override/Override'
+import { CanvasEvent } from '../CanvasEvent'
+
+export async function copy(host: CanvasEvent, options?: ICopyOption) {
+  const draw = host.getDraw()
+  // 自定义粘贴事件
+  const { copy } = draw.getOverride()
+  if (copy) {
+    const overrideResult = copy()
+    // 默认阻止默认事件
+    if ((<IOverrideResult>overrideResult)?.preventDefault !== false) return
+  }
+  const rangeManager = draw.getRange()
+  // 光标闭合时复制整行
+  let copyElementList: IElement[] | null = null
+  const range = rangeManager.getRange()
+  if (range.isCrossRowCol) {
+    // 原始表格信息
+    const tableElement = rangeManager.getRangeTableElement()
+    if (!tableElement) return
+    // 选区行列信息
+    const rowCol = draw.getTableParticle().getRangeRowCol()
+    if (!rowCol) return
+    // 构造表格
+    const copyTableElement: IElement = {
+      type: ElementType.TABLE,
+      value: '',
+      colgroup: [],
+      trList: []
+    }
+    const firstRow = rowCol[0]
+    const colStartIndex = firstRow[0].colIndex!
+    const lastCol = firstRow[firstRow.length - 1]
+    const colEndIndex = lastCol.colIndex! + lastCol.colspan - 1
+    for (let c = colStartIndex; c <= colEndIndex; c++) {
+      copyTableElement.colgroup!.push(tableElement.colgroup![c])
+    }
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r]
+      const tr = tableElement.trList![row[0].rowIndex!]
+      const coptTr: ITr = {
+        tdList: [],
+        height: tr.height,
+        minHeight: tr.minHeight
+      }
+      for (let c = 0; c < row.length; c++) {
+        coptTr.tdList.push(row[c])
+      }
+      copyTableElement.trList!.push(coptTr)
+    }
+    copyElementList = zipElementList([copyTableElement])
+  } else {
+    copyElementList = rangeManager.getIsCollapsed()
+      ? rangeManager.getRangeRowElementList()
+      : rangeManager.getSelectionElementList()
+  }
+  if (options?.isPlainText && copyElementList?.length) {
+    copyElementList = [
+      {
+        value: getTextFromElementList(copyElementList)
+      }
+    ]
+  }
+  if (!copyElementList?.length) return
+  await writeElementList(copyElementList, draw.getOptions())
+}

package/src/editor/core/event/handlers/cut.ts

@@ -0,0 +1,47 @@
+import { writeElementList } from '../../../utils/clipboard'
+import { CanvasEvent } from '../CanvasEvent'
+
+export async function cut(host: CanvasEvent) {
+  const draw = host.getDraw()
+  const rangeManager = draw.getRange()
+  const { startIndex, endIndex } = rangeManager.getRange()
+  if (!~startIndex && !~startIndex) return
+  if (draw.isReadonly() || !rangeManager.getIsCanInput()) return
+
+  const elementList = draw.getElementList()
+  let start = startIndex
+  let end = endIndex
+  // 无选区则剪切一行
+  if (startIndex === endIndex) {
+    const position = draw.getPosition()
+    const positionList = position.getPositionList()
+    const startPosition = positionList[startIndex]
+    const curRowNo = startPosition.rowNo
+    const curPageNo = startPosition.pageNo
+    const cutElementIndexList: number[] = []
+    for (let p = 0; p < positionList.length; p++) {
+      const position = positionList[p]
+      if (position.pageNo > curPageNo) break
+      if (position.pageNo === curPageNo && position.rowNo === curRowNo) {
+        cutElementIndexList.push(p)
+      }
+    }
+    const firstElementIndex = cutElementIndexList[0] - 1
+    start = firstElementIndex < 0 ? 0 : firstElementIndex
+    end = cutElementIndexList[cutElementIndexList.length - 1]
+  }
+  const options = draw.getOptions()
+  // 写入粘贴板
+  await writeElementList(elementList.slice(start + 1, end + 1), options)
+  const control = draw.getControl()
+  let curIndex: number
+  if (control.getActiveControl() && control.getIsRangeWithinControl()) {
+    curIndex = control.cut()
+    control.emitControlContentChange()
+  } else {
+    draw.spliceElementList(elementList, start + 1, end - start)
+    curIndex = start
+  }
+  rangeManager.setRange(curIndex, curIndex)
+  draw.render({ curIndex })
+}

package/src/editor/core/event/handlers/drag.ts

@@ -0,0 +1,66 @@
+import { ImageDisplay } from '../../../dataset/enum/Common'
+import { ElementType } from '../../../dataset/enum/Element'
+import { findParent } from '../../../utils'
+import { CanvasEvent } from '../CanvasEvent'
+
+function dragover(evt: DragEvent | MouseEvent, host: CanvasEvent) {
+  const draw = host.getDraw()
+  const isReadonly = draw.isReadonly()
+  if (isReadonly) return
+  evt.preventDefault()
+  // 非编辑器区禁止拖放
+  const pageContainer = draw.getPageContainer()
+  const editorRegion = findParent(
+    evt.target as Element,
+    (node: Element) => node === pageContainer,
+    true
+  )
+  if (!editorRegion) return
+  const target = evt.target as HTMLDivElement
+  const pageIndex = target.dataset.index
+  // 设置pageNo
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex))
+  }
+  const position = draw.getPosition()
+  const positionContext = position.adjustPositionContext({
+    x: evt.offsetX,
+    y: evt.offsetY
+  })
+  if (!positionContext) return
+  const { isTable, tdValueIndex, index } = positionContext
+  // 设置选区及光标位置
+  const positionList = position.getPositionList()
+  const curIndex = isTable ? tdValueIndex! : index
+  if (~index) {
+    const rangeManager = draw.getRange()
+    rangeManager.setRange(curIndex, curIndex)
+    position.setCursorPosition(positionList[curIndex])
+  }
+  const cursor = draw.getCursor()
+  const {
+    cursor: { dragColor, dragWidth, dragFloatImageDisabled }
+  } = draw.getOptions()
+  // 拖拽图片是否定位光标
+  if (dragFloatImageDisabled) {
+    const dragElement = host.cacheElementList?.[host.cacheRange!.startIndex]
+    if (
+      dragElement?.type === ElementType.IMAGE &&
+      (dragElement.imgDisplay === ImageDisplay.FLOAT_TOP ||
+        dragElement.imgDisplay === ImageDisplay.FLOAT_BOTTOM ||
+        dragElement.imgDisplay === ImageDisplay.SURROUND)
+    ) {
+      return
+    }
+  }
+  cursor.drawCursor({
+    width: dragWidth,
+    color: dragColor,
+    isBlink: false,
+    isFocus: false
+  })
+}
+
+export default {
+  dragover
+}

package/src/editor/core/event/handlers/drop.ts

@@ -0,0 +1,28 @@
+import { IOverrideResult } from '../../override/Override'
+import { CanvasEvent } from '../CanvasEvent'
+import { pasteImage } from './paste'
+
+export function drop(evt: DragEvent, host: CanvasEvent) {
+  const draw = host.getDraw()
+  // 自定义拖放事件
+  const { drop } = draw.getOverride()
+  if (drop) {
+    const overrideResult = drop(evt)
+    // 默认阻止默认事件
+    if ((<IOverrideResult>overrideResult)?.preventDefault !== false) return
+  }
+  evt.preventDefault()
+  const data = evt.dataTransfer?.getData('text')
+  if (data) {
+    host.input(data)
+  } else {
+    const files = evt.dataTransfer?.files
+    if (!files) return
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]
+      if (file.type.startsWith('image')) {
+        pasteImage(host, file)
+      }
+    }
+  }
+}

package/src/editor/core/event/handlers/input.ts

@@ -0,0 +1,129 @@
+import { ZERO } from '../../../dataset/constant/Common'
+import {
+  EDITOR_ELEMENT_COPY_ATTR,
+  EDITOR_ELEMENT_STYLE_ATTR
+} from '../../../dataset/constant/Element'
+import { ElementType } from '../../../dataset/enum/Element'
+import { IElement } from '../../../interface/Element'
+import { IRangeElementStyle } from '../../../interface/Range'
+import { splitText } from '../../../utils'
+import { formatElementContext } from '../../../utils/element'
+import { CanvasEvent } from '../CanvasEvent'
+
+export function input(data: string, host: CanvasEvent) {
+  const draw = host.getDraw()
+  if (draw.isReadonly() || draw.isDisabled()) return
+  const position = draw.getPosition()
+  const cursorPosition = position.getCursorPosition()
+  if (!data || !cursorPosition) return
+  const isComposing = host.isComposing
+  // 正在合成文本进行非输入操作
+  if (isComposing && host.compositionInfo?.value === data) return
+  const rangeManager = draw.getRange()
+  if (!rangeManager.getIsCanInput()) return
+  // 移除合成前，缓存设置的默认样式设置
+  const defaultStyle =
+    rangeManager.getDefaultStyle() || host.compositionInfo?.defaultStyle || null
+  // 移除合成输入
+  removeComposingInput(host)
+  if (!isComposing) {
+    const cursor = draw.getCursor()
+    cursor.clearAgentDomValue()
+  }
+  const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE, TAB } = ElementType
+  const text = data.replaceAll(`\n`, ZERO)
+  const { startIndex, endIndex } = rangeManager.getRange()
+  // 格式化元素
+  const elementList = draw.getElementList()
+  const copyElement = rangeManager.getRangeAnchorStyle(elementList, endIndex)
+  if (!copyElement) return
+  const isDesignMode = draw.isDesignMode()
+  const inputData: IElement[] = splitText(text).map(value => {
+    const newElement: IElement = {
+      value
+    }
+    if (
+      isDesignMode ||
+      (!copyElement.title?.disabled && !copyElement.control?.disabled)
+    ) {
+      const nextElement = elementList[endIndex + 1]
+      // 文本、超链接、日期、上下标：复制所有信息（元素类型、样式、特殊属性）
+      if (
+        !copyElement.type ||
+        copyElement.type === TEXT ||
+        (copyElement.type === HYPERLINK && nextElement?.type === HYPERLINK) ||
+        (copyElement.type === DATE && nextElement?.type === DATE) ||
+        (copyElement.type === SUBSCRIPT && nextElement?.type === SUBSCRIPT) ||
+        (copyElement.type === SUPERSCRIPT && nextElement?.type === SUPERSCRIPT)
+      ) {
+        EDITOR_ELEMENT_COPY_ATTR.forEach(attr => {
+          // 在分组外无需复制分组信息
+          if (attr === 'groupIds' && !nextElement?.groupIds) return
+          const value = copyElement[attr] as never
+          if (value !== undefined) {
+            newElement[attr] = value
+          }
+        })
+      }
+      // 仅复制样式：存在默认样式设置 || 无法匹配文本类元素时（TAB）
+      if (defaultStyle || copyElement.type === TAB) {
+        EDITOR_ELEMENT_STYLE_ATTR.forEach(attr => {
+          const value =
+            defaultStyle?.[attr as keyof IRangeElementStyle] ||
+            copyElement[attr]
+          if (value !== undefined) {
+            newElement[attr] = value as never
+          }
+        })
+      }
+      if (isComposing) {
+        newElement.underline = true
+      }
+    }
+    return newElement
+  })
+  // 控件-移除placeholder
+  const control = draw.getControl()
+  let curIndex: number
+  if (control.getActiveControl() && control.getIsRangeWithinControl()) {
+    curIndex = control.setValue(inputData)
+    if (!isComposing) {
+      control.emitControlContentChange()
+    }
+  } else {
+    const start = startIndex + 1
+    if (startIndex !== endIndex) {
+      draw.spliceElementList(elementList, start, endIndex - startIndex)
+    }
+    formatElementContext(elementList, inputData, startIndex, {
+      editorOptions: draw.getOptions()
+    })
+    draw.spliceElementList(elementList, start, 0, inputData)
+    curIndex = startIndex + inputData.length
+  }
+  if (~curIndex) {
+    rangeManager.setRange(curIndex, curIndex)
+    draw.render({
+      curIndex,
+      isSubmitHistory: !isComposing
+    })
+  }
+  if (isComposing && ~curIndex) {
+    host.compositionInfo = {
+      elementList,
+      value: text,
+      startIndex: curIndex - inputData.length,
+      endIndex: curIndex,
+      defaultStyle
+    }
+  }
+}
+
+export function removeComposingInput(host: CanvasEvent) {
+  if (!host.compositionInfo) return
+  const { elementList, startIndex, endIndex } = host.compositionInfo
+  elementList.splice(startIndex + 1, endIndex - startIndex)
+  const rangeManager = host.getDraw().getRange()
+  rangeManager.setRange(startIndex, startIndex)
+  host.compositionInfo = null
+}