@node-projects/web-component-designer-visualization-addons 0.1.40 → 0.1.42

package/dist/components/BindingsEditor.js

@@ -199,7 +199,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
         this._parseAttributesToProperties();
         this._assignEvents();
         this.twoWayPossible = false;
-        if (this._bindingTarget == BindingTarget.property)
+        if (this._bindingTarget == BindingTarget.property || this._bindingTarget == BindingTarget.attribute)
             this.twoWayPossible = true;
         if (this._binding) {
             this.twoWay = this._binding.mode == BindingMode.twoWay;

package/dist/helpers/BindingsHelper.d.ts

@@ -27,7 +27,8 @@ export declare class IndirectSignal {
     private disposed;
     private valueChangedCb;
     private visualizationHandler;
-    constructor(visualizationHandler: VisualizationHandler, id: string, valueChangedCb: (value: State) => void);
+    private element;
+    constructor(visualizationHandler: VisualizationHandler, id: string, valueChangedCb: (value: State) => void, element: Element);
     private parseIndirectBinding;
     handleValueChanged(value: any, index: number): void;
     dispose(): void;

package/dist/helpers/BindingsHelper.js

@@ -50,14 +50,16 @@ export class IndirectSignal {
     disposed;
     valueChangedCb;
     visualizationHandler;
-    constructor(visualizationHandler, id, valueChangedCb) {
+    element;
+    constructor(visualizationHandler, id, valueChangedCb, element) {
         this.visualizationHandler = visualizationHandler;
         this.valueChangedCb = valueChangedCb;
+        this.element = element;
         this.parseIndirectBinding(id);
         this.values = new Array(this.signals.length);
         for (let i = 0; i < this.signals.length; i++) {
             let cb = (id, value) => this.handleValueChanged(value.val, i);
-            this.unsubscribeList.push([cb, this.visualizationHandler.subscribeState(this.signals[i], cb)]);
+            this.unsubscribeList.push([cb, this.visualizationHandler.subscribeState(this.signals[i], cb, element)]);
         }
     }
     parseIndirectBinding(id) {
@@ -81,7 +83,7 @@ export class IndirectSignal {
             if (!this.disposed) {
                 this.combinedName = nm;
                 let cb = (id, value) => this.valueChangedCb(value);
-                this.unsubscribeTargetValue = [cb, this.visualizationHandler.subscribeState(nm, cb)];
+                this.unsubscribeTargetValue = [cb, this.visualizationHandler.subscribeState(nm, cb, this.element)];
             }
         }
     }
@@ -573,7 +575,7 @@ export class BindingsHelper {
             }
             else {
                 if (s.includes('{')) {
-                    let indirectSignal = new IndirectSignal(this._visualizationHandler, s, (value) => this.handleValueChanged(element, binding, value.val, valuesObject, i, signalVars, false));
+                    let indirectSignal = new IndirectSignal(this._visualizationHandler, s, (value) => this.handleValueChanged(element, binding, value.val, valuesObject, i, signalVars, false), element);
                     if (!cleanupCalls)
                         cleanupCalls = [];
                     cleanupCalls.push(() => indirectSignal.dispose());
@@ -605,7 +607,7 @@ export class BindingsHelper {
                     }
                     else {
                         const cb = (id, value) => this.handleValueChanged(element, binding, value.val, valuesObject, i, signalVars, false);
-                        unsubscribeList.push([s, cb, this._visualizationHandler.subscribeState(s, cb)]);
+                        unsubscribeList.push([s, cb, this._visualizationHandler.subscribeState(s, cb, element)]);
                         this._visualizationHandler.getState(s).then(x => this.handleValueChanged(element, binding, x?.val, valuesObject, i, signalVars, false));
                         if (binding[1].twoWay && i == 0) {
                             this.addTwoWayBinding(binding, element, v => this._visualizationHandler.setState(s, v));

package/dist/interfaces/VisualizationHandler.d.ts

@@ -14,7 +14,7 @@ type StateChangeHandler = (id: string, state: State) => void;
 export interface VisualizationHandler {
     getState(id: string): Promise<State>;
     setState(id: string, val: State | StateValue, ack?: boolean): Promise<void>;
-    subscribeState(id: string, cb: StateChangeHandler): any;
+    subscribeState(id: string, cb: StateChangeHandler, element: Element): any;
     unsubscribeState(id: string, cb: StateChangeHandler, info: any): void;
     getObject(id: string): Promise<Signal>;
     getHistoricData(id: string, config: any): any;

package/dist/services/VisualizationBindingsService.js

@@ -1,4 +1,4 @@
-import { BindingMode, PropertiesHelper } from "@node-projects/web-component-designer";
+import { BindingMode, BindingTarget, PropertiesHelper } from "@node-projects/web-component-designer";
 export class VisualizationBindingsService {
     constructor(bindingsHelper) {
         this._bindingsHelper = bindingsHelper;
@@ -7,7 +7,7 @@ export class VisualizationBindingsService {
     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],
+            targetName: (x[1].target === BindingTarget.css || x[1].target === BindingTarget.attribute) ? PropertiesHelper.camelToDashCase(x[0]) : x[0],
             target: x[1].target,
             mode: x[1].twoWay ? BindingMode.twoWay : BindingMode.oneWay,
             invert: x[1].inverted,

package/package.json

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

package/dist/components/PropertyGridExt.js

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

package/dist/components/ScriptEditor.d.ts

@@ -1,28 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-import { Script } from "../scripting/Script.js";
-import { ServiceContainer } from "@node-projects/web-component-designer";
-import { VisualizationHandler } from "../interfaces/VisualizationHandler";
-import { VisualizationShell } from "../interfaces/VisualizationShell";
-import '@node-projects/splitview.webcomponent';
-export declare class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    static readonly is = "node-projects-simple-script-editor";
-    serviceContainer: ServiceContainer;
-    visualizationHandler: VisualizationHandler;
-    visualizationShell: VisualizationShell;
-    scriptCommandsTypeInfo: any;
-    propertiesTypeInfo: any;
-    private _script;
-    private _commandListDiv;
-    private _commandListFancyTree;
-    private _possibleCommands;
-    private _propertygrid;
-    constructor();
-    ready(): Promise<void>;
-    private addPossibleCommands;
-    loadScript(script: Script): void;
-    private createTreeItem;
-    addItem(): void;
-    getScriptCommands(): any[];
-}

package/dist/components/ScriptEditor.js

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

package/dist/interfaces/VisualizationUiHandler.d.ts

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

package/dist/interfaces/VisualizationUiHandler.js

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

package/dist/services/BindingsService.d.ts

@@ -1,11 +0,0 @@
-import { BindingTarget, IBinding, IBindingService, IDesignItem } from "@node-projects/web-component-designer";
-import { BindingsHelper } from "../helpers/BindingsHelper.js";
-export declare class BindingsService implements IBindingService {
-    constructor(bindingsHelper: BindingsHelper);
-    private _bindingsHelper;
-    getBindings(designItem: IDesignItem): (IBinding & {
-        converter: Record<string, any>;
-    })[];
-    setBinding(designItem: IDesignItem, binding: IBinding): boolean;
-    clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
-}

package/dist/services/BindingsService.js

@@ -1,46 +0,0 @@
-import { BindingMode, PropertiesHelper } from "@node-projects/web-component-designer";
-export class BindingsService {
-    constructor(bindingsHelper) {
-        this._bindingsHelper = bindingsHelper;
-    }
-    _bindingsHelper;
-    getBindings(designItem) {
-        const iobBindings = Array.from(this._bindingsHelper.getBindings(designItem.element));
-        return iobBindings.map(x => ({
-            targetName: x[1].target == 'css' ? PropertiesHelper.camelToDashCase(x[0]) : x[0],
-            target: x[1].target,
-            mode: x[1].twoWay ? BindingMode.twoWay : BindingMode.oneWay,
-            invert: x[1].inverted,
-            bindableObjectNames: x[1].signal.split(';'),
-            expression: x[1].expression,
-            expressionTwoWay: x[1].expressionTwoWay,
-            converter: x[1].converter,
-            type: x[1].type,
-            changedEvents: x[1].events,
-            historic: x[1].historic
-        }));
-    }
-    setBinding(designItem, binding) {
-        let bnd = { signal: binding.bindableObjectNames.join(';'), target: binding.target };
-        bnd.inverted = binding.invert;
-        bnd.twoWay = binding.mode == BindingMode.twoWay;
-        bnd.expression = binding.expression;
-        bnd.expressionTwoWay = binding.expressionTwoWay;
-        //@ts-ignore
-        bnd.historic = binding.historic;
-        bnd.type = binding.type;
-        bnd.converter = binding.converters;
-        bnd.target = binding.target;
-        bnd.events = binding.changedEvents;
-        let serializedBnd = this._bindingsHelper.serializeBinding(designItem.element, binding.targetName, bnd);
-        let group = designItem.openGroup('edit_binding');
-        designItem.setAttribute(serializedBnd[0], serializedBnd[1]);
-        group.commit();
-        return true;
-    }
-    clearBinding(designItem, propertyName, propertyTarget) {
-        const name = this._bindingsHelper.getBindingAttributeName(designItem.element, propertyName, propertyTarget);
-        designItem.removeAttribute(name);
-        return true;
-    }
-}