@node-projects/web-component-designer-visualization-addons 0.1.46 → 0.1.48

package/dist/components/BindingsEditor.js

@@ -46,7 +46,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
                             <span style="cursor: pointer;" title="javascript expression. access property with 'value'">formula write back (two way)</span>
                         </div>
                         <div class="row">
-                            <node-projects-code-view-monaco id="expression2way" read-only="[[!this.twoWay]]" $readonly="[[!this.twoWay]]" single-row language="javascript" style="width: 100%; min-height: 17px; height: 17px; position: relative; overflow: hidden; resize: vertical;" .code="{{?this.expressionTwoWay}}"></iobroker-webui-monaco-editor>
+                            <node-projects-code-view-monaco id="expression2way" .read-only="[[!this.twoWay]]" $readonly="[[!this.twoWay]]" single-row language="javascript" style="width: 100%; min-height: 17px; height: 17px; position: relative; overflow: hidden; resize: vertical;" .code="{{?this.expressionTwoWay}}"></iobroker-webui-monaco-editor>
                         </div>
                     </div>
                 </div>

package/dist/helpers/BindingsHelper.d.ts

@@ -7,6 +7,7 @@ export declare const bindingPrefixClass = "bind-class:";
 export declare const bindingPrefixCss = "bind-css:";
 export declare const bindingPrefixCssVar = "bind-cssvar:";
 export declare const bindingPrefixContent = "bind-content:";
+export declare const bindingPrefixVisible = "bind-visible:";
 export declare const bindingPrefixInsideCss = "bind(";
 export declare const bindingPrefixInsideCssVarName = "--tmpBinding_";
 export declare const bindingsInCssRegex: RegExp;

package/dist/helpers/BindingsHelper.js

@@ -8,6 +8,7 @@ export const bindingPrefixClass = 'bind-class:';
 export const bindingPrefixCss = 'bind-css:';
 export const bindingPrefixCssVar = 'bind-cssvar:';
 export const bindingPrefixContent = 'bind-content:';
+export const bindingPrefixVisible = 'bind-visible:';
 export const bindingPrefixInsideCss = 'bind(';
 export const bindingPrefixInsideCssVarName = '--tmpBinding_';
 export const bindingsInCssRegex = /{{(.*)}}/;
@@ -207,7 +208,7 @@ export class BindingsHelper {
             else if (!isLit(element) && binding.events?.[0] == targetName + '-changed')
                 delete bindingCopy.events;
         }
-        const eventsString = binding.twoWay && binding.events?.length > 0 ? '::' + binding.events.join(',') : '';
+        const eventsString = bindingCopy.twoWay && bindingCopy.events?.length > 0 ? '::' + bindingCopy.events.join(',') : '';
         let needsJson = false;
         if (eventsString && binding.expression?.includes('::') || binding.expressionTwoWay?.includes('::'))
             needsJson = true;
@@ -344,6 +345,9 @@ export class BindingsHelper {
         if (propertyTarget == BindingTarget.css) {
             return bindingPrefixCss + PropertiesHelper.camelToDashCase(propertyName);
         }
+        if (propertyTarget == BindingTarget.visible) {
+            return bindingPrefixVisible;
+        }
         if (propertyTarget == BindingTarget.cssvar) {
             return bindingPrefixCssVar + BindingsHelper.camelToDotCase(propertyName);
         }
@@ -376,6 +380,9 @@ export class BindingsHelper {
                 else if (a.name.startsWith(bindingPrefixCssVar)) {
                     yield this.parseBinding(element, a.name, a.value, BindingTarget.cssvar, bindingPrefixCssVar);
                 }
+                else if (a.name.startsWith(bindingPrefixVisible)) {
+                    yield this.parseBinding(element, a.name, a.value, BindingTarget.visible, bindingPrefixVisible);
+                }
             }
         }
     }
@@ -767,6 +774,8 @@ export class BindingsHelper {
             else
                 element.classList.remove(binding[0]);
         }
+        else if (binding[1].target == BindingTarget.visible)
+            element.style.visibility = v ? '' : 'collapse';
     }
     static camelToDotCase(text) {
         return text.replace(/([A-Z])/g, (g) => `.${g[0].toLowerCase()}`);

package/package.json

@@ -1,31 +1,31 @@
-{
-  "description": "web-component-designer addon for visualizations",
-  "name": "@node-projects/web-component-designer-visualization-addons",
-  "version": "0.1.46",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "jochen.kuehner@gmx.de",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "build": "tsc",
-    "link": "npm link",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@adobe/css-tools": "^4.3.3",
-    "@blockly/zoom-to-fit": "^6.0.0",
-    "@node-projects/base-custom-webcomponent": ">=0.19.0",
-    "@node-projects/propertygrid.webcomponent": ">=1.0.2",
-    "@node-projects/splitview.webcomponent": ">=1.0.1",
-    "@node-projects/web-component-designer": ">=0.1.1",
-    "@node-projects/web-component-designer-codeview-monaco": ">=0.1.18",
-    "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.12",
-    "blockly": "^11.0.0",
-    "long": "^5.2.3"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "web-component-designer addon for visualizations",
+  "name": "@node-projects/web-component-designer-visualization-addons",
+  "version": "0.1.48",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "jochen.kuehner@gmx.de",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "build": "tsc",
+    "link": "npm link",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@adobe/css-tools": "^4.4.0",
+    "@blockly/zoom-to-fit": "^6.0.7",
+    "@node-projects/base-custom-webcomponent": ">=0.19.0",
+    "@node-projects/propertygrid.webcomponent": ">=1.1.1",
+    "@node-projects/splitview.webcomponent": ">=1.0.1",
+    "@node-projects/web-component-designer": ">=0.1.215",
+    "@node-projects/web-component-designer-codeview-monaco": ">=0.1.27",
+    "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.27",
+    "blockly": "^11.1.1",
+    "long": "^5.2.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}

package/dist/blockly/components/fields/FieldObjectId.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/blockly/components/fields/FieldObjectId.js

@@ -1,6 +0,0 @@
-//@ts-ignore
-class FieldObjectId extends Blockly.FieldTextInput {
-}
-//@ts-ignore
-Blockly.FieldObjectId = FieldObjectId;
-export {};

package/dist/components/PropertyGridExt.js

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

package/dist/components/ScriptEditor.d.ts

@@ -1,28 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-import { Script } from "../scripting/Script.js";
-import { ServiceContainer } from "@node-projects/web-component-designer";
-import { VisualizationHandler } from "../interfaces/VisualizationHandler";
-import { VisualizationShell } from "../interfaces/VisualizationShell";
-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";
-    serviceContainer: ServiceContainer;
-    visualizationHandler: VisualizationHandler;
-    visualizationShell: VisualizationShell;
-    scriptCommandsTypeInfo: any;
-    propertiesTypeInfo: any;
-    private _script;
-    private _commandListDiv;
-    private _commandListFancyTree;
-    private _possibleCommands;
-    private _propertygrid;
-    constructor();
-    ready(): Promise<void>;
-    private addPossibleCommands;
-    loadScript(script: Script): void;
-    private createTreeItem;
-    addItem(): void;
-    getScriptCommands(): any[];
-}

package/dist/components/ScriptEditor.js

@@ -1,254 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-import { ContextMenu } from "@node-projects/web-component-designer";
-import { typeInfoFromJsonSchema } from "@node-projects/propertygrid.webcomponent";
-import { defaultOptions } from "@node-projects/web-component-designer-widgets-wunderbaum";
-import { Wunderbaum } from 'wunderbaum';
-//@ts-ignore
-import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' assert { type: 'css' };
-import { VisualizationPropertyGrid } from "./VisualizationPropertyGrid";
-import '@node-projects/splitview.webcomponent';
-export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-        :host {
-            background: white;
-        }
-        .list{
-            display: grid;
-            grid-template-columns: 1fr 40px;
-            width: calc(100% - 6px);
-            box-sizing: border-box;
-            margin: 3px;
-        }
-
-        .list button{
-            padding: 5px 10px;
-            box-sizing: border-box;
-            display: flex;
-            justify-content: center;
-            margin-right: 5px;
-            margin-left: 5px;
-        }
-
-        node-projects-visualization-property-grid {
-            width: 100%;
-            height: 100%;
-        }
-    `;
-    static template = html `
-        <div style="width:100%; height:100%; overflow: hidden;">
-            <node-projects-split-view style="height: 100%; width: 100%; position: relative;" orientation="horizontal">
-                <div style="width: 40%;  position: relative;">
-                    <div style="width:calc(100% - 4px); height:calc(100% - 4px)">
-                        <div id="commandList" style="overflow-x: hidden; overflow-y: auto; width:100%; height: calc(100% - 34px);"></div>
-                        <div class="list">
-                            <select id="possibleCommands" style="width: 100%"></select>  
-                            <button @click="[[this.addItem()]]">Add</button>
-                        </div>
-                    </div>
-                </div>
-                <div style="width: 60%; position: relative;">
-                    <node-projects-visualization-property-grid id="propertygrid"></node-projects-visualization-property-grid>
-                </div>
-            </node-projects-split-view>
-        </div>
-    `;
-    static is = 'node-projects-simple-script-editor';
-    serviceContainer;
-    visualizationHandler;
-    visualizationShell;
-    scriptCommandsTypeInfo;
-    propertiesTypeInfo;
-    _script;
-    _commandListDiv;
-    _commandListFancyTree;
-    _possibleCommands;
-    _propertygrid;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        this._commandListDiv = this._getDomElement('commandList');
-        this._possibleCommands = this._getDomElement('possibleCommands');
-        this._propertygrid = this._getDomElement('propertygrid');
-        this.shadowRoot.adoptedStyleSheets = [wunderbaumStyle, SimpleScriptEditor.style];
-    }
-    async ready() {
-        this.addPossibleCommands();
-        this._parseAttributesToProperties();
-        this._bindingsParse(null, true);
-        this._assignEvents();
-        let editComplex = async (data) => {
-            let pg = new VisualizationPropertyGrid();
-            pg.visualizationHandler = this.visualizationHandler;
-            pg.visualizationShell = this.visualizationShell;
-            pg.serviceContainer = this.serviceContainer;
-            pg.getTypeInfo = (obj, type) => typeInfoFromJsonSchema(this.propertiesTypeInfo, obj, type);
-            pg.showHead = false;
-            pg.typeName = 'IScriptMultiplexValue';
-            pg.title = 'Complex for "' + data.propertyPath + '"';
-            if (typeof data.value === 'object')
-                pg.selectedObject = data.value ?? {};
-            else
-                pg.selectedObject = {};
-            let res = await this.visualizationShell.openConfirmation(pg, { x: 100, y: 100, width: 300, height: 300, parent: this });
-            if (res) {
-                this._propertygrid.setPropertyValue(data.propertyPath, pg.selectedObject);
-                this._propertygrid.refresh();
-            }
-        };
-        this._propertygrid.visualizationHandler = this.visualizationHandler;
-        this._propertygrid.visualizationShell = this.visualizationShell;
-        this._propertygrid.serviceContainer = this.serviceContainer;
-        this._propertygrid.getTypeInfo = (obj, type) => typeInfoFromJsonSchema(this.scriptCommandsTypeInfo, obj, type);
-        this._propertygrid.getSpecialEditorForType = async (property, currentValue, propertyPath, wbRender, additionalInfo) => {
-            if (typeof currentValue === 'object' && currentValue !== null) {
-                let rB = document.createElement('button');
-                rB.style.height = 'calc(100% - 6px)';
-                rB.style.position = 'relative';
-                rB.style.display = 'flex';
-                rB.style.justifyContent = 'center';
-                rB.style.width = '20px';
-                rB.style.boxSizing = 'content-box';
-                rB.innerText = 'del';
-                rB.onclick = () => {
-                    this._propertygrid.setPropertyValue(propertyPath, undefined);
-                    this._propertygrid.refresh();
-                };
-                wbRender.nodeElem.insertAdjacentElement('afterbegin', rB);
-                let d = document.createElement('div');
-                d.style.display = 'flex';
-                let sp = document.createElement('span');
-                sp.innerText = 'complex: ' + JSON.stringify(currentValue);
-                sp.style.overflow = 'hidden';
-                sp.style.whiteSpace = 'nowrap';
-                sp.style.textOverflow = 'ellipsis';
-                sp.style.flexGrow = '1';
-                sp.title = JSON.stringify(currentValue);
-                d.appendChild(sp);
-                let b = document.createElement('button');
-                b.innerText = '...';
-                b.onclick = () => {
-                    editComplex({ value: currentValue, propertyPath });
-                };
-                d.appendChild(b);
-                wbRender.nodeElem.style.display = 'flex';
-                return d;
-            }
-            else {
-                let b = document.createElement('button');
-                b.style.height = 'calc(100% - 6px)';
-                b.style.position = 'relative';
-                b.style.display = 'flex';
-                b.style.justifyContent = 'center';
-                b.style.width = '20px';
-                b.style.boxSizing = 'content-box';
-                b.title = 'complex';
-                b.style.opacity = '0.2';
-                b.innerText = '...';
-                b.onclick = () => {
-                    editComplex({ value: currentValue, propertyPath });
-                };
-                wbRender.nodeElem.insertAdjacentElement('afterbegin', b);
-                wbRender.nodeElem.style.display = 'flex';
-            }
-            return null;
-        };
-        this._propertygrid.propertyNodeContextMenu.on((data) => {
-            ContextMenu.show([{
-                    title: 'edit complex value',
-                    action: async () => {
-                        editComplex(data);
-                    }
-                },
-                {
-                    title: 'remove complex value',
-                    action: async () => {
-                        this._propertygrid.setPropertyValue(data.propertyPath, undefined);
-                        this._propertygrid.refresh();
-                    }
-                }], data.event);
-        });
-    }
-    //Converter from TypscriptJsonSchema to our Property list...
-    async addPossibleCommands() {
-        let commands = Object.keys(this.scriptCommandsTypeInfo.definitions);
-        for (let c of commands) {
-            if (c == 'ScriptCommands')
-                continue;
-            let option = document.createElement('option');
-            option.innerText = c;
-            this._possibleCommands.add(option);
-        }
-    }
-    loadScript(script) {
-        this._script = script;
-        let commandListTreeItems = [];
-        for (let c of this._script.commands) {
-            commandListTreeItems.push(this.createTreeItem(c));
-        }
-        ;
-        this._commandListFancyTree = new Wunderbaum({
-            ...defaultOptions,
-            element: this._commandListDiv,
-            icon: false,
-            source: commandListTreeItems,
-            activate: (e) => {
-                this._propertygrid.selectedObject = e.node.data.data.item;
-            },
-            render: (e) => {
-                if (e.isNew) {
-                    let span = e.nodeElem;
-                    span.oncontextmenu = (ev) => {
-                        e.node.setActive();
-                        if (e.node.data.contextMenu) {
-                            e.node.data.contextMenu(ev, e.node.data, e.node);
-                        }
-                        ev.preventDefault();
-                        return false;
-                    };
-                }
-            },
-            dnd: {
-                guessDropEffect: true,
-                preventRecursion: true,
-                preventVoidMoves: false,
-                serializeClipboardData: false,
-                dragStart: (e) => {
-                    e.event.dataTransfer.effectAllowed = "move";
-                    e.event.dataTransfer.dropEffect = "move";
-                    return true;
-                },
-                dragEnter: (e) => {
-                    e.event.dataTransfer.dropEffect = 'move';
-                    return true;
-                },
-                dragOver: (e) => {
-                    e.event.dataTransfer.dropEffect = 'move';
-                },
-                drop: async (e) => {
-                    e.sourceNode.moveTo(e.node, e.region == 'before' ? 'before' : 'after');
-                }
-            }
-        });
-    }
-    createTreeItem(currentItem) {
-        let cti = {
-            title: currentItem.type,
-            data: { item: currentItem },
-            contextMenu: (e, data, node) => {
-                ContextMenu.show([{ title: 'Remove Item', action: (e) => node.remove() }], e);
-            }
-        };
-        return cti;
-    }
-    addItem() {
-        const cmdName = this._possibleCommands.value;
-        const command = { type: cmdName };
-        const ti = this.createTreeItem(command);
-        this._commandListFancyTree.addChildren(ti);
-    }
-    getScriptCommands() {
-        let children = this._commandListFancyTree.root.children;
-        return children.map(x => x.data.data.item);
-    }
-}
-customElements.define(SimpleScriptEditor.is, SimpleScriptEditor);

package/dist/interfaces/VisualizationUiHandler.d.ts

@@ -1,5 +0,0 @@
-export interface VisualizationUiHandler {
-    switchLanguage(language: string): any;
-    closeDialog(element: HTMLElement): any;
-    openDialog(): any;
-}

package/dist/interfaces/VisualizationUiHandler.js

@@ -1,2 +0,0 @@
-//dialog:{screenName: string, title: string, moveable: boolean, closeable: boolean, width: string, height: string, left: string, top: string}
-export {};

package/dist/services/BindingsService.d.ts

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

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