smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

leave it up to user to terminate looping

Browse source
This commit is contained in:
Ryan Di 2025-02-24 12:51:39 +11:00
parent 247d6e2a2e
commit 880afd12c9
2 changed files with 3 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

91
packages/excalidraw/element/flowchart.test.tsx
View file

@ -310,95 +310,4 @@ describe("flow chart navigation", () => {
Keyboard.keyUp(KEYS.ALT); Keyboard.keyUp(KEYS.ALT);
expect(h.state.selectedElementIds[rectangle.id]).toBe(true); 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,
);
});
}); });

16
packages/excalidraw/element/flowchart.ts
View file

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