@node-projects/web-component-designer-visualization-addons 0.1.115 → 0.1.116

package/dist/blockly/components/fields/FieldObjectId.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blockly/components/fields/FieldObjectId.js

@@ -0,0 +1,6 @@
+//@ts-ignore
+class FieldObjectId extends Blockly.FieldTextInput {
+}
+//@ts-ignore
+Blockly.FieldObjectId = FieldObjectId;
+export {};

package/dist/components/BindingsEditor.js

@@ -8,7 +8,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 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>
+                            <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 the propertyValue via ##propertyName.&#010;Bind to signal configurations via $objectId.&#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;">

package/dist/helpers/BindingsHelper.js

@@ -65,9 +65,16 @@ export class IndirectSignal {
                 this.handleValueChanged(root[nm.substring(2)], i);
                 continue;
             }
+            else if (nm[0] === '#' && nm[1] === '#') {
+                this.handleValueChanged(element[nm.substring(2)], i);
+                continue;
+            }
             else if (nm[0] === '?') {
                 nm = root[nm.substring(1)];
             }
+            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(nm, cb)]);
         }
@@ -578,6 +585,28 @@ export class BindingsHelper {
                     }
                 }
             }
+            else if (sng[0] === '#') { //access object path in target element        
+                let s = sng.substring(1);
+                if (s[0] == '#') {
+                    signals[i] = s;
+                }
+                else {
+                    signals[i] = root[s];
+                    if (s[0] === '$') {
+                        s = s.substring(1);
+                        signals[i] = '$' + root[s];
+                    }
+                    let evtCallback = () => {
+                        cleanUp();
+                        this.applyBinding(element, binding, relativeSignalPath, root, specialValueHandler);
+                    };
+                    const evtNm = getChangeEventName(element, PropertiesHelper.camelToDashCase(s));
+                    root.addEventListener(evtNm, evtCallback);
+                    if (!cleanupCalls)
+                        cleanupCalls = [];
+                    cleanupCalls.push(() => root.removeEventListener(evtNm, evtCallback));
+                }
+            }
             if (sng[0] === '.') {
                 signals[i] = this._visualizationHandler.getNormalizedSignalName(sng, relativeSignalPath, element);
             }
@@ -611,6 +640,30 @@ export class BindingsHelper {
                     }
                 }
             }
+            else if (s[0] === '#') { //Binding to element properties
+                const nm = s.substring(1);
+                let evtCallback = () => {
+                    let disableValueChanged = false;
+                    if (!disableValueChanged) {
+                        disableValueChanged = true;
+                        this.handleValueChanged(element, binding, element[nm], valuesObject, i, signalVars, false, relativeSignalPath);
+                        disableValueChanged = false;
+                    }
+                };
+                element.addEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback);
+                if (!cleanupCalls)
+                    cleanupCalls = [];
+                cleanupCalls.push(() => element.removeEventListener(PropertiesHelper.camelToDashCase(nm) + '-changed', evtCallback));
+                try {
+                    this.handleValueChanged(element, binding, element[nm], valuesObject, i, signalVars, false, relativeSignalPath);
+                }
+                catch (err) {
+                    console.error(err);
+                }
+                if (binding[1].twoWay && i == 0) {
+                    this.addTwoWayBinding(binding, element, v => element[nm] = v);
+                }
+            }
             else if (s[0] === '$') {
                 let mS = s.substring(1);
                 if (mS[0] === '.') {

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.115",
+  "version": "0.1.116",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",