@node-projects/web-component-designer 0.0.202 → 0.0.204

package/dist/elements/item/DesignItem.js

@@ -373,10 +373,13 @@ export class DesignItem {
             return [];
         const localStyles = [...this._styles.entries()].map(x => ({ name: x[0], value: x[1], important: false, parent: null }));
         if (this.instanceServiceContainer.stylesheetService) {
-            const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);
-            if (rules) {
-                return [{ selector: null, declarations: localStyles, specificity: -1 }, ...rules];
+            try {
+                const rules = this.instanceServiceContainer.stylesheetService?.getAppliedRules(this);
+                if (rules) {
+                    return [{ selector: null, declarations: localStyles, specificity: -1 }, ...rules];
+                }
             }
+            catch (err) { }
         }
         return [{ selector: null, declarations: localStyles, specificity: -1 }];
     }

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -102,7 +102,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
     serviceContainer.register("demoProviderService", new DemoProviderService());
     serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
-    serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas));
+    serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));
     serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));
     //serviceContainer.register("stylesheetService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [

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/services/selectionService/SelectionService.d.ts

@@ -7,7 +7,8 @@ export declare class SelectionService implements ISelectionService {
     primarySelection: IDesignItem;
     selectedElements: IDesignItem[];
     _designerCanvas: IDesignerCanvas;
-    constructor(designerCanvas: IDesignerCanvas);
+    _undoSelectionChanges: boolean;
+    constructor(designerCanvas: IDesignerCanvas, undoSelectionChanges: boolean);
     setSelectedElements(designItems: IDesignItem[]): void;
     _withoutUndoSetSelectedElements(designItems: IDesignItem[]): void;
     clearSelectedElements(): void;

package/dist/elements/services/selectionService/SelectionService.js

@@ -4,13 +4,20 @@ export class SelectionService {
     primarySelection;
     selectedElements = [];
     _designerCanvas;
-    constructor(designerCanvas) {
+    _undoSelectionChanges;
+    constructor(designerCanvas, undoSelectionChanges) {
         this._designerCanvas = designerCanvas;
+        this._undoSelectionChanges = undoSelectionChanges;
     }
     setSelectedElements(designItems) {
         if (this.selectedElements != designItems) {
-            const action = new SelectionChangedAction(this.selectedElements, designItems, this);
-            this._designerCanvas.instanceServiceContainer.undoService.execute(action);
+            if (this._undoSelectionChanges) {
+                const action = new SelectionChangedAction(this.selectedElements, designItems, this);
+                this._designerCanvas.instanceServiceContainer.undoService.execute(action);
+            }
+            else {
+                this._withoutUndoSetSelectedElements(designItems);
+            }
         }
     }
     _withoutUndoSetSelectedElements(designItems) {

package/dist/elements/services/stylesheetService/CssToolsStylesheetService.d.ts

@@ -1,9 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem.js";
 import { IStyleDeclaration, IStyleRule, IStylesheet } from "./IStylesheetService.js";
 import { AbstractStylesheetService } from "./AbstractStylesheetService.js";
-type CssRuleAST = any;
-type CssDeclarationAST = any;
-type CssStylesheetAST = any;
+import type { CssDeclarationAST, CssRuleAST, CssStylesheetAST } from "@adobe/css-tools";
 interface IRuleWithAST extends IStyleRule {
     ast: CssRuleAST;
     declarations: IDeclarationWithAST[];

package/dist/elements/services/stylesheetService/CssToolsStylesheetService.js

@@ -39,7 +39,7 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
             let rs = Array.from(this.getRulesFromAst(item[1].ast?.stylesheet?.rules, item[1].stylesheet, designItem))
                 .map(x => ({
                 selector: x.selectors.join(', '),
-                declarations: x.declarations.map(y => ({
+                declarations: x.declarations.filter(y => y.type == 'declaration').map(y => ({
                     name: y.property,
                     value: y.value.endsWith('!important') ? y.value.substring(0, y.value.length - 10).trimEnd() : y.value,
                     important: y.value.endsWith('!important'),

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/designerCanvas.js

@@ -689,8 +689,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 di.setStyle('position', 'absolute');
                 const containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
                 containerService.enterContainer(newContainer, [di]);
-                containerService.place(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, this.getNormalizedEventCoordinates(event), [di]);
-                containerService.finishPlace(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, this.getNormalizedEventCoordinates(event), [di]);
+                const containerPos = this.getNormalizedElementCoordinates(newContainer.element);
+                const evCoord = this.getNormalizedEventCoordinates(event);
+                const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };
+                containerService.place(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
+                containerService.finishPlace(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
                 this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
                 requestAnimationFrame(() => {
                     this.instanceServiceContainer.selectionService.setSelectedElements([di]);

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/package.json

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