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

package/dist/components/BindingsEditor.d.ts

@@ -28,10 +28,11 @@ export declare class BindingsEditor extends BaseCustomWebComponentConstructorApp
         key: string;
         value: any;
     }[];
+    convertersString: string;
     objectValueType: string;
     protected _property: IProperty;
     protected _binding: IBinding & {
-        converter: Record<string, any>;
+        converter: Record<string, any> | string;
     };
     protected _bindingTarget: BindingTarget;
     protected _serviceContainer: ServiceContainer;
@@ -41,7 +42,9 @@ export declare class BindingsEditor extends BaseCustomWebComponentConstructorApp
     protected _objNmInput: HTMLInputElement;
     constructor(property: IProperty, binding: IBinding & {
         converter: Record<string, any>;
-    }, bindingTarget: BindingTarget, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, shell: VisualizationShell);
+    }, bindingTarget: BindingTarget, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, shell: VisualizationShell, config?: {
+        namedConverters: boolean;
+    });
     ready(): void;
     _focusRow(index: number): void;
     _updatefocusedRow(): void;

package/dist/components/BindingsEditor.js

@@ -56,8 +56,8 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
             </div>
             <div class="vertical-grid" style="margin-top: 10px;">
                 <div>
-                    <div class="input-headline">
-                        <span>converter</span>:
+                    <div class="input-headline" style="display: flex;align-items: center;">
+                        <span>converter</span>:<input id="namedConverterInput" style="width: 100%; margin-left: 15px;" value="{{?this.convertersString::change}}">
                     </div>
                 </div>
             </div>
@@ -181,6 +181,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     events = '';
     invert = false;
     converters = [];
+    convertersString;
     objectValueType;
     _property;
     _binding;
@@ -190,7 +191,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     _shell;
     _activeRow = -1;
     _objNmInput;
-    constructor(property, binding, bindingTarget, serviceContainer, instanceServiceContainer, shell) {
+    constructor(property, binding, bindingTarget, serviceContainer, instanceServiceContainer, shell, config = { namedConverters: true }) {
         super();
         super._restoreCachedInititalValues();
         this._objNmInput = this._getDomElement('objectName');
@@ -200,6 +201,9 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
         this._serviceContainer = serviceContainer;
         this._instanceServiceContainer = instanceServiceContainer;
         this._shell = shell;
+        if (!config?.namedConverters) {
+            this._getDomElement('namedConverterInput').style.display = 'none';
+        }
     }
     ready() {
         this._parseAttributesToProperties();
@@ -218,8 +222,13 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
             if (this._binding.bindableObjectNames)
                 this.objectNames = this._binding.bindableObjectNames.join(';');
             if (this._binding.converter) {
-                for (let c in this._binding.converter) {
-                    this.converters.push({ key: c, value: this._binding.converter[c] });
+                if (typeof this._binding.converter === 'string') {
+                    this.convertersString = this._binding.converter;
+                }
+                else {
+                    for (let c in this._binding.converter) {
+                        this.converters.push({ key: c, value: this._binding.converter[c] });
+                    }
                 }
             }
             if (this._binding.changedEvents && this._binding.changedEvents.length)

package/dist/helpers/BindingsHelper.d.ts

@@ -30,6 +30,7 @@ export declare function parseBindingString(id: string): {
 export declare class BindingsHelper {
     #private;
     _visualizationHandler: VisualizationHandler;
+    namedConverterCallback: (converter: string, value: any, element: Element, binding: namedBinding) => any;
     constructor(visualizationHandler: VisualizationHandler);
     getChangedEventName(element: Element, propertyName: string): string;
     parseBinding(element: Element, name: string, value: string, bindingTarget: BindingTarget, prefix: string): namedBinding;

package/dist/helpers/BindingsHelper.js

@@ -64,6 +64,11 @@ class IndirectSignal {
                 root.addEventListener(evtName, (evtCallback));
                 this.cleanupCalls.push(() => root.removeEventListener(evtName, evtCallback));
                 continue;
+                //} else if (nm[0] === '?' && nm[1] === '$') {
+                //  const attrNm = nm.substring(2);
+                //  let val = root.getAttribute(attrNm);
+                //  this.handleValueChanged(val, i);
+                //  continue;
             }
             else if (nm[0] === '#' && nm[1] === '#') {
                 const propNm = nm.substring(2);
@@ -73,6 +78,11 @@ class IndirectSignal {
                 element.addEventListener(evtName, (evtCallback));
                 this.cleanupCalls.push(() => element.removeEventListener(evtName, evtCallback));
                 continue;
+                //} else if (nm[0] === '#' && nm[1] === '$') {
+                //  const attrNm = nm.substring(2);
+                //  let val = element.getAttribute(attrNm);
+                //  this.handleValueChanged(val, i);
+                //  continue;
             }
             else if (nm[0] === '?') {
                 //TODO: react to changes of signal name in prop
@@ -136,6 +146,7 @@ class IndirectSignal {
 }
 export class BindingsHelper {
     _visualizationHandler;
+    namedConverterCallback;
     constructor(visualizationHandler) {
         this._visualizationHandler = visualizationHandler;
     }
@@ -830,50 +841,55 @@ export class BindingsHelper {
             valuesObject[signalVarNames.length - 1] = v;
         }
         if (binding[1].converter) {
-            const stringValue = (v != null ? v.toString() : v);
-            if (stringValue in binding[1].converter) {
-                v = new Function(signalVarNames, 'return `' + binding[1].converter[stringValue] + '`')(...valuesObject);
+            if (typeof binding[1].converter === 'string') {
+                v = this.namedConverterCallback(binding[1].converter, v, element, binding);
             }
             else {
-                //@ts-ignore
-                const nr = parseFloat(v);
-                for (let c in binding[1].converter) {
-                    if (c.length > 2 && c[0] === '>' && c[1] === '=') {
-                        const wr = parseFloat(c.substring(2));
-                        if (nr >= wr) {
-                            v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
-                            break;
-                        }
-                    }
-                    else if (c.length > 2 && c[0] === '<' && c[1] === '=') {
-                        const wr = parseFloat(c.substring(2));
-                        if (nr <= wr) {
-                            v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
-                            break;
+                const stringValue = (v != null ? v.toString() : v);
+                if (stringValue in binding[1].converter) {
+                    v = new Function(signalVarNames, 'return `' + binding[1].converter[stringValue] + '`')(...valuesObject);
+                }
+                else {
+                    //@ts-ignore
+                    const nr = parseFloat(v);
+                    for (let c in binding[1].converter) {
+                        if (c.length > 2 && c[0] === '>' && c[1] === '=') {
+                            const wr = parseFloat(c.substring(2));
+                            if (nr >= wr) {
+                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                break;
+                            }
                         }
-                    }
-                    else if (c.length > 1 && c[0] === '>') {
-                        const wr = parseFloat(c.substring(1));
-                        if (nr > wr) {
-                            v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
-                            break;
+                        else if (c.length > 2 && c[0] === '<' && c[1] === '=') {
+                            const wr = parseFloat(c.substring(2));
+                            if (nr <= wr) {
+                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                break;
+                            }
                         }
-                    }
-                    else if (c.length > 1 && c[0] === '<') {
-                        const wr = parseFloat(c.substring(1));
-                        if (nr < wr) {
-                            v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
-                            break;
+                        else if (c.length > 1 && c[0] === '>') {
+                            const wr = parseFloat(c.substring(1));
+                            if (nr > wr) {
+                                v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                break;
+                            }
                         }
-                    }
-                    else {
-                        const sp = c.split('-');
-                        if (sp.length > 1) {
-                            if ((sp[0] === '' || nr >= parseFloat(sp[0])) && (sp[1] === '' || parseFloat(sp[1]) >= nr)) {
+                        else if (c.length > 1 && c[0] === '<') {
+                            const wr = parseFloat(c.substring(1));
+                            if (nr < wr) {
                                 v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
                                 break;
                             }
                         }
+                        else {
+                            const sp = c.split('-');
+                            if (sp.length > 1) {
+                                if ((sp[0] === '' || nr >= parseFloat(sp[0])) && (sp[1] === '' || parseFloat(sp[1]) >= nr)) {
+                                    v = new Function(signalVarNames, 'return `' + binding[1].converter[c] + '`')(...valuesObject);
+                                    break;
+                                }
+                            }
+                        }
                     }
                 }
             }

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