@node-projects/web-component-designer-visualization-addons 0.1.14 → 0.1.17

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

@@ -6,7 +6,7 @@ type scriptType = 'jsdirect' | 'js' | 'script' | 'blockly' | 'none';
 export declare class EventAssignment extends BaseCustomWebComponentConstructorAppend {
     static style: CSSStyleSheet;
     static template: HTMLTemplateElement;
-    static evtEdit: HTMLTemplateElement;
+    static editRowTemplate: HTMLTemplateElement;
     static scriptTypeColors: {
         js: string;
         blockly: string;
@@ -25,7 +25,8 @@ export declare class EventAssignment extends BaseCustomWebComponentConstructorAp
     events: IEvent[];
     initialize(visualizationHandler: VisualizationHandler, visualizationShell: VisualizationShell, scriptCommandsTypeInfo: any, propertiesTypeInfo: any): void;
     set instanceServiceContainer(value: InstanceServiceContainer);
-    protected _createControlsForScript(eventItem: IEvent): Node | "";
+    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;

package/dist/components/EventAssignment.js

@@ -25,6 +25,9 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
             width: 100%;
             box-sizing: border-box;
         }
+        input::placeholder {
+            font-size: 8px;
+        }
         a {
             cursor: pointer;
         }
@@ -38,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 evtEdit = html `
-            <div style="display: flex; justify-content: flex-end;">
-                <input title="name" style="min-width: 30px; flex-basis: 30px; flex-grow: 2;" class="mth" type="text">
-                <input title="relative signals path" style="min-width: 20px; flex-basis: 20px; flex-grow: 1;" class="mth" type="text">
-                <button style="display: flex; padding: 0; flex-grow: 0;" title="parameter" @click="[[this._editParameter(event, item)]]">p</button>
-            </div>`;
+    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',
@@ -90,9 +93,17 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
             case 'none':
                 return '';
         }
-        const ctl = EventAssignment.evtEdit.content.cloneNode(true);
+        //@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];
@@ -215,8 +226,11 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
                 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) {

package/dist/index.d.ts

@@ -7,6 +7,7 @@ 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

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