@node-projects/web-component-designer-visualization-addons 0.1.48 → 0.1.50

package/dist/components/BindingsEditor.js

@@ -9,7 +9,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
                 <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 (;). access iobroker objects in properties via ?propertyName, access the propertyValue via ??propertyName. Bind to ioBroker object via $objectId. You could also use ioBroker signals inside of a Signal Name via {name}">objects</span>
+                            <span style="cursor: pointer;" title="to use multiple objects, seprate them with semicolon (;). access signal objects in properties via ?propertyName, access the propertyValue via ??propertyName. Bind to signal configurations via $objectId. You could also use signals inside of a Signal Name via {name}">objects</span>
                         </div>
                         <div style="display:flex;align-items: flex-end;">
                             <input id="objnm" class="row" value="{{?this.objectNames::change}}" style="flex-grow: 1;">

package/dist/components/EventAssignment.js

@@ -271,10 +271,11 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
         }
     }
     async _editParameter(e, eventItem) {
+        let selectedItem = this.selectedItems[0];
         const edt = new ParameterEditor();
         let existingParameter = {};
-        edt.title = "ParameterEditor for '" + eventItem.name + "' of '" + this._selectedItems[0].name + "'";
-        let data = this._selectedItems[0].getAttribute('@' + eventItem.name);
+        edt.title = "ParameterEditor for '" + eventItem.name + "' of '" + selectedItem.name + "'";
+        let data = selectedItem.getAttribute('@' + eventItem.name);
         if (data && data[0] == '{') {
             try {
                 const parsed = JSON.parse(data);
@@ -297,14 +298,15 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
             if (par == null)
                 delete newObj.parameters;
             const newData = JSON.stringify(newObj);
-            this._selectedItems[0].setAttribute('@' + eventItem.name, newData);
+            selectedItem.setAttribute('@' + eventItem.name, newData);
             this._bindingsRefresh();
         }
     }
     async _editBlockly(e, eventItem) {
+        let selectedItem = this.selectedItems[0];
         const edt = new BlocklyScriptEditor();
-        edt.title = "Blockly Script for '" + eventItem.name + "' of '" + this._selectedItems[0].name + "'";
-        let data = this._selectedItems[0].getAttribute('@' + eventItem.name);
+        edt.title = "Blockly Script for '" + eventItem.name + "' of '" + selectedItem.name + "'";
+        let data = selectedItem.getAttribute('@' + eventItem.name);
         let parameters = null;
         let relativeSignalsPath = null;
         if (data) {
@@ -322,7 +324,7 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
             if (relativeSignalsPath) {
                 blockObj.relativeSignalsPath = relativeSignalsPath;
             }
-            this._selectedItems[0].setAttribute('@' + eventItem.name, JSON.stringify(blockObj));
+            selectedItem.setAttribute('@' + eventItem.name, JSON.stringify(blockObj));
             this._bindingsRefresh();
         }
     }
@@ -330,7 +332,8 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
         // todo ?
     }
     async _editSimpleScript(e, eventItem) {
-        let scriptString = this.selectedItems[0].getAttribute('@' + eventItem.name);
+        let selectedItem = this.selectedItems[0];
+        let scriptString = selectedItem.getAttribute('@' + eventItem.name);
         if (!scriptString || scriptString.startsWith('{')) {
             let script = { commands: [] };
             let parameters = null;
@@ -343,13 +346,13 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
                 relativeSignalsPath = script.relativeSignalsPath;
             }
             let sc = new SimpleScriptEditor();
-            sc.serviceContainer = this.selectedItems[0].serviceContainer;
+            sc.serviceContainer = selectedItem.serviceContainer;
             sc.scriptCommandsTypeInfo = this._scriptCommandsTypeInfo;
             sc.propertiesTypeInfo = this._propertiesTypeInfo;
             sc.visualizationShell = this._visualizationShell;
             sc.visualizationHandler = this._visualizationHandler;
             sc.loadScript(script);
-            sc.title = "Script '" + eventItem.name + "' on " + this.selectedItems[0].name;
+            sc.title = "Script '" + eventItem.name + "' on " + selectedItem.name;
             let res = await this._visualizationShell.openConfirmation(sc, { x: 100, y: 100, width: 600, height: 500 });
             if (res) {
                 let scriptCommands = sc.getScriptCommands();
@@ -364,7 +367,7 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
                         sc.relativeSignalsPath = relativeSignalsPath;
                     }
                     let json = JSON.stringify(sc);
-                    this.selectedItems[0].setAttribute('@' + eventItem.name, json);
+                    selectedItem.setAttribute('@' + eventItem.name, json);
                     this._bindingsRefresh();
                 }
             }

package/dist/components/SimpleScriptEditor.js

@@ -89,7 +89,7 @@ export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend
                 pg.selectedObject = data.value ?? {};
             else
                 pg.selectedObject = {};
-            let res = await this.visualizationShell.openConfirmation(pg, { x: 100, y: 100, width: 300, height: 300, parent: this });
+            let res = await this.visualizationShell.openConfirmation(pg, { x: 100, y: 100, width: 400, height: 400, parent: this });
             if (res) {
                 this._propertygrid.setPropertyValue(data.propertyPath, pg.selectedObject);
                 this._propertygrid.refresh();

package/dist/helpers/BindingsHelper.js

@@ -61,8 +61,16 @@ export class IndirectSignal {
         this.parseIndirectBinding(id);
         this.values = new Array(this.signals.length);
         for (let i = 0; i < this.signals.length; i++) {
+            let nm = this.signals[i];
+            if (nm[0] === '?' && nm[1] === '?') {
+                this.handleValueChanged(element[nm.substring(2)], i);
+                continue;
+            }
+            else if (nm[0] === '?') {
+                nm = element[nm.substring(1)];
+            }
             let cb = (id, value) => this.handleValueChanged(value.val, i);
-            this.unsubscribeList.push([cb, this.visualizationHandler.subscribeState(this.signals[i], cb)]);
+            this.unsubscribeList.push([cb, this.visualizationHandler.subscribeState(nm, cb)]);
         }
     }
     parseIndirectBinding(id) {

package/dist/interfaces/IScriptMultiplexValue.d.ts

@@ -6,10 +6,11 @@ export declare class IScriptMultiplexValue {
     * parameter - a parameter you hand over
     * complexString - a string with signals (contained in {})
     * complexSignal - read the value from a signal wich name is build here (it can contain other signals in {})
+    * not yet implemented: expression - js expression, member access needs to be defined {event, parameter, component/this, signals??? - async? }
     */
-    source: 'signal' | 'property' | 'event' | 'parameter' | 'complexString' | 'complexSignal';
+    source: 'signal' | 'property' | 'event' | 'parameter' | 'complexString' | 'complexSignal' | 'expression';
     /**
-     * Name of the ioBroker object or the property of the component or the parameter of the script
+     * Name of the signal, the property of the component or the parameter of the script
      * or for example in a event : srcElement.value to get the value of a input wich raises the event
      * @TJS-format signal
      */

package/dist/interfaces/IScriptMultiplexValue.js

@@ -6,10 +6,11 @@ export class IScriptMultiplexValue {
     * parameter - a parameter you hand over
     * complexString - a string with signals (contained in {})
     * complexSignal - read the value from a signal wich name is build here (it can contain other signals in {})
+    * not yet implemented: expression - js expression, member access needs to be defined {event, parameter, component/this, signals??? - async? }
     */
     source;
     /**
-     * Name of the ioBroker object or the property of the component or the parameter of the script
+     * Name of the signal, the property of the component or the parameter of the script
      * or for example in a event : srcElement.value to get the value of a input wich raises the event
      * @TJS-format 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.48",
+  "version": "0.1.50",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",