Skip to content

Commit 77f9c0e

Browse files
fraxkenfraxken
authored
refactor: improve lock/unlock behavior (#319)
1 parent 559f3aa commit 77f9c0e

5 files changed

Lines changed: 127 additions & 93 deletions

File tree

‎public/common/utils.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ import { createExpandableSpan } from "../components/expandable/expandable";
77

88
window.activeLegendElement = null;
99

10+
export function vec2Distance(location, pos) {
11+
return Math.sqrt(
12+
Math.pow(location.x - pos.x, 2) + Math.pow(location.y - pos.y, 2)
13+
);
14+
}
15+
1016
export function getVCSRepositoryPathAndPlatform(url) {
1117
if (!url) {
1218
return null;

‎public/components/locker/locker.js‎

Lines changed: 49 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ export class Locker {
44
this.dom = document.getElementById("network-locker");
55
this.networkView = document.getElementById("network--view");
66
this.nsn = nsn;
7-
this.unlock();
7+
this.locked = false;
8+
this.unlockAuthorized = true;
9+
this.renderUnlock();
810

911
document.addEventListener("keydown", (event) => {
1012
const hotkeys = JSON.parse(localStorage.getItem("hotkeys"));
@@ -15,33 +17,62 @@ export class Locker {
1517
}
1618
}
1719
});
18-
this.dom.addEventListener("click", () => {
19-
this.auto();
20-
});
20+
this.dom.addEventListener("click", () => this.auto());
21+
this.nsn.network.on("highlight_done", this.highlightDone.bind(this));
22+
}
2123

22-
this.nsn.network.on("highlight_done", () => {
23-
this.unlock();
24-
});
24+
highlightDone() {
25+
if (!this.unlockAuthorized) {
26+
return;
27+
}
28+
29+
console.log("[LOCKER] highlight done emitted");
30+
this.unlockAuthorized = false;
31+
setTimeout(() => {
32+
this.unlockAuthorized = true;
33+
}, 1);
34+
35+
this.unlock();
2536
}
2637

2738
auto() {
28-
const wasLocked = this.locked === true;
39+
// Refuse locking if there is no multi selections
40+
if (this.nsn.lastHighlightedIds === null) {
41+
return;
42+
}
43+
2944
this[this.locked ? "unlock" : "lock"]();
45+
}
3046

31-
if (wasLocked) {
32-
if (window.networkNav.currentNodeParams === null) {
33-
this.nsn.resetHighlight();
34-
}
35-
else {
36-
this.nsn.neighbourHighlight(window.networkNav.currentNodeParams);
37-
}
47+
lock() {
48+
if (!this.locked) {
49+
console.log("[LOCKER] lock triggered");
50+
this.renderLock();
51+
this.locked = true;
3852
}
3953
}
4054

41-
lock(force = false) {
42-
if (window.networkNav.currentNodeParams !== null && !force) {
55+
unlock() {
56+
if (!this.locked) {
4357
return;
4458
}
59+
60+
console.log("[LOCKER] unlock triggered");
61+
this.renderUnlock();
62+
this.locked = false;
63+
64+
// No node selected, so we reset highlight
65+
const selectedNode = window.networkNav.currentNodeParams;
66+
if (selectedNode === null) {
67+
this.nsn.resetHighlight();
68+
}
69+
else if (this.nsn.lastHighlightedIds !== null) {
70+
this.nsn.lastHighlightedIds = null;
71+
this.nsn.neighbourHighlight(selectedNode);
72+
}
73+
}
74+
75+
renderLock() {
4576
this.dom.classList.add("enabled");
4677
this.dom.querySelector("p").textContent = "LOCKED";
4778
this.networkView.classList.add("locked");
@@ -50,12 +81,9 @@ export class Locker {
5081
iconElement.classList.remove("icon-lock-open");
5182
iconElement.classList.add("icon-lock");
5283
iconElement.classList.add("enabled");
53-
54-
this.nsn.lock();
55-
this.locked = true;
5684
}
5785

58-
unlock() {
86+
renderUnlock() {
5987
this.dom.classList.remove("enabled");
6088
this.dom.querySelector("p").textContent = "UNLOCKED";
6189
this.networkView.classList.remove("locked");
@@ -64,8 +92,5 @@ export class Locker {
6492
iconElement.classList.remove("icon-lock");
6593
iconElement.classList.remove("enabled");
6694
iconElement.classList.add("icon-lock-open");
67-
68-
this.nsn.unlock();
69-
this.locked = false;
7095
}
7196
}

‎public/components/searchbar/searchbar.js‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import semver from "semver";
33
import sizeSatisfies from "@nodesecure/size-satisfies";
44

55
// Import Internal Dependencies
6-
import { createDOMElement } from "../../common/utils.js";
6+
import { createDOMElement, vec2Distance } from "../../common/utils.js";
77

88
// CONSTANTS
99
const kFiltersName = new Set(["package", "version", "flag", "license", "author", "ext", "builtin", "size"]);
@@ -408,12 +408,28 @@ export class SearchBar {
408408
window.navigation.setNavByName("network--view");
409409
this.delayOpenSearchBar = false;
410410

411-
if (window.locker.locked) {
412-
this.network.resetHighlight();
413-
}
414411
this.network.highlightMultipleNodes(nodeIds);
415412
window.locker.lock();
416413

414+
const currentSelectedNode = window.networkNav.currentNodeParams;
415+
const moveTo = !currentSelectedNode || !nodeIds.includes(currentSelectedNode.nodes[0]);
416+
if (moveTo) {
417+
const origin = this.network.network.getViewPosition();
418+
const closestNode = nodeIds
419+
.map((id) => {
420+
return { id, pos: this.network.network.getPosition(id) };
421+
})
422+
.reduce(
423+
(a, b) => (vec2Distance(origin, a.pos) < vec2Distance(origin, b.pos) ? a : b)
424+
);
425+
426+
const scale = nodeIds.length > 3 ? 0.25 : 0.35;
427+
this.network.network.focus(closestNode.id, {
428+
animation: true,
429+
scale
430+
});
431+
}
432+
417433
this.close();
418434

419435
setTimeout(() => {

‎public/components/views/home/maintainers/maintainers.js‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -127,21 +127,27 @@ export class PopupMaintainer {
127127
globeElement.addEventListener("click", () => {
128128
const nodeIds = [...this.nsn.findNodeIds(new Set(packagesList))];
129129

130-
this.nsn.resetHighlight();
131130
this.nsn.highlightMultipleNodes(nodeIds);
132-
if (!window.locker.locked) {
133-
window.locker.lock(true);
134-
}
135-
131+
window.locker.lock();
136132
window.popup.close();
137133
window.navigation.setNavByName("network--view");
138134

139-
const moveTo = window.networkNav.currentNodeParams === null ||
140-
!nodeIds.includes(window.networkNav.currentNodeParams.nodes[0]);
135+
const currentSelectedNode = window.networkNav.currentNodeParams;
136+
const moveTo = currentSelectedNode === null || !nodeIds.includes(currentSelectedNode.nodes[0]);
141137
if (moveTo) {
142-
this.nsn.network.moveTo({
143-
position: this.nsn.network.getPosition(nodeIds[0]),
144-
animation: true
138+
const origin = this.nsn.network.getViewPosition();
139+
const closestNode = nodeIds
140+
.map((id) => {
141+
return { id, pos: this.nsn.network.getPosition(id) };
142+
})
143+
.reduce(
144+
(a, b) => (utils.vec2Distance(origin, a.pos) < utils.vec2Distance(origin, b.pos) ? a : b)
145+
);
146+
147+
const scale = nodeIds.length > 3 ? 0.25 : 0.35;
148+
this.nsn.network.focus(closestNode.id, {
149+
animation: true,
150+
scale
145151
});
146152
}
147153
});

‎workspaces/vis-network/src/network.js‎

Lines changed: 36 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ export default class NodeSecureNetwork {
7070
this.highlightEnabled = false;
7171
this.isLoaded = false;
7272

73-
this.locked = false;
7473
this.lastHighlightedIds = null;
7574
const { nodes, edges } = secureDataSet.build();
7675

@@ -107,24 +106,6 @@ export default class NodeSecureNetwork {
107106
this.network.stabilize(500);
108107
}
109108

110-
lock() {
111-
if (this.locked) {
112-
return;
113-
}
114-
115-
this.locked = true;
116-
this.network.emit("lock", this.locked);
117-
}
118-
119-
unlock() {
120-
if (!this.locked) {
121-
return;
122-
}
123-
124-
this.locked = false;
125-
this.network.emit("lock", this.locked);
126-
}
127-
128109
/**
129110
* @param {!Set<string>} packages
130111
* @returns {IterableIterator<number>}
@@ -214,8 +195,8 @@ export default class NodeSecureNetwork {
214195
}
215196

216197
highlightMultipleNodes(nodeIds) {
217-
if (this.locked) {
218-
return;
198+
if (this.lastHighlightedIds !== null) {
199+
this.resetHighlight();
219200
}
220201
this.network.startSimulation();
221202

@@ -266,6 +247,29 @@ export default class NodeSecureNetwork {
266247
this.network.stopSimulation();
267248
}
268249

250+
resetHighlight() {
251+
const allNodes = this.nodes.get();
252+
const allEdges = this.edges.get();
253+
254+
// reset all edge labels - even if user clicks on empty space
255+
for (let id = 0; id < allEdges.length; id++) {
256+
Object.assign(allEdges[id], CONSTANTS.LABELS.NONE);
257+
}
258+
259+
this.highlightEnabled = false;
260+
for (const node of allNodes) {
261+
const { id, hasWarnings } = this.linker.get(Number(node.id));
262+
263+
Object.assign(node, utils.getNodeColor(id, hasWarnings, this.theme));
264+
}
265+
266+
this.lastHighlightedIds = null;
267+
this.network.startSimulation();
268+
this.nodes.update(allNodes);
269+
this.edges.update(allEdges);
270+
this.network.stopSimulation();
271+
}
272+
269273
/**
270274
* Search for neighbours nodes of a given node
271275
*
@@ -287,6 +291,10 @@ export default class NodeSecureNetwork {
287291
}
288292

289293
lockedNeighbourHighlight(params) {
294+
if (this.lastHighlightedIds === null) {
295+
return false;
296+
}
297+
290298
if (!params || params.nodes.length === 0) {
291299
return true;
292300
}
@@ -296,7 +304,6 @@ export default class NodeSecureNetwork {
296304
return false;
297305
}
298306

299-
this.network.startSimulation();
300307
const allNodes = this.nodes.get({ returnType: "Object" });
301308
for (const node of Object.values(allNodes)) {
302309
if (!this.lastHighlightedIds.has(node.id)) {
@@ -328,47 +335,25 @@ export default class NodeSecureNetwork {
328335
}
329336

330337

338+
this.network.startSimulation();
331339
this.nodes.update(Object.values(allNodes));
332340
this.network.focus(selectedNode, {
333341
animation: true,
334342
scale: 0.35,
335-
offset: { x: 250, y: 0 }
343+
offset: { x: 150, y: 0 }
336344
});
337345
this.network.stopSimulation();
338346

339347
return true;
340348
}
341349

342-
resetHighlight() {
343-
this.network.startSimulation();
344-
345-
const allNodes = this.nodes.get();
346-
const allEdges = this.edges.get();
347-
348-
// reset all edge labels - even if user clicks on empty space
349-
for (let id = 0; id < allEdges.length; id++) {
350-
Object.assign(allEdges[id], CONSTANTS.LABELS.NONE);
351-
}
352-
353-
this.highlightEnabled = false;
354-
for (const node of allNodes) {
355-
const { id, hasWarnings } = this.linker.get(Number(node.id));
356-
357-
Object.assign(node, utils.getNodeColor(id, hasWarnings, this.theme));
358-
}
359-
360-
this.locked = false;
361-
this.lastHighlightedIds = null;
362-
363-
this.nodes.update(allNodes);
364-
this.edges.update(allEdges);
365-
this.network.stopSimulation();
366-
}
367-
368350
neighbourHighlight(params) {
369-
if (this.lastHighlightedIds !== null && this.locked && this.lockedNeighbourHighlight(params)) {
351+
if (this.lockedNeighbourHighlight(params)) {
352+
console.log("[NETWORK] locked, stop neighbour highlight");
353+
370354
return;
371355
}
356+
console.log("[NETWORK] neighbour highlight start");
372357

373358
const allNodes = this.nodes.get({ returnType: "Object" });
374359
const allEdges = this.edges.get();
@@ -425,11 +410,10 @@ export default class NodeSecureNetwork {
425410
}
426411
}
427412

428-
// offset set to 250 to compensate for the package info slide in on the left of screen
429413
this.network.focus(selectedNode, {
430414
animation: true,
431415
scale: 0.35,
432-
offset: { x: 250, y: 0 }
416+
offset: { x: 150, y: 0 }
433417
});
434418
}
435419
else if (this.highlightEnabled) {
@@ -441,10 +425,7 @@ export default class NodeSecureNetwork {
441425
}
442426
}
443427

444-
// transform the object into an array
445428
this.lastHighlightedIds = null;
446-
this.locked = false;
447-
448429
this.nodes.update(Object.values(allNodes));
449430
this.edges.update(allEdges);
450431
this.network.stopSimulation();

0 commit comments

Comments
 (0)