@node-projects/web-component-designer-visualization-addons 0.1.44 → 0.1.45

package/dist/components/PropertyGridExt.js

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

package/dist/components/ScriptEditor.d.ts

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

@@ -0,0 +1,254 @@
+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/components/VisualizationPropertyGrid.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="wunderbaum" />
 import { IProperty, PropertyGrid } from '@node-projects/propertygrid.webcomponent';
 import { WbRenderEventType } from "types";
 import { VisualizationHandler } from '../interfaces/VisualizationHandler';

package/dist/helpers/BindingsHelper.js

@@ -639,7 +639,11 @@ export class BindingsHelper {
             const evt = element[e];
             if (evt instanceof TypedEvent) {
                 evt.on(() => {
-                    let v = element[binding[0]];
+                    let v;
+                    if (binding[1].target == BindingTarget.attribute)
+                        v = element.getAttribute(binding[0]);
+                    else
+                        v = element[binding[0]];
                     v = BindingsHelper.parseValueWithType(v, binding);
                     if (binding[1].compiledExpressionTwoWay)
                         v = binding[1].compiledExpressionTwoWay(v);
@@ -648,7 +652,11 @@ export class BindingsHelper {
             }
             else {
                 element.addEventListener(e, (evt) => {
-                    let v = element[binding[0]];
+                    let v;
+                    if (binding[1].target == BindingTarget.attribute)
+                        v = element.getAttribute(binding[0]);
+                    else
+                        v = element[binding[0]];
                     v = BindingsHelper.parseValueWithType(v, binding);
                     if (binding[1].compiledExpressionTwoWay)
                         v = binding[1].compiledExpressionTwoWay(v);

package/dist/interfaces/VisualizationUiHandler.d.ts

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

package/dist/interfaces/VisualizationUiHandler.js

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

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/package.json

@@ -1,7 +1,7 @@
 {
   "description": "web-component-designer addon for visualizations",
   "name": "@node-projects/web-component-designer-visualization-addons",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",