fix: cursor navigation across pages #229

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

@@ -205,55 +205,71 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) {
       }
     }
     const {
-      rowNo,
       index,
-      pageNo,
+      rowNo,
-      coordinate: { leftTop, rightTop }
+      rowIndex,
+      coordinate: {
+        leftTop: [curLeftX],
+        rightTop: [curRightX]
+      }
     } = anchorPosition
-    if ((isUp && rowNo !== 0) || (!isUp && rowNo !== draw.getRowCount())) {
+    // 向上时在首行、向下时再最尾则忽略
-      // 下一个光标点所在行位置集合
+    if (
-      const probablePosition = isUp
+      (isUp && rowIndex === 0) ||
-        ? positionList
+      (!isUp && rowIndex === draw.getRowCount() - 1)
-            .slice(0, index)
+    ) {
-            .filter(p => p.rowNo === rowNo - 1 && pageNo === p.pageNo)
+      return
-        : positionList
+    }
-            .slice(index, positionList.length - 1)
+    // 查找下一行信息
-            .filter(p => p.rowNo === rowNo + 1 && pageNo === p.pageNo)
+    const probablePosition: IElementPosition[] = []
-      // 查找与当前位置元素点交叉最多的位置
+    if (isUp) {
-      let maxIndex = 0
+      let p = index - 1
-      let maxDistance = 0
+      while (p > 0) {
-      for (let p = 0; p < probablePosition.length; p++) {
+        const position = positionList[p]
-        const position = probablePosition[p]
+        p--
-        // 当前光标在前
+        if (position.rowNo === rowNo) continue
         if (
-          position.coordinate.leftTop[0] >= leftTop[0] &&
+          probablePosition[0] &&
-          position.coordinate.leftTop[0] <= rightTop[0]
+          probablePosition[0].rowNo !== position.rowNo
         ) {
-          const curDistance = rightTop[0] - position.coordinate.leftTop[0]
-          if (curDistance > maxDistance) {
-            maxIndex = position.index
-            maxDistance = curDistance
           break
         }
+        probablePosition.unshift(position)
       }
-        // 当前光标在后
+    } else {
-        else if (
+      let p = index + 1
-          position.coordinate.leftTop[0] <= leftTop[0] &&
+      while (p < positionList.length) {
-          position.coordinate.rightTop[0] >= leftTop[0]
+        const position = positionList[p]
+        p++
+        if (position.rowNo === rowNo) continue
+        if (
+          probablePosition[0] &&
+          probablePosition[0].rowNo !== position.rowNo
         ) {
-          const curDistance = position.coordinate.rightTop[0] - leftTop[0]
-          if (curDistance > maxDistance) {
-            maxIndex = position.index
-            maxDistance = curDistance
           break
         }
+        probablePosition.push(position)
+      }
+    }
+    // 查找下一行位置：第一个存在交叉宽度的元素位置
+    let nextIndex = 0
+    for (let p = 0; p < probablePosition.length; p++) {
+      const nextPosition = probablePosition[p]
+      const {
+        coordinate: {
+          leftTop: [nextLeftX],
+          rightTop: [nextRightX]
         }
-        // 匹配不到
+      } = nextPosition
-        if (p === probablePosition.length - 1 && maxIndex === 0) {
+      if (p === probablePosition.length - 1) {
-          maxIndex = position.index
+        nextIndex = nextPosition.index
       }
+      if (curRightX <= nextLeftX || curLeftX >= nextRightX) continue
+      nextIndex = nextPosition.index
+      break
     }
-      const curIndex = maxIndex
+    if (!nextIndex) return
+    const curIndex = nextIndex
     // shift则缩放选区
     let anchorStartIndex = curIndex
     let anchorEndIndex = curIndex
@@ -284,7 +300,6 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) {
       isSubmitHistory: false,
       isCompute: false
     })
-    }
   } else if (isMod(evt) && evt.key === KeyMap.Z) {
     if (isReadonly) return
     historyManager.undo()