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

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,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);
+      //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;
@@ -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;

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 = () => {

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

@@ -1,7 +1,7 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
 import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
 export declare abstract class AbstractExtension extends AbstractExtensionBase implements IDesignerExtension {
     protected extendedItem: IDesignItem;

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

@@ -1,8 +1,8 @@
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IExtensionManager } from "./IExtensionManger";
-import { OverlayLayerView } from '../overlayLayerView';
-import { OverlayLayer } from './OverlayLayer';
-import { IPoint } from "../../../../interfaces/IPoint";
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IExtensionManager } from './IExtensionManger.js';
+import { OverlayLayerView } from '../overlayLayerView.js';
+import { OverlayLayer } from './OverlayLayer.js';
+import { IPoint } from '../../../../interfaces/IPoint.js';
 export declare abstract class AbstractExtensionBase {
     protected overlays: SVGElement[];
     protected overlayLayerView: OverlayLayerView;

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

@@ -1,7 +1,7 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from "./AbstractExtension";
-import { IExtensionManager } from "./IExtensionManger";
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
 export declare class AltToEnterContainerExtension extends AbstractExtension {
     private _text;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);

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

@@ -1,4 +1,4 @@
-import { AbstractExtension } from "./AbstractExtension";
+import { AbstractExtension } from './AbstractExtension.js';
 import { OverlayLayer } from "./OverlayLayer.js";
 export class AltToEnterContainerExtension extends AbstractExtension {
     _text;

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

@@ -1,8 +1,8 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
 export declare class AltToEnterContainerExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

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

@@ -1,4 +1,4 @@
-import { AltToEnterContainerExtension } from './AltToEnterContainerExtension';
+import { AltToEnterContainerExtension } from './AltToEnterContainerExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class AltToEnterContainerExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {

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

@@ -1,7 +1,7 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from "./AbstractExtension";
-import { IExtensionManager } from "./IExtensionManger";
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
 export declare class CanvasExtension extends AbstractExtension {
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;

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

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

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

@@ -1,8 +1,8 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
 export declare class CanvasExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

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

@@ -1,4 +1,4 @@
-import { CanvasExtension } from './CanvasExtension';
+import { CanvasExtension } from './CanvasExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class CanvasExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.d.ts

@@ -1,7 +1,7 @@
-import { IDesignItem } from "../../../../item/IDesignItem";
-import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from "../IExtensionManger";
+import { IExtensionManager } from '../IExtensionManger.js';
 export type handlesPointerEvent = {
     handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
 };

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.d.ts

@@ -1,8 +1,8 @@
-import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
-import { IDesignItem } from "../../../../item/IDesignItem";
-import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IDesignerExtension } from "../IDesignerExtension";
-import { IExtensionManager } from "../IExtensionManger";
+import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerExtension } from '../IDesignerExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
 export declare class EditTextExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.d.ts

@@ -1,8 +1,8 @@
-import { IDesignItem } from "../../../../item/IDesignItem";
-import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
 import { AbstractExtension } from "../AbstractExtension.js";
-import { IExtensionManager } from "../IExtensionManger";
-import { handlesPointerEvent } from "./EditTextExtension";
+import { IExtensionManager } from '../IExtensionManger.js';
+import { handlesPointerEvent } from './EditTextExtension.js';
 export declare class EditTextWithStyloExtension extends AbstractExtension implements handlesPointerEvent {
     private _contentEditedBound;
     private _blurBound;

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js

@@ -1,5 +1,5 @@
 import { html } from "@node-projects/base-custom-webcomponent";
-import { TextTool } from "../../tools/TextTool";
+import { TextTool } from '../../tools/TextTool.js';
 import { AbstractExtension } from "../AbstractExtension.js";
 import { ExtensionType } from "../ExtensionType.js";
 import { OverlayLayer } from "../OverlayLayer.js";

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtensionProvider.d.ts

@@ -1,8 +1,8 @@
-import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
-import { IDesignItem } from "../../../../item/IDesignItem";
-import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IDesignerExtension } from "../IDesignerExtension";
-import { IExtensionManager } from "../IExtensionManger";
+import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerExtension } from '../IDesignerExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
 export declare class EditTextWithStyloExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

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

@@ -1,7 +1,7 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from './AbstractExtension';
-import { IExtensionManager } from "./IExtensionManger";
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
 export declare class ElementDragTitleExtension extends AbstractExtension {
     private _rect;
     private _text;

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

@@ -1,7 +1,7 @@
-import { getTextWidth } from "../../../helper/TextHelper";
-import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../helper/TransformHelper";
+import { getTextWidth } from '../../../helper/TextHelper.js';
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
 import { NamedTools } from "../tools/NamedTools.js";
-import { AbstractExtension } from './AbstractExtension';
+import { AbstractExtension } from './AbstractExtension.js';
 const extensionWidth = 60;
 export class ElementDragTitleExtension extends AbstractExtension {
     _rect;

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

@@ -1,8 +1,8 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
 export declare class ElementDragTitleExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

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

@@ -1,4 +1,4 @@
-import { ElementDragTitleExtension } from "./ElementDragTitleExtension";
+import { ElementDragTitleExtension } from './ElementDragTitleExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class ElementDragTitleExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {

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

@@ -1,8 +1,8 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { ExtensionType } from './ExtensionType';
-import { IExtensionManager } from "./IExtensionManger";
-import { IDesignerExtension } from "./IDesignerExtension";
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { ExtensionType } from './ExtensionType.js';
+import { IExtensionManager } from './IExtensionManger.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
 export declare class ExtensionManager implements IExtensionManager {
     designerCanvas: IDesignerCanvas;
     designItemsWithExtentions: Set<IDesignItem>;

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

@@ -1,6 +1,6 @@
-import { DesignItem } from "../../../item/DesignItem";
+import { DesignItem } from '../../../item/DesignItem.js';
 import { NodeType } from "../../../item/NodeType.js";
-import { ExtensionType } from './ExtensionType';
+import { ExtensionType } from './ExtensionType.js';
 export class ExtensionManager {
     designerCanvas;
     designItemsWithExtentions = new Set();

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

@@ -1,7 +1,7 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from "./AbstractExtension";
-import { IExtensionManager } from "./IExtensionManger";
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
 export declare class FlexboxExtension extends AbstractExtension {
     private _path;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);

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

@@ -1,6 +1,6 @@
-import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../helper/TransformHelper";
-import { AbstractExtension } from "./AbstractExtension";
-import { OverlayLayer } from "./OverlayLayer";
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from './OverlayLayer.js';
 export class FlexboxExtension extends AbstractExtension {
     _path;
     constructor(extensionManager, designerView, extendedItem) {

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

@@ -1,5 +1,5 @@
 import { DesignerView } from "../designerView.js";
-import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
 export declare class FlexboxExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
     provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];

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

@@ -1,8 +1,8 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
 export declare const flexboxExtensionShowOverlayOptionName = "flexboxExtensionShowOverlay";
 export declare class FlexboxExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;

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

@@ -1,5 +1,5 @@
 import { css } from "@node-projects/base-custom-webcomponent";
-import { FlexboxExtension } from "./FlexboxExtension";
+import { FlexboxExtension } from './FlexboxExtension.js';
 export const flexboxExtensionShowOverlayOptionName = 'flexboxExtensionShowOverlay';
 export class FlexboxExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {