@node-projects/web-component-designer-visualization-addons 0.1.150 → 0.1.152

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 (5) hide show
  1. package/dist/components/BindingsEditorHelp.d.ts +1 -1
  2. package/dist/components/BindingsEditorHelp.js +4 -4
  3. package/dist/helpers/BindingsHelper.js +15 -6
  4. package/dist/index-min.js +5 -5
  5. package/package.json +1 -1
package/dist/components/BindingsEditorHelp.d.ts CHANGED
@@ -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 &gt; 0 &amp;&amp; __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 &amp; 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 &gt; 0 &amp;&amp; __1 <span style=\"color:#6a737d;font-style:italic\">// combine two signals</span>\nspeed &gt; 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 &amp; 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>&gt;10</td><td>Signal value is greater than 10</td></tr>\n <tr><td>&gt;=5</td><td>Signal value is \u2265 5</td></tr>\n <tr><td>&lt;3</td><td>Signal value is &lt; 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 &gt; 0 &amp;&amp; __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 &amp; 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>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>$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 &gt; 0 &amp;&amp; __1 <span style=\"color:#6a737d;font-style:italic\">// combine two signals</span>\nspeed &gt; 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 &amp; 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>&gt;10</td><td>Signal value is greater than 10</td></tr>\n <tr><td>&gt;=5</td><td>Signal value is \u2265 5</td></tr>\n <tr><td>&lt;3</td><td>Signal value is &lt; 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
@@ -166,11 +166,11 @@ code {
166
166
  <tr><th>Prefix / Pattern</th><th>What it accesses</th></tr>
167
167
  <tr><td>(none)</td><td>The signal's current value directly</td></tr>
168
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>
169
+ <tr><td>?name</td><td>A signal in a screen property</td></tr>
170
+ <tr><td>??name</td><td>The current value of a screen property</td></tr>
171
+ <tr><td>#name</td><td>A signal in a property of the bound target element</td></tr>
172
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>
173
+ <tr><td>$objectId</td><td>The entire signal object</td></tr>
174
174
  <tr><td>§name</td><td>A special framework-provided value (if supported)</td></tr>
175
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
176
  </table>
package/dist/helpers/BindingsHelper.js CHANGED
@@ -491,8 +491,8 @@ export class BindingsHelper {
491
491
  applyAllBindings(rootElement, relativeSignalPath, root, specialValueHandler, skipChildrenFor) {
492
492
  let retVal = [];
493
493
  const tw = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT);
494
- let e;
495
- while (e = tw.nextNode()) {
494
+ let e = tw.nextNode();
495
+ while (e) {
496
496
  const bindings = this.getBindings(e);
497
497
  for (let b of bindings) {
498
498
  try {
@@ -514,11 +514,20 @@ export class BindingsHelper {
514
514
  console.warn("error applying binding", e, b, err);
515
515
  }
516
516
  }
517
- if (skipChildrenFor) {
518
- if (skipChildrenFor(e)) {
519
- e = tw.nextSibling();
520
- continue;
517
+ if (skipChildrenFor && skipChildrenFor(e)) {
518
+ // Skip the whole subtree of e: advance to the next node that is NOT a descendant of e.
519
+ // nextSibling() returns null WITHOUT moving the walker when e is the last child, so we must
520
+ // walk up via parentNode() until a sibling exists, otherwise the following nextNode() would
521
+ // descend into the skipped subtree anyway.
522
+ let nn = tw.nextSibling();
523
+ while (!nn && e) {
524
+ e = tw.parentNode();
525
+ nn = tw.nextSibling();
521
526
  }
527
+ e = nn;
528
+ }
529
+ else {
530
+ e = tw.nextNode();
522
531
  }
523
532
  }
524
533
  return retVal;
package/dist/index-min.js CHANGED
@@ -268,11 +268,11 @@ code {
268
268
  <tr><th>Prefix / Pattern</th><th>What it accesses</th></tr>
269
269
  <tr><td>(none)</td><td>The signal's current value directly</td></tr>
270
270
  <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>
271
- <tr><td>?name</td><td>A property of the signal object itself (e.g. <code>?quality</code> \u2192 signal quality)</td></tr>
272
- <tr><td>??name</td><td>The value of a property of the signal object</td></tr>
273
- <tr><td>#name</td><td>A property of the bound target element</td></tr>
271
+ <tr><td>?name</td><td>A signal in a screen property</td></tr>
272
+ <tr><td>??name</td><td>The current value of a screen property</td></tr>
273
+ <tr><td>#name</td><td>A signal in a property of the bound target element</td></tr>
274
274
  <tr><td>##name</td><td>The current value of a property of the bound target element</td></tr>
275
- <tr><td>$objectId</td><td>The entire signal configuration object (meta-data)</td></tr>
275
+ <tr><td>$objectId</td><td>The entire signal object</td></tr>
276
276
  <tr><td>\xA7name</td><td>A special framework-provided value (if supported)</td></tr>
277
277
  <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>
278
278
  </table>
@@ -1289,5 +1289,5 @@ ${B('{ "source": "parameter", "name": "myParam" }')} <span class="cs-comment">/
1289
1289
  `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[P+v.camelToDashCase(s),(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!r&&e.target==y.class&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[F+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!r&&e.target==y.class&&e.expression&&!e.expression.includes(`
1290
1290
  `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[F+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!r&&e.target==y.css&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[H+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!r&&e.target==y.css&&e.expression&&!e.expression.includes(`
1291
1291
  `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[H+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!r&&e.target==y.cssvar&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[J+l.camelToDotCase(s.substring(2)),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!r&&e.target==y.cssvar&&e.expression&&!e.expression.includes(`
1292
- `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[J+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+n]:((e.inverted===null||e.inverted===!1)&&delete i.inverted,(e.expression===null||e.expression==="")&&delete i.expression,(e.expressionTwoWay===null||e.expressionTwoWay==="")&&delete i.expressionTwoWay,(e.twoWay===null||e.twoWay===!1)&&delete i.twoWay,delete i.target,e.historic||delete i.historic,e.target==y.content?[T+"html",JSON.stringify(i)]:e.target==y.attribute?[P+v.camelToDashCase(s),JSON.stringify(i)]:e.target==y.class?[F+l.camelToDotCase(s),JSON.stringify(i)]:e.target==y.css?[H+v.camelToDashCase(s),JSON.stringify(i)]:e.target==y.cssvar?[J+l.camelToDotCase(s.substring(2)),JSON.stringify(i)]:e.target==y.property&&s=="innerHTML"?[T+"html",JSON.stringify(i)]:e.target==y.property&&s=="textContent"?[T+"text",JSON.stringify(i)]:[I+v.camelToDashCase(s),JSON.stringify(i)])}getBindingAttributeName(t,s,e){return e==y.attribute?P+v.camelToDashCase(s):e==y.class?F+l.camelToDotCase(s):e==y.css?H+v.camelToDashCase(s):e==y.visible?he:e==y.cssvar?J+l.camelToDotCase(s):e==y.property&&s=="innerHTML"?T+"html":e==y.property&&s=="textContent"?T+"text":I+v.camelToDashCase(s)}*getBindings(t){if(t.attributes)for(let s of t.attributes)s.name.startsWith(I)?yield this.parseBinding(t,s.name,s.value,y.property,I):s.name.startsWith(T)?yield this.parseBinding(t,s.name==="bind-content:html"?"bind-prop:inner-h-t-m-l":"bind-prop:text-content",s.value,y.property,I):s.name.startsWith(P)?yield this.parseBinding(t,s.name,s.value,y.attribute,P):s.name.startsWith(F)?yield this.parseBinding(t,s.name,s.value,y.class,F):s.name.startsWith(H)?yield this.parseBinding(t,s.name,s.value,y.css,H):s.name.startsWith(J)?yield this.parseBinding(t,s.name,s.value,y.cssvar,J):s.name.startsWith(he)&&(yield this.parseBinding(t,s.name,s.value,y.visible,he))}applyAllBindings(t,s,e,i,n){let r=[],a=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),c;for(;c=a.nextNode();){let o=this.getBindings(c);for(let p of o)try{let h=this.applyBinding(c,p,s,e,i);if(r.push(h),p[1].maybeLitElement&&c.localName.includes("-")&&!customElements.get(c.localName)){let m=c,u=p;customElements.whenDefined(c.localName).then(()=>{X(m)&&(h(),u[1].events=u[1].litEventNames,r.push(this.applyBinding(m,u,s,e,i)))})}}catch(h){console.warn("error applying binding",c,p,h)}if(n&&n(c)){c=a.nextSibling();continue}}return r}static#e=0;async parseCssBindings(t,s,e,i){let n=await import("@node-projects/css-parser"),r=n.parse(t),a;for(let o of r.stylesheet.rules)if(o.type===n.CssTypes.rule){for(let p of o.declarations)if(p.type===n.CssTypes.declaration&&p.value.includes(Et)){let h=this.parseCssBinding(p.value,s,e,i);p.value=h[0],a?a.push(...h[1]):a=h[1]}}let c=n.stringify(r,{indent:"",compress:!0});return[Tt(c),a]}parseCssBinding(t,s,e,i,n){t=t.trim();let r="",a="",c=!1,o="",p=!1,h=null,m=[];for(let u=0;u<t.length;u++){let d=t[u];if(c)if(p)o+=d;else if(h&&d==="\\")p=!0;else if(d===h)h=null;else if(h===null&&d===")"){let g=l.#e++,f=Nt+g,b=[f,{signal:o,target:y.cssvar}];o.startsWith("{")&&(b=JSON.parse(o)),m.push(this.applyBinding(s,b,e,i,n)),r+="var("+f+")",c=!1,o=""}else o+=d;else d==="("?(a!=="bind"?(r+=a,r+=d):(c=!0,t[u+1]==="'"||t[u+1]==='"'?(u++,h=t[u]):h=null),a=""):d===" "||d===","||d==="("||d==="+"||d==="-"||d==="*"||d==="/"?(r+=a+d,a=""):a+=d}return[r+a,m]}applyBinding(t,s,e,i,n){let r=[],a,c=()=>{for(let m of r)this._visualizationHandler.unsubscribeState(m[0],m[1],m[2]);if(a)for(let m of a)m()},o=s[1].signal.split(";"),p=new Array(o.length);for(let m=0;m<o.length;m++){let u=o[m];if(p[m]="__"+m,u.includes(":")){let d=u.split(":");p[m]=d[0],u=d[1],o[m]=u}if(u[0]==="?"){if(i){let d=u.substring(1);if(d[0]=="?")o[m]=d;else{o[m]=i[d],d[0]==="$"&&(d=d.substring(1),o[m]="$"+i[d]);let g=()=>{c(),this.applyBinding(t,s,e,i,n)},f=this.getChangedEventName(i,d);i.addEventListener(f,g),a||(a=[]),a.push(()=>i.removeEventListener(f,g))}}}else if(u[0]==="#"){let d=u.substring(1);if(d[0]=="#")o[m]=d;else{o[m]=i[d],d[0]==="$"&&(d=d.substring(1),o[m]="$"+i[d]);let g=()=>{c(),this.applyBinding(t,s,e,i,n)},f=this.getChangedEventName(t,d);i.addEventListener(f,g),a||(a=[]),a.push(()=>i.removeEventListener(f,g))}}u[0]==="."&&(o[m]=this._visualizationHandler.getNormalizedSignalName(u,e,t))}let h=new Array(o.length);for(let m=0;m<o.length;m++){let u=o[m];if(u[0]==="?"){if(i){let d=u.substring(1),g=()=>{let f=!1;f||(f=!0,this.handleValueChanged(t,i,s,i[d],h,m,p,!1,e),f=!1)};i.addEventListener(v.camelToDashCase(d)+"-changed",g),a||(a=[]),a.push(()=>i.removeEventListener(v.camelToDashCase(d)+"-changed",g));try{this.handleValueChanged(t,i,s,i[d],h,m,p,!1,e)}catch(f){console.error(f)}s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,f=>i[d]=f)}}else if(u[0]==="#"){let d=u.substring(1),g=()=>{let f=!1;f||(f=!0,this.handleValueChanged(t,i,s,t[d],h,m,p,!1,e),f=!1)};t.addEventListener(v.camelToDashCase(d)+"-changed",g),a||(a=[]),a.push(()=>t.removeEventListener(v.camelToDashCase(d)+"-changed",g));try{this.handleValueChanged(t,i,s,t[d],h,m,p,!1,e)}catch(f){console.error(f)}s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,f=>t[d]=f)}else if(u[0]==="$"){let d=u.substring(1);d[0]==="."&&(d=this._visualizationHandler.getNormalizedSignalName(d,e,t)),this._visualizationHandler.getObject(d).then(g=>{this.handleValueChanged(t,i,s,g,h,m,p,!0,e)})}else if(u[0]==="\xA7"){let d=u.substring(1),g=n.valueProvider(d,{element:t,binding:s,relativeSignalPath:e,root:i});g instanceof Promise?g.then(b=>this.handleValueChanged(t,i,s,b,h,m,p,!0,e)):this.handleValueChanged(t,i,s,g,h,m,p,!0,e),n.valueChangedCallbacks||(n.valueChangedCallbacks=new Map);let f=n.valueChangedCallbacks.get(d);f==null&&(f=[],n.valueChangedCallbacks.set(d,f)),f.push(()=>{let b=n.valueProvider(d,{element:t,binding:s,relativeSignalPath:e,root:i});b instanceof Promise?b.then(_=>this.handleValueChanged(t,i,s,_,h,m,p,!0,e)):this.handleValueChanged(t,i,s,b,h,m,p,!0,e)})}else if(u.includes("{")){let d=new me(this,this._visualizationHandler,u,g=>this.handleValueChanged(t,i,s,g.val,h,m,p,!1,e),t,e,i,n);a||(a=[]),a.push(()=>d.dispose()),s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,g=>d.setState(g))}else if(s[1].historic)if(s[1].historic.reloadInterval){let d={timerId:-1},g=async()=>{let f=await this._visualizationHandler.getHistoricData(u,s[1].historic);this.handleValueChanged(t,i,s,f?.values,h,m,p,!0,e),d.timerId!==null&&(d.timerId=setTimeout(g,s[1].historic.reloadInterval))};g(),a||(a=[]),a.push(()=>{d.timerId>0&&clearTimeout(d.timerId),d.timerId=null})}else this._visualizationHandler.getHistoricData(u,s[1].historic).then(d=>this.handleValueChanged(t,i,s,d?.values,h,m,p,!0,e));else{let d=(g,f)=>this.handleValueChanged(t,i,s,f.val,h,m,p,!1,e);r.push([u,d,this._visualizationHandler.subscribeState(u,d)]),this._visualizationHandler.getState(u).then(g=>this.handleValueChanged(t,i,s,g?.val,h,m,p,!1,e)),s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,g=>this._visualizationHandler.setState(u,g))}}return c}addTwoWayBinding(t,s,e){t[1].expressionTwoWay&&(t[1].compiledExpressionTwoWay||(t[1].expressionTwoWay.includes("return ")?t[1].compiledExpressionTwoWay=new Function(["value"],t[1].expressionTwoWay):t[1].compiledExpressionTwoWay=new Function(["value"],"return "+t[1].expressionTwoWay)));for(let i of t[1].events){let n=s[i];n instanceof Ct?n.on(()=>{let r;t[1].target==y.attribute?r=s.getAttribute(t[0]):r=s[t[0]],r=l.parseValueWithType(r,t),t[1].compiledExpressionTwoWay&&(r=t[1].compiledExpressionTwoWay(r)),e(r)}):s.addEventListener(i,r=>{let a;t[1].target==y.attribute?a=s.getAttribute(t[0]):a=s[t[0]],a=l.parseValueWithType(a,t),t[1].compiledExpressionTwoWay&&(a=t[1].compiledExpressionTwoWay(a)),e(a)})}}static parseValueWithType(t,s){if(s[1].type)switch(s[1].type){case"number":return parseFloat(t);case"boolean":return t===!0||t==="true"||!!parseInt(t);case"string":return t?.toString();case"integer":return parseInt(t)}return t}handleValueChanged(t,s,e,i,n,r,a,c,o){let p=i;if(!c&&r==0&&(p=l.parseValueWithType(p,e)),n[r]=p,e[1].expression&&(e[1].compiledExpression||(a.push("__res"),a.push("__ctx"),e[1].expression.includes("return ")?e[1].compiledExpression=new Function(a,e[1].expression):e[1].compiledExpression=new Function(a,"return "+e[1].expression)),n[a.length-1]={element:t,root:s,boundNames:e[1].signal,boundTargetName:e[0],boundTargetType:e[1].target},p=e[1].compiledExpression(...n),n[a.length-1]=p),e[1].converter)if(typeof e[1].converter=="string")p=this.namedConverterCallback(e[1].converter,p,t,e);else{let h=p!=null?p.toString():p;if(h in e[1].converter){let m=e[1].converter[h];typeof m=="string"?p=new Function(a,"return `"+e[1].converter[h]+"`")(...n):p=m}else{let m=!1,u=parseFloat(p);for(let d in e[1].converter)if(d.length>2&&d[0]===">"&&d[1]==="="){let g=parseFloat(d.substring(2));if(u>=g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else if(d.length>2&&d[0]==="<"&&d[1]==="="){let g=parseFloat(d.substring(2));if(u<=g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else if(d.length>1&&d[0]===">"){let g=parseFloat(d.substring(1));if(u>g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else if(d.length>1&&d[0]==="<"){let g=parseFloat(d.substring(1));if(u<g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else{let g=d.split("-");if(g.length>1&&(g[0]===""||u>=parseFloat(g[0]))&&(g[1]===""||parseFloat(g[1])>=u)){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}!m&&e[1].converterDefault!==void 0&&(p=e[1].converterDefault)}}if(e[1].inverted&&(p=!p),e[1].writeBackSignal){let h=e[1].writeBackSignal;h[0]==="."&&(h=o+h),this._visualizationHandler.setState(h,p,!0)}e[1].target==y.property?t[e[0]]=p:e[1].target==y.attribute?typeof p=="boolean"?p?t.setAttribute(e[0],""):t.removeAttribute(e[0]):t.setAttribute(e[0],p):e[1].target==y.css?t.style[e[0]]=p:e[1].target==y.cssvar?t.style.setProperty(e[0],p):e[1].target==y.class?p?t.classList.add(e[0]):t.classList.remove(e[0]):e[1].target==y.visible&&(t.style.visibility=p?"":"collapse")}static camelToDotCase(t){return t.replace(/([A-Z])/g,s=>`.${s[0].toLowerCase()}`)}static dotToCamelCase(t){return t.replace(/\.([a-z])/g,s=>s[1].toUpperCase())}};var Ve=class{name;relativeSignalsPath;commands;parameters};import{deepValue as O,setDeepValue as Re,sleep as Bt}from"@node-projects/web-component-designer/dist/elements/helper/Helper.js";import U from"long";var se="cyclic",It={pointerdown:"pointerup",pointerenter:"pointerleave",mouseenter:"mouseleave",mouseover:"mouseout",focus:"blur",focusin:"focusout",keydown:"keyup"},Ae=class{_visualizationHandler;_subscriptionCallback=()=>{};constructor(l){this._visualizationHandler=l}async execute(l,t){let s=-1,e=!1,i=!1,n=t.event?.type,r=n?It[n]:null;if(r){let a=t.element;n=="pointerdown"&&(a=window),a.addEventListener(r,()=>{e=!0},{once:!0})}for(let a=0;a<l.length;a++){let c=l[a];if(c.type=="Exit"){i=!0;break}else if(c.type=="If"){let p=(await this.evaluateIfFormula(c,t)?c.trueCommands:c.elseCommands)??[];if(!await this.execute(p,t)){i=!0;break}}else if(c.type=="Goto"){let o=await this.getValue(c.label,t);if(a=l.findIndex(p=>p.type=="Label"&&p.label==o),a<0)break}else if(c.type=="Condition"){let o=await this.getValue(c.value1,t),p=await this.getValue(c.value2,t),h=await this.getValue(c.comparisonType,t),m=!1;switch(h){case"==null":m=o==null;break;case"!=null":m=o!=null;break;case"==true":m=o==!0;break;case"==false":m=o==!1;break;case"==":m=o==p;break;case"!=":m=o!=p;break;case">":m=o>p;break;case"<":m=o<p;break;case">=":m=o>=p;break;case"<=":m=o<=p;break;case"&&":m=o&&p;break;case"||":m=o||p;break}if(m){await this.runExternalScript(await this.getValue(c.trueScriptName,t),await this.getValue(c.trueScriptType,t));let u=await this.getValue(c.trueGotoLabel,t);if(u&&(a=l.findIndex(d=>d.type=="Label"&&d.label==u),a<0))break}else{await this.runExternalScript(await this.getValue(c.falseScriptName,t),await this.getValue(c.falseScriptType,t));let u=await this.getValue(c.falseGotoLabel,t);if(u&&(a=l.findIndex(d=>d.type=="Label"&&d.label==u),a<0))break}}else if(c.type=="Repeat"){let o=await this.getValue(c.label,t),p=await this.getValue(c.count,t);if(await this.getValue(c.mode,t)=="eventValid"&&e){e=!1;continue}if(p!=0&&s==-1&&(s=p-1),s==0||(s>0&&s--,a=-1,o&&(a=l.findIndex(m=>m.type=="Label"&&m.label==o),a<0)))continue}else if(!await this.runScriptCommand(c,t)){i=!0;break}}return!i}async getValueFromTarget(l,t,s){return l==="property"?O(s.root,t):l==="elementProperty"?O(s.element,t):(await this._visualizationHandler.getState(this.getSignalName(t,s)))?.val}async setValueOnTarget(l,t,s,e){l==="property"?Re(s.root,t,e):l==="elementProperty"?Re(s.element,t,e):await this._visualizationHandler.setState(this.getSignalName(t,s),e)}async runExternalScript(l,t){}async runScriptCommand(command,context){switch(command.type){case"Comment":case"Label":case"Condition":case"If":case"Goto":case"Exit":case"Repeat":break;case"OpenUrl":{window.open(await this.getValue(command.url,context),command.target);break}case"Delay":{let l=await this.getValue(command.value??500,context);await Bt(l);break}case"Console":{let l=await this.getValue(command.target??"log",context),t=await this.getValue(command.message,context);console[l](t);break}case"ToggleSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),s=await this.getValueFromTarget(t,l,context);await this._visualizationHandler.setState(this.getSignalName(l,context),!s);break}case"ToggleSignalValueThroughList":{let l=await this.getValue(command.valueList,context),t=await this.getValue(command.signal,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,t,context),i=l.indexOf(e)+1;i>=l.length&&(i=0);let n=l[i];await this._visualizationHandler.setState(this.getSignalName(t,context),n);break}case"SetSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context);await this.setValueOnTarget(t,l,context,await this.getValue(command.value,context));break}case"IncrementSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,l,context)+await this.getValue(command.value,context);await this.setValueOnTarget(t,l,context,e);break}case"DecrementSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,l,context)-await this.getValue(command.value,context);await this.setValueOnTarget(t,l,context,e);break}case"CalculateSignalValue":{let formula=await this.getValue(command.formula,context),target=await this.getValue(command.target,context),targetSignal=await this.getValue(command.targetSignal,context),nm=await this.parseStringWithValues(formula,context),result=eval(nm);await this.setValueOnTarget(target,targetSignal,context,result);break}case"SetBitInSignal":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,l,context),i=U.fromNumber(1).shiftLeft(t),n=U.fromNumber(e).or(i).toNumber();await this.setValueOnTarget(s,l,context,n);break}case"ClearBitInSignal":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,l,context),i=U.fromNumber(1).shiftLeft(t);i.negate();let n=U.fromNumber(e).and(i).toNumber();await this.setValueOnTarget(s,l,context,n);break}case"ToggleBitInSignal":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,l,context),i=U.fromNumber(1).shiftLeft(t),n=U.fromNumber(e).xor(i).toNumber();await this.setValueOnTarget(s,l,context,n);break}case"Javascript":{let l=await this.getValue(command.script,context),t=context;t.shadowRoot=context.element.getRootNode(),t.instance=context.shadowRoot.host,command.compiledScript||(command.compiledScript=new Function("context",l)),command.compiledScript(t);break}case"SetElementProperty":{command=D.upgradeSetElementProperty(command);let l=await this.getValue(command.name,context);l===""&&(l=null);let t=await this.getValue(command.value,context),s=await this.getValue(command.parentIndex??0,context),e=await this.getValue(command.target??"property",context),i=await this.getValue(command.targetSelectorTarget??"container",context),n=await this.getValue(command.targetSelector,context),r=await this.getValue(command.mode??"toggle",context),a=this.getTargetFromTargetSelector(context,i,s,n);for(let c of a)e=="attribute"?c.setAttribute(l,t):e=="property"?c[l]=t:e=="css"?c.style[l]=t:e=="class"&&(r==="toggle"?c.classList.toggle(l??t):r==="remove"?c.classList.remove(l??t):c.classList.add(l??t));break}case"SubscribeSignal":{let l=await this.getValue(command.signal,context);if(await this.getValue(command.oneTime,context)){let s=()=>{this._visualizationHandler.unsubscribeState(l,s,null)};this._visualizationHandler.subscribeState(l,s)}else this._visualizationHandler.subscribeState(l,this._subscriptionCallback);break}case"UnsubscribeSignal":{let l=await this.getValue(command.signal,context);this._visualizationHandler.unsubscribeState(l,this._subscriptionCallback,null);break}case"WriteSignalsInGroup":{let l=await this.getValue(command.group,context);this._visualizationHandler.writeSignalsInGroup(l);break}case"ClearSignalsInGroup":{let l=await this.getValue(command.group,context);this._visualizationHandler.clearSignalsInGroup(l);break}case"RunScript":{let l=await this.getValue(command.name,context),t=await this.getValue(command.scriptType,context);this.runExternalScript(l,t);break}case"ShowMessageBox":{let l=null,t=await this.getValue(command.exitScriptOnCancel,context);if(await this.getValue(command.buttons,context)=="yesNo"){let i=await this.getValue(command.message,context);confirm(i)?l=1:l=2}else{let i=await this.getValue(command.message,context);alert(i),l=1}let e=await this.getValue(command.resultSignal,context);if(e&&this._visualizationHandler.setState(e,l),t&&l!=1)return!1;break}case"ShowPrompt":{let l=await this.getValue(command.message,context),t=await this.getValue(command.default,context),s=prompt(l,t),e=await this.getValue(command.resultSignal,context);e&&s&&this._visualizationHandler.setState(e,s);break}case"Login":case"Logout":case"CloseDialog":case"OpenDialog":case"OpenScreen":case"SwitchLanguage":case"CopySignalValuesFromFolder":case"ExportSignalValuesAsJson":case"ImportSignalValuesFromJson":{alert('command: "'+command.type+'" is not yet implemented');break}}return!0}getTarget(l,t,s){if(t==="container"){let e=l.element.getRootNode().host;for(let i=0;i<(s??0);i++)e=e.getRootNode().host;return e}else if(t==="element"){let e=l.element;for(let i=0;i<(s??0);i++)e=e.parentElement;return e}return null}getTargetFromTargetSelector(l,t,s,e){let i=this.getTarget(l,t,s),n=[i];return e&&(t==="container"?n=i.shadowRoot.querySelectorAll(e):n=i.querySelectorAll(e)),n}async getValue(value,outerContext){if(value==null)return null;if(typeof value=="object")switch(value.source){case"property":return O(outerContext.root,value.name);case"elementProperty":return O(outerContext.element,value.name);case"signal":return(await this._visualizationHandler.getState(this.getSignalName(value.name,outerContext)))?.val;case"signalInProperty":{let l=O(outerContext.root,value.name);return(await this._visualizationHandler.getState(this.getSignalName(l,outerContext)))?.val}case"event":{let l=outerContext.event;return value.name&&(l=O(l,value.name)),l}case"parameter":return outerContext.parameters[value.name];case"context":return O(outerContext,value.name);case"complexString":{let l=value.name;return l!=null?await this.parseStringWithValues(l,outerContext):null}case"complexSignal":{let l=value.name;if(l!=null){let t=await this.parseStringWithValues(l,outerContext);return(await this._visualizationHandler.getState(this.getSignalName(t,outerContext)))?.val}return null}case"expression":{var ctx=outerContext;return eval(value.name)}}return value}async getStateOrFieldOrParameter(name,context){if(name[0]==="\xA7"){var ctx=context;return eval("ctx."+name.substring(1))}else{if(name[0]==="?"&&name[1]==="?")return context.root[name.substring(2)];if(name[0]==="?")return await this._visualizationHandler.getState(this.getSignalName(context.root[name.substring(1)],context))}return await this._visualizationHandler.getState(this.getSignalName(name,context))}async parseStringWithValues(l,t){let s=ge(l),e=await Promise.all(s.signals.map(n=>this.getStateOrFieldOrParameter(this.getSignalName(n,t),t))),i=s.parts[0];for(let n=0;n<s.parts.length-1;n++){let r=e[n];typeof r=="object"&&(r=r.val),r==null&&(r=""),i+=r+s.parts[n+1]}return i}async evaluateIfFormula(l,t){let s=l.signals??[],e=s.map((r,a)=>r.varName?.trim()||"__"+a),i=await Promise.all(s.map(r=>this.getValue(r,t))),n=await this.getValue(l.formula,t);return(!l.compiledFormula||l._compiledFormulaSrc!==n)&&(l.compiledFormula=new Function(...e,"return ("+n+");"),l._compiledFormulaSrc=n),!!l.compiledFormula(...i)}getSignalName(l,t){return l[0]==="."?t.relativeSignalsPath+l:l}createScriptContext(l,t,s,e,i){return{root:l,event:t,element:s,parameters:e,relativeSignalsPath:i}}async assignAllScripts(l,t,s,e,i,n,r,a){n??=this.createScriptContext;let c=await this.loadAndInitJsObject(l,t,s,e,a);for(let o of s.querySelectorAll("*"))for(let p of o.attributes)if(p.name[0]==="@")try{let h=p.name.substring(1),m=p.value.trim(),u=h.startsWith(se),d=u?parseInt(h.substring(h.indexOf(":")+1)):null,g=await this.resolveHandler(m,c,o,s,e,i,n,r,h);g&&this.bindHandler(o,h,u,d,g)}catch{console.warn("error assigning script",o,p)}return c}async loadAndInitJsObject(l,t,s,e,i){if(!t)return null;try{let r=await import(URL.createObjectURL(new Blob([t],{type:"application/javascript"})));return i?i(r):r.init?.(e,s),r}catch(n){return console.error("error parsing javascript - "+l,n),null}}async resolveHandler(l,t,s,e,i,n,r,a,c){if(l[0]!=="{")return p=>{t?.[l]?t[l](p,s,e,i):console.warn(`javascript function named: "${l}" not found, maybe missing a "export" ?`)};let o=JSON.parse(l);if("commands"in o)return p=>this.execute(o.commands,r(i,p,s,o.parameters,o.relativeSignalsPath));if("blocks"in o){let p=null;return async h=>{p??=await ve(o),p(h,e,o.parameters,o.relativeSignalsPath??"",n,r(i,h,s,o.parameters,o.relativeSignalsPath))}}if("name"in o){if(a)return a(s,c,o),null;let p=o.name;return h=>{t?.[p]?t[p](h,s,e,i,o.parameters):console.warn(`javascript function named: "${p}" not found, maybe missing a "export" ?`)}}return null}bindHandler(l,t,s,e,i){if(!s){l.addEventListener(t,i);return}let n=setInterval(()=>{l.isConnected?i(null):clearInterval(n)},e)}};import{OverlayLayer as Ot,DesignItem as V,InsertAction as Vt,BindingTarget as E,PropertyType as ie}from"@node-projects/web-component-designer";var ze=class{constructor(t,s){this._bindingsHelper=t,this._visualizationHandler=s}_bindingsHelper;_visualizationHandler;rectMap=new Map;rect;dragEnter(t,s,e){let i=V.GetDesignItem(e);if(i&&!i.isRootItem){let n=t.getNormalizedElementCoordinates(e);this.rect=t.overlayLayer.drawRect("IobrokerWebuiBindableObjectDragDropService",n.x,n.y,n.width,n.height,"",null,Ot.Background),this.rect.style.fill="#ff0000",this.rect.style.opacity="0.3",this.rectMap.set(e,this.rect)}}dragLeave(t,s,e){let i=V.GetDesignItem(e);if(i&&!i.isRootItem){let n=this.rectMap.get(e);t.overlayLayer.removeOverlay(n),this.rectMap.delete(e)}}dragOver(t,s,e){return"copy"}async drop(t,s,e,i){for(let c of this.rectMap.values())t.overlayLayer.removeOverlay(c);this.rectMap.clear();let n=V.GetDesignItem(i),r=await this._visualizationHandler.getObject(e.fullName),a=this._visualizationHandler.getSignalInformation(r);if(n&&!n.isRootItem)if(i instanceof HTMLInputElement){let c={signal:e.fullName,target:E.property},o=this._bindingsHelper.serializeBinding(i,i.type=="checkbox"?"checked":"value",c);n.setAttribute(o[0],o[1])}else{let c={signal:e.fullName,target:E.content},o=this._bindingsHelper.serializeBinding(i,null,c);n.setAttribute(o[0],o[1])}else{let c=t.getNormalizedEventCoordinates(s),o,p,h=await this._visualizationHandler.getState(e.fullName);if(a.role==="url"&&typeof h?.val=="string")if(h.val.endsWith("jpg")||h.val.endsWith("jpeg")||h.val.endsWith("png")||h.val.endsWith("gif")||h.val.endsWith("svg")){let m=document.createElement("img");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u={signal:e.fullName,target:E.property},d=this._bindingsHelper.serializeBinding(m,"src",u);o.setAttribute(d[0],d[1]),o.element.src=h.val}else if(h.val.endsWith("mp4")){let m=document.createElement("video");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u={signal:e.fullName,target:E.property},d=this._bindingsHelper.serializeBinding(m,"src",u);o.setAttribute(d[0],d[1]),o.element.src=h.val}else{let m=document.createElement("iframe");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u={signal:e.fullName,target:E.property},d=this._bindingsHelper.serializeBinding(m,"src",u);o.setAttribute(d[0],d[1]),o.element.src=h.val}if(!o){let m=document.createElement("input");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u=a.writeable!==!1,d={signal:e.fullName,target:E.property,twoWay:u},g=this._bindingsHelper.serializeBinding(m,"value",d);a.type==="boolean"?(g=this._bindingsHelper.serializeBinding(m,"checked",d),o.setAttribute("type","checkbox")):a.role=="date"?(d.twoWay=u,g=this._bindingsHelper.serializeBinding(m,"value-as-number",d),o.setAttribute("type","date"),o.setAttribute("readonly","")):a.role=="datetime"&&(d.twoWay=u,g=this._bindingsHelper.serializeBinding(m,"value-as-number",d),o.setAttribute("type","datetime-local"),o.setAttribute("readonly","")),o.setAttribute(g[0],g[1])}o.setStyle("position","absolute"),o.setStyle("left",c.x+"px"),o.setStyle("top",c.y+"px"),t.instanceServiceContainer.undoService.execute(new Vt(t.rootDesignItem,t.rootDesignItem.childCount,o)),p.commit(),requestAnimationFrame(()=>t.instanceServiceContainer.selectionService.setSelectedElements([o]))}}dragOverOnProperty(t,s,e){return"copy"}dropOnProperty(t,s,e,i){if(s.type=="signal"){s.service.setValue(i,s,e.fullName);return}let n={signal:e.fullName,target:E.property};s.propertyType==ie.attribute&&(n.target=E.attribute),s.propertyType==ie.cssValue&&(n.target=E.css),n.signal=e.fullName,n.twoWay=s.propertyType==ie.property||s.propertyType==ie.propertyAndAttribute;let r=i[0].openGroup("drop binding");for(let a of i){let c=this._bindingsHelper.serializeBinding(a.element,s.name,n);a.setAttribute(c[0],c[1])}r.commit()}};import{BindingMode as fe,BindingTarget as Le,PropertiesHelper as Rt}from"@node-projects/web-component-designer";var De=class l{constructor(t){this._bindingsHelper=t}_bindingsHelper;static type="visualization-binding";getBindings(t){return Array.from(this._bindingsHelper.getBindings(t.element)).map(e=>({targetName:e[1].target===Le.css||e[1].target===Le.attribute?Rt.camelToDashCase(e[0]):e[0],target:e[1].target,mode:e[1].twoWay?fe.twoWay:fe.oneWay,invert:e[1].inverted,bindableObjectNames:e[1].signal.split(";"),expression:e[1].expression,expressionTwoWay:e[1].expressionTwoWay,converter:e[1].converter,type:l.type,service:this,changedEvents:e[1].events,historic:e[1].historic,writeBackSignal:e[1].writeBackSignal}))}setBinding(t,s){let e={signal:s.bindableObjectNames.join(";"),target:s.target};e.inverted=s.invert,e.twoWay=s.mode==fe.twoWay,e.expression=s.expression,e.expressionTwoWay=s.expressionTwoWay,e.historic=s.historic,e.type=s.type,typeof s.converters=="string"?e.converter=s.converters:Array.isArray(s.converters)&&s.converters.length>0?e.converter=Object.fromEntries(s.converters.map(r=>[r.key,r.value])):s.converters!=null&&(e.converter=s.converters),e.target=s.target,e.events=s.changedEvents;let i=this._bindingsHelper.serializeBinding(t.element,s.targetName,e),n=t.openGroup("edit_binding");return t.setAttribute(i[0],i[1]),n.commit(),!0}clearBinding(t,s,e){let i=this._bindingsHelper.getBindingAttributeName(t.element,s,e);return t.removeAttribute(i),!0}};var je=class{getRefactorings(t){let s=[];for(let e of t){let i=e.serviceContainer.bindingService.getBindings(e);if(i)for(let n of i)for(let r of n.bindableObjectNames){let a="signal",c="";if(r.includes(":")){let o=r.split(":")[0],p=r.substring(o.length+1);p.startsWith("?")&&(p=p.substring(1),c="?",a="property",p.startsWith("?")&&(p=p.substring(1),c="??")),s.push({service:this,name:p,itemType:a,designItem:e,type:"binding",sourceObject:n,display:n.target+"/"+n.targetName+" - "+o+":",shortName:o,prefix:c})}else r.startsWith("?")&&(r=r.substring(1),c="?",a="property",r.startsWith("?")&&(r=r.substring(1),c="??")),s.push({service:this,name:r,itemType:a,designItem:e,type:"binding",sourceObject:n,display:n.target+"/"+n.targetName,prefix:c})}}return s}refactor(t,s,e){let i=t.sourceObject;t.shortName?i.bindableObjectNames=i.bindableObjectNames.map(n=>n==t.shortName+":"+t.prefix+s?t.shortName+":"+t.prefix+e:n):i.bindableObjectNames=i.bindableObjectNames.map(n=>n==t.prefix+s?t.prefix+e:n),t.designItem.serviceContainer.bindingService.setBinding(t.designItem,i)}};var We=class{dragOverOnProperty(t,s,e){return"copy"}dropOnProperty(t,s,e,i){s.service.setValue(i,s,e.text)}};import{BindingTarget as x}from"@node-projects/web-component-designer";var Me=class{getRefactorings(t){let s=[];for(let e of t)for(let i of e.attributes())if(i[0][0]=="@"){let n=i[1];if(n[0]=="{"){let r=JSON.parse(n);if("commands"in r)for(let a of r.commands){for(let c in a){let o=a[c];if(o!=null&&typeof o=="object"){let p=o;if(p.source==="signal")s.push({name:p.name,itemType:"signal",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[signal]",refactor:h=>p.name=h});else if(p.source==="property")s.push({name:p.name,itemType:"property",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[property]",refactor:h=>p.name=h});else if(p.source==="complexString")for(let h of p.name.matchAll(/\{(.*?)\}/g)){let m=h[0],u=h[1];if(u[0]==="?"){let d="?";u=u.substring(1),u[0]==="?"&&(d="??",u=u.substring(1)),s.push({name:u,itemType:"property",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[complexString]->property",refactor:g=>p.name=p.name.replace(m,"{"+d+g+"}")})}else s.push({name:u,itemType:"signal",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[complexString]->signal",refactor:d=>p.name=p.name.replace(m,"{"+d+"}")})}}}switch(a.type){case"SetSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ToggleSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"IncrementSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"DecrementSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"SetBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ClearBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ToggleBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"OpenScreen":a.screen&&typeof a.screen=="string"&&s.push({name:a.screen,itemType:"screen",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.screen=c});break;case"OpenDialog":a.screen&&typeof a.screen=="string"&&s.push({name:a.screen,itemType:"screen",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.screen=c});break;case"CalculateSignalValue":a.targetSignal&&typeof a.targetSignal=="string"&&s.push({name:a.targetSignal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/targetSignal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.targetSignal=c});break;case"SubscribeSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"UnsubscribeSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ShowMessageBox":a.resultSignal&&typeof a.resultSignal=="string"&&s.push({name:a.resultSignal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/resultSignal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.resultSignal=c});break}}else"blocks"in r;if("parameters"in r)for(let a in r.parameters)typeof r.parameters[a]=="string"&&s.push({name:r.parameters[a],itemType:"parameter",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:i[0].substring(1)+"/parameters/"+a,refactor:c=>r.parameters[a]=c})}}return s}refactor(t,s,e){t.refactor(e);let i=JSON.stringify(t.sourceObject);t.designItem.setAttribute(t.targetName,i)}};import{BasePropertyEditor as At}from"@node-projects/web-component-designer";var Pe=class extends At{_ip;_container;constructor(t,s){super(t),this._container=document.createElement("div"),this._container.style.display="flex",this._ip=document.createElement("input"),this._ip.onchange=i=>this._valueChanged(this._ip.value),this._ip.onfocus=i=>{this._ip.selectionStart=0,this._ip.selectionEnd=this._ip.value?.length},this._container.appendChild(this._ip);let e=document.createElement("button");e.textContent="...",e.onclick=async()=>{let i=s.createBindableObjectBrowser();i.initialize(this.designItems[0].serviceContainer,this.designItems[0].instanceServiceContainer,"property"),i.title="select signal...";let n=new AbortController;i.objectDoubleclicked.on(()=>{n.abort(),this._ip.value=i.selectedObject.fullName,this._valueChanged(this._ip.value)}),await s.openConfirmation(i,{x:100,y:100,width:400,height:300,abortSignal:n.signal})&&(this._ip.value=i.selectedObject.fullName,this._valueChanged(this._ip.value))},this._container.appendChild(e),this.element=this._container}refreshValue(t,s){s==null?this._ip.value="":this._ip.value=s}};import{EventsService as zt}from"@node-projects/web-component-designer";var Fe=class l extends zt{static _cyclicEvent=[{name:`${se}:100`,propertyName:void 0,eventObjectName:"Event",description:"this event will retrigger itself every 100 ms"}];getPossibleEvents(t){let s=super.getPossibleEvents(t);return s.push(...l._cyclicEvent),s}getEvent(t,s){return s.includes(se)?l._cyclicEvent.find(i=>i.name==s)??{name:s,propertyName:"on"+s,eventObjectName:"Event"}:super.getEvent(t,s)}};export{ze as BindableObjectDragDropService,Q as BindingsEditor,z as BindingsEditorHistoric,Oe as BindingsHelper,A as BlocklyScriptEditor,ee as EventAssignment,M as ParameterEditor,We as PropertyGridDragDropService,Ve as Script,Me as ScriptRefactorService,Ae as ScriptSystem,Pe as SignalPropertyEditor,L as SimpleScriptCommandPicker,W as SimpleScriptEditor,je as VisualizationBindingsRefactorService,De as VisualizationBindingsService,Fe as VisualizationEventsService,q as VisualizationPropertyGrid,P as bindingPrefixAttribute,F as bindingPrefixClass,T as bindingPrefixContent,H as bindingPrefixCss,J as bindingPrefixCssVar,Et as bindingPrefixInsideCss,Nt as bindingPrefixInsideCssVarName,I as bindingPrefixProperty,he as bindingPrefixVisible,qs as bindingsInCssRegex,se as cyclicAttributeName,ve as generateEventCodeFromBlockly,te as getNestedProperty,X as isLit,ke as nativeScriptCommandDescriptions,ge as parseBindingString,Se as simpleScriptEditorHelpHtml};
1292
+ `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[J+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+n]:((e.inverted===null||e.inverted===!1)&&delete i.inverted,(e.expression===null||e.expression==="")&&delete i.expression,(e.expressionTwoWay===null||e.expressionTwoWay==="")&&delete i.expressionTwoWay,(e.twoWay===null||e.twoWay===!1)&&delete i.twoWay,delete i.target,e.historic||delete i.historic,e.target==y.content?[T+"html",JSON.stringify(i)]:e.target==y.attribute?[P+v.camelToDashCase(s),JSON.stringify(i)]:e.target==y.class?[F+l.camelToDotCase(s),JSON.stringify(i)]:e.target==y.css?[H+v.camelToDashCase(s),JSON.stringify(i)]:e.target==y.cssvar?[J+l.camelToDotCase(s.substring(2)),JSON.stringify(i)]:e.target==y.property&&s=="innerHTML"?[T+"html",JSON.stringify(i)]:e.target==y.property&&s=="textContent"?[T+"text",JSON.stringify(i)]:[I+v.camelToDashCase(s),JSON.stringify(i)])}getBindingAttributeName(t,s,e){return e==y.attribute?P+v.camelToDashCase(s):e==y.class?F+l.camelToDotCase(s):e==y.css?H+v.camelToDashCase(s):e==y.visible?he:e==y.cssvar?J+l.camelToDotCase(s):e==y.property&&s=="innerHTML"?T+"html":e==y.property&&s=="textContent"?T+"text":I+v.camelToDashCase(s)}*getBindings(t){if(t.attributes)for(let s of t.attributes)s.name.startsWith(I)?yield this.parseBinding(t,s.name,s.value,y.property,I):s.name.startsWith(T)?yield this.parseBinding(t,s.name==="bind-content:html"?"bind-prop:inner-h-t-m-l":"bind-prop:text-content",s.value,y.property,I):s.name.startsWith(P)?yield this.parseBinding(t,s.name,s.value,y.attribute,P):s.name.startsWith(F)?yield this.parseBinding(t,s.name,s.value,y.class,F):s.name.startsWith(H)?yield this.parseBinding(t,s.name,s.value,y.css,H):s.name.startsWith(J)?yield this.parseBinding(t,s.name,s.value,y.cssvar,J):s.name.startsWith(he)&&(yield this.parseBinding(t,s.name,s.value,y.visible,he))}applyAllBindings(t,s,e,i,n){let r=[],a=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),c=a.nextNode();for(;c;){let o=this.getBindings(c);for(let p of o)try{let h=this.applyBinding(c,p,s,e,i);if(r.push(h),p[1].maybeLitElement&&c.localName.includes("-")&&!customElements.get(c.localName)){let m=c,u=p;customElements.whenDefined(c.localName).then(()=>{X(m)&&(h(),u[1].events=u[1].litEventNames,r.push(this.applyBinding(m,u,s,e,i)))})}}catch(h){console.warn("error applying binding",c,p,h)}if(n&&n(c)){let p=a.nextSibling();for(;!p&&c;)c=a.parentNode(),p=a.nextSibling();c=p}else c=a.nextNode()}return r}static#e=0;async parseCssBindings(t,s,e,i){let n=await import("@node-projects/css-parser"),r=n.parse(t),a;for(let o of r.stylesheet.rules)if(o.type===n.CssTypes.rule){for(let p of o.declarations)if(p.type===n.CssTypes.declaration&&p.value.includes(Et)){let h=this.parseCssBinding(p.value,s,e,i);p.value=h[0],a?a.push(...h[1]):a=h[1]}}let c=n.stringify(r,{indent:"",compress:!0});return[Tt(c),a]}parseCssBinding(t,s,e,i,n){t=t.trim();let r="",a="",c=!1,o="",p=!1,h=null,m=[];for(let u=0;u<t.length;u++){let d=t[u];if(c)if(p)o+=d;else if(h&&d==="\\")p=!0;else if(d===h)h=null;else if(h===null&&d===")"){let g=l.#e++,f=Nt+g,b=[f,{signal:o,target:y.cssvar}];o.startsWith("{")&&(b=JSON.parse(o)),m.push(this.applyBinding(s,b,e,i,n)),r+="var("+f+")",c=!1,o=""}else o+=d;else d==="("?(a!=="bind"?(r+=a,r+=d):(c=!0,t[u+1]==="'"||t[u+1]==='"'?(u++,h=t[u]):h=null),a=""):d===" "||d===","||d==="("||d==="+"||d==="-"||d==="*"||d==="/"?(r+=a+d,a=""):a+=d}return[r+a,m]}applyBinding(t,s,e,i,n){let r=[],a,c=()=>{for(let m of r)this._visualizationHandler.unsubscribeState(m[0],m[1],m[2]);if(a)for(let m of a)m()},o=s[1].signal.split(";"),p=new Array(o.length);for(let m=0;m<o.length;m++){let u=o[m];if(p[m]="__"+m,u.includes(":")){let d=u.split(":");p[m]=d[0],u=d[1],o[m]=u}if(u[0]==="?"){if(i){let d=u.substring(1);if(d[0]=="?")o[m]=d;else{o[m]=i[d],d[0]==="$"&&(d=d.substring(1),o[m]="$"+i[d]);let g=()=>{c(),this.applyBinding(t,s,e,i,n)},f=this.getChangedEventName(i,d);i.addEventListener(f,g),a||(a=[]),a.push(()=>i.removeEventListener(f,g))}}}else if(u[0]==="#"){let d=u.substring(1);if(d[0]=="#")o[m]=d;else{o[m]=i[d],d[0]==="$"&&(d=d.substring(1),o[m]="$"+i[d]);let g=()=>{c(),this.applyBinding(t,s,e,i,n)},f=this.getChangedEventName(t,d);i.addEventListener(f,g),a||(a=[]),a.push(()=>i.removeEventListener(f,g))}}u[0]==="."&&(o[m]=this._visualizationHandler.getNormalizedSignalName(u,e,t))}let h=new Array(o.length);for(let m=0;m<o.length;m++){let u=o[m];if(u[0]==="?"){if(i){let d=u.substring(1),g=()=>{let f=!1;f||(f=!0,this.handleValueChanged(t,i,s,i[d],h,m,p,!1,e),f=!1)};i.addEventListener(v.camelToDashCase(d)+"-changed",g),a||(a=[]),a.push(()=>i.removeEventListener(v.camelToDashCase(d)+"-changed",g));try{this.handleValueChanged(t,i,s,i[d],h,m,p,!1,e)}catch(f){console.error(f)}s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,f=>i[d]=f)}}else if(u[0]==="#"){let d=u.substring(1),g=()=>{let f=!1;f||(f=!0,this.handleValueChanged(t,i,s,t[d],h,m,p,!1,e),f=!1)};t.addEventListener(v.camelToDashCase(d)+"-changed",g),a||(a=[]),a.push(()=>t.removeEventListener(v.camelToDashCase(d)+"-changed",g));try{this.handleValueChanged(t,i,s,t[d],h,m,p,!1,e)}catch(f){console.error(f)}s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,f=>t[d]=f)}else if(u[0]==="$"){let d=u.substring(1);d[0]==="."&&(d=this._visualizationHandler.getNormalizedSignalName(d,e,t)),this._visualizationHandler.getObject(d).then(g=>{this.handleValueChanged(t,i,s,g,h,m,p,!0,e)})}else if(u[0]==="\xA7"){let d=u.substring(1),g=n.valueProvider(d,{element:t,binding:s,relativeSignalPath:e,root:i});g instanceof Promise?g.then(b=>this.handleValueChanged(t,i,s,b,h,m,p,!0,e)):this.handleValueChanged(t,i,s,g,h,m,p,!0,e),n.valueChangedCallbacks||(n.valueChangedCallbacks=new Map);let f=n.valueChangedCallbacks.get(d);f==null&&(f=[],n.valueChangedCallbacks.set(d,f)),f.push(()=>{let b=n.valueProvider(d,{element:t,binding:s,relativeSignalPath:e,root:i});b instanceof Promise?b.then(_=>this.handleValueChanged(t,i,s,_,h,m,p,!0,e)):this.handleValueChanged(t,i,s,b,h,m,p,!0,e)})}else if(u.includes("{")){let d=new me(this,this._visualizationHandler,u,g=>this.handleValueChanged(t,i,s,g.val,h,m,p,!1,e),t,e,i,n);a||(a=[]),a.push(()=>d.dispose()),s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,g=>d.setState(g))}else if(s[1].historic)if(s[1].historic.reloadInterval){let d={timerId:-1},g=async()=>{let f=await this._visualizationHandler.getHistoricData(u,s[1].historic);this.handleValueChanged(t,i,s,f?.values,h,m,p,!0,e),d.timerId!==null&&(d.timerId=setTimeout(g,s[1].historic.reloadInterval))};g(),a||(a=[]),a.push(()=>{d.timerId>0&&clearTimeout(d.timerId),d.timerId=null})}else this._visualizationHandler.getHistoricData(u,s[1].historic).then(d=>this.handleValueChanged(t,i,s,d?.values,h,m,p,!0,e));else{let d=(g,f)=>this.handleValueChanged(t,i,s,f.val,h,m,p,!1,e);r.push([u,d,this._visualizationHandler.subscribeState(u,d)]),this._visualizationHandler.getState(u).then(g=>this.handleValueChanged(t,i,s,g?.val,h,m,p,!1,e)),s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,g=>this._visualizationHandler.setState(u,g))}}return c}addTwoWayBinding(t,s,e){t[1].expressionTwoWay&&(t[1].compiledExpressionTwoWay||(t[1].expressionTwoWay.includes("return ")?t[1].compiledExpressionTwoWay=new Function(["value"],t[1].expressionTwoWay):t[1].compiledExpressionTwoWay=new Function(["value"],"return "+t[1].expressionTwoWay)));for(let i of t[1].events){let n=s[i];n instanceof Ct?n.on(()=>{let r;t[1].target==y.attribute?r=s.getAttribute(t[0]):r=s[t[0]],r=l.parseValueWithType(r,t),t[1].compiledExpressionTwoWay&&(r=t[1].compiledExpressionTwoWay(r)),e(r)}):s.addEventListener(i,r=>{let a;t[1].target==y.attribute?a=s.getAttribute(t[0]):a=s[t[0]],a=l.parseValueWithType(a,t),t[1].compiledExpressionTwoWay&&(a=t[1].compiledExpressionTwoWay(a)),e(a)})}}static parseValueWithType(t,s){if(s[1].type)switch(s[1].type){case"number":return parseFloat(t);case"boolean":return t===!0||t==="true"||!!parseInt(t);case"string":return t?.toString();case"integer":return parseInt(t)}return t}handleValueChanged(t,s,e,i,n,r,a,c,o){let p=i;if(!c&&r==0&&(p=l.parseValueWithType(p,e)),n[r]=p,e[1].expression&&(e[1].compiledExpression||(a.push("__res"),a.push("__ctx"),e[1].expression.includes("return ")?e[1].compiledExpression=new Function(a,e[1].expression):e[1].compiledExpression=new Function(a,"return "+e[1].expression)),n[a.length-1]={element:t,root:s,boundNames:e[1].signal,boundTargetName:e[0],boundTargetType:e[1].target},p=e[1].compiledExpression(...n),n[a.length-1]=p),e[1].converter)if(typeof e[1].converter=="string")p=this.namedConverterCallback(e[1].converter,p,t,e);else{let h=p!=null?p.toString():p;if(h in e[1].converter){let m=e[1].converter[h];typeof m=="string"?p=new Function(a,"return `"+e[1].converter[h]+"`")(...n):p=m}else{let m=!1,u=parseFloat(p);for(let d in e[1].converter)if(d.length>2&&d[0]===">"&&d[1]==="="){let g=parseFloat(d.substring(2));if(u>=g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else if(d.length>2&&d[0]==="<"&&d[1]==="="){let g=parseFloat(d.substring(2));if(u<=g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else if(d.length>1&&d[0]===">"){let g=parseFloat(d.substring(1));if(u>g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else if(d.length>1&&d[0]==="<"){let g=parseFloat(d.substring(1));if(u<g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else{let g=d.split("-");if(g.length>1&&(g[0]===""||u>=parseFloat(g[0]))&&(g[1]===""||parseFloat(g[1])>=u)){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}!m&&e[1].converterDefault!==void 0&&(p=e[1].converterDefault)}}if(e[1].inverted&&(p=!p),e[1].writeBackSignal){let h=e[1].writeBackSignal;h[0]==="."&&(h=o+h),this._visualizationHandler.setState(h,p,!0)}e[1].target==y.property?t[e[0]]=p:e[1].target==y.attribute?typeof p=="boolean"?p?t.setAttribute(e[0],""):t.removeAttribute(e[0]):t.setAttribute(e[0],p):e[1].target==y.css?t.style[e[0]]=p:e[1].target==y.cssvar?t.style.setProperty(e[0],p):e[1].target==y.class?p?t.classList.add(e[0]):t.classList.remove(e[0]):e[1].target==y.visible&&(t.style.visibility=p?"":"collapse")}static camelToDotCase(t){return t.replace(/([A-Z])/g,s=>`.${s[0].toLowerCase()}`)}static dotToCamelCase(t){return t.replace(/\.([a-z])/g,s=>s[1].toUpperCase())}};var Ve=class{name;relativeSignalsPath;commands;parameters};import{deepValue as O,setDeepValue as Re,sleep as Bt}from"@node-projects/web-component-designer/dist/elements/helper/Helper.js";import U from"long";var se="cyclic",It={pointerdown:"pointerup",pointerenter:"pointerleave",mouseenter:"mouseleave",mouseover:"mouseout",focus:"blur",focusin:"focusout",keydown:"keyup"},Ae=class{_visualizationHandler;_subscriptionCallback=()=>{};constructor(l){this._visualizationHandler=l}async execute(l,t){let s=-1,e=!1,i=!1,n=t.event?.type,r=n?It[n]:null;if(r){let a=t.element;n=="pointerdown"&&(a=window),a.addEventListener(r,()=>{e=!0},{once:!0})}for(let a=0;a<l.length;a++){let c=l[a];if(c.type=="Exit"){i=!0;break}else if(c.type=="If"){let p=(await this.evaluateIfFormula(c,t)?c.trueCommands:c.elseCommands)??[];if(!await this.execute(p,t)){i=!0;break}}else if(c.type=="Goto"){let o=await this.getValue(c.label,t);if(a=l.findIndex(p=>p.type=="Label"&&p.label==o),a<0)break}else if(c.type=="Condition"){let o=await this.getValue(c.value1,t),p=await this.getValue(c.value2,t),h=await this.getValue(c.comparisonType,t),m=!1;switch(h){case"==null":m=o==null;break;case"!=null":m=o!=null;break;case"==true":m=o==!0;break;case"==false":m=o==!1;break;case"==":m=o==p;break;case"!=":m=o!=p;break;case">":m=o>p;break;case"<":m=o<p;break;case">=":m=o>=p;break;case"<=":m=o<=p;break;case"&&":m=o&&p;break;case"||":m=o||p;break}if(m){await this.runExternalScript(await this.getValue(c.trueScriptName,t),await this.getValue(c.trueScriptType,t));let u=await this.getValue(c.trueGotoLabel,t);if(u&&(a=l.findIndex(d=>d.type=="Label"&&d.label==u),a<0))break}else{await this.runExternalScript(await this.getValue(c.falseScriptName,t),await this.getValue(c.falseScriptType,t));let u=await this.getValue(c.falseGotoLabel,t);if(u&&(a=l.findIndex(d=>d.type=="Label"&&d.label==u),a<0))break}}else if(c.type=="Repeat"){let o=await this.getValue(c.label,t),p=await this.getValue(c.count,t);if(await this.getValue(c.mode,t)=="eventValid"&&e){e=!1;continue}if(p!=0&&s==-1&&(s=p-1),s==0||(s>0&&s--,a=-1,o&&(a=l.findIndex(m=>m.type=="Label"&&m.label==o),a<0)))continue}else if(!await this.runScriptCommand(c,t)){i=!0;break}}return!i}async getValueFromTarget(l,t,s){return l==="property"?O(s.root,t):l==="elementProperty"?O(s.element,t):(await this._visualizationHandler.getState(this.getSignalName(t,s)))?.val}async setValueOnTarget(l,t,s,e){l==="property"?Re(s.root,t,e):l==="elementProperty"?Re(s.element,t,e):await this._visualizationHandler.setState(this.getSignalName(t,s),e)}async runExternalScript(l,t){}async runScriptCommand(command,context){switch(command.type){case"Comment":case"Label":case"Condition":case"If":case"Goto":case"Exit":case"Repeat":break;case"OpenUrl":{window.open(await this.getValue(command.url,context),command.target);break}case"Delay":{let l=await this.getValue(command.value??500,context);await Bt(l);break}case"Console":{let l=await this.getValue(command.target??"log",context),t=await this.getValue(command.message,context);console[l](t);break}case"ToggleSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),s=await this.getValueFromTarget(t,l,context);await this._visualizationHandler.setState(this.getSignalName(l,context),!s);break}case"ToggleSignalValueThroughList":{let l=await this.getValue(command.valueList,context),t=await this.getValue(command.signal,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,t,context),i=l.indexOf(e)+1;i>=l.length&&(i=0);let n=l[i];await this._visualizationHandler.setState(this.getSignalName(t,context),n);break}case"SetSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context);await this.setValueOnTarget(t,l,context,await this.getValue(command.value,context));break}case"IncrementSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,l,context)+await this.getValue(command.value,context);await this.setValueOnTarget(t,l,context,e);break}case"DecrementSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,l,context)-await this.getValue(command.value,context);await this.setValueOnTarget(t,l,context,e);break}case"CalculateSignalValue":{let formula=await this.getValue(command.formula,context),target=await this.getValue(command.target,context),targetSignal=await this.getValue(command.targetSignal,context),nm=await this.parseStringWithValues(formula,context),result=eval(nm);await this.setValueOnTarget(target,targetSignal,context,result);break}case"SetBitInSignal":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,l,context),i=U.fromNumber(1).shiftLeft(t),n=U.fromNumber(e).or(i).toNumber();await this.setValueOnTarget(s,l,context,n);break}case"ClearBitInSignal":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,l,context),i=U.fromNumber(1).shiftLeft(t);i.negate();let n=U.fromNumber(e).and(i).toNumber();await this.setValueOnTarget(s,l,context,n);break}case"ToggleBitInSignal":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,l,context),i=U.fromNumber(1).shiftLeft(t),n=U.fromNumber(e).xor(i).toNumber();await this.setValueOnTarget(s,l,context,n);break}case"Javascript":{let l=await this.getValue(command.script,context),t=context;t.shadowRoot=context.element.getRootNode(),t.instance=context.shadowRoot.host,command.compiledScript||(command.compiledScript=new Function("context",l)),command.compiledScript(t);break}case"SetElementProperty":{command=D.upgradeSetElementProperty(command);let l=await this.getValue(command.name,context);l===""&&(l=null);let t=await this.getValue(command.value,context),s=await this.getValue(command.parentIndex??0,context),e=await this.getValue(command.target??"property",context),i=await this.getValue(command.targetSelectorTarget??"container",context),n=await this.getValue(command.targetSelector,context),r=await this.getValue(command.mode??"toggle",context),a=this.getTargetFromTargetSelector(context,i,s,n);for(let c of a)e=="attribute"?c.setAttribute(l,t):e=="property"?c[l]=t:e=="css"?c.style[l]=t:e=="class"&&(r==="toggle"?c.classList.toggle(l??t):r==="remove"?c.classList.remove(l??t):c.classList.add(l??t));break}case"SubscribeSignal":{let l=await this.getValue(command.signal,context);if(await this.getValue(command.oneTime,context)){let s=()=>{this._visualizationHandler.unsubscribeState(l,s,null)};this._visualizationHandler.subscribeState(l,s)}else this._visualizationHandler.subscribeState(l,this._subscriptionCallback);break}case"UnsubscribeSignal":{let l=await this.getValue(command.signal,context);this._visualizationHandler.unsubscribeState(l,this._subscriptionCallback,null);break}case"WriteSignalsInGroup":{let l=await this.getValue(command.group,context);this._visualizationHandler.writeSignalsInGroup(l);break}case"ClearSignalsInGroup":{let l=await this.getValue(command.group,context);this._visualizationHandler.clearSignalsInGroup(l);break}case"RunScript":{let l=await this.getValue(command.name,context),t=await this.getValue(command.scriptType,context);this.runExternalScript(l,t);break}case"ShowMessageBox":{let l=null,t=await this.getValue(command.exitScriptOnCancel,context);if(await this.getValue(command.buttons,context)=="yesNo"){let i=await this.getValue(command.message,context);confirm(i)?l=1:l=2}else{let i=await this.getValue(command.message,context);alert(i),l=1}let e=await this.getValue(command.resultSignal,context);if(e&&this._visualizationHandler.setState(e,l),t&&l!=1)return!1;break}case"ShowPrompt":{let l=await this.getValue(command.message,context),t=await this.getValue(command.default,context),s=prompt(l,t),e=await this.getValue(command.resultSignal,context);e&&s&&this._visualizationHandler.setState(e,s);break}case"Login":case"Logout":case"CloseDialog":case"OpenDialog":case"OpenScreen":case"SwitchLanguage":case"CopySignalValuesFromFolder":case"ExportSignalValuesAsJson":case"ImportSignalValuesFromJson":{alert('command: "'+command.type+'" is not yet implemented');break}}return!0}getTarget(l,t,s){if(t==="container"){let e=l.element.getRootNode().host;for(let i=0;i<(s??0);i++)e=e.getRootNode().host;return e}else if(t==="element"){let e=l.element;for(let i=0;i<(s??0);i++)e=e.parentElement;return e}return null}getTargetFromTargetSelector(l,t,s,e){let i=this.getTarget(l,t,s),n=[i];return e&&(t==="container"?n=i.shadowRoot.querySelectorAll(e):n=i.querySelectorAll(e)),n}async getValue(value,outerContext){if(value==null)return null;if(typeof value=="object")switch(value.source){case"property":return O(outerContext.root,value.name);case"elementProperty":return O(outerContext.element,value.name);case"signal":return(await this._visualizationHandler.getState(this.getSignalName(value.name,outerContext)))?.val;case"signalInProperty":{let l=O(outerContext.root,value.name);return(await this._visualizationHandler.getState(this.getSignalName(l,outerContext)))?.val}case"event":{let l=outerContext.event;return value.name&&(l=O(l,value.name)),l}case"parameter":return outerContext.parameters[value.name];case"context":return O(outerContext,value.name);case"complexString":{let l=value.name;return l!=null?await this.parseStringWithValues(l,outerContext):null}case"complexSignal":{let l=value.name;if(l!=null){let t=await this.parseStringWithValues(l,outerContext);return(await this._visualizationHandler.getState(this.getSignalName(t,outerContext)))?.val}return null}case"expression":{var ctx=outerContext;return eval(value.name)}}return value}async getStateOrFieldOrParameter(name,context){if(name[0]==="\xA7"){var ctx=context;return eval("ctx."+name.substring(1))}else{if(name[0]==="?"&&name[1]==="?")return context.root[name.substring(2)];if(name[0]==="?")return await this._visualizationHandler.getState(this.getSignalName(context.root[name.substring(1)],context))}return await this._visualizationHandler.getState(this.getSignalName(name,context))}async parseStringWithValues(l,t){let s=ge(l),e=await Promise.all(s.signals.map(n=>this.getStateOrFieldOrParameter(this.getSignalName(n,t),t))),i=s.parts[0];for(let n=0;n<s.parts.length-1;n++){let r=e[n];typeof r=="object"&&(r=r.val),r==null&&(r=""),i+=r+s.parts[n+1]}return i}async evaluateIfFormula(l,t){let s=l.signals??[],e=s.map((r,a)=>r.varName?.trim()||"__"+a),i=await Promise.all(s.map(r=>this.getValue(r,t))),n=await this.getValue(l.formula,t);return(!l.compiledFormula||l._compiledFormulaSrc!==n)&&(l.compiledFormula=new Function(...e,"return ("+n+");"),l._compiledFormulaSrc=n),!!l.compiledFormula(...i)}getSignalName(l,t){return l[0]==="."?t.relativeSignalsPath+l:l}createScriptContext(l,t,s,e,i){return{root:l,event:t,element:s,parameters:e,relativeSignalsPath:i}}async assignAllScripts(l,t,s,e,i,n,r,a){n??=this.createScriptContext;let c=await this.loadAndInitJsObject(l,t,s,e,a);for(let o of s.querySelectorAll("*"))for(let p of o.attributes)if(p.name[0]==="@")try{let h=p.name.substring(1),m=p.value.trim(),u=h.startsWith(se),d=u?parseInt(h.substring(h.indexOf(":")+1)):null,g=await this.resolveHandler(m,c,o,s,e,i,n,r,h);g&&this.bindHandler(o,h,u,d,g)}catch{console.warn("error assigning script",o,p)}return c}async loadAndInitJsObject(l,t,s,e,i){if(!t)return null;try{let r=await import(URL.createObjectURL(new Blob([t],{type:"application/javascript"})));return i?i(r):r.init?.(e,s),r}catch(n){return console.error("error parsing javascript - "+l,n),null}}async resolveHandler(l,t,s,e,i,n,r,a,c){if(l[0]!=="{")return p=>{t?.[l]?t[l](p,s,e,i):console.warn(`javascript function named: "${l}" not found, maybe missing a "export" ?`)};let o=JSON.parse(l);if("commands"in o)return p=>this.execute(o.commands,r(i,p,s,o.parameters,o.relativeSignalsPath));if("blocks"in o){let p=null;return async h=>{p??=await ve(o),p(h,e,o.parameters,o.relativeSignalsPath??"",n,r(i,h,s,o.parameters,o.relativeSignalsPath))}}if("name"in o){if(a)return a(s,c,o),null;let p=o.name;return h=>{t?.[p]?t[p](h,s,e,i,o.parameters):console.warn(`javascript function named: "${p}" not found, maybe missing a "export" ?`)}}return null}bindHandler(l,t,s,e,i){if(!s){l.addEventListener(t,i);return}let n=setInterval(()=>{l.isConnected?i(null):clearInterval(n)},e)}};import{OverlayLayer as Ot,DesignItem as V,InsertAction as Vt,BindingTarget as E,PropertyType as ie}from"@node-projects/web-component-designer";var ze=class{constructor(t,s){this._bindingsHelper=t,this._visualizationHandler=s}_bindingsHelper;_visualizationHandler;rectMap=new Map;rect;dragEnter(t,s,e){let i=V.GetDesignItem(e);if(i&&!i.isRootItem){let n=t.getNormalizedElementCoordinates(e);this.rect=t.overlayLayer.drawRect("IobrokerWebuiBindableObjectDragDropService",n.x,n.y,n.width,n.height,"",null,Ot.Background),this.rect.style.fill="#ff0000",this.rect.style.opacity="0.3",this.rectMap.set(e,this.rect)}}dragLeave(t,s,e){let i=V.GetDesignItem(e);if(i&&!i.isRootItem){let n=this.rectMap.get(e);t.overlayLayer.removeOverlay(n),this.rectMap.delete(e)}}dragOver(t,s,e){return"copy"}async drop(t,s,e,i){for(let c of this.rectMap.values())t.overlayLayer.removeOverlay(c);this.rectMap.clear();let n=V.GetDesignItem(i),r=await this._visualizationHandler.getObject(e.fullName),a=this._visualizationHandler.getSignalInformation(r);if(n&&!n.isRootItem)if(i instanceof HTMLInputElement){let c={signal:e.fullName,target:E.property},o=this._bindingsHelper.serializeBinding(i,i.type=="checkbox"?"checked":"value",c);n.setAttribute(o[0],o[1])}else{let c={signal:e.fullName,target:E.content},o=this._bindingsHelper.serializeBinding(i,null,c);n.setAttribute(o[0],o[1])}else{let c=t.getNormalizedEventCoordinates(s),o,p,h=await this._visualizationHandler.getState(e.fullName);if(a.role==="url"&&typeof h?.val=="string")if(h.val.endsWith("jpg")||h.val.endsWith("jpeg")||h.val.endsWith("png")||h.val.endsWith("gif")||h.val.endsWith("svg")){let m=document.createElement("img");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u={signal:e.fullName,target:E.property},d=this._bindingsHelper.serializeBinding(m,"src",u);o.setAttribute(d[0],d[1]),o.element.src=h.val}else if(h.val.endsWith("mp4")){let m=document.createElement("video");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u={signal:e.fullName,target:E.property},d=this._bindingsHelper.serializeBinding(m,"src",u);o.setAttribute(d[0],d[1]),o.element.src=h.val}else{let m=document.createElement("iframe");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u={signal:e.fullName,target:E.property},d=this._bindingsHelper.serializeBinding(m,"src",u);o.setAttribute(d[0],d[1]),o.element.src=h.val}if(!o){let m=document.createElement("input");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u=a.writeable!==!1,d={signal:e.fullName,target:E.property,twoWay:u},g=this._bindingsHelper.serializeBinding(m,"value",d);a.type==="boolean"?(g=this._bindingsHelper.serializeBinding(m,"checked",d),o.setAttribute("type","checkbox")):a.role=="date"?(d.twoWay=u,g=this._bindingsHelper.serializeBinding(m,"value-as-number",d),o.setAttribute("type","date"),o.setAttribute("readonly","")):a.role=="datetime"&&(d.twoWay=u,g=this._bindingsHelper.serializeBinding(m,"value-as-number",d),o.setAttribute("type","datetime-local"),o.setAttribute("readonly","")),o.setAttribute(g[0],g[1])}o.setStyle("position","absolute"),o.setStyle("left",c.x+"px"),o.setStyle("top",c.y+"px"),t.instanceServiceContainer.undoService.execute(new Vt(t.rootDesignItem,t.rootDesignItem.childCount,o)),p.commit(),requestAnimationFrame(()=>t.instanceServiceContainer.selectionService.setSelectedElements([o]))}}dragOverOnProperty(t,s,e){return"copy"}dropOnProperty(t,s,e,i){if(s.type=="signal"){s.service.setValue(i,s,e.fullName);return}let n={signal:e.fullName,target:E.property};s.propertyType==ie.attribute&&(n.target=E.attribute),s.propertyType==ie.cssValue&&(n.target=E.css),n.signal=e.fullName,n.twoWay=s.propertyType==ie.property||s.propertyType==ie.propertyAndAttribute;let r=i[0].openGroup("drop binding");for(let a of i){let c=this._bindingsHelper.serializeBinding(a.element,s.name,n);a.setAttribute(c[0],c[1])}r.commit()}};import{BindingMode as fe,BindingTarget as Le,PropertiesHelper as Rt}from"@node-projects/web-component-designer";var De=class l{constructor(t){this._bindingsHelper=t}_bindingsHelper;static type="visualization-binding";getBindings(t){return Array.from(this._bindingsHelper.getBindings(t.element)).map(e=>({targetName:e[1].target===Le.css||e[1].target===Le.attribute?Rt.camelToDashCase(e[0]):e[0],target:e[1].target,mode:e[1].twoWay?fe.twoWay:fe.oneWay,invert:e[1].inverted,bindableObjectNames:e[1].signal.split(";"),expression:e[1].expression,expressionTwoWay:e[1].expressionTwoWay,converter:e[1].converter,type:l.type,service:this,changedEvents:e[1].events,historic:e[1].historic,writeBackSignal:e[1].writeBackSignal}))}setBinding(t,s){let e={signal:s.bindableObjectNames.join(";"),target:s.target};e.inverted=s.invert,e.twoWay=s.mode==fe.twoWay,e.expression=s.expression,e.expressionTwoWay=s.expressionTwoWay,e.historic=s.historic,e.type=s.type,typeof s.converters=="string"?e.converter=s.converters:Array.isArray(s.converters)&&s.converters.length>0?e.converter=Object.fromEntries(s.converters.map(r=>[r.key,r.value])):s.converters!=null&&(e.converter=s.converters),e.target=s.target,e.events=s.changedEvents;let i=this._bindingsHelper.serializeBinding(t.element,s.targetName,e),n=t.openGroup("edit_binding");return t.setAttribute(i[0],i[1]),n.commit(),!0}clearBinding(t,s,e){let i=this._bindingsHelper.getBindingAttributeName(t.element,s,e);return t.removeAttribute(i),!0}};var je=class{getRefactorings(t){let s=[];for(let e of t){let i=e.serviceContainer.bindingService.getBindings(e);if(i)for(let n of i)for(let r of n.bindableObjectNames){let a="signal",c="";if(r.includes(":")){let o=r.split(":")[0],p=r.substring(o.length+1);p.startsWith("?")&&(p=p.substring(1),c="?",a="property",p.startsWith("?")&&(p=p.substring(1),c="??")),s.push({service:this,name:p,itemType:a,designItem:e,type:"binding",sourceObject:n,display:n.target+"/"+n.targetName+" - "+o+":",shortName:o,prefix:c})}else r.startsWith("?")&&(r=r.substring(1),c="?",a="property",r.startsWith("?")&&(r=r.substring(1),c="??")),s.push({service:this,name:r,itemType:a,designItem:e,type:"binding",sourceObject:n,display:n.target+"/"+n.targetName,prefix:c})}}return s}refactor(t,s,e){let i=t.sourceObject;t.shortName?i.bindableObjectNames=i.bindableObjectNames.map(n=>n==t.shortName+":"+t.prefix+s?t.shortName+":"+t.prefix+e:n):i.bindableObjectNames=i.bindableObjectNames.map(n=>n==t.prefix+s?t.prefix+e:n),t.designItem.serviceContainer.bindingService.setBinding(t.designItem,i)}};var We=class{dragOverOnProperty(t,s,e){return"copy"}dropOnProperty(t,s,e,i){s.service.setValue(i,s,e.text)}};import{BindingTarget as x}from"@node-projects/web-component-designer";var Me=class{getRefactorings(t){let s=[];for(let e of t)for(let i of e.attributes())if(i[0][0]=="@"){let n=i[1];if(n[0]=="{"){let r=JSON.parse(n);if("commands"in r)for(let a of r.commands){for(let c in a){let o=a[c];if(o!=null&&typeof o=="object"){let p=o;if(p.source==="signal")s.push({name:p.name,itemType:"signal",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[signal]",refactor:h=>p.name=h});else if(p.source==="property")s.push({name:p.name,itemType:"property",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[property]",refactor:h=>p.name=h});else if(p.source==="complexString")for(let h of p.name.matchAll(/\{(.*?)\}/g)){let m=h[0],u=h[1];if(u[0]==="?"){let d="?";u=u.substring(1),u[0]==="?"&&(d="??",u=u.substring(1)),s.push({name:u,itemType:"property",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[complexString]->property",refactor:g=>p.name=p.name.replace(m,"{"+d+g+"}")})}else s.push({name:u,itemType:"signal",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[complexString]->signal",refactor:d=>p.name=p.name.replace(m,"{"+d+"}")})}}}switch(a.type){case"SetSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ToggleSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"IncrementSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"DecrementSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"SetBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ClearBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ToggleBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"OpenScreen":a.screen&&typeof a.screen=="string"&&s.push({name:a.screen,itemType:"screen",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.screen=c});break;case"OpenDialog":a.screen&&typeof a.screen=="string"&&s.push({name:a.screen,itemType:"screen",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.screen=c});break;case"CalculateSignalValue":a.targetSignal&&typeof a.targetSignal=="string"&&s.push({name:a.targetSignal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/targetSignal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.targetSignal=c});break;case"SubscribeSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"UnsubscribeSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ShowMessageBox":a.resultSignal&&typeof a.resultSignal=="string"&&s.push({name:a.resultSignal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/resultSignal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.resultSignal=c});break}}else"blocks"in r;if("parameters"in r)for(let a in r.parameters)typeof r.parameters[a]=="string"&&s.push({name:r.parameters[a],itemType:"parameter",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:i[0].substring(1)+"/parameters/"+a,refactor:c=>r.parameters[a]=c})}}return s}refactor(t,s,e){t.refactor(e);let i=JSON.stringify(t.sourceObject);t.designItem.setAttribute(t.targetName,i)}};import{BasePropertyEditor as At}from"@node-projects/web-component-designer";var Pe=class extends At{_ip;_container;constructor(t,s){super(t),this._container=document.createElement("div"),this._container.style.display="flex",this._ip=document.createElement("input"),this._ip.onchange=i=>this._valueChanged(this._ip.value),this._ip.onfocus=i=>{this._ip.selectionStart=0,this._ip.selectionEnd=this._ip.value?.length},this._container.appendChild(this._ip);let e=document.createElement("button");e.textContent="...",e.onclick=async()=>{let i=s.createBindableObjectBrowser();i.initialize(this.designItems[0].serviceContainer,this.designItems[0].instanceServiceContainer,"property"),i.title="select signal...";let n=new AbortController;i.objectDoubleclicked.on(()=>{n.abort(),this._ip.value=i.selectedObject.fullName,this._valueChanged(this._ip.value)}),await s.openConfirmation(i,{x:100,y:100,width:400,height:300,abortSignal:n.signal})&&(this._ip.value=i.selectedObject.fullName,this._valueChanged(this._ip.value))},this._container.appendChild(e),this.element=this._container}refreshValue(t,s){s==null?this._ip.value="":this._ip.value=s}};import{EventsService as zt}from"@node-projects/web-component-designer";var Fe=class l extends zt{static _cyclicEvent=[{name:`${se}:100`,propertyName:void 0,eventObjectName:"Event",description:"this event will retrigger itself every 100 ms"}];getPossibleEvents(t){let s=super.getPossibleEvents(t);return s.push(...l._cyclicEvent),s}getEvent(t,s){return s.includes(se)?l._cyclicEvent.find(i=>i.name==s)??{name:s,propertyName:"on"+s,eventObjectName:"Event"}:super.getEvent(t,s)}};export{ze as BindableObjectDragDropService,Q as BindingsEditor,z as BindingsEditorHistoric,Oe as BindingsHelper,A as BlocklyScriptEditor,ee as EventAssignment,M as ParameterEditor,We as PropertyGridDragDropService,Ve as Script,Me as ScriptRefactorService,Ae as ScriptSystem,Pe as SignalPropertyEditor,L as SimpleScriptCommandPicker,W as SimpleScriptEditor,je as VisualizationBindingsRefactorService,De as VisualizationBindingsService,Fe as VisualizationEventsService,q as VisualizationPropertyGrid,P as bindingPrefixAttribute,F as bindingPrefixClass,T as bindingPrefixContent,H as bindingPrefixCss,J as bindingPrefixCssVar,Et as bindingPrefixInsideCss,Nt as bindingPrefixInsideCssVarName,I as bindingPrefixProperty,he as bindingPrefixVisible,qs as bindingsInCssRegex,se as cyclicAttributeName,ve as generateEventCodeFromBlockly,te as getNestedProperty,X as isLit,ke as nativeScriptCommandDescriptions,ge as parseBindingString,Se as simpleScriptEditorHelpHtml};
1293
1293
  //!varname => inverted
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "description": "web-component-designer addon for visualizations",
3
3
  "name": "@node-projects/web-component-designer-visualization-addons",
4
- "version": "0.1.150",
4
+ "version": "0.1.152",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "author": "jochen.kuehner@gmx.de",