Skip to content

Commit 7e708a5

Browse files
AlexIchenskiyAlexIchenskiy
authored
New: Add properties setters and getters (#93)
* New: Add node properties setters * New: Add edge properties setters * New: Add properties getters * New: Add patch for nodes and edges * Fix: Make getters return copies * Fix: Edge factory listeners copying * Fix: Jest outdated tests * Fix: Github actions node version * Chore: Refactor observer interface * Chore: Refactor node/edge constructor settings * Chore: Refactor node/edge function grouping * Chore: Refactor node/edge function grouping * Fix: Listeners behaviour * Chore: Refactor property copying * Chore: Refactor subject implementation * Fix: Set position behaviour on node drag * Chore: Upgrade node version * Chore: Refactor function type check * Fix: Remove listener behaviour * Chore: Refactor util naming * Chore: Remove unused type assertion * Chore: Refactor position setter options * Chore: Refactor property patch function * Fix: Set map node position behaviour * Chore: Refactor simulator data patching * Chore: Change observers to callbacks * New: Add state setters with options (#95) * New: Add state setters with options * Chore: Remove leftover comments * Chore: Refactor state setter logic * Chore: Refactor state types * Fix: Rename merged function usage * Fix: Merged variable naming * Chore: Fix tests
1 parent 3b74263 commit 7e708a5

36 files changed

+2068
-1750
lines changed

‎.github/workflows/build.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ jobs:
99
- uses: actions/checkout@v1
1010
- uses: actions/setup-node@v1
1111
with:
12-
node-version: "16.x"
12+
node-version: "18.x"
1313

1414
- name: 'Install'
1515
run: npm ci

‎.github/workflows/release.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ jobs:
1212
- uses: actions/checkout@v1
1313
- uses: actions/setup-node@v1
1414
with:
15-
node-version: "16.x"
15+
node-version: "18.x"
1616

1717
- name: 'Install'
1818
run: npm ci

‎examples/example-custom-styled-graph.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@ <h1>Example 2 - Basic + Custom default style</h1>
5858
colorHover: '#e7644e',
5959
colorSelected: '#e7644e',
6060
fontSize: 3,
61-
label: node.data.label,
61+
label: node.getData().label,
6262
size: 6,
6363
};
6464

65-
if (node.data.label === 'Node A') {
65+
if (node.getData().label === 'Node A') {
6666
return {
6767
...basicStyle,
6868
size: 10,
@@ -84,7 +84,7 @@ <h1>Example 2 - Basic + Custom default style</h1>
8484
width: 0.3,
8585
widthHover: 0.9,
8686
widthSelected: 0.9,
87-
label: edge.data.label,
87+
label: edge.getData().label,
8888
};
8989
},
9090
});

‎examples/example-fixed-coordinates-graph.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h1>Example 3 - Fixed coordinates</h1>
4343
];
4444

4545
const orb = new Orb.OrbView(container, {
46-
getPosition: (node) => ({ x: node.data.x, y: node.data.y })
46+
getPosition: (node) => ({ x: node.getData().x, y: node.getData().y })
4747
});
4848

4949
// Initialize nodes and edges
@@ -59,7 +59,7 @@ <h1>Example 3 - Fixed coordinates</h1>
5959
colorHover: '#e7644e',
6060
colorSelected: '#e7644e',
6161
fontSize: 3,
62-
label: node.data.label,
62+
label: node.getData().label,
6363
size: 6,
6464
};
6565
},
@@ -72,7 +72,7 @@ <h1>Example 3 - Fixed coordinates</h1>
7272
width: 0.3,
7373
widthHover: 0.9,
7474
widthSelected: 0.9,
75-
label: edge.data.label,
75+
label: edge.getData().label,
7676
};
7777
},
7878
});

‎examples/example-graph-data-changes.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ <h1>Example 5 - Dynamics</h1>
5757
colorHover: '#e7644e',
5858
colorSelected: '#e7644e',
5959
fontSize: 3,
60-
label: node.data.label,
60+
label: node.getData().label,
6161
size: 6,
6262
};
6363
},
@@ -70,7 +70,7 @@ <h1>Example 5 - Dynamics</h1>
7070
width: 0.3,
7171
widthHover: 0.9,
7272
widthSelected: 0.9,
73-
label: edge.data.label,
73+
label: edge.getData().label,
7474
};
7575
},
7676
});
@@ -97,7 +97,7 @@ <h1>Example 5 - Dynamics</h1>
9797
if (currentNodes.length) {
9898
const newEdge = {
9999
id: n,
100-
start: currentNodes[Math.floor(Math.random() * currentNodes.length)].id,
100+
start: currentNodes[Math.floor(Math.random() * currentNodes.length)].getId(),
101101
end: n,
102102
label: `Edge ${n} (new)`
103103
};
@@ -115,7 +115,7 @@ <h1>Example 5 - Dynamics</h1>
115115

116116
orb.events.on(Orb.OrbEventType.NODE_CLICK, (event) => {
117117
console.log('Node clicked: ', event.node);
118-
orb.data.remove({ nodeIds: [event.node.id] });
118+
orb.data.remove({ nodeIds: [event.node.getId()] });
119119
orb.render();
120120
});
121121

‎examples/example-graph-events.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ <h1>Example 4 - Events</h1>
6565
colorHover: '#e7644e',
6666
colorSelected: '#e7644e',
6767
fontSize: 3,
68-
label: node.data.label,
68+
label: node.getData().label,
6969
size: 6,
7070
};
7171
},
@@ -78,7 +78,7 @@ <h1>Example 4 - Events</h1>
7878
width: 0.3,
7979
widthHover: 0.9,
8080
widthSelected: 0.9,
81-
label: edge.data.label,
81+
label: edge.getData().label,
8282
};
8383
},
8484
});
@@ -103,27 +103,27 @@ <h1>Example 4 - Events</h1>
103103

104104
orb.events.on(Orb.OrbEventType.NODE_CLICK, (event) => {
105105
console.log('Event: node-click', event);
106-
output.innerHTML = `<b>${event.node.data.label}</b> clicked!`;
106+
output.innerHTML = `<b>${event.node.getData().label}</b> clicked!`;
107107
});
108108
orb.events.on(Orb.OrbEventType.NODE_HOVER, (event) => {
109109
console.log('Event: node-hover', event);
110-
output.innerHTML = `<b>${event.node.data.label}</b> hovered!`;
110+
output.innerHTML = `<b>${event.node.getData().label}</b> hovered!`;
111111
});
112112
orb.events.on(Orb.OrbEventType.EDGE_CLICK, (event) => {
113113
console.log('Event: edge-click', event);
114-
output.innerHTML = `Edge with id <b>${event.edge.data.id}</b> clicked!`;
114+
output.innerHTML = `Edge with id <b>${event.edge.getData().id}</b> clicked!`;
115115
});
116116

117117
orb.events.on(Orb.OrbEventType.NODE_RIGHT_CLICK, (data) => {
118118
data.event.preventDefault();
119119
console.log("Event: node-right-click", data);
120-
output.innerHTML = `<b>${data.node.data.label}</b> right clicked!`;
120+
output.innerHTML = `<b>${data.node.getData().label}</b> right clicked!`;
121121
})
122122

123123
orb.events.on(Orb.OrbEventType.EDGE_RIGHT_CLICK, (data) => {
124124
data.event.preventDefault();
125125
console.log("Event: edge-right-click", data);
126-
output.innerHTML = `Edge with id <b>${data.edge.data.id}</b> right clicked!`;
126+
output.innerHTML = `Edge with id <b>${data.edge.getData().id}</b> right clicked!`;
127127
})
128128

129129
orb.events.on(Orb.OrbEventType.MOUSE_RIGHT_CLICK, (data) => {
@@ -136,12 +136,12 @@ <h1>Example 4 - Events</h1>
136136

137137
orb.events.on(Orb.OrbEventType.NODE_DOUBLE_CLICK, (data) => {
138138
console.log("Event: node-double-click", data);
139-
output.innerHTML = `<b>${data.node.data.label}</b> double clicked!`;
139+
output.innerHTML = `<b>${data.node.getData().label}</b> double clicked!`;
140140
})
141141

142142
orb.events.on(Orb.OrbEventType.EDGE_DOUBLE_CLICK, (data) => {
143143
console.log("Event: edge-double-click", data);
144-
output.innerHTML = `Edge with id <b>${data.edge.data.id}</b> double clicked!`;
144+
output.innerHTML = `Edge with id <b>${data.edge.getData().id}</b> double clicked!`;
145145
})
146146

147147
orb.events.on(Orb.OrbEventType.MOUSE_DOUBLE_CLICK, (data) => {

‎examples/example-graph-on-map.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ <h1>Example 6 - Map</h1>
4545
];
4646

4747
const orb = new Orb.OrbMapView(container, {
48-
getGeoPosition: (node) => ({ lat: node.data.lat, lng: node.data.lng, }),
48+
getGeoPosition: (node) => ({ lat: node.getData().lat, lng: node.getData().lng, }),
4949
});
5050

5151
// Assign a basic style
@@ -58,7 +58,7 @@ <h1>Example 6 - Map</h1>
5858
colorHover: '#e7644e',
5959
colorSelected: '#e7644e',
6060
fontSize: 10,
61-
label: node.data.label,
61+
label: node.getData().label,
6262
size: 6,
6363
};
6464
},
@@ -71,7 +71,7 @@ <h1>Example 6 - Map</h1>
7171
width: 1,
7272
widthHover: 0.9,
7373
widthSelected: 0.9,
74-
label: edge.data.label,
74+
label: edge.getData().label,
7575
};
7676
},
7777
});

‎examples/playground.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
colorHover: '#e7644e',
4242
colorSelected: '#e7644e',
4343
fontSize: 3,
44-
label: node.data.labels[0],
44+
label: node.getData().labels[0],
4545
size: 6,
4646
};
4747
},
@@ -54,15 +54,15 @@
5454
width: 0.3,
5555
widthHover: 0.9,
5656
widthSelected: 0.9,
57-
label: edge.data.label,
57+
label: edge.getData().label,
5858
};
5959
},
6060
};
6161
};
6262

6363
const getOrbMapView = (container) => {
6464
const view = new Orb.OrbMapView(container, {
65-
getGeoPosition: (node) => ({ lat: node.data.lat, lng: node.data.lng, }),
65+
getGeoPosition: (node) => ({ lat: node.getData().lat, lng: node.getData().lng, }),
6666
});
6767

6868
// Assign a basic style

‎examples/simulator-scenarios.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -2417,7 +2417,7 @@ <h4 class="scenario-title">
24172417
})),
24182418
edges: [...Array(newNodeCount).keys()].map((key) => ({
24192419
id: oldNodeCount + key,
2420-
start: key ? oldNodeCount + key : (sourceNode?.id || 0),
2420+
start: key ? oldNodeCount + key : (sourceNode?.getId() || 0),
24212421
end: oldNodeCount + key + 1
24222422
})),
24232423
});
@@ -2455,8 +2455,8 @@ <h4 class="scenario-title">
24552455

24562456
const graphStyle = {
24572457
getNodeStyle(node) {
2458-
const isNewNode = node.id >= NODE_COUNT;
2459-
const isFixed = node.data.x !== undefined && node.data.y !== undefined;
2458+
const isNewNode = node.getId() >= NODE_COUNT;
2459+
const isFixed = node.getData().x !== undefined && node.getData().y !== undefined;
24602460

24612461
// Old nodes
24622462
let color = isFixed ? '#5B0078' : '#003A58';
@@ -2476,7 +2476,7 @@ <h4 class="scenario-title">
24762476
colorSelected,
24772477
fontSize: 4,
24782478
fontColor: '#000000',
2479-
label: node.data.label,
2479+
label: node.getData().label,
24802480
size: 6,
24812481
};
24822482
},
@@ -2490,7 +2490,7 @@ <h4 class="scenario-title">
24902490
width: 1.2,
24912491
widthHover: 1.3,
24922492
widthSelected: 1.5,
2493-
label: edge.data.label,
2493+
label: edge.getData().label,
24942494
};
24952495
},
24962496
};
@@ -2501,7 +2501,7 @@ <h4 class="scenario-title">
25012501
const container = document.getElementById(graphContainerId);
25022502

25032503
let orb = new Orb.OrbView(container, {
2504-
getPosition: (node) => ({ x: node.data.x, y: node.data.y })
2504+
getPosition: (node) => ({ x: node.getData().x, y: node.getData().y })
25052505
});
25062506

25072507
// Assign a basic style
@@ -2603,7 +2603,7 @@ <h4 class="scenario-title">
26032603
const container = document.getElementById(graphContainerId);
26042604

26052605
let orb = new Orb.OrbView(container, {
2606-
getPosition: (node) => ({ x: node.data.x, y: node.data.y }),
2606+
getPosition: (node) => ({ x: node.getData().x, y: node.getData().y }),
26072607
simulation: {
26082608
isPhysicsEnabled,
26092609
}
@@ -2741,10 +2741,10 @@ <h4 class="scenario-title">
27412741

27422742
// Delete all nodes
27432743
const deleteAllNodes = (orb) => {
2744-
console.log('orb', orb.data.getNodes(), orb.data.getNodes().map((node) => node.id))
2744+
console.log('orb', orb.data.getNodes(), orb.data.getNodes().map((node) => node.getId()))
27452745
orb.data.remove({
2746-
nodeIds: orb.data.getNodes().map((node) => node.id),
2747-
edgeIds: orb.data.getEdges().map((edge) => edge.id),
2746+
nodeIds: orb.data.getNodes().map((node) => node.getId()),
2747+
edgeIds: orb.data.getEdges().map((edge) => edge.getId()),
27482748
});
27492749
orb.render(() => {
27502750
setTimeout(() => {

0 commit comments

Comments
 (0)