@node-projects/web-component-designer-visualization-addons 0.1.2 → 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/scripting/ScriptSystem.d.ts

@@ -2,11 +2,9 @@ import { IScriptMultiplexValue } from "../interfaces/IScriptMultiplexValue.js";
 import { VisualisationElementScript } from "../interfaces/VisualisationElementScript.js";
 import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
 import { ScriptCommands } from "./ScriptCommands.js";
-import { VisualizationUiHandler } from "../interfaces/VisualizationUiHandler.js";
 export declare class ScriptSystem {
     _visualizationHandler: VisualizationHandler;
-    _visualizationUiHandler: VisualizationUiHandler;
-    constructor(visualizationHandler: VisualizationHandler, visualizationUiHandler: VisualizationUiHandler);
+    constructor(visualizationHandler: VisualizationHandler);
     execute(scriptCommands: ScriptCommands[], outerContext: {
         event: Event;
         element: Element;

package/dist/scripting/ScriptSystem.js

@@ -4,8 +4,7 @@ import { parseBindingString } from "../helpers/BindingsHelper.js";
 import Long from 'long';
 export class ScriptSystem {
     _visualizationHandler;
-    _visualizationUiHandler;
-    constructor(visualizationHandler, visualizationUiHandler) {
+    constructor(visualizationHandler) {
         this._visualizationHandler = visualizationHandler;
     }
     async execute(scriptCommands, outerContext) {
@@ -15,11 +14,6 @@ export class ScriptSystem {
     }
     async runScriptCommand(command, context) {
         switch (command.type) {
-            case 'CloseDialog': {
-                //const dialogdId = await this.getValue(c.dialogId, outerContext);                
-                this._visualizationUiHandler.closeDialog(context.element);
-                break;
-            }
             case 'OpenUrl': {
                 window.open(await this.getValue(command.url, context), command.target);
                 break;
@@ -35,11 +29,6 @@ export class ScriptSystem {
                 console[target](message);
                 break;
             }
-            case 'SwitchLanguage': {
-                const language = await this.getValue(command.language, context);
-                this._visualizationUiHandler.switchLanguage(language);
-                break;
-            }
             case 'ToggleSignalValue': {
                 const signal = await this.getValue(command.signal, context);
                 let state = await this._visualizationHandler.getState(signal);

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