@node-projects/web-component-designer-visualization-addons 0.1.7 → 0.1.9

package/dist/helpers/BindingsHelper.d.ts

@@ -1,6 +1,6 @@
 import { VisualizationBinding } from "../interfaces/VisualizationBinding.js";
-import { BindingTarget } from "@node-projects/web-component-designer";
 import { State, VisualizationHandler } from "../interfaces/VisualizationHandler.js";
+import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
 export declare const bindingPrefixProperty = "bind-prop:";
 export declare const bindingPrefixAttribute = "bind-attr:";
 export declare const bindingPrefixClass = "bind-class:";
@@ -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

@@ -1,5 +1,6 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { PropertiesHelper, BindingTarget } from "@node-projects/web-component-designer";
+import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
+import { PropertiesHelper } from "@node-projects/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
 //;,[ are not allowed in bindings, so they could be used for a short form...
 export const bindingPrefixProperty = 'bind-prop:';
 export const bindingPrefixAttribute = 'bind-attr:';
@@ -12,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 = [];
@@ -156,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)
@@ -392,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++) {
@@ -411,6 +424,15 @@ export class BindingsHelper {
                     }
                     else {
                         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));
                     }
                 }
             }
@@ -418,8 +440,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];
@@ -490,16 +510,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/dist/interfaces/IScriptMultiplexValue.d.ts

@@ -3,7 +3,6 @@ export declare class IScriptMultiplexValue {
     * signal - read the value from a IOB object
     * property - read the value from a property of the customControl (not usable in screens)
     * event - read the value of a property of the event object
-    * @TJS-format signal
     */
     source: 'signal' | 'property' | 'event';
     /**

package/dist/interfaces/IScriptMultiplexValue.js

@@ -3,7 +3,6 @@ export class IScriptMultiplexValue {
     * signal - read the value from a IOB object
     * property - read the value from a property of the customControl (not usable in screens)
     * event - read the value of a property of the event object
-    * @TJS-format signal
     */
     source;
     /**

package/dist/scripting/ScriptSystem.js

@@ -1,4 +1,4 @@
-import { sleep } from "@node-projects/web-component-designer";
+import { sleep } from "@node-projects/web-component-designer/dist/elements/helper/Helper.js";
 import { generateEventCodeFromBlockly } from "../blockly/BlocklyJavascriptHelper.js";
 import { parseBindingString } from "../helpers/BindingsHelper.js";
 import Long from 'long';

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