Tobias/Network-Customelement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dynamic example

Browse Source
This commit is contained in:
Tobias Weise 2025-08-14 18:47:12 +02:00
parent 670432e96e
commit e5d79ea6fb
3 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
dynamic_usage_example.html Executable file → Normal file
View File

@ -8,24 +8,22 @@
<script src="widget.js"></script>
</head>
<body>
<net-graph id="graph2" weighted="true" style="border-style: dotted; width:800px; height:600px;">
<net-graph id="graph2" weighted="true" style="width:800px; height:600px;">
{
"nodes": [
[ 1, { "radius": 5, "color": "yellow"} ],
[ "orange", { "radius": 5, "color": "orange"} ],
[ 2, { "radius": 15, "color": "green"} ],
[ 3, { "radius": 25, "color": "red"} ]
],
"edges": [
[1, 2, {"color": "red"}]
["orange", 2]
]
}
</net-graph>
<net-graph id="graph" weighted="true" style="border-style: dotted; width:800px; height:600px;" />
<net-graph id="graph" weighted="true" style="width:800px; height:600px;" />
<script>
let ele = document.getElementById("graph");

4
usage_example.html Executable file → Normal file
View File

@ -11,8 +11,8 @@
<net-graph style="border-style: dotted; width:800px; height:600px;">
{
"nodes": [
[ 1, { "radius": 5, "color": "yellow"} ],
[ 2, { "radius": 15, "color": "green"} ],
[ 1, { "radius": 5, "color": "yellow", "label": "Sun"} ],
[ 2, { "radius": 15, "color": "green", "label": "Jupyter"} ],
[ 3, { "radius": 25, "color": "red"} ]
],
"edges": [

30
widget.js Executable file → Normal file
View File

@ -19,17 +19,16 @@ class NetGraphElement extends HTMLElement {
let style = this.hasAttribute('style') ? this.getAttribute('style') : "";
let weighted = this.hasAttribute('weighted') ? JSON.parse(this.getAttribute('weighted')) : false;
let withLabels = this.hasAttribute('withLabels') ? JSON.parse(this.getAttribute('withLabels')) : true;
let label_color = this.hasAttribute('labelColor') ? this.getAttribute('labelColor') : "black";
this.content_div.style = style;
let that = this;
jsnx.draw(that.G, {
element: that.content_div,
weighted,
withLabels,
labelStyle: {fill: 'white'},
labelStyle: {fill: label_color},
edgeStyle: {
'stroke-width': 5,
fill: d => d.data[0].color
@ -38,28 +37,28 @@ class NetGraphElement extends HTMLElement {
fill: d => d.data.color
},
nodeAttr: {
r: d => d.data.radius | 10
r: d => d.data.radius | 10,
title: d => d.label
}
}, true); //true ensures redrawing
this.slot_ele.addEventListener('slotchange', e => {
try{
let text = that.innerText.trim();
let{nodes, edges} = JSON.parse(text);
that.G.addNodesFrom(nodes, {color: 'black'} );
that.G.addEdgesFrom(edges, {color: 'black'} );
}
catch(e){
let text = that.innerText.trim();
let{nodes, edges} = JSON.parse(text);
for(let[id, data] of nodes){
that.G.addNode(id, data);
}
for(let[a, b, data] of edges){
that.G.addEdge(a, b, data);
}
jsnx.draw(that.G, {
element: that.content_div,
weighted,
withLabels,
labelStyle: {fill: 'white'},
labelStyle: {fill: label_color},
edgeStyle: {
'stroke-width': 5,
fill: d => d.data[0].color
@ -68,12 +67,11 @@ class NetGraphElement extends HTMLElement {
fill: d => d.data.color
},
nodeAttr: {
r: d => d.data.radius | 10
r: d => d.data.radius | 10,
title: d => d.label
}
}, true); //true ensures redrawing
that.slot_ele.style.display = "none";
that.content_div.children[0].setAttribute("width", that.content_div.style.width);
that.content_div.children[0].setAttribute("height", that.content_div.style.height);