@node-projects/web-component-designer-visualization-addons 0.1.0

package/dist/index.js

@@ -0,0 +1,22 @@
+export * from './blockly/BlocklyJavascriptHelper.js';
+export * from './blockly/BlocklyScriptEditor.js';
+export * from './blockly/BlocklyToolbox.js';
+export * from './blockly/components/components.js';
+export * from './components/BindingsEditor.js';
+export * from './components/BindingsEditorHistoric.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 './interfaces/VisualizationUiHandler.js';
+export * from './scripting/Script.js';
+export * from './scripting/ScriptCommands.js';
+export * from './scripting/ScriptSystem.js';
+export * from './services/BindableObjectDragDropService.js';
+export * from './services/BindingsService.js';
+export * from './services/PropertyGridDragDropService.js';
+export * from './services/ScriptRefactorService.js';
+export * from './services/SignalPropertyEditor.js';
+//export * from './setupVisuService.js';

package/dist/interfaces/IScriptMultiplexValue.d.ts

@@ -0,0 +1,15 @@
+export declare class IScriptMultiplexValue {
+    /**
+    * signal - read the value from a IOB object
+    * 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
+    * @TJS-format signal
+    */
+    source: 'signal' | 'property' | 'event';
+    /**
+     * Name of the ioBroker object or the property of the component
+     * or for example in a event : srcElement.value to get the value of a input wich raises the event
+     * @TJS-format signal
+     */
+    name: string;
+}

package/dist/interfaces/IScriptMultiplexValue.js

@@ -0,0 +1,15 @@
+export class IScriptMultiplexValue {
+    /**
+    * signal - read the value from a IOB object
+    * 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
+    * @TJS-format signal
+    */
+    source;
+    /**
+     * Name of the ioBroker object or the property of the component
+     * or for example in a event : srcElement.value to get the value of a input wich raises the event
+     * @TJS-format signal
+     */
+    name;
+}

package/dist/interfaces/VisualisationElementScript.d.ts

@@ -0,0 +1,5 @@
+export interface VisualisationElementScript {
+    init?(instance: HTMLElement): any;
+    connectedCallback?(instance: HTMLElement): any;
+    disconnectedCallback?(instance: HTMLElement): any;
+}

package/dist/interfaces/VisualisationElementScript.js

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

package/dist/interfaces/VisualizationBinding.d.ts

@@ -0,0 +1,20 @@
+import type { BindingTarget } from "@node-projects/web-component-designer";
+export interface VisualizationBinding {
+    interval?: number;
+    signal: string;
+    inverted?: boolean;
+    twoWay?: boolean;
+    events?: string[];
+    target: BindingTarget;
+    converter?: Record<string, any>;
+    expression?: string;
+    expressionTwoWay?: string;
+    compiledExpression?: Function;
+    compiledExpressionTwoWay?: Function;
+    type?: string;
+    historic?: {
+        reloadInterval?: number;
+    };
+    maybeLitElement?: boolean;
+    litEventNames?: string[];
+}

package/dist/interfaces/VisualizationBinding.js

@@ -0,0 +1,4 @@
+//Binding: haow to use...
+//binding:display="{'signal':'aa',..."
+//binding:value="aa" -> simplified form when only binding a direct property
+export {};

package/dist/interfaces/VisualizationHandler.d.ts

@@ -0,0 +1,24 @@
+type StateValue = string | number | boolean | null;
+export interface State {
+    value: StateValue;
+}
+export interface Signal {
+    "$type": 'Signal';
+}
+export interface SignalInformation {
+    type: 'string' | 'number' | 'boolean';
+    role: 'url' | 'datetime' | 'date' | 'time';
+    writeable: boolean;
+}
+type StateChangeHandler = (id: string, state: State) => void;
+export interface VisualizationHandler {
+    getState(id: string): Promise<State>;
+    setState(id: string, val: State | StateValue, ack?: boolean): Promise<void>;
+    subscribeState(id: string, cb: StateChangeHandler): Promise<void>;
+    unsubscribeState(id: string, cb: StateChangeHandler): void;
+    getObject(id: string): Promise<Signal>;
+    getHistoricData(id: string, config: any): any;
+    getAllNames(type: string): any;
+    getSignalInformation(signal: Signal): SignalInformation;
+}
+export {};

package/dist/interfaces/VisualizationHandler.js

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

package/dist/interfaces/VisualizationShell.d.ts

@@ -0,0 +1,13 @@
+export interface VisualizationShell {
+    openConfirmation(element: HTMLElement, options: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+        parent?: HTMLElement;
+        abortSignal?: AbortSignal;
+        disableResize?: boolean;
+        confirmText?: string;
+        cancelText?: string;
+    }): Promise<boolean>;
+}

package/dist/interfaces/VisualizationShell.js

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

package/dist/interfaces/VisualizationUiHandler.d.ts

@@ -0,0 +1,5 @@
+export interface VisualizationUiHandler {
+    switchLanguage(language: string): any;
+    closeDialog(element: HTMLElement): any;
+    openDialog(): any;
+}

package/dist/interfaces/VisualizationUiHandler.js

@@ -0,0 +1,2 @@
+//dialog:{screenName: string, title: string, moveable: boolean, closeable: boolean, width: string, height: string, left: string, top: string}
+export {};

package/dist/scripting/Script.d.ts

@@ -0,0 +1,6 @@
+import { ScriptCommands } from "./ScriptCommands";
+export declare class Script {
+    name?: string;
+    commands: ScriptCommands[];
+    parameters?: Record<string, any>;
+}

package/dist/scripting/Script.js

@@ -0,0 +1,5 @@
+export class Script {
+    name;
+    commands;
+    parameters;
+}

package/dist/scripting/ScriptCommands.d.ts

@@ -0,0 +1,192 @@
+export declare type ScriptCommands = OpenScreen | OpenUrl | OpenDialog | CloseDialog | ToggleSignalValue | SetSignalValue | IncrementSignalValue | DecrementSignalValue | SetBitInSignal | ClearBitInSignal | ToggleBitInSignal | Console | CalculateSignalValue | Javascript | SetElementProperty | Delay | SwitchLanguage | Login | Logout;
+export interface OpenScreen {
+    type: 'OpenScreen';
+    /**
+     * Name of the Screen
+     * @TJS-format screen
+     */
+    screen: string;
+    /**
+     * If signals in screen are defined relative (starting with a '.'), this will be prepended
+     */
+    relativeSignalsPath?: string;
+    noHistory?: boolean;
+}
+export interface OpenDialog {
+    type: 'OpenDialog';
+    /**
+     * Name of the Screen
+     * @TJS-format screen
+     */
+    screen: string;
+    title?: string;
+    /**
+     * If signals in screen are defined relative (starting with a '.'), this will be prepended
+     */
+    relativeSignalsPath?: string;
+    moveable?: boolean;
+    closeable?: boolean;
+    width?: string;
+    height?: string;
+    left?: string;
+    top?: string;
+}
+export interface CloseDialog {
+    type: 'CloseDialog';
+}
+export interface OpenUrl {
+    type: 'OpenUrl';
+    url: string;
+    /**
+     * defaults to '_blank'
+     */
+    target: string;
+    openInDialog: boolean;
+}
+export interface SetSignalValue {
+    type: 'SetSignalValue';
+    /**
+     * Name of the signal
+     * @TJS-format signal
+     */
+    signal: string;
+    value: any;
+}
+export interface ToggleSignalValue {
+    type: 'ToggleSignalValue';
+    /**
+     * Name of the signal
+     * @TJS-format signal
+     */
+    signal: string;
+}
+export interface IncrementSignalValue {
+    type: 'IncrementSignalValue';
+    /**
+     * Name of the signal
+     * @TJS-format signal
+     */
+    signal: string;
+    value: number;
+}
+export interface CalculateSignalValue {
+    type: 'CalculateSignalValue';
+    /**
+     * Name of the signal
+     * @TJS-format signal
+     */
+    targetSignal: string;
+    /**
+     * A formula to calculate the new signal value, can contain other signals in angle brackets: {}
+     * Example: {adapter.0.level} * 100 + 30
+     */
+    formula: string;
+}
+export interface DecrementSignalValue {
+    type: 'DecrementSignalValue';
+    /**
+     * Name of the signal
+     * @TJS-format signal
+     */
+    signal: string;
+    value: number;
+}
+export interface SetBitInSignal {
+    type: 'SetBitInSignal';
+    /**
+     * Name of the signal
+     * @TJS-format signal
+     */
+    signal: string;
+    bitNumber: number;
+}
+export interface ClearBitInSignal {
+    type: 'ClearBitInSignal';
+    /**
+     * Name of the signal
+     * @TJS-format signal
+     */
+    signal: string;
+    bitNumber: number;
+}
+export interface ToggleBitInSignal {
+    type: 'ToggleBitInSignal';
+    /**
+     * Name of the signal
+     * @TJS-format signal
+     */
+    signal: string;
+    bitNumber: number;
+}
+export interface Javascript {
+    type: 'Javascript';
+    /**
+     * Usable objects in Script:
+     * context : {event : Event, element: Element, shadowRoot: ShadowRoot, instance: Element }
+     * @TJS-format script
+     */
+    script: string;
+}
+export interface SetElementProperty {
+    type: 'SetElementProperty';
+    /**
+     * what of the elements do you want to set
+     */
+    target: 'property' | 'attribute' | 'css' | 'class';
+    /**
+     * where to search for the elements
+     */
+    targetSelectorTarget: 'currentScreen' | 'parentScreen' | 'currentElement' | 'parentElement';
+    /**
+     * css selector to find elements, if empty the targetSelectorTarget is used
+     */
+    targetSelector: string;
+    /**
+     * name of property/attribute or css value you want to set
+     */
+    name: string;
+    /**
+   * only for class
+   */
+    mode: 'add' | 'remove' | 'toggle';
+    /**
+     * value you want to set
+     */
+    value: any;
+}
+export interface Delay {
+    type: 'Delay';
+    /**
+     * miliseconds to delay
+     */
+    value: number;
+}
+export interface Console {
+    type: 'Console';
+    /**
+    * target where to log
+    */
+    target: 'log' | 'info' | 'debug' | 'warn' | 'error';
+    /**
+     * console message
+     */
+    message: string;
+}
+export interface SwitchLanguage {
+    type: 'SwitchLanguage';
+    language: string;
+}
+export interface Logout {
+    type: 'Logout';
+}
+export interface Login {
+    type: 'Login';
+    /**
+    * username
+    */
+    username: 'string';
+    /**
+     * password
+     */
+    password: string;
+}

package/dist/scripting/ScriptCommands.js

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

package/dist/scripting/ScriptSystem.d.ts

@@ -0,0 +1,23 @@
+import { IScriptMultiplexValue } from "../interfaces/IScriptMultiplexValue.js";
+import { VisualisationElementScript } from "../interfaces/VisualisationElementScript.js";
+import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
+import { ScriptCommands } from "./ScriptCommands.js";
+import { VisualizationUiHandler } from "../interfaces/VisualizationUiHandler.js";
+export declare class ScriptSystem {
+    _visualizationHandler: VisualizationHandler;
+    _visualizationUiHandler: VisualizationUiHandler;
+    constructor(visualizationHandler: VisualizationHandler, visualizationUiHandler: VisualizationUiHandler);
+    execute(scriptCommands: ScriptCommands[], outerContext: {
+        event: Event;
+        element: Element;
+        root: HTMLElement;
+    }): Promise<void>;
+    runScriptCommand<T extends ScriptCommands>(command: T, context: any): Promise<void>;
+    getValue<T>(value: string | number | boolean | IScriptMultiplexValue, outerContext: {
+        event: Event;
+        element: Element;
+        root: HTMLElement;
+    }): Promise<any>;
+    static extractPart(obj: any, propertyPath: string): any;
+    assignAllScripts(source: string, javascriptCode: string, shadowRoot: ShadowRoot, instance: HTMLElement): Promise<VisualisationElementScript>;
+}

package/dist/scripting/ScriptSystem.js

@@ -0,0 +1,224 @@
+import { sleep } from "@node-projects/web-component-designer/src/elements/helper/Helper.js";
+import { generateEventCodeFromBlockly } from "../blockly/BlocklyJavascriptHelper.js";
+import { parseBindingString } from "../helpers/BindingsHelper.js";
+import Long from 'long';
+export class ScriptSystem {
+    _visualizationHandler;
+    _visualizationUiHandler;
+    constructor(visualizationHandler, visualizationUiHandler) {
+        this._visualizationHandler = visualizationHandler;
+    }
+    async execute(scriptCommands, outerContext) {
+        for (let c of scriptCommands) {
+            this.runScriptCommand(c, outerContext);
+        }
+    }
+    async runScriptCommand(command, context) {
+        switch (command.type) {
+            case 'CloseDialog': {
+                //const dialogdId = await this.getValue(c.dialogId, outerContext);                
+                this._visualizationUiHandler.closeDialog(context.element);
+                break;
+            }
+            case 'OpenUrl': {
+                window.open(await this.getValue(command.url, context), command.target);
+                break;
+            }
+            case 'Delay': {
+                const value = await this.getValue(command.value, context);
+                await sleep(value);
+                break;
+            }
+            case 'Console': {
+                const target = await this.getValue(command.target, context);
+                const message = await this.getValue(command.message, context);
+                console[target](message);
+                break;
+            }
+            case 'SwitchLanguage': {
+                const language = await this.getValue(command.language, context);
+                this._visualizationUiHandler.switchLanguage(language);
+                break;
+            }
+            case 'ToggleSignalValue': {
+                const signal = await this.getValue(command.signal, context);
+                let state = await this._visualizationHandler.getState(signal);
+                await this._visualizationHandler.setState(signal, !state?.value);
+                break;
+            }
+            case 'SetSignalValue': {
+                const signal = await this.getValue(command.signal, context);
+                await this._visualizationHandler.setState(signal, await this.getValue(command.value, context));
+                break;
+            }
+            case 'IncrementSignalValue': {
+                const signal = await this.getValue(command.signal, context);
+                let state = await this._visualizationHandler.getState(signal);
+                await this._visualizationHandler.setState(signal, state.value + await this.getValue(command.value, context));
+                break;
+            }
+            case 'DecrementSignalValue': {
+                const signal = await this.getValue(command.signal, context);
+                let state = await this._visualizationHandler.getState(signal);
+                await this._visualizationHandler.setState(signal, state.value - await this.getValue(command.value, context));
+                break;
+            }
+            case 'CalculateSignalValue': {
+                const formula = await this.getValue(command.formula, context);
+                const targetSignal = await this.getValue(command.targetSignal, context);
+                let parsed = parseBindingString(formula);
+                let results = await Promise.all(parsed.signals.map(x => this._visualizationHandler.getState(x)));
+                let nm = '';
+                for (let i = 0; i < parsed.parts.length - 1; i++) {
+                    let v = results[i].value;
+                    if (v == null)
+                        return;
+                    nm += v + parsed.parts[i + 1];
+                }
+                let result = eval(nm);
+                await this._visualizationHandler.setState(targetSignal, result);
+                break;
+            }
+            case 'SetBitInSignal': {
+                const signal = await this.getValue(command.signal, context);
+                let state = await this._visualizationHandler.getState(signal);
+                let mask = Long.fromNumber(1).shiftLeft(command.bitNumber);
+                const newVal = Long.fromNumber(state.value).or(mask).toNumber();
+                await this._visualizationHandler.setState(signal, newVal);
+                break;
+            }
+            case 'ClearBitInSignal': {
+                const signal = await this.getValue(command.signal, context);
+                let state = await this._visualizationHandler.getState(signal);
+                let mask = Long.fromNumber(1).shiftLeft(command.bitNumber);
+                mask.negate();
+                const newVal = Long.fromNumber(state.value).and(mask).toNumber();
+                await this._visualizationHandler.setState(signal, newVal);
+                break;
+            }
+            case 'ToggleBitInSignal': {
+                const signal = await this.getValue(command.signal, context);
+                let state = await this._visualizationHandler.getState(signal);
+                let mask = Long.fromNumber(1).shiftLeft(command.bitNumber);
+                const newVal = Long.fromNumber(state.value).xor(mask).toNumber();
+                await this._visualizationHandler.setState(signal, newVal);
+                break;
+            }
+            case 'Javascript': {
+                const script = await this.getValue(command.script, context);
+                let mycontext = context;
+                mycontext.shadowRoot = context.element.getRootNode();
+                mycontext.instance = context.shadowRoot.host;
+                if (!command.compiledScript)
+                    command.compiledScript = new Function('context', script);
+                command.compiledScript(mycontext);
+                break;
+            }
+            case 'SetElementProperty': {
+                const name = await this.getValue(command.name, context);
+                const value = await this.getValue(command.value, context);
+                let host = context.element.getRootNode().host;
+                if (command.targetSelectorTarget == 'currentElement')
+                    host = context.element;
+                else if (command.targetSelectorTarget == 'parentElement')
+                    host = context.element.parentElement;
+                else if (command.targetSelectorTarget == 'parentScreen')
+                    host = host.getRootNode().host;
+                let elements = [host];
+                if (command.targetSelector)
+                    elements = host.shadowRoot.querySelectorAll(command.targetSelector);
+                for (let e of elements) {
+                    if (command.target == 'attribute') {
+                        e.setAttribute(name, value);
+                    }
+                    else if (command.target == 'property') {
+                        e[name] = value;
+                    }
+                    else if (command.target == 'css') {
+                        e.style[name] = value;
+                    }
+                }
+                break;
+            }
+        }
+    }
+    async getValue(value, outerContext) {
+        if (typeof value === 'object') {
+            switch (value.source) {
+                case 'property': {
+                    return outerContext.root[value.name];
+                }
+                case 'signal': {
+                    let sng = await this._visualizationHandler.getState(value.name);
+                    return sng.value;
+                }
+                case 'event': {
+                    let obj = outerContext.event;
+                    if (value.name)
+                        obj = ScriptSystem.extractPart(obj, value.name);
+                    return obj;
+                }
+            }
+        }
+        return value;
+    }
+    static extractPart(obj, propertyPath) {
+        let retVal = obj;
+        for (let p of propertyPath.split('.')) {
+            retVal = retVal?.[p];
+        }
+        return retVal;
+    }
+    async assignAllScripts(source, javascriptCode, shadowRoot, instance) {
+        const allElements = shadowRoot.querySelectorAll('*');
+        let jsObject = null;
+        if (javascriptCode) {
+            try {
+                const scriptUrl = URL.createObjectURL(new Blob([javascriptCode], { type: 'application/javascript' }));
+                jsObject = await import(scriptUrl);
+                if (jsObject.init) {
+                    jsObject.init(instance);
+                }
+            }
+            catch (err) {
+                console.error('error parsing javascript - ' + source, err);
+            }
+        }
+        for (let e of allElements) {
+            for (let a of e.attributes) {
+                if (a.name[0] == '@') {
+                    try {
+                        let evtName = a.name.substring(1);
+                        let script = a.value.trim();
+                        if (script[0] == '{') {
+                            let scriptObj = JSON.parse(script);
+                            if ('commands' in scriptObj) {
+                                e.addEventListener(evtName, (evt) => this.execute(scriptObj.commands, { event: evt, element: e, root: instance }));
+                            }
+                            else if ('blocks' in scriptObj) {
+                                let compiledFunc = null;
+                                e.addEventListener(evtName, async (evt) => {
+                                    if (!compiledFunc)
+                                        compiledFunc = await generateEventCodeFromBlockly(scriptObj);
+                                    compiledFunc(evt, shadowRoot);
+                                });
+                            }
+                        }
+                        else {
+                            e.addEventListener(evtName, (evt) => {
+                                if (!jsObject[script])
+                                    console.warn('javascript function named: ' + script + ' not found, maybe missing a "export" ?');
+                                else
+                                    jsObject[script](evt, e, shadowRoot, instance);
+                            });
+                        }
+                    }
+                    catch (err) {
+                        console.warn('error assigning script', e, a);
+                    }
+                }
+            }
+        }
+        return jsObject;
+    }
+}

package/dist/services/BindableObjectDragDropService.d.ts

@@ -0,0 +1,16 @@
+import { IBindableObject, IBindableObjectDragDropService, IDesignerCanvas, IProperty, IDesignItem } from "@node-projects/web-component-designer";
+import { BindingsHelper } from "../helpers/BindingsHelper.js";
+import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
+export declare class BindableObjectDragDropService implements IBindableObjectDragDropService {
+    constructor(bindingsHelper: BindingsHelper, visualizationHandler: VisualizationHandler);
+    private _bindingsHelper;
+    private _visualizationHandler;
+    rectMap: Map<Element, SVGRectElement>;
+    rect: SVGRectElement;
+    dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): void;
+    dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): void;
+    dragOver(designerView: IDesignerCanvas, event: DragEvent, element: Element): "none" | "copy" | "link" | "move";
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindableObject: IBindableObject<any>, element: Element): Promise<void>;
+    dragOverOnProperty?(event: DragEvent, property: IProperty, designItems: IDesignItem[]): 'none' | 'copy' | 'link' | 'move';
+    dropOnProperty?(event: DragEvent, property: IProperty, bindableObject: IBindableObject<any>, designItems: IDesignItem[]): void;
+}