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

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.d.ts

@@ -2,7 +2,13 @@ import { VisualizationBinding } from "../interfaces/VisualizationBinding.js";
 import { State, VisualizationHandler } from "../interfaces/VisualizationHandler.js";
 import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
 export type SpecialValueHandler = {
-    valueProvider: (propertyName: string) => any;
+    valueProvider: (propertyName: string, context: {
+        element: Element;
+        binding: namedBinding;
+        relativeSignalPath: string;
+        root: HTMLElement;
+        [key: string]: any;
+    }) => any;
     valueChangedCallbacks: Map<string, (() => void)[]>;
 };
 export declare const bindingPrefixProperty = "bind-prop:";

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] === '.') {
@@ -622,7 +675,7 @@ export class BindingsHelper {
             }
             else if (s[0] === '§') {
                 const mS = s.substring(1);
-                const value = specialValueHandler.valueProvider(mS);
+                const value = specialValueHandler.valueProvider(mS, { element, binding, relativeSignalPath, root });
                 this.handleValueChanged(element, binding, value, valuesObject, i, signalVars, true, relativeSignalPath);
                 if (!specialValueHandler.valueChangedCallbacks)
                     specialValueHandler.valueChangedCallbacks = new Map();
@@ -632,7 +685,7 @@ export class BindingsHelper {
                     specialValueHandler.valueChangedCallbacks.set(mS, changeList);
                 }
                 changeList.push(() => {
-                    const value = specialValueHandler.valueProvider(mS);
+                    const value = specialValueHandler.valueProvider(mS, { element, binding, relativeSignalPath, root });
                     this.handleValueChanged(element, binding, value, valuesObject, i, signalVars, true, relativeSignalPath);
                 });
             }

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