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

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

@@ -34,7 +34,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     overlayLayer;
     rootDesignItem;
     eatEvents;
-    _zoomFactor = 1;
+    _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
+    _scaleFactor = 1; //if scale css property is used this need to be the scale value
+    _canvasOffset = { x: 0, y: 0 };
     get zoomFactor() {
         return this._zoomFactor;
     }
@@ -42,6 +44,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._zoomFactor = value;
         this.zoomFactorChanged();
     }
+    get scaleFactor() {
+        return this._scaleFactor;
+    }
+    get canvasOffset() {
+        return this._canvasOffset;
+    }
+    set canvasOffset(value) {
+        this._canvasOffset = value;
+        this.zoomFactorChanged();
+    }
     onContentChanged = new TypedEvent();
     // Private Variables
     _canvas;
@@ -91,23 +103,27 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       pointer-events: none;
       overflow: visible;
       user-select: none;
+      -webkit-user-select: none;
       z-index: 999999999999;
     }
     
     #node-projects-designer-canvas-canvas * {
       cursor: pointer;
       user-select: none;
+      -webkit-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="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
-              </div>
-            </div>
+    <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;">
+          <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="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
           </div>
-        </div>`;
+        </div>
+      </div>
+    </div>`;
     extensionManager;
     _pointerextensions;
     _onDblClickBound;
@@ -321,12 +337,18 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     zoomFactorChanged() {
-        //@ts-ignore
-        this._canvasContainer.style.zoom = this._zoomFactor;
-        //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+')';
+        //a@ts-ignore
+        //this._canvasContainer.style.zoom = <any>this._zoomFactor;
+        //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+') translate(' + this._translate.x + ', '+this._translate.y+')';
         //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._updateTransform();
+    }
+    _updateTransform() {
+        this._scaleFactor = this._zoomFactor;
+        this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + this._canvasOffset.x + 'px, ' + this._canvasOffset.y + 'px)';
+        this._canvasContainer.style.transformOrigin = '0 0';
         this.snapLines.clearSnaplines();
     }
     setDesignItems(designItems) {
@@ -405,11 +427,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     _onContextMenu(event) {
         event.preventDefault();
-        const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
-        if (!this.instanceServiceContainer.selectionService.isSelected(designItem)) {
-            this.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+        if (!event.shiftKey) {
+            const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
+            if (!this.instanceServiceContainer.selectionService.isSelected(designItem)) {
+                this.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+            }
+            this.showDesignItemContextMenu(designItem, event);
         }
-        this.showDesignItemContextMenu(designItem, event);
     }
     showDesignItemContextMenu(designItem, event) {
         const mnuItems = [];
@@ -496,12 +520,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     getNormalizedEventCoordinates(event) {
         const offsetOfOuterX = (event.clientX - this.outerRect.x) / this.zoomFactor;
-        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x / this.zoomFactor;
+        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x / this.zoomFactor * this._scaleFactor;
         const offsetOfOuterY = (event.clientY - this.outerRect.y) / this.zoomFactor;
-        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y / this.zoomFactor;
+        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y / this.zoomFactor * this._scaleFactor;
         return {
-            x: offsetOfOuterX - offsetOfCanvasX,
-            y: offsetOfOuterY - offsetOfCanvasY
+            x: offsetOfOuterX - offsetOfCanvasX + offsetOfCanvasX - offsetOfCanvasX / this.zoomFactor,
+            y: offsetOfOuterY - offsetOfCanvasY + offsetOfCanvasY - offsetOfCanvasY / this.zoomFactor
         };
     }
     getNormalizedElementCoordinates(element) {
@@ -567,7 +591,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
-        if (event.button == 2)
+        if (event.buttons == 2)
             return;
         let currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
         if (currentElement === this._outercanvas2 || currentElement === this.overlayLayer || !currentElement) {

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;
@@ -86,23 +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>`;
+    <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');
@@ -133,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));

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/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;
 }