@node-projects/web-component-designer-visualization-addons 0.1.147 → 0.1.149
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/BindingsEditor.d.ts +27 -12
- package/dist/components/BindingsEditor.js +570 -206
- package/dist/components/BindingsEditorHelp.d.ts +1 -0
- package/dist/components/BindingsEditorHelp.js +228 -0
- package/dist/index-min.js +493 -118
- package/dist/services/VisualizationBindingsService.js +9 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const bindingsEditorHelpHtml = "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"UTF-8\">\n<style>\n:root { --accent: #2c6e9b; }\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml, body {\n width: 100%;\n height: 100%;\n font-family: Segoe UI, Arial, sans-serif;\n font-size: 13px;\n color: #333;\n background: #f0f1f3;\n}\n\n.content {\n height: 100%;\n overflow-y: auto;\n padding: 10px 14px 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.intro-banner {\n background: #ffffff;\n border-left: 4px solid var(--accent);\n border-radius: 4px;\n padding: 8px 12px;\n font-size: 12px;\n line-height: 1.5;\n}\n\n.intro-banner code {\n font-family: Consolas, monospace;\n background: #eef2f6;\n padding: 1px 4px;\n border-radius: 3px;\n color: #2c4a68;\n}\n\n.content-section {\n background: #ffffff;\n border-radius: 6px;\n padding: 8px 10px 10px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.section-title {\n display: flex;\n align-items: baseline;\n gap: 8px;\n border-bottom: 2px solid var(--accent);\n font-size: 13px;\n font-weight: bold;\n padding-bottom: 4px;\n color: #24405c;\n}\n\n.section-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--accent);\n color: white;\n font-size: 10px;\n font-weight: bold;\n flex-shrink: 0;\n}\n\n.section-hint {\n font-size: 11px;\n font-weight: normal;\n color: #808080;\n}\n\n.snippet {\n font-family: Consolas, \"Courier New\", monospace;\n font-size: 11px;\n background: #f6f8fa;\n color: #24292e;\n border: 1px solid #e1e4e8;\n border-radius: 4px;\n padding: 6px 10px;\n white-space: pre;\n overflow-x: auto;\n line-height: 1.6;\n}\n\n.ref-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n}\n\n.ref-table th {\n text-align: left;\n font-weight: 600;\n color: #24405c;\n border-bottom: 1px solid #d0d7de;\n padding: 4px 6px;\n}\n\n.ref-table td {\n padding: 3px 6px;\n border-bottom: 1px solid #f0f0f0;\n vertical-align: top;\n}\n\n.ref-table tr:last-child td { border-bottom: none; }\n\n.ref-table td:first-child {\n font-family: Consolas, monospace;\n color: #005cc5;\n white-space: nowrap;\n width: 110px;\n}\n\n.note {\n font-size: 11px;\n color: #666;\n font-style: italic;\n}\n\ncode {\n font-family: Consolas, monospace;\n background: #eef2f6;\n padding: 1px 4px;\n border-radius: 3px;\n color: #2c4a68;\n font-size: 11px;\n}\n</style>\n</head>\n<body>\n<div class=\"content\">\n\n <div class=\"intro-banner\">\n A <strong>Binding</strong> connects one or more signals to a property of an element.<br>\n An optional <strong>formula</strong> transforms the signal values before they are applied.\n A <strong>converter</strong> maps the final value to a display value.\n </div>\n\n <div class=\"content-section\">\n <div class=\"section-title\"><span class=\"section-num\">1</span> Signals (Objects) <span class=\"section-hint\">what data to read</span></div>\n <div class=\"note\" style=\"margin-bottom:2px;\">Each row adds one signal. The <em>name</em> column sets the variable name used in the formula.</div>\n <pre class=\"snippet\"><span style=\"color:#6a737d;font-style:italic\">// name column empty \u2192 variable is __0, __1, __2 \u2026 (positional)</span>\n<span style=\"color:#6a737d;font-style:italic\">// name column filled \u2192 variable uses that name in the formula</span>\n\n<span style=\"color:#005cc5\">name</span>: mySpeed <span style=\"color:#005cc5\">signal</span>: .Drive.Speed \u2192 accessible as mySpeed\n<span style=\"color:#005cc5\">name</span>: (empty) <span style=\"color:#005cc5\">signal</span>: .Drive.Active \u2192 accessible as __1 (second row)</pre>\n <div class=\"note\">Multiple signals let you combine values in a formula, e.g. <code>__0 > 0 && __1</code>.</div>\n </div>\n\n <div class=\"content-section\">\n <div class=\"section-title\"><span class=\"section-num\">2</span> Signal path prefixes & special paths <span class=\"section-hint\">special access modes</span></div>\n <table class=\"ref-table\">\n <tr><th>Prefix / Pattern</th><th>What it accesses</th></tr>\n <tr><td>(none)</td><td>The signal's current value directly</td></tr>\n <tr><td>__name</td><td>Internal screen variable \u2014 local to the current screen, not connected to any external data source. Initial value is <code>null</code>. Useful for screen-local state like tab selection or panel visibility.</td></tr>\n <tr><td>?name</td><td>A property of the signal object itself (e.g. <code>?quality</code> \u2192 signal quality)</td></tr>\n <tr><td>??name</td><td>The value of a property of the signal object</td></tr>\n <tr><td>#name</td><td>A property of the bound target element</td></tr>\n <tr><td>##name</td><td>The current value of a property of the bound target element</td></tr>\n <tr><td>$objectId</td><td>The entire signal configuration object (meta-data)</td></tr>\n <tr><td>\u00A7name</td><td>A special framework-provided value (if supported)</td></tr>\n <tr><td>{name}</td><td>Dynamic signal path: embed another signal's value inside the path, e.g. <code>.Plant.{.ActiveLine}.Speed</code></td></tr>\n </table>\n </div>\n\n <div class=\"content-section\">\n <div class=\"section-title\"><span class=\"section-num\">3</span> Formula <span class=\"section-hint\">transform signal values with JavaScript</span></div>\n <div class=\"note\" style=\"margin-bottom:2px;\">Leave the formula empty to pass the first signal's value through unchanged.</div>\n <pre class=\"snippet\"><span style=\"color:#6a737d;font-style:italic\">// Access signal values by position or by name:</span>\n__0 * 100 <span style=\"color:#6a737d;font-style:italic\">// first signal \u00D7 100</span>\n__0 > 0 && __1 <span style=\"color:#6a737d;font-style:italic\">// combine two signals</span>\nspeed > limit <span style=\"color:#6a737d;font-style:italic\">// named variables</span>\n\n<span style=\"color:#6a737d;font-style:italic\">// Special variables available in the formula:</span>\n__ctx <span style=\"color:#6a737d;font-style:italic\">// the full binding context object</span>\n__res <span style=\"color:#6a737d;font-style:italic\">// the result of the previous evaluation</span></pre>\n <div class=\"note\">The formula must be a single JavaScript expression that returns a value (no <code>return</code> statement needed).</div>\n </div>\n\n <div class=\"content-section\">\n <div class=\"section-title\"><span class=\"section-num\">4</span> Write Back & Two-Way <span class=\"section-hint\">send values back to signals</span></div>\n <pre class=\"snippet\"><span style=\"color:#6a737d;font-style:italic\">// Write back signal</span>\n<span style=\"color:#6a737d;font-style:italic\">// \u2192 writes the formula result back to a signal whenever</span>\n<span style=\"color:#6a737d;font-style:italic\">// the element property changes (useful for derived values)</span>\n\n<span style=\"color:#6a737d;font-style:italic\">// Two-Way binding</span>\n<span style=\"color:#6a737d;font-style:italic\">// \u2192 also sets the signal when the element fires a DOM event</span>\n<span style=\"color:#6a737d;font-style:italic\">// (e.g. \"change\" for inputs). Enable \"events\" to configure</span>\n<span style=\"color:#6a737d;font-style:italic\">// which events trigger the write-back.</span>\n<span style=\"color:#6a737d;font-style:italic\">// \u2192 \"formula write back\" applies a reverse transformation</span>\n<span style=\"color:#6a737d;font-style:italic\">// before writing (useful when the formula changes the scale)</span></pre>\n <div class=\"note\">Two-Way is only available for <em>property</em> and <em>attribute</em> targets. Separate multiple event names with a semicolon.</div>\n </div>\n\n <div class=\"content-section\">\n <div class=\"section-title\"><span class=\"section-num\">5</span> Converter <span class=\"section-hint\">map values to display values</span></div>\n <div class=\"note\" style=\"margin-bottom:4px;\">Use the table to map specific conditions to output values. The <em>condition</em> column supports several matching modes:</div>\n <table class=\"ref-table\">\n <tr><th>Condition key</th><th>Matches when \u2026</th></tr>\n <tr><td>true / false</td><td>Signal value equals the boolean</td></tr>\n <tr><td>42</td><td>Signal value equals the number exactly</td></tr>\n <tr><td>running</td><td>Signal value equals the string \"running\"</td></tr>\n <tr><td>>10</td><td>Signal value is greater than 10</td></tr>\n <tr><td>>=5</td><td>Signal value is \u2265 5</td></tr>\n <tr><td><3</td><td>Signal value is < 3</td></tr>\n <tr><td>10-20</td><td>Signal value is in the range 10 \u2026 20 (inclusive)</td></tr>\n <tr><td>default</td><td>Fallback when no other key matches</td></tr>\n </table>\n <div class=\"note\" style=\"margin-top:4px;\">The value column supports template literals \u2014 use <code>${value}</code> to embed the original signal value in the output string.</div>\n <div class=\"note\" style=\"margin-top:4px;\"><strong>Named converter:</strong> enter a converter name in the <em>converter</em> field above the table to use a pre-registered converter instead of the inline table.</div>\n </div>\n\n</div>\n</body>\n</html>";
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
export const bindingsEditorHelpHtml = `<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<style>
|
|
6
|
+
:root { --accent: #2c6e9b; }
|
|
7
|
+
|
|
8
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
9
|
+
|
|
10
|
+
html, body {
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
font-family: Segoe UI, Arial, sans-serif;
|
|
14
|
+
font-size: 13px;
|
|
15
|
+
color: #333;
|
|
16
|
+
background: #f0f1f3;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.content {
|
|
20
|
+
height: 100%;
|
|
21
|
+
overflow-y: auto;
|
|
22
|
+
padding: 10px 14px 16px;
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
gap: 12px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.intro-banner {
|
|
29
|
+
background: #ffffff;
|
|
30
|
+
border-left: 4px solid var(--accent);
|
|
31
|
+
border-radius: 4px;
|
|
32
|
+
padding: 8px 12px;
|
|
33
|
+
font-size: 12px;
|
|
34
|
+
line-height: 1.5;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.intro-banner code {
|
|
38
|
+
font-family: Consolas, monospace;
|
|
39
|
+
background: #eef2f6;
|
|
40
|
+
padding: 1px 4px;
|
|
41
|
+
border-radius: 3px;
|
|
42
|
+
color: #2c4a68;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.content-section {
|
|
46
|
+
background: #ffffff;
|
|
47
|
+
border-radius: 6px;
|
|
48
|
+
padding: 8px 10px 10px;
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: column;
|
|
51
|
+
gap: 6px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.section-title {
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: baseline;
|
|
57
|
+
gap: 8px;
|
|
58
|
+
border-bottom: 2px solid var(--accent);
|
|
59
|
+
font-size: 13px;
|
|
60
|
+
font-weight: bold;
|
|
61
|
+
padding-bottom: 4px;
|
|
62
|
+
color: #24405c;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.section-num {
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
width: 18px;
|
|
70
|
+
height: 18px;
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
background: var(--accent);
|
|
73
|
+
color: white;
|
|
74
|
+
font-size: 10px;
|
|
75
|
+
font-weight: bold;
|
|
76
|
+
flex-shrink: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.section-hint {
|
|
80
|
+
font-size: 11px;
|
|
81
|
+
font-weight: normal;
|
|
82
|
+
color: #808080;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.snippet {
|
|
86
|
+
font-family: Consolas, "Courier New", monospace;
|
|
87
|
+
font-size: 11px;
|
|
88
|
+
background: #f6f8fa;
|
|
89
|
+
color: #24292e;
|
|
90
|
+
border: 1px solid #e1e4e8;
|
|
91
|
+
border-radius: 4px;
|
|
92
|
+
padding: 6px 10px;
|
|
93
|
+
white-space: pre;
|
|
94
|
+
overflow-x: auto;
|
|
95
|
+
line-height: 1.6;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.ref-table {
|
|
99
|
+
width: 100%;
|
|
100
|
+
border-collapse: collapse;
|
|
101
|
+
font-size: 12px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.ref-table th {
|
|
105
|
+
text-align: left;
|
|
106
|
+
font-weight: 600;
|
|
107
|
+
color: #24405c;
|
|
108
|
+
border-bottom: 1px solid #d0d7de;
|
|
109
|
+
padding: 4px 6px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.ref-table td {
|
|
113
|
+
padding: 3px 6px;
|
|
114
|
+
border-bottom: 1px solid #f0f0f0;
|
|
115
|
+
vertical-align: top;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.ref-table tr:last-child td { border-bottom: none; }
|
|
119
|
+
|
|
120
|
+
.ref-table td:first-child {
|
|
121
|
+
font-family: Consolas, monospace;
|
|
122
|
+
color: #005cc5;
|
|
123
|
+
white-space: nowrap;
|
|
124
|
+
width: 110px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.note {
|
|
128
|
+
font-size: 11px;
|
|
129
|
+
color: #666;
|
|
130
|
+
font-style: italic;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
code {
|
|
134
|
+
font-family: Consolas, monospace;
|
|
135
|
+
background: #eef2f6;
|
|
136
|
+
padding: 1px 4px;
|
|
137
|
+
border-radius: 3px;
|
|
138
|
+
color: #2c4a68;
|
|
139
|
+
font-size: 11px;
|
|
140
|
+
}
|
|
141
|
+
</style>
|
|
142
|
+
</head>
|
|
143
|
+
<body>
|
|
144
|
+
<div class="content">
|
|
145
|
+
|
|
146
|
+
<div class="intro-banner">
|
|
147
|
+
A <strong>Binding</strong> connects one or more signals to a property of an element.<br>
|
|
148
|
+
An optional <strong>formula</strong> transforms the signal values before they are applied.
|
|
149
|
+
A <strong>converter</strong> maps the final value to a display value.
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="content-section">
|
|
153
|
+
<div class="section-title"><span class="section-num">1</span> Signals (Objects) <span class="section-hint">what data to read</span></div>
|
|
154
|
+
<div class="note" style="margin-bottom:2px;">Each row adds one signal. The <em>name</em> column sets the variable name used in the formula.</div>
|
|
155
|
+
<pre class="snippet"><span style="color:#6a737d;font-style:italic">// name column empty → variable is __0, __1, __2 … (positional)</span>
|
|
156
|
+
<span style="color:#6a737d;font-style:italic">// name column filled → variable uses that name in the formula</span>
|
|
157
|
+
|
|
158
|
+
<span style="color:#005cc5">name</span>: mySpeed <span style="color:#005cc5">signal</span>: .Drive.Speed → accessible as mySpeed
|
|
159
|
+
<span style="color:#005cc5">name</span>: (empty) <span style="color:#005cc5">signal</span>: .Drive.Active → accessible as __1 (second row)</pre>
|
|
160
|
+
<div class="note">Multiple signals let you combine values in a formula, e.g. <code>__0 > 0 && __1</code>.</div>
|
|
161
|
+
</div>
|
|
162
|
+
|
|
163
|
+
<div class="content-section">
|
|
164
|
+
<div class="section-title"><span class="section-num">2</span> Signal path prefixes & special paths <span class="section-hint">special access modes</span></div>
|
|
165
|
+
<table class="ref-table">
|
|
166
|
+
<tr><th>Prefix / Pattern</th><th>What it accesses</th></tr>
|
|
167
|
+
<tr><td>(none)</td><td>The signal's current value directly</td></tr>
|
|
168
|
+
<tr><td>__name</td><td>Internal screen variable — local to the current screen, not connected to any external data source. Initial value is <code>null</code>. Useful for screen-local state like tab selection or panel visibility.</td></tr>
|
|
169
|
+
<tr><td>?name</td><td>A property of the signal object itself (e.g. <code>?quality</code> → signal quality)</td></tr>
|
|
170
|
+
<tr><td>??name</td><td>The value of a property of the signal object</td></tr>
|
|
171
|
+
<tr><td>#name</td><td>A property of the bound target element</td></tr>
|
|
172
|
+
<tr><td>##name</td><td>The current value of a property of the bound target element</td></tr>
|
|
173
|
+
<tr><td>$objectId</td><td>The entire signal configuration object (meta-data)</td></tr>
|
|
174
|
+
<tr><td>§name</td><td>A special framework-provided value (if supported)</td></tr>
|
|
175
|
+
<tr><td>{name}</td><td>Dynamic signal path: embed another signal's value inside the path, e.g. <code>.Plant.{.ActiveLine}.Speed</code></td></tr>
|
|
176
|
+
</table>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class="content-section">
|
|
180
|
+
<div class="section-title"><span class="section-num">3</span> Formula <span class="section-hint">transform signal values with JavaScript</span></div>
|
|
181
|
+
<div class="note" style="margin-bottom:2px;">Leave the formula empty to pass the first signal's value through unchanged.</div>
|
|
182
|
+
<pre class="snippet"><span style="color:#6a737d;font-style:italic">// Access signal values by position or by name:</span>
|
|
183
|
+
__0 * 100 <span style="color:#6a737d;font-style:italic">// first signal × 100</span>
|
|
184
|
+
__0 > 0 && __1 <span style="color:#6a737d;font-style:italic">// combine two signals</span>
|
|
185
|
+
speed > limit <span style="color:#6a737d;font-style:italic">// named variables</span>
|
|
186
|
+
|
|
187
|
+
<span style="color:#6a737d;font-style:italic">// Special variables available in the formula:</span>
|
|
188
|
+
__ctx <span style="color:#6a737d;font-style:italic">// the full binding context object</span>
|
|
189
|
+
__res <span style="color:#6a737d;font-style:italic">// the result of the previous evaluation</span></pre>
|
|
190
|
+
<div class="note">The formula must be a single JavaScript expression that returns a value (no <code>return</code> statement needed).</div>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<div class="content-section">
|
|
194
|
+
<div class="section-title"><span class="section-num">4</span> Write Back & Two-Way <span class="section-hint">send values back to signals</span></div>
|
|
195
|
+
<pre class="snippet"><span style="color:#6a737d;font-style:italic">// Write back signal</span>
|
|
196
|
+
<span style="color:#6a737d;font-style:italic">// → writes the formula result back to a signal whenever</span>
|
|
197
|
+
<span style="color:#6a737d;font-style:italic">// the element property changes (useful for derived values)</span>
|
|
198
|
+
|
|
199
|
+
<span style="color:#6a737d;font-style:italic">// Two-Way binding</span>
|
|
200
|
+
<span style="color:#6a737d;font-style:italic">// → also sets the signal when the element fires a DOM event</span>
|
|
201
|
+
<span style="color:#6a737d;font-style:italic">// (e.g. "change" for inputs). Enable "events" to configure</span>
|
|
202
|
+
<span style="color:#6a737d;font-style:italic">// which events trigger the write-back.</span>
|
|
203
|
+
<span style="color:#6a737d;font-style:italic">// → "formula write back" applies a reverse transformation</span>
|
|
204
|
+
<span style="color:#6a737d;font-style:italic">// before writing (useful when the formula changes the scale)</span></pre>
|
|
205
|
+
<div class="note">Two-Way is only available for <em>property</em> and <em>attribute</em> targets. Separate multiple event names with a semicolon.</div>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
<div class="content-section">
|
|
209
|
+
<div class="section-title"><span class="section-num">5</span> Converter <span class="section-hint">map values to display values</span></div>
|
|
210
|
+
<div class="note" style="margin-bottom:4px;">Use the table to map specific conditions to output values. The <em>condition</em> column supports several matching modes:</div>
|
|
211
|
+
<table class="ref-table">
|
|
212
|
+
<tr><th>Condition key</th><th>Matches when …</th></tr>
|
|
213
|
+
<tr><td>true / false</td><td>Signal value equals the boolean</td></tr>
|
|
214
|
+
<tr><td>42</td><td>Signal value equals the number exactly</td></tr>
|
|
215
|
+
<tr><td>running</td><td>Signal value equals the string "running"</td></tr>
|
|
216
|
+
<tr><td>>10</td><td>Signal value is greater than 10</td></tr>
|
|
217
|
+
<tr><td>>=5</td><td>Signal value is ≥ 5</td></tr>
|
|
218
|
+
<tr><td><3</td><td>Signal value is < 3</td></tr>
|
|
219
|
+
<tr><td>10-20</td><td>Signal value is in the range 10 … 20 (inclusive)</td></tr>
|
|
220
|
+
<tr><td>default</td><td>Fallback when no other key matches</td></tr>
|
|
221
|
+
</table>
|
|
222
|
+
<div class="note" style="margin-top:4px;">The value column supports template literals — use <code>\${value}</code> to embed the original signal value in the output string.</div>
|
|
223
|
+
<div class="note" style="margin-top:4px;"><strong>Named converter:</strong> enter a converter name in the <em>converter</em> field above the table to use a pre-registered converter instead of the inline table.</div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
</div>
|
|
227
|
+
</body>
|
|
228
|
+
</html>`;
|