@node-projects/web-component-designer-visualization-addons 0.1.18 → 0.1.20

package/dist/components/EventAssignment.d.ts

@@ -26,6 +26,10 @@ export declare class EventAssignment extends BaseCustomWebComponentConstructorAp
     initialize(visualizationHandler: VisualizationHandler, visualizationShell: VisualizationShell, scriptCommandsTypeInfo: any, propertiesTypeInfo: any): void;
     set instanceServiceContainer(value: InstanceServiceContainer);
     protected _createControlsForScript(eventItem: IEvent): any;
+    protected _getScriptName(eventItem: IEvent): any;
+    protected _changeScriptName(e: KeyboardEvent, eventItem: IEvent): Promise<void>;
+    protected _getRelativeSignalsPath(eventItem: IEvent): any;
+    protected _changeRelativeSignalsPath(e: KeyboardEvent, eventItem: IEvent): Promise<void>;
     protected _hasParameters(eventItem: IEvent): boolean;
     protected _getScriptTypeColor(eventItem: IEvent): any;
     protected _getScriptType(eventItem: IEvent): scriptType;

package/dist/components/EventAssignment.js

@@ -45,11 +45,11 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
             <div>[[this._createControlsForScript(item)]]</div>
         </template>
         <span style="grid-column: 1 / span 3; margin-top: 8px; margin-left: 3px;">add event:</span>
-        <input id="addEventInput" style="grid-column: 1 / span 3; margin: 5px;" @keypress=[[this._addEvent(event)]] type="text">`;
+        <input id="addEventInput" style="grid-column: 1 / span 3; margin: 5px;" @keypress="[[this._addEvent(event)]]" type="text">`;
     static editRowTemplate = html `
         <div style="display: flex; justify-content: flex-end;">
-            <input hidden="[[this._getScriptType(item) !== 'js']]" placeholder="name" title="name" style="min-width: 50px; flex-basis: 30px; flex-grow: 2;" class="mth" type="text">
-            <input placeholder="relative signals path" title="relative signals path" style="min-width: 50px; flex-basis: 20px; flex-grow: 1;" class="mth" type="text">
+            <input value="[[this._getScriptName(item)]]" @keypress="[[this._changeScriptName(event, item)]]" hidden="[[this._getScriptType(item) !== 'js']]" placeholder="name" title="name" style="min-width: 50px; flex-basis: 30px; flex-grow: 2;" class="mth" type="text">
+            <input value="[[this._getRelativeSignalsPath(item)]]" @keypress="[[this._changeRelativeSignalsPath(event, item)]]" placeholder="relative signals path" title="relative signals path" style="min-width: 50px; flex-basis: 20px; flex-grow: 1;" class="mth" type="text">
             <button css:background="[[this._hasParameters(item) ? 'lime' : '']]" style="display: flex; padding: 0; flex-grow: 0;" title="parameter" @click="[[this._editParameter(event, item)]]">p</button>
         </div>`;
     static scriptTypeColors = {
@@ -97,6 +97,68 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
         const ctl = this.constructor.editRowTemplate.content.cloneNode(true);
         return ctl;
     }
+    _getScriptName(eventItem) {
+        if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) {
+            const val = this.selectedItems[0].getAttribute('@' + eventItem.name);
+            if (val[0] === '{') {
+                if (val.includes('name')) {
+                    const parsed = JSON.parse(val);
+                    return parsed.name;
+                }
+            }
+            else {
+                return val;
+            }
+        }
+        return null;
+    }
+    async _changeScriptName(e, eventItem) {
+        if (e.key == 'Enter') {
+            if (this.selectedItems && this.selectedItems.length) {
+                if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) {
+                    const newValue = e.target.value;
+                    const val = this.selectedItems[0].getAttribute('@' + eventItem.name);
+                    if (val.startsWith('{')) {
+                        const parsed = JSON.parse(val);
+                        parsed.name = newValue;
+                        this._selectedItems[0].setAttribute('@' + eventItem.name, JSON.stringify(parsed));
+                    }
+                    else {
+                        this._selectedItems[0].setAttribute('@' + eventItem.name, newValue);
+                    }
+                }
+            }
+        }
+    }
+    _getRelativeSignalsPath(eventItem) {
+        if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) {
+            const val = this.selectedItems[0].getAttribute('@' + eventItem.name);
+            if (val[0] === '{' && val.includes('relativeSignalsPath')) {
+                const parsed = JSON.parse(val);
+                return parsed.relativeSignalsPath;
+            }
+        }
+        return null;
+    }
+    async _changeRelativeSignalsPath(e, eventItem) {
+        if (e.key == 'Enter') {
+            if (this.selectedItems && this.selectedItems.length) {
+                if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) {
+                    const newValue = e.target.value;
+                    const val = this.selectedItems[0].getAttribute('@' + eventItem.name);
+                    if (val.startsWith('{')) {
+                        const parsed = JSON.parse(val);
+                        parsed.relativeSignalsPath = newValue;
+                        this._selectedItems[0].setAttribute('@' + eventItem.name, JSON.stringify(parsed));
+                    }
+                    else {
+                        let obj = { name: val, relativeSignalsPath: newValue };
+                        this._selectedItems[0].setAttribute('@' + eventItem.name, JSON.stringify(obj));
+                    }
+                }
+            }
+        }
+    }
     _hasParameters(eventItem) {
         if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) {
             const val = this.selectedItems[0].getAttribute('@' + eventItem.name);

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/SimpleScriptEditor.js

@@ -4,53 +4,53 @@ 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 wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' with { 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 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 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-visualization-simple-script-editor';
     serviceContainer;
@@ -100,55 +100,60 @@ export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend
         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';
+            //@ts-ignore
+            if (!property.specialAllreadyAdded) {
+                //@ts-ignore
+                property.specialAllreadyAdded = true;
+                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 property value';
+                    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;
         };

package/dist/components/VisualizationPropertyGrid.js

@@ -6,6 +6,11 @@ export class VisualizationPropertyGrid extends PropertyGrid {
     visualizationHandler;
     visualizationShell;
     async getEditorForType(property, currentValue, propertyPath, wbRender, additionalInfo) {
+        if (this.getSpecialEditorForType) {
+            let edt = await this.getSpecialEditorForType(property, currentValue, propertyPath, wbRender, additionalInfo);
+            if (edt)
+                return edt;
+        }
         switch (property.format) {
             case 'screen': {
                 let editor = document.createElement('select');

package/dist/interfaces/IScriptMultiplexValue.d.ts

@@ -3,7 +3,7 @@ export declare class IScriptMultiplexValue {
     * signal - read the value from a Signal
     * property - read the value from a property of the customControl (not usable in screens)
     * event - read the value of a property of the event object
-    * parameter - a paremter you hand over
+    * parameter - a parameter you hand over
     */
     source: 'signal' | 'property' | 'event' | 'parameter';
     /**

package/dist/interfaces/IScriptMultiplexValue.js

@@ -3,7 +3,7 @@ export class IScriptMultiplexValue {
     * signal - read the value from a Signal
     * property - read the value from a property of the customControl (not usable in screens)
     * event - read the value of a property of the event object
-    * parameter - a paremter you hand over
+    * parameter - a parameter you hand over
     */
     source;
     /**

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/scripting/ScriptSystem.d.ts

@@ -7,6 +7,7 @@ type contextType = {
     element: Element;
     root: HTMLElement;
     parameters?: Record<string, any>;
+    relativeSignalsPath?: string;
 };
 export declare class ScriptSystem {
     _visualizationHandler: VisualizationHandler;
@@ -14,6 +15,7 @@ export declare class ScriptSystem {
     execute(scriptCommands: ScriptCommands[], outerContext: contextType): Promise<void>;
     runScriptCommand<T extends ScriptCommands>(command: T, context: contextType): Promise<void>;
     getValue<T>(value: string | number | boolean | IScriptMultiplexValue, outerContext: contextType): Promise<any>;
+    getSignaName(name: string, outerContext: contextType): string;
     static extractPart(obj: any, propertyPath: string): any;
     assignAllScripts(source: string, javascriptCode: string, shadowRoot: ShadowRoot, instance: HTMLElement, assignExternalScript?: (element: Element, event: string, scriptData: any) => void): Promise<VisualisationElementScript>;
 }

package/dist/scripting/ScriptSystem.js

@@ -31,32 +31,32 @@ export class ScriptSystem {
             }
             case 'ToggleSignalValue': {
                 const signal = await this.getValue(command.signal, context);
-                let state = await this._visualizationHandler.getState(signal);
-                await this._visualizationHandler.setState(signal, !state?.val);
+                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
+                await this._visualizationHandler.setState(this.getSignaName(signal, context), !state?.val);
                 break;
             }
             case 'SetSignalValue': {
                 const signal = await this.getValue(command.signal, context);
-                await this._visualizationHandler.setState(signal, await this.getValue(command.value, context));
+                await this._visualizationHandler.setState(this.getSignaName(signal, context), await this.getValue(command.value, context));
                 break;
             }
             case 'IncrementSignalValue': {
                 const signal = await this.getValue(command.signal, context);
-                let state = await this._visualizationHandler.getState(signal);
-                await this._visualizationHandler.setState(signal, state.val + await this.getValue(command.value, context));
+                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
+                await this._visualizationHandler.setState(this.getSignaName(signal, context), state.val + await this.getValue(command.value, context));
                 break;
             }
             case 'DecrementSignalValue': {
                 const signal = await this.getValue(command.signal, context);
-                let state = await this._visualizationHandler.getState(signal);
-                await this._visualizationHandler.setState(signal, state.val - await this.getValue(command.value, context));
+                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
+                await this._visualizationHandler.setState(this.getSignaName(signal, context), state.val - await this.getValue(command.value, context));
                 break;
             }
             case 'CalculateSignalValue': {
                 const formula = await this.getValue(command.formula, context);
                 const targetSignal = await this.getValue(command.targetSignal, context);
                 let parsed = parseBindingString(formula);
-                let results = await Promise.all(parsed.signals.map(x => this._visualizationHandler.getState(x)));
+                let results = await Promise.all(parsed.signals.map(x => this._visualizationHandler.getState(this.getSignaName(x, context))));
                 let nm = '';
                 for (let i = 0; i < parsed.parts.length - 1; i++) {
                     let v = results[i].val;
@@ -65,32 +65,32 @@ export class ScriptSystem {
                     nm += v + parsed.parts[i + 1];
                 }
                 let result = eval(nm);
-                await this._visualizationHandler.setState(targetSignal, result);
+                await this._visualizationHandler.setState(this.getSignaName(targetSignal, context), result);
                 break;
             }
             case 'SetBitInSignal': {
                 const signal = await this.getValue(command.signal, context);
-                let state = await this._visualizationHandler.getState(signal);
+                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
                 let mask = Long.fromNumber(1).shiftLeft(command.bitNumber);
                 const newVal = Long.fromNumber(state.val).or(mask).toNumber();
-                await this._visualizationHandler.setState(signal, newVal);
+                await this._visualizationHandler.setState(this.getSignaName(signal, context), newVal);
                 break;
             }
             case 'ClearBitInSignal': {
                 const signal = await this.getValue(command.signal, context);
-                let state = await this._visualizationHandler.getState(signal);
+                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
                 let mask = Long.fromNumber(1).shiftLeft(command.bitNumber);
                 mask.negate();
                 const newVal = Long.fromNumber(state.val).and(mask).toNumber();
-                await this._visualizationHandler.setState(signal, newVal);
+                await this._visualizationHandler.setState(this.getSignaName(signal, context), newVal);
                 break;
             }
             case 'ToggleBitInSignal': {
                 const signal = await this.getValue(command.signal, context);
-                let state = await this._visualizationHandler.getState(signal);
+                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
                 let mask = Long.fromNumber(1).shiftLeft(command.bitNumber);
                 const newVal = Long.fromNumber(state.val).xor(mask).toNumber();
-                await this._visualizationHandler.setState(signal, newVal);
+                await this._visualizationHandler.setState(this.getSignaName(signal, context), newVal);
                 break;
             }
             case 'Javascript': {
@@ -138,7 +138,7 @@ export class ScriptSystem {
                     return outerContext.root[value.name];
                 }
                 case 'signal': {
-                    let sng = await this._visualizationHandler.getState(value.name);
+                    let sng = await this._visualizationHandler.getState(this.getSignaName(value.name, outerContext));
                     return sng.val;
                 }
                 case 'event': {
@@ -154,6 +154,11 @@ export class ScriptSystem {
         }
         return value;
     }
+    getSignaName(name, outerContext) {
+        if (name[0] === '.')
+            return outerContext.relativeSignalsPath + name;
+        return name;
+    }
     static extractPart(obj, propertyPath) {
         let retVal = obj;
         for (let p of propertyPath.split('.')) {
@@ -185,7 +190,7 @@ export class ScriptSystem {
                         if (script[0] == '{') {
                             let scriptObj = JSON.parse(script);
                             if ('commands' in scriptObj) {
-                                e.addEventListener(evtName, (evt) => this.execute(scriptObj.commands, { event: evt, element: e, root: instance, parameters: scriptObj.parameters }));
+                                e.addEventListener(evtName, (evt) => this.execute(scriptObj.commands, { event: evt, element: e, root: instance, parameters: scriptObj.parameters, relativeSignalsPath: scriptObj.relativeSignalsPath }));
                             }
                             else if ('blocks' in scriptObj) {
                                 let compiledFunc = null;

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