leave it up to user to terminate looping

packages/excalidraw/element/flowchart.test.tsx

@@ -310,95 +310,4 @@ describe("flow chart navigation", () => {
     Keyboard.keyUp(KEYS.ALT);
     expect(h.state.selectedElementIds[rectangle.id]).toBe(true);
   });
-
-  it("take the most obvious link when possible", () => {
-    /**
-     * ▨ → ▨   ▨ → ▨
-     *     ↓   ↑
-     *     ▨ → ▨
-     */
-
-    API.clearSelection();
-    const rectangle = API.createElement({
-      type: "rectangle",
-      width: 200,
-      height: 100,
-    });
-
-    API.setElements([rectangle]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_DOWN);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_UP);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    // last node should be the one that's selected
-    const rightMostNode = h.elements[h.elements.length - 2];
-    expect(rightMostNode.type).toBe("rectangle");
-    expect(h.state.selectedElementIds[rightMostNode.id]).toBe(true);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-
-    expect(h.state.selectedElementIds[rectangle.id]).toBe(true);
-
-    // going any direction takes us to the predecessor as well
-    const predecessorToRightMostNode = h.elements[h.elements.length - 4];
-    expect(predecessorToRightMostNode.type).toBe("rectangle");
-
-    API.setSelectedElements([rightMostNode]);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).not.toBe(true);
-    expect(h.state.selectedElementIds[predecessorToRightMostNode.id]).toBe(
-      true,
-    );
-    API.setSelectedElements([rightMostNode]);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_UP);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).not.toBe(true);
-    expect(h.state.selectedElementIds[predecessorToRightMostNode.id]).toBe(
-      true,
-    );
-    API.setSelectedElements([rightMostNode]);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_DOWN);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).not.toBe(true);
-    expect(h.state.selectedElementIds[predecessorToRightMostNode.id]).toBe(
-      true,
-    );
-  });
 });

packages/excalidraw/element/flowchart.ts

@@ -515,10 +515,7 @@ export class FlowChartNavigator {
    * Explore the flowchart by the given direction.
    *
    * The exploration follows a (near) breadth-first approach: when there're multiple
-   * nodes at the same level, we allow the user to traverse through them before
-   * moving to the next level.
-   *
-   * Unlike breadth-first search, we return to the first node at the same level.
+   * nodes at the same level, we allow the user to traverse through them.
    */
   exploreByDirection(element: ExcalidrawElement, direction: LinkDirection) {
     if (!isBindableElement(element)) {
@@ -543,15 +540,8 @@ export class FlowChartNavigator {
       direction === this.direction &&
       this.siblingNodes.length > 1
     ) {
-      this.siblingIndex++;
-
-      // there're more unexplored nodes at the same level
-      if (this.siblingIndex < this.siblingNodes.length) {
-        return this.goToNode(this.siblingNodes[this.siblingIndex].id);
-      }
-
-      this.goToNode(this.siblingNodes[0].id);
-      this.clear();
+      this.siblingIndex = (this.siblingIndex + 1) % this.siblingNodes.length;
+      return this.goToNode(this.siblingNodes[this.siblingIndex].id);
     }
 
     const nodes = [