@node-projects/web-component-designer-visualization-addons 0.1.128 → 0.1.130

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/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,7 +1,8 @@
-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)
+    * signalInProperty - read the value from a Signal (wich name is in the Property)
     * event - read the value of a property of the event object
     * parameter - a parameter you hand over
     * context - a value of the context
@@ -10,7 +11,7 @@ export declare class IScriptMultiplexValue {
     * 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' | 'elementProperty';
+    source: 'signal' | 'property' | 'signalInProperty' | '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,20 +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
-    * elementProperty - a property defined on the element raising the event
-    */
-    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

@@ -1,5 +1,5 @@
 export declare type ScriptCommands = RunnableScriptCommands | Comment | Condition | Exit | Label | Goto;
-export declare type RunnableScriptCommands = OpenScreen | OpenUrl | OpenDialog | CloseDialog | ToggleSignalValue | SetSignalValue | IncrementSignalValue | DecrementSignalValue | SetBitInSignal | ClearBitInSignal | ToggleBitInSignal | Console | CalculateSignalValue | Javascript | SetElementProperty | Delay | SwitchLanguage | Login | Logout | SubscribeSignal | UnsubscribeSignal | WriteSignalsInGroup | ClearSignalsInGroup | RunScript | CopySignalValuesFromFolder | ShowMessageBox | ExportSignalValuesAsJson | ImportSignalValuesFromJson;
+export declare type RunnableScriptCommands = OpenScreen | OpenUrl | OpenDialog | CloseDialog | ToggleSignalValue | ToggleSignalValueFromList | SetSignalValue | IncrementSignalValue | DecrementSignalValue | SetBitInSignal | ClearBitInSignal | ToggleBitInSignal | Console | CalculateSignalValue | Javascript | SetElementProperty | Delay | SwitchLanguage | Login | Logout | SubscribeSignal | UnsubscribeSignal | WriteSignalsInGroup | ClearSignalsInGroup | RunScript | CopySignalValuesFromFolder | ShowMessageBox | ExportSignalValuesAsJson | ImportSignalValuesFromJson;
 /**
  * signal - a signal (the default)
  * property - a property defined in the current screen/control
@@ -114,6 +114,17 @@ export interface ToggleSignalValue {
     target: signalTarget;
     additionalData?: string;
 }
+export interface ToggleSignalValueFromList {
+    type: 'ToggleSignalValueThroughList';
+    valueList: (string | number | boolean)[];
+    /**
+     * Name of the signal
+     * @TJS-format signal
+     */
+    signal: string;
+    target: signalTarget;
+    additionalData?: string;
+}
 export interface IncrementSignalValue {
     type: 'IncrementSignalValue';
     /**
@@ -364,7 +375,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.js

@@ -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));
@@ -139,6 +145,18 @@ export class ScriptSystem {
                 await this._visualizationHandler.setState(this.getSignalName(signal, context), !state);
                 break;
             }
+            case 'ToggleSignalValueThroughList': {
+                const valueList = await this.getValue(command.valueList, context);
+                const signal = await this.getValue(command.signal, context);
+                const target = await this.getValue(command.target, context);
+                let state = await this.getValueFromTarget(target, signal, context);
+                let nextIdx = valueList.indexOf(state) + 1;
+                if (nextIdx >= valueList.length)
+                    nextIdx = 0;
+                const newState = valueList[nextIdx];
+                await this._visualizationHandler.setState(this.getSignalName(signal, context), newState);
+                break;
+            }
             case 'SetSignalValue': {
                 const signal = await this.getValue(command.signal, context);
                 const target = await this.getValue(command.target, context);
@@ -358,6 +376,11 @@ export class ScriptSystem {
                     let sng = await this._visualizationHandler.getState(this.getSignalName(value.name, outerContext));
                     return sng.val;
                 }
+                case 'signalInProperty': {
+                    const sngName = deepValue(outerContext.root, value.name);
+                    let sng = await this._visualizationHandler.getState(this.getSignalName(sngName, outerContext));
+                    return sng.val;
+                }
                 case 'event': {
                     let obj = outerContext.event;
                     if (value.name)
@@ -402,11 +425,11 @@ export class ScriptSystem {
             var ctx = context;
             return eval('ctx.' + name.substring(1));
         }
-        else if (name[0] === '?' && name[1] === '??') {
+        else if (name[0] === '?' && name[1] === '?') {
             return context.root[name.substring(2)];
         }
         else if (name[0] === '?') {
-            return await this._visualizationHandler.getState(this.getSignalName(context.root[name.substring(2)], context));
+            return await this._visualizationHandler.getState(this.getSignalName(context.root[name.substring(1)], context));
         }
         return await this._visualizationHandler.getState(this.getSignalName(name, context));
     }

package/dist/scripting/ScriptUpgrader.d.ts

@@ -1,5 +1,5 @@
 import { ScriptCommands, SetElementProperty } from "./ScriptCommands";
 export declare class ScriptUpgrades {
-    static upgradeScriptCommand(scriptCommand: ScriptCommands): SetElementProperty | import("./ScriptCommands").OpenScreen | import("./ScriptCommands").OpenUrl | import("./ScriptCommands").OpenDialog | import("./ScriptCommands").CloseDialog | import("./ScriptCommands").ToggleSignalValue | import("./ScriptCommands").SetSignalValue | import("./ScriptCommands").IncrementSignalValue | import("./ScriptCommands").DecrementSignalValue | import("./ScriptCommands").SetBitInSignal | import("./ScriptCommands").ClearBitInSignal | import("./ScriptCommands").ToggleBitInSignal | import("./ScriptCommands").Console | import("./ScriptCommands").CalculateSignalValue | import("./ScriptCommands").Javascript | import("./ScriptCommands").Delay | import("./ScriptCommands").SwitchLanguage | import("./ScriptCommands").Login | import("./ScriptCommands").Logout | import("./ScriptCommands").SubscribeSignal | import("./ScriptCommands").UnsubscribeSignal | import("./ScriptCommands").WriteSignalsInGroup | import("./ScriptCommands").ClearSignalsInGroup | import("./ScriptCommands").RunScript | import("./ScriptCommands").CopySignalValuesFromFolder | import("./ScriptCommands").ShowMessageBox | import("./ScriptCommands").ExportSignalValuesAsJson | import("./ScriptCommands").ImportSignalValuesFromJson | import("./ScriptCommands").Comment | import("./ScriptCommands").Condition | import("./ScriptCommands").Exit | import("./ScriptCommands").Label | import("./ScriptCommands").Goto;
+    static upgradeScriptCommand(scriptCommand: ScriptCommands): SetElementProperty | import("./ScriptCommands").OpenScreen | import("./ScriptCommands").OpenUrl | import("./ScriptCommands").OpenDialog | import("./ScriptCommands").CloseDialog | import("./ScriptCommands").ToggleSignalValue | import("./ScriptCommands").ToggleSignalValueFromList | import("./ScriptCommands").SetSignalValue | import("./ScriptCommands").IncrementSignalValue | import("./ScriptCommands").DecrementSignalValue | import("./ScriptCommands").SetBitInSignal | import("./ScriptCommands").ClearBitInSignal | import("./ScriptCommands").ToggleBitInSignal | import("./ScriptCommands").Console | import("./ScriptCommands").CalculateSignalValue | import("./ScriptCommands").Javascript | import("./ScriptCommands").Delay | import("./ScriptCommands").SwitchLanguage | import("./ScriptCommands").Login | import("./ScriptCommands").Logout | import("./ScriptCommands").SubscribeSignal | import("./ScriptCommands").UnsubscribeSignal | import("./ScriptCommands").WriteSignalsInGroup | import("./ScriptCommands").ClearSignalsInGroup | import("./ScriptCommands").RunScript | import("./ScriptCommands").CopySignalValuesFromFolder | import("./ScriptCommands").ShowMessageBox | import("./ScriptCommands").ExportSignalValuesAsJson | import("./ScriptCommands").ImportSignalValuesFromJson | import("./ScriptCommands").Comment | import("./ScriptCommands").Condition | import("./ScriptCommands").Exit | import("./ScriptCommands").Label | import("./ScriptCommands").Goto;
     static upgradeSetElementProperty(scriptCommand: SetElementProperty): SetElementProperty;
 }

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