editor-svg 1.0.2 → 1.0.3

package/src/editor/core/event/handlers/keydown/updown.ts

@@ -1,342 +0,0 @@
-import { ElementType } from '../../../../dataset/enum/Element'
-import { KeyMap } from '../../../../dataset/enum/KeyMap'
-import { MoveDirection } from '../../../../dataset/enum/Observer'
-import { IElementPosition } from '../../../../interface/Element'
-import { CanvasEvent } from '../../CanvasEvent'
-
-interface IGetNextPositionIndexPayload {
-  positionList: IElementPosition[]
-  index: number
-  rowNo: number
-  isUp: boolean
-  cursorX: number
-}
-// 根据当前位置索引查找上下行最接近的索引位置
-function getNextPositionIndex(payload: IGetNextPositionIndexPayload) {
-  const { positionList, index, isUp, rowNo, cursorX } = payload
-  let nextIndex = -1
-  // 查找下一行位置列表
-  const probablePosition: IElementPosition[] = []
-  if (isUp) {
-    let p = index - 1
-    // 等于0的时候上一行是第一行
-    while (p >= 0) {
-      const position = positionList[p]
-      p--
-      if (position.rowNo === rowNo) continue
-      if (probablePosition[0] && probablePosition[0].rowNo !== position.rowNo) {
-        break
-      }
-      probablePosition.unshift(position)
-    }
-  } else {
-    let p = index + 1
-    while (p < positionList.length) {
-      const position = positionList[p]
-      p++
-      if (position.rowNo === rowNo) continue
-      if (probablePosition[0] && probablePosition[0].rowNo !== position.rowNo) {
-        break
-      }
-      probablePosition.push(position)
-    }
-  }
-  // 查找下一行位置：第一个存在交叉宽度的元素位置
-  for (let p = 0; p < probablePosition.length; p++) {
-    const nextPosition = probablePosition[p]
-    const {
-      coordinate: {
-        leftTop: [nextLeftX],
-        rightTop: [nextRightX]
-      }
-    } = nextPosition
-    if (p === probablePosition.length - 1) {
-      nextIndex = nextPosition.index
-    }
-    if (cursorX < nextLeftX || cursorX > nextRightX) continue
-    nextIndex = nextPosition.index
-    break
-  }
-  return nextIndex
-}
-
-export function updown(evt: KeyboardEvent, host: CanvasEvent) {
-  const draw = host.getDraw()
-  const isReadonly = draw.isReadonly()
-  if (isReadonly) return
-  const position = draw.getPosition()
-  const cursorPosition = position.getCursorPosition()
-  if (!cursorPosition) return
-  const rangeManager = draw.getRange()
-  const { startIndex, endIndex } = rangeManager.getRange()
-  let positionList = position.getPositionList()
-  const isUp = evt.key === KeyMap.Up
-  // 新的光标开始结束位置
-  let anchorStartIndex = -1
-  let anchorEndIndex = -1
-  // 单元格之间跳转及跳出表格逻辑
-  const positionContext = position.getPositionContext()
-  if (
-    !evt.shiftKey &&
-    positionContext.isTable &&
-    ((isUp && cursorPosition.rowIndex === 0) ||
-      (!isUp && cursorPosition.rowIndex === draw.getRowCount() - 1))
-  ) {
-    const { index, trIndex, tdIndex, tableId } = positionContext
-    if (isUp) {
-      // 向上移动-第一行则移出到表格外，否则上一行相同列位置
-      if (trIndex === 0) {
-        position.setPositionContext({
-          isTable: false
-        })
-        anchorStartIndex = index! - 1
-        anchorEndIndex = anchorStartIndex
-        draw.getTableTool().dispose()
-      } else {
-        // 查找上一行相同列索引位置信息
-        let preTrIndex = -1
-        let preTdIndex = -1
-        const originalElementList = draw.getOriginalElementList()
-        const trList = originalElementList[index!].trList!
-        // 当前单元格所在列实际索引
-        const curTdColIndex = trList[trIndex!].tdList[tdIndex!].colIndex!
-        outer: for (let r = trIndex! - 1; r >= 0; r--) {
-          const tr = trList[r]
-          const tdList = tr.tdList!
-          for (let d = 0; d < tdList.length; d++) {
-            const td = tdList[d]
-            if (
-              td.colIndex === curTdColIndex ||
-              (td.colIndex! + td.colspan - 1 >= curTdColIndex &&
-                td.colIndex! <= curTdColIndex)
-            ) {
-              preTrIndex = r
-              preTdIndex = d
-              break outer
-            }
-          }
-        }
-        if (!~preTrIndex || !~preTdIndex) return
-        const preTr = trList[preTrIndex]
-        const preTd = preTr.tdList[preTdIndex]
-        position.setPositionContext({
-          isTable: true,
-          index,
-          trIndex: preTrIndex,
-          tdIndex: preTdIndex,
-          tdId: preTd.id,
-          trId: preTr.id,
-          tableId
-        })
-        anchorStartIndex = preTd.value.length - 1
-        anchorEndIndex = anchorStartIndex
-        draw.getTableTool().render()
-      }
-    } else {
-      // 向下移动-最后一行则移出表格外，否则下一行相同列位置
-      const originalElementList = draw.getOriginalElementList()
-      const trList = originalElementList[index!].trList!
-      if (trIndex === trList.length - 1) {
-        position.setPositionContext({
-          isTable: false
-        })
-        anchorStartIndex = index!
-        anchorEndIndex = anchorStartIndex
-        draw.getTableTool().dispose()
-      } else {
-        // 查找下一行相同列索引位置信息
-        let nexTrIndex = -1
-        let nextTdIndex = -1
-        // 当前单元格所在列实际索引
-        const curTdColIndex = trList[trIndex!].tdList[tdIndex!].colIndex!
-        outer: for (let r = trIndex! + 1; r < trList.length; r++) {
-          const tr = trList[r]
-          const tdList = tr.tdList!
-          for (let d = 0; d < tdList.length; d++) {
-            const td = tdList[d]
-            if (
-              td.colIndex === curTdColIndex ||
-              (td.colIndex! + td.colspan - 1 >= curTdColIndex &&
-                td.colIndex! <= curTdColIndex)
-            ) {
-              nexTrIndex = r
-              nextTdIndex = d
-              break outer
-            }
-          }
-        }
-        if (!~nexTrIndex || !~nextTdIndex) return
-        const nextTr = trList[nexTrIndex]
-        const nextTd = nextTr.tdList[nextTdIndex]
-        position.setPositionContext({
-          isTable: true,
-          index,
-          trIndex: nexTrIndex,
-          tdIndex: nextTdIndex,
-          tdId: nextTd.id,
-          trId: nextTr.id,
-          tableId
-        })
-        anchorStartIndex = nextTd.value.length - 1
-        anchorEndIndex = anchorStartIndex
-        draw.getTableTool().render()
-      }
-    }
-  } else {
-    // 普通元素及跳进表格逻辑
-    let anchorPosition: IElementPosition = cursorPosition
-    // 扩大选区时，判断移动光标点
-    if (evt.shiftKey) {
-      if (startIndex === cursorPosition.index) {
-        anchorPosition = positionList[endIndex]
-      } else {
-        anchorPosition = positionList[startIndex]
-      }
-    }
-    const {
-      index,
-      rowNo,
-      rowIndex,
-      coordinate: {
-        rightTop: [curRightX]
-      }
-    } = anchorPosition
-    // 向上时在首行、向下时在尾行则忽略
-    if (
-      (isUp && rowIndex === 0) ||
-      (!isUp && rowIndex === draw.getRowCount() - 1)
-    ) {
-      return
-    }
-    // 查找下一行位置列表
-    const nextIndex = getNextPositionIndex({
-      positionList,
-      index,
-      rowNo,
-      isUp,
-      cursorX: curRightX
-    })
-    if (nextIndex < 0) return
-    // shift则缩放选区
-    anchorStartIndex = nextIndex
-    anchorEndIndex = nextIndex
-    if (evt.shiftKey) {
-      if (startIndex !== endIndex) {
-        if (startIndex === cursorPosition.index) {
-          anchorStartIndex = startIndex
-        } else {
-          anchorEndIndex = endIndex
-        }
-      } else {
-        if (isUp) {
-          anchorEndIndex = endIndex
-        } else {
-          anchorStartIndex = startIndex
-        }
-      }
-    }
-    // 如果下一行是表格则进入单元格内
-    const elementList = draw.getElementList()
-    const nextElement = elementList[nextIndex]
-    if (nextElement.type === ElementType.TABLE) {
-      const { scale } = draw.getOptions()
-      const margins = draw.getMargins()
-      const trList = nextElement.trList!
-      // 查找进入的单元格及元素位置
-      let trIndex = -1
-      let tdIndex = -1
-      let tdPositionIndex = -1
-      if (isUp) {
-        outer: for (let r = trList.length - 1; r >= 0; r--) {
-          const tr = trList[r]
-          const tdList = tr.tdList!
-          for (let d = 0; d < tdList.length; d++) {
-            const td = tdList[d]
-            const tdX = td.x! * scale + margins[3]
-            const tdWidth = td.width! * scale
-            if (curRightX >= tdX && curRightX <= tdX + tdWidth) {
-              const tdPositionList = td.positionList!
-              const lastPosition = tdPositionList[tdPositionList.length - 1]
-              const nextPositionIndex =
-                getNextPositionIndex({
-                  positionList: tdPositionList,
-                  index: lastPosition.index + 1, // 虚拟起始位置+1（从左往右找）
-                  rowNo: lastPosition.rowNo - 1, // 虚拟起始行号-1（从下往上找）
-                  isUp,
-                  cursorX: curRightX
-                }) || lastPosition.index
-              trIndex = r
-              tdIndex = d
-              tdPositionIndex = nextPositionIndex
-              break outer
-            }
-          }
-        }
-      } else {
-        outer: for (let r = 0; r < trList.length; r++) {
-          const tr = trList[r]
-          const tdList = tr.tdList!
-          for (let d = 0; d < tdList.length; d++) {
-            const td = tdList[d]
-            const tdX = td.x! * scale + margins[3]
-            const tdWidth = td.width! * scale
-            if (curRightX >= tdX && curRightX <= tdX + tdWidth) {
-              const tdPositionList = td.positionList!
-              const nextPositionIndex =
-                getNextPositionIndex({
-                  positionList: tdPositionList,
-                  index: -1, // 虚拟起始位置-1（从右往左找）
-                  rowNo: -1, // 虚拟起始行号-1（从上往下找）
-                  isUp,
-                  cursorX: curRightX
-                }) || 0
-              trIndex = r
-              tdIndex = d
-              tdPositionIndex = nextPositionIndex
-              break outer
-            }
-          }
-        }
-      }
-      // 设置上下文
-      if (~trIndex && ~tdIndex && ~tdPositionIndex) {
-        const nextTr = trList[trIndex]
-        const nextTd = nextTr.tdList[tdIndex]
-        position.setPositionContext({
-          isTable: true,
-          index: nextIndex,
-          trIndex: trIndex,
-          tdIndex: tdIndex,
-          tdId: nextTd.id,
-          trId: nextTr.id,
-          tableId: nextElement.id
-        })
-        anchorStartIndex = tdPositionIndex
-        anchorEndIndex = anchorStartIndex
-        positionList = position.getPositionList()
-        draw.getTableTool().render()
-      }
-    }
-  }
-  // 执行跳转
-  if (!~anchorStartIndex || !~anchorEndIndex) return
-  if (anchorStartIndex > anchorEndIndex) {
-    // prettier-ignore
-    [anchorStartIndex, anchorEndIndex] = [anchorEndIndex, anchorStartIndex]
-  }
-  rangeManager.setRange(anchorStartIndex, anchorEndIndex)
-  const isCollapsed = anchorStartIndex === anchorEndIndex
-  draw.render({
-    curIndex: isCollapsed ? anchorStartIndex : undefined,
-    isSetCursor: isCollapsed,
-    isSubmitHistory: false,
-    isCompute: false
-  })
-  // 非光标闭合：将光标移动到可视范围内，闭合光标统一处理
-  if (!isCollapsed) {
-    draw.getCursor().moveCursorToVisible({
-      cursorPosition: positionList[isUp ? anchorStartIndex : anchorEndIndex],
-      direction: isUp ? MoveDirection.UP : MoveDirection.DOWN
-    })
-  }
-}

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

@@ -1,262 +0,0 @@
-import { ImageDisplay } from '../../../dataset/enum/Common'
-import { EditorMode } from '../../../dataset/enum/Editor'
-import { ElementType } from '../../../dataset/enum/Element'
-import { MouseEventButton } from '../../../dataset/enum/Event'
-import { ControlComponent } from '../../../dataset/enum/Control'
-import { ControlType } from '../../../dataset/enum/Control'
-import { IPreviewerDrawOption } from '../../../interface/Previewer'
-import { deepClone } from '../../../utils'
-import { isMod } from '../../../utils/hotkey'
-import { CheckboxControl } from '../../draw/control/checkbox/CheckboxControl'
-import { RadioControl } from '../../draw/control/radio/RadioControl'
-import { CanvasEvent } from '../CanvasEvent'
-import { IElement } from '../../../interface/Element'
-import { Draw } from '../../draw/Draw'
-
-export function setRangeCache(host: CanvasEvent) {
-  const draw = host.getDraw()
-  const position = draw.getPosition()
-  const rangeManager = draw.getRange()
-  // 缓存选区上下文信息
-  host.isAllowDrag = true
-  host.cacheRange = deepClone(rangeManager.getRange())
-  host.cacheElementList = draw.getElementList()
-  host.cachePositionList = position.getPositionList()
-  host.cachePositionContext = position.getPositionContext()
-}
-
-export function hitCheckbox(element: IElement, draw: Draw) {
-  const { checkbox, control } = element
-  // 复选框不在控件内独立控制
-  if (!control) {
-    draw.getCheckboxParticle().setSelect(element)
-  } else {
-    const codes = control?.code ? control.code.split(',') : []
-    if (checkbox?.value) {
-      const codeIndex = codes.findIndex(c => c === checkbox.code)
-      codes.splice(codeIndex, 1)
-    } else {
-      if (checkbox?.code) {
-        codes.push(checkbox.code)
-      }
-    }
-    const activeControl = draw.getControl().getActiveControl()
-    if (activeControl instanceof CheckboxControl) {
-      activeControl.setSelect(codes)
-    }
-  }
-}
-
-export function hitRadio(element: IElement, draw: Draw) {
-  const { radio, control } = element
-  // 单选框不在控件内独立控制
-  if (!control) {
-    draw.getRadioParticle().setSelect(element)
-  } else {
-    const codes = radio?.code ? [radio.code] : []
-    const activeControl = draw.getControl().getActiveControl()
-    if (activeControl instanceof RadioControl) {
-      activeControl.setSelect(codes)
-    }
-  }
-}
-
-export function mousedown(evt: MouseEvent, host: CanvasEvent) {
-  const draw = host.getDraw()
-  let isReadonly = draw.isReadonly()
-  const rangeManager = draw.getRange()
-  const position = draw.getPosition()
-  // 存在选区时忽略右键点击
-  const range = rangeManager.getRange()
-  if (
-    evt.button === MouseEventButton.RIGHT &&
-    (range.isCrossRowCol || !rangeManager.getIsCollapsed())
-  ) {
-    return
-  }
-  // 是否是选区拖拽
-  if (!host.isAllowDrag) {
-    if (!isReadonly && range.startIndex !== range.endIndex) {
-      const isPointInRange = rangeManager.getIsPointInRange(
-        evt.offsetX,
-        evt.offsetY
-      )
-      if (isPointInRange) {
-        setRangeCache(host)
-        return
-      }
-    }
-  }
-  const target = evt.target as HTMLDivElement
-  const pageIndex = target.dataset.index
-  // 设置pageNo
-  if (pageIndex) {
-    draw.setPageNo(Number(pageIndex))
-  }
-  host.isAllowSelection = true
-  // 缓存旧上下文信息
-  const oldPositionContext = deepClone(position.getPositionContext())
-  const positionResult = position.adjustPositionContext({
-    x: evt.offsetX,
-    y: evt.offsetY
-  })
-  if (!positionResult) return
-  const {
-    index,
-    isDirectHit,
-    isCheckbox,
-    isRadio,
-    isImage,
-    isLabel,
-    isTable,
-    tdValueIndex,
-    hitLineStartIndex
-  } = positionResult
-  // 记录选区开始位置
-  host.mouseDownStartPosition = {
-    ...positionResult,
-    index: isTable ? tdValueIndex! : index,
-    x: evt.offsetX,
-    y: evt.offsetY
-  }
-  const elementList = draw.getElementList()
-  const positionList = position.getPositionList()
-  const curIndex = isTable ? tdValueIndex! : index
-  const curElement = elementList[curIndex]
-  // 绘制
-  const isDirectHitImage = !!(isDirectHit && isImage)
-  const isDirectHitCheckbox = !!(isDirectHit && isCheckbox)
-  const isDirectHitRadio = !!(isDirectHit && isRadio)
-  const isDirectHitLabel = !!(isDirectHit && isLabel)
-  if (~index) {
-    let startIndex = curIndex
-    let endIndex = curIndex
-    // shift激活时进行选区处理
-    if (evt.shiftKey) {
-      const { startIndex: oldStartIndex } = rangeManager.getRange()
-      if (~oldStartIndex) {
-        const newPositionContext = position.getPositionContext()
-        if (newPositionContext.tdId === oldPositionContext.tdId) {
-          if (curIndex > oldStartIndex) {
-            startIndex = oldStartIndex
-          } else {
-            endIndex = oldStartIndex
-          }
-        }
-      }
-    }
-    rangeManager.setRange(startIndex, endIndex)
-    position.setCursorPosition(positionList[curIndex])
-    // 更新只读状态
-    isReadonly = draw.isReadonly()
-    // 复选框
-    if (isDirectHitCheckbox && !isReadonly) {
-      hitCheckbox(curElement, draw)
-    } else if (isDirectHitRadio && !isReadonly) {
-      hitRadio(curElement, draw)
-    } else if (
-      curElement.controlComponent === ControlComponent.VALUE &&
-      (curElement.control?.type === ControlType.CHECKBOX ||
-        curElement.control?.type === ControlType.RADIO)
-    ) {
-      // 向左查找
-      let preIndex = curIndex
-      while (preIndex > 0) {
-        const preElement = elementList[preIndex]
-        if (preElement.controlComponent === ControlComponent.CHECKBOX) {
-          hitCheckbox(preElement, draw)
-          break
-        } else if (preElement.controlComponent === ControlComponent.RADIO) {
-          hitRadio(preElement, draw)
-          break
-        }
-        preIndex--
-      }
-    } else {
-      draw.render({
-        curIndex,
-        isCompute: false,
-        isSubmitHistory: false,
-        isSetCursor:
-          !isDirectHitImage && !isDirectHitCheckbox && !isDirectHitRadio
-      })
-    }
-    // 首字需定位到行首，非上一行最后一个字后
-    if (hitLineStartIndex) {
-      host.getDraw().getCursor().drawCursor({
-        hitLineStartIndex
-      })
-    }
-  }
-  // 标签点击事件
-    const eventBus = draw.getEventBus()
-  if (isDirectHitLabel && eventBus.isSubscribe('labelMousedown')) {
-    eventBus.emit('labelMousedown', {
-      evt,
-      element: curElement
-    })
-  }
-  // 预览工具组件
-  const previewer = draw.getPreviewer()
-  previewer.clearResizer()
-  if (isDirectHitImage) {
-    const previewerDrawOption: IPreviewerDrawOption = {
-      // 只读或控件外表单模式禁用拖拽
-      dragDisable:
-        isReadonly ||
-        (!curElement.controlId && draw.getMode() === EditorMode.FORM)
-    }
-    if (curElement.type === ElementType.LATEX) {
-      previewerDrawOption.mime = 'svg'
-      previewerDrawOption.srcKey = 'laTexSVG'
-    }
-    previewer.drawResizer(
-      curElement,
-      positionList[curIndex],
-      previewerDrawOption
-    )
-    // 光标事件代理丢失，重新定位
-    draw.getCursor().drawCursor({
-      isShow: false
-    })
-    // 点击图片允许拖拽调整位置
-    setRangeCache(host)
-    // 浮动元素创建镜像图片
-    if (
-      curElement.imgDisplay === ImageDisplay.SURROUND ||
-      curElement.imgDisplay === ImageDisplay.FLOAT_TOP ||
-      curElement.imgDisplay === ImageDisplay.FLOAT_BOTTOM
-    ) {
-      draw.getImageParticle().createFloatImage(curElement)
-    }
-    // 图片点击事件
-    if (eventBus.isSubscribe('imageMousedown')) {
-      eventBus.emit('imageMousedown', {
-        evt,
-        element: curElement
-      })
-    }
-  }
-  // 表格工具组件
-  const tableTool = draw.getTableTool()
-  tableTool.dispose()
-  if (isTable && !isReadonly && draw.getMode() !== EditorMode.FORM) {
-    tableTool.render()
-  }
-  // 超链接
-  const hyperlinkParticle = draw.getHyperlinkParticle()
-  hyperlinkParticle.clearHyperlinkPopup()
-  if (curElement.type === ElementType.HYPERLINK) {
-    if (isMod(evt)) {
-      hyperlinkParticle.openHyperlink(curElement)
-    } else {
-      hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex])
-    }
-  }
-  // 日期控件
-  const dateParticle = draw.getDateParticle()
-  dateParticle.clearDatePicker()
-  if (curElement.type === ElementType.DATE && !isReadonly) {
-    dateParticle.renderDatePicker(curElement, positionList[curIndex])
-  }
-}

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

@@ -1,14 +0,0 @@
-import { CanvasEvent } from '../CanvasEvent'
-
-export function mouseleave(evt: MouseEvent, host: CanvasEvent) {
-  const draw = host.getDraw()
-  // 鼠标移出页面时选区禁用
-  if (!draw.getOptions().pageOuterSelectionDisable) return
-  // 是否还在canvas内部
-  const pageContainer = draw.getPageContainer()
-  const { x, y, width, height } = pageContainer.getBoundingClientRect()
-  if (evt.x >= x && evt.x <= x + width && evt.y >= y && evt.y <= y + height) {
-    return
-  }
-  host.setIsAllowSelection(false)
-}