@node-projects/web-component-designer-visualization-addons 0.1.123 → 0.1.125

package/dist/helpers/BindingsHelper.d.ts

@@ -27,6 +27,7 @@ export declare function parseBindingString(id: string): {
     parts: string[];
     signals: string[];
 };
+export declare function getNestedProperty(obj: any, path: any): any;
 export declare class BindingsHelper {
     #private;
     _visualizationHandler: VisualizationHandler;

package/dist/helpers/BindingsHelper.js

@@ -35,6 +35,16 @@ export function parseBindingString(id) {
     parts.push(tx);
     return { parts, signals };
 }
+export function getNestedProperty(obj, path) {
+    const parts = path.split('.');
+    let current = obj;
+    for (const part of parts) {
+        if (current == null || typeof current !== 'object')
+            return undefined;
+        current = current[part];
+    }
+    return current;
+}
 class IndirectSignal {
     parts;
     signals;
@@ -58,39 +68,51 @@ class IndirectSignal {
             let nm = this.signals[i];
             if (nm[0] === '?' && nm[1] === '?') {
                 const propNm = nm.substring(2);
-                this.handleValueChanged(root[propNm], i);
-                const evtCallback = () => this.handleValueChanged(root[propNm], i);
-                const evtName = bindingsHelper.getChangedEventName(root, propNm);
-                root.addEventListener(evtName, (evtCallback));
-                this.cleanupCalls.push(() => root.removeEventListener(evtName, evtCallback));
+                if (!propNm.includes('.')) {
+                    this.handleValueChanged(root[propNm], i);
+                    const evtCallback = () => this.handleValueChanged(root[propNm], i);
+                    const evtName = bindingsHelper.getChangedEventName(root, propNm);
+                    root.addEventListener(evtName, (evtCallback));
+                    this.cleanupCalls.push(() => root.removeEventListener(evtName, evtCallback));
+                }
+                else {
+                    const val = getNestedProperty(root, propNm);
+                    this.handleValueChanged(val, i);
+                }
                 continue;
-                //} else if (nm[0] === '?' && nm[1] === '$') {
-                //  const attrNm = nm.substring(2);
-                //  let val = root.getAttribute(attrNm);
-                //  this.handleValueChanged(val, i);
-                //  continue;
             }
             else if (nm[0] === '#' && nm[1] === '#') {
                 const propNm = nm.substring(2);
-                this.handleValueChanged(element[propNm], i);
-                const evtCallback = () => this.handleValueChanged(element[propNm], i);
-                const evtName = bindingsHelper.getChangedEventName(element, propNm);
-                element.addEventListener(evtName, (evtCallback));
-                this.cleanupCalls.push(() => element.removeEventListener(evtName, evtCallback));
+                if (!propNm.includes('.')) {
+                    this.handleValueChanged(element[propNm], i);
+                    const evtCallback = () => this.handleValueChanged(element[propNm], i);
+                    const evtName = bindingsHelper.getChangedEventName(element, propNm);
+                    element.addEventListener(evtName, (evtCallback));
+                    this.cleanupCalls.push(() => element.removeEventListener(evtName, evtCallback));
+                }
+                else {
+                    const val = getNestedProperty(element, propNm);
+                    this.handleValueChanged(val, i);
+                }
                 continue;
-                //} else if (nm[0] === '#' && nm[1] === '$') {
-                //  const attrNm = nm.substring(2);
-                //  let val = element.getAttribute(attrNm);
-                //  this.handleValueChanged(val, i);
-                //  continue;
             }
             else if (nm[0] === '?') {
                 //TODO: react to changes of signal name in prop
-                nm = root[nm.substring(1)];
+                if (!nm.includes('.')) {
+                    nm = root[nm.substring(1)];
+                }
+                else {
+                    nm = getNestedProperty(root, nm.substring(1));
+                }
             }
             else if (nm[0] === '#') {
                 //TODO: react to changes of signal name in prop
-                nm = element[nm.substring(1)];
+                if (!nm.includes('.')) {
+                    nm = root[nm.substring(1)];
+                }
+                else {
+                    nm = getNestedProperty(root, nm.substring(1));
+                }
             }
             let cb = (id, value) => this.handleValueChanged(value.val, i);
             const subscr = this.visualizationHandler.subscribeState(nm, cb);
@@ -757,10 +779,7 @@ export class BindingsHelper {
                     else {
                         const cb = (id, value) => this.handleValueChanged(element, binding, value.val, valuesObject, i, signalVars, false, relativeSignalPath);
                         unsubscribeList.push([s, cb, this._visualizationHandler.subscribeState(s, cb)]);
-                        this._visualizationHandler.getState(s).then(x => {
-                            if (x)
-                                this.handleValueChanged(element, binding, x?.val, valuesObject, i, signalVars, false, relativeSignalPath);
-                        });
+                        this._visualizationHandler.getState(s).then(x => this.handleValueChanged(element, binding, x?.val, valuesObject, i, signalVars, false, relativeSignalPath));
                         if (binding[1].twoWay && i == 0) {
                             this.addTwoWayBinding(binding, element, v => this._visualizationHandler.setState(s, v));
                         }

package/dist/scripting/ScriptCommands.d.ts

@@ -1,5 +1,12 @@
 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;
+/**
+ * signal - a signal (the default)
+ * property - a property defined in the current screen/control
+ * elementProperty - a property defined on the elment raising the event
+ * rootProperty - a property defined on the root element
+ */
+export type signalTarget = 'signal' | 'property' | 'elementProperty' | 'rootProperty';
 export interface Comment {
     type: 'Comment';
     comment: string;
@@ -94,6 +101,7 @@ export interface SetSignalValue {
      * @TJS-format signal
      */
     signal: string;
+    target: signalTarget;
     value: any;
     additionalData?: string;
 }
@@ -104,6 +112,7 @@ export interface ToggleSignalValue {
      * @TJS-format signal
      */
     signal: string;
+    target: signalTarget;
     additionalData?: string;
 }
 export interface IncrementSignalValue {
@@ -114,6 +123,7 @@ export interface IncrementSignalValue {
      */
     signal: string;
     value: number;
+    target: signalTarget;
     additionalData?: string;
 }
 export interface CalculateSignalValue {
@@ -128,6 +138,7 @@ export interface CalculateSignalValue {
      * Example: {adapter.0.level} * 100 + 30
      */
     formula: string;
+    target: signalTarget;
     additionalData?: string;
 }
 export interface DecrementSignalValue {
@@ -138,6 +149,7 @@ export interface DecrementSignalValue {
      */
     signal: string;
     value: number;
+    target: signalTarget;
     additionalData?: string;
 }
 export interface SetBitInSignal {
@@ -150,6 +162,7 @@ export interface SetBitInSignal {
     /**
      * @default 0
      */
+    target: signalTarget;
     bitNumber: number;
     additionalData?: string;
 }
@@ -163,6 +176,7 @@ export interface ClearBitInSignal {
     /**
      * @default 0
      */
+    target: signalTarget;
     bitNumber: number;
     additionalData?: string;
 }
@@ -176,6 +190,7 @@ export interface ToggleBitInSignal {
     /**
      * @default 0
      */
+    target: signalTarget;
     bitNumber: number;
     additionalData?: string;
 }
@@ -315,7 +330,7 @@ export interface CopySignalValuesFromFolder {
     /**
      * name of destination folder
      */
-    destinationFolder?: number;
+    destinationFolder?: string;
     additionalData?: string;
 }
 export interface ExportSignalValuesAsJson {

package/dist/scripting/ScriptSystem.d.ts

@@ -1,6 +1,6 @@
 import { VisualisationElementScript } from "../interfaces/VisualisationElementScript.js";
 import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
-import { ScriptCommands } from "./ScriptCommands.js";
+import { ScriptCommands, signalTarget } from "./ScriptCommands.js";
 export type contextType = {
     event: Event;
     element: Element;
@@ -13,6 +13,8 @@ export declare class ScriptSystem {
     _subscriptionCallback: () => void;
     constructor(visualizationHandler: VisualizationHandler);
     execute(scriptCommands: ScriptCommands[], outerContext: contextType): Promise<void>;
+    getValueFromTarget(target: signalTarget, name: string, context: contextType): Promise<any>;
+    setValueOnTarget(target: signalTarget, name: string, context: contextType, value: any): Promise<void>;
     runExternalScript(name: string, type: string): Promise<void>;
     runScriptCommand<T extends ScriptCommands>(command: T, context: contextType): Promise<void>;
     getTarget(context: contextType, targetSelectorTarget: 'element' | 'container', parentLevel: number): Element;
@@ -20,7 +22,7 @@ export declare class ScriptSystem {
     getValue<T>(value: T, outerContext: contextType): Promise<T>;
     getStateOrFieldOrParameter(name: string, context: contextType): Promise<any>;
     parseStringWithValues(text: string, context: contextType): Promise<string>;
-    getSignaName(name: string, outerContext: contextType): 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

@@ -81,6 +81,34 @@ export class ScriptSystem {
                 await this.runScriptCommand(c, outerContext);
         }
     }
+    async getValueFromTarget(target, name, context) {
+        if (target === 'property') {
+            return context.instance[name];
+        }
+        else if (target === 'elementProperty') {
+            return context.element[name];
+        }
+        else if (target === 'rootProperty') {
+            return context.root[name];
+        }
+        else {
+            return (await this._visualizationHandler.getState(this.getSignalName(name, context)))?.val;
+        }
+    }
+    async setValueOnTarget(target, name, context, value) {
+        if (target === 'property') {
+            context.instance[name] = value;
+        }
+        else if (target === 'elementProperty') {
+            context.element[name] = value;
+        }
+        else if (target === 'rootProperty') {
+            context.root[name] = value;
+        }
+        else {
+            await this._visualizationHandler.setState(this.getSignalName(name, context), value);
+        }
+    }
     async runExternalScript(name, type) {
         //TODO...
     }
@@ -112,61 +140,71 @@ export class ScriptSystem {
             }
             case 'ToggleSignalValue': {
                 const signal = await this.getValue(command.signal, context);
-                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
-                await this._visualizationHandler.setState(this.getSignaName(signal, context), !state?.val);
+                const target = await this.getValue(command.target, context);
+                let state = await this.getValueFromTarget(target, signal, context);
+                await this._visualizationHandler.setState(this.getSignalName(signal, context), !state);
                 break;
             }
             case 'SetSignalValue': {
                 const signal = await this.getValue(command.signal, context);
-                await this._visualizationHandler.setState(this.getSignaName(signal, context), await this.getValue(command.value, context));
+                const target = await this.getValue(command.target, context);
+                await this.setValueOnTarget(target, signal, context, await this.getValue(command.value, context));
                 break;
             }
             case 'IncrementSignalValue': {
                 const signal = await this.getValue(command.signal, context);
-                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
-                await this._visualizationHandler.setState(this.getSignaName(signal, context), (state.val + await this.getValue(command.value, context)));
+                const target = await this.getValue(command.target, context);
+                let state = await this.getValueFromTarget(target, signal, context);
+                const val = state + await this.getValue(command.value, context);
+                await this.setValueOnTarget(target, signal, context, val);
                 break;
             }
             case 'DecrementSignalValue': {
                 const signal = await this.getValue(command.signal, context);
-                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
-                await this._visualizationHandler.setState(this.getSignaName(signal, context), state.val - await this.getValue(command.value, context));
+                const target = await this.getValue(command.target, context);
+                let state = await this.getValueFromTarget(target, signal, context);
+                const val = state - await this.getValue(command.value, context);
+                await this.setValueOnTarget(target, signal, context, val);
                 break;
             }
             case 'CalculateSignalValue': {
                 const formula = await this.getValue(command.formula, context);
+                const target = await this.getValue(command.target, context);
                 const targetSignal = await this.getValue(command.targetSignal, context);
                 let nm = await this.parseStringWithValues(formula, context);
                 let result = eval(nm);
-                await this._visualizationHandler.setState(this.getSignaName(targetSignal, context), result);
+                await this.setValueOnTarget(target, targetSignal, context, result);
                 break;
             }
             case 'SetBitInSignal': {
                 const signal = await this.getValue(command.signal, context);
                 const bitNumber = await this.getValue(command.bitNumber ?? 0, context);
-                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
+                const target = await this.getValue(command.target, context);
+                let state = await this.getValueFromTarget(target, signal, context);
                 let mask = Long.fromNumber(1).shiftLeft(bitNumber);
-                const newVal = Long.fromNumber(state.val).or(mask).toNumber();
-                await this._visualizationHandler.setState(this.getSignaName(signal, context), newVal);
+                const newVal = Long.fromNumber(state).or(mask).toNumber();
+                await this.setValueOnTarget(target, signal, context, newVal);
                 break;
             }
             case 'ClearBitInSignal': {
                 const signal = await this.getValue(command.signal, context);
                 const bitNumber = await this.getValue(command.bitNumber ?? 0, context);
-                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
+                const target = await this.getValue(command.target, context);
+                let state = await this.getValueFromTarget(target, signal, context);
                 let mask = Long.fromNumber(1).shiftLeft(bitNumber);
                 mask.negate();
-                const newVal = Long.fromNumber(state.val).and(mask).toNumber();
-                await this._visualizationHandler.setState(this.getSignaName(signal, context), newVal);
+                const newVal = Long.fromNumber(state).and(mask).toNumber();
+                await this.setValueOnTarget(target, signal, context, newVal);
                 break;
             }
             case 'ToggleBitInSignal': {
                 const signal = await this.getValue(command.signal, context);
                 const bitNumber = await this.getValue(command.bitNumber ?? 0, context);
-                let state = await this._visualizationHandler.getState(this.getSignaName(signal, context));
+                const target = await this.getValue(command.target, context);
+                let state = await this.getValueFromTarget(target, signal, context);
                 let mask = Long.fromNumber(1).shiftLeft(bitNumber);
-                const newVal = Long.fromNumber(state.val).xor(mask).toNumber();
-                await this._visualizationHandler.setState(this.getSignaName(signal, context), newVal);
+                const newVal = Long.fromNumber(state).xor(mask).toNumber();
+                await this.setValueOnTarget(target, signal, context, newVal);
                 break;
             }
             case 'Javascript': {
@@ -320,7 +358,7 @@ export class ScriptSystem {
                     return outerContext.root[value.name];
                 }
                 case 'signal': {
-                    let sng = await this._visualizationHandler.getState(this.getSignaName(value.name, outerContext));
+                    let sng = await this._visualizationHandler.getState(this.getSignalName(value.name, outerContext));
                     return sng.val;
                 }
                 case 'event': {
@@ -347,7 +385,7 @@ export class ScriptSystem {
                     let text = value.name;
                     if (text != null) {
                         const signal = await this.parseStringWithValues(text, outerContext);
-                        const state = await this._visualizationHandler.getState(this.getSignaName(signal, outerContext));
+                        const state = await this._visualizationHandler.getState(this.getSignalName(signal, outerContext));
                         return state.val;
                     }
                     return null;
@@ -372,13 +410,13 @@ export class ScriptSystem {
             return context.root[name.substring(2)];
         }
         else if (name[0] === '?') {
-            return await this._visualizationHandler.getState(this.getSignaName(context.root[name.substring(2)], context));
+            return await this._visualizationHandler.getState(this.getSignalName(context.root[name.substring(2)], context));
         }
-        return await this._visualizationHandler.getState(this.getSignaName(name, context));
+        return await this._visualizationHandler.getState(this.getSignalName(name, context));
     }
     async parseStringWithValues(text, context) {
         const parsed = parseBindingString(text);
-        let results = await Promise.all(parsed.signals.map(x => this.getStateOrFieldOrParameter(this.getSignaName(x, context), context)));
+        let results = await Promise.all(parsed.signals.map(x => this.getStateOrFieldOrParameter(this.getSignalName(x, context), context)));
         let nm = parsed.parts[0];
         for (let i = 0; i < parsed.parts.length - 1; i++) {
             let v = results[i];
@@ -390,7 +428,7 @@ export class ScriptSystem {
         }
         return nm;
     }
-    getSignaName(name, outerContext) {
+    getSignalName(name, outerContext) {
         if (name[0] === '.')
             return outerContext.relativeSignalsPath + name;
         return name;

package/dist/scripting/ScriptUpgrader.d.ts

@@ -1,5 +1,5 @@
 import { ScriptCommands, SetElementProperty } from "./ScriptCommands";
 export declare class ScriptUpgrades {
-    static upgradeScriptCommand(scriptCommand: ScriptCommands): 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 | SetElementProperty | 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").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.123",
+  "version": "0.1.125",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",