-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
144 lines (125 loc) · 3.94 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html>
<head>
<script src="ned.js"></script>
<script src="https://bumbu.me/svg-pan-zoom/dist/svg-pan-zoom.min.js"></script>
<link rel="stylesheet" type="text/css" href="ned.css">
<style type="text/css">
body {
height: 100vh;
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
overflow-y: hidden;
}
#info p {
margin: 4;
}
#svg {
width: calc(100% - 2px);
height: 100%;
border: 1px solid #000;
cursor: crosshair;
/* disable text selection on svg */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
</style>
</head>
<body>
<div id="info">
<p><input id="snapInput" type="number" min="0" value="10"/> Snap distance (0 = disabled)</p>
<p>Drag middle mouse button to pan and scroll to zoom.</p>
<p>Drag left mouse button to move nodes.</p>
<p>Drag left mouse button to link nodes.</p>
<p>Press left mouse button on a path to unlink nodes.</p>
</div>
<svg id="svg" oncontextmenu="return false;">
<defs>
<pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
</pattern>
<pattern id="bigGrid" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#smallGrid)"/>
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
</pattern>
</defs>
<rect id="grid" width="500%" height="500%" fill="url(#bigGrid)" />
</svg>
<script>
var grid = document.querySelector("#grid");
var editor = Ned.create("#svg");
editor.snapping = 10;
//editor.singleInputs = true;
//editor.singleOutputs = true;
// only enable middle mouse button dragging
editor.svg.addEventListener("mousedown", (e) => {
if (e.button !== 1) e.stopImmediatePropagation();
});
function updateGrid() {
var zoom = this.getZoom();
var pan = this.getPan();
grid.setAttribute("x", -pan.x / zoom);
grid.setAttribute("y", -pan.y / zoom);
}
editor.panZoom = svgPanZoom(editor.svg, {
viewportSelector: ".svg-pan-zoom_viewport",
panEnabled: true,
controlIconsEnabled: true,
zoomEnabled: true,
dblClickZoomEnabled: false,
mouseWheelZoomEnabled: true,
preventMouseEventsDefault: false,
zoomScaleSensitivity: 0.2,
minZoom: 0.2,
maxZoom: 10,
fit: false,
contain: false,
center: false,
refreshRate: "auto",
onPan: updateGrid,
onZoom: updateGrid,
});
editor.screenToWorld = function(pos) {
var rect = this.svg.getBoundingClientRect();
var pan = this.panZoom.getPan();
var zoom = this.panZoom.getZoom();
return {
x: (((pos.x - rect.left) - pan.x) / zoom),
y: (((pos.y - rect.top) - pan.y) / zoom)
};
};
window.addEventListener("resize", (e) => {
editor.panZoom.resize();
}, true);
var snapInput = document.querySelector("#snapInput");
snapInput.addEventListener("input", (e) => {
editor.snapping = +e.target.value;
}, true);
// after setup create nodes
var n1 = editor.createNode("Test node");
n1.position = { x: 400, y: 280};
n1.size = { width: 180, height: 90 };
var n1i1 = n1.addInput("");
var n1i2 = n1.addInput("Input B");
var n1o1 = n1.addOutput("Output A");
var n1o2 = n1.addOutput("Output B");
var n2 = editor.createNode("Start");
n2.position = { x: 100, y: 150};
n2.size = { width: 100, height: 60 };
var n2o1 = n2.addOutput("Output");
n2o1.connectTo(n1i2);
var n3 = editor.createNode("Other test");
n3.position = { x: 200, y: 10};
n3.size = { width: 180, height: 60 };
var n3i1 = n3.addInput("Input B");
var n3o1 = n3.addOutput("Output");
</script>
</body>
</html>