@node-projects/web-component-designer-visualization-addons 0.1.0

package/dist/services/BindableObjectDragDropService.js

@@ -0,0 +1,145 @@
+import { OverlayLayer, DesignItem, InsertAction, BindingTarget, PropertyType } from "@node-projects/web-component-designer";
+export class BindableObjectDragDropService {
+    constructor(bindingsHelper, visualizationHandler) {
+        this._bindingsHelper = bindingsHelper;
+        this._visualizationHandler = visualizationHandler;
+    }
+    _bindingsHelper;
+    _visualizationHandler;
+    rectMap = new Map();
+    rect;
+    dragEnter(designerCanvas, event, element) {
+        const designItem = DesignItem.GetDesignItem(element);
+        if (designItem && !designItem.isRootItem) {
+            let itemRect = designerCanvas.getNormalizedElementCoordinates(element);
+            this.rect = designerCanvas.overlayLayer.drawRect('IobrokerWebuiBindableObjectDragDropService', itemRect.x, itemRect.y, itemRect.width, itemRect.height, '', null, OverlayLayer.Background);
+            this.rect.style.fill = '#ff0000';
+            this.rect.style.opacity = '0.3';
+            this.rectMap.set(element, this.rect);
+        }
+    }
+    dragLeave(designerCanvas, event, element) {
+        const designItem = DesignItem.GetDesignItem(element);
+        if (designItem && !designItem.isRootItem) {
+            const rect = this.rectMap.get(element);
+            designerCanvas.overlayLayer.removeOverlay(rect);
+            this.rectMap.delete(element);
+        }
+    }
+    dragOver(designerView, event, element) {
+        return 'copy';
+    }
+    async drop(designerCanvas, event, bindableObject, element) {
+        for (let r of this.rectMap.values()) {
+            designerCanvas.overlayLayer.removeOverlay(r);
+        }
+        this.rectMap.clear();
+        const designItem = DesignItem.GetDesignItem(element);
+        const obj = await this._visualizationHandler.getObject(bindableObject.fullName);
+        const info = this._visualizationHandler.getSignalInformation(obj);
+        if (designItem && !designItem.isRootItem) {
+            // Add binding to drop target...
+            if (element instanceof HTMLInputElement) {
+                const binding = { signal: bindableObject.fullName, target: BindingTarget.property };
+                const serializedBinding = this._bindingsHelper.serializeBinding(element, element.type == 'checkbox' ? 'checked' : 'value', binding);
+                designItem.setAttribute(serializedBinding[0], serializedBinding[1]);
+            }
+            else {
+                const binding = { signal: bindableObject.fullName, target: BindingTarget.content };
+                const serializedBinding = this._bindingsHelper.serializeBinding(element, null, binding);
+                designItem.setAttribute(serializedBinding[0], serializedBinding[1]);
+            }
+        }
+        else {
+            const position = designerCanvas.getNormalizedEventCoordinates(event);
+            let di;
+            let grp;
+            let state = await this._visualizationHandler.getState(bindableObject.fullName);
+            //TODO: only icon&image if val is a url with extension 
+            if (info.role === 'url' && typeof state?.value === 'string') {
+                if (state.value.endsWith('jpg') || state.value.endsWith('jpeg') || state.value.endsWith('png') || state.value.endsWith('gif') || state.value.endsWith('svg')) {
+                    const img = document.createElement('img');
+                    di = DesignItem.createDesignItemFromInstance(img, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                    grp = di.openGroup("Insert");
+                    const binding = { signal: bindableObject.fullName, target: BindingTarget.property };
+                    let serializedBinding = this._bindingsHelper.serializeBinding(img, 'src', binding);
+                    di.setAttribute(serializedBinding[0], serializedBinding[1]);
+                    di.element.src = state.value;
+                }
+                else if (state.value.endsWith('mp4')) {
+                    const video = document.createElement('video');
+                    di = DesignItem.createDesignItemFromInstance(video, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                    grp = di.openGroup("Insert");
+                    const binding = { signal: bindableObject.fullName, target: BindingTarget.property };
+                    let serializedBinding = this._bindingsHelper.serializeBinding(video, 'src', binding);
+                    di.setAttribute(serializedBinding[0], serializedBinding[1]);
+                    di.element.src = state.value;
+                }
+                else {
+                    const video = document.createElement('iframe');
+                    di = DesignItem.createDesignItemFromInstance(video, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                    grp = di.openGroup("Insert");
+                    const binding = { signal: bindableObject.fullName, target: BindingTarget.property };
+                    let serializedBinding = this._bindingsHelper.serializeBinding(video, 'src', binding);
+                    di.setAttribute(serializedBinding[0], serializedBinding[1]);
+                    di.element.src = state.value;
+                }
+            }
+            if (!di) {
+                const input = document.createElement('input');
+                di = DesignItem.createDesignItemFromInstance(input, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                grp = di.openGroup("Insert");
+                let twoWay = info.writeable !== false;
+                const binding = { signal: bindableObject.fullName, target: BindingTarget.property, twoWay: twoWay };
+                let serializedBinding = this._bindingsHelper.serializeBinding(input, 'value', binding);
+                if (info.type === 'boolean') {
+                    serializedBinding = this._bindingsHelper.serializeBinding(input, 'checked', binding);
+                    di.setAttribute("type", "checkbox");
+                }
+                else if (info.role == 'date') {
+                    binding.twoWay = twoWay;
+                    serializedBinding = this._bindingsHelper.serializeBinding(input, 'value-as-number', binding);
+                    di.setAttribute("type", "date");
+                    di.setAttribute("readonly", "");
+                }
+                else if (info.role == 'datetime') {
+                    binding.twoWay = twoWay;
+                    serializedBinding = this._bindingsHelper.serializeBinding(input, 'value-as-number', binding);
+                    di.setAttribute("type", "datetime-local");
+                    di.setAttribute("readonly", "");
+                }
+                di.setAttribute(serializedBinding[0], serializedBinding[1]);
+            }
+            di.setStyle('position', 'absolute');
+            di.setStyle('left', position.x + 'px');
+            di.setStyle('top', position.y + 'px');
+            designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+            grp.commit();
+            requestAnimationFrame(() => designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]));
+        }
+    }
+    dragOverOnProperty(event, property, designItems) {
+        return 'copy';
+    }
+    dropOnProperty(event, property, bindableObject, designItems) {
+        if (property.type == 'signal') {
+            property.service.setValue(designItems, property, bindableObject.fullName);
+            return;
+        }
+        const binding = { signal: bindableObject.fullName, target: BindingTarget.property };
+        if (property.propertyType == PropertyType.attribute)
+            binding.target = BindingTarget.attribute;
+        if (property.propertyType == PropertyType.cssValue)
+            binding.target = BindingTarget.css;
+        binding.signal = bindableObject.fullName;
+        binding.twoWay = property.propertyType == PropertyType.property || property.propertyType == PropertyType.propertyAndAttribute;
+        //if (designItems[0].element instanceof BaseCustomControl)
+        //    binding.twoWay = false;
+        const group = designItems[0].openGroup('drop binding');
+        for (let d of designItems) {
+            const serializedBinding = this._bindingsHelper.serializeBinding(d.element, property.name, binding);
+            d.setAttribute(serializedBinding[0], serializedBinding[1]);
+        }
+        group.commit();
+    }
+}

package/dist/services/BindingsService.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 BindingsService 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/BindingsService.js

@@ -0,0 +1,46 @@
+import { BindingMode, PropertiesHelper } from "@node-projects/web-component-designer";
+export class BindingsService {
+    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/dist/services/PropertyGridDragDropService.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,10 @@
+export class PropertyGridDragDropService {
+    rectMap = new Map();
+    rect;
+    dragOverOnProperty(event, property, designItems) {
+        return 'copy';
+    }
+    dropOnProperty(event, property, dropObject, designItems) {
+        property.service.setValue(designItems, property, dropObject.text);
+    }
+}

package/dist/services/ScriptRefactorService.d.ts

@@ -0,0 +1,9 @@
+import { IDesignItem, IRefactorService, IRefactoring } from "@node-projects/web-component-designer";
+export declare class ScriptRefactorService implements IRefactorService {
+    getRefactorings(designItems: IDesignItem[]): (IRefactoring & {
+        refactor: (newValue: any) => void;
+    })[];
+    refactor(refactoring: (IRefactoring & {
+        refactor: (newValue: any) => void;
+    }), oldValue: string, newValue: string): void;
+}

package/dist/services/ScriptRefactorService.js

@@ -0,0 +1,79 @@
+import { BindingTarget } from "@node-projects/web-component-designer";
+export class ScriptRefactorService {
+    getRefactorings(designItems) {
+        let refactorings = [];
+        for (let d of designItems) {
+            for (let a of d.attributes()) {
+                if (a[0][0] == '@') {
+                    let sc = a[1];
+                    if (sc[0] == '{') {
+                        let script = JSON.parse(sc);
+                        if ('commands' in script) {
+                            for (let c of script.commands) {
+                                for (let p in c) {
+                                    let cp = c[p];
+                                    if (typeof cp === 'object') {
+                                        let mp = cp;
+                                        if (mp.source == 'signal') {
+                                            refactorings.push({ name: mp.name, itemType: 'bindableObject', target: BindingTarget.event, targetName: a[0], service: this, designItem: d, type: 'script', sourceObject: script, display: c.type + '/' + p, refactor: newValue => mp.name = newValue });
+                                        }
+                                    }
+                                }
+                                switch (c.type) {
+                                    case 'SetSignalValue':
+                                        if (c.signal)
+                                            refactorings.push({ name: c.signal, itemType: 'bindableObject', target: BindingTarget.event, targetName: a[0], display: c.type + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue });
+                                        break;
+                                    case 'ToggleSignalValue':
+                                        if (c.signal)
+                                            refactorings.push({ name: c.signal, itemType: 'bindableObject', target: BindingTarget.event, targetName: a[0], display: c.type + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue });
+                                        break;
+                                    case 'IncrementSignalValue':
+                                        if (c.signal)
+                                            refactorings.push({ name: c.signal, itemType: 'bindableObject', target: BindingTarget.event, targetName: a[0], display: c.type + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue });
+                                        break;
+                                    case 'DecrementSignalValue':
+                                        if (c.signal)
+                                            refactorings.push({ name: c.signal, itemType: 'bindableObject', target: BindingTarget.event, targetName: a[0], display: c.type + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue });
+                                        break;
+                                    case 'SetBitInSignal':
+                                        if (c.signal)
+                                            refactorings.push({ name: c.signal, itemType: 'bindableObject', target: BindingTarget.event, targetName: a[0], display: c.type + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue });
+                                        break;
+                                    case 'ClearBitInSignal':
+                                        if (c.signal)
+                                            refactorings.push({ name: c.signal, itemType: 'bindableObject', target: BindingTarget.event, targetName: a[0], display: c.type + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue });
+                                        break;
+                                    case 'ToggleBitInSignal':
+                                        if (c.signal)
+                                            refactorings.push({ name: c.signal, itemType: 'bindableObject', target: BindingTarget.event, targetName: a[0], display: c.type + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.signal = newValue });
+                                        break;
+                                    case 'OpenScreen':
+                                        if (c.screen)
+                                            refactorings.push({ name: c.screen, itemType: 'screenName', target: BindingTarget.event, targetName: a[0], display: c.type + '/screen', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.screen = newValue });
+                                        break;
+                                    case 'OpenDialog':
+                                        if (c.screen)
+                                            refactorings.push({ name: c.screen, itemType: 'screenName', target: BindingTarget.event, targetName: a[0], display: c.type + '/screen', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.screen = newValue });
+                                        break;
+                                    case 'CalculateSignalValue':
+                                        if (c.targetSignal)
+                                            refactorings.push({ name: c.targetSignal, itemType: 'bindableObject', target: BindingTarget.event, targetName: a[0], display: c.type + '/signal', service: this, designItem: d, type: 'script', sourceObject: script, refactor: newValue => c.targetSignal = newValue });
+                                        break;
+                                }
+                            }
+                        }
+                        else if ('blocks' in script) {
+                        }
+                    }
+                }
+            }
+        }
+        return refactorings;
+    }
+    refactor(refactoring, oldValue, newValue) {
+        refactoring.refactor(newValue);
+        let scriptString = JSON.stringify(refactoring.sourceObject);
+        refactoring.designItem.setAttribute(refactoring.targetName, scriptString);
+    }
+}

package/dist/services/SignalPropertyEditor.d.ts

@@ -0,0 +1,7 @@
+import { BasePropertyEditor, IProperty, ValueType } from "@node-projects/web-component-designer";
+import { VisualizationShell } from "../interfaces/VisualizationShell.js";
+export declare class SignalPropertyEditor extends BasePropertyEditor<HTMLElement> {
+    _ip: HTMLInputElement;
+    constructor(property: IProperty, shell: VisualizationShell);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/services/SignalPropertyEditor.js

@@ -0,0 +1,43 @@
+import { BasePropertyEditor } from "@node-projects/web-component-designer";
+import { BindableObjectsBrowser } from "@node-projects/web-component-designer-widgets-wunderbaum";
+export class SignalPropertyEditor extends BasePropertyEditor {
+    _ip;
+    constructor(property, shell) {
+        super(property);
+        let cnt = document.createElement('div');
+        cnt.style.display = 'flex';
+        this._ip = document.createElement('input');
+        this._ip.onchange = (e) => this._valueChanged(this._ip.value);
+        this._ip.onfocus = (e) => {
+            this._ip.selectionStart = 0;
+            this._ip.selectionEnd = this._ip.value?.length;
+        };
+        cnt.appendChild(this._ip);
+        let btn = document.createElement('button');
+        btn.textContent = '...';
+        btn.onclick = async () => {
+            let b = new BindableObjectsBrowser();
+            b.initialize(this.designItems[0].serviceContainer);
+            b.title = 'select signal...';
+            const abortController = new AbortController();
+            b.objectDoubleclicked.on(() => {
+                abortController.abort();
+                this._ip.value = b.selectedObject.fullName;
+                this._valueChanged(this._ip.value);
+            });
+            let res = await shell.openConfirmation(b, { x: 100, y: 100, width: 400, height: 300, abortSignal: abortController.signal });
+            if (res) {
+                this._ip.value = b.selectedObject.fullName;
+                this._valueChanged(this._ip.value);
+            }
+        };
+        cnt.appendChild(btn);
+        this.element = cnt;
+    }
+    refreshValue(valueType, value) {
+        if (value == null)
+            this._ip.value = "";
+        else
+            this._ip.value = value;
+    }
+}

package/dist/setupVisuService.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -0,0 +1,29 @@
+{
+  "description": "web-component-designer addon for visualizations",
+  "name": "@node-projects/web-component-designer-visualization-addons",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "jochen.kuehner@gmx.de",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": ">=0.19.0",
+    "@node-projects/web-component-designer": ">=0.1.1",
+    "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.12",
+    "@node-projects/web-component-designer-codeview-monaco": ">=0.1.18",
+    "@node-projects/propertygrid.webcomponent": ">=1.0.2",
+    "@node-projects/splitview.webcomponent": ">=1.0.1",
+    "@blockly/zoom-to-fit": "^5.0.11",
+    "blockly": "^10.4.2",
+    "long": "^5.2.3" 
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}