npm - @node-projects/web-component-designer-visualization-addons - Versions diffs - 0.1.151 → 0.3.0 - Mend

@node-projects/web-component-designer-visualization-addons 0.1.151 → 0.3.0

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.

Files changed (11) hide show

package/dist/components/BindingsEditor.js +2 -2
package/dist/components/BindingsEditorHelp.d.ts +1 -1
package/dist/components/BindingsEditorHelp.js +8 -4
package/dist/components/EventAssignment.d.ts +1 -0
package/dist/components/EventAssignment.js +5 -2
package/dist/helpers/BindingsHelper.d.ts +25 -13
package/dist/helpers/BindingsHelper.js +602 -605
package/dist/index-min.js +56 -56
package/dist/services/VisualizationBindingsRefactorService.js +20 -23
package/package.json +1 -1
package/tests/BindingsHelper.test.ts +527 -0

package/dist/components/BindingsEditor.js CHANGED Viewed

@@ -9,7 +9,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
                 <div id="full-width-col">
                     <div id="signals-area">
                         <div class="row">
-                            <span class="section-label" title="Add signals by name and path. The variable name is used in the formula (__0, __1,... or a custom name).&#010;Access signal objects in properties via ?propertyName, access the propertyValue via ??propertyName.&#010;Access signal objects in properties of the target via #propertyName, access a propertyValue of the target via ##propertyName.&#010;Bind to signal configurations via $objectId.&#010;Bind to special values via §name (if supported by your framework).&#010;You could also use signals inside of a Signal Name via {name}">objects</span>
+                            <span class="section-label" title="Add signals by name and path. The variable name is used in the formula (__0, __1,... or a custom name).&#010;Access signal names in properties via ?propertyName and #propertyName, property values via ??propertyName and ##propertyName, and signal objects stored in properties via ?$propertyName and #$propertyName.&#010;Access screen attributes via ?@attributeName and target attributes via #@attributeName.&#010;Resolve a named signal object via $objectId.&#010;Bind to special values via §name (if supported by your framework).&#010;You could also use signals inside of a Signal Name via {name}">objects</span>
                             <button id="helpBtn" class="info-btn" title="Help"><svg viewBox="0 0 512 512" width="16" height="16"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg></button>
                         </div>
                         <div class="bordered-section">
@@ -454,7 +454,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
             signalInput.className = 'signal-path-input';
             signalInput.value = sig.signal;
             signalInput.placeholder = 'signal path';
-            signalInput.title = 'signal path (prefix: ? = signalProperty, ?? = property value, # = target property, ## = target property value)';
+            signalInput.title = 'signal path (prefix: ? = signal name in screen property, ?? = screen property value, ?$ = signal object in screen property, ?@ = screen attribute, # = signal name in target property, ## = target property value, #$ = signal object in target property, #@ = target attribute)';
             signalInput.oninput = () => {
                 this._signals[i].signal = signalInput.value;
                 this._syncSignals();

package/dist/components/BindingsEditorHelp.d.ts CHANGED Viewed

	@@ -1 +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>";
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 signal in a screen property</td></tr>\n <tr><td>??name</td><td>The current value of a screen property</td></tr>\n <tr><td>?$name</td><td>The signal object stored in a screen property</td></tr>\n <tr><td>?@name</td><td>The current value of a screen attribute</td></tr>\n <tr><td>#name</td><td>A signal in 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>#$name</td><td>The signal object stored in a property of the bound target element</td></tr>\n <tr><td>#@name</td><td>The current value of an attribute of the bound target element</td></tr>\n <tr><td>$objectId</td><td>The entire signal object</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>";

package/dist/components/BindingsEditorHelp.js CHANGED Viewed

@@ -166,11 +166,15 @@ code {
             <tr><th>Prefix / Pattern</th><th>What it accesses</th></tr>
             <tr><td>(none)</td><td>The signal's current value directly</td></tr>
             <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>
-            <tr><td>?name</td><td>A property of the signal object itself (e.g. <code>?quality</code> → signal quality)</td></tr>
-            <tr><td>??name</td><td>The value of a property of the signal object</td></tr>
-            <tr><td>#name</td><td>A property of the bound target element</td></tr>
+            <tr><td>?name</td><td>A signal in a screen property</td></tr>
+            <tr><td>??name</td><td>The current value of a screen property</td></tr>
+            <tr><td>?$name</td><td>The signal object stored in a screen property</td></tr>
+            <tr><td>?@name</td><td>The current value of a screen attribute</td></tr>
+            <tr><td>#name</td><td>A signal in a property of the bound target element</td></tr>
             <tr><td>##name</td><td>The current value of a property of the bound target element</td></tr>
-            <tr><td>$objectId</td><td>The entire signal configuration object (meta-data)</td></tr>
+            <tr><td>#$name</td><td>The signal object stored in a property of the bound target element</td></tr>
+            <tr><td>#@name</td><td>The current value of an attribute of the bound target element</td></tr>
+            <tr><td>$objectId</td><td>The entire signal object</td></tr>
             <tr><td>§name</td><td>A special framework-provided value (if supported)</td></tr>
             <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>
         </table>

package/dist/components/EventAssignment.d.ts CHANGED Viewed

@@ -34,6 +34,7 @@ export declare class EventAssignment extends BaseCustomWebComponentConstructorAp
     })[];
     initialize(visualizationHandler: VisualizationHandler, visualizationShell: VisualizationShell, scriptCommandsTypeInfo: any, propertiesTypeInfo: any, blocklyToolbox: any, commandDescriptions?: Record<string, ScriptCommandHelp>): void;
     set instanceServiceContainer(value: InstanceServiceContainer);
+    dispose(): void;
     protected _createControlsForScript(eventItem: eventWithDesignItem): any;
     protected _getScriptName(eventItem: IEvent): any;
     protected _changeScriptName(e: KeyboardEvent, eventItem: IEvent): Promise<void>;

package/dist/components/EventAssignment.js CHANGED Viewed

@@ -88,10 +88,13 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
     set instanceServiceContainer(value) {
         this._instanceServiceContainer = value;
         this._selectionChangedHandler?.dispose();
-        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+        this._selectionChangedHandler = this._instanceServiceContainer?.selectionService.onSelectionChanged.on(e => {
             this.selectedItems = e.selectedElements;
         });
-        this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements;
+        this.selectedItems = this._instanceServiceContainer?.selectionService.selectedElements ?? [];
+    }
+    dispose() {
+        this.instanceServiceContainer = null;
     }
     _createControlsForScript(eventItem) {
         const st = this._getScriptType(eventItem);

package/dist/helpers/BindingsHelper.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { VisualizationBinding } from "../interfaces/VisualizationBinding.js";
-import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
+import { State, VisualizationHandler } from "../interfaces/VisualizationHandler.js";
 import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
 export type SpecialValueHandler = {
     valueProvider: (propertyName: string, context: {
@@ -22,6 +22,8 @@ export declare const bindingPrefixInsideCss = "bind(";
 export declare const bindingPrefixInsideCssVarName = "--tmpBinding_";
 export declare const bindingsInCssRegex: RegExp;
 export type namedBinding = [name: string, binding: VisualizationBinding];
+type Cleanup = () => void;
+type StateChangeCallback = (id: string, value: State) => void;
 export declare function isLit(element: Element): boolean;
 export declare function parseBindingString(id: string): {
     parts: string[];
@@ -32,30 +34,40 @@ export declare class BindingsHelper {
     #private;
     _visualizationHandler: VisualizationHandler;
     namedConverterCallback: (converter: string, value: any, element: Element, binding: namedBinding) => any;
+    private _stateSubscriptions;
+    private _scheduledUpdates;
+    private _updateFlushScheduled;
+    private _compiledConverters;
     constructor(visualizationHandler: VisualizationHandler);
+    private scheduleUpdate;
     getChangedEventName(element: Element, propertyName: string): string;
+    private getParsedTargetName;
     parseBinding(element: Element, name: string, value: string, bindingTarget: BindingTarget, prefix: string): namedBinding;
     serializeBinding(element: Element, targetName: string, binding: VisualizationBinding): [name: string, value: string];
+    private getShortBindingAttributeName;
+    private getJsonBindingAttributeName;
     getBindingAttributeName(element: Element, propertyName: string, propertyTarget: BindingTarget): string;
     getBindings(element: Element): Generator<namedBinding, void, unknown>;
     applyAllBindings(rootElement: ParentNode, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler, skipChildrenFor?: (element: Element) => boolean): (() => void)[];
     parseCssBindings(sheet: string, element: Element, relativeSignalPath: string, root: HTMLElement): Promise<[stylesheet: CSSStyleSheet, unsub: (() => void)[]]>;
     parseCssBinding(value: string, element: Element, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler): [name: string, unsub: (() => void)[]];
+    /** @internal Shared fan-out avoids duplicate backend subscriptions and initial reads. */
+    subscribeToState(id: string, callback: StateChangeCallback): Cleanup;
     /**
-     * ? = bind to signals in properties
-     * ?? = binding to a property
-     * $ = bind to a signal configuration
-     * § = bind to a special value
-     * @param element
-     * @param binding
-     * @param relativeSignalPath
-     * @param root
-     * @returns
-     */
-    applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler): () => void;
+     * ? = signal name from a root property; ?? = a root property value
+     * # = signal name from a target property; ## = a target property value
+     * ?$ = signal object from a root property; #$ = signal object from a target property
+     * ?@ = a root attribute value; #@ = a target attribute value
+     * $ = a signal configuration; § = a special value
+    */
+    applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement, specialValueHandler?: SpecialValueHandler): Cleanup;
     private addTwoWayBinding;
     private static parseValueWithType;
-    handleValueChanged(element: Element, root: Element, binding: namedBinding, value: any, valuesObject: any[], index: number, signalVarNames: string[], noParse: boolean, relativeSignalPath: string): void;
+    private compileConverter;
+    private getCompiledConverter;
+    private applyCompiledConverter;
+    private createTargetWriter;
     static camelToDotCase(text: string): string;
     static dotToCamelCase(text: string): string;
 }
+export {};