@node-projects/web-component-designer-visualization-addons 0.1.127 → 0.1.129

package/dist/components/BindingsEditor.js

@@ -8,7 +8,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
                 <div style="grid-column: 1/3">
                     <div style="display: flex; flex-direction: column;">
                         <div class="row">
-                            <span style="cursor: pointer;" title="to use multiple objects, seprate them with semicolon (;).&#010;Access signal objects in properties via ?propertyName, access the propertyValue via ??propertyName.&#010;Access signal objects in properties of the target via #propertyName, access a propertyValue of the target via ##propertyName.&#010;Bind to signal configurations via $objectId.&#010;You could also use signals inside of a Signal Name via {name}">objects</span>
+                            <span style="cursor: pointer;" title="to use multiple objects, seprate them with semicolon (;).&#010;Access signal objects in properties via ?propertyName, access the propertyValue via ??propertyName.&#010;Access signal objects in properties of the target via #propertyName, access a propertyValue of the target via ##propertyName.&#010;Bind to signal configurations via $objectId.&#010;Bind to special values via §name (if supported by your framework).&#010;You could also use signals inside of a Signal Name via {name}">objects</span>
                         </div>
                         <div id="groupObjectName" style="display:flex;align-items: flex-end;">
                             <input id="objectName" class="row" value="{{?this.objectNames::change}}" style="flex-grow: 1;">

package/dist/components/SimpleScriptEditor.js

@@ -207,7 +207,7 @@ export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend
     }
     //Converter from TypscriptJsonSchema to our Property list...
     async addPossibleCommands() {
-        let commands = Object.keys(this.scriptCommandsTypeInfo.definitions);
+        let commands = Object.keys(this.scriptCommandsTypeInfo.definitions).filter(x => this.scriptCommandsTypeInfo.definitions[x].type == 'object');
         for (let c of commands) {
             if (c == 'ScriptCommands')
                 continue;

package/dist/helpers/BindingsHelper.d.ts

@@ -4,11 +4,11 @@ import { BindingTarget } from "@node-projects/web-component-designer/dist/elemen
 export type SpecialValueHandler = {
     valueProvider: (propertyName: string, context: {
         element: Element;
-        binding: namedBinding;
+        binding?: namedBinding;
         relativeSignalPath: string;
         root: HTMLElement;
         [key: string]: any;
-    }) => any;
+    }) => Promise<any> | any;
     valueChangedCallbacks: Map<string, (() => void)[]>;
 };
 export declare const bindingPrefixProperty = "bind-prop:";

package/dist/helpers/BindingsHelper.js

@@ -57,7 +57,7 @@ class IndirectSignal {
     visualizationHandler;
     element;
     relativeSignalPath;
-    constructor(bindingsHelper, visualizationHandler, id, valueChangedCb, element, relativeSignalPath, root) {
+    constructor(bindingsHelper, visualizationHandler, id, valueChangedCb, element, relativeSignalPath, root, specialValueHandler) {
         this.visualizationHandler = visualizationHandler;
         this.valueChangedCb = valueChangedCb;
         this.element = element;
@@ -96,6 +96,28 @@ class IndirectSignal {
                 }
                 continue;
             }
+            else if (nm[0] === '§') {
+                const mS = nm.substring(1);
+                const value = specialValueHandler.valueProvider(mS, { element, relativeSignalPath, root });
+                if (value instanceof Promise)
+                    value.then(v => this.handleValueChanged(v, i));
+                else
+                    this.handleValueChanged(value, i);
+                if (!specialValueHandler.valueChangedCallbacks)
+                    specialValueHandler.valueChangedCallbacks = new Map();
+                let changeList = specialValueHandler.valueChangedCallbacks.get(mS);
+                if (changeList == null) {
+                    changeList = [];
+                    specialValueHandler.valueChangedCallbacks.set(mS, changeList);
+                }
+                changeList.push(() => {
+                    const value = specialValueHandler.valueProvider(mS, { element, relativeSignalPath, root });
+                    if (value instanceof Promise)
+                        value.then(v => this.handleValueChanged(v, i));
+                    else
+                        this.handleValueChanged(value, i);
+                });
+            }
             else if (nm[0] === '?') {
                 //TODO: react to changes of signal name in prop
                 if (!nm.includes('.')) {
@@ -731,7 +753,10 @@ export class BindingsHelper {
             else if (s[0] === '§') {
                 const mS = s.substring(1);
                 const value = specialValueHandler.valueProvider(mS, { element, binding, relativeSignalPath, root });
-                this.handleValueChanged(element, binding, value, valuesObject, i, signalVars, true, relativeSignalPath);
+                if (value instanceof Promise)
+                    value.then(v => this.handleValueChanged(element, binding, v, valuesObject, i, signalVars, true, relativeSignalPath));
+                else
+                    this.handleValueChanged(element, binding, value, valuesObject, i, signalVars, true, relativeSignalPath);
                 if (!specialValueHandler.valueChangedCallbacks)
                     specialValueHandler.valueChangedCallbacks = new Map();
                 let changeList = specialValueHandler.valueChangedCallbacks.get(mS);
@@ -741,12 +766,15 @@ export class BindingsHelper {
                 }
                 changeList.push(() => {
                     const value = specialValueHandler.valueProvider(mS, { element, binding, relativeSignalPath, root });
-                    this.handleValueChanged(element, binding, value, valuesObject, i, signalVars, true, relativeSignalPath);
+                    if (value instanceof Promise)
+                        value.then(v => this.handleValueChanged(element, binding, v, valuesObject, i, signalVars, true, relativeSignalPath));
+                    else
+                        this.handleValueChanged(element, binding, value, valuesObject, i, signalVars, true, relativeSignalPath);
                 });
             }
             else {
                 if (s.includes('{')) {
-                    let indirectSignal = new IndirectSignal(this, this._visualizationHandler, s, (value) => this.handleValueChanged(element, binding, value.val, valuesObject, i, signalVars, false, relativeSignalPath), element, relativeSignalPath, root);
+                    let indirectSignal = new IndirectSignal(this, this._visualizationHandler, s, (value) => this.handleValueChanged(element, binding, value.val, valuesObject, i, signalVars, false, relativeSignalPath), element, relativeSignalPath, root, specialValueHandler);
                     if (!cleanupCalls)
                         cleanupCalls = [];
                     cleanupCalls.push(() => indirectSignal.dispose());

package/dist/index.d.ts

@@ -9,11 +9,11 @@ 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';
-export * from './interfaces/VisualizationBinding.js';
-export * from './interfaces/VisualizationHandler.js';
-export * from './interfaces/VisualizationShell.js';
+export type * from './interfaces/IScriptMultiplexValue.js';
+export type * from './interfaces/VisualisationElementScript.js';
+export type * from './interfaces/VisualizationBinding.js';
+export type * from './interfaces/VisualizationHandler.js';
+export type * from './interfaces/VisualizationShell.js';
 export * from './scripting/Script.js';
 export * from './scripting/ScriptCommands.js';
 export * from './scripting/ScriptSystem.js';

package/dist/index.js

@@ -9,11 +9,6 @@ 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';
-export * from './interfaces/VisualizationBinding.js';
-export * from './interfaces/VisualizationHandler.js';
-export * from './interfaces/VisualizationShell.js';
 export * from './scripting/Script.js';
 export * from './scripting/ScriptCommands.js';
 export * from './scripting/ScriptSystem.js';

package/dist/interfaces/IScriptMultiplexValue.d.ts

@@ -1,4 +1,4 @@
-export declare class IScriptMultiplexValue {
+export interface IScriptMultiplexValue {
     /**
     * signal - read the value from a Signal
     * property - read the value from a property of the customControl (not usable in screens)
@@ -8,8 +8,9 @@ export declare class IScriptMultiplexValue {
     * complexString - a string with signals (contained in {})
     * complexSignal - read the value from a signal wich name is build here (it can contain other signals in {})
     * expression - js expression, 'ctx' is context object
+    * elementProperty - a property defined on the element raising the event
     */
-    source: 'signal' | 'property' | 'event' | 'parameter' | 'complexString' | 'complexSignal' | 'expression' | 'context';
+    source: 'signal' | 'property' | 'event' | 'parameter' | 'complexString' | 'complexSignal' | 'expression' | 'context' | 'elementProperty';
     /**
      * Name of the signal, 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

package/dist/interfaces/IScriptMultiplexValue.js

@@ -1,19 +1 @@
-export class IScriptMultiplexValue {
-    /**
-    * 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 parameter you hand over
-    * context - a value of the context
-    * complexString - a string with signals (contained in {})
-    * complexSignal - read the value from a signal wich name is build here (it can contain other signals in {})
-    * expression - js expression, 'ctx' is context object
-    */
-    source;
-    /**
-     * Name of the signal, 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
-     */
-    name;
-}
+export {};

package/dist/scripting/ScriptCommands.d.ts

@@ -5,7 +5,7 @@ export declare type RunnableScriptCommands = OpenScreen | OpenUrl | OpenDialog |
  * property - a property defined in the current screen/control
  * elementProperty - a property defined on the element raising the event
  */
-export type signalTarget = 'signal' | 'property' | 'elementProperty';
+export declare type signalTarget = 'signal' | 'property' | 'elementProperty';
 export interface Comment {
     type: 'Comment';
     comment: string;
@@ -364,7 +364,7 @@ export interface Condition {
     */
     value1: any;
     value2?: any;
-    comparisonType: '==null' | '!=null' | '==true' | '==false' | '==' | '!=' | '>' | '<' | '>=' | '<=';
+    comparisonType: '==null' | '!=null' | '==true' | '==false' | '==' | '!=' | '>' | '<' | '>=' | '<=' | '&&' | '||';
     /**
     * Name of the label to jumpe to when condition is true
     */

package/dist/scripting/ScriptSystem.d.ts

@@ -23,7 +23,6 @@ export declare class ScriptSystem {
     getStateOrFieldOrParameter(name: string, context: contextType): Promise<any>;
     parseStringWithValues(text: string, context: contextType): Promise<string>;
     getSignalName(name: string, outerContext: contextType): string;
-    static extractPart(obj: any, propertyPath: string): any;
     createScriptContext(root: HTMLElement, event: Event, element: Element, parameters: Record<string, any>, relativeSignalsPath: string): any;
     assignAllScripts(source: string, javascriptCode: string, shadowRoot: ShadowRoot, instance: HTMLElement, visualizationHandler: VisualizationHandler, contextCreator?: (root: HTMLElement, event: Event, element: Element, parameters: Record<string, any>, relativeSignalsPath: string) => any, assignExternalScript?: (element: Element, event: string, scriptData: any) => void, runInitalization?: (jsObject: VisualisationElementScript) => void): Promise<VisualisationElementScript>;
 }

package/dist/scripting/ScriptSystem.js

@@ -1,4 +1,4 @@
-import { sleep } from "@node-projects/web-component-designer/dist/elements/helper/Helper.js";
+import { deepValue, setDeepValue, sleep } from "@node-projects/web-component-designer/dist/elements/helper/Helper.js";
 import { generateEventCodeFromBlockly } from "../blockly/BlocklyJavascriptHelper.js";
 import { parseBindingString } from "../helpers/BindingsHelper.js";
 import Long from 'long';
@@ -57,6 +57,12 @@ export class ScriptSystem {
                     case '<=':
                         res = value1 <= value2;
                         break;
+                    case '&&':
+                        res = value1 && value2;
+                        break;
+                    case '||':
+                        res = value1 || value2;
+                        break;
                 }
                 if (res) {
                     await this.runExternalScript(await this.getValue(c.trueScriptName, outerContext), await this.getValue(c.trueScriptType, outerContext));
@@ -83,10 +89,10 @@ export class ScriptSystem {
     }
     async getValueFromTarget(target, name, context) {
         if (target === 'property') {
-            return context.root[name];
+            return deepValue(context.root, name);
         }
         else if (target === 'elementProperty') {
-            return context.element[name];
+            return deepValue(context.element, name);
         }
         else {
             return (await this._visualizationHandler.getState(this.getSignalName(name, context)))?.val;
@@ -94,10 +100,10 @@ export class ScriptSystem {
     }
     async setValueOnTarget(target, name, context, value) {
         if (target === 'property') {
-            context.root[name] = value;
+            setDeepValue(context.root, name, value);
         }
         else if (target === 'elementProperty') {
-            context.element[name] = value;
+            setDeepValue(context.element, name, value);
         }
         else {
             await this._visualizationHandler.setState(this.getSignalName(name, context), value);
@@ -349,7 +355,10 @@ export class ScriptSystem {
         if (typeof value === 'object') {
             switch (value.source) {
                 case 'property': {
-                    return outerContext.root[value.name];
+                    return deepValue(outerContext.root, value.name);
+                }
+                case 'elementProperty': {
+                    return deepValue(outerContext.element, value.name);
                 }
                 case 'signal': {
                     let sng = await this._visualizationHandler.getState(this.getSignalName(value.name, outerContext));
@@ -358,15 +367,14 @@ export class ScriptSystem {
                 case 'event': {
                     let obj = outerContext.event;
                     if (value.name)
-                        obj = ScriptSystem.extractPart(obj, value.name);
+                        obj = deepValue(obj, value.name);
                     return obj;
                 }
                 case 'parameter': {
                     return outerContext.parameters[value.name];
                 }
                 case 'context': {
-                    const obj = ScriptSystem.extractPart(outerContext, value.name);
-                    return obj;
+                    return deepValue(outerContext, value.name);
                 }
                 case 'complexString': {
                     let text = value.name;
@@ -427,13 +435,6 @@ export class ScriptSystem {
             return outerContext.relativeSignalsPath + name;
         return name;
     }
-    static extractPart(obj, propertyPath) {
-        let retVal = obj;
-        for (let p of propertyPath.split('.')) {
-            retVal = retVal?.[p];
-        }
-        return retVal;
-    }
     createScriptContext(root, event, element, parameters, relativeSignalsPath) {
         return { root, event, element, parameters, relativeSignalsPath };
     }

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