@node-projects/web-component-designer-visualization-addons 0.1.15 → 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.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.17",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",