@node-projects/web-component-designer 0.0.215 → 0.0.217

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -1,8 +1,8 @@
-import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
-import { dragDropFormatNameBindingObject } from '../../../Constants.js';
-export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
-    _treeDiv;
-    _tree;
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { dragDropFormatNameBindingObject } from '../../../Constants.js';
+class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
+    _treeDiv;
+    _tree;
     static style = css `
       span.drag-source {
         border: 1px solid grey;
@@ -26,82 +26,83 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
       #tree ul:focus {
         outline: none;
       }
-    `;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        //@ts-ignore
-        if (window.importShim)
-            //@ts-ignore
-            importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
-        else
-            //@ts-ignore
-            import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
-        this._treeDiv = document.createElement('div');
-        this._treeDiv.style.height = '100%';
-        this._treeDiv.style.overflow = 'auto';
-        this._treeDiv.setAttribute('id', 'tree');
-        this.shadowRoot.appendChild(this._treeDiv);
-        $(this._treeDiv).fancytree({
-            debugLevel: 0,
-            icon: false,
-            extensions: ['dnd5'],
-            quicksearch: true,
-            source: [],
-            lazyLoad: this.lazyLoad,
-            dnd5: {
-                dropMarkerParent: this.shadowRoot,
-                preventRecursion: true,
-                preventVoidMoves: false,
-                dropMarkerOffsetX: -24,
-                dropMarkerInsertOffsetX: -16,
-                dragStart: (node, data) => {
-                    data.effectAllowed = "all";
-                    data.dataTransfer.setData(dragDropFormatNameBindingObject, JSON.stringify(node.data.bindable));
-                    data.dropEffect = "copy";
-                    return true;
-                },
-                dragEnter: (node, data) => {
-                    return false;
-                }
-            }
-        });
-        this._tree = $.ui.fancytree.getTree(this._treeDiv);
-        this._treeDiv.children[0].classList.add('fancytree-connectors');
-    }
-    async initialize(serviceContainer) {
-        let rootNode = this._tree.getRootNode();
-        rootNode.removeChildren();
-        const services = serviceContainer.bindableObjectsServices;
-        for (const s of services) {
-            const newNode = rootNode.addChildren({
-                title: s.name,
-                folder: true,
-                lazy: true,
-                data: {
-                    service: s
-                }
-            });
-            rootNode.addNode(newNode);
-        }
-    }
-    lazyLoad(event, data) {
-        data.result = new Promise(async (resolve) => {
-            const service = data.node.data.service;
-            const bindable = data.node.data.bindable;
-            let children;
-            if (bindable?.children)
-                children = bindable.children;
-            else
-                children = await service.getBindableObjects(bindable);
-            resolve(children.map(x => ({
-                service,
-                title: x.name,
-                bindable: x,
-                folder: x.children !== false,
-                lazy: x.children !== false
-            })));
-        });
-    }
-}
-customElements.define('node-projects-bindable-objects-browser', BindableObjectsBrowser);
+    `;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        //@ts-ignore
+        if (window.importShim)
+            //@ts-ignore
+            importShim("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        else
+            //@ts-ignore
+            import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        this._treeDiv = document.createElement('div');
+        this._treeDiv.style.height = '100%';
+        this._treeDiv.style.overflow = 'auto';
+        this._treeDiv.setAttribute('id', 'tree');
+        this.shadowRoot.appendChild(this._treeDiv);
+        $(this._treeDiv).fancytree({
+            debugLevel: 0,
+            icon: false,
+            extensions: ['dnd5'],
+            quicksearch: true,
+            source: [],
+            lazyLoad: this.lazyLoad,
+            dnd5: {
+                dropMarkerParent: this.shadowRoot,
+                preventRecursion: true,
+                preventVoidMoves: false,
+                dropMarkerOffsetX: -24,
+                dropMarkerInsertOffsetX: -16,
+                dragStart: (node, data) => {
+                    data.effectAllowed = "all";
+                    data.dataTransfer.setData(dragDropFormatNameBindingObject, JSON.stringify(node.data.bindable));
+                    data.dropEffect = "copy";
+                    return true;
+                },
+                dragEnter: (node, data) => {
+                    return false;
+                }
+            }
+        });
+        this._tree = $.ui.fancytree.getTree(this._treeDiv);
+        this._treeDiv.children[0].classList.add('fancytree-connectors');
+    }
+    async initialize(serviceContainer) {
+        let rootNode = this._tree.getRootNode();
+        rootNode.removeChildren();
+        const services = serviceContainer.bindableObjectsServices;
+        for (const s of services) {
+            const newNode = rootNode.addChildren({
+                title: s.name,
+                folder: true,
+                lazy: true,
+                data: {
+                    service: s
+                }
+            });
+            rootNode.addNode(newNode);
+        }
+    }
+    lazyLoad(event, data) {
+        data.result = new Promise(async (resolve) => {
+            const service = data.node.data.service;
+            const bindable = data.node.data.bindable;
+            let children;
+            if (bindable?.children)
+                children = bindable.children;
+            else
+                children = await service.getBindableObjects(bindable);
+            resolve(children.map(x => ({
+                service,
+                title: x.name,
+                bindable: x,
+                folder: x.children !== false,
+                lazy: x.children !== false
+            })));
+        });
+    }
+}
+export { BindableObjectsBrowser };
+customElements.define('node-projects-bindable-objects-browser', BindableObjectsBrowser);

package/dist/elements/widgets/bindings/BindingsEditor.d.ts

@@ -1,17 +1,17 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare enum targetType {
-    'property' = "property",
-    'style' = "style",
-    'attribute' = "attribute",
-    'event' = "event"
-}
-export declare enum valueType {
-    'string' = "string",
-    'number' = "number",
-    'boolean' = "boolean"
-}
-export declare class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    constructor(targetType: targetType);
-}
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare enum targetType {
+    'property' = "property",
+    'style' = "style",
+    'attribute' = "attribute",
+    'event' = "event"
+}
+export declare enum valueType {
+    'string' = "string",
+    'number' = "number",
+    'boolean' = "boolean"
+}
+export declare class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor(targetType: targetType);
+}

package/dist/elements/widgets/bindings/BindingsEditor.js

@@ -1,18 +1,18 @@
-import { css, BaseCustomWebComponentConstructorAppend, html } from '@node-projects/base-custom-webcomponent';
-export var targetType;
-(function (targetType) {
-    targetType["property"] = "property";
-    targetType["style"] = "style";
-    targetType["attribute"] = "attribute";
-    targetType["event"] = "event";
-})(targetType || (targetType = {}));
-export var valueType;
-(function (valueType) {
-    valueType["string"] = "string";
-    valueType["number"] = "number";
-    valueType["boolean"] = "boolean";
-})(valueType || (valueType = {}));
-export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+import { css, BaseCustomWebComponentConstructorAppend, html } from '@node-projects/base-custom-webcomponent';
+export var targetType;
+(function (targetType) {
+    targetType["property"] = "property";
+    targetType["style"] = "style";
+    targetType["attribute"] = "attribute";
+    targetType["event"] = "event";
+})(targetType || (targetType = {}));
+export var valueType;
+(function (valueType) {
+    valueType["string"] = "string";
+    valueType["number"] = "number";
+    valueType["boolean"] = "boolean";
+})(valueType || (valueType = {}));
+class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     * { font-size: 16px; }
     .list { 
@@ -20,7 +20,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
       flex-direction: column;
       gap: 5px;
     }
-    `;
+    `;
     static template = html `
    <div class="list" style="">
     <span>Expression</span>
@@ -45,9 +45,10 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
       <input id="nullSafe" type="checkbox"><label for="nullSafe">Null Safe</label>   
     </div>
 </div>
-  `;
-    constructor(targetType) {
-        super();
-    }
-}
-customElements.define('node-projects-bindings-editor', BindingsEditor);
+  `;
+    constructor(targetType) {
+        super();
+    }
+}
+export { BindingsEditor };
+customElements.define('node-projects-bindings-editor', BindingsEditor);

package/dist/elements/widgets/codeView/ICodeView.d.ts

@@ -1,11 +1,11 @@
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
-import { IDisposable } from '../../../interfaces/IDisposable.js';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
-import { TypedEvent } from '@node-projects/base-custom-webcomponent';
-export interface ICodeView extends IUiCommandHandler, IDisposable {
-    update(code: string): any;
-    getText(): any;
-    setSelection(position: IStringPosition): any;
-    focusEditor(): any;
-    onTextChanged: TypedEvent<string>;
-}
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IDisposable } from '../../../interfaces/IDisposable.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export interface ICodeView extends IUiCommandHandler, IDisposable {
+    update(code: string): any;
+    getText(): any;
+    setSelection(position: IStringPosition): any;
+    focusEditor(): any;
+    onTextChanged: TypedEvent<string>;
+}

package/dist/elements/widgets/codeView/ICodeView.js

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

package/dist/elements/widgets/codeView/code-view-ace.d.ts

@@ -1,24 +1,24 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { ICodeView } from './ICodeView.js';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
-import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
-import { IDisposable } from '../../../interfaces/IDisposable.js';
-export declare class CodeViewAce extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
-    canvasElement: HTMLElement;
-    elementsToPackages: Map<string, string>;
-    code: string;
-    onTextChanged: TypedEvent<string>;
-    private _aceEditor;
-    private _editor;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    dispose(): void;
-    executeCommand(command: IUiCommand): void;
-    canExecuteCommand(command: IUiCommand): boolean;
-    focusEditor(): void;
-    oneTimeSetup(): void;
-    ready(): void;
-    update(code: any): void;
-    getText(): string;
-    setSelection(position: IStringPosition): void;
-}
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { ICodeView } from './ICodeView.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { IDisposable } from '../../../interfaces/IDisposable.js';
+export declare class CodeViewAce extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
+    canvasElement: HTMLElement;
+    elementsToPackages: Map<string, string>;
+    code: string;
+    onTextChanged: TypedEvent<string>;
+    private _aceEditor;
+    private _editor;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    dispose(): void;
+    executeCommand(command: IUiCommand): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    focusEditor(): void;
+    oneTimeSetup(): void;
+    ready(): void;
+    update(code: any): void;
+    getText(): string;
+    setSelection(position: IStringPosition): void;
+}

package/dist/elements/widgets/codeView/code-view-ace.js

@@ -1,133 +1,134 @@
-import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { CommandType } from '../../../commandHandling/CommandType.js';
-class CodeViewAceCompleter {
-    getCompletions(editor, session, pos, prefix, callback) {
-        if (prefix.length === 0) {
-            callback(null, []);
-            return;
-        }
-        let wordList = ['t-t', 'visu-conveyor']; //TODO: get word list from custom elements 
-        {
-            callback(null, wordList.map((w) => {
-                return { name: w, value: w, score: 1, meta: "tag" };
-            }));
-        }
-    }
-}
-export class CodeViewAce extends BaseCustomWebComponentLazyAppend {
-    canvasElement;
-    elementsToPackages;
-    code;
-    onTextChanged = new TypedEvent();
-    _aceEditor;
-    _editor;
+import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { CommandType } from '../../../commandHandling/CommandType.js';
+class CodeViewAceCompleter {
+    getCompletions(editor, session, pos, prefix, callback) {
+        if (prefix.length === 0) {
+            callback(null, []);
+            return;
+        }
+        let wordList = ['t-t', 'visu-conveyor']; //TODO: get word list from custom elements 
+        {
+            callback(null, wordList.map((w) => {
+                return { name: w, value: w, score: 1, meta: "tag" };
+            }));
+        }
+    }
+}
+class CodeViewAce extends BaseCustomWebComponentLazyAppend {
+    canvasElement;
+    elementsToPackages;
+    code;
+    onTextChanged = new TypedEvent();
+    _aceEditor;
+    _editor;
     static style = css `
     :host {
       display: block;
       height: 100%;
       width: 100%;
     }
-    `;
-    constructor() {
-        super();
-        this.style.display = 'block';
-        this._editor = document.createElement("div");
-        this._editor.style.height = '100%';
-        this._editor.style.width = '100%';
-        this.shadowRoot.appendChild(this._editor);
-    }
-    dispose() {
-        this._aceEditor?.destroy();
-    }
-    executeCommand(command) {
-        switch (command.type) {
-            case CommandType.undo:
-                this._aceEditor.execCommand('undo');
-                break;
-            case CommandType.redo:
-                this._aceEditor.execCommand('redo');
-                break;
-            case CommandType.copy:
-                let text = this._aceEditor.getCopyText();
-                this._aceEditor.execCommand("copy");
-                navigator.clipboard.writeText(text);
-                break;
-            case CommandType.paste:
-                navigator.clipboard.readText().then(text => {
-                    this._aceEditor.execCommand("paste", text);
-                });
-                break;
-            case CommandType.cut:
-                text = this._aceEditor.getCopyText();
-                this._aceEditor.execCommand("cut");
-                navigator.clipboard.writeText(text);
-                break;
-            case CommandType.delete:
-                this._aceEditor.execCommand("delete");
-                break;
-        }
-    }
-    canExecuteCommand(command) {
-        switch (command.type) {
-            case CommandType.undo:
-            case CommandType.redo:
-            case CommandType.copy:
-            case CommandType.paste:
-            case CommandType.cut:
-            case CommandType.delete:
-                return true;
-        }
-        return false;
-    }
-    focusEditor() {
-        requestAnimationFrame(() => {
-            this.focus();
-            this._aceEditor.focus();
-        });
-    }
-    oneTimeSetup() {
-        //@ts-ignore
-        let langTools = ace.require("ace/ext/language_tools");
-        langTools.addCompleter(new CodeViewAceCompleter());
-    }
-    ready() {
-        //@ts-ignore
-        this._aceEditor = ace.edit(this._editor, {
-            theme: "ace/theme/chrome",
-            mode: "ace/mode/html",
-            value: "",
-            autoScrollEditorIntoView: true,
-            fontSize: "14px",
-            showPrintMargin: false,
-            displayIndentGuides: true,
-            enableBasicAutocompletion: true,
-            enableSnippets: true,
-            enableLiveAutocompletion: true
-        });
-        //own snippet completer: http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview
-        this._aceEditor.renderer.attachToShadowRoot();
-        let observer = new MutationObserver((m) => {
-            this._aceEditor.setAutoScrollEditorIntoView(false);
-            this._aceEditor.setAutoScrollEditorIntoView(true);
-        });
-        let config = { attributes: true, childList: true, characterData: true };
-        observer.observe(this.shadowRoot.querySelector('.ace_content'), config);
-        this._aceEditor.on('change', () => this.onTextChanged.emit(this._aceEditor.getValue()));
-    }
-    update(code) {
-        this._aceEditor.setValue(code);
-        this._aceEditor.clearSelection();
-    }
-    getText() {
-        return this._aceEditor.getValue();
-    }
-    setSelection(position) {
-        let point1 = this._aceEditor.session.getDocument().indexToPosition(position.start, 0);
-        let point2 = this._aceEditor.session.getDocument().indexToPosition(position.start + position.length, 0);
-        //@ts-ignore
-        this._aceEditor.selection.setRange({ start: point1, end: point2 });
-        //@ts-ignore
-        this._aceEditor.scrollToLine(point1.row);
-    }
-}
-customElements.define('node-projects-code-view-ace', CodeViewAce);
+    `;
+    constructor() {
+        super();
+        this.style.display = 'block';
+        this._editor = document.createElement("div");
+        this._editor.style.height = '100%';
+        this._editor.style.width = '100%';
+        this.shadowRoot.appendChild(this._editor);
+    }
+    dispose() {
+        this._aceEditor?.destroy();
+    }
+    executeCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+                this._aceEditor.execCommand('undo');
+                break;
+            case CommandType.redo:
+                this._aceEditor.execCommand('redo');
+                break;
+            case CommandType.copy:
+                let text = this._aceEditor.getCopyText();
+                this._aceEditor.execCommand("copy");
+                navigator.clipboard.writeText(text);
+                break;
+            case CommandType.paste:
+                navigator.clipboard.readText().then(text => {
+                    this._aceEditor.execCommand("paste", text);
+                });
+                break;
+            case CommandType.cut:
+                text = this._aceEditor.getCopyText();
+                this._aceEditor.execCommand("cut");
+                navigator.clipboard.writeText(text);
+                break;
+            case CommandType.delete:
+                this._aceEditor.execCommand("delete");
+                break;
+        }
+    }
+    canExecuteCommand(command) {
+        switch (command.type) {
+            case CommandType.undo:
+            case CommandType.redo:
+            case CommandType.copy:
+            case CommandType.paste:
+            case CommandType.cut:
+            case CommandType.delete:
+                return true;
+        }
+        return false;
+    }
+    focusEditor() {
+        requestAnimationFrame(() => {
+            this.focus();
+            this._aceEditor.focus();
+        });
+    }
+    oneTimeSetup() {
+        //@ts-ignore
+        let langTools = ace.require("ace/ext/language_tools");
+        langTools.addCompleter(new CodeViewAceCompleter());
+    }
+    ready() {
+        //@ts-ignore
+        this._aceEditor = ace.edit(this._editor, {
+            theme: "ace/theme/chrome",
+            mode: "ace/mode/html",
+            value: "",
+            autoScrollEditorIntoView: true,
+            fontSize: "14px",
+            showPrintMargin: false,
+            displayIndentGuides: true,
+            enableBasicAutocompletion: true,
+            enableSnippets: true,
+            enableLiveAutocompletion: true
+        });
+        //own snippet completer: http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview
+        this._aceEditor.renderer.attachToShadowRoot();
+        let observer = new MutationObserver((m) => {
+            this._aceEditor.setAutoScrollEditorIntoView(false);
+            this._aceEditor.setAutoScrollEditorIntoView(true);
+        });
+        let config = { attributes: true, childList: true, characterData: true };
+        observer.observe(this.shadowRoot.querySelector('.ace_content'), config);
+        this._aceEditor.on('change', () => this.onTextChanged.emit(this._aceEditor.getValue()));
+    }
+    update(code) {
+        this._aceEditor.setValue(code);
+        this._aceEditor.clearSelection();
+    }
+    getText() {
+        return this._aceEditor.getValue();
+    }
+    setSelection(position) {
+        let point1 = this._aceEditor.session.getDocument().indexToPosition(position.start, 0);
+        let point2 = this._aceEditor.session.getDocument().indexToPosition(position.start + position.length, 0);
+        //@ts-ignore
+        this._aceEditor.selection.setRange({ start: point1, end: point2 });
+        //@ts-ignore
+        this._aceEditor.scrollToLine(point1.row);
+    }
+}
+export { CodeViewAce };
+customElements.define('node-projects-code-view-ace', CodeViewAce);