@node-projects/web-component-designer-visualization-addons 0.1.8 → 0.1.10

package/dist/helpers/BindingsHelper.d.ts

@@ -10,6 +10,7 @@ export declare const bindingPrefixContent = "bind-content:";
 export declare const bindingsInCssRegex: RegExp;
 export type namedBinding = [name: string, binding: VisualizationBinding];
 export declare function isLit(element: Element): boolean;
+export declare function getChangeEventName(element: Element, propertyName: string): string;
 export declare function parseBindingString(id: string): {
     parts: string[];
     signals: string[];

package/dist/helpers/BindingsHelper.js

@@ -13,6 +13,11 @@ export function isLit(element) {
     //@ts-ignore
     return element.constructor?.elementProperties != null;
 }
+export function getChangeEventName(element, propertyName) {
+    if (isLit(element))
+        return propertyName;
+    return propertyName + '-changed';
+}
 export function parseBindingString(id) {
     let parts = [];
     let signals = [];
@@ -157,12 +162,7 @@ export class BindingsHelper {
             else if (element instanceof HTMLSelectElement)
                 binding.events = ['change'];
             else {
-                if (isLit(element)) {
-                    binding.events = [propname];
-                }
-                else {
-                    binding.events = [propname + '-changed'];
-                }
+                binding.events = [getChangeEventName(element, propname)];
             }
         }
         if (bindingTarget === BindingTarget.cssvar || bindingTarget === BindingTarget.class)
@@ -393,6 +393,18 @@ export class BindingsHelper {
         return retVal;
     }
     applyBinding(element, binding, relativeSignalPath, root) {
+        let unsubscribeList = [];
+        let cleanupCalls;
+        const cleanUp = () => {
+            for (const u of unsubscribeList) {
+                this._visualizationHandler.unsubscribeState(u[0], u[1]);
+            }
+            if (cleanupCalls) {
+                for (let e of cleanupCalls) {
+                    e();
+                }
+            }
+        };
         const signals = binding[1].signal.split(';');
         const signalVars = new Array(signals.length);
         for (let i = 0; i < signals.length; i++) {
@@ -412,6 +424,19 @@ export class BindingsHelper {
                     }
                     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);
+                        };
+                        const evtNm = getChangeEventName(element, PropertiesHelper.camelToDashCase(s));
+                        root.addEventListener(evtNm, evtCallback);
+                        if (!cleanupCalls)
+                            cleanupCalls = [];
+                        cleanupCalls.push(() => root.removeEventListener(evtNm, evtCallback));
                     }
                 }
             }
@@ -419,8 +444,6 @@ export class BindingsHelper {
                 signals[i] = relativeSignalPath + sng;
             }
         }
-        let unsubscribeList = [];
-        let cleanupCalls;
         let valuesObject = new Array(signals.length);
         for (let i = 0; i < signals.length; i++) {
             const s = signals[i];
@@ -491,16 +514,7 @@ export class BindingsHelper {
                 }
             }
         }
-        return () => {
-            for (const u of unsubscribeList) {
-                this._visualizationHandler.unsubscribeState(u[0], u[1]);
-            }
-            if (cleanupCalls) {
-                for (let e of cleanupCalls) {
-                    e();
-                }
-            }
-        };
+        return cleanUp;
     }
     addTwoWayBinding(binding, element, setter) {
         if (binding[1].expressionTwoWay) {

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