cytoscape-dom-node 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -0
- package/demo/LICENSE +21 -0
- package/demo/Makefile +18 -0
- package/demo/package-lock.json +5941 -0
- package/demo/package.json +25 -0
- package/demo/public/index.css +26 -0
- package/demo/public/index.html +18 -0
- package/demo/public/snapshots.html +32 -0
- package/demo/src/index.js +109 -0
- package/demo/webpack.config.js +41 -0
- package/package.json +3 -4
- package/src/index.js +4 -2
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "cytoscape-dom-node-demo",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Cytoscape DOM node demo",
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"author": {
|
|
7
|
+
"name": "Michael Wright",
|
|
8
|
+
"email": "michael.wright@sky.uk"
|
|
9
|
+
},
|
|
10
|
+
"license": "LicenseRef-LICENSE",
|
|
11
|
+
"private": true,
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"cytoscape": "^3.19.0",
|
|
14
|
+
"cytoscape-cose-bilkent": "^4.1.0",
|
|
15
|
+
"html2canvas": "^1.4.1"
|
|
16
|
+
},
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@babel/core": "^7.9.6",
|
|
19
|
+
"@babel/preset-react": "^7.9.4",
|
|
20
|
+
"babel-loader": "^8.1.0",
|
|
21
|
+
"webpack": "^4.46.0",
|
|
22
|
+
"webpack-cli": "^3.3.12",
|
|
23
|
+
"webpack-dev-server": "^3.11.0"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
html, body {
|
|
2
|
+
width: 100vw;
|
|
3
|
+
height: 100vh;
|
|
4
|
+
margin: 0;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
#cytoscape-dom-node-demo-container {
|
|
8
|
+
width: 100vw;
|
|
9
|
+
height: 100vh;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#snapslot-link-container {
|
|
13
|
+
position: absolute;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: 0;
|
|
16
|
+
transform: translate(10px, 10px);
|
|
17
|
+
padding: 0 5px;
|
|
18
|
+
background-color: white;
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
text-decoration: none;
|
|
21
|
+
z-index: 100;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.my-cy-node {
|
|
25
|
+
background-color: #e55;
|
|
26
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Cytoscape DOM node demo</title>
|
|
4
|
+
|
|
5
|
+
<script src="cytoscape-dom-node-demo.bundle.js"></script>
|
|
6
|
+
<link rel="stylesheet" href="index.css"></link>
|
|
7
|
+
</head>
|
|
8
|
+
|
|
9
|
+
<body>
|
|
10
|
+
<div id='cytoscape-dom-node-demo-container'/>
|
|
11
|
+
</body>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
cytoscape_dom_node_demo.default(
|
|
15
|
+
document.getElementById('cytoscape-dom-node-demo-container')
|
|
16
|
+
);
|
|
17
|
+
</script>
|
|
18
|
+
</html>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Cytoscape DOM node demo</title>
|
|
4
|
+
|
|
5
|
+
<script src="cytoscape-dom-node-demo.bundle.js"></script>
|
|
6
|
+
<link rel="stylesheet" href="index.css"></link>
|
|
7
|
+
</head>
|
|
8
|
+
|
|
9
|
+
<body>
|
|
10
|
+
<div id="cytoscape-dom-node-demo-container"></div>
|
|
11
|
+
<div id="snapslot-link-container">
|
|
12
|
+
<a id="snapslot-link">Cytoscape PNG</a>
|
|
13
|
+
<br/>
|
|
14
|
+
<a id="snapslot-link">Canvas2HTML</a>
|
|
15
|
+
</div>
|
|
16
|
+
</body>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
let cy = cytoscape_dom_node_demo.default(document.getElementById('cytoscape-dom-node-demo-container'));
|
|
20
|
+
|
|
21
|
+
let snapshot_interval = setInterval(async () => {
|
|
22
|
+
let cy_png = cy.png();
|
|
23
|
+
document.getElementById('snapslot-link-container').getElementsByTagName('a')[0].href = cy_png;
|
|
24
|
+
|
|
25
|
+
let snapshot_target_el = document.getElementById('cytoscape-dom-node-demo-container');
|
|
26
|
+
let snapshot = await cytoscape_dom_node_demo.snapshot(snapshot_target_el);
|
|
27
|
+
document.getElementById('snapslot-link-container').getElementsByTagName('a')[1].href = snapshot;
|
|
28
|
+
|
|
29
|
+
console.log('snapshot refreshed')
|
|
30
|
+
}, 2000);
|
|
31
|
+
</script>
|
|
32
|
+
</html>
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import cytoscape from 'cytoscape';
|
|
2
|
+
import cytoscapeCoseBilkent from 'cytoscape-cose-bilkent';
|
|
3
|
+
import cytoscapeDomNode from 'cytoscape-dom-node';
|
|
4
|
+
import html2canvas from 'html2canvas';
|
|
5
|
+
|
|
6
|
+
cytoscape.use(cytoscapeCoseBilkent);
|
|
7
|
+
cytoscape.use(cytoscapeDomNode);
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
function entry (cy_dom_el) {
|
|
11
|
+
let cy = cytoscape({
|
|
12
|
+
'container': cy_dom_el,
|
|
13
|
+
'elements': [],
|
|
14
|
+
'style': [{
|
|
15
|
+
'selector': 'node',
|
|
16
|
+
'style': {
|
|
17
|
+
'background-opacity': 0,
|
|
18
|
+
},
|
|
19
|
+
}],
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
// enable extension for instance
|
|
23
|
+
|
|
24
|
+
cy.domNode();
|
|
25
|
+
|
|
26
|
+
// run the layout
|
|
27
|
+
|
|
28
|
+
function layout() {
|
|
29
|
+
cy.layout({
|
|
30
|
+
'name': 'cose-bilkent',
|
|
31
|
+
'randomize': false,
|
|
32
|
+
}).run();
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// return a definition for a new node, with randomly sized DOM
|
|
36
|
+
// element to make it more interesting
|
|
37
|
+
|
|
38
|
+
function cy_node_def (label, rp) {
|
|
39
|
+
let id = `n${cy.nodes().length}`;
|
|
40
|
+
let div = document.createElement("div");
|
|
41
|
+
div.innerHTML = `node ${id}`;
|
|
42
|
+
div.classList = ['my-cy-node'];
|
|
43
|
+
div.style.width = `${Math.floor(Math.random() * 40) + 60}px`;
|
|
44
|
+
div.style.height = `${Math.floor(Math.random() * 30) + 50}px`;
|
|
45
|
+
|
|
46
|
+
return {
|
|
47
|
+
'data': {
|
|
48
|
+
'id': id,
|
|
49
|
+
'label': label || `n${cy.nodes().length}`,
|
|
50
|
+
'dom': div,
|
|
51
|
+
},
|
|
52
|
+
'renderedPosition': rp,
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// add the first node
|
|
57
|
+
|
|
58
|
+
cy.add(cy_node_def());
|
|
59
|
+
layout();
|
|
60
|
+
|
|
61
|
+
let last_added_id = 'n0';
|
|
62
|
+
let last_extended_id = 'n0';
|
|
63
|
+
|
|
64
|
+
// add another node every 2 seconds
|
|
65
|
+
|
|
66
|
+
let interval = setInterval(() => {
|
|
67
|
+
let action = Math.floor(Math.random() * 8);
|
|
68
|
+
|
|
69
|
+
let cy_n_id = action == 0
|
|
70
|
+
? cy.nodes()[Math.floor(Math.random() * cy.nodes().length)].id()
|
|
71
|
+
: action < 5
|
|
72
|
+
? last_added_id
|
|
73
|
+
: last_extended_id;
|
|
74
|
+
|
|
75
|
+
let cy_n = cy.getElementById(cy_n_id);
|
|
76
|
+
|
|
77
|
+
let new_n_cydef = cy_node_def(undefined, cy_n.renderedPosition());
|
|
78
|
+
let new_n_id = new_n_cydef.data.id;
|
|
79
|
+
let new_e_cydef = {'data': {'id': new_n_id + '_' + cy_n_id, 'source': new_n_id, 'target': cy_n_id}};
|
|
80
|
+
|
|
81
|
+
cy.add(new_n_cydef);
|
|
82
|
+
cy.add(new_e_cydef);
|
|
83
|
+
|
|
84
|
+
last_added_id = new_n_id;
|
|
85
|
+
last_extended_id = cy_n_id;
|
|
86
|
+
|
|
87
|
+
layout();
|
|
88
|
+
}, 2000);
|
|
89
|
+
|
|
90
|
+
setTimeout(function () {
|
|
91
|
+
clearInterval(interval);
|
|
92
|
+
}, 60000);
|
|
93
|
+
|
|
94
|
+
return cy;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
async function snapshot (target_dom_el) {
|
|
99
|
+
let canvas = await html2canvas(target_dom_el);
|
|
100
|
+
let url = canvas.toDataURL("image/jpeg");
|
|
101
|
+
|
|
102
|
+
return url;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
export {
|
|
107
|
+
entry as default,
|
|
108
|
+
snapshot as snapshot,
|
|
109
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
const path = require('path');
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
module.exports = {
|
|
5
|
+
'entry': {
|
|
6
|
+
'index': './src/index.js',
|
|
7
|
+
},
|
|
8
|
+
'output': {
|
|
9
|
+
'library': 'cytoscape_dom_node_demo',
|
|
10
|
+
'path': path.join(__dirname, 'public'),
|
|
11
|
+
'filename': 'cytoscape-dom-node-demo.bundle.js',
|
|
12
|
+
},
|
|
13
|
+
'node': {
|
|
14
|
+
'fs': 'empty',
|
|
15
|
+
'net': 'empty',
|
|
16
|
+
'tls': 'empty',
|
|
17
|
+
},
|
|
18
|
+
'devServer': {
|
|
19
|
+
'contentBase': path.join(__dirname, 'public'),
|
|
20
|
+
'watchContentBase': true,
|
|
21
|
+
},
|
|
22
|
+
'module': {
|
|
23
|
+
'rules': [{
|
|
24
|
+
'test': /\.(js|jsx)$/,
|
|
25
|
+
'use': {
|
|
26
|
+
'loader': 'babel-loader',
|
|
27
|
+
'options': {
|
|
28
|
+
'presets': ['@babel/preset-react'],
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
}],
|
|
32
|
+
},
|
|
33
|
+
'target': 'web',
|
|
34
|
+
'mode': process.env.NODE_ENV || 'production',
|
|
35
|
+
'resolve': {
|
|
36
|
+
'alias': {
|
|
37
|
+
'cytoscape-dom-node': path.resolve('..'),
|
|
38
|
+
'cytoscape': path.resolve('node_modules', 'cytoscape'),
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cytoscape-dom-node",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Cytoscape extension for making nodes into DOM elements",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"cytoscape",
|
|
@@ -29,11 +29,10 @@
|
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"cytoscape": "^3.19.0"
|
|
31
31
|
},
|
|
32
|
-
"dependencies": {},
|
|
33
32
|
"devDependencies": {
|
|
34
|
-
"grunt": "^1.
|
|
33
|
+
"grunt": "^1.5.3",
|
|
35
34
|
"grunt-cli": "^1.4.3",
|
|
36
|
-
"grunt-git": "^1.
|
|
35
|
+
"grunt-git": "^1.1.1",
|
|
37
36
|
"load-grunt-tasks": "^5.1.0"
|
|
38
37
|
}
|
|
39
38
|
}
|
package/src/index.js
CHANGED
|
@@ -24,7 +24,7 @@ class CytoscapeDomNode {
|
|
|
24
24
|
let node_div = e.target;
|
|
25
25
|
let id = node_div.__cy_id;
|
|
26
26
|
let n = cy.getElementById(id);
|
|
27
|
-
n.style({'width': node_div.offsetWidth, 'height': node_div.offsetHeight});
|
|
27
|
+
n.style({'width': node_div.offsetWidth, 'height': node_div.offsetHeight, shape: 'rectangle'});
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
|
|
@@ -70,7 +70,9 @@ class CytoscapeDomNode {
|
|
|
70
70
|
if (!data.dom)
|
|
71
71
|
return;
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
if (data.skip_node_append !== true) {
|
|
74
|
+
this._nodes_dom_container.appendChild(data.dom);
|
|
75
|
+
}
|
|
74
76
|
data.dom.__cy_id = n.id();
|
|
75
77
|
|
|
76
78
|
this._node_dom[n.id()] = data.dom;
|