@node-projects/web-component-designer-visualization-addons 0.1.3 → 0.1.4

package/dist/components/BindingsEditor.d.ts

@@ -36,7 +36,7 @@ export declare class BindingsEditor extends BaseCustomWebComponentConstructorApp
     private _activeRow;
     constructor(property: IProperty, binding: IBinding & {
         converter: Record<string, any>;
-    }, bindingTarget: BindingTarget, servieContainer: ServiceContainer, shell: VisualizationShell);
+    }, bindingTarget: BindingTarget, serviceContainer: ServiceContainer, shell: VisualizationShell);
     ready(): void;
     _focusRow(index: number): void;
     _updatefocusedRow(): void;

package/dist/components/BindingsEditor.js

@@ -184,13 +184,13 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     _serviceContainer;
     _shell;
     _activeRow = -1;
-    constructor(property, binding, bindingTarget, servieContainer, shell) {
+    constructor(property, binding, bindingTarget, serviceContainer, shell) {
         super();
         super._restoreCachedInititalValues();
         this._property = property;
         this._binding = binding;
         this._bindingTarget = bindingTarget;
-        this._serviceContainer = servieContainer;
+        this._serviceContainer = serviceContainer;
         this._shell = shell;
     }
     ready() {

package/dist/index.d.ts

@@ -12,12 +12,11 @@ export * from './interfaces/VisualisationElementScript.js';
 export * from './interfaces/VisualizationBinding.js';
 export * from './interfaces/VisualizationHandler.js';
 export * from './interfaces/VisualizationShell.js';
-export * from './interfaces/VisualizationUiHandler.js';
 export * from './scripting/Script.js';
 export * from './scripting/ScriptCommands.js';
 export * from './scripting/ScriptSystem.js';
 export * from './services/BindableObjectDragDropService.js';
-export * from './services/BindingsService.js';
+export * from './services/VisualizationBindingsService.js';
 export * from './services/PropertyGridDragDropService.js';
 export * from './services/ScriptRefactorService.js';
 export * from './services/SignalPropertyEditor.js';

package/dist/index.js

@@ -12,12 +12,11 @@ export * from './interfaces/VisualisationElementScript.js';
 export * from './interfaces/VisualizationBinding.js';
 export * from './interfaces/VisualizationHandler.js';
 export * from './interfaces/VisualizationShell.js';
-export * from './interfaces/VisualizationUiHandler.js';
 export * from './scripting/Script.js';
 export * from './scripting/ScriptCommands.js';
 export * from './scripting/ScriptSystem.js';
 export * from './services/BindableObjectDragDropService.js';
-export * from './services/BindingsService.js';
+export * from './services/VisualizationBindingsService.js';
 export * from './services/PropertyGridDragDropService.js';
 export * from './services/ScriptRefactorService.js';
 export * from './services/SignalPropertyEditor.js';

package/dist/services/PropertyGridDragDropService.d.ts

@@ -1,7 +1,5 @@
 import { IProperty, IDesignItem, IPropertyGridDragDropService } from "@node-projects/web-component-designer";
 export declare class PropertyGridDragDropService implements IPropertyGridDragDropService {
-    rectMap: Map<Element, SVGRectElement>;
-    rect: SVGRectElement;
     dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move';
     dropOnProperty?(event: DragEvent, property: IProperty, dropObject: any, designItems: IDesignItem[]): void;
 }

package/dist/services/PropertyGridDragDropService.js

@@ -1,6 +1,4 @@
 export class PropertyGridDragDropService {
-    rectMap = new Map();
-    rect;
     dragOverOnProperty(event, property, designItems) {
         return 'copy';
     }

package/dist/services/VisualizationBindingsService.d.ts

@@ -0,0 +1,11 @@
+import { BindingTarget, IBinding, IBindingService, IDesignItem } from "@node-projects/web-component-designer";
+import { BindingsHelper } from "../helpers/BindingsHelper.js";
+export declare class VisualizationBindingsService implements IBindingService {
+    constructor(bindingsHelper: BindingsHelper);
+    private _bindingsHelper;
+    getBindings(designItem: IDesignItem): (IBinding & {
+        converter: Record<string, any>;
+    })[];
+    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
+    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
+}

package/dist/services/VisualizationBindingsService.js

@@ -0,0 +1,46 @@
+import { BindingMode, PropertiesHelper } from "@node-projects/web-component-designer";
+export class VisualizationBindingsService {
+    constructor(bindingsHelper) {
+        this._bindingsHelper = bindingsHelper;
+    }
+    _bindingsHelper;
+    getBindings(designItem) {
+        const iobBindings = Array.from(this._bindingsHelper.getBindings(designItem.element));
+        return iobBindings.map(x => ({
+            targetName: x[1].target == 'css' ? PropertiesHelper.camelToDashCase(x[0]) : x[0],
+            target: x[1].target,
+            mode: x[1].twoWay ? BindingMode.twoWay : BindingMode.oneWay,
+            invert: x[1].inverted,
+            bindableObjectNames: x[1].signal.split(';'),
+            expression: x[1].expression,
+            expressionTwoWay: x[1].expressionTwoWay,
+            converter: x[1].converter,
+            type: x[1].type,
+            changedEvents: x[1].events,
+            historic: x[1].historic
+        }));
+    }
+    setBinding(designItem, binding) {
+        let bnd = { signal: binding.bindableObjectNames.join(';'), target: binding.target };
+        bnd.inverted = binding.invert;
+        bnd.twoWay = binding.mode == BindingMode.twoWay;
+        bnd.expression = binding.expression;
+        bnd.expressionTwoWay = binding.expressionTwoWay;
+        //@ts-ignore
+        bnd.historic = binding.historic;
+        bnd.type = binding.type;
+        bnd.converter = binding.converters;
+        bnd.target = binding.target;
+        bnd.events = binding.changedEvents;
+        let serializedBnd = this._bindingsHelper.serializeBinding(designItem.element, binding.targetName, bnd);
+        let group = designItem.openGroup('edit_binding');
+        designItem.setAttribute(serializedBnd[0], serializedBnd[1]);
+        group.commit();
+        return true;
+    }
+    clearBinding(designItem, propertyName, propertyTarget) {
+        const name = this._bindingsHelper.getBindingAttributeName(designItem.element, propertyName, propertyTarget);
+        designItem.removeAttribute(name);
+        return true;
+    }
+}

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