@node-projects/web-component-designer-visualization-addons 0.1.132 → 0.1.134

package/dist/components/BindingsEditor.js

@@ -194,6 +194,9 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     constructor(property, binding, bindingTarget, serviceContainer, instanceServiceContainer, shell, config = { namedConverters: true }) {
         super();
         super._restoreCachedInititalValues();
+        //TODOS:
+        //typed values for converters
+        //default value for converter
         this._objNmInput = this._getDomElement('objectName');
         this._property = property;
         this._binding = binding;

package/dist/components/SimpleScriptEditor.js

@@ -123,7 +123,10 @@ export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend
             if (!property.specialAllreadyAdded) {
                 //@ts-ignore
                 property.specialAllreadyAdded = true;
-                if ((typeof currentValue === 'object' && currentValue !== null) || property.format === 'complex') {
+                if (property.format === 'collection') {
+                    //TODO: create a collection edt. in property grid control used
+                }
+                else if ((typeof currentValue === 'object' && currentValue !== null) || property.format === 'complex') {
                     let rB = document.createElement('button');
                     rB.style.height = 'calc(100% - 6px)';
                     rB.style.position = 'relative';

package/dist/helpers/BindingsHelper.js

@@ -897,37 +897,62 @@ export class BindingsHelper {
             else {
                 const stringValue = (v != null ? v.toString() : v);
                 if (stringValue in binding[1].converter) {
-                    v = new Function(signalVarNames, 'return `' + binding[1].converter[stringValue] + '`')(...valuesObject);
+                    const cvVal = binding[1].converter[stringValue];
+                    if (typeof cvVal === 'string')
+                        v = new Function(signalVarNames, 'return `' + binding[1].converter[stringValue] + '`')(...valuesObject);
+                    else
+                        v = cvVal;
                 }
                 else {
+                    let endedWithBreak = false;
                     //@ts-ignore
                     const nr = parseFloat(v);
                     for (let c in binding[1].converter) {
                         if (c.length > 2 && c[0] === '>' && c[1] === '=') {
                             const wr = parseFloat(c.substring(2));
                             if (nr >= wr) {
-                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                const cvVal = binding[1].converter[c];
+                                if (typeof cvVal === 'string')
+                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                else
+                                    v = cvVal;
+                                endedWithBreak = true;
                                 break;
                             }
                         }
                         else if (c.length > 2 && c[0] === '<' && c[1] === '=') {
                             const wr = parseFloat(c.substring(2));
                             if (nr <= wr) {
-                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                const cvVal = binding[1].converter[c];
+                                if (typeof cvVal === 'string')
+                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                else
+                                    v = cvVal;
+                                endedWithBreak = true;
                                 break;
                             }
                         }
                         else if (c.length > 1 && c[0] === '>') {
                             const wr = parseFloat(c.substring(1));
                             if (nr > wr) {
-                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                const cvVal = binding[1].converter[c];
+                                if (typeof cvVal === 'string')
+                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                else
+                                    v = cvVal;
+                                endedWithBreak = true;
                                 break;
                             }
                         }
                         else if (c.length > 1 && c[0] === '<') {
                             const wr = parseFloat(c.substring(1));
                             if (nr < wr) {
-                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                const cvVal = binding[1].converter[c];
+                                if (typeof cvVal === 'string')
+                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                else
+                                    v = cvVal;
+                                endedWithBreak = true;
                                 break;
                             }
                         }
@@ -935,12 +960,19 @@ export class BindingsHelper {
                             const sp = c.split('-');
                             if (sp.length > 1) {
                                 if ((sp[0] === '' || nr >= parseFloat(sp[0])) && (sp[1] === '' || parseFloat(sp[1]) >= nr)) {
-                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                    const cvVal = binding[1].converter[c];
+                                    if (typeof cvVal === 'string')
+                                        v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                    else
+                                        v = cvVal;
+                                    endedWithBreak = true;
                                     break;
                                 }
                             }
                         }
                     }
+                    if (!endedWithBreak && binding[1].converterDefault !== undefined)
+                        v = binding[1].converterDefault;
                 }
             }
         }

package/dist/index-min.js

@@ -0,0 +1,390 @@
+Blockly.Blocks.console={init:function(){this.appendDummyInput().appendField("console").appendField(new Blockly.FieldDropdown([["debug","DEBUG"],["error","ERROR"],["info","INFO"],["log","LOG"],["warn","WARN"]]),"LEVEL"),this.appendValueInput("VALUE").setCheck(null).appendField("value"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.console=function(l,s){var t=l.getFieldValue("LEVEL");let e=Blockly.JavaScript.valueToCode(l,"VALUE",Blockly.JavaScript.ORDER_ATOMIC);return`console['${t.toLowerCase()}'](${e});
+`};Blockly.Blocks.debugger={init:function(){this.appendDummyInput().appendField("debugger"),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.debugger=function(l){return`debugger;
+`};Blockly.Blocks.delay={init:function(){this.appendValueInput("DELAY").setCheck("Number").appendField("delay"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.delay=function(l){return"await delay("+Blockly.JavaScript.valueToCode(l,"DELAY",Blockly.JavaScript.ORDER_ATOMIC)+`);
+`};Blockly.Blocks.get_parameter={init:function(){this.appendValueInput("NAME").setCheck("String").appendField("get_parameter"),this.setInputsInline(!0),this.setOutput(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.get_parameter=function(l,s){return[`context.parameters[${Blockly.JavaScript.valueToCode(l,"NAME",Blockly.JavaScript.ORDER_ATOMIC)}]`,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.get_state={init:function(){this.appendValueInput("OID").setCheck("String").appendField("get_state"),this.setInputsInline(!0),this.setOutput(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.get_state=function(l,s){let t=Blockly.JavaScript.valueToCode(l,"OID",Blockly.JavaScript.ORDER_ATOMIC);return[`(await visualizationHandler.getState((${t}[0] === '.' ? relativeSignalsPath : '') + ${t})).val`,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.get_sub_property={init:function(){this.appendDummyInput().appendField("getSubProperty"),this.appendValueInput("OBJECT").setCheck("Object").appendField("object"),this.appendValueInput("PROPERTYPATH").setCheck("String").appendField("propertypath"),this.setInputsInline(!0),this.setOutput(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.get_sub_property=function(l,s){let t=Blockly.JavaScript.valueToCode(l,"OBJECT",Blockly.JavaScript.ORDER_ATOMIC),e=Blockly.JavaScript.valueToCode(l,"PROPERTYPATH",Blockly.JavaScript.ORDER_ATOMIC);return[`extractPart(${t}, ${e})`,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.open_screen={init:function(){this.appendDummyInput().appendField("open screen"),this.appendValueInput("SCREEN").setCheck("String").appendField("screen"),this.appendValueInput("RELATIVESIGNALSPATH").setCheck("String").appendField("relativeSignalsPath"),this.appendValueInput("NOHISTORY").setCheck("Boolean").appendField("noHistory"),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.open_screen=function(l){let s=Blockly.JavaScript.valueToCode(l,"SCREEN",Blockly.JavaScript.ORDER_ATOMIC),t=Blockly.JavaScript.valueToCode(l,"RELATIVESIGNALSPATH",Blockly.JavaScript.ORDER_ATOMIC),e=Blockly.JavaScript.valueToCode(l,"NOHISTORY",Blockly.JavaScript.ORDER_ATOMIC);return`RUNTIME.openScreen({screen: ${s}, relativeSignalsPath: ${t}, noHistory: ${e}})`};Blockly.Blocks.query_selector={init:function(){this.appendDummyInput().appendField("querySelector").appendField(new Blockly.FieldDropdown([["currentScreen","CURRENTSCREEN"],["parentScreen","PARENTSCREEN"]]),"SOURCE"),this.appendValueInput("SELECTOR").setCheck("String").appendField("selector"),this.setInputsInline(!0),this.setOutput(!0,"Element"),this.setColour(230)}};Blockly.JavaScript.forBlock.query_selector=function(l,s){var t=l.getFieldValue("SOURCE");let e=Blockly.JavaScript.valueToCode(l,"SELECTOR",Blockly.JavaScript.ORDER_ATOMIC),i;return t==="CURRENTSCREEN"?i=`shadowRoot.querySelector(${e})`:t==="PARENTSCREEN"&&(i=`shadowRoot.host.getRootNode().querySelector(${e})`),[i,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.query_selector_all={init:function(){this.appendDummyInput().appendField("querySelectorAll").appendField(new Blockly.FieldDropdown([["currentScreen","CURRENTSCREEN"],["parentScreen","PARENTSCREEN"]]),"SOURCE"),this.appendValueInput("SELECTOR").setCheck("String").appendField("selector"),this.setInputsInline(!0),this.setOutput(!0,"Array"),this.setColour(230)}};Blockly.JavaScript.forBlock.query_selector_all=function(l,s){var t=l.getFieldValue("SOURCE");let e=Blockly.JavaScript.valueToCode(l,"SELECTOR",Blockly.JavaScript.ORDER_ATOMIC),i;return t==="CURRENTSCREEN"?i=`shadowRoot.querySelectorall(${e})`:t==="PARENTSCREEN"&&(i=`shadowRoot.querySelectorall(${e})`),[i,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.set_element={init:function(){this.appendDummyInput().appendField("setElement").appendField(new Blockly.FieldDropdown([["property","PROPERTY"],["attribute","ATTRIBUTE"],["style","STYLE"]]),"TARGET"),this.appendValueInput("ELEMENT").setCheck("Element").appendField("element"),this.appendValueInput("NAME").setCheck("String").appendField("name"),this.appendValueInput("VALUE").setCheck(null).appendField("value"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.set_element=function(l){var s=l.getFieldValue("TARGET");let t=Blockly.JavaScript.valueToCode(l,"ELEMENT",Blockly.JavaScript.ORDER_ATOMIC),e=Blockly.JavaScript.valueToCode(l,"NAME",Blockly.JavaScript.ORDER_ATOMIC),i=Blockly.JavaScript.valueToCode(l,"VALUE",Blockly.JavaScript.ORDER_ATOMIC),n="";return s==="PROPERTY"?n+=t+"["+e+"] = "+i+`;
+`:s==="ATTRIBUTE"?n+=t+".setAttribute("+e+", "+i+`);
+`:s==="STYLE"&&(n+=t+".style["+e+"] = "+i+`;
+`),n};Blockly.Blocks.set_state={init:function(){this.appendValueInput("OID").setCheck("String").appendField("set_state"),this.appendValueInput("VALUE").setCheck(null).appendField("with"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.set_state=function(l){let s=Blockly.JavaScript.valueToCode(l,"OID",Blockly.JavaScript.ORDER_ATOMIC),t=Blockly.JavaScript.valueToCode(l,"VALUE",Blockly.JavaScript.ORDER_ATOMIC);return`await visualizationHandler.setState((${s}[0] === '.' ? relativeSignalsPath : '') + ${s}, ${t});
+`};Blockly.defineBlocksWithJsonArray([{type:"start_event",message0:"Event %1",nextStatement:null,style:"hat_blocks",args0:[{type:"field_variable",name:"EVENTVAR",variable:"event"}]}]);Blockly.JavaScript.forBlock.start_event=function(l){return Blockly.JavaScript.getVariableName(l.getField("EVENTVAR").variable.name)+` = eventData;
+`};var de=`function extractPart(obj, propertyPath) {
+    let retVal = obj;
+    for (let p of propertyPath.split('.')) {
+        retVal = retVal?.[p];
+    }
+    return retVal;
+}
+
+function delay(ms) {
+    return new Promise(res => {
+        setTimeout(() => res(), ms);
+    });
+}
+
+export async function run(eventData, shadowRoot, parameters, relativeSignalsPath, visualizationHandler, context) {
+`,he="}";async function X(l){let s=new Blockly.Workspace;Blockly.serialization.workspaces.load(l,s),Blockly.JavaScript.addReservedWords("eventData"),Blockly.JavaScript.addReservedWords("shadowRoot"),Blockly.JavaScript.addReservedWords("extractPart"),Blockly.JavaScript.addReservedWords("parameters"),Blockly.JavaScript.addReservedWords("relativeSignalsPath"),Blockly.JavaScript.addReservedWords("delay"),Blockly.JavaScript.addReservedWords("visualizationHandler"),Blockly.JavaScript.addReservedWords("context");let t=Blockly.JavaScript.workspaceToCode(s);return(await import(URL.createObjectURL(new Blob([de+t+he],{type:"application/javascript"})))).run}import{BaseCustomWebComponentConstructorAppend as me,html as ge,css as ye}from"@node-projects/base-custom-webcomponent";var C=class l extends me{static template=ge`
+        <div id="blocklyDiv" style="position: absolute; width: 100%; height: 100%;"></div>
+    `;static style=ye`
+        :host {
+            box-sizing: border-box;
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            display: block;
+        }`;static is="node-projects-blockly-script-editor";blocklyDiv;workspace;static blocklyStyle1;static blocklyStyle2;resizeObserver;_toolbox;constructor(s){super(),super._restoreCachedInititalValues(),this._toolbox=s,this.blocklyDiv=this._getDomElement("blocklyDiv"),this._assignEvents(),this.createBlockly()}createBlockly(){let s="zelos",t="webui",e=Blockly.Theme.defineTheme(t,{base:Blockly.Themes.Classic,blockStyles:{hat_blocks:{colourPrimary:"#4a148c"}},categoryStyles:{start_category:{colour:"#4a148c"},system_category:{colour:"#01579b"}}});this.workspace=Blockly.inject(this.blocklyDiv,{theme:e,toolbox:this._toolbox,renderer:s,trashcan:!0,zoom:{controls:!0,wheel:!1,startScale:.7,maxScale:3,minScale:.3,scaleSpeed:1.2,pinch:!1},move:{scrollbars:{horizontal:!0,vertical:!0},drag:!0,wheel:!0},maxInstances:{start_event:1}}),l.blocklyStyle1||(l.blocklyStyle1=new CSSStyleSheet,l.blocklyStyle1.replaceSync(document.getElementById("blockly-renderer-style-"+s+"-"+t).innerText),l.blocklyStyle2=new CSSStyleSheet,l.blocklyStyle2.replaceSync(document.getElementById("blockly-common-style").innerText)),this.shadowRoot.adoptedStyleSheets=[l.blocklyStyle1,l.blocklyStyle2,l.style],new ZoomToFitControl(this.workspace).init()}ready(){Blockly.svgResize(this.workspace),this.resizeObserver=new ResizeObserver(s=>{Blockly.svgResize(this.workspace)}),this.resizeObserver.observe(this)}save(){return Blockly.serialization.workspaces.save(this.workspace)}load(s){Blockly.serialization.workspaces.load(s,this.workspace)}};customElements.define(C.is,C);import{BaseCustomWebComponentConstructorAppend as xe,html as we,css as ke}from"@node-projects/base-custom-webcomponent";import{BindingMode as Se,BindingTarget as G}from"@node-projects/web-component-designer";import{BaseCustomWebComponentConstructorAppend as fe,html as ve,css as be}from"@node-projects/base-custom-webcomponent";var E=class extends fe{static template=ve`
+        <span style="position:absolute;left:30px;top:26px;">from</span>
+        <span style="position:absolute;left:30px;top:77px;">count</span>
+        <span style="position:absolute;left:30px;top:123px;">limit</span>
+        <span style="position:absolute;left:30px;top:150px;">round</span>
+        <span style="position:absolute;left:55px;top:181px;">return newest entries</span>
+        <span style="position:absolute;left:55px;top:201px;">remove border values</span>
+        <span style="position:absolute;left:30px;top:301px;">step</span>
+        <span style="position:absolute;left:30px;top:270px;">aggregate</span>
+        <span style="position:absolute;left:30px;top:227px;">ignore null</span>
+        <input type="datetime-local" value="{{this.historic.from}}" style="position:absolute;left:75.9219px;top:26px;width:184px;">
+        <span style="position:absolute;left:31px;top:52px;">to</span>
+        <input type="datetime-local" value="{{this.historic.to}}" style="position:absolute;left:76px;top:51.4375px;width:184px;">
+        <input type="number" value="{{this.historic.count}}" style="position:absolute;left:76px;top:78.4415px;width:184px;">
+        <input type="number" value="{{this.historic.limit}}" style="position:absolute;left:76px;top:125.5px;width:184px;">
+        <input type="number" value="{{this.historic.round}}" style="position:absolute;left:76px;top:152px;width:184px;">
+        <input type="number" value="{{this.historic.step}}" style="position:absolute;left:75.921875px;top:301px;width:184px;">
+        <select value="{{?this.historic.aggregate}}" @change="[[this.refresh()]]" style="position:absolute;left:142px;top:273px;width:118px;height:21px;">
+            <option>none</option>
+            <option>minmax</option>
+            <option>max</option>
+            <option>min</option>
+            <option>average</option>
+            <option>total</option>
+            <option>count</option>
+            <option>percentile</option>
+            <option>quantile</option>
+            <option>integral</option>
+        </select>
+        <select value="{{this.historic.ignoreNull}}" style="position:absolute;left:142px;top:230px;width:119px;height:21px;">
+            <option>false</option>
+            <option>true</option>
+            <option>0</option>
+        </select>
+        <input type="checkbox" checked="{{this.historic.returnNewestEntries}}" style="position:absolute;left:35px;top:184px;">
+        <input type="checkbox" checked="{{this.historic.removeBorderValues}}" style="position:absolute;left:35px;top:204px;">
+        <div style="position:absolute;left:266px;top:26px;width:135px;height:201px;border:1px solid black;">
+            <div style="position:absolute;left:25px;top:36px;width:117px;height:154px;grid-template-columns:20px 1fr;display:grid;">
+                <input type="checkbox" checked="{{this.historic.from}}" style="grid-column:1;grid-row:1;">
+                <span>from</span>
+                <input type="checkbox" checked="{{this.historic.ack}}">
+                <span>ack</span>
+                <input type="checkbox" checked="{{this.historic.q}}">
+                <span>q</span>
+                <input type="checkbox" checked="{{this.historic.user}}">
+                <span>user</span>
+                <input type="checkbox" checked="{{this.historic.comment}}">
+                <span>comment</span>
+                <input type="checkbox" checked="{{this.historic.id}}">
+                <span>id</span>
+            </div>
+            <span style="position:absolute;left:8px;top:6px;">include fields</span>
+        </div>
+        <span style="position:absolute;left:31.8203px;top:390px;">update all (ms)</span>
+        <input value="{{this.historic.reloadInterval}}" type="number" style="position:absolute;left:142px;top:390px;width:119px;">
+        <span css:visibility="[[this.historic.aggregate == 'percentile' ? 'visible' : 'collapse']]" id="lblPercentile" style="position:absolute;left:30px;top:325px;">percentile</span>
+        <input css:visibility="[[this.historic.aggregate == 'percentile' ? 'visible' : 'collapse']]" value="{{this.historic.percentile}}" type="number" id="percentile" style="position:absolute;left:109px;top:325px;width:151px;">
+        <span css:visibility="[[this.historic.aggregate == 'integral' ? 'visible' : 'collapse']]" id="lblIntegral" style="position:absolute;left:30px;top:325px;">integral unit</span>
+        <input css:visibility="[[this.historic.aggregate == 'integral' ? 'visible' : 'collapse']]" value="{{this.historic.integralUnit}}" type="number" id="integralUnit" style="position:absolute;left:126px;top:325px;width:134px;">
+        <select css:visibility="[[this.historic.aggregate == 'integral' ? 'visible' : 'collapse']]" value="{{this.historic.integralInterpolation}}" style="position:absolute;left:178.93px;top:349px;width:81px;height:21px;">
+            <option>none</option>
+            <option>linear</option>
+        </select>
+        <span css:visibility="[[this.historic.aggregate == 'integral' ? 'visible' : 'collapse']]" style="position:absolute;left:29.9219px;top:346px;">integral interpolation</span>
+        <input css:visibility="[[this.historic.aggregate == 'quantile' ? 'visible' : 'collapse']]" value="{{this.historic.quantile}}" type="number" id="quantile" style="position:absolute;left:107px;top:325px;width:153px;">
+        <span css:visibility="[[this.historic.aggregate == 'quantile' ? 'visible' : 'collapse']]" id="lblQuantile" style="position:absolute;left:30px;top:325px;">quantile</span>
+        <span style="position:absolute;left:34px;top:417px;">instance</span>
+        <input type="text" value="{{?this.historic.instance}}" style="position:absolute;left:104px;top:419px;width:155px;">`;static style=be`
+        :host {
+            box-sizing: border-box;
+        }`;static is="node-projects-visualization-bindings-editor-historic";historic;static properties={historic:Object};constructor(s){super(),this._restoreCachedInititalValues(),this.historic=s??{reloadInterval:2e3}}ready(){this._bindingsParse()}#e=!1;refresh(){this.#e||(this.#e=!0,this._bindingsRefresh(null,!0),this.#e=!1)}};customElements.define(E.is,E);var D=class extends xe{static template=we`
+        <div id="root">
+            <div class="vertical-grid">
+                <div style="grid-column: 1/3">
+                    <div style="display: flex; flex-direction: column;">
+                        <div class="row">
+                            <span style="cursor: pointer;" title="to use multiple objects, seprate them with semicolon (;).&#010;Access signal objects in properties via ?propertyName, access the propertyValue via ??propertyName.&#010;Access signal objects in properties of the target via #propertyName, access a propertyValue of the target via ##propertyName.&#010;Bind to signal configurations via $objectId.&#010;Bind to special values via §name (if supported by your framework).&#010;You could also use signals inside of a Signal Name via {name}">objects</span>
+                        </div>
+                        <div id="groupObjectName" style="display:flex;align-items: flex-end;">
+                            <input id="objectName" class="row" value="{{?this.objectNames::change}}" style="flex-grow: 1;">
+                            <button @click="_clear" style="height: 22px">X</button>
+                            <button @click="_select" style="height: 22px">...</button>
+                        </div>
+                        <div id="groupObjectType" class="row">
+                            <label style="white-space: nowrap; margin-right: 4px;" title="if set, the value is converted to the type before binding is applied">type :</label>
+                            <select class="row" value="{{?this.objectValueType}}">
+                                <option selected value="">ignore</option>
+                                <option value="number">number</option>
+                                <option value="boolean">boolean</option>
+                                <option value="string">string</string>
+                            </select>
+                        </div>
+                        <div id="groupBindingMode" class="row">
+                            <input type="checkbox" disabled="[[!this.twoWayPossible]]" checked="{{this.twoWay::change}}" @change="_refresh">
+                            <span>two way binding</span>
+                            <span css:display="[[this.twoWay ? 'inline' : 'none']]" style="margin-left: 15px">events:&nbsp;</span>
+                            <input css:display="[[this.twoWay ? 'inline-block' : 'none']]" title="to use multiple events, seprate them with semicolon (;)" class="row" value="{{?this.events::change}}" style="flex-grow: 1;">
+                        </div>
+                        <div id="groupinvert" class="row" style="position: relative">
+                            <input type="checkbox" checked="{{this.invert::change}}">
+                            <span>invert logic</span>
+                            <button css:border="[[this.historic ? 'solid lime 5px' : 'none']]" style="position: absolute; right: 1px; top: 5px; padding: 10px;" @click="showHistoric">historic</button>
+                        </div>
+                        <div class="row">
+                            <span style="cursor: pointer;" title="javascript expression. access objects with __0, __1, ...">formula</span>
+                        </div>
+                        <div class="row">
+                            <node-projects-code-view-monaco id="expression" single-row language="javascript" style="width: 100%; min-height: 17px; height: 17px; position: relative; overflow: hidden; resize: vertical;" .code="{{?this.expression}}" @code-changed="_refresh"></iobroker-webui-monaco-editor>
+                        </div>
+                        <div class="row">
+                          <span style="text-wrap: nowrap" style="cursor: pointer;" title="write back the value build by a formula to a signal. maybe only usefull when a formula is used.">write back signal :</span>
+                          <input style="width: 100%; margin-left: 5px;" .disabled="[[!this.expression]]" value="{{?this.writeBackSignal::change}}">
+                        </div>
+                        <div class="row">
+                            <span style="cursor: pointer;" title="javascript expression. access property with 'value'">formula write back (two way)</span>
+                        </div>
+                        <div class="row">
+                            <node-projects-code-view-monaco id="expression2way" .read-only="[[!this.twoWay]]" $readonly="[[!this.twoWay]]" single-row language="javascript" style="width: 100%; min-height: 17px; height: 17px; position: relative; overflow: hidden; resize: vertical;" .code="{{?this.expressionTwoWay}}"></iobroker-webui-monaco-editor>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="vertical-grid" style="margin-top: 10px;">
+                <div>
+                    <div class="input-headline" style="display: flex;align-items: center;">
+                        <span>converter</span>:<input id="namedConverterInput" style="width: 100%; margin-left: 15px;" value="{{?this.convertersString::change}}">
+                    </div>
+                </div>
+            </div>
+            <div class="vertical-grid" style="border: solid 1px black; padding: 10px; overflow-y: auto;">
+                <div class="bottomleft">
+                    <div id="converterGrid" style="height: 100%;">
+                        <div style="width: 100%; height: 20px; display: flex;">
+                            <div style="width: 39%">condition</div>
+                            <div style="width: 59%">value</div>
+                        </div>
+                        <template repeat:item="[[this.converters]]">
+                            <div css:background-color="[[item.activeRow ? 'gray' : '']]" style="width: 100%; display: flex; height: 26px; justify-content: center; align-items: center; gap: 5px;">
+                                <input type="text" value="{{item.key}}" @focus="[[this._focusRow(index)]]" style="width: 39%">
+                                <input type="[[this._property.type == 'color' ? 'color' : 'text']]" value="{{item.value}}" @focus="[[this._focusRow(index)]]" style="width: 59%">
+                            </div>
+                        </template>
+                    </div>
+                </div>
+                <div class="controlbox" id="grid-controls">
+                    <button type="button" id="add-row-button" value="add" @click="addConverter">
+                        <span>add</span>
+                    </button>
+                    <button id="remove-row-button" value="remove" style="margin-top: 6px;" @click="removeConverter">
+                        <span>remove</span>
+                    </button>
+                </div>
+            </div>
+        </div>`;static style=ke`
+        :host {
+            box-sizing: border-box;
+        }
+        
+        #converterGrid {
+            display: flex;
+            gap: 2px;
+            flex-direction: column;
+        }
+        #converterGrid input {
+            height: 20px;
+            box-sizing: border-box;
+        }
+
+        .padding_top {
+            padding-top: 30px;
+        }
+
+        .row{
+            margin-top: 3px;
+            display: flex;
+            align-items: center;
+        }
+
+        .controlbox {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .input-headline {
+            height: 30px;
+        }
+
+        input[type="checkbox"] {
+            margin-right: 15px;
+            width: 15px;
+            height: 15px;
+        }
+
+        select {
+            width: 100%;
+        }
+
+        #root {
+            padding: 2px 10px;
+            display: grid;
+            grid-template-rows: min-content min-content;
+            overflow: auto;
+            height: calc(100% - 4px)
+        }
+
+        .vertical-grid {
+            display: grid;
+            grid-template-columns: calc((100% - 150px) - 30px) 150px;
+            gap: 30px;
+        }
+
+        #grid input, #list input { 
+            border:0px;
+        }
+
+        #tagdata_type {
+            height: 24px;
+            font-size: inherit;
+        }
+        
+        node-projects-code-view-monaco:not([readonly]) {
+            border: 1px black solid;
+        }
+        
+        node-projects-code-view-monaco[readonly] {
+            border: 1px lightgray solid;
+        }`;static is="node-projects-visualization-bindings-editor";static properties={twoWayPossible:Boolean,twoWay:Boolean,expression:String,objectNames:String,events:String,invert:Boolean,converters:Array,historic:Object};twoWayPossible=!1;twoWay=!1;expression="";writeBackSignal="";expressionTwoWay="";historic;objectNames="";events="";invert=!1;converters=[];convertersString;objectValueType;_property;_binding;_bindingTarget;_serviceContainer;_instanceServiceContainer;_shell;_activeRow=-1;_objNmInput;constructor(s,t,e,i,n,o,a={namedConverters:!0}){super(),super._restoreCachedInititalValues(),this._objNmInput=this._getDomElement("objectName"),this._property=s,this._binding=t,this._bindingTarget=e,this._serviceContainer=i,this._instanceServiceContainer=n,this._shell=o,a?.namedConverters||(this._getDomElement("namedConverterInput").style.display="none")}ready(){if(this._parseAttributesToProperties(),this._assignEvents(),this.twoWayPossible=!1,(this._bindingTarget==G.property||this._bindingTarget==G.attribute)&&(this.twoWayPossible=!0),this._binding){if(this.twoWay=this._binding.mode==Se.twoWay,this.expression=this._binding.expression,this.writeBackSignal=this._binding.writeBackSignal,this.expressionTwoWay=this._binding.expressionTwoWay,this.historic=this._binding.historic,this.invert=this._binding.invert,this.objectValueType=this._binding.type,this._binding.bindableObjectNames&&(this.objectNames=this._binding.bindableObjectNames.join(";")),this._binding.converter)if(typeof this._binding.converter=="string")this.convertersString=this._binding.converter;else for(let s in this._binding.converter)this.converters.push({key:s,value:this._binding.converter[s]});this._binding.changedEvents&&this._binding.changedEvents.length&&(this.events=this._binding.changedEvents.join(";"))}if(this.expression){let s=this._getDomElement("expression");this.expression.indexOf(`
+`)>=0&&(s.style.height="51px")}if(this.expressionTwoWay){let s=this._getDomElement("expression2way");this.expressionTwoWay.indexOf(`
+`)>=0&&(s.style.height="51px")}this._bindingsParse(),this._objNmInput.focus()}_focusRow(s){this._activeRow=s,this._updatefocusedRow()}_updatefocusedRow(){let s=this._getDomElement("converterGrid");s.querySelectorAll("div").forEach(t=>t.style.background=""),this._activeRow>=0&&(s.children[this._activeRow+1].style.background="gray")}_clear(){this.objectNames="",this._bindingsRefresh()}_refresh(){requestAnimationFrame(()=>{this._bindingsRefresh()})}async _select(){let s=this._shell.createBindableObjectBrowser();s.initialize(this._serviceContainer,this._instanceServiceContainer,"binding"),s.title="select signal...";let t=new AbortController;s.objectDoubleclicked.on(()=>{t.abort(),this.objectNames!=""&&(this.objectNames+=";"),s.selectedObject.specialType=="signalProperty"?this.objectNames+="?":s.selectedObject.bindabletype==="property"&&(this.objectNames+="??"),this.objectNames+=s.selectedObject.fullName,this._bindingsRefresh()}),await this._shell.openConfirmation(s,{x:100,y:100,width:400,height:300,parent:this,abortSignal:t.signal})&&(this.objectNames!=""&&(this.objectNames+=";"),this.objectNames+=s.selectedObject.fullName,this._bindingsRefresh())}async showHistoric(){let s=new E(this.historic),t=new AbortController;s.title="Edit historic binding to: "+this._property.name,await this._shell.openConfirmation(s,{x:100,y:100,width:420,height:510,parent:this,abortSignal:t.signal,disableResize:!0,cancelText:"Remove"})?this.historic=s.historic:this.historic=null,this._bindingsRefresh()}addConverter(){this.converters.push({key:"",value:""}),this._activeRow=this.converters.length-1,this._bindingsRefresh(),this._updatefocusedRow()}removeConverter(){this.converters.splice(this._activeRow,1),this._activeRow=-1,this._bindingsRefresh(),this._updatefocusedRow()}};customElements.define(D.is,D);import{BaseCustomWebComponentConstructorAppend as Ce,css as Ee,html as Ne}from"@node-projects/base-custom-webcomponent";import{ContextMenu as q}from"@node-projects/web-component-designer";import{typeInfoFromJsonSchema as $}from"@node-projects/propertygrid.webcomponent";import{defaultOptions as Ie}from"@node-projects/web-component-designer-widgets-wunderbaum";import{Wunderbaum as Oe}from"wunderbaum";import Be from"wunderbaum/dist/wunderbaum.css"with{type:"css"};import{PropertyGrid as _e}from"@node-projects/propertygrid.webcomponent";import{CodeViewMonaco as Te}from"@node-projects/web-component-designer-codeview-monaco";var j=class extends _e{serviceContainer;instanceServiceContainer;visualizationHandler;visualizationShell;bindableObjectsTarget="property";constructor(){super()}bindingDoubleClicked;async getEditorForType(s,t,e,i,n){if(this.getSpecialEditorForType){let o=await this.getSpecialEditorForType(s,t,e,i,n);if(o)return o}switch(s.format){case"screen":{let o=document.createElement("select");o.style.width="100%";let a=document.createElement("option");a.value=t??"",a.innerText=t??"",o.appendChild(a);for(let c of await this.visualizationHandler.getAllNames("screen")){if(c==t)continue;let r=document.createElement("option");r.value=c,r.innerText=c,o.appendChild(r)}return o.onchange=()=>{this.setPropertyValue(e,o.value)},o.value=t,o}case"signal":{let o=document.createElement("div");o.style.display="flex";let a=document.createElement("input");a.value=t??"",a.style.flexGrow="1",a.style.width="0",a.onchange=r=>this.setPropertyValue(e,a.value),a.onfocus=r=>{a.selectionStart=0,a.selectionEnd=a.value?.length},o.appendChild(a);let c=document.createElement("button");return c.textContent="...",c.onclick=async()=>{let r=this.visualizationShell.createBindableObjectBrowser();r.initialize(this.serviceContainer,this.instanceServiceContainer,this.bindableObjectsTarget),r.title="select signal...";let u=new AbortController;r.objectDoubleclicked.on(()=>{this.bindingDoubleClicked&&this.bindingDoubleClicked(r.selectedObject),u.abort(),a.value=r.selectedObject.fullName,this.setPropertyValue(e,a.value)}),await this.visualizationShell.openConfirmation(r,{x:100,y:100,width:400,height:300,parent:this,abortSignal:u.signal})&&(a.value=r.selectedObject.fullName,this.setPropertyValue(e,a.value))},o.appendChild(c),o}case"html":case"script":{let o=document.createElement("div");o.style.boxSizing="border-box",o.style.width="100%",o.style.display="flex";let a=document.createElement("textarea");a.style.boxSizing="border-box",a.value=t??"",a.style.width="100%",a.onblur=r=>{this.setPropertyValue(e,a.value)},o.appendChild(a);let c=document.createElement("button");return c.innerHTML="...",c.style.boxSizing="border-box",c.onclick=async()=>{let r=new Te;if(s.format=="html")r.language="html";else{let g={content:`declare global {
+                            var context: { event: Event, element: Element };
+                        }`,filePath:"global.d.ts"};monaco.languages.typescript.typescriptDefaults.setExtraLibs([g]),r.language="javascript"}r.code=a.value,r.style.position="relative",await this.visualizationShell.openConfirmation(r,{x:200,y:200,width:600,height:400,parent:this})&&(a.value=r.getText(),this.setPropertyValue(e,a.value))},o.appendChild(c),o}}return super.getEditorForType(s,t,e,i,n)}};customElements.define("node-projects-visualization-property-grid",j);import"@node-projects/splitview.webcomponent";var N=class l{static upgradeScriptCommand(s){return s.type==="SetElementProperty"?l.upgradeSetElementProperty(s):s}static upgradeSetElementProperty(s){return s.targetSelectorTarget==="currentScreen"?s.targetSelectorTarget="container":s.targetSelectorTarget==="parentScreen"?(s.targetSelectorTarget="container",s.parentIndex=1):s.targetSelectorTarget==="currentElement"?s.targetSelectorTarget="element":s.targetSelectorTarget==="parentElement"&&(s.targetSelectorTarget="element",s.parentIndex=1),s}};var I=class l extends Ce{static style=Ee`
+        :host {
+            background: white;
+        }
+        .list{
+            display: grid;
+            grid-template-columns: 1fr 40px;
+            width: calc(100% - 6px);
+            box-sizing: border-box;
+            margin: 3px;
+        }
+
+        .list button{
+            padding: 5px 10px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: center;
+            margin-right: 5px;
+            margin-left: 5px;
+        }
+
+        node-projects-visualization-property-grid {
+            width: 100%;
+            height: 100%;
+        }
+    `;static template=Ne`
+        <div style="width:100%; height:100%; overflow: hidden;">
+            <node-projects-split-view style="height: 100%; width: 100%; position: relative;" orientation="horizontal">
+                <div style="width: 40%;  position: relative;">
+                    <div style="width:calc(100% - 4px); height:calc(100% - 4px)">
+                        <div id="commandList" style="overflow-x: hidden; overflow-y: auto; width:100%; height: calc(100% - 34px);"></div>
+                        <div class="list">
+                            <select id="possibleCommands" style="width: 100%"></select>  
+                            <button @click="[[this.addItem()]]">Add</button>
+                        </div>
+                    </div>
+                </div>
+                <div style="width: 60%; position: relative;">
+                    <node-projects-visualization-property-grid id="propertygrid"></node-projects-visualization-property-grid>
+                </div>
+            </node-projects-split-view>
+        </div>
+    `;static is="node-projects-visualization-simple-script-editor";serviceContainer;instanceServiceContainer;visualizationHandler;visualizationShell;scriptCommandsTypeInfo;propertiesTypeInfo;_script;_commandListDiv;_commandListFancyTree;_possibleCommands;_propertygrid;constructor(){super(),this._restoreCachedInititalValues(),this._commandListDiv=this._getDomElement("commandList"),this._possibleCommands=this._getDomElement("possibleCommands"),this._propertygrid=this._getDomElement("propertygrid"),this.shadowRoot.adoptedStyleSheets=[Be,l.style]}async ready(){this.addPossibleCommands(),this._parseAttributesToProperties(),this._bindingsParse(null,!0),this._assignEvents();let s=async t=>{let e=new j;e.visualizationHandler=this.visualizationHandler,e.visualizationShell=this.visualizationShell,e.serviceContainer=this.serviceContainer,e.instanceServiceContainer=this.instanceServiceContainer,e.bindableObjectsTarget="script",e.getTypeInfo=(n,o)=>$(this.propertiesTypeInfo,n,o),e.showHead=!1,e.typeName="IScriptMultiplexValue",e.title='Complex for "'+t.propertyPath+'"',typeof t.value=="object"?e.selectedObject=t.value??{}:e.selectedObject={},e.bindingDoubleClicked=n=>{n.bindabletype=="property"?e.setPropertyValue("source","property"):n.bindabletype=="context"?e.setPropertyValue("source","context"):e.setPropertyValue("source","signal"),e.setPropertyValue("name",n.fullName),e.refresh()},await this.visualizationShell.openConfirmation(e,{x:100,y:100,width:400,height:500,parent:this})&&(this._propertygrid.setPropertyValue(t.propertyPath,e.selectedObject),this._propertygrid.refresh())};this._propertygrid.visualizationHandler=this.visualizationHandler,this._propertygrid.visualizationShell=this.visualizationShell,this._propertygrid.serviceContainer=this.serviceContainer,this._propertygrid.instanceServiceContainer=this.instanceServiceContainer,this._propertygrid.bindableObjectsTarget="script",this._propertygrid.getTypeInfo=(t,e)=>$(this.scriptCommandsTypeInfo,t,e),this._propertygrid.getSpecialEditorForType=async(t,e,i,n,o)=>{if(!t.specialAllreadyAdded&&(t.specialAllreadyAdded=!0,t.format!=="collection"))if(typeof e=="object"&&e!==null||t.format==="complex"){let a=document.createElement("button");a.style.height="calc(100% - 6px)",a.style.position="relative",a.style.display="flex",a.style.justifyContent="center",a.style.width="20px",a.style.boxSizing="content-box",a.innerText="del",a.onclick=()=>{this._propertygrid.setPropertyValue(i,void 0),this._propertygrid.refresh()},n.nodeElem.insertAdjacentElement("afterbegin",a);let c=document.createElement("div");c.style.display="flex";let r=document.createElement("span");e?r.innerText=(e.source??"")+": "+(e.name??""):r.innerText="",r.style.overflow="hidden",r.style.whiteSpace="nowrap",r.style.textOverflow="ellipsis",r.style.flexGrow="1",r.title=JSON.stringify(e),c.appendChild(r);let u=document.createElement("button");return u.innerText="...",u.onclick=()=>{s({value:e,propertyPath:i})},c.appendChild(u),n.nodeElem.style.display="flex",c}else{let a=document.createElement("button");a.style.height="calc(100% - 6px)",a.style.position="relative",a.style.display="flex",a.style.justifyContent="center",a.style.width="20px",a.style.boxSizing="content-box",a.title="complex property value",a.style.opacity="0.2",a.innerText="...",a.onclick=()=>{s({value:e,propertyPath:i})},n.nodeElem.insertAdjacentElement("afterbegin",a),n.nodeElem.style.display="flex"}return null},this._propertygrid.propertyNodeContextMenu.on(t=>{q.show([{title:"edit complex value",action:async()=>{s(t)}},{title:"edit string",action:async()=>{let e=prompt("enter value:");e&&(this._propertygrid.setPropertyValue(t.propertyPath,e),this._propertygrid.refresh())}},{title:"remove complex value",action:async()=>{this._propertygrid.setPropertyValue(t.propertyPath,void 0),this._propertygrid.refresh()}}],t.event)})}async addPossibleCommands(){let s=Object.keys(this.scriptCommandsTypeInfo.definitions).filter(t=>this.scriptCommandsTypeInfo.definitions[t].type=="object");for(let t of s){if(t=="ScriptCommands")continue;let e=document.createElement("option");e.innerText=t,this._possibleCommands.add(e)}}loadScript(s){this._script=s;let t=[];for(let e of this._script.commands)e=N.upgradeScriptCommand(e),t.push(this.createTreeItem(e));this._commandListFancyTree=new Oe({...Ie,element:this._commandListDiv,icon:!1,source:t,activate:e=>{this._propertygrid.selectedObject=e.node.data.data.item},render:e=>{if(e.isNew){let i=e.nodeElem;i.oncontextmenu=n=>(e.node.setActive(),e.node.data.contextMenu&&e.node.data.contextMenu(n,e.node.data,e.node),n.preventDefault(),!1)}},dnd:{guessDropEffect:!0,preventRecursion:!0,preventVoidMoves:!1,serializeClipboardData:!1,dragStart:e=>(e.event.dataTransfer.effectAllowed="move",e.event.dataTransfer.dropEffect="move",!0),dragEnter:e=>(e.event.dataTransfer.dropEffect="move",!0),dragOver:e=>{e.event.dataTransfer.dropEffect="move"},drop:async e=>{e.sourceNode.moveTo(e.node,e.region=="before"?"before":"after")}}})}createTreeItem(s){return{title:s.type,data:{item:s},contextMenu:(e,i,n)=>{q.show([{title:"Remove Item",action:o=>n.remove()}],e)}}}addItem(){let t={type:this._possibleCommands.value},e=this.createTreeItem(t);this._commandListFancyTree.addChildren(e)}getScriptCommands(){return this._commandListFancyTree.root.children.map(t=>t.data.data.item)}};customElements.define(I.is,I);import{BaseCustomWebComponentConstructorAppend as Re,css as Ve,html as Ae}from"@node-projects/base-custom-webcomponent";var O=class extends Re{static style=Ve`
+        :host {
+            display: grid;
+            grid-template-columns: 80px 80px 80px auto;
+            overflow-y: auto;
+            align-content: start;
+            height: 100%;
+            padding: 10px;
+            gap: 5px;
+            box-sizing: border-box;
+        }
+        
+        span {
+            font-size: 10px;
+        }`;static template=Ae`
+        <span></span>
+        <span>name</span>
+        <span>type</span>
+        <span>value</span>
+        <template repeat:item="[[this._parameterArray]]">
+            <button @click="[[this._remove(index)]]" style="width: 40px; height: 20px; align-self: center;">del</button>
+            <input type="text" value="{{?item.key}}">
+            <select value="{{item.type}}" @change="[[this._bindingsRefresh()]]">
+                <option>null</string>
+                <option>string</string>
+                <option>number</string>
+                <option>boolean</string>
+            </select>
+            <input hidden="[[item.type !== 'string']]" type="text" value="{{?item.value}}">
+            <input hidden="[[item.type !== 'number']]" type="number" value="{{item.value}}">
+            <input hidden="[[item.type !== 'boolean']]" type="checkbox" checked="{{item.value}}">
+            <div hidden="[[item.type !== 'null']]">-null-</div>
+        </template>
+        <button @click="[[this._add()]]" style="width: 40px; height: 20px; align-self: center;">add</button>`;static is="node-projects-visualization-parameter-editor";constructor(){super(),this._restoreCachedInititalValues()}ready(){this._bindingsParse()}_parameterArray;setParametersObject(s){s!=null?this._parameterArray=Object.keys(s).map(t=>({key:t,type:typeof s[t]=="object"?"null":typeof s[t],value:s[t]})):this._parameterArray=[],this._bindingsRefresh()}getParametersObject(){let s=!1,t={};for(let e of this._parameterArray)if(e.key)switch(s=!0,t[e.key]=null,e.type){case"string":t[e.key]=e.value.toString();break;case"number":let i=parseFloat(e.value);t[e.key]=isNaN(i)?0:i;break;case"boolean":t[e.key]=!!e.value;break}return s?t:null}_remove(s){this._parameterArray.splice(s,1),this._bindingsRefresh()}_add(){this._parameterArray.push({type:"null"}),this._bindingsRefresh()}};customElements.define(O.is,O);import{BaseCustomWebComponentConstructorAppend as We,css as je,html as Y}from"@node-projects/base-custom-webcomponent";import{ContextMenu as K,copyTextToClipboard as Q,getTextFromClipboard as Z,PropertiesHelper as ze}from"@node-projects/web-component-designer";var L=class l extends We{static style=je`
+        :host {
+            display: grid;
+            grid-template-columns: 20px 1fr auto;
+            overflow-y: auto;
+            align-content: start;
+            height: 100%;
+        }
+        .rect {
+            width: 7px;
+            height: 7px;
+            border: 1px solid black;
+            justify-self: center;
+            cursor: pointer;
+            align-self: center;
+            white-space: nowrap;
+        }
+        input.mth {
+            width: 100%;
+            box-sizing: border-box;
+        }
+        input::placeholder {
+            font-size: 8px;
+        }
+        a {
+            cursor: pointer;
+            white-space: nowrap;
+        }
+        a:hover {
+            cursor: pointer;
+            text-decoration: underline;
+        }
+        button {
+            cursor: pointer;
+        }`;static template=Y`
+        <template repeat:item="[[this.events]]">
+            <div @click="[[this._ctxMenu(event, item)]]" @contextmenu="[[this._ctxMenu(event, item)]]" class="rect" title="[[this._getScriptType(item)]]" css:background-color="[[this._getScriptTypeColor(item)]]"></div>
+            <a @click="[[this._showContextMenuAssignScript(event, item, false)]]" @contextmenu="[[this._ctxMenu(event, item)]]" title="[[item.name]]">[[item.name]]</a>
+            <div>[[this._createControlsForScript(item)]]</div>
+        </template>
+        <span style="grid-column: 1 / span 3; margin-top: 8px; margin-left: 3px;">add event:</span>
+        <input id="addEventInput" style="grid-column: 1 / span 3; margin: 5px;" @keypress="[[this._addEvent(event)]]" type="text">`;static editRowTemplate=Y`
+        <div style="display: flex; justify-content: flex-end;">
+            <input value="[[this._getScriptName(item)]]" @keypress="[[this._changeScriptName(event, item)]]" hidden="[[this._getScriptType(item) !== 'js']]" placeholder="name" title="name" style="min-width: 50px; flex-basis: 30px; flex-grow: 2;" class="mth" type="text">
+            <input value="[[this._getRelativeSignalsPath(item)]]" @keypress="[[this._changeRelativeSignalsPath(event, item)]]" placeholder="relative signals path" title="relative signals path" style="min-width: 50px; flex-basis: 20px; flex-grow: 1;" class="mth" type="text">
+            <button css:background="[[this._hasParameters(item) ? 'lime' : '']]" style="display: flex; padding: 0; flex-grow: 0;" title="parameter" @click="[[this._editParameter(event, item)]]">p</button>
+        </div>`;static scriptTypeColors={js:"purple",blockly:"yellow",script:"lightgreen",empty:"pink"};static is="node-projects-visualization-event-assignment";constructor(){super(),this._restoreCachedInititalValues()}ready(){this._bindingsParse()}_blocklyToolbox;_instanceServiceContainer;_selectionChangedHandler;_selectedItems;_visualizationHandler;_visualizationShell;_scriptCommandsTypeInfo;_propertiesTypeInfo;events;initialize(s,t,e,i,n){this._visualizationHandler=s,this._visualizationShell=t,this._scriptCommandsTypeInfo=e,this._propertiesTypeInfo=i,this._blocklyToolbox=n}set instanceServiceContainer(s){this._instanceServiceContainer=s,this._selectionChangedHandler?.dispose(),this._selectionChangedHandler=this._instanceServiceContainer.selectionService.onSelectionChanged.on(t=>{this.selectedItems=t.selectedElements}),this.selectedItems=this._instanceServiceContainer.selectionService.selectedElements}_createControlsForScript(s){switch(this._getScriptType(s)){case"none":return""}return this.constructor.editRowTemplate.content.cloneNode(!0)}_getScriptName(s){if(this.selectedItems[0].hasAttribute("@"+s.name)){let t=this.selectedItems[0].getAttribute("@"+s.name);if(t[0]==="{"){if(t.includes("name"))return JSON.parse(t).name}else return t}return null}async _changeScriptName(s,t){if(s.key=="Enter"&&this.selectedItems&&this.selectedItems.length&&this.selectedItems[0].hasAttribute("@"+t.name)){let e=s.target.value,i=this.selectedItems[0].getAttribute("@"+t.name);if(i.startsWith("{")){let n=JSON.parse(i);n.name=e,this._selectedItems[0].setAttribute("@"+t.name,JSON.stringify(n))}else this._selectedItems[0].setAttribute("@"+t.name,e)}}_getRelativeSignalsPath(s){if(this.selectedItems[0].hasAttribute("@"+s.name)){let t=this.selectedItems[0].getAttribute("@"+s.name);if(t[0]==="{"&&t.includes("relativeSignalsPath"))return JSON.parse(t).relativeSignalsPath}return null}async _changeRelativeSignalsPath(s,t){if(s.key=="Enter"&&this.selectedItems&&this.selectedItems.length&&this.selectedItems[0].hasAttribute("@"+t.name)){let e=s.target.value,i=this.selectedItems[0].getAttribute("@"+t.name);if(i.startsWith("{")){let n=JSON.parse(i);n.relativeSignalsPath=e,this._selectedItems[0].setAttribute("@"+t.name,JSON.stringify(n))}else{let n={name:i,relativeSignalsPath:e};this._selectedItems[0].setAttribute("@"+t.name,JSON.stringify(n))}}}_hasParameters(s){return this.selectedItems[0].hasAttribute("@"+s.name)?this.selectedItems[0].getAttribute("@"+s.name).includes("parameters"):!1}_getScriptTypeColor(s){let t=this._getScriptType(s);return l.scriptTypeColors[t]??"white"}_getScriptType(s){if(this.selectedItems&&this.selectedItems.length&&this.selectedItems[0].hasAttribute("@"+s.name)){let t=this.selectedItems[0].getAttribute("@"+s.name);if(t.startsWith("{")){let e=JSON.parse(t);return"blocks"in e?"blockly":"commands"in e?"script":"js"}else return t==""?"empty":"js"}return"none"}_getEventMethodname(s){return this.selectedItems.length?this.selectedItems[0].getAttribute("@"+s.name):""}_inputMthName(s,t){let e=s.target;this.selectedItems[0].setAttribute("@"+t.name,e.value)}_ctxMenu(s,t){s.preventDefault();let e=this._getScriptType(t);if(e=="empty")this._showContextMenuAssignScript(s,t,!0);else if(e!="none"){let i=[{title:"remove",action:()=>{this.selectedItems[0].removeAttribute("@"+t.name),this._bindingsRefresh()}},{title:"-"},{title:"copy",action:()=>{Q(this.selectedItems[0].getAttribute("@"+t.name))}},{title:"paste",action:async()=>{this.selectedItems[0].setAttribute("@"+t.name,await Z()),this._bindingsRefresh()}}];K.show(i,s)}else this._showContextMenuAssignScript(s,t,!0)}async _addEvent(s){if(s.key=="Enter"){let t=this._getDomElement("addEventInput");this._selectedItems[0].setAttribute("@"+ze.camelToDashCase(t.value.replaceAll(" ","-")),""),t.value="",this.scrollTop=0,this.refresh()}}_createAssignScriptContextMenu(s,t){let e=[{title:"Simple Script",action:()=>{this._editEvent("script",s,t)}},{title:"Javascript",action:()=>{let n=prompt("name of function ?");n&&(this._selectedItems[0].setAttribute("@"+t.name,n),this.refresh(),this._editEvent("js",null,t))}},{title:"Blockly",action:()=>{this._editBlockly(null,t)}}],i=this._getScriptType(t);return i!="none"&&(e.push({title:"-"}),e.push({title:"remove",action:()=>{this.selectedItems[0].removeAttribute("@"+t.name),this._bindingsRefresh()}})),i!="empty"&&e.push({title:"-"},{title:"copy",action:()=>{Q(this.selectedItems[0].getAttribute("@"+t.name))}},{title:"paste",action:async()=>{this.selectedItems[0].setAttribute("@"+t.name,await Z()),this._bindingsRefresh()}}),e}async _showContextMenuAssignScript(s,t,e){s.preventDefault();let i=this._getScriptType(t);if(i!="none"&&i!="empty"&&!e)this._editEvent(i,s,t);else{let n=this._createAssignScriptContextMenu(s,t);K.show(n,s)}}async _editParameter(s,t){let e=this.selectedItems[0],i=new O,n={};i.title="ParameterEditor for '"+t.name+"' of '"+e.name+"'";let o=e.getAttribute("@"+t.name);if(o&&o[0]=="{")try{n=JSON.parse(o).parameters}catch{}if(i.setParametersObject(n),await this._visualizationShell.openConfirmation(i,{x:100,y:100,width:700,height:500})){let c=i.getParametersObject(),r={name:o,parameters:c};o&&o[0]=="{"&&(r=JSON.parse(o),r.parameters=c),c==null&&delete r.parameters;let u=JSON.stringify(r);e.setAttribute("@"+t.name,u),this._bindingsRefresh()}}async _editBlockly(s,t){let e=this.selectedItems[0],i=new C(this._blocklyToolbox);i.title="Blockly Script for '"+t.name+"' of '"+e.name+"'";let n=e.getAttribute("@"+t.name),o=null,a=null;if(n){let r=JSON.parse(n);o=r.parameters,a=r.relativeSignalsPath,i.load(r)}if(await this._visualizationShell.openConfirmation(i,{x:100,y:100,width:700,height:500})){let r=i.save();o&&(r.parameters=o),a&&(r.relativeSignalsPath=a),e.setAttribute("@"+t.name,JSON.stringify(r)),this._bindingsRefresh()}}async _editJavascript(s,t){}async _editSimpleScript(s,t){let e=this.selectedItems[0],i=e.getAttribute("@"+t.name);if(!i||i.startsWith("{")){let n={commands:[]},o=null,a=null;i&&(n=JSON.parse(i),o=n.parameters,a=n.relativeSignalsPath);let c=new I;if(c.serviceContainer=e.serviceContainer,c.instanceServiceContainer=e.instanceServiceContainer,c.scriptCommandsTypeInfo=this._scriptCommandsTypeInfo,c.propertiesTypeInfo=this._propertiesTypeInfo,c.visualizationShell=this._visualizationShell,c.visualizationHandler=this._visualizationHandler,c.loadScript(n),c.title="Script '"+t.name+"' on "+e.name,await this._visualizationShell.openConfirmation(c,{x:100,y:100,width:600,height:500})){let u=c.getScriptCommands();if(u&&u.length){let g={commands:u};o&&(g.parameters=o),a&&(g.relativeSignalsPath=a);let h=JSON.stringify(g);e.setAttribute("@"+t.name,h),this._bindingsRefresh()}}}}async _editEvent(s,t,e){s=="js"?this._editJavascript(t,e):s=="blockly"?this._editBlockly(t,e):this._editSimpleScript(t,e)}refresh(){this._selectedItems!=null&&this._selectedItems.length?this.events=this._selectedItems[0].serviceContainer.getLastServiceWhere("eventsService",s=>s.isHandledElementFromEventsService(this._selectedItems[0])).getPossibleEvents(this._selectedItems[0]):this.events=[],this._bindingsRefresh()}get selectedItems(){return this._selectedItems}set selectedItems(s){this._selectedItems!=s&&(this._selectedItems=s,this.refresh())}};customElements.define(L.is,L);import{TypedEvent as De,cssFromString as Le}from"@node-projects/base-custom-webcomponent";import{BindingTarget as y}from"@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";import{PropertiesHelper as v}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";var S="bind-prop:",B="bind-attr:",R="bind-class:",V="bind-css:",A="bind-cssvar:",w="bind-content:",F="bind-visible:",Pe="bind(",Me="--tmpBinding_",Ft=/{{(.*)}}/;function z(l){return l.constructor?.elementProperties!=null}function J(l){let s=[],t=[],e="";for(let i=0;i<l.length;i++)l[i]=="{"?(s.push(e),e=""):l[i]=="}"?(t.push(e),e=""):e+=l[i];return s.push(e),{parts:s,signals:t}}function P(l,s){let t=s.split("."),e=l;for(let i of t){if(e==null||typeof e!="object")return;e=e[i]}return e}var H=class{parts;signals;values;unsubscribeTargetValue;cleanupCalls=[];combinedName;disposed;valueChangedCb;visualizationHandler;element;relativeSignalPath;constructor(s,t,e,i,n,o,a,c){this.visualizationHandler=t,this.valueChangedCb=i,this.element=n,this.relativeSignalPath=o,this.parseIndirectBinding(e),this.values=new Array(this.signals.length);for(let r=0;r<this.signals.length;r++){let u=this.signals[r];if(u[0]==="?"&&u[1]==="?"){let d=u.substring(2);if(d.includes(".")){let p=P(a,d);this.handleValueChanged(p,r)}else{this.handleValueChanged(a[d],r);let p=()=>this.handleValueChanged(a[d],r),m=s.getChangedEventName(a,d);a.addEventListener(m,p),this.cleanupCalls.push(()=>a.removeEventListener(m,p))}continue}else if(u[0]==="#"&&u[1]==="#"){let d=u.substring(2);if(d.includes(".")){let p=P(n,d);this.handleValueChanged(p,r)}else{this.handleValueChanged(n[d],r);let p=()=>this.handleValueChanged(n[d],r),m=s.getChangedEventName(n,d);n.addEventListener(m,p),this.cleanupCalls.push(()=>n.removeEventListener(m,p))}continue}else if(u[0]==="\xA7"){let d=u.substring(1),p=c.valueProvider(d,{element:n,relativeSignalPath:o,root:a});p instanceof Promise?p.then(f=>this.handleValueChanged(f,r)):this.handleValueChanged(p,r),c.valueChangedCallbacks||(c.valueChangedCallbacks=new Map);let m=c.valueChangedCallbacks.get(d);m==null&&(m=[],c.valueChangedCallbacks.set(d,m)),m.push(()=>{let f=c.valueProvider(d,{element:n,relativeSignalPath:o,root:a});f instanceof Promise?f.then(x=>this.handleValueChanged(x,r)):this.handleValueChanged(f,r)})}else(u[0]==="?"||u[0]==="#")&&(u.includes(".")?u=P(a,u.substring(1)):u=a[u.substring(1)]);let g=(d,p)=>this.handleValueChanged(p.val,r),h=this.visualizationHandler.subscribeState(u,g);this.cleanupCalls.push(()=>this.visualizationHandler.unsubscribeState(this.signals[r],g,h))}}parseIndirectBinding(s){let{parts:t,signals:e}=J(s);this.parts=t,this.signals=e;for(let i=0;i<e.length;i++)e[i][0]=="."&&(e[i]=this.visualizationHandler.getNormalizedSignalName(e[i],this.relativeSignalPath,this.element))}handleValueChanged(s,t){this.values[t]=s;let e=this.parts[0];for(let i=0;i<this.parts.length-1;i++){let n=this.values[i];if(n==null)return;e+=n+this.parts[i+1]}if(e[0]=="."&&(e=this.visualizationHandler.getNormalizedSignalName(e,this.relativeSignalPath,this.element)),this.combinedName!=e&&(this.unsubscribeTargetValue&&this.visualizationHandler.unsubscribeState(this.combinedName,this.unsubscribeTargetValue[0],this.unsubscribeTargetValue[1]),!this.disposed)){this.combinedName=e;let i=(n,o)=>this.valueChangedCb(o);this.unsubscribeTargetValue=[i,this.visualizationHandler.subscribeState(e,i)]}}dispose(){this.disposed=!0,this.unsubscribeTargetValue&&(this.visualizationHandler.unsubscribeState(this.combinedName,this.unsubscribeTargetValue[0],this.unsubscribeTargetValue[1]),this.unsubscribeTargetValue=null);for(let s=0;s<this.signals.length;s++)this.cleanupCalls[s]()}setState(s){this.disposed||this.visualizationHandler.setState(this.combinedName,s)}},ee=class l{_visualizationHandler;namedConverterCallback;constructor(s){this._visualizationHandler=s}getChangedEventName(s,t){let e=t.indexOf("::");return e>=0?t.substring(e+2):s instanceof HTMLInputElement||s instanceof HTMLSelectElement?"change":z(s)?v.camelToDashCase(t):v.camelToDashCase(t)+"-changed"}parseBinding(s,t,e,i,n){let o=t.substring(n.length);if(i===y.cssvar&&(o="--"+o),!e.startsWith("{")){let c={signal:e,target:i};if(e[0]==="="){if(e=e.substring(1),c.signal=e,e.includes("::")){let r=e.split("::");e=r[0],c.signal=e,c.events=r[1].split(",")}c.twoWay=!0,c.events||(s instanceof HTMLInputElement?c.events=[this.getChangedEventName(s,o)]:s instanceof HTMLSelectElement?c.events=[this.getChangedEventName(s,o)]:z(s)?c.events=[this.getChangedEventName(s,o)]:(c.events=[this.getChangedEventName(s,o)],c.maybeLitElement=!0,c.litEventNames=[this.getChangedEventName(s,o)]))}if(e[0]==="!"&&(c.signal=e.substring(1),c.inverted=!0),c.signal.includes(";")){let r=c.signal.split(";");c.expression=r.pop(),c.signal=r.join(";")}return i===y.cssvar||i===y.class?[l.dotToCamelCase(o),c]:i===y.attribute?[o,c]:[v.dashToCamelCase(o),c]}let a=JSON.parse(e);return a.target=i,a.twoWay&&(a.events==null||a.events.length==0)&&(s instanceof HTMLInputElement?a.events=["change"]:s instanceof HTMLSelectElement?a.events=["change"]:a.events=[this.getChangedEventName(s,o)]),i===y.cssvar||i===y.class?[l.dotToCamelCase(o),a]:i===y.attribute?[o,a]:[v.dashToCamelCase(o),a]}serializeBinding(s,t,e){let i={...e};delete i.type,e.twoWay?e.events!=null&&e.events.length==1&&(s instanceof HTMLInputElement&&e.events?.[0]=="change"||s instanceof HTMLSelectElement&&e.events?.[0]=="change"||z(s)&&e.events?.[0]==t||!z(s)&&e.events?.[0]==t+"-changed")&&delete i.events:(delete i.events,delete i.expressionTwoWay);let n=i.twoWay&&i.events?.length>0?"::"+i.events.join(","):"",o=!1;return(n&&e.expression?.includes("::")||e.expressionTwoWay?.includes("::"))&&(o=!0),e.signal.trim()[0]=="{"&&(o=!0),!o&&e.target==y.property&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?t=="textContent"?[w+"text",(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:t=="innerHTML"?[w+"html",(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:[S+v.camelToDashCase(t),(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!o&&e.target==y.property&&e.expression&&!e.expression.includes(`
+`)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?t=="textContent"?[w+"text",(e.inverted?"!":"")+e.signal+";"+e.expression+n]:t=="innerHTML"?[w+"html",(e.inverted?"!":"")+e.signal+";"+e.expression+n]:[S+v.camelToDashCase(t),(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!o&&e.target==y.attribute&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[B+v.camelToDashCase(t),(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!o&&e.target==y.attribute&&e.expression&&!e.expression.includes(`
+`)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[B+v.camelToDashCase(t),(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!o&&e.target==y.class&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[R+v.camelToDashCase(t),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!o&&e.target==y.class&&e.expression&&!e.expression.includes(`
+`)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[R+v.camelToDashCase(t),(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!o&&e.target==y.css&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[V+v.camelToDashCase(t),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!o&&e.target==y.css&&e.expression&&!e.expression.includes(`
+`)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[V+v.camelToDashCase(t),(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!o&&e.target==y.cssvar&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[A+l.camelToDotCase(t.substring(2)),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!o&&e.target==y.cssvar&&e.expression&&!e.expression.includes(`
+`)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[A+v.camelToDashCase(t),(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?[w+"html",JSON.stringify(i)]:e.target==y.attribute?[B+v.camelToDashCase(t),JSON.stringify(i)]:e.target==y.class?[R+l.camelToDotCase(t),JSON.stringify(i)]:e.target==y.css?[V+v.camelToDashCase(t),JSON.stringify(i)]:e.target==y.cssvar?[A+l.camelToDotCase(t.substring(2)),JSON.stringify(i)]:e.target==y.property&&t=="innerHTML"?[w+"html",JSON.stringify(i)]:e.target==y.property&&t=="textContent"?[w+"text",JSON.stringify(i)]:[S+v.camelToDashCase(t),JSON.stringify(i)])}getBindingAttributeName(s,t,e){return e==y.attribute?B+v.camelToDashCase(t):e==y.class?R+l.camelToDotCase(t):e==y.css?V+v.camelToDashCase(t):e==y.visible?F:e==y.cssvar?A+l.camelToDotCase(t):e==y.property&&t=="innerHTML"?w+"html":e==y.property&&t=="textContent"?w+"text":S+v.camelToDashCase(t)}*getBindings(s){if(s.attributes)for(let t of s.attributes)t.name.startsWith(S)?yield this.parseBinding(s,t.name,t.value,y.property,S):t.name.startsWith(w)?yield this.parseBinding(s,t.name==="bind-content:html"?"bind-prop:inner-h-t-m-l":"bind-prop:text-content",t.value,y.property,S):t.name.startsWith(B)?yield this.parseBinding(s,t.name,t.value,y.attribute,B):t.name.startsWith(R)?yield this.parseBinding(s,t.name,t.value,y.class,R):t.name.startsWith(V)?yield this.parseBinding(s,t.name,t.value,y.css,V):t.name.startsWith(A)?yield this.parseBinding(s,t.name,t.value,y.cssvar,A):t.name.startsWith(F)&&(yield this.parseBinding(s,t.name,t.value,y.visible,F))}applyAllBindings(s,t,e,i){let n=[],o=document.createTreeWalker(s,NodeFilter.SHOW_ELEMENT),a;for(;a=o.nextNode();){let c=this.getBindings(a);for(let r of c)try{let u=this.applyBinding(a,r,t,e,i);if(n.push(u),r[1].maybeLitElement&&a.localName.includes("-")&&!customElements.get(a.localName)){let g=a,h=r;customElements.whenDefined(a.localName).then(()=>{z(g)&&(u(),h[1].events=h[1].litEventNames,n.push(this.applyBinding(g,h,t,e,i)))})}}catch(u){console.warn("error applying binding",a,r,u)}}return n}static#e=0;async parseCssBindings(s,t,e,i){let n=await import("@adobe/css-tools"),o=n.parse(s),a;for(let r of o.stylesheet.rules)if(r.type===n.CssTypes.rule){for(let u of r.declarations)if(u.type===n.CssTypes.declaration&&u.value.includes(Pe)){let g=this.parseCssBinding(u.value,t,e,i);u.value=g[0],a?a.push(...g[1]):a=g[1]}}let c=n.stringify(o,{indent:"",compress:!0});return[Le(c),a]}parseCssBinding(s,t,e,i,n){s=s.trim();let o="",a="",c=!1,r="",u=!1,g=null,h=[];for(let d=0;d<s.length;d++){let p=s[d];if(c)if(u)r+=p;else if(g&&p==="\\")u=!0;else if(p===g)g=null;else if(g===null&&p===")"){let m=l.#e++,f=Me+m,x=[f,{signal:r,target:y.cssvar}];r.startsWith("{")&&(x=JSON.parse(r)),h.push(this.applyBinding(t,x,e,i,n)),o+="var("+f+")",c=!1,r=""}else r+=p;else p==="("?(a!=="bind"?(o+=a,o+=p):(c=!0,s[d+1]==="'"||s[d+1]==='"'?(d++,g=s[d]):g=null),a=""):p===" "||p===","||p==="("||p==="+"||p==="-"||p==="*"||p==="/"?(o+=a+p,a=""):a+=p}return[o+a,h]}applyBinding(s,t,e,i,n){let o=[],a,c=()=>{for(let h of o)this._visualizationHandler.unsubscribeState(h[0],h[1],h[2]);if(a)for(let h of a)h()},r=t[1].signal.split(";"),u=new Array(r.length);for(let h=0;h<r.length;h++){let d=r[h];if(u[h]="__"+h,d.includes(":")){let p=d.split(":");u[h]=p[0],d=p[1],r[h]=d}if(d[0]==="?"){if(i){let p=d.substring(1);if(p[0]=="?")r[h]=p;else{r[h]=i[p],p[0]==="$"&&(p=p.substring(1),r[h]="$"+i[p]);let m=()=>{c(),this.applyBinding(s,t,e,i,n)},f=this.getChangedEventName(i,p);i.addEventListener(f,m),a||(a=[]),a.push(()=>i.removeEventListener(f,m))}}}else if(d[0]==="#"){let p=d.substring(1);if(p[0]=="#")r[h]=p;else{r[h]=i[p],p[0]==="$"&&(p=p.substring(1),r[h]="$"+i[p]);let m=()=>{c(),this.applyBinding(s,t,e,i,n)},f=this.getChangedEventName(s,p);i.addEventListener(f,m),a||(a=[]),a.push(()=>i.removeEventListener(f,m))}}d[0]==="."&&(r[h]=this._visualizationHandler.getNormalizedSignalName(d,e,s))}let g=new Array(r.length);for(let h=0;h<r.length;h++){let d=r[h];if(d[0]==="?"){if(i){let p=d.substring(1),m=()=>{let f=!1;f||(f=!0,this.handleValueChanged(s,t,i[p],g,h,u,!1,e),f=!1)};i.addEventListener(v.camelToDashCase(p)+"-changed",m),a||(a=[]),a.push(()=>i.removeEventListener(v.camelToDashCase(p)+"-changed",m));try{this.handleValueChanged(s,t,i[p],g,h,u,!1,e)}catch(f){console.error(f)}t[1].twoWay&&h==0&&this.addTwoWayBinding(t,s,f=>i[p]=f)}}else if(d[0]==="#"){let p=d.substring(1),m=()=>{let f=!1;f||(f=!0,this.handleValueChanged(s,t,s[p],g,h,u,!1,e),f=!1)};s.addEventListener(v.camelToDashCase(p)+"-changed",m),a||(a=[]),a.push(()=>s.removeEventListener(v.camelToDashCase(p)+"-changed",m));try{this.handleValueChanged(s,t,s[p],g,h,u,!1,e)}catch(f){console.error(f)}t[1].twoWay&&h==0&&this.addTwoWayBinding(t,s,f=>s[p]=f)}else if(d[0]==="$"){let p=d.substring(1);p[0]==="."&&(p=this._visualizationHandler.getNormalizedSignalName(p,e,s)),this._visualizationHandler.getObject(p).then(m=>{this.handleValueChanged(s,t,m,g,h,u,!0,e)})}else if(d[0]==="\xA7"){let p=d.substring(1),m=n.valueProvider(p,{element:s,binding:t,relativeSignalPath:e,root:i});m instanceof Promise?m.then(x=>this.handleValueChanged(s,t,x,g,h,u,!0,e)):this.handleValueChanged(s,t,m,g,h,u,!0,e),n.valueChangedCallbacks||(n.valueChangedCallbacks=new Map);let f=n.valueChangedCallbacks.get(p);f==null&&(f=[],n.valueChangedCallbacks.set(p,f)),f.push(()=>{let x=n.valueProvider(p,{element:s,binding:t,relativeSignalPath:e,root:i});x instanceof Promise?x.then(ue=>this.handleValueChanged(s,t,ue,g,h,u,!0,e)):this.handleValueChanged(s,t,x,g,h,u,!0,e)})}else if(d.includes("{")){let p=new H(this,this._visualizationHandler,d,m=>this.handleValueChanged(s,t,m.val,g,h,u,!1,e),s,e,i,n);a||(a=[]),a.push(()=>p.dispose()),t[1].twoWay&&h==0&&this.addTwoWayBinding(t,s,m=>p.setState(m))}else if(t[1].historic)if(t[1].historic.reloadInterval){let p={timerId:-1},m=async()=>{let f=await this._visualizationHandler.getHistoricData(d,t[1].historic);this.handleValueChanged(s,t,f?.values,g,h,u,!0,e),p.timerId!==null&&(p.timerId=setTimeout(m,t[1].historic.reloadInterval))};m(),a||(a=[]),a.push(()=>{p.timerId>0&&clearTimeout(p.timerId),p.timerId=null})}else this._visualizationHandler.getHistoricData(d,t[1].historic).then(p=>this.handleValueChanged(s,t,p?.values,g,h,u,!0,e));else{let p=(m,f)=>this.handleValueChanged(s,t,f.val,g,h,u,!1,e);o.push([d,p,this._visualizationHandler.subscribeState(d,p)]),this._visualizationHandler.getState(d).then(m=>this.handleValueChanged(s,t,m?.val,g,h,u,!1,e)),t[1].twoWay&&h==0&&this.addTwoWayBinding(t,s,m=>this._visualizationHandler.setState(d,m))}}return c}addTwoWayBinding(s,t,e){s[1].expressionTwoWay&&(s[1].compiledExpressionTwoWay||(s[1].expressionTwoWay.includes("return ")?s[1].compiledExpressionTwoWay=new Function(["value"],s[1].expressionTwoWay):s[1].compiledExpressionTwoWay=new Function(["value"],"return "+s[1].expressionTwoWay)));for(let i of s[1].events){let n=t[i];n instanceof De?n.on(()=>{let o;s[1].target==y.attribute?o=t.getAttribute(s[0]):o=t[s[0]],o=l.parseValueWithType(o,s),s[1].compiledExpressionTwoWay&&(o=s[1].compiledExpressionTwoWay(o)),e(o)}):t.addEventListener(i,o=>{let a;s[1].target==y.attribute?a=t.getAttribute(s[0]):a=t[s[0]],a=l.parseValueWithType(a,s),s[1].compiledExpressionTwoWay&&(a=s[1].compiledExpressionTwoWay(a)),e(a)})}}static parseValueWithType(s,t){if(t[1].type)switch(t[1].type){case"number":return parseFloat(s);case"boolean":return s===!0||s==="true"||!!parseInt(s);case"string":return s?.toString();case"integer":return parseInt(s)}return s}handleValueChanged(s,t,e,i,n,o,a,c){let r=e;if(!a&&n==0&&(r=l.parseValueWithType(r,t)),i[n]=r,t[1].expression&&(t[1].compiledExpression||(o.push("__res"),t[1].expression.includes("return ")?t[1].compiledExpression=new Function(o,t[1].expression):t[1].compiledExpression=new Function(o,"return "+t[1].expression)),r=t[1].compiledExpression(...i),i[o.length-1]=r),t[1].converter)if(typeof t[1].converter=="string")r=this.namedConverterCallback(t[1].converter,r,s,t);else{let u=r!=null?r.toString():r;if(u in t[1].converter){let g=t[1].converter[u];typeof g=="string"?r=new Function(o,"return `"+t[1].converter[u]+"`")(...i):r=g}else{let g=!1,h=parseFloat(r);for(let d in t[1].converter)if(d.length>2&&d[0]===">"&&d[1]==="="){let p=parseFloat(d.substring(2));if(h>=p){let m=t[1].converter[d];typeof m=="string"?r=new Function(o,"return `"+t[1].converter[d]+"`")(...i):r=m,g=!0;break}}else if(d.length>2&&d[0]==="<"&&d[1]==="="){let p=parseFloat(d.substring(2));if(h<=p){let m=t[1].converter[d];typeof m=="string"?r=new Function(o,"return `"+t[1].converter[d]+"`")(...i):r=m,g=!0;break}}else if(d.length>1&&d[0]===">"){let p=parseFloat(d.substring(1));if(h>p){let m=t[1].converter[d];typeof m=="string"?r=new Function(o,"return `"+t[1].converter[d]+"`")(...i):r=m,g=!0;break}}else if(d.length>1&&d[0]==="<"){let p=parseFloat(d.substring(1));if(h<p){let m=t[1].converter[d];typeof m=="string"?r=new Function(o,"return `"+t[1].converter[d]+"`")(...i):r=m,g=!0;break}}else{let p=d.split("-");if(p.length>1&&(p[0]===""||h>=parseFloat(p[0]))&&(p[1]===""||parseFloat(p[1])>=h)){let m=t[1].converter[d];typeof m=="string"?r=new Function(o,"return `"+t[1].converter[d]+"`")(...i):r=m,g=!0;break}}!g&&t[1].converterDefault!==void 0&&(r=t[1].converterDefault)}}if(t[1].inverted&&(r=!r),t[1].writeBackSignal){let u=t[1].writeBackSignal;u[0]==="."&&(u=c+u),this._visualizationHandler.setState(u,r,!0)}t[1].target==y.property?s[t[0]]=r:t[1].target==y.attribute?s.setAttribute(t[0],r):t[1].target==y.css?s.style[t[0]]=r:t[1].target==y.cssvar?s.style.setProperty(t[0],r):t[1].target==y.class?r?s.classList.add(t[0]):s.classList.remove(t[0]):t[1].target==y.visible&&(s.style.visibility=r?"":"collapse")}static camelToDotCase(s){return s.replace(/([A-Z])/g,t=>`.${t[0].toLowerCase()}`)}static dotToCamelCase(s){return s.replace(/\.([a-z])/g,t=>t[1].toUpperCase())}};var te=class{name;relativeSignalsPath;commands;parameters};import{deepValue as _,setDeepValue as se,sleep as Fe}from"@node-projects/web-component-designer/dist/elements/helper/Helper.js";import W from"long";var ie=class{_visualizationHandler;_subscriptionCallback=()=>{};constructor(l){this._visualizationHandler=l}async execute(l,s){for(let t=0;t<l.length;t++){let e=l[t];if(e.type=="Exit")break;if(e.type=="Goto"){let i=await this.getValue(e.label,s);if(t=l.findIndex(n=>n.type=="Label"&&n.label==i),t<0)break}else if(e.type=="Condition"){let i=await this.getValue(e.value1,s),n=await this.getValue(e.value2,s),o=await this.getValue(e.comparisonType,s),a=!1;switch(o){case"==null":a=i==null;break;case"!=null":a=i!=null;break;case"==true":a=i==!0;break;case"==false":a=i==!1;break;case"==":a=i==n;break;case"!=":a=i!=n;break;case">":a=i>n;break;case"<":a=i<n;break;case">=":a=i>=n;break;case"<=":a=i<=n;break;case"&&":a=i&&n;break;case"||":a=i||n;break}if(a){await this.runExternalScript(await this.getValue(e.trueScriptName,s),await this.getValue(e.trueScriptType,s));let c=await this.getValue(e.trueGotoLabel,s);if(c&&(t=l.findIndex(r=>r.type=="Label"&&r.label==c),t<0))break}else{await this.runExternalScript(await this.getValue(e.falseScriptName,s),await this.getValue(e.falseScriptType,s));let c=await this.getValue(e.falseGotoLabel,s);if(c&&(t=l.findIndex(r=>r.type=="Label"&&r.label==c),t<0))break}}else await this.runScriptCommand(e,s)}}async getValueFromTarget(l,s,t){return l==="property"?_(t.root,s):l==="elementProperty"?_(t.element,s):(await this._visualizationHandler.getState(this.getSignalName(s,t)))?.val}async setValueOnTarget(l,s,t,e){l==="property"?se(t.root,s,e):l==="elementProperty"?se(t.element,s,e):await this._visualizationHandler.setState(this.getSignalName(s,t),e)}async runExternalScript(l,s){}async runScriptCommand(command,context){switch(command.type){case"Comment":case"Label":case"Condition":case"Goto":case"Exit":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 Fe(l);break}case"Console":{let l=await this.getValue(command.target??"log",context),s=await this.getValue(command.message,context);console[l](s);break}case"ToggleSignalValue":{let l=await this.getValue(command.signal,context),s=await this.getValue(command.target,context),t=await this.getValueFromTarget(s,l,context);await this._visualizationHandler.setState(this.getSignalName(l,context),!t);break}case"ToggleSignalValueThroughList":{let l=await this.getValue(command.valueList,context),s=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,s,context),i=l.indexOf(e)+1;i>=l.length&&(i=0);let n=l[i];await this._visualizationHandler.setState(this.getSignalName(s,context),n);break}case"SetSignalValue":{let l=await this.getValue(command.signal,context),s=await this.getValue(command.target,context);await this.setValueOnTarget(s,l,context,await this.getValue(command.value,context));break}case"IncrementSignalValue":{let l=await this.getValue(command.signal,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,l,context)+await this.getValue(command.value,context);await this.setValueOnTarget(s,l,context,e);break}case"DecrementSignalValue":{let l=await this.getValue(command.signal,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,l,context)-await this.getValue(command.value,context);await this.setValueOnTarget(s,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),s=await this.getValue(command.bitNumber??0,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,l,context),i=W.fromNumber(1).shiftLeft(s),n=W.fromNumber(e).or(i).toNumber();await this.setValueOnTarget(t,l,context,n);break}case"ClearBitInSignal":{let l=await this.getValue(command.signal,context),s=await this.getValue(command.bitNumber??0,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,l,context),i=W.fromNumber(1).shiftLeft(s);i.negate();let n=W.fromNumber(e).and(i).toNumber();await this.setValueOnTarget(t,l,context,n);break}case"ToggleBitInSignal":{let l=await this.getValue(command.signal,context),s=await this.getValue(command.bitNumber??0,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,l,context),i=W.fromNumber(1).shiftLeft(s),n=W.fromNumber(e).xor(i).toNumber();await this.setValueOnTarget(t,l,context,n);break}case"Javascript":{let l=await this.getValue(command.script,context),s=context;s.shadowRoot=context.element.getRootNode(),s.instance=context.shadowRoot.host,command.compiledScript||(command.compiledScript=new Function("context",l)),command.compiledScript(s);break}case"SetElementProperty":{command=N.upgradeSetElementProperty(command);let l=await this.getValue(command.name,context);l===""&&(l=null);let s=await this.getValue(command.value,context),t=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),o=await this.getValue(command.mode??"toggle",context),a=this.getTargetFromTargetSelector(context,i,t,n);for(let c of a)e=="attribute"?c.setAttribute(l,s):e=="property"?c[l]=s:e=="css"?c.style[l]=s:e=="class"&&(o==="toggle"?c.classList.toggle(l??s):o==="remove"?c.classList.remove(l??s):c.classList.add(l??s));break}case"SubscribeSignal":{let l=await this.getValue(command.signal,context);if(await this.getValue(command.oneTime,context)){let t=()=>{this._visualizationHandler.unsubscribeState(l,t,null)};this._visualizationHandler.subscribeState(l,t)}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),s=await this.getValue(command.scriptType,context);this.runExternalScript(l,s);break}case"ShowMessageBox":{let l=null,s=await this.getValue(command.buttons,context);if(s=="ok"){let e=await this.getValue(command.message,context);alert(e),l=1}else if(s=="yesNo"){let e=await this.getValue(command.message,context);confirm(e)?l=1:l=2}let t=await this.getValue(command.resultSignal,context);t&&this._visualizationHandler.setState(t,l);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}}}getTarget(l,s,t){if(s==="container"){let e=l.element.getRootNode().host;for(let i=0;i<(t??0);i++)e=e.getRootNode().host;return e}else if(s==="element"){let e=l.element;for(let i=0;i<(t??0);i++)e=e.parentElement;return e}return null}getTargetFromTargetSelector(l,s,t,e){let i=this.getTarget(l,s,t),n=[i];return e&&(s==="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 _(outerContext.root,value.name);case"elementProperty":return _(outerContext.element,value.name);case"signal":return(await this._visualizationHandler.getState(this.getSignalName(value.name,outerContext)))?.val;case"signalInProperty":{let l=_(outerContext.root,value.name);return(await this._visualizationHandler.getState(this.getSignalName(l,outerContext)))?.val}case"event":{let l=outerContext.event;return value.name&&(l=_(l,value.name)),l}case"parameter":return outerContext.parameters[value.name];case"context":return _(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 s=await this.parseStringWithValues(l,outerContext);return(await this._visualizationHandler.getState(this.getSignalName(s,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,s){let t=J(l),e=await Promise.all(t.signals.map(n=>this.getStateOrFieldOrParameter(this.getSignalName(n,s),s))),i=t.parts[0];for(let n=0;n<t.parts.length-1;n++){let o=e[n];typeof o=="object"&&(o=o.val),o==null&&(o=""),i+=o+t.parts[n+1]}return i}getSignalName(l,s){return l[0]==="."?s.relativeSignalsPath+l:l}createScriptContext(l,s,t,e,i){return{root:l,event:s,element:t,parameters:e,relativeSignalsPath:i}}async assignAllScripts(l,s,t,e,i,n,o,a){let c=t.querySelectorAll("*");n??=this.createScriptContext;let r=null;if(s)try{r=await import(URL.createObjectURL(new Blob([s],{type:"application/javascript"}))),a?a(r):r.init&&r.init(e,t)}catch(u){console.error("error parsing javascript - "+l,u)}for(let u of c)for(let g of u.attributes)if(g.name[0]=="@")try{let h=g.name.substring(1),d=g.value.trim();if(d[0]=="{"){let p=JSON.parse(d);if("commands"in p)u.addEventListener(h,m=>this.execute(p.commands,n(e,m,u,p.parameters,p.relativeSignalsPath)));else if("blocks"in p){let m=null;u.addEventListener(h,async f=>{m||(m=await X(p)),m(f,t,p.parameters,p.relativeSignalsPath??"",i,n(e,f,u,p.parameters,p.relativeSignalsPath))})}else if(o)o(u,h,p);else if("name"in p){let m=p.name;u.addEventListener(h,f=>{r[m]?r[m](f,u,t,e,p.parameters):console.warn("javascript function named: "+m+' not found, maybe missing a "export" ?')})}}else u.addEventListener(h,p=>{r[d]?r[d](p,u,t,e):console.warn("javascript function named: "+d+' not found, maybe missing a "export" ?')})}catch{console.warn("error assigning script",u,g)}return r}};import{OverlayLayer as He,DesignItem as T,InsertAction as Je,BindingTarget as k,PropertyType as M}from"@node-projects/web-component-designer";var ae=class{constructor(s,t){this._bindingsHelper=s,this._visualizationHandler=t}_bindingsHelper;_visualizationHandler;rectMap=new Map;rect;dragEnter(s,t,e){let i=T.GetDesignItem(e);if(i&&!i.isRootItem){let n=s.getNormalizedElementCoordinates(e);this.rect=s.overlayLayer.drawRect("IobrokerWebuiBindableObjectDragDropService",n.x,n.y,n.width,n.height,"",null,He.Background),this.rect.style.fill="#ff0000",this.rect.style.opacity="0.3",this.rectMap.set(e,this.rect)}}dragLeave(s,t,e){let i=T.GetDesignItem(e);if(i&&!i.isRootItem){let n=this.rectMap.get(e);s.overlayLayer.removeOverlay(n),this.rectMap.delete(e)}}dragOver(s,t,e){return"copy"}async drop(s,t,e,i){for(let c of this.rectMap.values())s.overlayLayer.removeOverlay(c);this.rectMap.clear();let n=T.GetDesignItem(i),o=await this._visualizationHandler.getObject(e.fullName),a=this._visualizationHandler.getSignalInformation(o);if(n&&!n.isRootItem)if(i instanceof HTMLInputElement){let c={signal:e.fullName,target:k.property},r=this._bindingsHelper.serializeBinding(i,i.type=="checkbox"?"checked":"value",c);n.setAttribute(r[0],r[1])}else{let c={signal:e.fullName,target:k.content},r=this._bindingsHelper.serializeBinding(i,null,c);n.setAttribute(r[0],r[1])}else{let c=s.getNormalizedEventCoordinates(t),r,u,g=await this._visualizationHandler.getState(e.fullName);if(a.role==="url"&&typeof g?.val=="string")if(g.val.endsWith("jpg")||g.val.endsWith("jpeg")||g.val.endsWith("png")||g.val.endsWith("gif")||g.val.endsWith("svg")){let h=document.createElement("img");r=T.createDesignItemFromInstance(h,s.serviceContainer,s.instanceServiceContainer),u=r.openGroup("Insert");let d={signal:e.fullName,target:k.property},p=this._bindingsHelper.serializeBinding(h,"src",d);r.setAttribute(p[0],p[1]),r.element.src=g.val}else if(g.val.endsWith("mp4")){let h=document.createElement("video");r=T.createDesignItemFromInstance(h,s.serviceContainer,s.instanceServiceContainer),u=r.openGroup("Insert");let d={signal:e.fullName,target:k.property},p=this._bindingsHelper.serializeBinding(h,"src",d);r.setAttribute(p[0],p[1]),r.element.src=g.val}else{let h=document.createElement("iframe");r=T.createDesignItemFromInstance(h,s.serviceContainer,s.instanceServiceContainer),u=r.openGroup("Insert");let d={signal:e.fullName,target:k.property},p=this._bindingsHelper.serializeBinding(h,"src",d);r.setAttribute(p[0],p[1]),r.element.src=g.val}if(!r){let h=document.createElement("input");r=T.createDesignItemFromInstance(h,s.serviceContainer,s.instanceServiceContainer),u=r.openGroup("Insert");let d=a.writeable!==!1,p={signal:e.fullName,target:k.property,twoWay:d},m=this._bindingsHelper.serializeBinding(h,"value",p);a.type==="boolean"?(m=this._bindingsHelper.serializeBinding(h,"checked",p),r.setAttribute("type","checkbox")):a.role=="date"?(p.twoWay=d,m=this._bindingsHelper.serializeBinding(h,"value-as-number",p),r.setAttribute("type","date"),r.setAttribute("readonly","")):a.role=="datetime"&&(p.twoWay=d,m=this._bindingsHelper.serializeBinding(h,"value-as-number",p),r.setAttribute("type","datetime-local"),r.setAttribute("readonly","")),r.setAttribute(m[0],m[1])}r.setStyle("position","absolute"),r.setStyle("left",c.x+"px"),r.setStyle("top",c.y+"px"),s.instanceServiceContainer.undoService.execute(new Je(s.rootDesignItem,s.rootDesignItem.childCount,r)),u.commit(),requestAnimationFrame(()=>s.instanceServiceContainer.selectionService.setSelectedElements([r]))}}dragOverOnProperty(s,t,e){return"copy"}dropOnProperty(s,t,e,i){if(t.type=="signal"){t.service.setValue(i,t,e.fullName);return}let n={signal:e.fullName,target:k.property};t.propertyType==M.attribute&&(n.target=k.attribute),t.propertyType==M.cssValue&&(n.target=k.css),n.signal=e.fullName,n.twoWay=t.propertyType==M.property||t.propertyType==M.propertyAndAttribute;let o=i[0].openGroup("drop binding");for(let a of i){let c=this._bindingsHelper.serializeBinding(a.element,t.name,n);a.setAttribute(c[0],c[1])}o.commit()}};import{BindingMode as U,BindingTarget as ne,PropertiesHelper as Ue}from"@node-projects/web-component-designer";var re=class l{constructor(s){this._bindingsHelper=s}_bindingsHelper;static type="visualization-binding";getBindings(s){return Array.from(this._bindingsHelper.getBindings(s.element)).map(e=>({targetName:e[1].target===ne.css||e[1].target===ne.attribute?Ue.camelToDashCase(e[0]):e[0],target:e[1].target,mode:e[1].twoWay?U.twoWay:U.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(s,t){let e={signal:t.bindableObjectNames.join(";"),target:t.target};e.inverted=t.invert,e.twoWay=t.mode==U.twoWay,e.expression=t.expression,e.expressionTwoWay=t.expressionTwoWay,e.historic=t.historic,e.type=t.type,e.converter=t.converters,e.target=t.target,e.events=t.changedEvents;let i=this._bindingsHelper.serializeBinding(s.element,t.targetName,e),n=s.openGroup("edit_binding");return s.setAttribute(i[0],i[1]),n.commit(),!0}clearBinding(s,t,e){let i=this._bindingsHelper.getBindingAttributeName(s.element,t,e);return s.removeAttribute(i),!0}};var le=class{getRefactorings(s){let t=[];for(let e of s){let i=e.serviceContainer.bindingService.getBindings(e);if(i)for(let n of i)for(let o of n.bindableObjectNames){let a="signal",c="";if(o.includes(":")){let r=o.split(":")[0],u=o.substring(r.length+1);u.startsWith("?")&&(u=u.substring(1),c="?",a="property",u.startsWith("?")&&(u=u.substring(1),c="??")),t.push({service:this,name:u,itemType:a,designItem:e,type:"binding",sourceObject:n,display:n.target+"/"+n.targetName+" - "+r+":",shortName:r,prefix:c})}else o.startsWith("?")&&(o=o.substring(1),c="?",a="property",o.startsWith("?")&&(o=o.substring(1),c="??")),t.push({service:this,name:o,itemType:a,designItem:e,type:"binding",sourceObject:n,display:n.target+"/"+n.targetName,prefix:c})}}return t}refactor(s,t,e){let i=s.sourceObject;s.shortName?i.bindableObjectNames=i.bindableObjectNames.map(n=>n==s.shortName+":"+s.prefix+t?s.shortName+":"+s.prefix+e:n):i.bindableObjectNames=i.bindableObjectNames.map(n=>n==s.prefix+t?s.prefix+e:n),s.designItem.serviceContainer.bindingService.setBinding(s.designItem,i)}};var oe=class{dragOverOnProperty(s,t,e){return"copy"}dropOnProperty(s,t,e,i){t.service.setValue(i,t,e.text)}};import{BindingTarget as b}from"@node-projects/web-component-designer";var ce=class{getRefactorings(s){let t=[];for(let e of s)for(let i of e.attributes())if(i[0][0]=="@"){let n=i[1];if(n[0]=="{"){let o=JSON.parse(n);if("commands"in o)for(let a of o.commands){for(let c in a){let r=a[c];if(r!=null&&typeof r=="object"){let u=r;if(u.source==="signal")t.push({name:u.name,itemType:"signal",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+c+"[signal]",refactor:g=>u.name=g});else if(u.source==="property")t.push({name:u.name,itemType:"property",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+c+"[property]",refactor:g=>u.name=g});else if(u.source==="complexString")for(let g of u.name.matchAll(/\{(.*?)\}/g)){let h=g[0],d=g[1];if(d[0]==="?"){let p="?";d=d.substring(1),d[0]==="?"&&(p="??",d=d.substring(1)),t.push({name:d,itemType:"property",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+c+"[complexString]->property",refactor:m=>u.name=u.name.replace(h,"{"+p+m+"}")})}else t.push({name:d,itemType:"signal",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+c+"[complexString]->signal",refactor:p=>u.name=u.name.replace(h,"{"+p+"}")})}}}switch(a.type){case"SetSignalValue":a.signal&&typeof a.signal=="string"&&t.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.signal=c});break;case"ToggleSignalValue":a.signal&&typeof a.signal=="string"&&t.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.signal=c});break;case"IncrementSignalValue":a.signal&&typeof a.signal=="string"&&t.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.signal=c});break;case"DecrementSignalValue":a.signal&&typeof a.signal=="string"&&t.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.signal=c});break;case"SetBitInSignal":a.signal&&typeof a.signal=="string"&&t.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.signal=c});break;case"ClearBitInSignal":a.signal&&typeof a.signal=="string"&&t.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.signal=c});break;case"ToggleBitInSignal":a.signal&&typeof a.signal=="string"&&t.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.signal=c});break;case"OpenScreen":a.screen&&typeof a.screen=="string"&&t.push({name:a.screen,itemType:"screen",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.screen=c});break;case"OpenDialog":a.screen&&typeof a.screen=="string"&&t.push({name:a.screen,itemType:"screen",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.screen=c});break;case"CalculateSignalValue":a.targetSignal&&typeof a.targetSignal=="string"&&t.push({name:a.targetSignal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/targetSignal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.targetSignal=c});break;case"SubscribeSignal":a.signal&&typeof a.signal=="string"&&t.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.signal=c});break;case"UnsubscribeSignal":a.signal&&typeof a.signal=="string"&&t.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.signal=c});break;case"ShowMessageBox":a.resultSignal&&typeof a.resultSignal=="string"&&t.push({name:a.resultSignal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/resultSignal",service:this,designItem:e,type:"script",sourceObject:o,refactor:c=>a.resultSignal=c});break}}else"blocks"in o;if("parameters"in o)for(let a in o.parameters)typeof o.parameters[a]=="string"&&t.push({name:o.parameters[a],itemType:"parameter",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:i[0].substring(1)+"/parameters/"+a,refactor:c=>o.parameters[a]=c})}}return t}refactor(s,t,e){s.refactor(e);let i=JSON.stringify(s.sourceObject);s.designItem.setAttribute(s.targetName,i)}};import{BasePropertyEditor as Xe}from"@node-projects/web-component-designer";var pe=class extends Xe{_ip;_container;constructor(s,t){super(s),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=t.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 t.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(s,t){t==null?this._ip.value="":this._ip.value=t}};export{ae as BindableObjectDragDropService,D as BindingsEditor,E as BindingsEditorHistoric,ee as BindingsHelper,C as BlocklyScriptEditor,L as EventAssignment,O as ParameterEditor,oe as PropertyGridDragDropService,te as Script,ce as ScriptRefactorService,ie as ScriptSystem,pe as SignalPropertyEditor,I as SimpleScriptEditor,le as VisualizationBindingsRefactorService,re as VisualizationBindingsService,j as VisualizationPropertyGrid,B as bindingPrefixAttribute,R as bindingPrefixClass,w as bindingPrefixContent,V as bindingPrefixCss,A as bindingPrefixCssVar,Pe as bindingPrefixInsideCss,Me as bindingPrefixInsideCssVarName,S as bindingPrefixProperty,F as bindingPrefixVisible,Ft as bindingsInCssRegex,X as generateEventCodeFromBlockly,P as getNestedProperty,z as isLit,J as parseBindingString};
+//!varname => inverted

package/dist/interfaces/VisualizationBinding.d.ts

@@ -7,6 +7,7 @@ export interface VisualizationBinding {
     events?: string[];
     target: BindingTarget;
     converter?: Record<string, any>;
+    converterDefault?: any;
     expression?: string;
     expressionTwoWay?: string;
     compiledExpression?: Function;

package/dist/scripting/ScriptCommands.d.ts

@@ -116,6 +116,10 @@ export interface ToggleSignalValue {
 }
 export interface ToggleSignalValueThroughList {
     type: 'ToggleSignalValueThroughList';
+    /**
+    * List of values wich can be toggled through
+    * @TJS-format collection
+    */
     valueList: (string | number | boolean)[];
     /**
      * Name of the signal

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "web-component-designer addon for visualizations",
   "name": "@node-projects/web-component-designer-visualization-addons",
-  "version": "0.1.132",
+  "version": "0.1.134",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",
@@ -10,7 +10,8 @@
     "tsc": "tsc",
     "build": "tsc",
     "link": "npm link",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build && npm run bundle",
+    "bundle": "esbuild ./dist/index.js --format=esm --minify --external:@adobe/* --external:@blockly/* --external:blockly --external:long --external:wunderbaum --external:@node-projects/* --platform=neutral --bundle --outfile=./dist/index-min.js"
   },
   "dependencies": {
     "@adobe/css-tools": ">=4.4.0",
@@ -23,6 +24,9 @@
     "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.29",
     "blockly": ">=11.1.1",
     "long": ">=5.2.3"
+  },
+   "devDependencies": {
+    "esbuild": "^0.25.10"
   },
   "repository": {
     "type": "git",