Skip to content

Commit 746f7bb

Browse files
ThomaashThomaash
authored
fix(selection): highlight selected nodes when set programatically (#1138)
1 parent daecc5e commit 746f7bb

File tree

2 files changed

+57
-39
lines changed

2 files changed

+57
-39
lines changed

‎cypress/integration/functional/selections.spec.ts renamed to ‎cypress/integration/visual/selection.spec.ts

Lines changed: 49 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
1-
import { Point, VisEvent } from "../helpers";
2-
3-
const NETWORK_DATA = {
4-
nodes: [
5-
{ id: "N_1", label: "node 1", x: 0, y: 0 },
6-
{ id: "N_2", label: "node 2", x: 200, y: 0 },
7-
{ id: "N_3", label: "node 3", x: 0, y: 200 },
8-
{ id: "N_4", label: "node 4", x: -200, y: 0 },
9-
{ id: "N_5", label: "node 5", x: 0, y: -200 },
10-
],
11-
edges: [
12-
{ id: "E_1-2", label: "edge 1-2", from: "N_1", to: "N_2" },
13-
{ id: "E_1-3", label: "edge 1-3", from: "N_1", to: "N_3" },
14-
{ id: "E_1-4", label: "edge 1-4", from: "N_1", to: "N_4" },
15-
{ id: "E_1-5", label: "edge 1-5", from: "N_1", to: "N_5" },
1+
context("Selection", (): void => {
2+
beforeEach((): void => {
3+
cy.visVisitUniversal(
4+
{
5+
nodes: [
6+
{ id: "N_1", label: "node 1", x: 0, y: 0 },
7+
{ id: "N_2", label: "node 2", x: 200, y: 0 },
8+
{ id: "N_3", label: "node 3", x: 0, y: 200 },
9+
{ id: "N_4", label: "node 4", x: -200, y: 0 },
10+
{ id: "N_5", label: "node 5", x: 0, y: -200 },
11+
],
12+
edges: [
13+
{ id: "E_1-2", label: "edge 1-2", from: "N_1", to: "N_2" },
14+
{ id: "E_1-3", label: "edge 1-3", from: "N_1", to: "N_3" },
15+
{ id: "E_1-4", label: "edge 1-4", from: "N_1", to: "N_4" },
16+
{ id: "E_1-5", label: "edge 1-5", from: "N_1", to: "N_5" },
1617

17-
{ id: "E_2-3", label: "edge 2-3", from: "N_2", to: "N_3" },
18-
{ id: "E_3-4", label: "edge 3-4", from: "N_3", to: "N_4" },
19-
{ id: "E_4-5", label: "edge 4-5", from: "N_4", to: "N_5" },
20-
{ id: "E_5-2", label: "edge 5-2", from: "N_5", to: "N_2" },
21-
],
22-
physics: false,
23-
};
18+
{ id: "E_2-3", label: "edge 2-3", from: "N_2", to: "N_3" },
19+
{ id: "E_3-4", label: "edge 3-4", from: "N_3", to: "N_4" },
20+
{ id: "E_4-5", label: "edge 4-5", from: "N_4", to: "N_5" },
21+
{ id: "E_5-2", label: "edge 5-2", from: "N_5", to: "N_2" },
22+
],
23+
physics: false,
24+
},
25+
{ requireNewerVersionThan: "8.5.0" }
26+
);
27+
});
2428

25-
context("Drags", (): void => {
2629
it("Select one by click", function (): void {
27-
cy.visVisitUniversal(NETWORK_DATA);
28-
2930
cy.visClickPoint({ x: 500 + 0, y: 500 + 0 });
3031
cy.visAssertSelection({
3132
nodes: ["N_1"],
@@ -37,10 +38,11 @@ context("Drags", (): void => {
3738
nodes: ["N_2"],
3839
edges: ["E_5-2", "E_1-2", "E_2-3"],
3940
});
41+
42+
cy.visSnapshotOpenedPage("select-one-by-click");
4043
});
4144

4245
it("Select none by single drag", function (): void {
43-
cy.visVisitUniversal(NETWORK_DATA);
4446
cy.visDrag([
4547
{
4648
from: { x: 500 + 200 + 70, y: 500 + 200 - 70 },
@@ -53,10 +55,11 @@ context("Drags", (): void => {
5355
nodes: [],
5456
edges: [],
5557
});
58+
59+
cy.visSnapshotOpenedPage("select-none-by-single-drag");
5660
});
5761

5862
it("Select one by single drag (TL to BR)", function (): void {
59-
cy.visVisitUniversal(NETWORK_DATA);
6063
cy.visDrag([
6164
{
6265
from: { x: 500 + 0 - 70, y: 500 + 0 - 70 },
@@ -69,10 +72,11 @@ context("Drags", (): void => {
6972
nodes: ["N_1"],
7073
edges: ["E_1-2", "E_1-3", "E_1-4", "E_1-5"],
7174
});
75+
76+
cy.visSnapshotOpenedPage("select-one-by-single-drag-(TL_to_BR)");
7277
});
7378

7479
it("Select three by single drag (BR to TL)", function (): void {
75-
cy.visVisitUniversal(NETWORK_DATA);
7680
cy.visDrag([
7781
{
7882
from: { x: 500 + 200 + 70, y: 500 + 200 + 70 },
@@ -85,11 +89,11 @@ context("Drags", (): void => {
8589
nodes: ["N_1", "N_2", "N_3"],
8690
edges: ["E_1-2", "E_1-3", "E_1-4", "E_1-5", "E_3-4", "E_2-3", "E_5-2"],
8791
});
92+
93+
cy.visSnapshotOpenedPage("select-three-by-single-drag-(BR_to_TL)");
8894
});
8995

9096
it("Select three by two drags (TR to BL then BL to TR)", function (): void {
91-
cy.visVisitUniversal(NETWORK_DATA);
92-
9397
cy.visDrag([
9498
{
9599
from: { x: 500 + 0 + 70, y: 500 + 0 - 70 },
@@ -115,5 +119,20 @@ context("Drags", (): void => {
115119
nodes: ["N_1", "N_2", "N_3"],
116120
edges: ["E_1-2", "E_1-3", "E_1-4", "E_1-5", "E_3-4", "E_2-3", "E_5-2"],
117121
});
122+
123+
cy.visSnapshotOpenedPage(
124+
"select-three-by-two-drags-(TR_to_BL_then_BL_to_TR)"
125+
);
126+
});
127+
128+
it("Select via method", function (): void {
129+
cy.visRun(({ network }): void => {
130+
network.setSelection({
131+
nodes: ["N_1", "N_3"],
132+
edges: ["E_1-2", "E_1-3", "E_1-4", "E_1-5", "E_3-4", "E_2-3"],
133+
});
134+
});
135+
136+
cy.visSnapshotOpenedPage("select-via-method");
118137
});
119138
});

‎lib/network/modules/SelectionHandler.js

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -641,18 +641,18 @@ class SelectionHandler {
641641
* @param {object} options Options
642642
*/
643643
setSelection(selection, options = {}) {
644-
let i, id;
644+
if (!selection || (!selection.nodes && !selection.edges)) {
645+
throw new TypeError(
646+
"Selection must be an object with nodes and/or edges properties"
647+
);
648+
}
645649

646-
if (!selection || (!selection.nodes && !selection.edges))
647-
throw "Selection must be an object with nodes and/or edges properties";
648650
// first unselect any selected node, if option is true or undefined
649651
if (options.unselectAll || options.unselectAll === undefined) {
650652
this.unselectAll();
651653
}
652654
if (selection.nodes) {
653-
for (i = 0; i < selection.nodes.length; i++) {
654-
id = selection.nodes[i];
655-
655+
for (const id of selection.nodes) {
656656
const node = this.body.nodes[id];
657657
if (!node) {
658658
throw new RangeError('Node with id "' + id + '" not found');
@@ -663,9 +663,7 @@ class SelectionHandler {
663663
}
664664

665665
if (selection.edges) {
666-
for (i = 0; i < selection.edges.length; i++) {
667-
id = selection.edges[i];
668-
666+
for (const id of selection.edges) {
669667
const edge = this.body.edges[id];
670668
if (!edge) {
671669
throw new RangeError('Edge with id "' + id + '" not found');
@@ -674,6 +672,7 @@ class SelectionHandler {
674672
}
675673
}
676674
this.body.emitter.emit("_requestRedraw");
675+
this._selectionAccumulator.commit();
677676
}
678677

679678
/**

0 commit comments

Comments
 (0)