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

package/dist/blockly/components/Console.js

@@ -0,0 +1,26 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['console'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField('console')
+            //@ts-ignore
+            .appendField(new Blockly.FieldDropdown([["debug", "DEBUG"], ["error", "ERROR"], ["info", "INFO"], ["log", "LOG"], ["warn", "WARN"]]), "LEVEL");
+        this.appendValueInput('VALUE')
+            .setCheck(null)
+            .appendField('value');
+        this.setInputsInline(true);
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['console'] = function (block) {
+    var level = block.getFieldValue('LEVEL');
+    //@ts-ignore
+    const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC);
+    let code = `console['${level.toLowerCase()}'](${value});
+`;
+    return code;
+};

package/dist/blockly/components/Debugger.js

@@ -0,0 +1,15 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['debugger'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField("debugger");
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['debugger'] = function (block) {
+    return 'debugger;\n';
+};

package/dist/blockly/components/GetState.js

@@ -0,0 +1,21 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['get_state'] = {
+    init: function () {
+        this.appendValueInput('OID')
+            .setCheck("String")
+            //@ts-ignore
+            .appendField('get_state');
+        this.setInputsInline(true);
+        this.setOutput(true, null);
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['get_state'] = function (block, generator) {
+    //@ts-ignore
+    const id = Blockly.JavaScript.valueToCode(block, 'OID', Blockly.JavaScript.ORDER_ATOMIC);
+    const code = `(await IOB.getState(${id})).val`;
+    //@ts-ignore
+    return [code, Blockly.JavaScript.ORDER_NONE];
+};

package/dist/blockly/components/GetSubProperty.js

@@ -0,0 +1,27 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['get_sub_property'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField("getSubProperty");
+        this.appendValueInput('OBJECT')
+            .setCheck('Object')
+            .appendField('object');
+        this.appendValueInput('PROPERTYPATH')
+            .setCheck("String")
+            .appendField('propertypath');
+        this.setInputsInline(true);
+        this.setOutput(true, null);
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['get_sub_property'] = function (block, generator) {
+    //@ts-ignore
+    const obj = Blockly.JavaScript.valueToCode(block, 'OBJECT', Blockly.JavaScript.ORDER_ATOMIC);
+    //@ts-ignore
+    const propertypath = Blockly.JavaScript.valueToCode(block, 'PROPERTYPATH', Blockly.JavaScript.ORDER_ATOMIC);
+    const code = `extractPart(${obj}, ${propertypath})`;
+    //@ts-ignore
+    return [code, Blockly.JavaScript.ORDER_NONE];
+};

package/dist/blockly/components/OpenScreen.js

@@ -0,0 +1,31 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['open_screen'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField('open screen');
+        this.appendValueInput('SCREEN')
+            .setCheck('String')
+            .appendField('screen');
+        this.appendValueInput('RELATIVESIGNALSPATH')
+            .setCheck("String")
+            .appendField('relativeSignalsPath');
+        this.appendValueInput('NOHISTORY')
+            .setCheck("Boolean")
+            .appendField('noHistory');
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['open_screen'] = function (block) {
+    //@ts-ignore
+    const screen = Blockly.JavaScript.valueToCode(block, 'SCREEN', Blockly.JavaScript.ORDER_ATOMIC);
+    //@ts-ignore
+    const relativeSignalsPath = Blockly.JavaScript.valueToCode(block, 'RELATIVESIGNALSPATH', Blockly.JavaScript.ORDER_ATOMIC);
+    //@ts-ignore
+    const noHistory = Blockly.JavaScript.valueToCode(block, 'NOHISTORY', Blockly.JavaScript.ORDER_ATOMIC);
+    let code = `RUNTIME.openScreen({screen: ${screen}, relativeSignalsPath: ${relativeSignalsPath}, noHistory: ${noHistory}})`;
+    return code;
+};

package/dist/blockly/components/QuerySelector.js

@@ -0,0 +1,30 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['query_selector'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField('querySelector')
+            //@ts-ignore
+            .appendField(new Blockly.FieldDropdown([["currentScreen", "CURRENTSCREEN"], ["parentScreen", "PARENTSCREEN"]]), "SOURCE");
+        this.appendValueInput('SELECTOR')
+            .setCheck("String")
+            //@ts-ignore
+            .appendField('selector');
+        this.setInputsInline(true);
+        this.setOutput(true, 'Element');
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['query_selector'] = function (block, generator) {
+    var dropdown_source = block.getFieldValue('SOURCE');
+    //@ts-ignore
+    const selector = Blockly.JavaScript.valueToCode(block, 'SELECTOR', Blockly.JavaScript.ORDER_ATOMIC);
+    let code;
+    if (dropdown_source === 'CURRENTSCREEN')
+        code = `shadowRoot.querySelector(${selector})`;
+    else if (dropdown_source === 'PARENTSCREEN')
+        code = `shadowRoot.host.getRootNode().querySelector(${selector})`;
+    //@ts-ignore
+    return [code, Blockly.JavaScript.ORDER_NONE];
+};

package/dist/blockly/components/QuerySelectorAll.js

@@ -0,0 +1,30 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['query_selector_all'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField('querySelectorAll')
+            //@ts-ignore
+            .appendField(new Blockly.FieldDropdown([["currentScreen", "CURRENTSCREEN"], ["parentScreen", "PARENTSCREEN"]]), "SOURCE");
+        this.appendValueInput('SELECTOR')
+            .setCheck("String")
+            //@ts-ignore
+            .appendField('selector');
+        this.setInputsInline(true);
+        this.setOutput(true, 'Array');
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['query_selector_all'] = function (block, generator) {
+    var dropdown_source = block.getFieldValue('SOURCE');
+    //@ts-ignore
+    const selector = Blockly.JavaScript.valueToCode(block, 'SELECTOR', Blockly.JavaScript.ORDER_ATOMIC);
+    let code;
+    if (dropdown_source === 'CURRENTSCREEN')
+        code = `shadowRoot.querySelectorall(${selector})`;
+    else if (dropdown_source === 'PARENTSCREEN')
+        code = `shadowRoot.querySelectorall(${selector})`;
+    //@ts-ignore
+    return [code, Blockly.JavaScript.ORDER_NONE];
+};

package/dist/blockly/components/Return.js

@@ -0,0 +1,21 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['return'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField("return");
+        this.appendValueInput("VALUE")
+            .setCheck(null)
+            .appendField("value");
+        this.setInputsInline(true);
+        this.setPreviousStatement(true, null);
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['return'] = function (block) {
+    //@ts-ignore
+    const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC);
+    let code = 'return ' + value + ';';
+    return code;
+};

package/dist/blockly/components/SetElement.js

@@ -0,0 +1,44 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['set_element'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField('setElement')
+            //@ts-ignore
+            .appendField(new Blockly.FieldDropdown([["property", "PROPERTY"], ["attribute", "ATTRIBUTE"], ["style", "STYLE"]]), "TARGET");
+        this.appendValueInput('ELEMENT')
+            .setCheck('Element')
+            .appendField('element');
+        this.appendValueInput('NAME')
+            .setCheck("String")
+            .appendField('name');
+        this.appendValueInput('VALUE')
+            .setCheck(null)
+            .appendField('value');
+        this.setInputsInline(true);
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['set_element'] = function (block) {
+    var dropdown_target = block.getFieldValue('TARGET');
+    //@ts-ignore
+    const element = Blockly.JavaScript.valueToCode(block, 'ELEMENT', Blockly.JavaScript.ORDER_ATOMIC);
+    //@ts-ignore
+    const name = Blockly.JavaScript.valueToCode(block, 'NAME', Blockly.JavaScript.ORDER_ATOMIC);
+    //@ts-ignore
+    const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC);
+    let code = '';
+    if (dropdown_target === 'PROPERTY') {
+        code += element + '[' + name + '] = ' + value + ';\n';
+    }
+    else if (dropdown_target === 'ATTRIBUTE') {
+        code += element + '.setAttribute(' + name + ', ' + value + ');\n';
+    }
+    else if (dropdown_target === 'STYLE') {
+        code += element + '.style[' + name + '] = ' + value + ';\n';
+    }
+    return code;
+};

package/dist/blockly/components/SetState.js

@@ -0,0 +1,26 @@
+"use strict";
+//@ts-ignore
+Blockly.Blocks['set_state'] = {
+    init: function () {
+        this.appendValueInput('OID')
+            .setCheck("String")
+            //@ts-ignore
+            .appendField('set_state');
+        this.appendValueInput('VALUE')
+            .setCheck(null)
+            .appendField('with');
+        this.setInputsInline(true);
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(230);
+    }
+};
+//@ts-ignore
+Blockly.JavaScript['set_state'] = function (block) {
+    //@ts-ignore
+    const id = Blockly.JavaScript.valueToCode(block, 'OID', Blockly.JavaScript.ORDER_ATOMIC);
+    //@ts-ignore
+    const value = Blockly.JavaScript.valueToCode(block, 'VALUE', Blockly.JavaScript.ORDER_ATOMIC);
+    const code = `await IOB.setState(${id}, ${value});\n`;
+    return code;
+};

package/dist/blockly/components/StartEvent.js

@@ -0,0 +1,23 @@
+"use strict";
+//@ts-ignore
+Blockly.defineBlocksWithJsonArray([
+    {
+        'type': 'start_event',
+        'message0': 'Event %1',
+        'nextStatement': null,
+        'style': 'hat_blocks',
+        'args0': [
+            {
+                'type': 'field_variable',
+                'name': 'EVENTVAR',
+                'variable': 'event'
+            }
+        ],
+    },
+]);
+//@ts-ignore
+Blockly.JavaScript['start_event'] = function (block) {
+    //@ts-ignore
+    let name = Blockly.JavaScript.getVariableName(block.getField('EVENTVAR').variable.name);
+    return name + ' = ' + 'eventData;\n';
+};

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

@@ -0,0 +1,11 @@
+import './fields/FieldObjectId.js';
+import './Console.js';
+import './Debugger.js';
+import './GetState.js';
+import './GetSubProperty.js';
+import './OpenScreen.js';
+import './QuerySelector.js';
+import './QuerySelectorAll.js';
+import './SetElement.js';
+import './SetState.js';
+import './StartEvent.js';

package/dist/blockly/components/components.js

@@ -0,0 +1,11 @@
+import './fields/FieldObjectId.js';
+import './Console.js';
+import './Debugger.js';
+import './GetState.js';
+import './GetSubProperty.js';
+import './OpenScreen.js';
+import './QuerySelector.js';
+import './QuerySelectorAll.js';
+import './SetElement.js';
+import './SetState.js';
+import './StartEvent.js';

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

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

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

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

package/dist/components/BindingsEditor.d.ts

@@ -0,0 +1,49 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+import { BindingTarget, IBinding, IProperty, ServiceContainer } from '@node-projects/web-component-designer';
+import { VisualizationShell } from '../interfaces/VisualizationShell.js';
+export declare class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly template: HTMLTemplateElement;
+    static readonly style: CSSStyleSheet;
+    static readonly is = "iobroker-webui-dynamics-editor";
+    static readonly properties: {
+        twoWayPossible: BooleanConstructor;
+        twoWay: BooleanConstructor;
+        expression: StringConstructor;
+        objectNames: StringConstructor;
+        events: StringConstructor;
+        invert: BooleanConstructor;
+        converters: ArrayConstructor;
+        historic: ObjectConstructor;
+    };
+    twoWayPossible: boolean;
+    twoWay: boolean;
+    expression: string;
+    expressionTwoWay: string;
+    historic: any;
+    objectNames: string;
+    events: string;
+    invert: boolean;
+    converters: {
+        key: string;
+        value: any;
+    }[];
+    objectValueType: string;
+    private _property;
+    private _binding;
+    private _bindingTarget;
+    private _serviceContainer;
+    private _shell;
+    private _activeRow;
+    constructor(property: IProperty, binding: IBinding & {
+        converter: Record<string, any>;
+    }, bindingTarget: BindingTarget, servieContainer: ServiceContainer, shell: VisualizationShell);
+    ready(): void;
+    _focusRow(index: number): void;
+    _updatefocusedRow(): void;
+    _clear(): void;
+    _refresh(): void;
+    _select(): Promise<void>;
+    showHistoric(): Promise<void>;
+    addConverter(): void;
+    removeConverter(): void;
+}