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

package/dist/blockly/BlocklyToolbox.d.ts

@@ -22,9 +22,9 @@ declare const _default: {
                     };
                 };
                 OID?: undefined;
+                NAME?: undefined;
                 PROPERTYPATH?: undefined;
                 SELECTOR?: undefined;
-                NAME?: undefined;
             };
         } | {
             kind: string;
@@ -39,15 +39,15 @@ declare const _default: {
                     };
                 };
                 SCREEN?: undefined;
+                NAME?: undefined;
                 PROPERTYPATH?: undefined;
                 SELECTOR?: undefined;
-                NAME?: undefined;
             };
         } | {
             kind: string;
             type: string;
             inputs: {
-                PROPERTYPATH: {
+                NAME: {
                     shadow: {
                         type: string;
                         fields: {
@@ -57,14 +57,14 @@ declare const _default: {
                 };
                 SCREEN?: undefined;
                 OID?: undefined;
+                PROPERTYPATH?: undefined;
                 SELECTOR?: undefined;
-                NAME?: undefined;
             };
         } | {
             kind: string;
             type: string;
             inputs: {
-                SELECTOR: {
+                PROPERTYPATH: {
                     shadow: {
                         type: string;
                         fields: {
@@ -74,14 +74,14 @@ declare const _default: {
                 };
                 SCREEN?: undefined;
                 OID?: undefined;
-                PROPERTYPATH?: undefined;
                 NAME?: undefined;
+                SELECTOR?: undefined;
             };
         } | {
             kind: string;
             type: string;
             inputs: {
-                NAME: {
+                SELECTOR: {
                     shadow: {
                         type: string;
                         fields: {
@@ -91,8 +91,8 @@ declare const _default: {
                 };
                 SCREEN?: undefined;
                 OID?: undefined;
+                NAME?: undefined;
                 PROPERTYPATH?: undefined;
-                SELECTOR?: undefined;
             };
         })[];
         custom?: undefined;

package/dist/blockly/BlocklyToolbox.js

@@ -70,6 +70,20 @@ export default {
                         },
                     },
                 },
+                {
+                    kind: 'block',
+                    type: 'get_parameter',
+                    inputs: {
+                        NAME: {
+                            shadow: {
+                                type: 'text',
+                                fields: {
+                                    TEXT: '',
+                                },
+                            },
+                        },
+                    },
+                },
                 {
                     kind: 'block',
                     type: 'get_sub_property',

package/dist/blockly/components/GetParameter.js

@@ -0,0 +1,21 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['get_parameter'] = {
+    init: function () {
+        this.appendValueInput('NAME')
+            .setCheck("String")
+            //@ts-ignore
+            .appendField('get_parameter');
+        this.setInputsInline(true);
+        this.setOutput(true, null);
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['get_parameter'] = function (block, generator) {
+    //@ts-ignore
+    const name = Blockly.JavaScript.valueToCode(block, 'NAME', Blockly.JavaScript.ORDER_ATOMIC);
+    const code = `${name}`;
+    //@ts-ignore
+    return [code, Blockly.JavaScript.ORDER_NONE];
+};

package/dist/blockly/components/components.d.ts

@@ -1,6 +1,7 @@
 import './fields/FieldObjectId.js';
 import './Console.js';
 import './Debugger.js';
+import './GetParameter.js';
 import './GetState.js';
 import './GetSubProperty.js';
 import './OpenScreen.js';

package/dist/blockly/components/components.js

@@ -1,6 +1,7 @@
 import './fields/FieldObjectId.js';
 import './Console.js';
 import './Debugger.js';
+import './GetParameter.js';
 import './GetState.js';
 import './GetSubProperty.js';
 import './OpenScreen.js';

package/dist/components/EventAssignment.d.ts

@@ -0,0 +1,47 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+import { IContextMenuItem, IDesignItem, IEvent, InstanceServiceContainer } from "@node-projects/web-component-designer";
+import { VisualizationShell } from "../interfaces/VisualizationShell.js";
+import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
+type scriptType = 'jsdirect' | 'js' | 'script' | 'blockly' | 'none';
+export declare class EventAssignment extends BaseCustomWebComponentConstructorAppend {
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    static editRowTemplate: HTMLTemplateElement;
+    static scriptTypeColors: {
+        js: string;
+        blockly: string;
+        script: string;
+    };
+    static readonly is = "node-projects-visualization-event-assignment";
+    constructor();
+    ready(): void;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
+    private _selectedItems;
+    private _visualizationHandler;
+    private _visualizationShell;
+    private _scriptCommandsTypeInfo;
+    private _propertiesTypeInfo;
+    events: IEvent[];
+    initialize(visualizationHandler: VisualizationHandler, visualizationShell: VisualizationShell, scriptCommandsTypeInfo: any, propertiesTypeInfo: any): void;
+    set instanceServiceContainer(value: InstanceServiceContainer);
+    protected _createControlsForScript(eventItem: IEvent): any;
+    protected _hasParameters(eventItem: IEvent): boolean;
+    protected _getScriptTypeColor(eventItem: IEvent): any;
+    protected _getScriptType(eventItem: IEvent): scriptType;
+    protected _getEventMethodname(eventItem: IEvent): string;
+    protected _inputMthName(event: InputEvent, eventItem: IEvent): void;
+    protected _ctxMenu(e: MouseEvent, eventItem: IEvent): void;
+    protected _addEvent(e: KeyboardEvent): Promise<void>;
+    protected _createAssignScriptContextMenu(event: MouseEvent, eventItem: IEvent): IContextMenuItem[];
+    protected _showContextMenuAssignScript(event: MouseEvent, eventItem: IEvent, isCtxMenu: boolean): Promise<void>;
+    protected _editParameter(e: MouseEvent, eventItem: IEvent): Promise<void>;
+    protected _editBlockly(e: MouseEvent, eventItem: IEvent): Promise<void>;
+    protected _editJavascript(e: MouseEvent, eventItem: IEvent): Promise<void>;
+    protected _editSimpleScript(e: MouseEvent, eventItem: IEvent): Promise<void>;
+    _editEvent(evtType: scriptType, e: MouseEvent, eventItem: IEvent): Promise<void>;
+    refresh(): void;
+    get selectedItems(): IDesignItem[];
+    set selectedItems(items: IDesignItem[]);
+}
+export {};

package/dist/components/EventAssignment.js

@@ -0,0 +1,323 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+import { ContextMenu, PropertiesHelper } from "@node-projects/web-component-designer";
+import { ParameterEditor } from "./ParameterEditor.js";
+import { BlocklyScriptEditor } from "../blockly/BlocklyScriptEditor.js";
+import { SimpleScriptEditor } from "./SimpleScriptEditor.js";
+export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+        :host {
+            display: grid;
+            grid-template-columns: 20px 1fr auto;
+            overflow-y: auto;
+            align-content: start;
+            height: 100%;
+        }
+        .rect {
+            width: 7px;
+            height: 7px;
+            border: 1px solid black;
+            justify-self: center;
+            cursor: pointer;
+            align-self: center;
+            white-space: nowrap;
+        }
+        input.mth {
+            width: 100%;
+            box-sizing: border-box;
+        }
+        input::placeholder {
+            font-size: 8px;
+        }
+        a {
+            cursor: pointer;
+        }
+        a:hover {
+            cursor: pointer;
+            text-decoration: underline;
+        }
+        button {
+            cursor: pointer;
+        }`;
+    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>
+            <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>`;
+    static scriptTypeColors = {
+        'js': 'purple',
+        'blockly': 'yellow',
+        'script': 'lightgreen'
+    };
+    static is = 'node-projects-visualization-event-assignment';
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+    }
+    ready() {
+        this._bindingsParse();
+    }
+    _instanceServiceContainer;
+    _selectionChangedHandler;
+    _selectedItems;
+    _visualizationHandler;
+    _visualizationShell;
+    _scriptCommandsTypeInfo;
+    _propertiesTypeInfo;
+    events;
+    initialize(visualizationHandler, visualizationShell, scriptCommandsTypeInfo, propertiesTypeInfo) {
+        this._visualizationHandler = visualizationHandler;
+        this._visualizationShell = visualizationShell;
+        this._scriptCommandsTypeInfo = scriptCommandsTypeInfo;
+        this._propertiesTypeInfo = propertiesTypeInfo;
+    }
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+            this.selectedItems = e.selectedElements;
+        });
+        this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements;
+    }
+    _createControlsForScript(eventItem) {
+        const st = this._getScriptType(eventItem);
+        switch (st) {
+            case 'none':
+                return '';
+        }
+        //@ts-ignore
+        const ctl = this.constructor.editRowTemplate.content.cloneNode(true);
+        return ctl;
+    }
+    _hasParameters(eventItem) {
+        if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) {
+            const val = this.selectedItems[0].getAttribute('@' + eventItem.name);
+            return val.includes('parameters');
+        }
+        return false;
+    }
+    _getScriptTypeColor(eventItem) {
+        const st = this._getScriptType(eventItem);
+        const color = EventAssignment.scriptTypeColors[st];
+        return color ?? 'white';
+    }
+    _getScriptType(eventItem) {
+        if (this.selectedItems && this.selectedItems.length) {
+            if (this.selectedItems[0].hasAttribute('@' + eventItem.name)) {
+                const val = this.selectedItems[0].getAttribute('@' + eventItem.name);
+                if (val.startsWith('{')) {
+                    const parsed = JSON.parse(val);
+                    if ('blocks' in parsed)
+                        return 'blockly';
+                    if ('commands' in parsed)
+                        return 'script';
+                    return 'js';
+                }
+                else
+                    return 'js';
+            }
+        }
+        return 'none';
+    }
+    _getEventMethodname(eventItem) {
+        if (this.selectedItems.length)
+            return this.selectedItems[0].getAttribute('@' + eventItem.name);
+        return '';
+    }
+    _inputMthName(event, eventItem) {
+        let el = event.target;
+        this.selectedItems[0].setAttribute('@' + eventItem.name, el.value);
+    }
+    _ctxMenu(e, eventItem) {
+        e.preventDefault();
+        const evtType = this._getScriptType(eventItem);
+        if (evtType != 'none')
+            ContextMenu.show([{ title: 'remove', action: () => { this.selectedItems[0].removeAttribute('@' + eventItem.name); this._bindingsRefresh(); } }], e);
+        else
+            this._showContextMenuAssignScript(e, eventItem, true);
+    }
+    async _addEvent(e) {
+        if (e.key == 'Enter') {
+            let ip = this._getDomElement('addEventInput');
+            this._selectedItems[0].setAttribute('@' + PropertiesHelper.camelToDashCase(ip.value.replaceAll(' ', '-')), '');
+            ip.value = '';
+            this.scrollTop = 0;
+            this.refresh();
+        }
+    }
+    _createAssignScriptContextMenu(event, eventItem) {
+        let ctxMenu = [
+            {
+                title: 'Simple Script',
+                action: () => {
+                    this._editEvent('script', event, eventItem);
+                }
+            },
+            {
+                title: 'Javascript',
+                action: () => {
+                    let nm = prompt('name of function ?');
+                    if (nm) {
+                        this._selectedItems[0].setAttribute('@' + eventItem.name, nm);
+                        this.refresh();
+                        this._editEvent('js', null, eventItem);
+                    }
+                }
+            },
+            {
+                title: 'Blockly',
+                action: () => {
+                    this._editBlockly(null, eventItem);
+                }
+            }
+        ];
+        const evtType = this._getScriptType(eventItem);
+        if (evtType != 'none') {
+            ctxMenu.push({
+                title: '-'
+            });
+            ctxMenu.push({
+                title: 'remove',
+                action: () => { this.selectedItems[0].removeAttribute('@' + eventItem.name); this._bindingsRefresh(); }
+            });
+        }
+        return ctxMenu;
+    }
+    async _showContextMenuAssignScript(event, eventItem, isCtxMenu) {
+        event.preventDefault();
+        const evtType = this._getScriptType(eventItem);
+        if (evtType != 'none' && !isCtxMenu) {
+            this._editEvent(evtType, event, eventItem);
+        }
+        else {
+            const ctxMenu = this._createAssignScriptContextMenu(event, eventItem);
+            ContextMenu.show(ctxMenu, event);
+        }
+    }
+    async _editParameter(e, eventItem) {
+        const edt = new ParameterEditor();
+        let existingParameter = {};
+        edt.title = "ParameterEditor for '" + eventItem.name + "' of '" + this._selectedItems[0].name + "'";
+        let data = this._selectedItems[0].getAttribute('@' + eventItem.name);
+        if (data && data[0] == '{') {
+            try {
+                const parsed = JSON.parse(data);
+                existingParameter = parsed.parameters;
+            }
+            catch { }
+        }
+        edt.setParametersObject(existingParameter);
+        const result = await this._visualizationShell.openConfirmation(edt, { x: 100, y: 100, width: 700, height: 500 });
+        if (result) {
+            const par = edt.getParametersObject();
+            let newObj = {
+                name: data,
+                parameters: par
+            };
+            if (data && data[0] == '{') {
+                newObj = JSON.parse(data);
+                newObj.parameters = par;
+            }
+            if (par == null)
+                delete newObj.parameters;
+            const newData = JSON.stringify(newObj);
+            this._selectedItems[0].setAttribute('@' + eventItem.name, newData);
+            this._bindingsRefresh();
+        }
+    }
+    async _editBlockly(e, eventItem) {
+        const edt = new BlocklyScriptEditor();
+        edt.title = "Blockly Script for '" + eventItem.name + "' of '" + this._selectedItems[0].name + "'";
+        let data = this._selectedItems[0].getAttribute('@' + eventItem.name);
+        let parameters = null;
+        if (data) {
+            const parsed = JSON.parse(data);
+            parameters = parsed.parameters;
+            edt.load(parsed);
+        }
+        const result = await this._visualizationShell.openConfirmation(edt, { x: 100, y: 100, width: 700, height: 500 });
+        if (result) {
+            const blockObj = edt.save();
+            if (parameters) {
+                blockObj.parameters = parameters;
+            }
+            this._selectedItems[0].setAttribute('@' + eventItem.name, JSON.stringify(blockObj));
+            this._bindingsRefresh();
+        }
+    }
+    async _editJavascript(e, eventItem) {
+        // todo ?
+    }
+    async _editSimpleScript(e, eventItem) {
+        let scriptString = this.selectedItems[0].getAttribute('@' + eventItem.name);
+        if (!scriptString || scriptString.startsWith('{')) {
+            let script = { commands: [] };
+            let parameters = null;
+            if (scriptString) {
+                script = JSON.parse(scriptString);
+                //@ts-ignore
+                parameters = script.parameters;
+            }
+            let sc = new SimpleScriptEditor();
+            sc.serviceContainer = this.selectedItems[0].serviceContainer;
+            sc.scriptCommandsTypeInfo = this._scriptCommandsTypeInfo;
+            sc.propertiesTypeInfo = this._propertiesTypeInfo;
+            sc.visualizationShell = this._visualizationShell;
+            sc.visualizationHandler = this._visualizationHandler;
+            sc.loadScript(script);
+            sc.title = "Script '" + eventItem.name + "' on " + this.selectedItems[0].name;
+            let res = await this._visualizationShell.openConfirmation(sc, { x: 100, y: 100, width: 600, height: 500 });
+            if (res) {
+                let scriptCommands = sc.getScriptCommands();
+                if (scriptCommands && scriptCommands.length) {
+                    const sc = { commands: scriptCommands };
+                    if (parameters) {
+                        //@ts-ignore
+                        sc.parameters = parameters;
+                    }
+                    let json = JSON.stringify(sc);
+                    this.selectedItems[0].setAttribute('@' + eventItem.name, json);
+                    this._bindingsRefresh();
+                }
+            }
+        }
+    }
+    async _editEvent(evtType, e, eventItem) {
+        if (evtType == 'js') {
+            this._editJavascript(e, eventItem);
+        }
+        else if (evtType == 'blockly') {
+            this._editBlockly(e, eventItem);
+        }
+        else {
+            this._editSimpleScript(e, eventItem);
+        }
+    }
+    refresh() {
+        if (this._selectedItems != null && this._selectedItems.length) {
+            this.events = this._selectedItems[0].serviceContainer.getLastServiceWhere('eventsService', x => x.isHandledElement(this._selectedItems[0])).getPossibleEvents(this._selectedItems[0]);
+        }
+        else {
+            this.events = [];
+        }
+        this._bindingsRefresh();
+    }
+    get selectedItems() {
+        return this._selectedItems;
+    }
+    set selectedItems(items) {
+        if (this._selectedItems != items) {
+            this._selectedItems = items;
+            this.refresh();
+        }
+    }
+}
+customElements.define(EventAssignment.is, EventAssignment);

package/dist/components/ParameterEditor.d.ts

@@ -0,0 +1,17 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+export declare class ParameterEditor extends BaseCustomWebComponentConstructorAppend {
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    static is: string;
+    constructor();
+    ready(): void;
+    protected _parameterArray: {
+        key: string;
+        type: string;
+        value: any;
+    }[];
+    setParametersObject(value: Record<string, any>): void;
+    getParametersObject(): {};
+    _remove(index: number): void;
+    _add(): void;
+}

package/dist/components/ParameterEditor.js

@@ -0,0 +1,86 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class ParameterEditor extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+        :host {
+            display: grid;
+            grid-template-columns: 80px 80px 80px auto;
+            overflow-y: auto;
+            align-content: start;
+            height: 100%;
+            padding: 10px;
+            gap: 5px;
+            box-sizing: border-box;
+        }
+        
+        span {
+            font-size: 10px;
+        }`;
+    static template = html `
+        <span></span>
+        <span>name</span>
+        <span>type</span>
+        <span>value</span>
+        <template repeat:item="[[this._parameterArray]]">
+            <button @click="[[this._remove(index)]]" style="width: 40px; height: 20px; align-self: center;">del</button>
+            <input type="text" value="{{?item.key}}">
+            <select value="{{item.type}}" @change="[[this._bindingsRefresh()]]">
+                <option>null</string>
+                <option>string</string>
+                <option>number</string>
+                <option>boolean</string>
+            </select>
+            <input hidden="[[item.type !== 'string']]" type="text" value="{{?item.value}}">
+            <input hidden="[[item.type !== 'number']]" type="number" value="{{item.value}}">
+            <input hidden="[[item.type !== 'boolean']]" type="checkbox" checked="{{item.value}}">
+            <div hidden="[[item.type !== 'null']]">-null-</div>
+        </template>
+        <button @click="[[this._add()]]" style="width: 40px; height: 20px; align-self: center;">add</button>`;
+    static is = 'node-projects-visualization-parameter-editor';
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+    }
+    ready() {
+        this._bindingsParse();
+    }
+    _parameterArray;
+    setParametersObject(value) {
+        if (value != null)
+            this._parameterArray = Object.keys(value).map(x => ({ key: x, type: typeof value[x] === 'object' ? 'null' : typeof value[x], value: value[x] }));
+        else
+            this._parameterArray = [];
+        this._bindingsRefresh();
+    }
+    getParametersObject() {
+        let hasPar = false;
+        const obj = {};
+        for (const p of this._parameterArray) {
+            if (p.key) {
+                hasPar = true;
+                obj[p.key] = null;
+                switch (p.type) {
+                    case 'string':
+                        obj[p.key] = p.value.toString();
+                        break;
+                    case 'number':
+                        const f = parseFloat(p.value);
+                        obj[p.key] = isNaN(f) ? 0 : f;
+                        break;
+                    case 'boolean':
+                        obj[p.key] = !!p.value;
+                        break;
+                }
+            }
+        }
+        return hasPar ? obj : null;
+    }
+    _remove(index) {
+        this._parameterArray.splice(index, 1);
+        this._bindingsRefresh();
+    }
+    _add() {
+        this._parameterArray.push({ type: 'null' });
+        this._bindingsRefresh();
+    }
+}
+customElements.define(ParameterEditor.is, ParameterEditor);

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export * from './components/BindingsEditor.js';
 export * from './components/BindingsEditorHistoric.js';
 export * from './components/SimpleScriptEditor.js';
 export * from './components/VisualizationPropertyGrid.js';
+export * from './components/ParameterEditor.js';
+export * from './components/EventAssignment.js';
 export * from './helpers/BindingsHelper.js';
 export * from './interfaces/IScriptMultiplexValue.js';
 export * from './interfaces/VisualisationElementScript.js';

package/dist/index.js

@@ -6,6 +6,8 @@ export * from './components/BindingsEditor.js';
 export * from './components/BindingsEditorHistoric.js';
 export * from './components/SimpleScriptEditor.js';
 export * from './components/VisualizationPropertyGrid.js';
+export * from './components/ParameterEditor.js';
+export * from './components/EventAssignment.js';
 export * from './helpers/BindingsHelper.js';
 export * from './interfaces/IScriptMultiplexValue.js';
 export * from './interfaces/VisualisationElementScript.js';

package/dist/interfaces/IScriptMultiplexValue.d.ts

@@ -1,12 +1,13 @@
 export declare class IScriptMultiplexValue {
     /**
-    * signal - read the value from a IOB object
+    * 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
     */
-    source: 'signal' | 'property' | 'event';
+    source: 'signal' | 'property' | 'event' | 'parameter';
     /**
-     * Name of the ioBroker object or the property of the component
+     * Name of the ioBroker object or the property of the component or the parameter of the script
      * or for example in a event : srcElement.value to get the value of a input wich raises the event
      * @TJS-format signal
      */

package/dist/interfaces/IScriptMultiplexValue.js

@@ -1,12 +1,13 @@
 export class IScriptMultiplexValue {
     /**
-    * signal - read the value from a IOB object
+    * 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
     */
     source;
     /**
-     * Name of the ioBroker object or the property of the component
+     * Name of the ioBroker object or the property of the component or the parameter of the script
      * or for example in a event : srcElement.value to get the value of a input wich raises the event
      * @TJS-format signal
      */

package/dist/scripting/Script.d.ts

@@ -1,6 +1,7 @@
 import { ScriptCommands } from "./ScriptCommands.js";
 export declare class Script {
     name?: string;
+    relativeSignalsPath?: string;
     commands: ScriptCommands[];
     parameters?: Record<string, any>;
 }

package/dist/scripting/Script.js

@@ -1,5 +1,6 @@
 export class Script {
     name;
+    relativeSignalsPath;
     commands;
     parameters;
 }

package/dist/scripting/ScriptSystem.d.ts

@@ -2,20 +2,19 @@ import { IScriptMultiplexValue } from "../interfaces/IScriptMultiplexValue.js";
 import { VisualisationElementScript } from "../interfaces/VisualisationElementScript.js";
 import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
 import { ScriptCommands } from "./ScriptCommands.js";
+type contextType = {
+    event: Event;
+    element: Element;
+    root: HTMLElement;
+    parameters?: Record<string, any>;
+};
 export declare class ScriptSystem {
     _visualizationHandler: VisualizationHandler;
     constructor(visualizationHandler: VisualizationHandler);
-    execute(scriptCommands: ScriptCommands[], outerContext: {
-        event: Event;
-        element: Element;
-        root: HTMLElement;
-    }): Promise<void>;
-    runScriptCommand<T extends ScriptCommands>(command: T, context: any): Promise<void>;
-    getValue<T>(value: string | number | boolean | IScriptMultiplexValue, outerContext: {
-        event: Event;
-        element: Element;
-        root: HTMLElement;
-    }): Promise<any>;
+    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>;
     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>;
 }
+export {};

package/dist/scripting/ScriptSystem.js

@@ -147,6 +147,9 @@ export class ScriptSystem {
                         obj = ScriptSystem.extractPart(obj, value.name);
                     return obj;
                 }
+                case 'parameter': {
+                    return outerContext.parameters[value.name];
+                }
             }
         }
         return value;
@@ -182,7 +185,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 }));
+                                e.addEventListener(evtName, (evt) => this.execute(scriptObj.commands, { event: evt, element: e, root: instance, parameters: scriptObj.parameters }));
                             }
                             else if ('blocks' in scriptObj) {
                                 let compiledFunc = null;

package/dist/services/ScriptRefactorService.js

@@ -65,6 +65,13 @@ export class ScriptRefactorService {
                         }
                         else if ('blocks' in script) {
                         }
+                        if ('parameters' in script) {
+                            for (let p in script.parameters) {
+                                if (typeof script.parameters[p] === 'string') {
+                                    refactorings.push({ name: script.parameters[p], itemType: 'parameter', target: BindingTarget.event, targetName: a[0], service: this, designItem: d, type: 'script', sourceObject: script, display: 'parameters/' + p, refactor: newValue => script.parameters[p] = newValue });
+                                }
+                            }
+                        }
                     }
                 }
             }

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