@node-projects/web-component-designer 0.0.201 → 0.0.203

package/dist/elements/services/propertiesService/DefaultEditorTypesService copy.d.ts

@@ -0,0 +1,6 @@
+import { IEditorTypesService } from './IEditorTypesService.js';
+import { IProperty } from './IProperty.js';
+import { IPropertyEditor } from './IPropertyEditor.js';
+export declare class DefaultEditorTypesService implements IEditorTypesService {
+    getEditorForProperty(property: IProperty): IPropertyEditor;
+}

package/dist/elements/services/propertiesService/DefaultEditorTypesService copy.js

@@ -0,0 +1,64 @@
+import { ColorPropertyEditor } from './propertyEditors/ColorPropertyEditor.js';
+import { DatePropertyEditor } from './propertyEditors/DatePropertyEditor.js';
+import { JsonPropertyEditor } from './propertyEditors/JsonPropertyEditor.js';
+import { NumberPropertyEditor } from './propertyEditors/NumberPropertyEditor.js';
+import { SelectPropertyEditor } from './propertyEditors/SelectPropertyEditor.js';
+import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor.js';
+import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor.js';
+import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor.js';
+import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
+import { MetricsPropertyEditor } from './propertyEditors/MetricsPropertyEditor.js';
+export class DefaultEditorTypesService {
+    getEditorForProperty(property) {
+        if (property.createEditor)
+            return property.createEditor(property);
+        switch (property.type) {
+            case "json":
+                {
+                    return new JsonPropertyEditor(property);
+                }
+            case "color":
+                {
+                    return new ColorPropertyEditor(property);
+                }
+            case "date":
+                {
+                    return new DatePropertyEditor(property);
+                }
+            case "number":
+                {
+                    return new NumberPropertyEditor(property);
+                }
+            case "list":
+                {
+                    return new SelectPropertyEditor(property);
+                }
+            case "enum":
+                {
+                    return new SelectPropertyEditor(property);
+                }
+            case "boolean":
+                {
+                    return new BooleanPropertyEditor(property);
+                }
+            case "img-list":
+                {
+                    return new ImageButtonListPropertyEditor(property);
+                }
+            case "thickness":
+                {
+                    return new ThicknessPropertyEditor(property);
+                }
+            case "metrics":
+                {
+                    return new MetricsPropertyEditor(property);
+                }
+            case "css-length":
+            case "string":
+            default:
+                {
+                    return new TextPropertyEditor(property);
+                }
+        }
+    }
+}

package/dist/elements/services/propertiesService/GridEditorTypesService.d.ts

@@ -0,0 +1,6 @@
+import { IEditorTypesService } from './IEditorTypesService.js';
+import { IProperty } from './IProperty.js';
+import { IPropertyEditor } from './IPropertyEditor.js';
+export declare class DefaultEditorTypesService implements IEditorTypesService {
+    getEditorForProperty(property: IProperty): IPropertyEditor;
+}

package/dist/elements/services/propertiesService/GridEditorTypesService.js

@@ -0,0 +1,64 @@
+import { ColorPropertyEditor } from './propertyEditors/ColorPropertyEditor.js';
+import { DatePropertyEditor } from './propertyEditors/DatePropertyEditor.js';
+import { JsonPropertyEditor } from './propertyEditors/JsonPropertyEditor.js';
+import { NumberPropertyEditor } from './propertyEditors/NumberPropertyEditor.js';
+import { SelectPropertyEditor } from './propertyEditors/SelectPropertyEditor.js';
+import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor.js';
+import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor.js';
+import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor.js';
+import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
+import { MetricsPropertyEditor } from './propertyEditors/MetricsPropertyEditor.js';
+export class DefaultEditorTypesService {
+    getEditorForProperty(property) {
+        if (property.createEditor)
+            return property.createEditor(property);
+        switch (property.type) {
+            case "json":
+                {
+                    return new JsonPropertyEditor(property);
+                }
+            case "color":
+                {
+                    return new ColorPropertyEditor(property);
+                }
+            case "date":
+                {
+                    return new DatePropertyEditor(property);
+                }
+            case "number":
+                {
+                    return new NumberPropertyEditor(property);
+                }
+            case "list":
+                {
+                    return new SelectPropertyEditor(property);
+                }
+            case "enum":
+                {
+                    return new SelectPropertyEditor(property);
+                }
+            case "boolean":
+                {
+                    return new BooleanPropertyEditor(property);
+                }
+            case "img-list":
+                {
+                    return new ImageButtonListPropertyEditor(property);
+                }
+            case "thickness":
+                {
+                    return new ThicknessPropertyEditor(property);
+                }
+            case "metrics":
+                {
+                    return new MetricsPropertyEditor(property);
+                }
+            case "css-length":
+            case "string":
+            default:
+                {
+                    return new TextPropertyEditor(property);
+                }
+        }
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/GridCellPropertyEditor.d.ts

@@ -0,0 +1,9 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class GridCellPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    static template: HTMLTemplateElement;
+    _input: HTMLInputElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/GridCellPropertyEditor.js

@@ -0,0 +1,16 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { html } from '@node-projects/base-custom-webcomponent';
+export class GridCellPropertyEditor extends BasePropertyEditor {
+    static template = html `
+    <div style="display: flex;">
+      
+    </div>
+  `;
+    _input;
+    constructor(property) {
+        super(property);
+    }
+    refreshValue(valueType, value) {
+        debugger;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor copy.d.ts

@@ -0,0 +1,9 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class JsonPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    static template: HTMLTemplateElement;
+    _input: HTMLInputElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor copy.js

@@ -0,0 +1,21 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { html } from '@node-projects/base-custom-webcomponent';
+export class JsonPropertyEditor extends BasePropertyEditor {
+    static template = html `
+    <div style="display: flex;">
+      <input id="input" type="text">
+      <button style="width: 30px;">...</button>
+    </div>
+  `;
+    _input;
+    constructor(property) {
+        super(property);
+        let el = JsonPropertyEditor.template.content.cloneNode(true);
+        this._input = el.getElementById('input');
+        this._input.onchange = (e) => this._valueChanged(this._input.value);
+        this.element = el;
+    }
+    refreshValue(valueType, value) {
+        this._input.value = value;
+    }
+}

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

@@ -0,0 +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;
+}

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

@@ -0,0 +1,133 @@
+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;
+    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);

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

@@ -0,0 +1,23 @@
+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 CodeViewJar 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;
+    ready(): void;
+    update(code: any): void;
+    getText(): string;
+    setSelection(position: IStringPosition): void;
+}

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

@@ -0,0 +1,121 @@
+import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { CommandType } from '../../../commandHandling/CommandType.js';
+export class CodeViewJar 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%';
+        //@ts-ignore
+        if (window.importShim)
+            //@ts-ignore
+            importShim("codejar").then(x => { debugger; CodeJar(this._editor, hljs.highlightElement); });
+        else
+            //@ts-ignore
+            import("codejar").then(x => { debugger; CodeJar(this._editor, hljs.highlightElement); });
+        let jar = 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();
+        });
+    }
+    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);

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.d.ts

@@ -4,6 +4,7 @@ import { AbstractExtension } from '../AbstractExtension.js';
 import { IExtensionManager } from '../IExtensionManger.js';
 export declare class DisplayGridExtension extends AbstractExtension {
     private _cells;
+    private _texts;
     private _gaps;
     private gridInformation;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtension.js

@@ -3,6 +3,7 @@ import { AbstractExtension } from '../AbstractExtension.js';
 import { OverlayLayer } from "../OverlayLayer.js";
 export class DisplayGridExtension extends AbstractExtension {
     _cells;
+    _texts;
     _gaps;
     gridInformation;
     constructor(extensionManager, designerView, extendedItem) {
@@ -27,8 +28,8 @@ export class DisplayGridExtension extends AbstractExtension {
                 row.forEach((cell, j) => {
                     this._cells[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._cells[i][j], OverlayLayer.Background);
                     if (cell.name) {
-                        const text = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', null, OverlayLayer.Background);
-                        text.setAttribute("dominant-baseline", "hanging");
+                        this._texts[i][j] = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', this._texts[i][j], OverlayLayer.Background);
+                        this._texts[i][j].setAttribute("dominant-baseline", "hanging");
                     }
                     if (event && event instanceof MouseEvent) {
                         let crd = this.designerCanvas.getNormalizedEventCoordinates(event);
@@ -48,6 +49,8 @@ export class DisplayGridExtension extends AbstractExtension {
         this.gridInformation = CalculateGridInformation(this.extendedItem);
         this._cells = new Array(this.gridInformation.cells.length);
         this.gridInformation.cells.forEach((row, i) => this._cells[i] = new Array(row.length));
+        this._texts = new Array(this.gridInformation.cells.length);
+        this.gridInformation.cells.forEach((row, i) => this._texts[i] = new Array(row.length));
         this._gaps = new Array(this.gridInformation.gaps.length);
     }
 }

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.js

@@ -80,7 +80,8 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
         }
     }
     _convertCssUnits(pixelSizes, targetUnits, target, percentTarget) {
-        let containerSize = convertCssUnitToPixel(target.style.width, target, percentTarget);
+        let bounding = target.getBoundingClientRect();
+        let containerSize = bounding[percentTarget];
         let amountGaps = percentTarget == "height" ? this.gridInformation.cells.length - 1 : this.gridInformation.cells[0].length - 1;
         let gapSize = convertCssUnitToPixel(percentTarget == "width" ? target.style.columnGap : target.style.rowGap, target, percentTarget) ?? 0;
         let containerSizeWithoutGaps = containerSize - gapSize * amountGaps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.201",
+  "version": "0.0.203",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",