@node-projects/web-component-designer-visualization-addons 0.1.144 → 0.1.146
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/dist/components/EventAssignment.d.ts +3 -1
- package/dist/components/EventAssignment.js +7 -2
- package/dist/components/SimpleScriptCommandPicker.d.ts +25 -0
- package/dist/components/SimpleScriptCommandPicker.js +271 -0
- package/dist/components/SimpleScriptEditor.d.ts +21 -5
- package/dist/components/SimpleScriptEditor.js +533 -137
- package/dist/components/SimpleScriptEditorHelp.d.ts +1 -0
- package/dist/components/SimpleScriptEditorHelp.js +151 -0
- package/dist/helpers/BindingsHelper.js +9 -1
- package/dist/index-min.js +577 -57
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/dist/interfaces/VisualizationShell.d.ts +11 -0
- package/dist/scripting/JsonSnippetHighlighter.d.ts +3 -0
- package/dist/scripting/JsonSnippetHighlighter.js +16 -0
- package/dist/scripting/ScriptCommandsDescriptions.d.ts +9 -0
- package/dist/scripting/ScriptCommandsDescriptions.js +154 -0
- package/package.json +3 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const simpleScriptEditorHelpHtml: string;
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import { highlightJson } from "../scripting/JsonSnippetHighlighter.js";
|
|
2
|
+
function evt(name, json) {
|
|
3
|
+
return `<span class="cs-attr">${name}</span>='${highlightJson(json)}'`;
|
|
4
|
+
}
|
|
5
|
+
export const simpleScriptEditorHelpHtml = `<!DOCTYPE html>
|
|
6
|
+
<html>
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="UTF-8">
|
|
9
|
+
<style>
|
|
10
|
+
:root { --accent: #2c6e9b; }
|
|
11
|
+
|
|
12
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
13
|
+
|
|
14
|
+
html, body {
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
font-family: Segoe UI, Arial, sans-serif;
|
|
18
|
+
font-size: 13px;
|
|
19
|
+
color: #333;
|
|
20
|
+
background: #f0f1f3;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.content {
|
|
24
|
+
height: 100%;
|
|
25
|
+
overflow-y: auto;
|
|
26
|
+
padding: 10px 14px 16px;
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
gap: 12px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.intro-banner {
|
|
33
|
+
background: #ffffff;
|
|
34
|
+
border-left: 4px solid var(--accent);
|
|
35
|
+
border-radius: 4px;
|
|
36
|
+
padding: 8px 12px;
|
|
37
|
+
font-size: 12px;
|
|
38
|
+
line-height: 1.5;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.intro-banner code {
|
|
42
|
+
font-family: Consolas, monospace;
|
|
43
|
+
background: #eef2f6;
|
|
44
|
+
padding: 1px 4px;
|
|
45
|
+
border-radius: 3px;
|
|
46
|
+
color: #2c4a68;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.content-section {
|
|
50
|
+
background: #ffffff;
|
|
51
|
+
border-radius: 6px;
|
|
52
|
+
padding: 8px 10px 10px;
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
gap: 6px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.section-title {
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: baseline;
|
|
61
|
+
gap: 8px;
|
|
62
|
+
border-bottom: 2px solid var(--accent);
|
|
63
|
+
font-size: 13px;
|
|
64
|
+
font-weight: bold;
|
|
65
|
+
padding-bottom: 4px;
|
|
66
|
+
color: #24405c;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.section-num {
|
|
70
|
+
display: inline-flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
width: 18px;
|
|
74
|
+
height: 18px;
|
|
75
|
+
border-radius: 50%;
|
|
76
|
+
background: var(--accent);
|
|
77
|
+
color: white;
|
|
78
|
+
font-size: 10px;
|
|
79
|
+
font-weight: bold;
|
|
80
|
+
flex-shrink: 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.section-hint {
|
|
84
|
+
font-size: 11px;
|
|
85
|
+
font-weight: normal;
|
|
86
|
+
color: #808080;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.snippet {
|
|
90
|
+
font-family: Consolas, "Courier New", monospace;
|
|
91
|
+
font-size: 11px;
|
|
92
|
+
background: #f6f8fa;
|
|
93
|
+
color: #24292e;
|
|
94
|
+
border: 1px solid #e1e4e8;
|
|
95
|
+
border-radius: 4px;
|
|
96
|
+
padding: 6px 10px;
|
|
97
|
+
white-space: pre;
|
|
98
|
+
overflow-x: auto;
|
|
99
|
+
line-height: 1.5;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.cs-attr { color: #005cc5; }
|
|
103
|
+
.cs-key { color: #22863a; }
|
|
104
|
+
.cs-str { color: #032f62; }
|
|
105
|
+
.cs-bool { color: #d73a49; }
|
|
106
|
+
.cs-num { color: #e36209; }
|
|
107
|
+
.cs-comment { color: #6a737d; font-style: italic; }
|
|
108
|
+
|
|
109
|
+
.note {
|
|
110
|
+
font-size: 11px;
|
|
111
|
+
color: #666;
|
|
112
|
+
font-style: italic;
|
|
113
|
+
}
|
|
114
|
+
</style>
|
|
115
|
+
</head>
|
|
116
|
+
<body>
|
|
117
|
+
<div class="content">
|
|
118
|
+
|
|
119
|
+
<div class="intro-banner">
|
|
120
|
+
Events (<code>@click</code>, <code>@change</code>, ...) run a command chain (a <code>Script</code>).<br>
|
|
121
|
+
General syntax: <code>@event='{"commands":[ {...}, {...} ]}'</code> — commands run top to bottom.
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<div class="content-section">
|
|
125
|
+
<div class="section-title"><span class="section-num">1</span> Basic structure <span class="section-hint">commands array, sequential execution</span></div>
|
|
126
|
+
<pre class="snippet">${evt("@click", `{"commands":[
|
|
127
|
+
{ "type": "SetSignalValue", "signal": ".Some.Signal", "value": true },
|
|
128
|
+
{ "type": "SetSignalValue", "signal": ".Some.Other", "value": false }
|
|
129
|
+
]}`)}</pre>
|
|
130
|
+
<div class="note">Commands run top to bottom. Some commands (Condition, Label, Goto, Repeat, Exit) can change that flow — see their own descriptions in the "Add Command" dialog.</div>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class="content-section">
|
|
134
|
+
<div class="section-title"><span class="section-num">2</span> Dynamic / indirect values <span class="section-hint">IScriptMultiplexValue</span></div>
|
|
135
|
+
<div class="note">Instead of a plain value, most command values can be an object <code>{ "source": ..., "name": ... }</code> that is resolved at runtime.</div>
|
|
136
|
+
<pre class="snippet">${highlightJson('{ "source": "expression", "name": "ctx.event.srcElement.value" }')} <span class="cs-comment">// js expression, 'ctx' is the context object</span>
|
|
137
|
+
${highlightJson('{ "source": "complexString", "name": "prefix-{.Some.Signal}-suffix" }')} <span class="cs-comment">// signal names in {}</span>
|
|
138
|
+
${highlightJson('{ "source": "parameter", "name": "myParam" }')} <span class="cs-comment">// a parameter handed into the script</span></pre>
|
|
139
|
+
<div class="note">Other sources: signal, property, signalInProperty, event, complexSignal, context, elementProperty. The property grid's "..." button opens an editor for these.</div>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div class="content-section">
|
|
143
|
+
<div class="section-title"><span class="section-num">3</span> Cyclic events <span class="section-hint">re-triggering timer event</span></div>
|
|
144
|
+
<pre class="snippet">${evt("@cyclic:100", `{"commands":[
|
|
145
|
+
{ "type": "SetSignalValue", "signal": ".Local.Tick", "value": true }
|
|
146
|
+
]}`)}</pre>
|
|
147
|
+
<div class="note">A <code>@cyclic:<ms></code> event retriggers itself automatically every <ms> milliseconds.</div>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</body>
|
|
151
|
+
</html>`;
|
|
@@ -996,7 +996,15 @@ export class BindingsHelper {
|
|
|
996
996
|
if (binding[1].target == BindingTarget.property)
|
|
997
997
|
element[binding[0]] = v;
|
|
998
998
|
else if (binding[1].target == BindingTarget.attribute)
|
|
999
|
-
|
|
999
|
+
if (typeof v === 'boolean') {
|
|
1000
|
+
if (v)
|
|
1001
|
+
element.setAttribute(binding[0], '');
|
|
1002
|
+
else
|
|
1003
|
+
element.removeAttribute(binding[0]);
|
|
1004
|
+
}
|
|
1005
|
+
else {
|
|
1006
|
+
element.setAttribute(binding[0], v);
|
|
1007
|
+
}
|
|
1000
1008
|
else if (binding[1].target == BindingTarget.css)
|
|
1001
1009
|
element.style[binding[0]] = v;
|
|
1002
1010
|
else if (binding[1].target == BindingTarget.cssvar)
|