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

package/README.md

@@ -0,0 +1,19 @@
+# web-component-designer-visualization-addons
+
+## NPM Package
+
+https://www.npmjs.com/package/@node-projects/web-component-designer-visualization-addons
+
+     npm i @node-projects/web-component-designer-visualization-addons
+
+## Description
+
+This package contains basic elements for a custom visualization, like a script system, a bindings system, ...
+It is used for example by the iobroker.webui.
+
+## Dependencies
+
+- long
+- blockly
+
+## Usage

package/dist/blockly/BlocklyJavascriptHelper.d.ts

@@ -0,0 +1,2 @@
+import './components/components.js';
+export declare function generateEventCodeFromBlockly(data: any): Promise<(event: Event, shadowRoot: ShadowRoot) => void>;

package/dist/blockly/BlocklyJavascriptHelper.js

@@ -0,0 +1,35 @@
+//import Blockly from 'blockly';
+import './components/components.js';
+//TODO: remove imports, only leave Runtime
+const prefix = `function extractPart(obj: any, propertyPath: string) {
+    let retVal = obj;
+    for (let p of propertyPath.split('.')) {
+        retVal = retVal?.[p];
+    }
+    return retVal;
+}
+
+export async function run(eventData, shadowRoot) {
+`;
+const postfix = `}`;
+export async function generateEventCodeFromBlockly(data) {
+    //@ts-ignore
+    const workspace = new Blockly.Workspace();
+    //@ts-ignore
+    Blockly.serialization.workspaces.load(data, workspace);
+    //@ts-ignore
+    Blockly.JavaScript.addReservedWords('eventData');
+    //@ts-ignore
+    Blockly.JavaScript.addReservedWords('shadowRoot');
+    //@ts-ignore
+    Blockly.JavaScript.addReservedWords('extractPart');
+    //@ts-ignore
+    Blockly.JavaScript.addReservedWords('IOB');
+    //@ts-ignore
+    Blockly.JavaScript.addReservedWords('RUNTIME');
+    //@ts-ignore
+    let code = Blockly.JavaScript.workspaceToCode(workspace);
+    const scriptUrl = URL.createObjectURL(new Blob([prefix + code + postfix], { type: 'application/javascript' }));
+    const scripObj = await import(scriptUrl);
+    return scripObj.run;
+}

package/dist/blockly/BlocklyScriptEditor.d.ts

@@ -0,0 +1,16 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class BlocklyScriptEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly template: HTMLTemplateElement;
+    static readonly style: CSSStyleSheet;
+    static readonly is = "node-projects-blockly-script-editor";
+    blocklyDiv: HTMLDivElement;
+    workspace: any;
+    static blocklyStyle1: CSSStyleSheet;
+    static blocklyStyle2: CSSStyleSheet;
+    resizeObserver: ResizeObserver;
+    constructor();
+    createBlockly(): void;
+    ready(): void;
+    save(): any;
+    load(data: any): void;
+}

package/dist/blockly/BlocklyScriptEditor.js

@@ -0,0 +1,106 @@
+import { BaseCustomWebComponentConstructorAppend, html, css } from '@node-projects/base-custom-webcomponent';
+import toolbox from './BlocklyToolbox.js';
+//import Blockly from 'blockly';
+export class BlocklyScriptEditor extends BaseCustomWebComponentConstructorAppend {
+    static template = html `
+        <div id="blocklyDiv" style="position: absolute; width: 100%; height: 100%;"></div>
+    `;
+    static style = css `
+        :host {
+            box-sizing: border-box;
+            position: absolute;
+            height: 100%;
+            width: 100%;
+        }`;
+    static is = 'node-projects-blockly-script-editor';
+    blocklyDiv;
+    workspace;
+    static blocklyStyle1;
+    static blocklyStyle2;
+    resizeObserver;
+    constructor() {
+        super();
+        super._restoreCachedInititalValues();
+        this.blocklyDiv = this._getDomElement('blocklyDiv');
+        this._assignEvents();
+        this.createBlockly();
+    }
+    createBlockly() {
+        const renderer = 'zelos';
+        const themename = 'webui';
+        //@ts-ignore
+        const theme = Blockly.Theme.defineTheme(themename, {
+            //@ts-ignore
+            'base': Blockly.Themes.Classic,
+            'blockStyles': {
+                "hat_blocks": {
+                    "colourPrimary": "#4a148c"
+                }
+            },
+            'categoryStyles': {
+                'start_category': {
+                    colour: '#4a148c'
+                },
+                'system_category': {
+                    colour: '#01579b',
+                }
+            },
+        });
+        //@ts-ignore
+        this.workspace = Blockly.inject(this.blocklyDiv, {
+            theme: theme,
+            toolbox: toolbox,
+            renderer: renderer,
+            trashcan: true,
+            zoom: {
+                controls: true,
+                wheel: false,
+                startScale: 0.7,
+                maxScale: 3,
+                minScale: 0.3,
+                scaleSpeed: 1.2,
+                pinch: false
+            },
+            move: {
+                scrollbars: {
+                    horizontal: true,
+                    vertical: true
+                },
+                drag: true,
+                wheel: true
+            },
+            maxInstances: { 'start_event': 1 },
+        });
+        if (!BlocklyScriptEditor.blocklyStyle1) {
+            BlocklyScriptEditor.blocklyStyle1 = new CSSStyleSheet();
+            //@ts-ignore
+            BlocklyScriptEditor.blocklyStyle1.replaceSync(document.getElementById('blockly-renderer-style-' + renderer + '-' + themename).innerText);
+            BlocklyScriptEditor.blocklyStyle2 = new CSSStyleSheet();
+            //@ts-ignore
+            BlocklyScriptEditor.blocklyStyle2.replaceSync(document.getElementById('blockly-common-style').innerText);
+        }
+        this.shadowRoot.adoptedStyleSheets = [BlocklyScriptEditor.blocklyStyle1, BlocklyScriptEditor.blocklyStyle2, BlocklyScriptEditor.style];
+        //@ts-ignore
+        const zoomToFit = new ZoomToFitControl(this.workspace);
+        zoomToFit.init();
+    }
+    ready() {
+        //@ts-ignore
+        Blockly.svgResize(this.workspace);
+        this.resizeObserver = new ResizeObserver((entries) => {
+            //@ts-ignore
+            Blockly.svgResize(this.workspace);
+        });
+        this.resizeObserver.observe(this);
+    }
+    save() {
+        //@ts-ignore
+        const state = Blockly.serialization.workspaces.save(this.workspace);
+        return state;
+    }
+    load(data) {
+        //@ts-ignore
+        Blockly.serialization.workspaces.load(data, this.workspace);
+    }
+}
+customElements.define(BlocklyScriptEditor.is, BlocklyScriptEditor);