@node-projects/web-component-designer-visualization-addons 0.1.145 → 0.1.147

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export * from './blockly/components/components.js';
 export * from './components/BindingsEditor.js';
 export * from './components/BindingsEditorHistoric.js';
 export * from './components/SimpleScriptEditor.js';
+export * from './components/SimpleScriptCommandPicker.js';
+export * from './components/SimpleScriptEditorHelp.js';
 export * from './components/VisualizationPropertyGrid.js';
 export * from './components/ParameterEditor.js';
 export * from './components/EventAssignment.js';
@@ -16,6 +18,7 @@ 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/ScriptCommandsDescriptions.js';
 export * from './scripting/ScriptSystem.js';
 export * from './services/BindableObjectDragDropService.js';
 export * from './services/VisualizationBindingsService.js';

package/dist/index.js

@@ -5,12 +5,15 @@ export * from './blockly/components/components.js';
 export * from './components/BindingsEditor.js';
 export * from './components/BindingsEditorHistoric.js';
 export * from './components/SimpleScriptEditor.js';
+export * from './components/SimpleScriptCommandPicker.js';
+export * from './components/SimpleScriptEditorHelp.js';
 export * from './components/VisualizationPropertyGrid.js';
 export * from './components/ParameterEditor.js';
 export * from './components/EventAssignment.js';
 export * from './helpers/BindingsHelper.js';
 export * from './scripting/Script.js';
 export * from './scripting/ScriptCommands.js';
+export * from './scripting/ScriptCommandsDescriptions.js';
 export * from './scripting/ScriptSystem.js';
 export * from './services/BindableObjectDragDropService.js';
 export * from './services/VisualizationBindingsService.js';

package/dist/interfaces/VisualizationShell.d.ts

@@ -1,6 +1,7 @@
 import { IBindableObjectsBrowser } from "@node-projects/web-component-designer";
 export interface VisualizationShell {
     openConfirmation(element: HTMLElement, options: {
+        title?: string;
         x?: number;
         y?: number;
         width?: number;
@@ -11,5 +12,15 @@ export interface VisualizationShell {
         confirmText?: string;
         cancelText?: string;
     }): Promise<boolean>;
+    openModal(element: HTMLElement, options: {
+        title?: string;
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+        parent?: HTMLElement;
+        abortSignal?: AbortSignal;
+        disableResize?: boolean;
+    }): Promise<void>;
     createBindableObjectBrowser: () => IBindableObjectsBrowser;
 }

package/dist/scripting/JsonSnippetHighlighter.d.ts

@@ -0,0 +1,3 @@
+export declare function escapeHtml(text: string): string;
+/** Minimal JSON syntax highlighter for short code-snippet examples - not a real parser. */
+export declare function highlightJson(json: string): string;

package/dist/scripting/JsonSnippetHighlighter.js

@@ -0,0 +1,16 @@
+export function escapeHtml(text) {
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+/** Minimal JSON syntax highlighter for short code-snippet examples - not a real parser. */
+export function highlightJson(json) {
+    const escaped = escapeHtml(json);
+    return escaped.replace(/("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|\b(-?\d+(?:\.\d+)?)\b/g, (match, str, colon, keyword, num) => {
+        if (str)
+            return `<span class="${colon ? 'cs-key' : 'cs-str'}">${str}</span>${colon ?? ''}`;
+        if (keyword)
+            return `<span class="cs-bool">${keyword}</span>`;
+        if (num)
+            return `<span class="cs-num">${num}</span>`;
+        return match;
+    });
+}

package/dist/scripting/ScriptCommands.d.ts

@@ -1,4 +1,5 @@
-export declare type ScriptCommands = RunnableScriptCommands | Comment | Condition | Exit | Label | Goto;
+import { IScriptMultiplexValue } from "../interfaces/IScriptMultiplexValue.js";
+export declare type ScriptCommands = RunnableScriptCommands | Comment | Condition | If | Exit | Label | Goto;
 export declare type RunnableScriptCommands = OpenScreen | OpenUrl | OpenDialog | CloseDialog | ToggleSignalValue | ToggleSignalValueThroughList | SetSignalValue | IncrementSignalValue | DecrementSignalValue | SetBitInSignal | ClearBitInSignal | ToggleBitInSignal | Console | CalculateSignalValue | Javascript | SetElementProperty | Delay | SwitchLanguage | Login | Logout | SubscribeSignal | UnsubscribeSignal | WriteSignalsInGroup | ClearSignalsInGroup | RunScript | CopySignalValuesFromFolder | ShowMessageBox | ShowPrompt | ExportSignalValuesAsJson | ImportSignalValuesFromJson | Repeat;
 /**
  * signal - a signal (the default)
@@ -419,6 +420,38 @@ export interface Condition {
     falseScriptType?: string;
     additionalData?: string;
 }
+export interface IfSignal extends IScriptMultiplexValue {
+    /**
+    * Optional variable name to reference this value in the formula (e.g. "isOn").
+    * If empty, the value is referenced positionally as __0, __1, __2, ... (in listed order).
+    */
+    varName?: string;
+}
+export interface If {
+    type: 'If';
+    /**
+    * Values referenced in the formula, either positionally as __0, __1, __2, ... (in listed
+    * order) or, if varName is set, by that name. Each entry works like Condition.value1
+    * (source: signal/property/elementProperty/signalInProperty/event/parameter/context/
+    * complexString/complexSignal/expression)
+    * @TJS-format signalList
+    */
+    signals: IfSignal[];
+    /**
+    * Boolean formula, e.g. (__0 == true || __1 == true) && __2 == false
+    * @TJS-format formula
+    */
+    formula: string;
+    /**
+    * Commands executed when the formula evaluates to true
+    */
+    trueCommands: ScriptCommands[];
+    /**
+    * Commands executed when the formula evaluates to false
+    */
+    elseCommands: ScriptCommands[];
+    additionalData?: string;
+}
 export interface Exit {
     type: 'Exit';
     additionalData?: string;

package/dist/scripting/ScriptCommandsDescriptions.d.ts

@@ -0,0 +1,9 @@
+export interface ScriptCommandHelp {
+    /** short hint shown next to the command name */
+    description: string;
+    /** a single command object, as JSON */
+    example: string;
+    /** optional longer clarification, shown below the example */
+    note?: string;
+}
+export declare const nativeScriptCommandDescriptions: Record<string, ScriptCommandHelp>;

package/dist/scripting/ScriptCommandsDescriptions.js

@@ -0,0 +1,159 @@
+export const nativeScriptCommandDescriptions = {
+    Comment: {
+        description: 'has no effect on script execution',
+        example: '{ "type": "Comment", "comment": "explains the next step" }',
+    },
+    OpenScreen: {
+        description: 'navigate to a screen (with history)',
+        example: '{ "type": "OpenScreen", "screen": "MyScreen" }',
+    },
+    OpenDialog: {
+        description: 'open a screen as a movable/closable dialog',
+        example: '{ "type": "OpenDialog", "screen": "MyScreen", "title": "My Dialog",\n  "moveable": true, "closeable": true }',
+    },
+    CloseDialog: {
+        description: 'close the parent dialog this command runs in',
+        example: '{ "type": "CloseDialog" }',
+    },
+    OpenUrl: {
+        description: 'open an URL, optionally as an in-app dialog',
+        example: '{ "type": "OpenUrl", "url": "https://example.com", "target": "_blank", "openInDialog": false }',
+    },
+    ShowMessageBox: {
+        description: 'ask the user to confirm before continuing',
+        example: '{ "type": "ShowMessageBox", "title": "Confirm", "message": "Are you sure?",\n  "messageType": "warning", "buttons": "yesNo", "resultSignal": ".Local.Result",\n  "exitScriptOnCancel": true }',
+        note: 'exitScriptOnCancel: true stops the chain when the user picks a negative button.',
+    },
+    ShowPrompt: {
+        description: 'ask the user for text input',
+        example: '{ "type": "ShowPrompt", "title": "Name?", "message": "Enter a name",\n  "resultSignal": ".Local.Name", "exitScriptOnCancel": true }',
+    },
+    SetSignalValue: {
+        description: 'write a signal / property',
+        example: '{ "type": "SetSignalValue", "signal": ".Some.Signal", "value": true }',
+        note: 'target: "signal" (default) | "property" (a screen/control property) | "elementProperty" (a property of the element raising the event).',
+    },
+    ToggleSignalValue: {
+        description: 'toggle a boolean signal / property',
+        example: '{ "type": "ToggleSignalValue", "signal": ".Some.Toggle" }',
+    },
+    ToggleSignalValueThroughList: {
+        description: 'cycle a signal / property through a fixed list of values',
+        example: '{ "type": "ToggleSignalValueThroughList", "signal": ".Some.Mode", "valueList": [1, 2, 3] }',
+    },
+    IncrementSignalValue: {
+        description: 'increment a numeric signal / property',
+        example: '{ "type": "IncrementSignalValue", "signal": ".Some.Counter", "value": 1 }',
+    },
+    DecrementSignalValue: {
+        description: 'decrement a numeric signal / property',
+        example: '{ "type": "DecrementSignalValue", "signal": ".Some.Counter", "value": 1 }',
+    },
+    CalculateSignalValue: {
+        description: 'calculate a new signal value from a formula',
+        example: '{ "type": "CalculateSignalValue", "targetSignal": ".Some.Result",\n  "formula": "{adapter.0.level} * 100 + 30" }',
+        note: 'The formula can reference other signals in curly braces: {signalName}.',
+    },
+    SetBitInSignal: {
+        description: 'set a single bit (by number) in a signal / property',
+        example: '{ "type": "SetBitInSignal", "signal": ".Some.Bits", "bitNumber": 3 }',
+    },
+    ClearBitInSignal: {
+        description: 'clear a single bit (by number) in a signal / property',
+        example: '{ "type": "ClearBitInSignal", "signal": ".Some.Bits", "bitNumber": 3 }',
+    },
+    ToggleBitInSignal: {
+        description: 'toggle a single bit (by number) in a signal / property',
+        example: '{ "type": "ToggleBitInSignal", "signal": ".Some.Bits", "bitNumber": 3 }',
+    },
+    Javascript: {
+        description: 'run a JavaScript snippet',
+        example: '{ "type": "Javascript", "script": "console.log(context.element)" }',
+        note: 'context: { event, element, shadowRoot, instance }.',
+    },
+    SetElementProperty: {
+        description: 'set a property/attribute/CSS value/class on matching elements',
+        example: '{ "type": "SetElementProperty", "target": "property", "targetSelectorTarget": "container",\n  "targetSelector": ".my-class", "name": "disabled", "value": true }',
+        note: 'target: "property" (default) | "attribute" | "css" | "class". targetSelectorTarget: "container" (screen/customControl, default) | "element" (current element).',
+    },
+    Delay: {
+        description: 'pause the script chain',
+        example: '{ "type": "Delay", "value": 500 }',
+    },
+    Console: {
+        description: 'write a message to the browser console',
+        example: '{ "type": "Console", "target": "log", "message": "done" }',
+        note: 'target: "log" (default) | "info" | "debug" | "warn" | "error".',
+    },
+    SwitchLanguage: {
+        description: 'switch the active UI language',
+        example: '{ "type": "SwitchLanguage", "language": "en" }',
+    },
+    Login: {
+        description: 'log a user in',
+        example: '{ "type": "Login", "username": "user", "password": "pass" }',
+    },
+    Logout: {
+        description: 'log the current user out',
+        example: '{ "type": "Logout" }',
+    },
+    SubscribeSignal: {
+        description: 'subscribe to a signal so its updates are pushed to the client',
+        example: '{ "type": "SubscribeSignal", "signal": ".Some.Signal", "oneTime": false }',
+    },
+    UnsubscribeSignal: {
+        description: 'unsubscribe from a previously subscribed signal',
+        example: '{ "type": "UnsubscribeSignal", "signal": ".Some.Signal" }',
+    },
+    WriteSignalsInGroup: {
+        description: 'write all pending signal values of a named group',
+        example: '{ "type": "WriteSignalsInGroup", "group": "MyGroup" }',
+    },
+    ClearSignalsInGroup: {
+        description: 'clear all pending signal values of a named group',
+        example: '{ "type": "ClearSignalsInGroup", "group": "MyGroup" }',
+    },
+    RunScript: {
+        description: 'run another named script',
+        example: '{ "type": "RunScript", "name": "MyScript", "scriptType": "SimpleScript" }',
+    },
+    CopySignalValuesFromFolder: {
+        description: 'copy signal values from one signal folder to another',
+        example: '{ "type": "CopySignalValuesFromFolder", "sourceFolder": ".Source", "destinationFolder": ".Target" }',
+    },
+    ExportSignalValuesAsJson: {
+        description: 'export matching signal values as a downloadable JSON file',
+        example: '{ "type": "ExportSignalValuesAsJson", "regex": "^\\\\.Some\\\\..*", "fileName": "export.json" }',
+    },
+    ImportSignalValuesFromJson: {
+        description: 'import signal values from a JSON string',
+        example: '{ "type": "ImportSignalValuesFromJson", "data": "{ \\".Some.Signal\\": true }" }',
+    },
+    Repeat: {
+        description: 'jump back to a label a number of times, or indefinitely',
+        example: '{ "type": "Repeat", "label": "lbl_loop", "count": 0, "mode": "eventValid" }',
+        note: 'mode: "eventValid" (default, repeats until the event is no longer active) | "always" (repeats until count is 0 or indefinitely when count is 0).',
+    },
+    Condition: {
+        description: 'compare two values and jump to a label depending on the result',
+        example: '{ "type": "Condition", "value1": {"source":"signal","name":".Is.On"}, "value2": true,\n  "comparisonType": "==", "trueGotoLabel": "lbl_off", "falseGotoLabel": "lbl_on" }',
+        note: 'comparisonType: ==null | !=null | ==true | ==false | == | != | > | < | >= | <= | && | ||.',
+    },
+    If: {
+        description: 'evaluate a formula and run nested commands depending on the result',
+        example: '{ "type": "If",\n  "signals": [{"source":"signal","name":".Is.On"}, {"varName":"ready","source":"signal","name":".Is.Ready"}],\n  "formula": "__0 == true && ready == false", "trueCommands": [], "elseCommands": [] }',
+        note: 'signals is a list of values (like Condition.value1). Each is referenced in the formula either positionally as __0, __1, ... or, if varName is set, by that name. trueCommands/elseCommands are edited as nested commands in the tree, not as JSON here.',
+    },
+    Exit: {
+        description: 'stop executing the current script chain',
+        example: '{ "type": "Exit" }',
+    },
+    Label: {
+        description: 'a named jump target for Condition / Goto / Repeat',
+        example: '{ "type": "Label", "label": "lbl_on" }',
+    },
+    Goto: {
+        description: 'jump unconditionally to a label',
+        example: '{ "type": "Goto", "label": "lbl_on" }',
+    },
+};

package/dist/scripting/ScriptSystem.d.ts

@@ -1,6 +1,6 @@
 import { VisualisationElementScript } from "../interfaces/VisualisationElementScript.js";
 import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
-import { ScriptCommands, signalTarget } from "./ScriptCommands.js";
+import { If, ScriptCommands, signalTarget } from "./ScriptCommands.js";
 export declare const cyclicAttributeName = "cyclic";
 export type contextType = {
     event: Event;
@@ -13,7 +13,7 @@ export declare class ScriptSystem {
     _visualizationHandler: VisualizationHandler;
     _subscriptionCallback: () => void;
     constructor(visualizationHandler: VisualizationHandler);
-    execute(scriptCommands: ScriptCommands[], outerContext: contextType): Promise<void>;
+    execute(scriptCommands: ScriptCommands[], outerContext: contextType): Promise<boolean>;
     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>;
@@ -23,6 +23,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>;
+    evaluateIfFormula(command: If, outerContext: contextType): Promise<boolean>;
     getSignalName(name: string, outerContext: contextType): string;
     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

@@ -22,6 +22,7 @@ export class ScriptSystem {
     async execute(scriptCommands, outerContext) {
         let repeatCount = -1;
         let eventNotValid = false;
+        let stopped = false;
         const triggerEvent = outerContext.event?.type;
         const cancelEvent = triggerEvent ? eventOpposites[triggerEvent] : null;
         if (cancelEvent) {
@@ -36,8 +37,18 @@ export class ScriptSystem {
         for (let i = 0; i < scriptCommands.length; i++) {
             let c = scriptCommands[i];
             if (c.type == "Exit") {
+                stopped = true;
                 break;
             }
+            else if (c.type == "If") {
+                const res = await this.evaluateIfFormula(c, outerContext);
+                const branchCommands = (res ? c.trueCommands : c.elseCommands) ?? [];
+                const shouldContinue = await this.execute(branchCommands, outerContext);
+                if (!shouldContinue) {
+                    stopped = true;
+                    break;
+                }
+            }
             else if (c.type == "Goto") {
                 const label = await this.getValue(c.label, outerContext);
                 i = scriptCommands.findIndex(x => x.type == "Label" && x.label == label);
@@ -133,10 +144,12 @@ export class ScriptSystem {
             else {
                 const continueScript = await this.runScriptCommand(c, outerContext);
                 if (!continueScript) {
+                    stopped = true;
                     break;
                 }
             }
         }
+        return !stopped;
     }
     async getValueFromTarget(target, name, context) {
         if (target === 'property') {
@@ -168,6 +181,7 @@ export class ScriptSystem {
             case 'Comment':
             case 'Label':
             case 'Condition':
+            case 'If':
             case 'Goto':
             case 'Exit':
             case 'Repeat':
@@ -514,6 +528,17 @@ export class ScriptSystem {
         }
         return nm;
     }
+    async evaluateIfFormula(command, outerContext) {
+        const entries = command.signals ?? [];
+        const varNames = entries.map((e, i) => e.varName?.trim() || '__' + i);
+        const values = await Promise.all(entries.map(e => this.getValue(e, outerContext)));
+        const formula = await this.getValue(command.formula, outerContext);
+        if (!command.compiledFormula || command._compiledFormulaSrc !== formula) {
+            command.compiledFormula = new Function(...varNames, 'return (' + formula + ');');
+            command._compiledFormulaSrc = formula;
+        }
+        return !!command.compiledFormula(...values);
+    }
     getSignalName(name, outerContext) {
         if (name[0] === '.')
             return outerContext.relativeSignalsPath + 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").ToggleSignalValueThroughList | 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").ShowPrompt | import("./ScriptCommands").ExportSignalValuesAsJson | import("./ScriptCommands").ImportSignalValuesFromJson | import("./ScriptCommands").Repeat | import("./ScriptCommands").Comment | import("./ScriptCommands").Condition | import("./ScriptCommands").Exit | import("./ScriptCommands").Label | import("./ScriptCommands").Goto;
+    static upgradeScriptCommand(scriptCommand: ScriptCommands): import("./ScriptCommands").OpenScreen | import("./ScriptCommands").OpenUrl | import("./ScriptCommands").OpenDialog | import("./ScriptCommands").CloseDialog | import("./ScriptCommands").ToggleSignalValue | import("./ScriptCommands").ToggleSignalValueThroughList | 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").ShowPrompt | import("./ScriptCommands").ExportSignalValuesAsJson | import("./ScriptCommands").ImportSignalValuesFromJson | import("./ScriptCommands").Repeat | import("./ScriptCommands").Comment | import("./ScriptCommands").Condition | import("./ScriptCommands").If | import("./ScriptCommands").Exit | import("./ScriptCommands").Label | import("./ScriptCommands").Goto;
     static upgradeSetElementProperty(scriptCommand: SetElementProperty): SetElementProperty;
 }

package/dist/scripting/ScriptUpgrader.js

@@ -4,6 +4,10 @@ export class ScriptUpgrades {
         if (scriptCommand.type === 'SetElementProperty') {
             return ScriptUpgrades.upgradeSetElementProperty(scriptCommand);
         }
+        if (scriptCommand.type === 'If') {
+            scriptCommand.trueCommands = (scriptCommand.trueCommands ?? []).map(c => ScriptUpgrades.upgradeScriptCommand(c));
+            scriptCommand.elseCommands = (scriptCommand.elseCommands ?? []).map(c => ScriptUpgrades.upgradeScriptCommand(c));
+        }
         return scriptCommand;
     }
     static upgradeSetElementProperty(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.145",
+  "version": "0.1.147",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",
@@ -14,7 +14,7 @@
     "bundle": "esbuild ./dist/index.js --format=esm --minify --external:@node-projects/css-parser --external:@blockly/* --external:blockly --external:long --external:wunderbaum --external:@node-projects/* --platform=neutral --bundle --outfile=./dist/index-min.js"
   },
   "dependencies": {
-    "@blockly/zoom-to-fit": ">=6.0.9",
+    "@blockly/zoom-to-fit": ">=13.0.0",
     "@node-projects/base-custom-webcomponent": ">=0.27.8",
     "@node-projects/css-parser": "^5.2.0",
     "@node-projects/propertygrid.webcomponent": ">=1.2.3",
@@ -22,7 +22,7 @@
     "@node-projects/web-component-designer": ">=0.1.224",
     "@node-projects/web-component-designer-codeview-monaco": ">=0.1.32",
     "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.29",
-    "blockly": ">=11.1.1",
+    "blockly": ">=13.0.0",
     "long": ">=5.2.3"
   },
   "devDependencies": {