@node-projects/web-component-designer 0.0.33 → 0.0.37

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

@@ -7,7 +7,6 @@ import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base
 import { dragDropFormatName } from '../../../Constants';
 import { ContentService } from '../../services/contentService/ContentService';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
-import { DomConverter } from './DomConverter';
 import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction';
@@ -23,13 +22,97 @@ import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelpe
 import { OverlayLayer } from "./extensions/OverlayLayer";
 import { OverlayLayerView } from './overlayLayerView';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
+    // Public Properties
+    serviceContainer;
+    instanceServiceContainer;
+    containerBoundingRect;
+    outerRect;
+    // IPlacementView
+    gridSize = 10;
+    alignOnGrid = false;
+    alignOnSnap = true;
+    snapLines;
+    overlayLayer;
+    rootDesignItem;
+    eatEvents;
+    _zoomFactor = 1;
+    get zoomFactor() {
+        return this._zoomFactor;
+    }
+    set zoomFactor(value) {
+        this._zoomFactor = value;
+        this.zoomFactorChanged();
+    }
+    // Private Variables
+    _canvas;
+    _canvasContainer;
+    _outercanvas2;
+    _lastHoverDesignItem;
+    _onContextMenuBound;
+    _pointerEventHandlerBound;
+    _firstConnect;
+    _onKeyDownBound;
+    _onKeyUpBound;
+    static style = css `
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      position: relative;
+      transform: translateZ(0);
+      overflow: hidden;
+    }
+    * {
+      touch-action: none;
+    }
+    #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-position: 0px 0px;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      transform-origin: 0 0;
+    }
+
+    #node-projects-designer-canvas-canvas.dragFileActive {
+      outline: blue 4px solid;
+      outline-offset: -4px;
+    }
+
+    node-projects-overlay-layer-view {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      overflow: visible;
+      user-select: none;
+      z-index: 999999999999;
+    }
+    
+    #node-projects-designer-canvas-canvas * {
+      cursor: pointer;
+      user-select: none;
+    }`;
+    static template = html `
+        <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
+          <div style="width: 100%;height: 100%;">
+            <div id="node-projects-designer-canvas-outercanvas2" style="width: 100%;height: 100%;position: relative;overflow: auto;">
+              <div id="node-projects-designer-canvas-canvasContainer" style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;/* bottom: 0; does not work with fixed sized when size is bigger then view */left: 0;user-select: none;">
+                <!-- <div id="zoomHelper" style="width: 10px; height: 10px; position: absolute; top: 0; left: 0; pointer-events: none;"></div> -->
+                <div id="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
+              </div>
+            </div>
+          </div>
+        </div>`;
+    extensionManager;
+    _onDblClickBound;
     constructor() {
         super();
-        // IPlacementView
-        this.gridSize = 10;
-        this.alignOnGrid = false;
-        this.alignOnSnap = true;
-        this._zoomFactor = 1;
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
@@ -44,13 +127,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._pointerEventHandlerBound = this._pointerEventHandler.bind(this);
         this._canvas.oncontextmenu = this._onContextMenuBound;
     }
-    get zoomFactor() {
-        return this._zoomFactor;
-    }
-    set zoomFactor(value) {
-        this._zoomFactor = value;
-        this.zoomFactorChanged();
-    }
     get designerWidth() {
         return this._canvasContainer.style.width;
     }
@@ -155,15 +231,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     handleSelectAll() {
         this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
     }
-    handleCopyCommand() {
-        const copyText = DomConverter.ConvertToString(this.instanceServiceContainer.selectionService.selectedElements, null);
-        navigator.clipboard.writeText(copyText);
+    async handleCopyCommand() {
+        await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
     }
     async handlePasteCommand() {
-        const text = await navigator.clipboard.readText();
-        const parserService = this.serviceContainer.htmlParserService;
+        const designItems = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
-        const designItems = await parserService.parse(text, this.serviceContainer, this.instanceServiceContainer);
         if (designItems) {
             for (let di of designItems) {
                 this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
@@ -184,7 +257,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.instanceServiceContainer.selectionService.setSelectedElements(null);
     }
     handleMoveCommand(command) {
-        //TODO: -> via undo redo service
         let sel = this.instanceServiceContainer.selectionService.primarySelection;
         if (command == CommandType.moveBackward)
             this.instanceServiceContainer.undoService.execute(new MoveElementInDomAction(sel, DesignItem.GetDesignItem(sel.element.previousElementSibling), 'beforebegin', DesignItem.GetDesignItem(sel.element.previousElementSibling), 'afterend'));
@@ -223,10 +295,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this._outercanvas2.addEventListener(EventNames.PointerDown, this._pointerEventHandlerBound);
             this._outercanvas2.addEventListener(EventNames.PointerMove, this._pointerEventHandlerBound);
             this._outercanvas2.addEventListener(EventNames.PointerUp, this._pointerEventHandlerBound);
-            this._canvas.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
-            this._canvas.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
-            this._canvas.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
-            this._canvas.addEventListener(EventNames.Drop, event => this._onDrop(event));
+            this._outercanvas2.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
+            this._outercanvas2.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
+            this._outercanvas2.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
+            this._outercanvas2.addEventListener(EventNames.Drop, event => this._onDrop(event));
             this._canvas.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
             this._canvas.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
             this._canvas.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
@@ -235,7 +307,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     zoomFactorChanged() {
         //@ts-ignore
         this._canvasContainer.style.zoom = this._zoomFactor;
-        //this._zoomInput.value = (this._zoomFactor * 100).toFixed(0) + '%';
+        //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+')';
+        //this._canvasContainer.style.transformOrigin = '0 0';
         this._canvasContainer.style.bottom = this._outercanvas2.offsetHeight >= this._canvasContainer.offsetHeight ? '0' : '';
         this._canvasContainer.style.right = this._outercanvas2.offsetWidth >= this._canvasContainer.offsetWidth ? '0' : '';
         this.snapLines.clearSnaplines();
@@ -299,14 +372,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         else {
             this._fillCalculationrects();
-            let transferData = event.dataTransfer.getData(dragDropFormatName);
-            let elementDefinition = JSON.parse(transferData);
-            let di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
-            let grp = di.openGroup("Insert");
+            const position = this.getNormalizedEventCoordinates(event);
+            const transferData = event.dataTransfer.getData(dragDropFormatName);
+            const elementDefinition = JSON.parse(transferData);
+            const di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
+            const grp = di.openGroup("Insert");
             di.setStyle('position', 'absolute');
-            const targetRect = event.target.getBoundingClientRect();
-            di.setStyle('top', ((event.offsetY - (this.containerBoundingRect.y * this._zoomFactor)) / this._zoomFactor + targetRect.top) + 'px');
-            di.setStyle('left', ((event.offsetX - (this.containerBoundingRect.x * this._zoomFactor)) / this._zoomFactor + targetRect.left) + 'px');
+            di.setStyle('left', position.x + 'px');
+            di.setStyle('top', position.y + 'px');
             this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
             grp.commit();
             requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
@@ -403,22 +476,25 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         event.preventDefault();
     }
-    getDesignerMousepoint(event, target, startPoint) {
-        let targetRect = target.getBoundingClientRect();
+    getNormalizedEventCoordinates(event) {
+        const offsetOfOuterX = (event.clientX - this.outerRect.x) / this.zoomFactor;
+        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x / this.zoomFactor;
+        const offsetOfOuterY = (event.clientY - this.outerRect.y) / this.zoomFactor;
+        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y / this.zoomFactor;
         return {
-            originalX: event.x - this.containerBoundingRect.x,
-            //containerOriginalX: event.x - this._ownBoundingRect.x,
-            x: (event.x - this.containerBoundingRect.x) / this._zoomFactor,
-            originalY: event.y - this.containerBoundingRect.y,
-            //containerOriginalY: event.y - this._ownBoundingRect.y,
-            y: (event.y - this.containerBoundingRect.y) / this._zoomFactor,
-            offsetInControlX: (startPoint ? startPoint.offsetInControlX : event.x - targetRect.x),
-            offsetInControlY: (startPoint ? startPoint.offsetInControlY : event.y - targetRect.y),
-            zoom: this._zoomFactor,
-            normalizedX: ((event.offsetX - (this.containerBoundingRect.x * this._zoomFactor)) / this._zoomFactor + targetRect.left),
-            normalizedY: ((event.offsetY - (this.containerBoundingRect.y * this._zoomFactor)) / this._zoomFactor + targetRect.top)
+            x: offsetOfOuterX - offsetOfCanvasX,
+            y: offsetOfOuterY - offsetOfCanvasY
         };
     }
+    getNormalizedElementCoordinates(element) {
+        const targetRect = element.getBoundingClientRect();
+        return { x: targetRect.x - this.containerBoundingRect.x, y: targetRect.y - this.containerBoundingRect.y };
+    }
+    getNormalizedOffsetInElement(event, element) {
+        const normEvt = this.getNormalizedEventCoordinates(event);
+        const normEl = this.getNormalizedElementCoordinates(element);
+        return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
+    }
     //todo remove, is in base custom webcomp domhelper
     static getHost(node) {
         while (node.parentElement)
@@ -469,8 +545,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         return currentElement;
     }
+    _rect;
     _pointerEventHandler(event) {
-        var _a, _b, _c;
+        this._fillCalculationrects();
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
         if (event.button == 2)
@@ -492,15 +569,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (currentElement && DesignerCanvas.getHost(currentElement.parentNode) === this.overlayLayer) {
             if (this.eatEvents)
                 return;
-            currentElement = (_b = (_a = this.instanceServiceContainer.selectionService.primarySelection) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : this._canvas;
+            currentElement = this.instanceServiceContainer.selectionService.primarySelection?.element ?? this._canvas;
         }
         this._fillCalculationrects();
-        let tool = (_c = this.serviceContainer.globalContext.tool) !== null && _c !== void 0 ? _c : this.serviceContainer.designerTools.get(NamedTools.Pointer);
+        let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer);
         this._canvas.style.cursor = tool.cursor;
         tool.pointerEventHandler(this, event, currentElement);
     }
     _fillCalculationrects() {
         this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
+        this.outerRect = this._outercanvas2.getBoundingClientRect();
     }
     addOverlay(element, overlayLayer = OverlayLayer.Normal) {
         this.overlayLayer.addOverlay(element, overlayLayer);
@@ -509,60 +587,4 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.overlayLayer.removeOverlay(element);
     }
 }
-DesignerCanvas.style = css `
-    :host {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      position: relative;
-      transform: translateZ(0);
-      overflow: hidden;
-    }
-    * {
-      touch-action: none;
-    }
-    #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-position: 0px 0px;
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      transform-origin: 0 0;
-    }
-
-    #node-projects-designer-canvas-canvas.dragFileActive {
-      outline: blue 4px solid;
-      outline-offset: -4px;
-    }
-
-    node-projects-overlay-layer-view {
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      overflow: visible;
-      user-select: none;
-      z-index: 999999999999;
-    }
-    
-    #node-projects-designer-canvas-canvas * {
-      cursor: pointer;
-      user-select: none;
-    }`;
-DesignerCanvas.template = html `
-        <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
-          <div style="width: 100%;height: 100%;">
-            <div id="node-projects-designer-canvas-outercanvas2" style="width: 100%;height: 100%;position: relative;overflow: auto;">
-              <div id="node-projects-designer-canvas-canvasContainer" style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;/* bottom: 0; does not work with fixed sized when size is bigger then view */left: 0;user-select: none;">
-                <!-- <div id="zoomHelper" style="width: 10px; height: 10px; position: absolute; top: 0; left: 0; pointer-events: none;"></div> -->
-                <div id="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
-              </div>
-            </div>
-          </div>
-        </div>`;
 customElements.define('node-projects-designer-canvas', DesignerCanvas);

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

@@ -4,6 +4,95 @@ import { DomConverter } from './DomConverter.js';
 import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
 import { EventNames } from '../../../enums/EventNames.js';
 export class DesignerView extends BaseCustomWebComponentConstructorAppend {
+    get serviceContainer() {
+        return this._designerCanvas.serviceContainer;
+    }
+    set serviceContainer(value) {
+        this._designerCanvas.serviceContainer = value;
+    }
+    get instanceServiceContainer() {
+        return this._designerCanvas.instanceServiceContainer;
+    }
+    set instanceServiceContainer(value) {
+        this._designerCanvas.instanceServiceContainer = value;
+    }
+    _zoomInput;
+    static style = css `
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      position: relative;
+      transform: translateZ(0);
+      overflow: hidden;
+    }
+    * {
+      touch-action: none;
+    }
+    #lowertoolbar {
+      height: 16px;
+      background: #787f82;
+      display: flex;
+    }
+    input {
+      width: 40px;
+      height: 16px;
+      padding: 0;
+      border: 0;
+      font-size: 12px;
+      text-align: center;
+      margin-right: 1px;
+    }
+    .toolbar-control {
+      width: 16px;
+      height: 16px;
+      display: block;
+      margin-right: 1px;
+      cursor: default;
+    }
+    .toolbar-control:hover {
+      background-color:rgba(164,206,249,.6);
+    }
+    #outer {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+    }
+    #canvas {
+      width: 100%;
+      height: 100%;
+    }
+  
+    .zoom-in {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAn9JREFUeNqkU11o01AUTtI06U/6tzHWbnNVS+k67FAG/gwfZEOcCrpNEBwEH2Q+Otqxh+5VEaHYV18UwQd9sk4Q+6CUKogbtSoM10qftJS2iGuT/iRpshvvDZu4DHHggY+TnHu+795zz7m4qqrYxfA6pjerlcHMZvMQQRCL8Hccoh+iBJECAMQEQci3Wk2MxP5iqgqmJUmIB3xkdTRoKgQG6Wr1JxBX1oTQx3UxCdcjMO2ZJiCK4g4y3HUIACV+bsL5dSRAWfwe636z0WBzWEFzn5vku5xyIZGsx2UF5AhEaDYbO8Dz3KLPi1X9B2iTy0pRiDx5/Z2bJgmGwDH8WMhuDxzEf6A8TYDneT3GR4JMzcVQThNlcCtANaM48pICutodxXTkkI1HeVslSPor6B/wWL7B3Z1n2KR3O3h05rkDOkd2eYoSxM025PVrAgAQeoFSuSLI3Q66jpJNRsIWPLvM5JJTTUkGGsqVtgJ5JU3AaLTqBVKZT9xh7yDT2Gh05G4bNQBzGETkBbkMVAxbzdadMJbSBDzCHXgKgKGZQJCp0IP32dnEaKhd6nOZAay7mXk6UUGeIHDDh88NKb0qumjaHiN391/1GjtrJ6ZPSb33H9eJYomuTJ601Qf7SKVYVlqplZblxRvOThrtEaC28qSOPAwncCYSWbzJsrO3XP4br9KZa1fTmcaOSTQYLDFFaeURh/yDfLynp/fCwkI0yrKX79ZqG49sUr2A44a3u+d08/fXVhfAeZ8vcDocjs6z7KV7xeL3JzBcwPZgmoAkScGlpdvzc3NXHuZyXxIwlMX2aJoAfFkvx8aGnRzH5WEpr7cXuerKPwVw1Lb/sV8CDACbf0U37X3NqwAAAABJRU5ErkJggg==);
+    }
+    .zoom-out {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmVJREFUeNqkU01oE0EUnv3Nf0xsS01jEzWUNCUplh7U4kEiVVEQqyBYWDxor5am5JBeFRGCuXpRBA8KHqIHMYISohdTYlQo2kguaghJUNvd/O1udjvr7NKWZHuw4IMHM/v9zHu8t5iiKCAYDAKi/xQ4MHEdbIXFYgUmk2kUx/EouoZRulGWUaYhhHGe5wutVhOQKtk3/RToQ1HgjCjyCb+PrE0GjEW/x1Cr/YFCdoUPffwqpBAeQbRnmoEgCD1i9OoohHLi7EnHt3E/bfb0m/pwDGBeF04P77Mpex1SMZliE5IMV3FV0Gw2erJe56I+L6iNHDQYnRaaVsXb5uh8JGS3+w9hv1SeVkG9Xtd3EB4PDBecVtplpAmHKMMesN2R2Ymg7fer9PfwZgui3sC932X+gV53nGZSXj2Yf36B5oWNNtK5NQMIcT2nXKnyUt8eA6uSUf1YNyhKsFmptmWkK2sGFGXRG6Rzn7jDXo+1sdboSBSJEd0gVABYzrMOpEtrBi7+DqoCAnUn1JTo0IP3+dnkZKhdHnKaIEUSXRPCiA+fG2JmWXAaDPY4uXP+ipfqrBybOSEO3n/M4qWyoXrmuE30DJHWUkVupbMt44u3nJ2k7BGotAqkTjyGNvBiJBK9yTCzt5wjN15ncteuZnKNnk0kCHNcllsFVUN2iY8ODAyeX1yMxRjm8t319bVHNpEtYhjxbseago3t0+YU4Dmfzz+9sBCbZ5hL90qln0/Q5yLYRWgGoigGlpZuz8/NXXm4uvolqY4a7DI0A/RnvZyaGnNwHFdArbzZArla9p8GmDq2/4m/AgwATHQSD48kJDUAAAAASUVORK5CYII=);
+    }
+    .snap-grid {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAblJREFUeNqkUjtLA0EQnntFyKNKJdiFgIlGC5G0FlaaIsYgiKAgKIKdjbV/wM7GImBhI6JFMFWKK3yBimBAhJDuUEgimMSYS0hunbncHRtFjLjw7X7z7ezszM4KjDEQRRG+jnlEgvYAAgLAJpoT1tYdA9gzAAqLuC/DD4N1EZC87v1IYnZ0MBj0k/6Szw/nTs7GO+8f62gWBCuDHTRG+ABxgGScsd3JlYWlJogu9TSjkT41NzM0AEbr5uDocJmxLTv3CCJpgbRkAKcWpq14vP7scVqrVKsbBOKktayS7BL4RzB5uxvAo7++SfV6vYnmBenESaM9/qCESFt4pPUJJzrlLpe/vQ9pTeex8A0EQcggwILJo9EohMPhNVW9ZqFQaJvsWCzWozGuCxJ3gck1TYNGo+Hy+XxQKpXalUoFisUi1Go1RyM/uwtZLsADYkxRlGnMZLXT6QQkSSqglsIV0HY0XddTdgkqV4LD6YPJsgwYzLSJEygQraz70YDvRg9Hh3O8DdptM1uTEwzDMDnvTHVfWfy+D8592W4Jt1wJfXOnC0h8XMw/cbuEHOKZc/iNX9qC2cb/jE8BBgAvhdOb37HVsgAAAABJRU5ErkJggg==);
+    }
+    .snap-guide {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYVJREFUeNqkU7tKA1EQnbs3CnlVqbQNARMjFilS+AnZQhIbW0ER/AA/wlYbhXR2wUKx0iKNYGMKDViEdEIgieBujGvCPpyz7sK6iWLIwJk798zsuXsfIxzHoXksAqcoij+vMbYq7MoszGxaEB3wtODlH3i5E5uojck210RCgq7SJie4MC0TsdO1cim/lMmkwHdarZWni+t16/1jz/FElJBAGc5imLzyakXNG0IuVo+OnwHE4JCzgisG7BJu/I3CQjyRuq1dvWi6vg8gBofcOHgGAZO+AFv88/VNDofDEcd3IBCD43ycfhEowY28Sazfnzh1cKMggWsUQvi4waiqKuVyud16/d7JZrOHxWJxKudMuQV3C81mk3RdX0wmk9Tr9UxN06jb7dJgMPjBwQRUAu/AtWg0SpZl7TDSUso2/1UVNWHOMIwJARzWBhcQwMXu1oJb9Ufbtsk0zYktPLrvgD8E/mWeYoNxxlj2xoZ3qI2/YrePQs10PksjTRPozCog5m3nLwEGABrLzseuHT6IAAAAAElFTkSuQmCC);
+    }`;
+    static template = html `
+        <div id="outer">          
+          <div id="lowertoolbar">
+            <input id="zoomInput" type="text" value="100%">
+            <div title="decrease zoom" id="zoomIncrease" class="toolbar-control zoom-in"></div>
+            <div title="increase zoom" id="zoomDecrease" class="toolbar-control zoom-out"></div>
+            <div title="reset zoom" id="zoomReset" class="toolbar-control"
+              style="width: 16px; height: 16px; font-size: 14px; display: flex; align-items: center; justify-content: center;">1
+            </div>
+            <div title="zoom to fit" id="zoomFit" class="toolbar-control"
+              style="width: 16px; height: 16px; font-size: 8px; display: flex; align-items: center; justify-content: center;">
+              100%</div>
+            <div title="snap to grid" id="alignGrid" class="toolbar-control snap-grid"></div>
+            <div title="snap to elements" id="alignSnap" class="toolbar-control snap-guide"></div>
+          </div>
+        </div>`;
+    _designerCanvas;
     constructor() {
         super();
         const outer = this._getDomElement('outer');
@@ -50,18 +139,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         alignGrid.onclick = () => { this._designerCanvas.alignOnGrid = !this._designerCanvas.alignOnGrid; alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : ''; };
         alignGrid.style.backgroundColor = this._designerCanvas.alignOnGrid ? 'deepskyblue' : '';
     }
-    get serviceContainer() {
-        return this._designerCanvas.serviceContainer;
-    }
-    set serviceContainer(value) {
-        this._designerCanvas.serviceContainer = value;
-    }
-    get instanceServiceContainer() {
-        return this._designerCanvas.instanceServiceContainer;
-    }
-    set instanceServiceContainer(value) {
-        this._designerCanvas.instanceServiceContainer = value;
-    }
     _onWheel(event) {
         if (event.ctrlKey) {
             event.preventDefault();
@@ -128,79 +205,4 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         return designerCanvas;
     }
 }
-DesignerView.style = css `
-    :host {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      position: relative;
-      transform: translateZ(0);
-      overflow: hidden;
-    }
-    * {
-      touch-action: none;
-    }
-    #lowertoolbar {
-      height: 16px;
-      background: #787f82;
-      display: flex;
-    }
-    input {
-      width: 40px;
-      height: 16px;
-      padding: 0;
-      border: 0;
-      font-size: 12px;
-      text-align: center;
-      margin-right: 1px;
-    }
-    .toolbar-control {
-      width: 16px;
-      height: 16px;
-      display: block;
-      margin-right: 1px;
-      cursor: default;
-    }
-    .toolbar-control:hover {
-      background-color:rgba(164,206,249,.6);
-    }
-    #outer {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-    }
-    #canvas {
-      width: 100%;
-      height: 100%;
-    }
-  
-    .zoom-in {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAn9JREFUeNqkU11o01AUTtI06U/6tzHWbnNVS+k67FAG/gwfZEOcCrpNEBwEH2Q+Otqxh+5VEaHYV18UwQd9sk4Q+6CUKogbtSoM10qftJS2iGuT/iRpshvvDZu4DHHggY+TnHu+795zz7m4qqrYxfA6pjerlcHMZvMQQRCL8Hccoh+iBJECAMQEQci3Wk2MxP5iqgqmJUmIB3xkdTRoKgQG6Wr1JxBX1oTQx3UxCdcjMO2ZJiCK4g4y3HUIACV+bsL5dSRAWfwe636z0WBzWEFzn5vku5xyIZGsx2UF5AhEaDYbO8Dz3KLPi1X9B2iTy0pRiDx5/Z2bJgmGwDH8WMhuDxzEf6A8TYDneT3GR4JMzcVQThNlcCtANaM48pICutodxXTkkI1HeVslSPor6B/wWL7B3Z1n2KR3O3h05rkDOkd2eYoSxM025PVrAgAQeoFSuSLI3Q66jpJNRsIWPLvM5JJTTUkGGsqVtgJ5JU3AaLTqBVKZT9xh7yDT2Gh05G4bNQBzGETkBbkMVAxbzdadMJbSBDzCHXgKgKGZQJCp0IP32dnEaKhd6nOZAay7mXk6UUGeIHDDh88NKb0qumjaHiN391/1GjtrJ6ZPSb33H9eJYomuTJ601Qf7SKVYVlqplZblxRvOThrtEaC28qSOPAwncCYSWbzJsrO3XP4br9KZa1fTmcaOSTQYLDFFaeURh/yDfLynp/fCwkI0yrKX79ZqG49sUr2A44a3u+d08/fXVhfAeZ8vcDocjs6z7KV7xeL3JzBcwPZgmoAkScGlpdvzc3NXHuZyXxIwlMX2aJoAfFkvx8aGnRzH5WEpr7cXuerKPwVw1Lb/sV8CDACbf0U37X3NqwAAAABJRU5ErkJggg==);
-    }
-    .zoom-out {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmVJREFUeNqkU01oE0EUnv3Nf0xsS01jEzWUNCUplh7U4kEiVVEQqyBYWDxor5am5JBeFRGCuXpRBA8KHqIHMYISohdTYlQo2kguaghJUNvd/O1udjvr7NKWZHuw4IMHM/v9zHu8t5iiKCAYDAKi/xQ4MHEdbIXFYgUmk2kUx/EouoZRulGWUaYhhHGe5wutVhOQKtk3/RToQ1HgjCjyCb+PrE0GjEW/x1Cr/YFCdoUPffwqpBAeQbRnmoEgCD1i9OoohHLi7EnHt3E/bfb0m/pwDGBeF04P77Mpex1SMZliE5IMV3FV0Gw2erJe56I+L6iNHDQYnRaaVsXb5uh8JGS3+w9hv1SeVkG9Xtd3EB4PDBecVtplpAmHKMMesN2R2Ymg7fer9PfwZgui3sC932X+gV53nGZSXj2Yf36B5oWNNtK5NQMIcT2nXKnyUt8eA6uSUf1YNyhKsFmptmWkK2sGFGXRG6Rzn7jDXo+1sdboSBSJEd0gVABYzrMOpEtrBi7+DqoCAnUn1JTo0IP3+dnkZKhdHnKaIEUSXRPCiA+fG2JmWXAaDPY4uXP+ipfqrBybOSEO3n/M4qWyoXrmuE30DJHWUkVupbMt44u3nJ2k7BGotAqkTjyGNvBiJBK9yTCzt5wjN15ncteuZnKNnk0kCHNcllsFVUN2iY8ODAyeX1yMxRjm8t319bVHNpEtYhjxbseago3t0+YU4Dmfzz+9sBCbZ5hL90qln0/Q5yLYRWgGoigGlpZuz8/NXXm4uvolqY4a7DI0A/RnvZyaGnNwHFdArbzZArla9p8GmDq2/4m/AgwATHQSD48kJDUAAAAASUVORK5CYII=);
-    }
-    .snap-grid {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAblJREFUeNqkUjtLA0EQnntFyKNKJdiFgIlGC5G0FlaaIsYgiKAgKIKdjbV/wM7GImBhI6JFMFWKK3yBimBAhJDuUEgimMSYS0hunbncHRtFjLjw7X7z7ezszM4KjDEQRRG+jnlEgvYAAgLAJpoT1tYdA9gzAAqLuC/DD4N1EZC87v1IYnZ0MBj0k/6Szw/nTs7GO+8f62gWBCuDHTRG+ABxgGScsd3JlYWlJogu9TSjkT41NzM0AEbr5uDocJmxLTv3CCJpgbRkAKcWpq14vP7scVqrVKsbBOKktayS7BL4RzB5uxvAo7++SfV6vYnmBenESaM9/qCESFt4pPUJJzrlLpe/vQ9pTeex8A0EQcggwILJo9EohMPhNVW9ZqFQaJvsWCzWozGuCxJ3gck1TYNGo+Hy+XxQKpXalUoFisUi1Go1RyM/uwtZLsADYkxRlGnMZLXT6QQkSSqglsIV0HY0XddTdgkqV4LD6YPJsgwYzLSJEygQraz70YDvRg9Hh3O8DdptM1uTEwzDMDnvTHVfWfy+D8592W4Jt1wJfXOnC0h8XMw/cbuEHOKZc/iNX9qC2cb/jE8BBgAvhdOb37HVsgAAAABJRU5ErkJggg==);
-    }
-    .snap-guide {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYVJREFUeNqkU7tKA1EQnbs3CnlVqbQNARMjFilS+AnZQhIbW0ER/AA/wlYbhXR2wUKx0iKNYGMKDViEdEIgieBujGvCPpyz7sK6iWLIwJk798zsuXsfIxzHoXksAqcoij+vMbYq7MoszGxaEB3wtODlH3i5E5uojck210RCgq7SJie4MC0TsdO1cim/lMmkwHdarZWni+t16/1jz/FElJBAGc5imLzyakXNG0IuVo+OnwHE4JCzgisG7BJu/I3CQjyRuq1dvWi6vg8gBofcOHgGAZO+AFv88/VNDofDEcd3IBCD43ycfhEowY28Sazfnzh1cKMggWsUQvi4waiqKuVyud16/d7JZrOHxWJxKudMuQV3C81mk3RdX0wmk9Tr9UxN06jb7dJgMPjBwQRUAu/AtWg0SpZl7TDSUso2/1UVNWHOMIwJARzWBhcQwMXu1oJb9Ufbtsk0zYktPLrvgD8E/mWeYoNxxlj2xoZ3qI2/YrePQs10PksjTRPozCog5m3nLwEGABrLzseuHT6IAAAAAElFTkSuQmCC);
-    }`;
-DesignerView.template = html `
-        <div id="outer">          
-          <div id="lowertoolbar">
-            <input id="zoomInput" type="text" value="100%">
-            <div title="decrease zoom" id="zoomIncrease" class="toolbar-control zoom-in"></div>
-            <div title="increase zoom" id="zoomDecrease" class="toolbar-control zoom-out"></div>
-            <div title="reset zoom" id="zoomReset" class="toolbar-control"
-              style="width: 16px; height: 16px; font-size: 14px; display: flex; align-items: center; justify-content: center;">1
-            </div>
-            <div title="zoom to fit" id="zoomFit" class="toolbar-control"
-              style="width: 16px; height: 16px; font-size: 8px; display: flex; align-items: center; justify-content: center;">
-              100%</div>
-            <div title="snap to grid" id="alignGrid" class="toolbar-control snap-grid"></div>
-            <div title="snap to elements" id="alignSnap" class="toolbar-control snap-guide"></div>
-          </div>
-        </div>`;
 customElements.define('node-projects-designer-view', DesignerView);

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

@@ -1,6 +1,10 @@
 export class AbstractExtension {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerView;
+    extendedItem;
     constructor(extensionManager, designerView, extendedItem) {
-        this.overlays = [];
         this.extensionManager = extensionManager;
         this.designerView = designerView;
         this.extendedItem = extendedItem;

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

@@ -1,6 +1,8 @@
 import { AbstractExtension } from "./AbstractExtension";
 import { OverlayLayer } from "./OverlayLayer.js";
 export class AltToEnterContainerExtension extends AbstractExtension {
+    _text;
+    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }

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

@@ -1,16 +1,14 @@
 import { AltToEnterContainerExtension } from './AltToEnterContainerExtension';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class AltToEnterContainerExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
-    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
+    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
+  `;
 }

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

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

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

@@ -0,0 +1,29 @@
+import { AbstractExtension } from "./AbstractExtension";
+export class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        if (computedStyle.margin !== '0px') {
+            const xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
+            const yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
+            const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+            const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+            const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
+            const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
+            this._drawRect(xOffset - left, yOffset - top, left + itemRect.width + right, top, 'svg-margin');
+            this._drawRect(xOffset - left, yOffset, left, itemRect.height, 'svg-margin');
+            this._drawRect(xOffset + itemRect.width, yOffset, right, itemRect.height, 'svg-margin');
+            this._drawRect(xOffset - left, yOffset + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
+        }
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

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

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

@@ -0,0 +1,15 @@
+import { CanvasExtension } from './CanvasExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class CanvasExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'block')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new CanvasExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-margin { fill: #ff944722; }
+  `;
+}