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

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

@@ -0,0 +1,12 @@
+/// <reference types="wunderbaum" />
+import { IProperty, PropertyGrid } from '@node-projects/propertygrid.webcomponent';
+import { WbRenderEventType } from "types";
+import { VisualizationHandler } from '../interfaces/VisualizationHandler';
+import { VisualizationShell } from '../interfaces/VisualizationShell';
+import { ServiceContainer } from '@node-projects/web-component-designer';
+export declare class VisualizationPropertyGrid extends PropertyGrid {
+    serviceContainer: ServiceContainer;
+    visualizationHandler: VisualizationHandler;
+    visualizationShell: VisualizationShell;
+    getEditorForType(property: IProperty, currentValue: any, propertyPath: string, wbRender: WbRenderEventType, additionalInfo?: any): Promise<HTMLElement>;
+}

package/dist/components/VisualizationPropertyGrid.js

@@ -0,0 +1,104 @@
+import { PropertyGrid } from '@node-projects/propertygrid.webcomponent';
+import { BindableObjectsBrowser } from '@node-projects/web-component-designer-widgets-wunderbaum';
+import { CodeViewMonaco } from '@node-projects/web-component-designer-codeview-monaco';
+export class VisualizationPropertyGrid extends PropertyGrid {
+    serviceContainer;
+    visualizationHandler;
+    visualizationShell;
+    async getEditorForType(property, currentValue, propertyPath, wbRender, additionalInfo) {
+        switch (property.format) {
+            case 'screen': {
+                let editor = document.createElement('select');
+                editor.style.width = '100%';
+                for (let v of await this.visualizationHandler.getAllNames('screen')) {
+                    const op = document.createElement('option');
+                    op.value = v;
+                    op.innerText = v;
+                    editor.appendChild(op);
+                }
+                editor.onchange = () => {
+                    this.setPropertyValue(propertyPath, editor.value);
+                };
+                editor.value = currentValue;
+                return editor;
+            }
+            case 'signal': {
+                let cnt = document.createElement('div');
+                cnt.style.display = 'flex';
+                let inp = document.createElement('input');
+                inp.value = currentValue ?? '';
+                inp.style.flexGrow = '1';
+                inp.style.width = '0';
+                inp.onchange = (e) => this.setPropertyValue(propertyPath, inp.value);
+                inp.onfocus = (e) => {
+                    inp.selectionStart = 0;
+                    inp.selectionEnd = inp.value?.length;
+                };
+                cnt.appendChild(inp);
+                let btn = document.createElement('button');
+                btn.textContent = '...';
+                btn.onclick = async () => {
+                    let b = new BindableObjectsBrowser();
+                    b.initialize(this.serviceContainer);
+                    b.title = 'select signal...';
+                    const abortController = new AbortController();
+                    b.objectDoubleclicked.on(() => {
+                        abortController.abort();
+                        inp.value = b.selectedObject.fullName;
+                        this.setPropertyValue(propertyPath, inp.value);
+                    });
+                    let res = await this.visualizationShell.openConfirmation(b, { x: 100, y: 100, width: 400, height: 300, parent: this, abortSignal: abortController.signal });
+                    if (res) {
+                        inp.value = b.selectedObject.fullName;
+                        this.setPropertyValue(propertyPath, inp.value);
+                    }
+                };
+                cnt.appendChild(btn);
+                return cnt;
+            }
+            case 'html':
+            case 'script': {
+                let editor = document.createElement('div');
+                editor.style.boxSizing = 'border-box';
+                editor.style.width = '100%';
+                editor.style.display = 'flex';
+                let inp = document.createElement('textarea');
+                inp.style.boxSizing = 'border-box';
+                inp.value = currentValue ?? '';
+                inp.style.width = '100%';
+                inp.onblur = e => { this.setPropertyValue(propertyPath, inp.value); };
+                editor.appendChild(inp);
+                let btn = document.createElement('button');
+                btn.innerHTML = '...';
+                btn.style.boxSizing = 'border-box';
+                btn.onclick = async () => {
+                    let cvm = new CodeViewMonaco();
+                    if (property.format == 'html') {
+                        cvm.language = 'html';
+                    }
+                    else {
+                        let monacoInfo = {
+                            content: `declare global {
+                            var context: { event: Event, element: Element };
+                        }`, filePath: 'global.d.ts'
+                        };
+                        //@ts-ignore
+                        monaco.languages.typescript.typescriptDefaults.setExtraLibs([monacoInfo]);
+                        cvm.language = 'javascript';
+                    }
+                    cvm.code = inp.value;
+                    cvm.style.position = 'relative';
+                    let res = await this.visualizationShell.openConfirmation(cvm, { x: 200, y: 200, width: 600, height: 400, parent: this });
+                    if (res) {
+                        inp.value = cvm.getText();
+                        this.setPropertyValue(propertyPath, inp.value);
+                    }
+                };
+                editor.appendChild(btn);
+                return editor;
+            }
+        }
+        return super.getEditorForType(property, currentValue, propertyPath, wbRender, additionalInfo);
+    }
+}
+customElements.define("node-projects-visualization-property-grid", VisualizationPropertyGrid);

package/dist/helpers/BindingsHelper.d.ts

@@ -0,0 +1,47 @@
+import { VisualizationBinding } from "../interfaces/VisualizationBinding.js";
+import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
+import { State, VisualizationHandler } from "../interfaces/VisualizationHandler.js";
+export declare const bindingPrefixProperty = "bind-prop:";
+export declare const bindingPrefixAttribute = "bind-attr:";
+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 bindingsInCssRegex: RegExp;
+export type namedBinding = [name: string, binding: VisualizationBinding];
+export declare function isLit(element: Element): boolean;
+export declare function parseBindingString(id: string): {
+    parts: string[];
+    signals: string[];
+};
+export declare class IndirectSignal {
+    private parts;
+    private signals;
+    private values;
+    private unsubscribeList;
+    private unsubscribeTargetValue;
+    private combinedName;
+    private disposed;
+    private valueChangedCb;
+    private visualizationHandler;
+    constructor(visualizationHandler: VisualizationHandler, id: string, valueChangedCb: (value: State) => void);
+    private parseIndirectBinding;
+    handleValueChanged(value: any, index: number): void;
+    dispose(): void;
+    setState(value: any): void;
+}
+export declare class BindingsHelper {
+    _visualizationHandler: VisualizationHandler;
+    constructor(visualizationHandler: VisualizationHandler);
+    parseBinding(element: Element, name: string, value: string, bindingTarget: BindingTarget, prefix: string): namedBinding;
+    serializeBinding(element: Element, targetName: string, binding: VisualizationBinding): [name: string, value: string];
+    getBindingAttributeName(element: Element, propertyName: string, propertyTarget: BindingTarget): string;
+    getBindings(element: Element): Generator<namedBinding, void, unknown>;
+    applyAllBindings(rootElement: ParentNode, relativeSignalPath: string, root: HTMLElement): (() => void)[];
+    applyBinding(element: Element, binding: namedBinding, relativeSignalPath: string, root: HTMLElement): () => void;
+    private addTwoWayBinding;
+    private static parseValueWithType;
+    handleValueChanged(element: Element, binding: namedBinding, value: any, valuesObject: any[], index: number, signalVarNames: string[], noParse: boolean): void;
+    static camelToDotCase(text: string): string;
+    static dotToCamelCase(text: string): string;
+}