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

package/dist/blockly/BlocklyJavascriptHelper.d.ts

@@ -1,2 +1,2 @@
 import './components/components.js';
-export declare function generateEventCodeFromBlockly(data: any): Promise<(event: Event, shadowRoot: ShadowRoot) => void>;
+export declare function generateEventCodeFromBlockly(data: any): Promise<(event: Event, shadowRoot: ShadowRoot, parameters: Record<string, any>) => void>;

package/dist/blockly/BlocklyJavascriptHelper.js

@@ -1,7 +1,7 @@
 //import Blockly from 'blockly';
 import './components/components.js';
 //TODO: remove imports, only leave Runtime
-const prefix = `function extractPart(obj: any, propertyPath: string) {
+const prefix = `function extractPart(obj, propertyPath) {
     let retVal = obj;
     for (let p of propertyPath.split('.')) {
         retVal = retVal?.[p];
@@ -9,7 +9,7 @@ const prefix = `function extractPart(obj: any, propertyPath: string) {
     return retVal;
 }
 
-export async function run(eventData, shadowRoot) {
+export async function run(eventData, shadowRoot, parameters) {
 `;
 const postfix = `}`;
 export async function generateEventCodeFromBlockly(data) {
@@ -24,6 +24,8 @@ export async function generateEventCodeFromBlockly(data) {
     //@ts-ignore
     Blockly.JavaScript.addReservedWords('extractPart');
     //@ts-ignore
+    Blockly.JavaScript.addReservedWords('parameters');
+    //@ts-ignore
     Blockly.JavaScript.addReservedWords('IOB');
     //@ts-ignore
     Blockly.JavaScript.addReservedWords('RUNTIME');

package/dist/blockly/BlocklyScriptEditor.js

@@ -11,6 +11,7 @@ export class BlocklyScriptEditor extends BaseCustomWebComponentConstructorAppend
             position: absolute;
             height: 100%;
             width: 100%;
+            display: block;
         }`;
     static is = 'node-projects-blockly-script-editor';
     blocklyDiv;

package/dist/blockly/components/GetParameter.js

@@ -15,7 +15,7 @@ Blockly.Blocks['get_parameter'] = {
 Blockly.JavaScript['get_parameter'] = function (block, generator) {
     //@ts-ignore
     const name = Blockly.JavaScript.valueToCode(block, 'NAME', Blockly.JavaScript.ORDER_ATOMIC);
-    const code = `${name}`;
+    const code = `parameters[${name}]`;
     //@ts-ignore
     return [code, Blockly.JavaScript.ORDER_NONE];
 };

package/dist/components/EventAssignment.js

@@ -41,17 +41,17 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
     static template = html `
         <template repeat:item="[[this.events]]">
             <div @click="[[this._ctxMenu(event, item)]]" @contextmenu="[[this._ctxMenu(event, item)]]" class="rect" css:background-color="[[this._getScriptTypeColor(item)]]"></div>
-            <a @click="[[this._showContextMenuAssignScript(event, item, false)]]" title="[[item.name]]">[[item.name]]</a>
+            <a @click="[[this._showContextMenuAssignScript(event, item, false)]]" @contextmenu="[[this._ctxMenu(event, item)]]" title="[[item.name]]">[[item.name]]</a>
             <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">`;
     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">
-                <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>`;
+        <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">
+            <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 = {
         'js': 'purple',
         'blockly': 'yellow',

package/dist/scripting/ScriptSystem.js

@@ -192,12 +192,24 @@ export class ScriptSystem {
                                 e.addEventListener(evtName, async (evt) => {
                                     if (!compiledFunc)
                                         compiledFunc = await generateEventCodeFromBlockly(scriptObj);
-                                    compiledFunc(evt, shadowRoot);
+                                    compiledFunc(evt, shadowRoot, scriptObj.parameters);
                                 });
                             }
                             else {
                                 if (assignExternalScript)
                                     assignExternalScript(e, evtName, scriptObj);
+                                else {
+                                    if ('name' in scriptObj) {
+                                        //@ts-ignore
+                                        const nm = scriptObj.name;
+                                        e.addEventListener(evtName, (evt) => {
+                                            if (!jsObject[nm])
+                                                console.warn('javascript function named: ' + nm + ' not found, maybe missing a "export" ?');
+                                            else
+                                                jsObject[nm](evt, e, shadowRoot, instance, scriptObj.parameters);
+                                        });
+                                    }
+                                }
                             }
                         }
                         else {

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

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;
-    }
-}