-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
63 lines (49 loc) · 1.73 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node Editor</title>
<link rel="stylesheet" href="style/editor.css">
</head>
<body>
<div id="header">
Node Editor [alpha] - Only works with mouse events and recent desktop browsers
<ul>
<li>middle button click to pan around</li>
<li>wheel to zoom</li>
<li>ctrl-click or shift-click for multi select</li>
</ul>
</div>
<node-editor>
<node-ui slot="nodes" data-name="node1" data-x="100" data-y="200"></node-ui>
<node-ui slot="nodes" data-name="node2" data-x="400" data-y="200"></node-ui>
<node-ui slot="nodes" data-name="node3" data-x="700" data-y="200"></node-ui>
</node-editor>
<script type="module">
import EditorUI from './modules/ui/editorui.js'
import NodeUI from './modules/ui/nodeui.js'
window.customElements.define('node-editor', EditorUI);
window.customElements.define('node-ui', NodeUI);
/*const editor = new EditorUI(document.querySelector('#editor'));
const node1 = new NodeUI(null, 'key pair');
editor.workspace.addNode(node1);
node1.createOutput('private key', 'pk');
node1.createOutput('public key', 'pk');
node1.createInput('user', 'u');
node1.move(50,20);
const node2 = new NodeUI(null, 'crypto');
node2.createInput('key', 'key');
node2.createInput('key2', 'key');
node2.createOutput('result', 'res');
editor.workspace.addNode(node2);
node2.move(700,100);
const node3 = new NodeUI(null, 'node3');
editor.workspace.addNode(node3);
node3.createInput('key', 'key');
node3.createInput('key2', 'key');
node3.createOutput('result', 'res');
node3.createOutput('result2', 'res');
node3.move(500,350);*/
</script>
</body>
</html>