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

package/dist/components/SimpleScriptEditor.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.js";
+import { VisualizationShell } from "../interfaces/VisualizationShell.js";
+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/SimpleScriptEditor.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.js";
+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/helpers/BindingsHelper.d.ts

@@ -1,5 +1,5 @@
 import { VisualizationBinding } from "../interfaces/VisualizationBinding.js";
-import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
+import { BindingTarget } from "@node-projects/web-component-designer";
 import { State, VisualizationHandler } from "../interfaces/VisualizationHandler.js";
 export declare const bindingPrefixProperty = "bind-prop:";
 export declare const bindingPrefixAttribute = "bind-attr:";

package/dist/helpers/BindingsHelper.js

@@ -1,6 +1,5 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { PropertiesHelper } from "@node-projects/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
-import { BindingTarget } from "@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";
+import { PropertiesHelper, BindingTarget } from "@node-projects/web-component-designer";
 //;,[ are not allowed in bindings, so they could be used for a short form...
 export const bindingPrefixProperty = 'bind-prop:';
 export const bindingPrefixAttribute = 'bind-attr:';

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export * from './blockly/BlocklyToolbox.js';
 export * from './blockly/components/components.js';
 export * from './components/BindingsEditor.js';
 export * from './components/BindingsEditorHistoric.js';
-export * from './components/ScriptEditor.js';
+export * from './components/SimpleScriptEditor.js';
 export * from './components/VisualizationPropertyGrid.js';
 export * from './helpers/BindingsHelper.js';
 export * from './interfaces/IScriptMultiplexValue.js';

package/dist/index.js

@@ -4,7 +4,7 @@ export * from './blockly/BlocklyToolbox.js';
 export * from './blockly/components/components.js';
 export * from './components/BindingsEditor.js';
 export * from './components/BindingsEditorHistoric.js';
-export * from './components/ScriptEditor.js';
+export * from './components/SimpleScriptEditor.js';
 export * from './components/VisualizationPropertyGrid.js';
 export * from './helpers/BindingsHelper.js';
 export * from './interfaces/IScriptMultiplexValue.js';

package/dist/scripting/Script.d.ts

@@ -1,4 +1,4 @@
-import { ScriptCommands } from "./ScriptCommands";
+import { ScriptCommands } from "./ScriptCommands.js";
 export declare class Script {
     name?: string;
     commands: ScriptCommands[];

package/dist/scripting/ScriptSystem.d.ts

@@ -2,11 +2,9 @@ import { IScriptMultiplexValue } from "../interfaces/IScriptMultiplexValue.js";
 import { VisualisationElementScript } from "../interfaces/VisualisationElementScript.js";
 import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
 import { ScriptCommands } from "./ScriptCommands.js";
-import { VisualizationUiHandler } from "../interfaces/VisualizationUiHandler.js";
 export declare class ScriptSystem {
     _visualizationHandler: VisualizationHandler;
-    _visualizationUiHandler: VisualizationUiHandler;
-    constructor(visualizationHandler: VisualizationHandler, visualizationUiHandler: VisualizationUiHandler);
+    constructor(visualizationHandler: VisualizationHandler);
     execute(scriptCommands: ScriptCommands[], outerContext: {
         event: Event;
         element: Element;

package/dist/scripting/ScriptSystem.js

@@ -1,11 +1,10 @@
-import { sleep } from "@node-projects/web-component-designer/src/elements/helper/Helper.js";
+import { sleep } from "@node-projects/web-component-designer";
 import { generateEventCodeFromBlockly } from "../blockly/BlocklyJavascriptHelper.js";
 import { parseBindingString } from "../helpers/BindingsHelper.js";
 import Long from 'long';
 export class ScriptSystem {
     _visualizationHandler;
-    _visualizationUiHandler;
-    constructor(visualizationHandler, visualizationUiHandler) {
+    constructor(visualizationHandler) {
         this._visualizationHandler = visualizationHandler;
     }
     async execute(scriptCommands, outerContext) {
@@ -15,11 +14,6 @@ export class ScriptSystem {
     }
     async runScriptCommand(command, context) {
         switch (command.type) {
-            case 'CloseDialog': {
-                //const dialogdId = await this.getValue(c.dialogId, outerContext);                
-                this._visualizationUiHandler.closeDialog(context.element);
-                break;
-            }
             case 'OpenUrl': {
                 window.open(await this.getValue(command.url, context), command.target);
                 break;
@@ -35,11 +29,6 @@ export class ScriptSystem {
                 console[target](message);
                 break;
             }
-            case 'SwitchLanguage': {
-                const language = await this.getValue(command.language, context);
-                this._visualizationUiHandler.switchLanguage(language);
-                break;
-            }
             case 'ToggleSignalValue': {
                 const signal = await this.getValue(command.signal, context);
                 let state = await this._visualizationHandler.getState(signal);

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