@node-projects/web-component-designer-visualization-addons 0.1.68 → 0.1.70

package/dist/components/SimpleScriptEditor.js

@@ -7,6 +7,7 @@ import { Wunderbaum } from 'wunderbaum';
 import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' with { type: 'css' };
 import { VisualizationPropertyGrid } from "./VisualizationPropertyGrid.js";
 import '@node-projects/splitview.webcomponent';
+import { ScriptUpgrades } from "../scripting/ScriptUpgrader.js";
 export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend {
     static style = css `
         :host {
@@ -191,6 +192,7 @@ export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend
         this._script = script;
         let commandListTreeItems = [];
         for (let c of this._script.commands) {
+            c = ScriptUpgrades.upgradeScriptCommand(c);
             commandListTreeItems.push(this.createTreeItem(c));
         }
         ;

package/dist/interfaces/IScriptMultiplexValue.d.ts

@@ -4,11 +4,12 @@ export declare class IScriptMultiplexValue {
     * 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: 'signal' | 'property' | 'event' | 'parameter' | 'complexString' | 'complexSignal' | 'expression';
+    source: 'signal' | 'property' | 'event' | 'parameter' | 'complexString' | 'complexSignal' | 'expression' | 'context';
     /**
      * 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

@@ -4,6 +4,7 @@ export class IScriptMultiplexValue {
     * 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

package/dist/scripting/ScriptCommands.d.ts

@@ -184,9 +184,15 @@ export interface SetElementProperty {
      */
     target: 'property' | 'attribute' | 'css' | 'class';
     /**
-     * where to search for the elements
+     * where to search for the elements.
+     * element
+     * container = screen or customControl
      */
-    targetSelectorTarget: 'currentScreen' | 'parentScreen' | 'currentElement' | 'parentElement';
+    targetSelectorTarget: 'element' | 'container';
+    /**
+     * wich parent, 0 = current, 1 = first parent, 2 = ...
+     */
+    parentIndex: number;
     /**
      * css selector to find elements, if empty the targetSelectorTarget is used
      */
@@ -196,8 +202,8 @@ export interface SetElementProperty {
      */
     name: string;
     /**
-   * only for class
-   */
+     * only for target: class
+     */
     mode: 'add' | 'remove' | 'toggle';
     /**
      * value you want to set

package/dist/scripting/ScriptSystem.d.ts

@@ -15,7 +15,8 @@ export declare class ScriptSystem {
     execute(scriptCommands: ScriptCommands[], outerContext: contextType): Promise<void>;
     runExternalScript(name: string, type: string): Promise<void>;
     runScriptCommand<T extends ScriptCommands>(command: T, context: contextType): Promise<void>;
-    getTargetFromTargetSelector(context: contextType, targetSelectorTarget: 'currentScreen' | 'parentScreen' | 'currentElement' | 'parentElement', targetSelector: string): Iterable<Element>;
+    getTarget(context: contextType, targetSelectorTarget: 'element' | 'container', parentLevel: number): Element;
+    getTargetFromTargetSelector(context: contextType, targetSelectorTarget: 'element' | 'container', parentLevel: number, targetSelector: string): Iterable<Element>;
     getValue<T>(value: T, outerContext: contextType): Promise<T>;
     getStateOrFieldOrParameter(name: string, context: contextType): Promise<any>;
     parseStringWithValues(text: string, context: contextType): Promise<string>;

package/dist/scripting/ScriptSystem.js

@@ -2,6 +2,7 @@ import { sleep } from "@node-projects/web-component-designer/dist/elements/helpe
 import { generateEventCodeFromBlockly } from "../blockly/BlocklyJavascriptHelper.js";
 import { parseBindingString } from "../helpers/BindingsHelper.js";
 import Long from 'long';
+import { ScriptUpgrades } from "./ScriptUpgrader.js";
 export class ScriptSystem {
     _visualizationHandler;
     _subscriptionCallback = () => { };
@@ -176,9 +177,12 @@ export class ScriptSystem {
                 break;
             }
             case 'SetElementProperty': {
+                //@ts-ignore
+                command = ScriptUpgrades.upgradeSetElementProperty(command);
                 const name = await this.getValue(command.name, context);
                 const value = await this.getValue(command.value, context);
-                let elements = this.getTargetFromTargetSelector(context, command.targetSelectorTarget, command.targetSelector);
+                const parentIndex = await this.getValue(command.parentIndex, context);
+                let elements = this.getTargetFromTargetSelector(context, command.targetSelectorTarget, parentIndex, command.targetSelector);
                 for (let e of elements) {
                     if (command.target == 'attribute') {
                         e.setAttribute(name, value);
@@ -239,17 +243,30 @@ export class ScriptSystem {
             }
         }
     }
-    getTargetFromTargetSelector(context, targetSelectorTarget, targetSelector) {
-        let host = context.element.getRootNode().host;
-        if (targetSelector == 'currentElement')
-            host = context.element;
-        else if (targetSelector == 'parentElement')
-            host = context.element.parentElement;
-        else if (targetSelector == 'parentScreen')
-            host = host.getRootNode().host;
-        let elements = [host];
-        if (targetSelector)
-            elements = host.shadowRoot.querySelectorAll(targetSelector);
+    getTarget(context, targetSelectorTarget, parentLevel) {
+        if (targetSelectorTarget === 'container') {
+            let el = context.element.getRootNode().host;
+            for (let i = 0; i < (parentLevel ?? 0); i++)
+                el = el.getRootNode().host;
+            return el;
+        }
+        else if (targetSelectorTarget === "element") {
+            let el = context.element;
+            for (let i = 0; i < (parentLevel ?? 0); i++)
+                el = el.parentElement;
+            return el;
+        }
+        return null;
+    }
+    getTargetFromTargetSelector(context, targetSelectorTarget, parentLevel, targetSelector) {
+        const target = this.getTarget(context, targetSelectorTarget, parentLevel);
+        let elements = [target];
+        if (targetSelector) {
+            if (targetSelectorTarget === 'container')
+                elements = target.shadowRoot.querySelectorAll(targetSelector);
+            else
+                elements = target.querySelectorAll(targetSelector);
+        }
         return elements;
     }
     async getValue(value, outerContext) {
@@ -271,6 +288,10 @@ export class ScriptSystem {
                 case 'parameter': {
                     return outerContext.parameters[value.name];
                 }
+                case 'context': {
+                    const obj = ScriptSystem.extractPart(outerContext, value.name);
+                    return obj;
+                }
                 case 'complexString': {
                     let text = value.name;
                     if (text != null) {

package/dist/scripting/ScriptUpgrader.d.ts

@@ -0,0 +1,5 @@
+import { ScriptCommands, SetElementProperty } from "./ScriptCommands";
+export declare class ScriptUpgrades {
+    static upgradeScriptCommand(scriptCommand: ScriptCommands): import("./ScriptCommands").Comment | 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").ClearSiganlsInGroup | import("./ScriptCommands").Condition | import("./ScriptCommands").Exit | import("./ScriptCommands").Label | import("./ScriptCommands").RunScript | import("./ScriptCommands").Goto | import("./ScriptCommands").CopySignalValuesFromFolder | import("./ScriptCommands").ShowMessageBox | import("./ScriptCommands").ExportSignalValuesAsJson | import("./ScriptCommands").ImportSignalValuesFromJson;
+    static upgradeSetElementProperty(scriptCommand: SetElementProperty): SetElementProperty;
+}

package/dist/scripting/ScriptUpgrader.js

@@ -0,0 +1,26 @@
+//For upgradeing changed script commands
+export class ScriptUpgrades {
+    static upgradeScriptCommand(scriptCommand) {
+        if (scriptCommand.type === 'SetElementProperty') {
+            return ScriptUpgrades.upgradeSetElementProperty(scriptCommand);
+        }
+        return scriptCommand;
+    }
+    static upgradeSetElementProperty(scriptCommand) {
+        if (scriptCommand.targetSelectorTarget === 'currentScreen') {
+            scriptCommand.targetSelector = 'container';
+        }
+        else if (scriptCommand.targetSelectorTarget === 'parentScreen') {
+            scriptCommand.targetSelector = 'container';
+            scriptCommand.parentIndex = 1;
+        }
+        else if (scriptCommand.targetSelectorTarget === 'currentElement') {
+            scriptCommand.targetSelector = 'element';
+        }
+        else if (scriptCommand.targetSelectorTarget === 'parentElement') {
+            scriptCommand.targetSelector = 'element';
+            scriptCommand.parentIndex = 1;
+        }
+        return scriptCommand;
+    }
+}

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

package/dist/blockly/components/fields/FieldObjectId.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/blockly/components/fields/FieldObjectId.js

@@ -1,6 +0,0 @@
-//@ts-ignore
-class FieldObjectId extends Blockly.FieldTextInput {
-}
-//@ts-ignore
-Blockly.FieldObjectId = FieldObjectId;
-export {};