diff --git a/packages/excalidraw/element/flowchart.test.tsx b/packages/excalidraw/element/flowchart.test.tsx index f832b20e4a..4d6113a3ab 100644 --- a/packages/excalidraw/element/flowchart.test.tsx +++ b/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, - ); - }); }); diff --git a/packages/excalidraw/element/flowchart.ts b/packages/excalidraw/element/flowchart.ts index 1237b5ac18..2f11f37b72 100644 --- a/packages/excalidraw/element/flowchart.ts +++ b/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 = [