editor-svg 1.0.2 → 1.0.3

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

@@ -1,234 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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
-}