|
1 | 1 | (function () { |
2 | | - var nodes = new vis.DataSet([]); |
| 2 | + const nodes = new vis.DataSet([]); |
3 | 3 |
|
4 | | - var rootNodes = []; |
| 4 | + const rootNodes = []; |
5 | 5 | rootNodes.forEach(nodeId => { |
6 | 6 | nodes.get(nodeId).color = { |
7 | 7 | background: "#00FF00" // rootNode background color |
8 | 8 | }; |
9 | 9 | }); |
10 | 10 |
|
11 | | - var arrowAttr = { |
| 11 | + const arrowAttr = { |
12 | 12 | to: { |
13 | 13 | enabled: true, |
14 | 14 | type: "triangle" // edge arrow to type |
15 | 15 | } |
16 | 16 | }; |
17 | | - var edges = new vis.DataSet([]); |
| 17 | + const edges = new vis.DataSet([]); |
18 | 18 |
|
19 | | - var data = { |
| 19 | + const data = { |
20 | 20 | nodes: nodes, |
21 | 21 | edges: edges |
22 | 22 | }; |
23 | | - var options = { |
| 23 | + let options = { |
24 | 24 | edges: { |
25 | 25 | smooth: false // Make edges straight lines. |
26 | 26 | }, |
|
30 | 30 | } |
31 | 31 | }; |
32 | 32 | setRandomLayout(); |
33 | | - var container = document.getElementById('network'); |
34 | | - var network = new vis.Network(container, data, options); |
35 | | - var seed = network.getSeed(); |
| 33 | + const container = document.getElementById('network'); |
| 34 | + let network = new vis.Network(container, data, options); |
| 35 | + let seed = network.getSeed(); |
| 36 | + let nodePositions = []; |
| 37 | + |
36 | 38 | network.on("stabilizationIterationsDone", function () { |
37 | 39 | network.setOptions({ |
38 | 40 | physics: false |
|
48 | 50 | let mouseX = mouseY = 0; |
49 | 51 | let selection; |
50 | 52 | // get the vis.js canvas |
51 | | - var graphDiv = document.getElementById('network'); |
52 | | - var visDiv = graphDiv.firstElementChild; |
53 | | - var graphCanvas = visDiv.firstElementChild; |
| 53 | + const graphDiv = document.getElementById('network'); |
| 54 | + const visDiv = graphDiv.firstElementChild; |
| 55 | + const graphCanvas = visDiv.firstElementChild; |
54 | 56 | const selectionLayer = document.getElementById('selectionLayer'); |
55 | 57 | const selectionCanvas = selectionLayer.firstElementChild; |
56 | 58 | let selectionCanvasContext; |
|
65 | 67 | saveAsDgmlButton.addEventListener('click', saveAsDgml); |
66 | 68 | const saveAsDotButton = document.getElementById('saveAsDotButton'); |
67 | 69 | saveAsDotButton.addEventListener('click', saveAsDot); |
| 70 | + const regenerateGraphButton = document.getElementById('regenerateGraphButton'); |
| 71 | + regenerateGraphButton.addEventListener('click', regenerateGraph); |
68 | 72 | const saveSelectionAsPngButton = document.getElementById('saveSelectionAsPngButton'); |
69 | 73 | saveSelectionAsPngButton.addEventListener('click', saveSelectionAsPng); |
70 | | - const copyToClipboardButton = document.getElementById('copyToClipboardButton'); |
71 | | - copyToClipboardButton.addEventListener('click', copyToClipboard); |
72 | | - copyToClipboardButton.style['display'] = 'none'; // TODO: Remove when copyToClipboard is implemented |
73 | 74 | const showHierarchicalOptionsButton = document.getElementById('showHierarchicalOptions'); |
74 | 75 | showHierarchicalOptionsButton.addEventListener('click', setNetworkLayout); |
75 | 76 | const hierarchicalDirectionSelect = document.getElementById('direction'); |
76 | 77 | hierarchicalDirectionSelect.addEventListener('change', setNetworkLayout); |
77 | 78 | const hierarchicalSortMethodSelect = document.getElementById('sortMethod'); |
78 | 79 | hierarchicalSortMethodSelect.addEventListener('change', setNetworkLayout); |
| 80 | + const hierarchicalOptionsSortMethodSelect = document.getElementById('sortMethod'); |
79 | 81 |
|
80 | 82 | function mouseUpEventListener(event) { |
81 | 83 | // Convert the canvas to image data that can be saved |
|
128 | 130 | } |
129 | 131 |
|
130 | 132 | function showGuideLines() { |
131 | | - var tmpSelectionCanvasContext = selectionCanvas.getContext("2d"); |
| 133 | + const tmpSelectionCanvasContext = selectionCanvas.getContext("2d"); |
132 | 134 | tmpSelectionCanvasContext.clearRect(0, 0, selectionCanvas.width, selectionCanvas.height); |
133 | 135 | drawGuideLine(tmpSelectionCanvasContext, mouseX, -1); |
134 | 136 | drawGuideLine(tmpSelectionCanvasContext, -1, mouseY); |
|
157 | 159 | } |
158 | 160 |
|
159 | 161 | function saveSelectionAsPng() { |
160 | | - graphDiv = document.getElementById('network'); |
161 | | - visDiv = graphDiv.firstElementChild; |
162 | | - graphCanvas = visDiv.firstElementChild; |
163 | | - |
164 | 162 | // show the help text |
165 | 163 | helpTextDiv.style['display'] = 'block'; |
166 | 164 |
|
|
180 | 178 | } |
181 | 179 |
|
182 | 180 | function saveAsPng() { |
183 | | - graphDiv = document.getElementById('network'); |
184 | | - visDiv = graphDiv.firstElementChild; |
185 | | - graphCanvas = visDiv.firstElementChild; |
186 | 181 | // Calculate the bounding box of all the elements on the canvas |
187 | 182 | const boundingBox = getBoundingBox(); |
188 | 183 |
|
|
204 | 199 | } |
205 | 200 |
|
206 | 201 | function getBoundingBox() { |
207 | | - var ctx = graphCanvas.getContext('2d'); |
| 202 | + const ctx = graphCanvas.getContext('2d'); |
208 | 203 | const imgData = ctx.getImageData(0, 0, graphCanvas.width, graphCanvas.height); |
209 | | - var bytesPerPixels = 4; |
210 | | - var cWidth = graphCanvas.width * bytesPerPixels; |
211 | | - var cHeight = graphCanvas.height; |
212 | | - var minY = minX = maxY = maxX = -1; |
213 | | - for (var y = cHeight; y > 0 && maxY === -1; y--) { |
214 | | - for (var x = 0; x < cWidth; x += bytesPerPixels) { |
215 | | - var arrayPos = x + y * cWidth; |
| 204 | + const bytesPerPixels = 4; |
| 205 | + const cWidth = graphCanvas.width * bytesPerPixels; |
| 206 | + const cHeight = graphCanvas.height; |
| 207 | + let minY = minX = maxY = maxX = -1; |
| 208 | + for (let y = cHeight; y > 0 && maxY === -1; y--) { |
| 209 | + for (let x = 0; x < cWidth; x += bytesPerPixels) { |
| 210 | + const arrayPos = x + y * cWidth; |
216 | 211 | if (imgData.data[arrayPos + 3] > 0 && maxY === -1) { |
217 | 212 | maxY = y; |
218 | 213 | break; |
219 | 214 | } |
220 | 215 | } |
221 | 216 | } |
222 | | - for (var x = cWidth; x >= 0 && maxX === -1; x -= bytesPerPixels) { |
223 | | - for (var y = 0; y < maxY; y++) { |
224 | | - var arrayPos = x + y * cWidth; |
| 217 | + for (let x = cWidth; x >= 0 && maxX === -1; x -= bytesPerPixels) { |
| 218 | + for (let y = 0; y < maxY; y++) { |
| 219 | + const arrayPos = x + y * cWidth; |
225 | 220 | if (imgData.data[arrayPos + 3] > 0 && maxX === -1) { |
226 | 221 | maxX = x / bytesPerPixels; |
227 | 222 | break; |
228 | 223 | } |
229 | 224 | } |
230 | 225 | } |
231 | | - for (var x = 0; x < maxX * bytesPerPixels && minX === -1; x += bytesPerPixels) { |
232 | | - for (var y = 0; y < maxY; y++) { |
233 | | - var arrayPos = x + y * cWidth; |
| 226 | + for (let x = 0; x < maxX * bytesPerPixels && minX === -1; x += bytesPerPixels) { |
| 227 | + for (let y = 0; y < maxY; y++) { |
| 228 | + const arrayPos = x + y * cWidth; |
234 | 229 | if (imgData.data[arrayPos + 3] > 0 && minX === -1) { |
235 | 230 | minX = x / bytesPerPixels; |
236 | 231 | break; |
237 | 232 | } |
238 | 233 | } |
239 | 234 | } |
240 | | - for (var y = 0; y < maxY && minY === -1; y++) { |
241 | | - for (var x = minX * bytesPerPixels; x < maxX * bytesPerPixels; x += bytesPerPixels) { |
242 | | - var arrayPos = x + y * cWidth; |
| 235 | + for (let y = 0; y < maxY && minY === -1; y++) { |
| 236 | + for (let x = minX * bytesPerPixels; x < maxX * bytesPerPixels; x += bytesPerPixels) { |
| 237 | + const arrayPos = x + y * cWidth; |
243 | 238 | if (imgData.data[arrayPos + 3] > 0 && minY === -1) { |
244 | 239 | minY = y; |
245 | 240 | break; |
|
308 | 303 | return cleanedLabel; |
309 | 304 | } |
310 | 305 |
|
311 | | - function copyToClipboard() { |
312 | | - console.log('Not implemented yet...'); |
| 306 | + function regenerateGraph() { |
| 307 | + seed = Math.random(); |
| 308 | + nodes.forEach(function (node) { |
| 309 | + nodes.update({ |
| 310 | + id: node.id, |
| 311 | + fixed: false, |
| 312 | + x: undefined, |
| 313 | + y: undefined |
| 314 | + }); |
| 315 | + }); |
| 316 | + setNetworkLayout(); |
313 | 317 | } |
314 | 318 |
|
315 | 319 | function setRandomLayout() { |
|
351 | 355 | const hierarchicalOptionsSortMethod = document.getElementById('hierarchicalOptions_sortmethod'); |
352 | 356 | hierarchicalOptionsDirection.style['display'] = showHierarchicalOptionsCheckbox.checked ? 'block' : 'none'; |
353 | 357 | hierarchicalOptionsSortMethod.style['display'] = showHierarchicalOptionsCheckbox.checked ? 'block' : 'none'; |
354 | | - const hierarchicalOptionsSortMethodSelect = document.getElementById('sortMethod'); |
355 | 358 | if (showHierarchicalOptionsCheckbox.checked) { |
356 | 359 | if (hierarchicalOptionsDirectionSelect.value && hierarchicalOptionsDirectionSelect.value === 'Random') { |
357 | 360 | setRandomLayout(); |
358 | | - seed = Math.random(); |
359 | 361 | } else { |
360 | 362 | const direction = hierarchicalOptionsDirectionSelect.value ? hierarchicalOptionsDirectionSelect.value : 'UD'; |
361 | 363 | const sortMethod = hierarchicalOptionsSortMethodSelect.value ? hierarchicalOptionsSortMethodSelect.value : 'hubsize'; |
|
0 commit comments