1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | import Emitter from 'component-emitter';
|
28 | import { topMost, forEach, deepExtend, overrideOpacity, bridgeObject, selectiveNotDeepExtend, parseColor, mergeOptions, fillIfDefined, VALIDATOR_PRINT_STYLE, selectiveDeepExtend, isString, Alea, HSVToHex, addEventListener, removeEventListener, Hammer, easingFunctions, getAbsoluteLeft, getAbsoluteTop, Popup, recursiveDOMDelete, Validator, Configurator, Activator } from 'vis-util/esnext/esm/vis-util.js';
|
29 | import { isDataViewLike, DataSet } from 'vis-data/esnext/esm/vis-data.js';
|
30 | import { v4 } from 'uuid';
|
31 | import keycharm from 'keycharm';
|
32 | import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
33 | import TimSort, { sort } from 'timsort';
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 | function drawCircle(ctx, x, y, r) {
|
44 | ctx.beginPath();
|
45 | ctx.arc(x, y, r, 0, 2 * Math.PI, false);
|
46 | ctx.closePath();
|
47 | }
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 | function drawSquare(ctx, x, y, r) {
|
57 | ctx.beginPath();
|
58 | ctx.rect(x - r, y - r, r * 2, r * 2);
|
59 | ctx.closePath();
|
60 | }
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 | function drawTriangle(ctx, x, y, r) {
|
73 | ctx.beginPath();
|
74 |
|
75 | r *= 1.15;
|
76 | y += 0.275 * r;
|
77 | const s = r * 2;
|
78 | const s2 = s / 2;
|
79 | const ir = (Math.sqrt(3) / 6) * s;
|
80 | const h = Math.sqrt(s * s - s2 * s2);
|
81 | ctx.moveTo(x, y - (h - ir));
|
82 | ctx.lineTo(x + s2, y + ir);
|
83 | ctx.lineTo(x - s2, y + ir);
|
84 | ctx.lineTo(x, y - (h - ir));
|
85 | ctx.closePath();
|
86 | }
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 | function drawTriangleDown(ctx, x, y, r) {
|
99 | ctx.beginPath();
|
100 |
|
101 | r *= 1.15;
|
102 | y -= 0.275 * r;
|
103 | const s = r * 2;
|
104 | const s2 = s / 2;
|
105 | const ir = (Math.sqrt(3) / 6) * s;
|
106 | const h = Math.sqrt(s * s - s2 * s2);
|
107 | ctx.moveTo(x, y + (h - ir));
|
108 | ctx.lineTo(x + s2, y - ir);
|
109 | ctx.lineTo(x - s2, y - ir);
|
110 | ctx.lineTo(x, y + (h - ir));
|
111 | ctx.closePath();
|
112 | }
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 | function drawStar(ctx, x, y, r) {
|
122 |
|
123 | ctx.beginPath();
|
124 |
|
125 | r *= 0.82;
|
126 | y += 0.1 * r;
|
127 | for (let n = 0; n < 10; n++) {
|
128 | const radius = n % 2 === 0 ? r * 1.3 : r * 0.5;
|
129 | ctx.lineTo(x + radius * Math.sin((n * 2 * Math.PI) / 10), y - radius * Math.cos((n * 2 * Math.PI) / 10));
|
130 | }
|
131 | ctx.closePath();
|
132 | }
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 | function drawDiamond(ctx, x, y, r) {
|
145 | ctx.beginPath();
|
146 | ctx.lineTo(x, y + r);
|
147 | ctx.lineTo(x + r, y);
|
148 | ctx.lineTo(x, y - r);
|
149 | ctx.lineTo(x - r, y);
|
150 | ctx.closePath();
|
151 | }
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 | function drawRoundRect(ctx, x, y, w, h, r) {
|
166 | const r2d = Math.PI / 180;
|
167 | if (w - 2 * r < 0) {
|
168 | r = w / 2;
|
169 | }
|
170 | if (h - 2 * r < 0) {
|
171 | r = h / 2;
|
172 | }
|
173 | ctx.beginPath();
|
174 | ctx.moveTo(x + r, y);
|
175 | ctx.lineTo(x + w - r, y);
|
176 | ctx.arc(x + w - r, y + r, r, r2d * 270, r2d * 360, false);
|
177 | ctx.lineTo(x + w, y + h - r);
|
178 | ctx.arc(x + w - r, y + h - r, r, 0, r2d * 90, false);
|
179 | ctx.lineTo(x + r, y + h);
|
180 | ctx.arc(x + r, y + h - r, r, r2d * 90, r2d * 180, false);
|
181 | ctx.lineTo(x, y + r);
|
182 | ctx.arc(x + r, y + r, r, r2d * 180, r2d * 270, false);
|
183 | ctx.closePath();
|
184 | }
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 | function drawEllipse(ctx, x, y, w, h) {
|
200 | const kappa = 0.5522848, ox = (w / 2) * kappa,
|
201 | oy = (h / 2) * kappa,
|
202 | xe = x + w,
|
203 | ye = y + h,
|
204 | xm = x + w / 2,
|
205 | ym = y + h / 2;
|
206 | ctx.beginPath();
|
207 | ctx.moveTo(x, ym);
|
208 | ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
209 | ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
210 | ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
211 | ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
212 | ctx.closePath();
|
213 | }
|
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 | function drawDatabase(ctx, x, y, w, h) {
|
227 | const f = 1 / 3;
|
228 | const wEllipse = w;
|
229 | const hEllipse = h * f;
|
230 | const kappa = 0.5522848, ox = (wEllipse / 2) * kappa,
|
231 | oy = (hEllipse / 2) * kappa,
|
232 | xe = x + wEllipse,
|
233 | ye = y + hEllipse,
|
234 | xm = x + wEllipse / 2,
|
235 | ym = y + hEllipse / 2,
|
236 | ymb = y + (h - hEllipse / 2),
|
237 | yeb = y + h;
|
238 | ctx.beginPath();
|
239 | ctx.moveTo(xe, ym);
|
240 | ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
241 | ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
242 | ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
243 | ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
244 | ctx.lineTo(xe, ymb);
|
245 | ctx.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
|
246 | ctx.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
|
247 | ctx.lineTo(x, ym);
|
248 | }
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 |
|
257 |
|
258 |
|
259 |
|
260 |
|
261 |
|
262 |
|
263 |
|
264 | function drawDashedLine(ctx, x, y, x2, y2, pattern) {
|
265 | ctx.beginPath();
|
266 | ctx.moveTo(x, y);
|
267 | const patternLength = pattern.length;
|
268 | const dx = x2 - x;
|
269 | const dy = y2 - y;
|
270 | const slope = dy / dx;
|
271 | let distRemaining = Math.sqrt(dx * dx + dy * dy);
|
272 | let patternIndex = 0;
|
273 | let draw = true;
|
274 | let xStep = 0;
|
275 | let dashLength = +pattern[0];
|
276 | while (distRemaining >= 0.1) {
|
277 | dashLength = +pattern[patternIndex++ % patternLength];
|
278 | if (dashLength > distRemaining) {
|
279 | dashLength = distRemaining;
|
280 | }
|
281 | xStep = Math.sqrt((dashLength * dashLength) / (1 + slope * slope));
|
282 | xStep = dx < 0 ? -xStep : xStep;
|
283 | x += xStep;
|
284 | y += slope * xStep;
|
285 | if (draw === true) {
|
286 | ctx.lineTo(x, y);
|
287 | }
|
288 | else {
|
289 | ctx.moveTo(x, y);
|
290 | }
|
291 | distRemaining -= dashLength;
|
292 | draw = !draw;
|
293 | }
|
294 | }
|
295 |
|
296 |
|
297 |
|
298 |
|
299 |
|
300 |
|
301 |
|
302 |
|
303 | function drawHexagon(ctx, x, y, r) {
|
304 | ctx.beginPath();
|
305 | const sides = 6;
|
306 | const a = (Math.PI * 2) / sides;
|
307 | ctx.moveTo(x + r, y);
|
308 | for (let i = 1; i < sides; i++) {
|
309 | ctx.lineTo(x + r * Math.cos(a * i), y + r * Math.sin(a * i));
|
310 | }
|
311 | ctx.closePath();
|
312 | }
|
313 | const shapeMap = {
|
314 | circle: drawCircle,
|
315 | dashedLine: drawDashedLine,
|
316 | database: drawDatabase,
|
317 | diamond: drawDiamond,
|
318 | ellipse: drawEllipse,
|
319 | ellipse_vis: drawEllipse,
|
320 | hexagon: drawHexagon,
|
321 | roundRect: drawRoundRect,
|
322 | square: drawSquare,
|
323 | star: drawStar,
|
324 | triangle: drawTriangle,
|
325 | triangleDown: drawTriangleDown,
|
326 | };
|
327 |
|
328 |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 | function getShape(name) {
|
339 | if (Object.prototype.hasOwnProperty.call(shapeMap, name)) {
|
340 | return shapeMap[name];
|
341 | }
|
342 | else {
|
343 | return function (ctx, ...args) {
|
344 | CanvasRenderingContext2D.prototype[name].call(ctx, args);
|
345 | };
|
346 | }
|
347 | }
|
348 |
|
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 |
|
356 |
|
357 |
|
358 |
|
359 |
|
360 |
|
361 |
|
362 |
|
363 |
|
364 |
|
365 |
|
366 |
|
367 |
|
368 |
|
369 |
|
370 |
|
371 |
|
372 |
|
373 |
|
374 |
|
375 |
|
376 |
|
377 |
|
378 |
|
379 |
|
380 |
|
381 |
|
382 |
|
383 |
|
384 |
|
385 |
|
386 |
|
387 |
|
388 |
|
389 | function parseDOT(data) {
|
390 | dot = data;
|
391 | return parseGraph();
|
392 | }
|
393 |
|
394 |
|
395 | var NODE_ATTR_MAPPING = {
|
396 | fontsize: "font.size",
|
397 | fontcolor: "font.color",
|
398 | labelfontcolor: "font.color",
|
399 | fontname: "font.face",
|
400 | color: ["color.border", "color.background"],
|
401 | fillcolor: "color.background",
|
402 | tooltip: "title",
|
403 | labeltooltip: "title",
|
404 | };
|
405 | var EDGE_ATTR_MAPPING = Object.create(NODE_ATTR_MAPPING);
|
406 | EDGE_ATTR_MAPPING.color = "color.color";
|
407 | EDGE_ATTR_MAPPING.style = "dashes";
|
408 |
|
409 |
|
410 | var TOKENTYPE = {
|
411 | NULL: 0,
|
412 | DELIMITER: 1,
|
413 | IDENTIFIER: 2,
|
414 | UNKNOWN: 3,
|
415 | };
|
416 |
|
417 |
|
418 | var DELIMITERS = {
|
419 | "{": true,
|
420 | "}": true,
|
421 | "[": true,
|
422 | "]": true,
|
423 | ";": true,
|
424 | "=": true,
|
425 | ",": true,
|
426 |
|
427 | "->": true,
|
428 | "--": true,
|
429 | };
|
430 |
|
431 | var dot = "";
|
432 | var index = 0;
|
433 | var c = "";
|
434 | var token = "";
|
435 | var tokenType = TOKENTYPE.NULL;
|
436 |
|
437 |
|
438 |
|
439 |
|
440 |
|
441 |
|
442 | function first() {
|
443 | index = 0;
|
444 | c = dot.charAt(0);
|
445 | }
|
446 |
|
447 |
|
448 |
|
449 |
|
450 |
|
451 |
|
452 | function next() {
|
453 | index++;
|
454 | c = dot.charAt(index);
|
455 | }
|
456 |
|
457 |
|
458 |
|
459 |
|
460 |
|
461 |
|
462 | function nextPreview() {
|
463 | return dot.charAt(index + 1);
|
464 | }
|
465 |
|
466 |
|
467 |
|
468 |
|
469 |
|
470 |
|
471 |
|
472 | function isAlphaNumeric(c) {
|
473 | var charCode = c.charCodeAt(0);
|
474 |
|
475 | if (charCode < 47) {
|
476 |
|
477 | return charCode === 35 || charCode === 46;
|
478 | }
|
479 | if (charCode < 59) {
|
480 |
|
481 | return charCode > 47;
|
482 | }
|
483 | if (charCode < 91) {
|
484 |
|
485 | return charCode > 64;
|
486 | }
|
487 | if (charCode < 96) {
|
488 |
|
489 | return charCode === 95;
|
490 | }
|
491 | if (charCode < 123) {
|
492 |
|
493 | return charCode > 96;
|
494 | }
|
495 |
|
496 | return false;
|
497 | }
|
498 |
|
499 |
|
500 |
|
501 |
|
502 |
|
503 |
|
504 |
|
505 |
|
506 | function merge(a, b) {
|
507 | if (!a) {
|
508 | a = {};
|
509 | }
|
510 |
|
511 | if (b) {
|
512 | for (var name in b) {
|
513 | if (b.hasOwnProperty(name)) {
|
514 | a[name] = b[name];
|
515 | }
|
516 | }
|
517 | }
|
518 | return a;
|
519 | }
|
520 |
|
521 |
|
522 |
|
523 |
|
524 |
|
525 |
|
526 |
|
527 |
|
528 |
|
529 |
|
530 |
|
531 |
|
532 |
|
533 | function setValue(obj, path, value) {
|
534 | var keys = path.split(".");
|
535 | var o = obj;
|
536 | while (keys.length) {
|
537 | var key = keys.shift();
|
538 | if (keys.length) {
|
539 |
|
540 | if (!o[key]) {
|
541 | o[key] = {};
|
542 | }
|
543 | o = o[key];
|
544 | } else {
|
545 |
|
546 | o[key] = value;
|
547 | }
|
548 | }
|
549 | }
|
550 |
|
551 |
|
552 |
|
553 |
|
554 |
|
555 |
|
556 |
|
557 |
|
558 | function addNode(graph, node) {
|
559 | var i, len;
|
560 | var current = null;
|
561 |
|
562 |
|
563 | var graphs = [graph];
|
564 | var root = graph;
|
565 | while (root.parent) {
|
566 | graphs.push(root.parent);
|
567 | root = root.parent;
|
568 | }
|
569 |
|
570 |
|
571 | if (root.nodes) {
|
572 | for (i = 0, len = root.nodes.length; i < len; i++) {
|
573 | if (node.id === root.nodes[i].id) {
|
574 | current = root.nodes[i];
|
575 | break;
|
576 | }
|
577 | }
|
578 | }
|
579 |
|
580 | if (!current) {
|
581 |
|
582 | current = {
|
583 | id: node.id,
|
584 | };
|
585 | if (graph.node) {
|
586 |
|
587 | current.attr = merge(current.attr, graph.node);
|
588 | }
|
589 | }
|
590 |
|
591 |
|
592 | for (i = graphs.length - 1; i >= 0; i--) {
|
593 | var g = graphs[i];
|
594 |
|
595 | if (!g.nodes) {
|
596 | g.nodes = [];
|
597 | }
|
598 | if (g.nodes.indexOf(current) === -1) {
|
599 | g.nodes.push(current);
|
600 | }
|
601 | }
|
602 |
|
603 |
|
604 | if (node.attr) {
|
605 | current.attr = merge(current.attr, node.attr);
|
606 | }
|
607 | }
|
608 |
|
609 |
|
610 |
|
611 |
|
612 |
|
613 |
|
614 |
|
615 | function addEdge(graph, edge) {
|
616 | if (!graph.edges) {
|
617 | graph.edges = [];
|
618 | }
|
619 | graph.edges.push(edge);
|
620 | if (graph.edge) {
|
621 | var attr = merge({}, graph.edge);
|
622 | edge.attr = merge(attr, edge.attr);
|
623 | }
|
624 | }
|
625 |
|
626 |
|
627 |
|
628 |
|
629 |
|
630 |
|
631 |
|
632 |
|
633 |
|
634 |
|
635 |
|
636 | function createEdge(graph, from, to, type, attr) {
|
637 | var edge = {
|
638 | from: from,
|
639 | to: to,
|
640 | type: type,
|
641 | };
|
642 |
|
643 | if (graph.edge) {
|
644 | edge.attr = merge({}, graph.edge);
|
645 | }
|
646 | edge.attr = merge(edge.attr || {}, attr);
|
647 |
|
648 |
|
649 |
|
650 | if (attr != null) {
|
651 | if (attr.hasOwnProperty("arrows") && attr["arrows"] != null) {
|
652 | edge["arrows"] = { to: { enabled: true, type: attr.arrows.type } };
|
653 | attr["arrows"] = null;
|
654 | }
|
655 | }
|
656 | return edge;
|
657 | }
|
658 |
|
659 |
|
660 |
|
661 |
|
662 |
|
663 | function getToken() {
|
664 | tokenType = TOKENTYPE.NULL;
|
665 | token = "";
|
666 |
|
667 |
|
668 | while (c === " " || c === "\t" || c === "\n" || c === "\r") {
|
669 |
|
670 | next();
|
671 | }
|
672 |
|
673 | do {
|
674 | var isComment = false;
|
675 |
|
676 |
|
677 | if (c === "#") {
|
678 |
|
679 | var i = index - 1;
|
680 | while (dot.charAt(i) === " " || dot.charAt(i) === "\t") {
|
681 | i--;
|
682 | }
|
683 | if (dot.charAt(i) === "\n" || dot.charAt(i) === "") {
|
684 |
|
685 | while (c != "" && c != "\n") {
|
686 | next();
|
687 | }
|
688 | isComment = true;
|
689 | }
|
690 | }
|
691 | if (c === "/" && nextPreview() === "/") {
|
692 |
|
693 | while (c != "" && c != "\n") {
|
694 | next();
|
695 | }
|
696 | isComment = true;
|
697 | }
|
698 | if (c === "/" && nextPreview() === "*") {
|
699 |
|
700 | while (c != "") {
|
701 | if (c === "*" && nextPreview() === "/") {
|
702 |
|
703 | next();
|
704 | next();
|
705 | break;
|
706 | } else {
|
707 | next();
|
708 | }
|
709 | }
|
710 | isComment = true;
|
711 | }
|
712 |
|
713 |
|
714 | while (c === " " || c === "\t" || c === "\n" || c === "\r") {
|
715 |
|
716 | next();
|
717 | }
|
718 | } while (isComment);
|
719 |
|
720 |
|
721 | if (c === "") {
|
722 |
|
723 | tokenType = TOKENTYPE.DELIMITER;
|
724 | return;
|
725 | }
|
726 |
|
727 |
|
728 | var c2 = c + nextPreview();
|
729 | if (DELIMITERS[c2]) {
|
730 | tokenType = TOKENTYPE.DELIMITER;
|
731 | token = c2;
|
732 | next();
|
733 | next();
|
734 | return;
|
735 | }
|
736 |
|
737 |
|
738 | if (DELIMITERS[c]) {
|
739 | tokenType = TOKENTYPE.DELIMITER;
|
740 | token = c;
|
741 | next();
|
742 | return;
|
743 | }
|
744 |
|
745 |
|
746 |
|
747 | if (isAlphaNumeric(c) || c === "-") {
|
748 | token += c;
|
749 | next();
|
750 |
|
751 | while (isAlphaNumeric(c)) {
|
752 | token += c;
|
753 | next();
|
754 | }
|
755 | if (token === "false") {
|
756 | token = false;
|
757 | } else if (token === "true") {
|
758 | token = true;
|
759 | } else if (!isNaN(Number(token))) {
|
760 | token = Number(token);
|
761 | }
|
762 | tokenType = TOKENTYPE.IDENTIFIER;
|
763 | return;
|
764 | }
|
765 |
|
766 |
|
767 | if (c === '"') {
|
768 | next();
|
769 | while (c != "" && (c != '"' || (c === '"' && nextPreview() === '"'))) {
|
770 | if (c === '"') {
|
771 |
|
772 | token += c;
|
773 | next();
|
774 | } else if (c === "\\" && nextPreview() === "n") {
|
775 |
|
776 | token += "\n";
|
777 | next();
|
778 | } else {
|
779 | token += c;
|
780 | }
|
781 | next();
|
782 | }
|
783 | if (c != '"') {
|
784 | throw newSyntaxError('End of string " expected');
|
785 | }
|
786 | next();
|
787 | tokenType = TOKENTYPE.IDENTIFIER;
|
788 | return;
|
789 | }
|
790 |
|
791 |
|
792 | tokenType = TOKENTYPE.UNKNOWN;
|
793 | while (c != "") {
|
794 | token += c;
|
795 | next();
|
796 | }
|
797 | throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
|
798 | }
|
799 |
|
800 |
|
801 |
|
802 |
|
803 |
|
804 |
|
805 | function parseGraph() {
|
806 | var graph = {};
|
807 |
|
808 | first();
|
809 | getToken();
|
810 |
|
811 |
|
812 | if (token === "strict") {
|
813 | graph.strict = true;
|
814 | getToken();
|
815 | }
|
816 |
|
817 |
|
818 | if (token === "graph" || token === "digraph") {
|
819 | graph.type = token;
|
820 | getToken();
|
821 | }
|
822 |
|
823 |
|
824 | if (tokenType === TOKENTYPE.IDENTIFIER) {
|
825 | graph.id = token;
|
826 | getToken();
|
827 | }
|
828 |
|
829 |
|
830 | if (token != "{") {
|
831 | throw newSyntaxError("Angle bracket { expected");
|
832 | }
|
833 | getToken();
|
834 |
|
835 |
|
836 | parseStatements(graph);
|
837 |
|
838 |
|
839 | if (token != "}") {
|
840 | throw newSyntaxError("Angle bracket } expected");
|
841 | }
|
842 | getToken();
|
843 |
|
844 |
|
845 | if (token !== "") {
|
846 | throw newSyntaxError("End of file expected");
|
847 | }
|
848 | getToken();
|
849 |
|
850 |
|
851 | delete graph.node;
|
852 | delete graph.edge;
|
853 | delete graph.graph;
|
854 |
|
855 | return graph;
|
856 | }
|
857 |
|
858 |
|
859 |
|
860 |
|
861 |
|
862 |
|
863 | function parseStatements(graph) {
|
864 | while (token !== "" && token != "}") {
|
865 | parseStatement(graph);
|
866 | if (token === ";") {
|
867 | getToken();
|
868 | }
|
869 | }
|
870 | }
|
871 |
|
872 |
|
873 |
|
874 |
|
875 |
|
876 |
|
877 |
|
878 |
|
879 | function parseStatement(graph) {
|
880 |
|
881 | var subgraph = parseSubgraph(graph);
|
882 | if (subgraph) {
|
883 |
|
884 | parseEdge(graph, subgraph);
|
885 |
|
886 | return;
|
887 | }
|
888 |
|
889 |
|
890 | var attr = parseAttributeStatement(graph);
|
891 | if (attr) {
|
892 | return;
|
893 | }
|
894 |
|
895 |
|
896 | if (tokenType != TOKENTYPE.IDENTIFIER) {
|
897 | throw newSyntaxError("Identifier expected");
|
898 | }
|
899 | var id = token;
|
900 | getToken();
|
901 |
|
902 | if (token === "=") {
|
903 |
|
904 | getToken();
|
905 | if (tokenType != TOKENTYPE.IDENTIFIER) {
|
906 | throw newSyntaxError("Identifier expected");
|
907 | }
|
908 | graph[id] = token;
|
909 | getToken();
|
910 |
|
911 | } else {
|
912 | parseNodeStatement(graph, id);
|
913 | }
|
914 | }
|
915 |
|
916 |
|
917 |
|
918 |
|
919 |
|
920 |
|
921 |
|
922 | function parseSubgraph(graph) {
|
923 | var subgraph = null;
|
924 |
|
925 |
|
926 | if (token === "subgraph") {
|
927 | subgraph = {};
|
928 | subgraph.type = "subgraph";
|
929 | getToken();
|
930 |
|
931 |
|
932 | if (tokenType === TOKENTYPE.IDENTIFIER) {
|
933 | subgraph.id = token;
|
934 | getToken();
|
935 | }
|
936 | }
|
937 |
|
938 |
|
939 | if (token === "{") {
|
940 | getToken();
|
941 |
|
942 | if (!subgraph) {
|
943 | subgraph = {};
|
944 | }
|
945 | subgraph.parent = graph;
|
946 | subgraph.node = graph.node;
|
947 | subgraph.edge = graph.edge;
|
948 | subgraph.graph = graph.graph;
|
949 |
|
950 |
|
951 | parseStatements(subgraph);
|
952 |
|
953 |
|
954 | if (token != "}") {
|
955 | throw newSyntaxError("Angle bracket } expected");
|
956 | }
|
957 | getToken();
|
958 |
|
959 |
|
960 | delete subgraph.node;
|
961 | delete subgraph.edge;
|
962 | delete subgraph.graph;
|
963 | delete subgraph.parent;
|
964 |
|
965 |
|
966 | if (!graph.subgraphs) {
|
967 | graph.subgraphs = [];
|
968 | }
|
969 | graph.subgraphs.push(subgraph);
|
970 | }
|
971 |
|
972 | return subgraph;
|
973 | }
|
974 |
|
975 |
|
976 |
|
977 |
|
978 |
|
979 |
|
980 |
|
981 |
|
982 |
|
983 |
|
984 |
|
985 | function parseAttributeStatement(graph) {
|
986 |
|
987 | if (token === "node") {
|
988 | getToken();
|
989 |
|
990 |
|
991 | graph.node = parseAttributeList();
|
992 | return "node";
|
993 | } else if (token === "edge") {
|
994 | getToken();
|
995 |
|
996 |
|
997 | graph.edge = parseAttributeList();
|
998 | return "edge";
|
999 | } else if (token === "graph") {
|
1000 | getToken();
|
1001 |
|
1002 |
|
1003 | graph.graph = parseAttributeList();
|
1004 | return "graph";
|
1005 | }
|
1006 |
|
1007 | return null;
|
1008 | }
|
1009 |
|
1010 |
|
1011 |
|
1012 |
|
1013 |
|
1014 |
|
1015 |
|
1016 | function parseNodeStatement(graph, id) {
|
1017 |
|
1018 | var node = {
|
1019 | id: id,
|
1020 | };
|
1021 | var attr = parseAttributeList();
|
1022 | if (attr) {
|
1023 | node.attr = attr;
|
1024 | }
|
1025 | addNode(graph, node);
|
1026 |
|
1027 |
|
1028 | parseEdge(graph, id);
|
1029 | }
|
1030 |
|
1031 |
|
1032 |
|
1033 |
|
1034 |
|
1035 |
|
1036 |
|
1037 | function parseEdge(graph, from) {
|
1038 | while (token === "->" || token === "--") {
|
1039 | var to;
|
1040 | var type = token;
|
1041 | getToken();
|
1042 |
|
1043 | var subgraph = parseSubgraph(graph);
|
1044 | if (subgraph) {
|
1045 | to = subgraph;
|
1046 | } else {
|
1047 | if (tokenType != TOKENTYPE.IDENTIFIER) {
|
1048 | throw newSyntaxError("Identifier or subgraph expected");
|
1049 | }
|
1050 | to = token;
|
1051 | addNode(graph, {
|
1052 | id: to,
|
1053 | });
|
1054 | getToken();
|
1055 | }
|
1056 |
|
1057 |
|
1058 | var attr = parseAttributeList();
|
1059 |
|
1060 |
|
1061 | var edge = createEdge(graph, from, to, type, attr);
|
1062 | addEdge(graph, edge);
|
1063 |
|
1064 | from = to;
|
1065 | }
|
1066 | }
|
1067 |
|
1068 |
|
1069 |
|
1070 |
|
1071 |
|
1072 |
|
1073 |
|
1074 | function parseAttributeList() {
|
1075 | var i;
|
1076 | var attr = null;
|
1077 |
|
1078 |
|
1079 | var edgeStyles = {
|
1080 | dashed: true,
|
1081 | solid: false,
|
1082 | dotted: [1, 5],
|
1083 | };
|
1084 |
|
1085 | |
1086 |
|
1087 |
|
1088 |
|
1089 |
|
1090 |
|
1091 | var arrowTypes = {
|
1092 | dot: "circle",
|
1093 | box: "box",
|
1094 | crow: "crow",
|
1095 | curve: "curve",
|
1096 | icurve: "inv_curve",
|
1097 | normal: "triangle",
|
1098 | inv: "inv_triangle",
|
1099 | diamond: "diamond",
|
1100 | tee: "bar",
|
1101 | vee: "vee",
|
1102 | };
|
1103 |
|
1104 | |
1105 |
|
1106 |
|
1107 |
|
1108 |
|
1109 | var attr_list = new Array();
|
1110 | var attr_names = new Array();
|
1111 |
|
1112 |
|
1113 | while (token === "[") {
|
1114 | getToken();
|
1115 | attr = {};
|
1116 | while (token !== "" && token != "]") {
|
1117 | if (tokenType != TOKENTYPE.IDENTIFIER) {
|
1118 | throw newSyntaxError("Attribute name expected");
|
1119 | }
|
1120 | var name = token;
|
1121 |
|
1122 | getToken();
|
1123 | if (token != "=") {
|
1124 | throw newSyntaxError("Equal sign = expected");
|
1125 | }
|
1126 | getToken();
|
1127 |
|
1128 | if (tokenType != TOKENTYPE.IDENTIFIER) {
|
1129 | throw newSyntaxError("Attribute value expected");
|
1130 | }
|
1131 | var value = token;
|
1132 |
|
1133 |
|
1134 | if (name === "style") {
|
1135 | value = edgeStyles[value];
|
1136 | }
|
1137 |
|
1138 | var arrowType;
|
1139 | if (name === "arrowhead") {
|
1140 | arrowType = arrowTypes[value];
|
1141 | name = "arrows";
|
1142 | value = { to: { enabled: true, type: arrowType } };
|
1143 | }
|
1144 |
|
1145 | if (name === "arrowtail") {
|
1146 | arrowType = arrowTypes[value];
|
1147 | name = "arrows";
|
1148 | value = { from: { enabled: true, type: arrowType } };
|
1149 | }
|
1150 |
|
1151 | attr_list.push({ attr: attr, name: name, value: value });
|
1152 | attr_names.push(name);
|
1153 |
|
1154 | getToken();
|
1155 | if (token == ",") {
|
1156 | getToken();
|
1157 | }
|
1158 | }
|
1159 |
|
1160 | if (token != "]") {
|
1161 | throw newSyntaxError("Bracket ] expected");
|
1162 | }
|
1163 | getToken();
|
1164 | }
|
1165 |
|
1166 | |
1167 |
|
1168 |
|
1169 |
|
1170 |
|
1171 |
|
1172 |
|
1173 |
|
1174 |
|
1175 | if (attr_names.includes("dir")) {
|
1176 | var idx = {};
|
1177 | idx.arrows = {};
|
1178 | for (i = 0; i < attr_list.length; i++) {
|
1179 | if (attr_list[i].name === "arrows") {
|
1180 | if (attr_list[i].value.to != null) {
|
1181 | idx.arrows.to = i;
|
1182 | } else if (attr_list[i].value.from != null) {
|
1183 | idx.arrows.from = i;
|
1184 | } else {
|
1185 | throw newSyntaxError("Invalid value of arrows");
|
1186 | }
|
1187 | } else if (attr_list[i].name === "dir") {
|
1188 | idx.dir = i;
|
1189 | }
|
1190 | }
|
1191 |
|
1192 |
|
1193 | var dir_type = attr_list[idx.dir].value;
|
1194 | if (!attr_names.includes("arrows")) {
|
1195 | if (dir_type === "both") {
|
1196 | attr_list.push({
|
1197 | attr: attr_list[idx.dir].attr,
|
1198 | name: "arrows",
|
1199 | value: { to: { enabled: true } },
|
1200 | });
|
1201 | idx.arrows.to = attr_list.length - 1;
|
1202 | attr_list.push({
|
1203 | attr: attr_list[idx.dir].attr,
|
1204 | name: "arrows",
|
1205 | value: { from: { enabled: true } },
|
1206 | });
|
1207 | idx.arrows.from = attr_list.length - 1;
|
1208 | } else if (dir_type === "forward") {
|
1209 | attr_list.push({
|
1210 | attr: attr_list[idx.dir].attr,
|
1211 | name: "arrows",
|
1212 | value: { to: { enabled: true } },
|
1213 | });
|
1214 | idx.arrows.to = attr_list.length - 1;
|
1215 | } else if (dir_type === "back") {
|
1216 | attr_list.push({
|
1217 | attr: attr_list[idx.dir].attr,
|
1218 | name: "arrows",
|
1219 | value: { from: { enabled: true } },
|
1220 | });
|
1221 | idx.arrows.from = attr_list.length - 1;
|
1222 | } else if (dir_type === "none") {
|
1223 | attr_list.push({
|
1224 | attr: attr_list[idx.dir].attr,
|
1225 | name: "arrows",
|
1226 | value: "",
|
1227 | });
|
1228 | idx.arrows.to = attr_list.length - 1;
|
1229 | } else {
|
1230 | throw newSyntaxError('Invalid dir type "' + dir_type + '"');
|
1231 | }
|
1232 | }
|
1233 |
|
1234 | var from_type;
|
1235 | var to_type;
|
1236 |
|
1237 | if (dir_type === "both") {
|
1238 |
|
1239 | if (idx.arrows.to && idx.arrows.from) {
|
1240 | to_type = attr_list[idx.arrows.to].value.to.type;
|
1241 | from_type = attr_list[idx.arrows.from].value.from.type;
|
1242 | attr_list[idx.arrows.to] = {
|
1243 | attr: attr_list[idx.arrows.to].attr,
|
1244 | name: attr_list[idx.arrows.to].name,
|
1245 | value: {
|
1246 | to: { enabled: true, type: to_type },
|
1247 | from: { enabled: true, type: from_type },
|
1248 | },
|
1249 | };
|
1250 | attr_list.splice(idx.arrows.from, 1);
|
1251 |
|
1252 |
|
1253 | } else if (idx.arrows.to) {
|
1254 | to_type = attr_list[idx.arrows.to].value.to.type;
|
1255 | from_type = "arrow";
|
1256 | attr_list[idx.arrows.to] = {
|
1257 | attr: attr_list[idx.arrows.to].attr,
|
1258 | name: attr_list[idx.arrows.to].name,
|
1259 | value: {
|
1260 | to: { enabled: true, type: to_type },
|
1261 | from: { enabled: true, type: from_type },
|
1262 | },
|
1263 | };
|
1264 |
|
1265 |
|
1266 | } else if (idx.arrows.from) {
|
1267 | to_type = "arrow";
|
1268 | from_type = attr_list[idx.arrows.from].value.from.type;
|
1269 | attr_list[idx.arrows.from] = {
|
1270 | attr: attr_list[idx.arrows.from].attr,
|
1271 | name: attr_list[idx.arrows.from].name,
|
1272 | value: {
|
1273 | to: { enabled: true, type: to_type },
|
1274 | from: { enabled: true, type: from_type },
|
1275 | },
|
1276 | };
|
1277 | }
|
1278 | } else if (dir_type === "back") {
|
1279 |
|
1280 | if (idx.arrows.to && idx.arrows.from) {
|
1281 | to_type = "";
|
1282 | from_type = attr_list[idx.arrows.from].value.from.type;
|
1283 | attr_list[idx.arrows.from] = {
|
1284 | attr: attr_list[idx.arrows.from].attr,
|
1285 | name: attr_list[idx.arrows.from].name,
|
1286 | value: {
|
1287 | to: { enabled: true, type: to_type },
|
1288 | from: { enabled: true, type: from_type },
|
1289 | },
|
1290 | };
|
1291 |
|
1292 |
|
1293 | } else if (idx.arrows.to) {
|
1294 | to_type = "";
|
1295 | from_type = "arrow";
|
1296 | idx.arrows.from = idx.arrows.to;
|
1297 | attr_list[idx.arrows.from] = {
|
1298 | attr: attr_list[idx.arrows.from].attr,
|
1299 | name: attr_list[idx.arrows.from].name,
|
1300 | value: {
|
1301 | to: { enabled: true, type: to_type },
|
1302 | from: { enabled: true, type: from_type },
|
1303 | },
|
1304 | };
|
1305 |
|
1306 |
|
1307 | } else if (idx.arrows.from) {
|
1308 | to_type = "";
|
1309 | from_type = attr_list[idx.arrows.from].value.from.type;
|
1310 | attr_list[idx.arrows.to] = {
|
1311 | attr: attr_list[idx.arrows.from].attr,
|
1312 | name: attr_list[idx.arrows.from].name,
|
1313 | value: {
|
1314 | to: { enabled: true, type: to_type },
|
1315 | from: { enabled: true, type: from_type },
|
1316 | },
|
1317 | };
|
1318 | }
|
1319 |
|
1320 | attr_list[idx.arrows.from] = {
|
1321 | attr: attr_list[idx.arrows.from].attr,
|
1322 | name: attr_list[idx.arrows.from].name,
|
1323 | value: {
|
1324 | from: {
|
1325 | enabled: true,
|
1326 | type: attr_list[idx.arrows.from].value.from.type,
|
1327 | },
|
1328 | },
|
1329 | };
|
1330 | } else if (dir_type === "none") {
|
1331 | var idx_arrow;
|
1332 | if (idx.arrows.to) {
|
1333 | idx_arrow = idx.arrows.to;
|
1334 | } else {
|
1335 | idx_arrow = idx.arrows.from;
|
1336 | }
|
1337 |
|
1338 | attr_list[idx_arrow] = {
|
1339 | attr: attr_list[idx_arrow].attr,
|
1340 | name: attr_list[idx_arrow].name,
|
1341 | value: "",
|
1342 | };
|
1343 | } else if (dir_type === "forward") {
|
1344 |
|
1345 | if (idx.arrows.to && idx.arrows.from) {
|
1346 | to_type = attr_list[idx.arrows.to].value.to.type;
|
1347 | from_type = "";
|
1348 | attr_list[idx.arrows.to] = {
|
1349 | attr: attr_list[idx.arrows.to].attr,
|
1350 | name: attr_list[idx.arrows.to].name,
|
1351 | value: {
|
1352 | to: { enabled: true, type: to_type },
|
1353 | from: { enabled: true, type: from_type },
|
1354 | },
|
1355 | };
|
1356 |
|
1357 |
|
1358 | } else if (idx.arrows.to) {
|
1359 | to_type = attr_list[idx.arrows.to].value.to.type;
|
1360 | from_type = "";
|
1361 | attr_list[idx.arrows.to] = {
|
1362 | attr: attr_list[idx.arrows.to].attr,
|
1363 | name: attr_list[idx.arrows.to].name,
|
1364 | value: {
|
1365 | to: { enabled: true, type: to_type },
|
1366 | from: { enabled: true, type: from_type },
|
1367 | },
|
1368 | };
|
1369 |
|
1370 |
|
1371 | } else if (idx.arrows.from) {
|
1372 | to_type = "arrow";
|
1373 | from_type = "";
|
1374 | idx.arrows.to = idx.arrows.from;
|
1375 | attr_list[idx.arrows.to] = {
|
1376 | attr: attr_list[idx.arrows.to].attr,
|
1377 | name: attr_list[idx.arrows.to].name,
|
1378 | value: {
|
1379 | to: { enabled: true, type: to_type },
|
1380 | from: { enabled: true, type: from_type },
|
1381 | },
|
1382 | };
|
1383 | }
|
1384 |
|
1385 | attr_list[idx.arrows.to] = {
|
1386 | attr: attr_list[idx.arrows.to].attr,
|
1387 | name: attr_list[idx.arrows.to].name,
|
1388 | value: {
|
1389 | to: { enabled: true, type: attr_list[idx.arrows.to].value.to.type },
|
1390 | },
|
1391 | };
|
1392 | } else {
|
1393 | throw newSyntaxError('Invalid dir type "' + dir_type + '"');
|
1394 | }
|
1395 |
|
1396 |
|
1397 | attr_list.splice(idx.dir, 1);
|
1398 | }
|
1399 |
|
1400 |
|
1401 | var nof_attr_list;
|
1402 | if (attr_names.includes("penwidth")) {
|
1403 | var tmp_attr_list = [];
|
1404 |
|
1405 | nof_attr_list = attr_list.length;
|
1406 | for (i = 0; i < nof_attr_list; i++) {
|
1407 |
|
1408 | if (attr_list[i].name !== "width") {
|
1409 | if (attr_list[i].name === "penwidth") {
|
1410 | attr_list[i].name = "width";
|
1411 | }
|
1412 | tmp_attr_list.push(attr_list[i]);
|
1413 | }
|
1414 | }
|
1415 | attr_list = tmp_attr_list;
|
1416 | }
|
1417 |
|
1418 | nof_attr_list = attr_list.length;
|
1419 | for (i = 0; i < nof_attr_list; i++) {
|
1420 | setValue(attr_list[i].attr, attr_list[i].name, attr_list[i].value);
|
1421 | }
|
1422 |
|
1423 | return attr;
|
1424 | }
|
1425 |
|
1426 |
|
1427 |
|
1428 |
|
1429 |
|
1430 |
|
1431 |
|
1432 | function newSyntaxError(message) {
|
1433 | return new SyntaxError(
|
1434 | message + ', got "' + chop(token, 30) + '" (char ' + index + ")"
|
1435 | );
|
1436 | }
|
1437 |
|
1438 |
|
1439 |
|
1440 |
|
1441 |
|
1442 |
|
1443 |
|
1444 |
|
1445 | function chop(text, maxLength) {
|
1446 | return text.length <= maxLength ? text : text.substr(0, 27) + "...";
|
1447 | }
|
1448 |
|
1449 |
|
1450 |
|
1451 |
|
1452 |
|
1453 |
|
1454 |
|
1455 |
|
1456 | function forEach2(array1, array2, fn) {
|
1457 | if (Array.isArray(array1)) {
|
1458 | array1.forEach(function (elem1) {
|
1459 | if (Array.isArray(array2)) {
|
1460 | array2.forEach(function (elem2) {
|
1461 | fn(elem1, elem2);
|
1462 | });
|
1463 | } else {
|
1464 | fn(elem1, array2);
|
1465 | }
|
1466 | });
|
1467 | } else {
|
1468 | if (Array.isArray(array2)) {
|
1469 | array2.forEach(function (elem2) {
|
1470 | fn(array1, elem2);
|
1471 | });
|
1472 | } else {
|
1473 | fn(array1, array2);
|
1474 | }
|
1475 | }
|
1476 | }
|
1477 |
|
1478 |
|
1479 |
|
1480 |
|
1481 |
|
1482 |
|
1483 |
|
1484 |
|
1485 |
|
1486 |
|
1487 |
|
1488 | function setProp(object, path, value) {
|
1489 | var names = path.split(".");
|
1490 | var prop = names.pop();
|
1491 |
|
1492 |
|
1493 | var obj = object;
|
1494 | for (var i = 0; i < names.length; i++) {
|
1495 | var name = names[i];
|
1496 | if (!(name in obj)) {
|
1497 | obj[name] = {};
|
1498 | }
|
1499 | obj = obj[name];
|
1500 | }
|
1501 |
|
1502 |
|
1503 | obj[prop] = value;
|
1504 |
|
1505 | return object;
|
1506 | }
|
1507 |
|
1508 |
|
1509 |
|
1510 |
|
1511 |
|
1512 |
|
1513 |
|
1514 |
|
1515 | function convertAttr(attr, mapping) {
|
1516 | var converted = {};
|
1517 |
|
1518 | for (var prop in attr) {
|
1519 | if (attr.hasOwnProperty(prop)) {
|
1520 | var visProp = mapping[prop];
|
1521 | if (Array.isArray(visProp)) {
|
1522 | visProp.forEach(function (visPropI) {
|
1523 | setProp(converted, visPropI, attr[prop]);
|
1524 | });
|
1525 | } else if (typeof visProp === "string") {
|
1526 | setProp(converted, visProp, attr[prop]);
|
1527 | } else {
|
1528 | setProp(converted, prop, attr[prop]);
|
1529 | }
|
1530 | }
|
1531 | }
|
1532 |
|
1533 | return converted;
|
1534 | }
|
1535 |
|
1536 |
|
1537 |
|
1538 |
|
1539 |
|
1540 |
|
1541 |
|
1542 |
|
1543 | function DOTToGraph(data) {
|
1544 |
|
1545 | var dotData = parseDOT(data);
|
1546 | var graphData = {
|
1547 | nodes: [],
|
1548 | edges: [],
|
1549 | options: {},
|
1550 | };
|
1551 |
|
1552 |
|
1553 | if (dotData.nodes) {
|
1554 | dotData.nodes.forEach(function (dotNode) {
|
1555 | var graphNode = {
|
1556 | id: dotNode.id,
|
1557 | label: String(dotNode.label || dotNode.id),
|
1558 | };
|
1559 | merge(graphNode, convertAttr(dotNode.attr, NODE_ATTR_MAPPING));
|
1560 | if (graphNode.image) {
|
1561 | graphNode.shape = "image";
|
1562 | }
|
1563 | graphData.nodes.push(graphNode);
|
1564 | });
|
1565 | }
|
1566 |
|
1567 |
|
1568 | if (dotData.edges) {
|
1569 | |
1570 |
|
1571 |
|
1572 |
|
1573 |
|
1574 |
|
1575 | var convertEdge = function (dotEdge) {
|
1576 | var graphEdge = {
|
1577 | from: dotEdge.from,
|
1578 | to: dotEdge.to,
|
1579 | };
|
1580 | merge(graphEdge, convertAttr(dotEdge.attr, EDGE_ATTR_MAPPING));
|
1581 |
|
1582 |
|
1583 |
|
1584 |
|
1585 | if (graphEdge.arrows == null && dotEdge.type === "->") {
|
1586 | graphEdge.arrows = "to";
|
1587 | }
|
1588 |
|
1589 | return graphEdge;
|
1590 | };
|
1591 |
|
1592 | dotData.edges.forEach(function (dotEdge) {
|
1593 | var from, to;
|
1594 | if (dotEdge.from instanceof Object) {
|
1595 | from = dotEdge.from.nodes;
|
1596 | } else {
|
1597 | from = {
|
1598 | id: dotEdge.from,
|
1599 | };
|
1600 | }
|
1601 |
|
1602 | if (dotEdge.to instanceof Object) {
|
1603 | to = dotEdge.to.nodes;
|
1604 | } else {
|
1605 | to = {
|
1606 | id: dotEdge.to,
|
1607 | };
|
1608 | }
|
1609 |
|
1610 | if (dotEdge.from instanceof Object && dotEdge.from.edges) {
|
1611 | dotEdge.from.edges.forEach(function (subEdge) {
|
1612 | var graphEdge = convertEdge(subEdge);
|
1613 | graphData.edges.push(graphEdge);
|
1614 | });
|
1615 | }
|
1616 |
|
1617 | forEach2(from, to, function (from, to) {
|
1618 | var subEdge = createEdge(
|
1619 | graphData,
|
1620 | from.id,
|
1621 | to.id,
|
1622 | dotEdge.type,
|
1623 | dotEdge.attr
|
1624 | );
|
1625 | var graphEdge = convertEdge(subEdge);
|
1626 | graphData.edges.push(graphEdge);
|
1627 | });
|
1628 |
|
1629 | if (dotEdge.to instanceof Object && dotEdge.to.edges) {
|
1630 | dotEdge.to.edges.forEach(function (subEdge) {
|
1631 | var graphEdge = convertEdge(subEdge);
|
1632 | graphData.edges.push(graphEdge);
|
1633 | });
|
1634 | }
|
1635 | });
|
1636 | }
|
1637 |
|
1638 |
|
1639 | if (dotData.attr) {
|
1640 | graphData.options = dotData.attr;
|
1641 | }
|
1642 |
|
1643 | return graphData;
|
1644 | }
|
1645 |
|
1646 |
|
1647 |
|
1648 |
|
1649 |
|
1650 | var dotparser = Object.freeze({
|
1651 | __proto__: null,
|
1652 | parseDOT: parseDOT,
|
1653 | DOTToGraph: DOTToGraph
|
1654 | });
|
1655 |
|
1656 |
|
1657 |
|
1658 |
|
1659 |
|
1660 |
|
1661 |
|
1662 |
|
1663 |
|
1664 | function parseGephi(gephiJSON, optionsObj) {
|
1665 | const options = {
|
1666 | edges: {
|
1667 | inheritColor: false,
|
1668 | },
|
1669 | nodes: {
|
1670 | fixed: false,
|
1671 | parseColor: false,
|
1672 | },
|
1673 | };
|
1674 | if (optionsObj != null) {
|
1675 | if (optionsObj.fixed != null) {
|
1676 | options.nodes.fixed = optionsObj.fixed;
|
1677 | }
|
1678 | if (optionsObj.parseColor != null) {
|
1679 | options.nodes.parseColor = optionsObj.parseColor;
|
1680 | }
|
1681 | if (optionsObj.inheritColor != null) {
|
1682 | options.edges.inheritColor = optionsObj.inheritColor;
|
1683 | }
|
1684 | }
|
1685 | const gEdges = gephiJSON.edges;
|
1686 | const vEdges = gEdges.map((gEdge) => {
|
1687 | const vEdge = {
|
1688 | from: gEdge.source,
|
1689 | id: gEdge.id,
|
1690 | to: gEdge.target,
|
1691 | };
|
1692 | if (gEdge.attributes != null) {
|
1693 | vEdge.attributes = gEdge.attributes;
|
1694 | }
|
1695 | if (gEdge.label != null) {
|
1696 | vEdge.label = gEdge.label;
|
1697 | }
|
1698 | if (gEdge.attributes != null && gEdge.attributes.title != null) {
|
1699 | vEdge.title = gEdge.attributes.title;
|
1700 | }
|
1701 | if (gEdge.type === "Directed") {
|
1702 | vEdge.arrows = "to";
|
1703 | }
|
1704 |
|
1705 |
|
1706 | if (gEdge.color && options.edges.inheritColor === false) {
|
1707 | vEdge.color = gEdge.color;
|
1708 | }
|
1709 | return vEdge;
|
1710 | });
|
1711 | const vNodes = gephiJSON.nodes.map((gNode) => {
|
1712 | const vNode = {
|
1713 | id: gNode.id,
|
1714 | fixed: options.nodes.fixed && gNode.x != null && gNode.y != null,
|
1715 | };
|
1716 | if (gNode.attributes != null) {
|
1717 | vNode.attributes = gNode.attributes;
|
1718 | }
|
1719 | if (gNode.label != null) {
|
1720 | vNode.label = gNode.label;
|
1721 | }
|
1722 | if (gNode.size != null) {
|
1723 | vNode.size = gNode.size;
|
1724 | }
|
1725 | if (gNode.attributes != null && gNode.attributes.title != null) {
|
1726 | vNode.title = gNode.attributes.title;
|
1727 | }
|
1728 | if (gNode.title != null) {
|
1729 | vNode.title = gNode.title;
|
1730 | }
|
1731 | if (gNode.x != null) {
|
1732 | vNode.x = gNode.x;
|
1733 | }
|
1734 | if (gNode.y != null) {
|
1735 | vNode.y = gNode.y;
|
1736 | }
|
1737 | if (gNode.color != null) {
|
1738 | if (options.nodes.parseColor === true) {
|
1739 | vNode.color = gNode.color;
|
1740 | }
|
1741 | else {
|
1742 | vNode.color = {
|
1743 | background: gNode.color,
|
1744 | border: gNode.color,
|
1745 | highlight: {
|
1746 | background: gNode.color,
|
1747 | border: gNode.color,
|
1748 | },
|
1749 | hover: {
|
1750 | background: gNode.color,
|
1751 | border: gNode.color,
|
1752 | },
|
1753 | };
|
1754 | }
|
1755 | }
|
1756 | return vNode;
|
1757 | });
|
1758 | return { nodes: vNodes, edges: vEdges };
|
1759 | }
|
1760 |
|
1761 | var gephiParser = Object.freeze({
|
1762 | __proto__: null,
|
1763 | parseGephi: parseGephi
|
1764 | });
|
1765 |
|
1766 |
|
1767 | const en = {
|
1768 | addDescription: "Click in an empty space to place a new node.",
|
1769 | addEdge: "Add Edge",
|
1770 | addNode: "Add Node",
|
1771 | back: "Back",
|
1772 | close: "Close",
|
1773 | createEdgeError: "Cannot link edges to a cluster.",
|
1774 | del: "Delete selected",
|
1775 | deleteClusterError: "Clusters cannot be deleted.",
|
1776 | edgeDescription: "Click on a node and drag the edge to another node to connect them.",
|
1777 | edit: "Edit",
|
1778 | editClusterError: "Clusters cannot be edited.",
|
1779 | editEdge: "Edit Edge",
|
1780 | editEdgeDescription: "Click on the control points and drag them to a node to connect to it.",
|
1781 | editNode: "Edit Node",
|
1782 | };
|
1783 |
|
1784 | const de = {
|
1785 | addDescription: "Klicke auf eine freie Stelle, um einen neuen Knoten zu plazieren.",
|
1786 | addEdge: "Kante hinzuf\u00fcgen",
|
1787 | addNode: "Knoten hinzuf\u00fcgen",
|
1788 | back: "Zur\u00fcck",
|
1789 | close: "Schließen",
|
1790 | createEdgeError: "Es ist nicht m\u00f6glich, Kanten mit Clustern zu verbinden.",
|
1791 | del: "L\u00f6sche Auswahl",
|
1792 | deleteClusterError: "Cluster k\u00f6nnen nicht gel\u00f6scht werden.",
|
1793 | edgeDescription: "Klicke auf einen Knoten und ziehe die Kante zu einem anderen Knoten, um diese zu verbinden.",
|
1794 | edit: "Editieren",
|
1795 | editClusterError: "Cluster k\u00f6nnen nicht editiert werden.",
|
1796 | editEdge: "Kante editieren",
|
1797 | editEdgeDescription: "Klicke auf die Verbindungspunkte und ziehe diese auf einen Knoten, um sie zu verbinden.",
|
1798 | editNode: "Knoten editieren",
|
1799 | };
|
1800 |
|
1801 | const es = {
|
1802 | addDescription: "Haga clic en un lugar vac\u00edo para colocar un nuevo nodo.",
|
1803 | addEdge: "A\u00f1adir arista",
|
1804 | addNode: "A\u00f1adir nodo",
|
1805 | back: "Atr\u00e1s",
|
1806 | close: "Cerrar",
|
1807 | createEdgeError: "No se puede conectar una arista a un grupo.",
|
1808 | del: "Eliminar selecci\u00f3n",
|
1809 | deleteClusterError: "No es posible eliminar grupos.",
|
1810 | edgeDescription: "Haga clic en un nodo y arrastre la arista hacia otro nodo para conectarlos.",
|
1811 | edit: "Editar",
|
1812 | editClusterError: "No es posible editar grupos.",
|
1813 | editEdge: "Editar arista",
|
1814 | editEdgeDescription: "Haga clic en un punto de control y arrastrelo a un nodo para conectarlo.",
|
1815 | editNode: "Editar nodo",
|
1816 | };
|
1817 |
|
1818 | const it = {
|
1819 | addDescription: "Clicca per aggiungere un nuovo nodo",
|
1820 | addEdge: "Aggiungi un vertice",
|
1821 | addNode: "Aggiungi un nodo",
|
1822 | back: "Indietro",
|
1823 | close: "Chiudere",
|
1824 | createEdgeError: "Non si possono collegare vertici ad un cluster",
|
1825 | del: "Cancella la selezione",
|
1826 | deleteClusterError: "I cluster non possono essere cancellati",
|
1827 | edgeDescription: "Clicca su un nodo e trascinalo ad un altro nodo per connetterli.",
|
1828 | edit: "Modifica",
|
1829 | editClusterError: "I clusters non possono essere modificati.",
|
1830 | editEdge: "Modifica il vertice",
|
1831 | editEdgeDescription: "Clicca sui Punti di controllo e trascinali ad un nodo per connetterli.",
|
1832 | editNode: "Modifica il nodo",
|
1833 | };
|
1834 |
|
1835 | const nl = {
|
1836 | addDescription: "Klik op een leeg gebied om een nieuwe node te maken.",
|
1837 | addEdge: "Link toevoegen",
|
1838 | addNode: "Node toevoegen",
|
1839 | back: "Terug",
|
1840 | close: "Sluiten",
|
1841 | createEdgeError: "Kan geen link maken naar een cluster.",
|
1842 | del: "Selectie verwijderen",
|
1843 | deleteClusterError: "Clusters kunnen niet worden verwijderd.",
|
1844 | edgeDescription: "Klik op een node en sleep de link naar een andere node om ze te verbinden.",
|
1845 | edit: "Wijzigen",
|
1846 | editClusterError: "Clusters kunnen niet worden aangepast.",
|
1847 | editEdge: "Link wijzigen",
|
1848 | editEdgeDescription: "Klik op de verbindingspunten en sleep ze naar een node om daarmee te verbinden.",
|
1849 | editNode: "Node wijzigen",
|
1850 | };
|
1851 |
|
1852 | const pt = {
|
1853 | addDescription: "Clique em um espaço em branco para adicionar um novo nó",
|
1854 | addEdge: "Adicionar aresta",
|
1855 | addNode: "Adicionar nó",
|
1856 | back: "Voltar",
|
1857 | close: "Fechar",
|
1858 | createEdgeError: "Não foi possível linkar arestas a um cluster.",
|
1859 | del: "Remover selecionado",
|
1860 | deleteClusterError: "Clusters não puderam ser removidos.",
|
1861 | edgeDescription: "Clique em um nó e arraste a aresta até outro nó para conectá-los",
|
1862 | edit: "Editar",
|
1863 | editClusterError: "Clusters não puderam ser editados.",
|
1864 | editEdge: "Editar aresta",
|
1865 | editEdgeDescription: "Clique nos pontos de controle e os arraste para um nó para conectá-los",
|
1866 | editNode: "Editar nó",
|
1867 | };
|
1868 |
|
1869 | const ru = {
|
1870 | addDescription: "Кликните в свободное место, чтобы добавить новый узел.",
|
1871 | addEdge: "Добавить ребро",
|
1872 | addNode: "Добавить узел",
|
1873 | back: "Назад",
|
1874 | close: "Закрывать",
|
1875 | createEdgeError: "Невозможно соединить ребра в кластер.",
|
1876 | del: "Удалить выбранное",
|
1877 | deleteClusterError: "Кластеры не могут быть удалены",
|
1878 | edgeDescription: "Кликните на узел и протяните ребро к другому узлу, чтобы соединить их.",
|
1879 | edit: "Редактировать",
|
1880 | editClusterError: "Кластеры недоступны для редактирования.",
|
1881 | editEdge: "Редактировать ребро",
|
1882 | editEdgeDescription: "Кликните на контрольные точки и перетащите их в узел, чтобы подключиться к нему.",
|
1883 | editNode: "Редактировать узел",
|
1884 | };
|
1885 |
|
1886 | const cn = {
|
1887 | addDescription: "单击空白处放置新节点。",
|
1888 | addEdge: "添加连接线",
|
1889 | addNode: "添加节点",
|
1890 | back: "返回",
|
1891 | close: "關閉",
|
1892 | createEdgeError: "无法将连接线连接到群集。",
|
1893 | del: "删除选定",
|
1894 | deleteClusterError: "无法删除群集。",
|
1895 | edgeDescription: "单击某个节点并将该连接线拖动到另一个节点以连接它们。",
|
1896 | edit: "编辑",
|
1897 | editClusterError: "无法编辑群集。",
|
1898 | editEdge: "编辑连接线",
|
1899 | editEdgeDescription: "单击控制节点并将它们拖到节点上连接。",
|
1900 | editNode: "编辑节点",
|
1901 | };
|
1902 |
|
1903 | const uk = {
|
1904 | addDescription: "Kлікніть на вільне місце, щоб додати новий вузол.",
|
1905 | addEdge: "Додати край",
|
1906 | addNode: "Додати вузол",
|
1907 | back: "Назад",
|
1908 | close: "Закрити",
|
1909 | createEdgeError: "Не можливо об'єднати краї в групу.",
|
1910 | del: "Видалити обране",
|
1911 | deleteClusterError: "Групи не можуть бути видалені.",
|
1912 | edgeDescription: "Клікніть на вузол і перетягніть край до іншого вузла, щоб їх з'єднати.",
|
1913 | edit: "Редагувати",
|
1914 | editClusterError: "Групи недоступні для редагування.",
|
1915 | editEdge: "Редагувати край",
|
1916 | editEdgeDescription: "Клікніть на контрольні точки і перетягніть їх у вузол, щоб підключитися до нього.",
|
1917 | editNode: "Редагувати вузол",
|
1918 | };
|
1919 |
|
1920 | const fr = {
|
1921 | addDescription: "Cliquez dans un endroit vide pour placer un nœud.",
|
1922 | addEdge: "Ajouter un lien",
|
1923 | addNode: "Ajouter un nœud",
|
1924 | back: "Retour",
|
1925 | close: "Fermer",
|
1926 | createEdgeError: "Impossible de créer un lien vers un cluster.",
|
1927 | del: "Effacer la sélection",
|
1928 | deleteClusterError: "Les clusters ne peuvent pas être effacés.",
|
1929 | edgeDescription: "Cliquez sur un nœud et glissez le lien vers un autre nœud pour les connecter.",
|
1930 | edit: "Éditer",
|
1931 | editClusterError: "Les clusters ne peuvent pas être édités.",
|
1932 | editEdge: "Éditer le lien",
|
1933 | editEdgeDescription: "Cliquez sur les points de contrôle et glissez-les pour connecter un nœud.",
|
1934 | editNode: "Éditer le nœud",
|
1935 | };
|
1936 |
|
1937 | const cs = {
|
1938 | addDescription: "Kluknutím do prázdného prostoru můžete přidat nový vrchol.",
|
1939 | addEdge: "Přidat hranu",
|
1940 | addNode: "Přidat vrchol",
|
1941 | back: "Zpět",
|
1942 | close: "Zavřít",
|
1943 | createEdgeError: "Nelze připojit hranu ke shluku.",
|
1944 | del: "Smazat výběr",
|
1945 | deleteClusterError: "Nelze mazat shluky.",
|
1946 | edgeDescription: "Přetažením z jednoho vrcholu do druhého můžete spojit tyto vrcholy novou hranou.",
|
1947 | edit: "Upravit",
|
1948 | editClusterError: "Nelze upravovat shluky.",
|
1949 | editEdge: "Upravit hranu",
|
1950 | editEdgeDescription: "Přetažením kontrolního vrcholu hrany ji můžete připojit k jinému vrcholu.",
|
1951 | editNode: "Upravit vrchol",
|
1952 | };
|
1953 |
|
1954 | var locales = Object.freeze({
|
1955 | __proto__: null,
|
1956 | en: en,
|
1957 | de: de,
|
1958 | es: es,
|
1959 | it: it,
|
1960 | nl: nl,
|
1961 | pt: pt,
|
1962 | ru: ru,
|
1963 | cn: cn,
|
1964 | uk: uk,
|
1965 | fr: fr,
|
1966 | cs: cs
|
1967 | });
|
1968 |
|
1969 |
|
1970 |
|
1971 |
|
1972 |
|
1973 |
|
1974 |
|
1975 |
|
1976 |
|
1977 |
|
1978 | function normalizeLanguageCode(locales, rawCode) {
|
1979 | try {
|
1980 | const [rawLanguage, rawCountry] = rawCode.split(/[-_ /]/, 2);
|
1981 | const language = rawLanguage != null ? rawLanguage.toLowerCase() : null;
|
1982 | const country = rawCountry != null ? rawCountry.toUpperCase() : null;
|
1983 | if (language && country) {
|
1984 | const code = language + "-" + country;
|
1985 | if (Object.prototype.hasOwnProperty.call(locales, code)) {
|
1986 | return code;
|
1987 | }
|
1988 | else {
|
1989 | console.warn(`Unknown variant ${country} of language ${language}.`);
|
1990 | }
|
1991 | }
|
1992 | if (language) {
|
1993 | const code = language;
|
1994 | if (Object.prototype.hasOwnProperty.call(locales, code)) {
|
1995 | return code;
|
1996 | }
|
1997 | else {
|
1998 | console.warn(`Unknown language ${language}`);
|
1999 | }
|
2000 | }
|
2001 | console.warn(`Unknown locale ${rawCode}, falling back to English.`);
|
2002 | return "en";
|
2003 | }
|
2004 | catch (error) {
|
2005 | console.error(error);
|
2006 | console.warn(`Unexpected error while normalizing locale ${rawCode}, falling back to English.`);
|
2007 | return "en";
|
2008 | }
|
2009 | }
|
2010 |
|
2011 |
|
2012 |
|
2013 |
|
2014 |
|
2015 |
|
2016 |
|
2017 |
|
2018 |
|
2019 |
|
2020 |
|
2021 |
|
2022 | class CachedImage {
|
2023 | |
2024 |
|
2025 |
|
2026 | constructor() {
|
2027 | this.NUM_ITERATIONS = 4;
|
2028 |
|
2029 | this.image = new Image();
|
2030 | this.canvas = document.createElement("canvas");
|
2031 | }
|
2032 |
|
2033 | |
2034 |
|
2035 |
|
2036 | init() {
|
2037 | if (this.initialized()) return;
|
2038 |
|
2039 | this.src = this.image.src;
|
2040 | const w = this.image.width;
|
2041 | const h = this.image.height;
|
2042 |
|
2043 |
|
2044 | this.width = w;
|
2045 | this.height = h;
|
2046 |
|
2047 | const h2 = Math.floor(h / 2);
|
2048 | const h4 = Math.floor(h / 4);
|
2049 | const h8 = Math.floor(h / 8);
|
2050 | const h16 = Math.floor(h / 16);
|
2051 |
|
2052 | const w2 = Math.floor(w / 2);
|
2053 | const w4 = Math.floor(w / 4);
|
2054 | const w8 = Math.floor(w / 8);
|
2055 | const w16 = Math.floor(w / 16);
|
2056 |
|
2057 |
|
2058 | this.canvas.width = 3 * w4;
|
2059 | this.canvas.height = h2;
|
2060 |
|
2061 |
|
2062 |
|
2063 |
|
2064 | this.coordinates = [
|
2065 | [0, 0, w2, h2],
|
2066 | [w2, 0, w4, h4],
|
2067 | [w2, h4, w8, h8],
|
2068 | [5 * w8, h4, w16, h16],
|
2069 | ];
|
2070 |
|
2071 | this._fillMipMap();
|
2072 | }
|
2073 |
|
2074 | |
2075 |
|
2076 |
|
2077 | initialized() {
|
2078 | return this.coordinates !== undefined;
|
2079 | }
|
2080 |
|
2081 | |
2082 |
|
2083 |
|
2084 |
|
2085 |
|
2086 |
|
2087 |
|
2088 |
|
2089 |
|
2090 |
|
2091 |
|
2092 |
|
2093 |
|
2094 |
|
2095 |
|
2096 |
|
2097 |
|
2098 | _fillMipMap() {
|
2099 | const ctx = this.canvas.getContext("2d");
|
2100 |
|
2101 |
|
2102 | const to = this.coordinates[0];
|
2103 | ctx.drawImage(this.image, to[0], to[1], to[2], to[3]);
|
2104 |
|
2105 |
|
2106 | for (let iterations = 1; iterations < this.NUM_ITERATIONS; iterations++) {
|
2107 | const from = this.coordinates[iterations - 1];
|
2108 | const to = this.coordinates[iterations];
|
2109 |
|
2110 | ctx.drawImage(
|
2111 | this.canvas,
|
2112 | from[0],
|
2113 | from[1],
|
2114 | from[2],
|
2115 | from[3],
|
2116 | to[0],
|
2117 | to[1],
|
2118 | to[2],
|
2119 | to[3]
|
2120 | );
|
2121 | }
|
2122 | }
|
2123 |
|
2124 | |
2125 |
|
2126 |
|
2127 |
|
2128 |
|
2129 |
|
2130 |
|
2131 |
|
2132 |
|
2133 |
|
2134 |
|
2135 |
|
2136 |
|
2137 |
|
2138 |
|
2139 | drawImageAtPosition(ctx, factor, left, top, width, height) {
|
2140 | if (!this.initialized()) return;
|
2141 |
|
2142 | if (factor > 2) {
|
2143 |
|
2144 | factor *= 0.5;
|
2145 | let iterations = 0;
|
2146 | while (factor > 2 && iterations < this.NUM_ITERATIONS) {
|
2147 | factor *= 0.5;
|
2148 | iterations += 1;
|
2149 | }
|
2150 |
|
2151 | if (iterations >= this.NUM_ITERATIONS) {
|
2152 | iterations = this.NUM_ITERATIONS - 1;
|
2153 | }
|
2154 |
|
2155 |
|
2156 | const from = this.coordinates[iterations];
|
2157 | ctx.drawImage(
|
2158 | this.canvas,
|
2159 | from[0],
|
2160 | from[1],
|
2161 | from[2],
|
2162 | from[3],
|
2163 | left,
|
2164 | top,
|
2165 | width,
|
2166 | height
|
2167 | );
|
2168 | } else {
|
2169 |
|
2170 | ctx.drawImage(this.image, left, top, width, height);
|
2171 | }
|
2172 | }
|
2173 | }
|
2174 |
|
2175 |
|
2176 |
|
2177 |
|
2178 |
|
2179 |
|
2180 |
|
2181 |
|
2182 |
|
2183 |
|
2184 |
|
2185 |
|
2186 |
|
2187 | class Images {
|
2188 | |
2189 |
|
2190 |
|
2191 | constructor(callback) {
|
2192 | this.images = {};
|
2193 | this.imageBroken = {};
|
2194 | this.callback = callback;
|
2195 | }
|
2196 |
|
2197 | |
2198 |
|
2199 |
|
2200 |
|
2201 |
|
2202 | _tryloadBrokenUrl(url, brokenUrl, imageToLoadBrokenUrlOn) {
|
2203 |
|
2204 | if (url === undefined || imageToLoadBrokenUrlOn === undefined) return;
|
2205 | if (brokenUrl === undefined) {
|
2206 | console.warn("No broken url image defined");
|
2207 | return;
|
2208 | }
|
2209 |
|
2210 |
|
2211 | imageToLoadBrokenUrlOn.image.onerror = () => {
|
2212 | console.error("Could not load brokenImage:", brokenUrl);
|
2213 |
|
2214 | };
|
2215 |
|
2216 |
|
2217 | imageToLoadBrokenUrlOn.image.src = brokenUrl;
|
2218 | }
|
2219 |
|
2220 | |
2221 |
|
2222 |
|
2223 |
|
2224 |
|
2225 | _redrawWithImage(imageToRedrawWith) {
|
2226 | if (this.callback) {
|
2227 | this.callback(imageToRedrawWith);
|
2228 | }
|
2229 | }
|
2230 |
|
2231 | |
2232 |
|
2233 |
|
2234 |
|
2235 |
|
2236 | load(url, brokenUrl) {
|
2237 |
|
2238 | const cachedImage = this.images[url];
|
2239 | if (cachedImage) return cachedImage;
|
2240 |
|
2241 |
|
2242 | const img = new CachedImage();
|
2243 |
|
2244 |
|
2245 |
|
2246 | this.images[url] = img;
|
2247 |
|
2248 |
|
2249 | img.image.onload = () => {
|
2250 |
|
2251 | this._fixImageCoordinates(img.image);
|
2252 | img.init();
|
2253 | this._redrawWithImage(img);
|
2254 | };
|
2255 |
|
2256 |
|
2257 | img.image.onerror = () => {
|
2258 | console.error("Could not load image:", url);
|
2259 |
|
2260 | this._tryloadBrokenUrl(url, brokenUrl, img);
|
2261 | };
|
2262 |
|
2263 |
|
2264 | img.image.src = url;
|
2265 |
|
2266 |
|
2267 | return img;
|
2268 | }
|
2269 |
|
2270 | |
2271 |
|
2272 |
|
2273 |
|
2274 |
|
2275 |
|
2276 |
|
2277 |
|
2278 | _fixImageCoordinates(imageToCache) {
|
2279 | if (imageToCache.width === 0) {
|
2280 | document.body.appendChild(imageToCache);
|
2281 | imageToCache.width = imageToCache.offsetWidth;
|
2282 | imageToCache.height = imageToCache.offsetHeight;
|
2283 | document.body.removeChild(imageToCache);
|
2284 | }
|
2285 | }
|
2286 | }
|
2287 |
|
2288 |
|
2289 |
|
2290 |
|
2291 | class Groups {
|
2292 | |
2293 |
|
2294 |
|
2295 | constructor() {
|
2296 | this.clear();
|
2297 | this._defaultIndex = 0;
|
2298 | this._groupIndex = 0;
|
2299 |
|
2300 | this._defaultGroups = [
|
2301 | {
|
2302 | border: "#2B7CE9",
|
2303 | background: "#97C2FC",
|
2304 | highlight: { border: "#2B7CE9", background: "#D2E5FF" },
|
2305 | hover: { border: "#2B7CE9", background: "#D2E5FF" },
|
2306 | },
|
2307 | {
|
2308 | border: "#FFA500",
|
2309 | background: "#FFFF00",
|
2310 | highlight: { border: "#FFA500", background: "#FFFFA3" },
|
2311 | hover: { border: "#FFA500", background: "#FFFFA3" },
|
2312 | },
|
2313 | {
|
2314 | border: "#FA0A10",
|
2315 | background: "#FB7E81",
|
2316 | highlight: { border: "#FA0A10", background: "#FFAFB1" },
|
2317 | hover: { border: "#FA0A10", background: "#FFAFB1" },
|
2318 | },
|
2319 | {
|
2320 | border: "#41A906",
|
2321 | background: "#7BE141",
|
2322 | highlight: { border: "#41A906", background: "#A1EC76" },
|
2323 | hover: { border: "#41A906", background: "#A1EC76" },
|
2324 | },
|
2325 | {
|
2326 | border: "#E129F0",
|
2327 | background: "#EB7DF4",
|
2328 | highlight: { border: "#E129F0", background: "#F0B3F5" },
|
2329 | hover: { border: "#E129F0", background: "#F0B3F5" },
|
2330 | },
|
2331 | {
|
2332 | border: "#7C29F0",
|
2333 | background: "#AD85E4",
|
2334 | highlight: { border: "#7C29F0", background: "#D3BDF0" },
|
2335 | hover: { border: "#7C29F0", background: "#D3BDF0" },
|
2336 | },
|
2337 | {
|
2338 | border: "#C37F00",
|
2339 | background: "#FFA807",
|
2340 | highlight: { border: "#C37F00", background: "#FFCA66" },
|
2341 | hover: { border: "#C37F00", background: "#FFCA66" },
|
2342 | },
|
2343 | {
|
2344 | border: "#4220FB",
|
2345 | background: "#6E6EFD",
|
2346 | highlight: { border: "#4220FB", background: "#9B9BFD" },
|
2347 | hover: { border: "#4220FB", background: "#9B9BFD" },
|
2348 | },
|
2349 | {
|
2350 | border: "#FD5A77",
|
2351 | background: "#FFC0CB",
|
2352 | highlight: { border: "#FD5A77", background: "#FFD1D9" },
|
2353 | hover: { border: "#FD5A77", background: "#FFD1D9" },
|
2354 | },
|
2355 | {
|
2356 | border: "#4AD63A",
|
2357 | background: "#C2FABC",
|
2358 | highlight: { border: "#4AD63A", background: "#E6FFE3" },
|
2359 | hover: { border: "#4AD63A", background: "#E6FFE3" },
|
2360 | },
|
2361 |
|
2362 | {
|
2363 | border: "#990000",
|
2364 | background: "#EE0000",
|
2365 | highlight: { border: "#BB0000", background: "#FF3333" },
|
2366 | hover: { border: "#BB0000", background: "#FF3333" },
|
2367 | },
|
2368 |
|
2369 | {
|
2370 | border: "#FF6000",
|
2371 | background: "#FF6000",
|
2372 | highlight: { border: "#FF6000", background: "#FF6000" },
|
2373 | hover: { border: "#FF6000", background: "#FF6000" },
|
2374 | },
|
2375 | {
|
2376 | border: "#97C2FC",
|
2377 | background: "#2B7CE9",
|
2378 | highlight: { border: "#D2E5FF", background: "#2B7CE9" },
|
2379 | hover: { border: "#D2E5FF", background: "#2B7CE9" },
|
2380 | },
|
2381 | {
|
2382 | border: "#399605",
|
2383 | background: "#255C03",
|
2384 | highlight: { border: "#399605", background: "#255C03" },
|
2385 | hover: { border: "#399605", background: "#255C03" },
|
2386 | },
|
2387 | {
|
2388 | border: "#B70054",
|
2389 | background: "#FF007E",
|
2390 | highlight: { border: "#B70054", background: "#FF007E" },
|
2391 | hover: { border: "#B70054", background: "#FF007E" },
|
2392 | },
|
2393 | {
|
2394 | border: "#AD85E4",
|
2395 | background: "#7C29F0",
|
2396 | highlight: { border: "#D3BDF0", background: "#7C29F0" },
|
2397 | hover: { border: "#D3BDF0", background: "#7C29F0" },
|
2398 | },
|
2399 | {
|
2400 | border: "#4557FA",
|
2401 | background: "#000EA1",
|
2402 | highlight: { border: "#6E6EFD", background: "#000EA1" },
|
2403 | hover: { border: "#6E6EFD", background: "#000EA1" },
|
2404 | },
|
2405 | {
|
2406 | border: "#FFC0CB",
|
2407 | background: "#FD5A77",
|
2408 | highlight: { border: "#FFD1D9", background: "#FD5A77" },
|
2409 | hover: { border: "#FFD1D9", background: "#FD5A77" },
|
2410 | },
|
2411 | {
|
2412 | border: "#C2FABC",
|
2413 | background: "#74D66A",
|
2414 | highlight: { border: "#E6FFE3", background: "#74D66A" },
|
2415 | hover: { border: "#E6FFE3", background: "#74D66A" },
|
2416 | },
|
2417 |
|
2418 | {
|
2419 | border: "#EE0000",
|
2420 | background: "#990000",
|
2421 | highlight: { border: "#FF3333", background: "#BB0000" },
|
2422 | hover: { border: "#FF3333", background: "#BB0000" },
|
2423 | },
|
2424 | ];
|
2425 |
|
2426 | this.options = {};
|
2427 | this.defaultOptions = {
|
2428 | useDefaultGroups: true,
|
2429 | };
|
2430 | Object.assign(this.options, this.defaultOptions);
|
2431 | }
|
2432 |
|
2433 | |
2434 |
|
2435 |
|
2436 |
|
2437 | setOptions(options) {
|
2438 | const optionFields = ["useDefaultGroups"];
|
2439 |
|
2440 | if (options !== undefined) {
|
2441 | for (const groupName in options) {
|
2442 | if (Object.prototype.hasOwnProperty.call(options, groupName)) {
|
2443 | if (optionFields.indexOf(groupName) === -1) {
|
2444 | const group = options[groupName];
|
2445 | this.add(groupName, group);
|
2446 | }
|
2447 | }
|
2448 | }
|
2449 | }
|
2450 | }
|
2451 |
|
2452 | |
2453 |
|
2454 |
|
2455 | clear() {
|
2456 | this._groups = new Map();
|
2457 | this._groupNames = [];
|
2458 | }
|
2459 |
|
2460 | |
2461 |
|
2462 |
|
2463 |
|
2464 |
|
2465 |
|
2466 |
|
2467 |
|
2468 | get(groupname, shouldCreate = true) {
|
2469 | let group = this._groups.get(groupname);
|
2470 |
|
2471 | if (group === undefined && shouldCreate) {
|
2472 | if (
|
2473 | this.options.useDefaultGroups === false &&
|
2474 | this._groupNames.length > 0
|
2475 | ) {
|
2476 |
|
2477 | const index = this._groupIndex % this._groupNames.length;
|
2478 | ++this._groupIndex;
|
2479 | group = {};
|
2480 | group.color = this._groups.get(this._groupNames[index]);
|
2481 | this._groups.set(groupname, group);
|
2482 | } else {
|
2483 |
|
2484 | const index = this._defaultIndex % this._defaultGroups.length;
|
2485 | this._defaultIndex++;
|
2486 | group = {};
|
2487 | group.color = this._defaultGroups[index];
|
2488 | this._groups.set(groupname, group);
|
2489 | }
|
2490 | }
|
2491 |
|
2492 | return group;
|
2493 | }
|
2494 |
|
2495 | |
2496 |
|
2497 |
|
2498 |
|
2499 |
|
2500 |
|
2501 |
|
2502 |
|
2503 |
|
2504 |
|
2505 | add(groupName, style) {
|
2506 |
|
2507 |
|
2508 |
|
2509 | if (!this._groups.has(groupName)) {
|
2510 | this._groupNames.push(groupName);
|
2511 | }
|
2512 | this._groups.set(groupName, style);
|
2513 | return style;
|
2514 | }
|
2515 | }
|
2516 |
|
2517 |
|
2518 |
|
2519 |
|
2520 |
|
2521 |
|
2522 |
|
2523 |
|
2524 |
|
2525 |
|
2526 |
|
2527 |
|
2528 |
|
2529 |
|
2530 |
|
2531 |
|
2532 |
|
2533 |
|
2534 |
|
2535 |
|
2536 |
|
2537 |
|
2538 |
|
2539 |
|
2540 |
|
2541 |
|
2542 |
|
2543 | function choosify(subOption, pile) {
|
2544 |
|
2545 | const allowed = ["node", "edge", "label"];
|
2546 | let value = true;
|
2547 |
|
2548 | const chosen = topMost(pile, "chosen");
|
2549 | if (typeof chosen === "boolean") {
|
2550 | value = chosen;
|
2551 | } else if (typeof chosen === "object") {
|
2552 | if (allowed.indexOf(subOption) === -1) {
|
2553 | throw new Error(
|
2554 | "choosify: subOption '" +
|
2555 | subOption +
|
2556 | "' should be one of " +
|
2557 | "'" +
|
2558 | allowed.join("', '") +
|
2559 | "'"
|
2560 | );
|
2561 | }
|
2562 |
|
2563 | const chosenEdge = topMost(pile, ["chosen", subOption]);
|
2564 | if (typeof chosenEdge === "boolean" || typeof chosenEdge === "function") {
|
2565 | value = chosenEdge;
|
2566 | }
|
2567 | }
|
2568 |
|
2569 | return value;
|
2570 | }
|
2571 |
|
2572 |
|
2573 |
|
2574 |
|
2575 |
|
2576 |
|
2577 |
|
2578 |
|
2579 |
|
2580 | function pointInRect(rect, point, rotationPoint) {
|
2581 | if (rect.width <= 0 || rect.height <= 0) {
|
2582 | return false;
|
2583 | }
|
2584 |
|
2585 | if (rotationPoint !== undefined) {
|
2586 |
|
2587 | const tmp = {
|
2588 | x: point.x - rotationPoint.x,
|
2589 | y: point.y - rotationPoint.y,
|
2590 | };
|
2591 |
|
2592 | if (rotationPoint.angle !== 0) {
|
2593 |
|
2594 |
|
2595 | const angle = -rotationPoint.angle;
|
2596 |
|
2597 | const tmp2 = {
|
2598 | x: Math.cos(angle) * tmp.x - Math.sin(angle) * tmp.y,
|
2599 | y: Math.sin(angle) * tmp.x + Math.cos(angle) * tmp.y,
|
2600 | };
|
2601 | point = tmp2;
|
2602 | } else {
|
2603 | point = tmp;
|
2604 | }
|
2605 |
|
2606 |
|
2607 |
|
2608 |
|
2609 |
|
2610 | }
|
2611 |
|
2612 | const right = rect.x + rect.width;
|
2613 | const bottom = rect.y + rect.width;
|
2614 |
|
2615 | return (
|
2616 | rect.left < point.x &&
|
2617 | right > point.x &&
|
2618 | rect.top < point.y &&
|
2619 | bottom > point.y
|
2620 | );
|
2621 | }
|
2622 |
|
2623 |
|
2624 |
|
2625 |
|
2626 |
|
2627 |
|
2628 |
|
2629 | function isValidLabel(text) {
|
2630 |
|
2631 | return typeof text === "string" && text !== "";
|
2632 | }
|
2633 |
|
2634 |
|
2635 |
|
2636 |
|
2637 |
|
2638 |
|
2639 |
|
2640 |
|
2641 |
|
2642 |
|
2643 |
|
2644 | function getSelfRefCoordinates(ctx, angle, radius, node) {
|
2645 | let x = node.x;
|
2646 | let y = node.y;
|
2647 |
|
2648 | if (typeof node.distanceToBorder === "function") {
|
2649 |
|
2650 |
|
2651 |
|
2652 | const toBorderDist = node.distanceToBorder(ctx, angle);
|
2653 | const yFromNodeCenter = Math.sin(angle) * toBorderDist;
|
2654 | const xFromNodeCenter = Math.cos(angle) * toBorderDist;
|
2655 |
|
2656 |
|
2657 |
|
2658 |
|
2659 | if (xFromNodeCenter === toBorderDist) {
|
2660 | x += toBorderDist;
|
2661 | y = node.y;
|
2662 | } else if (yFromNodeCenter === toBorderDist) {
|
2663 | x = node.x;
|
2664 | y -= toBorderDist;
|
2665 | } else {
|
2666 | x += xFromNodeCenter;
|
2667 | y -= yFromNodeCenter;
|
2668 | }
|
2669 | } else if (node.shape.width > node.shape.height) {
|
2670 | x = node.x + node.shape.width * 0.5;
|
2671 | y = node.y - radius;
|
2672 | } else {
|
2673 | x = node.x + radius;
|
2674 | y = node.y - node.shape.height * 0.5;
|
2675 | }
|
2676 |
|
2677 | return { x, y };
|
2678 | }
|
2679 |
|
2680 |
|
2681 |
|
2682 |
|
2683 |
|
2684 |
|
2685 |
|
2686 |
|
2687 |
|
2688 |
|
2689 |
|
2690 |
|
2691 |
|
2692 |
|
2693 |
|
2694 | class LabelAccumulator {
|
2695 | |
2696 |
|
2697 |
|
2698 | constructor(measureText) {
|
2699 | this.measureText = measureText;
|
2700 | this.current = 0;
|
2701 | this.width = 0;
|
2702 | this.height = 0;
|
2703 | this.lines = [];
|
2704 | }
|
2705 |
|
2706 | |
2707 |
|
2708 |
|
2709 |
|
2710 |
|
2711 |
|
2712 |
|
2713 |
|
2714 | _add(l, text, mod = "normal") {
|
2715 | if (this.lines[l] === undefined) {
|
2716 | this.lines[l] = {
|
2717 | width: 0,
|
2718 | height: 0,
|
2719 | blocks: [],
|
2720 | };
|
2721 | }
|
2722 |
|
2723 |
|
2724 |
|
2725 |
|
2726 |
|
2727 |
|
2728 |
|
2729 | let tmpText = text;
|
2730 | if (text === undefined || text === "") tmpText = " ";
|
2731 |
|
2732 |
|
2733 | const result = this.measureText(tmpText, mod);
|
2734 | const block = Object.assign({}, result.values);
|
2735 | block.text = text;
|
2736 | block.width = result.width;
|
2737 | block.mod = mod;
|
2738 |
|
2739 | if (text === undefined || text === "") {
|
2740 | block.width = 0;
|
2741 | }
|
2742 |
|
2743 | this.lines[l].blocks.push(block);
|
2744 |
|
2745 |
|
2746 | this.lines[l].width += block.width;
|
2747 | }
|
2748 |
|
2749 | |
2750 |
|
2751 |
|
2752 |
|
2753 |
|
2754 | curWidth() {
|
2755 | const line = this.lines[this.current];
|
2756 | if (line === undefined) return 0;
|
2757 |
|
2758 | return line.width;
|
2759 | }
|
2760 |
|
2761 | |
2762 |
|
2763 |
|
2764 |
|
2765 |
|
2766 |
|
2767 | append(text, mod = "normal") {
|
2768 | this._add(this.current, text, mod);
|
2769 | }
|
2770 |
|
2771 | |
2772 |
|
2773 |
|
2774 |
|
2775 |
|
2776 |
|
2777 | newLine(text, mod = "normal") {
|
2778 | this._add(this.current, text, mod);
|
2779 | this.current++;
|
2780 | }
|
2781 |
|
2782 | |
2783 |
|
2784 |
|
2785 |
|
2786 |
|
2787 |
|
2788 |
|
2789 | determineLineHeights() {
|
2790 | for (let k = 0; k < this.lines.length; k++) {
|
2791 | const line = this.lines[k];
|
2792 |
|
2793 |
|
2794 | let height = 0;
|
2795 |
|
2796 | if (line.blocks !== undefined) {
|
2797 |
|
2798 | for (let l = 0; l < line.blocks.length; l++) {
|
2799 | const block = line.blocks[l];
|
2800 |
|
2801 | if (height < block.height) {
|
2802 | height = block.height;
|
2803 | }
|
2804 | }
|
2805 | }
|
2806 |
|
2807 | line.height = height;
|
2808 | }
|
2809 | }
|
2810 |
|
2811 | |
2812 |
|
2813 |
|
2814 |
|
2815 |
|
2816 | determineLabelSize() {
|
2817 | let width = 0;
|
2818 | let height = 0;
|
2819 | for (let k = 0; k < this.lines.length; k++) {
|
2820 | const line = this.lines[k];
|
2821 |
|
2822 | if (line.width > width) {
|
2823 | width = line.width;
|
2824 | }
|
2825 | height += line.height;
|
2826 | }
|
2827 |
|
2828 | this.width = width;
|
2829 | this.height = height;
|
2830 | }
|
2831 |
|
2832 | |
2833 |
|
2834 |
|
2835 |
|
2836 |
|
2837 |
|
2838 |
|
2839 |
|
2840 |
|
2841 | removeEmptyBlocks() {
|
2842 | const tmpLines = [];
|
2843 | for (let k = 0; k < this.lines.length; k++) {
|
2844 | const line = this.lines[k];
|
2845 |
|
2846 |
|
2847 |
|
2848 | if (line.blocks.length === 0) continue;
|
2849 |
|
2850 |
|
2851 | if (k === this.lines.length - 1) {
|
2852 | if (line.width === 0) continue;
|
2853 | }
|
2854 |
|
2855 | const tmpLine = {};
|
2856 | Object.assign(tmpLine, line);
|
2857 | tmpLine.blocks = [];
|
2858 |
|
2859 | let firstEmptyBlock;
|
2860 | const tmpBlocks = [];
|
2861 | for (let l = 0; l < line.blocks.length; l++) {
|
2862 | const block = line.blocks[l];
|
2863 | if (block.width !== 0) {
|
2864 | tmpBlocks.push(block);
|
2865 | } else {
|
2866 | if (firstEmptyBlock === undefined) {
|
2867 | firstEmptyBlock = block;
|
2868 | }
|
2869 | }
|
2870 | }
|
2871 |
|
2872 |
|
2873 | if (tmpBlocks.length === 0 && firstEmptyBlock !== undefined) {
|
2874 | tmpBlocks.push(firstEmptyBlock);
|
2875 | }
|
2876 |
|
2877 | tmpLine.blocks = tmpBlocks;
|
2878 |
|
2879 | tmpLines.push(tmpLine);
|
2880 | }
|
2881 |
|
2882 | return tmpLines;
|
2883 | }
|
2884 |
|
2885 | |
2886 |
|
2887 |
|
2888 |
|
2889 |
|
2890 | finalize() {
|
2891 |
|
2892 |
|
2893 | this.determineLineHeights();
|
2894 | this.determineLabelSize();
|
2895 | const tmpLines = this.removeEmptyBlocks();
|
2896 |
|
2897 |
|
2898 | return {
|
2899 | width: this.width,
|
2900 | height: this.height,
|
2901 | lines: tmpLines,
|
2902 | };
|
2903 | }
|
2904 | }
|
2905 |
|
2906 |
|
2907 | const tagPattern = {
|
2908 |
|
2909 | "<b>": /<b>/,
|
2910 | "<i>": /<i>/,
|
2911 | "<code>": /<code>/,
|
2912 | "</b>": /<\/b>/,
|
2913 | "</i>": /<\/i>/,
|
2914 | "</code>": /<\/code>/,
|
2915 |
|
2916 | "*": /\*/,
|
2917 | _: /_/,
|
2918 | "`": /`/,
|
2919 | afterBold: /[^*]/,
|
2920 | afterItal: /[^_]/,
|
2921 | afterMono: /[^`]/,
|
2922 | };
|
2923 |
|
2924 |
|
2925 |
|
2926 |
|
2927 |
|
2928 |
|
2929 |
|
2930 | class MarkupAccumulator {
|
2931 | |
2932 |
|
2933 |
|
2934 |
|
2935 |
|
2936 | constructor(text) {
|
2937 | this.text = text;
|
2938 | this.bold = false;
|
2939 | this.ital = false;
|
2940 | this.mono = false;
|
2941 | this.spacing = false;
|
2942 | this.position = 0;
|
2943 | this.buffer = "";
|
2944 | this.modStack = [];
|
2945 |
|
2946 | this.blocks = [];
|
2947 | }
|
2948 |
|
2949 | |
2950 |
|
2951 |
|
2952 |
|
2953 |
|
2954 |
|
2955 | mod() {
|
2956 | return this.modStack.length === 0 ? "normal" : this.modStack[0];
|
2957 | }
|
2958 |
|
2959 | |
2960 |
|
2961 |
|
2962 |
|
2963 |
|
2964 |
|
2965 | modName() {
|
2966 | if (this.modStack.length === 0) return "normal";
|
2967 | else if (this.modStack[0] === "mono") return "mono";
|
2968 | else {
|
2969 | if (this.bold && this.ital) {
|
2970 | return "boldital";
|
2971 | } else if (this.bold) {
|
2972 | return "bold";
|
2973 | } else if (this.ital) {
|
2974 | return "ital";
|
2975 | }
|
2976 | }
|
2977 | }
|
2978 |
|
2979 | |
2980 |
|
2981 |
|
2982 | emitBlock() {
|
2983 | if (this.spacing) {
|
2984 | this.add(" ");
|
2985 | this.spacing = false;
|
2986 | }
|
2987 | if (this.buffer.length > 0) {
|
2988 | this.blocks.push({ text: this.buffer, mod: this.modName() });
|
2989 | this.buffer = "";
|
2990 | }
|
2991 | }
|
2992 |
|
2993 | |
2994 |
|
2995 |
|
2996 |
|
2997 |
|
2998 |
|
2999 | add(text) {
|
3000 | if (text === " ") {
|
3001 | this.spacing = true;
|
3002 | }
|
3003 | if (this.spacing) {
|
3004 | this.buffer += " ";
|
3005 | this.spacing = false;
|
3006 | }
|
3007 | if (text != " ") {
|
3008 | this.buffer += text;
|
3009 | }
|
3010 | }
|
3011 |
|
3012 | |
3013 |
|
3014 |
|
3015 |
|
3016 |
|
3017 |
|
3018 | parseWS(ch) {
|
3019 | if (/[ \t]/.test(ch)) {
|
3020 | if (!this.mono) {
|
3021 | this.spacing = true;
|
3022 | } else {
|
3023 | this.add(ch);
|
3024 | }
|
3025 | return true;
|
3026 | }
|
3027 |
|
3028 | return false;
|
3029 | }
|
3030 |
|
3031 | |
3032 |
|
3033 |
|
3034 |
|
3035 | setTag(tagName) {
|
3036 | this.emitBlock();
|
3037 | this[tagName] = true;
|
3038 | this.modStack.unshift(tagName);
|
3039 | }
|
3040 |
|
3041 | |
3042 |
|
3043 |
|
3044 |
|
3045 | unsetTag(tagName) {
|
3046 | this.emitBlock();
|
3047 | this[tagName] = false;
|
3048 | this.modStack.shift();
|
3049 | }
|
3050 |
|
3051 | |
3052 |
|
3053 |
|
3054 |
|
3055 |
|
3056 | parseStartTag(tagName, tag) {
|
3057 |
|
3058 | if (!this.mono && !this[tagName] && this.match(tag)) {
|
3059 | this.setTag(tagName);
|
3060 | return true;
|
3061 | }
|
3062 |
|
3063 | return false;
|
3064 | }
|
3065 |
|
3066 | |
3067 |
|
3068 |
|
3069 |
|
3070 |
|
3071 |
|
3072 | match(tag, advance = true) {
|
3073 | const [regExp, length] = this.prepareRegExp(tag);
|
3074 | const matched = regExp.test(this.text.substr(this.position, length));
|
3075 |
|
3076 | if (matched && advance) {
|
3077 | this.position += length - 1;
|
3078 | }
|
3079 |
|
3080 | return matched;
|
3081 | }
|
3082 |
|
3083 | |
3084 |
|
3085 |
|
3086 |
|
3087 |
|
3088 |
|
3089 | parseEndTag(tagName, tag, nextTag) {
|
3090 | let checkTag = this.mod() === tagName;
|
3091 | if (tagName === "mono") {
|
3092 |
|
3093 | checkTag = checkTag && this.mono;
|
3094 | } else {
|
3095 | checkTag = checkTag && !this.mono;
|
3096 | }
|
3097 |
|
3098 | if (checkTag && this.match(tag)) {
|
3099 | if (nextTag !== undefined) {
|
3100 |
|
3101 |
|
3102 | if (
|
3103 | this.position === this.text.length - 1 ||
|
3104 | this.match(nextTag, false)
|
3105 | ) {
|
3106 | this.unsetTag(tagName);
|
3107 | }
|
3108 | } else {
|
3109 | this.unsetTag(tagName);
|
3110 | }
|
3111 |
|
3112 | return true;
|
3113 | }
|
3114 |
|
3115 | return false;
|
3116 | }
|
3117 |
|
3118 | |
3119 |
|
3120 |
|
3121 |
|
3122 |
|
3123 | replace(tag, value) {
|
3124 | if (this.match(tag)) {
|
3125 | this.add(value);
|
3126 | this.position += length - 1;
|
3127 | return true;
|
3128 | }
|
3129 |
|
3130 | return false;
|
3131 | }
|
3132 |
|
3133 | |
3134 |
|
3135 |
|
3136 |
|
3137 |
|
3138 |
|
3139 |
|
3140 |
|
3141 |
|
3142 |
|
3143 |
|
3144 | prepareRegExp(tag) {
|
3145 | let length;
|
3146 | let regExp;
|
3147 | if (tag instanceof RegExp) {
|
3148 | regExp = tag;
|
3149 | length = 1;
|
3150 | } else {
|
3151 |
|
3152 | const prepared = tagPattern[tag];
|
3153 | if (prepared !== undefined) {
|
3154 | regExp = prepared;
|
3155 | } else {
|
3156 | regExp = new RegExp(tag);
|
3157 | }
|
3158 |
|
3159 | length = tag.length;
|
3160 | }
|
3161 |
|
3162 | return [regExp, length];
|
3163 | }
|
3164 | }
|
3165 |
|
3166 |
|
3167 |
|
3168 |
|
3169 |
|
3170 |
|
3171 | class LabelSplitter {
|
3172 | |
3173 |
|
3174 |
|
3175 |
|
3176 |
|
3177 |
|
3178 | constructor(ctx, parent, selected, hover) {
|
3179 | this.ctx = ctx;
|
3180 | this.parent = parent;
|
3181 | this.selected = selected;
|
3182 | this.hover = hover;
|
3183 |
|
3184 | |
3185 |
|
3186 |
|
3187 |
|
3188 |
|
3189 |
|
3190 |
|
3191 | const textWidth = (text, mod) => {
|
3192 | if (text === undefined) return 0;
|
3193 |
|
3194 |
|
3195 |
|
3196 | const values = this.parent.getFormattingValues(ctx, selected, hover, mod);
|
3197 |
|
3198 | let width = 0;
|
3199 | if (text !== "") {
|
3200 | const measure = this.ctx.measureText(text);
|
3201 | width = measure.width;
|
3202 | }
|
3203 |
|
3204 | return { width, values: values };
|
3205 | };
|
3206 |
|
3207 | this.lines = new LabelAccumulator(textWidth);
|
3208 | }
|
3209 |
|
3210 | |
3211 |
|
3212 |
|
3213 |
|
3214 |
|
3215 |
|
3216 |
|
3217 |
|
3218 |
|
3219 |
|
3220 |
|
3221 |
|
3222 |
|
3223 |
|
3224 |
|
3225 |
|
3226 |
|
3227 | process(text) {
|
3228 | if (!isValidLabel(text)) {
|
3229 | return this.lines.finalize();
|
3230 | }
|
3231 |
|
3232 | const font = this.parent.fontOptions;
|
3233 |
|
3234 |
|
3235 | text = text.replace(/\r\n/g, "\n");
|
3236 | text = text.replace(/\r/g, "\n");
|
3237 |
|
3238 |
|
3239 |
|
3240 |
|
3241 | const nlLines = String(text).split("\n");
|
3242 | const lineCount = nlLines.length;
|
3243 |
|
3244 | if (font.multi) {
|
3245 |
|
3246 | for (let i = 0; i < lineCount; i++) {
|
3247 | const blocks = this.splitBlocks(nlLines[i], font.multi);
|
3248 |
|
3249 |
|
3250 | if (blocks === undefined) continue;
|
3251 |
|
3252 | if (blocks.length === 0) {
|
3253 | this.lines.newLine("");
|
3254 | continue;
|
3255 | }
|
3256 |
|
3257 | if (font.maxWdt > 0) {
|
3258 |
|
3259 |
|
3260 | for (let j = 0; j < blocks.length; j++) {
|
3261 | const mod = blocks[j].mod;
|
3262 | const text = blocks[j].text;
|
3263 | this.splitStringIntoLines(text, mod, true);
|
3264 | }
|
3265 | } else {
|
3266 |
|
3267 | for (let j = 0; j < blocks.length; j++) {
|
3268 | const mod = blocks[j].mod;
|
3269 | const text = blocks[j].text;
|
3270 | this.lines.append(text, mod);
|
3271 | }
|
3272 | }
|
3273 |
|
3274 | this.lines.newLine();
|
3275 | }
|
3276 | } else {
|
3277 |
|
3278 | if (font.maxWdt > 0) {
|
3279 |
|
3280 |
|
3281 | for (let i = 0; i < lineCount; i++) {
|
3282 | this.splitStringIntoLines(nlLines[i]);
|
3283 | }
|
3284 | } else {
|
3285 |
|
3286 | for (let i = 0; i < lineCount; i++) {
|
3287 | this.lines.newLine(nlLines[i]);
|
3288 | }
|
3289 | }
|
3290 | }
|
3291 |
|
3292 | return this.lines.finalize();
|
3293 | }
|
3294 |
|
3295 | |
3296 |
|
3297 |
|
3298 |
|
3299 |
|
3300 |
|
3301 | decodeMarkupSystem(markupSystem) {
|
3302 | let system = "none";
|
3303 | if (markupSystem === "markdown" || markupSystem === "md") {
|
3304 | system = "markdown";
|
3305 | } else if (markupSystem === true || markupSystem === "html") {
|
3306 | system = "html";
|
3307 | }
|
3308 | return system;
|
3309 | }
|
3310 |
|
3311 | |
3312 |
|
3313 |
|
3314 |
|
3315 |
|
3316 | splitHtmlBlocks(text) {
|
3317 | const s = new MarkupAccumulator(text);
|
3318 |
|
3319 | const parseEntities = (ch) => {
|
3320 | if (/&/.test(ch)) {
|
3321 | const parsed =
|
3322 | s.replace(s.text, "<", "<") || s.replace(s.text, "&", "&");
|
3323 |
|
3324 | if (!parsed) {
|
3325 | s.add("&");
|
3326 | }
|
3327 |
|
3328 | return true;
|
3329 | }
|
3330 |
|
3331 | return false;
|
3332 | };
|
3333 |
|
3334 | while (s.position < s.text.length) {
|
3335 | const ch = s.text.charAt(s.position);
|
3336 |
|
3337 | const parsed =
|
3338 | s.parseWS(ch) ||
|
3339 | (/</.test(ch) &&
|
3340 | (s.parseStartTag("bold", "<b>") ||
|
3341 | s.parseStartTag("ital", "<i>") ||
|
3342 | s.parseStartTag("mono", "<code>") ||
|
3343 | s.parseEndTag("bold", "</b>") ||
|
3344 | s.parseEndTag("ital", "</i>") ||
|
3345 | s.parseEndTag("mono", "</code>"))) ||
|
3346 | parseEntities(ch);
|
3347 |
|
3348 | if (!parsed) {
|
3349 | s.add(ch);
|
3350 | }
|
3351 | s.position++;
|
3352 | }
|
3353 | s.emitBlock();
|
3354 | return s.blocks;
|
3355 | }
|
3356 |
|
3357 | |
3358 |
|
3359 |
|
3360 |
|
3361 |
|
3362 | splitMarkdownBlocks(text) {
|
3363 | const s = new MarkupAccumulator(text);
|
3364 | let beginable = true;
|
3365 |
|
3366 | const parseOverride = (ch) => {
|
3367 | if (/\\/.test(ch)) {
|
3368 | if (s.position < this.text.length + 1) {
|
3369 | s.position++;
|
3370 | ch = this.text.charAt(s.position);
|
3371 | if (/ \t/.test(ch)) {
|
3372 | s.spacing = true;
|
3373 | } else {
|
3374 | s.add(ch);
|
3375 | beginable = false;
|
3376 | }
|
3377 | }
|
3378 |
|
3379 | return true;
|
3380 | }
|
3381 |
|
3382 | return false;
|
3383 | };
|
3384 |
|
3385 | while (s.position < s.text.length) {
|
3386 | const ch = s.text.charAt(s.position);
|
3387 |
|
3388 | const parsed =
|
3389 | s.parseWS(ch) ||
|
3390 | parseOverride(ch) ||
|
3391 | ((beginable || s.spacing) &&
|
3392 | (s.parseStartTag("bold", "*") ||
|
3393 | s.parseStartTag("ital", "_") ||
|
3394 | s.parseStartTag("mono", "`"))) ||
|
3395 | s.parseEndTag("bold", "*", "afterBold") ||
|
3396 | s.parseEndTag("ital", "_", "afterItal") ||
|
3397 | s.parseEndTag("mono", "`", "afterMono");
|
3398 |
|
3399 | if (!parsed) {
|
3400 | s.add(ch);
|
3401 | beginable = false;
|
3402 | }
|
3403 | s.position++;
|
3404 | }
|
3405 | s.emitBlock();
|
3406 | return s.blocks;
|
3407 | }
|
3408 |
|
3409 | |
3410 |
|
3411 |
|
3412 |
|
3413 |
|
3414 |
|
3415 |
|
3416 |
|
3417 | splitBlocks(text, markupSystem) {
|
3418 | const system = this.decodeMarkupSystem(markupSystem);
|
3419 | if (system === "none") {
|
3420 | return [
|
3421 | {
|
3422 | text: text,
|
3423 | mod: "normal",
|
3424 | },
|
3425 | ];
|
3426 | } else if (system === "markdown") {
|
3427 | return this.splitMarkdownBlocks(text);
|
3428 | } else if (system === "html") {
|
3429 | return this.splitHtmlBlocks(text);
|
3430 | }
|
3431 | }
|
3432 |
|
3433 | |
3434 |
|
3435 |
|
3436 |
|
3437 |
|
3438 | overMaxWidth(text) {
|
3439 | const width = this.ctx.measureText(text).width;
|
3440 | return this.lines.curWidth() + width > this.parent.fontOptions.maxWdt;
|
3441 | }
|
3442 |
|
3443 | |
3444 |
|
3445 |
|
3446 |
|
3447 |
|
3448 |
|
3449 |
|
3450 |
|
3451 | getLongestFit(words) {
|
3452 | let text = "";
|
3453 | let w = 0;
|
3454 |
|
3455 | while (w < words.length) {
|
3456 | const pre = text === "" ? "" : " ";
|
3457 | const newText = text + pre + words[w];
|
3458 |
|
3459 | if (this.overMaxWidth(newText)) break;
|
3460 | text = newText;
|
3461 | w++;
|
3462 | }
|
3463 |
|
3464 | return w;
|
3465 | }
|
3466 |
|
3467 | |
3468 |
|
3469 |
|
3470 |
|
3471 |
|
3472 |
|
3473 |
|
3474 | getLongestFitWord(words) {
|
3475 | let w = 0;
|
3476 |
|
3477 | while (w < words.length) {
|
3478 | if (this.overMaxWidth(words.slice(0, w))) break;
|
3479 | w++;
|
3480 | }
|
3481 |
|
3482 | return w;
|
3483 | }
|
3484 |
|
3485 | |
3486 |
|
3487 |
|
3488 |
|
3489 |
|
3490 |
|
3491 |
|
3492 |
|
3493 |
|
3494 |
|
3495 |
|
3496 |
|
3497 |
|
3498 |
|
3499 | splitStringIntoLines(str, mod = "normal", appendLast = false) {
|
3500 |
|
3501 |
|
3502 |
|
3503 | this.parent.getFormattingValues(this.ctx, this.selected, this.hover, mod);
|
3504 |
|
3505 |
|
3506 | str = str.replace(/^( +)/g, "$1\r");
|
3507 | str = str.replace(/([^\r][^ ]*)( +)/g, "$1\r$2\r");
|
3508 | let words = str.split("\r");
|
3509 |
|
3510 | while (words.length > 0) {
|
3511 | let w = this.getLongestFit(words);
|
3512 |
|
3513 | if (w === 0) {
|
3514 |
|
3515 | const word = words[0];
|
3516 |
|
3517 |
|
3518 | const x = this.getLongestFitWord(word);
|
3519 | this.lines.newLine(word.slice(0, x), mod);
|
3520 |
|
3521 |
|
3522 | words[0] = word.slice(x);
|
3523 | } else {
|
3524 |
|
3525 | let newW = w;
|
3526 | if (words[w - 1] === " ") {
|
3527 | w--;
|
3528 | } else if (words[newW] === " ") {
|
3529 | newW++;
|
3530 | }
|
3531 |
|
3532 | const text = words.slice(0, w).join("");
|
3533 |
|
3534 | if (w == words.length && appendLast) {
|
3535 | this.lines.append(text, mod);
|
3536 | } else {
|
3537 | this.lines.newLine(text, mod);
|
3538 | }
|
3539 |
|
3540 |
|
3541 | words = words.slice(newW);
|
3542 | }
|
3543 | }
|
3544 | }
|
3545 | }
|
3546 |
|
3547 |
|
3548 |
|
3549 |
|
3550 |
|
3551 |
|
3552 | const multiFontStyle = ["bold", "ital", "boldital", "mono"];
|
3553 |
|
3554 |
|
3555 |
|
3556 |
|
3557 | class Label {
|
3558 | |
3559 |
|
3560 |
|
3561 |
|
3562 |
|
3563 | constructor(body, options, edgelabel = false) {
|
3564 | this.body = body;
|
3565 | this.pointToSelf = false;
|
3566 | this.baseSize = undefined;
|
3567 | this.fontOptions = {};
|
3568 | this.setOptions(options);
|
3569 | this.size = { top: 0, left: 0, width: 0, height: 0, yLine: 0 };
|
3570 | this.isEdgeLabel = edgelabel;
|
3571 | }
|
3572 |
|
3573 | |
3574 |
|
3575 |
|
3576 | setOptions(options) {
|
3577 | this.elementOptions = options;
|
3578 |
|
3579 | this.initFontOptions(options.font);
|
3580 |
|
3581 | if (isValidLabel(options.label)) {
|
3582 | this.labelDirty = true;
|
3583 | } else {
|
3584 |
|
3585 | options.label = undefined;
|
3586 | }
|
3587 |
|
3588 | if (options.font !== undefined && options.font !== null) {
|
3589 |
|
3590 | if (typeof options.font === "string") {
|
3591 | this.baseSize = this.fontOptions.size;
|
3592 | } else if (typeof options.font === "object") {
|
3593 | const size = options.font.size;
|
3594 |
|
3595 | if (size !== undefined) {
|
3596 | this.baseSize = size;
|
3597 | }
|
3598 | }
|
3599 | }
|
3600 | }
|
3601 |
|
3602 | |
3603 |
|
3604 |
|
3605 |
|
3606 |
|
3607 |
|
3608 |
|
3609 |
|
3610 |
|
3611 | initFontOptions(newFontOptions) {
|
3612 |
|
3613 |
|
3614 | forEach(multiFontStyle, (style) => {
|
3615 | this.fontOptions[style] = {};
|
3616 | });
|
3617 |
|
3618 |
|
3619 | if (Label.parseFontString(this.fontOptions, newFontOptions)) {
|
3620 | this.fontOptions.vadjust = 0;
|
3621 | return;
|
3622 | }
|
3623 |
|
3624 |
|
3625 | forEach(newFontOptions, (prop, n) => {
|
3626 | if (prop !== undefined && prop !== null && typeof prop !== "object") {
|
3627 | this.fontOptions[n] = prop;
|
3628 | }
|
3629 | });
|
3630 | }
|
3631 |
|
3632 | |
3633 |
|
3634 |
|
3635 |
|
3636 |
|
3637 |
|
3638 |
|
3639 |
|
3640 |
|
3641 |
|
3642 |
|
3643 | static parseFontString(outOptions, inOptions) {
|
3644 | if (!inOptions || typeof inOptions !== "string") return false;
|
3645 |
|
3646 | const newOptionsArray = inOptions.split(" ");
|
3647 |
|
3648 | outOptions.size = +newOptionsArray[0].replace("px", "");
|
3649 | outOptions.face = newOptionsArray[1];
|
3650 | outOptions.color = newOptionsArray[2];
|
3651 |
|
3652 | return true;
|
3653 | }
|
3654 |
|
3655 | |
3656 |
|
3657 |
|
3658 |
|
3659 |
|
3660 |
|
3661 |
|
3662 | constrain(pile) {
|
3663 |
|
3664 |
|
3665 |
|
3666 | const fontOptions = {
|
3667 | constrainWidth: false,
|
3668 | maxWdt: -1,
|
3669 | minWdt: -1,
|
3670 | constrainHeight: false,
|
3671 | minHgt: -1,
|
3672 | valign: "middle",
|
3673 | };
|
3674 |
|
3675 | const widthConstraint = topMost(pile, "widthConstraint");
|
3676 | if (typeof widthConstraint === "number") {
|
3677 | fontOptions.maxWdt = Number(widthConstraint);
|
3678 | fontOptions.minWdt = Number(widthConstraint);
|
3679 | } else if (typeof widthConstraint === "object") {
|
3680 | const widthConstraintMaximum = topMost(pile, [
|
3681 | "widthConstraint",
|
3682 | "maximum",
|
3683 | ]);
|
3684 | if (typeof widthConstraintMaximum === "number") {
|
3685 | fontOptions.maxWdt = Number(widthConstraintMaximum);
|
3686 | }
|
3687 | const widthConstraintMinimum = topMost(pile, [
|
3688 | "widthConstraint",
|
3689 | "minimum",
|
3690 | ]);
|
3691 | if (typeof widthConstraintMinimum === "number") {
|
3692 | fontOptions.minWdt = Number(widthConstraintMinimum);
|
3693 | }
|
3694 | }
|
3695 |
|
3696 | const heightConstraint = topMost(pile, "heightConstraint");
|
3697 | if (typeof heightConstraint === "number") {
|
3698 | fontOptions.minHgt = Number(heightConstraint);
|
3699 | } else if (typeof heightConstraint === "object") {
|
3700 | const heightConstraintMinimum = topMost(pile, [
|
3701 | "heightConstraint",
|
3702 | "minimum",
|
3703 | ]);
|
3704 | if (typeof heightConstraintMinimum === "number") {
|
3705 | fontOptions.minHgt = Number(heightConstraintMinimum);
|
3706 | }
|
3707 | const heightConstraintValign = topMost(pile, [
|
3708 | "heightConstraint",
|
3709 | "valign",
|
3710 | ]);
|
3711 | if (typeof heightConstraintValign === "string") {
|
3712 | if (
|
3713 | heightConstraintValign === "top" ||
|
3714 | heightConstraintValign === "bottom"
|
3715 | ) {
|
3716 | fontOptions.valign = heightConstraintValign;
|
3717 | }
|
3718 | }
|
3719 | }
|
3720 |
|
3721 | return fontOptions;
|
3722 | }
|
3723 |
|
3724 | |
3725 |
|
3726 |
|
3727 |
|
3728 |
|
3729 |
|
3730 | update(options, pile) {
|
3731 | this.setOptions(options, true);
|
3732 | this.propagateFonts(pile);
|
3733 | deepExtend(this.fontOptions, this.constrain(pile));
|
3734 | this.fontOptions.chooser = choosify("label", pile);
|
3735 | }
|
3736 |
|
3737 | |
3738 |
|
3739 |
|
3740 |
|
3741 |
|
3742 |
|
3743 | adjustSizes(margins) {
|
3744 | const widthBias = margins ? margins.right + margins.left : 0;
|
3745 | if (this.fontOptions.constrainWidth) {
|
3746 | this.fontOptions.maxWdt -= widthBias;
|
3747 | this.fontOptions.minWdt -= widthBias;
|
3748 | }
|
3749 | const heightBias = margins ? margins.top + margins.bottom : 0;
|
3750 | if (this.fontOptions.constrainHeight) {
|
3751 | this.fontOptions.minHgt -= heightBias;
|
3752 | }
|
3753 | }
|
3754 |
|
3755 |
|
3756 |
|
3757 |
|
3758 |
|
3759 |
|
3760 | |
3761 |
|
3762 |
|
3763 |
|
3764 |
|
3765 |
|
3766 |
|
3767 | addFontOptionsToPile(dstPile, srcPile) {
|
3768 | for (let i = 0; i < srcPile.length; ++i) {
|
3769 | this.addFontToPile(dstPile, srcPile[i]);
|
3770 | }
|
3771 | }
|
3772 |
|
3773 | |
3774 |
|
3775 |
|
3776 |
|
3777 |
|
3778 |
|
3779 |
|
3780 |
|
3781 | addFontToPile(pile, options) {
|
3782 | if (options === undefined) return;
|
3783 | if (options.font === undefined || options.font === null) return;
|
3784 |
|
3785 | const item = options.font;
|
3786 | pile.push(item);
|
3787 | }
|
3788 |
|
3789 | |
3790 |
|
3791 |
|
3792 |
|
3793 |
|
3794 |
|
3795 |
|
3796 | getBasicOptions(pile) {
|
3797 | const ret = {};
|
3798 |
|
3799 |
|
3800 | for (let n = 0; n < pile.length; ++n) {
|
3801 | let fontOptions = pile[n];
|
3802 |
|
3803 |
|
3804 | const tmpShorthand = {};
|
3805 | if (Label.parseFontString(tmpShorthand, fontOptions)) {
|
3806 | fontOptions = tmpShorthand;
|
3807 | }
|
3808 |
|
3809 | forEach(fontOptions, (opt, name) => {
|
3810 | if (opt === undefined) return;
|
3811 | if (Object.prototype.hasOwnProperty.call(ret, name)) return;
|
3812 |
|
3813 | if (multiFontStyle.indexOf(name) !== -1) {
|
3814 |
|
3815 | ret[name] = {};
|
3816 | } else {
|
3817 | ret[name] = opt;
|
3818 | }
|
3819 | });
|
3820 | }
|
3821 |
|
3822 | return ret;
|
3823 | }
|
3824 |
|
3825 | |
3826 |
|
3827 |
|
3828 |
|
3829 |
|
3830 |
|
3831 |
|
3832 |
|
3833 |
|
3834 |
|
3835 |
|
3836 |
|
3837 |
|
3838 |
|
3839 |
|
3840 |
|
3841 |
|
3842 |
|
3843 |
|
3844 |
|
3845 |
|
3846 |
|
3847 |
|
3848 |
|
3849 |
|
3850 |
|
3851 |
|
3852 | getFontOption(pile, multiName, option) {
|
3853 | let multiFont;
|
3854 |
|
3855 |
|
3856 | for (let n = 0; n < pile.length; ++n) {
|
3857 | const fontOptions = pile[n];
|
3858 |
|
3859 | if (Object.prototype.hasOwnProperty.call(fontOptions, multiName)) {
|
3860 | multiFont = fontOptions[multiName];
|
3861 | if (multiFont === undefined || multiFont === null) continue;
|
3862 |
|
3863 |
|
3864 |
|
3865 | const tmpShorthand = {};
|
3866 | if (Label.parseFontString(tmpShorthand, multiFont)) {
|
3867 | multiFont = tmpShorthand;
|
3868 | }
|
3869 |
|
3870 | if (Object.prototype.hasOwnProperty.call(multiFont, option)) {
|
3871 | return multiFont[option];
|
3872 | }
|
3873 | }
|
3874 | }
|
3875 |
|
3876 |
|
3877 |
|
3878 | if (Object.prototype.hasOwnProperty.call(this.fontOptions, option)) {
|
3879 | return this.fontOptions[option];
|
3880 | }
|
3881 |
|
3882 |
|
3883 | throw new Error(
|
3884 | "Did not find value for multi-font for property: '" + option + "'"
|
3885 | );
|
3886 | }
|
3887 |
|
3888 | |
3889 |
|
3890 |
|
3891 |
|
3892 |
|
3893 |
|
3894 |
|
3895 |
|
3896 |
|
3897 |
|
3898 | getFontOptions(pile, multiName) {
|
3899 | const result = {};
|
3900 | const optionNames = ["color", "size", "face", "mod", "vadjust"];
|
3901 |
|
3902 | for (let i = 0; i < optionNames.length; ++i) {
|
3903 | const mod = optionNames[i];
|
3904 | result[mod] = this.getFontOption(pile, multiName, mod);
|
3905 | }
|
3906 |
|
3907 | return result;
|
3908 | }
|
3909 |
|
3910 |
|
3911 |
|
3912 |
|
3913 |
|
3914 | |
3915 |
|
3916 |
|
3917 |
|
3918 |
|
3919 |
|
3920 |
|
3921 | propagateFonts(pile) {
|
3922 | const fontPile = [];
|
3923 |
|
3924 |
|
3925 | this.addFontOptionsToPile(fontPile, pile);
|
3926 | this.fontOptions = this.getBasicOptions(fontPile);
|
3927 |
|
3928 |
|
3929 | for (let i = 0; i < multiFontStyle.length; ++i) {
|
3930 | const mod = multiFontStyle[i];
|
3931 | const modOptions = this.fontOptions[mod];
|
3932 | const tmpMultiFontOptions = this.getFontOptions(fontPile, mod);
|
3933 |
|
3934 |
|
3935 | forEach(tmpMultiFontOptions, (option, n) => {
|
3936 | modOptions[n] = option;
|
3937 | });
|
3938 |
|
3939 | modOptions.size = Number(modOptions.size);
|
3940 | modOptions.vadjust = Number(modOptions.vadjust);
|
3941 | }
|
3942 | }
|
3943 |
|
3944 | |
3945 |
|
3946 |
|
3947 |
|
3948 |
|
3949 |
|
3950 |
|
3951 |
|
3952 |
|
3953 |
|
3954 | draw(ctx, x, y, selected, hover, baseline = "middle") {
|
3955 |
|
3956 | if (this.elementOptions.label === undefined) return;
|
3957 |
|
3958 |
|
3959 | let viewFontSize = this.fontOptions.size * this.body.view.scale;
|
3960 | if (
|
3961 | this.elementOptions.label &&
|
3962 | viewFontSize < this.elementOptions.scaling.label.drawThreshold - 1
|
3963 | )
|
3964 | return;
|
3965 |
|
3966 |
|
3967 |
|
3968 | if (viewFontSize >= this.elementOptions.scaling.label.maxVisible) {
|
3969 | viewFontSize =
|
3970 | Number(this.elementOptions.scaling.label.maxVisible) /
|
3971 | this.body.view.scale;
|
3972 | }
|
3973 |
|
3974 |
|
3975 | this.calculateLabelSize(ctx, selected, hover, x, y, baseline);
|
3976 | this._drawBackground(ctx);
|
3977 | this._drawText(ctx, x, this.size.yLine, baseline, viewFontSize);
|
3978 | }
|
3979 |
|
3980 | |
3981 |
|
3982 |
|
3983 |
|
3984 |
|
3985 |
|
3986 | _drawBackground(ctx) {
|
3987 | if (
|
3988 | this.fontOptions.background !== undefined &&
|
3989 | this.fontOptions.background !== "none"
|
3990 | ) {
|
3991 | ctx.fillStyle = this.fontOptions.background;
|
3992 | const size = this.getSize();
|
3993 | ctx.fillRect(size.left, size.top, size.width, size.height);
|
3994 | }
|
3995 | }
|
3996 |
|
3997 | |
3998 |
|
3999 |
|
4000 |
|
4001 |
|
4002 |
|
4003 |
|
4004 |
|
4005 |
|
4006 | _drawText(ctx, x, y, baseline = "middle", viewFontSize) {
|
4007 | [x, y] = this._setAlignment(ctx, x, y, baseline);
|
4008 |
|
4009 | ctx.textAlign = "left";
|
4010 | x = x - this.size.width / 2;
|
4011 | if (this.fontOptions.valign && this.size.height > this.size.labelHeight) {
|
4012 | if (this.fontOptions.valign === "top") {
|
4013 | y -= (this.size.height - this.size.labelHeight) / 2;
|
4014 | }
|
4015 | if (this.fontOptions.valign === "bottom") {
|
4016 | y += (this.size.height - this.size.labelHeight) / 2;
|
4017 | }
|
4018 | }
|
4019 |
|
4020 |
|
4021 | for (let i = 0; i < this.lineCount; i++) {
|
4022 | const line = this.lines[i];
|
4023 | if (line && line.blocks) {
|
4024 | let width = 0;
|
4025 | if (this.isEdgeLabel || this.fontOptions.align === "center") {
|
4026 | width += (this.size.width - line.width) / 2;
|
4027 | } else if (this.fontOptions.align === "right") {
|
4028 | width += this.size.width - line.width;
|
4029 | }
|
4030 | for (let j = 0; j < line.blocks.length; j++) {
|
4031 | const block = line.blocks[j];
|
4032 | ctx.font = block.font;
|
4033 | const [fontColor, strokeColor] = this._getColor(
|
4034 | block.color,
|
4035 | viewFontSize,
|
4036 | block.strokeColor
|
4037 | );
|
4038 | if (block.strokeWidth > 0) {
|
4039 | ctx.lineWidth = block.strokeWidth;
|
4040 | ctx.strokeStyle = strokeColor;
|
4041 | ctx.lineJoin = "round";
|
4042 | }
|
4043 | ctx.fillStyle = fontColor;
|
4044 |
|
4045 | if (block.strokeWidth > 0) {
|
4046 | ctx.strokeText(block.text, x + width, y + block.vadjust);
|
4047 | }
|
4048 | ctx.fillText(block.text, x + width, y + block.vadjust);
|
4049 | width += block.width;
|
4050 | }
|
4051 | y += line.height;
|
4052 | }
|
4053 | }
|
4054 | }
|
4055 |
|
4056 | |
4057 |
|
4058 |
|
4059 |
|
4060 |
|
4061 |
|
4062 |
|
4063 |
|
4064 |
|
4065 | _setAlignment(ctx, x, y, baseline) {
|
4066 |
|
4067 |
|
4068 | if (
|
4069 | this.isEdgeLabel &&
|
4070 | this.fontOptions.align !== "horizontal" &&
|
4071 | this.pointToSelf === false
|
4072 | ) {
|
4073 | x = 0;
|
4074 | y = 0;
|
4075 |
|
4076 | const lineMargin = 2;
|
4077 | if (this.fontOptions.align === "top") {
|
4078 | ctx.textBaseline = "alphabetic";
|
4079 | y -= 2 * lineMargin;
|
4080 | } else if (this.fontOptions.align === "bottom") {
|
4081 | ctx.textBaseline = "hanging";
|
4082 | y += 2 * lineMargin;
|
4083 | } else {
|
4084 | ctx.textBaseline = "middle";
|
4085 | }
|
4086 | } else {
|
4087 | ctx.textBaseline = baseline;
|
4088 | }
|
4089 | return [x, y];
|
4090 | }
|
4091 |
|
4092 | |
4093 |
|
4094 |
|
4095 |
|
4096 |
|
4097 |
|
4098 |
|
4099 |
|
4100 |
|
4101 |
|
4102 | _getColor(color, viewFontSize, initialStrokeColor) {
|
4103 | let fontColor = color || "#000000";
|
4104 | let strokeColor = initialStrokeColor || "#ffffff";
|
4105 | if (viewFontSize <= this.elementOptions.scaling.label.drawThreshold) {
|
4106 | const opacity = Math.max(
|
4107 | 0,
|
4108 | Math.min(
|
4109 | 1,
|
4110 | 1 - (this.elementOptions.scaling.label.drawThreshold - viewFontSize)
|
4111 | )
|
4112 | );
|
4113 | fontColor = overrideOpacity(fontColor, opacity);
|
4114 | strokeColor = overrideOpacity(strokeColor, opacity);
|
4115 | }
|
4116 | return [fontColor, strokeColor];
|
4117 | }
|
4118 |
|
4119 | |
4120 |
|
4121 |
|
4122 |
|
4123 |
|
4124 |
|
4125 |
|
4126 | getTextSize(ctx, selected = false, hover = false) {
|
4127 | this._processLabel(ctx, selected, hover);
|
4128 | return {
|
4129 | width: this.size.width,
|
4130 | height: this.size.height,
|
4131 | lineCount: this.lineCount,
|
4132 | };
|
4133 | }
|
4134 |
|
4135 | |
4136 |
|
4137 |
|
4138 |
|
4139 |
|
4140 | getSize() {
|
4141 | const lineMargin = 2;
|
4142 | let x = this.size.left;
|
4143 | let y = this.size.top - 0.5 * lineMargin;
|
4144 |
|
4145 | if (this.isEdgeLabel) {
|
4146 | const x2 = -this.size.width * 0.5;
|
4147 |
|
4148 | switch (this.fontOptions.align) {
|
4149 | case "middle":
|
4150 | x = x2;
|
4151 | y = -this.size.height * 0.5;
|
4152 | break;
|
4153 | case "top":
|
4154 | x = x2;
|
4155 | y = -(this.size.height + lineMargin);
|
4156 | break;
|
4157 | case "bottom":
|
4158 | x = x2;
|
4159 | y = lineMargin;
|
4160 | break;
|
4161 | }
|
4162 | }
|
4163 |
|
4164 | const ret = {
|
4165 | left: x,
|
4166 | top: y,
|
4167 | width: this.size.width,
|
4168 | height: this.size.height,
|
4169 | };
|
4170 |
|
4171 | return ret;
|
4172 | }
|
4173 |
|
4174 | |
4175 |
|
4176 |
|
4177 |
|
4178 |
|
4179 |
|
4180 |
|
4181 |
|
4182 |
|
4183 | calculateLabelSize(ctx, selected, hover, x = 0, y = 0, baseline = "middle") {
|
4184 | this._processLabel(ctx, selected, hover);
|
4185 | this.size.left = x - this.size.width * 0.5;
|
4186 | this.size.top = y - this.size.height * 0.5;
|
4187 | this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.fontOptions.size;
|
4188 | if (baseline === "hanging") {
|
4189 | this.size.top += 0.5 * this.fontOptions.size;
|
4190 | this.size.top += 4;
|
4191 | this.size.yLine += 4;
|
4192 | }
|
4193 | }
|
4194 |
|
4195 | |
4196 |
|
4197 |
|
4198 |
|
4199 |
|
4200 |
|
4201 |
|
4202 |
|
4203 | getFormattingValues(ctx, selected, hover, mod) {
|
4204 | const getValue = function (fontOptions, mod, option) {
|
4205 | if (mod === "normal") {
|
4206 | if (option === "mod") return "";
|
4207 | return fontOptions[option];
|
4208 | }
|
4209 |
|
4210 | if (fontOptions[mod][option] !== undefined) {
|
4211 |
|
4212 | return fontOptions[mod][option];
|
4213 | } else {
|
4214 |
|
4215 | return fontOptions[option];
|
4216 | }
|
4217 | };
|
4218 |
|
4219 | const values = {
|
4220 | color: getValue(this.fontOptions, mod, "color"),
|
4221 | size: getValue(this.fontOptions, mod, "size"),
|
4222 | face: getValue(this.fontOptions, mod, "face"),
|
4223 | mod: getValue(this.fontOptions, mod, "mod"),
|
4224 | vadjust: getValue(this.fontOptions, mod, "vadjust"),
|
4225 | strokeWidth: this.fontOptions.strokeWidth,
|
4226 | strokeColor: this.fontOptions.strokeColor,
|
4227 | };
|
4228 | if (selected || hover) {
|
4229 | if (
|
4230 | mod === "normal" &&
|
4231 | this.fontOptions.chooser === true &&
|
4232 | this.elementOptions.labelHighlightBold
|
4233 | ) {
|
4234 | values.mod = "bold";
|
4235 | } else {
|
4236 | if (typeof this.fontOptions.chooser === "function") {
|
4237 | this.fontOptions.chooser(
|
4238 | values,
|
4239 | this.elementOptions.id,
|
4240 | selected,
|
4241 | hover
|
4242 | );
|
4243 | }
|
4244 | }
|
4245 | }
|
4246 |
|
4247 | let fontString = "";
|
4248 | if (values.mod !== undefined && values.mod !== "") {
|
4249 |
|
4250 | fontString += values.mod + " ";
|
4251 | }
|
4252 | fontString += values.size + "px " + values.face;
|
4253 |
|
4254 | ctx.font = fontString.replace(/"/g, "");
|
4255 | values.font = ctx.font;
|
4256 | values.height = values.size;
|
4257 | return values;
|
4258 | }
|
4259 |
|
4260 | |
4261 |
|
4262 |
|
4263 |
|
4264 |
|
4265 |
|
4266 | differentState(selected, hover) {
|
4267 | return selected !== this.selectedState || hover !== this.hoverState;
|
4268 | }
|
4269 |
|
4270 | |
4271 |
|
4272 |
|
4273 |
|
4274 |
|
4275 |
|
4276 |
|
4277 |
|
4278 |
|
4279 |
|
4280 | _processLabelText(ctx, selected, hover, inText) {
|
4281 | const splitter = new LabelSplitter(ctx, this, selected, hover);
|
4282 | return splitter.process(inText);
|
4283 | }
|
4284 |
|
4285 | |
4286 |
|
4287 |
|
4288 |
|
4289 |
|
4290 |
|
4291 |
|
4292 |
|
4293 | _processLabel(ctx, selected, hover) {
|
4294 | if (this.labelDirty === false && !this.differentState(selected, hover))
|
4295 | return;
|
4296 |
|
4297 | const state = this._processLabelText(
|
4298 | ctx,
|
4299 | selected,
|
4300 | hover,
|
4301 | this.elementOptions.label
|
4302 | );
|
4303 |
|
4304 | if (this.fontOptions.minWdt > 0 && state.width < this.fontOptions.minWdt) {
|
4305 | state.width = this.fontOptions.minWdt;
|
4306 | }
|
4307 |
|
4308 | this.size.labelHeight = state.height;
|
4309 | if (this.fontOptions.minHgt > 0 && state.height < this.fontOptions.minHgt) {
|
4310 | state.height = this.fontOptions.minHgt;
|
4311 | }
|
4312 |
|
4313 | this.lines = state.lines;
|
4314 | this.lineCount = state.lines.length;
|
4315 | this.size.width = state.width;
|
4316 | this.size.height = state.height;
|
4317 | this.selectedState = selected;
|
4318 | this.hoverState = hover;
|
4319 |
|
4320 | this.labelDirty = false;
|
4321 | }
|
4322 |
|
4323 | |
4324 |
|
4325 |
|
4326 |
|
4327 |
|
4328 | visible() {
|
4329 | if (
|
4330 | this.size.width === 0 ||
|
4331 | this.size.height === 0 ||
|
4332 | this.elementOptions.label === undefined
|
4333 | ) {
|
4334 | return false;
|
4335 | }
|
4336 |
|
4337 | const viewFontSize = this.fontOptions.size * this.body.view.scale;
|
4338 | if (viewFontSize < this.elementOptions.scaling.label.drawThreshold - 1) {
|
4339 | return false;
|
4340 | }
|
4341 |
|
4342 | return true;
|
4343 | }
|
4344 | }
|
4345 |
|
4346 |
|
4347 |
|
4348 |
|
4349 | class NodeBase {
|
4350 | |
4351 |
|
4352 |
|
4353 |
|
4354 |
|
4355 | constructor(options, body, labelModule) {
|
4356 | this.body = body;
|
4357 | this.labelModule = labelModule;
|
4358 | this.setOptions(options);
|
4359 | this.top = undefined;
|
4360 | this.left = undefined;
|
4361 | this.height = undefined;
|
4362 | this.width = undefined;
|
4363 | this.radius = undefined;
|
4364 | this.margin = undefined;
|
4365 | this.refreshNeeded = true;
|
4366 | this.boundingBox = { top: 0, left: 0, right: 0, bottom: 0 };
|
4367 | }
|
4368 |
|
4369 | |
4370 |
|
4371 |
|
4372 |
|
4373 | setOptions(options) {
|
4374 | this.options = options;
|
4375 | }
|
4376 |
|
4377 | |
4378 |
|
4379 |
|
4380 |
|
4381 |
|
4382 | _setMargins(labelModule) {
|
4383 | this.margin = {};
|
4384 | if (this.options.margin) {
|
4385 | if (typeof this.options.margin == "object") {
|
4386 | this.margin.top = this.options.margin.top;
|
4387 | this.margin.right = this.options.margin.right;
|
4388 | this.margin.bottom = this.options.margin.bottom;
|
4389 | this.margin.left = this.options.margin.left;
|
4390 | } else {
|
4391 | this.margin.top = this.options.margin;
|
4392 | this.margin.right = this.options.margin;
|
4393 | this.margin.bottom = this.options.margin;
|
4394 | this.margin.left = this.options.margin;
|
4395 | }
|
4396 | }
|
4397 | labelModule.adjustSizes(this.margin);
|
4398 | }
|
4399 |
|
4400 | |
4401 |
|
4402 |
|
4403 |
|
4404 |
|
4405 |
|
4406 |
|
4407 | _distanceToBorder(ctx, angle) {
|
4408 | const borderWidth = this.options.borderWidth;
|
4409 | if (ctx) {
|
4410 | this.resize(ctx);
|
4411 | }
|
4412 | return (
|
4413 | Math.min(
|
4414 | Math.abs(this.width / 2 / Math.cos(angle)),
|
4415 | Math.abs(this.height / 2 / Math.sin(angle))
|
4416 | ) + borderWidth
|
4417 | );
|
4418 | }
|
4419 |
|
4420 | |
4421 |
|
4422 |
|
4423 |
|
4424 |
|
4425 | enableShadow(ctx, values) {
|
4426 | if (values.shadow) {
|
4427 | ctx.shadowColor = values.shadowColor;
|
4428 | ctx.shadowBlur = values.shadowSize;
|
4429 | ctx.shadowOffsetX = values.shadowX;
|
4430 | ctx.shadowOffsetY = values.shadowY;
|
4431 | }
|
4432 | }
|
4433 |
|
4434 | |
4435 |
|
4436 |
|
4437 |
|
4438 |
|
4439 | disableShadow(ctx, values) {
|
4440 | if (values.shadow) {
|
4441 | ctx.shadowColor = "rgba(0,0,0,0)";
|
4442 | ctx.shadowBlur = 0;
|
4443 | ctx.shadowOffsetX = 0;
|
4444 | ctx.shadowOffsetY = 0;
|
4445 | }
|
4446 | }
|
4447 |
|
4448 | |
4449 |
|
4450 |
|
4451 |
|
4452 |
|
4453 | enableBorderDashes(ctx, values) {
|
4454 | if (values.borderDashes !== false) {
|
4455 | if (ctx.setLineDash !== undefined) {
|
4456 | let dashes = values.borderDashes;
|
4457 | if (dashes === true) {
|
4458 | dashes = [5, 15];
|
4459 | }
|
4460 | ctx.setLineDash(dashes);
|
4461 | } else {
|
4462 | console.warn(
|
4463 | "setLineDash is not supported in this browser. The dashed borders cannot be used."
|
4464 | );
|
4465 | this.options.shapeProperties.borderDashes = false;
|
4466 | values.borderDashes = false;
|
4467 | }
|
4468 | }
|
4469 | }
|
4470 |
|
4471 | |
4472 |
|
4473 |
|
4474 |
|
4475 |
|
4476 | disableBorderDashes(ctx, values) {
|
4477 | if (values.borderDashes !== false) {
|
4478 | if (ctx.setLineDash !== undefined) {
|
4479 | ctx.setLineDash([0]);
|
4480 | } else {
|
4481 | console.warn(
|
4482 | "setLineDash is not supported in this browser. The dashed borders cannot be used."
|
4483 | );
|
4484 | this.options.shapeProperties.borderDashes = false;
|
4485 | values.borderDashes = false;
|
4486 | }
|
4487 | }
|
4488 | }
|
4489 |
|
4490 | |
4491 |
|
4492 |
|
4493 |
|
4494 |
|
4495 |
|
4496 |
|
4497 |
|
4498 | needsRefresh(selected, hover) {
|
4499 | if (this.refreshNeeded === true) {
|
4500 |
|
4501 |
|
4502 | this.refreshNeeded = false;
|
4503 | return true;
|
4504 | }
|
4505 |
|
4506 | return (
|
4507 | this.width === undefined ||
|
4508 | this.labelModule.differentState(selected, hover)
|
4509 | );
|
4510 | }
|
4511 |
|
4512 | |
4513 |
|
4514 |
|
4515 |
|
4516 |
|
4517 | initContextForDraw(ctx, values) {
|
4518 | const borderWidth = values.borderWidth / this.body.view.scale;
|
4519 |
|
4520 | ctx.lineWidth = Math.min(this.width, borderWidth);
|
4521 | ctx.strokeStyle = values.borderColor;
|
4522 | ctx.fillStyle = values.color;
|
4523 | }
|
4524 |
|
4525 | |
4526 |
|
4527 |
|
4528 |
|
4529 |
|
4530 | performStroke(ctx, values) {
|
4531 | const borderWidth = values.borderWidth / this.body.view.scale;
|
4532 |
|
4533 |
|
4534 | ctx.save();
|
4535 |
|
4536 | if (borderWidth > 0) {
|
4537 | this.enableBorderDashes(ctx, values);
|
4538 |
|
4539 | ctx.stroke();
|
4540 |
|
4541 | this.disableBorderDashes(ctx, values);
|
4542 | }
|
4543 | ctx.restore();
|
4544 | }
|
4545 |
|
4546 | |
4547 |
|
4548 |
|
4549 |
|
4550 |
|
4551 | performFill(ctx, values) {
|
4552 | ctx.save();
|
4553 | ctx.fillStyle = values.color;
|
4554 |
|
4555 | this.enableShadow(ctx, values);
|
4556 |
|
4557 | ctx.fill();
|
4558 |
|
4559 | this.disableShadow(ctx, values);
|
4560 |
|
4561 | ctx.restore();
|
4562 | this.performStroke(ctx, values);
|
4563 | }
|
4564 |
|
4565 | |
4566 |
|
4567 |
|
4568 |
|
4569 |
|
4570 | _addBoundingBoxMargin(margin) {
|
4571 | this.boundingBox.left -= margin;
|
4572 | this.boundingBox.top -= margin;
|
4573 | this.boundingBox.bottom += margin;
|
4574 | this.boundingBox.right += margin;
|
4575 | }
|
4576 |
|
4577 | |
4578 |
|
4579 |
|
4580 |
|
4581 |
|
4582 |
|
4583 |
|
4584 |
|
4585 |
|
4586 |
|
4587 |
|
4588 |
|
4589 |
|
4590 | _updateBoundingBox(x, y, ctx, selected, hover) {
|
4591 | if (ctx !== undefined) {
|
4592 | this.resize(ctx, selected, hover);
|
4593 | }
|
4594 |
|
4595 | this.left = x - this.width / 2;
|
4596 | this.top = y - this.height / 2;
|
4597 |
|
4598 | this.boundingBox.left = this.left;
|
4599 | this.boundingBox.top = this.top;
|
4600 | this.boundingBox.bottom = this.top + this.height;
|
4601 | this.boundingBox.right = this.left + this.width;
|
4602 | }
|
4603 |
|
4604 | |
4605 |
|
4606 |
|
4607 |
|
4608 |
|
4609 |
|
4610 |
|
4611 |
|
4612 |
|
4613 |
|
4614 | updateBoundingBox(x, y, ctx, selected, hover) {
|
4615 | this._updateBoundingBox(x, y, ctx, selected, hover);
|
4616 | }
|
4617 |
|
4618 | |
4619 |
|
4620 |
|
4621 |
|
4622 |
|
4623 |
|
4624 |
|
4625 |
|
4626 |
|
4627 |
|
4628 |
|
4629 |
|
4630 |
|
4631 | getDimensionsFromLabel(ctx, selected, hover) {
|
4632 |
|
4633 |
|
4634 | this.textSize = this.labelModule.getTextSize(ctx, selected, hover);
|
4635 | let width = this.textSize.width;
|
4636 | let height = this.textSize.height;
|
4637 |
|
4638 | const DEFAULT_SIZE = 14;
|
4639 | if (width === 0) {
|
4640 |
|
4641 | width = DEFAULT_SIZE;
|
4642 | height = DEFAULT_SIZE;
|
4643 | }
|
4644 |
|
4645 | return { width: width, height: height };
|
4646 | }
|
4647 | }
|
4648 |
|
4649 |
|
4650 |
|
4651 |
|
4652 |
|
4653 |
|
4654 | class Box$1 extends NodeBase {
|
4655 | |
4656 |
|
4657 |
|
4658 |
|
4659 |
|
4660 | constructor(options, body, labelModule) {
|
4661 | super(options, body, labelModule);
|
4662 | this._setMargins(labelModule);
|
4663 | }
|
4664 |
|
4665 | |
4666 |
|
4667 |
|
4668 |
|
4669 |
|
4670 |
|
4671 | resize(ctx, selected = this.selected, hover = this.hover) {
|
4672 | if (this.needsRefresh(selected, hover)) {
|
4673 | const dimensions = this.getDimensionsFromLabel(ctx, selected, hover);
|
4674 |
|
4675 | this.width = dimensions.width + this.margin.right + this.margin.left;
|
4676 | this.height = dimensions.height + this.margin.top + this.margin.bottom;
|
4677 | this.radius = this.width / 2;
|
4678 | }
|
4679 | }
|
4680 |
|
4681 | |
4682 |
|
4683 |
|
4684 |
|
4685 |
|
4686 |
|
4687 |
|
4688 |
|
4689 |
|
4690 | draw(ctx, x, y, selected, hover, values) {
|
4691 | this.resize(ctx, selected, hover);
|
4692 | this.left = x - this.width / 2;
|
4693 | this.top = y - this.height / 2;
|
4694 |
|
4695 | this.initContextForDraw(ctx, values);
|
4696 | drawRoundRect(
|
4697 | ctx,
|
4698 | this.left,
|
4699 | this.top,
|
4700 | this.width,
|
4701 | this.height,
|
4702 | values.borderRadius
|
4703 | );
|
4704 | this.performFill(ctx, values);
|
4705 |
|
4706 | this.updateBoundingBox(x, y, ctx, selected, hover);
|
4707 | this.labelModule.draw(
|
4708 | ctx,
|
4709 | this.left + this.textSize.width / 2 + this.margin.left,
|
4710 | this.top + this.textSize.height / 2 + this.margin.top,
|
4711 | selected,
|
4712 | hover
|
4713 | );
|
4714 | }
|
4715 |
|
4716 | |
4717 |
|
4718 |
|
4719 |
|
4720 |
|
4721 |
|
4722 |
|
4723 |
|
4724 | updateBoundingBox(x, y, ctx, selected, hover) {
|
4725 | this._updateBoundingBox(x, y, ctx, selected, hover);
|
4726 |
|
4727 | const borderRadius = this.options.shapeProperties.borderRadius;
|
4728 | this._addBoundingBoxMargin(borderRadius);
|
4729 | }
|
4730 |
|
4731 | |
4732 |
|
4733 |
|
4734 |
|
4735 |
|
4736 |
|
4737 | distanceToBorder(ctx, angle) {
|
4738 | if (ctx) {
|
4739 | this.resize(ctx);
|
4740 | }
|
4741 | const borderWidth = this.options.borderWidth;
|
4742 |
|
4743 | return (
|
4744 | Math.min(
|
4745 | Math.abs(this.width / 2 / Math.cos(angle)),
|
4746 | Math.abs(this.height / 2 / Math.sin(angle))
|
4747 | ) + borderWidth
|
4748 | );
|
4749 | }
|
4750 | }
|
4751 |
|
4752 |
|
4753 |
|
4754 |
|
4755 |
|
4756 |
|
4757 |
|
4758 |
|
4759 |
|
4760 |
|
4761 |
|
4762 |
|
4763 |
|
4764 |
|
4765 |
|
4766 |
|
4767 | class CircleImageBase extends NodeBase {
|
4768 | |
4769 |
|
4770 |
|
4771 |
|
4772 |
|
4773 | constructor(options, body, labelModule) {
|
4774 | super(options, body, labelModule);
|
4775 | this.labelOffset = 0;
|
4776 | this.selected = false;
|
4777 | }
|
4778 |
|
4779 | |
4780 |
|
4781 |
|
4782 |
|
4783 |
|
4784 |
|
4785 | setOptions(options, imageObj, imageObjAlt) {
|
4786 | this.options = options;
|
4787 |
|
4788 | if (!(imageObj === undefined && imageObjAlt === undefined)) {
|
4789 | this.setImages(imageObj, imageObjAlt);
|
4790 | }
|
4791 | }
|
4792 |
|
4793 | |
4794 |
|
4795 |
|
4796 |
|
4797 |
|
4798 |
|
4799 |
|
4800 |
|
4801 |
|
4802 |
|
4803 |
|
4804 |
|
4805 | setImages(imageObj, imageObjAlt) {
|
4806 | if (imageObjAlt && this.selected) {
|
4807 | this.imageObj = imageObjAlt;
|
4808 | this.imageObjAlt = imageObj;
|
4809 | } else {
|
4810 | this.imageObj = imageObj;
|
4811 | this.imageObjAlt = imageObjAlt;
|
4812 | }
|
4813 | }
|
4814 |
|
4815 | |
4816 |
|
4817 |
|
4818 |
|
4819 |
|
4820 |
|
4821 |
|
4822 | switchImages(selected) {
|
4823 | const selection_changed =
|
4824 | (selected && !this.selected) || (!selected && this.selected);
|
4825 | this.selected = selected;
|
4826 |
|
4827 | if (this.imageObjAlt !== undefined && selection_changed) {
|
4828 | const imageTmp = this.imageObj;
|
4829 | this.imageObj = this.imageObjAlt;
|
4830 | this.imageObjAlt = imageTmp;
|
4831 | }
|
4832 | }
|
4833 |
|
4834 | |
4835 |
|
4836 |
|
4837 |
|
4838 |
|
4839 |
|
4840 | _getImagePadding() {
|
4841 | const imgPadding = { top: 0, right: 0, bottom: 0, left: 0 };
|
4842 | if (this.options.imagePadding) {
|
4843 | const optImgPadding = this.options.imagePadding;
|
4844 | if (typeof optImgPadding == "object") {
|
4845 | imgPadding.top = optImgPadding.top;
|
4846 | imgPadding.right = optImgPadding.right;
|
4847 | imgPadding.bottom = optImgPadding.bottom;
|
4848 | imgPadding.left = optImgPadding.left;
|
4849 | } else {
|
4850 | imgPadding.top = optImgPadding;
|
4851 | imgPadding.right = optImgPadding;
|
4852 | imgPadding.bottom = optImgPadding;
|
4853 | imgPadding.left = optImgPadding;
|
4854 | }
|
4855 | }
|
4856 |
|
4857 | return imgPadding;
|
4858 | }
|
4859 |
|
4860 | |
4861 |
|
4862 |
|
4863 |
|
4864 |
|
4865 | _resizeImage() {
|
4866 | let width, height;
|
4867 |
|
4868 | if (this.options.shapeProperties.useImageSize === false) {
|
4869 |
|
4870 | let ratio_width = 1;
|
4871 | let ratio_height = 1;
|
4872 |
|
4873 |
|
4874 | if (this.imageObj.width && this.imageObj.height) {
|
4875 | if (this.imageObj.width > this.imageObj.height) {
|
4876 | ratio_width = this.imageObj.width / this.imageObj.height;
|
4877 | } else {
|
4878 | ratio_height = this.imageObj.height / this.imageObj.width;
|
4879 | }
|
4880 | }
|
4881 |
|
4882 | width = this.options.size * 2 * ratio_width;
|
4883 | height = this.options.size * 2 * ratio_height;
|
4884 | } else {
|
4885 |
|
4886 | const imgPadding = this._getImagePadding();
|
4887 | width = this.imageObj.width + imgPadding.left + imgPadding.right;
|
4888 | height = this.imageObj.height + imgPadding.top + imgPadding.bottom;
|
4889 | }
|
4890 |
|
4891 | this.width = width;
|
4892 | this.height = height;
|
4893 | this.radius = 0.5 * this.width;
|
4894 | }
|
4895 |
|
4896 | |
4897 |
|
4898 |
|
4899 |
|
4900 |
|
4901 |
|
4902 |
|
4903 |
|
4904 | _drawRawCircle(ctx, x, y, values) {
|
4905 | this.initContextForDraw(ctx, values);
|
4906 | drawCircle(ctx, x, y, values.size);
|
4907 | this.performFill(ctx, values);
|
4908 | }
|
4909 |
|
4910 | |
4911 |
|
4912 |
|
4913 |
|
4914 |
|
4915 |
|
4916 | _drawImageAtPosition(ctx, values) {
|
4917 | if (this.imageObj.width != 0) {
|
4918 |
|
4919 | ctx.globalAlpha = values.opacity !== undefined ? values.opacity : 1;
|
4920 |
|
4921 |
|
4922 | this.enableShadow(ctx, values);
|
4923 |
|
4924 | let factor = 1;
|
4925 | if (this.options.shapeProperties.interpolation === true) {
|
4926 | factor = this.imageObj.width / this.width / this.body.view.scale;
|
4927 | }
|
4928 |
|
4929 | const imgPadding = this._getImagePadding();
|
4930 |
|
4931 | const imgPosLeft = this.left + imgPadding.left;
|
4932 | const imgPosTop = this.top + imgPadding.top;
|
4933 | const imgWidth = this.width - imgPadding.left - imgPadding.right;
|
4934 | const imgHeight = this.height - imgPadding.top - imgPadding.bottom;
|
4935 | this.imageObj.drawImageAtPosition(
|
4936 | ctx,
|
4937 | factor,
|
4938 | imgPosLeft,
|
4939 | imgPosTop,
|
4940 | imgWidth,
|
4941 | imgHeight
|
4942 | );
|
4943 |
|
4944 |
|
4945 | this.disableShadow(ctx, values);
|
4946 | }
|
4947 | }
|
4948 |
|
4949 | |
4950 |
|
4951 |
|
4952 |
|
4953 |
|
4954 |
|
4955 |
|
4956 |
|
4957 |
|
4958 | _drawImageLabel(ctx, x, y, selected, hover) {
|
4959 | let offset = 0;
|
4960 |
|
4961 | if (this.height !== undefined) {
|
4962 | offset = this.height * 0.5;
|
4963 | const labelDimensions = this.labelModule.getTextSize(
|
4964 | ctx,
|
4965 | selected,
|
4966 | hover
|
4967 | );
|
4968 | if (labelDimensions.lineCount >= 1) {
|
4969 | offset += labelDimensions.height / 2;
|
4970 | }
|
4971 | }
|
4972 |
|
4973 | const yLabel = y + offset;
|
4974 |
|
4975 | if (this.options.label) {
|
4976 | this.labelOffset = offset;
|
4977 | }
|
4978 | this.labelModule.draw(ctx, x, yLabel, selected, hover, "hanging");
|
4979 | }
|
4980 | }
|
4981 |
|
4982 |
|
4983 |
|
4984 |
|
4985 |
|
4986 |
|
4987 | class Circle$1 extends CircleImageBase {
|
4988 | |
4989 |
|
4990 |
|
4991 |
|
4992 |
|
4993 | constructor(options, body, labelModule) {
|
4994 | super(options, body, labelModule);
|
4995 | this._setMargins(labelModule);
|
4996 | }
|
4997 |
|
4998 | |
4999 |
|
5000 |
|
5001 |
|
5002 |
|
5003 |
|
5004 | resize(ctx, selected = this.selected, hover = this.hover) {
|
5005 | if (this.needsRefresh(selected, hover)) {
|
5006 | const dimensions = this.getDimensionsFromLabel(ctx, selected, hover);
|
5007 |
|
5008 | const diameter = Math.max(
|
5009 | dimensions.width + this.margin.right + this.margin.left,
|
5010 | dimensions.height + this.margin.top + this.margin.bottom
|
5011 | );
|
5012 |
|
5013 | this.options.size = diameter / 2;
|
5014 | this.width = diameter;
|
5015 | this.height = diameter;
|
5016 | this.radius = this.width / 2;
|
5017 | }
|
5018 | }
|
5019 |
|
5020 | |
5021 |
|
5022 |
|
5023 |
|
5024 |
|
5025 |
|
5026 |
|
5027 |
|
5028 |
|
5029 | draw(ctx, x, y, selected, hover, values) {
|
5030 | this.resize(ctx, selected, hover);
|
5031 | this.left = x - this.width / 2;
|
5032 | this.top = y - this.height / 2;
|
5033 |
|
5034 | this._drawRawCircle(ctx, x, y, values);
|
5035 |
|
5036 | this.updateBoundingBox(x, y);
|
5037 | this.labelModule.draw(
|
5038 | ctx,
|
5039 | this.left + this.textSize.width / 2 + this.margin.left,
|
5040 | y,
|
5041 | selected,
|
5042 | hover
|
5043 | );
|
5044 | }
|
5045 |
|
5046 | |
5047 |
|
5048 |
|
5049 |
|
5050 |
|
5051 | updateBoundingBox(x, y) {
|
5052 | this.boundingBox.top = y - this.options.size;
|
5053 | this.boundingBox.left = x - this.options.size;
|
5054 | this.boundingBox.right = x + this.options.size;
|
5055 | this.boundingBox.bottom = y + this.options.size;
|
5056 | }
|
5057 |
|
5058 | |
5059 |
|
5060 |
|
5061 |
|
5062 |
|
5063 | distanceToBorder(ctx) {
|
5064 | if (ctx) {
|
5065 | this.resize(ctx);
|
5066 | }
|
5067 | return this.width * 0.5;
|
5068 | }
|
5069 | }
|
5070 |
|
5071 |
|
5072 |
|
5073 |
|
5074 |
|
5075 |
|
5076 | class CircularImage extends CircleImageBase {
|
5077 | |
5078 |
|
5079 |
|
5080 |
|
5081 |
|
5082 |
|
5083 |
|
5084 | constructor(options, body, labelModule, imageObj, imageObjAlt) {
|
5085 | super(options, body, labelModule);
|
5086 |
|
5087 | this.setImages(imageObj, imageObjAlt);
|
5088 | }
|
5089 |
|
5090 | |
5091 |
|
5092 |
|
5093 |
|
5094 |
|
5095 |
|
5096 | resize(ctx, selected = this.selected, hover = this.hover) {
|
5097 | const imageAbsent =
|
5098 | this.imageObj.src === undefined ||
|
5099 | this.imageObj.width === undefined ||
|
5100 | this.imageObj.height === undefined;
|
5101 |
|
5102 | if (imageAbsent) {
|
5103 | const diameter = this.options.size * 2;
|
5104 | this.width = diameter;
|
5105 | this.height = diameter;
|
5106 | this.radius = 0.5 * this.width;
|
5107 | return;
|
5108 | }
|
5109 |
|
5110 |
|
5111 | if (this.needsRefresh(selected, hover)) {
|
5112 | this._resizeImage();
|
5113 | }
|
5114 | }
|
5115 |
|
5116 | |
5117 |
|
5118 |
|
5119 |
|
5120 |
|
5121 |
|
5122 |
|
5123 |
|
5124 |
|
5125 | draw(ctx, x, y, selected, hover, values) {
|
5126 | this.switchImages(selected);
|
5127 | this.resize();
|
5128 |
|
5129 | let labelX = x,
|
5130 | labelY = y;
|
5131 |
|
5132 | if (this.options.shapeProperties.coordinateOrigin === "top-left") {
|
5133 | this.left = x;
|
5134 | this.top = y;
|
5135 | labelX += this.width / 2;
|
5136 | labelY += this.height / 2;
|
5137 | } else {
|
5138 | this.left = x - this.width / 2;
|
5139 | this.top = y - this.height / 2;
|
5140 | }
|
5141 |
|
5142 |
|
5143 | this._drawRawCircle(ctx, labelX, labelY, values);
|
5144 |
|
5145 |
|
5146 | ctx.save();
|
5147 |
|
5148 | ctx.clip();
|
5149 |
|
5150 | this._drawImageAtPosition(ctx, values);
|
5151 |
|
5152 | ctx.restore();
|
5153 |
|
5154 | this._drawImageLabel(ctx, labelX, labelY, selected, hover);
|
5155 |
|
5156 | this.updateBoundingBox(x, y);
|
5157 | }
|
5158 |
|
5159 |
|
5160 | |
5161 |
|
5162 |
|
5163 |
|
5164 |
|
5165 | updateBoundingBox(x, y) {
|
5166 | if (this.options.shapeProperties.coordinateOrigin === "top-left") {
|
5167 | this.boundingBox.top = y;
|
5168 | this.boundingBox.left = x;
|
5169 | this.boundingBox.right = x + this.options.size * 2;
|
5170 | this.boundingBox.bottom = y + this.options.size * 2;
|
5171 | } else {
|
5172 | this.boundingBox.top = y - this.options.size;
|
5173 | this.boundingBox.left = x - this.options.size;
|
5174 | this.boundingBox.right = x + this.options.size;
|
5175 | this.boundingBox.bottom = y + this.options.size;
|
5176 | }
|
5177 |
|
5178 |
|
5179 | this.boundingBox.left = Math.min(
|
5180 | this.boundingBox.left,
|
5181 | this.labelModule.size.left
|
5182 | );
|
5183 | this.boundingBox.right = Math.max(
|
5184 | this.boundingBox.right,
|
5185 | this.labelModule.size.left + this.labelModule.size.width
|
5186 | );
|
5187 | this.boundingBox.bottom = Math.max(
|
5188 | this.boundingBox.bottom,
|
5189 | this.boundingBox.bottom + this.labelOffset
|
5190 | );
|
5191 | }
|
5192 |
|
5193 | |
5194 |
|
5195 |
|
5196 |
|
5197 |
|
5198 | distanceToBorder(ctx) {
|
5199 | if (ctx) {
|
5200 | this.resize(ctx);
|
5201 | }
|
5202 | return this.width * 0.5;
|
5203 | }
|
5204 | }
|
5205 |
|
5206 |
|
5207 |
|
5208 |
|
5209 |
|
5210 |
|
5211 | class ShapeBase extends NodeBase {
|
5212 | |
5213 |
|
5214 |
|
5215 |
|
5216 |
|
5217 | constructor(options, body, labelModule) {
|
5218 | super(options, body, labelModule);
|
5219 | }
|
5220 |
|
5221 | |
5222 |
|
5223 |
|
5224 |
|
5225 |
|
5226 |
|
5227 |
|
5228 | resize(
|
5229 | ctx,
|
5230 | selected = this.selected,
|
5231 | hover = this.hover,
|
5232 | values = { size: this.options.size }
|
5233 | ) {
|
5234 | if (this.needsRefresh(selected, hover)) {
|
5235 | this.labelModule.getTextSize(ctx, selected, hover);
|
5236 | const size = 2 * values.size;
|
5237 | this.width = this.customSizeWidth ?? size;
|
5238 | this.height = this.customSizeHeight ?? size;
|
5239 | this.radius = 0.5 * this.width;
|
5240 | }
|
5241 | }
|
5242 |
|
5243 | |
5244 |
|
5245 |
|
5246 |
|
5247 |
|
5248 |
|
5249 |
|
5250 |
|
5251 |
|
5252 |
|
5253 |
|
5254 |
|
5255 |
|
5256 |
|
5257 | _drawShape(ctx, shape, sizeMultiplier, x, y, selected, hover, values) {
|
5258 | this.resize(ctx, selected, hover, values);
|
5259 | this.left = x - this.width / 2;
|
5260 | this.top = y - this.height / 2;
|
5261 |
|
5262 | this.initContextForDraw(ctx, values);
|
5263 | getShape(shape)(ctx, x, y, values.size);
|
5264 | this.performFill(ctx, values);
|
5265 |
|
5266 | if (this.options.icon !== undefined) {
|
5267 | if (this.options.icon.code !== undefined) {
|
5268 | ctx.font =
|
5269 | (selected ? "bold " : "") +
|
5270 | this.height / 2 +
|
5271 | "px " +
|
5272 | (this.options.icon.face || "FontAwesome");
|
5273 | ctx.fillStyle = this.options.icon.color || "black";
|
5274 | ctx.textAlign = "center";
|
5275 | ctx.textBaseline = "middle";
|
5276 | ctx.fillText(this.options.icon.code, x, y);
|
5277 | }
|
5278 | }
|
5279 |
|
5280 | return {
|
5281 | drawExternalLabel: () => {
|
5282 | if (this.options.label !== undefined) {
|
5283 |
|
5284 |
|
5285 | this.labelModule.calculateLabelSize(
|
5286 | ctx,
|
5287 | selected,
|
5288 | hover,
|
5289 | x,
|
5290 | y,
|
5291 | "hanging"
|
5292 | );
|
5293 | const yLabel =
|
5294 | y + 0.5 * this.height + 0.5 * this.labelModule.size.height;
|
5295 | this.labelModule.draw(ctx, x, yLabel, selected, hover, "hanging");
|
5296 | }
|
5297 |
|
5298 | this.updateBoundingBox(x, y);
|
5299 | },
|
5300 | };
|
5301 | }
|
5302 |
|
5303 | |
5304 |
|
5305 |
|
5306 |
|
5307 |
|
5308 | updateBoundingBox(x, y) {
|
5309 | this.boundingBox.top = y - this.options.size;
|
5310 | this.boundingBox.left = x - this.options.size;
|
5311 | this.boundingBox.right = x + this.options.size;
|
5312 | this.boundingBox.bottom = y + this.options.size;
|
5313 |
|
5314 | if (this.options.label !== undefined && this.labelModule.size.width > 0) {
|
5315 | this.boundingBox.left = Math.min(
|
5316 | this.boundingBox.left,
|
5317 | this.labelModule.size.left
|
5318 | );
|
5319 | this.boundingBox.right = Math.max(
|
5320 | this.boundingBox.right,
|
5321 | this.labelModule.size.left + this.labelModule.size.width
|
5322 | );
|
5323 | this.boundingBox.bottom = Math.max(
|
5324 | this.boundingBox.bottom,
|
5325 | this.boundingBox.bottom + this.labelModule.size.height
|
5326 | );
|
5327 | }
|
5328 | }
|
5329 | }
|
5330 |
|
5331 |
|
5332 |
|
5333 |
|
5334 |
|
5335 |
|
5336 | class CustomShape extends ShapeBase {
|
5337 | |
5338 |
|
5339 |
|
5340 |
|
5341 |
|
5342 |
|
5343 |
|
5344 | constructor(options, body, labelModule, ctxRenderer) {
|
5345 | super(options, body, labelModule, ctxRenderer);
|
5346 | this.ctxRenderer = ctxRenderer;
|
5347 | }
|
5348 |
|
5349 | |
5350 |
|
5351 |
|
5352 |
|
5353 |
|
5354 |
|
5355 |
|
5356 |
|
5357 |
|
5358 |
|
5359 |
|
5360 | draw(ctx, x, y, selected, hover, values) {
|
5361 | this.resize(ctx, selected, hover, values);
|
5362 | this.left = x - this.width / 2;
|
5363 | this.top = y - this.height / 2;
|
5364 |
|
5365 |
|
5366 | ctx.save();
|
5367 | const drawLater = this.ctxRenderer({
|
5368 | ctx,
|
5369 | id: this.options.id,
|
5370 | x,
|
5371 | y,
|
5372 | state: { selected, hover },
|
5373 | style: { ...values },
|
5374 | label: this.options.label,
|
5375 | });
|
5376 |
|
5377 | if (drawLater.drawNode != null) {
|
5378 | drawLater.drawNode();
|
5379 | }
|
5380 | ctx.restore();
|
5381 |
|
5382 | if (drawLater.drawExternalLabel) {
|
5383 |
|
5384 | const drawExternalLabel = drawLater.drawExternalLabel;
|
5385 | drawLater.drawExternalLabel = () => {
|
5386 | ctx.save();
|
5387 | drawExternalLabel();
|
5388 | ctx.restore();
|
5389 | };
|
5390 | }
|
5391 |
|
5392 | if (drawLater.nodeDimensions) {
|
5393 | this.customSizeWidth = drawLater.nodeDimensions.width;
|
5394 | this.customSizeHeight = drawLater.nodeDimensions.height;
|
5395 | }
|
5396 |
|
5397 | return drawLater;
|
5398 | }
|
5399 |
|
5400 | |
5401 |
|
5402 |
|
5403 |
|
5404 |
|
5405 |
|
5406 | distanceToBorder(ctx, angle) {
|
5407 | return this._distanceToBorder(ctx, angle);
|
5408 | }
|
5409 | }
|
5410 |
|
5411 |
|
5412 |
|
5413 |
|
5414 |
|
5415 |
|
5416 | class Database extends NodeBase {
|
5417 | |
5418 |
|
5419 |
|
5420 |
|
5421 |
|
5422 | constructor(options, body, labelModule) {
|
5423 | super(options, body, labelModule);
|
5424 | this._setMargins(labelModule);
|
5425 | }
|
5426 |
|
5427 | |
5428 |
|
5429 |
|
5430 |
|
5431 |
|
5432 |
|
5433 | resize(ctx, selected, hover) {
|
5434 | if (this.needsRefresh(selected, hover)) {
|
5435 | const dimensions = this.getDimensionsFromLabel(ctx, selected, hover);
|
5436 | const size = dimensions.width + this.margin.right + this.margin.left;
|
5437 |
|
5438 | this.width = size;
|
5439 | this.height = size;
|
5440 | this.radius = this.width / 2;
|
5441 | }
|
5442 | }
|
5443 |
|
5444 | |
5445 |
|
5446 |
|
5447 |
|
5448 |
|
5449 |
|
5450 |
|
5451 |
|
5452 |
|
5453 | draw(ctx, x, y, selected, hover, values) {
|
5454 | this.resize(ctx, selected, hover);
|
5455 | this.left = x - this.width / 2;
|
5456 | this.top = y - this.height / 2;
|
5457 |
|
5458 | this.initContextForDraw(ctx, values);
|
5459 | drawDatabase(
|
5460 | ctx,
|
5461 | x - this.width / 2,
|
5462 | y - this.height / 2,
|
5463 | this.width,
|
5464 | this.height
|
5465 | );
|
5466 | this.performFill(ctx, values);
|
5467 |
|
5468 | this.updateBoundingBox(x, y, ctx, selected, hover);
|
5469 | this.labelModule.draw(
|
5470 | ctx,
|
5471 | this.left + this.textSize.width / 2 + this.margin.left,
|
5472 | this.top + this.textSize.height / 2 + this.margin.top,
|
5473 | selected,
|
5474 | hover
|
5475 | );
|
5476 | }
|
5477 | |
5478 |
|
5479 |
|
5480 |
|
5481 |
|
5482 |
|
5483 | distanceToBorder(ctx, angle) {
|
5484 | return this._distanceToBorder(ctx, angle);
|
5485 | }
|
5486 | }
|
5487 |
|
5488 |
|
5489 |
|
5490 |
|
5491 |
|
5492 |
|
5493 | class Diamond$1 extends ShapeBase {
|
5494 | |
5495 |
|
5496 |
|
5497 |
|
5498 |
|
5499 | constructor(options, body, labelModule) {
|
5500 | super(options, body, labelModule);
|
5501 | }
|
5502 |
|
5503 | |
5504 |
|
5505 |
|
5506 |
|
5507 |
|
5508 |
|
5509 |
|
5510 |
|
5511 |
|
5512 |
|
5513 |
|
5514 | draw(ctx, x, y, selected, hover, values) {
|
5515 | return this._drawShape(ctx, "diamond", 4, x, y, selected, hover, values);
|
5516 | }
|
5517 |
|
5518 | |
5519 |
|
5520 |
|
5521 |
|
5522 |
|
5523 |
|
5524 | distanceToBorder(ctx, angle) {
|
5525 | return this._distanceToBorder(ctx, angle);
|
5526 | }
|
5527 | }
|
5528 |
|
5529 |
|
5530 |
|
5531 |
|
5532 |
|
5533 |
|
5534 | class Dot extends ShapeBase {
|
5535 | |
5536 |
|
5537 |
|
5538 |
|
5539 |
|
5540 | constructor(options, body, labelModule) {
|
5541 | super(options, body, labelModule);
|
5542 | }
|
5543 |
|
5544 | |
5545 |
|
5546 |
|
5547 |
|
5548 |
|
5549 |
|
5550 |
|
5551 |
|
5552 |
|
5553 |
|
5554 |
|
5555 | draw(ctx, x, y, selected, hover, values) {
|
5556 | return this._drawShape(ctx, "circle", 2, x, y, selected, hover, values);
|
5557 | }
|
5558 |
|
5559 | |
5560 |
|
5561 |
|
5562 |
|
5563 |
|
5564 | distanceToBorder(ctx) {
|
5565 | if (ctx) {
|
5566 | this.resize(ctx);
|
5567 | }
|
5568 | return this.options.size;
|
5569 | }
|
5570 | }
|
5571 |
|
5572 |
|
5573 |
|
5574 |
|
5575 |
|
5576 |
|
5577 | class Ellipse extends NodeBase {
|
5578 | |
5579 |
|
5580 |
|
5581 |
|
5582 |
|
5583 | constructor(options, body, labelModule) {
|
5584 | super(options, body, labelModule);
|
5585 | }
|
5586 |
|
5587 | |
5588 |
|
5589 |
|
5590 |
|
5591 |
|
5592 |
|
5593 | resize(ctx, selected = this.selected, hover = this.hover) {
|
5594 | if (this.needsRefresh(selected, hover)) {
|
5595 | const dimensions = this.getDimensionsFromLabel(ctx, selected, hover);
|
5596 |
|
5597 | this.height = dimensions.height * 2;
|
5598 | this.width = dimensions.width + dimensions.height;
|
5599 | this.radius = 0.5 * this.width;
|
5600 | }
|
5601 | }
|
5602 |
|
5603 | |
5604 |
|
5605 |
|
5606 |
|
5607 |
|
5608 |
|
5609 |
|
5610 |
|
5611 |
|
5612 | draw(ctx, x, y, selected, hover, values) {
|
5613 | this.resize(ctx, selected, hover);
|
5614 | this.left = x - this.width * 0.5;
|
5615 | this.top = y - this.height * 0.5;
|
5616 |
|
5617 | this.initContextForDraw(ctx, values);
|
5618 | drawEllipse(ctx, this.left, this.top, this.width, this.height);
|
5619 | this.performFill(ctx, values);
|
5620 |
|
5621 | this.updateBoundingBox(x, y, ctx, selected, hover);
|
5622 | this.labelModule.draw(ctx, x, y, selected, hover);
|
5623 | }
|
5624 |
|
5625 | |
5626 |
|
5627 |
|
5628 |
|
5629 |
|
5630 |
|
5631 | distanceToBorder(ctx, angle) {
|
5632 | if (ctx) {
|
5633 | this.resize(ctx);
|
5634 | }
|
5635 | const a = this.width * 0.5;
|
5636 | const b = this.height * 0.5;
|
5637 | const w = Math.sin(angle) * a;
|
5638 | const h = Math.cos(angle) * b;
|
5639 | return (a * b) / Math.sqrt(w * w + h * h);
|
5640 | }
|
5641 | }
|
5642 |
|
5643 |
|
5644 |
|
5645 |
|
5646 |
|
5647 |
|
5648 | class Icon extends NodeBase {
|
5649 | |
5650 |
|
5651 |
|
5652 |
|
5653 |
|
5654 | constructor(options, body, labelModule) {
|
5655 | super(options, body, labelModule);
|
5656 | this._setMargins(labelModule);
|
5657 | }
|
5658 |
|
5659 | |
5660 |
|
5661 |
|
5662 |
|
5663 |
|
5664 |
|
5665 | resize(ctx, selected, hover) {
|
5666 | if (this.needsRefresh(selected, hover)) {
|
5667 | this.iconSize = {
|
5668 | width: Number(this.options.icon.size),
|
5669 | height: Number(this.options.icon.size),
|
5670 | };
|
5671 | this.width = this.iconSize.width + this.margin.right + this.margin.left;
|
5672 | this.height = this.iconSize.height + this.margin.top + this.margin.bottom;
|
5673 | this.radius = 0.5 * this.width;
|
5674 | }
|
5675 | }
|
5676 |
|
5677 | |
5678 |
|
5679 |
|
5680 |
|
5681 |
|
5682 |
|
5683 |
|
5684 |
|
5685 |
|
5686 |
|
5687 |
|
5688 | draw(ctx, x, y, selected, hover, values) {
|
5689 | this.resize(ctx, selected, hover);
|
5690 | this.options.icon.size = this.options.icon.size || 50;
|
5691 |
|
5692 | this.left = x - this.width / 2;
|
5693 | this.top = y - this.height / 2;
|
5694 | this._icon(ctx, x, y, selected, hover, values);
|
5695 |
|
5696 | return {
|
5697 | drawExternalLabel: () => {
|
5698 | if (this.options.label !== undefined) {
|
5699 | const iconTextSpacing = 5;
|
5700 | this.labelModule.draw(
|
5701 | ctx,
|
5702 | this.left + this.iconSize.width / 2 + this.margin.left,
|
5703 | y + this.height / 2 + iconTextSpacing,
|
5704 | selected
|
5705 | );
|
5706 | }
|
5707 |
|
5708 | this.updateBoundingBox(x, y);
|
5709 | },
|
5710 | };
|
5711 | }
|
5712 |
|
5713 | |
5714 |
|
5715 |
|
5716 |
|
5717 |
|
5718 | updateBoundingBox(x, y) {
|
5719 | this.boundingBox.top = y - this.options.icon.size * 0.5;
|
5720 | this.boundingBox.left = x - this.options.icon.size * 0.5;
|
5721 | this.boundingBox.right = x + this.options.icon.size * 0.5;
|
5722 | this.boundingBox.bottom = y + this.options.icon.size * 0.5;
|
5723 |
|
5724 | if (this.options.label !== undefined && this.labelModule.size.width > 0) {
|
5725 | const iconTextSpacing = 5;
|
5726 | this.boundingBox.left = Math.min(
|
5727 | this.boundingBox.left,
|
5728 | this.labelModule.size.left
|
5729 | );
|
5730 | this.boundingBox.right = Math.max(
|
5731 | this.boundingBox.right,
|
5732 | this.labelModule.size.left + this.labelModule.size.width
|
5733 | );
|
5734 | this.boundingBox.bottom = Math.max(
|
5735 | this.boundingBox.bottom,
|
5736 | this.boundingBox.bottom + this.labelModule.size.height + iconTextSpacing
|
5737 | );
|
5738 | }
|
5739 | }
|
5740 |
|
5741 | |
5742 |
|
5743 |
|
5744 |
|
5745 |
|
5746 |
|
5747 |
|
5748 |
|
5749 |
|
5750 | _icon(ctx, x, y, selected, hover, values) {
|
5751 | const iconSize = Number(this.options.icon.size);
|
5752 |
|
5753 | if (this.options.icon.code !== undefined) {
|
5754 | ctx.font = [
|
5755 | this.options.icon.weight != null
|
5756 | ? this.options.icon.weight
|
5757 | : selected
|
5758 | ? "bold"
|
5759 | : "",
|
5760 |
|
5761 |
|
5762 | (this.options.icon.weight != null && selected ? 5 : 0) +
|
5763 | iconSize +
|
5764 | "px",
|
5765 | this.options.icon.face,
|
5766 | ].join(" ");
|
5767 |
|
5768 |
|
5769 | ctx.fillStyle = this.options.icon.color || "black";
|
5770 | ctx.textAlign = "center";
|
5771 | ctx.textBaseline = "middle";
|
5772 |
|
5773 |
|
5774 | this.enableShadow(ctx, values);
|
5775 | ctx.fillText(this.options.icon.code, x, y);
|
5776 |
|
5777 |
|
5778 | this.disableShadow(ctx, values);
|
5779 | } else {
|
5780 | console.error(
|
5781 | "When using the icon shape, you need to define the code in the icon options object. This can be done per node or globally."
|
5782 | );
|
5783 | }
|
5784 | }
|
5785 |
|
5786 | |
5787 |
|
5788 |
|
5789 |
|
5790 |
|
5791 |
|
5792 | distanceToBorder(ctx, angle) {
|
5793 | return this._distanceToBorder(ctx, angle);
|
5794 | }
|
5795 | }
|
5796 |
|
5797 |
|
5798 |
|
5799 |
|
5800 |
|
5801 |
|
5802 | class Image$2 extends CircleImageBase {
|
5803 | |
5804 |
|
5805 |
|
5806 |
|
5807 |
|
5808 |
|
5809 |
|
5810 | constructor(options, body, labelModule, imageObj, imageObjAlt) {
|
5811 | super(options, body, labelModule);
|
5812 |
|
5813 | this.setImages(imageObj, imageObjAlt);
|
5814 | }
|
5815 |
|
5816 | |
5817 |
|
5818 |
|
5819 |
|
5820 |
|
5821 |
|
5822 | resize(ctx, selected = this.selected, hover = this.hover) {
|
5823 | const imageAbsent =
|
5824 | this.imageObj.src === undefined ||
|
5825 | this.imageObj.width === undefined ||
|
5826 | this.imageObj.height === undefined;
|
5827 |
|
5828 | if (imageAbsent) {
|
5829 | const side = this.options.size * 2;
|
5830 | this.width = side;
|
5831 | this.height = side;
|
5832 | return;
|
5833 | }
|
5834 |
|
5835 | if (this.needsRefresh(selected, hover)) {
|
5836 | this._resizeImage();
|
5837 | }
|
5838 | }
|
5839 |
|
5840 | |
5841 |
|
5842 |
|
5843 |
|
5844 |
|
5845 |
|
5846 |
|
5847 |
|
5848 |
|
5849 | draw(ctx, x, y, selected, hover, values) {
|
5850 | ctx.save();
|
5851 | this.switchImages(selected);
|
5852 | this.resize();
|
5853 |
|
5854 | let labelX = x,
|
5855 | labelY = y;
|
5856 |
|
5857 | if (this.options.shapeProperties.coordinateOrigin === "top-left") {
|
5858 | this.left = x;
|
5859 | this.top = y;
|
5860 | labelX += this.width / 2;
|
5861 | labelY += this.height / 2;
|
5862 | } else {
|
5863 | this.left = x - this.width / 2;
|
5864 | this.top = y - this.height / 2;
|
5865 | }
|
5866 |
|
5867 | if (this.options.shapeProperties.useBorderWithImage === true) {
|
5868 | const neutralborderWidth = this.options.borderWidth;
|
5869 | const selectionLineWidth =
|
5870 | this.options.borderWidthSelected || 2 * this.options.borderWidth;
|
5871 | const borderWidth =
|
5872 | (selected ? selectionLineWidth : neutralborderWidth) /
|
5873 | this.body.view.scale;
|
5874 | ctx.lineWidth = Math.min(this.width, borderWidth);
|
5875 |
|
5876 | ctx.beginPath();
|
5877 | let strokeStyle = selected
|
5878 | ? this.options.color.highlight.border
|
5879 | : hover
|
5880 | ? this.options.color.hover.border
|
5881 | : this.options.color.border;
|
5882 | let fillStyle = selected
|
5883 | ? this.options.color.highlight.background
|
5884 | : hover
|
5885 | ? this.options.color.hover.background
|
5886 | : this.options.color.background;
|
5887 |
|
5888 | if (values.opacity !== undefined) {
|
5889 | strokeStyle = overrideOpacity(strokeStyle, values.opacity);
|
5890 | fillStyle = overrideOpacity(fillStyle, values.opacity);
|
5891 | }
|
5892 |
|
5893 | ctx.strokeStyle = strokeStyle;
|
5894 |
|
5895 |
|
5896 | ctx.fillStyle = fillStyle;
|
5897 |
|
5898 |
|
5899 | ctx.rect(
|
5900 | this.left - 0.5 * ctx.lineWidth,
|
5901 | this.top - 0.5 * ctx.lineWidth,
|
5902 | this.width + ctx.lineWidth,
|
5903 | this.height + ctx.lineWidth
|
5904 | );
|
5905 | ctx.fill();
|
5906 |
|
5907 | this.performStroke(ctx, values);
|
5908 |
|
5909 | ctx.closePath();
|
5910 | }
|
5911 |
|
5912 | this._drawImageAtPosition(ctx, values);
|
5913 |
|
5914 | this._drawImageLabel(ctx, labelX, labelY, selected, hover);
|
5915 |
|
5916 | this.updateBoundingBox(x, y);
|
5917 | ctx.restore();
|
5918 | }
|
5919 |
|
5920 | |
5921 |
|
5922 |
|
5923 |
|
5924 |
|
5925 | updateBoundingBox(x, y) {
|
5926 | this.resize();
|
5927 |
|
5928 | if (this.options.shapeProperties.coordinateOrigin === "top-left") {
|
5929 | this.left = x;
|
5930 | this.top = y;
|
5931 | } else {
|
5932 | this.left = x - this.width / 2;
|
5933 | this.top = y - this.height / 2;
|
5934 | }
|
5935 |
|
5936 | this.boundingBox.left = this.left;
|
5937 | this.boundingBox.top = this.top;
|
5938 | this.boundingBox.bottom = this.top + this.height;
|
5939 | this.boundingBox.right = this.left + this.width;
|
5940 |
|
5941 | if (this.options.label !== undefined && this.labelModule.size.width > 0) {
|
5942 | this.boundingBox.left = Math.min(
|
5943 | this.boundingBox.left,
|
5944 | this.labelModule.size.left
|
5945 | );
|
5946 | this.boundingBox.right = Math.max(
|
5947 | this.boundingBox.right,
|
5948 | this.labelModule.size.left + this.labelModule.size.width
|
5949 | );
|
5950 | this.boundingBox.bottom = Math.max(
|
5951 | this.boundingBox.bottom,
|
5952 | this.boundingBox.bottom + this.labelOffset
|
5953 | );
|
5954 | }
|
5955 | }
|
5956 |
|
5957 | |
5958 |
|
5959 |
|
5960 |
|
5961 |
|
5962 |
|
5963 | distanceToBorder(ctx, angle) {
|
5964 | return this._distanceToBorder(ctx, angle);
|
5965 | }
|
5966 | }
|
5967 |
|
5968 |
|
5969 |
|
5970 |
|
5971 |
|
5972 |
|
5973 | class Square extends ShapeBase {
|
5974 | |
5975 |
|
5976 |
|
5977 |
|
5978 |
|
5979 | constructor(options, body, labelModule) {
|
5980 | super(options, body, labelModule);
|
5981 | }
|
5982 |
|
5983 | |
5984 |
|
5985 |
|
5986 |
|
5987 |
|
5988 |
|
5989 |
|
5990 |
|
5991 |
|
5992 |
|
5993 |
|
5994 | draw(ctx, x, y, selected, hover, values) {
|
5995 | return this._drawShape(ctx, "square", 2, x, y, selected, hover, values);
|
5996 | }
|
5997 |
|
5998 | |
5999 |
|
6000 |
|
6001 |
|
6002 |
|
6003 |
|
6004 | distanceToBorder(ctx, angle) {
|
6005 | return this._distanceToBorder(ctx, angle);
|
6006 | }
|
6007 | }
|
6008 |
|
6009 |
|
6010 |
|
6011 |
|
6012 |
|
6013 |
|
6014 | class Hexagon extends ShapeBase {
|
6015 | |
6016 |
|
6017 |
|
6018 |
|
6019 |
|
6020 | constructor(options, body, labelModule) {
|
6021 | super(options, body, labelModule);
|
6022 | }
|
6023 |
|
6024 | |
6025 |
|
6026 |
|
6027 |
|
6028 |
|
6029 |
|
6030 |
|
6031 |
|
6032 |
|
6033 |
|
6034 |
|
6035 | draw(ctx, x, y, selected, hover, values) {
|
6036 | return this._drawShape(ctx, "hexagon", 4, x, y, selected, hover, values);
|
6037 | }
|
6038 |
|
6039 | |
6040 |
|
6041 |
|
6042 |
|
6043 |
|
6044 |
|
6045 | distanceToBorder(ctx, angle) {
|
6046 | return this._distanceToBorder(ctx, angle);
|
6047 | }
|
6048 | }
|
6049 |
|
6050 |
|
6051 |
|
6052 |
|
6053 |
|
6054 |
|
6055 | class Star extends ShapeBase {
|
6056 | |
6057 |
|
6058 |
|
6059 |
|
6060 |
|
6061 | constructor(options, body, labelModule) {
|
6062 | super(options, body, labelModule);
|
6063 | }
|
6064 |
|
6065 | |
6066 |
|
6067 |
|
6068 |
|
6069 |
|
6070 |
|
6071 |
|
6072 |
|
6073 |
|
6074 |
|
6075 |
|
6076 | draw(ctx, x, y, selected, hover, values) {
|
6077 | return this._drawShape(ctx, "star", 4, x, y, selected, hover, values);
|
6078 | }
|
6079 |
|
6080 | |
6081 |
|
6082 |
|
6083 |
|
6084 |
|
6085 |
|
6086 | distanceToBorder(ctx, angle) {
|
6087 | return this._distanceToBorder(ctx, angle);
|
6088 | }
|
6089 | }
|
6090 |
|
6091 |
|
6092 |
|
6093 |
|
6094 |
|
6095 |
|
6096 | class Text extends NodeBase {
|
6097 | |
6098 |
|
6099 |
|
6100 |
|
6101 |
|
6102 | constructor(options, body, labelModule) {
|
6103 | super(options, body, labelModule);
|
6104 | this._setMargins(labelModule);
|
6105 | }
|
6106 |
|
6107 | |
6108 |
|
6109 |
|
6110 |
|
6111 |
|
6112 |
|
6113 | resize(ctx, selected, hover) {
|
6114 | if (this.needsRefresh(selected, hover)) {
|
6115 | this.textSize = this.labelModule.getTextSize(ctx, selected, hover);
|
6116 | this.width = this.textSize.width + this.margin.right + this.margin.left;
|
6117 | this.height = this.textSize.height + this.margin.top + this.margin.bottom;
|
6118 | this.radius = 0.5 * this.width;
|
6119 | }
|
6120 | }
|
6121 |
|
6122 | |
6123 |
|
6124 |
|
6125 |
|
6126 |
|
6127 |
|
6128 |
|
6129 |
|
6130 |
|
6131 | draw(ctx, x, y, selected, hover, values) {
|
6132 | this.resize(ctx, selected, hover);
|
6133 | this.left = x - this.width / 2;
|
6134 | this.top = y - this.height / 2;
|
6135 |
|
6136 |
|
6137 | this.enableShadow(ctx, values);
|
6138 | this.labelModule.draw(
|
6139 | ctx,
|
6140 | this.left + this.textSize.width / 2 + this.margin.left,
|
6141 | this.top + this.textSize.height / 2 + this.margin.top,
|
6142 | selected,
|
6143 | hover
|
6144 | );
|
6145 |
|
6146 |
|
6147 | this.disableShadow(ctx, values);
|
6148 |
|
6149 | this.updateBoundingBox(x, y, ctx, selected, hover);
|
6150 | }
|
6151 |
|
6152 | |
6153 |
|
6154 |
|
6155 |
|
6156 |
|
6157 |
|
6158 | distanceToBorder(ctx, angle) {
|
6159 | return this._distanceToBorder(ctx, angle);
|
6160 | }
|
6161 | }
|
6162 |
|
6163 |
|
6164 |
|
6165 |
|
6166 |
|
6167 |
|
6168 | class Triangle$1 extends ShapeBase {
|
6169 | |
6170 |
|
6171 |
|
6172 |
|
6173 |
|
6174 | constructor(options, body, labelModule) {
|
6175 | super(options, body, labelModule);
|
6176 | }
|
6177 |
|
6178 | |
6179 |
|
6180 |
|
6181 |
|
6182 |
|
6183 |
|
6184 |
|
6185 |
|
6186 |
|
6187 |
|
6188 |
|
6189 | draw(ctx, x, y, selected, hover, values) {
|
6190 | return this._drawShape(ctx, "triangle", 3, x, y, selected, hover, values);
|
6191 | }
|
6192 |
|
6193 | |
6194 |
|
6195 |
|
6196 |
|
6197 |
|
6198 |
|
6199 | distanceToBorder(ctx, angle) {
|
6200 | return this._distanceToBorder(ctx, angle);
|
6201 | }
|
6202 | }
|
6203 |
|
6204 |
|
6205 |
|
6206 |
|
6207 |
|
6208 |
|
6209 | class TriangleDown extends ShapeBase {
|
6210 | |
6211 |
|
6212 |
|
6213 |
|
6214 |
|
6215 | constructor(options, body, labelModule) {
|
6216 | super(options, body, labelModule);
|
6217 | }
|
6218 |
|
6219 | |
6220 |
|
6221 |
|
6222 |
|
6223 |
|
6224 |
|
6225 |
|
6226 |
|
6227 |
|
6228 |
|
6229 |
|
6230 | draw(ctx, x, y, selected, hover, values) {
|
6231 | return this._drawShape(
|
6232 | ctx,
|
6233 | "triangleDown",
|
6234 | 3,
|
6235 | x,
|
6236 | y,
|
6237 | selected,
|
6238 | hover,
|
6239 | values
|
6240 | );
|
6241 | }
|
6242 |
|
6243 | |
6244 |
|
6245 |
|
6246 |
|
6247 |
|
6248 |
|
6249 | distanceToBorder(ctx, angle) {
|
6250 | return this._distanceToBorder(ctx, angle);
|
6251 | }
|
6252 | }
|
6253 |
|
6254 |
|
6255 |
|
6256 |
|
6257 | class Node {
|
6258 | |
6259 |
|
6260 |
|
6261 |
|
6262 |
|
6263 |
|
6264 |
|
6265 |
|
6266 |
|
6267 |
|
6268 |
|
6269 |
|
6270 |
|
6271 |
|
6272 |
|
6273 |
|
6274 |
|
6275 |
|
6276 |
|
6277 |
|
6278 | constructor(
|
6279 | options,
|
6280 | body,
|
6281 | imagelist,
|
6282 | grouplist,
|
6283 | globalOptions,
|
6284 | defaultOptions
|
6285 | ) {
|
6286 | this.options = bridgeObject(globalOptions);
|
6287 | this.globalOptions = globalOptions;
|
6288 | this.defaultOptions = defaultOptions;
|
6289 | this.body = body;
|
6290 |
|
6291 | this.edges = [];
|
6292 |
|
6293 |
|
6294 | this.id = undefined;
|
6295 | this.imagelist = imagelist;
|
6296 | this.grouplist = grouplist;
|
6297 |
|
6298 |
|
6299 | this.x = undefined;
|
6300 | this.y = undefined;
|
6301 | this.baseSize = this.options.size;
|
6302 | this.baseFontSize = this.options.font.size;
|
6303 | this.predefinedPosition = false;
|
6304 | this.selected = false;
|
6305 | this.hover = false;
|
6306 |
|
6307 | this.labelModule = new Label(
|
6308 | this.body,
|
6309 | this.options,
|
6310 | false
|
6311 | );
|
6312 | this.setOptions(options);
|
6313 | }
|
6314 |
|
6315 | |
6316 |
|
6317 |
|
6318 |
|
6319 |
|
6320 | attachEdge(edge) {
|
6321 | if (this.edges.indexOf(edge) === -1) {
|
6322 | this.edges.push(edge);
|
6323 | }
|
6324 | }
|
6325 |
|
6326 | |
6327 |
|
6328 |
|
6329 |
|
6330 |
|
6331 | detachEdge(edge) {
|
6332 | const index = this.edges.indexOf(edge);
|
6333 | if (index != -1) {
|
6334 | this.edges.splice(index, 1);
|
6335 | }
|
6336 | }
|
6337 |
|
6338 | |
6339 |
|
6340 |
|
6341 |
|
6342 |
|
6343 |
|
6344 | setOptions(options) {
|
6345 | const currentShape = this.options.shape;
|
6346 |
|
6347 | if (!options) {
|
6348 | return;
|
6349 | }
|
6350 |
|
6351 |
|
6352 |
|
6353 |
|
6354 |
|
6355 | if (typeof options.color !== "undefined") {
|
6356 | this._localColor = options.color;
|
6357 | }
|
6358 |
|
6359 |
|
6360 | if (options.id !== undefined) {
|
6361 | this.id = options.id;
|
6362 | }
|
6363 |
|
6364 | if (this.id === undefined) {
|
6365 | throw new Error("Node must have an id");
|
6366 | }
|
6367 |
|
6368 | Node.checkMass(options, this.id);
|
6369 |
|
6370 |
|
6371 |
|
6372 | if (options.x !== undefined) {
|
6373 | if (options.x === null) {
|
6374 | this.x = undefined;
|
6375 | this.predefinedPosition = false;
|
6376 | } else {
|
6377 | this.x = parseInt(options.x);
|
6378 | this.predefinedPosition = true;
|
6379 | }
|
6380 | }
|
6381 | if (options.y !== undefined) {
|
6382 | if (options.y === null) {
|
6383 | this.y = undefined;
|
6384 | this.predefinedPosition = false;
|
6385 | } else {
|
6386 | this.y = parseInt(options.y);
|
6387 | this.predefinedPosition = true;
|
6388 | }
|
6389 | }
|
6390 | if (options.size !== undefined) {
|
6391 | this.baseSize = options.size;
|
6392 | }
|
6393 | if (options.value !== undefined) {
|
6394 | options.value = parseFloat(options.value);
|
6395 | }
|
6396 |
|
6397 |
|
6398 | Node.parseOptions(
|
6399 | this.options,
|
6400 | options,
|
6401 | true,
|
6402 | this.globalOptions,
|
6403 | this.grouplist
|
6404 | );
|
6405 |
|
6406 | const pile = [options, this.options, this.defaultOptions];
|
6407 | this.chooser = choosify("node", pile);
|
6408 |
|
6409 | this._load_images();
|
6410 | this.updateLabelModule(options);
|
6411 |
|
6412 |
|
6413 | if (options.opacity !== undefined && Node.checkOpacity(options.opacity)) {
|
6414 | this.options.opacity = options.opacity;
|
6415 | }
|
6416 |
|
6417 | this.updateShape(currentShape);
|
6418 |
|
6419 | return options.hidden !== undefined || options.physics !== undefined;
|
6420 | }
|
6421 |
|
6422 | |
6423 |
|
6424 |
|
6425 |
|
6426 |
|
6427 |
|
6428 |
|
6429 |
|
6430 | _load_images() {
|
6431 | if (
|
6432 | this.options.shape === "circularImage" ||
|
6433 | this.options.shape === "image"
|
6434 | ) {
|
6435 | if (this.options.image === undefined) {
|
6436 | throw new Error(
|
6437 | "Option image must be defined for node type '" +
|
6438 | this.options.shape +
|
6439 | "'"
|
6440 | );
|
6441 | }
|
6442 | }
|
6443 |
|
6444 | if (this.options.image === undefined) {
|
6445 | return;
|
6446 | }
|
6447 |
|
6448 | if (this.imagelist === undefined) {
|
6449 | throw new Error("Internal Error: No images provided");
|
6450 | }
|
6451 |
|
6452 | if (typeof this.options.image === "string") {
|
6453 | this.imageObj = this.imagelist.load(
|
6454 | this.options.image,
|
6455 | this.options.brokenImage,
|
6456 | this.id
|
6457 | );
|
6458 | } else {
|
6459 | if (this.options.image.unselected === undefined) {
|
6460 | throw new Error("No unselected image provided");
|
6461 | }
|
6462 |
|
6463 | this.imageObj = this.imagelist.load(
|
6464 | this.options.image.unselected,
|
6465 | this.options.brokenImage,
|
6466 | this.id
|
6467 | );
|
6468 |
|
6469 | if (this.options.image.selected !== undefined) {
|
6470 | this.imageObjAlt = this.imagelist.load(
|
6471 | this.options.image.selected,
|
6472 | this.options.brokenImage,
|
6473 | this.id
|
6474 | );
|
6475 | } else {
|
6476 | this.imageObjAlt = undefined;
|
6477 | }
|
6478 | }
|
6479 | }
|
6480 |
|
6481 | |
6482 |
|
6483 |
|
6484 |
|
6485 |
|
6486 |
|
6487 | static checkOpacity(opacity) {
|
6488 | return 0 <= opacity && opacity <= 1;
|
6489 | }
|
6490 |
|
6491 | |
6492 |
|
6493 |
|
6494 |
|
6495 |
|
6496 |
|
6497 | static checkCoordinateOrigin(origin) {
|
6498 | return origin === undefined || origin === "center" || origin === "top-left";
|
6499 | }
|
6500 |
|
6501 | |
6502 |
|
6503 |
|
6504 |
|
6505 |
|
6506 |
|
6507 |
|
6508 |
|
6509 |
|
6510 |
|
6511 |
|
6512 |
|
6513 | static updateGroupOptions(parentOptions, newOptions, groupList) {
|
6514 | if (groupList === undefined) return;
|
6515 |
|
6516 | const group = parentOptions.group;
|
6517 |
|
6518 |
|
6519 | if (
|
6520 | newOptions !== undefined &&
|
6521 | newOptions.group !== undefined &&
|
6522 | group !== newOptions.group
|
6523 | ) {
|
6524 | throw new Error(
|
6525 | "updateGroupOptions: group values in options don't match."
|
6526 | );
|
6527 | }
|
6528 |
|
6529 | const hasGroup =
|
6530 | typeof group === "number" || (typeof group === "string" && group != "");
|
6531 | if (!hasGroup) return;
|
6532 |
|
6533 | const groupObj = groupList.get(group);
|
6534 |
|
6535 | if (groupObj.opacity !== undefined && newOptions.opacity === undefined) {
|
6536 | if (!Node.checkOpacity(groupObj.opacity)) {
|
6537 | console.error(
|
6538 | "Invalid option for node opacity. Value must be between 0 and 1, found: " +
|
6539 | groupObj.opacity
|
6540 | );
|
6541 | groupObj.opacity = undefined;
|
6542 | }
|
6543 | }
|
6544 |
|
6545 |
|
6546 | const skipProperties = Object.getOwnPropertyNames(newOptions).filter(
|
6547 | (p) => newOptions[p] != null
|
6548 | );
|
6549 |
|
6550 | skipProperties.push("font");
|
6551 | selectiveNotDeepExtend(skipProperties, parentOptions, groupObj);
|
6552 |
|
6553 |
|
6554 |
|
6555 | parentOptions.color = parseColor(parentOptions.color);
|
6556 | }
|
6557 |
|
6558 | |
6559 |
|
6560 |
|
6561 |
|
6562 |
|
6563 |
|
6564 |
|
6565 |
|
6566 |
|
6567 |
|
6568 |
|
6569 | static parseOptions(
|
6570 | parentOptions,
|
6571 | newOptions,
|
6572 | allowDeletion = false,
|
6573 | globalOptions = {},
|
6574 | groupList
|
6575 | ) {
|
6576 | const fields = ["color", "fixed", "shadow"];
|
6577 | selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
|
6578 |
|
6579 | Node.checkMass(newOptions);
|
6580 |
|
6581 | if (parentOptions.opacity !== undefined) {
|
6582 | if (!Node.checkOpacity(parentOptions.opacity)) {
|
6583 | console.error(
|
6584 | "Invalid option for node opacity. Value must be between 0 and 1, found: " +
|
6585 | parentOptions.opacity
|
6586 | );
|
6587 | parentOptions.opacity = undefined;
|
6588 | }
|
6589 | }
|
6590 |
|
6591 | if (newOptions.opacity !== undefined) {
|
6592 | if (!Node.checkOpacity(newOptions.opacity)) {
|
6593 | console.error(
|
6594 | "Invalid option for node opacity. Value must be between 0 and 1, found: " +
|
6595 | newOptions.opacity
|
6596 | );
|
6597 | newOptions.opacity = undefined;
|
6598 | }
|
6599 | }
|
6600 |
|
6601 | if (
|
6602 | newOptions.shapeProperties &&
|
6603 | !Node.checkCoordinateOrigin(newOptions.shapeProperties.coordinateOrigin)
|
6604 | ) {
|
6605 | console.error(
|
6606 | "Invalid option for node coordinateOrigin, found: " +
|
6607 | newOptions.shapeProperties.coordinateOrigin
|
6608 | );
|
6609 | }
|
6610 |
|
6611 |
|
6612 | mergeOptions(parentOptions, newOptions, "shadow", globalOptions);
|
6613 |
|
6614 |
|
6615 | if (newOptions.color !== undefined && newOptions.color !== null) {
|
6616 | const parsedColor = parseColor(newOptions.color);
|
6617 | fillIfDefined(parentOptions.color, parsedColor);
|
6618 | } else if (allowDeletion === true && newOptions.color === null) {
|
6619 | parentOptions.color = bridgeObject(globalOptions.color);
|
6620 | }
|
6621 |
|
6622 |
|
6623 | if (newOptions.fixed !== undefined && newOptions.fixed !== null) {
|
6624 | if (typeof newOptions.fixed === "boolean") {
|
6625 | parentOptions.fixed.x = newOptions.fixed;
|
6626 | parentOptions.fixed.y = newOptions.fixed;
|
6627 | } else {
|
6628 | if (
|
6629 | newOptions.fixed.x !== undefined &&
|
6630 | typeof newOptions.fixed.x === "boolean"
|
6631 | ) {
|
6632 | parentOptions.fixed.x = newOptions.fixed.x;
|
6633 | }
|
6634 | if (
|
6635 | newOptions.fixed.y !== undefined &&
|
6636 | typeof newOptions.fixed.y === "boolean"
|
6637 | ) {
|
6638 | parentOptions.fixed.y = newOptions.fixed.y;
|
6639 | }
|
6640 | }
|
6641 | }
|
6642 |
|
6643 | if (allowDeletion === true && newOptions.font === null) {
|
6644 | parentOptions.font = bridgeObject(globalOptions.font);
|
6645 | }
|
6646 |
|
6647 | Node.updateGroupOptions(parentOptions, newOptions, groupList);
|
6648 |
|
6649 |
|
6650 | if (newOptions.scaling !== undefined) {
|
6651 | mergeOptions(
|
6652 | parentOptions.scaling,
|
6653 | newOptions.scaling,
|
6654 | "label",
|
6655 | globalOptions.scaling
|
6656 | );
|
6657 | }
|
6658 | }
|
6659 |
|
6660 | |
6661 |
|
6662 |
|
6663 |
|
6664 | getFormattingValues() {
|
6665 | const values = {
|
6666 | color: this.options.color.background,
|
6667 | opacity: this.options.opacity,
|
6668 | borderWidth: this.options.borderWidth,
|
6669 | borderColor: this.options.color.border,
|
6670 | size: this.options.size,
|
6671 | borderDashes: this.options.shapeProperties.borderDashes,
|
6672 | borderRadius: this.options.shapeProperties.borderRadius,
|
6673 | shadow: this.options.shadow.enabled,
|
6674 | shadowColor: this.options.shadow.color,
|
6675 | shadowSize: this.options.shadow.size,
|
6676 | shadowX: this.options.shadow.x,
|
6677 | shadowY: this.options.shadow.y,
|
6678 | };
|
6679 | if (this.selected || this.hover) {
|
6680 | if (this.chooser === true) {
|
6681 | if (this.selected) {
|
6682 | if (this.options.borderWidthSelected != null) {
|
6683 | values.borderWidth = this.options.borderWidthSelected;
|
6684 | } else {
|
6685 | values.borderWidth *= 2;
|
6686 | }
|
6687 | values.color = this.options.color.highlight.background;
|
6688 | values.borderColor = this.options.color.highlight.border;
|
6689 | values.shadow = this.options.shadow.enabled;
|
6690 | } else if (this.hover) {
|
6691 | values.color = this.options.color.hover.background;
|
6692 | values.borderColor = this.options.color.hover.border;
|
6693 | values.shadow = this.options.shadow.enabled;
|
6694 | }
|
6695 | } else if (typeof this.chooser === "function") {
|
6696 | this.chooser(values, this.options.id, this.selected, this.hover);
|
6697 | if (values.shadow === false) {
|
6698 | if (
|
6699 | values.shadowColor !== this.options.shadow.color ||
|
6700 | values.shadowSize !== this.options.shadow.size ||
|
6701 | values.shadowX !== this.options.shadow.x ||
|
6702 | values.shadowY !== this.options.shadow.y
|
6703 | ) {
|
6704 | values.shadow = true;
|
6705 | }
|
6706 | }
|
6707 | }
|
6708 | } else {
|
6709 | values.shadow = this.options.shadow.enabled;
|
6710 | }
|
6711 | if (this.options.opacity !== undefined) {
|
6712 | const opacity = this.options.opacity;
|
6713 | values.borderColor = overrideOpacity(values.borderColor, opacity);
|
6714 | values.color = overrideOpacity(values.color, opacity);
|
6715 | values.shadowColor = overrideOpacity(values.shadowColor, opacity);
|
6716 | }
|
6717 | return values;
|
6718 | }
|
6719 |
|
6720 | |
6721 |
|
6722 |
|
6723 |
|
6724 | updateLabelModule(options) {
|
6725 | if (this.options.label === undefined || this.options.label === null) {
|
6726 | this.options.label = "";
|
6727 | }
|
6728 |
|
6729 | Node.updateGroupOptions(
|
6730 | this.options,
|
6731 | {
|
6732 | ...options,
|
6733 | color: (options && options.color) || this._localColor || undefined,
|
6734 | },
|
6735 | this.grouplist
|
6736 | );
|
6737 |
|
6738 |
|
6739 |
|
6740 |
|
6741 |
|
6742 |
|
6743 |
|
6744 |
|
6745 |
|
6746 |
|
6747 |
|
6748 | const currentGroup = this.grouplist.get(this.options.group, false);
|
6749 | const pile = [
|
6750 | options,
|
6751 | this.options,
|
6752 | currentGroup,
|
6753 | this.globalOptions,
|
6754 | this.defaultOptions,
|
6755 | ];
|
6756 | this.labelModule.update(this.options, pile);
|
6757 |
|
6758 | if (this.labelModule.baseSize !== undefined) {
|
6759 | this.baseFontSize = this.labelModule.baseSize;
|
6760 | }
|
6761 | }
|
6762 |
|
6763 | |
6764 |
|
6765 |
|
6766 |
|
6767 | updateShape(currentShape) {
|
6768 | if (currentShape === this.options.shape && this.shape) {
|
6769 | this.shape.setOptions(this.options, this.imageObj, this.imageObjAlt);
|
6770 | } else {
|
6771 |
|
6772 | switch (this.options.shape) {
|
6773 | case "box":
|
6774 | this.shape = new Box$1(this.options, this.body, this.labelModule);
|
6775 | break;
|
6776 | case "circle":
|
6777 | this.shape = new Circle$1(this.options, this.body, this.labelModule);
|
6778 | break;
|
6779 | case "circularImage":
|
6780 | this.shape = new CircularImage(
|
6781 | this.options,
|
6782 | this.body,
|
6783 | this.labelModule,
|
6784 | this.imageObj,
|
6785 | this.imageObjAlt
|
6786 | );
|
6787 | break;
|
6788 | case "custom":
|
6789 | this.shape = new CustomShape(
|
6790 | this.options,
|
6791 | this.body,
|
6792 | this.labelModule,
|
6793 | this.options.ctxRenderer
|
6794 | );
|
6795 | break;
|
6796 | case "database":
|
6797 | this.shape = new Database(this.options, this.body, this.labelModule);
|
6798 | break;
|
6799 | case "diamond":
|
6800 | this.shape = new Diamond$1(this.options, this.body, this.labelModule);
|
6801 | break;
|
6802 | case "dot":
|
6803 | this.shape = new Dot(this.options, this.body, this.labelModule);
|
6804 | break;
|
6805 | case "ellipse":
|
6806 | this.shape = new Ellipse(this.options, this.body, this.labelModule);
|
6807 | break;
|
6808 | case "icon":
|
6809 | this.shape = new Icon(this.options, this.body, this.labelModule);
|
6810 | break;
|
6811 | case "image":
|
6812 | this.shape = new Image$2(
|
6813 | this.options,
|
6814 | this.body,
|
6815 | this.labelModule,
|
6816 | this.imageObj,
|
6817 | this.imageObjAlt
|
6818 | );
|
6819 | break;
|
6820 | case "square":
|
6821 | this.shape = new Square(this.options, this.body, this.labelModule);
|
6822 | break;
|
6823 | case "hexagon":
|
6824 | this.shape = new Hexagon(this.options, this.body, this.labelModule);
|
6825 | break;
|
6826 | case "star":
|
6827 | this.shape = new Star(this.options, this.body, this.labelModule);
|
6828 | break;
|
6829 | case "text":
|
6830 | this.shape = new Text(this.options, this.body, this.labelModule);
|
6831 | break;
|
6832 | case "triangle":
|
6833 | this.shape = new Triangle$1(this.options, this.body, this.labelModule);
|
6834 | break;
|
6835 | case "triangleDown":
|
6836 | this.shape = new TriangleDown(
|
6837 | this.options,
|
6838 | this.body,
|
6839 | this.labelModule
|
6840 | );
|
6841 | break;
|
6842 | default:
|
6843 | this.shape = new Ellipse(this.options, this.body, this.labelModule);
|
6844 | break;
|
6845 | }
|
6846 | }
|
6847 | this.needsRefresh();
|
6848 | }
|
6849 |
|
6850 | |
6851 |
|
6852 |
|
6853 | select() {
|
6854 | this.selected = true;
|
6855 | this.needsRefresh();
|
6856 | }
|
6857 |
|
6858 | |
6859 |
|
6860 |
|
6861 | unselect() {
|
6862 | this.selected = false;
|
6863 | this.needsRefresh();
|
6864 | }
|
6865 |
|
6866 | |
6867 |
|
6868 |
|
6869 | needsRefresh() {
|
6870 | this.shape.refreshNeeded = true;
|
6871 | }
|
6872 |
|
6873 | |
6874 |
|
6875 |
|
6876 |
|
6877 |
|
6878 |
|
6879 | getTitle() {
|
6880 | return this.options.title;
|
6881 | }
|
6882 |
|
6883 | |
6884 |
|
6885 |
|
6886 |
|
6887 |
|
6888 |
|
6889 |
|
6890 | distanceToBorder(ctx, angle) {
|
6891 | return this.shape.distanceToBorder(ctx, angle);
|
6892 | }
|
6893 |
|
6894 | |
6895 |
|
6896 |
|
6897 |
|
6898 |
|
6899 | isFixed() {
|
6900 | return this.options.fixed.x && this.options.fixed.y;
|
6901 | }
|
6902 |
|
6903 | |
6904 |
|
6905 |
|
6906 |
|
6907 |
|
6908 | isSelected() {
|
6909 | return this.selected;
|
6910 | }
|
6911 |
|
6912 | |
6913 |
|
6914 |
|
6915 |
|
6916 |
|
6917 | getValue() {
|
6918 | return this.options.value;
|
6919 | }
|
6920 |
|
6921 | |
6922 |
|
6923 |
|
6924 |
|
6925 |
|
6926 | getLabelSize() {
|
6927 | return this.labelModule.size();
|
6928 | }
|
6929 |
|
6930 | |
6931 |
|
6932 |
|
6933 |
|
6934 |
|
6935 |
|
6936 |
|
6937 |
|
6938 | setValueRange(min, max, total) {
|
6939 | if (this.options.value !== undefined) {
|
6940 | const scale = this.options.scaling.customScalingFunction(
|
6941 | min,
|
6942 | max,
|
6943 | total,
|
6944 | this.options.value
|
6945 | );
|
6946 | const sizeDiff = this.options.scaling.max - this.options.scaling.min;
|
6947 | if (this.options.scaling.label.enabled === true) {
|
6948 | const fontDiff =
|
6949 | this.options.scaling.label.max - this.options.scaling.label.min;
|
6950 | this.options.font.size =
|
6951 | this.options.scaling.label.min + scale * fontDiff;
|
6952 | }
|
6953 | this.options.size = this.options.scaling.min + scale * sizeDiff;
|
6954 | } else {
|
6955 | this.options.size = this.baseSize;
|
6956 | this.options.font.size = this.baseFontSize;
|
6957 | }
|
6958 |
|
6959 | this.updateLabelModule();
|
6960 | }
|
6961 |
|
6962 | |
6963 |
|
6964 |
|
6965 |
|
6966 |
|
6967 |
|
6968 |
|
6969 |
|
6970 | draw(ctx) {
|
6971 | const values = this.getFormattingValues();
|
6972 | return (
|
6973 | this.shape.draw(ctx, this.x, this.y, this.selected, this.hover, values) ||
|
6974 | {}
|
6975 | );
|
6976 | }
|
6977 |
|
6978 | |
6979 |
|
6980 |
|
6981 |
|
6982 |
|
6983 | updateBoundingBox(ctx) {
|
6984 | this.shape.updateBoundingBox(this.x, this.y, ctx);
|
6985 | }
|
6986 |
|
6987 | |
6988 |
|
6989 |
|
6990 |
|
6991 |
|
6992 |
|
6993 | resize(ctx) {
|
6994 | const values = this.getFormattingValues();
|
6995 | this.shape.resize(ctx, this.selected, this.hover, values);
|
6996 | }
|
6997 |
|
6998 | |
6999 |
|
7000 |
|
7001 |
|
7002 |
|
7003 |
|
7004 |
|
7005 | getItemsOnPoint(point) {
|
7006 | const ret = [];
|
7007 |
|
7008 | if (this.labelModule.visible()) {
|
7009 | if (pointInRect(this.labelModule.getSize(), point)) {
|
7010 | ret.push({ nodeId: this.id, labelId: 0 });
|
7011 | }
|
7012 | }
|
7013 |
|
7014 | if (pointInRect(this.shape.boundingBox, point)) {
|
7015 | ret.push({ nodeId: this.id });
|
7016 | }
|
7017 |
|
7018 | return ret;
|
7019 | }
|
7020 |
|
7021 | |
7022 |
|
7023 |
|
7024 |
|
7025 |
|
7026 |
|
7027 | isOverlappingWith(obj) {
|
7028 | return (
|
7029 | this.shape.left < obj.right &&
|
7030 | this.shape.left + this.shape.width > obj.left &&
|
7031 | this.shape.top < obj.bottom &&
|
7032 | this.shape.top + this.shape.height > obj.top
|
7033 | );
|
7034 | }
|
7035 |
|
7036 | |
7037 |
|
7038 |
|
7039 |
|
7040 |
|
7041 |
|
7042 | isBoundingBoxOverlappingWith(obj) {
|
7043 | return (
|
7044 | this.shape.boundingBox.left < obj.right &&
|
7045 | this.shape.boundingBox.right > obj.left &&
|
7046 | this.shape.boundingBox.top < obj.bottom &&
|
7047 | this.shape.boundingBox.bottom > obj.top
|
7048 | );
|
7049 | }
|
7050 |
|
7051 | |
7052 |
|
7053 |
|
7054 |
|
7055 |
|
7056 |
|
7057 |
|
7058 |
|
7059 |
|
7060 | static checkMass(options, id) {
|
7061 | if (options.mass !== undefined && options.mass <= 0) {
|
7062 | let strId = "";
|
7063 | if (id !== undefined) {
|
7064 | strId = " in node id: " + id;
|
7065 | }
|
7066 | console.error(
|
7067 | "%cNegative or zero mass disallowed" + strId + ", setting mass to 1.",
|
7068 | VALIDATOR_PRINT_STYLE
|
7069 | );
|
7070 | options.mass = 1;
|
7071 | }
|
7072 | }
|
7073 | }
|
7074 |
|
7075 |
|
7076 |
|
7077 |
|
7078 | class NodesHandler {
|
7079 | |
7080 |
|
7081 |
|
7082 |
|
7083 |
|
7084 |
|
7085 | constructor(body, images, groups, layoutEngine) {
|
7086 | this.body = body;
|
7087 | this.images = images;
|
7088 | this.groups = groups;
|
7089 | this.layoutEngine = layoutEngine;
|
7090 |
|
7091 |
|
7092 | this.body.functions.createNode = this.create.bind(this);
|
7093 |
|
7094 | this.nodesListeners = {
|
7095 | add: (event, params) => {
|
7096 | this.add(params.items);
|
7097 | },
|
7098 | update: (event, params) => {
|
7099 | this.update(params.items, params.data, params.oldData);
|
7100 | },
|
7101 | remove: (event, params) => {
|
7102 | this.remove(params.items);
|
7103 | },
|
7104 | };
|
7105 |
|
7106 | this.defaultOptions = {
|
7107 | borderWidth: 1,
|
7108 | borderWidthSelected: undefined,
|
7109 | brokenImage: undefined,
|
7110 | color: {
|
7111 | border: "#2B7CE9",
|
7112 | background: "#97C2FC",
|
7113 | highlight: {
|
7114 | border: "#2B7CE9",
|
7115 | background: "#D2E5FF",
|
7116 | },
|
7117 | hover: {
|
7118 | border: "#2B7CE9",
|
7119 | background: "#D2E5FF",
|
7120 | },
|
7121 | },
|
7122 | opacity: undefined,
|
7123 | fixed: {
|
7124 | x: false,
|
7125 | y: false,
|
7126 | },
|
7127 | font: {
|
7128 | color: "#343434",
|
7129 | size: 14,
|
7130 | face: "arial",
|
7131 | background: "none",
|
7132 | strokeWidth: 0,
|
7133 | strokeColor: "#ffffff",
|
7134 | align: "center",
|
7135 | vadjust: 0,
|
7136 | multi: false,
|
7137 | bold: {
|
7138 | mod: "bold",
|
7139 | },
|
7140 | boldital: {
|
7141 | mod: "bold italic",
|
7142 | },
|
7143 | ital: {
|
7144 | mod: "italic",
|
7145 | },
|
7146 | mono: {
|
7147 | mod: "",
|
7148 | size: 15,
|
7149 | face: "monospace",
|
7150 | vadjust: 2,
|
7151 | },
|
7152 | },
|
7153 | group: undefined,
|
7154 | hidden: false,
|
7155 | icon: {
|
7156 | face: "FontAwesome",
|
7157 | code: undefined,
|
7158 | size: 50,
|
7159 | color: "#2B7CE9",
|
7160 | },
|
7161 | image: undefined,
|
7162 | imagePadding: {
|
7163 |
|
7164 | top: 0,
|
7165 | right: 0,
|
7166 | bottom: 0,
|
7167 | left: 0,
|
7168 | },
|
7169 | label: undefined,
|
7170 | labelHighlightBold: true,
|
7171 | level: undefined,
|
7172 | margin: {
|
7173 | top: 5,
|
7174 | right: 5,
|
7175 | bottom: 5,
|
7176 | left: 5,
|
7177 | },
|
7178 | mass: 1,
|
7179 | physics: true,
|
7180 | scaling: {
|
7181 | min: 10,
|
7182 | max: 30,
|
7183 | label: {
|
7184 | enabled: false,
|
7185 | min: 14,
|
7186 | max: 30,
|
7187 | maxVisible: 30,
|
7188 | drawThreshold: 5,
|
7189 | },
|
7190 | customScalingFunction: function (min, max, total, value) {
|
7191 | if (max === min) {
|
7192 | return 0.5;
|
7193 | } else {
|
7194 | const scale = 1 / (max - min);
|
7195 | return Math.max(0, (value - min) * scale);
|
7196 | }
|
7197 | },
|
7198 | },
|
7199 | shadow: {
|
7200 | enabled: false,
|
7201 | color: "rgba(0,0,0,0.5)",
|
7202 | size: 10,
|
7203 | x: 5,
|
7204 | y: 5,
|
7205 | },
|
7206 | shape: "ellipse",
|
7207 | shapeProperties: {
|
7208 | borderDashes: false,
|
7209 | borderRadius: 6,
|
7210 | interpolation: true,
|
7211 | useImageSize: false,
|
7212 | useBorderWithImage: false,
|
7213 | coordinateOrigin: "center",
|
7214 | },
|
7215 | size: 25,
|
7216 | title: undefined,
|
7217 | value: undefined,
|
7218 | x: undefined,
|
7219 | y: undefined,
|
7220 | };
|
7221 |
|
7222 |
|
7223 | if (this.defaultOptions.mass <= 0) {
|
7224 | throw "Internal error: mass in defaultOptions of NodesHandler may not be zero or negative";
|
7225 | }
|
7226 |
|
7227 | this.options = bridgeObject(this.defaultOptions);
|
7228 |
|
7229 | this.bindEventListeners();
|
7230 | }
|
7231 |
|
7232 | |
7233 |
|
7234 |
|
7235 | bindEventListeners() {
|
7236 |
|
7237 | this.body.emitter.on("refreshNodes", this.refresh.bind(this));
|
7238 | this.body.emitter.on("refresh", this.refresh.bind(this));
|
7239 | this.body.emitter.on("destroy", () => {
|
7240 | forEach(this.nodesListeners, (callback, event) => {
|
7241 | if (this.body.data.nodes) this.body.data.nodes.off(event, callback);
|
7242 | });
|
7243 | delete this.body.functions.createNode;
|
7244 | delete this.nodesListeners.add;
|
7245 | delete this.nodesListeners.update;
|
7246 | delete this.nodesListeners.remove;
|
7247 | delete this.nodesListeners;
|
7248 | });
|
7249 | }
|
7250 |
|
7251 | |
7252 |
|
7253 |
|
7254 |
|
7255 | setOptions(options) {
|
7256 | if (options !== undefined) {
|
7257 | Node.parseOptions(this.options, options);
|
7258 |
|
7259 |
|
7260 |
|
7261 | if (options.opacity !== undefined) {
|
7262 | if (
|
7263 | Number.isNaN(options.opacity) ||
|
7264 | !Number.isFinite(options.opacity) ||
|
7265 | options.opacity < 0 ||
|
7266 | options.opacity > 1
|
7267 | ) {
|
7268 | console.error(
|
7269 | "Invalid option for node opacity. Value must be between 0 and 1, found: " +
|
7270 | options.opacity
|
7271 | );
|
7272 | } else {
|
7273 | this.options.opacity = options.opacity;
|
7274 | }
|
7275 | }
|
7276 |
|
7277 |
|
7278 | if (options.shape !== undefined) {
|
7279 | for (const nodeId in this.body.nodes) {
|
7280 | if (Object.prototype.hasOwnProperty.call(this.body.nodes, nodeId)) {
|
7281 | this.body.nodes[nodeId].updateShape();
|
7282 | }
|
7283 | }
|
7284 | }
|
7285 |
|
7286 |
|
7287 | if (
|
7288 | typeof options.font !== "undefined" ||
|
7289 | typeof options.widthConstraint !== "undefined" ||
|
7290 | typeof options.heightConstraint !== "undefined"
|
7291 | ) {
|
7292 | for (const nodeId of Object.keys(this.body.nodes)) {
|
7293 | this.body.nodes[nodeId].updateLabelModule();
|
7294 | this.body.nodes[nodeId].needsRefresh();
|
7295 | }
|
7296 | }
|
7297 |
|
7298 |
|
7299 | if (options.size !== undefined) {
|
7300 | for (const nodeId in this.body.nodes) {
|
7301 | if (Object.prototype.hasOwnProperty.call(this.body.nodes, nodeId)) {
|
7302 | this.body.nodes[nodeId].needsRefresh();
|
7303 | }
|
7304 | }
|
7305 | }
|
7306 |
|
7307 |
|
7308 | if (options.hidden !== undefined || options.physics !== undefined) {
|
7309 | this.body.emitter.emit("_dataChanged");
|
7310 | }
|
7311 | }
|
7312 | }
|
7313 |
|
7314 | |
7315 |
|
7316 |
|
7317 |
|
7318 |
|
7319 |
|
7320 |
|
7321 | setData(nodes, doNotEmit = false) {
|
7322 | const oldNodesData = this.body.data.nodes;
|
7323 |
|
7324 | if (isDataViewLike("id", nodes)) {
|
7325 | this.body.data.nodes = nodes;
|
7326 | } else if (Array.isArray(nodes)) {
|
7327 | this.body.data.nodes = new DataSet();
|
7328 | this.body.data.nodes.add(nodes);
|
7329 | } else if (!nodes) {
|
7330 | this.body.data.nodes = new DataSet();
|
7331 | } else {
|
7332 | throw new TypeError("Array or DataSet expected");
|
7333 | }
|
7334 |
|
7335 | if (oldNodesData) {
|
7336 |
|
7337 | forEach(this.nodesListeners, function (callback, event) {
|
7338 | oldNodesData.off(event, callback);
|
7339 | });
|
7340 | }
|
7341 |
|
7342 |
|
7343 | this.body.nodes = {};
|
7344 |
|
7345 | if (this.body.data.nodes) {
|
7346 |
|
7347 | const me = this;
|
7348 | forEach(this.nodesListeners, function (callback, event) {
|
7349 | me.body.data.nodes.on(event, callback);
|
7350 | });
|
7351 |
|
7352 |
|
7353 | const ids = this.body.data.nodes.getIds();
|
7354 | this.add(ids, true);
|
7355 | }
|
7356 |
|
7357 | if (doNotEmit === false) {
|
7358 | this.body.emitter.emit("_dataChanged");
|
7359 | }
|
7360 | }
|
7361 |
|
7362 | |
7363 |
|
7364 |
|
7365 |
|
7366 |
|
7367 |
|
7368 |
|
7369 | add(ids, doNotEmit = false) {
|
7370 | let id;
|
7371 | const newNodes = [];
|
7372 | for (let i = 0; i < ids.length; i++) {
|
7373 | id = ids[i];
|
7374 | const properties = this.body.data.nodes.get(id);
|
7375 | const node = this.create(properties);
|
7376 | newNodes.push(node);
|
7377 | this.body.nodes[id] = node;
|
7378 | }
|
7379 |
|
7380 | this.layoutEngine.positionInitially(newNodes);
|
7381 |
|
7382 | if (doNotEmit === false) {
|
7383 | this.body.emitter.emit("_dataChanged");
|
7384 | }
|
7385 | }
|
7386 |
|
7387 | |
7388 |
|
7389 |
|
7390 |
|
7391 |
|
7392 |
|
7393 |
|
7394 |
|
7395 | update(ids, changedData, oldData) {
|
7396 | const nodes = this.body.nodes;
|
7397 | let dataChanged = false;
|
7398 | for (let i = 0; i < ids.length; i++) {
|
7399 | const id = ids[i];
|
7400 | let node = nodes[id];
|
7401 | const data = changedData[i];
|
7402 | if (node !== undefined) {
|
7403 |
|
7404 | if (node.setOptions(data)) {
|
7405 | dataChanged = true;
|
7406 | }
|
7407 | } else {
|
7408 | dataChanged = true;
|
7409 |
|
7410 | node = this.create(data);
|
7411 | nodes[id] = node;
|
7412 | }
|
7413 | }
|
7414 |
|
7415 | if (!dataChanged && oldData !== undefined) {
|
7416 |
|
7417 |
|
7418 |
|
7419 | dataChanged = changedData.some(function (newValue, index) {
|
7420 | const oldValue = oldData[index];
|
7421 | return oldValue && oldValue.level !== newValue.level;
|
7422 | });
|
7423 | }
|
7424 |
|
7425 | if (dataChanged === true) {
|
7426 | this.body.emitter.emit("_dataChanged");
|
7427 | } else {
|
7428 | this.body.emitter.emit("_dataUpdated");
|
7429 | }
|
7430 | }
|
7431 |
|
7432 | |
7433 |
|
7434 |
|
7435 |
|
7436 |
|
7437 |
|
7438 | remove(ids) {
|
7439 | const nodes = this.body.nodes;
|
7440 |
|
7441 | for (let i = 0; i < ids.length; i++) {
|
7442 | const id = ids[i];
|
7443 | delete nodes[id];
|
7444 | }
|
7445 |
|
7446 | this.body.emitter.emit("_dataChanged");
|
7447 | }
|
7448 |
|
7449 | |
7450 |
|
7451 |
|
7452 |
|
7453 |
|
7454 |
|
7455 |
|
7456 | create(properties, constructorClass = Node) {
|
7457 | return new constructorClass(
|
7458 | properties,
|
7459 | this.body,
|
7460 | this.images,
|
7461 | this.groups,
|
7462 | this.options,
|
7463 | this.defaultOptions
|
7464 | );
|
7465 | }
|
7466 |
|
7467 | |
7468 |
|
7469 |
|
7470 |
|
7471 | refresh(clearPositions = false) {
|
7472 | forEach(this.body.nodes, (node, nodeId) => {
|
7473 | const data = this.body.data.nodes.get(nodeId);
|
7474 | if (data !== undefined) {
|
7475 | if (clearPositions === true) {
|
7476 | node.setOptions({ x: null, y: null });
|
7477 | }
|
7478 | node.setOptions({ fixed: false });
|
7479 | node.setOptions(data);
|
7480 | }
|
7481 | });
|
7482 | }
|
7483 |
|
7484 | |
7485 |
|
7486 |
|
7487 |
|
7488 |
|
7489 |
|
7490 | getPositions(ids) {
|
7491 | const dataArray = {};
|
7492 | if (ids !== undefined) {
|
7493 | if (Array.isArray(ids) === true) {
|
7494 | for (let i = 0; i < ids.length; i++) {
|
7495 | if (this.body.nodes[ids[i]] !== undefined) {
|
7496 | const node = this.body.nodes[ids[i]];
|
7497 | dataArray[ids[i]] = {
|
7498 | x: Math.round(node.x),
|
7499 | y: Math.round(node.y),
|
7500 | };
|
7501 | }
|
7502 | }
|
7503 | } else {
|
7504 | if (this.body.nodes[ids] !== undefined) {
|
7505 | const node = this.body.nodes[ids];
|
7506 | dataArray[ids] = { x: Math.round(node.x), y: Math.round(node.y) };
|
7507 | }
|
7508 | }
|
7509 | } else {
|
7510 | for (let i = 0; i < this.body.nodeIndices.length; i++) {
|
7511 | const node = this.body.nodes[this.body.nodeIndices[i]];
|
7512 | dataArray[this.body.nodeIndices[i]] = {
|
7513 | x: Math.round(node.x),
|
7514 | y: Math.round(node.y),
|
7515 | };
|
7516 | }
|
7517 | }
|
7518 | return dataArray;
|
7519 | }
|
7520 |
|
7521 | |
7522 |
|
7523 |
|
7524 |
|
7525 |
|
7526 |
|
7527 |
|
7528 |
|
7529 |
|
7530 |
|
7531 | getPosition(id) {
|
7532 | if (id == undefined) {
|
7533 | throw new TypeError("No id was specified for getPosition method.");
|
7534 | } else if (this.body.nodes[id] == undefined) {
|
7535 | throw new ReferenceError(
|
7536 | `NodeId provided for getPosition does not exist. Provided: ${id}`
|
7537 | );
|
7538 | } else {
|
7539 | return {
|
7540 | x: Math.round(this.body.nodes[id].x),
|
7541 | y: Math.round(this.body.nodes[id].y),
|
7542 | };
|
7543 | }
|
7544 | }
|
7545 |
|
7546 | |
7547 |
|
7548 |
|
7549 | storePositions() {
|
7550 |
|
7551 | const dataArray = [];
|
7552 | const dataset = this.body.data.nodes.getDataSet();
|
7553 |
|
7554 | for (const dsNode of dataset.get()) {
|
7555 | const id = dsNode.id;
|
7556 | const bodyNode = this.body.nodes[id];
|
7557 | const x = Math.round(bodyNode.x);
|
7558 | const y = Math.round(bodyNode.y);
|
7559 |
|
7560 | if (dsNode.x !== x || dsNode.y !== y) {
|
7561 | dataArray.push({ id, x, y });
|
7562 | }
|
7563 | }
|
7564 |
|
7565 | dataset.update(dataArray);
|
7566 | }
|
7567 |
|
7568 | |
7569 |
|
7570 |
|
7571 |
|
7572 |
|
7573 |
|
7574 | getBoundingBox(nodeId) {
|
7575 | if (this.body.nodes[nodeId] !== undefined) {
|
7576 | return this.body.nodes[nodeId].shape.boundingBox;
|
7577 | }
|
7578 | }
|
7579 |
|
7580 | |
7581 |
|
7582 |
|
7583 |
|
7584 |
|
7585 |
|
7586 |
|
7587 |
|
7588 | getConnectedNodes(nodeId, direction) {
|
7589 | const nodeList = [];
|
7590 | if (this.body.nodes[nodeId] !== undefined) {
|
7591 | const node = this.body.nodes[nodeId];
|
7592 | const nodeObj = {};
|
7593 | for (let i = 0; i < node.edges.length; i++) {
|
7594 | const edge = node.edges[i];
|
7595 | if (direction !== "to" && edge.toId == node.id) {
|
7596 |
|
7597 | if (nodeObj[edge.fromId] === undefined) {
|
7598 | nodeList.push(edge.fromId);
|
7599 | nodeObj[edge.fromId] = true;
|
7600 | }
|
7601 | } else if (direction !== "from" && edge.fromId == node.id) {
|
7602 |
|
7603 | if (nodeObj[edge.toId] === undefined) {
|
7604 | nodeList.push(edge.toId);
|
7605 | nodeObj[edge.toId] = true;
|
7606 | }
|
7607 | }
|
7608 | }
|
7609 | }
|
7610 | return nodeList;
|
7611 | }
|
7612 |
|
7613 | |
7614 |
|
7615 |
|
7616 |
|
7617 |
|
7618 |
|
7619 | getConnectedEdges(nodeId) {
|
7620 | const edgeList = [];
|
7621 | if (this.body.nodes[nodeId] !== undefined) {
|
7622 | const node = this.body.nodes[nodeId];
|
7623 | for (let i = 0; i < node.edges.length; i++) {
|
7624 | edgeList.push(node.edges[i].id);
|
7625 | }
|
7626 | } else {
|
7627 | console.error(
|
7628 | "NodeId provided for getConnectedEdges does not exist. Provided: ",
|
7629 | nodeId
|
7630 | );
|
7631 | }
|
7632 | return edgeList;
|
7633 | }
|
7634 |
|
7635 | |
7636 |
|
7637 |
|
7638 |
|
7639 |
|
7640 |
|
7641 |
|
7642 | moveNode(nodeId, x, y) {
|
7643 | if (this.body.nodes[nodeId] !== undefined) {
|
7644 | this.body.nodes[nodeId].x = Number(x);
|
7645 | this.body.nodes[nodeId].y = Number(y);
|
7646 | setTimeout(() => {
|
7647 | this.body.emitter.emit("startSimulation");
|
7648 | }, 0);
|
7649 | } else {
|
7650 | console.error(
|
7651 | "Node id supplied to moveNode does not exist. Provided: ",
|
7652 | nodeId
|
7653 | );
|
7654 | }
|
7655 | }
|
7656 | }
|
7657 |
|
7658 |
|
7659 |
|
7660 |
|
7661 |
|
7662 |
|
7663 |
|
7664 |
|
7665 |
|
7666 |
|
7667 |
|
7668 |
|
7669 |
|
7670 |
|
7671 |
|
7672 |
|
7673 |
|
7674 |
|
7675 |
|
7676 |
|
7677 |
|
7678 |
|
7679 |
|
7680 |
|
7681 |
|
7682 |
|
7683 |
|
7684 |
|
7685 |
|
7686 |
|
7687 |
|
7688 |
|
7689 | class EndPoint {
|
7690 | |
7691 |
|
7692 |
|
7693 |
|
7694 |
|
7695 |
|
7696 |
|
7697 |
|
7698 |
|
7699 |
|
7700 |
|
7701 | static transform(points, arrowData) {
|
7702 | if (!Array.isArray(points)) {
|
7703 | points = [points];
|
7704 | }
|
7705 | const x = arrowData.point.x;
|
7706 | const y = arrowData.point.y;
|
7707 | const angle = arrowData.angle;
|
7708 | const length = arrowData.length;
|
7709 | for (let i = 0; i < points.length; ++i) {
|
7710 | const p = points[i];
|
7711 | const xt = p.x * Math.cos(angle) - p.y * Math.sin(angle);
|
7712 | const yt = p.x * Math.sin(angle) + p.y * Math.cos(angle);
|
7713 | p.x = x + length * xt;
|
7714 | p.y = y + length * yt;
|
7715 | }
|
7716 | }
|
7717 | |
7718 |
|
7719 |
|
7720 |
|
7721 |
|
7722 |
|
7723 | static drawPath(ctx, points) {
|
7724 | ctx.beginPath();
|
7725 | ctx.moveTo(points[0].x, points[0].y);
|
7726 | for (let i = 1; i < points.length; ++i) {
|
7727 | ctx.lineTo(points[i].x, points[i].y);
|
7728 | }
|
7729 | ctx.closePath();
|
7730 | }
|
7731 | }
|
7732 |
|
7733 |
|
7734 |
|
7735 | class Image$1 extends EndPoint {
|
7736 | |
7737 |
|
7738 |
|
7739 |
|
7740 |
|
7741 |
|
7742 |
|
7743 |
|
7744 | static draw(ctx, arrowData) {
|
7745 | if (arrowData.image) {
|
7746 | ctx.save();
|
7747 | ctx.translate(arrowData.point.x, arrowData.point.y);
|
7748 | ctx.rotate(Math.PI / 2 + arrowData.angle);
|
7749 | const width = arrowData.imageWidth != null
|
7750 | ? arrowData.imageWidth
|
7751 | : arrowData.image.width;
|
7752 | const height = arrowData.imageHeight != null
|
7753 | ? arrowData.imageHeight
|
7754 | : arrowData.image.height;
|
7755 | arrowData.image.drawImageAtPosition(ctx, 1,
|
7756 | -width / 2,
|
7757 | 0,
|
7758 | width, height);
|
7759 | ctx.restore();
|
7760 | }
|
7761 | return false;
|
7762 | }
|
7763 | }
|
7764 |
|
7765 |
|
7766 |
|
7767 | class Arrow extends EndPoint {
|
7768 | |
7769 |
|
7770 |
|
7771 |
|
7772 |
|
7773 |
|
7774 |
|
7775 |
|
7776 | static draw(ctx, arrowData) {
|
7777 |
|
7778 |
|
7779 | const points = [
|
7780 | { x: 0, y: 0 },
|
7781 | { x: -1, y: 0.3 },
|
7782 | { x: -0.9, y: 0 },
|
7783 | { x: -1, y: -0.3 },
|
7784 | ];
|
7785 | EndPoint.transform(points, arrowData);
|
7786 | EndPoint.drawPath(ctx, points);
|
7787 | return true;
|
7788 | }
|
7789 | }
|
7790 |
|
7791 |
|
7792 |
|
7793 | class Crow {
|
7794 | |
7795 |
|
7796 |
|
7797 |
|
7798 |
|
7799 |
|
7800 |
|
7801 |
|
7802 | static draw(ctx, arrowData) {
|
7803 |
|
7804 |
|
7805 | const points = [
|
7806 | { x: -1, y: 0 },
|
7807 | { x: 0, y: 0.3 },
|
7808 | { x: -0.4, y: 0 },
|
7809 | { x: 0, y: -0.3 },
|
7810 | ];
|
7811 | EndPoint.transform(points, arrowData);
|
7812 | EndPoint.drawPath(ctx, points);
|
7813 | return true;
|
7814 | }
|
7815 | }
|
7816 |
|
7817 |
|
7818 |
|
7819 | class Curve {
|
7820 | |
7821 |
|
7822 |
|
7823 |
|
7824 |
|
7825 |
|
7826 |
|
7827 |
|
7828 | static draw(ctx, arrowData) {
|
7829 |
|
7830 |
|
7831 | const point = { x: -0.4, y: 0 };
|
7832 | EndPoint.transform(point, arrowData);
|
7833 |
|
7834 | ctx.strokeStyle = ctx.fillStyle;
|
7835 | ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
7836 |
|
7837 | const pi = Math.PI;
|
7838 | const startAngle = arrowData.angle - pi / 2;
|
7839 | const endAngle = arrowData.angle + pi / 2;
|
7840 | ctx.beginPath();
|
7841 | ctx.arc(point.x, point.y, arrowData.length * 0.4, startAngle, endAngle, false);
|
7842 | ctx.stroke();
|
7843 | return true;
|
7844 | }
|
7845 | }
|
7846 |
|
7847 |
|
7848 |
|
7849 | class InvertedCurve {
|
7850 | |
7851 |
|
7852 |
|
7853 |
|
7854 |
|
7855 |
|
7856 |
|
7857 |
|
7858 | static draw(ctx, arrowData) {
|
7859 |
|
7860 |
|
7861 | const point = { x: -0.3, y: 0 };
|
7862 | EndPoint.transform(point, arrowData);
|
7863 |
|
7864 | ctx.strokeStyle = ctx.fillStyle;
|
7865 | ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
7866 |
|
7867 | const pi = Math.PI;
|
7868 | const startAngle = arrowData.angle + pi / 2;
|
7869 | const endAngle = arrowData.angle + (3 * pi) / 2;
|
7870 | ctx.beginPath();
|
7871 | ctx.arc(point.x, point.y, arrowData.length * 0.4, startAngle, endAngle, false);
|
7872 | ctx.stroke();
|
7873 | return true;
|
7874 | }
|
7875 | }
|
7876 |
|
7877 |
|
7878 |
|
7879 | class Triangle {
|
7880 | |
7881 |
|
7882 |
|
7883 |
|
7884 |
|
7885 |
|
7886 |
|
7887 |
|
7888 | static draw(ctx, arrowData) {
|
7889 |
|
7890 |
|
7891 | const points = [
|
7892 | { x: 0.02, y: 0 },
|
7893 | { x: -1, y: 0.3 },
|
7894 | { x: -1, y: -0.3 },
|
7895 | ];
|
7896 | EndPoint.transform(points, arrowData);
|
7897 | EndPoint.drawPath(ctx, points);
|
7898 | return true;
|
7899 | }
|
7900 | }
|
7901 |
|
7902 |
|
7903 |
|
7904 | class InvertedTriangle {
|
7905 | |
7906 |
|
7907 |
|
7908 |
|
7909 |
|
7910 |
|
7911 |
|
7912 |
|
7913 | static draw(ctx, arrowData) {
|
7914 |
|
7915 |
|
7916 | const points = [
|
7917 | { x: 0, y: 0.3 },
|
7918 | { x: 0, y: -0.3 },
|
7919 | { x: -1, y: 0 },
|
7920 | ];
|
7921 | EndPoint.transform(points, arrowData);
|
7922 | EndPoint.drawPath(ctx, points);
|
7923 | return true;
|
7924 | }
|
7925 | }
|
7926 |
|
7927 |
|
7928 |
|
7929 | class Circle {
|
7930 | |
7931 |
|
7932 |
|
7933 |
|
7934 |
|
7935 |
|
7936 |
|
7937 |
|
7938 | static draw(ctx, arrowData) {
|
7939 | const point = { x: -0.4, y: 0 };
|
7940 | EndPoint.transform(point, arrowData);
|
7941 | drawCircle(ctx, point.x, point.y, arrowData.length * 0.4);
|
7942 | return true;
|
7943 | }
|
7944 | }
|
7945 |
|
7946 |
|
7947 |
|
7948 | class Bar {
|
7949 | |
7950 |
|
7951 |
|
7952 |
|
7953 |
|
7954 |
|
7955 |
|
7956 |
|
7957 | static draw(ctx, arrowData) {
|
7958 | |
7959 |
|
7960 |
|
7961 |
|
7962 |
|
7963 |
|
7964 |
|
7965 |
|
7966 |
|
7967 |
|
7968 |
|
7969 |
|
7970 | const points = [
|
7971 | { x: 0, y: 0.5 },
|
7972 | { x: 0, y: -0.5 },
|
7973 | { x: -0.15, y: -0.5 },
|
7974 | { x: -0.15, y: 0.5 },
|
7975 | ];
|
7976 | EndPoint.transform(points, arrowData);
|
7977 | EndPoint.drawPath(ctx, points);
|
7978 | return true;
|
7979 | }
|
7980 | }
|
7981 |
|
7982 |
|
7983 |
|
7984 | class Box {
|
7985 | |
7986 |
|
7987 |
|
7988 |
|
7989 |
|
7990 |
|
7991 |
|
7992 |
|
7993 | static draw(ctx, arrowData) {
|
7994 | const points = [
|
7995 | { x: 0, y: 0.3 },
|
7996 | { x: 0, y: -0.3 },
|
7997 | { x: -0.6, y: -0.3 },
|
7998 | { x: -0.6, y: 0.3 },
|
7999 | ];
|
8000 | EndPoint.transform(points, arrowData);
|
8001 | EndPoint.drawPath(ctx, points);
|
8002 | return true;
|
8003 | }
|
8004 | }
|
8005 |
|
8006 |
|
8007 |
|
8008 | class Diamond {
|
8009 | |
8010 |
|
8011 |
|
8012 |
|
8013 |
|
8014 |
|
8015 |
|
8016 |
|
8017 | static draw(ctx, arrowData) {
|
8018 | const points = [
|
8019 | { x: 0, y: 0 },
|
8020 | { x: -0.5, y: -0.3 },
|
8021 | { x: -1, y: 0 },
|
8022 | { x: -0.5, y: 0.3 },
|
8023 | ];
|
8024 | EndPoint.transform(points, arrowData);
|
8025 | EndPoint.drawPath(ctx, points);
|
8026 | return true;
|
8027 | }
|
8028 | }
|
8029 |
|
8030 |
|
8031 |
|
8032 | class Vee {
|
8033 | |
8034 |
|
8035 |
|
8036 |
|
8037 |
|
8038 |
|
8039 |
|
8040 |
|
8041 | static draw(ctx, arrowData) {
|
8042 |
|
8043 |
|
8044 | const points = [
|
8045 | { x: -1, y: 0.3 },
|
8046 | { x: -0.5, y: 0 },
|
8047 | { x: -1, y: -0.3 },
|
8048 | { x: 0, y: 0 },
|
8049 | ];
|
8050 | EndPoint.transform(points, arrowData);
|
8051 | EndPoint.drawPath(ctx, points);
|
8052 | return true;
|
8053 | }
|
8054 | }
|
8055 |
|
8056 |
|
8057 |
|
8058 | class EndPoints {
|
8059 | |
8060 |
|
8061 |
|
8062 |
|
8063 |
|
8064 |
|
8065 |
|
8066 |
|
8067 | static draw(ctx, arrowData) {
|
8068 | let type;
|
8069 | if (arrowData.type) {
|
8070 | type = arrowData.type.toLowerCase();
|
8071 | }
|
8072 | switch (type) {
|
8073 | case "image":
|
8074 | return Image$1.draw(ctx, arrowData);
|
8075 | case "circle":
|
8076 | return Circle.draw(ctx, arrowData);
|
8077 | case "box":
|
8078 | return Box.draw(ctx, arrowData);
|
8079 | case "crow":
|
8080 | return Crow.draw(ctx, arrowData);
|
8081 | case "curve":
|
8082 | return Curve.draw(ctx, arrowData);
|
8083 | case "diamond":
|
8084 | return Diamond.draw(ctx, arrowData);
|
8085 | case "inv_curve":
|
8086 | return InvertedCurve.draw(ctx, arrowData);
|
8087 | case "triangle":
|
8088 | return Triangle.draw(ctx, arrowData);
|
8089 | case "inv_triangle":
|
8090 | return InvertedTriangle.draw(ctx, arrowData);
|
8091 | case "bar":
|
8092 | return Bar.draw(ctx, arrowData);
|
8093 | case "vee":
|
8094 | return Vee.draw(ctx, arrowData);
|
8095 | case "arrow":
|
8096 | default:
|
8097 | return Arrow.draw(ctx, arrowData);
|
8098 | }
|
8099 | }
|
8100 | }
|
8101 |
|
8102 |
|
8103 |
|
8104 |
|
8105 | class EdgeBase {
|
8106 | |
8107 |
|
8108 |
|
8109 |
|
8110 |
|
8111 |
|
8112 |
|
8113 | constructor(options, _body, _labelModule) {
|
8114 | this._body = _body;
|
8115 | this._labelModule = _labelModule;
|
8116 | this.color = {};
|
8117 | this.colorDirty = true;
|
8118 | this.hoverWidth = 1.5;
|
8119 | this.selectionWidth = 2;
|
8120 | this.setOptions(options);
|
8121 | this.fromPoint = this.from;
|
8122 | this.toPoint = this.to;
|
8123 | }
|
8124 |
|
8125 | connect() {
|
8126 | this.from = this._body.nodes[this.options.from];
|
8127 | this.to = this._body.nodes[this.options.to];
|
8128 | }
|
8129 |
|
8130 | cleanup() {
|
8131 | return false;
|
8132 | }
|
8133 | |
8134 |
|
8135 |
|
8136 |
|
8137 |
|
8138 | setOptions(options) {
|
8139 | this.options = options;
|
8140 | this.from = this._body.nodes[this.options.from];
|
8141 | this.to = this._body.nodes[this.options.to];
|
8142 | this.id = this.options.id;
|
8143 | }
|
8144 |
|
8145 | drawLine(ctx, values, _selected, _hover, viaNode = this.getViaNode()) {
|
8146 |
|
8147 | ctx.strokeStyle = this.getColor(ctx, values);
|
8148 | ctx.lineWidth = values.width;
|
8149 | if (values.dashes !== false) {
|
8150 | this._drawDashedLine(ctx, values, viaNode);
|
8151 | }
|
8152 | else {
|
8153 | this._drawLine(ctx, values, viaNode);
|
8154 | }
|
8155 | }
|
8156 | |
8157 |
|
8158 |
|
8159 |
|
8160 |
|
8161 |
|
8162 |
|
8163 |
|
8164 |
|
8165 | _drawLine(ctx, values, viaNode, fromPoint, toPoint) {
|
8166 | if (this.from != this.to) {
|
8167 |
|
8168 | this._line(ctx, values, viaNode, fromPoint, toPoint);
|
8169 | }
|
8170 | else {
|
8171 | const [x, y, radius] = this._getCircleData(ctx);
|
8172 | this._circle(ctx, values, x, y, radius);
|
8173 | }
|
8174 | }
|
8175 | |
8176 |
|
8177 |
|
8178 |
|
8179 |
|
8180 |
|
8181 |
|
8182 |
|
8183 |
|
8184 | _drawDashedLine(ctx, values, viaNode, _fromPoint, _toPoint) {
|
8185 | ctx.lineCap = "round";
|
8186 | const pattern = Array.isArray(values.dashes) ? values.dashes : [5, 5];
|
8187 |
|
8188 | if (ctx.setLineDash !== undefined) {
|
8189 | ctx.save();
|
8190 |
|
8191 | ctx.setLineDash(pattern);
|
8192 | ctx.lineDashOffset = 0;
|
8193 |
|
8194 | if (this.from != this.to) {
|
8195 |
|
8196 | this._line(ctx, values, viaNode);
|
8197 | }
|
8198 | else {
|
8199 | const [x, y, radius] = this._getCircleData(ctx);
|
8200 | this._circle(ctx, values, x, y, radius);
|
8201 | }
|
8202 |
|
8203 | ctx.setLineDash([0]);
|
8204 | ctx.lineDashOffset = 0;
|
8205 | ctx.restore();
|
8206 | }
|
8207 | else {
|
8208 |
|
8209 | if (this.from != this.to) {
|
8210 |
|
8211 | drawDashedLine(ctx, this.from.x, this.from.y, this.to.x, this.to.y, pattern);
|
8212 | }
|
8213 | else {
|
8214 | const [x, y, radius] = this._getCircleData(ctx);
|
8215 | this._circle(ctx, values, x, y, radius);
|
8216 | }
|
8217 |
|
8218 | this.enableShadow(ctx, values);
|
8219 | ctx.stroke();
|
8220 |
|
8221 | this.disableShadow(ctx, values);
|
8222 | }
|
8223 | }
|
8224 | |
8225 |
|
8226 |
|
8227 |
|
8228 |
|
8229 |
|
8230 |
|
8231 |
|
8232 |
|
8233 | findBorderPosition(node, ctx, options) {
|
8234 | if (this.from != this.to) {
|
8235 | return this._findBorderPosition(node, ctx, options);
|
8236 | }
|
8237 | else {
|
8238 | return this._findBorderPositionCircle(node, ctx, options);
|
8239 | }
|
8240 | }
|
8241 |
|
8242 | findBorderPositions(ctx) {
|
8243 | if (this.from != this.to) {
|
8244 | return {
|
8245 | from: this._findBorderPosition(this.from, ctx),
|
8246 | to: this._findBorderPosition(this.to, ctx),
|
8247 | };
|
8248 | }
|
8249 | else {
|
8250 | const [x, y] = this._getCircleData(ctx).slice(0, 2);
|
8251 | return {
|
8252 | from: this._findBorderPositionCircle(this.from, ctx, {
|
8253 | x,
|
8254 | y,
|
8255 | low: 0.25,
|
8256 | high: 0.6,
|
8257 | direction: -1,
|
8258 | }),
|
8259 | to: this._findBorderPositionCircle(this.from, ctx, {
|
8260 | x,
|
8261 | y,
|
8262 | low: 0.6,
|
8263 | high: 0.8,
|
8264 | direction: 1,
|
8265 | }),
|
8266 | };
|
8267 | }
|
8268 | }
|
8269 | |
8270 |
|
8271 |
|
8272 |
|
8273 |
|
8274 |
|
8275 |
|
8276 | _getCircleData(ctx) {
|
8277 | const radius = this.options.selfReference.size;
|
8278 | if (ctx !== undefined) {
|
8279 | if (this.from.shape.width === undefined) {
|
8280 | this.from.shape.resize(ctx);
|
8281 | }
|
8282 | }
|
8283 |
|
8284 | const coordinates = getSelfRefCoordinates(ctx, this.options.selfReference.angle, radius, this.from);
|
8285 | return [coordinates.x, coordinates.y, radius];
|
8286 | }
|
8287 | |
8288 |
|
8289 |
|
8290 |
|
8291 |
|
8292 |
|
8293 |
|
8294 |
|
8295 |
|
8296 |
|
8297 | _pointOnCircle(x, y, radius, position) {
|
8298 | const angle = position * 2 * Math.PI;
|
8299 | return {
|
8300 | x: x + radius * Math.cos(angle),
|
8301 | y: y - radius * Math.sin(angle),
|
8302 | };
|
8303 | }
|
8304 | |
8305 |
|
8306 |
|
8307 |
|
8308 |
|
8309 |
|
8310 |
|
8311 |
|
8312 |
|
8313 |
|
8314 |
|
8315 |
|
8316 | _findBorderPositionCircle(nearNode, ctx, options) {
|
8317 | const x = options.x;
|
8318 | const y = options.y;
|
8319 | let low = options.low;
|
8320 | let high = options.high;
|
8321 | const direction = options.direction;
|
8322 | const maxIterations = 10;
|
8323 | const radius = this.options.selfReference.size;
|
8324 | const threshold = 0.05;
|
8325 | let pos;
|
8326 | let middle = (low + high) * 0.5;
|
8327 | let endPointOffset = 0;
|
8328 | if (this.options.arrowStrikethrough === true) {
|
8329 | if (direction === -1) {
|
8330 | endPointOffset = this.options.endPointOffset.from;
|
8331 | }
|
8332 | else if (direction === 1) {
|
8333 | endPointOffset = this.options.endPointOffset.to;
|
8334 | }
|
8335 | }
|
8336 | let iteration = 0;
|
8337 | do {
|
8338 | middle = (low + high) * 0.5;
|
8339 | pos = this._pointOnCircle(x, y, radius, middle);
|
8340 | const angle = Math.atan2(nearNode.y - pos.y, nearNode.x - pos.x);
|
8341 | const distanceToBorder = nearNode.distanceToBorder(ctx, angle) + endPointOffset;
|
8342 | const distanceToPoint = Math.sqrt(Math.pow(pos.x - nearNode.x, 2) + Math.pow(pos.y - nearNode.y, 2));
|
8343 | const difference = distanceToBorder - distanceToPoint;
|
8344 | if (Math.abs(difference) < threshold) {
|
8345 | break;
|
8346 | }
|
8347 | else if (difference > 0) {
|
8348 |
|
8349 | if (direction > 0) {
|
8350 | low = middle;
|
8351 | }
|
8352 | else {
|
8353 | high = middle;
|
8354 | }
|
8355 | }
|
8356 | else {
|
8357 | if (direction > 0) {
|
8358 | high = middle;
|
8359 | }
|
8360 | else {
|
8361 | low = middle;
|
8362 | }
|
8363 | }
|
8364 | ++iteration;
|
8365 | } while (low <= high && iteration < maxIterations);
|
8366 | return {
|
8367 | ...pos,
|
8368 | t: middle,
|
8369 | };
|
8370 | }
|
8371 | |
8372 |
|
8373 |
|
8374 |
|
8375 |
|
8376 |
|
8377 |
|
8378 |
|
8379 | getLineWidth(selected, hover) {
|
8380 | if (selected === true) {
|
8381 | return Math.max(this.selectionWidth, 0.3 / this._body.view.scale);
|
8382 | }
|
8383 | else if (hover === true) {
|
8384 | return Math.max(this.hoverWidth, 0.3 / this._body.view.scale);
|
8385 | }
|
8386 | else {
|
8387 | return Math.max(this.options.width, 0.3 / this._body.view.scale);
|
8388 | }
|
8389 | }
|
8390 | |
8391 |
|
8392 |
|
8393 |
|
8394 |
|
8395 |
|
8396 |
|
8397 |
|
8398 |
|
8399 |
|
8400 | getColor(ctx, values) {
|
8401 | if (values.inheritsColor !== false) {
|
8402 |
|
8403 | if (values.inheritsColor === "both" && this.from.id !== this.to.id) {
|
8404 | const grd = ctx.createLinearGradient(this.from.x, this.from.y, this.to.x, this.to.y);
|
8405 | let fromColor = this.from.options.color.highlight.border;
|
8406 | let toColor = this.to.options.color.highlight.border;
|
8407 | if (this.from.selected === false && this.to.selected === false) {
|
8408 | fromColor = overrideOpacity(this.from.options.color.border, values.opacity);
|
8409 | toColor = overrideOpacity(this.to.options.color.border, values.opacity);
|
8410 | }
|
8411 | else if (this.from.selected === true && this.to.selected === false) {
|
8412 | toColor = this.to.options.color.border;
|
8413 | }
|
8414 | else if (this.from.selected === false && this.to.selected === true) {
|
8415 | fromColor = this.from.options.color.border;
|
8416 | }
|
8417 | grd.addColorStop(0, fromColor);
|
8418 | grd.addColorStop(1, toColor);
|
8419 |
|
8420 | return grd;
|
8421 | }
|
8422 | if (values.inheritsColor === "to") {
|
8423 | return overrideOpacity(this.to.options.color.border, values.opacity);
|
8424 | }
|
8425 | else {
|
8426 |
|
8427 | return overrideOpacity(this.from.options.color.border, values.opacity);
|
8428 | }
|
8429 | }
|
8430 | else {
|
8431 | return overrideOpacity(values.color, values.opacity);
|
8432 | }
|
8433 | }
|
8434 | |
8435 |
|
8436 |
|
8437 |
|
8438 |
|
8439 |
|
8440 |
|
8441 |
|
8442 |
|
8443 | _circle(ctx, values, x, y, radius) {
|
8444 |
|
8445 | this.enableShadow(ctx, values);
|
8446 |
|
8447 | let angleFrom = 0;
|
8448 | let angleTo = Math.PI * 2;
|
8449 | if (!this.options.selfReference.renderBehindTheNode) {
|
8450 |
|
8451 |
|
8452 |
|
8453 | const low = this.options.selfReference.angle;
|
8454 | const high = this.options.selfReference.angle + Math.PI;
|
8455 | const pointTFrom = this._findBorderPositionCircle(this.from, ctx, {
|
8456 | x,
|
8457 | y,
|
8458 | low,
|
8459 | high,
|
8460 | direction: -1,
|
8461 | });
|
8462 | const pointTTo = this._findBorderPositionCircle(this.from, ctx, {
|
8463 | x,
|
8464 | y,
|
8465 | low,
|
8466 | high,
|
8467 | direction: 1,
|
8468 | });
|
8469 | angleFrom = Math.atan2(pointTFrom.y - y, pointTFrom.x - x);
|
8470 | angleTo = Math.atan2(pointTTo.y - y, pointTTo.x - x);
|
8471 | }
|
8472 |
|
8473 | ctx.beginPath();
|
8474 | ctx.arc(x, y, radius, angleFrom, angleTo, false);
|
8475 | ctx.stroke();
|
8476 |
|
8477 | this.disableShadow(ctx, values);
|
8478 | }
|
8479 | |
8480 |
|
8481 |
|
8482 |
|
8483 |
|
8484 |
|
8485 | getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
|
8486 | if (this.from != this.to) {
|
8487 | return this._getDistanceToEdge(x1, y1, x2, y2, x3, y3);
|
8488 | }
|
8489 | else {
|
8490 | const [x, y, radius] = this._getCircleData(undefined);
|
8491 | const dx = x - x3;
|
8492 | const dy = y - y3;
|
8493 | return Math.abs(Math.sqrt(dx * dx + dy * dy) - radius);
|
8494 | }
|
8495 | }
|
8496 | |
8497 |
|
8498 |
|
8499 |
|
8500 |
|
8501 |
|
8502 |
|
8503 |
|
8504 |
|
8505 |
|
8506 |
|
8507 |
|
8508 | _getDistanceToLine(x1, y1, x2, y2, x3, y3) {
|
8509 | const px = x2 - x1;
|
8510 | const py = y2 - y1;
|
8511 | const something = px * px + py * py;
|
8512 | let u = ((x3 - x1) * px + (y3 - y1) * py) / something;
|
8513 | if (u > 1) {
|
8514 | u = 1;
|
8515 | }
|
8516 | else if (u < 0) {
|
8517 | u = 0;
|
8518 | }
|
8519 | const x = x1 + u * px;
|
8520 | const y = y1 + u * py;
|
8521 | const dx = x - x3;
|
8522 | const dy = y - y3;
|
8523 |
|
8524 |
|
8525 |
|
8526 |
|
8527 |
|
8528 | return Math.sqrt(dx * dx + dy * dy);
|
8529 | }
|
8530 |
|
8531 | getArrowData(ctx, position, viaNode, _selected, _hover, values) {
|
8532 |
|
8533 | let angle;
|
8534 | let arrowPoint;
|
8535 | let node1;
|
8536 | let node2;
|
8537 | let reversed;
|
8538 | let scaleFactor;
|
8539 | let type;
|
8540 | const lineWidth = values.width;
|
8541 | if (position === "from") {
|
8542 | node1 = this.from;
|
8543 | node2 = this.to;
|
8544 | reversed = values.fromArrowScale < 0;
|
8545 | scaleFactor = Math.abs(values.fromArrowScale);
|
8546 | type = values.fromArrowType;
|
8547 | }
|
8548 | else if (position === "to") {
|
8549 | node1 = this.to;
|
8550 | node2 = this.from;
|
8551 | reversed = values.toArrowScale < 0;
|
8552 | scaleFactor = Math.abs(values.toArrowScale);
|
8553 | type = values.toArrowType;
|
8554 | }
|
8555 | else {
|
8556 | node1 = this.to;
|
8557 | node2 = this.from;
|
8558 | reversed = values.middleArrowScale < 0;
|
8559 | scaleFactor = Math.abs(values.middleArrowScale);
|
8560 | type = values.middleArrowType;
|
8561 | }
|
8562 | const length = 15 * scaleFactor + 3 * lineWidth;
|
8563 |
|
8564 | if (node1 != node2) {
|
8565 | const approximateEdgeLength = Math.hypot(node1.x - node2.x, node1.y - node2.y);
|
8566 | const relativeLength = length / approximateEdgeLength;
|
8567 | if (position !== "middle") {
|
8568 |
|
8569 | if (this.options.smooth.enabled === true) {
|
8570 | const pointT = this._findBorderPosition(node1, ctx, { via: viaNode });
|
8571 | const guidePos = this.getPoint(pointT.t + relativeLength * (position === "from" ? 1 : -1), viaNode);
|
8572 | angle = Math.atan2(pointT.y - guidePos.y, pointT.x - guidePos.x);
|
8573 | arrowPoint = pointT;
|
8574 | }
|
8575 | else {
|
8576 | angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
|
8577 | arrowPoint = this._findBorderPosition(node1, ctx);
|
8578 | }
|
8579 | }
|
8580 | else {
|
8581 |
|
8582 | const halfLength = (reversed ? -relativeLength : relativeLength) / 2;
|
8583 | const guidePos1 = this.getPoint(0.5 + halfLength, viaNode);
|
8584 | const guidePos2 = this.getPoint(0.5 - halfLength, viaNode);
|
8585 | angle = Math.atan2(guidePos1.y - guidePos2.y, guidePos1.x - guidePos2.x);
|
8586 | arrowPoint = this.getPoint(0.5, viaNode);
|
8587 | }
|
8588 | }
|
8589 | else {
|
8590 |
|
8591 | const [x, y, radius] = this._getCircleData(ctx);
|
8592 | if (position === "from") {
|
8593 | const low = this.options.selfReference.angle;
|
8594 | const high = this.options.selfReference.angle + Math.PI;
|
8595 | const pointT = this._findBorderPositionCircle(this.from, ctx, {
|
8596 | x,
|
8597 | y,
|
8598 | low,
|
8599 | high,
|
8600 | direction: -1,
|
8601 | });
|
8602 | angle = pointT.t * -2 * Math.PI + 1.5 * Math.PI + 0.1 * Math.PI;
|
8603 | arrowPoint = pointT;
|
8604 | }
|
8605 | else if (position === "to") {
|
8606 | const low = this.options.selfReference.angle;
|
8607 | const high = this.options.selfReference.angle + Math.PI;
|
8608 | const pointT = this._findBorderPositionCircle(this.from, ctx, {
|
8609 | x,
|
8610 | y,
|
8611 | low,
|
8612 | high,
|
8613 | direction: 1,
|
8614 | });
|
8615 | angle = pointT.t * -2 * Math.PI + 1.5 * Math.PI - 1.1 * Math.PI;
|
8616 | arrowPoint = pointT;
|
8617 | }
|
8618 | else {
|
8619 | const pos = this.options.selfReference.angle / (2 * Math.PI);
|
8620 | arrowPoint = this._pointOnCircle(x, y, radius, pos);
|
8621 | angle = pos * -2 * Math.PI + 1.5 * Math.PI + 0.1 * Math.PI;
|
8622 | }
|
8623 | }
|
8624 | const xi = arrowPoint.x - length * 0.9 * Math.cos(angle);
|
8625 | const yi = arrowPoint.y - length * 0.9 * Math.sin(angle);
|
8626 | const arrowCore = { x: xi, y: yi };
|
8627 | return {
|
8628 | point: arrowPoint,
|
8629 | core: arrowCore,
|
8630 | angle: angle,
|
8631 | length: length,
|
8632 | type: type,
|
8633 | };
|
8634 | }
|
8635 |
|
8636 | drawArrowHead(ctx, values, _selected, _hover, arrowData) {
|
8637 |
|
8638 | ctx.strokeStyle = this.getColor(ctx, values);
|
8639 | ctx.fillStyle = ctx.strokeStyle;
|
8640 | ctx.lineWidth = values.width;
|
8641 | const canFill = EndPoints.draw(ctx, arrowData);
|
8642 | if (canFill) {
|
8643 |
|
8644 | this.enableShadow(ctx, values);
|
8645 | ctx.fill();
|
8646 |
|
8647 | this.disableShadow(ctx, values);
|
8648 | }
|
8649 | }
|
8650 | |
8651 |
|
8652 |
|
8653 |
|
8654 |
|
8655 |
|
8656 | enableShadow(ctx, values) {
|
8657 | if (values.shadow === true) {
|
8658 | ctx.shadowColor = values.shadowColor;
|
8659 | ctx.shadowBlur = values.shadowSize;
|
8660 | ctx.shadowOffsetX = values.shadowX;
|
8661 | ctx.shadowOffsetY = values.shadowY;
|
8662 | }
|
8663 | }
|
8664 | |
8665 |
|
8666 |
|
8667 |
|
8668 |
|
8669 |
|
8670 | disableShadow(ctx, values) {
|
8671 | if (values.shadow === true) {
|
8672 | ctx.shadowColor = "rgba(0,0,0,0)";
|
8673 | ctx.shadowBlur = 0;
|
8674 | ctx.shadowOffsetX = 0;
|
8675 | ctx.shadowOffsetY = 0;
|
8676 | }
|
8677 | }
|
8678 | |
8679 |
|
8680 |
|
8681 |
|
8682 |
|
8683 |
|
8684 | drawBackground(ctx, values) {
|
8685 | if (values.background !== false) {
|
8686 |
|
8687 | const origCtxAttr = {
|
8688 | strokeStyle: ctx.strokeStyle,
|
8689 | lineWidth: ctx.lineWidth,
|
8690 | dashes: ctx.dashes,
|
8691 | };
|
8692 | ctx.strokeStyle = values.backgroundColor;
|
8693 | ctx.lineWidth = values.backgroundSize;
|
8694 | this.setStrokeDashed(ctx, values.backgroundDashes);
|
8695 | ctx.stroke();
|
8696 |
|
8697 | ctx.strokeStyle = origCtxAttr.strokeStyle;
|
8698 | ctx.lineWidth = origCtxAttr.lineWidth;
|
8699 | ctx.dashes = origCtxAttr.dashes;
|
8700 | this.setStrokeDashed(ctx, values.dashes);
|
8701 | }
|
8702 | }
|
8703 | |
8704 |
|
8705 |
|
8706 |
|
8707 |
|
8708 |
|
8709 | setStrokeDashed(ctx, dashes) {
|
8710 | if (dashes !== false) {
|
8711 | if (ctx.setLineDash !== undefined) {
|
8712 | const pattern = Array.isArray(dashes) ? dashes : [5, 5];
|
8713 | ctx.setLineDash(pattern);
|
8714 | }
|
8715 | else {
|
8716 | console.warn("setLineDash is not supported in this browser. The dashed stroke cannot be used.");
|
8717 | }
|
8718 | }
|
8719 | else {
|
8720 | if (ctx.setLineDash !== undefined) {
|
8721 | ctx.setLineDash([]);
|
8722 | }
|
8723 | else {
|
8724 | console.warn("setLineDash is not supported in this browser. The dashed stroke cannot be used.");
|
8725 | }
|
8726 | }
|
8727 | }
|
8728 | }
|
8729 |
|
8730 |
|
8731 |
|
8732 |
|
8733 |
|
8734 | class BezierEdgeBase extends EdgeBase {
|
8735 | |
8736 |
|
8737 |
|
8738 |
|
8739 |
|
8740 |
|
8741 |
|
8742 | constructor(options, body, labelModule) {
|
8743 | super(options, body, labelModule);
|
8744 | }
|
8745 | |
8746 |
|
8747 |
|
8748 |
|
8749 |
|
8750 |
|
8751 |
|
8752 |
|
8753 |
|
8754 |
|
8755 |
|
8756 |
|
8757 | _findBorderPositionBezier(nearNode, ctx, viaNode = this._getViaCoordinates()) {
|
8758 | const maxIterations = 10;
|
8759 | const threshold = 0.2;
|
8760 | let from = false;
|
8761 | let high = 1;
|
8762 | let low = 0;
|
8763 | let node = this.to;
|
8764 | let pos;
|
8765 | let middle;
|
8766 | let endPointOffset = this.options.endPointOffset
|
8767 | ? this.options.endPointOffset.to
|
8768 | : 0;
|
8769 | if (nearNode.id === this.from.id) {
|
8770 | node = this.from;
|
8771 | from = true;
|
8772 | endPointOffset = this.options.endPointOffset
|
8773 | ? this.options.endPointOffset.from
|
8774 | : 0;
|
8775 | }
|
8776 | if (this.options.arrowStrikethrough === false) {
|
8777 | endPointOffset = 0;
|
8778 | }
|
8779 | let iteration = 0;
|
8780 | do {
|
8781 | middle = (low + high) * 0.5;
|
8782 | pos = this.getPoint(middle, viaNode);
|
8783 | const angle = Math.atan2(node.y - pos.y, node.x - pos.x);
|
8784 | const distanceToBorder = node.distanceToBorder(ctx, angle) + endPointOffset;
|
8785 | const distanceToPoint = Math.sqrt(Math.pow(pos.x - node.x, 2) + Math.pow(pos.y - node.y, 2));
|
8786 | const difference = distanceToBorder - distanceToPoint;
|
8787 | if (Math.abs(difference) < threshold) {
|
8788 | break;
|
8789 | }
|
8790 | else if (difference < 0) {
|
8791 |
|
8792 | if (from === false) {
|
8793 | low = middle;
|
8794 | }
|
8795 | else {
|
8796 | high = middle;
|
8797 | }
|
8798 | }
|
8799 | else {
|
8800 | if (from === false) {
|
8801 | high = middle;
|
8802 | }
|
8803 | else {
|
8804 | low = middle;
|
8805 | }
|
8806 | }
|
8807 | ++iteration;
|
8808 | } while (low <= high && iteration < maxIterations);
|
8809 | return {
|
8810 | ...pos,
|
8811 | t: middle,
|
8812 | };
|
8813 | }
|
8814 | |
8815 |
|
8816 |
|
8817 |
|
8818 |
|
8819 |
|
8820 |
|
8821 |
|
8822 |
|
8823 |
|
8824 |
|
8825 |
|
8826 |
|
8827 |
|
8828 |
|
8829 |
|
8830 | _getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via) {
|
8831 |
|
8832 | let minDistance = 1e9;
|
8833 | let distance;
|
8834 | let i, t, x, y;
|
8835 | let lastX = x1;
|
8836 | let lastY = y1;
|
8837 | for (i = 1; i < 10; i++) {
|
8838 | t = 0.1 * i;
|
8839 | x =
|
8840 | Math.pow(1 - t, 2) * x1 + 2 * t * (1 - t) * via.x + Math.pow(t, 2) * x2;
|
8841 | y =
|
8842 | Math.pow(1 - t, 2) * y1 + 2 * t * (1 - t) * via.y + Math.pow(t, 2) * y2;
|
8843 | if (i > 0) {
|
8844 | distance = this._getDistanceToLine(lastX, lastY, x, y, x3, y3);
|
8845 | minDistance = distance < minDistance ? distance : minDistance;
|
8846 | }
|
8847 | lastX = x;
|
8848 | lastY = y;
|
8849 | }
|
8850 | return minDistance;
|
8851 | }
|
8852 | |
8853 |
|
8854 |
|
8855 |
|
8856 |
|
8857 |
|
8858 |
|
8859 |
|
8860 |
|
8861 |
|
8862 |
|
8863 |
|
8864 | _bezierCurve(ctx, values, viaNode1, viaNode2) {
|
8865 | ctx.beginPath();
|
8866 | ctx.moveTo(this.fromPoint.x, this.fromPoint.y);
|
8867 | if (viaNode1 != null && viaNode1.x != null) {
|
8868 | if (viaNode2 != null && viaNode2.x != null) {
|
8869 | ctx.bezierCurveTo(viaNode1.x, viaNode1.y, viaNode2.x, viaNode2.y, this.toPoint.x, this.toPoint.y);
|
8870 | }
|
8871 | else {
|
8872 | ctx.quadraticCurveTo(viaNode1.x, viaNode1.y, this.toPoint.x, this.toPoint.y);
|
8873 | }
|
8874 | }
|
8875 | else {
|
8876 |
|
8877 | ctx.lineTo(this.toPoint.x, this.toPoint.y);
|
8878 | }
|
8879 |
|
8880 | this.drawBackground(ctx, values);
|
8881 |
|
8882 | this.enableShadow(ctx, values);
|
8883 | ctx.stroke();
|
8884 | this.disableShadow(ctx, values);
|
8885 | }
|
8886 |
|
8887 | getViaNode() {
|
8888 | return this._getViaCoordinates();
|
8889 | }
|
8890 | }
|
8891 |
|
8892 |
|
8893 |
|
8894 |
|
8895 |
|
8896 |
|
8897 |
|
8898 |
|
8899 | class BezierEdgeDynamic extends BezierEdgeBase {
|
8900 | |
8901 |
|
8902 |
|
8903 |
|
8904 |
|
8905 |
|
8906 |
|
8907 | constructor(options, body, labelModule) {
|
8908 |
|
8909 | super(options, body, labelModule);
|
8910 | this.via = this.via;
|
8911 | this._boundFunction = () => {
|
8912 | this.positionBezierNode();
|
8913 | };
|
8914 | this._body.emitter.on("_repositionBezierNodes", this._boundFunction);
|
8915 | }
|
8916 |
|
8917 | setOptions(options) {
|
8918 | super.setOptions(options);
|
8919 |
|
8920 | let physicsChange = false;
|
8921 | if (this.options.physics !== options.physics) {
|
8922 | physicsChange = true;
|
8923 | }
|
8924 |
|
8925 | this.options = options;
|
8926 | this.id = this.options.id;
|
8927 | this.from = this._body.nodes[this.options.from];
|
8928 | this.to = this._body.nodes[this.options.to];
|
8929 |
|
8930 | this.setupSupportNode();
|
8931 | this.connect();
|
8932 |
|
8933 | if (physicsChange === true) {
|
8934 | this.via.setOptions({ physics: this.options.physics });
|
8935 | this.positionBezierNode();
|
8936 | }
|
8937 | }
|
8938 |
|
8939 | connect() {
|
8940 | this.from = this._body.nodes[this.options.from];
|
8941 | this.to = this._body.nodes[this.options.to];
|
8942 | if (this.from === undefined ||
|
8943 | this.to === undefined ||
|
8944 | this.options.physics === false) {
|
8945 | this.via.setOptions({ physics: false });
|
8946 | }
|
8947 | else {
|
8948 |
|
8949 | if (this.from.id === this.to.id) {
|
8950 | this.via.setOptions({ physics: false });
|
8951 | }
|
8952 | else {
|
8953 | this.via.setOptions({ physics: true });
|
8954 | }
|
8955 | }
|
8956 | }
|
8957 |
|
8958 | cleanup() {
|
8959 | this._body.emitter.off("_repositionBezierNodes", this._boundFunction);
|
8960 | if (this.via !== undefined) {
|
8961 | delete this._body.nodes[this.via.id];
|
8962 | this.via = undefined;
|
8963 | return true;
|
8964 | }
|
8965 | return false;
|
8966 | }
|
8967 | |
8968 |
|
8969 |
|
8970 |
|
8971 |
|
8972 |
|
8973 |
|
8974 |
|
8975 |
|
8976 |
|
8977 | setupSupportNode() {
|
8978 | if (this.via === undefined) {
|
8979 | const nodeId = "edgeId:" + this.id;
|
8980 | const node = this._body.functions.createNode({
|
8981 | id: nodeId,
|
8982 | shape: "circle",
|
8983 | physics: true,
|
8984 | hidden: true,
|
8985 | });
|
8986 | this._body.nodes[nodeId] = node;
|
8987 | this.via = node;
|
8988 | this.via.parentEdgeId = this.id;
|
8989 | this.positionBezierNode();
|
8990 | }
|
8991 | }
|
8992 | |
8993 |
|
8994 |
|
8995 | positionBezierNode() {
|
8996 | if (this.via !== undefined &&
|
8997 | this.from !== undefined &&
|
8998 | this.to !== undefined) {
|
8999 | this.via.x = 0.5 * (this.from.x + this.to.x);
|
9000 | this.via.y = 0.5 * (this.from.y + this.to.y);
|
9001 | }
|
9002 | else if (this.via !== undefined) {
|
9003 | this.via.x = 0;
|
9004 | this.via.y = 0;
|
9005 | }
|
9006 | }
|
9007 |
|
9008 | _line(ctx, values, viaNode) {
|
9009 | this._bezierCurve(ctx, values, viaNode);
|
9010 | }
|
9011 |
|
9012 | _getViaCoordinates() {
|
9013 | return this.via;
|
9014 | }
|
9015 |
|
9016 | getViaNode() {
|
9017 | return this.via;
|
9018 | }
|
9019 |
|
9020 | getPoint(position, viaNode = this.via) {
|
9021 | if (this.from === this.to) {
|
9022 | const [cx, cy, cr] = this._getCircleData();
|
9023 | const a = 2 * Math.PI * (1 - position);
|
9024 | return {
|
9025 | x: cx + cr * Math.sin(a),
|
9026 | y: cy + cr - cr * (1 - Math.cos(a)),
|
9027 | };
|
9028 | }
|
9029 | else {
|
9030 | return {
|
9031 | x: Math.pow(1 - position, 2) * this.fromPoint.x +
|
9032 | 2 * position * (1 - position) * viaNode.x +
|
9033 | Math.pow(position, 2) * this.toPoint.x,
|
9034 | y: Math.pow(1 - position, 2) * this.fromPoint.y +
|
9035 | 2 * position * (1 - position) * viaNode.y +
|
9036 | Math.pow(position, 2) * this.toPoint.y,
|
9037 | };
|
9038 | }
|
9039 | }
|
9040 |
|
9041 | _findBorderPosition(nearNode, ctx) {
|
9042 | return this._findBorderPositionBezier(nearNode, ctx, this.via);
|
9043 | }
|
9044 |
|
9045 | _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
|
9046 |
|
9047 | return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, this.via);
|
9048 | }
|
9049 | }
|
9050 |
|
9051 |
|
9052 |
|
9053 |
|
9054 | class BezierEdgeStatic extends BezierEdgeBase {
|
9055 | |
9056 |
|
9057 |
|
9058 |
|
9059 |
|
9060 |
|
9061 |
|
9062 | constructor(options, body, labelModule) {
|
9063 | super(options, body, labelModule);
|
9064 | }
|
9065 |
|
9066 | _line(ctx, values, viaNode) {
|
9067 | this._bezierCurve(ctx, values, viaNode);
|
9068 | }
|
9069 |
|
9070 | getViaNode() {
|
9071 | return this._getViaCoordinates();
|
9072 | }
|
9073 | |
9074 |
|
9075 |
|
9076 |
|
9077 |
|
9078 |
|
9079 |
|
9080 |
|
9081 | _getViaCoordinates() {
|
9082 |
|
9083 | const factor = this.options.smooth.roundness;
|
9084 | const type = this.options.smooth.type;
|
9085 | let dx = Math.abs(this.from.x - this.to.x);
|
9086 | let dy = Math.abs(this.from.y - this.to.y);
|
9087 | if (type === "discrete" || type === "diagonalCross") {
|
9088 | let stepX;
|
9089 | let stepY;
|
9090 | if (dx <= dy) {
|
9091 | stepX = stepY = factor * dy;
|
9092 | }
|
9093 | else {
|
9094 | stepX = stepY = factor * dx;
|
9095 | }
|
9096 | if (this.from.x > this.to.x) {
|
9097 | stepX = -stepX;
|
9098 | }
|
9099 | if (this.from.y >= this.to.y) {
|
9100 | stepY = -stepY;
|
9101 | }
|
9102 | let xVia = this.from.x + stepX;
|
9103 | let yVia = this.from.y + stepY;
|
9104 | if (type === "discrete") {
|
9105 | if (dx <= dy) {
|
9106 | xVia = dx < factor * dy ? this.from.x : xVia;
|
9107 | }
|
9108 | else {
|
9109 | yVia = dy < factor * dx ? this.from.y : yVia;
|
9110 | }
|
9111 | }
|
9112 | return { x: xVia, y: yVia };
|
9113 | }
|
9114 | else if (type === "straightCross") {
|
9115 | let stepX = (1 - factor) * dx;
|
9116 | let stepY = (1 - factor) * dy;
|
9117 | if (dx <= dy) {
|
9118 |
|
9119 | stepX = 0;
|
9120 | if (this.from.y < this.to.y) {
|
9121 | stepY = -stepY;
|
9122 | }
|
9123 | }
|
9124 | else {
|
9125 |
|
9126 | if (this.from.x < this.to.x) {
|
9127 | stepX = -stepX;
|
9128 | }
|
9129 | stepY = 0;
|
9130 | }
|
9131 | return {
|
9132 | x: this.to.x + stepX,
|
9133 | y: this.to.y + stepY,
|
9134 | };
|
9135 | }
|
9136 | else if (type === "horizontal") {
|
9137 | let stepX = (1 - factor) * dx;
|
9138 | if (this.from.x < this.to.x) {
|
9139 | stepX = -stepX;
|
9140 | }
|
9141 | return {
|
9142 | x: this.to.x + stepX,
|
9143 | y: this.from.y,
|
9144 | };
|
9145 | }
|
9146 | else if (type === "vertical") {
|
9147 | let stepY = (1 - factor) * dy;
|
9148 | if (this.from.y < this.to.y) {
|
9149 | stepY = -stepY;
|
9150 | }
|
9151 | return {
|
9152 | x: this.from.x,
|
9153 | y: this.to.y + stepY,
|
9154 | };
|
9155 | }
|
9156 | else if (type === "curvedCW") {
|
9157 | dx = this.to.x - this.from.x;
|
9158 | dy = this.from.y - this.to.y;
|
9159 | const radius = Math.sqrt(dx * dx + dy * dy);
|
9160 | const pi = Math.PI;
|
9161 | const originalAngle = Math.atan2(dy, dx);
|
9162 | const myAngle = (originalAngle + (factor * 0.5 + 0.5) * pi) % (2 * pi);
|
9163 | return {
|
9164 | x: this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle),
|
9165 | y: this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle),
|
9166 | };
|
9167 | }
|
9168 | else if (type === "curvedCCW") {
|
9169 | dx = this.to.x - this.from.x;
|
9170 | dy = this.from.y - this.to.y;
|
9171 | const radius = Math.sqrt(dx * dx + dy * dy);
|
9172 | const pi = Math.PI;
|
9173 | const originalAngle = Math.atan2(dy, dx);
|
9174 | const myAngle = (originalAngle + (-factor * 0.5 + 0.5) * pi) % (2 * pi);
|
9175 | return {
|
9176 | x: this.from.x + (factor * 0.5 + 0.5) * radius * Math.sin(myAngle),
|
9177 | y: this.from.y + (factor * 0.5 + 0.5) * radius * Math.cos(myAngle),
|
9178 | };
|
9179 | }
|
9180 | else {
|
9181 |
|
9182 | let stepX;
|
9183 | let stepY;
|
9184 | if (dx <= dy) {
|
9185 | stepX = stepY = factor * dy;
|
9186 | }
|
9187 | else {
|
9188 | stepX = stepY = factor * dx;
|
9189 | }
|
9190 | if (this.from.x > this.to.x) {
|
9191 | stepX = -stepX;
|
9192 | }
|
9193 | if (this.from.y >= this.to.y) {
|
9194 | stepY = -stepY;
|
9195 | }
|
9196 | let xVia = this.from.x + stepX;
|
9197 | let yVia = this.from.y + stepY;
|
9198 | if (dx <= dy) {
|
9199 | if (this.from.x <= this.to.x) {
|
9200 | xVia = this.to.x < xVia ? this.to.x : xVia;
|
9201 | }
|
9202 | else {
|
9203 | xVia = this.to.x > xVia ? this.to.x : xVia;
|
9204 | }
|
9205 | }
|
9206 | else {
|
9207 | if (this.from.y >= this.to.y) {
|
9208 | yVia = this.to.y > yVia ? this.to.y : yVia;
|
9209 | }
|
9210 | else {
|
9211 | yVia = this.to.y < yVia ? this.to.y : yVia;
|
9212 | }
|
9213 | }
|
9214 | return { x: xVia, y: yVia };
|
9215 | }
|
9216 | }
|
9217 |
|
9218 | _findBorderPosition(nearNode, ctx, options = {}) {
|
9219 | return this._findBorderPositionBezier(nearNode, ctx, options.via);
|
9220 | }
|
9221 |
|
9222 | _getDistanceToEdge(x1, y1, x2, y2, x3, y3, viaNode = this._getViaCoordinates()) {
|
9223 |
|
9224 | return this._getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, viaNode);
|
9225 | }
|
9226 |
|
9227 | getPoint(position, viaNode = this._getViaCoordinates()) {
|
9228 | const t = position;
|
9229 | const x = Math.pow(1 - t, 2) * this.fromPoint.x +
|
9230 | 2 * t * (1 - t) * viaNode.x +
|
9231 | Math.pow(t, 2) * this.toPoint.x;
|
9232 | const y = Math.pow(1 - t, 2) * this.fromPoint.y +
|
9233 | 2 * t * (1 - t) * viaNode.y +
|
9234 | Math.pow(t, 2) * this.toPoint.y;
|
9235 | return { x: x, y: y };
|
9236 | }
|
9237 | }
|
9238 |
|
9239 |
|
9240 |
|
9241 |
|
9242 |
|
9243 |
|
9244 |
|
9245 | class CubicBezierEdgeBase extends BezierEdgeBase {
|
9246 | |
9247 |
|
9248 |
|
9249 |
|
9250 |
|
9251 |
|
9252 |
|
9253 | constructor(options, body, labelModule) {
|
9254 | super(options, body, labelModule);
|
9255 | }
|
9256 | |
9257 |
|
9258 |
|
9259 |
|
9260 |
|
9261 |
|
9262 |
|
9263 |
|
9264 |
|
9265 |
|
9266 |
|
9267 |
|
9268 |
|
9269 |
|
9270 |
|
9271 |
|
9272 |
|
9273 |
|
9274 | _getDistanceToBezierEdge2(x1, y1, x2, y2, x3, y3, via1, via2) {
|
9275 |
|
9276 | let minDistance = 1e9;
|
9277 | let lastX = x1;
|
9278 | let lastY = y1;
|
9279 | const vec = [0, 0, 0, 0];
|
9280 | for (let i = 1; i < 10; i++) {
|
9281 | const t = 0.1 * i;
|
9282 | vec[0] = Math.pow(1 - t, 3);
|
9283 | vec[1] = 3 * t * Math.pow(1 - t, 2);
|
9284 | vec[2] = 3 * Math.pow(t, 2) * (1 - t);
|
9285 | vec[3] = Math.pow(t, 3);
|
9286 | const x = vec[0] * x1 + vec[1] * via1.x + vec[2] * via2.x + vec[3] * x2;
|
9287 | const y = vec[0] * y1 + vec[1] * via1.y + vec[2] * via2.y + vec[3] * y2;
|
9288 | if (i > 0) {
|
9289 | const distance = this._getDistanceToLine(lastX, lastY, x, y, x3, y3);
|
9290 | minDistance = distance < minDistance ? distance : minDistance;
|
9291 | }
|
9292 | lastX = x;
|
9293 | lastY = y;
|
9294 | }
|
9295 | return minDistance;
|
9296 | }
|
9297 | }
|
9298 |
|
9299 |
|
9300 |
|
9301 |
|
9302 | class CubicBezierEdge extends CubicBezierEdgeBase {
|
9303 | |
9304 |
|
9305 |
|
9306 |
|
9307 |
|
9308 |
|
9309 |
|
9310 | constructor(options, body, labelModule) {
|
9311 | super(options, body, labelModule);
|
9312 | }
|
9313 |
|
9314 | _line(ctx, values, viaNodes) {
|
9315 |
|
9316 | const via1 = viaNodes[0];
|
9317 | const via2 = viaNodes[1];
|
9318 | this._bezierCurve(ctx, values, via1, via2);
|
9319 | }
|
9320 | |
9321 |
|
9322 |
|
9323 |
|
9324 |
|
9325 | _getViaCoordinates() {
|
9326 | const dx = this.from.x - this.to.x;
|
9327 | const dy = this.from.y - this.to.y;
|
9328 | let x1;
|
9329 | let y1;
|
9330 | let x2;
|
9331 | let y2;
|
9332 | const roundness = this.options.smooth.roundness;
|
9333 |
|
9334 | if ((Math.abs(dx) > Math.abs(dy) ||
|
9335 | this.options.smooth.forceDirection === true ||
|
9336 | this.options.smooth.forceDirection === "horizontal") &&
|
9337 | this.options.smooth.forceDirection !== "vertical") {
|
9338 | y1 = this.from.y;
|
9339 | y2 = this.to.y;
|
9340 | x1 = this.from.x - roundness * dx;
|
9341 | x2 = this.to.x + roundness * dx;
|
9342 | }
|
9343 | else {
|
9344 | y1 = this.from.y - roundness * dy;
|
9345 | y2 = this.to.y + roundness * dy;
|
9346 | x1 = this.from.x;
|
9347 | x2 = this.to.x;
|
9348 | }
|
9349 | return [
|
9350 | { x: x1, y: y1 },
|
9351 | { x: x2, y: y2 },
|
9352 | ];
|
9353 | }
|
9354 |
|
9355 | getViaNode() {
|
9356 | return this._getViaCoordinates();
|
9357 | }
|
9358 |
|
9359 | _findBorderPosition(nearNode, ctx) {
|
9360 | return this._findBorderPositionBezier(nearNode, ctx);
|
9361 | }
|
9362 |
|
9363 | _getDistanceToEdge(x1, y1, x2, y2, x3, y3, [via1, via2] = this._getViaCoordinates()) {
|
9364 |
|
9365 | return this._getDistanceToBezierEdge2(x1, y1, x2, y2, x3, y3, via1, via2);
|
9366 | }
|
9367 |
|
9368 | getPoint(position, [via1, via2] = this._getViaCoordinates()) {
|
9369 | const t = position;
|
9370 | const vec = [
|
9371 | Math.pow(1 - t, 3),
|
9372 | 3 * t * Math.pow(1 - t, 2),
|
9373 | 3 * Math.pow(t, 2) * (1 - t),
|
9374 | Math.pow(t, 3),
|
9375 | ];
|
9376 | const x = vec[0] * this.fromPoint.x +
|
9377 | vec[1] * via1.x +
|
9378 | vec[2] * via2.x +
|
9379 | vec[3] * this.toPoint.x;
|
9380 | const y = vec[0] * this.fromPoint.y +
|
9381 | vec[1] * via1.y +
|
9382 | vec[2] * via2.y +
|
9383 | vec[3] * this.toPoint.y;
|
9384 | return { x: x, y: y };
|
9385 | }
|
9386 | }
|
9387 |
|
9388 |
|
9389 |
|
9390 |
|
9391 | class StraightEdge extends EdgeBase {
|
9392 | |
9393 |
|
9394 |
|
9395 |
|
9396 |
|
9397 |
|
9398 |
|
9399 | constructor(options, body, labelModule) {
|
9400 | super(options, body, labelModule);
|
9401 | }
|
9402 |
|
9403 | _line(ctx, values) {
|
9404 |
|
9405 | ctx.beginPath();
|
9406 | ctx.moveTo(this.fromPoint.x, this.fromPoint.y);
|
9407 | ctx.lineTo(this.toPoint.x, this.toPoint.y);
|
9408 |
|
9409 | this.enableShadow(ctx, values);
|
9410 | ctx.stroke();
|
9411 | this.disableShadow(ctx, values);
|
9412 | }
|
9413 |
|
9414 | getViaNode() {
|
9415 | return undefined;
|
9416 | }
|
9417 |
|
9418 | getPoint(position) {
|
9419 | return {
|
9420 | x: (1 - position) * this.fromPoint.x + position * this.toPoint.x,
|
9421 | y: (1 - position) * this.fromPoint.y + position * this.toPoint.y,
|
9422 | };
|
9423 | }
|
9424 |
|
9425 | _findBorderPosition(nearNode, ctx) {
|
9426 | let node1 = this.to;
|
9427 | let node2 = this.from;
|
9428 | if (nearNode.id === this.from.id) {
|
9429 | node1 = this.from;
|
9430 | node2 = this.to;
|
9431 | }
|
9432 | const angle = Math.atan2(node1.y - node2.y, node1.x - node2.x);
|
9433 | const dx = node1.x - node2.x;
|
9434 | const dy = node1.y - node2.y;
|
9435 | const edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
|
9436 | const toBorderDist = nearNode.distanceToBorder(ctx, angle);
|
9437 | const toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
|
9438 | return {
|
9439 | x: (1 - toBorderPoint) * node2.x + toBorderPoint * node1.x,
|
9440 | y: (1 - toBorderPoint) * node2.y + toBorderPoint * node1.y,
|
9441 | t: 0,
|
9442 | };
|
9443 | }
|
9444 |
|
9445 | _getDistanceToEdge(x1, y1, x2, y2, x3, y3) {
|
9446 |
|
9447 | return this._getDistanceToLine(x1, y1, x2, y2, x3, y3);
|
9448 | }
|
9449 | }
|
9450 |
|
9451 |
|
9452 |
|
9453 |
|
9454 | class Edge {
|
9455 | |
9456 |
|
9457 |
|
9458 |
|
9459 |
|
9460 |
|
9461 |
|
9462 | constructor(options, body, imagelist, globalOptions, defaultOptions) {
|
9463 | if (body === undefined) {
|
9464 | throw new Error("No body provided");
|
9465 | }
|
9466 |
|
9467 |
|
9468 |
|
9469 |
|
9470 | this.options = bridgeObject(globalOptions);
|
9471 | this.globalOptions = globalOptions;
|
9472 | this.defaultOptions = defaultOptions;
|
9473 | this.body = body;
|
9474 | this.imagelist = imagelist;
|
9475 |
|
9476 |
|
9477 | this.id = undefined;
|
9478 | this.fromId = undefined;
|
9479 | this.toId = undefined;
|
9480 | this.selected = false;
|
9481 | this.hover = false;
|
9482 | this.labelDirty = true;
|
9483 |
|
9484 | this.baseWidth = this.options.width;
|
9485 | this.baseFontSize = this.options.font.size;
|
9486 |
|
9487 | this.from = undefined;
|
9488 | this.to = undefined;
|
9489 |
|
9490 | this.edgeType = undefined;
|
9491 |
|
9492 | this.connected = false;
|
9493 |
|
9494 | this.labelModule = new Label(
|
9495 | this.body,
|
9496 | this.options,
|
9497 | true
|
9498 | );
|
9499 | this.setOptions(options);
|
9500 | }
|
9501 |
|
9502 | |
9503 |
|
9504 |
|
9505 |
|
9506 |
|
9507 |
|
9508 | setOptions(options) {
|
9509 | if (!options) {
|
9510 | return;
|
9511 | }
|
9512 |
|
9513 |
|
9514 | let affectsLayout =
|
9515 | (typeof options.physics !== "undefined" &&
|
9516 | this.options.physics !== options.physics) ||
|
9517 | (typeof options.hidden !== "undefined" &&
|
9518 | (this.options.hidden || false) !== (options.hidden || false)) ||
|
9519 | (typeof options.from !== "undefined" &&
|
9520 | this.options.from !== options.from) ||
|
9521 | (typeof options.to !== "undefined" && this.options.to !== options.to);
|
9522 |
|
9523 | Edge.parseOptions(this.options, options, true, this.globalOptions);
|
9524 |
|
9525 | if (options.id !== undefined) {
|
9526 | this.id = options.id;
|
9527 | }
|
9528 | if (options.from !== undefined) {
|
9529 | this.fromId = options.from;
|
9530 | }
|
9531 | if (options.to !== undefined) {
|
9532 | this.toId = options.to;
|
9533 | }
|
9534 | if (options.title !== undefined) {
|
9535 | this.title = options.title;
|
9536 | }
|
9537 | if (options.value !== undefined) {
|
9538 | options.value = parseFloat(options.value);
|
9539 | }
|
9540 |
|
9541 | const pile = [options, this.options, this.defaultOptions];
|
9542 | this.chooser = choosify("edge", pile);
|
9543 |
|
9544 |
|
9545 | this.updateLabelModule(options);
|
9546 |
|
9547 |
|
9548 | affectsLayout = this.updateEdgeType() || affectsLayout;
|
9549 |
|
9550 |
|
9551 | this._setInteractionWidths();
|
9552 |
|
9553 |
|
9554 | this.connect();
|
9555 |
|
9556 | return affectsLayout;
|
9557 | }
|
9558 |
|
9559 | |
9560 |
|
9561 |
|
9562 |
|
9563 |
|
9564 |
|
9565 |
|
9566 |
|
9567 | static parseOptions(
|
9568 | parentOptions,
|
9569 | newOptions,
|
9570 | allowDeletion = false,
|
9571 | globalOptions = {},
|
9572 | copyFromGlobals = false
|
9573 | ) {
|
9574 | const fields = [
|
9575 | "endPointOffset",
|
9576 | "arrowStrikethrough",
|
9577 | "id",
|
9578 | "from",
|
9579 | "hidden",
|
9580 | "hoverWidth",
|
9581 | "labelHighlightBold",
|
9582 | "length",
|
9583 | "line",
|
9584 | "opacity",
|
9585 | "physics",
|
9586 | "scaling",
|
9587 | "selectionWidth",
|
9588 | "selfReferenceSize",
|
9589 | "selfReference",
|
9590 | "to",
|
9591 | "title",
|
9592 | "value",
|
9593 | "width",
|
9594 | "font",
|
9595 | "chosen",
|
9596 | "widthConstraint",
|
9597 | ];
|
9598 |
|
9599 |
|
9600 | selectiveDeepExtend(fields, parentOptions, newOptions, allowDeletion);
|
9601 |
|
9602 |
|
9603 | if (
|
9604 | newOptions.endPointOffset !== undefined &&
|
9605 | newOptions.endPointOffset.from !== undefined
|
9606 | ) {
|
9607 | if (Number.isFinite(newOptions.endPointOffset.from)) {
|
9608 | parentOptions.endPointOffset.from = newOptions.endPointOffset.from;
|
9609 | } else {
|
9610 | parentOptions.endPointOffset.from =
|
9611 | globalOptions.endPointOffset.from !== undefined
|
9612 | ? globalOptions.endPointOffset.from
|
9613 | : 0;
|
9614 | console.error("endPointOffset.from is not a valid number");
|
9615 | }
|
9616 | }
|
9617 |
|
9618 | if (
|
9619 | newOptions.endPointOffset !== undefined &&
|
9620 | newOptions.endPointOffset.to !== undefined
|
9621 | ) {
|
9622 | if (Number.isFinite(newOptions.endPointOffset.to)) {
|
9623 | parentOptions.endPointOffset.to = newOptions.endPointOffset.to;
|
9624 | } else {
|
9625 | parentOptions.endPointOffset.to =
|
9626 | globalOptions.endPointOffset.to !== undefined
|
9627 | ? globalOptions.endPointOffset.to
|
9628 | : 0;
|
9629 | console.error("endPointOffset.to is not a valid number");
|
9630 | }
|
9631 | }
|
9632 |
|
9633 |
|
9634 | if (isValidLabel(newOptions.label)) {
|
9635 | parentOptions.label = newOptions.label;
|
9636 | } else if (!isValidLabel(parentOptions.label)) {
|
9637 | parentOptions.label = undefined;
|
9638 | }
|
9639 |
|
9640 | mergeOptions(parentOptions, newOptions, "smooth", globalOptions);
|
9641 | mergeOptions(parentOptions, newOptions, "shadow", globalOptions);
|
9642 | mergeOptions(parentOptions, newOptions, "background", globalOptions);
|
9643 |
|
9644 | if (newOptions.dashes !== undefined && newOptions.dashes !== null) {
|
9645 | parentOptions.dashes = newOptions.dashes;
|
9646 | } else if (allowDeletion === true && newOptions.dashes === null) {
|
9647 | parentOptions.dashes = Object.create(globalOptions.dashes);
|
9648 | }
|
9649 |
|
9650 |
|
9651 | if (newOptions.scaling !== undefined && newOptions.scaling !== null) {
|
9652 | if (newOptions.scaling.min !== undefined) {
|
9653 | parentOptions.scaling.min = newOptions.scaling.min;
|
9654 | }
|
9655 | if (newOptions.scaling.max !== undefined) {
|
9656 | parentOptions.scaling.max = newOptions.scaling.max;
|
9657 | }
|
9658 | mergeOptions(
|
9659 | parentOptions.scaling,
|
9660 | newOptions.scaling,
|
9661 | "label",
|
9662 | globalOptions.scaling
|
9663 | );
|
9664 | } else if (allowDeletion === true && newOptions.scaling === null) {
|
9665 | parentOptions.scaling = Object.create(globalOptions.scaling);
|
9666 | }
|
9667 |
|
9668 |
|
9669 | if (newOptions.arrows !== undefined && newOptions.arrows !== null) {
|
9670 | if (typeof newOptions.arrows === "string") {
|
9671 | const arrows = newOptions.arrows.toLowerCase();
|
9672 | parentOptions.arrows.to.enabled = arrows.indexOf("to") != -1;
|
9673 | parentOptions.arrows.middle.enabled = arrows.indexOf("middle") != -1;
|
9674 | parentOptions.arrows.from.enabled = arrows.indexOf("from") != -1;
|
9675 | } else if (typeof newOptions.arrows === "object") {
|
9676 | mergeOptions(
|
9677 | parentOptions.arrows,
|
9678 | newOptions.arrows,
|
9679 | "to",
|
9680 | globalOptions.arrows
|
9681 | );
|
9682 | mergeOptions(
|
9683 | parentOptions.arrows,
|
9684 | newOptions.arrows,
|
9685 | "middle",
|
9686 | globalOptions.arrows
|
9687 | );
|
9688 | mergeOptions(
|
9689 | parentOptions.arrows,
|
9690 | newOptions.arrows,
|
9691 | "from",
|
9692 | globalOptions.arrows
|
9693 | );
|
9694 | } else {
|
9695 | throw new Error(
|
9696 | "The arrow newOptions can only be an object or a string. Refer to the documentation. You used:" +
|
9697 | JSON.stringify(newOptions.arrows)
|
9698 | );
|
9699 | }
|
9700 | } else if (allowDeletion === true && newOptions.arrows === null) {
|
9701 | parentOptions.arrows = Object.create(globalOptions.arrows);
|
9702 | }
|
9703 |
|
9704 |
|
9705 | if (newOptions.color !== undefined && newOptions.color !== null) {
|
9706 | const fromColor = isString(newOptions.color)
|
9707 | ? {
|
9708 | color: newOptions.color,
|
9709 | highlight: newOptions.color,
|
9710 | hover: newOptions.color,
|
9711 | inherit: false,
|
9712 | opacity: 1,
|
9713 | }
|
9714 | : newOptions.color;
|
9715 | const toColor = parentOptions.color;
|
9716 |
|
9717 |
|
9718 | if (copyFromGlobals) {
|
9719 | deepExtend(toColor, globalOptions.color, false, allowDeletion);
|
9720 | } else {
|
9721 |
|
9722 | for (const i in toColor) {
|
9723 | if (Object.prototype.hasOwnProperty.call(toColor, i)) {
|
9724 | delete toColor[i];
|
9725 | }
|
9726 | }
|
9727 | }
|
9728 |
|
9729 | if (isString(toColor)) {
|
9730 | toColor.color = toColor;
|
9731 | toColor.highlight = toColor;
|
9732 | toColor.hover = toColor;
|
9733 | toColor.inherit = false;
|
9734 | if (fromColor.opacity === undefined) {
|
9735 | toColor.opacity = 1.0;
|
9736 | }
|
9737 | } else {
|
9738 | let colorsDefined = false;
|
9739 | if (fromColor.color !== undefined) {
|
9740 | toColor.color = fromColor.color;
|
9741 | colorsDefined = true;
|
9742 | }
|
9743 | if (fromColor.highlight !== undefined) {
|
9744 | toColor.highlight = fromColor.highlight;
|
9745 | colorsDefined = true;
|
9746 | }
|
9747 | if (fromColor.hover !== undefined) {
|
9748 | toColor.hover = fromColor.hover;
|
9749 | colorsDefined = true;
|
9750 | }
|
9751 | if (fromColor.inherit !== undefined) {
|
9752 | toColor.inherit = fromColor.inherit;
|
9753 | }
|
9754 | if (fromColor.opacity !== undefined) {
|
9755 | toColor.opacity = Math.min(1, Math.max(0, fromColor.opacity));
|
9756 | }
|
9757 |
|
9758 | if (colorsDefined === true) {
|
9759 | toColor.inherit = false;
|
9760 | } else {
|
9761 | if (toColor.inherit === undefined) {
|
9762 | toColor.inherit = "from";
|
9763 | }
|
9764 | }
|
9765 | }
|
9766 | } else if (allowDeletion === true && newOptions.color === null) {
|
9767 | parentOptions.color = bridgeObject(globalOptions.color);
|
9768 | }
|
9769 |
|
9770 | if (allowDeletion === true && newOptions.font === null) {
|
9771 | parentOptions.font = bridgeObject(globalOptions.font);
|
9772 | }
|
9773 |
|
9774 | if (Object.prototype.hasOwnProperty.call(newOptions, "selfReferenceSize")) {
|
9775 | console.warn(
|
9776 | "The selfReferenceSize property has been deprecated. Please use selfReference property instead. The selfReference can be set like thise selfReference:{size:30, angle:Math.PI / 4}"
|
9777 | );
|
9778 | parentOptions.selfReference.size = newOptions.selfReferenceSize;
|
9779 | }
|
9780 | }
|
9781 |
|
9782 | |
9783 |
|
9784 |
|
9785 |
|
9786 | getFormattingValues() {
|
9787 | const toArrow =
|
9788 | this.options.arrows.to === true ||
|
9789 | this.options.arrows.to.enabled === true;
|
9790 | const fromArrow =
|
9791 | this.options.arrows.from === true ||
|
9792 | this.options.arrows.from.enabled === true;
|
9793 | const middleArrow =
|
9794 | this.options.arrows.middle === true ||
|
9795 | this.options.arrows.middle.enabled === true;
|
9796 | const inheritsColor = this.options.color.inherit;
|
9797 | const values = {
|
9798 | toArrow: toArrow,
|
9799 | toArrowScale: this.options.arrows.to.scaleFactor,
|
9800 | toArrowType: this.options.arrows.to.type,
|
9801 | toArrowSrc: this.options.arrows.to.src,
|
9802 | toArrowImageWidth: this.options.arrows.to.imageWidth,
|
9803 | toArrowImageHeight: this.options.arrows.to.imageHeight,
|
9804 | middleArrow: middleArrow,
|
9805 | middleArrowScale: this.options.arrows.middle.scaleFactor,
|
9806 | middleArrowType: this.options.arrows.middle.type,
|
9807 | middleArrowSrc: this.options.arrows.middle.src,
|
9808 | middleArrowImageWidth: this.options.arrows.middle.imageWidth,
|
9809 | middleArrowImageHeight: this.options.arrows.middle.imageHeight,
|
9810 | fromArrow: fromArrow,
|
9811 | fromArrowScale: this.options.arrows.from.scaleFactor,
|
9812 | fromArrowType: this.options.arrows.from.type,
|
9813 | fromArrowSrc: this.options.arrows.from.src,
|
9814 | fromArrowImageWidth: this.options.arrows.from.imageWidth,
|
9815 | fromArrowImageHeight: this.options.arrows.from.imageHeight,
|
9816 | arrowStrikethrough: this.options.arrowStrikethrough,
|
9817 | color: inheritsColor ? undefined : this.options.color.color,
|
9818 | inheritsColor: inheritsColor,
|
9819 | opacity: this.options.color.opacity,
|
9820 | hidden: this.options.hidden,
|
9821 | length: this.options.length,
|
9822 | shadow: this.options.shadow.enabled,
|
9823 | shadowColor: this.options.shadow.color,
|
9824 | shadowSize: this.options.shadow.size,
|
9825 | shadowX: this.options.shadow.x,
|
9826 | shadowY: this.options.shadow.y,
|
9827 | dashes: this.options.dashes,
|
9828 | width: this.options.width,
|
9829 | background: this.options.background.enabled,
|
9830 | backgroundColor: this.options.background.color,
|
9831 | backgroundSize: this.options.background.size,
|
9832 | backgroundDashes: this.options.background.dashes,
|
9833 | };
|
9834 | if (this.selected || this.hover) {
|
9835 | if (this.chooser === true) {
|
9836 | if (this.selected) {
|
9837 | const selectedWidth = this.options.selectionWidth;
|
9838 | if (typeof selectedWidth === "function") {
|
9839 | values.width = selectedWidth(values.width);
|
9840 | } else if (typeof selectedWidth === "number") {
|
9841 | values.width += selectedWidth;
|
9842 | }
|
9843 | values.width = Math.max(values.width, 0.3 / this.body.view.scale);
|
9844 | values.color = this.options.color.highlight;
|
9845 | values.shadow = this.options.shadow.enabled;
|
9846 | } else if (this.hover) {
|
9847 | const hoverWidth = this.options.hoverWidth;
|
9848 | if (typeof hoverWidth === "function") {
|
9849 | values.width = hoverWidth(values.width);
|
9850 | } else if (typeof hoverWidth === "number") {
|
9851 | values.width += hoverWidth;
|
9852 | }
|
9853 | values.width = Math.max(values.width, 0.3 / this.body.view.scale);
|
9854 | values.color = this.options.color.hover;
|
9855 | values.shadow = this.options.shadow.enabled;
|
9856 | }
|
9857 | } else if (typeof this.chooser === "function") {
|
9858 | this.chooser(values, this.options.id, this.selected, this.hover);
|
9859 | if (values.color !== undefined) {
|
9860 | values.inheritsColor = false;
|
9861 | }
|
9862 | if (values.shadow === false) {
|
9863 | if (
|
9864 | values.shadowColor !== this.options.shadow.color ||
|
9865 | values.shadowSize !== this.options.shadow.size ||
|
9866 | values.shadowX !== this.options.shadow.x ||
|
9867 | values.shadowY !== this.options.shadow.y
|
9868 | ) {
|
9869 | values.shadow = true;
|
9870 | }
|
9871 | }
|
9872 | }
|
9873 | } else {
|
9874 | values.shadow = this.options.shadow.enabled;
|
9875 | values.width = Math.max(values.width, 0.3 / this.body.view.scale);
|
9876 | }
|
9877 | return values;
|
9878 | }
|
9879 |
|
9880 | |
9881 |
|
9882 |
|
9883 |
|
9884 |
|
9885 | updateLabelModule(options) {
|
9886 | const pile = [
|
9887 | options,
|
9888 | this.options,
|
9889 | this.globalOptions,
|
9890 | this.defaultOptions,
|
9891 | ];
|
9892 |
|
9893 | this.labelModule.update(this.options, pile);
|
9894 |
|
9895 | if (this.labelModule.baseSize !== undefined) {
|
9896 | this.baseFontSize = this.labelModule.baseSize;
|
9897 | }
|
9898 | }
|
9899 |
|
9900 | |
9901 |
|
9902 |
|
9903 |
|
9904 |
|
9905 | updateEdgeType() {
|
9906 | const smooth = this.options.smooth;
|
9907 | let dataChanged = false;
|
9908 | let changeInType = true;
|
9909 | if (this.edgeType !== undefined) {
|
9910 | if (
|
9911 | (this.edgeType instanceof BezierEdgeDynamic &&
|
9912 | smooth.enabled === true &&
|
9913 | smooth.type === "dynamic") ||
|
9914 | (this.edgeType instanceof CubicBezierEdge &&
|
9915 | smooth.enabled === true &&
|
9916 | smooth.type === "cubicBezier") ||
|
9917 | (this.edgeType instanceof BezierEdgeStatic &&
|
9918 | smooth.enabled === true &&
|
9919 | smooth.type !== "dynamic" &&
|
9920 | smooth.type !== "cubicBezier") ||
|
9921 | (this.edgeType instanceof StraightEdge && smooth.type.enabled === false)
|
9922 | ) {
|
9923 | changeInType = false;
|
9924 | }
|
9925 | if (changeInType === true) {
|
9926 | dataChanged = this.cleanup();
|
9927 | }
|
9928 | }
|
9929 | if (changeInType === true) {
|
9930 | if (smooth.enabled === true) {
|
9931 | if (smooth.type === "dynamic") {
|
9932 | dataChanged = true;
|
9933 | this.edgeType = new BezierEdgeDynamic(
|
9934 | this.options,
|
9935 | this.body,
|
9936 | this.labelModule
|
9937 | );
|
9938 | } else if (smooth.type === "cubicBezier") {
|
9939 | this.edgeType = new CubicBezierEdge(
|
9940 | this.options,
|
9941 | this.body,
|
9942 | this.labelModule
|
9943 | );
|
9944 | } else {
|
9945 | this.edgeType = new BezierEdgeStatic(
|
9946 | this.options,
|
9947 | this.body,
|
9948 | this.labelModule
|
9949 | );
|
9950 | }
|
9951 | } else {
|
9952 | this.edgeType = new StraightEdge(
|
9953 | this.options,
|
9954 | this.body,
|
9955 | this.labelModule
|
9956 | );
|
9957 | }
|
9958 | } else {
|
9959 |
|
9960 | this.edgeType.setOptions(this.options);
|
9961 | }
|
9962 | return dataChanged;
|
9963 | }
|
9964 |
|
9965 | |
9966 |
|
9967 |
|
9968 | connect() {
|
9969 | this.disconnect();
|
9970 |
|
9971 | this.from = this.body.nodes[this.fromId] || undefined;
|
9972 | this.to = this.body.nodes[this.toId] || undefined;
|
9973 | this.connected = this.from !== undefined && this.to !== undefined;
|
9974 |
|
9975 | if (this.connected === true) {
|
9976 | this.from.attachEdge(this);
|
9977 | this.to.attachEdge(this);
|
9978 | } else {
|
9979 | if (this.from) {
|
9980 | this.from.detachEdge(this);
|
9981 | }
|
9982 | if (this.to) {
|
9983 | this.to.detachEdge(this);
|
9984 | }
|
9985 | }
|
9986 |
|
9987 | this.edgeType.connect();
|
9988 | }
|
9989 |
|
9990 | |
9991 |
|
9992 |
|
9993 | disconnect() {
|
9994 | if (this.from) {
|
9995 | this.from.detachEdge(this);
|
9996 | this.from = undefined;
|
9997 | }
|
9998 | if (this.to) {
|
9999 | this.to.detachEdge(this);
|
10000 | this.to = undefined;
|
10001 | }
|
10002 |
|
10003 | this.connected = false;
|
10004 | }
|
10005 |
|
10006 | |
10007 |
|
10008 |
|
10009 |
|
10010 |
|
10011 |
|
10012 | getTitle() {
|
10013 | return this.title;
|
10014 | }
|
10015 |
|
10016 | |
10017 |
|
10018 |
|
10019 |
|
10020 |
|
10021 | isSelected() {
|
10022 | return this.selected;
|
10023 | }
|
10024 |
|
10025 | |
10026 |
|
10027 |
|
10028 |
|
10029 |
|
10030 | getValue() {
|
10031 | return this.options.value;
|
10032 | }
|
10033 |
|
10034 | |
10035 |
|
10036 |
|
10037 |
|
10038 |
|
10039 |
|
10040 |
|
10041 |
|
10042 | setValueRange(min, max, total) {
|
10043 | if (this.options.value !== undefined) {
|
10044 | const scale = this.options.scaling.customScalingFunction(
|
10045 | min,
|
10046 | max,
|
10047 | total,
|
10048 | this.options.value
|
10049 | );
|
10050 | const widthDiff = this.options.scaling.max - this.options.scaling.min;
|
10051 | if (this.options.scaling.label.enabled === true) {
|
10052 | const fontDiff =
|
10053 | this.options.scaling.label.max - this.options.scaling.label.min;
|
10054 | this.options.font.size =
|
10055 | this.options.scaling.label.min + scale * fontDiff;
|
10056 | }
|
10057 | this.options.width = this.options.scaling.min + scale * widthDiff;
|
10058 | } else {
|
10059 | this.options.width = this.baseWidth;
|
10060 | this.options.font.size = this.baseFontSize;
|
10061 | }
|
10062 |
|
10063 | this._setInteractionWidths();
|
10064 | this.updateLabelModule();
|
10065 | }
|
10066 |
|
10067 | |
10068 |
|
10069 |
|
10070 |
|
10071 | _setInteractionWidths() {
|
10072 | if (typeof this.options.hoverWidth === "function") {
|
10073 | this.edgeType.hoverWidth = this.options.hoverWidth(this.options.width);
|
10074 | } else {
|
10075 | this.edgeType.hoverWidth = this.options.hoverWidth + this.options.width;
|
10076 | }
|
10077 | if (typeof this.options.selectionWidth === "function") {
|
10078 | this.edgeType.selectionWidth = this.options.selectionWidth(
|
10079 | this.options.width
|
10080 | );
|
10081 | } else {
|
10082 | this.edgeType.selectionWidth =
|
10083 | this.options.selectionWidth + this.options.width;
|
10084 | }
|
10085 | }
|
10086 |
|
10087 | |
10088 |
|
10089 |
|
10090 |
|
10091 |
|
10092 |
|
10093 |
|
10094 | draw(ctx) {
|
10095 | const values = this.getFormattingValues();
|
10096 | if (values.hidden) {
|
10097 | return;
|
10098 | }
|
10099 |
|
10100 |
|
10101 | const viaNode = this.edgeType.getViaNode();
|
10102 |
|
10103 |
|
10104 | this.edgeType.drawLine(ctx, values, this.selected, this.hover, viaNode);
|
10105 | this.drawLabel(ctx, viaNode);
|
10106 | }
|
10107 |
|
10108 | |
10109 |
|
10110 |
|
10111 |
|
10112 |
|
10113 |
|
10114 |
|
10115 | drawArrows(ctx) {
|
10116 | const values = this.getFormattingValues();
|
10117 | if (values.hidden) {
|
10118 | return;
|
10119 | }
|
10120 |
|
10121 |
|
10122 | const viaNode = this.edgeType.getViaNode();
|
10123 | const arrowData = {};
|
10124 |
|
10125 |
|
10126 | this.edgeType.fromPoint = this.edgeType.from;
|
10127 | this.edgeType.toPoint = this.edgeType.to;
|
10128 |
|
10129 |
|
10130 | if (values.fromArrow) {
|
10131 | arrowData.from = this.edgeType.getArrowData(
|
10132 | ctx,
|
10133 | "from",
|
10134 | viaNode,
|
10135 | this.selected,
|
10136 | this.hover,
|
10137 | values
|
10138 | );
|
10139 | if (values.arrowStrikethrough === false)
|
10140 | this.edgeType.fromPoint = arrowData.from.core;
|
10141 | if (values.fromArrowSrc) {
|
10142 | arrowData.from.image = this.imagelist.load(values.fromArrowSrc);
|
10143 | }
|
10144 | if (values.fromArrowImageWidth) {
|
10145 | arrowData.from.imageWidth = values.fromArrowImageWidth;
|
10146 | }
|
10147 | if (values.fromArrowImageHeight) {
|
10148 | arrowData.from.imageHeight = values.fromArrowImageHeight;
|
10149 | }
|
10150 | }
|
10151 | if (values.toArrow) {
|
10152 | arrowData.to = this.edgeType.getArrowData(
|
10153 | ctx,
|
10154 | "to",
|
10155 | viaNode,
|
10156 | this.selected,
|
10157 | this.hover,
|
10158 | values
|
10159 | );
|
10160 | if (values.arrowStrikethrough === false)
|
10161 | this.edgeType.toPoint = arrowData.to.core;
|
10162 | if (values.toArrowSrc) {
|
10163 | arrowData.to.image = this.imagelist.load(values.toArrowSrc);
|
10164 | }
|
10165 | if (values.toArrowImageWidth) {
|
10166 | arrowData.to.imageWidth = values.toArrowImageWidth;
|
10167 | }
|
10168 | if (values.toArrowImageHeight) {
|
10169 | arrowData.to.imageHeight = values.toArrowImageHeight;
|
10170 | }
|
10171 | }
|
10172 |
|
10173 |
|
10174 | if (values.middleArrow) {
|
10175 | arrowData.middle = this.edgeType.getArrowData(
|
10176 | ctx,
|
10177 | "middle",
|
10178 | viaNode,
|
10179 | this.selected,
|
10180 | this.hover,
|
10181 | values
|
10182 | );
|
10183 |
|
10184 | if (values.middleArrowSrc) {
|
10185 | arrowData.middle.image = this.imagelist.load(values.middleArrowSrc);
|
10186 | }
|
10187 | if (values.middleArrowImageWidth) {
|
10188 | arrowData.middle.imageWidth = values.middleArrowImageWidth;
|
10189 | }
|
10190 | if (values.middleArrowImageHeight) {
|
10191 | arrowData.middle.imageHeight = values.middleArrowImageHeight;
|
10192 | }
|
10193 | }
|
10194 |
|
10195 | if (values.fromArrow) {
|
10196 | this.edgeType.drawArrowHead(
|
10197 | ctx,
|
10198 | values,
|
10199 | this.selected,
|
10200 | this.hover,
|
10201 | arrowData.from
|
10202 | );
|
10203 | }
|
10204 | if (values.middleArrow) {
|
10205 | this.edgeType.drawArrowHead(
|
10206 | ctx,
|
10207 | values,
|
10208 | this.selected,
|
10209 | this.hover,
|
10210 | arrowData.middle
|
10211 | );
|
10212 | }
|
10213 | if (values.toArrow) {
|
10214 | this.edgeType.drawArrowHead(
|
10215 | ctx,
|
10216 | values,
|
10217 | this.selected,
|
10218 | this.hover,
|
10219 | arrowData.to
|
10220 | );
|
10221 | }
|
10222 | }
|
10223 |
|
10224 | |
10225 |
|
10226 |
|
10227 |
|
10228 |
|
10229 | drawLabel(ctx, viaNode) {
|
10230 | if (this.options.label !== undefined) {
|
10231 |
|
10232 | const node1 = this.from;
|
10233 | const node2 = this.to;
|
10234 |
|
10235 | if (this.labelModule.differentState(this.selected, this.hover)) {
|
10236 | this.labelModule.getTextSize(ctx, this.selected, this.hover);
|
10237 | }
|
10238 |
|
10239 | let point;
|
10240 | if (node1.id != node2.id) {
|
10241 | this.labelModule.pointToSelf = false;
|
10242 | point = this.edgeType.getPoint(0.5, viaNode);
|
10243 | ctx.save();
|
10244 |
|
10245 | const rotationPoint = this._getRotation(ctx);
|
10246 | if (rotationPoint.angle != 0) {
|
10247 | ctx.translate(rotationPoint.x, rotationPoint.y);
|
10248 | ctx.rotate(rotationPoint.angle);
|
10249 | }
|
10250 |
|
10251 |
|
10252 | this.labelModule.draw(ctx, point.x, point.y, this.selected, this.hover);
|
10253 |
|
10254 | |
10255 |
|
10256 |
|
10257 |
|
10258 |
|
10259 |
|
10260 |
|
10261 |
|
10262 |
|
10263 | ctx.restore();
|
10264 | } else {
|
10265 |
|
10266 | this.labelModule.pointToSelf = true;
|
10267 |
|
10268 |
|
10269 | const coordinates = getSelfRefCoordinates(
|
10270 | ctx,
|
10271 | this.options.selfReference.angle,
|
10272 | this.options.selfReference.size,
|
10273 | node1
|
10274 | );
|
10275 |
|
10276 | point = this._pointOnCircle(
|
10277 | coordinates.x,
|
10278 | coordinates.y,
|
10279 | this.options.selfReference.size,
|
10280 | this.options.selfReference.angle
|
10281 | );
|
10282 |
|
10283 | this.labelModule.draw(ctx, point.x, point.y, this.selected, this.hover);
|
10284 | }
|
10285 | }
|
10286 | }
|
10287 |
|
10288 | |
10289 |
|
10290 |
|
10291 |
|
10292 |
|
10293 |
|
10294 |
|
10295 | getItemsOnPoint(point) {
|
10296 | const ret = [];
|
10297 |
|
10298 | if (this.labelModule.visible()) {
|
10299 | const rotationPoint = this._getRotation();
|
10300 | if (pointInRect(this.labelModule.getSize(), point, rotationPoint)) {
|
10301 | ret.push({ edgeId: this.id, labelId: 0 });
|
10302 | }
|
10303 | }
|
10304 |
|
10305 | const obj = {
|
10306 | left: point.x,
|
10307 | top: point.y,
|
10308 | };
|
10309 |
|
10310 | if (this.isOverlappingWith(obj)) {
|
10311 | ret.push({ edgeId: this.id });
|
10312 | }
|
10313 |
|
10314 | return ret;
|
10315 | }
|
10316 |
|
10317 | |
10318 |
|
10319 |
|
10320 |
|
10321 |
|
10322 |
|
10323 | isOverlappingWith(obj) {
|
10324 | if (this.connected) {
|
10325 | const distMax = 10;
|
10326 | const xFrom = this.from.x;
|
10327 | const yFrom = this.from.y;
|
10328 | const xTo = this.to.x;
|
10329 | const yTo = this.to.y;
|
10330 | const xObj = obj.left;
|
10331 | const yObj = obj.top;
|
10332 |
|
10333 | const dist = this.edgeType.getDistanceToEdge(
|
10334 | xFrom,
|
10335 | yFrom,
|
10336 | xTo,
|
10337 | yTo,
|
10338 | xObj,
|
10339 | yObj
|
10340 | );
|
10341 |
|
10342 | return dist < distMax;
|
10343 | } else {
|
10344 | return false;
|
10345 | }
|
10346 | }
|
10347 |
|
10348 | |
10349 |
|
10350 |
|
10351 |
|
10352 |
|
10353 |
|
10354 |
|
10355 | _getRotation(ctx) {
|
10356 | const viaNode = this.edgeType.getViaNode();
|
10357 | const point = this.edgeType.getPoint(0.5, viaNode);
|
10358 |
|
10359 | if (ctx !== undefined) {
|
10360 | this.labelModule.calculateLabelSize(
|
10361 | ctx,
|
10362 | this.selected,
|
10363 | this.hover,
|
10364 | point.x,
|
10365 | point.y
|
10366 | );
|
10367 | }
|
10368 |
|
10369 | const ret = {
|
10370 | x: point.x,
|
10371 | y: this.labelModule.size.yLine,
|
10372 | angle: 0,
|
10373 | };
|
10374 |
|
10375 | if (!this.labelModule.visible()) {
|
10376 | return ret;
|
10377 | }
|
10378 |
|
10379 | if (this.options.font.align === "horizontal") {
|
10380 | return ret;
|
10381 | }
|
10382 |
|
10383 | const dy = this.from.y - this.to.y;
|
10384 | const dx = this.from.x - this.to.x;
|
10385 | let angle = Math.atan2(dy, dx);
|
10386 |
|
10387 |
|
10388 | if ((angle < -1 && dx < 0) || (angle > 0 && dx < 0)) {
|
10389 | angle += Math.PI;
|
10390 | }
|
10391 | ret.angle = angle;
|
10392 |
|
10393 | return ret;
|
10394 | }
|
10395 |
|
10396 | |
10397 |
|
10398 |
|
10399 |
|
10400 |
|
10401 |
|
10402 |
|
10403 |
|
10404 |
|
10405 |
|
10406 | _pointOnCircle(x, y, radius, angle) {
|
10407 | return {
|
10408 | x: x + radius * Math.cos(angle),
|
10409 | y: y - radius * Math.sin(angle),
|
10410 | };
|
10411 | }
|
10412 |
|
10413 | |
10414 |
|
10415 |
|
10416 | select() {
|
10417 | this.selected = true;
|
10418 | }
|
10419 |
|
10420 | |
10421 |
|
10422 |
|
10423 | unselect() {
|
10424 | this.selected = false;
|
10425 | }
|
10426 |
|
10427 | |
10428 |
|
10429 |
|
10430 |
|
10431 |
|
10432 | cleanup() {
|
10433 | return this.edgeType.cleanup();
|
10434 | }
|
10435 |
|
10436 | |
10437 |
|
10438 |
|
10439 | remove() {
|
10440 | this.cleanup();
|
10441 | this.disconnect();
|
10442 | delete this.body.edges[this.id];
|
10443 | }
|
10444 |
|
10445 | |
10446 |
|
10447 |
|
10448 |
|
10449 |
|
10450 | endPointsValid() {
|
10451 | return (
|
10452 | this.body.nodes[this.fromId] !== undefined &&
|
10453 | this.body.nodes[this.toId] !== undefined
|
10454 | );
|
10455 | }
|
10456 | }
|
10457 |
|
10458 |
|
10459 |
|
10460 |
|
10461 | class EdgesHandler {
|
10462 | |
10463 |
|
10464 |
|
10465 |
|
10466 |
|
10467 | constructor(body, images, groups) {
|
10468 | this.body = body;
|
10469 | this.images = images;
|
10470 | this.groups = groups;
|
10471 |
|
10472 |
|
10473 | this.body.functions.createEdge = this.create.bind(this);
|
10474 |
|
10475 | this.edgesListeners = {
|
10476 | add: (event, params) => {
|
10477 | this.add(params.items);
|
10478 | },
|
10479 | update: (event, params) => {
|
10480 | this.update(params.items);
|
10481 | },
|
10482 | remove: (event, params) => {
|
10483 | this.remove(params.items);
|
10484 | },
|
10485 | };
|
10486 |
|
10487 | this.options = {};
|
10488 | this.defaultOptions = {
|
10489 | arrows: {
|
10490 | to: { enabled: false, scaleFactor: 1, type: "arrow" },
|
10491 | middle: { enabled: false, scaleFactor: 1, type: "arrow" },
|
10492 | from: { enabled: false, scaleFactor: 1, type: "arrow" },
|
10493 | },
|
10494 | endPointOffset: {
|
10495 | from: 0,
|
10496 | to: 0,
|
10497 | },
|
10498 | arrowStrikethrough: true,
|
10499 | color: {
|
10500 | color: "#848484",
|
10501 | highlight: "#848484",
|
10502 | hover: "#848484",
|
10503 | inherit: "from",
|
10504 | opacity: 1.0,
|
10505 | },
|
10506 | dashes: false,
|
10507 | font: {
|
10508 | color: "#343434",
|
10509 | size: 14,
|
10510 | face: "arial",
|
10511 | background: "none",
|
10512 | strokeWidth: 2,
|
10513 | strokeColor: "#ffffff",
|
10514 | align: "horizontal",
|
10515 | multi: false,
|
10516 | vadjust: 0,
|
10517 | bold: {
|
10518 | mod: "bold",
|
10519 | },
|
10520 | boldital: {
|
10521 | mod: "bold italic",
|
10522 | },
|
10523 | ital: {
|
10524 | mod: "italic",
|
10525 | },
|
10526 | mono: {
|
10527 | mod: "",
|
10528 | size: 15,
|
10529 | face: "courier new",
|
10530 | vadjust: 2,
|
10531 | },
|
10532 | },
|
10533 | hidden: false,
|
10534 | hoverWidth: 1.5,
|
10535 | label: undefined,
|
10536 | labelHighlightBold: true,
|
10537 | length: undefined,
|
10538 | physics: true,
|
10539 | scaling: {
|
10540 | min: 1,
|
10541 | max: 15,
|
10542 | label: {
|
10543 | enabled: true,
|
10544 | min: 14,
|
10545 | max: 30,
|
10546 | maxVisible: 30,
|
10547 | drawThreshold: 5,
|
10548 | },
|
10549 | customScalingFunction: function (min, max, total, value) {
|
10550 | if (max === min) {
|
10551 | return 0.5;
|
10552 | } else {
|
10553 | const scale = 1 / (max - min);
|
10554 | return Math.max(0, (value - min) * scale);
|
10555 | }
|
10556 | },
|
10557 | },
|
10558 | selectionWidth: 1.5,
|
10559 | selfReference: {
|
10560 | size: 20,
|
10561 | angle: Math.PI / 4,
|
10562 | renderBehindTheNode: true,
|
10563 | },
|
10564 | shadow: {
|
10565 | enabled: false,
|
10566 | color: "rgba(0,0,0,0.5)",
|
10567 | size: 10,
|
10568 | x: 5,
|
10569 | y: 5,
|
10570 | },
|
10571 | background: {
|
10572 | enabled: false,
|
10573 | color: "rgba(111,111,111,1)",
|
10574 | size: 10,
|
10575 | dashes: false,
|
10576 | },
|
10577 | smooth: {
|
10578 | enabled: true,
|
10579 | type: "dynamic",
|
10580 | forceDirection: "none",
|
10581 | roundness: 0.5,
|
10582 | },
|
10583 | title: undefined,
|
10584 | width: 1,
|
10585 | value: undefined,
|
10586 | };
|
10587 |
|
10588 | deepExtend(this.options, this.defaultOptions);
|
10589 |
|
10590 | this.bindEventListeners();
|
10591 | }
|
10592 |
|
10593 | |
10594 |
|
10595 |
|
10596 | bindEventListeners() {
|
10597 |
|
10598 | this.body.emitter.on("_forceDisableDynamicCurves", (type, emit = true) => {
|
10599 | if (type === "dynamic") {
|
10600 | type = "continuous";
|
10601 | }
|
10602 | let dataChanged = false;
|
10603 | for (const edgeId in this.body.edges) {
|
10604 | if (Object.prototype.hasOwnProperty.call(this.body.edges, edgeId)) {
|
10605 | const edge = this.body.edges[edgeId];
|
10606 | const edgeData = this.body.data.edges.get(edgeId);
|
10607 |
|
10608 |
|
10609 |
|
10610 | if (edgeData != null) {
|
10611 | const smoothOptions = edgeData.smooth;
|
10612 | if (smoothOptions !== undefined) {
|
10613 | if (
|
10614 | smoothOptions.enabled === true &&
|
10615 | smoothOptions.type === "dynamic"
|
10616 | ) {
|
10617 | if (type === undefined) {
|
10618 | edge.setOptions({ smooth: false });
|
10619 | } else {
|
10620 | edge.setOptions({ smooth: { type: type } });
|
10621 | }
|
10622 | dataChanged = true;
|
10623 | }
|
10624 | }
|
10625 | }
|
10626 | }
|
10627 | }
|
10628 | if (emit === true && dataChanged === true) {
|
10629 | this.body.emitter.emit("_dataChanged");
|
10630 | }
|
10631 | });
|
10632 |
|
10633 |
|
10634 |
|
10635 |
|
10636 |
|
10637 |
|
10638 |
|
10639 |
|
10640 |
|
10641 | this.body.emitter.on("_dataUpdated", () => {
|
10642 | this.reconnectEdges();
|
10643 | });
|
10644 |
|
10645 |
|
10646 | this.body.emitter.on("refreshEdges", this.refresh.bind(this));
|
10647 | this.body.emitter.on("refresh", this.refresh.bind(this));
|
10648 | this.body.emitter.on("destroy", () => {
|
10649 | forEach(this.edgesListeners, (callback, event) => {
|
10650 | if (this.body.data.edges) this.body.data.edges.off(event, callback);
|
10651 | });
|
10652 | delete this.body.functions.createEdge;
|
10653 | delete this.edgesListeners.add;
|
10654 | delete this.edgesListeners.update;
|
10655 | delete this.edgesListeners.remove;
|
10656 | delete this.edgesListeners;
|
10657 | });
|
10658 | }
|
10659 |
|
10660 | |
10661 |
|
10662 |
|
10663 |
|
10664 | setOptions(options) {
|
10665 | if (options !== undefined) {
|
10666 |
|
10667 | Edge.parseOptions(this.options, options, true, this.defaultOptions, true);
|
10668 |
|
10669 |
|
10670 | let dataChanged = false;
|
10671 | if (options.smooth !== undefined) {
|
10672 | for (const edgeId in this.body.edges) {
|
10673 | if (Object.prototype.hasOwnProperty.call(this.body.edges, edgeId)) {
|
10674 | dataChanged =
|
10675 | this.body.edges[edgeId].updateEdgeType() || dataChanged;
|
10676 | }
|
10677 | }
|
10678 | }
|
10679 |
|
10680 |
|
10681 | if (options.font !== undefined) {
|
10682 | for (const edgeId in this.body.edges) {
|
10683 | if (Object.prototype.hasOwnProperty.call(this.body.edges, edgeId)) {
|
10684 | this.body.edges[edgeId].updateLabelModule();
|
10685 | }
|
10686 | }
|
10687 | }
|
10688 |
|
10689 |
|
10690 | if (
|
10691 | options.hidden !== undefined ||
|
10692 | options.physics !== undefined ||
|
10693 | dataChanged === true
|
10694 | ) {
|
10695 | this.body.emitter.emit("_dataChanged");
|
10696 | }
|
10697 | }
|
10698 | }
|
10699 |
|
10700 | |
10701 |
|
10702 |
|
10703 |
|
10704 |
|
10705 |
|
10706 |
|
10707 | setData(edges, doNotEmit = false) {
|
10708 | const oldEdgesData = this.body.data.edges;
|
10709 |
|
10710 | if (isDataViewLike("id", edges)) {
|
10711 | this.body.data.edges = edges;
|
10712 | } else if (Array.isArray(edges)) {
|
10713 | this.body.data.edges = new DataSet();
|
10714 | this.body.data.edges.add(edges);
|
10715 | } else if (!edges) {
|
10716 | this.body.data.edges = new DataSet();
|
10717 | } else {
|
10718 | throw new TypeError("Array or DataSet expected");
|
10719 | }
|
10720 |
|
10721 |
|
10722 | if (oldEdgesData) {
|
10723 |
|
10724 | forEach(this.edgesListeners, (callback, event) => {
|
10725 | oldEdgesData.off(event, callback);
|
10726 | });
|
10727 | }
|
10728 |
|
10729 |
|
10730 | this.body.edges = {};
|
10731 |
|
10732 |
|
10733 | if (this.body.data.edges) {
|
10734 |
|
10735 | forEach(this.edgesListeners, (callback, event) => {
|
10736 | this.body.data.edges.on(event, callback);
|
10737 | });
|
10738 |
|
10739 |
|
10740 | const ids = this.body.data.edges.getIds();
|
10741 | this.add(ids, true);
|
10742 | }
|
10743 |
|
10744 | this.body.emitter.emit("_adjustEdgesForHierarchicalLayout");
|
10745 | if (doNotEmit === false) {
|
10746 | this.body.emitter.emit("_dataChanged");
|
10747 | }
|
10748 | }
|
10749 |
|
10750 | |
10751 |
|
10752 |
|
10753 |
|
10754 |
|
10755 |
|
10756 |
|
10757 | add(ids, doNotEmit = false) {
|
10758 | const edges = this.body.edges;
|
10759 | const edgesData = this.body.data.edges;
|
10760 |
|
10761 | for (let i = 0; i < ids.length; i++) {
|
10762 | const id = ids[i];
|
10763 |
|
10764 | const oldEdge = edges[id];
|
10765 | if (oldEdge) {
|
10766 | oldEdge.disconnect();
|
10767 | }
|
10768 |
|
10769 | const data = edgesData.get(id, { showInternalIds: true });
|
10770 | edges[id] = this.create(data);
|
10771 | }
|
10772 |
|
10773 | this.body.emitter.emit("_adjustEdgesForHierarchicalLayout");
|
10774 |
|
10775 | if (doNotEmit === false) {
|
10776 | this.body.emitter.emit("_dataChanged");
|
10777 | }
|
10778 | }
|
10779 |
|
10780 | |
10781 |
|
10782 |
|
10783 |
|
10784 |
|
10785 |
|
10786 | update(ids) {
|
10787 | const edges = this.body.edges;
|
10788 | const edgesData = this.body.data.edges;
|
10789 | let dataChanged = false;
|
10790 | for (let i = 0; i < ids.length; i++) {
|
10791 | const id = ids[i];
|
10792 | const data = edgesData.get(id);
|
10793 | const edge = edges[id];
|
10794 | if (edge !== undefined) {
|
10795 |
|
10796 | edge.disconnect();
|
10797 | dataChanged = edge.setOptions(data) || dataChanged;
|
10798 | edge.connect();
|
10799 | } else {
|
10800 |
|
10801 | this.body.edges[id] = this.create(data);
|
10802 | dataChanged = true;
|
10803 | }
|
10804 | }
|
10805 |
|
10806 | if (dataChanged === true) {
|
10807 | this.body.emitter.emit("_adjustEdgesForHierarchicalLayout");
|
10808 | this.body.emitter.emit("_dataChanged");
|
10809 | } else {
|
10810 | this.body.emitter.emit("_dataUpdated");
|
10811 | }
|
10812 | }
|
10813 |
|
10814 | |
10815 |
|
10816 |
|
10817 |
|
10818 |
|
10819 |
|
10820 |
|
10821 | remove(ids, emit = true) {
|
10822 | if (ids.length === 0) return;
|
10823 |
|
10824 | const edges = this.body.edges;
|
10825 | forEach(ids, (id) => {
|
10826 | const edge = edges[id];
|
10827 | if (edge !== undefined) {
|
10828 | edge.remove();
|
10829 | }
|
10830 | });
|
10831 |
|
10832 | if (emit) {
|
10833 | this.body.emitter.emit("_dataChanged");
|
10834 | }
|
10835 | }
|
10836 |
|
10837 | |
10838 |
|
10839 |
|
10840 | refresh() {
|
10841 | forEach(this.body.edges, (edge, edgeId) => {
|
10842 | const data = this.body.data.edges.get(edgeId);
|
10843 | if (data !== undefined) {
|
10844 | edge.setOptions(data);
|
10845 | }
|
10846 | });
|
10847 | }
|
10848 |
|
10849 | |
10850 |
|
10851 |
|
10852 |
|
10853 |
|
10854 | create(properties) {
|
10855 | return new Edge(
|
10856 | properties,
|
10857 | this.body,
|
10858 | this.images,
|
10859 | this.options,
|
10860 | this.defaultOptions
|
10861 | );
|
10862 | }
|
10863 |
|
10864 | |
10865 |
|
10866 |
|
10867 |
|
10868 |
|
10869 | reconnectEdges() {
|
10870 | let id;
|
10871 | const nodes = this.body.nodes;
|
10872 | const edges = this.body.edges;
|
10873 |
|
10874 | for (id in nodes) {
|
10875 | if (Object.prototype.hasOwnProperty.call(nodes, id)) {
|
10876 | nodes[id].edges = [];
|
10877 | }
|
10878 | }
|
10879 |
|
10880 | for (id in edges) {
|
10881 | if (Object.prototype.hasOwnProperty.call(edges, id)) {
|
10882 | const edge = edges[id];
|
10883 | edge.from = null;
|
10884 | edge.to = null;
|
10885 | edge.connect();
|
10886 | }
|
10887 | }
|
10888 | }
|
10889 |
|
10890 | |
10891 |
|
10892 |
|
10893 |
|
10894 |
|
10895 | getConnectedNodes(edgeId) {
|
10896 | const nodeList = [];
|
10897 | if (this.body.edges[edgeId] !== undefined) {
|
10898 | const edge = this.body.edges[edgeId];
|
10899 | if (edge.fromId !== undefined) {
|
10900 | nodeList.push(edge.fromId);
|
10901 | }
|
10902 | if (edge.toId !== undefined) {
|
10903 | nodeList.push(edge.toId);
|
10904 | }
|
10905 | }
|
10906 | return nodeList;
|
10907 | }
|
10908 |
|
10909 | |
10910 |
|
10911 |
|
10912 |
|
10913 | _updateState() {
|
10914 | this._addMissingEdges();
|
10915 | this._removeInvalidEdges();
|
10916 | }
|
10917 |
|
10918 | |
10919 |
|
10920 |
|
10921 |
|
10922 |
|
10923 | _removeInvalidEdges() {
|
10924 | const edgesToDelete = [];
|
10925 |
|
10926 | forEach(this.body.edges, (edge, id) => {
|
10927 | const toNode = this.body.nodes[edge.toId];
|
10928 | const fromNode = this.body.nodes[edge.fromId];
|
10929 |
|
10930 |
|
10931 | if (
|
10932 | (toNode !== undefined && toNode.isCluster === true) ||
|
10933 | (fromNode !== undefined && fromNode.isCluster === true)
|
10934 | ) {
|
10935 | return;
|
10936 | }
|
10937 |
|
10938 | if (toNode === undefined || fromNode === undefined) {
|
10939 | edgesToDelete.push(id);
|
10940 | }
|
10941 | });
|
10942 |
|
10943 | this.remove(edgesToDelete, false);
|
10944 | }
|
10945 |
|
10946 | |
10947 |
|
10948 |
|
10949 |
|
10950 |
|
10951 | _addMissingEdges() {
|
10952 | const edgesData = this.body.data.edges;
|
10953 | if (edgesData === undefined || edgesData === null) {
|
10954 | return;
|
10955 | }
|
10956 |
|
10957 | const edges = this.body.edges;
|
10958 | const addIds = [];
|
10959 |
|
10960 | edgesData.forEach((edgeData, edgeId) => {
|
10961 | const edge = edges[edgeId];
|
10962 | if (edge === undefined) {
|
10963 | addIds.push(edgeId);
|
10964 | }
|
10965 | });
|
10966 |
|
10967 | this.add(addIds, true);
|
10968 | }
|
10969 | }
|
10970 |
|
10971 |
|
10972 |
|
10973 |
|
10974 | class BarnesHutSolver {
|
10975 | |
10976 |
|
10977 |
|
10978 |
|
10979 |
|
10980 | constructor(body, physicsBody, options) {
|
10981 | this.body = body;
|
10982 | this.physicsBody = physicsBody;
|
10983 | this.barnesHutTree;
|
10984 | this.setOptions(options);
|
10985 | this._rng = Alea("BARNES HUT SOLVER");
|
10986 |
|
10987 |
|
10988 |
|
10989 | }
|
10990 |
|
10991 | |
10992 |
|
10993 |
|
10994 |
|
10995 | setOptions(options) {
|
10996 | this.options = options;
|
10997 | this.thetaInversed = 1 / this.options.theta;
|
10998 |
|
10999 |
|
11000 | this.overlapAvoidanceFactor =
|
11001 | 1 - Math.max(0, Math.min(1, this.options.avoidOverlap));
|
11002 | }
|
11003 |
|
11004 | |
11005 |
|
11006 |
|
11007 |
|
11008 |
|
11009 |
|
11010 | solve() {
|
11011 | if (
|
11012 | this.options.gravitationalConstant !== 0 &&
|
11013 | this.physicsBody.physicsNodeIndices.length > 0
|
11014 | ) {
|
11015 | let node;
|
11016 | const nodes = this.body.nodes;
|
11017 | const nodeIndices = this.physicsBody.physicsNodeIndices;
|
11018 | const nodeCount = nodeIndices.length;
|
11019 |
|
11020 |
|
11021 | const barnesHutTree = this._formBarnesHutTree(nodes, nodeIndices);
|
11022 |
|
11023 |
|
11024 | this.barnesHutTree = barnesHutTree;
|
11025 |
|
11026 |
|
11027 | for (let i = 0; i < nodeCount; i++) {
|
11028 | node = nodes[nodeIndices[i]];
|
11029 | if (node.options.mass > 0) {
|
11030 |
|
11031 | this._getForceContributions(barnesHutTree.root, node);
|
11032 | }
|
11033 | }
|
11034 | }
|
11035 | }
|
11036 |
|
11037 | |
11038 |
|
11039 |
|
11040 |
|
11041 |
|
11042 | _getForceContributions(parentBranch, node) {
|
11043 | this._getForceContribution(parentBranch.children.NW, node);
|
11044 | this._getForceContribution(parentBranch.children.NE, node);
|
11045 | this._getForceContribution(parentBranch.children.SW, node);
|
11046 | this._getForceContribution(parentBranch.children.SE, node);
|
11047 | }
|
11048 |
|
11049 | |
11050 |
|
11051 |
|
11052 |
|
11053 |
|
11054 |
|
11055 |
|
11056 |
|
11057 | _getForceContribution(parentBranch, node) {
|
11058 |
|
11059 | if (parentBranch.childrenCount > 0) {
|
11060 |
|
11061 | const dx = parentBranch.centerOfMass.x - node.x;
|
11062 | const dy = parentBranch.centerOfMass.y - node.y;
|
11063 | const distance = Math.sqrt(dx * dx + dy * dy);
|
11064 |
|
11065 |
|
11066 |
|
11067 |
|
11068 | if (distance * parentBranch.calcSize > this.thetaInversed) {
|
11069 | this._calculateForces(distance, dx, dy, node, parentBranch);
|
11070 | } else {
|
11071 |
|
11072 | if (parentBranch.childrenCount === 4) {
|
11073 | this._getForceContributions(parentBranch, node);
|
11074 | } else {
|
11075 |
|
11076 | if (parentBranch.children.data.id != node.id) {
|
11077 |
|
11078 | this._calculateForces(distance, dx, dy, node, parentBranch);
|
11079 | }
|
11080 | }
|
11081 | }
|
11082 | }
|
11083 | }
|
11084 |
|
11085 | |
11086 |
|
11087 |
|
11088 |
|
11089 |
|
11090 |
|
11091 |
|
11092 |
|
11093 |
|
11094 |
|
11095 | _calculateForces(distance, dx, dy, node, parentBranch) {
|
11096 | if (distance === 0) {
|
11097 | distance = 0.1;
|
11098 | dx = distance;
|
11099 | }
|
11100 |
|
11101 | if (this.overlapAvoidanceFactor < 1 && node.shape.radius) {
|
11102 | distance = Math.max(
|
11103 | 0.1 + this.overlapAvoidanceFactor * node.shape.radius,
|
11104 | distance - node.shape.radius
|
11105 | );
|
11106 | }
|
11107 |
|
11108 |
|
11109 |
|
11110 | const gravityForce =
|
11111 | (this.options.gravitationalConstant *
|
11112 | parentBranch.mass *
|
11113 | node.options.mass) /
|
11114 | Math.pow(distance, 3);
|
11115 | const fx = dx * gravityForce;
|
11116 | const fy = dy * gravityForce;
|
11117 |
|
11118 | this.physicsBody.forces[node.id].x += fx;
|
11119 | this.physicsBody.forces[node.id].y += fy;
|
11120 | }
|
11121 |
|
11122 | |
11123 |
|
11124 |
|
11125 |
|
11126 |
|
11127 |
|
11128 |
|
11129 |
|
11130 | _formBarnesHutTree(nodes, nodeIndices) {
|
11131 | let node;
|
11132 | const nodeCount = nodeIndices.length;
|
11133 |
|
11134 | let minX = nodes[nodeIndices[0]].x;
|
11135 | let minY = nodes[nodeIndices[0]].y;
|
11136 | let maxX = nodes[nodeIndices[0]].x;
|
11137 | let maxY = nodes[nodeIndices[0]].y;
|
11138 |
|
11139 |
|
11140 | for (let i = 1; i < nodeCount; i++) {
|
11141 | const node = nodes[nodeIndices[i]];
|
11142 | const x = node.x;
|
11143 | const y = node.y;
|
11144 | if (node.options.mass > 0) {
|
11145 | if (x < minX) {
|
11146 | minX = x;
|
11147 | }
|
11148 | if (x > maxX) {
|
11149 | maxX = x;
|
11150 | }
|
11151 | if (y < minY) {
|
11152 | minY = y;
|
11153 | }
|
11154 | if (y > maxY) {
|
11155 | maxY = y;
|
11156 | }
|
11157 | }
|
11158 | }
|
11159 |
|
11160 | const sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY);
|
11161 | if (sizeDiff > 0) {
|
11162 | minY -= 0.5 * sizeDiff;
|
11163 | maxY += 0.5 * sizeDiff;
|
11164 | }
|
11165 | else {
|
11166 | minX += 0.5 * sizeDiff;
|
11167 | maxX -= 0.5 * sizeDiff;
|
11168 | }
|
11169 |
|
11170 | const minimumTreeSize = 1e-5;
|
11171 | const rootSize = Math.max(minimumTreeSize, Math.abs(maxX - minX));
|
11172 | const halfRootSize = 0.5 * rootSize;
|
11173 | const centerX = 0.5 * (minX + maxX),
|
11174 | centerY = 0.5 * (minY + maxY);
|
11175 |
|
11176 |
|
11177 | const barnesHutTree = {
|
11178 | root: {
|
11179 | centerOfMass: { x: 0, y: 0 },
|
11180 | mass: 0,
|
11181 | range: {
|
11182 | minX: centerX - halfRootSize,
|
11183 | maxX: centerX + halfRootSize,
|
11184 | minY: centerY - halfRootSize,
|
11185 | maxY: centerY + halfRootSize,
|
11186 | },
|
11187 | size: rootSize,
|
11188 | calcSize: 1 / rootSize,
|
11189 | children: { data: null },
|
11190 | maxWidth: 0,
|
11191 | level: 0,
|
11192 | childrenCount: 4,
|
11193 | },
|
11194 | };
|
11195 | this._splitBranch(barnesHutTree.root);
|
11196 |
|
11197 |
|
11198 | for (let i = 0; i < nodeCount; i++) {
|
11199 | node = nodes[nodeIndices[i]];
|
11200 | if (node.options.mass > 0) {
|
11201 | this._placeInTree(barnesHutTree.root, node);
|
11202 | }
|
11203 | }
|
11204 |
|
11205 |
|
11206 | return barnesHutTree;
|
11207 | }
|
11208 |
|
11209 | |
11210 |
|
11211 |
|
11212 |
|
11213 |
|
11214 |
|
11215 |
|
11216 | _updateBranchMass(parentBranch, node) {
|
11217 | const centerOfMass = parentBranch.centerOfMass;
|
11218 | const totalMass = parentBranch.mass + node.options.mass;
|
11219 | const totalMassInv = 1 / totalMass;
|
11220 |
|
11221 | centerOfMass.x =
|
11222 | centerOfMass.x * parentBranch.mass + node.x * node.options.mass;
|
11223 | centerOfMass.x *= totalMassInv;
|
11224 |
|
11225 | centerOfMass.y =
|
11226 | centerOfMass.y * parentBranch.mass + node.y * node.options.mass;
|
11227 | centerOfMass.y *= totalMassInv;
|
11228 |
|
11229 | parentBranch.mass = totalMass;
|
11230 | const biggestSize = Math.max(
|
11231 | Math.max(node.height, node.radius),
|
11232 | node.width
|
11233 | );
|
11234 | parentBranch.maxWidth =
|
11235 | parentBranch.maxWidth < biggestSize ? biggestSize : parentBranch.maxWidth;
|
11236 | }
|
11237 |
|
11238 | |
11239 |
|
11240 |
|
11241 |
|
11242 |
|
11243 |
|
11244 |
|
11245 |
|
11246 | _placeInTree(parentBranch, node, skipMassUpdate) {
|
11247 | if (skipMassUpdate != true || skipMassUpdate === undefined) {
|
11248 |
|
11249 | this._updateBranchMass(parentBranch, node);
|
11250 | }
|
11251 |
|
11252 | const range = parentBranch.children.NW.range;
|
11253 | let region;
|
11254 | if (range.maxX > node.x) {
|
11255 |
|
11256 | if (range.maxY > node.y) {
|
11257 | region = "NW";
|
11258 | } else {
|
11259 | region = "SW";
|
11260 | }
|
11261 | } else {
|
11262 |
|
11263 | if (range.maxY > node.y) {
|
11264 | region = "NE";
|
11265 | } else {
|
11266 | region = "SE";
|
11267 | }
|
11268 | }
|
11269 |
|
11270 | this._placeInRegion(parentBranch, node, region);
|
11271 | }
|
11272 |
|
11273 | |
11274 |
|
11275 |
|
11276 |
|
11277 |
|
11278 |
|
11279 |
|
11280 |
|
11281 | _placeInRegion(parentBranch, node, region) {
|
11282 | const children = parentBranch.children[region];
|
11283 |
|
11284 | switch (children.childrenCount) {
|
11285 | case 0:
|
11286 | children.children.data = node;
|
11287 | children.childrenCount = 1;
|
11288 | this._updateBranchMass(children, node);
|
11289 | break;
|
11290 | case 1:
|
11291 |
|
11292 |
|
11293 | if (
|
11294 | children.children.data.x === node.x &&
|
11295 | children.children.data.y === node.y
|
11296 | ) {
|
11297 | node.x += this._rng();
|
11298 | node.y += this._rng();
|
11299 | } else {
|
11300 | this._splitBranch(children);
|
11301 | this._placeInTree(children, node);
|
11302 | }
|
11303 | break;
|
11304 | case 4:
|
11305 | this._placeInTree(children, node);
|
11306 | break;
|
11307 | }
|
11308 | }
|
11309 |
|
11310 | |
11311 |
|
11312 |
|
11313 |
|
11314 |
|
11315 |
|
11316 |
|
11317 | _splitBranch(parentBranch) {
|
11318 |
|
11319 | let containedNode = null;
|
11320 | if (parentBranch.childrenCount === 1) {
|
11321 | containedNode = parentBranch.children.data;
|
11322 | parentBranch.mass = 0;
|
11323 | parentBranch.centerOfMass.x = 0;
|
11324 | parentBranch.centerOfMass.y = 0;
|
11325 | }
|
11326 | parentBranch.childrenCount = 4;
|
11327 | parentBranch.children.data = null;
|
11328 | this._insertRegion(parentBranch, "NW");
|
11329 | this._insertRegion(parentBranch, "NE");
|
11330 | this._insertRegion(parentBranch, "SW");
|
11331 | this._insertRegion(parentBranch, "SE");
|
11332 |
|
11333 | if (containedNode != null) {
|
11334 | this._placeInTree(parentBranch, containedNode);
|
11335 | }
|
11336 | }
|
11337 |
|
11338 | |
11339 |
|
11340 |
|
11341 |
|
11342 |
|
11343 |
|
11344 |
|
11345 |
|
11346 |
|
11347 | _insertRegion(parentBranch, region) {
|
11348 | let minX, maxX, minY, maxY;
|
11349 | const childSize = 0.5 * parentBranch.size;
|
11350 | switch (region) {
|
11351 | case "NW":
|
11352 | minX = parentBranch.range.minX;
|
11353 | maxX = parentBranch.range.minX + childSize;
|
11354 | minY = parentBranch.range.minY;
|
11355 | maxY = parentBranch.range.minY + childSize;
|
11356 | break;
|
11357 | case "NE":
|
11358 | minX = parentBranch.range.minX + childSize;
|
11359 | maxX = parentBranch.range.maxX;
|
11360 | minY = parentBranch.range.minY;
|
11361 | maxY = parentBranch.range.minY + childSize;
|
11362 | break;
|
11363 | case "SW":
|
11364 | minX = parentBranch.range.minX;
|
11365 | maxX = parentBranch.range.minX + childSize;
|
11366 | minY = parentBranch.range.minY + childSize;
|
11367 | maxY = parentBranch.range.maxY;
|
11368 | break;
|
11369 | case "SE":
|
11370 | minX = parentBranch.range.minX + childSize;
|
11371 | maxX = parentBranch.range.maxX;
|
11372 | minY = parentBranch.range.minY + childSize;
|
11373 | maxY = parentBranch.range.maxY;
|
11374 | break;
|
11375 | }
|
11376 |
|
11377 | parentBranch.children[region] = {
|
11378 | centerOfMass: { x: 0, y: 0 },
|
11379 | mass: 0,
|
11380 | range: { minX: minX, maxX: maxX, minY: minY, maxY: maxY },
|
11381 | size: 0.5 * parentBranch.size,
|
11382 | calcSize: 2 * parentBranch.calcSize,
|
11383 | children: { data: null },
|
11384 | maxWidth: 0,
|
11385 | level: parentBranch.level + 1,
|
11386 | childrenCount: 0,
|
11387 | };
|
11388 | }
|
11389 |
|
11390 |
|
11391 |
|
11392 | |
11393 |
|
11394 |
|
11395 |
|
11396 |
|
11397 |
|
11398 |
|
11399 | _debug(ctx, color) {
|
11400 | if (this.barnesHutTree !== undefined) {
|
11401 | ctx.lineWidth = 1;
|
11402 |
|
11403 | this._drawBranch(this.barnesHutTree.root, ctx, color);
|
11404 | }
|
11405 | }
|
11406 |
|
11407 | |
11408 |
|
11409 |
|
11410 |
|
11411 |
|
11412 |
|
11413 |
|
11414 |
|
11415 | _drawBranch(branch, ctx, color) {
|
11416 | if (color === undefined) {
|
11417 | color = "#FF0000";
|
11418 | }
|
11419 |
|
11420 | if (branch.childrenCount === 4) {
|
11421 | this._drawBranch(branch.children.NW, ctx);
|
11422 | this._drawBranch(branch.children.NE, ctx);
|
11423 | this._drawBranch(branch.children.SE, ctx);
|
11424 | this._drawBranch(branch.children.SW, ctx);
|
11425 | }
|
11426 | ctx.strokeStyle = color;
|
11427 | ctx.beginPath();
|
11428 | ctx.moveTo(branch.range.minX, branch.range.minY);
|
11429 | ctx.lineTo(branch.range.maxX, branch.range.minY);
|
11430 | ctx.stroke();
|
11431 |
|
11432 | ctx.beginPath();
|
11433 | ctx.moveTo(branch.range.maxX, branch.range.minY);
|
11434 | ctx.lineTo(branch.range.maxX, branch.range.maxY);
|
11435 | ctx.stroke();
|
11436 |
|
11437 | ctx.beginPath();
|
11438 | ctx.moveTo(branch.range.maxX, branch.range.maxY);
|
11439 | ctx.lineTo(branch.range.minX, branch.range.maxY);
|
11440 | ctx.stroke();
|
11441 |
|
11442 | ctx.beginPath();
|
11443 | ctx.moveTo(branch.range.minX, branch.range.maxY);
|
11444 | ctx.lineTo(branch.range.minX, branch.range.minY);
|
11445 | ctx.stroke();
|
11446 |
|
11447 | |
11448 |
|
11449 |
|
11450 |
|
11451 |
|
11452 |
|
11453 | }
|
11454 | }
|
11455 |
|
11456 |
|
11457 |
|
11458 |
|
11459 | class RepulsionSolver {
|
11460 | |
11461 |
|
11462 |
|
11463 |
|
11464 |
|
11465 | constructor(body, physicsBody, options) {
|
11466 | this._rng = Alea("REPULSION SOLVER");
|
11467 |
|
11468 | this.body = body;
|
11469 | this.physicsBody = physicsBody;
|
11470 | this.setOptions(options);
|
11471 | }
|
11472 |
|
11473 | |
11474 |
|
11475 |
|
11476 |
|
11477 | setOptions(options) {
|
11478 | this.options = options;
|
11479 | }
|
11480 |
|
11481 | |
11482 |
|
11483 |
|
11484 |
|
11485 |
|
11486 |
|
11487 | solve() {
|
11488 | let dx, dy, distance, fx, fy, repulsingForce, node1, node2;
|
11489 |
|
11490 | const nodes = this.body.nodes;
|
11491 | const nodeIndices = this.physicsBody.physicsNodeIndices;
|
11492 | const forces = this.physicsBody.forces;
|
11493 |
|
11494 |
|
11495 | const nodeDistance = this.options.nodeDistance;
|
11496 |
|
11497 |
|
11498 | const a = -2 / 3 / nodeDistance;
|
11499 | const b = 4 / 3;
|
11500 |
|
11501 |
|
11502 |
|
11503 | for (let i = 0; i < nodeIndices.length - 1; i++) {
|
11504 | node1 = nodes[nodeIndices[i]];
|
11505 | for (let j = i + 1; j < nodeIndices.length; j++) {
|
11506 | node2 = nodes[nodeIndices[j]];
|
11507 |
|
11508 | dx = node2.x - node1.x;
|
11509 | dy = node2.y - node1.y;
|
11510 | distance = Math.sqrt(dx * dx + dy * dy);
|
11511 |
|
11512 |
|
11513 | if (distance === 0) {
|
11514 | distance = 0.1 * this._rng();
|
11515 | dx = distance;
|
11516 | }
|
11517 |
|
11518 | if (distance < 2 * nodeDistance) {
|
11519 | if (distance < 0.5 * nodeDistance) {
|
11520 | repulsingForce = 1.0;
|
11521 | } else {
|
11522 | repulsingForce = a * distance + b;
|
11523 | }
|
11524 | repulsingForce = repulsingForce / distance;
|
11525 |
|
11526 | fx = dx * repulsingForce;
|
11527 | fy = dy * repulsingForce;
|
11528 |
|
11529 | forces[node1.id].x -= fx;
|
11530 | forces[node1.id].y -= fy;
|
11531 | forces[node2.id].x += fx;
|
11532 | forces[node2.id].y += fy;
|
11533 | }
|
11534 | }
|
11535 | }
|
11536 | }
|
11537 | }
|
11538 |
|
11539 |
|
11540 |
|
11541 |
|
11542 | class HierarchicalRepulsionSolver {
|
11543 | |
11544 |
|
11545 |
|
11546 |
|
11547 |
|
11548 | constructor(body, physicsBody, options) {
|
11549 | this.body = body;
|
11550 | this.physicsBody = physicsBody;
|
11551 | this.setOptions(options);
|
11552 | }
|
11553 |
|
11554 | |
11555 |
|
11556 |
|
11557 |
|
11558 | setOptions(options) {
|
11559 | this.options = options;
|
11560 | this.overlapAvoidanceFactor = Math.max(
|
11561 | 0,
|
11562 | Math.min(1, this.options.avoidOverlap || 0)
|
11563 | );
|
11564 | }
|
11565 |
|
11566 | |
11567 |
|
11568 |
|
11569 |
|
11570 |
|
11571 |
|
11572 | solve() {
|
11573 | const nodes = this.body.nodes;
|
11574 | const nodeIndices = this.physicsBody.physicsNodeIndices;
|
11575 | const forces = this.physicsBody.forces;
|
11576 |
|
11577 |
|
11578 | const nodeDistance = this.options.nodeDistance;
|
11579 |
|
11580 |
|
11581 |
|
11582 | for (let i = 0; i < nodeIndices.length - 1; i++) {
|
11583 | const node1 = nodes[nodeIndices[i]];
|
11584 | for (let j = i + 1; j < nodeIndices.length; j++) {
|
11585 | const node2 = nodes[nodeIndices[j]];
|
11586 |
|
11587 |
|
11588 | if (node1.level === node2.level) {
|
11589 | const theseNodesDistance =
|
11590 | nodeDistance +
|
11591 | this.overlapAvoidanceFactor *
|
11592 | ((node1.shape.radius || 0) / 2 + (node2.shape.radius || 0) / 2);
|
11593 |
|
11594 | const dx = node2.x - node1.x;
|
11595 | const dy = node2.y - node1.y;
|
11596 | const distance = Math.sqrt(dx * dx + dy * dy);
|
11597 |
|
11598 | const steepness = 0.05;
|
11599 | let repulsingForce;
|
11600 | if (distance < theseNodesDistance) {
|
11601 | repulsingForce =
|
11602 | -Math.pow(steepness * distance, 2) +
|
11603 | Math.pow(steepness * theseNodesDistance, 2);
|
11604 | } else {
|
11605 | repulsingForce = 0;
|
11606 | }
|
11607 |
|
11608 | if (distance !== 0) {
|
11609 | repulsingForce = repulsingForce / distance;
|
11610 | }
|
11611 | const fx = dx * repulsingForce;
|
11612 | const fy = dy * repulsingForce;
|
11613 |
|
11614 | forces[node1.id].x -= fx;
|
11615 | forces[node1.id].y -= fy;
|
11616 | forces[node2.id].x += fx;
|
11617 | forces[node2.id].y += fy;
|
11618 | }
|
11619 | }
|
11620 | }
|
11621 | }
|
11622 | }
|
11623 |
|
11624 |
|
11625 |
|
11626 |
|
11627 | class SpringSolver {
|
11628 | |
11629 |
|
11630 |
|
11631 |
|
11632 |
|
11633 | constructor(body, physicsBody, options) {
|
11634 | this.body = body;
|
11635 | this.physicsBody = physicsBody;
|
11636 | this.setOptions(options);
|
11637 | }
|
11638 |
|
11639 | |
11640 |
|
11641 |
|
11642 |
|
11643 | setOptions(options) {
|
11644 | this.options = options;
|
11645 | }
|
11646 |
|
11647 | |
11648 |
|
11649 |
|
11650 |
|
11651 |
|
11652 | solve() {
|
11653 | let edgeLength, edge;
|
11654 | const edgeIndices = this.physicsBody.physicsEdgeIndices;
|
11655 | const edges = this.body.edges;
|
11656 | let node1, node2, node3;
|
11657 |
|
11658 |
|
11659 | for (let i = 0; i < edgeIndices.length; i++) {
|
11660 | edge = edges[edgeIndices[i]];
|
11661 | if (edge.connected === true && edge.toId !== edge.fromId) {
|
11662 |
|
11663 | if (
|
11664 | this.body.nodes[edge.toId] !== undefined &&
|
11665 | this.body.nodes[edge.fromId] !== undefined
|
11666 | ) {
|
11667 | if (edge.edgeType.via !== undefined) {
|
11668 | edgeLength =
|
11669 | edge.options.length === undefined
|
11670 | ? this.options.springLength
|
11671 | : edge.options.length;
|
11672 | node1 = edge.to;
|
11673 | node2 = edge.edgeType.via;
|
11674 | node3 = edge.from;
|
11675 |
|
11676 | this._calculateSpringForce(node1, node2, 0.5 * edgeLength);
|
11677 | this._calculateSpringForce(node2, node3, 0.5 * edgeLength);
|
11678 | } else {
|
11679 |
|
11680 |
|
11681 | edgeLength =
|
11682 | edge.options.length === undefined
|
11683 | ? this.options.springLength * 1.5
|
11684 | : edge.options.length;
|
11685 | this._calculateSpringForce(edge.from, edge.to, edgeLength);
|
11686 | }
|
11687 | }
|
11688 | }
|
11689 | }
|
11690 | }
|
11691 |
|
11692 | |
11693 |
|
11694 |
|
11695 |
|
11696 |
|
11697 |
|
11698 |
|
11699 |
|
11700 | _calculateSpringForce(node1, node2, edgeLength) {
|
11701 | const dx = node1.x - node2.x;
|
11702 | const dy = node1.y - node2.y;
|
11703 | const distance = Math.max(Math.sqrt(dx * dx + dy * dy), 0.01);
|
11704 |
|
11705 |
|
11706 | const springForce =
|
11707 | (this.options.springConstant * (edgeLength - distance)) / distance;
|
11708 |
|
11709 | const fx = dx * springForce;
|
11710 | const fy = dy * springForce;
|
11711 |
|
11712 |
|
11713 | if (this.physicsBody.forces[node1.id] !== undefined) {
|
11714 | this.physicsBody.forces[node1.id].x += fx;
|
11715 | this.physicsBody.forces[node1.id].y += fy;
|
11716 | }
|
11717 |
|
11718 | if (this.physicsBody.forces[node2.id] !== undefined) {
|
11719 | this.physicsBody.forces[node2.id].x -= fx;
|
11720 | this.physicsBody.forces[node2.id].y -= fy;
|
11721 | }
|
11722 | }
|
11723 | }
|
11724 |
|
11725 |
|
11726 |
|
11727 |
|
11728 | class HierarchicalSpringSolver {
|
11729 | |
11730 |
|
11731 |
|
11732 |
|
11733 |
|
11734 | constructor(body, physicsBody, options) {
|
11735 | this.body = body;
|
11736 | this.physicsBody = physicsBody;
|
11737 | this.setOptions(options);
|
11738 | }
|
11739 |
|
11740 | |
11741 |
|
11742 |
|
11743 |
|
11744 | setOptions(options) {
|
11745 | this.options = options;
|
11746 | }
|
11747 |
|
11748 | |
11749 |
|
11750 |
|
11751 |
|
11752 |
|
11753 | solve() {
|
11754 | let edgeLength, edge;
|
11755 | let dx, dy, fx, fy, springForce, distance;
|
11756 | const edges = this.body.edges;
|
11757 | const factor = 0.5;
|
11758 |
|
11759 | const edgeIndices = this.physicsBody.physicsEdgeIndices;
|
11760 | const nodeIndices = this.physicsBody.physicsNodeIndices;
|
11761 | const forces = this.physicsBody.forces;
|
11762 |
|
11763 |
|
11764 | for (let i = 0; i < nodeIndices.length; i++) {
|
11765 | const nodeId = nodeIndices[i];
|
11766 | forces[nodeId].springFx = 0;
|
11767 | forces[nodeId].springFy = 0;
|
11768 | }
|
11769 |
|
11770 |
|
11771 | for (let i = 0; i < edgeIndices.length; i++) {
|
11772 | edge = edges[edgeIndices[i]];
|
11773 | if (edge.connected === true) {
|
11774 | edgeLength =
|
11775 | edge.options.length === undefined
|
11776 | ? this.options.springLength
|
11777 | : edge.options.length;
|
11778 |
|
11779 | dx = edge.from.x - edge.to.x;
|
11780 | dy = edge.from.y - edge.to.y;
|
11781 | distance = Math.sqrt(dx * dx + dy * dy);
|
11782 | distance = distance === 0 ? 0.01 : distance;
|
11783 |
|
11784 |
|
11785 | springForce =
|
11786 | (this.options.springConstant * (edgeLength - distance)) / distance;
|
11787 |
|
11788 | fx = dx * springForce;
|
11789 | fy = dy * springForce;
|
11790 |
|
11791 | if (edge.to.level != edge.from.level) {
|
11792 | if (forces[edge.toId] !== undefined) {
|
11793 | forces[edge.toId].springFx -= fx;
|
11794 | forces[edge.toId].springFy -= fy;
|
11795 | }
|
11796 | if (forces[edge.fromId] !== undefined) {
|
11797 | forces[edge.fromId].springFx += fx;
|
11798 | forces[edge.fromId].springFy += fy;
|
11799 | }
|
11800 | } else {
|
11801 | if (forces[edge.toId] !== undefined) {
|
11802 | forces[edge.toId].x -= factor * fx;
|
11803 | forces[edge.toId].y -= factor * fy;
|
11804 | }
|
11805 | if (forces[edge.fromId] !== undefined) {
|
11806 | forces[edge.fromId].x += factor * fx;
|
11807 | forces[edge.fromId].y += factor * fy;
|
11808 | }
|
11809 | }
|
11810 | }
|
11811 | }
|
11812 |
|
11813 |
|
11814 | springForce = 1;
|
11815 | let springFx, springFy;
|
11816 | for (let i = 0; i < nodeIndices.length; i++) {
|
11817 | const nodeId = nodeIndices[i];
|
11818 | springFx = Math.min(
|
11819 | springForce,
|
11820 | Math.max(-springForce, forces[nodeId].springFx)
|
11821 | );
|
11822 | springFy = Math.min(
|
11823 | springForce,
|
11824 | Math.max(-springForce, forces[nodeId].springFy)
|
11825 | );
|
11826 |
|
11827 | forces[nodeId].x += springFx;
|
11828 | forces[nodeId].y += springFy;
|
11829 | }
|
11830 |
|
11831 |
|
11832 | let totalFx = 0;
|
11833 | let totalFy = 0;
|
11834 | for (let i = 0; i < nodeIndices.length; i++) {
|
11835 | const nodeId = nodeIndices[i];
|
11836 | totalFx += forces[nodeId].x;
|
11837 | totalFy += forces[nodeId].y;
|
11838 | }
|
11839 | const correctionFx = totalFx / nodeIndices.length;
|
11840 | const correctionFy = totalFy / nodeIndices.length;
|
11841 |
|
11842 | for (let i = 0; i < nodeIndices.length; i++) {
|
11843 | const nodeId = nodeIndices[i];
|
11844 | forces[nodeId].x -= correctionFx;
|
11845 | forces[nodeId].y -= correctionFy;
|
11846 | }
|
11847 | }
|
11848 | }
|
11849 |
|
11850 |
|
11851 |
|
11852 |
|
11853 | class CentralGravitySolver {
|
11854 | |
11855 |
|
11856 |
|
11857 |
|
11858 |
|
11859 | constructor(body, physicsBody, options) {
|
11860 | this.body = body;
|
11861 | this.physicsBody = physicsBody;
|
11862 | this.setOptions(options);
|
11863 | }
|
11864 |
|
11865 | |
11866 |
|
11867 |
|
11868 |
|
11869 | setOptions(options) {
|
11870 | this.options = options;
|
11871 | }
|
11872 |
|
11873 | |
11874 |
|
11875 |
|
11876 | solve() {
|
11877 | let dx, dy, distance, node;
|
11878 | const nodes = this.body.nodes;
|
11879 | const nodeIndices = this.physicsBody.physicsNodeIndices;
|
11880 | const forces = this.physicsBody.forces;
|
11881 |
|
11882 | for (let i = 0; i < nodeIndices.length; i++) {
|
11883 | const nodeId = nodeIndices[i];
|
11884 | node = nodes[nodeId];
|
11885 | dx = -node.x;
|
11886 | dy = -node.y;
|
11887 | distance = Math.sqrt(dx * dx + dy * dy);
|
11888 |
|
11889 | this._calculateForces(distance, dx, dy, forces, node);
|
11890 | }
|
11891 | }
|
11892 |
|
11893 | |
11894 |
|
11895 |
|
11896 |
|
11897 |
|
11898 |
|
11899 |
|
11900 |
|
11901 |
|
11902 |
|
11903 | _calculateForces(distance, dx, dy, forces, node) {
|
11904 | const gravityForce =
|
11905 | distance === 0 ? 0 : this.options.centralGravity / distance;
|
11906 | forces[node.id].x = dx * gravityForce;
|
11907 | forces[node.id].y = dy * gravityForce;
|
11908 | }
|
11909 | }
|
11910 |
|
11911 |
|
11912 |
|
11913 |
|
11914 | class ForceAtlas2BasedRepulsionSolver extends BarnesHutSolver {
|
11915 | |
11916 |
|
11917 |
|
11918 |
|
11919 |
|
11920 | constructor(body, physicsBody, options) {
|
11921 | super(body, physicsBody, options);
|
11922 |
|
11923 | this._rng = Alea("FORCE ATLAS 2 BASED REPULSION SOLVER");
|
11924 | }
|
11925 |
|
11926 | |
11927 |
|
11928 |
|
11929 |
|
11930 |
|
11931 |
|
11932 |
|
11933 |
|
11934 |
|
11935 |
|
11936 | _calculateForces(distance, dx, dy, node, parentBranch) {
|
11937 | if (distance === 0) {
|
11938 | distance = 0.1 * this._rng();
|
11939 | dx = distance;
|
11940 | }
|
11941 |
|
11942 | if (this.overlapAvoidanceFactor < 1 && node.shape.radius) {
|
11943 | distance = Math.max(
|
11944 | 0.1 + this.overlapAvoidanceFactor * node.shape.radius,
|
11945 | distance - node.shape.radius
|
11946 | );
|
11947 | }
|
11948 |
|
11949 | const degree = node.edges.length + 1;
|
11950 |
|
11951 |
|
11952 | const gravityForce =
|
11953 | (this.options.gravitationalConstant *
|
11954 | parentBranch.mass *
|
11955 | node.options.mass *
|
11956 | degree) /
|
11957 | Math.pow(distance, 2);
|
11958 | const fx = dx * gravityForce;
|
11959 | const fy = dy * gravityForce;
|
11960 |
|
11961 | this.physicsBody.forces[node.id].x += fx;
|
11962 | this.physicsBody.forces[node.id].y += fy;
|
11963 | }
|
11964 | }
|
11965 |
|
11966 |
|
11967 |
|
11968 |
|
11969 | class ForceAtlas2BasedCentralGravitySolver extends CentralGravitySolver {
|
11970 | |
11971 |
|
11972 |
|
11973 |
|
11974 |
|
11975 | constructor(body, physicsBody, options) {
|
11976 | super(body, physicsBody, options);
|
11977 | }
|
11978 |
|
11979 | |
11980 |
|
11981 |
|
11982 |
|
11983 |
|
11984 |
|
11985 |
|
11986 |
|
11987 |
|
11988 |
|
11989 | _calculateForces(distance, dx, dy, forces, node) {
|
11990 | if (distance > 0) {
|
11991 | const degree = node.edges.length + 1;
|
11992 | const gravityForce =
|
11993 | this.options.centralGravity * degree * node.options.mass;
|
11994 | forces[node.id].x = dx * gravityForce;
|
11995 | forces[node.id].y = dy * gravityForce;
|
11996 | }
|
11997 | }
|
11998 | }
|
11999 |
|
12000 |
|
12001 |
|
12002 |
|
12003 | class PhysicsEngine {
|
12004 | |
12005 |
|
12006 |
|
12007 | constructor(body) {
|
12008 | this.body = body;
|
12009 | this.physicsBody = {
|
12010 | physicsNodeIndices: [],
|
12011 | physicsEdgeIndices: [],
|
12012 | forces: {},
|
12013 | velocities: {},
|
12014 | };
|
12015 |
|
12016 | this.physicsEnabled = true;
|
12017 | this.simulationInterval = 1000 / 60;
|
12018 | this.requiresTimeout = true;
|
12019 | this.previousStates = {};
|
12020 | this.referenceState = {};
|
12021 | this.freezeCache = {};
|
12022 | this.renderTimer = undefined;
|
12023 |
|
12024 |
|
12025 | this.adaptiveTimestep = false;
|
12026 | this.adaptiveTimestepEnabled = false;
|
12027 | this.adaptiveCounter = 0;
|
12028 | this.adaptiveInterval = 3;
|
12029 |
|
12030 | this.stabilized = false;
|
12031 | this.startedStabilization = false;
|
12032 | this.stabilizationIterations = 0;
|
12033 | this.ready = false;
|
12034 |
|
12035 |
|
12036 | this.options = {};
|
12037 | this.defaultOptions = {
|
12038 | enabled: true,
|
12039 | barnesHut: {
|
12040 | theta: 0.5,
|
12041 | gravitationalConstant: -2000,
|
12042 | centralGravity: 0.3,
|
12043 | springLength: 95,
|
12044 | springConstant: 0.04,
|
12045 | damping: 0.09,
|
12046 | avoidOverlap: 0,
|
12047 | },
|
12048 | forceAtlas2Based: {
|
12049 | theta: 0.5,
|
12050 | gravitationalConstant: -50,
|
12051 | centralGravity: 0.01,
|
12052 | springConstant: 0.08,
|
12053 | springLength: 100,
|
12054 | damping: 0.4,
|
12055 | avoidOverlap: 0,
|
12056 | },
|
12057 | repulsion: {
|
12058 | centralGravity: 0.2,
|
12059 | springLength: 200,
|
12060 | springConstant: 0.05,
|
12061 | nodeDistance: 100,
|
12062 | damping: 0.09,
|
12063 | avoidOverlap: 0,
|
12064 | },
|
12065 | hierarchicalRepulsion: {
|
12066 | centralGravity: 0.0,
|
12067 | springLength: 100,
|
12068 | springConstant: 0.01,
|
12069 | nodeDistance: 120,
|
12070 | damping: 0.09,
|
12071 | },
|
12072 | maxVelocity: 50,
|
12073 | minVelocity: 0.75,
|
12074 | solver: "barnesHut",
|
12075 | stabilization: {
|
12076 | enabled: true,
|
12077 | iterations: 1000,
|
12078 | updateInterval: 50,
|
12079 | onlyDynamicEdges: false,
|
12080 | fit: true,
|
12081 | },
|
12082 | timestep: 0.5,
|
12083 | adaptiveTimestep: true,
|
12084 | wind: { x: 0, y: 0 },
|
12085 | };
|
12086 | Object.assign(this.options, this.defaultOptions);
|
12087 | this.timestep = 0.5;
|
12088 | this.layoutFailed = false;
|
12089 |
|
12090 | this.bindEventListeners();
|
12091 | }
|
12092 |
|
12093 | |
12094 |
|
12095 |
|
12096 | bindEventListeners() {
|
12097 | this.body.emitter.on("initPhysics", () => {
|
12098 | this.initPhysics();
|
12099 | });
|
12100 | this.body.emitter.on("_layoutFailed", () => {
|
12101 | this.layoutFailed = true;
|
12102 | });
|
12103 | this.body.emitter.on("resetPhysics", () => {
|
12104 | this.stopSimulation();
|
12105 | this.ready = false;
|
12106 | });
|
12107 | this.body.emitter.on("disablePhysics", () => {
|
12108 | this.physicsEnabled = false;
|
12109 | this.stopSimulation();
|
12110 | });
|
12111 | this.body.emitter.on("restorePhysics", () => {
|
12112 | this.setOptions(this.options);
|
12113 | if (this.ready === true) {
|
12114 | this.startSimulation();
|
12115 | }
|
12116 | });
|
12117 | this.body.emitter.on("startSimulation", () => {
|
12118 | if (this.ready === true) {
|
12119 | this.startSimulation();
|
12120 | }
|
12121 | });
|
12122 | this.body.emitter.on("stopSimulation", () => {
|
12123 | this.stopSimulation();
|
12124 | });
|
12125 | this.body.emitter.on("destroy", () => {
|
12126 | this.stopSimulation(false);
|
12127 | this.body.emitter.off();
|
12128 | });
|
12129 | this.body.emitter.on("_dataChanged", () => {
|
12130 |
|
12131 | this.updatePhysicsData();
|
12132 | });
|
12133 |
|
12134 |
|
12135 |
|
12136 | }
|
12137 |
|
12138 | |
12139 |
|
12140 |
|
12141 |
|
12142 |
|
12143 | setOptions(options) {
|
12144 | if (options !== undefined) {
|
12145 | if (options === false) {
|
12146 | this.options.enabled = false;
|
12147 | this.physicsEnabled = false;
|
12148 | this.stopSimulation();
|
12149 | } else if (options === true) {
|
12150 | this.options.enabled = true;
|
12151 | this.physicsEnabled = true;
|
12152 | this.startSimulation();
|
12153 | } else {
|
12154 | this.physicsEnabled = true;
|
12155 | selectiveNotDeepExtend(["stabilization"], this.options, options);
|
12156 | mergeOptions(this.options, options, "stabilization");
|
12157 |
|
12158 | if (options.enabled === undefined) {
|
12159 | this.options.enabled = true;
|
12160 | }
|
12161 |
|
12162 | if (this.options.enabled === false) {
|
12163 | this.physicsEnabled = false;
|
12164 | this.stopSimulation();
|
12165 | }
|
12166 |
|
12167 | const wind = this.options.wind;
|
12168 | if (wind) {
|
12169 | if (typeof wind.x !== "number" || Number.isNaN(wind.x)) {
|
12170 | wind.x = 0;
|
12171 | }
|
12172 | if (typeof wind.y !== "number" || Number.isNaN(wind.y)) {
|
12173 | wind.y = 0;
|
12174 | }
|
12175 | }
|
12176 |
|
12177 |
|
12178 | this.timestep = this.options.timestep;
|
12179 | }
|
12180 | }
|
12181 | this.init();
|
12182 | }
|
12183 |
|
12184 | |
12185 |
|
12186 |
|
12187 | init() {
|
12188 | let options;
|
12189 | if (this.options.solver === "forceAtlas2Based") {
|
12190 | options = this.options.forceAtlas2Based;
|
12191 | this.nodesSolver = new ForceAtlas2BasedRepulsionSolver(
|
12192 | this.body,
|
12193 | this.physicsBody,
|
12194 | options
|
12195 | );
|
12196 | this.edgesSolver = new SpringSolver(this.body, this.physicsBody, options);
|
12197 | this.gravitySolver = new ForceAtlas2BasedCentralGravitySolver(
|
12198 | this.body,
|
12199 | this.physicsBody,
|
12200 | options
|
12201 | );
|
12202 | } else if (this.options.solver === "repulsion") {
|
12203 | options = this.options.repulsion;
|
12204 | this.nodesSolver = new RepulsionSolver(this.body, this.physicsBody, options);
|
12205 | this.edgesSolver = new SpringSolver(this.body, this.physicsBody, options);
|
12206 | this.gravitySolver = new CentralGravitySolver(
|
12207 | this.body,
|
12208 | this.physicsBody,
|
12209 | options
|
12210 | );
|
12211 | } else if (this.options.solver === "hierarchicalRepulsion") {
|
12212 | options = this.options.hierarchicalRepulsion;
|
12213 | this.nodesSolver = new HierarchicalRepulsionSolver(
|
12214 | this.body,
|
12215 | this.physicsBody,
|
12216 | options
|
12217 | );
|
12218 | this.edgesSolver = new HierarchicalSpringSolver(
|
12219 | this.body,
|
12220 | this.physicsBody,
|
12221 | options
|
12222 | );
|
12223 | this.gravitySolver = new CentralGravitySolver(
|
12224 | this.body,
|
12225 | this.physicsBody,
|
12226 | options
|
12227 | );
|
12228 | } else {
|
12229 |
|
12230 | options = this.options.barnesHut;
|
12231 | this.nodesSolver = new BarnesHutSolver(
|
12232 | this.body,
|
12233 | this.physicsBody,
|
12234 | options
|
12235 | );
|
12236 | this.edgesSolver = new SpringSolver(this.body, this.physicsBody, options);
|
12237 | this.gravitySolver = new CentralGravitySolver(
|
12238 | this.body,
|
12239 | this.physicsBody,
|
12240 | options
|
12241 | );
|
12242 | }
|
12243 |
|
12244 | this.modelOptions = options;
|
12245 | }
|
12246 |
|
12247 | |
12248 |
|
12249 |
|
12250 | initPhysics() {
|
12251 | if (this.physicsEnabled === true && this.options.enabled === true) {
|
12252 | if (this.options.stabilization.enabled === true) {
|
12253 | this.stabilize();
|
12254 | } else {
|
12255 | this.stabilized = false;
|
12256 | this.ready = true;
|
12257 | this.body.emitter.emit("fit", {}, this.layoutFailed);
|
12258 | this.startSimulation();
|
12259 | }
|
12260 | } else {
|
12261 | this.ready = true;
|
12262 | this.body.emitter.emit("fit");
|
12263 | }
|
12264 | }
|
12265 |
|
12266 | |
12267 |
|
12268 |
|
12269 | startSimulation() {
|
12270 | if (this.physicsEnabled === true && this.options.enabled === true) {
|
12271 | this.stabilized = false;
|
12272 |
|
12273 |
|
12274 | this.adaptiveTimestep = false;
|
12275 |
|
12276 |
|
12277 | this.body.emitter.emit("_resizeNodes");
|
12278 | if (this.viewFunction === undefined) {
|
12279 | this.viewFunction = this.simulationStep.bind(this);
|
12280 | this.body.emitter.on("initRedraw", this.viewFunction);
|
12281 | this.body.emitter.emit("_startRendering");
|
12282 | }
|
12283 | } else {
|
12284 | this.body.emitter.emit("_redraw");
|
12285 | }
|
12286 | }
|
12287 |
|
12288 | |
12289 |
|
12290 |
|
12291 |
|
12292 |
|
12293 | stopSimulation(emit = true) {
|
12294 | this.stabilized = true;
|
12295 | if (emit === true) {
|
12296 | this._emitStabilized();
|
12297 | }
|
12298 | if (this.viewFunction !== undefined) {
|
12299 | this.body.emitter.off("initRedraw", this.viewFunction);
|
12300 | this.viewFunction = undefined;
|
12301 | if (emit === true) {
|
12302 | this.body.emitter.emit("_stopRendering");
|
12303 | }
|
12304 | }
|
12305 | }
|
12306 |
|
12307 | |
12308 |
|
12309 |
|
12310 |
|
12311 | simulationStep() {
|
12312 |
|
12313 | const startTime = Date.now();
|
12314 | this.physicsTick();
|
12315 | const physicsTime = Date.now() - startTime;
|
12316 |
|
12317 |
|
12318 | if (
|
12319 | (physicsTime < 0.4 * this.simulationInterval ||
|
12320 | this.runDoubleSpeed === true) &&
|
12321 | this.stabilized === false
|
12322 | ) {
|
12323 | this.physicsTick();
|
12324 |
|
12325 |
|
12326 | this.runDoubleSpeed = true;
|
12327 | }
|
12328 |
|
12329 | if (this.stabilized === true) {
|
12330 | this.stopSimulation();
|
12331 | }
|
12332 | }
|
12333 |
|
12334 | |
12335 |
|
12336 |
|
12337 |
|
12338 |
|
12339 |
|
12340 | _emitStabilized(amountOfIterations = this.stabilizationIterations) {
|
12341 | if (
|
12342 | this.stabilizationIterations > 1 ||
|
12343 | this.startedStabilization === true
|
12344 | ) {
|
12345 | setTimeout(() => {
|
12346 | this.body.emitter.emit("stabilized", {
|
12347 | iterations: amountOfIterations,
|
12348 | });
|
12349 | this.startedStabilization = false;
|
12350 | this.stabilizationIterations = 0;
|
12351 | }, 0);
|
12352 | }
|
12353 | }
|
12354 |
|
12355 | |
12356 |
|
12357 |
|
12358 |
|
12359 |
|
12360 | physicsStep() {
|
12361 | this.gravitySolver.solve();
|
12362 | this.nodesSolver.solve();
|
12363 | this.edgesSolver.solve();
|
12364 | this.moveNodes();
|
12365 | }
|
12366 |
|
12367 | |
12368 |
|
12369 |
|
12370 |
|
12371 |
|
12372 |
|
12373 |
|
12374 | adjustTimeStep() {
|
12375 | const factor = 1.2;
|
12376 |
|
12377 |
|
12378 | if (this._evaluateStepQuality() === true) {
|
12379 | this.timestep = factor * this.timestep;
|
12380 | } else {
|
12381 |
|
12382 |
|
12383 |
|
12384 | if (this.timestep / factor < this.options.timestep) {
|
12385 | this.timestep = this.options.timestep;
|
12386 | } else {
|
12387 |
|
12388 |
|
12389 | this.adaptiveCounter = -1;
|
12390 | this.timestep = Math.max(this.options.timestep, this.timestep / factor);
|
12391 | }
|
12392 | }
|
12393 | }
|
12394 |
|
12395 | |
12396 |
|
12397 |
|
12398 |
|
12399 |
|
12400 | physicsTick() {
|
12401 | this._startStabilizing();
|
12402 | if (this.stabilized === true) return;
|
12403 |
|
12404 |
|
12405 | if (
|
12406 | this.adaptiveTimestep === true &&
|
12407 | this.adaptiveTimestepEnabled === true
|
12408 | ) {
|
12409 |
|
12410 | const doAdaptive = this.adaptiveCounter % this.adaptiveInterval === 0;
|
12411 |
|
12412 | if (doAdaptive) {
|
12413 |
|
12414 | this.timestep = 2 * this.timestep;
|
12415 | this.physicsStep();
|
12416 | this.revert();
|
12417 |
|
12418 |
|
12419 | this.timestep = 0.5 * this.timestep;
|
12420 |
|
12421 |
|
12422 | this.physicsStep();
|
12423 | this.physicsStep();
|
12424 |
|
12425 | this.adjustTimeStep();
|
12426 | } else {
|
12427 | this.physicsStep();
|
12428 | }
|
12429 |
|
12430 | this.adaptiveCounter += 1;
|
12431 | } else {
|
12432 |
|
12433 | this.timestep = this.options.timestep;
|
12434 | this.physicsStep();
|
12435 | }
|
12436 |
|
12437 | if (this.stabilized === true) this.revert();
|
12438 | this.stabilizationIterations++;
|
12439 | }
|
12440 |
|
12441 | |
12442 |
|
12443 |
|
12444 |
|
12445 |
|
12446 | updatePhysicsData() {
|
12447 | this.physicsBody.forces = {};
|
12448 | this.physicsBody.physicsNodeIndices = [];
|
12449 | this.physicsBody.physicsEdgeIndices = [];
|
12450 | const nodes = this.body.nodes;
|
12451 | const edges = this.body.edges;
|
12452 |
|
12453 |
|
12454 | for (const nodeId in nodes) {
|
12455 | if (Object.prototype.hasOwnProperty.call(nodes, nodeId)) {
|
12456 | if (nodes[nodeId].options.physics === true) {
|
12457 | this.physicsBody.physicsNodeIndices.push(nodes[nodeId].id);
|
12458 | }
|
12459 | }
|
12460 | }
|
12461 |
|
12462 |
|
12463 | for (const edgeId in edges) {
|
12464 | if (Object.prototype.hasOwnProperty.call(edges, edgeId)) {
|
12465 | if (edges[edgeId].options.physics === true) {
|
12466 | this.physicsBody.physicsEdgeIndices.push(edges[edgeId].id);
|
12467 | }
|
12468 | }
|
12469 | }
|
12470 |
|
12471 |
|
12472 | for (let i = 0; i < this.physicsBody.physicsNodeIndices.length; i++) {
|
12473 | const nodeId = this.physicsBody.physicsNodeIndices[i];
|
12474 | this.physicsBody.forces[nodeId] = { x: 0, y: 0 };
|
12475 |
|
12476 |
|
12477 | if (this.physicsBody.velocities[nodeId] === undefined) {
|
12478 | this.physicsBody.velocities[nodeId] = { x: 0, y: 0 };
|
12479 | }
|
12480 | }
|
12481 |
|
12482 |
|
12483 | for (const nodeId in this.physicsBody.velocities) {
|
12484 | if (nodes[nodeId] === undefined) {
|
12485 | delete this.physicsBody.velocities[nodeId];
|
12486 | }
|
12487 | }
|
12488 | }
|
12489 |
|
12490 | |
12491 |
|
12492 |
|
12493 | revert() {
|
12494 | const nodeIds = Object.keys(this.previousStates);
|
12495 | const nodes = this.body.nodes;
|
12496 | const velocities = this.physicsBody.velocities;
|
12497 | this.referenceState = {};
|
12498 |
|
12499 | for (let i = 0; i < nodeIds.length; i++) {
|
12500 | const nodeId = nodeIds[i];
|
12501 | if (nodes[nodeId] !== undefined) {
|
12502 | if (nodes[nodeId].options.physics === true) {
|
12503 | this.referenceState[nodeId] = {
|
12504 | positions: { x: nodes[nodeId].x, y: nodes[nodeId].y },
|
12505 | };
|
12506 | velocities[nodeId].x = this.previousStates[nodeId].vx;
|
12507 | velocities[nodeId].y = this.previousStates[nodeId].vy;
|
12508 | nodes[nodeId].x = this.previousStates[nodeId].x;
|
12509 | nodes[nodeId].y = this.previousStates[nodeId].y;
|
12510 | }
|
12511 | } else {
|
12512 | delete this.previousStates[nodeId];
|
12513 | }
|
12514 | }
|
12515 | }
|
12516 |
|
12517 | |
12518 |
|
12519 |
|
12520 |
|
12521 |
|
12522 |
|
12523 | _evaluateStepQuality() {
|
12524 | let dx, dy, dpos;
|
12525 | const nodes = this.body.nodes;
|
12526 | const reference = this.referenceState;
|
12527 | const posThreshold = 0.3;
|
12528 |
|
12529 | for (const nodeId in this.referenceState) {
|
12530 | if (
|
12531 | Object.prototype.hasOwnProperty.call(this.referenceState, nodeId) &&
|
12532 | nodes[nodeId] !== undefined
|
12533 | ) {
|
12534 | dx = nodes[nodeId].x - reference[nodeId].positions.x;
|
12535 | dy = nodes[nodeId].y - reference[nodeId].positions.y;
|
12536 |
|
12537 | dpos = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
|
12538 |
|
12539 | if (dpos > posThreshold) {
|
12540 | return false;
|
12541 | }
|
12542 | }
|
12543 | }
|
12544 | return true;
|
12545 | }
|
12546 |
|
12547 | |
12548 |
|
12549 |
|
12550 | moveNodes() {
|
12551 | const nodeIndices = this.physicsBody.physicsNodeIndices;
|
12552 | let maxNodeVelocity = 0;
|
12553 | let averageNodeVelocity = 0;
|
12554 |
|
12555 |
|
12556 | const velocityAdaptiveThreshold = 5;
|
12557 |
|
12558 | for (let i = 0; i < nodeIndices.length; i++) {
|
12559 | const nodeId = nodeIndices[i];
|
12560 | const nodeVelocity = this._performStep(nodeId);
|
12561 |
|
12562 | maxNodeVelocity = Math.max(maxNodeVelocity, nodeVelocity);
|
12563 | averageNodeVelocity += nodeVelocity;
|
12564 | }
|
12565 |
|
12566 |
|
12567 | this.adaptiveTimestepEnabled =
|
12568 | averageNodeVelocity / nodeIndices.length < velocityAdaptiveThreshold;
|
12569 | this.stabilized = maxNodeVelocity < this.options.minVelocity;
|
12570 | }
|
12571 |
|
12572 | |
12573 |
|
12574 |
|
12575 |
|
12576 |
|
12577 |
|
12578 |
|
12579 |
|
12580 |
|
12581 | calculateComponentVelocity(v, f, m) {
|
12582 | const df = this.modelOptions.damping * v;
|
12583 | const a = (f - df) / m;
|
12584 |
|
12585 | v += a * this.timestep;
|
12586 |
|
12587 |
|
12588 | const maxV = this.options.maxVelocity || 1e9;
|
12589 | if (Math.abs(v) > maxV) {
|
12590 | v = v > 0 ? maxV : -maxV;
|
12591 | }
|
12592 |
|
12593 | return v;
|
12594 | }
|
12595 |
|
12596 | |
12597 |
|
12598 |
|
12599 |
|
12600 |
|
12601 |
|
12602 |
|
12603 | _performStep(nodeId) {
|
12604 | const node = this.body.nodes[nodeId];
|
12605 | const force = this.physicsBody.forces[nodeId];
|
12606 |
|
12607 | if (this.options.wind) {
|
12608 | force.x += this.options.wind.x;
|
12609 | force.y += this.options.wind.y;
|
12610 | }
|
12611 |
|
12612 | const velocity = this.physicsBody.velocities[nodeId];
|
12613 |
|
12614 |
|
12615 | this.previousStates[nodeId] = {
|
12616 | x: node.x,
|
12617 | y: node.y,
|
12618 | vx: velocity.x,
|
12619 | vy: velocity.y,
|
12620 | };
|
12621 |
|
12622 | if (node.options.fixed.x === false) {
|
12623 | velocity.x = this.calculateComponentVelocity(
|
12624 | velocity.x,
|
12625 | force.x,
|
12626 | node.options.mass
|
12627 | );
|
12628 | node.x += velocity.x * this.timestep;
|
12629 | } else {
|
12630 | force.x = 0;
|
12631 | velocity.x = 0;
|
12632 | }
|
12633 |
|
12634 | if (node.options.fixed.y === false) {
|
12635 | velocity.y = this.calculateComponentVelocity(
|
12636 | velocity.y,
|
12637 | force.y,
|
12638 | node.options.mass
|
12639 | );
|
12640 | node.y += velocity.y * this.timestep;
|
12641 | } else {
|
12642 | force.y = 0;
|
12643 | velocity.y = 0;
|
12644 | }
|
12645 |
|
12646 | const totalVelocity = Math.sqrt(
|
12647 | Math.pow(velocity.x, 2) + Math.pow(velocity.y, 2)
|
12648 | );
|
12649 | return totalVelocity;
|
12650 | }
|
12651 |
|
12652 | |
12653 |
|
12654 |
|
12655 |
|
12656 |
|
12657 |
|
12658 | _freezeNodes() {
|
12659 | const nodes = this.body.nodes;
|
12660 | for (const id in nodes) {
|
12661 | if (Object.prototype.hasOwnProperty.call(nodes, id)) {
|
12662 | if (nodes[id].x && nodes[id].y) {
|
12663 | const fixed = nodes[id].options.fixed;
|
12664 | this.freezeCache[id] = { x: fixed.x, y: fixed.y };
|
12665 | fixed.x = true;
|
12666 | fixed.y = true;
|
12667 | }
|
12668 | }
|
12669 | }
|
12670 | }
|
12671 |
|
12672 | |
12673 |
|
12674 |
|
12675 |
|
12676 |
|
12677 | _restoreFrozenNodes() {
|
12678 | const nodes = this.body.nodes;
|
12679 | for (const id in nodes) {
|
12680 | if (Object.prototype.hasOwnProperty.call(nodes, id)) {
|
12681 | if (this.freezeCache[id] !== undefined) {
|
12682 | nodes[id].options.fixed.x = this.freezeCache[id].x;
|
12683 | nodes[id].options.fixed.y = this.freezeCache[id].y;
|
12684 | }
|
12685 | }
|
12686 | }
|
12687 | this.freezeCache = {};
|
12688 | }
|
12689 |
|
12690 | |
12691 |
|
12692 |
|
12693 |
|
12694 |
|
12695 | stabilize(iterations = this.options.stabilization.iterations) {
|
12696 | if (typeof iterations !== "number") {
|
12697 | iterations = this.options.stabilization.iterations;
|
12698 | console.error(
|
12699 | "The stabilize method needs a numeric amount of iterations. Switching to default: ",
|
12700 | iterations
|
12701 | );
|
12702 | }
|
12703 |
|
12704 | if (this.physicsBody.physicsNodeIndices.length === 0) {
|
12705 | this.ready = true;
|
12706 | return;
|
12707 | }
|
12708 |
|
12709 |
|
12710 | this.adaptiveTimestep = this.options.adaptiveTimestep;
|
12711 |
|
12712 |
|
12713 | this.body.emitter.emit("_resizeNodes");
|
12714 |
|
12715 | this.stopSimulation();
|
12716 | this.stabilized = false;
|
12717 |
|
12718 |
|
12719 | this.body.emitter.emit("_blockRedraw");
|
12720 | this.targetIterations = iterations;
|
12721 |
|
12722 |
|
12723 | if (this.options.stabilization.onlyDynamicEdges === true) {
|
12724 | this._freezeNodes();
|
12725 | }
|
12726 | this.stabilizationIterations = 0;
|
12727 |
|
12728 | setTimeout(() => this._stabilizationBatch(), 0);
|
12729 | }
|
12730 |
|
12731 | |
12732 |
|
12733 |
|
12734 |
|
12735 |
|
12736 |
|
12737 | _startStabilizing() {
|
12738 | if (this.startedStabilization === true) return false;
|
12739 |
|
12740 | this.body.emitter.emit("startStabilizing");
|
12741 | this.startedStabilization = true;
|
12742 | return true;
|
12743 | }
|
12744 |
|
12745 | |
12746 |
|
12747 |
|
12748 |
|
12749 |
|
12750 | _stabilizationBatch() {
|
12751 | const running = () =>
|
12752 | this.stabilized === false &&
|
12753 | this.stabilizationIterations < this.targetIterations;
|
12754 |
|
12755 | const sendProgress = () => {
|
12756 | this.body.emitter.emit("stabilizationProgress", {
|
12757 | iterations: this.stabilizationIterations,
|
12758 | total: this.targetIterations,
|
12759 | });
|
12760 | };
|
12761 |
|
12762 | if (this._startStabilizing()) {
|
12763 | sendProgress();
|
12764 | }
|
12765 |
|
12766 | let count = 0;
|
12767 | while (running() && count < this.options.stabilization.updateInterval) {
|
12768 | this.physicsTick();
|
12769 | count++;
|
12770 | }
|
12771 |
|
12772 | sendProgress();
|
12773 |
|
12774 | if (running()) {
|
12775 | setTimeout(this._stabilizationBatch.bind(this), 0);
|
12776 | } else {
|
12777 | this._finalizeStabilization();
|
12778 | }
|
12779 | }
|
12780 |
|
12781 | |
12782 |
|
12783 |
|
12784 |
|
12785 |
|
12786 | _finalizeStabilization() {
|
12787 | this.body.emitter.emit("_allowRedraw");
|
12788 | if (this.options.stabilization.fit === true) {
|
12789 | this.body.emitter.emit("fit");
|
12790 | }
|
12791 |
|
12792 | if (this.options.stabilization.onlyDynamicEdges === true) {
|
12793 | this._restoreFrozenNodes();
|
12794 | }
|
12795 |
|
12796 | this.body.emitter.emit("stabilizationIterationsDone");
|
12797 | this.body.emitter.emit("_requestRedraw");
|
12798 |
|
12799 | if (this.stabilized === true) {
|
12800 | this._emitStabilized();
|
12801 | } else {
|
12802 | this.startSimulation();
|
12803 | }
|
12804 |
|
12805 | this.ready = true;
|
12806 | }
|
12807 |
|
12808 |
|
12809 |
|
12810 | |
12811 |
|
12812 |
|
12813 |
|
12814 |
|
12815 |
|
12816 |
|
12817 |
|
12818 | _drawForces(ctx) {
|
12819 | for (let i = 0; i < this.physicsBody.physicsNodeIndices.length; i++) {
|
12820 | const index = this.physicsBody.physicsNodeIndices[i];
|
12821 | const node = this.body.nodes[index];
|
12822 | const force = this.physicsBody.forces[index];
|
12823 | const factor = 20;
|
12824 | const colorFactor = 0.03;
|
12825 | const forceSize = Math.sqrt(Math.pow(force.x, 2) + Math.pow(force.x, 2));
|
12826 |
|
12827 | const size = Math.min(Math.max(5, forceSize), 15);
|
12828 | const arrowSize = 3 * size;
|
12829 |
|
12830 | const color = HSVToHex(
|
12831 | (180 - Math.min(1, Math.max(0, colorFactor * forceSize)) * 180) / 360,
|
12832 | 1,
|
12833 | 1
|
12834 | );
|
12835 |
|
12836 | const point = {
|
12837 | x: node.x + factor * force.x,
|
12838 | y: node.y + factor * force.y,
|
12839 | };
|
12840 |
|
12841 | ctx.lineWidth = size;
|
12842 | ctx.strokeStyle = color;
|
12843 | ctx.beginPath();
|
12844 | ctx.moveTo(node.x, node.y);
|
12845 | ctx.lineTo(point.x, point.y);
|
12846 | ctx.stroke();
|
12847 |
|
12848 | const angle = Math.atan2(force.y, force.x);
|
12849 | ctx.fillStyle = color;
|
12850 | EndPoints.draw(ctx, {
|
12851 | type: "arrow",
|
12852 | point: point,
|
12853 | angle: angle,
|
12854 | length: arrowSize,
|
12855 | });
|
12856 | ctx.fill();
|
12857 | }
|
12858 | }
|
12859 | }
|
12860 |
|
12861 |
|
12862 |
|
12863 |
|
12864 | class NetworkUtil {
|
12865 | |
12866 |
|
12867 |
|
12868 | constructor() {}
|
12869 |
|
12870 | |
12871 |
|
12872 |
|
12873 |
|
12874 |
|
12875 |
|
12876 |
|
12877 |
|
12878 | static getRange(allNodes, specificNodes = []) {
|
12879 | let minY = 1e9,
|
12880 | maxY = -1e9,
|
12881 | minX = 1e9,
|
12882 | maxX = -1e9,
|
12883 | node;
|
12884 | if (specificNodes.length > 0) {
|
12885 | for (let i = 0; i < specificNodes.length; i++) {
|
12886 | node = allNodes[specificNodes[i]];
|
12887 | if (minX > node.shape.boundingBox.left) {
|
12888 | minX = node.shape.boundingBox.left;
|
12889 | }
|
12890 | if (maxX < node.shape.boundingBox.right) {
|
12891 | maxX = node.shape.boundingBox.right;
|
12892 | }
|
12893 | if (minY > node.shape.boundingBox.top) {
|
12894 | minY = node.shape.boundingBox.top;
|
12895 | }
|
12896 | if (maxY < node.shape.boundingBox.bottom) {
|
12897 | maxY = node.shape.boundingBox.bottom;
|
12898 | }
|
12899 | }
|
12900 | }
|
12901 |
|
12902 | if (minX === 1e9 && maxX === -1e9 && minY === 1e9 && maxY === -1e9) {
|
12903 | (minY = 0), (maxY = 0), (minX = 0), (maxX = 0);
|
12904 | }
|
12905 | return { minX: minX, maxX: maxX, minY: minY, maxY: maxY };
|
12906 | }
|
12907 |
|
12908 | |
12909 |
|
12910 |
|
12911 |
|
12912 |
|
12913 |
|
12914 |
|
12915 |
|
12916 | static getRangeCore(allNodes, specificNodes = []) {
|
12917 | let minY = 1e9,
|
12918 | maxY = -1e9,
|
12919 | minX = 1e9,
|
12920 | maxX = -1e9,
|
12921 | node;
|
12922 | if (specificNodes.length > 0) {
|
12923 | for (let i = 0; i < specificNodes.length; i++) {
|
12924 | node = allNodes[specificNodes[i]];
|
12925 | if (minX > node.x) {
|
12926 | minX = node.x;
|
12927 | }
|
12928 | if (maxX < node.x) {
|
12929 | maxX = node.x;
|
12930 | }
|
12931 | if (minY > node.y) {
|
12932 | minY = node.y;
|
12933 | }
|
12934 | if (maxY < node.y) {
|
12935 | maxY = node.y;
|
12936 | }
|
12937 | }
|
12938 | }
|
12939 |
|
12940 | if (minX === 1e9 && maxX === -1e9 && minY === 1e9 && maxY === -1e9) {
|
12941 | (minY = 0), (maxY = 0), (minX = 0), (maxX = 0);
|
12942 | }
|
12943 | return { minX: minX, maxX: maxX, minY: minY, maxY: maxY };
|
12944 | }
|
12945 |
|
12946 | |
12947 |
|
12948 |
|
12949 |
|
12950 |
|
12951 | static findCenter(range) {
|
12952 | return {
|
12953 | x: 0.5 * (range.maxX + range.minX),
|
12954 | y: 0.5 * (range.maxY + range.minY),
|
12955 | };
|
12956 | }
|
12957 |
|
12958 | |
12959 |
|
12960 |
|
12961 |
|
12962 |
|
12963 |
|
12964 |
|
12965 |
|
12966 | static cloneOptions(item, type) {
|
12967 | const clonedOptions = {};
|
12968 | if (type === undefined || type === "node") {
|
12969 | deepExtend(clonedOptions, item.options, true);
|
12970 | clonedOptions.x = item.x;
|
12971 | clonedOptions.y = item.y;
|
12972 | clonedOptions.amountOfConnections = item.edges.length;
|
12973 | } else {
|
12974 | deepExtend(clonedOptions, item.options, true);
|
12975 | }
|
12976 | return clonedOptions;
|
12977 | }
|
12978 | }
|
12979 |
|
12980 |
|
12981 |
|
12982 |
|
12983 |
|
12984 |
|
12985 |
|
12986 | class Cluster extends Node {
|
12987 | |
12988 |
|
12989 |
|
12990 |
|
12991 |
|
12992 |
|
12993 |
|
12994 |
|
12995 | constructor(
|
12996 | options,
|
12997 | body,
|
12998 | imagelist,
|
12999 | grouplist,
|
13000 | globalOptions,
|
13001 | defaultOptions
|
13002 | ) {
|
13003 | super(options, body, imagelist, grouplist, globalOptions, defaultOptions);
|
13004 |
|
13005 | this.isCluster = true;
|
13006 | this.containedNodes = {};
|
13007 | this.containedEdges = {};
|
13008 | }
|
13009 |
|
13010 | |
13011 |
|
13012 |
|
13013 |
|
13014 |
|
13015 |
|
13016 |
|
13017 | _openChildCluster(childClusterId) {
|
13018 | const childCluster = this.body.nodes[childClusterId];
|
13019 | if (this.containedNodes[childClusterId] === undefined) {
|
13020 | throw new Error(
|
13021 | "node with id: " + childClusterId + " not in current cluster"
|
13022 | );
|
13023 | }
|
13024 | if (!childCluster.isCluster) {
|
13025 | throw new Error("node with id: " + childClusterId + " is not a cluster");
|
13026 | }
|
13027 |
|
13028 |
|
13029 | delete this.containedNodes[childClusterId];
|
13030 | forEach(childCluster.edges, (edge) => {
|
13031 | delete this.containedEdges[edge.id];
|
13032 | });
|
13033 |
|
13034 |
|
13035 | forEach(childCluster.containedNodes, (node, nodeId) => {
|
13036 | this.containedNodes[nodeId] = node;
|
13037 | });
|
13038 | childCluster.containedNodes = {};
|
13039 |
|
13040 | forEach(childCluster.containedEdges, (edge, edgeId) => {
|
13041 | this.containedEdges[edgeId] = edge;
|
13042 | });
|
13043 | childCluster.containedEdges = {};
|
13044 |
|
13045 |
|
13046 | forEach(childCluster.edges, (clusterEdge) => {
|
13047 | forEach(this.edges, (parentClusterEdge) => {
|
13048 |
|
13049 |
|
13050 | const index = parentClusterEdge.clusteringEdgeReplacingIds.indexOf(
|
13051 | clusterEdge.id
|
13052 | );
|
13053 | if (index === -1) return;
|
13054 |
|
13055 | forEach(clusterEdge.clusteringEdgeReplacingIds, (srcId) => {
|
13056 | parentClusterEdge.clusteringEdgeReplacingIds.push(srcId);
|
13057 |
|
13058 |
|
13059 | this.body.edges[srcId].edgeReplacedById = parentClusterEdge.id;
|
13060 | });
|
13061 |
|
13062 |
|
13063 | parentClusterEdge.clusteringEdgeReplacingIds.splice(index, 1);
|
13064 | });
|
13065 | });
|
13066 | childCluster.edges = [];
|
13067 | }
|
13068 | }
|
13069 |
|
13070 |
|
13071 |
|
13072 |
|
13073 |
|
13074 |
|
13075 |
|
13076 |
|
13077 |
|
13078 |
|
13079 |
|
13080 |
|
13081 |
|
13082 |
|
13083 |
|
13084 |
|
13085 |
|
13086 |
|
13087 |
|
13088 |
|
13089 |
|
13090 |
|
13091 |
|
13092 |
|
13093 |
|
13094 |
|
13095 |
|
13096 |
|
13097 |
|
13098 |
|
13099 |
|
13100 |
|
13101 |
|
13102 |
|
13103 |
|
13104 |
|
13105 |
|
13106 |
|
13107 |
|
13108 |
|
13109 |
|
13110 |
|
13111 |
|
13112 |
|
13113 |
|
13114 |
|
13115 |
|
13116 |
|
13117 |
|
13118 |
|
13119 |
|
13120 |
|
13121 |
|
13122 |
|
13123 |
|
13124 |
|
13125 |
|
13126 |
|
13127 |
|
13128 |
|
13129 |
|
13130 |
|
13131 |
|
13132 |
|
13133 |
|
13134 |
|
13135 |
|
13136 |
|
13137 |
|
13138 |
|
13139 |
|
13140 |
|
13141 |
|
13142 |
|
13143 |
|
13144 |
|
13145 |
|
13146 |
|
13147 |
|
13148 |
|
13149 |
|
13150 |
|
13151 |
|
13152 |
|
13153 |
|
13154 |
|
13155 |
|
13156 |
|
13157 |
|
13158 |
|
13159 |
|
13160 |
|
13161 |
|
13162 |
|
13163 |
|
13164 |
|
13165 |
|
13166 | class ClusterEngine {
|
13167 | |
13168 |
|
13169 |
|
13170 | constructor(body) {
|
13171 | this.body = body;
|
13172 | this.clusteredNodes = {};
|
13173 | this.clusteredEdges = {};
|
13174 |
|
13175 | this.options = {};
|
13176 | this.defaultOptions = {};
|
13177 | Object.assign(this.options, this.defaultOptions);
|
13178 |
|
13179 | this.body.emitter.on("_resetData", () => {
|
13180 | this.clusteredNodes = {};
|
13181 | this.clusteredEdges = {};
|
13182 | });
|
13183 | }
|
13184 |
|
13185 | |
13186 |
|
13187 |
|
13188 |
|
13189 |
|
13190 | clusterByHubsize(hubsize, options) {
|
13191 | if (hubsize === undefined) {
|
13192 | hubsize = this._getHubSize();
|
13193 | } else if (typeof hubsize === "object") {
|
13194 | options = this._checkOptions(hubsize);
|
13195 | hubsize = this._getHubSize();
|
13196 | }
|
13197 |
|
13198 | const nodesToCluster = [];
|
13199 | for (let i = 0; i < this.body.nodeIndices.length; i++) {
|
13200 | const node = this.body.nodes[this.body.nodeIndices[i]];
|
13201 | if (node.edges.length >= hubsize) {
|
13202 | nodesToCluster.push(node.id);
|
13203 | }
|
13204 | }
|
13205 |
|
13206 | for (let i = 0; i < nodesToCluster.length; i++) {
|
13207 | this.clusterByConnection(nodesToCluster[i], options, true);
|
13208 | }
|
13209 |
|
13210 | this.body.emitter.emit("_dataChanged");
|
13211 | }
|
13212 |
|
13213 | |
13214 |
|
13215 |
|
13216 |
|
13217 |
|
13218 |
|
13219 | cluster(options = {}, refreshData = true) {
|
13220 | if (options.joinCondition === undefined) {
|
13221 | throw new Error(
|
13222 | "Cannot call clusterByNodeData without a joinCondition function in the options."
|
13223 | );
|
13224 | }
|
13225 |
|
13226 |
|
13227 | options = this._checkOptions(options);
|
13228 |
|
13229 | const childNodesObj = {};
|
13230 | const childEdgesObj = {};
|
13231 |
|
13232 |
|
13233 | forEach(this.body.nodes, (node, nodeId) => {
|
13234 | if (node.options && options.joinCondition(node.options) === true) {
|
13235 | childNodesObj[nodeId] = node;
|
13236 |
|
13237 |
|
13238 | forEach(node.edges, (edge) => {
|
13239 | if (this.clusteredEdges[edge.id] === undefined) {
|
13240 | childEdgesObj[edge.id] = edge;
|
13241 | }
|
13242 | });
|
13243 | }
|
13244 | });
|
13245 |
|
13246 | this._cluster(childNodesObj, childEdgesObj, options, refreshData);
|
13247 | }
|
13248 |
|
13249 | |
13250 |
|
13251 |
|
13252 |
|
13253 |
|
13254 |
|
13255 |
|
13256 | clusterByEdgeCount(edgeCount, options, refreshData = true) {
|
13257 | options = this._checkOptions(options);
|
13258 | const clusters = [];
|
13259 | const usedNodes = {};
|
13260 | let edge, edges, relevantEdgeCount;
|
13261 |
|
13262 | for (let i = 0; i < this.body.nodeIndices.length; i++) {
|
13263 | const childNodesObj = {};
|
13264 | const childEdgesObj = {};
|
13265 | const nodeId = this.body.nodeIndices[i];
|
13266 | const node = this.body.nodes[nodeId];
|
13267 |
|
13268 |
|
13269 | if (usedNodes[nodeId] === undefined) {
|
13270 | relevantEdgeCount = 0;
|
13271 | edges = [];
|
13272 | for (let j = 0; j < node.edges.length; j++) {
|
13273 | edge = node.edges[j];
|
13274 | if (this.clusteredEdges[edge.id] === undefined) {
|
13275 | if (edge.toId !== edge.fromId) {
|
13276 | relevantEdgeCount++;
|
13277 | }
|
13278 | edges.push(edge);
|
13279 | }
|
13280 | }
|
13281 |
|
13282 |
|
13283 | if (relevantEdgeCount === edgeCount) {
|
13284 | const checkJoinCondition = function (node) {
|
13285 | if (
|
13286 | options.joinCondition === undefined ||
|
13287 | options.joinCondition === null
|
13288 | ) {
|
13289 | return true;
|
13290 | }
|
13291 |
|
13292 | const clonedOptions = NetworkUtil.cloneOptions(node);
|
13293 | return options.joinCondition(clonedOptions);
|
13294 | };
|
13295 |
|
13296 | let gatheringSuccessful = true;
|
13297 | for (let j = 0; j < edges.length; j++) {
|
13298 | edge = edges[j];
|
13299 | const childNodeId = this._getConnectedId(edge, nodeId);
|
13300 |
|
13301 | if (checkJoinCondition(node)) {
|
13302 | childEdgesObj[edge.id] = edge;
|
13303 | childNodesObj[nodeId] = node;
|
13304 | childNodesObj[childNodeId] = this.body.nodes[childNodeId];
|
13305 | usedNodes[nodeId] = true;
|
13306 | } else {
|
13307 |
|
13308 | gatheringSuccessful = false;
|
13309 | break;
|
13310 | }
|
13311 | }
|
13312 |
|
13313 |
|
13314 | if (
|
13315 | Object.keys(childNodesObj).length > 0 &&
|
13316 | Object.keys(childEdgesObj).length > 0 &&
|
13317 | gatheringSuccessful === true
|
13318 | ) {
|
13319 | |
13320 |
|
13321 |
|
13322 |
|
13323 |
|
13324 | const findClusterData = function () {
|
13325 | for (let n = 0; n < clusters.length; ++n) {
|
13326 |
|
13327 | for (const m in childNodesObj) {
|
13328 | if (clusters[n].nodes[m] !== undefined) {
|
13329 | return clusters[n];
|
13330 | }
|
13331 | }
|
13332 | }
|
13333 |
|
13334 | return undefined;
|
13335 | };
|
13336 |
|
13337 |
|
13338 |
|
13339 | const foundCluster = findClusterData();
|
13340 | if (foundCluster !== undefined) {
|
13341 |
|
13342 | for (const m in childNodesObj) {
|
13343 | if (foundCluster.nodes[m] === undefined) {
|
13344 | foundCluster.nodes[m] = childNodesObj[m];
|
13345 | }
|
13346 | }
|
13347 |
|
13348 |
|
13349 | for (const m in childEdgesObj) {
|
13350 | if (foundCluster.edges[m] === undefined) {
|
13351 | foundCluster.edges[m] = childEdgesObj[m];
|
13352 | }
|
13353 | }
|
13354 | } else {
|
13355 |
|
13356 | clusters.push({ nodes: childNodesObj, edges: childEdgesObj });
|
13357 | }
|
13358 | }
|
13359 | }
|
13360 | }
|
13361 | }
|
13362 |
|
13363 | for (let i = 0; i < clusters.length; i++) {
|
13364 | this._cluster(clusters[i].nodes, clusters[i].edges, options, false);
|
13365 | }
|
13366 |
|
13367 | if (refreshData === true) {
|
13368 | this.body.emitter.emit("_dataChanged");
|
13369 | }
|
13370 | }
|
13371 |
|
13372 | |
13373 |
|
13374 |
|
13375 |
|
13376 |
|
13377 |
|
13378 | clusterOutliers(options, refreshData = true) {
|
13379 | this.clusterByEdgeCount(1, options, refreshData);
|
13380 | }
|
13381 |
|
13382 | |
13383 |
|
13384 |
|
13385 |
|
13386 |
|
13387 |
|
13388 | clusterBridges(options, refreshData = true) {
|
13389 | this.clusterByEdgeCount(2, options, refreshData);
|
13390 | }
|
13391 |
|
13392 | |
13393 |
|
13394 |
|
13395 |
|
13396 |
|
13397 |
|
13398 |
|
13399 | clusterByConnection(nodeId, options, refreshData = true) {
|
13400 |
|
13401 | if (nodeId === undefined) {
|
13402 | throw new Error("No nodeId supplied to clusterByConnection!");
|
13403 | }
|
13404 | if (this.body.nodes[nodeId] === undefined) {
|
13405 | throw new Error(
|
13406 | "The nodeId given to clusterByConnection does not exist!"
|
13407 | );
|
13408 | }
|
13409 |
|
13410 | const node = this.body.nodes[nodeId];
|
13411 | options = this._checkOptions(options, node);
|
13412 | if (options.clusterNodeProperties.x === undefined) {
|
13413 | options.clusterNodeProperties.x = node.x;
|
13414 | }
|
13415 | if (options.clusterNodeProperties.y === undefined) {
|
13416 | options.clusterNodeProperties.y = node.y;
|
13417 | }
|
13418 | if (options.clusterNodeProperties.fixed === undefined) {
|
13419 | options.clusterNodeProperties.fixed = {};
|
13420 | options.clusterNodeProperties.fixed.x = node.options.fixed.x;
|
13421 | options.clusterNodeProperties.fixed.y = node.options.fixed.y;
|
13422 | }
|
13423 |
|
13424 | const childNodesObj = {};
|
13425 | const childEdgesObj = {};
|
13426 | const parentNodeId = node.id;
|
13427 | const parentClonedOptions = NetworkUtil.cloneOptions(node);
|
13428 | childNodesObj[parentNodeId] = node;
|
13429 |
|
13430 |
|
13431 | for (let i = 0; i < node.edges.length; i++) {
|
13432 | const edge = node.edges[i];
|
13433 | if (this.clusteredEdges[edge.id] === undefined) {
|
13434 | const childNodeId = this._getConnectedId(edge, parentNodeId);
|
13435 |
|
13436 |
|
13437 | if (this.clusteredNodes[childNodeId] === undefined) {
|
13438 | if (childNodeId !== parentNodeId) {
|
13439 | if (options.joinCondition === undefined) {
|
13440 | childEdgesObj[edge.id] = edge;
|
13441 | childNodesObj[childNodeId] = this.body.nodes[childNodeId];
|
13442 | } else {
|
13443 |
|
13444 | const childClonedOptions = NetworkUtil.cloneOptions(
|
13445 | this.body.nodes[childNodeId]
|
13446 | );
|
13447 | if (
|
13448 | options.joinCondition(
|
13449 | parentClonedOptions,
|
13450 | childClonedOptions
|
13451 | ) === true
|
13452 | ) {
|
13453 | childEdgesObj[edge.id] = edge;
|
13454 | childNodesObj[childNodeId] = this.body.nodes[childNodeId];
|
13455 | }
|
13456 | }
|
13457 | } else {
|
13458 |
|
13459 | childEdgesObj[edge.id] = edge;
|
13460 | }
|
13461 | }
|
13462 | }
|
13463 | }
|
13464 | const childNodeIDs = Object.keys(childNodesObj).map(function (childNode) {
|
13465 | return childNodesObj[childNode].id;
|
13466 | });
|
13467 |
|
13468 | for (const childNodeKey in childNodesObj) {
|
13469 | if (!Object.prototype.hasOwnProperty.call(childNodesObj, childNodeKey))
|
13470 | continue;
|
13471 |
|
13472 | const childNode = childNodesObj[childNodeKey];
|
13473 | for (let y = 0; y < childNode.edges.length; y++) {
|
13474 | const childEdge = childNode.edges[y];
|
13475 | if (
|
13476 | childNodeIDs.indexOf(this._getConnectedId(childEdge, childNode.id)) >
|
13477 | -1
|
13478 | ) {
|
13479 | childEdgesObj[childEdge.id] = childEdge;
|
13480 | }
|
13481 | }
|
13482 | }
|
13483 | this._cluster(childNodesObj, childEdgesObj, options, refreshData);
|
13484 | }
|
13485 |
|
13486 | |
13487 |
|
13488 |
|
13489 |
|
13490 |
|
13491 |
|
13492 |
|
13493 |
|
13494 |
|
13495 |
|
13496 | _createClusterEdges(
|
13497 | childNodesObj,
|
13498 | childEdgesObj,
|
13499 | clusterNodeProperties,
|
13500 | clusterEdgeProperties
|
13501 | ) {
|
13502 | let edge, childNodeId, childNode, toId, fromId, otherNodeId;
|
13503 |
|
13504 |
|
13505 |
|
13506 | const childKeys = Object.keys(childNodesObj);
|
13507 | const createEdges = [];
|
13508 | for (let i = 0; i < childKeys.length; i++) {
|
13509 | childNodeId = childKeys[i];
|
13510 | childNode = childNodesObj[childNodeId];
|
13511 |
|
13512 |
|
13513 | for (let j = 0; j < childNode.edges.length; j++) {
|
13514 | edge = childNode.edges[j];
|
13515 |
|
13516 | if (this.clusteredEdges[edge.id] === undefined) {
|
13517 |
|
13518 | if (edge.toId == edge.fromId) {
|
13519 | childEdgesObj[edge.id] = edge;
|
13520 | } else {
|
13521 |
|
13522 | if (edge.toId == childNodeId) {
|
13523 |
|
13524 | toId = clusterNodeProperties.id;
|
13525 | fromId = edge.fromId;
|
13526 | otherNodeId = fromId;
|
13527 | } else {
|
13528 | toId = edge.toId;
|
13529 | fromId = clusterNodeProperties.id;
|
13530 | otherNodeId = toId;
|
13531 | }
|
13532 | }
|
13533 |
|
13534 |
|
13535 | if (childNodesObj[otherNodeId] === undefined) {
|
13536 | createEdges.push({ edge: edge, fromId: fromId, toId: toId });
|
13537 | }
|
13538 | }
|
13539 | }
|
13540 | }
|
13541 |
|
13542 |
|
13543 |
|
13544 |
|
13545 |
|
13546 |
|
13547 |
|
13548 |
|
13549 |
|
13550 | const newEdges = [];
|
13551 |
|
13552 | |
13553 |
|
13554 |
|
13555 |
|
13556 |
|
13557 |
|
13558 | const getNewEdge = function (createdEdge) {
|
13559 | for (let j = 0; j < newEdges.length; j++) {
|
13560 | const newEdge = newEdges[j];
|
13561 |
|
13562 |
|
13563 | const matchToDirection =
|
13564 | createdEdge.fromId === newEdge.fromId &&
|
13565 | createdEdge.toId === newEdge.toId;
|
13566 | const matchFromDirection =
|
13567 | createdEdge.fromId === newEdge.toId &&
|
13568 | createdEdge.toId === newEdge.fromId;
|
13569 |
|
13570 | if (matchToDirection || matchFromDirection) {
|
13571 | return newEdge;
|
13572 | }
|
13573 | }
|
13574 |
|
13575 | return null;
|
13576 | };
|
13577 |
|
13578 | for (let j = 0; j < createEdges.length; j++) {
|
13579 | const createdEdge = createEdges[j];
|
13580 | const edge = createdEdge.edge;
|
13581 | let newEdge = getNewEdge(createdEdge);
|
13582 |
|
13583 | if (newEdge === null) {
|
13584 |
|
13585 | newEdge = this._createClusteredEdge(
|
13586 | createdEdge.fromId,
|
13587 | createdEdge.toId,
|
13588 | edge,
|
13589 | clusterEdgeProperties
|
13590 | );
|
13591 |
|
13592 | newEdges.push(newEdge);
|
13593 | } else {
|
13594 | newEdge.clusteringEdgeReplacingIds.push(edge.id);
|
13595 | }
|
13596 |
|
13597 |
|
13598 | this.body.edges[edge.id].edgeReplacedById = newEdge.id;
|
13599 |
|
13600 |
|
13601 | this._backupEdgeOptions(edge);
|
13602 | edge.setOptions({ physics: false });
|
13603 | }
|
13604 | }
|
13605 |
|
13606 | |
13607 |
|
13608 |
|
13609 |
|
13610 |
|
13611 |
|
13612 |
|
13613 |
|
13614 | _checkOptions(options = {}) {
|
13615 | if (options.clusterEdgeProperties === undefined) {
|
13616 | options.clusterEdgeProperties = {};
|
13617 | }
|
13618 | if (options.clusterNodeProperties === undefined) {
|
13619 | options.clusterNodeProperties = {};
|
13620 | }
|
13621 |
|
13622 | return options;
|
13623 | }
|
13624 |
|
13625 | |
13626 |
|
13627 |
|
13628 |
|
13629 |
|
13630 |
|
13631 |
|
13632 |
|
13633 | _cluster(childNodesObj, childEdgesObj, options, refreshData = true) {
|
13634 |
|
13635 | const tmpNodesToRemove = [];
|
13636 | for (const nodeId in childNodesObj) {
|
13637 | if (Object.prototype.hasOwnProperty.call(childNodesObj, nodeId)) {
|
13638 | if (this.clusteredNodes[nodeId] !== undefined) {
|
13639 | tmpNodesToRemove.push(nodeId);
|
13640 | }
|
13641 | }
|
13642 | }
|
13643 |
|
13644 | for (let n = 0; n < tmpNodesToRemove.length; ++n) {
|
13645 | delete childNodesObj[tmpNodesToRemove[n]];
|
13646 | }
|
13647 |
|
13648 |
|
13649 | if (Object.keys(childNodesObj).length == 0) {
|
13650 | return;
|
13651 | }
|
13652 |
|
13653 |
|
13654 | if (
|
13655 | Object.keys(childNodesObj).length == 1 &&
|
13656 | options.clusterNodeProperties.allowSingleNodeCluster != true
|
13657 | ) {
|
13658 | return;
|
13659 | }
|
13660 |
|
13661 | let clusterNodeProperties = deepExtend({}, options.clusterNodeProperties);
|
13662 |
|
13663 |
|
13664 | if (options.processProperties !== undefined) {
|
13665 |
|
13666 | const childNodesOptions = [];
|
13667 | for (const nodeId in childNodesObj) {
|
13668 | if (Object.prototype.hasOwnProperty.call(childNodesObj, nodeId)) {
|
13669 | const clonedOptions = NetworkUtil.cloneOptions(childNodesObj[nodeId]);
|
13670 | childNodesOptions.push(clonedOptions);
|
13671 | }
|
13672 | }
|
13673 |
|
13674 |
|
13675 | const childEdgesOptions = [];
|
13676 | for (const edgeId in childEdgesObj) {
|
13677 | if (Object.prototype.hasOwnProperty.call(childEdgesObj, edgeId)) {
|
13678 |
|
13679 | if (edgeId.substr(0, 12) !== "clusterEdge:") {
|
13680 | const clonedOptions = NetworkUtil.cloneOptions(
|
13681 | childEdgesObj[edgeId],
|
13682 | "edge"
|
13683 | );
|
13684 | childEdgesOptions.push(clonedOptions);
|
13685 | }
|
13686 | }
|
13687 | }
|
13688 |
|
13689 | clusterNodeProperties = options.processProperties(
|
13690 | clusterNodeProperties,
|
13691 | childNodesOptions,
|
13692 | childEdgesOptions
|
13693 | );
|
13694 | if (!clusterNodeProperties) {
|
13695 | throw new Error(
|
13696 | "The processProperties function does not return properties!"
|
13697 | );
|
13698 | }
|
13699 | }
|
13700 |
|
13701 |
|
13702 | if (clusterNodeProperties.id === undefined) {
|
13703 | clusterNodeProperties.id = "cluster:" + v4();
|
13704 | }
|
13705 | const clusterId = clusterNodeProperties.id;
|
13706 |
|
13707 | if (clusterNodeProperties.label === undefined) {
|
13708 | clusterNodeProperties.label = "cluster";
|
13709 | }
|
13710 |
|
13711 |
|
13712 | let pos = undefined;
|
13713 | if (clusterNodeProperties.x === undefined) {
|
13714 | pos = this._getClusterPosition(childNodesObj);
|
13715 | clusterNodeProperties.x = pos.x;
|
13716 | }
|
13717 | if (clusterNodeProperties.y === undefined) {
|
13718 | if (pos === undefined) {
|
13719 | pos = this._getClusterPosition(childNodesObj);
|
13720 | }
|
13721 | clusterNodeProperties.y = pos.y;
|
13722 | }
|
13723 |
|
13724 |
|
13725 | clusterNodeProperties.id = clusterId;
|
13726 |
|
13727 |
|
13728 |
|
13729 | const clusterNode = this.body.functions.createNode(
|
13730 | clusterNodeProperties,
|
13731 | Cluster
|
13732 | );
|
13733 | clusterNode.containedNodes = childNodesObj;
|
13734 | clusterNode.containedEdges = childEdgesObj;
|
13735 |
|
13736 | clusterNode.clusterEdgeProperties = options.clusterEdgeProperties;
|
13737 |
|
13738 |
|
13739 | this.body.nodes[clusterNodeProperties.id] = clusterNode;
|
13740 |
|
13741 | this._clusterEdges(
|
13742 | childNodesObj,
|
13743 | childEdgesObj,
|
13744 | clusterNodeProperties,
|
13745 | options.clusterEdgeProperties
|
13746 | );
|
13747 |
|
13748 |
|
13749 | clusterNodeProperties.id = undefined;
|
13750 |
|
13751 |
|
13752 | if (refreshData === true) {
|
13753 | this.body.emitter.emit("_dataChanged");
|
13754 | }
|
13755 | }
|
13756 |
|
13757 | |
13758 |
|
13759 |
|
13760 |
|
13761 |
|
13762 | _backupEdgeOptions(edge) {
|
13763 | if (this.clusteredEdges[edge.id] === undefined) {
|
13764 | this.clusteredEdges[edge.id] = { physics: edge.options.physics };
|
13765 | }
|
13766 | }
|
13767 |
|
13768 | |
13769 |
|
13770 |
|
13771 |
|
13772 |
|
13773 | _restoreEdge(edge) {
|
13774 | const originalOptions = this.clusteredEdges[edge.id];
|
13775 | if (originalOptions !== undefined) {
|
13776 | edge.setOptions({ physics: originalOptions.physics });
|
13777 | delete this.clusteredEdges[edge.id];
|
13778 | }
|
13779 | }
|
13780 |
|
13781 | |
13782 |
|
13783 |
|
13784 |
|
13785 |
|
13786 |
|
13787 | isCluster(nodeId) {
|
13788 | if (this.body.nodes[nodeId] !== undefined) {
|
13789 | return this.body.nodes[nodeId].isCluster === true;
|
13790 | } else {
|
13791 | console.error("Node does not exist.");
|
13792 | return false;
|
13793 | }
|
13794 | }
|
13795 |
|
13796 | |
13797 |
|
13798 |
|
13799 |
|
13800 |
|
13801 |
|
13802 |
|
13803 | _getClusterPosition(childNodesObj) {
|
13804 | const childKeys = Object.keys(childNodesObj);
|
13805 | let minX = childNodesObj[childKeys[0]].x;
|
13806 | let maxX = childNodesObj[childKeys[0]].x;
|
13807 | let minY = childNodesObj[childKeys[0]].y;
|
13808 | let maxY = childNodesObj[childKeys[0]].y;
|
13809 | let node;
|
13810 | for (let i = 1; i < childKeys.length; i++) {
|
13811 | node = childNodesObj[childKeys[i]];
|
13812 | minX = node.x < minX ? node.x : minX;
|
13813 | maxX = node.x > maxX ? node.x : maxX;
|
13814 | minY = node.y < minY ? node.y : minY;
|
13815 | maxY = node.y > maxY ? node.y : maxY;
|
13816 | }
|
13817 |
|
13818 | return { x: 0.5 * (minX + maxX), y: 0.5 * (minY + maxY) };
|
13819 | }
|
13820 |
|
13821 | |
13822 |
|
13823 |
|
13824 |
|
13825 |
|
13826 |
|
13827 |
|
13828 | openCluster(clusterNodeId, options, refreshData = true) {
|
13829 |
|
13830 | if (clusterNodeId === undefined) {
|
13831 | throw new Error("No clusterNodeId supplied to openCluster.");
|
13832 | }
|
13833 |
|
13834 | const clusterNode = this.body.nodes[clusterNodeId];
|
13835 |
|
13836 | if (clusterNode === undefined) {
|
13837 | throw new Error(
|
13838 | "The clusterNodeId supplied to openCluster does not exist."
|
13839 | );
|
13840 | }
|
13841 | if (
|
13842 | clusterNode.isCluster !== true ||
|
13843 | clusterNode.containedNodes === undefined ||
|
13844 | clusterNode.containedEdges === undefined
|
13845 | ) {
|
13846 | throw new Error("The node:" + clusterNodeId + " is not a valid cluster.");
|
13847 | }
|
13848 |
|
13849 |
|
13850 | const stack = this.findNode(clusterNodeId);
|
13851 | const parentIndex = stack.indexOf(clusterNodeId) - 1;
|
13852 | if (parentIndex >= 0) {
|
13853 |
|
13854 | const parentClusterNodeId = stack[parentIndex];
|
13855 | const parentClusterNode = this.body.nodes[parentClusterNodeId];
|
13856 |
|
13857 |
|
13858 | parentClusterNode._openChildCluster(clusterNodeId);
|
13859 |
|
13860 |
|
13861 | delete this.body.nodes[clusterNodeId];
|
13862 | if (refreshData === true) {
|
13863 | this.body.emitter.emit("_dataChanged");
|
13864 | }
|
13865 |
|
13866 | return;
|
13867 | }
|
13868 |
|
13869 |
|
13870 | const containedNodes = clusterNode.containedNodes;
|
13871 | const containedEdges = clusterNode.containedEdges;
|
13872 |
|
13873 |
|
13874 | if (
|
13875 | options !== undefined &&
|
13876 | options.releaseFunction !== undefined &&
|
13877 | typeof options.releaseFunction === "function"
|
13878 | ) {
|
13879 | const positions = {};
|
13880 | const clusterPosition = { x: clusterNode.x, y: clusterNode.y };
|
13881 | for (const nodeId in containedNodes) {
|
13882 | if (Object.prototype.hasOwnProperty.call(containedNodes, nodeId)) {
|
13883 | const containedNode = this.body.nodes[nodeId];
|
13884 | positions[nodeId] = { x: containedNode.x, y: containedNode.y };
|
13885 | }
|
13886 | }
|
13887 | const newPositions = options.releaseFunction(clusterPosition, positions);
|
13888 |
|
13889 | for (const nodeId in containedNodes) {
|
13890 | if (Object.prototype.hasOwnProperty.call(containedNodes, nodeId)) {
|
13891 | const containedNode = this.body.nodes[nodeId];
|
13892 | if (newPositions[nodeId] !== undefined) {
|
13893 | containedNode.x =
|
13894 | newPositions[nodeId].x === undefined
|
13895 | ? clusterNode.x
|
13896 | : newPositions[nodeId].x;
|
13897 | containedNode.y =
|
13898 | newPositions[nodeId].y === undefined
|
13899 | ? clusterNode.y
|
13900 | : newPositions[nodeId].y;
|
13901 | }
|
13902 | }
|
13903 | }
|
13904 | } else {
|
13905 |
|
13906 | forEach(containedNodes, function (containedNode) {
|
13907 |
|
13908 | if (containedNode.options.fixed.x === false) {
|
13909 | containedNode.x = clusterNode.x;
|
13910 | }
|
13911 | if (containedNode.options.fixed.y === false) {
|
13912 | containedNode.y = clusterNode.y;
|
13913 | }
|
13914 | });
|
13915 | }
|
13916 |
|
13917 |
|
13918 | for (const nodeId in containedNodes) {
|
13919 | if (Object.prototype.hasOwnProperty.call(containedNodes, nodeId)) {
|
13920 | const containedNode = this.body.nodes[nodeId];
|
13921 |
|
13922 |
|
13923 | containedNode.vx = clusterNode.vx;
|
13924 | containedNode.vy = clusterNode.vy;
|
13925 |
|
13926 | containedNode.setOptions({ physics: true });
|
13927 |
|
13928 | delete this.clusteredNodes[nodeId];
|
13929 | }
|
13930 | }
|
13931 |
|
13932 |
|
13933 | const edgesToBeDeleted = [];
|
13934 | for (let i = 0; i < clusterNode.edges.length; i++) {
|
13935 | edgesToBeDeleted.push(clusterNode.edges[i]);
|
13936 | }
|
13937 |
|
13938 |
|
13939 | for (let i = 0; i < edgesToBeDeleted.length; i++) {
|
13940 | const edge = edgesToBeDeleted[i];
|
13941 | const otherNodeId = this._getConnectedId(edge, clusterNodeId);
|
13942 | const otherNode = this.clusteredNodes[otherNodeId];
|
13943 |
|
13944 | for (let j = 0; j < edge.clusteringEdgeReplacingIds.length; j++) {
|
13945 | const transferId = edge.clusteringEdgeReplacingIds[j];
|
13946 | const transferEdge = this.body.edges[transferId];
|
13947 | if (transferEdge === undefined) continue;
|
13948 |
|
13949 |
|
13950 | if (otherNode !== undefined) {
|
13951 |
|
13952 | const otherCluster = this.body.nodes[otherNode.clusterId];
|
13953 | otherCluster.containedEdges[transferEdge.id] = transferEdge;
|
13954 |
|
13955 |
|
13956 | delete containedEdges[transferEdge.id];
|
13957 |
|
13958 |
|
13959 | let fromId = transferEdge.fromId;
|
13960 | let toId = transferEdge.toId;
|
13961 | if (transferEdge.toId == otherNodeId) {
|
13962 | toId = otherNode.clusterId;
|
13963 | } else {
|
13964 | fromId = otherNode.clusterId;
|
13965 | }
|
13966 |
|
13967 |
|
13968 | this._createClusteredEdge(
|
13969 | fromId,
|
13970 | toId,
|
13971 | transferEdge,
|
13972 | otherCluster.clusterEdgeProperties,
|
13973 | { hidden: false, physics: true }
|
13974 | );
|
13975 | } else {
|
13976 | this._restoreEdge(transferEdge);
|
13977 | }
|
13978 | }
|
13979 |
|
13980 | edge.remove();
|
13981 | }
|
13982 |
|
13983 |
|
13984 | for (const edgeId in containedEdges) {
|
13985 | if (Object.prototype.hasOwnProperty.call(containedEdges, edgeId)) {
|
13986 | this._restoreEdge(containedEdges[edgeId]);
|
13987 | }
|
13988 | }
|
13989 |
|
13990 |
|
13991 | delete this.body.nodes[clusterNodeId];
|
13992 |
|
13993 | if (refreshData === true) {
|
13994 | this.body.emitter.emit("_dataChanged");
|
13995 | }
|
13996 | }
|
13997 |
|
13998 | |
13999 |
|
14000 |
|
14001 |
|
14002 |
|
14003 | getNodesInCluster(clusterId) {
|
14004 | const nodesArray = [];
|
14005 | if (this.isCluster(clusterId) === true) {
|
14006 | const containedNodes = this.body.nodes[clusterId].containedNodes;
|
14007 | for (const nodeId in containedNodes) {
|
14008 | if (Object.prototype.hasOwnProperty.call(containedNodes, nodeId)) {
|
14009 | nodesArray.push(this.body.nodes[nodeId].id);
|
14010 | }
|
14011 | }
|
14012 | }
|
14013 |
|
14014 | return nodesArray;
|
14015 | }
|
14016 |
|
14017 | |
14018 |
|
14019 |
|
14020 |
|
14021 |
|
14022 |
|
14023 |
|
14024 |
|
14025 | findNode(nodeId) {
|
14026 | const stack = [];
|
14027 | const max = 100;
|
14028 | let counter = 0;
|
14029 | let node;
|
14030 |
|
14031 | while (this.clusteredNodes[nodeId] !== undefined && counter < max) {
|
14032 | node = this.body.nodes[nodeId];
|
14033 | if (node === undefined) return [];
|
14034 | stack.push(node.id);
|
14035 |
|
14036 | nodeId = this.clusteredNodes[nodeId].clusterId;
|
14037 | counter++;
|
14038 | }
|
14039 |
|
14040 | node = this.body.nodes[nodeId];
|
14041 | if (node === undefined) return [];
|
14042 | stack.push(node.id);
|
14043 |
|
14044 | stack.reverse();
|
14045 | return stack;
|
14046 | }
|
14047 |
|
14048 | |
14049 |
|
14050 |
|
14051 |
|
14052 |
|
14053 |
|
14054 | updateClusteredNode(clusteredNodeId, newOptions) {
|
14055 | if (clusteredNodeId === undefined) {
|
14056 | throw new Error("No clusteredNodeId supplied to updateClusteredNode.");
|
14057 | }
|
14058 | if (newOptions === undefined) {
|
14059 | throw new Error("No newOptions supplied to updateClusteredNode.");
|
14060 | }
|
14061 | if (this.body.nodes[clusteredNodeId] === undefined) {
|
14062 | throw new Error(
|
14063 | "The clusteredNodeId supplied to updateClusteredNode does not exist."
|
14064 | );
|
14065 | }
|
14066 |
|
14067 | this.body.nodes[clusteredNodeId].setOptions(newOptions);
|
14068 | this.body.emitter.emit("_dataChanged");
|
14069 | }
|
14070 |
|
14071 | |
14072 |
|
14073 |
|
14074 |
|
14075 |
|
14076 |
|
14077 | updateEdge(startEdgeId, newOptions) {
|
14078 | if (startEdgeId === undefined) {
|
14079 | throw new Error("No startEdgeId supplied to updateEdge.");
|
14080 | }
|
14081 | if (newOptions === undefined) {
|
14082 | throw new Error("No newOptions supplied to updateEdge.");
|
14083 | }
|
14084 | if (this.body.edges[startEdgeId] === undefined) {
|
14085 | throw new Error("The startEdgeId supplied to updateEdge does not exist.");
|
14086 | }
|
14087 |
|
14088 | const allEdgeIds = this.getClusteredEdges(startEdgeId);
|
14089 | for (let i = 0; i < allEdgeIds.length; i++) {
|
14090 | const edge = this.body.edges[allEdgeIds[i]];
|
14091 | edge.setOptions(newOptions);
|
14092 | }
|
14093 | this.body.emitter.emit("_dataChanged");
|
14094 | }
|
14095 |
|
14096 | |
14097 |
|
14098 |
|
14099 |
|
14100 |
|
14101 |
|
14102 | getClusteredEdges(edgeId) {
|
14103 | const stack = [];
|
14104 | const max = 100;
|
14105 | let counter = 0;
|
14106 |
|
14107 | while (
|
14108 | edgeId !== undefined &&
|
14109 | this.body.edges[edgeId] !== undefined &&
|
14110 | counter < max
|
14111 | ) {
|
14112 | stack.push(this.body.edges[edgeId].id);
|
14113 | edgeId = this.body.edges[edgeId].edgeReplacedById;
|
14114 | counter++;
|
14115 | }
|
14116 | stack.reverse();
|
14117 | return stack;
|
14118 | }
|
14119 |
|
14120 | |
14121 |
|
14122 |
|
14123 |
|
14124 |
|
14125 |
|
14126 |
|
14127 |
|
14128 | getBaseEdge(clusteredEdgeId) {
|
14129 |
|
14130 | return this.getBaseEdges(clusteredEdgeId)[0];
|
14131 | }
|
14132 |
|
14133 | |
14134 |
|
14135 |
|
14136 |
|
14137 |
|
14138 |
|
14139 | getBaseEdges(clusteredEdgeId) {
|
14140 | const IdsToHandle = [clusteredEdgeId];
|
14141 | const doneIds = [];
|
14142 | const foundIds = [];
|
14143 | const max = 100;
|
14144 | let counter = 0;
|
14145 |
|
14146 | while (IdsToHandle.length > 0 && counter < max) {
|
14147 | const nextId = IdsToHandle.pop();
|
14148 | if (nextId === undefined) continue;
|
14149 | const nextEdge = this.body.edges[nextId];
|
14150 | if (nextEdge === undefined) continue;
|
14151 | counter++;
|
14152 |
|
14153 | const replacingIds = nextEdge.clusteringEdgeReplacingIds;
|
14154 | if (replacingIds === undefined) {
|
14155 |
|
14156 | foundIds.push(nextId);
|
14157 | } else {
|
14158 |
|
14159 | for (let i = 0; i < replacingIds.length; ++i) {
|
14160 | const replacingId = replacingIds[i];
|
14161 |
|
14162 |
|
14163 |
|
14164 | if (
|
14165 | IdsToHandle.indexOf(replacingIds) !== -1 ||
|
14166 | doneIds.indexOf(replacingIds) !== -1
|
14167 | ) {
|
14168 | continue;
|
14169 | }
|
14170 |
|
14171 | IdsToHandle.push(replacingId);
|
14172 | }
|
14173 | }
|
14174 |
|
14175 | doneIds.push(nextId);
|
14176 | }
|
14177 |
|
14178 | return foundIds;
|
14179 | }
|
14180 |
|
14181 | |
14182 |
|
14183 |
|
14184 |
|
14185 |
|
14186 |
|
14187 |
|
14188 |
|
14189 | _getConnectedId(edge, nodeId) {
|
14190 | if (edge.toId != nodeId) {
|
14191 | return edge.toId;
|
14192 | } else if (edge.fromId != nodeId) {
|
14193 | return edge.fromId;
|
14194 | } else {
|
14195 | return edge.fromId;
|
14196 | }
|
14197 | }
|
14198 |
|
14199 | |
14200 |
|
14201 |
|
14202 |
|
14203 |
|
14204 |
|
14205 |
|
14206 | _getHubSize() {
|
14207 | let average = 0;
|
14208 | let averageSquared = 0;
|
14209 | let hubCounter = 0;
|
14210 | let largestHub = 0;
|
14211 |
|
14212 | for (let i = 0; i < this.body.nodeIndices.length; i++) {
|
14213 | const node = this.body.nodes[this.body.nodeIndices[i]];
|
14214 | if (node.edges.length > largestHub) {
|
14215 | largestHub = node.edges.length;
|
14216 | }
|
14217 | average += node.edges.length;
|
14218 | averageSquared += Math.pow(node.edges.length, 2);
|
14219 | hubCounter += 1;
|
14220 | }
|
14221 | average = average / hubCounter;
|
14222 | averageSquared = averageSquared / hubCounter;
|
14223 |
|
14224 | const variance = averageSquared - Math.pow(average, 2);
|
14225 | const standardDeviation = Math.sqrt(variance);
|
14226 |
|
14227 | let hubThreshold = Math.floor(average + 2 * standardDeviation);
|
14228 |
|
14229 |
|
14230 | if (hubThreshold > largestHub) {
|
14231 | hubThreshold = largestHub;
|
14232 | }
|
14233 |
|
14234 | return hubThreshold;
|
14235 | }
|
14236 |
|
14237 | |
14238 |
|
14239 |
|
14240 |
|
14241 |
|
14242 |
|
14243 |
|
14244 |
|
14245 |
|
14246 |
|
14247 |
|
14248 | _createClusteredEdge(
|
14249 | fromId,
|
14250 | toId,
|
14251 | baseEdge,
|
14252 | clusterEdgeProperties,
|
14253 | extraOptions
|
14254 | ) {
|
14255 |
|
14256 | const clonedOptions = NetworkUtil.cloneOptions(baseEdge, "edge");
|
14257 |
|
14258 | deepExtend(clonedOptions, clusterEdgeProperties);
|
14259 |
|
14260 |
|
14261 | clonedOptions.from = fromId;
|
14262 | clonedOptions.to = toId;
|
14263 | clonedOptions.id = "clusterEdge:" + v4();
|
14264 |
|
14265 |
|
14266 | if (extraOptions !== undefined) {
|
14267 | deepExtend(clonedOptions, extraOptions);
|
14268 | }
|
14269 |
|
14270 | const newEdge = this.body.functions.createEdge(clonedOptions);
|
14271 | newEdge.clusteringEdgeReplacingIds = [baseEdge.id];
|
14272 | newEdge.connect();
|
14273 |
|
14274 |
|
14275 | this.body.edges[newEdge.id] = newEdge;
|
14276 |
|
14277 | return newEdge;
|
14278 | }
|
14279 |
|
14280 | |
14281 |
|
14282 |
|
14283 |
|
14284 |
|
14285 |
|
14286 |
|
14287 |
|
14288 |
|
14289 | _clusterEdges(childNodes, childEdges, clusterNode, clusterEdgeProperties) {
|
14290 | if (childEdges instanceof Edge) {
|
14291 | const edge = childEdges;
|
14292 | const obj = {};
|
14293 | obj[edge.id] = edge;
|
14294 | childEdges = obj;
|
14295 | }
|
14296 |
|
14297 | if (childNodes instanceof Node) {
|
14298 | const node = childNodes;
|
14299 | const obj = {};
|
14300 | obj[node.id] = node;
|
14301 | childNodes = obj;
|
14302 | }
|
14303 |
|
14304 | if (clusterNode === undefined || clusterNode === null) {
|
14305 | throw new Error("_clusterEdges: parameter clusterNode required");
|
14306 | }
|
14307 |
|
14308 | if (clusterEdgeProperties === undefined) {
|
14309 |
|
14310 | clusterEdgeProperties = clusterNode.clusterEdgeProperties;
|
14311 | }
|
14312 |
|
14313 |
|
14314 |
|
14315 | this._createClusterEdges(
|
14316 | childNodes,
|
14317 | childEdges,
|
14318 | clusterNode,
|
14319 | clusterEdgeProperties
|
14320 | );
|
14321 |
|
14322 |
|
14323 | for (const edgeId in childEdges) {
|
14324 | if (Object.prototype.hasOwnProperty.call(childEdges, edgeId)) {
|
14325 | if (this.body.edges[edgeId] !== undefined) {
|
14326 | const edge = this.body.edges[edgeId];
|
14327 |
|
14328 | this._backupEdgeOptions(edge);
|
14329 |
|
14330 | edge.setOptions({ physics: false });
|
14331 | }
|
14332 | }
|
14333 | }
|
14334 |
|
14335 |
|
14336 | for (const nodeId in childNodes) {
|
14337 | if (Object.prototype.hasOwnProperty.call(childNodes, nodeId)) {
|
14338 | this.clusteredNodes[nodeId] = {
|
14339 | clusterId: clusterNode.id,
|
14340 | node: this.body.nodes[nodeId],
|
14341 | };
|
14342 | this.body.nodes[nodeId].setOptions({ physics: false });
|
14343 | }
|
14344 | }
|
14345 | }
|
14346 |
|
14347 | |
14348 |
|
14349 |
|
14350 |
|
14351 |
|
14352 |
|
14353 |
|
14354 |
|
14355 |
|
14356 |
|
14357 |
|
14358 | _getClusterNodeForNode(nodeId) {
|
14359 | if (nodeId === undefined) return undefined;
|
14360 | const clusteredNode = this.clusteredNodes[nodeId];
|
14361 |
|
14362 |
|
14363 | if (clusteredNode === undefined) return undefined;
|
14364 | const clusterId = clusteredNode.clusterId;
|
14365 | if (clusterId === undefined) return undefined;
|
14366 |
|
14367 | return this.body.nodes[clusterId];
|
14368 | }
|
14369 |
|
14370 | |
14371 |
|
14372 |
|
14373 |
|
14374 |
|
14375 |
|
14376 |
|
14377 |
|
14378 |
|
14379 |
|
14380 | _filter(arr, callback) {
|
14381 | const ret = [];
|
14382 |
|
14383 | forEach(arr, (item) => {
|
14384 | if (callback(item)) {
|
14385 | ret.push(item);
|
14386 | }
|
14387 | });
|
14388 |
|
14389 | return ret;
|
14390 | }
|
14391 |
|
14392 | |
14393 |
|
14394 |
|
14395 |
|
14396 |
|
14397 |
|
14398 |
|
14399 |
|
14400 |
|
14401 | _updateState() {
|
14402 | let nodeId;
|
14403 | const deletedNodeIds = [];
|
14404 | const deletedEdgeIds = {};
|
14405 |
|
14406 | |
14407 |
|
14408 |
|
14409 |
|
14410 |
|
14411 | const eachClusterNode = (callback) => {
|
14412 | forEach(this.body.nodes, (node) => {
|
14413 | if (node.isCluster === true) {
|
14414 | callback(node);
|
14415 | }
|
14416 | });
|
14417 | };
|
14418 |
|
14419 |
|
14420 |
|
14421 |
|
14422 |
|
14423 |
|
14424 | for (nodeId in this.clusteredNodes) {
|
14425 | if (!Object.prototype.hasOwnProperty.call(this.clusteredNodes, nodeId))
|
14426 | continue;
|
14427 | const node = this.body.nodes[nodeId];
|
14428 |
|
14429 | if (node === undefined) {
|
14430 | deletedNodeIds.push(nodeId);
|
14431 | }
|
14432 | }
|
14433 |
|
14434 |
|
14435 | eachClusterNode(function (clusterNode) {
|
14436 | for (let n = 0; n < deletedNodeIds.length; n++) {
|
14437 | delete clusterNode.containedNodes[deletedNodeIds[n]];
|
14438 | }
|
14439 | });
|
14440 |
|
14441 |
|
14442 | for (let n = 0; n < deletedNodeIds.length; n++) {
|
14443 | delete this.clusteredNodes[deletedNodeIds[n]];
|
14444 | }
|
14445 |
|
14446 |
|
14447 |
|
14448 |
|
14449 |
|
14450 |
|
14451 | forEach(this.clusteredEdges, (edgeId) => {
|
14452 | const edge = this.body.edges[edgeId];
|
14453 | if (edge === undefined || !edge.endPointsValid()) {
|
14454 | deletedEdgeIds[edgeId] = edgeId;
|
14455 | }
|
14456 | });
|
14457 |
|
14458 |
|
14459 |
|
14460 |
|
14461 | eachClusterNode(function (clusterNode) {
|
14462 | forEach(clusterNode.containedEdges, (edge, edgeId) => {
|
14463 | if (!edge.endPointsValid() && !deletedEdgeIds[edgeId]) {
|
14464 | deletedEdgeIds[edgeId] = edgeId;
|
14465 | }
|
14466 | });
|
14467 | });
|
14468 |
|
14469 |
|
14470 |
|
14471 | forEach(this.body.edges, (edge, edgeId) => {
|
14472 |
|
14473 | let isValid = true;
|
14474 | const replacedIds = edge.clusteringEdgeReplacingIds;
|
14475 | if (replacedIds !== undefined) {
|
14476 | let numValid = 0;
|
14477 |
|
14478 | forEach(replacedIds, (containedEdgeId) => {
|
14479 | const containedEdge = this.body.edges[containedEdgeId];
|
14480 |
|
14481 | if (containedEdge !== undefined && containedEdge.endPointsValid()) {
|
14482 | numValid += 1;
|
14483 | }
|
14484 | });
|
14485 |
|
14486 | isValid = numValid > 0;
|
14487 | }
|
14488 |
|
14489 | if (!edge.endPointsValid() || !isValid) {
|
14490 | deletedEdgeIds[edgeId] = edgeId;
|
14491 | }
|
14492 | });
|
14493 |
|
14494 |
|
14495 | eachClusterNode((clusterNode) => {
|
14496 | forEach(deletedEdgeIds, (deletedEdgeId) => {
|
14497 | delete clusterNode.containedEdges[deletedEdgeId];
|
14498 |
|
14499 | forEach(clusterNode.edges, (edge, m) => {
|
14500 | if (edge.id === deletedEdgeId) {
|
14501 | clusterNode.edges[m] = null;
|
14502 | return;
|
14503 | }
|
14504 |
|
14505 | edge.clusteringEdgeReplacingIds = this._filter(
|
14506 | edge.clusteringEdgeReplacingIds,
|
14507 | function (id) {
|
14508 | return !deletedEdgeIds[id];
|
14509 | }
|
14510 | );
|
14511 | });
|
14512 |
|
14513 |
|
14514 | clusterNode.edges = this._filter(clusterNode.edges, function (item) {
|
14515 | return item !== null;
|
14516 | });
|
14517 | });
|
14518 | });
|
14519 |
|
14520 |
|
14521 | forEach(deletedEdgeIds, (edgeId) => {
|
14522 | delete this.clusteredEdges[edgeId];
|
14523 | });
|
14524 |
|
14525 |
|
14526 |
|
14527 |
|
14528 | forEach(deletedEdgeIds, (edgeId) => {
|
14529 | delete this.body.edges[edgeId];
|
14530 | });
|
14531 |
|
14532 |
|
14533 |
|
14534 |
|
14535 |
|
14536 |
|
14537 | const ids = Object.keys(this.body.edges);
|
14538 | forEach(ids, (edgeId) => {
|
14539 | const edge = this.body.edges[edgeId];
|
14540 |
|
14541 | const shouldBeClustered =
|
14542 | this._isClusteredNode(edge.fromId) || this._isClusteredNode(edge.toId);
|
14543 | if (shouldBeClustered === this._isClusteredEdge(edge.id)) {
|
14544 | return;
|
14545 | }
|
14546 |
|
14547 | if (shouldBeClustered) {
|
14548 |
|
14549 | const clusterFrom = this._getClusterNodeForNode(edge.fromId);
|
14550 | if (clusterFrom !== undefined) {
|
14551 | this._clusterEdges(this.body.nodes[edge.fromId], edge, clusterFrom);
|
14552 | }
|
14553 |
|
14554 | const clusterTo = this._getClusterNodeForNode(edge.toId);
|
14555 | if (clusterTo !== undefined) {
|
14556 | this._clusterEdges(this.body.nodes[edge.toId], edge, clusterTo);
|
14557 | }
|
14558 |
|
14559 |
|
14560 |
|
14561 | } else {
|
14562 | delete this._clusterEdges[edgeId];
|
14563 | this._restoreEdge(edge);
|
14564 |
|
14565 |
|
14566 |
|
14567 |
|
14568 |
|
14569 |
|
14570 | }
|
14571 | });
|
14572 |
|
14573 |
|
14574 | let changed = false;
|
14575 | let continueLoop = true;
|
14576 | while (continueLoop) {
|
14577 | const clustersToOpen = [];
|
14578 |
|
14579 |
|
14580 | eachClusterNode(function (clusterNode) {
|
14581 | const numNodes = Object.keys(clusterNode.containedNodes).length;
|
14582 | const allowSingle = clusterNode.options.allowSingleNodeCluster === true;
|
14583 | if ((allowSingle && numNodes < 1) || (!allowSingle && numNodes < 2)) {
|
14584 | clustersToOpen.push(clusterNode.id);
|
14585 | }
|
14586 | });
|
14587 |
|
14588 |
|
14589 | for (let n = 0; n < clustersToOpen.length; ++n) {
|
14590 | this.openCluster(
|
14591 | clustersToOpen[n],
|
14592 | {},
|
14593 | false
|
14594 | );
|
14595 | }
|
14596 |
|
14597 | continueLoop = clustersToOpen.length > 0;
|
14598 | changed = changed || continueLoop;
|
14599 | }
|
14600 |
|
14601 | if (changed) {
|
14602 | this._updateState();
|
14603 | }
|
14604 | }
|
14605 |
|
14606 | |
14607 |
|
14608 |
|
14609 |
|
14610 |
|
14611 |
|
14612 | _isClusteredNode(nodeId) {
|
14613 | return this.clusteredNodes[nodeId] !== undefined;
|
14614 | }
|
14615 |
|
14616 | |
14617 |
|
14618 |
|
14619 |
|
14620 |
|
14621 |
|
14622 |
|
14623 |
|
14624 |
|
14625 |
|
14626 | _isClusteredEdge(edgeId) {
|
14627 | return this.clusteredEdges[edgeId] !== undefined;
|
14628 | }
|
14629 | }
|
14630 |
|
14631 |
|
14632 |
|
14633 |
|
14634 |
|
14635 |
|
14636 |
|
14637 |
|
14638 |
|
14639 |
|
14640 |
|
14641 |
|
14642 |
|
14643 |
|
14644 |
|
14645 |
|
14646 |
|
14647 |
|
14648 |
|
14649 |
|
14650 |
|
14651 |
|
14652 | function _initRequestAnimationFrame() {
|
14653 | let func;
|
14654 |
|
14655 | if (window !== undefined) {
|
14656 | func =
|
14657 | window.requestAnimationFrame ||
|
14658 | window.mozRequestAnimationFrame ||
|
14659 | window.webkitRequestAnimationFrame ||
|
14660 | window.msRequestAnimationFrame;
|
14661 | }
|
14662 |
|
14663 | if (func === undefined) {
|
14664 |
|
14665 | window.requestAnimationFrame = function (callback) {
|
14666 |
|
14667 | callback();
|
14668 | };
|
14669 | } else {
|
14670 | window.requestAnimationFrame = func;
|
14671 | }
|
14672 | }
|
14673 |
|
14674 |
|
14675 |
|
14676 |
|
14677 | class CanvasRenderer {
|
14678 | |
14679 |
|
14680 |
|
14681 |
|
14682 | constructor(body, canvas) {
|
14683 | _initRequestAnimationFrame();
|
14684 | this.body = body;
|
14685 | this.canvas = canvas;
|
14686 |
|
14687 | this.redrawRequested = false;
|
14688 | this.renderTimer = undefined;
|
14689 | this.requiresTimeout = true;
|
14690 | this.renderingActive = false;
|
14691 | this.renderRequests = 0;
|
14692 | this.allowRedraw = true;
|
14693 |
|
14694 | this.dragging = false;
|
14695 | this.zooming = false;
|
14696 | this.options = {};
|
14697 | this.defaultOptions = {
|
14698 | hideEdgesOnDrag: false,
|
14699 | hideEdgesOnZoom: false,
|
14700 | hideNodesOnDrag: false,
|
14701 | };
|
14702 | Object.assign(this.options, this.defaultOptions);
|
14703 |
|
14704 | this._determineBrowserMethod();
|
14705 | this.bindEventListeners();
|
14706 | }
|
14707 |
|
14708 | |
14709 |
|
14710 |
|
14711 | bindEventListeners() {
|
14712 | this.body.emitter.on("dragStart", () => {
|
14713 | this.dragging = true;
|
14714 | });
|
14715 | this.body.emitter.on("dragEnd", () => {
|
14716 | this.dragging = false;
|
14717 | });
|
14718 | this.body.emitter.on("zoom", () => {
|
14719 | this.zooming = true;
|
14720 | window.clearTimeout(this.zoomTimeoutId);
|
14721 | this.zoomTimeoutId = window.setTimeout(() => {
|
14722 | this.zooming = false;
|
14723 | this._requestRedraw.bind(this)();
|
14724 | }, 250);
|
14725 | });
|
14726 | this.body.emitter.on("_resizeNodes", () => {
|
14727 | this._resizeNodes();
|
14728 | });
|
14729 | this.body.emitter.on("_redraw", () => {
|
14730 | if (this.renderingActive === false) {
|
14731 | this._redraw();
|
14732 | }
|
14733 | });
|
14734 | this.body.emitter.on("_blockRedraw", () => {
|
14735 | this.allowRedraw = false;
|
14736 | });
|
14737 | this.body.emitter.on("_allowRedraw", () => {
|
14738 | this.allowRedraw = true;
|
14739 | this.redrawRequested = false;
|
14740 | });
|
14741 | this.body.emitter.on("_requestRedraw", this._requestRedraw.bind(this));
|
14742 | this.body.emitter.on("_startRendering", () => {
|
14743 | this.renderRequests += 1;
|
14744 | this.renderingActive = true;
|
14745 | this._startRendering();
|
14746 | });
|
14747 | this.body.emitter.on("_stopRendering", () => {
|
14748 | this.renderRequests -= 1;
|
14749 | this.renderingActive = this.renderRequests > 0;
|
14750 | this.renderTimer = undefined;
|
14751 | });
|
14752 | this.body.emitter.on("destroy", () => {
|
14753 | this.renderRequests = 0;
|
14754 | this.allowRedraw = false;
|
14755 | this.renderingActive = false;
|
14756 | if (this.requiresTimeout === true) {
|
14757 | clearTimeout(this.renderTimer);
|
14758 | } else {
|
14759 | window.cancelAnimationFrame(this.renderTimer);
|
14760 | }
|
14761 | this.body.emitter.off();
|
14762 | });
|
14763 | }
|
14764 |
|
14765 | |
14766 |
|
14767 |
|
14768 |
|
14769 | setOptions(options) {
|
14770 | if (options !== undefined) {
|
14771 | const fields = ["hideEdgesOnDrag", "hideEdgesOnZoom", "hideNodesOnDrag"];
|
14772 | selectiveDeepExtend(fields, this.options, options);
|
14773 | }
|
14774 | }
|
14775 |
|
14776 | |
14777 |
|
14778 |
|
14779 |
|
14780 |
|
14781 |
|
14782 |
|
14783 |
|
14784 |
|
14785 |
|
14786 | _requestNextFrame(callback, delay) {
|
14787 |
|
14788 |
|
14789 |
|
14790 |
|
14791 |
|
14792 |
|
14793 |
|
14794 |
|
14795 |
|
14796 |
|
14797 |
|
14798 | if (typeof window === "undefined") return;
|
14799 |
|
14800 | let timer;
|
14801 |
|
14802 | const myWindow = window;
|
14803 |
|
14804 |
|
14805 | if (this.requiresTimeout === true) {
|
14806 |
|
14807 | timer = myWindow.setTimeout(callback, delay);
|
14808 | } else {
|
14809 | if (myWindow.requestAnimationFrame) {
|
14810 | timer = myWindow.requestAnimationFrame(callback);
|
14811 | }
|
14812 | }
|
14813 |
|
14814 | return timer;
|
14815 | }
|
14816 |
|
14817 | |
14818 |
|
14819 |
|
14820 |
|
14821 | _startRendering() {
|
14822 | if (this.renderingActive === true) {
|
14823 | if (this.renderTimer === undefined) {
|
14824 | this.renderTimer = this._requestNextFrame(
|
14825 | this._renderStep.bind(this),
|
14826 | this.simulationInterval
|
14827 | );
|
14828 | }
|
14829 | }
|
14830 | }
|
14831 |
|
14832 | |
14833 |
|
14834 |
|
14835 |
|
14836 | _renderStep() {
|
14837 | if (this.renderingActive === true) {
|
14838 |
|
14839 | this.renderTimer = undefined;
|
14840 |
|
14841 | if (this.requiresTimeout === true) {
|
14842 |
|
14843 | this._startRendering();
|
14844 | }
|
14845 |
|
14846 | this._redraw();
|
14847 |
|
14848 | if (this.requiresTimeout === false) {
|
14849 |
|
14850 | this._startRendering();
|
14851 | }
|
14852 | }
|
14853 | }
|
14854 |
|
14855 | |
14856 |
|
14857 |
|
14858 |
|
14859 | redraw() {
|
14860 | this.body.emitter.emit("setSize");
|
14861 | this._redraw();
|
14862 | }
|
14863 |
|
14864 | |
14865 |
|
14866 |
|
14867 |
|
14868 |
|
14869 | _requestRedraw() {
|
14870 | if (
|
14871 | this.redrawRequested !== true &&
|
14872 | this.renderingActive === false &&
|
14873 | this.allowRedraw === true
|
14874 | ) {
|
14875 | this.redrawRequested = true;
|
14876 | this._requestNextFrame(() => {
|
14877 | this._redraw(false);
|
14878 | }, 0);
|
14879 | }
|
14880 | }
|
14881 |
|
14882 | |
14883 |
|
14884 |
|
14885 |
|
14886 |
|
14887 |
|
14888 |
|
14889 | _redraw(hidden = false) {
|
14890 | if (this.allowRedraw === true) {
|
14891 | this.body.emitter.emit("initRedraw");
|
14892 |
|
14893 | this.redrawRequested = false;
|
14894 |
|
14895 | const drawLater = {
|
14896 | drawExternalLabels: null,
|
14897 | };
|
14898 |
|
14899 |
|
14900 | if (
|
14901 | this.canvas.frame.canvas.width === 0 ||
|
14902 | this.canvas.frame.canvas.height === 0
|
14903 | ) {
|
14904 | this.canvas.setSize();
|
14905 | }
|
14906 |
|
14907 | this.canvas.setTransform();
|
14908 |
|
14909 | const ctx = this.canvas.getContext();
|
14910 |
|
14911 |
|
14912 | const w = this.canvas.frame.canvas.clientWidth;
|
14913 | const h = this.canvas.frame.canvas.clientHeight;
|
14914 | ctx.clearRect(0, 0, w, h);
|
14915 |
|
14916 |
|
14917 | if (this.canvas.frame.clientWidth === 0) {
|
14918 | return;
|
14919 | }
|
14920 |
|
14921 |
|
14922 | ctx.save();
|
14923 | ctx.translate(this.body.view.translation.x, this.body.view.translation.y);
|
14924 | ctx.scale(this.body.view.scale, this.body.view.scale);
|
14925 |
|
14926 | ctx.beginPath();
|
14927 | this.body.emitter.emit("beforeDrawing", ctx);
|
14928 | ctx.closePath();
|
14929 |
|
14930 | if (hidden === false) {
|
14931 | if (
|
14932 | (this.dragging === false ||
|
14933 | (this.dragging === true &&
|
14934 | this.options.hideEdgesOnDrag === false)) &&
|
14935 | (this.zooming === false ||
|
14936 | (this.zooming === true && this.options.hideEdgesOnZoom === false))
|
14937 | ) {
|
14938 | this._drawEdges(ctx);
|
14939 | }
|
14940 | }
|
14941 |
|
14942 | if (
|
14943 | this.dragging === false ||
|
14944 | (this.dragging === true && this.options.hideNodesOnDrag === false)
|
14945 | ) {
|
14946 | const { drawExternalLabels } = this._drawNodes(ctx, hidden);
|
14947 | drawLater.drawExternalLabels = drawExternalLabels;
|
14948 | }
|
14949 |
|
14950 |
|
14951 | if (hidden === false) {
|
14952 | if (
|
14953 | (this.dragging === false ||
|
14954 | (this.dragging === true &&
|
14955 | this.options.hideEdgesOnDrag === false)) &&
|
14956 | (this.zooming === false ||
|
14957 | (this.zooming === true && this.options.hideEdgesOnZoom === false))
|
14958 | ) {
|
14959 | this._drawArrows(ctx);
|
14960 | }
|
14961 | }
|
14962 |
|
14963 | if (drawLater.drawExternalLabels != null) {
|
14964 | drawLater.drawExternalLabels();
|
14965 | }
|
14966 |
|
14967 | if (hidden === false) {
|
14968 | this._drawSelectionBox(ctx);
|
14969 | }
|
14970 |
|
14971 | ctx.beginPath();
|
14972 | this.body.emitter.emit("afterDrawing", ctx);
|
14973 | ctx.closePath();
|
14974 |
|
14975 |
|
14976 | ctx.restore();
|
14977 | if (hidden === true) {
|
14978 | ctx.clearRect(0, 0, w, h);
|
14979 | }
|
14980 | }
|
14981 | }
|
14982 |
|
14983 | |
14984 |
|
14985 |
|
14986 |
|
14987 |
|
14988 |
|
14989 |
|
14990 | _resizeNodes() {
|
14991 | this.canvas.setTransform();
|
14992 | const ctx = this.canvas.getContext();
|
14993 | ctx.save();
|
14994 | ctx.translate(this.body.view.translation.x, this.body.view.translation.y);
|
14995 | ctx.scale(this.body.view.scale, this.body.view.scale);
|
14996 |
|
14997 | const nodes = this.body.nodes;
|
14998 | let node;
|
14999 |
|
15000 |
|
15001 | for (const nodeId in nodes) {
|
15002 | if (Object.prototype.hasOwnProperty.call(nodes, nodeId)) {
|
15003 | node = nodes[nodeId];
|
15004 | node.resize(ctx);
|
15005 | node.updateBoundingBox(ctx, node.selected);
|
15006 | }
|
15007 | }
|
15008 |
|
15009 |
|
15010 | ctx.restore();
|
15011 | }
|
15012 |
|
15013 | |
15014 |
|
15015 |
|
15016 |
|
15017 |
|
15018 |
|
15019 |
|
15020 |
|
15021 |
|
15022 | _drawNodes(ctx, alwaysShow = false) {
|
15023 | const nodes = this.body.nodes;
|
15024 | const nodeIndices = this.body.nodeIndices;
|
15025 | let node;
|
15026 | const selected = [];
|
15027 | const hovered = [];
|
15028 | const margin = 20;
|
15029 | const topLeft = this.canvas.DOMtoCanvas({ x: -margin, y: -margin });
|
15030 | const bottomRight = this.canvas.DOMtoCanvas({
|
15031 | x: this.canvas.frame.canvas.clientWidth + margin,
|
15032 | y: this.canvas.frame.canvas.clientHeight + margin,
|
15033 | });
|
15034 | const viewableArea = {
|
15035 | top: topLeft.y,
|
15036 | left: topLeft.x,
|
15037 | bottom: bottomRight.y,
|
15038 | right: bottomRight.x,
|
15039 | };
|
15040 |
|
15041 | const drawExternalLabels = [];
|
15042 |
|
15043 |
|
15044 | for (let i = 0; i < nodeIndices.length; i++) {
|
15045 | node = nodes[nodeIndices[i]];
|
15046 |
|
15047 | if (node.hover) {
|
15048 | hovered.push(nodeIndices[i]);
|
15049 | } else if (node.isSelected()) {
|
15050 | selected.push(nodeIndices[i]);
|
15051 | } else {
|
15052 | if (alwaysShow === true) {
|
15053 | const drawLater = node.draw(ctx);
|
15054 | if (drawLater.drawExternalLabel != null) {
|
15055 | drawExternalLabels.push(drawLater.drawExternalLabel);
|
15056 | }
|
15057 | } else if (node.isBoundingBoxOverlappingWith(viewableArea) === true) {
|
15058 | const drawLater = node.draw(ctx);
|
15059 | if (drawLater.drawExternalLabel != null) {
|
15060 | drawExternalLabels.push(drawLater.drawExternalLabel);
|
15061 | }
|
15062 | } else {
|
15063 | node.updateBoundingBox(ctx, node.selected);
|
15064 | }
|
15065 | }
|
15066 | }
|
15067 |
|
15068 | let i;
|
15069 | const selectedLength = selected.length;
|
15070 | const hoveredLength = hovered.length;
|
15071 |
|
15072 |
|
15073 | for (i = 0; i < selectedLength; i++) {
|
15074 | node = nodes[selected[i]];
|
15075 | const drawLater = node.draw(ctx);
|
15076 | if (drawLater.drawExternalLabel != null) {
|
15077 | drawExternalLabels.push(drawLater.drawExternalLabel);
|
15078 | }
|
15079 | }
|
15080 |
|
15081 |
|
15082 | for (i = 0; i < hoveredLength; i++) {
|
15083 | node = nodes[hovered[i]];
|
15084 | const drawLater = node.draw(ctx);
|
15085 | if (drawLater.drawExternalLabel != null) {
|
15086 | drawExternalLabels.push(drawLater.drawExternalLabel);
|
15087 | }
|
15088 | }
|
15089 |
|
15090 | return {
|
15091 | drawExternalLabels: () => {
|
15092 | for (const draw of drawExternalLabels) {
|
15093 | draw();
|
15094 | }
|
15095 | },
|
15096 | };
|
15097 | }
|
15098 |
|
15099 | |
15100 |
|
15101 |
|
15102 |
|
15103 |
|
15104 |
|
15105 | _drawEdges(ctx) {
|
15106 | const edges = this.body.edges;
|
15107 | const edgeIndices = this.body.edgeIndices;
|
15108 |
|
15109 | for (let i = 0; i < edgeIndices.length; i++) {
|
15110 | const edge = edges[edgeIndices[i]];
|
15111 | if (edge.connected === true) {
|
15112 | edge.draw(ctx);
|
15113 | }
|
15114 | }
|
15115 | }
|
15116 |
|
15117 | |
15118 |
|
15119 |
|
15120 |
|
15121 |
|
15122 |
|
15123 | _drawArrows(ctx) {
|
15124 | const edges = this.body.edges;
|
15125 | const edgeIndices = this.body.edgeIndices;
|
15126 |
|
15127 | for (let i = 0; i < edgeIndices.length; i++) {
|
15128 | const edge = edges[edgeIndices[i]];
|
15129 | if (edge.connected === true) {
|
15130 | edge.drawArrows(ctx);
|
15131 | }
|
15132 | }
|
15133 | }
|
15134 |
|
15135 | |
15136 |
|
15137 |
|
15138 |
|
15139 |
|
15140 |
|
15141 | _determineBrowserMethod() {
|
15142 | if (typeof window !== "undefined") {
|
15143 | const browserType = navigator.userAgent.toLowerCase();
|
15144 | this.requiresTimeout = false;
|
15145 | if (browserType.indexOf("msie 9.0") != -1) {
|
15146 |
|
15147 | this.requiresTimeout = true;
|
15148 | } else if (browserType.indexOf("safari") != -1) {
|
15149 |
|
15150 | if (browserType.indexOf("chrome") <= -1) {
|
15151 | this.requiresTimeout = true;
|
15152 | }
|
15153 | }
|
15154 | } else {
|
15155 | this.requiresTimeout = true;
|
15156 | }
|
15157 | }
|
15158 |
|
15159 | |
15160 |
|
15161 |
|
15162 |
|
15163 |
|
15164 |
|
15165 | _drawSelectionBox(ctx) {
|
15166 | if (this.body.selectionBox.show) {
|
15167 | ctx.beginPath();
|
15168 | const width =
|
15169 | this.body.selectionBox.position.end.x -
|
15170 | this.body.selectionBox.position.start.x;
|
15171 | const height =
|
15172 | this.body.selectionBox.position.end.y -
|
15173 | this.body.selectionBox.position.start.y;
|
15174 | ctx.rect(
|
15175 | this.body.selectionBox.position.start.x,
|
15176 | this.body.selectionBox.position.start.y,
|
15177 | width,
|
15178 | height
|
15179 | );
|
15180 | ctx.fillStyle = "rgba(151, 194, 252, 0.2)";
|
15181 | ctx.fillRect(
|
15182 | this.body.selectionBox.position.start.x,
|
15183 | this.body.selectionBox.position.start.y,
|
15184 | width,
|
15185 | height
|
15186 | );
|
15187 | ctx.strokeStyle = "rgba(151, 194, 252, 1)";
|
15188 | ctx.stroke();
|
15189 | } else {
|
15190 | ctx.closePath();
|
15191 | }
|
15192 | }
|
15193 | }
|
15194 |
|
15195 |
|
15196 |
|
15197 |
|
15198 |
|
15199 |
|
15200 |
|
15201 | function onTouch(hammer, callback) {
|
15202 | callback.inputHandler = function (event) {
|
15203 | if (event.isFirst) {
|
15204 | callback(event);
|
15205 | }
|
15206 | };
|
15207 |
|
15208 | hammer.on("hammer.input", callback.inputHandler);
|
15209 | }
|
15210 |
|
15211 |
|
15212 |
|
15213 |
|
15214 |
|
15215 |
|
15216 |
|
15217 |
|
15218 | function onRelease(hammer, callback) {
|
15219 | callback.inputHandler = function (event) {
|
15220 | if (event.isFinal) {
|
15221 | callback(event);
|
15222 | }
|
15223 | };
|
15224 |
|
15225 | return hammer.on("hammer.input", callback.inputHandler);
|
15226 | }
|
15227 |
|
15228 |
|
15229 |
|
15230 |
|
15231 |
|
15232 |
|
15233 |
|
15234 | class Canvas {
|
15235 | |
15236 |
|
15237 |
|
15238 | constructor(body) {
|
15239 | this.body = body;
|
15240 | this.pixelRatio = 1;
|
15241 | this.cameraState = {};
|
15242 | this.initialized = false;
|
15243 | this.canvasViewCenter = {};
|
15244 | this._cleanupCallbacks = [];
|
15245 |
|
15246 | this.options = {};
|
15247 | this.defaultOptions = {
|
15248 | autoResize: true,
|
15249 | height: "100%",
|
15250 | width: "100%",
|
15251 | };
|
15252 | Object.assign(this.options, this.defaultOptions);
|
15253 |
|
15254 | this.bindEventListeners();
|
15255 | }
|
15256 |
|
15257 | |
15258 |
|
15259 |
|
15260 | bindEventListeners() {
|
15261 |
|
15262 | this.body.emitter.once("resize", (obj) => {
|
15263 | if (obj.width !== 0) {
|
15264 | this.body.view.translation.x = obj.width * 0.5;
|
15265 | }
|
15266 | if (obj.height !== 0) {
|
15267 | this.body.view.translation.y = obj.height * 0.5;
|
15268 | }
|
15269 | });
|
15270 | this.body.emitter.on("setSize", this.setSize.bind(this));
|
15271 | this.body.emitter.on("destroy", () => {
|
15272 | this.hammerFrame.destroy();
|
15273 | this.hammer.destroy();
|
15274 | this._cleanUp();
|
15275 | });
|
15276 | }
|
15277 |
|
15278 | |
15279 |
|
15280 |
|
15281 | setOptions(options) {
|
15282 | if (options !== undefined) {
|
15283 | const fields = ["width", "height", "autoResize"];
|
15284 | selectiveDeepExtend(fields, this.options, options);
|
15285 | }
|
15286 |
|
15287 |
|
15288 | this._cleanUp();
|
15289 | if (this.options.autoResize === true) {
|
15290 | if (window.ResizeObserver) {
|
15291 |
|
15292 | const observer = new ResizeObserver(() => {
|
15293 | const changed = this.setSize();
|
15294 | if (changed === true) {
|
15295 | this.body.emitter.emit("_requestRedraw");
|
15296 | }
|
15297 | });
|
15298 | const { frame } = this;
|
15299 |
|
15300 | observer.observe(frame);
|
15301 | this._cleanupCallbacks.push(() => {
|
15302 | observer.unobserve(frame);
|
15303 | });
|
15304 | } else {
|
15305 |
|
15306 | const resizeTimer = setInterval(() => {
|
15307 | const changed = this.setSize();
|
15308 | if (changed === true) {
|
15309 | this.body.emitter.emit("_requestRedraw");
|
15310 | }
|
15311 | }, 1000);
|
15312 | this._cleanupCallbacks.push(() => {
|
15313 | clearInterval(resizeTimer);
|
15314 | });
|
15315 | }
|
15316 |
|
15317 |
|
15318 | const resizeFunction = this._onResize.bind(this);
|
15319 | addEventListener(window, "resize", resizeFunction);
|
15320 | this._cleanupCallbacks.push(() => {
|
15321 | removeEventListener(window, "resize", resizeFunction);
|
15322 | });
|
15323 | }
|
15324 | }
|
15325 |
|
15326 | |
15327 |
|
15328 |
|
15329 | _cleanUp() {
|
15330 | this._cleanupCallbacks
|
15331 | .splice(0)
|
15332 | .reverse()
|
15333 | .forEach((callback) => {
|
15334 | try {
|
15335 | callback();
|
15336 | } catch (error) {
|
15337 | console.error(error);
|
15338 | }
|
15339 | });
|
15340 | }
|
15341 |
|
15342 | |
15343 |
|
15344 |
|
15345 | _onResize() {
|
15346 | this.setSize();
|
15347 | this.body.emitter.emit("_redraw");
|
15348 | }
|
15349 |
|
15350 | |
15351 |
|
15352 |
|
15353 |
|
15354 |
|
15355 |
|
15356 | _getCameraState(pixelRatio = this.pixelRatio) {
|
15357 | if (this.initialized === true) {
|
15358 | this.cameraState.previousWidth = this.frame.canvas.width / pixelRatio;
|
15359 | this.cameraState.previousHeight = this.frame.canvas.height / pixelRatio;
|
15360 | this.cameraState.scale = this.body.view.scale;
|
15361 | this.cameraState.position = this.DOMtoCanvas({
|
15362 | x: (0.5 * this.frame.canvas.width) / pixelRatio,
|
15363 | y: (0.5 * this.frame.canvas.height) / pixelRatio,
|
15364 | });
|
15365 | }
|
15366 | }
|
15367 |
|
15368 | |
15369 |
|
15370 |
|
15371 |
|
15372 |
|
15373 | _setCameraState() {
|
15374 | if (
|
15375 | this.cameraState.scale !== undefined &&
|
15376 | this.frame.canvas.clientWidth !== 0 &&
|
15377 | this.frame.canvas.clientHeight !== 0 &&
|
15378 | this.pixelRatio !== 0 &&
|
15379 | this.cameraState.previousWidth > 0 &&
|
15380 | this.cameraState.previousHeight > 0
|
15381 | ) {
|
15382 | const widthRatio =
|
15383 | this.frame.canvas.width /
|
15384 | this.pixelRatio /
|
15385 | this.cameraState.previousWidth;
|
15386 | const heightRatio =
|
15387 | this.frame.canvas.height /
|
15388 | this.pixelRatio /
|
15389 | this.cameraState.previousHeight;
|
15390 | let newScale = this.cameraState.scale;
|
15391 |
|
15392 | if (widthRatio != 1 && heightRatio != 1) {
|
15393 | newScale = this.cameraState.scale * 0.5 * (widthRatio + heightRatio);
|
15394 | } else if (widthRatio != 1) {
|
15395 | newScale = this.cameraState.scale * widthRatio;
|
15396 | } else if (heightRatio != 1) {
|
15397 | newScale = this.cameraState.scale * heightRatio;
|
15398 | }
|
15399 |
|
15400 | this.body.view.scale = newScale;
|
15401 |
|
15402 | const currentViewCenter = this.DOMtoCanvas({
|
15403 | x: 0.5 * this.frame.canvas.clientWidth,
|
15404 | y: 0.5 * this.frame.canvas.clientHeight,
|
15405 | });
|
15406 |
|
15407 | const distanceFromCenter = {
|
15408 |
|
15409 | x: currentViewCenter.x - this.cameraState.position.x,
|
15410 | y: currentViewCenter.y - this.cameraState.position.y,
|
15411 | };
|
15412 | this.body.view.translation.x +=
|
15413 | distanceFromCenter.x * this.body.view.scale;
|
15414 | this.body.view.translation.y +=
|
15415 | distanceFromCenter.y * this.body.view.scale;
|
15416 | }
|
15417 | }
|
15418 |
|
15419 | |
15420 |
|
15421 |
|
15422 |
|
15423 |
|
15424 |
|
15425 | _prepareValue(value) {
|
15426 | if (typeof value === "number") {
|
15427 | return value + "px";
|
15428 | } else if (typeof value === "string") {
|
15429 | if (value.indexOf("%") !== -1 || value.indexOf("px") !== -1) {
|
15430 | return value;
|
15431 | } else if (value.indexOf("%") === -1) {
|
15432 | return value + "px";
|
15433 | }
|
15434 | }
|
15435 | throw new Error(
|
15436 | "Could not use the value supplied for width or height:" + value
|
15437 | );
|
15438 | }
|
15439 |
|
15440 | |
15441 |
|
15442 |
|
15443 | _create() {
|
15444 |
|
15445 | while (this.body.container.hasChildNodes()) {
|
15446 | this.body.container.removeChild(this.body.container.firstChild);
|
15447 | }
|
15448 |
|
15449 | this.frame = document.createElement("div");
|
15450 | this.frame.className = "vis-network";
|
15451 | this.frame.style.position = "relative";
|
15452 | this.frame.style.overflow = "hidden";
|
15453 | this.frame.tabIndex = 0;
|
15454 |
|
15455 |
|
15456 |
|
15457 | this.frame.canvas = document.createElement("canvas");
|
15458 | this.frame.canvas.style.position = "relative";
|
15459 | this.frame.appendChild(this.frame.canvas);
|
15460 |
|
15461 | if (!this.frame.canvas.getContext) {
|
15462 | const noCanvas = document.createElement("DIV");
|
15463 | noCanvas.style.color = "red";
|
15464 | noCanvas.style.fontWeight = "bold";
|
15465 | noCanvas.style.padding = "10px";
|
15466 | noCanvas.innerText = "Error: your browser does not support HTML canvas";
|
15467 | this.frame.canvas.appendChild(noCanvas);
|
15468 | } else {
|
15469 | this._setPixelRatio();
|
15470 | this.setTransform();
|
15471 | }
|
15472 |
|
15473 |
|
15474 | this.body.container.appendChild(this.frame);
|
15475 |
|
15476 | this.body.view.scale = 1;
|
15477 | this.body.view.translation = {
|
15478 | x: 0.5 * this.frame.canvas.clientWidth,
|
15479 | y: 0.5 * this.frame.canvas.clientHeight,
|
15480 | };
|
15481 |
|
15482 | this._bindHammer();
|
15483 | }
|
15484 |
|
15485 | |
15486 |
|
15487 |
|
15488 |
|
15489 |
|
15490 | _bindHammer() {
|
15491 | if (this.hammer !== undefined) {
|
15492 | this.hammer.destroy();
|
15493 | }
|
15494 | this.drag = {};
|
15495 | this.pinch = {};
|
15496 |
|
15497 |
|
15498 | this.hammer = new Hammer(this.frame.canvas);
|
15499 | this.hammer.get("pinch").set({ enable: true });
|
15500 |
|
15501 | this.hammer
|
15502 | .get("pan")
|
15503 | .set({ threshold: 5, direction: Hammer.DIRECTION_ALL });
|
15504 |
|
15505 | onTouch(this.hammer, (event) => {
|
15506 | this.body.eventListeners.onTouch(event);
|
15507 | });
|
15508 | this.hammer.on("tap", (event) => {
|
15509 | this.body.eventListeners.onTap(event);
|
15510 | });
|
15511 | this.hammer.on("doubletap", (event) => {
|
15512 | this.body.eventListeners.onDoubleTap(event);
|
15513 | });
|
15514 | this.hammer.on("press", (event) => {
|
15515 | this.body.eventListeners.onHold(event);
|
15516 | });
|
15517 | this.hammer.on("panstart", (event) => {
|
15518 | this.body.eventListeners.onDragStart(event);
|
15519 | });
|
15520 | this.hammer.on("panmove", (event) => {
|
15521 | this.body.eventListeners.onDrag(event);
|
15522 | });
|
15523 | this.hammer.on("panend", (event) => {
|
15524 | this.body.eventListeners.onDragEnd(event);
|
15525 | });
|
15526 | this.hammer.on("pinch", (event) => {
|
15527 | this.body.eventListeners.onPinch(event);
|
15528 | });
|
15529 |
|
15530 |
|
15531 | this.frame.canvas.addEventListener("wheel", (event) => {
|
15532 | this.body.eventListeners.onMouseWheel(event);
|
15533 | });
|
15534 |
|
15535 | this.frame.canvas.addEventListener("mousemove", (event) => {
|
15536 | this.body.eventListeners.onMouseMove(event);
|
15537 | });
|
15538 | this.frame.canvas.addEventListener("contextmenu", (event) => {
|
15539 | this.body.eventListeners.onContext(event);
|
15540 | });
|
15541 |
|
15542 | this.hammerFrame = new Hammer(this.frame);
|
15543 | onRelease(this.hammerFrame, (event) => {
|
15544 | this.body.eventListeners.onRelease(event);
|
15545 | });
|
15546 | }
|
15547 |
|
15548 | |
15549 |
|
15550 |
|
15551 |
|
15552 |
|
15553 |
|
15554 |
|
15555 |
|
15556 |
|
15557 | setSize(width = this.options.width, height = this.options.height) {
|
15558 | width = this._prepareValue(width);
|
15559 | height = this._prepareValue(height);
|
15560 |
|
15561 | let emitEvent = false;
|
15562 | const oldWidth = this.frame.canvas.width;
|
15563 | const oldHeight = this.frame.canvas.height;
|
15564 |
|
15565 |
|
15566 |
|
15567 |
|
15568 |
|
15569 |
|
15570 |
|
15571 |
|
15572 |
|
15573 |
|
15574 |
|
15575 |
|
15576 |
|
15577 | const previousRatio = this.pixelRatio;
|
15578 | this._setPixelRatio();
|
15579 |
|
15580 | if (
|
15581 | width != this.options.width ||
|
15582 | height != this.options.height ||
|
15583 | this.frame.style.width != width ||
|
15584 | this.frame.style.height != height
|
15585 | ) {
|
15586 | this._getCameraState(previousRatio);
|
15587 |
|
15588 | this.frame.style.width = width;
|
15589 | this.frame.style.height = height;
|
15590 |
|
15591 | this.frame.canvas.style.width = "100%";
|
15592 | this.frame.canvas.style.height = "100%";
|
15593 |
|
15594 | this.frame.canvas.width = Math.round(
|
15595 | this.frame.canvas.clientWidth * this.pixelRatio
|
15596 | );
|
15597 | this.frame.canvas.height = Math.round(
|
15598 | this.frame.canvas.clientHeight * this.pixelRatio
|
15599 | );
|
15600 |
|
15601 | this.options.width = width;
|
15602 | this.options.height = height;
|
15603 |
|
15604 | this.canvasViewCenter = {
|
15605 | x: 0.5 * this.frame.clientWidth,
|
15606 | y: 0.5 * this.frame.clientHeight,
|
15607 | };
|
15608 |
|
15609 | emitEvent = true;
|
15610 | } else {
|
15611 |
|
15612 |
|
15613 |
|
15614 | const newWidth = Math.round(
|
15615 | this.frame.canvas.clientWidth * this.pixelRatio
|
15616 | );
|
15617 | const newHeight = Math.round(
|
15618 | this.frame.canvas.clientHeight * this.pixelRatio
|
15619 | );
|
15620 |
|
15621 |
|
15622 | if (
|
15623 | this.frame.canvas.width !== newWidth ||
|
15624 | this.frame.canvas.height !== newHeight
|
15625 | ) {
|
15626 | this._getCameraState(previousRatio);
|
15627 | }
|
15628 |
|
15629 | if (this.frame.canvas.width !== newWidth) {
|
15630 | this.frame.canvas.width = newWidth;
|
15631 | emitEvent = true;
|
15632 | }
|
15633 | if (this.frame.canvas.height !== newHeight) {
|
15634 | this.frame.canvas.height = newHeight;
|
15635 | emitEvent = true;
|
15636 | }
|
15637 | }
|
15638 |
|
15639 | if (emitEvent === true) {
|
15640 | this.body.emitter.emit("resize", {
|
15641 | width: Math.round(this.frame.canvas.width / this.pixelRatio),
|
15642 | height: Math.round(this.frame.canvas.height / this.pixelRatio),
|
15643 | oldWidth: Math.round(oldWidth / this.pixelRatio),
|
15644 | oldHeight: Math.round(oldHeight / this.pixelRatio),
|
15645 | });
|
15646 |
|
15647 |
|
15648 | this._setCameraState();
|
15649 | }
|
15650 |
|
15651 |
|
15652 | this.initialized = true;
|
15653 | return emitEvent;
|
15654 | }
|
15655 |
|
15656 | |
15657 |
|
15658 |
|
15659 |
|
15660 | getContext() {
|
15661 | return this.frame.canvas.getContext("2d");
|
15662 | }
|
15663 |
|
15664 | |
15665 |
|
15666 |
|
15667 |
|
15668 |
|
15669 |
|
15670 | _determinePixelRatio() {
|
15671 | const ctx = this.getContext();
|
15672 | if (ctx === undefined) {
|
15673 | throw new Error("Could not get canvax context");
|
15674 | }
|
15675 |
|
15676 | let numerator = 1;
|
15677 | if (typeof window !== "undefined") {
|
15678 |
|
15679 |
|
15680 | numerator = window.devicePixelRatio || 1;
|
15681 | }
|
15682 |
|
15683 | const denominator =
|
15684 | ctx.webkitBackingStorePixelRatio ||
|
15685 | ctx.mozBackingStorePixelRatio ||
|
15686 | ctx.msBackingStorePixelRatio ||
|
15687 | ctx.oBackingStorePixelRatio ||
|
15688 | ctx.backingStorePixelRatio ||
|
15689 | 1;
|
15690 |
|
15691 | return numerator / denominator;
|
15692 | }
|
15693 |
|
15694 | |
15695 |
|
15696 |
|
15697 |
|
15698 |
|
15699 | _setPixelRatio() {
|
15700 | this.pixelRatio = this._determinePixelRatio();
|
15701 | }
|
15702 |
|
15703 | |
15704 |
|
15705 |
|
15706 | setTransform() {
|
15707 | const ctx = this.getContext();
|
15708 | if (ctx === undefined) {
|
15709 | throw new Error("Could not get canvax context");
|
15710 | }
|
15711 |
|
15712 | ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
|
15713 | }
|
15714 |
|
15715 | |
15716 |
|
15717 |
|
15718 |
|
15719 |
|
15720 |
|
15721 |
|
15722 |
|
15723 | _XconvertDOMtoCanvas(x) {
|
15724 | return (x - this.body.view.translation.x) / this.body.view.scale;
|
15725 | }
|
15726 |
|
15727 | |
15728 |
|
15729 |
|
15730 |
|
15731 |
|
15732 |
|
15733 |
|
15734 |
|
15735 | _XconvertCanvasToDOM(x) {
|
15736 | return x * this.body.view.scale + this.body.view.translation.x;
|
15737 | }
|
15738 |
|
15739 | |
15740 |
|
15741 |
|
15742 |
|
15743 |
|
15744 |
|
15745 |
|
15746 |
|
15747 | _YconvertDOMtoCanvas(y) {
|
15748 | return (y - this.body.view.translation.y) / this.body.view.scale;
|
15749 | }
|
15750 |
|
15751 | |
15752 |
|
15753 |
|
15754 |
|
15755 |
|
15756 |
|
15757 |
|
15758 |
|
15759 | _YconvertCanvasToDOM(y) {
|
15760 | return y * this.body.view.scale + this.body.view.translation.y;
|
15761 | }
|
15762 |
|
15763 | |
15764 |
|
15765 |
|
15766 |
|
15767 | canvasToDOM(pos) {
|
15768 | return {
|
15769 | x: this._XconvertCanvasToDOM(pos.x),
|
15770 | y: this._YconvertCanvasToDOM(pos.y),
|
15771 | };
|
15772 | }
|
15773 |
|
15774 | |
15775 |
|
15776 |
|
15777 |
|
15778 |
|
15779 | DOMtoCanvas(pos) {
|
15780 | return {
|
15781 | x: this._XconvertDOMtoCanvas(pos.x),
|
15782 | y: this._YconvertDOMtoCanvas(pos.y),
|
15783 | };
|
15784 | }
|
15785 | }
|
15786 |
|
15787 |
|
15788 |
|
15789 |
|
15790 |
|
15791 |
|
15792 |
|
15793 |
|
15794 |
|
15795 |
|
15796 | function normalizeFitOptions(rawOptions, allNodeIds) {
|
15797 | const options = Object.assign({
|
15798 | nodes: allNodeIds,
|
15799 | minZoomLevel: Number.MIN_VALUE,
|
15800 | maxZoomLevel: 1,
|
15801 | }, rawOptions ?? {});
|
15802 | if (!Array.isArray(options.nodes)) {
|
15803 | throw new TypeError("Nodes has to be an array of ids.");
|
15804 | }
|
15805 | if (options.nodes.length === 0) {
|
15806 | options.nodes = allNodeIds;
|
15807 | }
|
15808 | if (!(typeof options.minZoomLevel === "number" && options.minZoomLevel > 0)) {
|
15809 | throw new TypeError("Min zoom level has to be a number higher than zero.");
|
15810 | }
|
15811 | if (!(typeof options.maxZoomLevel === "number" &&
|
15812 | options.minZoomLevel <= options.maxZoomLevel)) {
|
15813 | throw new TypeError("Max zoom level has to be a number higher than min zoom level.");
|
15814 | }
|
15815 | return options;
|
15816 | }
|
15817 |
|
15818 |
|
15819 |
|
15820 |
|
15821 | class View {
|
15822 | |
15823 |
|
15824 |
|
15825 |
|
15826 | constructor(body, canvas) {
|
15827 | this.body = body;
|
15828 | this.canvas = canvas;
|
15829 |
|
15830 | this.animationSpeed = 1 / this.renderRefreshRate;
|
15831 | this.animationEasingFunction = "easeInOutQuint";
|
15832 | this.easingTime = 0;
|
15833 | this.sourceScale = 0;
|
15834 | this.targetScale = 0;
|
15835 | this.sourceTranslation = 0;
|
15836 | this.targetTranslation = 0;
|
15837 | this.lockedOnNodeId = undefined;
|
15838 | this.lockedOnNodeOffset = undefined;
|
15839 | this.touchTime = 0;
|
15840 |
|
15841 | this.viewFunction = undefined;
|
15842 |
|
15843 | this.body.emitter.on("fit", this.fit.bind(this));
|
15844 | this.body.emitter.on("animationFinished", () => {
|
15845 | this.body.emitter.emit("_stopRendering");
|
15846 | });
|
15847 | this.body.emitter.on("unlockNode", this.releaseNode.bind(this));
|
15848 | }
|
15849 |
|
15850 | |
15851 |
|
15852 |
|
15853 |
|
15854 | setOptions(options = {}) {
|
15855 | this.options = options;
|
15856 | }
|
15857 |
|
15858 | |
15859 |
|
15860 |
|
15861 |
|
15862 |
|
15863 |
|
15864 |
|
15865 | fit(options, initialZoom = false) {
|
15866 | options = normalizeFitOptions(options, this.body.nodeIndices);
|
15867 |
|
15868 | const canvasWidth = this.canvas.frame.canvas.clientWidth;
|
15869 | const canvasHeight = this.canvas.frame.canvas.clientHeight;
|
15870 |
|
15871 | let range;
|
15872 | let zoomLevel;
|
15873 | if (canvasWidth === 0 || canvasHeight === 0) {
|
15874 |
|
15875 |
|
15876 |
|
15877 |
|
15878 |
|
15879 | zoomLevel = 1;
|
15880 |
|
15881 | range = NetworkUtil.getRange(this.body.nodes, options.nodes);
|
15882 | } else if (initialZoom === true) {
|
15883 |
|
15884 | let positionDefined = 0;
|
15885 | for (const nodeId in this.body.nodes) {
|
15886 | if (Object.prototype.hasOwnProperty.call(this.body.nodes, nodeId)) {
|
15887 | const node = this.body.nodes[nodeId];
|
15888 | if (node.predefinedPosition === true) {
|
15889 | positionDefined += 1;
|
15890 | }
|
15891 | }
|
15892 | }
|
15893 | if (positionDefined > 0.5 * this.body.nodeIndices.length) {
|
15894 | this.fit(options, false);
|
15895 | return;
|
15896 | }
|
15897 |
|
15898 | range = NetworkUtil.getRange(this.body.nodes, options.nodes);
|
15899 |
|
15900 | const numberOfNodes = this.body.nodeIndices.length;
|
15901 | zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822;
|
15902 |
|
15903 |
|
15904 | const factor = Math.min(canvasWidth / 600, canvasHeight / 600);
|
15905 | zoomLevel *= factor;
|
15906 | } else {
|
15907 | this.body.emitter.emit("_resizeNodes");
|
15908 | range = NetworkUtil.getRange(this.body.nodes, options.nodes);
|
15909 |
|
15910 | const xDistance = Math.abs(range.maxX - range.minX) * 1.1;
|
15911 | const yDistance = Math.abs(range.maxY - range.minY) * 1.1;
|
15912 |
|
15913 | const xZoomLevel = canvasWidth / xDistance;
|
15914 | const yZoomLevel = canvasHeight / yDistance;
|
15915 |
|
15916 | zoomLevel = xZoomLevel <= yZoomLevel ? xZoomLevel : yZoomLevel;
|
15917 | }
|
15918 |
|
15919 | if (zoomLevel > options.maxZoomLevel) {
|
15920 | zoomLevel = options.maxZoomLevel;
|
15921 | } else if (zoomLevel < options.minZoomLevel) {
|
15922 | zoomLevel = options.minZoomLevel;
|
15923 | }
|
15924 |
|
15925 | const center = NetworkUtil.findCenter(range);
|
15926 | const animationOptions = {
|
15927 | position: center,
|
15928 | scale: zoomLevel,
|
15929 | animation: options.animation,
|
15930 | };
|
15931 | this.moveTo(animationOptions);
|
15932 | }
|
15933 |
|
15934 |
|
15935 |
|
15936 | |
15937 |
|
15938 |
|
15939 |
|
15940 |
|
15941 |
|
15942 | focus(nodeId, options = {}) {
|
15943 | if (this.body.nodes[nodeId] !== undefined) {
|
15944 | const nodePosition = {
|
15945 | x: this.body.nodes[nodeId].x,
|
15946 | y: this.body.nodes[nodeId].y,
|
15947 | };
|
15948 | options.position = nodePosition;
|
15949 | options.lockedOnNode = nodeId;
|
15950 |
|
15951 | this.moveTo(options);
|
15952 | } else {
|
15953 | console.error("Node: " + nodeId + " cannot be found.");
|
15954 | }
|
15955 | }
|
15956 |
|
15957 | |
15958 |
|
15959 |
|
15960 |
|
15961 |
|
15962 |
|
15963 |
|
15964 | moveTo(options) {
|
15965 | if (options === undefined) {
|
15966 | options = {};
|
15967 | return;
|
15968 | }
|
15969 |
|
15970 | if (options.offset != null) {
|
15971 | if (options.offset.x != null) {
|
15972 |
|
15973 | options.offset.x = +options.offset.x;
|
15974 | if (!Number.isFinite(options.offset.x)) {
|
15975 | throw new TypeError(
|
15976 | 'The option "offset.x" has to be a finite number.'
|
15977 | );
|
15978 | }
|
15979 | } else {
|
15980 | options.offset.x = 0;
|
15981 | }
|
15982 |
|
15983 | if (options.offset.y != null) {
|
15984 |
|
15985 | options.offset.y = +options.offset.y;
|
15986 | if (!Number.isFinite(options.offset.y)) {
|
15987 | throw new TypeError(
|
15988 | 'The option "offset.y" has to be a finite number.'
|
15989 | );
|
15990 | }
|
15991 | } else {
|
15992 | options.offset.x = 0;
|
15993 | }
|
15994 | } else {
|
15995 | options.offset = {
|
15996 | x: 0,
|
15997 | y: 0,
|
15998 | };
|
15999 | }
|
16000 |
|
16001 | if (options.position != null) {
|
16002 | if (options.position.x != null) {
|
16003 |
|
16004 | options.position.x = +options.position.x;
|
16005 | if (!Number.isFinite(options.position.x)) {
|
16006 | throw new TypeError(
|
16007 | 'The option "position.x" has to be a finite number.'
|
16008 | );
|
16009 | }
|
16010 | } else {
|
16011 | options.position.x = 0;
|
16012 | }
|
16013 |
|
16014 | if (options.position.y != null) {
|
16015 |
|
16016 | options.position.y = +options.position.y;
|
16017 | if (!Number.isFinite(options.position.y)) {
|
16018 | throw new TypeError(
|
16019 | 'The option "position.y" has to be a finite number.'
|
16020 | );
|
16021 | }
|
16022 | } else {
|
16023 | options.position.x = 0;
|
16024 | }
|
16025 | } else {
|
16026 | options.position = this.getViewPosition();
|
16027 | }
|
16028 |
|
16029 | if (options.scale != null) {
|
16030 |
|
16031 | options.scale = +options.scale;
|
16032 | if (!(options.scale > 0)) {
|
16033 | throw new TypeError(
|
16034 | 'The option "scale" has to be a number greater than zero.'
|
16035 | );
|
16036 | }
|
16037 | } else {
|
16038 | options.scale = this.body.view.scale;
|
16039 | }
|
16040 |
|
16041 | if (options.animation === undefined) {
|
16042 | options.animation = { duration: 0 };
|
16043 | }
|
16044 | if (options.animation === false) {
|
16045 | options.animation = { duration: 0 };
|
16046 | }
|
16047 | if (options.animation === true) {
|
16048 | options.animation = {};
|
16049 | }
|
16050 | if (options.animation.duration === undefined) {
|
16051 | options.animation.duration = 1000;
|
16052 | }
|
16053 | if (options.animation.easingFunction === undefined) {
|
16054 | options.animation.easingFunction = "easeInOutQuad";
|
16055 | }
|
16056 |
|
16057 | this.animateView(options);
|
16058 | }
|
16059 |
|
16060 | |
16061 |
|
16062 |
|
16063 |
|
16064 |
|
16065 |
|
16066 |
|
16067 |
|
16068 |
|
16069 |
|
16070 |
|
16071 | animateView(options) {
|
16072 | if (options === undefined) {
|
16073 | return;
|
16074 | }
|
16075 | this.animationEasingFunction = options.animation.easingFunction;
|
16076 |
|
16077 | this.releaseNode();
|
16078 | if (options.locked === true) {
|
16079 | this.lockedOnNodeId = options.lockedOnNode;
|
16080 | this.lockedOnNodeOffset = options.offset;
|
16081 | }
|
16082 |
|
16083 |
|
16084 | if (this.easingTime != 0) {
|
16085 | this._transitionRedraw(true);
|
16086 | }
|
16087 |
|
16088 | this.sourceScale = this.body.view.scale;
|
16089 | this.sourceTranslation = this.body.view.translation;
|
16090 | this.targetScale = options.scale;
|
16091 |
|
16092 |
|
16093 |
|
16094 | this.body.view.scale = this.targetScale;
|
16095 | const viewCenter = this.canvas.DOMtoCanvas({
|
16096 | x: 0.5 * this.canvas.frame.canvas.clientWidth,
|
16097 | y: 0.5 * this.canvas.frame.canvas.clientHeight,
|
16098 | });
|
16099 |
|
16100 | const distanceFromCenter = {
|
16101 |
|
16102 | x: viewCenter.x - options.position.x,
|
16103 | y: viewCenter.y - options.position.y,
|
16104 | };
|
16105 | this.targetTranslation = {
|
16106 | x:
|
16107 | this.sourceTranslation.x +
|
16108 | distanceFromCenter.x * this.targetScale +
|
16109 | options.offset.x,
|
16110 | y:
|
16111 | this.sourceTranslation.y +
|
16112 | distanceFromCenter.y * this.targetScale +
|
16113 | options.offset.y,
|
16114 | };
|
16115 |
|
16116 |
|
16117 | if (options.animation.duration === 0) {
|
16118 | if (this.lockedOnNodeId != undefined) {
|
16119 | this.viewFunction = this._lockedRedraw.bind(this);
|
16120 | this.body.emitter.on("initRedraw", this.viewFunction);
|
16121 | } else {
|
16122 | this.body.view.scale = this.targetScale;
|
16123 | this.body.view.translation = this.targetTranslation;
|
16124 | this.body.emitter.emit("_requestRedraw");
|
16125 | }
|
16126 | } else {
|
16127 | this.animationSpeed =
|
16128 | 1 / (60 * options.animation.duration * 0.001) || 1 / 60;
|
16129 | this.animationEasingFunction = options.animation.easingFunction;
|
16130 |
|
16131 | this.viewFunction = this._transitionRedraw.bind(this);
|
16132 | this.body.emitter.on("initRedraw", this.viewFunction);
|
16133 | this.body.emitter.emit("_startRendering");
|
16134 | }
|
16135 | }
|
16136 |
|
16137 | |
16138 |
|
16139 |
|
16140 |
|
16141 |
|
16142 | _lockedRedraw() {
|
16143 | const nodePosition = {
|
16144 | x: this.body.nodes[this.lockedOnNodeId].x,
|
16145 | y: this.body.nodes[this.lockedOnNodeId].y,
|
16146 | };
|
16147 | const viewCenter = this.canvas.DOMtoCanvas({
|
16148 | x: 0.5 * this.canvas.frame.canvas.clientWidth,
|
16149 | y: 0.5 * this.canvas.frame.canvas.clientHeight,
|
16150 | });
|
16151 | const distanceFromCenter = {
|
16152 |
|
16153 | x: viewCenter.x - nodePosition.x,
|
16154 | y: viewCenter.y - nodePosition.y,
|
16155 | };
|
16156 | const sourceTranslation = this.body.view.translation;
|
16157 | const targetTranslation = {
|
16158 | x:
|
16159 | sourceTranslation.x +
|
16160 | distanceFromCenter.x * this.body.view.scale +
|
16161 | this.lockedOnNodeOffset.x,
|
16162 | y:
|
16163 | sourceTranslation.y +
|
16164 | distanceFromCenter.y * this.body.view.scale +
|
16165 | this.lockedOnNodeOffset.y,
|
16166 | };
|
16167 |
|
16168 | this.body.view.translation = targetTranslation;
|
16169 | }
|
16170 |
|
16171 | |
16172 |
|
16173 |
|
16174 | releaseNode() {
|
16175 | if (this.lockedOnNodeId !== undefined && this.viewFunction !== undefined) {
|
16176 | this.body.emitter.off("initRedraw", this.viewFunction);
|
16177 | this.lockedOnNodeId = undefined;
|
16178 | this.lockedOnNodeOffset = undefined;
|
16179 | }
|
16180 | }
|
16181 |
|
16182 | |
16183 |
|
16184 |
|
16185 |
|
16186 | _transitionRedraw(finished = false) {
|
16187 | this.easingTime += this.animationSpeed;
|
16188 | this.easingTime = finished === true ? 1.0 : this.easingTime;
|
16189 |
|
16190 | const progress = easingFunctions[this.animationEasingFunction](
|
16191 | this.easingTime
|
16192 | );
|
16193 |
|
16194 | this.body.view.scale =
|
16195 | this.sourceScale + (this.targetScale - this.sourceScale) * progress;
|
16196 | this.body.view.translation = {
|
16197 | x:
|
16198 | this.sourceTranslation.x +
|
16199 | (this.targetTranslation.x - this.sourceTranslation.x) * progress,
|
16200 | y:
|
16201 | this.sourceTranslation.y +
|
16202 | (this.targetTranslation.y - this.sourceTranslation.y) * progress,
|
16203 | };
|
16204 |
|
16205 |
|
16206 | if (this.easingTime >= 1.0) {
|
16207 | this.body.emitter.off("initRedraw", this.viewFunction);
|
16208 | this.easingTime = 0;
|
16209 | if (this.lockedOnNodeId != undefined) {
|
16210 | this.viewFunction = this._lockedRedraw.bind(this);
|
16211 | this.body.emitter.on("initRedraw", this.viewFunction);
|
16212 | }
|
16213 | this.body.emitter.emit("animationFinished");
|
16214 | }
|
16215 | }
|
16216 |
|
16217 | |
16218 |
|
16219 |
|
16220 |
|
16221 | getScale() {
|
16222 | return this.body.view.scale;
|
16223 | }
|
16224 |
|
16225 | |
16226 |
|
16227 |
|
16228 |
|
16229 | getViewPosition() {
|
16230 | return this.canvas.DOMtoCanvas({
|
16231 | x: 0.5 * this.canvas.frame.canvas.clientWidth,
|
16232 | y: 0.5 * this.canvas.frame.canvas.clientHeight,
|
16233 | });
|
16234 | }
|
16235 | }
|
16236 |
|
16237 |
|
16238 |
|
16239 |
|
16240 | class NavigationHandler {
|
16241 | |
16242 |
|
16243 |
|
16244 |
|
16245 | constructor(body, canvas) {
|
16246 | this.body = body;
|
16247 | this.canvas = canvas;
|
16248 |
|
16249 | this.iconsCreated = false;
|
16250 | this.navigationHammers = [];
|
16251 | this.boundFunctions = {};
|
16252 | this.touchTime = 0;
|
16253 | this.activated = false;
|
16254 |
|
16255 | this.body.emitter.on("activate", () => {
|
16256 | this.activated = true;
|
16257 | this.configureKeyboardBindings();
|
16258 | });
|
16259 | this.body.emitter.on("deactivate", () => {
|
16260 | this.activated = false;
|
16261 | this.configureKeyboardBindings();
|
16262 | });
|
16263 | this.body.emitter.on("destroy", () => {
|
16264 | if (this.keycharm !== undefined) {
|
16265 | this.keycharm.destroy();
|
16266 | }
|
16267 | });
|
16268 |
|
16269 | this.options = {};
|
16270 | }
|
16271 |
|
16272 | |
16273 |
|
16274 |
|
16275 |
|
16276 | setOptions(options) {
|
16277 | if (options !== undefined) {
|
16278 | this.options = options;
|
16279 | this.create();
|
16280 | }
|
16281 | }
|
16282 |
|
16283 | |
16284 |
|
16285 |
|
16286 | create() {
|
16287 | if (this.options.navigationButtons === true) {
|
16288 | if (this.iconsCreated === false) {
|
16289 | this.loadNavigationElements();
|
16290 | }
|
16291 | } else if (this.iconsCreated === true) {
|
16292 | this.cleanNavigation();
|
16293 | }
|
16294 |
|
16295 | this.configureKeyboardBindings();
|
16296 | }
|
16297 |
|
16298 | |
16299 |
|
16300 |
|
16301 | cleanNavigation() {
|
16302 |
|
16303 | if (this.navigationHammers.length != 0) {
|
16304 | for (let i = 0; i < this.navigationHammers.length; i++) {
|
16305 | this.navigationHammers[i].destroy();
|
16306 | }
|
16307 | this.navigationHammers = [];
|
16308 | }
|
16309 |
|
16310 |
|
16311 | if (
|
16312 | this.navigationDOM &&
|
16313 | this.navigationDOM["wrapper"] &&
|
16314 | this.navigationDOM["wrapper"].parentNode
|
16315 | ) {
|
16316 | this.navigationDOM["wrapper"].parentNode.removeChild(
|
16317 | this.navigationDOM["wrapper"]
|
16318 | );
|
16319 | }
|
16320 |
|
16321 | this.iconsCreated = false;
|
16322 | }
|
16323 |
|
16324 | |
16325 |
|
16326 |
|
16327 |
|
16328 |
|
16329 |
|
16330 |
|
16331 |
|
16332 | loadNavigationElements() {
|
16333 | this.cleanNavigation();
|
16334 |
|
16335 | this.navigationDOM = {};
|
16336 | const navigationDivs = [
|
16337 | "up",
|
16338 | "down",
|
16339 | "left",
|
16340 | "right",
|
16341 | "zoomIn",
|
16342 | "zoomOut",
|
16343 | "zoomExtends",
|
16344 | ];
|
16345 | const navigationDivActions = [
|
16346 | "_moveUp",
|
16347 | "_moveDown",
|
16348 | "_moveLeft",
|
16349 | "_moveRight",
|
16350 | "_zoomIn",
|
16351 | "_zoomOut",
|
16352 | "_fit",
|
16353 | ];
|
16354 |
|
16355 | this.navigationDOM["wrapper"] = document.createElement("div");
|
16356 | this.navigationDOM["wrapper"].className = "vis-navigation";
|
16357 | this.canvas.frame.appendChild(this.navigationDOM["wrapper"]);
|
16358 |
|
16359 | for (let i = 0; i < navigationDivs.length; i++) {
|
16360 | this.navigationDOM[navigationDivs[i]] = document.createElement("div");
|
16361 | this.navigationDOM[navigationDivs[i]].className =
|
16362 | "vis-button vis-" + navigationDivs[i];
|
16363 | this.navigationDOM["wrapper"].appendChild(
|
16364 | this.navigationDOM[navigationDivs[i]]
|
16365 | );
|
16366 |
|
16367 | const hammer = new Hammer(this.navigationDOM[navigationDivs[i]]);
|
16368 | if (navigationDivActions[i] === "_fit") {
|
16369 | onTouch(hammer, this._fit.bind(this));
|
16370 | } else {
|
16371 | onTouch(hammer, this.bindToRedraw.bind(this, navigationDivActions[i]));
|
16372 | }
|
16373 |
|
16374 | this.navigationHammers.push(hammer);
|
16375 | }
|
16376 |
|
16377 |
|
16378 |
|
16379 | const hammerFrame = new Hammer(this.canvas.frame);
|
16380 | onRelease(hammerFrame, () => {
|
16381 | this._stopMovement();
|
16382 | });
|
16383 | this.navigationHammers.push(hammerFrame);
|
16384 |
|
16385 | this.iconsCreated = true;
|
16386 | }
|
16387 |
|
16388 | |
16389 |
|
16390 |
|
16391 |
|
16392 | bindToRedraw(action) {
|
16393 | if (this.boundFunctions[action] === undefined) {
|
16394 | this.boundFunctions[action] = this[action].bind(this);
|
16395 | this.body.emitter.on("initRedraw", this.boundFunctions[action]);
|
16396 | this.body.emitter.emit("_startRendering");
|
16397 | }
|
16398 | }
|
16399 |
|
16400 | |
16401 |
|
16402 |
|
16403 |
|
16404 | unbindFromRedraw(action) {
|
16405 | if (this.boundFunctions[action] !== undefined) {
|
16406 | this.body.emitter.off("initRedraw", this.boundFunctions[action]);
|
16407 | this.body.emitter.emit("_stopRendering");
|
16408 | delete this.boundFunctions[action];
|
16409 | }
|
16410 | }
|
16411 |
|
16412 | |
16413 |
|
16414 |
|
16415 |
|
16416 |
|
16417 | _fit() {
|
16418 | if (new Date().valueOf() - this.touchTime > 700) {
|
16419 |
|
16420 | this.body.emitter.emit("fit", { duration: 700 });
|
16421 | this.touchTime = new Date().valueOf();
|
16422 | }
|
16423 | }
|
16424 |
|
16425 | |
16426 |
|
16427 |
|
16428 |
|
16429 |
|
16430 | _stopMovement() {
|
16431 | for (const boundAction in this.boundFunctions) {
|
16432 | if (
|
16433 | Object.prototype.hasOwnProperty.call(this.boundFunctions, boundAction)
|
16434 | ) {
|
16435 | this.body.emitter.off("initRedraw", this.boundFunctions[boundAction]);
|
16436 | this.body.emitter.emit("_stopRendering");
|
16437 | }
|
16438 | }
|
16439 | this.boundFunctions = {};
|
16440 | }
|
16441 | |
16442 |
|
16443 |
|
16444 |
|
16445 | _moveUp() {
|
16446 | this.body.view.translation.y += this.options.keyboard.speed.y;
|
16447 | }
|
16448 | |
16449 |
|
16450 |
|
16451 |
|
16452 | _moveDown() {
|
16453 | this.body.view.translation.y -= this.options.keyboard.speed.y;
|
16454 | }
|
16455 | |
16456 |
|
16457 |
|
16458 |
|
16459 | _moveLeft() {
|
16460 | this.body.view.translation.x += this.options.keyboard.speed.x;
|
16461 | }
|
16462 | |
16463 |
|
16464 |
|
16465 |
|
16466 | _moveRight() {
|
16467 | this.body.view.translation.x -= this.options.keyboard.speed.x;
|
16468 | }
|
16469 | |
16470 |
|
16471 |
|
16472 |
|
16473 | _zoomIn() {
|
16474 | const scaleOld = this.body.view.scale;
|
16475 | const scale = this.body.view.scale * (1 + this.options.keyboard.speed.zoom);
|
16476 | const translation = this.body.view.translation;
|
16477 | const scaleFrac = scale / scaleOld;
|
16478 | const tx =
|
16479 | (1 - scaleFrac) * this.canvas.canvasViewCenter.x +
|
16480 | translation.x * scaleFrac;
|
16481 | const ty =
|
16482 | (1 - scaleFrac) * this.canvas.canvasViewCenter.y +
|
16483 | translation.y * scaleFrac;
|
16484 |
|
16485 | this.body.view.scale = scale;
|
16486 | this.body.view.translation = { x: tx, y: ty };
|
16487 | this.body.emitter.emit("zoom", {
|
16488 | direction: "+",
|
16489 | scale: this.body.view.scale,
|
16490 | pointer: null,
|
16491 | });
|
16492 | }
|
16493 |
|
16494 | |
16495 |
|
16496 |
|
16497 |
|
16498 | _zoomOut() {
|
16499 | const scaleOld = this.body.view.scale;
|
16500 | const scale = this.body.view.scale / (1 + this.options.keyboard.speed.zoom);
|
16501 | const translation = this.body.view.translation;
|
16502 | const scaleFrac = scale / scaleOld;
|
16503 | const tx =
|
16504 | (1 - scaleFrac) * this.canvas.canvasViewCenter.x +
|
16505 | translation.x * scaleFrac;
|
16506 | const ty =
|
16507 | (1 - scaleFrac) * this.canvas.canvasViewCenter.y +
|
16508 | translation.y * scaleFrac;
|
16509 |
|
16510 | this.body.view.scale = scale;
|
16511 | this.body.view.translation = { x: tx, y: ty };
|
16512 | this.body.emitter.emit("zoom", {
|
16513 | direction: "-",
|
16514 | scale: this.body.view.scale,
|
16515 | pointer: null,
|
16516 | });
|
16517 | }
|
16518 |
|
16519 | |
16520 |
|
16521 |
|
16522 | configureKeyboardBindings() {
|
16523 | if (this.keycharm !== undefined) {
|
16524 | this.keycharm.destroy();
|
16525 | }
|
16526 |
|
16527 | if (this.options.keyboard.enabled === true) {
|
16528 | if (this.options.keyboard.bindToWindow === true) {
|
16529 | this.keycharm = keycharm({ container: window, preventDefault: true });
|
16530 | } else {
|
16531 | this.keycharm = keycharm({
|
16532 | container: this.canvas.frame,
|
16533 | preventDefault: true,
|
16534 | });
|
16535 | }
|
16536 |
|
16537 | this.keycharm.reset();
|
16538 |
|
16539 | if (this.activated === true) {
|
16540 | this.keycharm.bind(
|
16541 | "up",
|
16542 | () => {
|
16543 | this.bindToRedraw("_moveUp");
|
16544 | },
|
16545 | "keydown"
|
16546 | );
|
16547 | this.keycharm.bind(
|
16548 | "down",
|
16549 | () => {
|
16550 | this.bindToRedraw("_moveDown");
|
16551 | },
|
16552 | "keydown"
|
16553 | );
|
16554 | this.keycharm.bind(
|
16555 | "left",
|
16556 | () => {
|
16557 | this.bindToRedraw("_moveLeft");
|
16558 | },
|
16559 | "keydown"
|
16560 | );
|
16561 | this.keycharm.bind(
|
16562 | "right",
|
16563 | () => {
|
16564 | this.bindToRedraw("_moveRight");
|
16565 | },
|
16566 | "keydown"
|
16567 | );
|
16568 | this.keycharm.bind(
|
16569 | "=",
|
16570 | () => {
|
16571 | this.bindToRedraw("_zoomIn");
|
16572 | },
|
16573 | "keydown"
|
16574 | );
|
16575 | this.keycharm.bind(
|
16576 | "num+",
|
16577 | () => {
|
16578 | this.bindToRedraw("_zoomIn");
|
16579 | },
|
16580 | "keydown"
|
16581 | );
|
16582 | this.keycharm.bind(
|
16583 | "num-",
|
16584 | () => {
|
16585 | this.bindToRedraw("_zoomOut");
|
16586 | },
|
16587 | "keydown"
|
16588 | );
|
16589 | this.keycharm.bind(
|
16590 | "-",
|
16591 | () => {
|
16592 | this.bindToRedraw("_zoomOut");
|
16593 | },
|
16594 | "keydown"
|
16595 | );
|
16596 | this.keycharm.bind(
|
16597 | "[",
|
16598 | () => {
|
16599 | this.bindToRedraw("_zoomOut");
|
16600 | },
|
16601 | "keydown"
|
16602 | );
|
16603 | this.keycharm.bind(
|
16604 | "]",
|
16605 | () => {
|
16606 | this.bindToRedraw("_zoomIn");
|
16607 | },
|
16608 | "keydown"
|
16609 | );
|
16610 | this.keycharm.bind(
|
16611 | "pageup",
|
16612 | () => {
|
16613 | this.bindToRedraw("_zoomIn");
|
16614 | },
|
16615 | "keydown"
|
16616 | );
|
16617 | this.keycharm.bind(
|
16618 | "pagedown",
|
16619 | () => {
|
16620 | this.bindToRedraw("_zoomOut");
|
16621 | },
|
16622 | "keydown"
|
16623 | );
|
16624 |
|
16625 | this.keycharm.bind(
|
16626 | "up",
|
16627 | () => {
|
16628 | this.unbindFromRedraw("_moveUp");
|
16629 | },
|
16630 | "keyup"
|
16631 | );
|
16632 | this.keycharm.bind(
|
16633 | "down",
|
16634 | () => {
|
16635 | this.unbindFromRedraw("_moveDown");
|
16636 | },
|
16637 | "keyup"
|
16638 | );
|
16639 | this.keycharm.bind(
|
16640 | "left",
|
16641 | () => {
|
16642 | this.unbindFromRedraw("_moveLeft");
|
16643 | },
|
16644 | "keyup"
|
16645 | );
|
16646 | this.keycharm.bind(
|
16647 | "right",
|
16648 | () => {
|
16649 | this.unbindFromRedraw("_moveRight");
|
16650 | },
|
16651 | "keyup"
|
16652 | );
|
16653 | this.keycharm.bind(
|
16654 | "=",
|
16655 | () => {
|
16656 | this.unbindFromRedraw("_zoomIn");
|
16657 | },
|
16658 | "keyup"
|
16659 | );
|
16660 | this.keycharm.bind(
|
16661 | "num+",
|
16662 | () => {
|
16663 | this.unbindFromRedraw("_zoomIn");
|
16664 | },
|
16665 | "keyup"
|
16666 | );
|
16667 | this.keycharm.bind(
|
16668 | "num-",
|
16669 | () => {
|
16670 | this.unbindFromRedraw("_zoomOut");
|
16671 | },
|
16672 | "keyup"
|
16673 | );
|
16674 | this.keycharm.bind(
|
16675 | "-",
|
16676 | () => {
|
16677 | this.unbindFromRedraw("_zoomOut");
|
16678 | },
|
16679 | "keyup"
|
16680 | );
|
16681 | this.keycharm.bind(
|
16682 | "[",
|
16683 | () => {
|
16684 | this.unbindFromRedraw("_zoomOut");
|
16685 | },
|
16686 | "keyup"
|
16687 | );
|
16688 | this.keycharm.bind(
|
16689 | "]",
|
16690 | () => {
|
16691 | this.unbindFromRedraw("_zoomIn");
|
16692 | },
|
16693 | "keyup"
|
16694 | );
|
16695 | this.keycharm.bind(
|
16696 | "pageup",
|
16697 | () => {
|
16698 | this.unbindFromRedraw("_zoomIn");
|
16699 | },
|
16700 | "keyup"
|
16701 | );
|
16702 | this.keycharm.bind(
|
16703 | "pagedown",
|
16704 | () => {
|
16705 | this.unbindFromRedraw("_zoomOut");
|
16706 | },
|
16707 | "keyup"
|
16708 | );
|
16709 | }
|
16710 | }
|
16711 | }
|
16712 | }
|
16713 |
|
16714 |
|
16715 |
|
16716 |
|
16717 | class InteractionHandler {
|
16718 | |
16719 |
|
16720 |
|
16721 |
|
16722 |
|
16723 | constructor(body, canvas, selectionHandler) {
|
16724 | this.body = body;
|
16725 | this.canvas = canvas;
|
16726 | this.selectionHandler = selectionHandler;
|
16727 | this.navigationHandler = new NavigationHandler(body, canvas);
|
16728 |
|
16729 |
|
16730 | this.body.eventListeners.onTap = this.onTap.bind(this);
|
16731 | this.body.eventListeners.onTouch = this.onTouch.bind(this);
|
16732 | this.body.eventListeners.onDoubleTap = this.onDoubleTap.bind(this);
|
16733 | this.body.eventListeners.onHold = this.onHold.bind(this);
|
16734 | this.body.eventListeners.onDragStart = this.onDragStart.bind(this);
|
16735 | this.body.eventListeners.onDrag = this.onDrag.bind(this);
|
16736 | this.body.eventListeners.onDragEnd = this.onDragEnd.bind(this);
|
16737 | this.body.eventListeners.onMouseWheel = this.onMouseWheel.bind(this);
|
16738 | this.body.eventListeners.onPinch = this.onPinch.bind(this);
|
16739 | this.body.eventListeners.onMouseMove = this.onMouseMove.bind(this);
|
16740 | this.body.eventListeners.onRelease = this.onRelease.bind(this);
|
16741 | this.body.eventListeners.onContext = this.onContext.bind(this);
|
16742 |
|
16743 | this.touchTime = 0;
|
16744 | this.drag = {};
|
16745 | this.pinch = {};
|
16746 | this.popup = undefined;
|
16747 | this.popupObj = undefined;
|
16748 | this.popupTimer = undefined;
|
16749 |
|
16750 | this.body.functions.getPointer = this.getPointer.bind(this);
|
16751 |
|
16752 | this.options = {};
|
16753 | this.defaultOptions = {
|
16754 | dragNodes: true,
|
16755 | dragView: true,
|
16756 | hover: false,
|
16757 | keyboard: {
|
16758 | enabled: false,
|
16759 | speed: { x: 10, y: 10, zoom: 0.02 },
|
16760 | bindToWindow: true,
|
16761 | autoFocus: true,
|
16762 | },
|
16763 | navigationButtons: false,
|
16764 | tooltipDelay: 300,
|
16765 | zoomView: true,
|
16766 | zoomSpeed: 1,
|
16767 | };
|
16768 | Object.assign(this.options, this.defaultOptions);
|
16769 |
|
16770 | this.bindEventListeners();
|
16771 | }
|
16772 |
|
16773 | |
16774 |
|
16775 |
|
16776 | bindEventListeners() {
|
16777 | this.body.emitter.on("destroy", () => {
|
16778 | clearTimeout(this.popupTimer);
|
16779 | delete this.body.functions.getPointer;
|
16780 | });
|
16781 | }
|
16782 |
|
16783 | |
16784 |
|
16785 |
|
16786 |
|
16787 | setOptions(options) {
|
16788 | if (options !== undefined) {
|
16789 |
|
16790 | const fields = [
|
16791 | "hideEdgesOnDrag",
|
16792 | "hideEdgesOnZoom",
|
16793 | "hideNodesOnDrag",
|
16794 | "keyboard",
|
16795 | "multiselect",
|
16796 | "selectable",
|
16797 | "selectConnectedEdges",
|
16798 | ];
|
16799 | selectiveNotDeepExtend(fields, this.options, options);
|
16800 |
|
16801 |
|
16802 | mergeOptions(this.options, options, "keyboard");
|
16803 |
|
16804 | if (options.tooltip) {
|
16805 | Object.assign(this.options.tooltip, options.tooltip);
|
16806 | if (options.tooltip.color) {
|
16807 | this.options.tooltip.color = parseColor(options.tooltip.color);
|
16808 | }
|
16809 | }
|
16810 | }
|
16811 |
|
16812 | this.navigationHandler.setOptions(this.options);
|
16813 | }
|
16814 |
|
16815 | |
16816 |
|
16817 |
|
16818 |
|
16819 |
|
16820 |
|
16821 |
|
16822 | getPointer(touch) {
|
16823 | return {
|
16824 | x: touch.x - getAbsoluteLeft(this.canvas.frame.canvas),
|
16825 | y: touch.y - getAbsoluteTop(this.canvas.frame.canvas),
|
16826 | };
|
16827 | }
|
16828 |
|
16829 | |
16830 |
|
16831 |
|
16832 |
|
16833 |
|
16834 |
|
16835 | onTouch(event) {
|
16836 | if (new Date().valueOf() - this.touchTime > 50) {
|
16837 | this.drag.pointer = this.getPointer(event.center);
|
16838 | this.drag.pinched = false;
|
16839 | this.pinch.scale = this.body.view.scale;
|
16840 |
|
16841 | this.touchTime = new Date().valueOf();
|
16842 | }
|
16843 | }
|
16844 |
|
16845 | |
16846 |
|
16847 |
|
16848 |
|
16849 |
|
16850 |
|
16851 | onTap(event) {
|
16852 | const pointer = this.getPointer(event.center);
|
16853 | const multiselect =
|
16854 | this.selectionHandler.options.multiselect &&
|
16855 | (event.changedPointers[0].ctrlKey || event.changedPointers[0].metaKey);
|
16856 |
|
16857 | this.checkSelectionChanges(pointer, multiselect);
|
16858 |
|
16859 | this.selectionHandler.commitAndEmit(pointer, event);
|
16860 | this.selectionHandler.generateClickEvent("click", event, pointer);
|
16861 | }
|
16862 |
|
16863 | |
16864 |
|
16865 |
|
16866 |
|
16867 |
|
16868 |
|
16869 | onDoubleTap(event) {
|
16870 | const pointer = this.getPointer(event.center);
|
16871 | this.selectionHandler.generateClickEvent("doubleClick", event, pointer);
|
16872 | }
|
16873 |
|
16874 | |
16875 |
|
16876 |
|
16877 |
|
16878 |
|
16879 |
|
16880 | onHold(event) {
|
16881 | const pointer = this.getPointer(event.center);
|
16882 | const multiselect = this.selectionHandler.options.multiselect;
|
16883 |
|
16884 | this.checkSelectionChanges(pointer, multiselect);
|
16885 |
|
16886 | this.selectionHandler.commitAndEmit(pointer, event);
|
16887 | this.selectionHandler.generateClickEvent("click", event, pointer);
|
16888 | this.selectionHandler.generateClickEvent("hold", event, pointer);
|
16889 | }
|
16890 |
|
16891 | |
16892 |
|
16893 |
|
16894 |
|
16895 |
|
16896 |
|
16897 | onRelease(event) {
|
16898 | if (new Date().valueOf() - this.touchTime > 10) {
|
16899 | const pointer = this.getPointer(event.center);
|
16900 | this.selectionHandler.generateClickEvent("release", event, pointer);
|
16901 |
|
16902 | this.touchTime = new Date().valueOf();
|
16903 | }
|
16904 | }
|
16905 |
|
16906 | |
16907 |
|
16908 |
|
16909 |
|
16910 | onContext(event) {
|
16911 | const pointer = this.getPointer({ x: event.clientX, y: event.clientY });
|
16912 | this.selectionHandler.generateClickEvent("oncontext", event, pointer);
|
16913 | }
|
16914 |
|
16915 | |
16916 |
|
16917 |
|
16918 |
|
16919 |
|
16920 |
|
16921 | checkSelectionChanges(pointer, add = false) {
|
16922 | if (add === true) {
|
16923 | this.selectionHandler.selectAdditionalOnPoint(pointer);
|
16924 | } else {
|
16925 | this.selectionHandler.selectOnPoint(pointer);
|
16926 | }
|
16927 | }
|
16928 |
|
16929 | |
16930 |
|
16931 |
|
16932 |
|
16933 |
|
16934 |
|
16935 |
|
16936 |
|
16937 | _determineDifference(firstSet, secondSet) {
|
16938 | const arrayDiff = function (firstArr, secondArr) {
|
16939 | const result = [];
|
16940 |
|
16941 | for (let i = 0; i < firstArr.length; i++) {
|
16942 | const value = firstArr[i];
|
16943 | if (secondArr.indexOf(value) === -1) {
|
16944 | result.push(value);
|
16945 | }
|
16946 | }
|
16947 |
|
16948 | return result;
|
16949 | };
|
16950 |
|
16951 | return {
|
16952 | nodes: arrayDiff(firstSet.nodes, secondSet.nodes),
|
16953 | edges: arrayDiff(firstSet.edges, secondSet.edges),
|
16954 | };
|
16955 | }
|
16956 |
|
16957 | |
16958 |
|
16959 |
|
16960 |
|
16961 |
|
16962 |
|
16963 |
|
16964 | onDragStart(event) {
|
16965 |
|
16966 |
|
16967 | if (this.drag.dragging) {
|
16968 | return;
|
16969 | }
|
16970 |
|
16971 |
|
16972 | if (this.drag.pointer === undefined) {
|
16973 | this.onTouch(event);
|
16974 | }
|
16975 |
|
16976 |
|
16977 | const node = this.selectionHandler.getNodeAt(this.drag.pointer);
|
16978 |
|
16979 | this.drag.dragging = true;
|
16980 | this.drag.selection = [];
|
16981 | this.drag.translation = Object.assign({}, this.body.view.translation);
|
16982 | this.drag.nodeId = undefined;
|
16983 |
|
16984 | if (event.srcEvent.shiftKey) {
|
16985 | this.body.selectionBox.show = true;
|
16986 | const pointer = this.getPointer(event.center);
|
16987 |
|
16988 | this.body.selectionBox.position.start = {
|
16989 | x: this.canvas._XconvertDOMtoCanvas(pointer.x),
|
16990 | y: this.canvas._YconvertDOMtoCanvas(pointer.y),
|
16991 | };
|
16992 | this.body.selectionBox.position.end = {
|
16993 | x: this.canvas._XconvertDOMtoCanvas(pointer.x),
|
16994 | y: this.canvas._YconvertDOMtoCanvas(pointer.y),
|
16995 | };
|
16996 | }
|
16997 |
|
16998 | if (node !== undefined && this.options.dragNodes === true) {
|
16999 | this.drag.nodeId = node.id;
|
17000 |
|
17001 | if (node.isSelected() === false) {
|
17002 | this.selectionHandler.unselectAll();
|
17003 | this.selectionHandler.selectObject(node);
|
17004 | }
|
17005 |
|
17006 |
|
17007 | this.selectionHandler.generateClickEvent(
|
17008 | "dragStart",
|
17009 | event,
|
17010 | this.drag.pointer
|
17011 | );
|
17012 |
|
17013 |
|
17014 | for (const node of this.selectionHandler.getSelectedNodes()) {
|
17015 | const s = {
|
17016 | id: node.id,
|
17017 | node: node,
|
17018 |
|
17019 |
|
17020 | x: node.x,
|
17021 | y: node.y,
|
17022 | xFixed: node.options.fixed.x,
|
17023 | yFixed: node.options.fixed.y,
|
17024 | };
|
17025 |
|
17026 | node.options.fixed.x = true;
|
17027 | node.options.fixed.y = true;
|
17028 |
|
17029 | this.drag.selection.push(s);
|
17030 | }
|
17031 | } else {
|
17032 |
|
17033 | this.selectionHandler.generateClickEvent(
|
17034 | "dragStart",
|
17035 | event,
|
17036 | this.drag.pointer,
|
17037 | undefined,
|
17038 | true
|
17039 | );
|
17040 | }
|
17041 | }
|
17042 |
|
17043 | |
17044 |
|
17045 |
|
17046 |
|
17047 |
|
17048 |
|
17049 | onDrag(event) {
|
17050 | if (this.drag.pinched === true) {
|
17051 | return;
|
17052 | }
|
17053 |
|
17054 |
|
17055 | this.body.emitter.emit("unlockNode");
|
17056 |
|
17057 | const pointer = this.getPointer(event.center);
|
17058 |
|
17059 | const selection = this.drag.selection;
|
17060 | if (selection && selection.length && this.options.dragNodes === true) {
|
17061 | this.selectionHandler.generateClickEvent("dragging", event, pointer);
|
17062 |
|
17063 |
|
17064 | const deltaX = pointer.x - this.drag.pointer.x;
|
17065 | const deltaY = pointer.y - this.drag.pointer.y;
|
17066 |
|
17067 |
|
17068 | selection.forEach((selection) => {
|
17069 | const node = selection.node;
|
17070 |
|
17071 | if (selection.xFixed === false) {
|
17072 | node.x = this.canvas._XconvertDOMtoCanvas(
|
17073 | this.canvas._XconvertCanvasToDOM(selection.x) + deltaX
|
17074 | );
|
17075 | }
|
17076 |
|
17077 | if (selection.yFixed === false) {
|
17078 | node.y = this.canvas._YconvertDOMtoCanvas(
|
17079 | this.canvas._YconvertCanvasToDOM(selection.y) + deltaY
|
17080 | );
|
17081 | }
|
17082 | });
|
17083 |
|
17084 |
|
17085 | this.body.emitter.emit("startSimulation");
|
17086 | } else {
|
17087 |
|
17088 | if (event.srcEvent.shiftKey) {
|
17089 | this.selectionHandler.generateClickEvent(
|
17090 | "dragging",
|
17091 | event,
|
17092 | pointer,
|
17093 | undefined,
|
17094 | true
|
17095 | );
|
17096 |
|
17097 |
|
17098 | if (this.drag.pointer === undefined) {
|
17099 | this.onDragStart(event);
|
17100 | return;
|
17101 | }
|
17102 |
|
17103 | this.body.selectionBox.position.end = {
|
17104 | x: this.canvas._XconvertDOMtoCanvas(pointer.x),
|
17105 | y: this.canvas._YconvertDOMtoCanvas(pointer.y),
|
17106 | };
|
17107 | this.body.emitter.emit("_requestRedraw");
|
17108 | }
|
17109 |
|
17110 |
|
17111 | if (this.options.dragView === true && !event.srcEvent.shiftKey) {
|
17112 | this.selectionHandler.generateClickEvent(
|
17113 | "dragging",
|
17114 | event,
|
17115 | pointer,
|
17116 | undefined,
|
17117 | true
|
17118 | );
|
17119 |
|
17120 |
|
17121 | if (this.drag.pointer === undefined) {
|
17122 | this.onDragStart(event);
|
17123 | return;
|
17124 | }
|
17125 |
|
17126 | const diffX = pointer.x - this.drag.pointer.x;
|
17127 | const diffY = pointer.y - this.drag.pointer.y;
|
17128 |
|
17129 | this.body.view.translation = {
|
17130 | x: this.drag.translation.x + diffX,
|
17131 | y: this.drag.translation.y + diffY,
|
17132 | };
|
17133 | this.body.emitter.emit("_requestRedraw");
|
17134 | }
|
17135 | }
|
17136 | }
|
17137 |
|
17138 | |
17139 |
|
17140 |
|
17141 |
|
17142 |
|
17143 |
|
17144 | onDragEnd(event) {
|
17145 | this.drag.dragging = false;
|
17146 |
|
17147 | if (this.body.selectionBox.show) {
|
17148 | this.body.selectionBox.show = false;
|
17149 | const selectionBoxPosition = this.body.selectionBox.position;
|
17150 | const selectionBoxPositionMinMax = {
|
17151 | minX: Math.min(
|
17152 | selectionBoxPosition.start.x,
|
17153 | selectionBoxPosition.end.x
|
17154 | ),
|
17155 | minY: Math.min(
|
17156 | selectionBoxPosition.start.y,
|
17157 | selectionBoxPosition.end.y
|
17158 | ),
|
17159 | maxX: Math.max(
|
17160 | selectionBoxPosition.start.x,
|
17161 | selectionBoxPosition.end.x
|
17162 | ),
|
17163 | maxY: Math.max(
|
17164 | selectionBoxPosition.start.y,
|
17165 | selectionBoxPosition.end.y
|
17166 | ),
|
17167 | };
|
17168 |
|
17169 | const toBeSelectedNodes = this.body.nodeIndices.filter((nodeId) => {
|
17170 | const node = this.body.nodes[nodeId];
|
17171 | return (
|
17172 | node.x >= selectionBoxPositionMinMax.minX &&
|
17173 | node.x <= selectionBoxPositionMinMax.maxX &&
|
17174 | node.y >= selectionBoxPositionMinMax.minY &&
|
17175 | node.y <= selectionBoxPositionMinMax.maxY
|
17176 | );
|
17177 | });
|
17178 |
|
17179 | toBeSelectedNodes.forEach((nodeId) =>
|
17180 | this.selectionHandler.selectObject(this.body.nodes[nodeId])
|
17181 | );
|
17182 |
|
17183 | const pointer = this.getPointer(event.center);
|
17184 | this.selectionHandler.commitAndEmit(pointer, event);
|
17185 | this.selectionHandler.generateClickEvent(
|
17186 | "dragEnd",
|
17187 | event,
|
17188 | this.getPointer(event.center),
|
17189 | undefined,
|
17190 | true
|
17191 | );
|
17192 | this.body.emitter.emit("_requestRedraw");
|
17193 | } else {
|
17194 | const selection = this.drag.selection;
|
17195 | if (selection && selection.length) {
|
17196 | selection.forEach(function (s) {
|
17197 |
|
17198 | s.node.options.fixed.x = s.xFixed;
|
17199 | s.node.options.fixed.y = s.yFixed;
|
17200 | });
|
17201 | this.selectionHandler.generateClickEvent(
|
17202 | "dragEnd",
|
17203 | event,
|
17204 | this.getPointer(event.center)
|
17205 | );
|
17206 | this.body.emitter.emit("startSimulation");
|
17207 | } else {
|
17208 | this.selectionHandler.generateClickEvent(
|
17209 | "dragEnd",
|
17210 | event,
|
17211 | this.getPointer(event.center),
|
17212 | undefined,
|
17213 | true
|
17214 | );
|
17215 | this.body.emitter.emit("_requestRedraw");
|
17216 | }
|
17217 | }
|
17218 | }
|
17219 |
|
17220 | |
17221 |
|
17222 |
|
17223 |
|
17224 |
|
17225 |
|
17226 | onPinch(event) {
|
17227 | const pointer = this.getPointer(event.center);
|
17228 |
|
17229 | this.drag.pinched = true;
|
17230 | if (this.pinch["scale"] === undefined) {
|
17231 | this.pinch.scale = 1;
|
17232 | }
|
17233 |
|
17234 |
|
17235 | const scale = this.pinch.scale * event.scale;
|
17236 | this.zoom(scale, pointer);
|
17237 | }
|
17238 |
|
17239 | |
17240 |
|
17241 |
|
17242 |
|
17243 |
|
17244 |
|
17245 |
|
17246 | zoom(scale, pointer) {
|
17247 | if (this.options.zoomView === true) {
|
17248 | const scaleOld = this.body.view.scale;
|
17249 | if (scale < 0.00001) {
|
17250 | scale = 0.00001;
|
17251 | }
|
17252 | if (scale > 10) {
|
17253 | scale = 10;
|
17254 | }
|
17255 |
|
17256 | let preScaleDragPointer = undefined;
|
17257 | if (this.drag !== undefined) {
|
17258 | if (this.drag.dragging === true) {
|
17259 | preScaleDragPointer = this.canvas.DOMtoCanvas(this.drag.pointer);
|
17260 | }
|
17261 | }
|
17262 |
|
17263 | const translation = this.body.view.translation;
|
17264 |
|
17265 | const scaleFrac = scale / scaleOld;
|
17266 | const tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
|
17267 | const ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
|
17268 |
|
17269 | this.body.view.scale = scale;
|
17270 | this.body.view.translation = { x: tx, y: ty };
|
17271 |
|
17272 | if (preScaleDragPointer != undefined) {
|
17273 | const postScaleDragPointer =
|
17274 | this.canvas.canvasToDOM(preScaleDragPointer);
|
17275 | this.drag.pointer.x = postScaleDragPointer.x;
|
17276 | this.drag.pointer.y = postScaleDragPointer.y;
|
17277 | }
|
17278 |
|
17279 | this.body.emitter.emit("_requestRedraw");
|
17280 |
|
17281 | if (scaleOld < scale) {
|
17282 | this.body.emitter.emit("zoom", {
|
17283 | direction: "+",
|
17284 | scale: this.body.view.scale,
|
17285 | pointer: pointer,
|
17286 | });
|
17287 | } else {
|
17288 | this.body.emitter.emit("zoom", {
|
17289 | direction: "-",
|
17290 | scale: this.body.view.scale,
|
17291 | pointer: pointer,
|
17292 | });
|
17293 | }
|
17294 | }
|
17295 | }
|
17296 |
|
17297 | |
17298 |
|
17299 |
|
17300 |
|
17301 |
|
17302 |
|
17303 |
|
17304 |
|
17305 | onMouseWheel(event) {
|
17306 | if (this.options.zoomView === true) {
|
17307 |
|
17308 |
|
17309 |
|
17310 | if (event.deltaY !== 0) {
|
17311 |
|
17312 | let scale = this.body.view.scale;
|
17313 | scale *=
|
17314 | 1 + (event.deltaY < 0 ? 1 : -1) * (this.options.zoomSpeed * 0.1);
|
17315 |
|
17316 |
|
17317 | const pointer = this.getPointer({ x: event.clientX, y: event.clientY });
|
17318 |
|
17319 |
|
17320 | this.zoom(scale, pointer);
|
17321 | }
|
17322 |
|
17323 |
|
17324 | event.preventDefault();
|
17325 | }
|
17326 | }
|
17327 |
|
17328 | |
17329 |
|
17330 |
|
17331 |
|
17332 |
|
17333 |
|
17334 | onMouseMove(event) {
|
17335 | const pointer = this.getPointer({ x: event.clientX, y: event.clientY });
|
17336 | let popupVisible = false;
|
17337 |
|
17338 |
|
17339 | if (this.popup !== undefined) {
|
17340 | if (this.popup.hidden === false) {
|
17341 | this._checkHidePopup(pointer);
|
17342 | }
|
17343 |
|
17344 |
|
17345 | if (this.popup.hidden === false) {
|
17346 | popupVisible = true;
|
17347 | this.popup.setPosition(pointer.x + 3, pointer.y - 5);
|
17348 | this.popup.show();
|
17349 | }
|
17350 | }
|
17351 |
|
17352 |
|
17353 | if (
|
17354 | this.options.keyboard.autoFocus &&
|
17355 | this.options.keyboard.bindToWindow === false &&
|
17356 | this.options.keyboard.enabled === true
|
17357 | ) {
|
17358 | this.canvas.frame.focus();
|
17359 | }
|
17360 |
|
17361 |
|
17362 | if (popupVisible === false) {
|
17363 | if (this.popupTimer !== undefined) {
|
17364 | clearInterval(this.popupTimer);
|
17365 | this.popupTimer = undefined;
|
17366 | }
|
17367 | if (!this.drag.dragging) {
|
17368 | this.popupTimer = setTimeout(
|
17369 | () => this._checkShowPopup(pointer),
|
17370 | this.options.tooltipDelay
|
17371 | );
|
17372 | }
|
17373 | }
|
17374 |
|
17375 |
|
17376 | if (this.options.hover === true) {
|
17377 | this.selectionHandler.hoverObject(event, pointer);
|
17378 | }
|
17379 | }
|
17380 |
|
17381 | |
17382 |
|
17383 |
|
17384 |
|
17385 |
|
17386 |
|
17387 |
|
17388 |
|
17389 | _checkShowPopup(pointer) {
|
17390 | const x = this.canvas._XconvertDOMtoCanvas(pointer.x);
|
17391 | const y = this.canvas._YconvertDOMtoCanvas(pointer.y);
|
17392 | const pointerObj = {
|
17393 | left: x,
|
17394 | top: y,
|
17395 | right: x,
|
17396 | bottom: y,
|
17397 | };
|
17398 |
|
17399 | const previousPopupObjId =
|
17400 | this.popupObj === undefined ? undefined : this.popupObj.id;
|
17401 | let nodeUnderCursor = false;
|
17402 | let popupType = "node";
|
17403 |
|
17404 |
|
17405 | if (this.popupObj === undefined) {
|
17406 |
|
17407 | const nodeIndices = this.body.nodeIndices;
|
17408 | const nodes = this.body.nodes;
|
17409 | let node;
|
17410 | const overlappingNodes = [];
|
17411 | for (let i = 0; i < nodeIndices.length; i++) {
|
17412 | node = nodes[nodeIndices[i]];
|
17413 | if (node.isOverlappingWith(pointerObj) === true) {
|
17414 | nodeUnderCursor = true;
|
17415 | if (node.getTitle() !== undefined) {
|
17416 | overlappingNodes.push(nodeIndices[i]);
|
17417 | }
|
17418 | }
|
17419 | }
|
17420 |
|
17421 | if (overlappingNodes.length > 0) {
|
17422 |
|
17423 | this.popupObj = nodes[overlappingNodes[overlappingNodes.length - 1]];
|
17424 |
|
17425 | nodeUnderCursor = true;
|
17426 | }
|
17427 | }
|
17428 |
|
17429 | if (this.popupObj === undefined && nodeUnderCursor === false) {
|
17430 |
|
17431 | const edgeIndices = this.body.edgeIndices;
|
17432 | const edges = this.body.edges;
|
17433 | let edge;
|
17434 | const overlappingEdges = [];
|
17435 | for (let i = 0; i < edgeIndices.length; i++) {
|
17436 | edge = edges[edgeIndices[i]];
|
17437 | if (edge.isOverlappingWith(pointerObj) === true) {
|
17438 | if (edge.connected === true && edge.getTitle() !== undefined) {
|
17439 | overlappingEdges.push(edgeIndices[i]);
|
17440 | }
|
17441 | }
|
17442 | }
|
17443 |
|
17444 | if (overlappingEdges.length > 0) {
|
17445 | this.popupObj = edges[overlappingEdges[overlappingEdges.length - 1]];
|
17446 | popupType = "edge";
|
17447 | }
|
17448 | }
|
17449 |
|
17450 | if (this.popupObj !== undefined) {
|
17451 |
|
17452 | if (this.popupObj.id !== previousPopupObjId) {
|
17453 | if (this.popup === undefined) {
|
17454 | this.popup = new Popup(this.canvas.frame);
|
17455 | }
|
17456 |
|
17457 | this.popup.popupTargetType = popupType;
|
17458 | this.popup.popupTargetId = this.popupObj.id;
|
17459 |
|
17460 |
|
17461 |
|
17462 |
|
17463 | this.popup.setPosition(pointer.x + 3, pointer.y - 5);
|
17464 | this.popup.setText(this.popupObj.getTitle());
|
17465 | this.popup.show();
|
17466 | this.body.emitter.emit("showPopup", this.popupObj.id);
|
17467 | }
|
17468 | } else {
|
17469 | if (this.popup !== undefined) {
|
17470 | this.popup.hide();
|
17471 | this.body.emitter.emit("hidePopup");
|
17472 | }
|
17473 | }
|
17474 | }
|
17475 |
|
17476 | |
17477 |
|
17478 |
|
17479 |
|
17480 |
|
17481 |
|
17482 |
|
17483 | _checkHidePopup(pointer) {
|
17484 | const pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
|
17485 |
|
17486 | let stillOnObj = false;
|
17487 | if (this.popup.popupTargetType === "node") {
|
17488 | if (this.body.nodes[this.popup.popupTargetId] !== undefined) {
|
17489 | stillOnObj =
|
17490 | this.body.nodes[this.popup.popupTargetId].isOverlappingWith(
|
17491 | pointerObj
|
17492 | );
|
17493 |
|
17494 |
|
17495 |
|
17496 | if (stillOnObj === true) {
|
17497 | const overNode = this.selectionHandler.getNodeAt(pointer);
|
17498 | stillOnObj =
|
17499 | overNode === undefined
|
17500 | ? false
|
17501 | : overNode.id === this.popup.popupTargetId;
|
17502 | }
|
17503 | }
|
17504 | } else {
|
17505 | if (this.selectionHandler.getNodeAt(pointer) === undefined) {
|
17506 | if (this.body.edges[this.popup.popupTargetId] !== undefined) {
|
17507 | stillOnObj =
|
17508 | this.body.edges[this.popup.popupTargetId].isOverlappingWith(
|
17509 | pointerObj
|
17510 | );
|
17511 | }
|
17512 | }
|
17513 | }
|
17514 |
|
17515 | if (stillOnObj === false) {
|
17516 | this.popupObj = undefined;
|
17517 | this.popup.hide();
|
17518 | this.body.emitter.emit("hidePopup");
|
17519 | }
|
17520 | }
|
17521 | }
|
17522 |
|
17523 | var _SingleTypeSelectionAccumulator_previousSelection, _SingleTypeSelectionAccumulator_selection, _SelectionAccumulator_nodes, _SelectionAccumulator_edges, _SelectionAccumulator_commitHandler;
|
17524 |
|
17525 |
|
17526 |
|
17527 |
|
17528 | function diffSets(prev, next) {
|
17529 | const diff = new Set();
|
17530 | for (const item of next) {
|
17531 | if (!prev.has(item)) {
|
17532 | diff.add(item);
|
17533 | }
|
17534 | }
|
17535 | return diff;
|
17536 | }
|
17537 | class SingleTypeSelectionAccumulator {
|
17538 | constructor() {
|
17539 | _SingleTypeSelectionAccumulator_previousSelection.set(this, new Set());
|
17540 | _SingleTypeSelectionAccumulator_selection.set(this, new Set());
|
17541 | }
|
17542 | get size() {
|
17543 | return __classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_selection, "f").size;
|
17544 | }
|
17545 | add(...items) {
|
17546 | for (const item of items) {
|
17547 | __classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_selection, "f").add(item);
|
17548 | }
|
17549 | }
|
17550 | delete(...items) {
|
17551 | for (const item of items) {
|
17552 | __classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_selection, "f").delete(item);
|
17553 | }
|
17554 | }
|
17555 | clear() {
|
17556 | __classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_selection, "f").clear();
|
17557 | }
|
17558 | getSelection() {
|
17559 | return [...__classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_selection, "f")];
|
17560 | }
|
17561 | getChanges() {
|
17562 | return {
|
17563 | added: [...diffSets(__classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_previousSelection, "f"), __classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_selection, "f"))],
|
17564 | deleted: [...diffSets(__classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_selection, "f"), __classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_previousSelection, "f"))],
|
17565 | previous: [...new Set(__classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_previousSelection, "f"))],
|
17566 | current: [...new Set(__classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_selection, "f"))],
|
17567 | };
|
17568 | }
|
17569 | commit() {
|
17570 | const changes = this.getChanges();
|
17571 | __classPrivateFieldSet(this, _SingleTypeSelectionAccumulator_previousSelection, __classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_selection, "f"), "f");
|
17572 | __classPrivateFieldSet(this, _SingleTypeSelectionAccumulator_selection, new Set(__classPrivateFieldGet(this, _SingleTypeSelectionAccumulator_previousSelection, "f")), "f");
|
17573 | for (const item of changes.added) {
|
17574 | item.select();
|
17575 | }
|
17576 | for (const item of changes.deleted) {
|
17577 | item.unselect();
|
17578 | }
|
17579 | return changes;
|
17580 | }
|
17581 | }
|
17582 | _SingleTypeSelectionAccumulator_previousSelection = new WeakMap(), _SingleTypeSelectionAccumulator_selection = new WeakMap();
|
17583 | class SelectionAccumulator {
|
17584 | constructor(commitHandler = () => { }) {
|
17585 | _SelectionAccumulator_nodes.set(this, new SingleTypeSelectionAccumulator());
|
17586 | _SelectionAccumulator_edges.set(this, new SingleTypeSelectionAccumulator());
|
17587 | _SelectionAccumulator_commitHandler.set(this, void 0);
|
17588 | __classPrivateFieldSet(this, _SelectionAccumulator_commitHandler, commitHandler, "f");
|
17589 | }
|
17590 | get sizeNodes() {
|
17591 | return __classPrivateFieldGet(this, _SelectionAccumulator_nodes, "f").size;
|
17592 | }
|
17593 | get sizeEdges() {
|
17594 | return __classPrivateFieldGet(this, _SelectionAccumulator_edges, "f").size;
|
17595 | }
|
17596 | getNodes() {
|
17597 | return __classPrivateFieldGet(this, _SelectionAccumulator_nodes, "f").getSelection();
|
17598 | }
|
17599 | getEdges() {
|
17600 | return __classPrivateFieldGet(this, _SelectionAccumulator_edges, "f").getSelection();
|
17601 | }
|
17602 | addNodes(...nodes) {
|
17603 | __classPrivateFieldGet(this, _SelectionAccumulator_nodes, "f").add(...nodes);
|
17604 | }
|
17605 | addEdges(...edges) {
|
17606 | __classPrivateFieldGet(this, _SelectionAccumulator_edges, "f").add(...edges);
|
17607 | }
|
17608 | deleteNodes(node) {
|
17609 | __classPrivateFieldGet(this, _SelectionAccumulator_nodes, "f").delete(node);
|
17610 | }
|
17611 | deleteEdges(edge) {
|
17612 | __classPrivateFieldGet(this, _SelectionAccumulator_edges, "f").delete(edge);
|
17613 | }
|
17614 | clear() {
|
17615 | __classPrivateFieldGet(this, _SelectionAccumulator_nodes, "f").clear();
|
17616 | __classPrivateFieldGet(this, _SelectionAccumulator_edges, "f").clear();
|
17617 | }
|
17618 | commit(...rest) {
|
17619 | const summary = {
|
17620 | nodes: __classPrivateFieldGet(this, _SelectionAccumulator_nodes, "f").commit(),
|
17621 | edges: __classPrivateFieldGet(this, _SelectionAccumulator_edges, "f").commit(),
|
17622 | };
|
17623 | __classPrivateFieldGet(this, _SelectionAccumulator_commitHandler, "f").call(this, summary, ...rest);
|
17624 | return summary;
|
17625 | }
|
17626 | }
|
17627 | _SelectionAccumulator_nodes = new WeakMap(), _SelectionAccumulator_edges = new WeakMap(), _SelectionAccumulator_commitHandler = new WeakMap();
|
17628 |
|
17629 |
|
17630 |
|
17631 |
|
17632 | class SelectionHandler {
|
17633 | |
17634 |
|
17635 |
|
17636 |
|
17637 | constructor(body, canvas) {
|
17638 | this.body = body;
|
17639 | this.canvas = canvas;
|
17640 |
|
17641 |
|
17642 |
|
17643 |
|
17644 | this._selectionAccumulator = new SelectionAccumulator();
|
17645 | this.hoverObj = { nodes: {}, edges: {} };
|
17646 |
|
17647 | this.options = {};
|
17648 | this.defaultOptions = {
|
17649 | multiselect: false,
|
17650 | selectable: true,
|
17651 | selectConnectedEdges: true,
|
17652 | hoverConnectedEdges: true,
|
17653 | };
|
17654 | Object.assign(this.options, this.defaultOptions);
|
17655 |
|
17656 | this.body.emitter.on("_dataChanged", () => {
|
17657 | this.updateSelection();
|
17658 | });
|
17659 | }
|
17660 |
|
17661 | |
17662 |
|
17663 |
|
17664 |
|
17665 | setOptions(options) {
|
17666 | if (options !== undefined) {
|
17667 | const fields = [
|
17668 | "multiselect",
|
17669 | "hoverConnectedEdges",
|
17670 | "selectable",
|
17671 | "selectConnectedEdges",
|
17672 | ];
|
17673 | selectiveDeepExtend(fields, this.options, options);
|
17674 | }
|
17675 | }
|
17676 |
|
17677 | |
17678 |
|
17679 |
|
17680 |
|
17681 |
|
17682 |
|
17683 | selectOnPoint(pointer) {
|
17684 | let selected = false;
|
17685 | if (this.options.selectable === true) {
|
17686 | const obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);
|
17687 |
|
17688 |
|
17689 | this.unselectAll();
|
17690 |
|
17691 | if (obj !== undefined) {
|
17692 | selected = this.selectObject(obj);
|
17693 | }
|
17694 | this.body.emitter.emit("_requestRedraw");
|
17695 | }
|
17696 | return selected;
|
17697 | }
|
17698 |
|
17699 | |
17700 |
|
17701 |
|
17702 |
|
17703 |
|
17704 | selectAdditionalOnPoint(pointer) {
|
17705 | let selectionChanged = false;
|
17706 | if (this.options.selectable === true) {
|
17707 | const obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);
|
17708 |
|
17709 | if (obj !== undefined) {
|
17710 | selectionChanged = true;
|
17711 | if (obj.isSelected() === true) {
|
17712 | this.deselectObject(obj);
|
17713 | } else {
|
17714 | this.selectObject(obj);
|
17715 | }
|
17716 |
|
17717 | this.body.emitter.emit("_requestRedraw");
|
17718 | }
|
17719 | }
|
17720 | return selectionChanged;
|
17721 | }
|
17722 |
|
17723 | |
17724 |
|
17725 |
|
17726 |
|
17727 |
|
17728 |
|
17729 |
|
17730 |
|
17731 | _initBaseEvent(event, pointer) {
|
17732 | const properties = {};
|
17733 |
|
17734 | properties["pointer"] = {
|
17735 | DOM: { x: pointer.x, y: pointer.y },
|
17736 | canvas: this.canvas.DOMtoCanvas(pointer),
|
17737 | };
|
17738 | properties["event"] = event;
|
17739 |
|
17740 | return properties;
|
17741 | }
|
17742 |
|
17743 | |
17744 |
|
17745 |
|
17746 |
|
17747 |
|
17748 |
|
17749 |
|
17750 |
|
17751 |
|
17752 |
|
17753 |
|
17754 |
|
17755 | generateClickEvent(
|
17756 | eventType,
|
17757 | event,
|
17758 | pointer,
|
17759 | oldSelection,
|
17760 | emptySelection = false
|
17761 | ) {
|
17762 | const properties = this._initBaseEvent(event, pointer);
|
17763 |
|
17764 | if (emptySelection === true) {
|
17765 | properties.nodes = [];
|
17766 | properties.edges = [];
|
17767 | } else {
|
17768 | const tmp = this.getSelection();
|
17769 | properties.nodes = tmp.nodes;
|
17770 | properties.edges = tmp.edges;
|
17771 | }
|
17772 |
|
17773 | if (oldSelection !== undefined) {
|
17774 | properties["previousSelection"] = oldSelection;
|
17775 | }
|
17776 |
|
17777 | if (eventType == "click") {
|
17778 |
|
17779 |
|
17780 | properties.items = this.getClickedItems(pointer);
|
17781 | }
|
17782 |
|
17783 | if (event.controlEdge !== undefined) {
|
17784 | properties.controlEdge = event.controlEdge;
|
17785 | }
|
17786 |
|
17787 | this.body.emitter.emit(eventType, properties);
|
17788 | }
|
17789 |
|
17790 | |
17791 |
|
17792 |
|
17793 |
|
17794 |
|
17795 |
|
17796 | selectObject(obj, highlightEdges = this.options.selectConnectedEdges) {
|
17797 | if (obj !== undefined) {
|
17798 | if (obj instanceof Node) {
|
17799 | if (highlightEdges === true) {
|
17800 | this._selectionAccumulator.addEdges(...obj.edges);
|
17801 | }
|
17802 | this._selectionAccumulator.addNodes(obj);
|
17803 | } else {
|
17804 | this._selectionAccumulator.addEdges(obj);
|
17805 | }
|
17806 | return true;
|
17807 | }
|
17808 | return false;
|
17809 | }
|
17810 |
|
17811 | |
17812 |
|
17813 |
|
17814 |
|
17815 | deselectObject(obj) {
|
17816 | if (obj.isSelected() === true) {
|
17817 | obj.selected = false;
|
17818 | this._removeFromSelection(obj);
|
17819 | }
|
17820 | }
|
17821 |
|
17822 | |
17823 |
|
17824 |
|
17825 |
|
17826 |
|
17827 |
|
17828 |
|
17829 | _getAllNodesOverlappingWith(object) {
|
17830 | const overlappingNodes = [];
|
17831 | const nodes = this.body.nodes;
|
17832 | for (let i = 0; i < this.body.nodeIndices.length; i++) {
|
17833 | const nodeId = this.body.nodeIndices[i];
|
17834 | if (nodes[nodeId].isOverlappingWith(object)) {
|
17835 | overlappingNodes.push(nodeId);
|
17836 | }
|
17837 | }
|
17838 | return overlappingNodes;
|
17839 | }
|
17840 |
|
17841 | |
17842 |
|
17843 |
|
17844 |
|
17845 |
|
17846 |
|
17847 |
|
17848 | _pointerToPositionObject(pointer) {
|
17849 | const canvasPos = this.canvas.DOMtoCanvas(pointer);
|
17850 | return {
|
17851 | left: canvasPos.x - 1,
|
17852 | top: canvasPos.y + 1,
|
17853 | right: canvasPos.x + 1,
|
17854 | bottom: canvasPos.y - 1,
|
17855 | };
|
17856 | }
|
17857 |
|
17858 | |
17859 |
|
17860 |
|
17861 |
|
17862 |
|
17863 |
|
17864 |
|
17865 | getNodeAt(pointer, returnNode = true) {
|
17866 |
|
17867 | const positionObject = this._pointerToPositionObject(pointer);
|
17868 | const overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
|
17869 |
|
17870 |
|
17871 | if (overlappingNodes.length > 0) {
|
17872 | if (returnNode === true) {
|
17873 | return this.body.nodes[overlappingNodes[overlappingNodes.length - 1]];
|
17874 | } else {
|
17875 | return overlappingNodes[overlappingNodes.length - 1];
|
17876 | }
|
17877 | } else {
|
17878 | return undefined;
|
17879 | }
|
17880 | }
|
17881 |
|
17882 | |
17883 |
|
17884 |
|
17885 |
|
17886 |
|
17887 |
|
17888 |
|
17889 | _getEdgesOverlappingWith(object, overlappingEdges) {
|
17890 | const edges = this.body.edges;
|
17891 | for (let i = 0; i < this.body.edgeIndices.length; i++) {
|
17892 | const edgeId = this.body.edgeIndices[i];
|
17893 | if (edges[edgeId].isOverlappingWith(object)) {
|
17894 | overlappingEdges.push(edgeId);
|
17895 | }
|
17896 | }
|
17897 | }
|
17898 |
|
17899 | |
17900 |
|
17901 |
|
17902 |
|
17903 |
|
17904 |
|
17905 |
|
17906 | _getAllEdgesOverlappingWith(object) {
|
17907 | const overlappingEdges = [];
|
17908 | this._getEdgesOverlappingWith(object, overlappingEdges);
|
17909 | return overlappingEdges;
|
17910 | }
|
17911 |
|
17912 | |
17913 |
|
17914 |
|
17915 |
|
17916 |
|
17917 |
|
17918 |
|
17919 | getEdgeAt(pointer, returnEdge = true) {
|
17920 |
|
17921 | const canvasPos = this.canvas.DOMtoCanvas(pointer);
|
17922 | let mindist = 10;
|
17923 | let overlappingEdge = null;
|
17924 | const edges = this.body.edges;
|
17925 | for (let i = 0; i < this.body.edgeIndices.length; i++) {
|
17926 | const edgeId = this.body.edgeIndices[i];
|
17927 | const edge = edges[edgeId];
|
17928 | if (edge.connected) {
|
17929 | const xFrom = edge.from.x;
|
17930 | const yFrom = edge.from.y;
|
17931 | const xTo = edge.to.x;
|
17932 | const yTo = edge.to.y;
|
17933 | const dist = edge.edgeType.getDistanceToEdge(
|
17934 | xFrom,
|
17935 | yFrom,
|
17936 | xTo,
|
17937 | yTo,
|
17938 | canvasPos.x,
|
17939 | canvasPos.y
|
17940 | );
|
17941 | if (dist < mindist) {
|
17942 | overlappingEdge = edgeId;
|
17943 | mindist = dist;
|
17944 | }
|
17945 | }
|
17946 | }
|
17947 | if (overlappingEdge !== null) {
|
17948 | if (returnEdge === true) {
|
17949 | return this.body.edges[overlappingEdge];
|
17950 | } else {
|
17951 | return overlappingEdge;
|
17952 | }
|
17953 | } else {
|
17954 | return undefined;
|
17955 | }
|
17956 | }
|
17957 |
|
17958 | |
17959 |
|
17960 |
|
17961 |
|
17962 |
|
17963 |
|
17964 | _addToHover(obj) {
|
17965 | if (obj instanceof Node) {
|
17966 | this.hoverObj.nodes[obj.id] = obj;
|
17967 | } else {
|
17968 | this.hoverObj.edges[obj.id] = obj;
|
17969 | }
|
17970 | }
|
17971 |
|
17972 | |
17973 |
|
17974 |
|
17975 |
|
17976 |
|
17977 |
|
17978 | _removeFromSelection(obj) {
|
17979 | if (obj instanceof Node) {
|
17980 | this._selectionAccumulator.deleteNodes(obj);
|
17981 | this._selectionAccumulator.deleteEdges(...obj.edges);
|
17982 | } else {
|
17983 | this._selectionAccumulator.deleteEdges(obj);
|
17984 | }
|
17985 | }
|
17986 |
|
17987 | |
17988 |
|
17989 |
|
17990 | unselectAll() {
|
17991 | this._selectionAccumulator.clear();
|
17992 | }
|
17993 |
|
17994 | |
17995 |
|
17996 |
|
17997 |
|
17998 |
|
17999 | getSelectedNodeCount() {
|
18000 | return this._selectionAccumulator.sizeNodes;
|
18001 | }
|
18002 |
|
18003 | |
18004 |
|
18005 |
|
18006 |
|
18007 |
|
18008 | getSelectedEdgeCount() {
|
18009 | return this._selectionAccumulator.sizeEdges;
|
18010 | }
|
18011 |
|
18012 | |
18013 |
|
18014 |
|
18015 |
|
18016 |
|
18017 |
|
18018 | _hoverConnectedEdges(node) {
|
18019 | for (let i = 0; i < node.edges.length; i++) {
|
18020 | const edge = node.edges[i];
|
18021 | edge.hover = true;
|
18022 | this._addToHover(edge);
|
18023 | }
|
18024 | }
|
18025 |
|
18026 | |
18027 |
|
18028 |
|
18029 |
|
18030 |
|
18031 |
|
18032 |
|
18033 |
|
18034 | emitBlurEvent(event, pointer, object) {
|
18035 | const properties = this._initBaseEvent(event, pointer);
|
18036 |
|
18037 | if (object.hover === true) {
|
18038 | object.hover = false;
|
18039 | if (object instanceof Node) {
|
18040 | properties.node = object.id;
|
18041 | this.body.emitter.emit("blurNode", properties);
|
18042 | } else {
|
18043 | properties.edge = object.id;
|
18044 | this.body.emitter.emit("blurEdge", properties);
|
18045 | }
|
18046 | }
|
18047 | }
|
18048 |
|
18049 | |
18050 |
|
18051 |
|
18052 |
|
18053 |
|
18054 |
|
18055 |
|
18056 |
|
18057 |
|
18058 | emitHoverEvent(event, pointer, object) {
|
18059 | const properties = this._initBaseEvent(event, pointer);
|
18060 | let hoverChanged = false;
|
18061 |
|
18062 | if (object.hover === false) {
|
18063 | object.hover = true;
|
18064 | this._addToHover(object);
|
18065 | hoverChanged = true;
|
18066 | if (object instanceof Node) {
|
18067 | properties.node = object.id;
|
18068 | this.body.emitter.emit("hoverNode", properties);
|
18069 | } else {
|
18070 | properties.edge = object.id;
|
18071 | this.body.emitter.emit("hoverEdge", properties);
|
18072 | }
|
18073 | }
|
18074 |
|
18075 | return hoverChanged;
|
18076 | }
|
18077 |
|
18078 | |
18079 |
|
18080 |
|
18081 |
|
18082 |
|
18083 |
|
18084 | hoverObject(event, pointer) {
|
18085 | let object = this.getNodeAt(pointer);
|
18086 | if (object === undefined) {
|
18087 | object = this.getEdgeAt(pointer);
|
18088 | }
|
18089 |
|
18090 | let hoverChanged = false;
|
18091 |
|
18092 | for (const nodeId in this.hoverObj.nodes) {
|
18093 | if (Object.prototype.hasOwnProperty.call(this.hoverObj.nodes, nodeId)) {
|
18094 | if (
|
18095 | object === undefined ||
|
18096 | (object instanceof Node && object.id != nodeId) ||
|
18097 | object instanceof Edge
|
18098 | ) {
|
18099 | this.emitBlurEvent(event, pointer, this.hoverObj.nodes[nodeId]);
|
18100 | delete this.hoverObj.nodes[nodeId];
|
18101 | hoverChanged = true;
|
18102 | }
|
18103 | }
|
18104 | }
|
18105 |
|
18106 |
|
18107 | for (const edgeId in this.hoverObj.edges) {
|
18108 | if (Object.prototype.hasOwnProperty.call(this.hoverObj.edges, edgeId)) {
|
18109 |
|
18110 |
|
18111 | if (hoverChanged === true) {
|
18112 | this.hoverObj.edges[edgeId].hover = false;
|
18113 | delete this.hoverObj.edges[edgeId];
|
18114 | }
|
18115 |
|
18116 |
|
18117 | else if (
|
18118 | object === undefined ||
|
18119 | (object instanceof Edge && object.id != edgeId) ||
|
18120 | (object instanceof Node && !object.hover)
|
18121 | ) {
|
18122 | this.emitBlurEvent(event, pointer, this.hoverObj.edges[edgeId]);
|
18123 | delete this.hoverObj.edges[edgeId];
|
18124 | hoverChanged = true;
|
18125 | }
|
18126 | }
|
18127 | }
|
18128 |
|
18129 | if (object !== undefined) {
|
18130 | const hoveredEdgesCount = Object.keys(this.hoverObj.edges).length;
|
18131 | const hoveredNodesCount = Object.keys(this.hoverObj.nodes).length;
|
18132 | const newOnlyHoveredEdge =
|
18133 | object instanceof Edge &&
|
18134 | hoveredEdgesCount === 0 &&
|
18135 | hoveredNodesCount === 0;
|
18136 | const newOnlyHoveredNode =
|
18137 | object instanceof Node &&
|
18138 | hoveredEdgesCount === 0 &&
|
18139 | hoveredNodesCount === 0;
|
18140 |
|
18141 | if (hoverChanged || newOnlyHoveredEdge || newOnlyHoveredNode) {
|
18142 | hoverChanged = this.emitHoverEvent(event, pointer, object);
|
18143 | }
|
18144 |
|
18145 | if (object instanceof Node && this.options.hoverConnectedEdges === true) {
|
18146 | this._hoverConnectedEdges(object);
|
18147 | }
|
18148 | }
|
18149 |
|
18150 | if (hoverChanged === true) {
|
18151 | this.body.emitter.emit("_requestRedraw");
|
18152 | }
|
18153 | }
|
18154 |
|
18155 | |
18156 |
|
18157 |
|
18158 | commitWithoutEmitting() {
|
18159 | this._selectionAccumulator.commit();
|
18160 | }
|
18161 |
|
18162 | |
18163 |
|
18164 |
|
18165 |
|
18166 |
|
18167 |
|
18168 |
|
18169 |
|
18170 |
|
18171 |
|
18172 |
|
18173 |
|
18174 |
|
18175 | commitAndEmit(pointer, event) {
|
18176 | let selected = false;
|
18177 |
|
18178 | const selectionChanges = this._selectionAccumulator.commit();
|
18179 | const previousSelection = {
|
18180 | nodes: selectionChanges.nodes.previous,
|
18181 | edges: selectionChanges.edges.previous,
|
18182 | };
|
18183 |
|
18184 | if (selectionChanges.edges.deleted.length > 0) {
|
18185 | this.generateClickEvent(
|
18186 | "deselectEdge",
|
18187 | event,
|
18188 | pointer,
|
18189 | previousSelection
|
18190 | );
|
18191 | selected = true;
|
18192 | }
|
18193 |
|
18194 | if (selectionChanges.nodes.deleted.length > 0) {
|
18195 | this.generateClickEvent(
|
18196 | "deselectNode",
|
18197 | event,
|
18198 | pointer,
|
18199 | previousSelection
|
18200 | );
|
18201 | selected = true;
|
18202 | }
|
18203 |
|
18204 | if (selectionChanges.nodes.added.length > 0) {
|
18205 | this.generateClickEvent("selectNode", event, pointer);
|
18206 | selected = true;
|
18207 | }
|
18208 |
|
18209 | if (selectionChanges.edges.added.length > 0) {
|
18210 | this.generateClickEvent("selectEdge", event, pointer);
|
18211 | selected = true;
|
18212 | }
|
18213 |
|
18214 |
|
18215 | if (selected === true) {
|
18216 |
|
18217 | this.generateClickEvent("select", event, pointer);
|
18218 | }
|
18219 | }
|
18220 |
|
18221 | |
18222 |
|
18223 |
|
18224 |
|
18225 |
|
18226 |
|
18227 | getSelection() {
|
18228 | return {
|
18229 | nodes: this.getSelectedNodeIds(),
|
18230 | edges: this.getSelectedEdgeIds(),
|
18231 | };
|
18232 | }
|
18233 |
|
18234 | |
18235 |
|
18236 |
|
18237 |
|
18238 |
|
18239 | getSelectedNodes() {
|
18240 | return this._selectionAccumulator.getNodes();
|
18241 | }
|
18242 |
|
18243 | |
18244 |
|
18245 |
|
18246 |
|
18247 |
|
18248 | getSelectedEdges() {
|
18249 | return this._selectionAccumulator.getEdges();
|
18250 | }
|
18251 |
|
18252 | |
18253 |
|
18254 |
|
18255 |
|
18256 |
|
18257 | getSelectedNodeIds() {
|
18258 | return this._selectionAccumulator.getNodes().map((node) => node.id);
|
18259 | }
|
18260 |
|
18261 | |
18262 |
|
18263 |
|
18264 |
|
18265 |
|
18266 | getSelectedEdgeIds() {
|
18267 | return this._selectionAccumulator.getEdges().map((edge) => edge.id);
|
18268 | }
|
18269 |
|
18270 | |
18271 |
|
18272 |
|
18273 |
|
18274 |
|
18275 |
|
18276 | setSelection(selection, options = {}) {
|
18277 | if (!selection || (!selection.nodes && !selection.edges)) {
|
18278 | throw new TypeError(
|
18279 | "Selection must be an object with nodes and/or edges properties"
|
18280 | );
|
18281 | }
|
18282 |
|
18283 |
|
18284 | if (options.unselectAll || options.unselectAll === undefined) {
|
18285 | this.unselectAll();
|
18286 | }
|
18287 | if (selection.nodes) {
|
18288 | for (const id of selection.nodes) {
|
18289 | const node = this.body.nodes[id];
|
18290 | if (!node) {
|
18291 | throw new RangeError('Node with id "' + id + '" not found');
|
18292 | }
|
18293 |
|
18294 | this.selectObject(node, options.highlightEdges);
|
18295 | }
|
18296 | }
|
18297 |
|
18298 | if (selection.edges) {
|
18299 | for (const id of selection.edges) {
|
18300 | const edge = this.body.edges[id];
|
18301 | if (!edge) {
|
18302 | throw new RangeError('Edge with id "' + id + '" not found');
|
18303 | }
|
18304 | this.selectObject(edge);
|
18305 | }
|
18306 | }
|
18307 | this.body.emitter.emit("_requestRedraw");
|
18308 | this._selectionAccumulator.commit();
|
18309 | }
|
18310 |
|
18311 | |
18312 |
|
18313 |
|
18314 |
|
18315 |
|
18316 |
|
18317 |
|
18318 | selectNodes(selection, highlightEdges = true) {
|
18319 | if (!selection || selection.length === undefined)
|
18320 | throw "Selection must be an array with ids";
|
18321 |
|
18322 | this.setSelection({ nodes: selection }, { highlightEdges: highlightEdges });
|
18323 | }
|
18324 |
|
18325 | |
18326 |
|
18327 |
|
18328 |
|
18329 |
|
18330 |
|
18331 | selectEdges(selection) {
|
18332 | if (!selection || selection.length === undefined)
|
18333 | throw "Selection must be an array with ids";
|
18334 |
|
18335 | this.setSelection({ edges: selection });
|
18336 | }
|
18337 |
|
18338 | |
18339 |
|
18340 |
|
18341 |
|
18342 |
|
18343 | updateSelection() {
|
18344 | for (const node in this._selectionAccumulator.getNodes()) {
|
18345 | if (!Object.prototype.hasOwnProperty.call(this.body.nodes, node.id)) {
|
18346 | this._selectionAccumulator.deleteNodes(node);
|
18347 | }
|
18348 | }
|
18349 | for (const edge in this._selectionAccumulator.getEdges()) {
|
18350 | if (!Object.prototype.hasOwnProperty.call(this.body.edges, edge.id)) {
|
18351 | this._selectionAccumulator.deleteEdges(edge);
|
18352 | }
|
18353 | }
|
18354 | }
|
18355 |
|
18356 | |
18357 |
|
18358 |
|
18359 |
|
18360 |
|
18361 |
|
18362 |
|
18363 |
|
18364 |
|
18365 |
|
18366 |
|
18367 |
|
18368 |
|
18369 |
|
18370 |
|
18371 |
|
18372 |
|
18373 |
|
18374 |
|
18375 |
|
18376 |
|
18377 |
|
18378 |
|
18379 |
|
18380 |
|
18381 | getClickedItems(pointer) {
|
18382 | const point = this.canvas.DOMtoCanvas(pointer);
|
18383 | const items = [];
|
18384 |
|
18385 |
|
18386 |
|
18387 | const nodeIndices = this.body.nodeIndices;
|
18388 | const nodes = this.body.nodes;
|
18389 | for (let i = nodeIndices.length - 1; i >= 0; i--) {
|
18390 | const node = nodes[nodeIndices[i]];
|
18391 | const ret = node.getItemsOnPoint(point);
|
18392 | items.push.apply(items, ret);
|
18393 | }
|
18394 |
|
18395 | const edgeIndices = this.body.edgeIndices;
|
18396 | const edges = this.body.edges;
|
18397 | for (let i = edgeIndices.length - 1; i >= 0; i--) {
|
18398 | const edge = edges[edgeIndices[i]];
|
18399 | const ret = edge.getItemsOnPoint(point);
|
18400 | items.push.apply(items, ret);
|
18401 | }
|
18402 |
|
18403 | return items;
|
18404 | }
|
18405 | }
|
18406 |
|
18407 |
|
18408 |
|
18409 |
|
18410 |
|
18411 |
|
18412 |
|
18413 |
|
18414 |
|
18415 |
|
18416 |
|
18417 |
|
18418 |
|
18419 |
|
18420 |
|
18421 |
|
18422 |
|
18423 |
|
18424 |
|
18425 |
|
18426 |
|
18427 |
|
18428 |
|
18429 |
|
18430 |
|
18431 |
|
18432 |
|
18433 | class DirectionInterface {
|
18434 | |
18435 |
|
18436 |
|
18437 | abstract() {
|
18438 | throw new Error("Can't instantiate abstract class!");
|
18439 | }
|
18440 |
|
18441 | |
18442 |
|
18443 |
|
18444 |
|
18445 |
|
18446 |
|
18447 |
|
18448 | fake_use() {
|
18449 |
|
18450 | }
|
18451 |
|
18452 | |
18453 |
|
18454 |
|
18455 |
|
18456 |
|
18457 |
|
18458 |
|
18459 |
|
18460 | curveType() {
|
18461 | return this.abstract();
|
18462 | }
|
18463 |
|
18464 | |
18465 |
|
18466 |
|
18467 |
|
18468 |
|
18469 |
|
18470 | getPosition(node) {
|
18471 | this.fake_use(node);
|
18472 | return this.abstract();
|
18473 | }
|
18474 |
|
18475 | |
18476 |
|
18477 |
|
18478 |
|
18479 |
|
18480 |
|
18481 |
|
18482 | setPosition(node, position, level = undefined) {
|
18483 | this.fake_use(node, position, level);
|
18484 | this.abstract();
|
18485 | }
|
18486 |
|
18487 | |
18488 |
|
18489 |
|
18490 |
|
18491 |
|
18492 |
|
18493 |
|
18494 |
|
18495 |
|
18496 | getTreeSize(index) {
|
18497 | this.fake_use(index);
|
18498 | return this.abstract();
|
18499 | }
|
18500 |
|
18501 | |
18502 |
|
18503 |
|
18504 |
|
18505 |
|
18506 |
|
18507 |
|
18508 |
|
18509 |
|
18510 |
|
18511 |
|
18512 |
|
18513 |
|
18514 |
|
18515 | sort(nodeArray) {
|
18516 | this.fake_use(nodeArray);
|
18517 | this.abstract();
|
18518 | }
|
18519 |
|
18520 | |
18521 |
|
18522 |
|
18523 |
|
18524 |
|
18525 |
|
18526 | fix(node, level) {
|
18527 | this.fake_use(node, level);
|
18528 | this.abstract();
|
18529 | }
|
18530 |
|
18531 | |
18532 |
|
18533 |
|
18534 |
|
18535 |
|
18536 |
|
18537 | shift(nodeId, diff) {
|
18538 | this.fake_use(nodeId, diff);
|
18539 | this.abstract();
|
18540 | }
|
18541 | }
|
18542 |
|
18543 |
|
18544 |
|
18545 |
|
18546 |
|
18547 |
|
18548 |
|
18549 |
|
18550 |
|
18551 | class VerticalStrategy extends DirectionInterface {
|
18552 | |
18553 |
|
18554 |
|
18555 |
|
18556 |
|
18557 | constructor(layout) {
|
18558 | super();
|
18559 | this.layout = layout;
|
18560 | }
|
18561 |
|
18562 |
|
18563 | curveType() {
|
18564 | return "horizontal";
|
18565 | }
|
18566 |
|
18567 |
|
18568 | getPosition(node) {
|
18569 | return node.x;
|
18570 | }
|
18571 |
|
18572 |
|
18573 | setPosition(node, position, level = undefined) {
|
18574 | if (level !== undefined) {
|
18575 | this.layout.hierarchical.addToOrdering(node, level);
|
18576 | }
|
18577 | node.x = position;
|
18578 | }
|
18579 |
|
18580 |
|
18581 | getTreeSize(index) {
|
18582 | const res = this.layout.hierarchical.getTreeSize(
|
18583 | this.layout.body.nodes,
|
18584 | index
|
18585 | );
|
18586 | return { min: res.min_x, max: res.max_x };
|
18587 | }
|
18588 |
|
18589 |
|
18590 | sort(nodeArray) {
|
18591 | sort(nodeArray, function (a, b) {
|
18592 | return a.x - b.x;
|
18593 | });
|
18594 | }
|
18595 |
|
18596 |
|
18597 | fix(node, level) {
|
18598 | node.y = this.layout.options.hierarchical.levelSeparation * level;
|
18599 | node.options.fixed.y = true;
|
18600 | }
|
18601 |
|
18602 |
|
18603 | shift(nodeId, diff) {
|
18604 | this.layout.body.nodes[nodeId].x += diff;
|
18605 | }
|
18606 | }
|
18607 |
|
18608 |
|
18609 |
|
18610 |
|
18611 |
|
18612 |
|
18613 |
|
18614 |
|
18615 |
|
18616 | class HorizontalStrategy extends DirectionInterface {
|
18617 | |
18618 |
|
18619 |
|
18620 |
|
18621 |
|
18622 | constructor(layout) {
|
18623 | super();
|
18624 | this.layout = layout;
|
18625 | }
|
18626 |
|
18627 |
|
18628 | curveType() {
|
18629 | return "vertical";
|
18630 | }
|
18631 |
|
18632 |
|
18633 | getPosition(node) {
|
18634 | return node.y;
|
18635 | }
|
18636 |
|
18637 |
|
18638 | setPosition(node, position, level = undefined) {
|
18639 | if (level !== undefined) {
|
18640 | this.layout.hierarchical.addToOrdering(node, level);
|
18641 | }
|
18642 | node.y = position;
|
18643 | }
|
18644 |
|
18645 |
|
18646 | getTreeSize(index) {
|
18647 | const res = this.layout.hierarchical.getTreeSize(
|
18648 | this.layout.body.nodes,
|
18649 | index
|
18650 | );
|
18651 | return { min: res.min_y, max: res.max_y };
|
18652 | }
|
18653 |
|
18654 |
|
18655 | sort(nodeArray) {
|
18656 | sort(nodeArray, function (a, b) {
|
18657 | return a.y - b.y;
|
18658 | });
|
18659 | }
|
18660 |
|
18661 |
|
18662 | fix(node, level) {
|
18663 | node.x = this.layout.options.hierarchical.levelSeparation * level;
|
18664 | node.options.fixed.x = true;
|
18665 | }
|
18666 |
|
18667 |
|
18668 | shift(nodeId, diff) {
|
18669 | this.layout.body.nodes[nodeId].y += diff;
|
18670 | }
|
18671 | }
|
18672 |
|
18673 |
|
18674 |
|
18675 |
|
18676 |
|
18677 |
|
18678 |
|
18679 |
|
18680 |
|
18681 | function fillLevelsByDirectionCyclic(nodes, levels) {
|
18682 | const edges = new Set();
|
18683 | nodes.forEach((node) => {
|
18684 | node.edges.forEach((edge) => {
|
18685 | if (edge.connected) {
|
18686 | edges.add(edge);
|
18687 | }
|
18688 | });
|
18689 | });
|
18690 | edges.forEach((edge) => {
|
18691 | const fromId = edge.from.id;
|
18692 | const toId = edge.to.id;
|
18693 | if (levels[fromId] == null) {
|
18694 | levels[fromId] = 0;
|
18695 | }
|
18696 | if (levels[toId] == null || levels[fromId] >= levels[toId]) {
|
18697 | levels[toId] = levels[fromId] + 1;
|
18698 | }
|
18699 | });
|
18700 | return levels;
|
18701 | }
|
18702 |
|
18703 |
|
18704 |
|
18705 |
|
18706 |
|
18707 |
|
18708 |
|
18709 | function fillLevelsByDirectionLeaves(nodes) {
|
18710 | return fillLevelsByDirection(
|
18711 |
|
18712 | (node) => node.edges
|
18713 |
|
18714 | .filter((edge) => nodes.has(edge.toId))
|
18715 |
|
18716 | .every((edge) => edge.to === node),
|
18717 |
|
18718 | (newLevel, oldLevel) => oldLevel > newLevel,
|
18719 |
|
18720 | "from", nodes);
|
18721 | }
|
18722 |
|
18723 |
|
18724 |
|
18725 |
|
18726 |
|
18727 |
|
18728 |
|
18729 | function fillLevelsByDirectionRoots(nodes) {
|
18730 | return fillLevelsByDirection(
|
18731 |
|
18732 | (node) => node.edges
|
18733 |
|
18734 | .filter((edge) => nodes.has(edge.toId))
|
18735 |
|
18736 | .every((edge) => edge.from === node),
|
18737 |
|
18738 | (newLevel, oldLevel) => oldLevel < newLevel,
|
18739 |
|
18740 | "to", nodes);
|
18741 | }
|
18742 |
|
18743 |
|
18744 |
|
18745 |
|
18746 |
|
18747 |
|
18748 |
|
18749 |
|
18750 |
|
18751 |
|
18752 | function fillLevelsByDirection(isEntryNode, shouldLevelBeReplaced, direction, nodes) {
|
18753 | const levels = Object.create(null);
|
18754 |
|
18755 |
|
18756 |
|
18757 |
|
18758 |
|
18759 |
|
18760 | const limit = [...nodes.values()].reduce((acc, node) => acc + 1 + node.edges.length, 0);
|
18761 | const edgeIdProp = (direction + "Id");
|
18762 | const newLevelDiff = direction === "to" ? 1 : -1;
|
18763 | for (const [entryNodeId, entryNode] of nodes) {
|
18764 | if (
|
18765 |
|
18766 | !nodes.has(entryNodeId) ||
|
18767 |
|
18768 | !isEntryNode(entryNode)) {
|
18769 | continue;
|
18770 | }
|
18771 |
|
18772 | levels[entryNodeId] = 0;
|
18773 | const stack = [entryNode];
|
18774 | let done = 0;
|
18775 | let node;
|
18776 | while ((node = stack.pop())) {
|
18777 | if (!nodes.has(entryNodeId)) {
|
18778 |
|
18779 | continue;
|
18780 | }
|
18781 | const newLevel = levels[node.id] + newLevelDiff;
|
18782 | node.edges
|
18783 | .filter((edge) =>
|
18784 |
|
18785 | edge.connected &&
|
18786 |
|
18787 | edge.to !== edge.from &&
|
18788 |
|
18789 | edge[direction] !== node &&
|
18790 |
|
18791 | nodes.has(edge.toId) &&
|
18792 |
|
18793 | nodes.has(edge.fromId))
|
18794 | .forEach((edge) => {
|
18795 | const targetNodeId = edge[edgeIdProp];
|
18796 | const oldLevel = levels[targetNodeId];
|
18797 | if (oldLevel == null || shouldLevelBeReplaced(newLevel, oldLevel)) {
|
18798 | levels[targetNodeId] = newLevel;
|
18799 | stack.push(edge[direction]);
|
18800 | }
|
18801 | });
|
18802 | if (done > limit) {
|
18803 |
|
18804 | return fillLevelsByDirectionCyclic(nodes, levels);
|
18805 | }
|
18806 | else {
|
18807 | ++done;
|
18808 | }
|
18809 | }
|
18810 | }
|
18811 | return levels;
|
18812 | }
|
18813 |
|
18814 |
|
18815 |
|
18816 |
|
18817 |
|
18818 |
|
18819 |
|
18820 |
|
18821 |
|
18822 |
|
18823 |
|
18824 |
|
18825 |
|
18826 |
|
18827 |
|
18828 |
|
18829 |
|
18830 |
|
18831 |
|
18832 |
|
18833 |
|
18834 |
|
18835 |
|
18836 |
|
18837 |
|
18838 |
|
18839 |
|
18840 |
|
18841 |
|
18842 |
|
18843 |
|
18844 |
|
18845 |
|
18846 |
|
18847 |
|
18848 |
|
18849 |
|
18850 |
|
18851 | class HierarchicalStatus {
|
18852 | |
18853 |
|
18854 |
|
18855 | constructor() {
|
18856 | this.childrenReference = {};
|
18857 | this.parentReference = {};
|
18858 | this.trees = {};
|
18859 |
|
18860 | this.distributionOrdering = {};
|
18861 | this.levels = {};
|
18862 | this.distributionIndex = {};
|
18863 |
|
18864 | this.isTree = false;
|
18865 | this.treeIndex = -1;
|
18866 | }
|
18867 |
|
18868 | |
18869 |
|
18870 |
|
18871 |
|
18872 |
|
18873 |
|
18874 | addRelation(parentNodeId, childNodeId) {
|
18875 | if (this.childrenReference[parentNodeId] === undefined) {
|
18876 | this.childrenReference[parentNodeId] = [];
|
18877 | }
|
18878 | this.childrenReference[parentNodeId].push(childNodeId);
|
18879 |
|
18880 | if (this.parentReference[childNodeId] === undefined) {
|
18881 | this.parentReference[childNodeId] = [];
|
18882 | }
|
18883 | this.parentReference[childNodeId].push(parentNodeId);
|
18884 | }
|
18885 |
|
18886 | |
18887 |
|
18888 |
|
18889 |
|
18890 |
|
18891 |
|
18892 |
|
18893 | checkIfTree() {
|
18894 | for (const i in this.parentReference) {
|
18895 | if (this.parentReference[i].length > 1) {
|
18896 | this.isTree = false;
|
18897 | return;
|
18898 | }
|
18899 | }
|
18900 |
|
18901 | this.isTree = true;
|
18902 | }
|
18903 |
|
18904 | |
18905 |
|
18906 |
|
18907 |
|
18908 |
|
18909 | numTrees() {
|
18910 | return this.treeIndex + 1;
|
18911 | }
|
18912 |
|
18913 | |
18914 |
|
18915 |
|
18916 |
|
18917 |
|
18918 |
|
18919 | setTreeIndex(node, treeId) {
|
18920 | if (treeId === undefined) return;
|
18921 |
|
18922 | if (this.trees[node.id] === undefined) {
|
18923 | this.trees[node.id] = treeId;
|
18924 | this.treeIndex = Math.max(treeId, this.treeIndex);
|
18925 | }
|
18926 | }
|
18927 |
|
18928 | |
18929 |
|
18930 |
|
18931 |
|
18932 |
|
18933 |
|
18934 |
|
18935 | ensureLevel(nodeId) {
|
18936 | if (this.levels[nodeId] === undefined) {
|
18937 | this.levels[nodeId] = 0;
|
18938 | }
|
18939 | }
|
18940 |
|
18941 | |
18942 |
|
18943 |
|
18944 |
|
18945 |
|
18946 |
|
18947 |
|
18948 |
|
18949 | getMaxLevel(nodeId) {
|
18950 | const accumulator = {};
|
18951 |
|
18952 | const _getMaxLevel = (nodeId) => {
|
18953 | if (accumulator[nodeId] !== undefined) {
|
18954 | return accumulator[nodeId];
|
18955 | }
|
18956 | let level = this.levels[nodeId];
|
18957 | if (this.childrenReference[nodeId]) {
|
18958 | const children = this.childrenReference[nodeId];
|
18959 | if (children.length > 0) {
|
18960 | for (let i = 0; i < children.length; i++) {
|
18961 | level = Math.max(level, _getMaxLevel(children[i]));
|
18962 | }
|
18963 | }
|
18964 | }
|
18965 | accumulator[nodeId] = level;
|
18966 | return level;
|
18967 | };
|
18968 |
|
18969 | return _getMaxLevel(nodeId);
|
18970 | }
|
18971 |
|
18972 | |
18973 |
|
18974 |
|
18975 |
|
18976 |
|
18977 | levelDownstream(nodeA, nodeB) {
|
18978 | if (this.levels[nodeB.id] === undefined) {
|
18979 |
|
18980 | if (this.levels[nodeA.id] === undefined) {
|
18981 | this.levels[nodeA.id] = 0;
|
18982 | }
|
18983 |
|
18984 | this.levels[nodeB.id] = this.levels[nodeA.id] + 1;
|
18985 | }
|
18986 | }
|
18987 |
|
18988 | |
18989 |
|
18990 |
|
18991 |
|
18992 |
|
18993 | setMinLevelToZero(nodes) {
|
18994 | let minLevel = 1e9;
|
18995 |
|
18996 | for (const nodeId in nodes) {
|
18997 | if (Object.prototype.hasOwnProperty.call(nodes, nodeId)) {
|
18998 | if (this.levels[nodeId] !== undefined) {
|
18999 | minLevel = Math.min(this.levels[nodeId], minLevel);
|
19000 | }
|
19001 | }
|
19002 | }
|
19003 |
|
19004 |
|
19005 | for (const nodeId in nodes) {
|
19006 | if (Object.prototype.hasOwnProperty.call(nodes, nodeId)) {
|
19007 | if (this.levels[nodeId] !== undefined) {
|
19008 | this.levels[nodeId] -= minLevel;
|
19009 | }
|
19010 | }
|
19011 | }
|
19012 | }
|
19013 |
|
19014 | |
19015 |
|
19016 |
|
19017 |
|
19018 |
|
19019 |
|
19020 |
|
19021 | getTreeSize(nodes, index) {
|
19022 | let min_x = 1e9;
|
19023 | let max_x = -1e9;
|
19024 | let min_y = 1e9;
|
19025 | let max_y = -1e9;
|
19026 |
|
19027 | for (const nodeId in this.trees) {
|
19028 | if (Object.prototype.hasOwnProperty.call(this.trees, nodeId)) {
|
19029 | if (this.trees[nodeId] === index) {
|
19030 | const node = nodes[nodeId];
|
19031 | min_x = Math.min(node.x, min_x);
|
19032 | max_x = Math.max(node.x, max_x);
|
19033 | min_y = Math.min(node.y, min_y);
|
19034 | max_y = Math.max(node.y, max_y);
|
19035 | }
|
19036 | }
|
19037 | }
|
19038 |
|
19039 | return {
|
19040 | min_x: min_x,
|
19041 | max_x: max_x,
|
19042 | min_y: min_y,
|
19043 | max_y: max_y,
|
19044 | };
|
19045 | }
|
19046 |
|
19047 | |
19048 |
|
19049 |
|
19050 |
|
19051 |
|
19052 |
|
19053 |
|
19054 | hasSameParent(node1, node2) {
|
19055 | const parents1 = this.parentReference[node1.id];
|
19056 | const parents2 = this.parentReference[node2.id];
|
19057 | if (parents1 === undefined || parents2 === undefined) {
|
19058 | return false;
|
19059 | }
|
19060 |
|
19061 | for (let i = 0; i < parents1.length; i++) {
|
19062 | for (let j = 0; j < parents2.length; j++) {
|
19063 | if (parents1[i] == parents2[j]) {
|
19064 | return true;
|
19065 | }
|
19066 | }
|
19067 | }
|
19068 | return false;
|
19069 | }
|
19070 |
|
19071 | |
19072 |
|
19073 |
|
19074 |
|
19075 |
|
19076 |
|
19077 |
|
19078 | inSameSubNetwork(node1, node2) {
|
19079 | return this.trees[node1.id] === this.trees[node2.id];
|
19080 | }
|
19081 |
|
19082 | |
19083 |
|
19084 |
|
19085 |
|
19086 |
|
19087 | getLevels() {
|
19088 | return Object.keys(this.distributionOrdering);
|
19089 | }
|
19090 |
|
19091 | |
19092 |
|
19093 |
|
19094 |
|
19095 |
|
19096 |
|
19097 | addToOrdering(node, level) {
|
19098 | if (this.distributionOrdering[level] === undefined) {
|
19099 | this.distributionOrdering[level] = [];
|
19100 | }
|
19101 |
|
19102 | let isPresent = false;
|
19103 | const curLevel = this.distributionOrdering[level];
|
19104 | for (const n in curLevel) {
|
19105 |
|
19106 | if (curLevel[n] === node) {
|
19107 | isPresent = true;
|
19108 | break;
|
19109 | }
|
19110 | }
|
19111 |
|
19112 | if (!isPresent) {
|
19113 | this.distributionOrdering[level].push(node);
|
19114 | this.distributionIndex[node.id] =
|
19115 | this.distributionOrdering[level].length - 1;
|
19116 | }
|
19117 | }
|
19118 | }
|
19119 |
|
19120 |
|
19121 |
|
19122 |
|
19123 | class LayoutEngine {
|
19124 | |
19125 |
|
19126 |
|
19127 | constructor(body) {
|
19128 | this.body = body;
|
19129 |
|
19130 |
|
19131 |
|
19132 | this._resetRNG(Math.random() + ":" + Date.now());
|
19133 |
|
19134 | this.setPhysics = false;
|
19135 | this.options = {};
|
19136 | this.optionsBackup = { physics: {} };
|
19137 |
|
19138 | this.defaultOptions = {
|
19139 | randomSeed: undefined,
|
19140 | improvedLayout: true,
|
19141 | clusterThreshold: 150,
|
19142 | hierarchical: {
|
19143 | enabled: false,
|
19144 | levelSeparation: 150,
|
19145 | nodeSpacing: 100,
|
19146 | treeSpacing: 200,
|
19147 | blockShifting: true,
|
19148 | edgeMinimization: true,
|
19149 | parentCentralization: true,
|
19150 | direction: "UD",
|
19151 | sortMethod: "hubsize",
|
19152 | },
|
19153 | };
|
19154 | Object.assign(this.options, this.defaultOptions);
|
19155 | this.bindEventListeners();
|
19156 | }
|
19157 |
|
19158 | |
19159 |
|
19160 |
|
19161 | bindEventListeners() {
|
19162 | this.body.emitter.on("_dataChanged", () => {
|
19163 | this.setupHierarchicalLayout();
|
19164 | });
|
19165 | this.body.emitter.on("_dataLoaded", () => {
|
19166 | this.layoutNetwork();
|
19167 | });
|
19168 | this.body.emitter.on("_resetHierarchicalLayout", () => {
|
19169 | this.setupHierarchicalLayout();
|
19170 | });
|
19171 | this.body.emitter.on("_adjustEdgesForHierarchicalLayout", () => {
|
19172 | if (this.options.hierarchical.enabled !== true) {
|
19173 | return;
|
19174 | }
|
19175 |
|
19176 | const type = this.direction.curveType();
|
19177 |
|
19178 |
|
19179 | this.body.emitter.emit("_forceDisableDynamicCurves", type, false);
|
19180 | });
|
19181 | }
|
19182 |
|
19183 | |
19184 |
|
19185 |
|
19186 |
|
19187 |
|
19188 |
|
19189 | setOptions(options, allOptions) {
|
19190 | if (options !== undefined) {
|
19191 | const hierarchical = this.options.hierarchical;
|
19192 | const prevHierarchicalState = hierarchical.enabled;
|
19193 | selectiveDeepExtend(
|
19194 | ["randomSeed", "improvedLayout", "clusterThreshold"],
|
19195 | this.options,
|
19196 | options
|
19197 | );
|
19198 | mergeOptions(this.options, options, "hierarchical");
|
19199 |
|
19200 | if (options.randomSeed !== undefined) {
|
19201 | this._resetRNG(options.randomSeed);
|
19202 | }
|
19203 |
|
19204 | if (hierarchical.enabled === true) {
|
19205 | if (prevHierarchicalState === true) {
|
19206 |
|
19207 | this.body.emitter.emit("refresh", true);
|
19208 | }
|
19209 |
|
19210 |
|
19211 | if (
|
19212 | hierarchical.direction === "RL" ||
|
19213 | hierarchical.direction === "DU"
|
19214 | ) {
|
19215 | if (hierarchical.levelSeparation > 0) {
|
19216 | hierarchical.levelSeparation *= -1;
|
19217 | }
|
19218 | } else {
|
19219 | if (hierarchical.levelSeparation < 0) {
|
19220 | hierarchical.levelSeparation *= -1;
|
19221 | }
|
19222 | }
|
19223 |
|
19224 | this.setDirectionStrategy();
|
19225 |
|
19226 | this.body.emitter.emit("_resetHierarchicalLayout");
|
19227 |
|
19228 |
|
19229 | return this.adaptAllOptionsForHierarchicalLayout(allOptions);
|
19230 | } else {
|
19231 | if (prevHierarchicalState === true) {
|
19232 |
|
19233 | this.body.emitter.emit("refresh");
|
19234 | return deepExtend(allOptions, this.optionsBackup);
|
19235 | }
|
19236 | }
|
19237 | }
|
19238 | return allOptions;
|
19239 | }
|
19240 |
|
19241 | |
19242 |
|
19243 |
|
19244 |
|
19245 |
|
19246 | _resetRNG(seed) {
|
19247 | this.initialRandomSeed = seed;
|
19248 | this._rng = Alea(this.initialRandomSeed);
|
19249 | }
|
19250 |
|
19251 | |
19252 |
|
19253 |
|
19254 |
|
19255 |
|
19256 | adaptAllOptionsForHierarchicalLayout(allOptions) {
|
19257 | if (this.options.hierarchical.enabled === true) {
|
19258 | const backupPhysics = this.optionsBackup.physics;
|
19259 |
|
19260 |
|
19261 | if (allOptions.physics === undefined || allOptions.physics === true) {
|
19262 | allOptions.physics = {
|
19263 | enabled:
|
19264 | backupPhysics.enabled === undefined ? true : backupPhysics.enabled,
|
19265 | solver: "hierarchicalRepulsion",
|
19266 | };
|
19267 | backupPhysics.enabled =
|
19268 | backupPhysics.enabled === undefined ? true : backupPhysics.enabled;
|
19269 | backupPhysics.solver = backupPhysics.solver || "barnesHut";
|
19270 | } else if (typeof allOptions.physics === "object") {
|
19271 | backupPhysics.enabled =
|
19272 | allOptions.physics.enabled === undefined
|
19273 | ? true
|
19274 | : allOptions.physics.enabled;
|
19275 | backupPhysics.solver = allOptions.physics.solver || "barnesHut";
|
19276 | allOptions.physics.solver = "hierarchicalRepulsion";
|
19277 | } else if (allOptions.physics !== false) {
|
19278 | backupPhysics.solver = "barnesHut";
|
19279 | allOptions.physics = { solver: "hierarchicalRepulsion" };
|
19280 | }
|
19281 |
|
19282 |
|
19283 | let type = this.direction.curveType();
|
19284 |
|
19285 |
|
19286 |
|
19287 | if (allOptions.edges === undefined) {
|
19288 | this.optionsBackup.edges = {
|
19289 | smooth: { enabled: true, type: "dynamic" },
|
19290 | };
|
19291 | allOptions.edges = { smooth: false };
|
19292 | } else if (allOptions.edges.smooth === undefined) {
|
19293 | this.optionsBackup.edges = {
|
19294 | smooth: { enabled: true, type: "dynamic" },
|
19295 | };
|
19296 | allOptions.edges.smooth = false;
|
19297 | } else {
|
19298 | if (typeof allOptions.edges.smooth === "boolean") {
|
19299 | this.optionsBackup.edges = { smooth: allOptions.edges.smooth };
|
19300 | allOptions.edges.smooth = {
|
19301 | enabled: allOptions.edges.smooth,
|
19302 | type: type,
|
19303 | };
|
19304 | } else {
|
19305 | const smooth = allOptions.edges.smooth;
|
19306 |
|
19307 |
|
19308 | if (smooth.type !== undefined && smooth.type !== "dynamic") {
|
19309 | type = smooth.type;
|
19310 | }
|
19311 |
|
19312 |
|
19313 | this.optionsBackup.edges = {
|
19314 | smooth: {
|
19315 | enabled: smooth.enabled === undefined ? true : smooth.enabled,
|
19316 | type: smooth.type === undefined ? "dynamic" : smooth.type,
|
19317 | roundness:
|
19318 | smooth.roundness === undefined ? 0.5 : smooth.roundness,
|
19319 | forceDirection:
|
19320 | smooth.forceDirection === undefined
|
19321 | ? false
|
19322 | : smooth.forceDirection,
|
19323 | },
|
19324 | };
|
19325 |
|
19326 |
|
19327 | allOptions.edges.smooth = {
|
19328 | enabled: smooth.enabled === undefined ? true : smooth.enabled,
|
19329 | type: type,
|
19330 | roundness: smooth.roundness === undefined ? 0.5 : smooth.roundness,
|
19331 | forceDirection:
|
19332 | smooth.forceDirection === undefined
|
19333 | ? false
|
19334 | : smooth.forceDirection,
|
19335 | };
|
19336 | }
|
19337 | }
|
19338 |
|
19339 |
|
19340 |
|
19341 | this.body.emitter.emit("_forceDisableDynamicCurves", type);
|
19342 | }
|
19343 |
|
19344 | return allOptions;
|
19345 | }
|
19346 |
|
19347 | |
19348 |
|
19349 |
|
19350 |
|
19351 | positionInitially(nodesArray) {
|
19352 | if (this.options.hierarchical.enabled !== true) {
|
19353 | this._resetRNG(this.initialRandomSeed);
|
19354 | const radius = nodesArray.length + 50;
|
19355 | for (let i = 0; i < nodesArray.length; i++) {
|
19356 | const node = nodesArray[i];
|
19357 | const angle = 2 * Math.PI * this._rng();
|
19358 | if (node.x === undefined) {
|
19359 | node.x = radius * Math.cos(angle);
|
19360 | }
|
19361 | if (node.y === undefined) {
|
19362 | node.y = radius * Math.sin(angle);
|
19363 | }
|
19364 | }
|
19365 | }
|
19366 | }
|
19367 |
|
19368 | |
19369 |
|
19370 |
|
19371 |
|
19372 | layoutNetwork() {
|
19373 | if (
|
19374 | this.options.hierarchical.enabled !== true &&
|
19375 | this.options.improvedLayout === true
|
19376 | ) {
|
19377 | const indices = this.body.nodeIndices;
|
19378 |
|
19379 |
|
19380 |
|
19381 | let positionDefined = 0;
|
19382 | for (let i = 0; i < indices.length; i++) {
|
19383 | const node = this.body.nodes[indices[i]];
|
19384 | if (node.predefinedPosition === true) {
|
19385 | positionDefined += 1;
|
19386 | }
|
19387 | }
|
19388 |
|
19389 |
|
19390 | if (positionDefined < 0.5 * indices.length) {
|
19391 | const MAX_LEVELS = 10;
|
19392 | let level = 0;
|
19393 | const clusterThreshold = this.options.clusterThreshold;
|
19394 |
|
19395 |
|
19396 |
|
19397 |
|
19398 |
|
19399 |
|
19400 |
|
19401 |
|
19402 |
|
19403 |
|
19404 |
|
19405 |
|
19406 |
|
19407 | const clusterOptions = {
|
19408 | clusterNodeProperties: {
|
19409 | shape: "ellipse",
|
19410 | label: "",
|
19411 | group: "",
|
19412 | font: { multi: false },
|
19413 | },
|
19414 | clusterEdgeProperties: {
|
19415 | label: "",
|
19416 | font: { multi: false },
|
19417 | smooth: {
|
19418 | enabled: false,
|
19419 | },
|
19420 | },
|
19421 | };
|
19422 |
|
19423 |
|
19424 |
|
19425 |
|
19426 |
|
19427 | if (indices.length > clusterThreshold) {
|
19428 | const startLength = indices.length;
|
19429 | while (indices.length > clusterThreshold && level <= MAX_LEVELS) {
|
19430 |
|
19431 | level += 1;
|
19432 | const before = indices.length;
|
19433 |
|
19434 | if (level % 3 === 0) {
|
19435 | this.body.modules.clustering.clusterBridges(clusterOptions);
|
19436 | } else {
|
19437 | this.body.modules.clustering.clusterOutliers(clusterOptions);
|
19438 | }
|
19439 | const after = indices.length;
|
19440 | if (before == after && level % 3 !== 0) {
|
19441 | this._declusterAll();
|
19442 | this.body.emitter.emit("_layoutFailed");
|
19443 | console.info(
|
19444 | "This network could not be positioned by this version of the improved layout algorithm." +
|
19445 | " Please disable improvedLayout for better performance."
|
19446 | );
|
19447 | return;
|
19448 | }
|
19449 |
|
19450 |
|
19451 | }
|
19452 |
|
19453 | this.body.modules.kamadaKawai.setOptions({
|
19454 | springLength: Math.max(150, 2 * startLength),
|
19455 | });
|
19456 | }
|
19457 | if (level > MAX_LEVELS) {
|
19458 | console.info(
|
19459 | "The clustering didn't succeed within the amount of interations allowed," +
|
19460 | " progressing with partial result."
|
19461 | );
|
19462 | }
|
19463 |
|
19464 |
|
19465 | this.body.modules.kamadaKawai.solve(
|
19466 | indices,
|
19467 | this.body.edgeIndices,
|
19468 | true
|
19469 | );
|
19470 |
|
19471 |
|
19472 | this._shiftToCenter();
|
19473 |
|
19474 |
|
19475 | const offset = 70;
|
19476 | for (let i = 0; i < indices.length; i++) {
|
19477 |
|
19478 | const node = this.body.nodes[indices[i]];
|
19479 | if (node.predefinedPosition === false) {
|
19480 | node.x += (0.5 - this._rng()) * offset;
|
19481 | node.y += (0.5 - this._rng()) * offset;
|
19482 | }
|
19483 | }
|
19484 |
|
19485 |
|
19486 | this._declusterAll();
|
19487 |
|
19488 |
|
19489 | this.body.emitter.emit("_repositionBezierNodes");
|
19490 | }
|
19491 | }
|
19492 | }
|
19493 |
|
19494 | |
19495 |
|
19496 |
|
19497 |
|
19498 |
|
19499 | _shiftToCenter() {
|
19500 | const range = NetworkUtil.getRangeCore(
|
19501 | this.body.nodes,
|
19502 | this.body.nodeIndices
|
19503 | );
|
19504 | const center = NetworkUtil.findCenter(range);
|
19505 | for (let i = 0; i < this.body.nodeIndices.length; i++) {
|
19506 | const node = this.body.nodes[this.body.nodeIndices[i]];
|
19507 | node.x -= center.x;
|
19508 | node.y -= center.y;
|
19509 | }
|
19510 | }
|
19511 |
|
19512 | |
19513 |
|
19514 |
|
19515 |
|
19516 |
|
19517 | _declusterAll() {
|
19518 | let clustersPresent = true;
|
19519 | while (clustersPresent === true) {
|
19520 | clustersPresent = false;
|
19521 | for (let i = 0; i < this.body.nodeIndices.length; i++) {
|
19522 | if (this.body.nodes[this.body.nodeIndices[i]].isCluster === true) {
|
19523 | clustersPresent = true;
|
19524 | this.body.modules.clustering.openCluster(
|
19525 | this.body.nodeIndices[i],
|
19526 | {},
|
19527 | false
|
19528 | );
|
19529 | }
|
19530 | }
|
19531 | if (clustersPresent === true) {
|
19532 | this.body.emitter.emit("_dataChanged");
|
19533 | }
|
19534 | }
|
19535 | }
|
19536 |
|
19537 | |
19538 |
|
19539 |
|
19540 |
|
19541 | getSeed() {
|
19542 | return this.initialRandomSeed;
|
19543 | }
|
19544 |
|
19545 | |
19546 |
|
19547 |
|
19548 |
|
19549 |
|
19550 |
|
19551 | setupHierarchicalLayout() {
|
19552 | if (
|
19553 | this.options.hierarchical.enabled === true &&
|
19554 | this.body.nodeIndices.length > 0
|
19555 | ) {
|
19556 |
|
19557 | let node, nodeId;
|
19558 | let definedLevel = false;
|
19559 | let undefinedLevel = false;
|
19560 | this.lastNodeOnLevel = {};
|
19561 | this.hierarchical = new HierarchicalStatus();
|
19562 |
|
19563 | for (nodeId in this.body.nodes) {
|
19564 | if (Object.prototype.hasOwnProperty.call(this.body.nodes, nodeId)) {
|
19565 | node = this.body.nodes[nodeId];
|
19566 | if (node.options.level !== undefined) {
|
19567 | definedLevel = true;
|
19568 | this.hierarchical.levels[nodeId] = node.options.level;
|
19569 | } else {
|
19570 | undefinedLevel = true;
|
19571 | }
|
19572 | }
|
19573 | }
|
19574 |
|
19575 |
|
19576 | if (undefinedLevel === true && definedLevel === true) {
|
19577 | throw new Error(
|
19578 | "To use the hierarchical layout, nodes require either no predefined levels" +
|
19579 | " or levels have to be defined for all nodes."
|
19580 | );
|
19581 | } else {
|
19582 |
|
19583 | if (undefinedLevel === true) {
|
19584 | const sortMethod = this.options.hierarchical.sortMethod;
|
19585 | if (sortMethod === "hubsize") {
|
19586 | this._determineLevelsByHubsize();
|
19587 | } else if (sortMethod === "directed") {
|
19588 | this._determineLevelsDirected();
|
19589 | } else if (sortMethod === "custom") {
|
19590 | this._determineLevelsCustomCallback();
|
19591 | }
|
19592 | }
|
19593 |
|
19594 |
|
19595 | for (const nodeId in this.body.nodes) {
|
19596 | if (Object.prototype.hasOwnProperty.call(this.body.nodes, nodeId)) {
|
19597 | this.hierarchical.ensureLevel(nodeId);
|
19598 | }
|
19599 | }
|
19600 |
|
19601 | const distribution = this._getDistribution();
|
19602 |
|
19603 |
|
19604 | this._generateMap();
|
19605 |
|
19606 |
|
19607 | this._placeNodesByHierarchy(distribution);
|
19608 |
|
19609 |
|
19610 | this._condenseHierarchy();
|
19611 |
|
19612 |
|
19613 | this._shiftToCenter();
|
19614 | }
|
19615 | }
|
19616 | }
|
19617 |
|
19618 | |
19619 |
|
19620 |
|
19621 | _condenseHierarchy() {
|
19622 |
|
19623 | let stillShifting = false;
|
19624 | const branches = {};
|
19625 |
|
19626 |
|
19627 | const shiftTrees = () => {
|
19628 | const treeSizes = getTreeSizes();
|
19629 | let shiftBy = 0;
|
19630 | for (let i = 0; i < treeSizes.length - 1; i++) {
|
19631 | const diff = treeSizes[i].max - treeSizes[i + 1].min;
|
19632 | shiftBy += diff + this.options.hierarchical.treeSpacing;
|
19633 | shiftTree(i + 1, shiftBy);
|
19634 | }
|
19635 | };
|
19636 |
|
19637 |
|
19638 | const shiftTree = (index, offset) => {
|
19639 | const trees = this.hierarchical.trees;
|
19640 |
|
19641 | for (const nodeId in trees) {
|
19642 | if (Object.prototype.hasOwnProperty.call(trees, nodeId)) {
|
19643 | if (trees[nodeId] === index) {
|
19644 | this.direction.shift(nodeId, offset);
|
19645 | }
|
19646 | }
|
19647 | }
|
19648 | };
|
19649 |
|
19650 |
|
19651 | const getTreeSizes = () => {
|
19652 | const treeWidths = [];
|
19653 | for (let i = 0; i < this.hierarchical.numTrees(); i++) {
|
19654 | treeWidths.push(this.direction.getTreeSize(i));
|
19655 | }
|
19656 | return treeWidths;
|
19657 | };
|
19658 |
|
19659 |
|
19660 | const getBranchNodes = (source, map) => {
|
19661 | if (map[source.id]) {
|
19662 | return;
|
19663 | }
|
19664 | map[source.id] = true;
|
19665 | if (this.hierarchical.childrenReference[source.id]) {
|
19666 | const children = this.hierarchical.childrenReference[source.id];
|
19667 | if (children.length > 0) {
|
19668 | for (let i = 0; i < children.length; i++) {
|
19669 | getBranchNodes(this.body.nodes[children[i]], map);
|
19670 | }
|
19671 | }
|
19672 | }
|
19673 | };
|
19674 |
|
19675 |
|
19676 |
|
19677 | const getBranchBoundary = (branchMap, maxLevel = 1e9) => {
|
19678 | let minSpace = 1e9;
|
19679 | let maxSpace = 1e9;
|
19680 | let min = 1e9;
|
19681 | let max = -1e9;
|
19682 | for (const branchNode in branchMap) {
|
19683 | if (Object.prototype.hasOwnProperty.call(branchMap, branchNode)) {
|
19684 | const node = this.body.nodes[branchNode];
|
19685 | const level = this.hierarchical.levels[node.id];
|
19686 | const position = this.direction.getPosition(node);
|
19687 |
|
19688 |
|
19689 | const [minSpaceNode, maxSpaceNode] = this._getSpaceAroundNode(
|
19690 | node,
|
19691 | branchMap
|
19692 | );
|
19693 | minSpace = Math.min(minSpaceNode, minSpace);
|
19694 | maxSpace = Math.min(maxSpaceNode, maxSpace);
|
19695 |
|
19696 |
|
19697 | if (level <= maxLevel) {
|
19698 | min = Math.min(position, min);
|
19699 | max = Math.max(position, max);
|
19700 | }
|
19701 | }
|
19702 | }
|
19703 |
|
19704 | return [min, max, minSpace, maxSpace];
|
19705 | };
|
19706 |
|
19707 |
|
19708 | const getCollisionLevel = (node1, node2) => {
|
19709 | const maxLevel1 = this.hierarchical.getMaxLevel(node1.id);
|
19710 | const maxLevel2 = this.hierarchical.getMaxLevel(node2.id);
|
19711 | return Math.min(maxLevel1, maxLevel2);
|
19712 | };
|
19713 |
|
19714 | |
19715 |
|
19716 |
|
19717 |
|
19718 |
|
19719 |
|
19720 |
|
19721 | const shiftElementsCloser = (callback, levels, centerParents) => {
|
19722 | const hier = this.hierarchical;
|
19723 |
|
19724 | for (let i = 0; i < levels.length; i++) {
|
19725 | const level = levels[i];
|
19726 | const levelNodes = hier.distributionOrdering[level];
|
19727 | if (levelNodes.length > 1) {
|
19728 | for (let j = 0; j < levelNodes.length - 1; j++) {
|
19729 | const node1 = levelNodes[j];
|
19730 | const node2 = levelNodes[j + 1];
|
19731 |
|
19732 |
|
19733 |
|
19734 | if (
|
19735 | hier.hasSameParent(node1, node2) &&
|
19736 | hier.inSameSubNetwork(node1, node2)
|
19737 | ) {
|
19738 | callback(node1, node2, centerParents);
|
19739 | }
|
19740 | }
|
19741 | }
|
19742 | }
|
19743 | };
|
19744 |
|
19745 |
|
19746 | const branchShiftCallback = (node1, node2, centerParent = false) => {
|
19747 |
|
19748 | const pos1 = this.direction.getPosition(node1);
|
19749 | const pos2 = this.direction.getPosition(node2);
|
19750 | const diffAbs = Math.abs(pos2 - pos1);
|
19751 | const nodeSpacing = this.options.hierarchical.nodeSpacing;
|
19752 |
|
19753 | if (diffAbs > nodeSpacing) {
|
19754 | const branchNodes1 = {};
|
19755 | const branchNodes2 = {};
|
19756 |
|
19757 | getBranchNodes(node1, branchNodes1);
|
19758 | getBranchNodes(node2, branchNodes2);
|
19759 |
|
19760 |
|
19761 | const maxLevel = getCollisionLevel(node1, node2);
|
19762 | const branchNodeBoundary1 = getBranchBoundary(branchNodes1, maxLevel);
|
19763 | const branchNodeBoundary2 = getBranchBoundary(branchNodes2, maxLevel);
|
19764 | const max1 = branchNodeBoundary1[1];
|
19765 | const min2 = branchNodeBoundary2[0];
|
19766 | const minSpace2 = branchNodeBoundary2[2];
|
19767 |
|
19768 |
|
19769 |
|
19770 | const diffBranch = Math.abs(max1 - min2);
|
19771 | if (diffBranch > nodeSpacing) {
|
19772 | let offset = max1 - min2 + nodeSpacing;
|
19773 | if (offset < -minSpace2 + nodeSpacing) {
|
19774 | offset = -minSpace2 + nodeSpacing;
|
19775 |
|
19776 | }
|
19777 | if (offset < 0) {
|
19778 |
|
19779 | this._shiftBlock(node2.id, offset);
|
19780 | stillShifting = true;
|
19781 |
|
19782 | if (centerParent === true) this._centerParent(node2);
|
19783 | }
|
19784 | }
|
19785 | }
|
19786 |
|
19787 | };
|
19788 |
|
19789 | const minimizeEdgeLength = (iterations, node) => {
|
19790 |
|
19791 |
|
19792 | const nodeId = node.id;
|
19793 | const allEdges = node.edges;
|
19794 | const nodeLevel = this.hierarchical.levels[node.id];
|
19795 |
|
19796 |
|
19797 | const C2 =
|
19798 | this.options.hierarchical.levelSeparation *
|
19799 | this.options.hierarchical.levelSeparation;
|
19800 | const referenceNodes = {};
|
19801 | const aboveEdges = [];
|
19802 | for (let i = 0; i < allEdges.length; i++) {
|
19803 | const edge = allEdges[i];
|
19804 | if (edge.toId != edge.fromId) {
|
19805 | const otherNode = edge.toId == nodeId ? edge.from : edge.to;
|
19806 | referenceNodes[allEdges[i].id] = otherNode;
|
19807 | if (this.hierarchical.levels[otherNode.id] < nodeLevel) {
|
19808 | aboveEdges.push(edge);
|
19809 | }
|
19810 | }
|
19811 | }
|
19812 |
|
19813 |
|
19814 | const getFx = (point, edges) => {
|
19815 | let sum = 0;
|
19816 | for (let i = 0; i < edges.length; i++) {
|
19817 | if (referenceNodes[edges[i].id] !== undefined) {
|
19818 | const a =
|
19819 | this.direction.getPosition(referenceNodes[edges[i].id]) - point;
|
19820 | sum += a / Math.sqrt(a * a + C2);
|
19821 | }
|
19822 | }
|
19823 | return sum;
|
19824 | };
|
19825 |
|
19826 |
|
19827 | const getDFx = (point, edges) => {
|
19828 | let sum = 0;
|
19829 | for (let i = 0; i < edges.length; i++) {
|
19830 | if (referenceNodes[edges[i].id] !== undefined) {
|
19831 | const a =
|
19832 | this.direction.getPosition(referenceNodes[edges[i].id]) - point;
|
19833 | sum -= C2 * Math.pow(a * a + C2, -1.5);
|
19834 | }
|
19835 | }
|
19836 | return sum;
|
19837 | };
|
19838 |
|
19839 | const getGuess = (iterations, edges) => {
|
19840 | let guess = this.direction.getPosition(node);
|
19841 |
|
19842 | const guessMap = {};
|
19843 | for (let i = 0; i < iterations; i++) {
|
19844 | const fx = getFx(guess, edges);
|
19845 | const dfx = getDFx(guess, edges);
|
19846 |
|
19847 |
|
19848 | const limit = 40;
|
19849 | const ratio = Math.max(-limit, Math.min(limit, Math.round(fx / dfx)));
|
19850 | guess = guess - ratio;
|
19851 |
|
19852 | if (guessMap[guess] !== undefined) {
|
19853 | break;
|
19854 | }
|
19855 | guessMap[guess] = i;
|
19856 | }
|
19857 | return guess;
|
19858 | };
|
19859 |
|
19860 | const moveBranch = (guess) => {
|
19861 |
|
19862 | const nodePosition = this.direction.getPosition(node);
|
19863 |
|
19864 |
|
19865 | if (branches[node.id] === undefined) {
|
19866 | const branchNodes = {};
|
19867 | getBranchNodes(node, branchNodes);
|
19868 | branches[node.id] = branchNodes;
|
19869 | }
|
19870 | const branchBoundary = getBranchBoundary(branches[node.id]);
|
19871 | const minSpaceBranch = branchBoundary[2];
|
19872 | const maxSpaceBranch = branchBoundary[3];
|
19873 |
|
19874 | const diff = guess - nodePosition;
|
19875 |
|
19876 |
|
19877 | let branchOffset = 0;
|
19878 | if (diff > 0) {
|
19879 | branchOffset = Math.min(
|
19880 | diff,
|
19881 | maxSpaceBranch - this.options.hierarchical.nodeSpacing
|
19882 | );
|
19883 | } else if (diff < 0) {
|
19884 | branchOffset = -Math.min(
|
19885 | -diff,
|
19886 | minSpaceBranch - this.options.hierarchical.nodeSpacing
|
19887 | );
|
19888 | }
|
19889 |
|
19890 | if (branchOffset != 0) {
|
19891 |
|
19892 | this._shiftBlock(node.id, branchOffset);
|
19893 |
|
19894 | stillShifting = true;
|
19895 | }
|
19896 | };
|
19897 |
|
19898 | const moveNode = (guess) => {
|
19899 | const nodePosition = this.direction.getPosition(node);
|
19900 |
|
19901 |
|
19902 | const [minSpace, maxSpace] = this._getSpaceAroundNode(node);
|
19903 | const diff = guess - nodePosition;
|
19904 |
|
19905 | let newPosition = nodePosition;
|
19906 | if (diff > 0) {
|
19907 | newPosition = Math.min(
|
19908 | nodePosition + (maxSpace - this.options.hierarchical.nodeSpacing),
|
19909 | guess
|
19910 | );
|
19911 | } else if (diff < 0) {
|
19912 | newPosition = Math.max(
|
19913 | nodePosition - (minSpace - this.options.hierarchical.nodeSpacing),
|
19914 | guess
|
19915 | );
|
19916 | }
|
19917 |
|
19918 | if (newPosition !== nodePosition) {
|
19919 |
|
19920 | this.direction.setPosition(node, newPosition);
|
19921 |
|
19922 | stillShifting = true;
|
19923 | }
|
19924 | };
|
19925 |
|
19926 | let guess = getGuess(iterations, aboveEdges);
|
19927 | moveBranch(guess);
|
19928 | guess = getGuess(iterations, allEdges);
|
19929 | moveNode(guess);
|
19930 |
|
19931 | };
|
19932 |
|
19933 |
|
19934 | const minimizeEdgeLengthBottomUp = (iterations) => {
|
19935 | let levels = this.hierarchical.getLevels();
|
19936 | levels = levels.reverse();
|
19937 | for (let i = 0; i < iterations; i++) {
|
19938 | stillShifting = false;
|
19939 | for (let j = 0; j < levels.length; j++) {
|
19940 | const level = levels[j];
|
19941 | const levelNodes = this.hierarchical.distributionOrdering[level];
|
19942 | for (let k = 0; k < levelNodes.length; k++) {
|
19943 | minimizeEdgeLength(1000, levelNodes[k]);
|
19944 | }
|
19945 | }
|
19946 | if (stillShifting !== true) {
|
19947 |
|
19948 | break;
|
19949 | }
|
19950 | }
|
19951 | };
|
19952 |
|
19953 |
|
19954 | const shiftBranchesCloserBottomUp = (iterations) => {
|
19955 | let levels = this.hierarchical.getLevels();
|
19956 | levels = levels.reverse();
|
19957 | for (let i = 0; i < iterations; i++) {
|
19958 | stillShifting = false;
|
19959 | shiftElementsCloser(branchShiftCallback, levels, true);
|
19960 | if (stillShifting !== true) {
|
19961 |
|
19962 | break;
|
19963 | }
|
19964 | }
|
19965 | };
|
19966 |
|
19967 |
|
19968 | const centerAllParents = () => {
|
19969 | for (const nodeId in this.body.nodes) {
|
19970 | if (Object.prototype.hasOwnProperty.call(this.body.nodes, nodeId))
|
19971 | this._centerParent(this.body.nodes[nodeId]);
|
19972 | }
|
19973 | };
|
19974 |
|
19975 |
|
19976 | const centerAllParentsBottomUp = () => {
|
19977 | let levels = this.hierarchical.getLevels();
|
19978 | levels = levels.reverse();
|
19979 | for (let i = 0; i < levels.length; i++) {
|
19980 | const level = levels[i];
|
19981 | const levelNodes = this.hierarchical.distributionOrdering[level];
|
19982 | for (let j = 0; j < levelNodes.length; j++) {
|
19983 | this._centerParent(levelNodes[j]);
|
19984 | }
|
19985 | }
|
19986 | };
|
19987 |
|
19988 |
|
19989 | if (this.options.hierarchical.blockShifting === true) {
|
19990 | shiftBranchesCloserBottomUp(5);
|
19991 | centerAllParents();
|
19992 | }
|
19993 |
|
19994 |
|
19995 | if (this.options.hierarchical.edgeMinimization === true) {
|
19996 | minimizeEdgeLengthBottomUp(20);
|
19997 | }
|
19998 |
|
19999 | if (this.options.hierarchical.parentCentralization === true) {
|
20000 | centerAllParentsBottomUp();
|
20001 | }
|
20002 |
|
20003 | shiftTrees();
|
20004 | }
|
20005 |
|
20006 | |
20007 |
|
20008 |
|
20009 |
|
20010 |
|
20011 |
|
20012 |
|
20013 |
|
20014 |
|
20015 | _getSpaceAroundNode(node, map) {
|
20016 | let useMap = true;
|
20017 | if (map === undefined) {
|
20018 | useMap = false;
|
20019 | }
|
20020 | const level = this.hierarchical.levels[node.id];
|
20021 | if (level !== undefined) {
|
20022 | const index = this.hierarchical.distributionIndex[node.id];
|
20023 | const position = this.direction.getPosition(node);
|
20024 | const ordering = this.hierarchical.distributionOrdering[level];
|
20025 | let minSpace = 1e9;
|
20026 | let maxSpace = 1e9;
|
20027 | if (index !== 0) {
|
20028 | const prevNode = ordering[index - 1];
|
20029 | if (
|
20030 | (useMap === true && map[prevNode.id] === undefined) ||
|
20031 | useMap === false
|
20032 | ) {
|
20033 | const prevPos = this.direction.getPosition(prevNode);
|
20034 | minSpace = position - prevPos;
|
20035 | }
|
20036 | }
|
20037 |
|
20038 | if (index != ordering.length - 1) {
|
20039 | const nextNode = ordering[index + 1];
|
20040 | if (
|
20041 | (useMap === true && map[nextNode.id] === undefined) ||
|
20042 | useMap === false
|
20043 | ) {
|
20044 | const nextPos = this.direction.getPosition(nextNode);
|
20045 | maxSpace = Math.min(maxSpace, nextPos - position);
|
20046 | }
|
20047 | }
|
20048 |
|
20049 | return [minSpace, maxSpace];
|
20050 | } else {
|
20051 | return [0, 0];
|
20052 | }
|
20053 | }
|
20054 |
|
20055 | |
20056 |
|
20057 |
|
20058 |
|
20059 |
|
20060 |
|
20061 | _centerParent(node) {
|
20062 | if (this.hierarchical.parentReference[node.id]) {
|
20063 | const parents = this.hierarchical.parentReference[node.id];
|
20064 | for (let i = 0; i < parents.length; i++) {
|
20065 | const parentId = parents[i];
|
20066 | const parentNode = this.body.nodes[parentId];
|
20067 | const children = this.hierarchical.childrenReference[parentId];
|
20068 |
|
20069 | if (children !== undefined) {
|
20070 |
|
20071 | const newPosition = this._getCenterPosition(children);
|
20072 |
|
20073 | const position = this.direction.getPosition(parentNode);
|
20074 | const [minSpace, maxSpace] = this._getSpaceAroundNode(parentNode);
|
20075 | const diff = position - newPosition;
|
20076 | if (
|
20077 | (diff < 0 &&
|
20078 | Math.abs(diff) <
|
20079 | maxSpace - this.options.hierarchical.nodeSpacing) ||
|
20080 | (diff > 0 &&
|
20081 | Math.abs(diff) < minSpace - this.options.hierarchical.nodeSpacing)
|
20082 | ) {
|
20083 | this.direction.setPosition(parentNode, newPosition);
|
20084 | }
|
20085 | }
|
20086 | }
|
20087 | }
|
20088 | }
|
20089 |
|
20090 | |
20091 |
|
20092 |
|
20093 |
|
20094 |
|
20095 |
|
20096 | _placeNodesByHierarchy(distribution) {
|
20097 | this.positionedNodes = {};
|
20098 |
|
20099 | for (const level in distribution) {
|
20100 | if (Object.prototype.hasOwnProperty.call(distribution, level)) {
|
20101 |
|
20102 | let nodeArray = Object.keys(distribution[level]);
|
20103 | nodeArray = this._indexArrayToNodes(nodeArray);
|
20104 | this.direction.sort(nodeArray);
|
20105 | let handledNodeCount = 0;
|
20106 |
|
20107 | for (let i = 0; i < nodeArray.length; i++) {
|
20108 | const node = nodeArray[i];
|
20109 | if (this.positionedNodes[node.id] === undefined) {
|
20110 | const spacing = this.options.hierarchical.nodeSpacing;
|
20111 | let pos = spacing * handledNodeCount;
|
20112 |
|
20113 |
|
20114 | if (handledNodeCount > 0) {
|
20115 | pos = this.direction.getPosition(nodeArray[i - 1]) + spacing;
|
20116 | }
|
20117 | this.direction.setPosition(node, pos, level);
|
20118 | this._validatePositionAndContinue(node, level, pos);
|
20119 |
|
20120 | handledNodeCount++;
|
20121 | }
|
20122 | }
|
20123 | }
|
20124 | }
|
20125 | }
|
20126 |
|
20127 | |
20128 |
|
20129 |
|
20130 |
|
20131 |
|
20132 |
|
20133 |
|
20134 |
|
20135 | _placeBranchNodes(parentId, parentLevel) {
|
20136 | const childRef = this.hierarchical.childrenReference[parentId];
|
20137 |
|
20138 |
|
20139 | if (childRef === undefined) {
|
20140 | return;
|
20141 | }
|
20142 |
|
20143 |
|
20144 | const childNodes = [];
|
20145 | for (let i = 0; i < childRef.length; i++) {
|
20146 | childNodes.push(this.body.nodes[childRef[i]]);
|
20147 | }
|
20148 |
|
20149 |
|
20150 | this.direction.sort(childNodes);
|
20151 |
|
20152 |
|
20153 | for (let i = 0; i < childNodes.length; i++) {
|
20154 | const childNode = childNodes[i];
|
20155 | const childNodeLevel = this.hierarchical.levels[childNode.id];
|
20156 |
|
20157 | if (
|
20158 | childNodeLevel > parentLevel &&
|
20159 | this.positionedNodes[childNode.id] === undefined
|
20160 | ) {
|
20161 |
|
20162 | const spacing = this.options.hierarchical.nodeSpacing;
|
20163 | let pos;
|
20164 |
|
20165 |
|
20166 |
|
20167 | if (i === 0) {
|
20168 | pos = this.direction.getPosition(this.body.nodes[parentId]);
|
20169 | } else {
|
20170 | pos = this.direction.getPosition(childNodes[i - 1]) + spacing;
|
20171 | }
|
20172 | this.direction.setPosition(childNode, pos, childNodeLevel);
|
20173 | this._validatePositionAndContinue(childNode, childNodeLevel, pos);
|
20174 | } else {
|
20175 | return;
|
20176 | }
|
20177 | }
|
20178 |
|
20179 |
|
20180 | const center = this._getCenterPosition(childNodes);
|
20181 | this.direction.setPosition(this.body.nodes[parentId], center, parentLevel);
|
20182 | }
|
20183 |
|
20184 | |
20185 |
|
20186 |
|
20187 |
|
20188 |
|
20189 |
|
20190 |
|
20191 |
|
20192 |
|
20193 | _validatePositionAndContinue(node, level, pos) {
|
20194 |
|
20195 |
|
20196 | if (!this.hierarchical.isTree) return;
|
20197 |
|
20198 |
|
20199 | if (this.lastNodeOnLevel[level] !== undefined) {
|
20200 | const previousPos = this.direction.getPosition(
|
20201 | this.body.nodes[this.lastNodeOnLevel[level]]
|
20202 | );
|
20203 | if (pos - previousPos < this.options.hierarchical.nodeSpacing) {
|
20204 | const diff = previousPos + this.options.hierarchical.nodeSpacing - pos;
|
20205 | const sharedParent = this._findCommonParent(
|
20206 | this.lastNodeOnLevel[level],
|
20207 | node.id
|
20208 | );
|
20209 | this._shiftBlock(sharedParent.withChild, diff);
|
20210 | }
|
20211 | }
|
20212 |
|
20213 | this.lastNodeOnLevel[level] = node.id;
|
20214 | this.positionedNodes[node.id] = true;
|
20215 | this._placeBranchNodes(node.id, level);
|
20216 | }
|
20217 |
|
20218 | |
20219 |
|
20220 |
|
20221 |
|
20222 |
|
20223 |
|
20224 |
|
20225 | _indexArrayToNodes(idArray) {
|
20226 | const array = [];
|
20227 | for (let i = 0; i < idArray.length; i++) {
|
20228 | array.push(this.body.nodes[idArray[i]]);
|
20229 | }
|
20230 | return array;
|
20231 | }
|
20232 |
|
20233 | |
20234 |
|
20235 |
|
20236 |
|
20237 |
|
20238 |
|
20239 | _getDistribution() {
|
20240 | const distribution = {};
|
20241 | let nodeId, node;
|
20242 |
|
20243 |
|
20244 |
|
20245 |
|
20246 | for (nodeId in this.body.nodes) {
|
20247 | if (Object.prototype.hasOwnProperty.call(this.body.nodes, nodeId)) {
|
20248 | node = this.body.nodes[nodeId];
|
20249 | const level =
|
20250 | this.hierarchical.levels[nodeId] === undefined
|
20251 | ? 0
|
20252 | : this.hierarchical.levels[nodeId];
|
20253 | this.direction.fix(node, level);
|
20254 | if (distribution[level] === undefined) {
|
20255 | distribution[level] = {};
|
20256 | }
|
20257 | distribution[level][nodeId] = node;
|
20258 | }
|
20259 | }
|
20260 | return distribution;
|
20261 | }
|
20262 |
|
20263 | |
20264 |
|
20265 |
|
20266 |
|
20267 |
|
20268 |
|
20269 |
|
20270 | _getActiveEdges(node) {
|
20271 | const result = [];
|
20272 |
|
20273 | forEach(node.edges, (edge) => {
|
20274 | if (this.body.edgeIndices.indexOf(edge.id) !== -1) {
|
20275 | result.push(edge);
|
20276 | }
|
20277 | });
|
20278 |
|
20279 | return result;
|
20280 | }
|
20281 |
|
20282 | |
20283 |
|
20284 |
|
20285 |
|
20286 |
|
20287 |
|
20288 | _getHubSizes() {
|
20289 | const hubSizes = {};
|
20290 | const nodeIds = this.body.nodeIndices;
|
20291 |
|
20292 | forEach(nodeIds, (nodeId) => {
|
20293 | const node = this.body.nodes[nodeId];
|
20294 | const hubSize = this._getActiveEdges(node).length;
|
20295 | hubSizes[hubSize] = true;
|
20296 | });
|
20297 |
|
20298 |
|
20299 | const result = [];
|
20300 | forEach(hubSizes, (size) => {
|
20301 | result.push(Number(size));
|
20302 | });
|
20303 |
|
20304 | TimSort.sort(result, function (a, b) {
|
20305 | return b - a;
|
20306 | });
|
20307 |
|
20308 | return result;
|
20309 | }
|
20310 |
|
20311 | |
20312 |
|
20313 |
|
20314 |
|
20315 |
|
20316 | _determineLevelsByHubsize() {
|
20317 | const levelDownstream = (nodeA, nodeB) => {
|
20318 | this.hierarchical.levelDownstream(nodeA, nodeB);
|
20319 | };
|
20320 |
|
20321 | const hubSizes = this._getHubSizes();
|
20322 |
|
20323 | for (let i = 0; i < hubSizes.length; ++i) {
|
20324 | const hubSize = hubSizes[i];
|
20325 | if (hubSize === 0) break;
|
20326 |
|
20327 | forEach(this.body.nodeIndices, (nodeId) => {
|
20328 | const node = this.body.nodes[nodeId];
|
20329 |
|
20330 | if (hubSize === this._getActiveEdges(node).length) {
|
20331 | this._crawlNetwork(levelDownstream, nodeId);
|
20332 | }
|
20333 | });
|
20334 | }
|
20335 | }
|
20336 |
|
20337 | |
20338 |
|
20339 |
|
20340 |
|
20341 |
|
20342 |
|
20343 | _determineLevelsCustomCallback() {
|
20344 | const minLevel = 100000;
|
20345 |
|
20346 |
|
20347 |
|
20348 | const customCallback = function (nodeA, nodeB, edge) {};
|
20349 |
|
20350 |
|
20351 |
|
20352 | const levelByDirection = (nodeA, nodeB, edge) => {
|
20353 | let levelA = this.hierarchical.levels[nodeA.id];
|
20354 |
|
20355 | if (levelA === undefined) {
|
20356 | levelA = this.hierarchical.levels[nodeA.id] = minLevel;
|
20357 | }
|
20358 |
|
20359 | const diff = customCallback(
|
20360 | NetworkUtil.cloneOptions(nodeA, "node"),
|
20361 | NetworkUtil.cloneOptions(nodeB, "node"),
|
20362 | NetworkUtil.cloneOptions(edge, "edge")
|
20363 | );
|
20364 |
|
20365 | this.hierarchical.levels[nodeB.id] = levelA + diff;
|
20366 | };
|
20367 |
|
20368 | this._crawlNetwork(levelByDirection);
|
20369 | this.hierarchical.setMinLevelToZero(this.body.nodes);
|
20370 | }
|
20371 |
|
20372 | |
20373 |
|
20374 |
|
20375 |
|
20376 |
|
20377 | _determineLevelsDirected() {
|
20378 | const nodes = this.body.nodeIndices.reduce((acc, id) => {
|
20379 | acc.set(id, this.body.nodes[id]);
|
20380 | return acc;
|
20381 | }, new Map());
|
20382 |
|
20383 | if (this.options.hierarchical.shakeTowards === "roots") {
|
20384 | this.hierarchical.levels = fillLevelsByDirectionRoots(nodes);
|
20385 | } else {
|
20386 | this.hierarchical.levels = fillLevelsByDirectionLeaves(nodes);
|
20387 | }
|
20388 |
|
20389 | this.hierarchical.setMinLevelToZero(this.body.nodes);
|
20390 | }
|
20391 |
|
20392 | |
20393 |
|
20394 |
|
20395 |
|
20396 |
|
20397 | _generateMap() {
|
20398 | const fillInRelations = (parentNode, childNode) => {
|
20399 | if (
|
20400 | this.hierarchical.levels[childNode.id] >
|
20401 | this.hierarchical.levels[parentNode.id]
|
20402 | ) {
|
20403 | this.hierarchical.addRelation(parentNode.id, childNode.id);
|
20404 | }
|
20405 | };
|
20406 |
|
20407 | this._crawlNetwork(fillInRelations);
|
20408 | this.hierarchical.checkIfTree();
|
20409 | }
|
20410 |
|
20411 | |
20412 |
|
20413 |
|
20414 |
|
20415 |
|
20416 |
|
20417 |
|
20418 | _crawlNetwork(callback = function () {}, startingNodeId) {
|
20419 | const progress = {};
|
20420 |
|
20421 | const crawler = (node, tree) => {
|
20422 | if (progress[node.id] === undefined) {
|
20423 | this.hierarchical.setTreeIndex(node, tree);
|
20424 |
|
20425 | progress[node.id] = true;
|
20426 | let childNode;
|
20427 | const edges = this._getActiveEdges(node);
|
20428 | for (let i = 0; i < edges.length; i++) {
|
20429 | const edge = edges[i];
|
20430 | if (edge.connected === true) {
|
20431 | if (edge.toId == node.id) {
|
20432 |
|
20433 | childNode = edge.from;
|
20434 | } else {
|
20435 | childNode = edge.to;
|
20436 | }
|
20437 |
|
20438 | if (node.id != childNode.id) {
|
20439 |
|
20440 | callback(node, childNode, edge);
|
20441 | crawler(childNode, tree);
|
20442 | }
|
20443 | }
|
20444 | }
|
20445 | }
|
20446 | };
|
20447 |
|
20448 | if (startingNodeId === undefined) {
|
20449 |
|
20450 | let treeIndex = 0;
|
20451 |
|
20452 | for (let i = 0; i < this.body.nodeIndices.length; i++) {
|
20453 | const nodeId = this.body.nodeIndices[i];
|
20454 |
|
20455 | if (progress[nodeId] === undefined) {
|
20456 | const node = this.body.nodes[nodeId];
|
20457 | crawler(node, treeIndex);
|
20458 | treeIndex += 1;
|
20459 | }
|
20460 | }
|
20461 | } else {
|
20462 |
|
20463 | const node = this.body.nodes[startingNodeId];
|
20464 | if (node === undefined) {
|
20465 | console.error("Node not found:", startingNodeId);
|
20466 | return;
|
20467 | }
|
20468 | crawler(node);
|
20469 | }
|
20470 | }
|
20471 |
|
20472 | |
20473 |
|
20474 |
|
20475 |
|
20476 |
|
20477 |
|
20478 |
|
20479 | _shiftBlock(parentId, diff) {
|
20480 | const progress = {};
|
20481 | const shifter = (parentId) => {
|
20482 | if (progress[parentId]) {
|
20483 | return;
|
20484 | }
|
20485 | progress[parentId] = true;
|
20486 | this.direction.shift(parentId, diff);
|
20487 |
|
20488 | const childRef = this.hierarchical.childrenReference[parentId];
|
20489 | if (childRef !== undefined) {
|
20490 | for (let i = 0; i < childRef.length; i++) {
|
20491 | shifter(childRef[i]);
|
20492 | }
|
20493 | }
|
20494 | };
|
20495 | shifter(parentId);
|
20496 | }
|
20497 |
|
20498 | |
20499 |
|
20500 |
|
20501 |
|
20502 |
|
20503 |
|
20504 |
|
20505 |
|
20506 | _findCommonParent(childA, childB) {
|
20507 | const parents = {};
|
20508 | const iterateParents = (parents, child) => {
|
20509 | const parentRef = this.hierarchical.parentReference[child];
|
20510 | if (parentRef !== undefined) {
|
20511 | for (let i = 0; i < parentRef.length; i++) {
|
20512 | const parent = parentRef[i];
|
20513 | parents[parent] = true;
|
20514 | iterateParents(parents, parent);
|
20515 | }
|
20516 | }
|
20517 | };
|
20518 | const findParent = (parents, child) => {
|
20519 | const parentRef = this.hierarchical.parentReference[child];
|
20520 | if (parentRef !== undefined) {
|
20521 | for (let i = 0; i < parentRef.length; i++) {
|
20522 | const parent = parentRef[i];
|
20523 | if (parents[parent] !== undefined) {
|
20524 | return { foundParent: parent, withChild: child };
|
20525 | }
|
20526 | const branch = findParent(parents, parent);
|
20527 | if (branch.foundParent !== null) {
|
20528 | return branch;
|
20529 | }
|
20530 | }
|
20531 | }
|
20532 | return { foundParent: null, withChild: child };
|
20533 | };
|
20534 |
|
20535 | iterateParents(parents, childA);
|
20536 | return findParent(parents, childB);
|
20537 | }
|
20538 |
|
20539 | |
20540 |
|
20541 |
|
20542 |
|
20543 |
|
20544 |
|
20545 |
|
20546 |
|
20547 |
|
20548 |
|
20549 |
|
20550 | setDirectionStrategy() {
|
20551 | const isVertical =
|
20552 | this.options.hierarchical.direction === "UD" ||
|
20553 | this.options.hierarchical.direction === "DU";
|
20554 |
|
20555 | if (isVertical) {
|
20556 | this.direction = new VerticalStrategy(this);
|
20557 | } else {
|
20558 | this.direction = new HorizontalStrategy(this);
|
20559 | }
|
20560 | }
|
20561 |
|
20562 | |
20563 |
|
20564 |
|
20565 |
|
20566 |
|
20567 |
|
20568 |
|
20569 |
|
20570 |
|
20571 | _getCenterPosition(childNodes) {
|
20572 | let minPos = 1e9;
|
20573 | let maxPos = -1e9;
|
20574 |
|
20575 | for (let i = 0; i < childNodes.length; i++) {
|
20576 | let childNode;
|
20577 | if (childNodes[i].id !== undefined) {
|
20578 | childNode = childNodes[i];
|
20579 | } else {
|
20580 | const childNodeId = childNodes[i];
|
20581 | childNode = this.body.nodes[childNodeId];
|
20582 | }
|
20583 |
|
20584 | const position = this.direction.getPosition(childNode);
|
20585 | minPos = Math.min(minPos, position);
|
20586 | maxPos = Math.max(maxPos, position);
|
20587 | }
|
20588 |
|
20589 | return 0.5 * (minPos + maxPos);
|
20590 | }
|
20591 | }
|
20592 |
|
20593 |
|
20594 |
|
20595 |
|
20596 |
|
20597 |
|
20598 | class ManipulationSystem {
|
20599 | |
20600 |
|
20601 |
|
20602 |
|
20603 |
|
20604 |
|
20605 | constructor(body, canvas, selectionHandler, interactionHandler) {
|
20606 | this.body = body;
|
20607 | this.canvas = canvas;
|
20608 | this.selectionHandler = selectionHandler;
|
20609 | this.interactionHandler = interactionHandler;
|
20610 |
|
20611 | this.editMode = false;
|
20612 | this.manipulationDiv = undefined;
|
20613 | this.editModeDiv = undefined;
|
20614 | this.closeDiv = undefined;
|
20615 |
|
20616 | this._domEventListenerCleanupQueue = [];
|
20617 | this.temporaryUIFunctions = {};
|
20618 | this.temporaryEventFunctions = [];
|
20619 |
|
20620 | this.touchTime = 0;
|
20621 | this.temporaryIds = { nodes: [], edges: [] };
|
20622 | this.guiEnabled = false;
|
20623 | this.inMode = false;
|
20624 | this.selectedControlNode = undefined;
|
20625 |
|
20626 | this.options = {};
|
20627 | this.defaultOptions = {
|
20628 | enabled: false,
|
20629 | initiallyActive: false,
|
20630 | addNode: true,
|
20631 | addEdge: true,
|
20632 | editNode: undefined,
|
20633 | editEdge: true,
|
20634 | deleteNode: true,
|
20635 | deleteEdge: true,
|
20636 | controlNodeStyle: {
|
20637 | shape: "dot",
|
20638 | size: 6,
|
20639 | color: {
|
20640 | background: "#ff0000",
|
20641 | border: "#3c3c3c",
|
20642 | highlight: { background: "#07f968", border: "#3c3c3c" },
|
20643 | },
|
20644 | borderWidth: 2,
|
20645 | borderWidthSelected: 2,
|
20646 | },
|
20647 | };
|
20648 | Object.assign(this.options, this.defaultOptions);
|
20649 |
|
20650 | this.body.emitter.on("destroy", () => {
|
20651 | this._clean();
|
20652 | });
|
20653 | this.body.emitter.on("_dataChanged", this._restore.bind(this));
|
20654 | this.body.emitter.on("_resetData", this._restore.bind(this));
|
20655 | }
|
20656 |
|
20657 | |
20658 |
|
20659 |
|
20660 |
|
20661 |
|
20662 | _restore() {
|
20663 | if (this.inMode !== false) {
|
20664 | if (this.options.initiallyActive === true) {
|
20665 | this.enableEditMode();
|
20666 | } else {
|
20667 | this.disableEditMode();
|
20668 | }
|
20669 | }
|
20670 | }
|
20671 |
|
20672 | |
20673 |
|
20674 |
|
20675 |
|
20676 |
|
20677 |
|
20678 |
|
20679 | setOptions(options, allOptions, globalOptions) {
|
20680 | if (allOptions !== undefined) {
|
20681 | if (allOptions.locale !== undefined) {
|
20682 | this.options.locale = allOptions.locale;
|
20683 | } else {
|
20684 | this.options.locale = globalOptions.locale;
|
20685 | }
|
20686 | if (allOptions.locales !== undefined) {
|
20687 | this.options.locales = allOptions.locales;
|
20688 | } else {
|
20689 | this.options.locales = globalOptions.locales;
|
20690 | }
|
20691 | }
|
20692 |
|
20693 | if (options !== undefined) {
|
20694 | if (typeof options === "boolean") {
|
20695 | this.options.enabled = options;
|
20696 | } else {
|
20697 | this.options.enabled = true;
|
20698 | deepExtend(this.options, options);
|
20699 | }
|
20700 | if (this.options.initiallyActive === true) {
|
20701 | this.editMode = true;
|
20702 | }
|
20703 | this._setup();
|
20704 | }
|
20705 | }
|
20706 |
|
20707 | |
20708 |
|
20709 |
|
20710 |
|
20711 |
|
20712 | toggleEditMode() {
|
20713 | if (this.editMode === true) {
|
20714 | this.disableEditMode();
|
20715 | } else {
|
20716 | this.enableEditMode();
|
20717 | }
|
20718 | }
|
20719 |
|
20720 | |
20721 |
|
20722 |
|
20723 | enableEditMode() {
|
20724 | this.editMode = true;
|
20725 |
|
20726 | this._clean();
|
20727 | if (this.guiEnabled === true) {
|
20728 | this.manipulationDiv.style.display = "block";
|
20729 | this.closeDiv.style.display = "block";
|
20730 | this.editModeDiv.style.display = "none";
|
20731 | this.showManipulatorToolbar();
|
20732 | }
|
20733 | }
|
20734 |
|
20735 | |
20736 |
|
20737 |
|
20738 | disableEditMode() {
|
20739 | this.editMode = false;
|
20740 |
|
20741 | this._clean();
|
20742 | if (this.guiEnabled === true) {
|
20743 | this.manipulationDiv.style.display = "none";
|
20744 | this.closeDiv.style.display = "none";
|
20745 | this.editModeDiv.style.display = "block";
|
20746 | this._createEditButton();
|
20747 | }
|
20748 | }
|
20749 |
|
20750 | |
20751 |
|
20752 |
|
20753 |
|
20754 |
|
20755 | showManipulatorToolbar() {
|
20756 |
|
20757 | this._clean();
|
20758 |
|
20759 |
|
20760 | this.manipulationDOM = {};
|
20761 |
|
20762 |
|
20763 | if (this.guiEnabled === true) {
|
20764 |
|
20765 | this.editMode = true;
|
20766 | this.manipulationDiv.style.display = "block";
|
20767 | this.closeDiv.style.display = "block";
|
20768 |
|
20769 | const selectedNodeCount = this.selectionHandler.getSelectedNodeCount();
|
20770 | const selectedEdgeCount = this.selectionHandler.getSelectedEdgeCount();
|
20771 | const selectedTotalCount = selectedNodeCount + selectedEdgeCount;
|
20772 | const locale = this.options.locales[this.options.locale];
|
20773 | let needSeperator = false;
|
20774 |
|
20775 | if (this.options.addNode !== false) {
|
20776 | this._createAddNodeButton(locale);
|
20777 | needSeperator = true;
|
20778 | }
|
20779 | if (this.options.addEdge !== false) {
|
20780 | if (needSeperator === true) {
|
20781 | this._createSeperator(1);
|
20782 | } else {
|
20783 | needSeperator = true;
|
20784 | }
|
20785 | this._createAddEdgeButton(locale);
|
20786 | }
|
20787 |
|
20788 | if (
|
20789 | selectedNodeCount === 1 &&
|
20790 | typeof this.options.editNode === "function"
|
20791 | ) {
|
20792 | if (needSeperator === true) {
|
20793 | this._createSeperator(2);
|
20794 | } else {
|
20795 | needSeperator = true;
|
20796 | }
|
20797 | this._createEditNodeButton(locale);
|
20798 | } else if (
|
20799 | selectedEdgeCount === 1 &&
|
20800 | selectedNodeCount === 0 &&
|
20801 | this.options.editEdge !== false
|
20802 | ) {
|
20803 | if (needSeperator === true) {
|
20804 | this._createSeperator(3);
|
20805 | } else {
|
20806 | needSeperator = true;
|
20807 | }
|
20808 | this._createEditEdgeButton(locale);
|
20809 | }
|
20810 |
|
20811 |
|
20812 | if (selectedTotalCount !== 0) {
|
20813 | if (selectedNodeCount > 0 && this.options.deleteNode !== false) {
|
20814 | if (needSeperator === true) {
|
20815 | this._createSeperator(4);
|
20816 | }
|
20817 | this._createDeleteButton(locale);
|
20818 | } else if (
|
20819 | selectedNodeCount === 0 &&
|
20820 | this.options.deleteEdge !== false
|
20821 | ) {
|
20822 | if (needSeperator === true) {
|
20823 | this._createSeperator(4);
|
20824 | }
|
20825 | this._createDeleteButton(locale);
|
20826 | }
|
20827 | }
|
20828 |
|
20829 |
|
20830 | this._bindElementEvents(this.closeDiv, this.toggleEditMode.bind(this));
|
20831 |
|
20832 |
|
20833 | this._temporaryBindEvent(
|
20834 | "select",
|
20835 | this.showManipulatorToolbar.bind(this)
|
20836 | );
|
20837 | }
|
20838 |
|
20839 |
|
20840 | this.body.emitter.emit("_redraw");
|
20841 | }
|
20842 |
|
20843 | |
20844 |
|
20845 |
|
20846 | addNodeMode() {
|
20847 |
|
20848 | if (this.editMode !== true) {
|
20849 | this.enableEditMode();
|
20850 | }
|
20851 |
|
20852 |
|
20853 | this._clean();
|
20854 |
|
20855 | this.inMode = "addNode";
|
20856 | if (this.guiEnabled === true) {
|
20857 | const locale = this.options.locales[this.options.locale];
|
20858 | this.manipulationDOM = {};
|
20859 | this._createBackButton(locale);
|
20860 | this._createSeperator();
|
20861 | this._createDescription(
|
20862 | locale["addDescription"] || this.options.locales["en"]["addDescription"]
|
20863 | );
|
20864 |
|
20865 |
|
20866 | this._bindElementEvents(this.closeDiv, this.toggleEditMode.bind(this));
|
20867 | }
|
20868 |
|
20869 | this._temporaryBindEvent("click", this._performAddNode.bind(this));
|
20870 | }
|
20871 |
|
20872 | |
20873 |
|
20874 |
|
20875 | editNode() {
|
20876 |
|
20877 | if (this.editMode !== true) {
|
20878 | this.enableEditMode();
|
20879 | }
|
20880 |
|
20881 |
|
20882 | this._clean();
|
20883 | const node = this.selectionHandler.getSelectedNodes()[0];
|
20884 | if (node !== undefined) {
|
20885 | this.inMode = "editNode";
|
20886 | if (typeof this.options.editNode === "function") {
|
20887 | if (node.isCluster !== true) {
|
20888 | const data = deepExtend({}, node.options, false);
|
20889 | data.x = node.x;
|
20890 | data.y = node.y;
|
20891 |
|
20892 | if (this.options.editNode.length === 2) {
|
20893 | this.options.editNode(data, (finalizedData) => {
|
20894 | if (
|
20895 | finalizedData !== null &&
|
20896 | finalizedData !== undefined &&
|
20897 | this.inMode === "editNode"
|
20898 | ) {
|
20899 |
|
20900 | this.body.data.nodes.getDataSet().update(finalizedData);
|
20901 | }
|
20902 | this.showManipulatorToolbar();
|
20903 | });
|
20904 | } else {
|
20905 | throw new Error(
|
20906 | "The function for edit does not support two arguments (data, callback)"
|
20907 | );
|
20908 | }
|
20909 | } else {
|
20910 | alert(
|
20911 | this.options.locales[this.options.locale]["editClusterError"] ||
|
20912 | this.options.locales["en"]["editClusterError"]
|
20913 | );
|
20914 | }
|
20915 | } else {
|
20916 | throw new Error(
|
20917 | "No function has been configured to handle the editing of nodes."
|
20918 | );
|
20919 | }
|
20920 | } else {
|
20921 | this.showManipulatorToolbar();
|
20922 | }
|
20923 | }
|
20924 |
|
20925 | |
20926 |
|
20927 |
|
20928 | addEdgeMode() {
|
20929 |
|
20930 | if (this.editMode !== true) {
|
20931 | this.enableEditMode();
|
20932 | }
|
20933 |
|
20934 |
|
20935 | this._clean();
|
20936 |
|
20937 | this.inMode = "addEdge";
|
20938 | if (this.guiEnabled === true) {
|
20939 | const locale = this.options.locales[this.options.locale];
|
20940 | this.manipulationDOM = {};
|
20941 | this._createBackButton(locale);
|
20942 | this._createSeperator();
|
20943 | this._createDescription(
|
20944 | locale["edgeDescription"] ||
|
20945 | this.options.locales["en"]["edgeDescription"]
|
20946 | );
|
20947 |
|
20948 |
|
20949 | this._bindElementEvents(this.closeDiv, this.toggleEditMode.bind(this));
|
20950 | }
|
20951 |
|
20952 |
|
20953 | this._temporaryBindUI("onTouch", this._handleConnect.bind(this));
|
20954 | this._temporaryBindUI("onDragEnd", this._finishConnect.bind(this));
|
20955 | this._temporaryBindUI("onDrag", this._dragControlNode.bind(this));
|
20956 | this._temporaryBindUI("onRelease", this._finishConnect.bind(this));
|
20957 | this._temporaryBindUI("onDragStart", this._dragStartEdge.bind(this));
|
20958 | this._temporaryBindUI("onHold", () => {});
|
20959 | }
|
20960 |
|
20961 | |
20962 |
|
20963 |
|
20964 | editEdgeMode() {
|
20965 |
|
20966 | if (this.editMode !== true) {
|
20967 | this.enableEditMode();
|
20968 | }
|
20969 |
|
20970 |
|
20971 | this._clean();
|
20972 |
|
20973 | this.inMode = "editEdge";
|
20974 | if (
|
20975 | typeof this.options.editEdge === "object" &&
|
20976 | typeof this.options.editEdge.editWithoutDrag === "function"
|
20977 | ) {
|
20978 | this.edgeBeingEditedId = this.selectionHandler.getSelectedEdgeIds()[0];
|
20979 | if (this.edgeBeingEditedId !== undefined) {
|
20980 | const edge = this.body.edges[this.edgeBeingEditedId];
|
20981 | this._performEditEdge(edge.from.id, edge.to.id);
|
20982 | return;
|
20983 | }
|
20984 | }
|
20985 | if (this.guiEnabled === true) {
|
20986 | const locale = this.options.locales[this.options.locale];
|
20987 | this.manipulationDOM = {};
|
20988 | this._createBackButton(locale);
|
20989 | this._createSeperator();
|
20990 | this._createDescription(
|
20991 | locale["editEdgeDescription"] ||
|
20992 | this.options.locales["en"]["editEdgeDescription"]
|
20993 | );
|
20994 |
|
20995 |
|
20996 | this._bindElementEvents(this.closeDiv, this.toggleEditMode.bind(this));
|
20997 | }
|
20998 |
|
20999 | this.edgeBeingEditedId = this.selectionHandler.getSelectedEdgeIds()[0];
|
21000 | if (this.edgeBeingEditedId !== undefined) {
|
21001 | const edge = this.body.edges[this.edgeBeingEditedId];
|
21002 |
|
21003 |
|
21004 | const controlNodeFrom = this._getNewTargetNode(edge.from.x, edge.from.y);
|
21005 | const controlNodeTo = this._getNewTargetNode(edge.to.x, edge.to.y);
|
21006 |
|
21007 | this.temporaryIds.nodes.push(controlNodeFrom.id);
|
21008 | this.temporaryIds.nodes.push(controlNodeTo.id);
|
21009 |
|
21010 | this.body.nodes[controlNodeFrom.id] = controlNodeFrom;
|
21011 | this.body.nodeIndices.push(controlNodeFrom.id);
|
21012 | this.body.nodes[controlNodeTo.id] = controlNodeTo;
|
21013 | this.body.nodeIndices.push(controlNodeTo.id);
|
21014 |
|
21015 |
|
21016 | this._temporaryBindUI("onTouch", this._controlNodeTouch.bind(this));
|
21017 | this._temporaryBindUI("onTap", () => {});
|
21018 | this._temporaryBindUI("onHold", () => {});
|
21019 | this._temporaryBindUI(
|
21020 | "onDragStart",
|
21021 | this._controlNodeDragStart.bind(this)
|
21022 | );
|
21023 | this._temporaryBindUI("onDrag", this._controlNodeDrag.bind(this));
|
21024 | this._temporaryBindUI("onDragEnd", this._controlNodeDragEnd.bind(this));
|
21025 | this._temporaryBindUI("onMouseMove", () => {});
|
21026 |
|
21027 |
|
21028 |
|
21029 | this._temporaryBindEvent("beforeDrawing", (ctx) => {
|
21030 | const positions = edge.edgeType.findBorderPositions(ctx);
|
21031 | if (controlNodeFrom.selected === false) {
|
21032 | controlNodeFrom.x = positions.from.x;
|
21033 | controlNodeFrom.y = positions.from.y;
|
21034 | }
|
21035 | if (controlNodeTo.selected === false) {
|
21036 | controlNodeTo.x = positions.to.x;
|
21037 | controlNodeTo.y = positions.to.y;
|
21038 | }
|
21039 | });
|
21040 |
|
21041 | this.body.emitter.emit("_redraw");
|
21042 | } else {
|
21043 | this.showManipulatorToolbar();
|
21044 | }
|
21045 | }
|
21046 |
|
21047 | |
21048 |
|
21049 |
|
21050 | deleteSelected() {
|
21051 |
|
21052 | if (this.editMode !== true) {
|
21053 | this.enableEditMode();
|
21054 | }
|
21055 |
|
21056 |
|
21057 | this._clean();
|
21058 |
|
21059 | this.inMode = "delete";
|
21060 | const selectedNodes = this.selectionHandler.getSelectedNodeIds();
|
21061 | const selectedEdges = this.selectionHandler.getSelectedEdgeIds();
|
21062 | let deleteFunction = undefined;
|
21063 | if (selectedNodes.length > 0) {
|
21064 | for (let i = 0; i < selectedNodes.length; i++) {
|
21065 | if (this.body.nodes[selectedNodes[i]].isCluster === true) {
|
21066 | alert(
|
21067 | this.options.locales[this.options.locale]["deleteClusterError"] ||
|
21068 | this.options.locales["en"]["deleteClusterError"]
|
21069 | );
|
21070 | return;
|
21071 | }
|
21072 | }
|
21073 |
|
21074 | if (typeof this.options.deleteNode === "function") {
|
21075 | deleteFunction = this.options.deleteNode;
|
21076 | }
|
21077 | } else if (selectedEdges.length > 0) {
|
21078 | if (typeof this.options.deleteEdge === "function") {
|
21079 | deleteFunction = this.options.deleteEdge;
|
21080 | }
|
21081 | }
|
21082 |
|
21083 | if (typeof deleteFunction === "function") {
|
21084 | const data = { nodes: selectedNodes, edges: selectedEdges };
|
21085 | if (deleteFunction.length === 2) {
|
21086 | deleteFunction(data, (finalizedData) => {
|
21087 | if (
|
21088 | finalizedData !== null &&
|
21089 | finalizedData !== undefined &&
|
21090 | this.inMode === "delete"
|
21091 | ) {
|
21092 |
|
21093 | this.body.data.edges.getDataSet().remove(finalizedData.edges);
|
21094 | this.body.data.nodes.getDataSet().remove(finalizedData.nodes);
|
21095 | this.body.emitter.emit("startSimulation");
|
21096 | this.showManipulatorToolbar();
|
21097 | } else {
|
21098 | this.body.emitter.emit("startSimulation");
|
21099 | this.showManipulatorToolbar();
|
21100 | }
|
21101 | });
|
21102 | } else {
|
21103 | throw new Error(
|
21104 | "The function for delete does not support two arguments (data, callback)"
|
21105 | );
|
21106 | }
|
21107 | } else {
|
21108 | this.body.data.edges.getDataSet().remove(selectedEdges);
|
21109 | this.body.data.nodes.getDataSet().remove(selectedNodes);
|
21110 | this.body.emitter.emit("startSimulation");
|
21111 | this.showManipulatorToolbar();
|
21112 | }
|
21113 | }
|
21114 |
|
21115 |
|
21116 |
|
21117 | |
21118 |
|
21119 |
|
21120 |
|
21121 |
|
21122 | _setup() {
|
21123 | if (this.options.enabled === true) {
|
21124 |
|
21125 | this.guiEnabled = true;
|
21126 |
|
21127 | this._createWrappers();
|
21128 | if (this.editMode === false) {
|
21129 | this._createEditButton();
|
21130 | } else {
|
21131 | this.showManipulatorToolbar();
|
21132 | }
|
21133 | } else {
|
21134 | this._removeManipulationDOM();
|
21135 |
|
21136 |
|
21137 | this.guiEnabled = false;
|
21138 | }
|
21139 | }
|
21140 |
|
21141 | |
21142 |
|
21143 |
|
21144 |
|
21145 |
|
21146 | _createWrappers() {
|
21147 |
|
21148 | if (this.manipulationDiv === undefined) {
|
21149 | this.manipulationDiv = document.createElement("div");
|
21150 | this.manipulationDiv.className = "vis-manipulation";
|
21151 | if (this.editMode === true) {
|
21152 | this.manipulationDiv.style.display = "block";
|
21153 | } else {
|
21154 | this.manipulationDiv.style.display = "none";
|
21155 | }
|
21156 | this.canvas.frame.appendChild(this.manipulationDiv);
|
21157 | }
|
21158 |
|
21159 |
|
21160 | if (this.editModeDiv === undefined) {
|
21161 | this.editModeDiv = document.createElement("div");
|
21162 | this.editModeDiv.className = "vis-edit-mode";
|
21163 | if (this.editMode === true) {
|
21164 | this.editModeDiv.style.display = "none";
|
21165 | } else {
|
21166 | this.editModeDiv.style.display = "block";
|
21167 | }
|
21168 | this.canvas.frame.appendChild(this.editModeDiv);
|
21169 | }
|
21170 |
|
21171 |
|
21172 | if (this.closeDiv === undefined) {
|
21173 | this.closeDiv = document.createElement("button");
|
21174 | this.closeDiv.className = "vis-close";
|
21175 | this.closeDiv.setAttribute(
|
21176 | "aria-label",
|
21177 | this.options.locales[this.options.locale]?.["close"] ??
|
21178 | this.options.locales["en"]["close"]
|
21179 | );
|
21180 | this.closeDiv.style.display = this.manipulationDiv.style.display;
|
21181 | this.canvas.frame.appendChild(this.closeDiv);
|
21182 | }
|
21183 | }
|
21184 |
|
21185 | |
21186 |
|
21187 |
|
21188 |
|
21189 |
|
21190 |
|
21191 |
|
21192 |
|
21193 | _getNewTargetNode(x, y) {
|
21194 | const controlNodeStyle = deepExtend({}, this.options.controlNodeStyle);
|
21195 |
|
21196 | controlNodeStyle.id = "targetNode" + v4();
|
21197 | controlNodeStyle.hidden = false;
|
21198 | controlNodeStyle.physics = false;
|
21199 | controlNodeStyle.x = x;
|
21200 | controlNodeStyle.y = y;
|
21201 |
|
21202 |
|
21203 | const node = this.body.functions.createNode(controlNodeStyle);
|
21204 | node.shape.boundingBox = { left: x, right: x, top: y, bottom: y };
|
21205 |
|
21206 | return node;
|
21207 | }
|
21208 |
|
21209 | |
21210 |
|
21211 |
|
21212 | _createEditButton() {
|
21213 |
|
21214 | this._clean();
|
21215 |
|
21216 |
|
21217 | this.manipulationDOM = {};
|
21218 |
|
21219 |
|
21220 | recursiveDOMDelete(this.editModeDiv);
|
21221 |
|
21222 |
|
21223 | const locale = this.options.locales[this.options.locale];
|
21224 | const button = this._createButton(
|
21225 | "editMode",
|
21226 | "vis-edit vis-edit-mode",
|
21227 | locale["edit"] || this.options.locales["en"]["edit"]
|
21228 | );
|
21229 | this.editModeDiv.appendChild(button);
|
21230 |
|
21231 |
|
21232 | this._bindElementEvents(button, this.toggleEditMode.bind(this));
|
21233 | }
|
21234 |
|
21235 | |
21236 |
|
21237 |
|
21238 |
|
21239 |
|
21240 | _clean() {
|
21241 |
|
21242 | this.inMode = false;
|
21243 |
|
21244 |
|
21245 | if (this.guiEnabled === true) {
|
21246 | recursiveDOMDelete(this.editModeDiv);
|
21247 | recursiveDOMDelete(this.manipulationDiv);
|
21248 |
|
21249 |
|
21250 | this._cleanupDOMEventListeners();
|
21251 | }
|
21252 |
|
21253 |
|
21254 | this._cleanupTemporaryNodesAndEdges();
|
21255 |
|
21256 |
|
21257 | this._unbindTemporaryUIs();
|
21258 |
|
21259 |
|
21260 | this._unbindTemporaryEvents();
|
21261 |
|
21262 |
|
21263 | this.body.emitter.emit("restorePhysics");
|
21264 | }
|
21265 |
|
21266 | |
21267 |
|
21268 |
|
21269 |
|
21270 |
|
21271 | _cleanupDOMEventListeners() {
|
21272 |
|
21273 | for (const callback of this._domEventListenerCleanupQueue.splice(0)) {
|
21274 | callback();
|
21275 | }
|
21276 | }
|
21277 |
|
21278 | |
21279 |
|
21280 |
|
21281 |
|
21282 |
|
21283 | _removeManipulationDOM() {
|
21284 |
|
21285 | this._clean();
|
21286 |
|
21287 |
|
21288 | recursiveDOMDelete(this.manipulationDiv);
|
21289 | recursiveDOMDelete(this.editModeDiv);
|
21290 | recursiveDOMDelete(this.closeDiv);
|
21291 |
|
21292 |
|
21293 | if (this.manipulationDiv) {
|
21294 | this.canvas.frame.removeChild(this.manipulationDiv);
|
21295 | }
|
21296 | if (this.editModeDiv) {
|
21297 | this.canvas.frame.removeChild(this.editModeDiv);
|
21298 | }
|
21299 | if (this.closeDiv) {
|
21300 | this.canvas.frame.removeChild(this.closeDiv);
|
21301 | }
|
21302 |
|
21303 |
|
21304 | this.manipulationDiv = undefined;
|
21305 | this.editModeDiv = undefined;
|
21306 | this.closeDiv = undefined;
|
21307 | }
|
21308 |
|
21309 | |
21310 |
|
21311 |
|
21312 |
|
21313 |
|
21314 |
|
21315 | _createSeperator(index = 1) {
|
21316 | this.manipulationDOM["seperatorLineDiv" + index] =
|
21317 | document.createElement("div");
|
21318 | this.manipulationDOM["seperatorLineDiv" + index].className =
|
21319 | "vis-separator-line";
|
21320 | this.manipulationDiv.appendChild(
|
21321 | this.manipulationDOM["seperatorLineDiv" + index]
|
21322 | );
|
21323 | }
|
21324 |
|
21325 |
|
21326 |
|
21327 | |
21328 |
|
21329 |
|
21330 |
|
21331 |
|
21332 | _createAddNodeButton(locale) {
|
21333 | const button = this._createButton(
|
21334 | "addNode",
|
21335 | "vis-add",
|
21336 | locale["addNode"] || this.options.locales["en"]["addNode"]
|
21337 | );
|
21338 | this.manipulationDiv.appendChild(button);
|
21339 | this._bindElementEvents(button, this.addNodeMode.bind(this));
|
21340 | }
|
21341 |
|
21342 | |
21343 |
|
21344 |
|
21345 |
|
21346 |
|
21347 | _createAddEdgeButton(locale) {
|
21348 | const button = this._createButton(
|
21349 | "addEdge",
|
21350 | "vis-connect",
|
21351 | locale["addEdge"] || this.options.locales["en"]["addEdge"]
|
21352 | );
|
21353 | this.manipulationDiv.appendChild(button);
|
21354 | this._bindElementEvents(button, this.addEdgeMode.bind(this));
|
21355 | }
|
21356 |
|
21357 | |
21358 |
|
21359 |
|
21360 |
|
21361 |
|
21362 | _createEditNodeButton(locale) {
|
21363 | const button = this._createButton(
|
21364 | "editNode",
|
21365 | "vis-edit",
|
21366 | locale["editNode"] || this.options.locales["en"]["editNode"]
|
21367 | );
|
21368 | this.manipulationDiv.appendChild(button);
|
21369 | this._bindElementEvents(button, this.editNode.bind(this));
|
21370 | }
|
21371 |
|
21372 | |
21373 |
|
21374 |
|
21375 |
|
21376 |
|
21377 | _createEditEdgeButton(locale) {
|
21378 | const button = this._createButton(
|
21379 | "editEdge",
|
21380 | "vis-edit",
|
21381 | locale["editEdge"] || this.options.locales["en"]["editEdge"]
|
21382 | );
|
21383 | this.manipulationDiv.appendChild(button);
|
21384 | this._bindElementEvents(button, this.editEdgeMode.bind(this));
|
21385 | }
|
21386 |
|
21387 | |
21388 |
|
21389 |
|
21390 |
|
21391 |
|
21392 | _createDeleteButton(locale) {
|
21393 | let deleteBtnClass;
|
21394 | if (this.options.rtl) {
|
21395 | deleteBtnClass = "vis-delete-rtl";
|
21396 | } else {
|
21397 | deleteBtnClass = "vis-delete";
|
21398 | }
|
21399 | const button = this._createButton(
|
21400 | "delete",
|
21401 | deleteBtnClass,
|
21402 | locale["del"] || this.options.locales["en"]["del"]
|
21403 | );
|
21404 | this.manipulationDiv.appendChild(button);
|
21405 | this._bindElementEvents(button, this.deleteSelected.bind(this));
|
21406 | }
|
21407 |
|
21408 | |
21409 |
|
21410 |
|
21411 |
|
21412 |
|
21413 | _createBackButton(locale) {
|
21414 | const button = this._createButton(
|
21415 | "back",
|
21416 | "vis-back",
|
21417 | locale["back"] || this.options.locales["en"]["back"]
|
21418 | );
|
21419 | this.manipulationDiv.appendChild(button);
|
21420 | this._bindElementEvents(button, this.showManipulatorToolbar.bind(this));
|
21421 | }
|
21422 |
|
21423 | |
21424 |
|
21425 |
|
21426 |
|
21427 |
|
21428 |
|
21429 |
|
21430 |
|
21431 |
|
21432 | _createButton(id, className, label, labelClassName = "vis-label") {
|
21433 | this.manipulationDOM[id + "Div"] = document.createElement("button");
|
21434 | this.manipulationDOM[id + "Div"].className = "vis-button " + className;
|
21435 | this.manipulationDOM[id + "Label"] = document.createElement("div");
|
21436 | this.manipulationDOM[id + "Label"].className = labelClassName;
|
21437 | this.manipulationDOM[id + "Label"].innerText = label;
|
21438 | this.manipulationDOM[id + "Div"].appendChild(
|
21439 | this.manipulationDOM[id + "Label"]
|
21440 | );
|
21441 | return this.manipulationDOM[id + "Div"];
|
21442 | }
|
21443 |
|
21444 | |
21445 |
|
21446 |
|
21447 |
|
21448 |
|
21449 | _createDescription(label) {
|
21450 | this.manipulationDOM["descriptionLabel"] = document.createElement("div");
|
21451 | this.manipulationDOM["descriptionLabel"].className = "vis-none";
|
21452 | this.manipulationDOM["descriptionLabel"].innerText = label;
|
21453 | this.manipulationDiv.appendChild(this.manipulationDOM["descriptionLabel"]);
|
21454 | }
|
21455 |
|
21456 |
|
21457 |
|
21458 | |
21459 |
|
21460 |
|
21461 |
|
21462 |
|
21463 |
|
21464 |
|
21465 | _temporaryBindEvent(event, newFunction) {
|
21466 | this.temporaryEventFunctions.push({
|
21467 | event: event,
|
21468 | boundFunction: newFunction,
|
21469 | });
|
21470 | this.body.emitter.on(event, newFunction);
|
21471 | }
|
21472 |
|
21473 | |
21474 |
|
21475 |
|
21476 |
|
21477 |
|
21478 |
|
21479 |
|
21480 | _temporaryBindUI(UIfunctionName, newFunction) {
|
21481 | if (this.body.eventListeners[UIfunctionName] !== undefined) {
|
21482 | this.temporaryUIFunctions[UIfunctionName] =
|
21483 | this.body.eventListeners[UIfunctionName];
|
21484 | this.body.eventListeners[UIfunctionName] = newFunction;
|
21485 | } else {
|
21486 | throw new Error(
|
21487 | "This UI function does not exist. Typo? You tried: " +
|
21488 | UIfunctionName +
|
21489 | " possible are: " +
|
21490 | JSON.stringify(Object.keys(this.body.eventListeners))
|
21491 | );
|
21492 | }
|
21493 | }
|
21494 |
|
21495 | |
21496 |
|
21497 |
|
21498 |
|
21499 |
|
21500 | _unbindTemporaryUIs() {
|
21501 | for (const functionName in this.temporaryUIFunctions) {
|
21502 | if (
|
21503 | Object.prototype.hasOwnProperty.call(
|
21504 | this.temporaryUIFunctions,
|
21505 | functionName
|
21506 | )
|
21507 | ) {
|
21508 | this.body.eventListeners[functionName] =
|
21509 | this.temporaryUIFunctions[functionName];
|
21510 | delete this.temporaryUIFunctions[functionName];
|
21511 | }
|
21512 | }
|
21513 | this.temporaryUIFunctions = {};
|
21514 | }
|
21515 |
|
21516 | |
21517 |
|
21518 |
|
21519 |
|
21520 |
|
21521 | _unbindTemporaryEvents() {
|
21522 | for (let i = 0; i < this.temporaryEventFunctions.length; i++) {
|
21523 | const eventName = this.temporaryEventFunctions[i].event;
|
21524 | const boundFunction = this.temporaryEventFunctions[i].boundFunction;
|
21525 | this.body.emitter.off(eventName, boundFunction);
|
21526 | }
|
21527 | this.temporaryEventFunctions = [];
|
21528 | }
|
21529 |
|
21530 | |
21531 |
|
21532 |
|
21533 |
|
21534 |
|
21535 |
|
21536 | _bindElementEvents(domElement, boundFunction) {
|
21537 |
|
21538 | const hammer = new Hammer(domElement, {});
|
21539 | onTouch(hammer, boundFunction);
|
21540 | this._domEventListenerCleanupQueue.push(() => {
|
21541 | hammer.destroy();
|
21542 | });
|
21543 |
|
21544 |
|
21545 | const keyupListener = ({ keyCode, key }) => {
|
21546 | if (key === "Enter" || key === " " || keyCode === 13 || keyCode === 32) {
|
21547 | boundFunction();
|
21548 | }
|
21549 | };
|
21550 | domElement.addEventListener("keyup", keyupListener, false);
|
21551 | this._domEventListenerCleanupQueue.push(() => {
|
21552 | domElement.removeEventListener("keyup", keyupListener, false);
|
21553 | });
|
21554 | }
|
21555 |
|
21556 | |
21557 |
|
21558 |
|
21559 |
|
21560 |
|
21561 | _cleanupTemporaryNodesAndEdges() {
|
21562 |
|
21563 | for (let i = 0; i < this.temporaryIds.edges.length; i++) {
|
21564 | this.body.edges[this.temporaryIds.edges[i]].disconnect();
|
21565 | delete this.body.edges[this.temporaryIds.edges[i]];
|
21566 | const indexTempEdge = this.body.edgeIndices.indexOf(
|
21567 | this.temporaryIds.edges[i]
|
21568 | );
|
21569 | if (indexTempEdge !== -1) {
|
21570 | this.body.edgeIndices.splice(indexTempEdge, 1);
|
21571 | }
|
21572 | }
|
21573 |
|
21574 |
|
21575 | for (let i = 0; i < this.temporaryIds.nodes.length; i++) {
|
21576 | delete this.body.nodes[this.temporaryIds.nodes[i]];
|
21577 | const indexTempNode = this.body.nodeIndices.indexOf(
|
21578 | this.temporaryIds.nodes[i]
|
21579 | );
|
21580 | if (indexTempNode !== -1) {
|
21581 | this.body.nodeIndices.splice(indexTempNode, 1);
|
21582 | }
|
21583 | }
|
21584 |
|
21585 | this.temporaryIds = { nodes: [], edges: [] };
|
21586 | }
|
21587 |
|
21588 |
|
21589 |
|
21590 | |
21591 |
|
21592 |
|
21593 |
|
21594 |
|
21595 |
|
21596 | _controlNodeTouch(event) {
|
21597 | this.selectionHandler.unselectAll();
|
21598 | this.lastTouch = this.body.functions.getPointer(event.center);
|
21599 | this.lastTouch.translation = Object.assign({}, this.body.view.translation);
|
21600 | }
|
21601 |
|
21602 | |
21603 |
|
21604 |
|
21605 |
|
21606 |
|
21607 | _controlNodeDragStart() {
|
21608 | const pointer = this.lastTouch;
|
21609 | const pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
|
21610 | const from = this.body.nodes[this.temporaryIds.nodes[0]];
|
21611 | const to = this.body.nodes[this.temporaryIds.nodes[1]];
|
21612 | const edge = this.body.edges[this.edgeBeingEditedId];
|
21613 | this.selectedControlNode = undefined;
|
21614 |
|
21615 | const fromSelect = from.isOverlappingWith(pointerObj);
|
21616 | const toSelect = to.isOverlappingWith(pointerObj);
|
21617 |
|
21618 | if (fromSelect === true) {
|
21619 | this.selectedControlNode = from;
|
21620 | edge.edgeType.from = from;
|
21621 | } else if (toSelect === true) {
|
21622 | this.selectedControlNode = to;
|
21623 | edge.edgeType.to = to;
|
21624 | }
|
21625 |
|
21626 |
|
21627 | if (this.selectedControlNode !== undefined) {
|
21628 | this.selectionHandler.selectObject(this.selectedControlNode);
|
21629 | }
|
21630 |
|
21631 | this.body.emitter.emit("_redraw");
|
21632 | }
|
21633 |
|
21634 | |
21635 |
|
21636 |
|
21637 |
|
21638 |
|
21639 |
|
21640 | _controlNodeDrag(event) {
|
21641 | this.body.emitter.emit("disablePhysics");
|
21642 | const pointer = this.body.functions.getPointer(event.center);
|
21643 | const pos = this.canvas.DOMtoCanvas(pointer);
|
21644 | if (this.selectedControlNode !== undefined) {
|
21645 | this.selectedControlNode.x = pos.x;
|
21646 | this.selectedControlNode.y = pos.y;
|
21647 | } else {
|
21648 | this.interactionHandler.onDrag(event);
|
21649 | }
|
21650 | this.body.emitter.emit("_redraw");
|
21651 | }
|
21652 |
|
21653 | |
21654 |
|
21655 |
|
21656 |
|
21657 |
|
21658 |
|
21659 | _controlNodeDragEnd(event) {
|
21660 | const pointer = this.body.functions.getPointer(event.center);
|
21661 | const pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
|
21662 | const edge = this.body.edges[this.edgeBeingEditedId];
|
21663 |
|
21664 | if (this.selectedControlNode === undefined) {
|
21665 | return;
|
21666 | }
|
21667 |
|
21668 |
|
21669 | this.selectionHandler.unselectAll();
|
21670 | const overlappingNodeIds =
|
21671 | this.selectionHandler._getAllNodesOverlappingWith(pointerObj);
|
21672 | let node = undefined;
|
21673 | for (let i = overlappingNodeIds.length - 1; i >= 0; i--) {
|
21674 | if (overlappingNodeIds[i] !== this.selectedControlNode.id) {
|
21675 | node = this.body.nodes[overlappingNodeIds[i]];
|
21676 | break;
|
21677 | }
|
21678 | }
|
21679 |
|
21680 | if (node !== undefined && this.selectedControlNode !== undefined) {
|
21681 | if (node.isCluster === true) {
|
21682 | alert(
|
21683 | this.options.locales[this.options.locale]["createEdgeError"] ||
|
21684 | this.options.locales["en"]["createEdgeError"]
|
21685 | );
|
21686 | } else {
|
21687 | const from = this.body.nodes[this.temporaryIds.nodes[0]];
|
21688 | if (this.selectedControlNode.id === from.id) {
|
21689 | this._performEditEdge(node.id, edge.to.id);
|
21690 | } else {
|
21691 | this._performEditEdge(edge.from.id, node.id);
|
21692 | }
|
21693 | }
|
21694 | } else {
|
21695 | edge.updateEdgeType();
|
21696 | this.body.emitter.emit("restorePhysics");
|
21697 | }
|
21698 |
|
21699 | this.body.emitter.emit("_redraw");
|
21700 | }
|
21701 |
|
21702 |
|
21703 |
|
21704 |
|
21705 | |
21706 |
|
21707 |
|
21708 |
|
21709 |
|
21710 |
|
21711 |
|
21712 | _handleConnect(event) {
|
21713 |
|
21714 | if (new Date().valueOf() - this.touchTime > 100) {
|
21715 | this.lastTouch = this.body.functions.getPointer(event.center);
|
21716 | this.lastTouch.translation = Object.assign(
|
21717 | {},
|
21718 | this.body.view.translation
|
21719 | );
|
21720 |
|
21721 | this.interactionHandler.drag.pointer = this.lastTouch;
|
21722 | this.interactionHandler.drag.translation = this.lastTouch.translation;
|
21723 |
|
21724 | const pointer = this.lastTouch;
|
21725 | const node = this.selectionHandler.getNodeAt(pointer);
|
21726 |
|
21727 | if (node !== undefined) {
|
21728 | if (node.isCluster === true) {
|
21729 | alert(
|
21730 | this.options.locales[this.options.locale]["createEdgeError"] ||
|
21731 | this.options.locales["en"]["createEdgeError"]
|
21732 | );
|
21733 | } else {
|
21734 |
|
21735 | const targetNode = this._getNewTargetNode(node.x, node.y);
|
21736 | this.body.nodes[targetNode.id] = targetNode;
|
21737 | this.body.nodeIndices.push(targetNode.id);
|
21738 |
|
21739 |
|
21740 | const connectionEdge = this.body.functions.createEdge({
|
21741 | id: "connectionEdge" + v4(),
|
21742 | from: node.id,
|
21743 | to: targetNode.id,
|
21744 | physics: false,
|
21745 | smooth: {
|
21746 | enabled: true,
|
21747 | type: "continuous",
|
21748 | roundness: 0.5,
|
21749 | },
|
21750 | });
|
21751 | this.body.edges[connectionEdge.id] = connectionEdge;
|
21752 | this.body.edgeIndices.push(connectionEdge.id);
|
21753 |
|
21754 | this.temporaryIds.nodes.push(targetNode.id);
|
21755 | this.temporaryIds.edges.push(connectionEdge.id);
|
21756 | }
|
21757 | }
|
21758 | this.touchTime = new Date().valueOf();
|
21759 | }
|
21760 | }
|
21761 |
|
21762 | |
21763 |
|
21764 |
|
21765 |
|
21766 |
|
21767 | _dragControlNode(event) {
|
21768 | const pointer = this.body.functions.getPointer(event.center);
|
21769 |
|
21770 | const pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
|
21771 |
|
21772 | let connectFromId = undefined;
|
21773 | if (this.temporaryIds.edges[0] !== undefined) {
|
21774 | connectFromId = this.body.edges[this.temporaryIds.edges[0]].fromId;
|
21775 | }
|
21776 |
|
21777 |
|
21778 | const overlappingNodeIds =
|
21779 | this.selectionHandler._getAllNodesOverlappingWith(pointerObj);
|
21780 | let node = undefined;
|
21781 | for (let i = overlappingNodeIds.length - 1; i >= 0; i--) {
|
21782 |
|
21783 | if (this.temporaryIds.nodes.indexOf(overlappingNodeIds[i]) === -1) {
|
21784 | node = this.body.nodes[overlappingNodeIds[i]];
|
21785 | break;
|
21786 | }
|
21787 | }
|
21788 |
|
21789 | event.controlEdge = { from: connectFromId, to: node ? node.id : undefined };
|
21790 | this.selectionHandler.generateClickEvent(
|
21791 | "controlNodeDragging",
|
21792 | event,
|
21793 | pointer
|
21794 | );
|
21795 |
|
21796 | if (this.temporaryIds.nodes[0] !== undefined) {
|
21797 | const targetNode = this.body.nodes[this.temporaryIds.nodes[0]];
|
21798 | targetNode.x = this.canvas._XconvertDOMtoCanvas(pointer.x);
|
21799 | targetNode.y = this.canvas._YconvertDOMtoCanvas(pointer.y);
|
21800 | this.body.emitter.emit("_redraw");
|
21801 | } else {
|
21802 | this.interactionHandler.onDrag(event);
|
21803 | }
|
21804 | }
|
21805 |
|
21806 | |
21807 |
|
21808 |
|
21809 |
|
21810 |
|
21811 |
|
21812 | _finishConnect(event) {
|
21813 | const pointer = this.body.functions.getPointer(event.center);
|
21814 | const pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
|
21815 |
|
21816 |
|
21817 | let connectFromId = undefined;
|
21818 | if (this.temporaryIds.edges[0] !== undefined) {
|
21819 | connectFromId = this.body.edges[this.temporaryIds.edges[0]].fromId;
|
21820 | }
|
21821 |
|
21822 |
|
21823 | const overlappingNodeIds =
|
21824 | this.selectionHandler._getAllNodesOverlappingWith(pointerObj);
|
21825 | let node = undefined;
|
21826 | for (let i = overlappingNodeIds.length - 1; i >= 0; i--) {
|
21827 |
|
21828 | if (this.temporaryIds.nodes.indexOf(overlappingNodeIds[i]) === -1) {
|
21829 | node = this.body.nodes[overlappingNodeIds[i]];
|
21830 | break;
|
21831 | }
|
21832 | }
|
21833 |
|
21834 |
|
21835 | this._cleanupTemporaryNodesAndEdges();
|
21836 |
|
21837 |
|
21838 | if (node !== undefined) {
|
21839 | if (node.isCluster === true) {
|
21840 | alert(
|
21841 | this.options.locales[this.options.locale]["createEdgeError"] ||
|
21842 | this.options.locales["en"]["createEdgeError"]
|
21843 | );
|
21844 | } else {
|
21845 | if (
|
21846 | this.body.nodes[connectFromId] !== undefined &&
|
21847 | this.body.nodes[node.id] !== undefined
|
21848 | ) {
|
21849 | this._performAddEdge(connectFromId, node.id);
|
21850 | }
|
21851 | }
|
21852 | }
|
21853 |
|
21854 | event.controlEdge = { from: connectFromId, to: node ? node.id : undefined };
|
21855 | this.selectionHandler.generateClickEvent(
|
21856 | "controlNodeDragEnd",
|
21857 | event,
|
21858 | pointer
|
21859 | );
|
21860 |
|
21861 |
|
21862 | this.body.emitter.emit("_redraw");
|
21863 | }
|
21864 |
|
21865 | |
21866 |
|
21867 |
|
21868 |
|
21869 |
|
21870 | _dragStartEdge(event) {
|
21871 | const pointer = this.lastTouch;
|
21872 | this.selectionHandler.generateClickEvent(
|
21873 | "dragStart",
|
21874 | event,
|
21875 | pointer,
|
21876 | undefined,
|
21877 | true
|
21878 | );
|
21879 | }
|
21880 |
|
21881 |
|
21882 |
|
21883 |
|
21884 |
|
21885 | |
21886 |
|
21887 |
|
21888 |
|
21889 |
|
21890 |
|
21891 | _performAddNode(clickData) {
|
21892 | const defaultData = {
|
21893 | id: v4(),
|
21894 | x: clickData.pointer.canvas.x,
|
21895 | y: clickData.pointer.canvas.y,
|
21896 | label: "new",
|
21897 | };
|
21898 |
|
21899 | if (typeof this.options.addNode === "function") {
|
21900 | if (this.options.addNode.length === 2) {
|
21901 | this.options.addNode(defaultData, (finalizedData) => {
|
21902 | if (
|
21903 | finalizedData !== null &&
|
21904 | finalizedData !== undefined &&
|
21905 | this.inMode === "addNode"
|
21906 | ) {
|
21907 |
|
21908 | this.body.data.nodes.getDataSet().add(finalizedData);
|
21909 | }
|
21910 | this.showManipulatorToolbar();
|
21911 | });
|
21912 | } else {
|
21913 | this.showManipulatorToolbar();
|
21914 | throw new Error(
|
21915 | "The function for add does not support two arguments (data,callback)"
|
21916 | );
|
21917 | }
|
21918 | } else {
|
21919 | this.body.data.nodes.getDataSet().add(defaultData);
|
21920 | this.showManipulatorToolbar();
|
21921 | }
|
21922 | }
|
21923 |
|
21924 | |
21925 |
|
21926 |
|
21927 |
|
21928 |
|
21929 |
|
21930 |
|
21931 | _performAddEdge(sourceNodeId, targetNodeId) {
|
21932 | const defaultData = { from: sourceNodeId, to: targetNodeId };
|
21933 | if (typeof this.options.addEdge === "function") {
|
21934 | if (this.options.addEdge.length === 2) {
|
21935 | this.options.addEdge(defaultData, (finalizedData) => {
|
21936 | if (
|
21937 | finalizedData !== null &&
|
21938 | finalizedData !== undefined &&
|
21939 | this.inMode === "addEdge"
|
21940 | ) {
|
21941 |
|
21942 | this.body.data.edges.getDataSet().add(finalizedData);
|
21943 | this.selectionHandler.unselectAll();
|
21944 | this.showManipulatorToolbar();
|
21945 | }
|
21946 | });
|
21947 | } else {
|
21948 | throw new Error(
|
21949 | "The function for connect does not support two arguments (data,callback)"
|
21950 | );
|
21951 | }
|
21952 | } else {
|
21953 | this.body.data.edges.getDataSet().add(defaultData);
|
21954 | this.selectionHandler.unselectAll();
|
21955 | this.showManipulatorToolbar();
|
21956 | }
|
21957 | }
|
21958 |
|
21959 | |
21960 |
|
21961 |
|
21962 |
|
21963 |
|
21964 |
|
21965 |
|
21966 | _performEditEdge(sourceNodeId, targetNodeId) {
|
21967 | const defaultData = {
|
21968 | id: this.edgeBeingEditedId,
|
21969 | from: sourceNodeId,
|
21970 | to: targetNodeId,
|
21971 | label: this.body.data.edges.get(this.edgeBeingEditedId).label,
|
21972 | };
|
21973 | let eeFunct = this.options.editEdge;
|
21974 | if (typeof eeFunct === "object") {
|
21975 | eeFunct = eeFunct.editWithoutDrag;
|
21976 | }
|
21977 | if (typeof eeFunct === "function") {
|
21978 | if (eeFunct.length === 2) {
|
21979 | eeFunct(defaultData, (finalizedData) => {
|
21980 | if (
|
21981 | finalizedData === null ||
|
21982 | finalizedData === undefined ||
|
21983 | this.inMode !== "editEdge"
|
21984 | ) {
|
21985 |
|
21986 | this.body.edges[defaultData.id].updateEdgeType();
|
21987 | this.body.emitter.emit("_redraw");
|
21988 | this.showManipulatorToolbar();
|
21989 | } else {
|
21990 | this.body.data.edges.getDataSet().update(finalizedData);
|
21991 | this.selectionHandler.unselectAll();
|
21992 | this.showManipulatorToolbar();
|
21993 | }
|
21994 | });
|
21995 | } else {
|
21996 | throw new Error(
|
21997 | "The function for edit does not support two arguments (data, callback)"
|
21998 | );
|
21999 | }
|
22000 | } else {
|
22001 | this.body.data.edges.getDataSet().update(defaultData);
|
22002 | this.selectionHandler.unselectAll();
|
22003 | this.showManipulatorToolbar();
|
22004 | }
|
22005 | }
|
22006 | }
|
22007 |
|
22008 |
|
22009 |
|
22010 |
|
22011 |
|
22012 |
|
22013 |
|
22014 |
|
22015 | const string = "string";
|
22016 | const bool = "boolean";
|
22017 | const number = "number";
|
22018 | const array = "array";
|
22019 | const object = "object";
|
22020 | const dom = "dom";
|
22021 | const any = "any";
|
22022 |
|
22023 | const endPoints = [
|
22024 | "arrow",
|
22025 | "bar",
|
22026 | "box",
|
22027 | "circle",
|
22028 | "crow",
|
22029 | "curve",
|
22030 | "diamond",
|
22031 | "image",
|
22032 | "inv_curve",
|
22033 | "inv_triangle",
|
22034 | "triangle",
|
22035 | "vee",
|
22036 | ];
|
22037 |
|
22038 | const nodeOptions = {
|
22039 | borderWidth: { number },
|
22040 | borderWidthSelected: { number, undefined: "undefined" },
|
22041 | brokenImage: { string, undefined: "undefined" },
|
22042 | chosen: {
|
22043 | label: { boolean: bool, function: "function" },
|
22044 | node: { boolean: bool, function: "function" },
|
22045 | __type__: { object, boolean: bool },
|
22046 | },
|
22047 | color: {
|
22048 | border: { string },
|
22049 | background: { string },
|
22050 | highlight: {
|
22051 | border: { string },
|
22052 | background: { string },
|
22053 | __type__: { object, string },
|
22054 | },
|
22055 | hover: {
|
22056 | border: { string },
|
22057 | background: { string },
|
22058 | __type__: { object, string },
|
22059 | },
|
22060 | __type__: { object, string },
|
22061 | },
|
22062 | opacity: { number, undefined: "undefined" },
|
22063 | fixed: {
|
22064 | x: { boolean: bool },
|
22065 | y: { boolean: bool },
|
22066 | __type__: { object, boolean: bool },
|
22067 | },
|
22068 | font: {
|
22069 | align: { string },
|
22070 | color: { string },
|
22071 | size: { number },
|
22072 | face: { string },
|
22073 | background: { string },
|
22074 | strokeWidth: { number },
|
22075 | strokeColor: { string },
|
22076 | vadjust: { number },
|
22077 | multi: { boolean: bool, string },
|
22078 | bold: {
|
22079 | color: { string },
|
22080 | size: { number },
|
22081 | face: { string },
|
22082 | mod: { string },
|
22083 | vadjust: { number },
|
22084 | __type__: { object, string },
|
22085 | },
|
22086 | boldital: {
|
22087 | color: { string },
|
22088 | size: { number },
|
22089 | face: { string },
|
22090 | mod: { string },
|
22091 | vadjust: { number },
|
22092 | __type__: { object, string },
|
22093 | },
|
22094 | ital: {
|
22095 | color: { string },
|
22096 | size: { number },
|
22097 | face: { string },
|
22098 | mod: { string },
|
22099 | vadjust: { number },
|
22100 | __type__: { object, string },
|
22101 | },
|
22102 | mono: {
|
22103 | color: { string },
|
22104 | size: { number },
|
22105 | face: { string },
|
22106 | mod: { string },
|
22107 | vadjust: { number },
|
22108 | __type__: { object, string },
|
22109 | },
|
22110 | __type__: { object, string },
|
22111 | },
|
22112 | group: { string, number, undefined: "undefined" },
|
22113 | heightConstraint: {
|
22114 | minimum: { number },
|
22115 | valign: { string },
|
22116 | __type__: { object, boolean: bool, number },
|
22117 | },
|
22118 | hidden: { boolean: bool },
|
22119 | icon: {
|
22120 | face: { string },
|
22121 | code: { string },
|
22122 | size: { number },
|
22123 | color: { string },
|
22124 | weight: { string, number },
|
22125 | __type__: { object },
|
22126 | },
|
22127 | id: { string, number },
|
22128 | image: {
|
22129 | selected: { string, undefined: "undefined" },
|
22130 | unselected: { string, undefined: "undefined" },
|
22131 | __type__: { object, string },
|
22132 | },
|
22133 | imagePadding: {
|
22134 | top: { number },
|
22135 | right: { number },
|
22136 | bottom: { number },
|
22137 | left: { number },
|
22138 | __type__: { object, number },
|
22139 | },
|
22140 | label: { string, undefined: "undefined" },
|
22141 | labelHighlightBold: { boolean: bool },
|
22142 | level: { number, undefined: "undefined" },
|
22143 | margin: {
|
22144 | top: { number },
|
22145 | right: { number },
|
22146 | bottom: { number },
|
22147 | left: { number },
|
22148 | __type__: { object, number },
|
22149 | },
|
22150 | mass: { number },
|
22151 | physics: { boolean: bool },
|
22152 | scaling: {
|
22153 | min: { number },
|
22154 | max: { number },
|
22155 | label: {
|
22156 | enabled: { boolean: bool },
|
22157 | min: { number },
|
22158 | max: { number },
|
22159 | maxVisible: { number },
|
22160 | drawThreshold: { number },
|
22161 | __type__: { object, boolean: bool },
|
22162 | },
|
22163 | customScalingFunction: { function: "function" },
|
22164 | __type__: { object },
|
22165 | },
|
22166 | shadow: {
|
22167 | enabled: { boolean: bool },
|
22168 | color: { string },
|
22169 | size: { number },
|
22170 | x: { number },
|
22171 | y: { number },
|
22172 | __type__: { object, boolean: bool },
|
22173 | },
|
22174 | shape: {
|
22175 | string: [
|
22176 | "custom",
|
22177 | "ellipse",
|
22178 | "circle",
|
22179 | "database",
|
22180 | "box",
|
22181 | "text",
|
22182 | "image",
|
22183 | "circularImage",
|
22184 | "diamond",
|
22185 | "dot",
|
22186 | "star",
|
22187 | "triangle",
|
22188 | "triangleDown",
|
22189 | "square",
|
22190 | "icon",
|
22191 | "hexagon",
|
22192 | ],
|
22193 | },
|
22194 | ctxRenderer: { function: "function" },
|
22195 | shapeProperties: {
|
22196 | borderDashes: { boolean: bool, array },
|
22197 | borderRadius: { number },
|
22198 | interpolation: { boolean: bool },
|
22199 | useImageSize: { boolean: bool },
|
22200 | useBorderWithImage: { boolean: bool },
|
22201 | coordinateOrigin: { string: ["center", "top-left"] },
|
22202 | __type__: { object },
|
22203 | },
|
22204 | size: { number },
|
22205 | title: { string, dom, undefined: "undefined" },
|
22206 | value: { number, undefined: "undefined" },
|
22207 | widthConstraint: {
|
22208 | minimum: { number },
|
22209 | maximum: { number },
|
22210 | __type__: { object, boolean: bool, number },
|
22211 | },
|
22212 | x: { number },
|
22213 | y: { number },
|
22214 | __type__: { object },
|
22215 | };
|
22216 | const allOptions = {
|
22217 | configure: {
|
22218 | enabled: { boolean: bool },
|
22219 | filter: { boolean: bool, string, array, function: "function" },
|
22220 | container: { dom },
|
22221 | showButton: { boolean: bool },
|
22222 | __type__: { object, boolean: bool, string, array, function: "function" },
|
22223 | },
|
22224 | edges: {
|
22225 | arrows: {
|
22226 | to: {
|
22227 | enabled: { boolean: bool },
|
22228 | scaleFactor: { number },
|
22229 | type: { string: endPoints },
|
22230 | imageHeight: { number },
|
22231 | imageWidth: { number },
|
22232 | src: { string },
|
22233 | __type__: { object, boolean: bool },
|
22234 | },
|
22235 | middle: {
|
22236 | enabled: { boolean: bool },
|
22237 | scaleFactor: { number },
|
22238 | type: { string: endPoints },
|
22239 | imageWidth: { number },
|
22240 | imageHeight: { number },
|
22241 | src: { string },
|
22242 | __type__: { object, boolean: bool },
|
22243 | },
|
22244 | from: {
|
22245 | enabled: { boolean: bool },
|
22246 | scaleFactor: { number },
|
22247 | type: { string: endPoints },
|
22248 | imageWidth: { number },
|
22249 | imageHeight: { number },
|
22250 | src: { string },
|
22251 | __type__: { object, boolean: bool },
|
22252 | },
|
22253 | __type__: { string: ["from", "to", "middle"], object },
|
22254 | },
|
22255 | endPointOffset: {
|
22256 | from: {
|
22257 | number: number,
|
22258 | },
|
22259 | to: {
|
22260 | number: number,
|
22261 | },
|
22262 | __type__: {
|
22263 | object: object,
|
22264 | number: number,
|
22265 | },
|
22266 | },
|
22267 | arrowStrikethrough: { boolean: bool },
|
22268 | background: {
|
22269 | enabled: { boolean: bool },
|
22270 | color: { string },
|
22271 | size: { number },
|
22272 | dashes: { boolean: bool, array },
|
22273 | __type__: { object, boolean: bool },
|
22274 | },
|
22275 | chosen: {
|
22276 | label: { boolean: bool, function: "function" },
|
22277 | edge: { boolean: bool, function: "function" },
|
22278 | __type__: { object, boolean: bool },
|
22279 | },
|
22280 | color: {
|
22281 | color: { string },
|
22282 | highlight: { string },
|
22283 | hover: { string },
|
22284 | inherit: { string: ["from", "to", "both"], boolean: bool },
|
22285 | opacity: { number },
|
22286 | __type__: { object, string },
|
22287 | },
|
22288 | dashes: { boolean: bool, array },
|
22289 | font: {
|
22290 | color: { string },
|
22291 | size: { number },
|
22292 | face: { string },
|
22293 | background: { string },
|
22294 | strokeWidth: { number },
|
22295 | strokeColor: { string },
|
22296 | align: { string: ["horizontal", "top", "middle", "bottom"] },
|
22297 | vadjust: { number },
|
22298 | multi: { boolean: bool, string },
|
22299 | bold: {
|
22300 | color: { string },
|
22301 | size: { number },
|
22302 | face: { string },
|
22303 | mod: { string },
|
22304 | vadjust: { number },
|
22305 | __type__: { object, string },
|
22306 | },
|
22307 | boldital: {
|
22308 | color: { string },
|
22309 | size: { number },
|
22310 | face: { string },
|
22311 | mod: { string },
|
22312 | vadjust: { number },
|
22313 | __type__: { object, string },
|
22314 | },
|
22315 | ital: {
|
22316 | color: { string },
|
22317 | size: { number },
|
22318 | face: { string },
|
22319 | mod: { string },
|
22320 | vadjust: { number },
|
22321 | __type__: { object, string },
|
22322 | },
|
22323 | mono: {
|
22324 | color: { string },
|
22325 | size: { number },
|
22326 | face: { string },
|
22327 | mod: { string },
|
22328 | vadjust: { number },
|
22329 | __type__: { object, string },
|
22330 | },
|
22331 | __type__: { object, string },
|
22332 | },
|
22333 | hidden: { boolean: bool },
|
22334 | hoverWidth: { function: "function", number },
|
22335 | label: { string, undefined: "undefined" },
|
22336 | labelHighlightBold: { boolean: bool },
|
22337 | length: { number, undefined: "undefined" },
|
22338 | physics: { boolean: bool },
|
22339 | scaling: {
|
22340 | min: { number },
|
22341 | max: { number },
|
22342 | label: {
|
22343 | enabled: { boolean: bool },
|
22344 | min: { number },
|
22345 | max: { number },
|
22346 | maxVisible: { number },
|
22347 | drawThreshold: { number },
|
22348 | __type__: { object, boolean: bool },
|
22349 | },
|
22350 | customScalingFunction: { function: "function" },
|
22351 | __type__: { object },
|
22352 | },
|
22353 | selectionWidth: { function: "function", number },
|
22354 | selfReferenceSize: { number },
|
22355 | selfReference: {
|
22356 | size: { number },
|
22357 | angle: { number },
|
22358 | renderBehindTheNode: { boolean: bool },
|
22359 | __type__: { object },
|
22360 | },
|
22361 | shadow: {
|
22362 | enabled: { boolean: bool },
|
22363 | color: { string },
|
22364 | size: { number },
|
22365 | x: { number },
|
22366 | y: { number },
|
22367 | __type__: { object, boolean: bool },
|
22368 | },
|
22369 | smooth: {
|
22370 | enabled: { boolean: bool },
|
22371 | type: {
|
22372 | string: [
|
22373 | "dynamic",
|
22374 | "continuous",
|
22375 | "discrete",
|
22376 | "diagonalCross",
|
22377 | "straightCross",
|
22378 | "horizontal",
|
22379 | "vertical",
|
22380 | "curvedCW",
|
22381 | "curvedCCW",
|
22382 | "cubicBezier",
|
22383 | ],
|
22384 | },
|
22385 | roundness: { number },
|
22386 | forceDirection: {
|
22387 | string: ["horizontal", "vertical", "none"],
|
22388 | boolean: bool,
|
22389 | },
|
22390 | __type__: { object, boolean: bool },
|
22391 | },
|
22392 | title: { string, undefined: "undefined" },
|
22393 | width: { number },
|
22394 | widthConstraint: {
|
22395 | maximum: { number },
|
22396 | __type__: { object, boolean: bool, number },
|
22397 | },
|
22398 | value: { number, undefined: "undefined" },
|
22399 | __type__: { object },
|
22400 | },
|
22401 | groups: {
|
22402 | useDefaultGroups: { boolean: bool },
|
22403 | __any__: nodeOptions,
|
22404 | __type__: { object },
|
22405 | },
|
22406 | interaction: {
|
22407 | dragNodes: { boolean: bool },
|
22408 | dragView: { boolean: bool },
|
22409 | hideEdgesOnDrag: { boolean: bool },
|
22410 | hideEdgesOnZoom: { boolean: bool },
|
22411 | hideNodesOnDrag: { boolean: bool },
|
22412 | hover: { boolean: bool },
|
22413 | keyboard: {
|
22414 | enabled: { boolean: bool },
|
22415 | speed: {
|
22416 | x: { number },
|
22417 | y: { number },
|
22418 | zoom: { number },
|
22419 | __type__: { object },
|
22420 | },
|
22421 | bindToWindow: { boolean: bool },
|
22422 | autoFocus: { boolean: bool },
|
22423 | __type__: { object, boolean: bool },
|
22424 | },
|
22425 | multiselect: { boolean: bool },
|
22426 | navigationButtons: { boolean: bool },
|
22427 | selectable: { boolean: bool },
|
22428 | selectConnectedEdges: { boolean: bool },
|
22429 | hoverConnectedEdges: { boolean: bool },
|
22430 | tooltipDelay: { number },
|
22431 | zoomView: { boolean: bool },
|
22432 | zoomSpeed: { number },
|
22433 | __type__: { object },
|
22434 | },
|
22435 | layout: {
|
22436 | randomSeed: { undefined: "undefined", number, string },
|
22437 | improvedLayout: { boolean: bool },
|
22438 | clusterThreshold: { number },
|
22439 | hierarchical: {
|
22440 | enabled: { boolean: bool },
|
22441 | levelSeparation: { number },
|
22442 | nodeSpacing: { number },
|
22443 | treeSpacing: { number },
|
22444 | blockShifting: { boolean: bool },
|
22445 | edgeMinimization: { boolean: bool },
|
22446 | parentCentralization: { boolean: bool },
|
22447 | direction: { string: ["UD", "DU", "LR", "RL"] },
|
22448 | sortMethod: { string: ["hubsize", "directed"] },
|
22449 | shakeTowards: { string: ["leaves", "roots"] },
|
22450 | __type__: { object, boolean: bool },
|
22451 | },
|
22452 | __type__: { object },
|
22453 | },
|
22454 | manipulation: {
|
22455 | enabled: { boolean: bool },
|
22456 | initiallyActive: { boolean: bool },
|
22457 | addNode: { boolean: bool, function: "function" },
|
22458 | addEdge: { boolean: bool, function: "function" },
|
22459 | editNode: { function: "function" },
|
22460 | editEdge: {
|
22461 | editWithoutDrag: { function: "function" },
|
22462 | __type__: { object, boolean: bool, function: "function" },
|
22463 | },
|
22464 | deleteNode: { boolean: bool, function: "function" },
|
22465 | deleteEdge: { boolean: bool, function: "function" },
|
22466 | controlNodeStyle: nodeOptions,
|
22467 | __type__: { object, boolean: bool },
|
22468 | },
|
22469 | nodes: nodeOptions,
|
22470 | physics: {
|
22471 | enabled: { boolean: bool },
|
22472 | barnesHut: {
|
22473 | theta: { number },
|
22474 | gravitationalConstant: { number },
|
22475 | centralGravity: { number },
|
22476 | springLength: { number },
|
22477 | springConstant: { number },
|
22478 | damping: { number },
|
22479 | avoidOverlap: { number },
|
22480 | __type__: { object },
|
22481 | },
|
22482 | forceAtlas2Based: {
|
22483 | theta: { number },
|
22484 | gravitationalConstant: { number },
|
22485 | centralGravity: { number },
|
22486 | springLength: { number },
|
22487 | springConstant: { number },
|
22488 | damping: { number },
|
22489 | avoidOverlap: { number },
|
22490 | __type__: { object },
|
22491 | },
|
22492 | repulsion: {
|
22493 | centralGravity: { number },
|
22494 | springLength: { number },
|
22495 | springConstant: { number },
|
22496 | nodeDistance: { number },
|
22497 | damping: { number },
|
22498 | __type__: { object },
|
22499 | },
|
22500 | hierarchicalRepulsion: {
|
22501 | centralGravity: { number },
|
22502 | springLength: { number },
|
22503 | springConstant: { number },
|
22504 | nodeDistance: { number },
|
22505 | damping: { number },
|
22506 | avoidOverlap: { number },
|
22507 | __type__: { object },
|
22508 | },
|
22509 | maxVelocity: { number },
|
22510 | minVelocity: { number },
|
22511 | solver: {
|
22512 | string: [
|
22513 | "barnesHut",
|
22514 | "repulsion",
|
22515 | "hierarchicalRepulsion",
|
22516 | "forceAtlas2Based",
|
22517 | ],
|
22518 | },
|
22519 | stabilization: {
|
22520 | enabled: { boolean: bool },
|
22521 | iterations: { number },
|
22522 | updateInterval: { number },
|
22523 | onlyDynamicEdges: { boolean: bool },
|
22524 | fit: { boolean: bool },
|
22525 | __type__: { object, boolean: bool },
|
22526 | },
|
22527 | timestep: { number },
|
22528 | adaptiveTimestep: { boolean: bool },
|
22529 | wind: {
|
22530 | x: { number },
|
22531 | y: { number },
|
22532 | __type__: { object },
|
22533 | },
|
22534 | __type__: { object, boolean: bool },
|
22535 | },
|
22536 |
|
22537 | autoResize: { boolean: bool },
|
22538 | clickToUse: { boolean: bool },
|
22539 | locale: { string },
|
22540 | locales: {
|
22541 | __any__: { any },
|
22542 | __type__: { object },
|
22543 | },
|
22544 | height: { string },
|
22545 | width: { string },
|
22546 | __type__: { object },
|
22547 | };
|
22548 |
|
22549 |
|
22550 |
|
22551 |
|
22552 |
|
22553 |
|
22554 |
|
22555 |
|
22556 |
|
22557 |
|
22558 |
|
22559 |
|
22560 |
|
22561 |
|
22562 |
|
22563 |
|
22564 |
|
22565 |
|
22566 |
|
22567 |
|
22568 |
|
22569 |
|
22570 |
|
22571 |
|
22572 |
|
22573 | const configureOptions = {
|
22574 | nodes: {
|
22575 | borderWidth: [1, 0, 10, 1],
|
22576 | borderWidthSelected: [2, 0, 10, 1],
|
22577 | color: {
|
22578 | border: ["color", "#2B7CE9"],
|
22579 | background: ["color", "#97C2FC"],
|
22580 | highlight: {
|
22581 | border: ["color", "#2B7CE9"],
|
22582 | background: ["color", "#D2E5FF"],
|
22583 | },
|
22584 | hover: {
|
22585 | border: ["color", "#2B7CE9"],
|
22586 | background: ["color", "#D2E5FF"],
|
22587 | },
|
22588 | },
|
22589 | opacity: [0, 0, 1, 0.1],
|
22590 | fixed: {
|
22591 | x: false,
|
22592 | y: false,
|
22593 | },
|
22594 | font: {
|
22595 | color: ["color", "#343434"],
|
22596 | size: [14, 0, 100, 1],
|
22597 | face: ["arial", "verdana", "tahoma"],
|
22598 | background: ["color", "none"],
|
22599 | strokeWidth: [0, 0, 50, 1],
|
22600 | strokeColor: ["color", "#ffffff"],
|
22601 | },
|
22602 |
|
22603 | hidden: false,
|
22604 | labelHighlightBold: true,
|
22605 |
|
22606 |
|
22607 |
|
22608 |
|
22609 |
|
22610 |
|
22611 |
|
22612 | physics: true,
|
22613 | scaling: {
|
22614 | min: [10, 0, 200, 1],
|
22615 | max: [30, 0, 200, 1],
|
22616 | label: {
|
22617 | enabled: false,
|
22618 | min: [14, 0, 200, 1],
|
22619 | max: [30, 0, 200, 1],
|
22620 | maxVisible: [30, 0, 200, 1],
|
22621 | drawThreshold: [5, 0, 20, 1],
|
22622 | },
|
22623 | },
|
22624 | shadow: {
|
22625 | enabled: false,
|
22626 | color: "rgba(0,0,0,0.5)",
|
22627 | size: [10, 0, 20, 1],
|
22628 | x: [5, -30, 30, 1],
|
22629 | y: [5, -30, 30, 1],
|
22630 | },
|
22631 | shape: [
|
22632 | "ellipse",
|
22633 | "box",
|
22634 | "circle",
|
22635 | "database",
|
22636 | "diamond",
|
22637 | "dot",
|
22638 | "square",
|
22639 | "star",
|
22640 | "text",
|
22641 | "triangle",
|
22642 | "triangleDown",
|
22643 | "hexagon",
|
22644 | ],
|
22645 | shapeProperties: {
|
22646 | borderDashes: false,
|
22647 | borderRadius: [6, 0, 20, 1],
|
22648 | interpolation: true,
|
22649 | useImageSize: false,
|
22650 | },
|
22651 | size: [25, 0, 200, 1],
|
22652 | },
|
22653 | edges: {
|
22654 | arrows: {
|
22655 | to: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: "arrow" },
|
22656 | middle: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: "arrow" },
|
22657 | from: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: "arrow" },
|
22658 | },
|
22659 | endPointOffset: {
|
22660 | from: [0, -10, 10, 1],
|
22661 | to: [0, -10, 10, 1],
|
22662 | },
|
22663 | arrowStrikethrough: true,
|
22664 | color: {
|
22665 | color: ["color", "#848484"],
|
22666 | highlight: ["color", "#848484"],
|
22667 | hover: ["color", "#848484"],
|
22668 | inherit: ["from", "to", "both", true, false],
|
22669 | opacity: [1, 0, 1, 0.05],
|
22670 | },
|
22671 | dashes: false,
|
22672 | font: {
|
22673 | color: ["color", "#343434"],
|
22674 | size: [14, 0, 100, 1],
|
22675 | face: ["arial", "verdana", "tahoma"],
|
22676 | background: ["color", "none"],
|
22677 | strokeWidth: [2, 0, 50, 1],
|
22678 | strokeColor: ["color", "#ffffff"],
|
22679 | align: ["horizontal", "top", "middle", "bottom"],
|
22680 | },
|
22681 | hidden: false,
|
22682 | hoverWidth: [1.5, 0, 5, 0.1],
|
22683 | labelHighlightBold: true,
|
22684 | physics: true,
|
22685 | scaling: {
|
22686 | min: [1, 0, 100, 1],
|
22687 | max: [15, 0, 100, 1],
|
22688 | label: {
|
22689 | enabled: true,
|
22690 | min: [14, 0, 200, 1],
|
22691 | max: [30, 0, 200, 1],
|
22692 | maxVisible: [30, 0, 200, 1],
|
22693 | drawThreshold: [5, 0, 20, 1],
|
22694 | },
|
22695 | },
|
22696 | selectionWidth: [1.5, 0, 5, 0.1],
|
22697 | selfReferenceSize: [20, 0, 200, 1],
|
22698 | selfReference: {
|
22699 | size: [20, 0, 200, 1],
|
22700 | angle: [Math.PI / 2, -6 * Math.PI, 6 * Math.PI, Math.PI / 8],
|
22701 | renderBehindTheNode: true,
|
22702 | },
|
22703 | shadow: {
|
22704 | enabled: false,
|
22705 | color: "rgba(0,0,0,0.5)",
|
22706 | size: [10, 0, 20, 1],
|
22707 | x: [5, -30, 30, 1],
|
22708 | y: [5, -30, 30, 1],
|
22709 | },
|
22710 | smooth: {
|
22711 | enabled: true,
|
22712 | type: [
|
22713 | "dynamic",
|
22714 | "continuous",
|
22715 | "discrete",
|
22716 | "diagonalCross",
|
22717 | "straightCross",
|
22718 | "horizontal",
|
22719 | "vertical",
|
22720 | "curvedCW",
|
22721 | "curvedCCW",
|
22722 | "cubicBezier",
|
22723 | ],
|
22724 | forceDirection: ["horizontal", "vertical", "none"],
|
22725 | roundness: [0.5, 0, 1, 0.05],
|
22726 | },
|
22727 | width: [1, 0, 30, 1],
|
22728 | },
|
22729 | layout: {
|
22730 |
|
22731 |
|
22732 | hierarchical: {
|
22733 | enabled: false,
|
22734 | levelSeparation: [150, 20, 500, 5],
|
22735 | nodeSpacing: [100, 20, 500, 5],
|
22736 | treeSpacing: [200, 20, 500, 5],
|
22737 | blockShifting: true,
|
22738 | edgeMinimization: true,
|
22739 | parentCentralization: true,
|
22740 | direction: ["UD", "DU", "LR", "RL"],
|
22741 | sortMethod: ["hubsize", "directed"],
|
22742 | shakeTowards: ["leaves", "roots"],
|
22743 | },
|
22744 | },
|
22745 | interaction: {
|
22746 | dragNodes: true,
|
22747 | dragView: true,
|
22748 | hideEdgesOnDrag: false,
|
22749 | hideEdgesOnZoom: false,
|
22750 | hideNodesOnDrag: false,
|
22751 | hover: false,
|
22752 | keyboard: {
|
22753 | enabled: false,
|
22754 | speed: {
|
22755 | x: [10, 0, 40, 1],
|
22756 | y: [10, 0, 40, 1],
|
22757 | zoom: [0.02, 0, 0.1, 0.005],
|
22758 | },
|
22759 | bindToWindow: true,
|
22760 | autoFocus: true,
|
22761 | },
|
22762 | multiselect: false,
|
22763 | navigationButtons: false,
|
22764 | selectable: true,
|
22765 | selectConnectedEdges: true,
|
22766 | hoverConnectedEdges: true,
|
22767 | tooltipDelay: [300, 0, 1000, 25],
|
22768 | zoomView: true,
|
22769 | zoomSpeed: [1, 0.1, 2, 0.1],
|
22770 | },
|
22771 | manipulation: {
|
22772 | enabled: false,
|
22773 | initiallyActive: false,
|
22774 | },
|
22775 | physics: {
|
22776 | enabled: true,
|
22777 | barnesHut: {
|
22778 | theta: [0.5, 0.1, 1, 0.05],
|
22779 | gravitationalConstant: [-2000, -30000, 0, 50],
|
22780 | centralGravity: [0.3, 0, 10, 0.05],
|
22781 | springLength: [95, 0, 500, 5],
|
22782 | springConstant: [0.04, 0, 1.2, 0.005],
|
22783 | damping: [0.09, 0, 1, 0.01],
|
22784 | avoidOverlap: [0, 0, 1, 0.01],
|
22785 | },
|
22786 | forceAtlas2Based: {
|
22787 | theta: [0.5, 0.1, 1, 0.05],
|
22788 | gravitationalConstant: [-50, -500, 0, 1],
|
22789 | centralGravity: [0.01, 0, 1, 0.005],
|
22790 | springLength: [95, 0, 500, 5],
|
22791 | springConstant: [0.08, 0, 1.2, 0.005],
|
22792 | damping: [0.4, 0, 1, 0.01],
|
22793 | avoidOverlap: [0, 0, 1, 0.01],
|
22794 | },
|
22795 | repulsion: {
|
22796 | centralGravity: [0.2, 0, 10, 0.05],
|
22797 | springLength: [200, 0, 500, 5],
|
22798 | springConstant: [0.05, 0, 1.2, 0.005],
|
22799 | nodeDistance: [100, 0, 500, 5],
|
22800 | damping: [0.09, 0, 1, 0.01],
|
22801 | },
|
22802 | hierarchicalRepulsion: {
|
22803 | centralGravity: [0.2, 0, 10, 0.05],
|
22804 | springLength: [100, 0, 500, 5],
|
22805 | springConstant: [0.01, 0, 1.2, 0.005],
|
22806 | nodeDistance: [120, 0, 500, 5],
|
22807 | damping: [0.09, 0, 1, 0.01],
|
22808 | avoidOverlap: [0, 0, 1, 0.01],
|
22809 | },
|
22810 | maxVelocity: [50, 0, 150, 1],
|
22811 | minVelocity: [0.1, 0.01, 0.5, 0.01],
|
22812 | solver: [
|
22813 | "barnesHut",
|
22814 | "forceAtlas2Based",
|
22815 | "repulsion",
|
22816 | "hierarchicalRepulsion",
|
22817 | ],
|
22818 | timestep: [0.5, 0.01, 1, 0.01],
|
22819 | wind: {
|
22820 | x: [0, -10, 10, 0.1],
|
22821 | y: [0, -10, 10, 0.1],
|
22822 | },
|
22823 |
|
22824 | },
|
22825 | };
|
22826 | const configuratorHideOption = (parentPath, optionName, options) => {
|
22827 | if (parentPath.includes("physics") &&
|
22828 | configureOptions.physics.solver.includes(optionName) &&
|
22829 | options.physics.solver !== optionName &&
|
22830 | optionName !== "wind") {
|
22831 | return true;
|
22832 | }
|
22833 | return false;
|
22834 | };
|
22835 |
|
22836 | var options = Object.freeze({
|
22837 | __proto__: null,
|
22838 | configuratorHideOption: configuratorHideOption,
|
22839 | allOptions: allOptions,
|
22840 | configureOptions: configureOptions
|
22841 | });
|
22842 |
|
22843 |
|
22844 |
|
22845 |
|
22846 |
|
22847 |
|
22848 | class FloydWarshall {
|
22849 | |
22850 |
|
22851 |
|
22852 | constructor() {}
|
22853 |
|
22854 | |
22855 |
|
22856 |
|
22857 |
|
22858 |
|
22859 |
|
22860 |
|
22861 | getDistances(body, nodesArray, edgesArray) {
|
22862 | const D_matrix = {};
|
22863 | const edges = body.edges;
|
22864 |
|
22865 |
|
22866 | for (let i = 0; i < nodesArray.length; i++) {
|
22867 | const node = nodesArray[i];
|
22868 | const cell = {};
|
22869 | D_matrix[node] = cell;
|
22870 | for (let j = 0; j < nodesArray.length; j++) {
|
22871 | cell[nodesArray[j]] = i == j ? 0 : 1e9;
|
22872 | }
|
22873 | }
|
22874 |
|
22875 |
|
22876 | for (let i = 0; i < edgesArray.length; i++) {
|
22877 | const edge = edges[edgesArray[i]];
|
22878 |
|
22879 | if (
|
22880 | edge.connected === true &&
|
22881 | D_matrix[edge.fromId] !== undefined &&
|
22882 | D_matrix[edge.toId] !== undefined
|
22883 | ) {
|
22884 | D_matrix[edge.fromId][edge.toId] = 1;
|
22885 | D_matrix[edge.toId][edge.fromId] = 1;
|
22886 | }
|
22887 | }
|
22888 |
|
22889 | const nodeCount = nodesArray.length;
|
22890 |
|
22891 |
|
22892 | for (let k = 0; k < nodeCount; k++) {
|
22893 | const knode = nodesArray[k];
|
22894 | const kcolm = D_matrix[knode];
|
22895 | for (let i = 0; i < nodeCount - 1; i++) {
|
22896 | const inode = nodesArray[i];
|
22897 | const icolm = D_matrix[inode];
|
22898 | for (let j = i + 1; j < nodeCount; j++) {
|
22899 | const jnode = nodesArray[j];
|
22900 | const jcolm = D_matrix[jnode];
|
22901 |
|
22902 | const val = Math.min(icolm[jnode], icolm[knode] + kcolm[jnode]);
|
22903 | icolm[jnode] = val;
|
22904 | jcolm[inode] = val;
|
22905 | }
|
22906 | }
|
22907 | }
|
22908 |
|
22909 | return D_matrix;
|
22910 | }
|
22911 | }
|
22912 |
|
22913 |
|
22914 |
|
22915 |
|
22916 |
|
22917 |
|
22918 |
|
22919 |
|
22920 |
|
22921 |
|
22922 |
|
22923 | class KamadaKawai {
|
22924 | |
22925 |
|
22926 |
|
22927 |
|
22928 |
|
22929 | constructor(body, edgeLength, edgeStrength) {
|
22930 | this.body = body;
|
22931 | this.springLength = edgeLength;
|
22932 | this.springConstant = edgeStrength;
|
22933 | this.distanceSolver = new FloydWarshall();
|
22934 | }
|
22935 |
|
22936 | |
22937 |
|
22938 |
|
22939 |
|
22940 |
|
22941 | setOptions(options) {
|
22942 | if (options) {
|
22943 | if (options.springLength) {
|
22944 | this.springLength = options.springLength;
|
22945 | }
|
22946 | if (options.springConstant) {
|
22947 | this.springConstant = options.springConstant;
|
22948 | }
|
22949 | }
|
22950 | }
|
22951 |
|
22952 | |
22953 |
|
22954 |
|
22955 |
|
22956 |
|
22957 |
|
22958 |
|
22959 | solve(nodesArray, edgesArray, ignoreClusters = false) {
|
22960 |
|
22961 | const D_matrix = this.distanceSolver.getDistances(
|
22962 | this.body,
|
22963 | nodesArray,
|
22964 | edgesArray
|
22965 | );
|
22966 |
|
22967 |
|
22968 | this._createL_matrix(D_matrix);
|
22969 |
|
22970 |
|
22971 | this._createK_matrix(D_matrix);
|
22972 |
|
22973 |
|
22974 | this._createE_matrix();
|
22975 |
|
22976 |
|
22977 | const threshold = 0.01;
|
22978 | const innerThreshold = 1;
|
22979 | let iterations = 0;
|
22980 | const maxIterations = Math.max(
|
22981 | 1000,
|
22982 | Math.min(10 * this.body.nodeIndices.length, 6000)
|
22983 | );
|
22984 | const maxInnerIterations = 5;
|
22985 |
|
22986 | let maxEnergy = 1e9;
|
22987 | let highE_nodeId = 0,
|
22988 | dE_dx = 0,
|
22989 | dE_dy = 0,
|
22990 | delta_m = 0,
|
22991 | subIterations = 0;
|
22992 |
|
22993 | while (maxEnergy > threshold && iterations < maxIterations) {
|
22994 | iterations += 1;
|
22995 | [highE_nodeId, maxEnergy, dE_dx, dE_dy] =
|
22996 | this._getHighestEnergyNode(ignoreClusters);
|
22997 | delta_m = maxEnergy;
|
22998 | subIterations = 0;
|
22999 | while (delta_m > innerThreshold && subIterations < maxInnerIterations) {
|
23000 | subIterations += 1;
|
23001 | this._moveNode(highE_nodeId, dE_dx, dE_dy);
|
23002 | [delta_m, dE_dx, dE_dy] = this._getEnergy(highE_nodeId);
|
23003 | }
|
23004 | }
|
23005 | }
|
23006 |
|
23007 | |
23008 |
|
23009 |
|
23010 |
|
23011 |
|
23012 |
|
23013 |
|
23014 | _getHighestEnergyNode(ignoreClusters) {
|
23015 | const nodesArray = this.body.nodeIndices;
|
23016 | const nodes = this.body.nodes;
|
23017 | let maxEnergy = 0;
|
23018 | let maxEnergyNodeId = nodesArray[0];
|
23019 | let dE_dx_max = 0,
|
23020 | dE_dy_max = 0;
|
23021 |
|
23022 | for (let nodeIdx = 0; nodeIdx < nodesArray.length; nodeIdx++) {
|
23023 | const m = nodesArray[nodeIdx];
|
23024 |
|
23025 | if (
|
23026 | nodes[m].predefinedPosition !== true ||
|
23027 | (nodes[m].isCluster === true && ignoreClusters === true) ||
|
23028 | nodes[m].options.fixed.x !== true ||
|
23029 | nodes[m].options.fixed.y !== true
|
23030 | ) {
|
23031 | const [delta_m, dE_dx, dE_dy] = this._getEnergy(m);
|
23032 | if (maxEnergy < delta_m) {
|
23033 | maxEnergy = delta_m;
|
23034 | maxEnergyNodeId = m;
|
23035 | dE_dx_max = dE_dx;
|
23036 | dE_dy_max = dE_dy;
|
23037 | }
|
23038 | }
|
23039 | }
|
23040 |
|
23041 | return [maxEnergyNodeId, maxEnergy, dE_dx_max, dE_dy_max];
|
23042 | }
|
23043 |
|
23044 | |
23045 |
|
23046 |
|
23047 |
|
23048 |
|
23049 |
|
23050 |
|
23051 | _getEnergy(m) {
|
23052 | const [dE_dx, dE_dy] = this.E_sums[m];
|
23053 | const delta_m = Math.sqrt(dE_dx ** 2 + dE_dy ** 2);
|
23054 | return [delta_m, dE_dx, dE_dy];
|
23055 | }
|
23056 |
|
23057 | |
23058 |
|
23059 |
|
23060 |
|
23061 |
|
23062 |
|
23063 |
|
23064 |
|
23065 |
|
23066 | _moveNode(m, dE_dx, dE_dy) {
|
23067 | const nodesArray = this.body.nodeIndices;
|
23068 | const nodes = this.body.nodes;
|
23069 | let d2E_dx2 = 0;
|
23070 | let d2E_dxdy = 0;
|
23071 | let d2E_dy2 = 0;
|
23072 |
|
23073 | const x_m = nodes[m].x;
|
23074 | const y_m = nodes[m].y;
|
23075 | const km = this.K_matrix[m];
|
23076 | const lm = this.L_matrix[m];
|
23077 |
|
23078 | for (let iIdx = 0; iIdx < nodesArray.length; iIdx++) {
|
23079 | const i = nodesArray[iIdx];
|
23080 | if (i !== m) {
|
23081 | const x_i = nodes[i].x;
|
23082 | const y_i = nodes[i].y;
|
23083 | const kmat = km[i];
|
23084 | const lmat = lm[i];
|
23085 | const denominator = 1.0 / ((x_m - x_i) ** 2 + (y_m - y_i) ** 2) ** 1.5;
|
23086 | d2E_dx2 += kmat * (1 - lmat * (y_m - y_i) ** 2 * denominator);
|
23087 | d2E_dxdy += kmat * (lmat * (x_m - x_i) * (y_m - y_i) * denominator);
|
23088 | d2E_dy2 += kmat * (1 - lmat * (x_m - x_i) ** 2 * denominator);
|
23089 | }
|
23090 | }
|
23091 |
|
23092 | const A = d2E_dx2,
|
23093 | B = d2E_dxdy,
|
23094 | C = dE_dx,
|
23095 | D = d2E_dy2,
|
23096 | E = dE_dy;
|
23097 |
|
23098 |
|
23099 | const dy = (C / A + E / B) / (B / A - D / B);
|
23100 | const dx = -(B * dy + C) / A;
|
23101 |
|
23102 |
|
23103 | nodes[m].x += dx;
|
23104 | nodes[m].y += dy;
|
23105 |
|
23106 |
|
23107 | this._updateE_matrix(m);
|
23108 | }
|
23109 |
|
23110 | |
23111 |
|
23112 |
|
23113 |
|
23114 |
|
23115 |
|
23116 | _createL_matrix(D_matrix) {
|
23117 | const nodesArray = this.body.nodeIndices;
|
23118 | const edgeLength = this.springLength;
|
23119 |
|
23120 | this.L_matrix = [];
|
23121 | for (let i = 0; i < nodesArray.length; i++) {
|
23122 | this.L_matrix[nodesArray[i]] = {};
|
23123 | for (let j = 0; j < nodesArray.length; j++) {
|
23124 | this.L_matrix[nodesArray[i]][nodesArray[j]] =
|
23125 | edgeLength * D_matrix[nodesArray[i]][nodesArray[j]];
|
23126 | }
|
23127 | }
|
23128 | }
|
23129 |
|
23130 | |
23131 |
|
23132 |
|
23133 |
|
23134 |
|
23135 |
|
23136 | _createK_matrix(D_matrix) {
|
23137 | const nodesArray = this.body.nodeIndices;
|
23138 | const edgeStrength = this.springConstant;
|
23139 |
|
23140 | this.K_matrix = [];
|
23141 | for (let i = 0; i < nodesArray.length; i++) {
|
23142 | this.K_matrix[nodesArray[i]] = {};
|
23143 | for (let j = 0; j < nodesArray.length; j++) {
|
23144 | this.K_matrix[nodesArray[i]][nodesArray[j]] =
|
23145 | edgeStrength * D_matrix[nodesArray[i]][nodesArray[j]] ** -2;
|
23146 | }
|
23147 | }
|
23148 | }
|
23149 |
|
23150 | |
23151 |
|
23152 |
|
23153 |
|
23154 |
|
23155 | _createE_matrix() {
|
23156 | const nodesArray = this.body.nodeIndices;
|
23157 | const nodes = this.body.nodes;
|
23158 | this.E_matrix = {};
|
23159 | this.E_sums = {};
|
23160 | for (let mIdx = 0; mIdx < nodesArray.length; mIdx++) {
|
23161 | this.E_matrix[nodesArray[mIdx]] = [];
|
23162 | }
|
23163 | for (let mIdx = 0; mIdx < nodesArray.length; mIdx++) {
|
23164 | const m = nodesArray[mIdx];
|
23165 | const x_m = nodes[m].x;
|
23166 | const y_m = nodes[m].y;
|
23167 | let dE_dx = 0;
|
23168 | let dE_dy = 0;
|
23169 | for (let iIdx = mIdx; iIdx < nodesArray.length; iIdx++) {
|
23170 | const i = nodesArray[iIdx];
|
23171 | if (i !== m) {
|
23172 | const x_i = nodes[i].x;
|
23173 | const y_i = nodes[i].y;
|
23174 | const denominator =
|
23175 | 1.0 / Math.sqrt((x_m - x_i) ** 2 + (y_m - y_i) ** 2);
|
23176 | this.E_matrix[m][iIdx] = [
|
23177 | this.K_matrix[m][i] *
|
23178 | (x_m - x_i - this.L_matrix[m][i] * (x_m - x_i) * denominator),
|
23179 | this.K_matrix[m][i] *
|
23180 | (y_m - y_i - this.L_matrix[m][i] * (y_m - y_i) * denominator),
|
23181 | ];
|
23182 | this.E_matrix[i][mIdx] = this.E_matrix[m][iIdx];
|
23183 | dE_dx += this.E_matrix[m][iIdx][0];
|
23184 | dE_dy += this.E_matrix[m][iIdx][1];
|
23185 | }
|
23186 | }
|
23187 |
|
23188 | this.E_sums[m] = [dE_dx, dE_dy];
|
23189 | }
|
23190 | }
|
23191 |
|
23192 | |
23193 |
|
23194 |
|
23195 |
|
23196 |
|
23197 |
|
23198 | _updateE_matrix(m) {
|
23199 | const nodesArray = this.body.nodeIndices;
|
23200 | const nodes = this.body.nodes;
|
23201 | const colm = this.E_matrix[m];
|
23202 | const kcolm = this.K_matrix[m];
|
23203 | const lcolm = this.L_matrix[m];
|
23204 | const x_m = nodes[m].x;
|
23205 | const y_m = nodes[m].y;
|
23206 | let dE_dx = 0;
|
23207 | let dE_dy = 0;
|
23208 | for (let iIdx = 0; iIdx < nodesArray.length; iIdx++) {
|
23209 | const i = nodesArray[iIdx];
|
23210 | if (i !== m) {
|
23211 |
|
23212 | const cell = colm[iIdx];
|
23213 | const oldDx = cell[0];
|
23214 | const oldDy = cell[1];
|
23215 |
|
23216 |
|
23217 | const x_i = nodes[i].x;
|
23218 | const y_i = nodes[i].y;
|
23219 | const denominator =
|
23220 | 1.0 / Math.sqrt((x_m - x_i) ** 2 + (y_m - y_i) ** 2);
|
23221 | const dx =
|
23222 | kcolm[i] * (x_m - x_i - lcolm[i] * (x_m - x_i) * denominator);
|
23223 | const dy =
|
23224 | kcolm[i] * (y_m - y_i - lcolm[i] * (y_m - y_i) * denominator);
|
23225 | colm[iIdx] = [dx, dy];
|
23226 | dE_dx += dx;
|
23227 | dE_dy += dy;
|
23228 |
|
23229 |
|
23230 | const sum = this.E_sums[i];
|
23231 | sum[0] += dx - oldDx;
|
23232 | sum[1] += dy - oldDy;
|
23233 | }
|
23234 | }
|
23235 |
|
23236 | this.E_sums[m] = [dE_dx, dE_dy];
|
23237 | }
|
23238 | }
|
23239 |
|
23240 |
|
23241 |
|
23242 |
|
23243 |
|
23244 |
|
23245 |
|
23246 |
|
23247 |
|
23248 |
|
23249 |
|
23250 |
|
23251 |
|
23252 |
|
23253 | function Network(container, data, options) {
|
23254 | if (!(this instanceof Network)) {
|
23255 | throw new SyntaxError("Constructor must be called with the new operator");
|
23256 | }
|
23257 |
|
23258 |
|
23259 | this.options = {};
|
23260 | this.defaultOptions = {
|
23261 | locale: "en",
|
23262 | locales: locales,
|
23263 | clickToUse: false,
|
23264 | };
|
23265 | Object.assign(this.options, this.defaultOptions);
|
23266 |
|
23267 | |
23268 |
|
23269 |
|
23270 |
|
23271 |
|
23272 |
|
23273 |
|
23274 |
|
23275 |
|
23276 |
|
23277 |
|
23278 |
|
23279 | this.body = {
|
23280 | container: container,
|
23281 |
|
23282 |
|
23283 | nodes: {},
|
23284 | nodeIndices: [],
|
23285 | edges: {},
|
23286 | edgeIndices: [],
|
23287 |
|
23288 | emitter: {
|
23289 | on: this.on.bind(this),
|
23290 | off: this.off.bind(this),
|
23291 | emit: this.emit.bind(this),
|
23292 | once: this.once.bind(this),
|
23293 | },
|
23294 | eventListeners: {
|
23295 | onTap: function () {},
|
23296 | onTouch: function () {},
|
23297 | onDoubleTap: function () {},
|
23298 | onHold: function () {},
|
23299 | onDragStart: function () {},
|
23300 | onDrag: function () {},
|
23301 | onDragEnd: function () {},
|
23302 | onMouseWheel: function () {},
|
23303 | onPinch: function () {},
|
23304 | onMouseMove: function () {},
|
23305 | onRelease: function () {},
|
23306 | onContext: function () {},
|
23307 | },
|
23308 | data: {
|
23309 | nodes: null,
|
23310 | edges: null,
|
23311 | },
|
23312 | functions: {
|
23313 | createNode: function () {},
|
23314 | createEdge: function () {},
|
23315 | getPointer: function () {},
|
23316 | },
|
23317 | modules: {},
|
23318 | view: {
|
23319 | scale: 1,
|
23320 | translation: { x: 0, y: 0 },
|
23321 | },
|
23322 | selectionBox: {
|
23323 | show: false,
|
23324 | position: {
|
23325 | start: { x: 0, y: 0 },
|
23326 | end: { x: 0, y: 0 },
|
23327 | },
|
23328 | },
|
23329 | };
|
23330 |
|
23331 |
|
23332 | this.bindEventListeners();
|
23333 |
|
23334 |
|
23335 | this.images = new Images(() => this.body.emitter.emit("_requestRedraw"));
|
23336 | this.groups = new Groups();
|
23337 | this.canvas = new Canvas(this.body);
|
23338 | this.selectionHandler = new SelectionHandler(this.body, this.canvas);
|
23339 | this.interactionHandler = new InteractionHandler(
|
23340 | this.body,
|
23341 | this.canvas,
|
23342 | this.selectionHandler
|
23343 | );
|
23344 | this.view = new View(this.body, this.canvas);
|
23345 | this.renderer = new CanvasRenderer(this.body, this.canvas);
|
23346 | this.physics = new PhysicsEngine(this.body);
|
23347 | this.layoutEngine = new LayoutEngine(this.body);
|
23348 | this.clustering = new ClusterEngine(this.body);
|
23349 | this.manipulation = new ManipulationSystem(
|
23350 | this.body,
|
23351 | this.canvas,
|
23352 | this.selectionHandler,
|
23353 | this.interactionHandler
|
23354 | );
|
23355 |
|
23356 | this.nodesHandler = new NodesHandler(
|
23357 | this.body,
|
23358 | this.images,
|
23359 | this.groups,
|
23360 | this.layoutEngine
|
23361 | );
|
23362 | this.edgesHandler = new EdgesHandler(this.body, this.images, this.groups);
|
23363 |
|
23364 | this.body.modules["kamadaKawai"] = new KamadaKawai(this.body, 150, 0.05);
|
23365 | this.body.modules["clustering"] = this.clustering;
|
23366 |
|
23367 |
|
23368 | this.canvas._create();
|
23369 |
|
23370 |
|
23371 | this.setOptions(options);
|
23372 |
|
23373 |
|
23374 | this.setData(data);
|
23375 | }
|
23376 |
|
23377 |
|
23378 | Emitter(Network.prototype);
|
23379 |
|
23380 |
|
23381 |
|
23382 |
|
23383 |
|
23384 |
|
23385 | Network.prototype.setOptions = function (options) {
|
23386 | if (options === null) {
|
23387 | options = undefined;
|
23388 | }
|
23389 |
|
23390 | if (options !== undefined) {
|
23391 | const errorFound = Validator.validate(options, allOptions);
|
23392 | if (errorFound === true) {
|
23393 | console.error(
|
23394 | "%cErrors have been found in the supplied options object.",
|
23395 | VALIDATOR_PRINT_STYLE
|
23396 | );
|
23397 | }
|
23398 |
|
23399 |
|
23400 | const fields = ["locale", "locales", "clickToUse"];
|
23401 | selectiveDeepExtend(fields, this.options, options);
|
23402 |
|
23403 |
|
23404 | if (options.locale !== undefined) {
|
23405 | options.locale = normalizeLanguageCode(
|
23406 | options.locales || this.options.locales,
|
23407 | options.locale
|
23408 | );
|
23409 | }
|
23410 |
|
23411 |
|
23412 | options = this.layoutEngine.setOptions(options.layout, options);
|
23413 |
|
23414 | this.canvas.setOptions(options);
|
23415 |
|
23416 |
|
23417 | this.groups.setOptions(options.groups);
|
23418 | this.nodesHandler.setOptions(options.nodes);
|
23419 | this.edgesHandler.setOptions(options.edges);
|
23420 | this.physics.setOptions(options.physics);
|
23421 | this.manipulation.setOptions(options.manipulation, options, this.options);
|
23422 |
|
23423 | this.interactionHandler.setOptions(options.interaction);
|
23424 | this.renderer.setOptions(options.interaction);
|
23425 | this.selectionHandler.setOptions(options.interaction);
|
23426 |
|
23427 |
|
23428 | if (options.groups !== undefined) {
|
23429 | this.body.emitter.emit("refreshNodes");
|
23430 | }
|
23431 |
|
23432 |
|
23433 |
|
23434 |
|
23435 | if ("configure" in options) {
|
23436 | if (!this.configurator) {
|
23437 | this.configurator = new Configurator(
|
23438 | this,
|
23439 | this.body.container,
|
23440 | configureOptions,
|
23441 | this.canvas.pixelRatio,
|
23442 | configuratorHideOption
|
23443 | );
|
23444 | }
|
23445 |
|
23446 | this.configurator.setOptions(options.configure);
|
23447 | }
|
23448 |
|
23449 |
|
23450 | if (this.configurator && this.configurator.options.enabled === true) {
|
23451 | const networkOptions = {
|
23452 | nodes: {},
|
23453 | edges: {},
|
23454 | layout: {},
|
23455 | interaction: {},
|
23456 | manipulation: {},
|
23457 | physics: {},
|
23458 | global: {},
|
23459 | };
|
23460 | deepExtend(networkOptions.nodes, this.nodesHandler.options);
|
23461 | deepExtend(networkOptions.edges, this.edgesHandler.options);
|
23462 | deepExtend(networkOptions.layout, this.layoutEngine.options);
|
23463 |
|
23464 | deepExtend(networkOptions.interaction, this.selectionHandler.options);
|
23465 | deepExtend(networkOptions.interaction, this.renderer.options);
|
23466 |
|
23467 | deepExtend(networkOptions.interaction, this.interactionHandler.options);
|
23468 | deepExtend(networkOptions.manipulation, this.manipulation.options);
|
23469 | deepExtend(networkOptions.physics, this.physics.options);
|
23470 |
|
23471 |
|
23472 | deepExtend(networkOptions.global, this.canvas.options);
|
23473 | deepExtend(networkOptions.global, this.options);
|
23474 |
|
23475 | this.configurator.setModuleOptions(networkOptions);
|
23476 | }
|
23477 |
|
23478 |
|
23479 | if (options.clickToUse !== undefined) {
|
23480 | if (options.clickToUse === true) {
|
23481 | if (this.activator === undefined) {
|
23482 | this.activator = new Activator(this.canvas.frame);
|
23483 | this.activator.on("change", () => {
|
23484 | this.body.emitter.emit("activate");
|
23485 | });
|
23486 | }
|
23487 | } else {
|
23488 | if (this.activator !== undefined) {
|
23489 | this.activator.destroy();
|
23490 | delete this.activator;
|
23491 | }
|
23492 | this.body.emitter.emit("activate");
|
23493 | }
|
23494 | } else {
|
23495 | this.body.emitter.emit("activate");
|
23496 | }
|
23497 |
|
23498 | this.canvas.setSize();
|
23499 |
|
23500 | this.body.emitter.emit("startSimulation");
|
23501 | }
|
23502 | };
|
23503 |
|
23504 |
|
23505 |
|
23506 |
|
23507 |
|
23508 |
|
23509 |
|
23510 |
|
23511 |
|
23512 |
|
23513 | Network.prototype._updateVisibleIndices = function () {
|
23514 | const nodes = this.body.nodes;
|
23515 | const edges = this.body.edges;
|
23516 | this.body.nodeIndices = [];
|
23517 | this.body.edgeIndices = [];
|
23518 |
|
23519 | for (const nodeId in nodes) {
|
23520 | if (Object.prototype.hasOwnProperty.call(nodes, nodeId)) {
|
23521 | if (
|
23522 | !this.clustering._isClusteredNode(nodeId) &&
|
23523 | nodes[nodeId].options.hidden === false
|
23524 | ) {
|
23525 | this.body.nodeIndices.push(nodes[nodeId].id);
|
23526 | }
|
23527 | }
|
23528 | }
|
23529 |
|
23530 | for (const edgeId in edges) {
|
23531 | if (Object.prototype.hasOwnProperty.call(edges, edgeId)) {
|
23532 | const edge = edges[edgeId];
|
23533 |
|
23534 |
|
23535 |
|
23536 | const fromNode = nodes[edge.fromId];
|
23537 | const toNode = nodes[edge.toId];
|
23538 | const edgeNodesPresent = fromNode !== undefined && toNode !== undefined;
|
23539 |
|
23540 | const isVisible =
|
23541 | !this.clustering._isClusteredEdge(edgeId) &&
|
23542 | edge.options.hidden === false &&
|
23543 | edgeNodesPresent &&
|
23544 | fromNode.options.hidden === false &&
|
23545 | toNode.options.hidden === false;
|
23546 |
|
23547 | if (isVisible) {
|
23548 | this.body.edgeIndices.push(edge.id);
|
23549 | }
|
23550 | }
|
23551 | }
|
23552 | };
|
23553 |
|
23554 |
|
23555 |
|
23556 |
|
23557 | Network.prototype.bindEventListeners = function () {
|
23558 |
|
23559 |
|
23560 | this.body.emitter.on("_dataChanged", () => {
|
23561 | this.edgesHandler._updateState();
|
23562 | this.body.emitter.emit("_dataUpdated");
|
23563 | });
|
23564 |
|
23565 |
|
23566 | this.body.emitter.on("_dataUpdated", () => {
|
23567 |
|
23568 | this.clustering._updateState();
|
23569 | this._updateVisibleIndices();
|
23570 |
|
23571 | this._updateValueRange(this.body.nodes);
|
23572 | this._updateValueRange(this.body.edges);
|
23573 |
|
23574 | this.body.emitter.emit("startSimulation");
|
23575 | this.body.emitter.emit("_requestRedraw");
|
23576 | });
|
23577 | };
|
23578 |
|
23579 |
|
23580 |
|
23581 |
|
23582 |
|
23583 |
|
23584 |
|
23585 |
|
23586 |
|
23587 |
|
23588 |
|
23589 | Network.prototype.setData = function (data) {
|
23590 |
|
23591 | this.body.emitter.emit("resetPhysics");
|
23592 | this.body.emitter.emit("_resetData");
|
23593 |
|
23594 |
|
23595 | this.selectionHandler.unselectAll();
|
23596 |
|
23597 | if (data && data.dot && (data.nodes || data.edges)) {
|
23598 | throw new SyntaxError(
|
23599 | 'Data must contain either parameter "dot" or ' +
|
23600 | ' parameter pair "nodes" and "edges", but not both.'
|
23601 | );
|
23602 | }
|
23603 |
|
23604 |
|
23605 | this.setOptions(data && data.options);
|
23606 |
|
23607 | if (data && data.dot) {
|
23608 | console.warn(
|
23609 | "The dot property has been deprecated. Please use the static convertDot method to convert DOT into vis.network format and use the normal data format with nodes and edges. This converter is used like this: var data = vis.network.convertDot(dotString);"
|
23610 | );
|
23611 |
|
23612 | const dotData = DOTToGraph(data.dot);
|
23613 | this.setData(dotData);
|
23614 | return;
|
23615 | } else if (data && data.gephi) {
|
23616 |
|
23617 | console.warn(
|
23618 | "The gephi property has been deprecated. Please use the static convertGephi method to convert gephi into vis.network format and use the normal data format with nodes and edges. This converter is used like this: var data = vis.network.convertGephi(gephiJson);"
|
23619 | );
|
23620 | const gephiData = parseGephi(data.gephi);
|
23621 | this.setData(gephiData);
|
23622 | return;
|
23623 | } else {
|
23624 | this.nodesHandler.setData(data && data.nodes, true);
|
23625 | this.edgesHandler.setData(data && data.edges, true);
|
23626 | }
|
23627 |
|
23628 |
|
23629 | this.body.emitter.emit("_dataChanged");
|
23630 |
|
23631 |
|
23632 | this.body.emitter.emit("_dataLoaded");
|
23633 |
|
23634 |
|
23635 | this.body.emitter.emit("initPhysics");
|
23636 | };
|
23637 |
|
23638 |
|
23639 |
|
23640 |
|
23641 |
|
23642 |
|
23643 |
|
23644 | Network.prototype.destroy = function () {
|
23645 | this.body.emitter.emit("destroy");
|
23646 |
|
23647 | this.body.emitter.off();
|
23648 | this.off();
|
23649 |
|
23650 |
|
23651 | delete this.groups;
|
23652 | delete this.canvas;
|
23653 | delete this.selectionHandler;
|
23654 | delete this.interactionHandler;
|
23655 | delete this.view;
|
23656 | delete this.renderer;
|
23657 | delete this.physics;
|
23658 | delete this.layoutEngine;
|
23659 | delete this.clustering;
|
23660 | delete this.manipulation;
|
23661 | delete this.nodesHandler;
|
23662 | delete this.edgesHandler;
|
23663 | delete this.configurator;
|
23664 | delete this.images;
|
23665 |
|
23666 | for (const nodeId in this.body.nodes) {
|
23667 | if (!Object.prototype.hasOwnProperty.call(this.body.nodes, nodeId))
|
23668 | continue;
|
23669 | delete this.body.nodes[nodeId];
|
23670 | }
|
23671 |
|
23672 | for (const edgeId in this.body.edges) {
|
23673 | if (!Object.prototype.hasOwnProperty.call(this.body.edges, edgeId))
|
23674 | continue;
|
23675 | delete this.body.edges[edgeId];
|
23676 | }
|
23677 |
|
23678 |
|
23679 | recursiveDOMDelete(this.body.container);
|
23680 | };
|
23681 |
|
23682 |
|
23683 |
|
23684 |
|
23685 |
|
23686 |
|
23687 |
|
23688 |
|
23689 |
|
23690 |
|
23691 | Network.prototype._updateValueRange = function (obj) {
|
23692 | let id;
|
23693 |
|
23694 |
|
23695 | let valueMin = undefined;
|
23696 | let valueMax = undefined;
|
23697 | let valueTotal = 0;
|
23698 | for (id in obj) {
|
23699 | if (Object.prototype.hasOwnProperty.call(obj, id)) {
|
23700 | const value = obj[id].getValue();
|
23701 | if (value !== undefined) {
|
23702 | valueMin = valueMin === undefined ? value : Math.min(value, valueMin);
|
23703 | valueMax = valueMax === undefined ? value : Math.max(value, valueMax);
|
23704 | valueTotal += value;
|
23705 | }
|
23706 | }
|
23707 | }
|
23708 |
|
23709 |
|
23710 | if (valueMin !== undefined && valueMax !== undefined) {
|
23711 | for (id in obj) {
|
23712 | if (Object.prototype.hasOwnProperty.call(obj, id)) {
|
23713 | obj[id].setValueRange(valueMin, valueMax, valueTotal);
|
23714 | }
|
23715 | }
|
23716 | }
|
23717 | };
|
23718 |
|
23719 |
|
23720 |
|
23721 |
|
23722 |
|
23723 |
|
23724 | Network.prototype.isActive = function () {
|
23725 | return !this.activator || this.activator.active;
|
23726 | };
|
23727 |
|
23728 | Network.prototype.setSize = function () {
|
23729 | return this.canvas.setSize.apply(this.canvas, arguments);
|
23730 | };
|
23731 | Network.prototype.canvasToDOM = function () {
|
23732 | return this.canvas.canvasToDOM.apply(this.canvas, arguments);
|
23733 | };
|
23734 | Network.prototype.DOMtoCanvas = function () {
|
23735 | return this.canvas.DOMtoCanvas.apply(this.canvas, arguments);
|
23736 | };
|
23737 |
|
23738 |
|
23739 |
|
23740 |
|
23741 |
|
23742 |
|
23743 |
|
23744 |
|
23745 |
|
23746 |
|
23747 |
|
23748 |
|
23749 |
|
23750 |
|
23751 |
|
23752 |
|
23753 |
|
23754 | Network.prototype.findNode = function () {
|
23755 | return this.clustering.findNode.apply(this.clustering, arguments);
|
23756 | };
|
23757 |
|
23758 | Network.prototype.isCluster = function () {
|
23759 | return this.clustering.isCluster.apply(this.clustering, arguments);
|
23760 | };
|
23761 | Network.prototype.openCluster = function () {
|
23762 | return this.clustering.openCluster.apply(this.clustering, arguments);
|
23763 | };
|
23764 | Network.prototype.cluster = function () {
|
23765 | return this.clustering.cluster.apply(this.clustering, arguments);
|
23766 | };
|
23767 | Network.prototype.getNodesInCluster = function () {
|
23768 | return this.clustering.getNodesInCluster.apply(this.clustering, arguments);
|
23769 | };
|
23770 | Network.prototype.clusterByConnection = function () {
|
23771 | return this.clustering.clusterByConnection.apply(this.clustering, arguments);
|
23772 | };
|
23773 | Network.prototype.clusterByHubsize = function () {
|
23774 | return this.clustering.clusterByHubsize.apply(this.clustering, arguments);
|
23775 | };
|
23776 | Network.prototype.updateClusteredNode = function () {
|
23777 | return this.clustering.updateClusteredNode.apply(this.clustering, arguments);
|
23778 | };
|
23779 | Network.prototype.getClusteredEdges = function () {
|
23780 | return this.clustering.getClusteredEdges.apply(this.clustering, arguments);
|
23781 | };
|
23782 | Network.prototype.getBaseEdge = function () {
|
23783 | return this.clustering.getBaseEdge.apply(this.clustering, arguments);
|
23784 | };
|
23785 | Network.prototype.getBaseEdges = function () {
|
23786 | return this.clustering.getBaseEdges.apply(this.clustering, arguments);
|
23787 | };
|
23788 | Network.prototype.updateEdge = function () {
|
23789 | return this.clustering.updateEdge.apply(this.clustering, arguments);
|
23790 | };
|
23791 |
|
23792 |
|
23793 |
|
23794 |
|
23795 |
|
23796 |
|
23797 |
|
23798 |
|
23799 | Network.prototype.clusterOutliers = function () {
|
23800 | return this.clustering.clusterOutliers.apply(this.clustering, arguments);
|
23801 | };
|
23802 |
|
23803 | Network.prototype.getSeed = function () {
|
23804 | return this.layoutEngine.getSeed.apply(this.layoutEngine, arguments);
|
23805 | };
|
23806 | Network.prototype.enableEditMode = function () {
|
23807 | return this.manipulation.enableEditMode.apply(this.manipulation, arguments);
|
23808 | };
|
23809 | Network.prototype.disableEditMode = function () {
|
23810 | return this.manipulation.disableEditMode.apply(this.manipulation, arguments);
|
23811 | };
|
23812 | Network.prototype.addNodeMode = function () {
|
23813 | return this.manipulation.addNodeMode.apply(this.manipulation, arguments);
|
23814 | };
|
23815 | Network.prototype.editNode = function () {
|
23816 | return this.manipulation.editNode.apply(this.manipulation, arguments);
|
23817 | };
|
23818 | Network.prototype.editNodeMode = function () {
|
23819 | console.warn("Deprecated: Please use editNode instead of editNodeMode.");
|
23820 | return this.manipulation.editNode.apply(this.manipulation, arguments);
|
23821 | };
|
23822 | Network.prototype.addEdgeMode = function () {
|
23823 | return this.manipulation.addEdgeMode.apply(this.manipulation, arguments);
|
23824 | };
|
23825 | Network.prototype.editEdgeMode = function () {
|
23826 | return this.manipulation.editEdgeMode.apply(this.manipulation, arguments);
|
23827 | };
|
23828 | Network.prototype.deleteSelected = function () {
|
23829 | return this.manipulation.deleteSelected.apply(this.manipulation, arguments);
|
23830 | };
|
23831 | Network.prototype.getPositions = function () {
|
23832 | return this.nodesHandler.getPositions.apply(this.nodesHandler, arguments);
|
23833 | };
|
23834 | Network.prototype.getPosition = function () {
|
23835 | return this.nodesHandler.getPosition.apply(this.nodesHandler, arguments);
|
23836 | };
|
23837 | Network.prototype.storePositions = function () {
|
23838 | return this.nodesHandler.storePositions.apply(this.nodesHandler, arguments);
|
23839 | };
|
23840 | Network.prototype.moveNode = function () {
|
23841 | return this.nodesHandler.moveNode.apply(this.nodesHandler, arguments);
|
23842 | };
|
23843 | Network.prototype.getBoundingBox = function () {
|
23844 | return this.nodesHandler.getBoundingBox.apply(this.nodesHandler, arguments);
|
23845 | };
|
23846 | Network.prototype.getConnectedNodes = function (objectId) {
|
23847 | if (this.body.nodes[objectId] !== undefined) {
|
23848 | return this.nodesHandler.getConnectedNodes.apply(
|
23849 | this.nodesHandler,
|
23850 | arguments
|
23851 | );
|
23852 | } else {
|
23853 | return this.edgesHandler.getConnectedNodes.apply(
|
23854 | this.edgesHandler,
|
23855 | arguments
|
23856 | );
|
23857 | }
|
23858 | };
|
23859 | Network.prototype.getConnectedEdges = function () {
|
23860 | return this.nodesHandler.getConnectedEdges.apply(
|
23861 | this.nodesHandler,
|
23862 | arguments
|
23863 | );
|
23864 | };
|
23865 | Network.prototype.startSimulation = function () {
|
23866 | return this.physics.startSimulation.apply(this.physics, arguments);
|
23867 | };
|
23868 | Network.prototype.stopSimulation = function () {
|
23869 | return this.physics.stopSimulation.apply(this.physics, arguments);
|
23870 | };
|
23871 | Network.prototype.stabilize = function () {
|
23872 | return this.physics.stabilize.apply(this.physics, arguments);
|
23873 | };
|
23874 | Network.prototype.getSelection = function () {
|
23875 | return this.selectionHandler.getSelection.apply(
|
23876 | this.selectionHandler,
|
23877 | arguments
|
23878 | );
|
23879 | };
|
23880 | Network.prototype.setSelection = function () {
|
23881 | return this.selectionHandler.setSelection.apply(
|
23882 | this.selectionHandler,
|
23883 | arguments
|
23884 | );
|
23885 | };
|
23886 | Network.prototype.getSelectedNodes = function () {
|
23887 | return this.selectionHandler.getSelectedNodeIds.apply(
|
23888 | this.selectionHandler,
|
23889 | arguments
|
23890 | );
|
23891 | };
|
23892 | Network.prototype.getSelectedEdges = function () {
|
23893 | return this.selectionHandler.getSelectedEdgeIds.apply(
|
23894 | this.selectionHandler,
|
23895 | arguments
|
23896 | );
|
23897 | };
|
23898 | Network.prototype.getNodeAt = function () {
|
23899 | const node = this.selectionHandler.getNodeAt.apply(
|
23900 | this.selectionHandler,
|
23901 | arguments
|
23902 | );
|
23903 | if (node !== undefined && node.id !== undefined) {
|
23904 | return node.id;
|
23905 | }
|
23906 | return node;
|
23907 | };
|
23908 | Network.prototype.getEdgeAt = function () {
|
23909 | const edge = this.selectionHandler.getEdgeAt.apply(
|
23910 | this.selectionHandler,
|
23911 | arguments
|
23912 | );
|
23913 | if (edge !== undefined && edge.id !== undefined) {
|
23914 | return edge.id;
|
23915 | }
|
23916 | return edge;
|
23917 | };
|
23918 | Network.prototype.selectNodes = function () {
|
23919 | return this.selectionHandler.selectNodes.apply(
|
23920 | this.selectionHandler,
|
23921 | arguments
|
23922 | );
|
23923 | };
|
23924 | Network.prototype.selectEdges = function () {
|
23925 | return this.selectionHandler.selectEdges.apply(
|
23926 | this.selectionHandler,
|
23927 | arguments
|
23928 | );
|
23929 | };
|
23930 | Network.prototype.unselectAll = function () {
|
23931 | this.selectionHandler.unselectAll.apply(this.selectionHandler, arguments);
|
23932 | this.selectionHandler.commitWithoutEmitting.apply(this.selectionHandler);
|
23933 | this.redraw();
|
23934 | };
|
23935 | Network.prototype.redraw = function () {
|
23936 | return this.renderer.redraw.apply(this.renderer, arguments);
|
23937 | };
|
23938 | Network.prototype.getScale = function () {
|
23939 | return this.view.getScale.apply(this.view, arguments);
|
23940 | };
|
23941 | Network.prototype.getViewPosition = function () {
|
23942 | return this.view.getViewPosition.apply(this.view, arguments);
|
23943 | };
|
23944 | Network.prototype.fit = function () {
|
23945 | return this.view.fit.apply(this.view, arguments);
|
23946 | };
|
23947 | Network.prototype.moveTo = function () {
|
23948 | return this.view.moveTo.apply(this.view, arguments);
|
23949 | };
|
23950 | Network.prototype.focus = function () {
|
23951 | return this.view.focus.apply(this.view, arguments);
|
23952 | };
|
23953 | Network.prototype.releaseNode = function () {
|
23954 | return this.view.releaseNode.apply(this.view, arguments);
|
23955 | };
|
23956 | Network.prototype.getOptionsFromConfigurator = function () {
|
23957 | let options = {};
|
23958 | if (this.configurator) {
|
23959 | options = this.configurator.getOptions.apply(this.configurator);
|
23960 | }
|
23961 | return options;
|
23962 | };
|
23963 |
|
23964 | const parseDOTNetwork = DOTToGraph;
|
23965 |
|
23966 |
|
23967 |
|
23968 |
|
23969 | export { Network, Images as NetworkImages, dotparser as networkDOTParser, gephiParser as networkGephiParser, options as networkOptions, parseDOTNetwork, parseGephi as parseGephiNetwork };
|
23970 |
|