@dualbox/editor 1.0.1 → 1.0.3
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/js/src/GraphEditor.js +159 -0
- package/js/src/c/GraphController.js +646 -0
- package/js/src/libs/CodeMirror.js +8 -0
- package/js/src/libs/fontawesome.js +1 -0
- package/js/src/libs/jsoneditor.css +2 -0
- package/js/src/libs/jsoneditor.js +4 -0
- package/js/src/m/DualboxUtils.js +35 -0
- package/js/src/m/GraphModel.js +2167 -0
- package/js/src/m/History.js +94 -0
- package/js/src/m/Merger.js +357 -0
- package/js/src/v/AppManager.js +61 -0
- package/js/src/v/CanvasSizeHandler.js +136 -0
- package/js/src/v/ContextMenu.css +45 -0
- package/js/src/v/ContextMenu.js +239 -0
- package/js/src/v/GraphView.js +928 -0
- package/js/src/v/PlumbStyle.js +254 -0
- package/js/src/v/Selector.js +239 -0
- package/js/src/v/TemplateManager.js +79 -0
- package/js/src/v/Translater.js +174 -0
- package/js/src/v/Utils.js +7 -0
- package/js/src/v/Zoomer.js +201 -0
- package/js/src/v/templates/addNode.css +45 -0
- package/js/src/v/templates/addNode.html +62 -0
- package/js/src/v/templates/addNode.js +34 -0
- package/js/src/v/templates/debugNodeInfos.css +5 -0
- package/js/src/v/templates/debugNodeInfos.html +336 -0
- package/js/src/v/templates/debugNodeInfos.js +31 -0
- package/js/src/v/templates/editMainSettings.css +67 -0
- package/js/src/v/templates/editMainSettings.html +265 -0
- package/js/src/v/templates/editMainSettings.js +240 -0
- package/js/src/v/templates/editNodeSettings.css +86 -0
- package/js/src/v/templates/editNodeSettings.html +539 -0
- package/js/src/v/templates/editNodeSettings.js +356 -0
- package/js/src/v/templates/graphNode.css +333 -0
- package/js/src/v/templates/graphNode.html +227 -0
- package/js/src/v/templates/graphNode.js +412 -0
- package/js/src/v/templates/main.css +353 -0
- package/js/src/v/templates/main.html +149 -0
- package/js/src/v/templates/main.js +511 -0
- package/js/src/v/templates/searchResults.css +50 -0
- package/js/src/v/templates/searchResults.html +46 -0
- package/js/src/v/templates/searchResults.js +176 -0
- package/package.json +3 -2
|
@@ -0,0 +1,539 @@
|
|
|
1
|
+
@{ var utils = require('../Utils') }
|
|
2
|
+
|
|
3
|
+
@!(data)
|
|
4
|
+
<div class="edit-node-panel h100" id="edit-node-panel">
|
|
5
|
+
<div style="padding-left: 10px; padding-top: 10px; padding-right: 10px;">
|
|
6
|
+
<h2 class="edit-dualbox-node-id">
|
|
7
|
+
<div class="dualbox-node-name">
|
|
8
|
+
<span class="text-truncate d-inline-block" style="width: 290px">@(data.node.graphId)</span>
|
|
9
|
+
<button class="btn btn-light btn-sm btn-edit-dualbox-node-name"><i class="fa fa-edit"></i></button>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="dualbox-node-name-edit" style="display: none;">
|
|
12
|
+
<input type="text" class="form-control dualbox-node-name-input" style="display: inline-block;" value="@(data.node.graphId)" data-type="@(data.node.type)" autofocus/>
|
|
13
|
+
<button class="btn btn-primary btn-save-node-name-change" data-id="@(data.node.graphId)" data-type="@(data.node.type)" style="display: inline-block;">Save</button>
|
|
14
|
+
</div>
|
|
15
|
+
</h2>
|
|
16
|
+
<p><small class="edit-dualbox-node-package-name">@(data.node.getPackageName())</small></p>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<div class="edit-body">
|
|
20
|
+
<div class="card">
|
|
21
|
+
<div class="card-header" id="dualbox-node-desc" data-toggle="collapse" data-target="#dualbox-node-desc-collapse" aria-expanded="true" aria-controls="dualbox-node-desc-collapse">
|
|
22
|
+
<h5 class="mb-0 btn-link">Description</h5>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div id="dualbox-node-desc-collapse" class="collapse show" aria-labelledby="dualbox-node-desc" data-parent="#edit-node-panel">
|
|
26
|
+
<div class="card-body" style="padding-left: 15px;">
|
|
27
|
+
<div class="module-left-signature"></div>
|
|
28
|
+
<p class="module-left-description">
|
|
29
|
+
@if( data.node.isInput() ) {
|
|
30
|
+
@(data.node.getDescription() || "Input [No description available]")
|
|
31
|
+
}
|
|
32
|
+
else if( data.node.isOutput() ) {
|
|
33
|
+
@(data.node.getDescription() || "Output [No description available]")
|
|
34
|
+
}
|
|
35
|
+
else if( data.node.isMetanode() ) {
|
|
36
|
+
@if( data.node.getDescription() ) {
|
|
37
|
+
@(data.node.getDescription())
|
|
38
|
+
(<a href="#" class="edit-module-description" data-id="@(data.node.id)">edit description</a>)
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
<a href="#" class="edit-module-description" data-id="@(data.node.id)" data-desc="@(data.node.getDescription())">Add a description</a>
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
@(data.node.getPackage().description || "[No description available]")
|
|
46
|
+
}
|
|
47
|
+
</p>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div class="card card-settings">
|
|
53
|
+
<div class="card-header" id="dualbox-node-comments" data-toggle="collapse" data-target="#dualbox-node-comments-collapse" aria-expanded="false" aria-controls="dualbox-node-comments-collapse">
|
|
54
|
+
<h5 class="mb-0 btn-link">Comments</h5>
|
|
55
|
+
</div>
|
|
56
|
+
<div id="dualbox-node-comments-collapse" class="collapse" aria-labelledby="dualbox-node-comments" data-parent="#edit-node-panel">
|
|
57
|
+
<div class="card-body">
|
|
58
|
+
<div style="padding-left: 15px; padding-right: 15px;">
|
|
59
|
+
@if( data.node.hasComment() ) {
|
|
60
|
+
<p class="node-comment-text">@(data.node.getComment())</p>
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
<a href="#" class="add-node-comment">Add a comment</a>
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
<div class="node-comment-edit" style="display: none;">
|
|
67
|
+
<textarea class="node-comment" rows=4 style="width: 100%;" data-id="@(data.node.id)">@if( data.node.hasComment() ){@(data.node.getComment())}</textarea>
|
|
68
|
+
<div style="text-align: right; margin-top: 10px;">
|
|
69
|
+
<button class="btn btn-sm btn-secundary btn-delete-comment" data-id="@(data.node.id)">Delete</button>
|
|
70
|
+
<button class="btn btn-sm btn-primary btn-save-comment" data-id="@(data.node.id)">Save</button>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<!-- Compute options -->
|
|
79
|
+
@if( data.node.isModule() ) {
|
|
80
|
+
<div class="card card-settings">
|
|
81
|
+
<div class="card-header" id="dualbox-node-inputs" data-toggle="collapse" data-target="#dualbox-node-compute-collapse" aria-expanded="false" aria-controls="dualbox-node-compute-collapse">
|
|
82
|
+
<h5 class="mb-0 btn-link">Compute options</h5>
|
|
83
|
+
</div>
|
|
84
|
+
<div id="dualbox-node-compute-collapse" class="collapse" aria-labelledby="dualbox-node-inputs" data-parent="#edit-node-panel">
|
|
85
|
+
<div class="card-body">
|
|
86
|
+
<div class="form-group" style="padding-left: 20px;">
|
|
87
|
+
<div>
|
|
88
|
+
<label>
|
|
89
|
+
<input class="input-cache-toggle" type="checkbox" data-id="@(data.node.id)" @if(data.node.hasCacheActivated()){checked}>
|
|
90
|
+
<span>Cache result <button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="top" title="Keep the result in memory (the cache) to avoid computing this box every-time its result is required. The cache will be invalidated if an input prior to this box is changed." style="padding: 0;"><i class="text-info far fa-question-circle"></i></button></span>
|
|
91
|
+
</label>
|
|
92
|
+
</div>
|
|
93
|
+
@if( !data.node.isMetanode() ) {
|
|
94
|
+
<div>
|
|
95
|
+
<label>
|
|
96
|
+
<input class="input-worker-toggle" type="checkbox" data-id="@(data.node.id)" @if(data.node.isParallel()){checked}>
|
|
97
|
+
<span>Execute in a worker <button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="top" title="Workers are separate contexts of executions that can execute long-running tasks without blocking the browser execution. Use this for heavy computations." style="padding: 0;"><i class="text-info far fa-question-circle"></i></button><br/><span class="text-danger worker-warning" @if(!data.node.isParallel()){style="display: none;"}>Due to some technical limitations, this will only affect the built bundle. Please run tests on the built bundle as well.</span>
|
|
98
|
+
</label>
|
|
99
|
+
</div>
|
|
100
|
+
}
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
<!-- Widget options -->
|
|
107
|
+
@if( data.node.isWidget() ) {
|
|
108
|
+
<div class="card card-default">
|
|
109
|
+
<div class="card-header" id="dualbox-node-widget" data-toggle="collapse" data-target="#dualbox-node-widget-collapse" aria-expanded="false" aria-controls="dualbox-node-widget-collapse">
|
|
110
|
+
<h5 class="mb-0 btn-link">Widget Options</h5>
|
|
111
|
+
</div>
|
|
112
|
+
<div id="dualbox-node-widget-collapse" class="collapse" aria-labelledby="dualbox-node-widget" data-parent="#edit-node-panel">
|
|
113
|
+
<div class="card-body">
|
|
114
|
+
<span>Widget registered to: </span>
|
|
115
|
+
<select class="form-control form-control-sm select-widget-registerTo" data-id="@(data.node.id)" style="max-width: 250px;">
|
|
116
|
+
<option value="">none</option>
|
|
117
|
+
@{var targets = data.node.m.getSpecialUINodes( data.node.getRegisterType() ) }
|
|
118
|
+
@for(var j=0; j<targets.length; j++) {
|
|
119
|
+
<option value="@(targets[j].graphId)" @if( data.node.getWidgetRegistration() == targets[j].graphId ) {selected }>@(targets[j].id)</option>
|
|
120
|
+
}
|
|
121
|
+
</select>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
<!-- Inputs -->
|
|
128
|
+
@if( data.node.isInput() ) {
|
|
129
|
+
<div class="card card-default">
|
|
130
|
+
<div class="card-header" id="dualbox-node-default" data-toggle="collapse" data-target="#dualbox-node-default-collapse" aria-expanded="false" aria-controls="dualbox-node-default-collapse">
|
|
131
|
+
<h5 class="mb-0 btn-link">Default value</h5>
|
|
132
|
+
</div>
|
|
133
|
+
<div id="dualbox-node-default-collapse" class="collapse" aria-labelledby="dualbox-node-default" data-parent="#edit-node-panel">
|
|
134
|
+
<div class="card-body">
|
|
135
|
+
<span>Default value: </span><span>@displayValue(data.node.getDefaultValue(), "default")</span>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
@if( data.node.hasInputs() ) {
|
|
142
|
+
<div class="card card-settings">
|
|
143
|
+
<div class="card-header" id="dualbox-node-inputs" data-toggle="collapse" data-target="#dualbox-node-inputs-collapse" aria-expanded="false" aria-controls="dualbox-node-inputs-collapse">
|
|
144
|
+
<h5 class="mb-0 btn-link">Inputs <small><span class="badge badge-secondary">@(data.node.getInputsNames().length)</span></small></h5>
|
|
145
|
+
</div>
|
|
146
|
+
<div id="dualbox-node-inputs-collapse" class="collapse" aria-labelledby="dualbox-node-inputs" data-parent="#edit-node-panel">
|
|
147
|
+
<div class="card-body">
|
|
148
|
+
<table class="table-desc table-striped">
|
|
149
|
+
<thead class="thead-dark">
|
|
150
|
+
<th>Input</th>
|
|
151
|
+
<th>Visible</th>
|
|
152
|
+
<th>Type</th>
|
|
153
|
+
<th>Default</th>
|
|
154
|
+
</thead>
|
|
155
|
+
<tbody>
|
|
156
|
+
@{var keys = data.node.getInputsNames() }
|
|
157
|
+
@for(var i=0; i<keys.length; i++) {
|
|
158
|
+
@{ var key = keys[i] }
|
|
159
|
+
<tr>
|
|
160
|
+
<td>
|
|
161
|
+
@(key)
|
|
162
|
+
@if( data.node.hasInputDesc(key) ) {
|
|
163
|
+
<button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="right" title="@(data.node.getInputDesc(key))" style="padding: 0;"><i class="text-info far fa-question-circle"></i></button>
|
|
164
|
+
}
|
|
165
|
+
</td>
|
|
166
|
+
<td>
|
|
167
|
+
<input class="input-visibility-toggle" type="checkbox" data-id="@(data.node.id)" data-input="@(key)" @if(data.node.isInputVisible(key)){checked}>
|
|
168
|
+
</td>
|
|
169
|
+
<td><span class="badge badge-secondary">@( utils.htmlentities(data.node.getInputType(key)) )</span></td>
|
|
170
|
+
|
|
171
|
+
<td>@displayValue(data.node.getInputDefaultValue(key), "input", key)</td>
|
|
172
|
+
</tr>
|
|
173
|
+
}
|
|
174
|
+
</tbody>
|
|
175
|
+
</table>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
<!-- Outputs -->
|
|
184
|
+
@if( data.node.hasOutputs() ) {
|
|
185
|
+
<div class="card card-settings">
|
|
186
|
+
<div class="card-header" id="dualbox-node-outputs" data-toggle="collapse" data-target="#dualbox-node-outputs-collapse" aria-expanded="false" aria-controls="dualbox-node-outputs-collapse">
|
|
187
|
+
<h5 class="mb-0 btn-link">Outputs <small><span class="badge badge-secondary">@(data.node.getOutputsNames().length)</span></small></h5>
|
|
188
|
+
</div>
|
|
189
|
+
<div id="dualbox-node-outputs-collapse" class="collapse" aria-labelledby="dualbox-node-outputs" data-parent="#edit-node-panel">
|
|
190
|
+
<div class="card-body">
|
|
191
|
+
<table class="table-desc table-striped">
|
|
192
|
+
<thead class="thead-dark">
|
|
193
|
+
<th>Output</th>
|
|
194
|
+
<th>Type</th>
|
|
195
|
+
<th>Visible</th>
|
|
196
|
+
</thead>
|
|
197
|
+
<tbody>
|
|
198
|
+
@{var keys = data.node.getOutputsNames() }
|
|
199
|
+
@for(var i=0; i<keys.length; i++) {
|
|
200
|
+
@{ var key = keys[i] }
|
|
201
|
+
<tr>
|
|
202
|
+
<td>
|
|
203
|
+
@(key)
|
|
204
|
+
@if( data.node.hasOutputDesc(key) ) {
|
|
205
|
+
<button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="right" title="@(data.node.getOutputDesc(key))" style="padding: 0;"><i class="text-info far fa-question-circle"></i></button>
|
|
206
|
+
}
|
|
207
|
+
</td>
|
|
208
|
+
<td><span class="badge badge-secondary">@( utils.htmlentities(data.node.getOutputType(key)) )</span></td>
|
|
209
|
+
<td>
|
|
210
|
+
<input class="output-visibility-toggle" type="checkbox" data-id="@(data.node.id)" data-output="@(key)" @if(data.node.isOutputVisible(key)){checked}>
|
|
211
|
+
</td>
|
|
212
|
+
</tr>
|
|
213
|
+
}
|
|
214
|
+
</tbody>
|
|
215
|
+
</table>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
<!-- Attributes -->
|
|
222
|
+
@if( data.node.hasAttributes() ) {
|
|
223
|
+
<div class="card card-settings">
|
|
224
|
+
<div class="card-header" id="dualbox-node-attrs" data-toggle="collapse" data-target="#dualbox-node-attrs-collapse" aria-expanded="false" aria-controls="dualbox-node-attrs-collapse">
|
|
225
|
+
<h5 class="mb-0 btn-link">Attributes <small><span class="badge badge-secondary">@(data.node.getAttributesNames().length)</span></small></h5>
|
|
226
|
+
</div>
|
|
227
|
+
<div id="dualbox-node-attrs-collapse" class="collapse" aria-labelledby="dualbox-node-attrs" data-parent="#edit-node-panel">
|
|
228
|
+
<div class="card-body">
|
|
229
|
+
<table class="table-desc table-striped">
|
|
230
|
+
<thead class="thead-dark">
|
|
231
|
+
<th>Output</th>
|
|
232
|
+
<th>Type</th>
|
|
233
|
+
<th>Value</th>
|
|
234
|
+
</thead>
|
|
235
|
+
<tbody>
|
|
236
|
+
@{var keys = data.node.getAttributesNames() }
|
|
237
|
+
@for(var i=0; i<keys.length; i++) {
|
|
238
|
+
@{ var key = keys[i] }
|
|
239
|
+
<tr>
|
|
240
|
+
<td>
|
|
241
|
+
@(key)
|
|
242
|
+
@if( data.node.hasAttributeDesc(key) ) {
|
|
243
|
+
<button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="right" title="@(data.node.getAttributeDesc(key))" style="padding: 0;"><i class="text-info far fa-question-circle"></i></button>
|
|
244
|
+
}
|
|
245
|
+
</td>
|
|
246
|
+
<td><span class="badge badge-secondary">@( utils.htmlentities(data.node.getAttributeType(key)) )</span></td>
|
|
247
|
+
<td>@displayValue(data.node.getAttributeValue(key), "attr", key)</td>
|
|
248
|
+
</tr>
|
|
249
|
+
}
|
|
250
|
+
</tbody>
|
|
251
|
+
</table>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
<!-- Loops -->
|
|
259
|
+
@if( data.node.hasInputs() ) {
|
|
260
|
+
<div class="card card-settings">
|
|
261
|
+
<div class="card-header" id="dualbox-node-inputs" data-toggle="collapse" data-target="#dualbox-node-loops-collapse" aria-expanded="false" aria-controls="dualbox-node-loops-collapse">
|
|
262
|
+
<h5 class="mb-0 btn-link">Loops <small><span class="badge badge-secondary">@if(data.node.hasLoop()){on}else{off}</span></small></h5>
|
|
263
|
+
</div>
|
|
264
|
+
<div id="dualbox-node-loops-collapse" class="collapse" aria-labelledby="dualbox-node-inputs" data-parent="#edit-node-panel">
|
|
265
|
+
<div class="card-body">
|
|
266
|
+
<h4>Iterators
|
|
267
|
+
<button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="right" title="Iterators will break an array in input into a list of their components. The module will be computed several times, each time with one different component from every iterator input. Inputs that don't define iterators will use their current value as-is for the different computations." style="padding: 0;"><i class="text-info far fa-question-circle"></i></button>
|
|
268
|
+
</h4>
|
|
269
|
+
<table class="table-desc table-striped">
|
|
270
|
+
<tbody>
|
|
271
|
+
@{var keys = data.node.getInputsNames() }
|
|
272
|
+
@for(var i=0; i<keys.length; i++) {
|
|
273
|
+
@{ var key = keys[i]; }
|
|
274
|
+
<tr>
|
|
275
|
+
<td>@(key)</td>
|
|
276
|
+
<td>
|
|
277
|
+
<input class="input-iterator-toggle" type="checkbox" data-id="@(data.node.id)" data-input="@(key)" @if(data.node.hasIterator(key)){checked} />
|
|
278
|
+
</td>
|
|
279
|
+
</tr>
|
|
280
|
+
}
|
|
281
|
+
</tbody>
|
|
282
|
+
</table>
|
|
283
|
+
|
|
284
|
+
<h4 class="mt-2">Feedback
|
|
285
|
+
<button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="right" title="Feedback (during a loop) is a reinjection of an output result of one iteration into an input of the next iteration." style="padding: 0;"><i class="text-info far fa-question-circle"></i></button>
|
|
286
|
+
</h4>
|
|
287
|
+
<table class="table-desc table-striped">
|
|
288
|
+
<tbody>
|
|
289
|
+
@{var keys = data.node.getOutputsNames(); }
|
|
290
|
+
@for(var i=0; i<keys.length; i++) {
|
|
291
|
+
@{ var key = keys[i]; }
|
|
292
|
+
<tr>
|
|
293
|
+
<td>@(key)</td>
|
|
294
|
+
<td>
|
|
295
|
+
<select class="form-control form-control-sm select-output-feedback" data-id="@(data.node.id)" data-output="@(key)">
|
|
296
|
+
<option value="none">No feedback</option>
|
|
297
|
+
@{var k = data.node.getInputsNames() }
|
|
298
|
+
@for(var j=0; j<k.length; j++) {
|
|
299
|
+
<option value="@(k[j])" @if(data.node.getFeedback(key)==k[j]){selected}>@(k[j])</option>
|
|
300
|
+
}
|
|
301
|
+
</select>
|
|
302
|
+
</td>
|
|
303
|
+
</tr>
|
|
304
|
+
}
|
|
305
|
+
</tbody>
|
|
306
|
+
</table>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
</div>
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
@if( data.node.isUI() ) {
|
|
313
|
+
<div class="card card-settings">
|
|
314
|
+
<div class="card-header" id="dualbox-node-events" data-toggle="collapse" data-target="#dualbox-node-events-collapse" aria-expanded="false" aria-controls="dualbox-node-events-collapse">
|
|
315
|
+
<h5 class="mb-0 btn-link">Events <small><span class="badge badge-secondary">@(data.node.getOutboundEvents().length)</span></h5>
|
|
316
|
+
</div>
|
|
317
|
+
<div id="dualbox-node-events-collapse" class="collapse" aria-labelledby="dualbox-node-events" data-parent="#edit-node-panel">
|
|
318
|
+
<div class="card-body">
|
|
319
|
+
<table class="table-desc table-striped" style="font-size: 12px!important;">
|
|
320
|
+
@if( data.node.hasOutEvents() ) {
|
|
321
|
+
<thead class="thead-dark">
|
|
322
|
+
<th>Target</th>
|
|
323
|
+
<th>Event</th>
|
|
324
|
+
<th>If</th>
|
|
325
|
+
<th>Data</th>
|
|
326
|
+
<th>Action</th>
|
|
327
|
+
</thead>
|
|
328
|
+
<tbody>
|
|
329
|
+
@{var events = data.node.getOutboundEvents(); }
|
|
330
|
+
@for(var i=0; i<events.length; i++) {
|
|
331
|
+
@{ var evt = events[i]; }
|
|
332
|
+
<tr data-index="@(i)">
|
|
333
|
+
<td>
|
|
334
|
+
@if(evt.node) {
|
|
335
|
+
<select class="form-control form-control-sm select-event-target" data-id="@(data.node.id)" data-index="@(i)" >
|
|
336
|
+
@{ var nodes = data.node.m.getNodes("ui"); }
|
|
337
|
+
@for(var j=0; j<nodes.length; j++) {
|
|
338
|
+
@{ var node = nodes[j]; }
|
|
339
|
+
@if( node.getEventsNames().length !== 0 ) {
|
|
340
|
+
<option value="@(node.getGraphId())" @if(node.getGraphId()===evt.node){selected}>@(node.getGraphId())</option>
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
</select>
|
|
344
|
+
}
|
|
345
|
+
else {
|
|
346
|
+
<span>@(evt.selector)</span>
|
|
347
|
+
}
|
|
348
|
+
</td>
|
|
349
|
+
<td>
|
|
350
|
+
<select class="form-control form-control-sm select-event-name" data-id="@(data.node.id)" data-index="@(i)" >
|
|
351
|
+
@if(evt.node) {
|
|
352
|
+
<!-- options will be dynamically changed when target change -->
|
|
353
|
+
@{ var targetNode = data.node.m.getNode(evt.node); }
|
|
354
|
+
@{ var targetEvents = targetNode.getEventsNames(); }
|
|
355
|
+
@for(var j=0; j<targetEvents.length; j++) {
|
|
356
|
+
@{ var targetEvent = targetEvents[j]; }
|
|
357
|
+
<option value="@(targetEvent)" @if(evt.event===targetEvent){selected}>@(targetEvent)</option>
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
else {
|
|
361
|
+
<option value="hide">hide</option>
|
|
362
|
+
<option value="show">show</option>
|
|
363
|
+
}
|
|
364
|
+
</select>
|
|
365
|
+
</td>
|
|
366
|
+
<td>
|
|
367
|
+
<input class="form-control form-control-sm event-if" type="text" data-id="@(data.node.id)" data-index="@(i)" value="@(evt.if)" />
|
|
368
|
+
</td>
|
|
369
|
+
<td>
|
|
370
|
+
<input class="form-control form-control-sm event-data" type="text" data-id="@(data.node.id)" data-index="@(i)" value="@(evt.data)" />
|
|
371
|
+
</td>
|
|
372
|
+
<td>
|
|
373
|
+
<button class="btn btn-danger btn-xs btn-remove-event" data-id="@(data.node.id)" data-index="@(i)" >
|
|
374
|
+
<i class="fa fa-minus"></i>
|
|
375
|
+
</button>
|
|
376
|
+
</td>
|
|
377
|
+
</tr>
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
<tr>
|
|
381
|
+
<td colspan="5" style="padding-top: 0px; padding-bottom: 0px;">
|
|
382
|
+
<button class="btn btn-sm btn-add-event" data-id="@(data.node.id)" style="width: 100%;">Add event</button>
|
|
383
|
+
</td>
|
|
384
|
+
<tr>
|
|
385
|
+
</tbody>
|
|
386
|
+
</table>
|
|
387
|
+
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
</div>
|
|
391
|
+
}
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
<div class="modal edit-value-modal" tabindex="-1" role="dialog">
|
|
395
|
+
<div class="modal-dialog" role="document">
|
|
396
|
+
<div class="modal-content">
|
|
397
|
+
<div class="modal-header">
|
|
398
|
+
<h5 class="modal-title">Edit value</h5>
|
|
399
|
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
400
|
+
<span aria-hidden="true">×</span>
|
|
401
|
+
</button>
|
|
402
|
+
</div>
|
|
403
|
+
<div class="modal-body">
|
|
404
|
+
<div class="set-type">
|
|
405
|
+
<div class="form-check">
|
|
406
|
+
<input type="radio" class="form-check-input set-value unset-value" id="unset-value" name="set-value" value="unset-value" checked>
|
|
407
|
+
<label class="form-check-label" for="unset-value">
|
|
408
|
+
don't set a value
|
|
409
|
+
</label>
|
|
410
|
+
</div>
|
|
411
|
+
<div class="form-check">
|
|
412
|
+
<input type="radio" class="form-check-input set-value set-value-null" id="set-value-null" name="set-value" value="set-value-null">
|
|
413
|
+
<label class="form-check-label" for="set-value-null">
|
|
414
|
+
set null
|
|
415
|
+
</label>
|
|
416
|
+
</div>
|
|
417
|
+
<div class="form-check">
|
|
418
|
+
<input type="radio" class="form-check-input set-value set-value-type" id="set-value-type" name="set-value" value="set-value-type" aria-label="Set a value of type">
|
|
419
|
+
<div class="form-inline form-check-label" style="height: 24px;">
|
|
420
|
+
<label for="set-value-type">
|
|
421
|
+
set a value of type:
|
|
422
|
+
<select class="form-control choose-value-type d-inline-block form-control-sm ml-2">
|
|
423
|
+
<option value="string">String</option>
|
|
424
|
+
<option value="number">Number</option>
|
|
425
|
+
<option value="boolean">Boolean</option>
|
|
426
|
+
<option value="object">Object</option>
|
|
427
|
+
<option value="file">File</option>
|
|
428
|
+
</select>
|
|
429
|
+
</label>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
<hr class="separator"/>
|
|
434
|
+
<div class="has-value" style="display: none;">
|
|
435
|
+
<div class="define-value define-boolean" style="display: none;">
|
|
436
|
+
<div class="form-inline">
|
|
437
|
+
<label>Value: </label>
|
|
438
|
+
<select class="form-control form-control-sm bool-value d-inline-block ml-2">
|
|
439
|
+
<option value=true>True</option>
|
|
440
|
+
<option value=false>False</option>
|
|
441
|
+
</select>
|
|
442
|
+
</div>
|
|
443
|
+
</div>
|
|
444
|
+
<div class="define-value define-file" style="display: none;">
|
|
445
|
+
<div class="form-inline">
|
|
446
|
+
<label>File input</label>
|
|
447
|
+
<input type="file" class="form-control-file form-control-sm file-value">
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
<div class="define-value define-number" style="display: none;">
|
|
451
|
+
<div class="form-inline">
|
|
452
|
+
<label>Value: </label>
|
|
453
|
+
<input type="number" class="form-control form-control-sm number-value ml-2"/>
|
|
454
|
+
</div>
|
|
455
|
+
</div>
|
|
456
|
+
<div class="define-value define-string" style="display: none;">
|
|
457
|
+
<div class="form-inline">
|
|
458
|
+
<label>Value: </label>
|
|
459
|
+
<input type="text" class="form-control form-control-sm text-value ml-2"/>
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
<div class="define-value define-object" style="display: none;">
|
|
463
|
+
<label>Value: </label>
|
|
464
|
+
<div class="json-editor" style="height: 400px;"></div>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
</div>
|
|
468
|
+
<div class="modal-footer">
|
|
469
|
+
<button type="button" class="btn btn-primary btn-save">Save changes</button>
|
|
470
|
+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
</div>
|
|
476
|
+
|
|
477
|
+
|
|
478
|
+
<!-- Display an editable value -->
|
|
479
|
+
<!-- type: "input" or "attr", name: name of the input/attr -->
|
|
480
|
+
<!-- valueType: type of v -->
|
|
481
|
+
@function displayValue(v, type, name) {
|
|
482
|
+
@if( type == "input" ) {
|
|
483
|
+
@{ var dataType = data.node.getInputType(key).toLowerCase(); }
|
|
484
|
+
}
|
|
485
|
+
else if( type == "attr" ) {
|
|
486
|
+
@{ var dataType = data.node.getAttributeType(key).toLowerCase(); }
|
|
487
|
+
}
|
|
488
|
+
else {
|
|
489
|
+
<!-- type: default -->
|
|
490
|
+
@{ dataType = "object"; }
|
|
491
|
+
}
|
|
492
|
+
@if( dataType !== "string" && dataType !== "number" && dataType !== "boolean" ) {
|
|
493
|
+
@{ dataType = "object"; }
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
@{ var className = type + "-" + data.node.graphId + "-" + name; }
|
|
497
|
+
|
|
498
|
+
@if( v === undefined ) {
|
|
499
|
+
<a href="#" class="setValue" data-id="@(data.node.id)" data-type="@(type)" data-name="@(name)" data-undefined=true data-valueType="@(dataType)">
|
|
500
|
+
<i class="fas fa-edit"></i>
|
|
501
|
+
</a>
|
|
502
|
+
<span class="@className"></span>
|
|
503
|
+
}
|
|
504
|
+
else if( v === null ) {
|
|
505
|
+
<a href="#" class="setValue" data-id="@(data.node.id)" data-type="@(type)" data-name="@(name)" data-null=true data-valueType="@(dataType)">
|
|
506
|
+
<i class="fas fa-edit"></i>
|
|
507
|
+
</a>
|
|
508
|
+
<span class="@className">null</span>
|
|
509
|
+
}
|
|
510
|
+
else {
|
|
511
|
+
@if( typeof v === "object" ) {
|
|
512
|
+
<a href="#" class="setValue" data-id="@(data.node.id)" data-type="@(type)" data-name="@(name)" data-value="@(utils.htmlentities(JSON.stringify(v)))" data-valueType="object">
|
|
513
|
+
<i class="fas fa-edit"></i>
|
|
514
|
+
</a>
|
|
515
|
+
<span class="@className">[Object]</span>
|
|
516
|
+
}
|
|
517
|
+
else {
|
|
518
|
+
@{ var valType = typeof v }
|
|
519
|
+
@if( valType === "string" ) {
|
|
520
|
+
<a href="#" class="setValue" data-id="@(data.node.id)" data-type="@(type)" data-name="@(name)" data-value="@(utils.htmlentities(v))" data-valueType="string">
|
|
521
|
+
<i class="fas fa-edit"></i>
|
|
522
|
+
</a>
|
|
523
|
+
<span class="@className">"@(utils.htmlentities(v))"</span>
|
|
524
|
+
}
|
|
525
|
+
else if( valType === "number" ) {
|
|
526
|
+
<a href="#" class="setValue" data-id="@(data.node.id)" data-type="@(type)" data-name="@(name)" data-value="@(v)" data-valueType="number">
|
|
527
|
+
<i class="fas fa-edit"></i>
|
|
528
|
+
</a>
|
|
529
|
+
<span class="@className">@(v)</span>
|
|
530
|
+
}
|
|
531
|
+
else if( valType === "boolean" ) {
|
|
532
|
+
<a href="#" class="setValue" data-id="@(data.node.id)" data-type="@(type)" data-name="@(name)" data-value="@(v)" data-valueType="boolean">
|
|
533
|
+
<i class="fas fa-edit"></i>
|
|
534
|
+
</a>
|
|
535
|
+
<span class="@className">@(v)</span>
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
}
|
|
539
|
+
}
|