-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdebug.html
87 lines (80 loc) · 3.35 KB
/
debug.html
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<script>window.__graphElementsLogging = true;</script>
<!-- ResizeObserver -->
<script src="https://cdn.jsdelivr.net/gh/que-etc/resize-observer-polyfill/dist/ResizeObserver.global.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js" async></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js" async></script>
<script src="https://d3js.org/d3-quadtree.v1.min.js" async></script>
<script src="https://d3js.org/d3-timer.v1.min.js" async></script>
<script src="https://d3js.org/d3-force.v1.min.js" async></script>
<script src="build/elements/graph-detail-view/graph-detail-view.js" type="module" async></script>
<script src="build/elements/graph-tracker/graph-tracker.js" type="module" async></script>
<script src="build/elements/graph-modifier/graph-modifier.js" type="module" async></script>
<script src="build/elements/graph-contextmenu/graph-contextmenu.js" type="module" async></script>
<script src="build/elements/graph-d3-force/extensions/contextmenu.js" type="module" async></script>
<script src="build/elements/graph-display/graph-display.js" type="module" async></script>
<script src="https://hammerjs.github.io/dist/hammer.min.js" async></script>
<script type="module">
import Graph from "https://cdn.jsdelivr.net/gh/mhelvens/graph.js/dist/graph.es6.js";
window.Graph = Graph;
const graph = new Graph;
graph.addVertex(0);
graph.addVertex(1);
graph.addEdge(0, 1);
const _nodes = 1e2;
const _edges = 3e2;
for(let i = 2; i < _nodes; ++i) graph.addVertex(i, {x:Math.random()*100,y:Math.random()*100});
// for(let i = 0; i < 3e2; ++i) graph.addEdge(Math.floor(Math.random() * 100), Math.floor(Math.random() * 100));
for(let i = 0, a; i < _edges; ++i) graph.addEdge(a = Math.floor(Math.random() * _nodes), (a + 1) % _nodes);
window.graph = graph;
window.graphForce = (graph.shadowRoot || document).querySelector("graph-d3-force");
const configuration = {
alpha: 1,
link: {
distance: 30,
strength: 0.2
},
charge: {
strength: -400
},
gravitation: {
strength: .1
}
};
graphForce.configuration = configuration;
(async() => {
await customElements.whenDefined("graph-display");
const graphDisplay = document.querySelector("graph-display");
graphDisplay.graph = graph;
window.graphDisplay = graphDisplay;
await customElements.whenDefined("graph-d3-force");
// graphForce.start();
// window.svg = SVG().addTo(graphDisplay.svg);
})();
</script>
<style>
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
}
</style>
</head>
<body>
<graph-display>
<graph-d3-force></graph-d3-force>
<graph-tracker pan-zooming="true"></graph-tracker>
<graph-modifier></graph-modifier>
<graph-contextmenu></graph-contextmenu>
<!--<graph-detail-view>
<div>
test
</div>
</graph-detail-view>-->
</graph-display>
</body>
</html>