@node-projects/web-component-designer 0.0.61 → 0.0.65

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

@@ -3,6 +3,7 @@ import { DesignerCanvas } from "./designerCanvas.js";
 import { DomConverter } from './DomConverter.js';
 import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
 import { EventNames } from '../../../enums/EventNames.js';
+const autoZomOffset = 10;
 export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     get serviceContainer() {
         return this._designerCanvas.serviceContainer;
@@ -16,6 +17,10 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     set instanceServiceContainer(value) {
         this._designerCanvas.instanceServiceContainer = value;
     }
+    _designerCanvas;
+    get designerCanvas() {
+        return this._designerCanvas;
+    }
     _zoomInput;
     _lowertoolbar;
     static style = css `
@@ -82,24 +87,50 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     }
     .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);
+    }
+    
+    .bottom-scroll {
+      width: calc(100% - 16px);
+      position: absolute;
+      bottom: 16px;
+      height: 16px;
+      box-sizing: border-box;
+    }
+    .right-scroll {
+      height: calc(100% - 32px);
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 16px;
+      box-sizing: border-box;
+    }
+    .bottom-right {
+      width: 16px;
+      height: 16px;
+      bottom: 16px;
+      right: 0;
+      position: absolute;
+      background: #f0f0f0;
     }`;
     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;
+    <div id="outer">
+      <node-projects-plain-scrollbar value="0.5" class="bottom-scroll"></node-projects-plain-scrollbar>
+      <node-projects-plain-scrollbar value="0.5" orientation="vertical" class="right-scroll"></node-projects-plain-scrollbar>
+      <div class="bottom-right"></div>
+      <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>`;
     constructor() {
         super();
         const outer = this._getDomElement('outer');
@@ -130,12 +161,30 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         };
         let zoomReset = this._getDomElement('zoomReset');
         zoomReset.onclick = () => {
+            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
             this._designerCanvas.zoomFactor = 1;
             this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
         };
         let zoomFit = this._getDomElement('zoomFit');
         zoomFit.onclick = () => {
-            this._designerCanvas.zoomFactor = 7.7;
+            let maxX = 0, maxY = 0, minX = 0, minY = 0;
+            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
+            this._designerCanvas.zoomFactor = 1;
+            for (let n of DomHelper.getAllChildNodes(this.designerCanvas.rootDesignItem.element)) {
+                if (n instanceof Element) {
+                    const rect = n.getBoundingClientRect();
+                    minX = minX < rect.x ? minX : rect.x;
+                    minY = minY < rect.y ? minY : rect.y;
+                    maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
+                    maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
+                }
+            }
+            const cvRect = this.designerCanvas.getBoundingClientRect();
+            maxX -= cvRect.x;
+            maxY -= cvRect.y;
+            let scaleX = cvRect.width / (maxX / this._designerCanvas.zoomFactor);
+            let scaleY = cvRect.height / (maxY / this._designerCanvas.zoomFactor);
+            this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
             this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
         };
         this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
@@ -196,13 +245,14 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         }
     }
     getHTML(designItemsAssignmentList) {
-        this.instanceServiceContainer.selectionService.setSelectedElements(null);
+        //this.instanceServiceContainer.selectionService.setSelectedElements(null);
         return DomConverter.ConvertToString([...this._designerCanvas.rootDesignItem.children()], designItemsAssignmentList);
     }
     async parseHTML(html) {
         const parserService = this.serviceContainer.htmlParserService;
         if (!html) {
             this.instanceServiceContainer.undoService.clear();
+            this._designerCanvas.overlayLayer.removeAllOverlays();
             DomHelper.removeAllChildnodes(this._designerCanvas.overlayLayer);
             this._designerCanvas.rootDesignItem.clearChildren();
         }

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

@@ -12,7 +12,7 @@ export class MouseOverExtension extends AbstractExtension {
         let itemRect = this.extendedItem.element.getBoundingClientRect();
         const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
         const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
-        this._rect = this._drawRect(xOffset - offset, yOffset - offset, itemRect.width + offset + offset, itemRect.height + offset + offset, 'svg-hover', this._rect);
+        this._rect = this._drawRect((xOffset - offset) / this.designerCanvas.scaleFactor, (yOffset - offset) / this.designerCanvas.scaleFactor, (itemRect.width + offset + offset) / this.designerCanvas.scaleFactor, (itemRect.height + offset + offset) / this.designerCanvas.scaleFactor, 'svg-hover', this._rect);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -34,10 +34,10 @@ export class PositionExtension extends AbstractExtension {
             tx = Number.parseFloat(transforms[4]);
             ty = Number.parseFloat(transforms[5].replace(')', ''));
         }
-        this._line1 = this._drawLine(xOffset - left - tx, yOffset + itemRect.height / 2, xOffset, yOffset + itemRect.height / 2, 'svg-position', this._line1);
-        this._line2 = this._drawLine(xOffset + itemRect.width / 2, yOffset - top - ty, xOffset + itemRect.width / 2, yOffset, 'svg-position', this._line2);
-        this._line3 = this._drawLine(xOffset + itemRect.width, yOffset + itemRect.height / 2, xOffset + itemRect.width + right + -1 * tx, yOffset + itemRect.height / 2, 'svg-position', this._line3);
-        this._line4 = this._drawLine(xOffset + itemRect.width / 2, yOffset + itemRect.height, xOffset + itemRect.width / 2, yOffset + itemRect.height + bottom + -1 * ty, 'svg-position', this._line4);
+        this._line1 = this._drawLine((xOffset / this.designerCanvas.scaleFactor - left - tx), (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, xOffset / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, 'svg-position', this._line1);
+        this._line2 = this._drawLine((xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset / this.designerCanvas.scaleFactor) - top - ty, (xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, yOffset / this.designerCanvas.scaleFactor, 'svg-position', this._line2);
+        this._line3 = this._drawLine((xOffset + itemRect.width) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, (xOffset + itemRect.width + right + -1 * tx) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height / 2) / this.designerCanvas.scaleFactor, 'svg-position', this._line3);
+        this._line4 = this._drawLine((xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height) / this.designerCanvas.scaleFactor, (xOffset + itemRect.width / 2) / this.designerCanvas.scaleFactor, (yOffset + itemRect.height + bottom + -1 * ty) / this.designerCanvas.scaleFactor, 'svg-position', this._line4);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -12,8 +12,8 @@ export class PrimarySelectionDefaultExtension extends AbstractExtension {
     }
     refresh() {
         const boundRect = this.extendedItem.element.getBoundingClientRect();
-        this._rect = this._drawRect(boundRect.x - this.designerCanvas.containerBoundingRect.x, boundRect.y - this.designerCanvas.containerBoundingRect.y - 16, 60, 15, 'svg-primary-selection-move', this._rect);
-        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', boundRect.x - this.designerCanvas.containerBoundingRect.x, boundRect.y - this.designerCanvas.containerBoundingRect.y - 5, 'svg-text-primary', this._text);
+        this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
+        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -7,6 +7,7 @@ export declare class ResizeExtension extends AbstractExtension {
     private _initialSizes;
     private _actionModeStarted;
     private _initialPoint;
+    private _offsetPoint;
     private _circle1;
     private _circle2;
     private _circle3;
@@ -19,6 +20,6 @@ export declare class ResizeExtension extends AbstractExtension {
     extend(): void;
     refresh(): void;
     _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
-    _pointerActionTypeResize(event: PointerEvent, actionMode?: string): void;
+    _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode?: string): void;
     dispose(): void;
 }

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

@@ -5,6 +5,7 @@ export class ResizeExtension extends AbstractExtension {
     _initialSizes;
     _actionModeStarted;
     _initialPoint;
+    _offsetPoint;
     _circle1;
     _circle2;
     _circle3;
@@ -21,14 +22,14 @@ export class ResizeExtension extends AbstractExtension {
     }
     refresh() {
         const rect = this.extendedItem.element.getBoundingClientRect();
-        this._circle1 = this._drawResizerOverlay(rect.x - this.designerCanvas.containerBoundingRect.x, rect.y - this.designerCanvas.containerBoundingRect.y, 'nw-resize', this._circle1);
-        this._circle2 = this._drawResizerOverlay(rect.x + (rect.width / 2) - this.designerCanvas.containerBoundingRect.x, rect.y - this.designerCanvas.containerBoundingRect.y, 'n-resize', this._circle2);
-        this._circle3 = this._drawResizerOverlay(rect.x + rect.width - this.designerCanvas.containerBoundingRect.x, rect.y - this.designerCanvas.containerBoundingRect.y, 'ne-resize', this._circle3);
-        this._circle4 = this._drawResizerOverlay(rect.x - this.designerCanvas.containerBoundingRect.x, rect.y + rect.height - this.designerCanvas.containerBoundingRect.y, 'sw-resize', this._circle4);
-        this._circle5 = this._drawResizerOverlay(rect.x + (rect.width / 2) - this.designerCanvas.containerBoundingRect.x, rect.y + rect.height - this.designerCanvas.containerBoundingRect.y, 's-resize', this._circle5);
-        this._circle6 = this._drawResizerOverlay(rect.x + rect.width - this.designerCanvas.containerBoundingRect.x, rect.y + rect.height - this.designerCanvas.containerBoundingRect.y, 'se-resize', this._circle6);
-        this._circle7 = this._drawResizerOverlay(rect.x - this.designerCanvas.containerBoundingRect.x, rect.y + (rect.height / 2) - this.designerCanvas.containerBoundingRect.y, 'w-resize', this._circle7);
-        this._circle8 = this._drawResizerOverlay(rect.x + rect.width - this.designerCanvas.containerBoundingRect.x, rect.y + (rect.height / 2) - this.designerCanvas.containerBoundingRect.y, 'e-resize', this._circle8);
+        this._circle1 = this._drawResizerOverlay((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor, 'nw-resize', this._circle1);
+        this._circle2 = this._drawResizerOverlay((rect.x + (rect.width / 2) - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor, 'n-resize', this._circle2);
+        this._circle3 = this._drawResizerOverlay((rect.x + rect.width - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor, 'ne-resize', this._circle3);
+        this._circle4 = this._drawResizerOverlay((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (rect.y + rect.height - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor, 'sw-resize', this._circle4);
+        this._circle5 = this._drawResizerOverlay((rect.x + (rect.width / 2) - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (rect.y + rect.height - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor, 's-resize', this._circle5);
+        this._circle6 = this._drawResizerOverlay((rect.x + rect.width - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (rect.y + rect.height - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor, 'se-resize', this._circle6);
+        this._circle7 = this._drawResizerOverlay((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (rect.y + (rect.height / 2) - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor, 'w-resize', this._circle7);
+        this._circle8 = this._drawResizerOverlay((rect.x + rect.width - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (rect.y + (rect.height / 2) - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor, 'e-resize', this._circle8);
         if (rect.width < 12) {
             this._circle2.style.display = 'none';
             this._circle5.style.display = 'none';
@@ -49,25 +50,28 @@ export class ResizeExtension extends AbstractExtension {
     _drawResizerOverlay(x, y, cursor, oldCircle) {
         let circle = this._drawCircle(x, y, 3, 'svg-primary-resizer', oldCircle);
         if (!oldCircle) {
-            circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, cursor));
-            circle.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, cursor));
-            circle.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(event, cursor));
+            circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(circle, event, cursor));
+            circle.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(circle, event, cursor));
+            circle.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeResize(circle, event, cursor));
         }
         circle.setAttribute('style', 'cursor: ' + cursor);
         return circle;
     }
-    _pointerActionTypeResize(event, actionMode = 'se-resize') {
+    _pointerActionTypeResize(circle, event, actionMode = 'se-resize') {
         event.stopPropagation();
         const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event); //, this.extendedItem.element, event.type === 'pointerdown' ? null : this._initialPoint);
         switch (event.type) {
             case EventNames.PointerDown:
+                const cx = parseFloat(circle.getAttribute('cx'));
+                const cy = parseFloat(circle.getAttribute('cy'));
+                this._offsetPoint = { x: cx - currentPoint.x, y: cy - currentPoint.y };
                 event.target.setPointerCapture(event.pointerId);
                 this._initialPoint = currentPoint;
                 this._initialSizes = [];
                 this._actionModeStarted = actionMode;
                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                     let rect = designItem.element.getBoundingClientRect();
-                    this._initialSizes.push({ width: rect.width, height: rect.height });
+                    this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
                 }
                 if (this.designerCanvas.alignOnSnap)
                     this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
@@ -77,8 +81,8 @@ export class ResizeExtension extends AbstractExtension {
                     const containerStyle = getComputedStyle(this.extendedItem.parent.element);
                     const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent, containerStyle));
                     const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                    let trackX = diff.x - this._initialPoint.x;
-                    let trackY = diff.y - this._initialPoint.y;
+                    let trackX = diff.x - this._initialPoint.x - this._offsetPoint.x;
+                    let trackY = diff.y - this._initialPoint.y - this._offsetPoint.y;
                     let i = 0;
                     switch (this._actionModeStarted) {
                         case 'se-resize':

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

@@ -26,7 +26,7 @@ export class RotateExtension extends AbstractExtension {
         g.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeRotate(event));
         g.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeRotate(event));
         g.setAttribute('class', 'svg-primary-rotate');
-        g.setAttribute('transform', 'translate(' + (itemRect.x - this.designerCanvas.containerBoundingRect.x - 13) + ',' + (itemRect.y - this.designerCanvas.containerBoundingRect.y - 8.5) + ')');
+        g.setAttribute('transform', 'translate(' + ((itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor - 13) + ',' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 8.5) + ')');
         this.overlayLayerView.addOverlay(g);
         this.overlays.push(g);
     }

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

@@ -14,7 +14,7 @@ export class SelectionDefaultExtension extends AbstractExtension {
         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._rect = this._drawRect(itemRect.x - this.designerCanvas.containerBoundingRect.x - left, itemRect.y - this.designerCanvas.containerBoundingRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-selection', this._rect);
+        this._rect = this._drawRect((itemRect.x - this.designerCanvas.containerBoundingRect.x - left) / this.designerCanvas.scaleFactor, (itemRect.y - this.designerCanvas.containerBoundingRect.y - top) / this.designerCanvas.scaleFactor, (left + itemRect.width + right) / this.designerCanvas.scaleFactor, (top + itemRect.height + bottom) / this.designerCanvas.scaleFactor, 'svg-selection', this._rect);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -11,9 +11,9 @@ export class TransformOriginExtension extends AbstractExtension {
         const rect = this.extendedItem.element.getBoundingClientRect();
         const computed = getComputedStyle(this.extendedItem.element);
         const to = computed.transformOrigin.split(' ');
-        this._circle = this._drawCircle(rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')), rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')), 5, 'svg-transform-origin');
+        this._circle = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 5, 'svg-transform-origin');
         this._circle.setAttribute('style', 'cursor: pointer');
-        this._circle2 = this._drawCircle(rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')), rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')), 1, 'svg-transform-origin');
+        this._circle2 = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 1, 'svg-transform-origin');
         this._circle2.setAttribute('style', 'pointer-events: none');
         this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));

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

@@ -15,6 +15,7 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
     removeAllNodesWithClass(className: string): void;
+    removeAllOverlays(): void;
     createPoint(): DOMPointInit;
     elementFromPoint(x: number, y: number): Element;
     drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;

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

@@ -80,6 +80,12 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             e.parentNode.removeChild(e);
         }
     }
+    removeAllOverlays() {
+        const nodes = this._svg.querySelectorAll('svg > g > *');
+        for (const e of nodes) {
+            e.parentNode.removeChild(e);
+        }
+    }
     createPoint() {
         //@ts-ignore
         return this._svg.createSVGPoint();

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

@@ -0,0 +1,13 @@
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+export declare class DrawEllipsisTool implements ITool {
+    readonly cursor = "crosshair";
+    private _path;
+    private _startPoint;
+    private _radius;
+    constructor();
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+}

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

@@ -0,0 +1,72 @@
+import { EventNames } from '../../../../enums/EventNames';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+import { calculateNormLegth } from '../../../helper/PathDataPolyfill';
+import { DesignItem } from '../../../item/DesignItem';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
+export class DrawEllipsisTool {
+    cursor = 'crosshair';
+    _path;
+    _startPoint;
+    _radius;
+    constructor() {
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        const offset = 50;
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._startPoint = currentPoint;
+                event.target.setPointerCapture(event.pointerId);
+                this._path = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+                this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
+                this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
+                this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
+                this._path.setAttribute("cx", currentPoint.x.toString());
+                this._path.setAttribute("cy", currentPoint.y.toString());
+                this._path.setAttribute("rx", "0");
+                this._path.setAttribute("ry", "0");
+                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._path) {
+                    this._radius = { x: Math.abs(currentPoint.x - this._startPoint.x), y: Math.abs(currentPoint.y - this._startPoint.y) };
+                    this._path.setAttribute("cx", this._startPoint.x.toString());
+                    this._path.setAttribute("cy", this._startPoint.y.toString());
+                    if (event.shiftKey) {
+                        const radius = calculateNormLegth(this._startPoint, currentPoint);
+                        this._path.setAttribute("rx", radius.toString());
+                        this._path.setAttribute("ry", radius.toString());
+                    }
+                    else {
+                        this._path.setAttribute("rx", this._radius.x.toString());
+                        this._path.setAttribute("ry", this._radius.y.toString());
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                const rect = this._path.getBoundingClientRect();
+                designerCanvas.overlayLayer.removeOverlay(this._path);
+                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
+                const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
+                svg.appendChild(this._path);
+                this._path.setAttribute("cx", (this._startPoint.x - mvX).toString());
+                this._path.setAttribute("cy", (this._startPoint.y - mvY).toString());
+                svg.style.left = (mvX) + 'px';
+                svg.style.top = (mvY) + 'px';
+                svg.style.position = 'absolute';
+                svg.style.width = (rect.width + 2 * offset) + 'px';
+                svg.style.height = (rect.height + 2 * offset) + 'px';
+                this._path = null;
+                const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                break;
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+export declare class DrawLineTool implements ITool {
+    readonly cursor = "crosshair";
+    private _path;
+    private _startPoint;
+    private _endPoint;
+    constructor();
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+}

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

@@ -0,0 +1,75 @@
+import { EventNames } from '../../../../enums/EventNames';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+import { straightenLine } from '../../../helper/PathDataPolyfill';
+import { DesignItem } from '../../../item/DesignItem';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
+export class DrawLineTool {
+    cursor = 'crosshair';
+    _path;
+    _startPoint;
+    _endPoint;
+    constructor() {
+    }
+    activated(serviceContainer) {
+    }
+    dispose() {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        const offset = 50;
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._startPoint = currentPoint;
+                event.target.setPointerCapture(event.pointerId);
+                this._path = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                // this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
+                // this._path.setAttribute("d", this._pathD);
+                this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
+                this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
+                this._path.setAttribute("x1", currentPoint.x.toString());
+                this._path.setAttribute("y1", currentPoint.y.toString());
+                this._path.setAttribute("x2", currentPoint.x.toString());
+                this._path.setAttribute("y2", currentPoint.y.toString());
+                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._path) {
+                    if (event.shiftKey) {
+                        let straightLine = straightenLine(this._startPoint, currentPoint);
+                        this._path.setAttribute("x2", straightLine.x.toString());
+                        this._path.setAttribute("y2", straightLine.y.toString());
+                        this._endPoint = straightLine;
+                    }
+                    else {
+                        //this._path.setAttribute("d", this._pathD + "L" + currentPoint.x + " " + currentPoint.y);
+                        this._path.setAttribute("x2", currentPoint.x.toString());
+                        this._path.setAttribute("y2", currentPoint.y.toString());
+                        this._endPoint = currentPoint;
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                const rect = this._path.getBoundingClientRect();
+                designerCanvas.overlayLayer.removeOverlay(this._path);
+                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
+                const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
+                this._path.setAttribute("x1", (this._startPoint.x - mvX).toString());
+                this._path.setAttribute("y1", (this._startPoint.y - mvY).toString());
+                this._path.setAttribute("x2", (this._endPoint.x - mvX).toString());
+                this._path.setAttribute("y2", (this._endPoint.y - mvY).toString());
+                svg.appendChild(this._path);
+                svg.style.left = (mvX) + 'px';
+                svg.style.top = (mvY) + 'px';
+                svg.style.position = 'absolute';
+                svg.style.width = (rect.width + 2 * offset) + 'px';
+                svg.style.height = (rect.height + 2 * offset) + 'px';
+                this._path = null;
+                const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                break;
+        }
+    }
+}

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

@@ -1,7 +1,6 @@
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IPoint } from '../../../..';
 export declare class DrawPathTool implements ITool {
     readonly cursor = "crosshair";
     private _pathD;
@@ -17,5 +16,4 @@ export declare class DrawPathTool implements ITool {
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    straightenLine(p1: IPoint, p2: IPoint): IPoint;
 }

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

@@ -1,5 +1,5 @@
 import { EventNames } from '../../../../enums/EventNames';
-import { movePathData } from '../../../helper/PathDataPolyfill';
+import { moveSVGPath, straightenLine } from '../../../helper/PathDataPolyfill';
 import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
 import { DesignItem } from '../../../item/DesignItem';
 import { OverlayLayer } from '../extensions/OverlayLayer.js';
@@ -30,7 +30,7 @@ export class DrawPathTool {
                     event.target.setPointerCapture(event.pointerId);
                     this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                     this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
-                    this._path.setAttribute("D", this._pathD);
+                    this._path.setAttribute("d", this._pathD);
                     this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
                     this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
                     this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
@@ -56,7 +56,7 @@ export class DrawPathTool {
                     if (this._path) {
                         let straightLine = currentPoint;
                         if (event.shiftKey)
-                            straightLine = this.straightenLine(this._savedPoint, currentPoint);
+                            straightLine = straightenLine(this._savedPoint, currentPoint);
                         this._path.setAttribute("d", this._pathD + "L" + straightLine.x + " " + straightLine.y);
                     }
                 }
@@ -69,7 +69,7 @@ export class DrawPathTool {
                 if (this._p2pMode && !this._samePoint) {
                     if (this._path) {
                         if (event.shiftKey) {
-                            let straightLine = this.straightenLine(this._savedPoint, currentPoint);
+                            let straightLine = straightenLine(this._savedPoint, currentPoint);
                             this._pathD += "L" + straightLine.x + " " + straightLine.y;
                             this._path.setAttribute("d", this._pathD);
                         }
@@ -91,7 +91,7 @@ export class DrawPathTool {
                     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                     const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
                     const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
-                    const d = movePathData(this._path, mvX, mvY);
+                    const d = moveSVGPath(this._path, mvX, mvY);
                     this._path.setAttribute("d", d);
                     svg.appendChild(this._path);
                     svg.style.left = (mvX) + 'px';
@@ -110,17 +110,4 @@ export class DrawPathTool {
                 break;
         }
     }
-    straightenLine(p1, p2) {
-        let newP = { x: 0, y: 0 };
-        let alpha = -1 * Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
-        if (alpha < 0)
-            alpha += 360;
-        if (alpha > 0 && alpha < 45 || alpha > 315 && alpha < 360 || alpha > 135 && alpha < 225) // right or left
-            newP = { x: p2.x, y: p1.y };
-        else if (alpha > 45 && alpha < 135 || alpha > 225 && alpha < 315) // up or down
-            newP = { x: p1.x, y: p2.y };
-        else // something else
-            newP = { x: p2.x, y: p2.y };
-        return newP;
-    }
 }

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

@@ -0,0 +1,18 @@
+import { IDesignerCanvas } from '../IDesignerCanvas';
+import { ITool } from './ITool';
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+export declare class DrawRectTool implements ITool {
+    readonly cursor = "crosshair";
+    private _path;
+    private _startPoint;
+    private _minX;
+    private _minY;
+    private _maxX;
+    private _maxY;
+    private _px;
+    private _py;
+    constructor();
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+}