@node-projects/web-component-designer 0.0.155 → 0.0.157

package/dist/elements/services/undoService/transactionItems/InsertAction.d.ts

@@ -1,12 +1,12 @@
-import { ITransactionItem } from '../ITransactionItem';
-import { IDesignItem } from '../../../item/IDesignItem';
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
 export declare class InsertAction implements ITransactionItem {
-    constructor(designItem: IDesignItem, index: number, newItem: IDesignItem);
+    constructor(containerItem: IDesignItem, index: number, newItem: IDesignItem);
     title?: string;
     get affectedItems(): IDesignItem[];
     undo(): void;
     do(): void;
-    designItem: IDesignItem;
+    containerItem: IDesignItem;
     index: number;
     newItem: IDesignItem;
     mergeWith(other: ITransactionItem): boolean;

package/dist/elements/services/undoService/transactionItems/InsertAction.js

@@ -1,23 +1,23 @@
 export class InsertAction {
-    constructor(designItem, index, newItem) {
+    constructor(containerItem, index, newItem) {
         this.title = "Insert Item";
-        this.designItem = designItem;
+        this.containerItem = containerItem;
         this.index = index;
         this.newItem = newItem;
     }
     title;
     get affectedItems() {
-        return [this.designItem, this.newItem];
+        return [this.containerItem, this.newItem];
     }
     undo() {
         this.newItem.parent._removeChildInternal(this.newItem);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
     }
     do() {
-        this.designItem._insertChildInternal(this.newItem, this.index);
+        this.containerItem._insertChildInternal(this.newItem, this.index);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: [this.newItem] });
     }
-    designItem;
+    containerItem;
     index;
     newItem;
     mergeWith(other) {

package/dist/elements/services/undoService/transactionItems/InsertChildAction.d.ts

@@ -1,5 +1,5 @@
-import { ITransactionItem } from '../ITransactionItem';
-import { IDesignItem } from '../../../item/IDesignItem';
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
 export declare class InsertChildAction implements ITransactionItem {
     constructor(designItem: IDesignItem, newParent: IDesignItem, newIndex: number);
     title?: string;

package/dist/elements/services/undoService/transactionItems/SelectionChangedAction.d.ts

@@ -0,0 +1,14 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { ISelectionService } from '../../selectionService/ISelectionService.js';
+export declare class SelectionChangedAction implements ITransactionItem {
+    constructor(oldSelection: IDesignItem[], newSelection: IDesignItem[], selectionService: ISelectionService);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    oldSelection: IDesignItem[];
+    newSelection: IDesignItem[];
+    selectionService: ISelectionService;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/SelectionChangedAction.js

@@ -0,0 +1,28 @@
+export class SelectionChangedAction {
+    constructor(oldSelection, newSelection, selectionService) {
+        this.title = "Change Selection";
+        this.oldSelection = oldSelection;
+        this.newSelection = newSelection;
+        this.selectionService = selectionService;
+    }
+    title;
+    get affectedItems() {
+        if (this.oldSelection && this.newSelection)
+            return [...this.oldSelection, ...this.newSelection];
+        if (this.oldSelection)
+            return [...this.oldSelection];
+        return [...this.newSelection];
+    }
+    undo() {
+        this.selectionService._withoutUndoSetSelectedElements(this.oldSelection);
+    }
+    do() {
+        this.selectionService._withoutUndoSetSelectedElements(this.newSelection);
+    }
+    oldSelection;
+    newSelection;
+    selectionService;
+    mergeWith(other) {
+        return false;
+    }
+}

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

@@ -1,6 +1,6 @@
-import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
-import { IDisposable } from "../../../interfaces/IDisposable";
-import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
+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;

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

@@ -1,8 +1,8 @@
 import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { ICodeView } from "./ICodeView";
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
-import { IUiCommand } from '../../../commandHandling/IUiCommand';
-import { IDisposable } from '../../../interfaces/IDisposable';
+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>;

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

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { CommandType } from '../../../commandHandling/CommandType';
+import { CommandType } from '../../../commandHandling/CommandType.js';
 class CodeViewAceCompleter {
     getCompletions(editor, session, pos, prefix, callback) {
         if (prefix.length === 0) {

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

@@ -1,8 +1,8 @@
 import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { ICodeView } from "./ICodeView";
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
-import { IUiCommand } from '../../../commandHandling/IUiCommand';
-import { IDisposable } from '../../../interfaces/IDisposable';
+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 CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend implements ICodeView, IDisposable {
     canvasElement: HTMLElement;
     elementsToPackages: Map<string, string>;

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

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { CommandType } from '../../../commandHandling/CommandType';
+import { CommandType } from '../../../commandHandling/CommandType.js';
 export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     canvasElement;
     elementsToPackages;

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

@@ -1,9 +1,9 @@
 import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { ICodeView } from "./ICodeView";
-import { IActivateable } from '../../../interfaces/IActivateable';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
-import { IUiCommand } from '../../../commandHandling/IUiCommand';
+import { ICodeView } from './ICodeView.js';
+import { IActivateable } from '../../../interfaces/IActivateable.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
 export declare class CodeViewMonaco extends BaseCustomWebComponentLazyAppend implements ICodeView, IActivateable, IUiCommandHandler {
     dispose(): void;
     canvasElement: HTMLElement;

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

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { CommandType } from '../../../commandHandling/CommandType';
+import { CommandType } from '../../../commandHandling/CommandType.js';
 export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
     dispose() {
         this._monacoEditor.dispose();
@@ -75,8 +75,28 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
                 minimap: {
                     size: 'fill'
                 },
-                fixedOverflowWidgets: true
+                fixedOverflowWidgets: true,
+                scrollbar: {
+                    useShadows: false,
+                    verticalHasArrows: true,
+                    horizontalHasArrows: true,
+                    vertical: 'visible',
+                    horizontal: 'visible'
+                }
             });
+            //@ts-ignore
+            monaco.editor.defineTheme('myTheme', {
+                base: 'vs',
+                inherit: true,
+                //@ts-ignore
+                rules: [{ background: 'EDF9FA' }],
+                colors: {
+                    'editor.selectionBackground': '#add6ff',
+                    'editor.inactiveSelectionBackground': '#add6ff'
+                }
+            });
+            //@ts-ignore
+            monaco.editor.setTheme('myTheme');
             this._monacoEditor.layout();
             let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
                 this.onTextChanged.emit(this._monacoEditor.getValue());

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

@@ -1,9 +1,9 @@
 import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { ICodeView } from "./ICodeView";
-import { IActivateable } from '../../../interfaces/IActivateable';
-import { IStringPosition } from '../../services/htmlWriterService/IStringPosition';
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
-import { IUiCommand } from '../../../commandHandling/IUiCommand';
+import { ICodeView } from './ICodeView.js';
+import { IActivateable } from '../../../interfaces/IActivateable.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
 export declare class CodeViewSimple extends BaseCustomWebComponentConstructorAppend implements ICodeView, IActivateable, IUiCommandHandler {
     dispose(): void;
     canvasElement: HTMLElement;

package/dist/elements/widgets/demoView/IDemoView.d.ts

@@ -1,5 +1,5 @@
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
-import { ServiceContainer } from '../../services/ServiceContainer';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
 export interface IDemoView {
     display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): any;
 }

package/dist/elements/widgets/demoView/demoView.d.ts

@@ -1,7 +1,7 @@
-import { IDemoView } from "./IDemoView";
+import { IDemoView } from './IDemoView.js';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
-import { ServiceContainer } from "../../services/ServiceContainer";
-import { InstanceServiceContainer } from "../../services/InstanceServiceContainer";
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 export declare class DemoView extends BaseCustomWebComponentLazyAppend implements IDemoView {
     private _placeholder;
     private _loading;

package/dist/elements/widgets/designerView/DesignContext.d.ts

@@ -1,4 +1,4 @@
-import { IDesignContext } from "./IDesignContext";
+import { IDesignContext } from './IDesignContext.js';
 export declare class DesignContext implements IDesignContext {
     imports: string[];
     extensionOptions: {

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -1,12 +1,12 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { InstanceServiceContainer } from "../../services/InstanceServiceContainer";
-import { ServiceContainer } from "../../services/ServiceContainer";
-import { Snaplines } from "./Snaplines";
-import { IPlacementView } from './IPlacementView';
-import { IExtensionManager } from "./extensions/IExtensionManger";
-import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
-import { IPoint } from "../../../interfaces/IPoint";
-import { OverlayLayerView } from "./overlayLayerView";
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+import { Snaplines } from './Snaplines.js';
+import { IPlacementView } from './IPlacementView.js';
+import { IExtensionManager } from './extensions/IExtensionManger.js';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IPoint } from '../../../interfaces/IPoint.js';
+import { OverlayLayerView } from './overlayLayerView.js';
 import { IRect } from "../../../interfaces/IRect.js";
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { ISize } from "../../../interfaces/ISize.js";

package/dist/elements/widgets/designerView/IPlacementView.d.ts

@@ -1,6 +1,6 @@
-import { IDesignItem } from "../../item/IDesignItem";
-import { OverlayLayerView } from "./overlayLayerView";
-import { Snaplines } from './Snaplines';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { OverlayLayerView } from './overlayLayerView.js';
+import { Snaplines } from './Snaplines.js';
 export interface IPlacementView {
     alignOnSnap: boolean;
     alignOnGrid: boolean;

package/dist/elements/widgets/designerView/Snaplines.d.ts

@@ -1,7 +1,7 @@
-import type { IDesignItem } from "../../item/IDesignItem";
-import type { IPoint } from "../../../interfaces/IPoint";
-import type { ISize } from '../../../interfaces/ISize';
-import { OverlayLayerView } from "./overlayLayerView";
+import type { IDesignItem } from '../../item/IDesignItem.js';
+import type { IPoint } from '../../../interfaces/IPoint.js';
+import type { ISize } from '../../../interfaces/ISize.js';
+import { OverlayLayerView } from './overlayLayerView.js';
 import { IRect } from "../../../interfaces/IRect.js";
 export declare class Snaplines {
     snapOffset: number;

package/dist/elements/widgets/designerView/defaultConfiguredDesignerView.d.ts

@@ -1,4 +1,4 @@
-import { DesignerView } from "./designerView";
+import { DesignerView } from './designerView.js';
 export declare class DefaultConfiguredDesignerView extends DesignerView {
     constructor();
     ready(): Promise<void>;

package/dist/elements/widgets/designerView/defaultConfiguredDesignerView.js

@@ -1,4 +1,4 @@
-import { DesignerView } from "./designerView";
+import { DesignerView } from './designerView.js';
 export class DefaultConfiguredDesignerView extends DesignerView {
     constructor() {
         super();

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -1,20 +1,20 @@
-import { ServiceContainer } from '../../services/ServiceContainer';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
-import { IDesignItem } from '../../item/IDesignItem';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
 import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-import { IDesignerCanvas } from './IDesignerCanvas';
-import { Snaplines } from './Snaplines';
-import { IPlacementView } from './IPlacementView';
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
-import { IUiCommand } from '../../../commandHandling/IUiCommand';
-import { IExtensionManager } from "./extensions/IExtensionManger";
-import { IPoint } from "../../../interfaces/IPoint";
-import { OverlayLayer } from "./extensions/OverlayLayer";
-import { OverlayLayerView } from './overlayLayerView';
+import { IDesignerCanvas } from './IDesignerCanvas.js';
+import { Snaplines } from './Snaplines.js';
+import { IPlacementView } from './IPlacementView.js';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { IExtensionManager } from './extensions/IExtensionManger.js';
+import { IPoint } from '../../../interfaces/IPoint.js';
+import { OverlayLayer } from './extensions/OverlayLayer.js';
+import { OverlayLayerView } from './overlayLayerView.js';
 import { IRect } from "../../../interfaces/IRect.js";
 import { ISize } from "../../../interfaces/ISize.js";
 import { ITool } from "./tools/ITool.js";
-import { ContextMenu } from "../../helper/contextMenu/ContextMenu";
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
@@ -78,7 +78,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     initialize(serviceContainer: ServiceContainer): void;
     connectedCallback(): void;
     private _zoomFactorChanged;
-    _updateTransform(): void;
+    private _resizeBackgroundGrid;
+    private _updateTransform;
     setDesignItems(designItems: IDesignItem[]): void;
     addDesignItems(designItems: IDesignItem[]): void;
     _dragOverExtensionItem: IDesignItem;

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -1,25 +1,25 @@
-import { EventNames } from "../../../enums/EventNames";
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
-import { UndoService } from '../../services/undoService/UndoService';
-import { SelectionService } from '../../services/selectionService/SelectionService';
-import { DesignItem } from '../../item/DesignItem';
+import { EventNames } from '../../../enums/EventNames.js';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { UndoService } from '../../services/undoService/UndoService.js';
+import { SelectionService } from '../../services/selectionService/SelectionService.js';
+import { DesignItem } from '../../item/DesignItem.js';
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
-import { dragDropFormatNameElementDefinition, dragDropFormatNameBindingObject } from '../../../Constants';
-import { ContentService } from '../../services/contentService/ContentService';
-import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
-import { Snaplines } from './Snaplines';
-import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction';
-import { CommandType } from '../../../commandHandling/CommandType';
-import { DefaultHtmlParserService } from "../../services/htmlParserService/DefaultHtmlParserService";
-import { ExtensionType } from "./extensions/ExtensionType";
-import { ExtensionManager } from "./extensions/ExtensionManager";
-import { NamedTools } from "./tools/NamedTools";
-import { Screenshot } from '../../helper/Screenshot';
-import { dataURItoBlob, exportData, sleep } from "../../helper/Helper";
+import { dragDropFormatNameElementDefinition, dragDropFormatNameBindingObject } from '../../../Constants.js';
+import { ContentService } from '../../services/contentService/ContentService.js';
+import { InsertAction } from '../../services/undoService/transactionItems/InsertAction.js';
+import { Snaplines } from './Snaplines.js';
+import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction.js';
+import { CommandType } from '../../../commandHandling/CommandType.js';
+import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
+import { ExtensionType } from './extensions/ExtensionType.js';
+import { ExtensionManager } from './extensions/ExtensionManager.js';
+import { NamedTools } from './tools/NamedTools.js';
+import { Screenshot } from '../../helper/Screenshot.js';
+import { dataURItoBlob, exportData, sleep } from '../../helper/Helper.js';
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
-import { OverlayLayer } from "./extensions/OverlayLayer";
-import { OverlayLayerView } from './overlayLayerView';
-import { ContextMenu } from "../../helper/contextMenu/ContextMenu";
+import { OverlayLayer } from './extensions/OverlayLayer.js';
+import { OverlayLayerView } from './overlayLayerView.js';
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -87,11 +87,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       transform: translateZ(0);
       overflow: hidden;
 
-      font-family: initial;
-      font-size: initial;
-      font-weight: initial;
-      font-style: initial;
-      line-height: initial;
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      font-style: inherit;
+      line-height: inherit;
     }
     * {
       touch-action: none;
@@ -99,20 +99,24 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     #node-projects-designer-canvas-canvas {
       background-color: var(--canvas-background, white);
       /* 10px grid, using http://www.patternify.com/ */
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAFFJREFUeNpicChb7DAQmMGhbLHD////GQjh8nW3qapu1OJRi0ctHiYWl6+7TRAnLbxCVXWjcTxq8ajFoxaPllyjcTxq8ajFI8hiAAAAAP//AwCQfdyctxBQfwAAAABJRU5ErkJggg==);
+      //background-image: url(data:image/png;base64,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);
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAFXmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjIwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMjAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIyMCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMjAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjMwMC8xIgogICB0aWZmOllSZXNvbHV0aW9uPSIzMDAvMSIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMi0xMi0wOFQwOToxNTo0OCswMTowMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0xMi0wOFQwOToxNTo0OCswMTowMCI+CiAgIDxkYzp0aXRsZT4KICAgIDxyZGY6QWx0PgogICAgIDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+QmFja2dyb3VuZGdyaWRfMTBweDwvcmRmOmxpPgogICAgPC9yZGY6QWx0PgogICA8L2RjOnRpdGxlPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS4xMC42IgogICAgICBzdEV2dDp3aGVuPSIyMDIyLTEyLTA4VDA5OjE1OjQ4KzAxOjAwIi8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz4fvgn+AAABgWlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz8GjRhRLCiLl7BCftTExmLkV2ExnvJr8+bNvBk1b+b13kiyVbaKEhu/FvwFbJW1UkRKlrImNug5b2ZqJplzO/d87vfec7r3XPCpSd10KnrATGXs8FhImZtfUPwvBKjCTx/Nmu5YUzOjKiXt854yL952ebVKn/vXaqIxR4eyKuEh3bIzwuPCk6sZy+Md4UY9oUWFz4Q7bbmg8J2nR3L86nE8x98e22p4GHz1wkq8iCNFrCdsU1heTpuZXNHz9/FeEoilZmcktoq34BBmjBAKE4wwTJBeBmUO0iX96ZYVJfJ7svnTpCVXl9liDZtl4iTI0CnqilSPSTREj8lIsub1/29fHaO/L1c9EILKZ9d9bwf/Nvxsue7Xkev+HEP5E1ymCvnpQxj4EH2roLUdQN0GnF8VtMguXGxC06Ol2VpWKhf3GQa8nULtPDTcQPVirmf5fU4eQF2Xr7qGvX3okPN1S790cWfsRnax1QAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAC9JREFUOI1jfPr0KQNuICUlhUeWCY8cQTCqeWRoZvz//z8e6WfPntHK5lHNI0MzAMChCNMTuPcnAAAAAElFTkSuQmCC);
+      image-rendering: pixelated;
       background-position: 0px 0px;
+      background-attachment: fixed;
+      background-origin: -box;
       box-sizing: border-box;
       width: 100%;
       height: 100%;
       transform-origin: 0 0;
-      position: relative;
+      position: relative
     }
-
+    
     #node-projects-designer-canvas-canvas.dragFileActive {
       outline: blue 4px solid;
       outline-offset: -4px;
     }
-
+    
     node-projects-overlay-layer-view {
       box-sizing: border-box;
       width: 100%;
@@ -132,14 +136,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       user-select: none;
       -webkit-user-select: none;
     }
-
+    
     #node-projects-designer-canvas-clickOverlay {
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
     }
-
+    
     #node-projects-designer-canvas-helper-element {
       height: 0;
       width: 0;
@@ -150,11 +154,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       <div style="width: 100%;height: 100%;">
         <div id="node-projects-designer-canvas-outercanvas2" style="width:100%;height:100%;position:relative;">
           <div id="node-projects-designer-canvas-canvasContainer"
-            style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;user-select: none;">
-            <div id="node-projects-designer-canvas-canvas" part="canvas"></div>
-          </div>
+          style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;user-select: none;">
+          <div id="node-projects-designer-canvas-canvas" part="canvas"></div>
         </div>
-        <div id="node-projects-designer-canvas-clickOverlay" tabindex="0" style="pointer-events: auto;"></div>
+      </div>
+      <div id="node-projects-designer-canvas-clickOverlay" tabindex="0" style="pointer-events: auto;"></div>
       </div>
     </div>`;
     extensionManager;
@@ -427,7 +431,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.serviceContainer = serviceContainer;
         this.instanceServiceContainer = new InstanceServiceContainer(this);
         this.instanceServiceContainer.register("undoService", new UndoService(this));
-        this.instanceServiceContainer.register("selectionService", new SelectionService);
+        this.instanceServiceContainer.register("selectionService", new SelectionService(this));
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
         this.instanceServiceContainer.register("contentService", new ContentService(this.rootDesignItem));
         this.extensionManager = new ExtensionManager(this);
@@ -464,6 +468,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.clickOverlay.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
             this.clickOverlay.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
             this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
+            if (!this.serviceContainer.options.zoomDesignerBackground) {
+                setTimeout(() => {
+                    this._resizeBackgroundGrid();
+                }, 200);
+            }
         }
     }
     _zoomFactorChanged(refreshExtensions = true) {
@@ -480,6 +489,15 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.extensionManager.refreshAllAppliedExtentions();
             setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 200);
         }
+        if (!this.serviceContainer.options.zoomDesignerBackground)
+            this._resizeBackgroundGrid();
+    }
+    _resizeBackgroundGrid() {
+        const backgroundGridSize = 10;
+        const backgroundGridFactor = backgroundGridSize * 100 * 2;
+        let canvasWidth = this.canvas.getBoundingClientRect().width;
+        let backgroundGridZoom = backgroundGridFactor / canvasWidth;
+        this.canvas.style.backgroundSize = backgroundGridZoom.toString() + '%';
     }
     _updateTransform() {
         this._scaleFactor = this._zoomFactor;
@@ -498,7 +516,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.rootDesignItem._removeChildInternal(i);
         this.addDesignItems(designItems);
         this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
-        this.instanceServiceContainer.selectionService.setSelectedElements(null);
+        this.instanceServiceContainer.selectionService._withoutUndoSetSelectedElements(null);
     }
     addDesignItems(designItems) {
         if (designItems) {
@@ -666,8 +684,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 const containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
                 containerService.enterContainer(newContainer, [di]);
                 this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
-                grp.commit();
-                requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
+                requestAnimationFrame(() => {
+                    this.instanceServiceContainer.selectionService.setSelectedElements([di]);
+                    grp.commit();
+                });
             }
         }
     }

package/dist/elements/widgets/designerView/designerView.d.ts

@@ -1,8 +1,8 @@
-import { ServiceContainer } from '../../services/ServiceContainer';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
-import { IUiCommand } from '../../../commandHandling/IUiCommand';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
 import { DesignerCanvas } from "./designerCanvas.js";
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';

package/dist/elements/widgets/designerView/designerView.js

@@ -178,20 +178,23 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._zoomInput.onclick = this._zoomInput.select;
         let zoomIncrease = this._getDomElement('zoomIncrease');
         zoomIncrease.onclick = () => {
+            const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth;
+            const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight;
             if (this._designerCanvas.zoomFactor > 0.1)
-                this._designerCanvas.zoomFactor += 0.1;
+                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor + 0.1);
             else
-                this._designerCanvas.zoomFactor += 0.01;
+                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor + 0.01);
         };
         let zoomDecrease = this._getDomElement('zoomDecrease');
         zoomDecrease.onclick = () => {
+            const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth;
+            const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight;
             if (this._designerCanvas.zoomFactor > 0.11)
-                this._designerCanvas.zoomFactor -= 0.1;
+                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor - 0.1);
             else
-                this._designerCanvas.zoomFactor -= 0.01;
+                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, this._designerCanvas.zoomFactor - 0.01);
             if (this._designerCanvas.zoomFactor < 0.001)
-                this._designerCanvas.zoomFactor = 0.001;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+                this._designerCanvas.zoomPoint({ x: w / 2, y: h / 2 }, 0.001);
         };
         let zoomReset = this._getDomElement('zoomReset');
         zoomReset.onclick = () => {