Skip to content

Commit 039c936

Browse files
wassfilawassfila
committed
now the physics and svg are up and running (previous is gitingore only)
1 parent 0ff50e8 commit 039c936

File tree

15 files changed

+817
-0
lines changed

15 files changed

+817
-0
lines changed

‎README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,31 @@
11
# graphysics
22
Graph with Physics, No nodes overlap, morph nodes to properties and groups
3+
4+
# Features
5+
6+
# Features Plan
7+
* Update Graph
8+
* startup Demo
9+
* Right click and select samples
10+
* Drag and drop .graphml .Graphson
11+
* Query Gremlin server
12+
* svg full screen
13+
* vertices menu
14+
* context menu
15+
* Mouse actions
16+
* highlight neighbors
17+
* bring neighbors closer
18+
* reference node centrality layout of the whole graph
19+
* reference node / edge Gremlin query
20+
* Swap between :
21+
* proprties
22+
* nodes
23+
* groups
24+
* Hierarchical and cross Grouping
25+
26+
# Development details
27+
* Matter js as physics engine
28+
* svr render base, no update
29+
30+
# References
31+
Follow project up from [NetworkGraphs/graph2d](https://github.com/NetworkGraphs/graph2d)

‎config.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"default_graph_file":"./data/GraphSON_blueprints.json",
3+
"render":{
4+
"font":"20px Arial",
5+
"margin":3
6+
}
7+
}

‎data/GraphSON_blueprints.json‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
{
2+
"graph": {
3+
"mode":"NORMAL",
4+
"vertices": [
5+
{
6+
"name": "lop",
7+
"lang": "java",
8+
"_id": "3",
9+
"_type": "vertex"
10+
},
11+
{
12+
"name": "vadas",
13+
"age": 27,
14+
"_id": "2",
15+
"_type": "vertex"
16+
},
17+
{
18+
"name": "marko",
19+
"age": 29,
20+
"_id": "1",
21+
"_type": "vertex"
22+
},
23+
{
24+
"name": "peter",
25+
"age": 35,
26+
"_id": "6",
27+
"_type": "vertex"
28+
},
29+
{
30+
"name": "ripple",
31+
"lang": "java",
32+
"_id": "5",
33+
"_type": "vertex"
34+
},
35+
{
36+
"name": "josh",
37+
"age": 32,
38+
"_id": "4",
39+
"_type": "vertex"
40+
}
41+
],
42+
"edges": [
43+
{
44+
"weight": 1,
45+
"_id": "10",
46+
"_type": "edge",
47+
"_outV": "4",
48+
"_inV": "5",
49+
"_label": "created"
50+
},
51+
{
52+
"weight": 0.5,
53+
"_id": "7",
54+
"_type": "edge",
55+
"_outV": "1",
56+
"_inV": "2",
57+
"_label": "knows"
58+
},
59+
{
60+
"weight": 0.4000000059604645,
61+
"_id": "9",
62+
"_type": "edge",
63+
"_outV": "1",
64+
"_inV": "3",
65+
"_label": "created"
66+
},
67+
{
68+
"weight": 1,
69+
"_id": "8",
70+
"_type": "edge",
71+
"_outV": "1",
72+
"_inV": "4",
73+
"_label": "knows"
74+
},
75+
{
76+
"weight": 0.4000000059604645,
77+
"_id": "11",
78+
"_type": "edge",
79+
"_outV": "4",
80+
"_inV": "3",
81+
"_label": "created"
82+
},
83+
{
84+
"weight": 0.20000000298023224,
85+
"_id": "12",
86+
"_type": "edge",
87+
"_outV": "6",
88+
"_inV": "3",
89+
"_label": "created"
90+
}
91+
]
92+
}
93+
}

‎index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head>
3+
<title>Graph with physics</title>
4+
<script src="./libs/matter.min.js"></script>
5+
</head>
6+
<body>
7+
<script src="./src/main.js?v=383d705a352" type="module"></script>
8+
</body>
9+
</html>

‎libs/matter.min.js‎

Lines changed: 96 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎libs/svg_utils.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import {defined,html} from "./web-js-utils.js"
2+
3+
class Svg{
4+
constructor(svg_element){
5+
this.el = svg_element
6+
}
7+
set_parent(svg_element){
8+
this.el = svg_element
9+
}
10+
11+
path(d,color,opacity){
12+
return html(this.el,
13+
/*html*/`<path d="${d}" stroke="red" stroke-width="0" fill="${color}" fill-opacity="${opacity}"/>`
14+
)
15+
}
16+
17+
text(x,y,str){
18+
html(this.el,/*html*/`<text x="${x}" y="${y}">${str}</text>`)
19+
}
20+
21+
circle(x,y,params={}){
22+
//if(!defined(params.parent)){parent=this.el}
23+
let if_id = (defined(params.id))?`id=${params.id}`:""
24+
return html(this.el,
25+
/*html*/`<circle ${if_id} cx=${x} cy=${y} r="3" stroke="black" stroke-width="3" fill="red" />`
26+
);
27+
}
28+
29+
circ(x,y){
30+
//if(parent==null){parent=this.el}
31+
return html(this.el,
32+
/*html*/`<circle cx=${x} cy=${y} r="3" stroke="black" stroke-width="3" fill="red" />`
33+
);
34+
}
35+
36+
circle_p_id(parent,x,y,id){
37+
//
38+
return html(parent,
39+
/*html*/`<circle id=${id} cx=${x} cy=${y} r="3" stroke="black" stroke-width="2" fill="#1F7BFD" />`
40+
);
41+
}
42+
43+
rect(x,y,w,h){
44+
return html(this.el,
45+
/*html*/`<rect x="${x}" y="${y}" rx="3" width="${w}" height="${h}" stroke="black" stroke-width="0" fill="green" />`
46+
);
47+
}
48+
49+
box(b){
50+
return html(this.el,
51+
/*html*/`<rect x="${b.x}" y="${b.y}" rx="5" width="${b.width}" height="${b.height}" stroke="black" stroke-width="0" fill="green" />`
52+
);
53+
}
54+
55+
eline(e,col){
56+
let d = `M ${e.v1.x} ${e.v1.y} L ${e.v2.x} ${e.v2.y} `
57+
return html(this.el,
58+
/*html*/`<path d="${d}" stroke="${col}" stroke-width="2" />`
59+
)
60+
}
61+
62+
line(l,col){
63+
let d = `M ${l.p1.x} ${l.p1.y} L ${l.p2.x} ${l.p2.y} `
64+
return html(this.el,
65+
/*html*/`<path d="${d}" stroke="${col}" stroke-width="2" />`
66+
)
67+
}
68+
69+
pline(v1,v2,col){
70+
let d = `M ${v1.x} ${v1.y} L ${v2.x} ${v2.y} `
71+
return html(this.el,
72+
/*html*/`<path d="${d}" stroke="${col}" stroke-width="1" />`
73+
)
74+
}
75+
76+
pattern(parent,url,w,h){
77+
return html(parent,/*html*/`
78+
<defs>
79+
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1" >
80+
<image x="0" y="0" xlink:href=${url} ></image>
81+
</pattern>
82+
</defs>
83+
<rect width="${w}" height="${h}" fill="url(#image)" fill-opacity="0.1"/>
84+
`)
85+
}
86+
87+
filter_turb_disp(parent,params){
88+
return html(parent,/*html*/`
89+
<filter id="${params.id}">
90+
<feTurbulence type="turbulence" baseFrequency="${params.turb_freq}"
91+
numOctaves="2" result="turbulence"/>
92+
<feDisplacementMap in2="turbulence" in="SourceGraphic"
93+
scale="${params.disp_scale}" xChannelSelector="R" yChannelSelector="A"/>
94+
</filter>
95+
`)
96+
}
97+
98+
save(fileName,evg_element=null){
99+
if(evg_element == null){evg_element = this.el}
100+
let s = new XMLSerializer();
101+
const svg_str = s.serializeToString(evg_element);
102+
var blob = new Blob([svg_str], {type: 'image/svg+xml'});
103+
saveAs(blob, fileName);
104+
}
105+
106+
}
107+
108+
export{
109+
Svg
110+
}

‎libs/web-js-utils.js‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
2+
let template = document.createElement("template")
3+
4+
function defined(obj){
5+
return (typeof(obj) != "undefined")
6+
}
7+
8+
function uid(){
9+
return Date.now()+"_"+Math.floor(Math.random() * 10000)
10+
}
11+
12+
function suid(){
13+
let date = (Date.now()).toString();
14+
const sub = date.substring(date.length-6,date.length-1);
15+
return sub+"_"+Math.floor(Math.random() * 10000)
16+
}
17+
18+
function send(event_name,data){
19+
var event = new CustomEvent(event_name, {detail:data});
20+
window.dispatchEvent(event);
21+
}
22+
23+
function temp(html_text){
24+
const fragment = document.createRange().createContextualFragment(html_text);
25+
template.appendChild(fragment);//this also returns fragment, not the newly created node
26+
return template.childNodes[template.childNodes.length-1];
27+
}
28+
29+
function html(parent,html_text){
30+
parent.insertAdjacentHTML("beforeend",html_text);
31+
return parent.childNodes[parent.childNodes.length-1];
32+
}
33+
34+
function htmls(parent,html_text){
35+
parent.insertAdjacentHTML("beforeend",html_text);
36+
return parent.childNodes;
37+
}
38+
39+
function html_tag(parent,tagName,html_text){
40+
console.warn("html_tag() deprecated, replace with html()")
41+
parent.insertAdjacentHTML("beforeend",html_text);
42+
let elements = parent.getElementsByTagName(tagName);
43+
let res_svg = elements[elements.length-1];
44+
return res_svg;
45+
}
46+
47+
function css(sheet,text){
48+
sheet.insertRule(text);
49+
}
50+
51+
function br(parent){
52+
parent.appendChild(document.createElement("br"))
53+
}
54+
55+
function hr(parent){
56+
parent.appendChild(document.createElement("hr"))
57+
}
58+
59+
function image(parent,url){
60+
return html_tag(parent,"image",/*html*/`
61+
<image x="0" y="0" xlink:href=${url}></image>
62+
`)
63+
}
64+
65+
//mini jQuery like events wrapper
66+
class Events{
67+
constructor(){
68+
const events_list = ["click","change","input"]
69+
events_list.forEach((evtName)=>{
70+
this[evtName] = (element,func)=> {
71+
element.addEventListener(evtName,func)
72+
}
73+
})
74+
}
75+
}
76+
77+
function save_json(object,fileName){
78+
const json_str = JSON.stringify(object,null,'\t');
79+
var blob = new Blob([json_str], {type: 'application/json'});
80+
saveAs(blob, fileName);
81+
}
82+
83+
function rand_col() {
84+
const letters = '0123456789ABCDEF';
85+
let color = '#';
86+
for (let i = 0; i < 6; i++) {
87+
color += letters[Math.floor(Math.random() * 16)];
88+
}
89+
return color;
90+
}
91+
92+
function clear(element){
93+
let children = [ ...element.children];
94+
children.forEach((child)=>{
95+
child.parentElement.removeChild(child)
96+
})
97+
}
98+
99+
100+
101+
export{
102+
html,
103+
br,hr,
104+
defined,
105+
Events,
106+
save_json,
107+
rand_col,
108+
image,
109+
uid,
110+
suid,
111+
send,
112+
temp,
113+
css,
114+
html_tag,
115+
htmls,
116+
clear
117+
}

‎package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)