-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathscxmleditor.html
97 lines (92 loc) · 5.34 KB
/
scxmleditor.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
<!DOCTYPE html>
<html><head>
<meta charset='utf-8'>
<title>SCXML Editor</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${cspSource}; script-src 'nonce-${nonce}'">
<link href="${baseCSS}" rel="stylesheet">
<link href="${scxmlEditorCSS}" rel="stylesheet">
<link href="${mutableCSS}" rel="stylesheet" title="mutable">
<link href="${themeCSS}" rel="stylesheet">
</head><body>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' width='100%' height='100%'>
<defs>
<marker id='source' markerWidth='4' markerHeight='4' refX='2' refY='2'>
<circle cx='2' cy='2' r='1.5'/>
</marker>
<marker id='source-conditional' markerWidth='8' markerHeight='8' refX='4' refY='4'>
<circle cx='4' cy='4' r='1.5'/>
</marker>
<marker id='source-conditional-error' markerWidth='8' markerHeight='8' refX='4' refY='4'>
<circle cx='4' cy='4' r='1.5'/>
</marker>
<marker id='source-error' markerWidth='4' markerHeight='4' refX='2' refY='2'>
<circle cx='2' cy='2' r='1.5'/>
</marker>
<marker id='target' orient='auto' markerWidth='4' markerHeight='4' refX='2.5' refY='2'>
<polygon points='0,0 0,4 4,2'/>
</marker>
<marker id='target-error' orient='auto' markerWidth='4' markerHeight='4' refX='2.5' refY='2'>
<polygon points='0,0 0,4 4,2'/>
</marker>
<marker id='target-actions' orient='auto' markerWidth='7' markerHeight='6' refX='5.5' refY='3'>
<path d='M1.5,1 A0.3,0.8,0,0,1,1.5,5'/>
<polygon points='3,1 3,5 7,3'/>
</marker>
<marker id='target-actions-error' orient='auto' markerWidth='7' markerHeight='6' refX='5.5' refY='3'>
<path d='M1.5,1 A0.3,0.8,0,0,1,1.5,5'/>
<polygon points='3,1 3,5 7,3'/>
</marker>
<marker id='targetless' markerWidth='7' markerHeight='7' refX='3.5' refY='3.5'>
<circle cx='3.5' cy='3.5' r='1.5'/>
</marker>
<marker id='targetless-actions' markerWidth='7' markerHeight='7' refX='3.5' refY='3.5'>
<circle cx='3.5' cy='3.5' r='2.8'/>
</marker>
<marker id='targetless-error' markerWidth='7' markerHeight='7' refX='3.5' refY='3.5'>
<circle cx='3.5' cy='3.5' r='2.8'/>
</marker>
<marker id='targetless-actions-error' markerWidth='7' markerHeight='7' refX='3.5' refY='3.5'>
<circle cx='3.5' cy='3.5' r='2.8'/>
</marker>
<filter id='stateshadow' height='130%'>
<feGaussianBlur in='SourceAlpha' stdDeviation='4'/>
<feOffset dx='4' dy='3' result='offsetblur'/>
<feComponentTransfer><feFuncA type='linear' slope='0.9'/></feComponentTransfer>
</filter>
</defs>
</svg>
<table id="inspector"><tbody id="stateProperties">
<tr><th>kind</th><td><select id="insKindState"><option>state</option><option>parallel</option><option>deep history</option><option>shallow history</option><option>final</option></select></td></tr>
<tr><th>id</th><td><input id="insId" type="text" value="myid"></td></tr>
<tr><th>parent</th><td><select id="insParent"></select></td></tr>
<tr><th>on entry</th><td class="button"><button id="insAddEntry" class="addAction" title="add action">+</button></td></tr>
<tr><td colspan="2"><table id="entryExecutables"></table></td></tr>
<tr><th>on exit</th><td class="button"><button id="insAddExit" class="addAction" title="add action">+</button></td></tr>
<tr><td colspan="2"><table id="exitExecutables"></table></td></tr>
<tr><th>color</th><td><input id="insColor" type="color"></td></tr>
<tr><th>size</th><td><input id="insWidth" type="number" min="20" step="10" placeholder="-">×<input id="insHeight" type="number" min="20" step="10" placeholder="-"></td></tr>
</tbody><tbody id="transProperties">
<tr><th>kind</th><td><select id="insKindTrans"><option>internal</option><option>external</option></select></td></tr>
<tr><th>source</th><td><select id="insSource"></select></td></tr>
<tr><th>… anchor</th><td><select id="insSourceAnchorSide"><option value="">(auto)</option><option>N</option><option>S</option><option>E</option><option>W</option></select><input id="insSourceAnchorOffset" type="number" step="5" min="0"></td></tr>
<tr></tr><th>event(s)</th><td><input id="insEvent"></td></tr>
<tr><th>… placement</th><td><select id="insLabelAlign"><option value="">(auto)</option><option>NE</option><option>SE</option><option>NW</option><option>SW</option><option>N</option><option>S</option><option>E</option><option>W</option><option value="C">center</option></select><input id="insLabelOffset" type="number" min="0" step="5"><input id="insLabelCrossOffset" type="number" step="5"></td></tr>
<tr><th>condition</th><td><input id="insCondition"></td></tr>
<tr><th>target</th><td><select id="insTarget"></select></td></tr>
<tr><th>… anchor</th><td><select id="insTargetAnchorSide"><option value="">(auto)</option><option>N</option><option>S</option><option>E</option><option>W</option></select><input id="insTargetAnchorOffset" type="number" step="5" min="0"></td></tr>
<tr><th>action(s)</th><td class="button"><button id="insAddTransitionExecutable" class="addAction" title="add action">+</button></td></tr>
<tr><td colspan="2"><table id="transitionExecutables"></table></td></tr>
<tr><th>radius</th><td><input id="insRadius" type="number" min="5" step="5" placeholder="-"></td></tr>
</tbody></table>
<script type="importmap">
{
"imports": {
"scxmlDOM": "${scxmlDOMJS}",
"visualEditor": "${visualEditorJS}",
"visualDOM": "${visualDOMJS}",
"neatXML": "${neatXMLJS}"
}
}
</script>
<script type='module' src="${scxmlEditorJS}"></script>
</body></html>