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

package/dist/components/BindingsEditor.d.ts

@@ -4,7 +4,7 @@ import { VisualizationShell } from '../interfaces/VisualizationShell.js';
 export declare class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     static readonly template: HTMLTemplateElement;
     static readonly style: CSSStyleSheet;
-    static readonly is = "iobroker-webui-dynamics-editor";
+    static readonly is = "node-projects-visualization-bindings-editor";
     static readonly properties: {
         twoWayPossible: BooleanConstructor;
         twoWay: BooleanConstructor;
@@ -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

@@ -150,14 +150,14 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
             font-size: inherit;
         }
         
-        iobroker-webui-monaco-editor:not([readonly]) {
+        node-projects-code-view-monaco:not([readonly]) {
             border: 1px black solid;
         }
         
-        iobroker-webui-monaco-editor[readonly] {
+        node-projects-code-view-monaco[readonly] {
             border: 1px lightgray solid;
         }`;
-    static is = 'iobroker-webui-dynamics-editor';
+    static is = 'node-projects-visualization-bindings-editor';
     static properties = {
         twoWayPossible: Boolean,
         twoWay: Boolean,
@@ -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/components/BindingsEditorHistoric.d.ts

@@ -3,7 +3,7 @@ export declare class BindingsEditorHistoric extends BaseCustomWebComponentConstr
     #private;
     static readonly template: HTMLTemplateElement;
     static readonly style: CSSStyleSheet;
-    static readonly is = "node-projects-bindings-editor-historic";
+    static readonly is = "node-projects-visualization-bindings-editor-historic";
     historic: any;
     static readonly properties: {
         historic: ObjectConstructor;

package/dist/components/BindingsEditorHistoric.js

@@ -72,7 +72,7 @@ export class BindingsEditorHistoric extends BaseCustomWebComponentConstructorApp
         :host {
             box-sizing: border-box;
         }`;
-    static is = 'node-projects-bindings-editor-historic';
+    static is = 'node-projects-visualization-bindings-editor-historic';
     historic;
     static properties = {
         historic: Object

package/dist/components/SimpleScriptEditor.d.ts

@@ -7,7 +7,7 @@ import '@node-projects/splitview.webcomponent';
 export declare class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend {
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
-    static readonly is = "node-projects-simple-script-editor";
+    static readonly is = "node-projects-visualization-simple-script-editor";
     serviceContainer: ServiceContainer;
     visualizationHandler: VisualizationHandler;
     visualizationShell: VisualizationShell;

package/dist/components/SimpleScriptEditor.js

@@ -52,7 +52,7 @@ export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend
             </node-projects-split-view>
         </div>
     `;
-    static is = 'node-projects-simple-script-editor';
+    static is = 'node-projects-visualization-simple-script-editor';
     serviceContainer;
     visualizationHandler;
     visualizationShell;

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