editor-svg 1.0.0

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

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

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

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