-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (62 loc) · 2.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="./css/nodes.css">
</head>
<body>
<svg id="workspace" width="500" height="500">
<g v-for="node in workspace.nodes">
<g v-for="start in node.properties">
<path v-for="connection in start.outgoing" class="node-connector" :d="connection.path"></path>
</g>
</g>
<g v-for="node in workspace.nodes" :class="'node ' + node.cls">
<rect class="node-bg" rx="15" ry="15" :x="node.x" :y="node.y" :width="node.width" :height="node.height"></rect>
<rect v-if="node.collapsed"
class="node-header"
@mousedown.prevent="workspace.dragController.onMouseDownNode($event, node)"
@dblclick.prevent="node.collapsed = !node.collapsed"
rx=15 ry=15
:x="node.x" :y="node.y"
:width="node.width" height=30
></rect>
<path v-if="!node.collapsed"
class="node-header"
@mousedown.prevent="workspace.dragController.onMouseDownNode($event, node)"
@dblclick.prevent="node.collapsed = !node.collapsed"
:d="node.headerPath"
></path>
<text
class="node-title"
@mousedown.prevent="workspace.dragController.onMouseDownNode($event, node)"
@dblclick.prevent="node.collapsed = !node.collapsed"
:x="node.x + 15"
:y="node.y + 20"
:clip-path="node.headerClip"
>{{node.title}}</text>
<rect class="node-outline" rx="15" ry="15" :x="node.x" :y="node.y" :width="node.width" :height="node.height"></rect>
<g v-if="!node.collapsed" v-for="(prop, index) in node.properties">
<circle
v-if="prop.hasInlet"
@mousedown.prevent="workspace.dragController.onMouseDownInlet($el, $event, prop)"
@mouseenter="workspace.dragController.onMouseEnterInlet(prop, index)"
@mouseleave="workspace.dragController.onMouseLeaveInlet(prop)"
:class="{'node-inlet': true, highlighted: prop.highlighted, attached: prop.incoming}"
r="5" :cx="prop.inletX" :cy="prop.y(index)"
></circle>
<circle
v-if="prop.hasOutlet"
@mousedown.prevent="workspace.dragController.onMouseDownOutlet($el, $event, prop, index)"
class="node-outlet"
r="5"
:cx="prop.outletX"
:cy="prop.y(index)"
></circle>
<text class="property-text" :x="prop.textX" :y="prop.textY(index)" :text-anchor="prop.anchor">{{prop.text}}</text>
</g>
</g>
</svg>
<script src="./assets/bundle.js"></script>
</body>
</html>