@node-projects/web-component-designer-visualization-addons 0.1.118 → 0.1.120

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 (;).&#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>
+                            <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 a propertyValue of the target 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

@@ -1,5 +1,5 @@
 import { VisualizationBinding } from "../interfaces/VisualizationBinding.js";
-import { State, VisualizationHandler } from "../interfaces/VisualizationHandler.js";
+import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
 import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
 export type SpecialValueHandler = {
     valueProvider: (propertyName: string, context: {
@@ -23,33 +23,15 @@ export declare const bindingPrefixInsideCssVarName = "--tmpBinding_";
 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[];
 };
-export declare class IndirectSignal {
-    private parts;
-    private signals;
-    private values;
-    private unsubscribeList;
-    private unsubscribeTargetValue;
-    private combinedName;
-    private disposed;
-    private valueChangedCb;
-    private visualizationHandler;
-    private element;
-    private relativeSignalPath;
-    constructor(visualizationHandler: VisualizationHandler, id: string, valueChangedCb: (value: State) => void, element: Element, relativeSignalPath: string, root: HTMLElement);
-    private parseIndirectBinding;
-    handleValueChanged(value: any, index: number): void;
-    dispose(): void;
-    setState(value: any): void;
-}
 export declare class BindingsHelper {
     #private;
     _visualizationHandler: VisualizationHandler;
     constructor(visualizationHandler: VisualizationHandler);
+    getChangedEventName(element: Element, propertyName: string): string;
     parseBinding(element: Element, name: string, value: string, bindingTarget: BindingTarget, prefix: string): namedBinding;
     serializeBinding(element: Element, targetName: string, binding: VisualizationBinding): [name: string, value: string];
     getBindingAttributeName(element: Element, propertyName: string, propertyTarget: BindingTarget): string;

package/dist/helpers/BindingsHelper.js

@@ -15,11 +15,6 @@ 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 = [];
@@ -40,19 +35,19 @@ export function parseBindingString(id) {
     parts.push(tx);
     return { parts, signals };
 }
-export class IndirectSignal {
+class IndirectSignal {
     parts;
     signals;
     values;
-    unsubscribeList = [];
     unsubscribeTargetValue;
+    cleanupCalls = [];
     combinedName;
     disposed;
     valueChangedCb;
     visualizationHandler;
     element;
     relativeSignalPath;
-    constructor(visualizationHandler, id, valueChangedCb, element, relativeSignalPath, root) {
+    constructor(bindingsHelper, visualizationHandler, id, valueChangedCb, element, relativeSignalPath, root) {
         this.visualizationHandler = visualizationHandler;
         this.valueChangedCb = valueChangedCb;
         this.element = element;
@@ -62,25 +57,34 @@ export class IndirectSignal {
         for (let i = 0; i < this.signals.length; i++) {
             let nm = this.signals[i];
             if (nm[0] === '?' && nm[1] === '?') {
-                //todo: maybe react to prop changes
-                this.handleValueChanged(root[nm.substring(2)], i);
-                this.unsubscribeList.push(null);
+                const propNm = nm.substring(2);
+                this.handleValueChanged(root[propNm], i);
+                const evtCallback = () => this.handleValueChanged(root[propNm], i);
+                const evtName = bindingsHelper.getChangedEventName(root, propNm);
+                root.addEventListener(evtName, (evtCallback));
+                this.cleanupCalls.push(() => root.removeEventListener(evtName, evtCallback));
                 continue;
             }
             else if (nm[0] === '#' && nm[1] === '#') {
-                //todo: maybe react to prop changes
-                this.handleValueChanged(element[nm.substring(2)], i);
-                this.unsubscribeList.push(null);
+                const propNm = nm.substring(2);
+                this.handleValueChanged(element[propNm], i);
+                const evtCallback = () => this.handleValueChanged(element[propNm], i);
+                const evtName = bindingsHelper.getChangedEventName(element, propNm);
+                element.addEventListener(evtName, (evtCallback));
+                this.cleanupCalls.push(() => element.removeEventListener(evtName, evtCallback));
                 continue;
             }
             else if (nm[0] === '?') {
+                //TODO: react to changes of signal name in prop
                 nm = root[nm.substring(1)];
             }
             else if (nm[0] === '#') {
+                //TODO: react to changes of signal name in prop
                 nm = element[nm.substring(1)];
             }
             let cb = (id, value) => this.handleValueChanged(value.val, i);
-            this.unsubscribeList.push([cb, this.visualizationHandler.subscribeState(nm, cb)]);
+            const subscr = this.visualizationHandler.subscribeState(nm, cb);
+            this.cleanupCalls.push(() => this.visualizationHandler.unsubscribeState(this.signals[i], cb, subscr));
         }
     }
     parseIndirectBinding(id) {
@@ -121,9 +125,7 @@ export class IndirectSignal {
             this.unsubscribeTargetValue = null;
         }
         for (let i = 0; i < this.signals.length; i++) {
-            if (this.unsubscribeList[i] != null) {
-                this.visualizationHandler.unsubscribeState(this.signals[i], this.unsubscribeList[i][0], this.unsubscribeList[i][1]);
-            }
+            this.cleanupCalls[i]();
         }
     }
     setState(value) {
@@ -137,6 +139,18 @@ export class BindingsHelper {
     constructor(visualizationHandler) {
         this._visualizationHandler = visualizationHandler;
     }
+    getChangedEventName(element, propertyName) {
+        const posColon = propertyName.indexOf('::');
+        if (posColon >= 0)
+            return propertyName.substring(posColon + 2);
+        if (element instanceof HTMLInputElement)
+            return 'change';
+        if (element instanceof HTMLSelectElement)
+            return 'change';
+        if (isLit(element))
+            return PropertiesHelper.camelToDashCase(propertyName);
+        return PropertiesHelper.camelToDashCase(propertyName) + '-changed';
+    }
     //Not allowed chars in Var Names: |{}(),;:[]
     parseBinding(element, name, value, bindingTarget, prefix) {
         //Loooks like:
@@ -164,18 +178,18 @@ export class BindingsHelper {
                 binding.twoWay = true;
                 if (!binding.events) {
                     if (element instanceof HTMLInputElement)
-                        binding.events = ['change'];
+                        binding.events = [this.getChangedEventName(element, propname)];
                     else if (element instanceof HTMLSelectElement)
-                        binding.events = ['change'];
+                        binding.events = [this.getChangedEventName(element, propname)];
                     else {
                         if (isLit(element)) {
-                            binding.events = [propname];
+                            binding.events = [this.getChangedEventName(element, propname)];
                         }
                         else {
-                            binding.events = [propname + '-changed'];
+                            binding.events = [this.getChangedEventName(element, propname)];
                             //Binding could be a lit elemnt but not yet loaded
                             binding.maybeLitElement = true;
-                            binding.litEventNames = [propname];
+                            binding.litEventNames = [this.getChangedEventName(element, propname)];
                         }
                     }
                 }
@@ -203,7 +217,7 @@ export class BindingsHelper {
             else if (element instanceof HTMLSelectElement)
                 binding.events = ['change'];
             else {
-                binding.events = [getChangeEventName(element, propname)];
+                binding.events = [this.getChangedEventName(element, propname)];
             }
         }
         if (bindingTarget === BindingTarget.cssvar || bindingTarget === BindingTarget.class)
@@ -233,6 +247,8 @@ export class BindingsHelper {
         let needsJson = false;
         if (eventsString && binding.expression?.includes('::') || binding.expressionTwoWay?.includes('::'))
             needsJson = true;
+        if (binding.signal.trim()[0] == '{')
+            needsJson = true;
         if (!needsJson && binding.target == BindingTarget.property &&
             !binding.expression && !binding.expressionTwoWay &&
             binding.converter == null &&
@@ -583,7 +599,7 @@ export class BindingsHelper {
                             cleanUp();
                             this.applyBinding(element, binding, relativeSignalPath, root, specialValueHandler);
                         };
-                        const evtNm = getChangeEventName(element, PropertiesHelper.camelToDashCase(s));
+                        const evtNm = this.getChangedEventName(root, s);
                         root.addEventListener(evtNm, evtCallback);
                         if (!cleanupCalls)
                             cleanupCalls = [];
@@ -606,7 +622,7 @@ export class BindingsHelper {
                         cleanUp();
                         this.applyBinding(element, binding, relativeSignalPath, root, specialValueHandler);
                     };
-                    const evtNm = getChangeEventName(element, PropertiesHelper.camelToDashCase(s));
+                    const evtNm = this.getChangedEventName(element, s);
                     root.addEventListener(evtNm, evtCallback);
                     if (!cleanupCalls)
                         cleanupCalls = [];
@@ -697,7 +713,7 @@ export class BindingsHelper {
             }
             else {
                 if (s.includes('{')) {
-                    let indirectSignal = new IndirectSignal(this._visualizationHandler, s, (value) => this.handleValueChanged(element, binding, value.val, valuesObject, i, signalVars, false, relativeSignalPath), element, relativeSignalPath, root);
+                    let indirectSignal = new IndirectSignal(this, this._visualizationHandler, s, (value) => this.handleValueChanged(element, binding, value.val, valuesObject, i, signalVars, false, relativeSignalPath), element, relativeSignalPath, root);
                     if (!cleanupCalls)
                         cleanupCalls = [];
                     cleanupCalls.push(() => indirectSignal.dispose());

package/dist/interfaces/VisualizationHandler.d.ts

@@ -16,7 +16,10 @@ export interface VisualizationHandler {
     getState(id: string): Promise<State>;
     setState(id: string, val: State | StateValue, ack?: boolean): Promise<void>;
     subscribeState(id: string, cb: StateChangeHandler): any;
-    unsubscribeState(id: string, cb: StateChangeHandler, info: any): void;
+    /**
+     * @param {any} subscriptionResult - the result of the subscribe call
+     */
+    unsubscribeState(id: string, cb: StateChangeHandler, subscriptionResult: any): void;
     getHistoricData(id: string, config: any): any;
     getObject(id: string): Promise<Signal>;
     writeSignalsInGroup?(group: string): Promise<void>;

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