@node-projects/web-component-designer 0.0.237 → 0.0.239

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

@@ -2,7 +2,7 @@ import { EventNames } from '../../../enums/EventNames.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 import { DesignItem } from '../../item/DesignItem.js';
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
-import { dragDropFormatNameElementDefinition, dragDropFormatNameBindingObject } from '../../../Constants.js';
+import { dragDropFormatNameBindingObject } from '../../../Constants.js';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction.js';
 import { Snaplines } from './Snaplines.js';
 import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction.js';
@@ -677,7 +677,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         this.snapLines.clearSnaplines();
     }
-    _dragOverExtensionItem;
     _onDragEnter(event) {
         this._fillCalculationrects();
         event.preventDefault();
@@ -698,15 +697,19 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         else {
             this._lastDdElement = null;
+            const dragDropService = this.serviceContainer.dragDropService;
+            if (dragDropService) {
+                dragDropService.dragEnter(this, event);
+            }
         }
     }
     _onDragLeave(event) {
         this._fillCalculationrects();
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
-        if (this._dragOverExtensionItem) {
-            this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
-            this._dragOverExtensionItem = null;
+        const dragDropService = this.serviceContainer.dragDropService;
+        if (dragDropService) {
+            dragDropService.dragLeave(this, event);
         }
     }
     _lastDdElement = null;
@@ -721,7 +724,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }*/
         this._fillCalculationrects();
         if (event.dataTransfer.types.length > 0 && event.dataTransfer.types[0] == 'Files') {
-            const ddService = this.serviceContainer.dragDropService;
+            const ddService = this.serviceContainer.externalDragDropService;
             if (ddService) {
                 const effect = ddService.dragOver(event);
                 event.dataTransfer.dropEffect = effect;
@@ -732,63 +735,26 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         else {
             const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
             if (hasTransferDataBindingObject) {
-                const ddService = this.serviceContainer.bindableObjectDragDropService;
-                if (ddService) {
+                const bindableDdService = this.serviceContainer.bindableObjectDragDropService;
+                if (bindableDdService) {
                     const el = this.getElementAtPoint({ x: event.x, y: event.y });
                     if (this._lastDdElement != el) {
-                        ddService.dragLeave(this, event, this._lastDdElement);
-                        ddService.dragEnter(this, event, el);
+                        bindableDdService.dragLeave(this, event, this._lastDdElement);
+                        bindableDdService.dragEnter(this, event, el);
                         this._lastDdElement = el;
                     }
-                    const effect = ddService.dragOver(this, event, el);
+                    const effect = bindableDdService.dragOver(this, event, el);
                     event.dataTransfer.dropEffect = effect;
                 }
             }
             else {
-                let [newContainer] = this._getPossibleContainerForDrop(event);
-                if (this._dragOverExtensionItem != newContainer) {
-                    this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
-                    this.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
-                    this._dragOverExtensionItem = newContainer;
-                }
-                else {
-                    this.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+                const dragDropService = this.serviceContainer.dragDropService;
+                if (dragDropService) {
+                    dragDropService.dragOver(this, event);
                 }
             }
         }
     }
-    _getPossibleContainerForDrop(event) {
-        let newContainerElementDesignItem = null;
-        let newContainerService = null;
-        const elementsFromPoint = this.elementsFromPoint(event.x, event.y);
-        for (let e of elementsFromPoint) {
-            if (e == this.rootDesignItem.element) {
-                newContainerElementDesignItem = this.rootDesignItem;
-                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                break;
-            }
-            else if (false) {
-                //check we don't try to move a item over one of its children..
-            }
-            else {
-                newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, this.serviceContainer, this.instanceServiceContainer);
-                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                if (newContainerService) {
-                    if (newContainerService.canEnterByDrop(newContainerElementDesignItem)) {
-                        break;
-                    }
-                    else {
-                        newContainerElementDesignItem = null;
-                        newContainerService = null;
-                        continue;
-                    }
-                }
-            }
-        }
-        return [newContainerElementDesignItem, newContainerService];
-    }
     async _onDrop(event) {
         this.serviceContainer.globalContext.tool = this.serviceContainer.designerTools.get(NamedTools.Pointer);
         this._lastDdElement = null;
@@ -796,7 +762,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvas.classList.remove('dragFileActive');
         this._fillCalculationrects();
         if (event.dataTransfer.files?.length > 0) {
-            const ddService = this.serviceContainer.dragDropService;
+            const ddService = this.serviceContainer.externalDragDropService;
             if (ddService) {
                 ddService.drop(this, event);
             }
@@ -813,32 +779,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 }
             }
             else {
-                if (this._dragOverExtensionItem) {
-                    this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
-                    this._dragOverExtensionItem = null;
+                const dragDropService = this.serviceContainer.dragDropService;
+                if (dragDropService) {
+                    this._fillCalculationrects();
+                    dragDropService.drop(this, event);
                 }
-                let [newContainer] = this._getPossibleContainerForDrop(event);
-                if (!newContainer)
-                    newContainer = this.rootDesignItem;
-                this._fillCalculationrects();
-                //TODO : we need to use container service for adding to element, so also grid and flexbox work correct
-                const transferData = event.dataTransfer.getData(dragDropFormatNameElementDefinition);
-                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 of <" + di.name + ">");
-                di.setStyle('position', 'absolute');
-                const containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
-                containerService.enterContainer(newContainer, [di]);
-                const containerPos = this.getNormalizedElementCoordinates(newContainer.element);
-                const evCoord = this.getNormalizedEventCoordinates(event);
-                const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };
-                containerService.place(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
-                containerService.finishPlace(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
-                this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
-                requestAnimationFrame(() => {
-                    this.instanceServiceContainer.selectionService.setSelectedElements([di]);
-                    grp.commit();
-                });
             }
         }
     }
@@ -920,28 +865,24 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 case 'Backspace':
                     this.executeCommand({ type: CommandType.delete, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
                     break;
-                case 'ArrowUp':
-                    {
-                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('top', parseInt(x.element.style.top) - moveOffset + 'px'));
-                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
-                    }
-                    break;
                 case 'ArrowDown':
-                    {
-                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('top', parseInt(x.element.style.top) + moveOffset + 'px'));
-                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
-                    }
-                    break;
+                case 'ArrowUp':
                 case 'ArrowLeft':
-                    {
-                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('left', parseInt(x.element.style.left) - moveOffset + 'px'));
-                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
-                    }
-                    break;
                 case 'ArrowRight':
                     {
-                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('left', parseInt(x.element.style.left) + moveOffset + 'px'));
-                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
+                        let offset = { x: 0, y: 0 };
+                        if (event.key == 'ArrowDown')
+                            offset.y = moveOffset;
+                        if (event.key == 'ArrowUp')
+                            offset.y = -moveOffset;
+                        if (event.key == 'ArrowRight')
+                            offset.x = moveOffset;
+                        if (event.key == 'ArrowLeft')
+                            offset.x = -moveOffset;
+                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => {
+                            const containerStyle = getComputedStyle(x.parent.element);
+                            x.serviceContainer.getLastServiceWhere('containerService', y => y.serviceForContainer(x.parent, containerStyle)).moveElements([x], offset, false);
+                        });
                     }
                     break;
             }

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

@@ -0,0 +1,15 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class MultipleSelectionRectExtension extends AbstractExtension {
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
+    private _designerView;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,34 @@
+import { calculateOuterRect } from '../../../helper/ElementHelper.js';
+import { filterChildPlaceItems } from '../../../helper/LayoutHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from './OverlayLayer.js';
+export class MultipleSelectionRectExtension extends AbstractExtension {
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    _designerView;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this._designerView = designerView;
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let selection = this._designerView.instanceServiceContainer.selectionService.selectedElements;
+        selection = filterChildPlaceItems(selection);
+        let rect = calculateOuterRect(selection, this._designerView);
+        this._line1 = this._drawLine(rect.x, rect.y, rect.x + rect.width, rect.y, 'svg-multiple-rect-selection', this._line1, OverlayLayer.Background);
+        this._line2 = this._drawLine(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + rect.height, 'svg-multiple-rect-selection', this._line2, OverlayLayer.Background);
+        this._line3 = this._drawLine(rect.x + rect.width, rect.y + rect.height, rect.x, rect.y + rect.height, 'svg-multiple-rect-selection', this._line3, OverlayLayer.Background);
+        this._line4 = this._drawLine(rect.x, rect.y + rect.height, rect.x, rect.y, 'svg-multiple-rect-selection', this._line4, OverlayLayer.Background);
+        this._line1.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        this._line2.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        this._line3.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        this._line4.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class MultipleSelectionRectExtensionProvider 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/MultipleSelectionRectExtensionProvider.js

@@ -0,0 +1,13 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { MultipleSelectionRectExtension as MultipleSelectionRectExtension } from './MultipleSelectionRectExtension.js';
+export class MultipleSelectionRectExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new MultipleSelectionRectExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-multiple-rect-selection { stroke: #909090; stroke-dasharray: 3; fill: transparent; stroke-width: 2; /*pointer-events: all;*/ }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.d.ts

@@ -20,6 +20,8 @@ export declare class EllipsisExtension extends AbstractExtension {
     private _circle2;
     private _circle3;
     private _circle4;
+    private _startScrollOffset;
+    private _deltaScrollOffset;
     private _parentCoordinates;
     private _offsetSvg;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.js

@@ -17,6 +17,8 @@ export class EllipsisExtension extends AbstractExtension {
     _circle2;
     _circle3;
     _circle4;
+    _startScrollOffset;
+    _deltaScrollOffset;
     _parentCoordinates;
     _offsetSvg = 10.0;
     constructor(extensionManager, designerView, extendedItem) {
@@ -25,6 +27,7 @@ export class EllipsisExtension extends AbstractExtension {
     extend() {
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
         this._ellipseElement = this.extendedItem.node;
+        this._startScrollOffset = this.designerCanvas.canvasOffset;
         this._cx = this._ellipseElement.cx.baseVal.value;
         this._cy = this._ellipseElement.cy.baseVal.value;
         this._rx = this._ellipseElement.rx.baseVal.value;
@@ -47,6 +50,10 @@ export class EllipsisExtension extends AbstractExtension {
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
+                    this._deltaScrollOffset = {
+                        x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
+                        y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
+                    };
                     this._lastPos = { x: this._startPos.x, y: this._startPos.y };
                     const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
                     const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
@@ -88,8 +95,10 @@ export class EllipsisExtension extends AbstractExtension {
                 this._startPos = null;
                 this._circlePos = null;
                 this._originalPoint = null;
-                this.extendedItem.setAttribute("rx", this._newRx.toString());
-                this.extendedItem.setAttribute("ry", this._newRy.toString());
+                if (this._newRx && this._newRy) {
+                    this.extendedItem.setAttribute("rx", this._newRx.toString());
+                    this.extendedItem.setAttribute("ry", this._newRy.toString());
+                }
                 if (getComputedStyle(this._ellipseElement.parentElement).position == "absolute") {
                     let group = this.extendedItem.openGroup('rearrangeSvg');
                     let newEllipseCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._ellipseElement);
@@ -111,7 +120,7 @@ export class EllipsisExtension extends AbstractExtension {
         return circle;
     }
     _redrawPathCircle(x, y, oldCircle) {
-        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
+        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x - this._deltaScrollOffset.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y - this._deltaScrollOffset.y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
         circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         return circle;
     }
@@ -154,8 +163,8 @@ export class EllipsisExtension extends AbstractExtension {
         let heightEllipseElement = newEllipseExtrema.yMax - newEllipseExtrema.yMin + (2 * this._offsetSvg);
         this.extendedItem.parent.setStyle("left", parentLeft.toString() + "px");
         this.extendedItem.parent.setStyle("top", parentTop.toString() + "px");
-        this.extendedItem.parent.setStyle("height", heightEllipseElement.toString() + "px");
-        this.extendedItem.parent.setStyle("width", widthEllipseElement.toString() + "px");
+        this.extendedItem.parent.setStyle("height", Math.round(heightEllipseElement).toString() + "px");
+        this.extendedItem.parent.setStyle("width", Math.round(widthEllipseElement).toString() + "px");
     }
     _rearrangePointsFromElement(oldParentCoords) {
         let newParentCoords = this.designerCanvas.getNormalizedElementCoordinates(this._ellipseElement.parentElement);

package/dist/elements/widgets/designerView/extensions/svg/LineExtension.js

@@ -125,8 +125,8 @@ export class LineExtension extends AbstractExtension {
         let heightLineElement = newLineExtrema.yMax - newLineExtrema.yMin + (2 * this._offsetSvg);
         this.extendedItem.parent.setStyle("left", parentLeft.toString() + "px");
         this.extendedItem.parent.setStyle("top", parentTop.toString() + "px");
-        this.extendedItem.parent.setStyle("height", heightLineElement.toString() + "px");
-        this.extendedItem.parent.setStyle("width", widthLineElement.toString() + "px");
+        this.extendedItem.parent.setStyle("height", Math.round(heightLineElement).toString() + "px");
+        this.extendedItem.parent.setStyle("width", Math.round(widthLineElement).toString() + "px");
     }
     _rearrangePointsFromElement(oldParentCoords) {
         let newParentCoords = this.designerCanvas.getNormalizedElementCoordinates(this._lineElement.parentElement);

package/dist/elements/widgets/designerView/extensions/svg/PathExtension.d.ts

@@ -16,6 +16,8 @@ export declare class PathExtension extends AbstractExtension {
     private _offsetSvg;
     private _pathElement;
     private _parentCoordinates;
+    private _startScrollOffset;
+    private _deltaScrollOffset;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, p: PathData, index: number): void;

package/dist/elements/widgets/designerView/extensions/svg/PathExtension.js

@@ -13,6 +13,8 @@ export class PathExtension extends AbstractExtension {
     _offsetSvg = 10.0;
     _pathElement;
     _parentCoordinates;
+    _startScrollOffset;
+    _deltaScrollOffset;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -21,6 +23,9 @@ export class PathExtension extends AbstractExtension {
         this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
         this._pathElement = this.extendedItem.node;
         this._lastPos = { x: 0, y: 0 };
+        this._startScrollOffset = this.designerCanvas.canvasOffset;
+        if (!this._deltaScrollOffset)
+            this._deltaScrollOffset = { x: 0, y: 0 };
         for (let p of this._pathdata) {
             switch (p.type) {
                 case 'M':
@@ -119,6 +124,10 @@ export class PathExtension extends AbstractExtension {
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
+                    this._deltaScrollOffset = {
+                        x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
+                        y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
+                    };
                     this._lastPos = { x: this._startPos.x, y: this._startPos.y };
                     const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
                     const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
@@ -293,17 +302,17 @@ export class PathExtension extends AbstractExtension {
         let newElementCoords = this.extendedItem.element.getBoundingClientRect();
         let parentLeft = (newElementCoords.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor - this._offsetSvg;
         let parentTop = (newElementCoords.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - this._offsetSvg;
-        let heightSvgElement = newElementCoords.height + (2 * this._offsetSvg);
-        let widthSvgElement = newElementCoords.width + (2 * this._offsetSvg);
+        let heightSvgElement = newElementCoords.height / this.designerCanvas.scaleFactor + (2 * this._offsetSvg);
+        let widthSvgElement = newElementCoords.width / this.designerCanvas.scaleFactor + (2 * this._offsetSvg);
         this.extendedItem.element.parentElement.style.setProperty("left", parentLeft.toString() + "px");
         this.extendedItem.element.parentElement.style.setProperty("top", parentTop.toString() + "px");
-        this.extendedItem.element.parentElement.style.setProperty("height", heightSvgElement.toString() + "px");
-        this.extendedItem.element.parentElement.style.setProperty("width", widthSvgElement.toString() + "px");
+        this.extendedItem.element.parentElement.style.setProperty("height", Math.round(heightSvgElement).toString() + "px");
+        this.extendedItem.element.parentElement.style.setProperty("width", Math.round(widthSvgElement).toString() + "px");
     }
     _rearrangePointsFromElement(oldParentCoords, pathData) {
         let newParentCoords = this.extendedItem.element.parentElement.getBoundingClientRect();
-        let diffX = oldParentCoords.x - newParentCoords.x;
-        let diffY = oldParentCoords.y - newParentCoords.y;
+        let diffX = (oldParentCoords.x - newParentCoords.x) / this.designerCanvas.scaleFactor - this._deltaScrollOffset.x;
+        let diffY = (oldParentCoords.y - newParentCoords.y) / this.designerCanvas.scaleFactor - this._deltaScrollOffset.y;
         for (let i = 0; i < pathData.length; i++) {
             pathData[i].values[0] = pathData[i].values[0] + diffX;
             pathData[i].values[1] = pathData[i].values[1] + diffY;

package/dist/elements/widgets/designerView/extensions/svg/RectExtension.d.ts

@@ -18,9 +18,12 @@ export declare class RectExtension extends AbstractExtension {
     private _circle2;
     private _circle3;
     private _circle4;
+    private _startScrollOffset;
+    private _deltaScrollOffset;
     private _rect;
     private _parentCoordinates;
     private _offsetSvg;
+    private _circleMoved;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     pointerEvent(event: PointerEvent, circle: SVGCircleElement, r: SVGRectElement, index: number): void;

package/dist/elements/widgets/designerView/extensions/svg/RectExtension.js

@@ -15,15 +15,19 @@ export class RectExtension extends AbstractExtension {
     _circle2;
     _circle3;
     _circle4;
+    _startScrollOffset;
+    _deltaScrollOffset;
     _rect = { x: 0, y: 0, w: 0, h: 0 };
     _parentCoordinates;
     _offsetSvg = 10.0;
+    _circleMoved;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
         this._rectElement = this.extendedItem.node;
+        this._startScrollOffset = this.designerCanvas.canvasOffset;
         this._x = this._rectElement.x.baseVal.value;
         this._y = this._rectElement.y.baseVal.value;
         this._w = this._rectElement.width.baseVal.value;
@@ -46,11 +50,17 @@ export class RectExtension extends AbstractExtension {
                 break;
             case EventNames.PointerMove:
                 if (this._startPos && event.buttons > 0) {
+                    this._deltaScrollOffset = {
+                        x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
+                        y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
+                    };
                     this._lastPos = { x: this._startPos.x, y: this._startPos.y };
                     const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
                     const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
                     let dx = cx - this._circlePos.x;
                     let dy = cy - this._circlePos.y;
+                    if (dx != 0 || dy != 0)
+                        this._circleMoved = true;
                     if (event.shiftKey) {
                         if (Math.abs(dx) < Math.abs(dy)) {
                             dx = 0;
@@ -91,10 +101,12 @@ export class RectExtension extends AbstractExtension {
                 this._startPos = null;
                 this._circlePos = null;
                 this._originalPoint = null;
-                this.extendedItem.setAttribute("x", this._rect.x.toString());
-                this.extendedItem.setAttribute("y", this._rect.y.toString());
-                this.extendedItem.setAttribute("width", this._rect.w.toString());
-                this.extendedItem.setAttribute("height", this._rect.h.toString());
+                if (this._circleMoved) {
+                    this.extendedItem.setAttribute("x", this._rect.x.toString());
+                    this.extendedItem.setAttribute("y", this._rect.y.toString());
+                    this.extendedItem.setAttribute("width", this._rect.w.toString());
+                    this.extendedItem.setAttribute("height", this._rect.h.toString());
+                }
                 if (getComputedStyle(this._rectElement.parentElement).position == "absolute") {
                     let group = this.extendedItem.openGroup('rearrangeSvg');
                     let newRectCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement);
@@ -116,7 +128,7 @@ export class RectExtension extends AbstractExtension {
         return circle;
     }
     _redrawPathCircle(x, y, oldCircle) {
-        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
+        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x - this._deltaScrollOffset.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y - this._deltaScrollOffset.y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
         circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
         return circle;
     }
@@ -179,8 +191,8 @@ export class RectExtension extends AbstractExtension {
         let heightRectElement = newRectExtrema.yMax - newRectExtrema.yMin + (2 * this._offsetSvg);
         this.extendedItem.parent.setStyle("left", parentLeft.toString() + "px");
         this.extendedItem.parent.setStyle("top", parentTop.toString() + "px");
-        this.extendedItem.parent.setStyle("height", heightRectElement.toString() + "px");
-        this.extendedItem.parent.setStyle("width", widthRectElement.toString() + "px");
+        this.extendedItem.parent.setStyle("height", Math.round(heightRectElement).toString() + "px");
+        this.extendedItem.parent.setStyle("width", Math.round(widthRectElement).toString() + "px");
     }
     _rearrangePointsFromElement(oldParentCoords) {
         let newParentCoords = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement.parentElement);

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

@@ -80,8 +80,8 @@ export class DrawEllipsisTool {
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
                 svg.style.position = 'absolute';
-                svg.style.width = (coords.width + 2 * offset) + 'px';
-                svg.style.height = (coords.height + 2 * offset) + 'px';
+                svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
+                svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
                 svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);

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

@@ -65,8 +65,8 @@ export class DrawLineTool {
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
                 svg.style.position = 'absolute';
-                svg.style.width = (coords.width + 2 * offset) + 'px';
-                svg.style.height = (coords.height + 2 * offset) + 'px';
+                svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
+                svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
                 svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);

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

@@ -107,8 +107,8 @@ export class DrawPathTool {
                     svg.style.left = (mvX) + 'px';
                     svg.style.top = (mvY) + 'px';
                     svg.style.position = 'absolute';
-                    svg.style.width = (coords.width + 2 * offset) + 'px';
-                    svg.style.height = (coords.height + 2 * offset) + 'px';
+                    svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
+                    svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
                     svg.style.overflow = 'visible';
                     //designerView.rootDesignItem.element.appendChild(svg);
                     this._path = null;

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

@@ -95,8 +95,8 @@ export class DrawRectTool {
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
                 svg.style.position = 'absolute';
-                svg.style.width = (coords.width + 2 * offset) + 'px';
-                svg.style.height = (coords.height + 2 * offset) + 'px';
+                svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
+                svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
                 svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);

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

@@ -47,6 +47,8 @@ export class MagicWandSelectorTool {
                     const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
                     if (p1 && p2 && p3 && p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
+                            inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                         inSelectionElements.push(desItem);
                     }
                 }

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

@@ -110,7 +110,8 @@ export class PointerTool {
                     this._actionType = PointerActionType.Drag;
                 }
                 else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) {
-                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
+                    if (!event.shiftKey)
+                        designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
                     this._actionType = PointerActionType.DrawSelection;
                 }
                 else {

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

@@ -51,7 +51,7 @@ export class RectangleSelectorTool {
                 event.target.releasePointerCapture(event.pointerId);
                 designerCanvas.releaseActiveTool();
                 const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
-                const inSelectionElements = [];
+                let inSelectionElements = [];
                 let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {
                     let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
@@ -69,6 +69,8 @@ export class RectangleSelectorTool {
                     const p4 = p3 && this._rect.isPointInFill(point);
                     if (p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
+                            inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                         inSelectionElements.push(desItem);
                     }
                 }

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.d.ts

@@ -8,7 +8,7 @@ export declare class DesignerToolbar extends BaseCustomWebComponentConstructorAp
     private _toolButtonsElem;
     private _serviceContainer;
     private _popupContainer;
-    private _designerView;
+    designerView: DesignerView;
     constructor();
     initialize(serviceContainer: ServiceContainer, designerView: DesignerView): void;
     showPopup(designerToolbarButton: DesignerToolbarButton): void;