@node-projects/web-component-designer-visualization-addons 0.1.128 → 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/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)

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

@@ -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.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));

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