add named converters editor

Author: jogibear9988

packages/web-component-designer-visualization-addons/package.json

@@ -1,7 +1,7 @@
 {
   "description": "web-component-designer addon for visualizations",
   "name": "@node-projects/web-component-designer-visualization-addons",
-  "version": "0.1.121",
+  "version": "0.1.122",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",

packages/web-component-designer-visualization-addons/src/components/BindingsEditor.ts

@@ -61,8 +61,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>
@@ -190,18 +190,19 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
   public events: string = '';
   public invert: boolean = false;
   public converters: { key: string, value: any }[] = [];
+  public convertersString: string;
   public objectValueType: string;
 
   protected _property: IProperty;
-  protected _binding: IBinding & { converter: Record<string, any> };
+  protected _binding: IBinding & { converter: Record<string, any> | string };
   protected _bindingTarget: BindingTarget;
   protected _serviceContainer: ServiceContainer;
   protected _instanceServiceContainer: InstanceServiceContainer;
   protected _shell: VisualizationShell
   protected _activeRow: number = -1;
   protected _objNmInput: HTMLInputElement;
 
-  constructor(property: IProperty, binding: IBinding & { converter: Record<string, any> }, bindingTarget: BindingTarget, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, shell: VisualizationShell) {
+  constructor(property: IProperty, binding: IBinding & { converter: Record<string, any> }, bindingTarget: BindingTarget, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, shell: VisualizationShell, config = { namedConverters: true }) {
     super();
     super._restoreCachedInititalValues();
 
@@ -213,6 +214,10 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     this._serviceContainer = serviceContainer;
     this._instanceServiceContainer = instanceServiceContainer;
     this._shell = shell;
+
+    if (!config?.namedConverters) {
+      this._getDomElement<HTMLInputElement>('namedConverterInput').style.display = 'none';
+    }
   }
 
   ready() {
@@ -234,8 +239,12 @@ 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)

packages/web-component-designer-visualization-addons/src/helpers/BindingsHelper.ts

@@ -872,7 +872,7 @@ export class BindingsHelper {
       valuesObject[signalVarNames.length - 1] = v;
     }
     if (binding[1].converter) {
-      if (binding[1].converter) {
+      if (typeof binding[1].converter ===  'string') {
         v = this.namedConverterCallback(<string><never>binding[1].converter, v, element, binding);
       } else {
       const stringValue = <string>(v != null ? v.toString() : v);