@node-projects/web-component-designer 0.0.150 → 0.0.152

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

@@ -1,5 +1,5 @@
 import { EventNames } from "../../../../enums/EventNames";
-import { convertCoordinates, getDomMatrix } from "../../../helper/TransformHelper.js";
+import { convertCoordinates, getDomMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition } from "../../../helper/TransformHelper.js";
 import { AbstractExtension } from './AbstractExtension';
 export class ResizeExtension extends AbstractExtension {
     resizeAllSelected;
@@ -15,6 +15,8 @@ export class ResizeExtension extends AbstractExtension {
     _circle6;
     _circle7;
     _circle8;
+    _initialComputedTransformOrigins;
+    _initialTransformOrigins;
     constructor(extensionManager, designerCanvas, extendedItem, resizeAllSelected) {
         super(extensionManager, designerCanvas, extendedItem);
         this.resizeAllSelected = resizeAllSelected;
@@ -23,31 +25,17 @@ export class ResizeExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        const rect = this.extendedItem.element.getBoundingClientRect();
-        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';
-        }
-        else {
-            this._circle2.style.display = '';
-            this._circle5.style.display = '';
-        }
-        if (rect.height < 12) {
-            this._circle7.style.display = 'none';
-            this._circle8.style.display = 'none';
-        }
-        else {
-            this._circle8.style.display = '';
-            this._circle8.style.display = '';
-        }
+        //#region Resizer circles
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 0, this.designerCanvas);
+        this._circle1 = this._drawResizerOverlay(transformedCornerPoints[0].x, transformedCornerPoints[0].y, 'nw-resize', this._circle1);
+        this._circle2 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[1].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[1].y - transformedCornerPoints[0].y) / 2), 'n-resize', this._circle2);
+        this._circle3 = this._drawResizerOverlay(transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'ne-resize', this._circle3);
+        this._circle4 = this._drawResizerOverlay((transformedCornerPoints[0].x + (transformedCornerPoints[2].x - transformedCornerPoints[0].x) / 2), (transformedCornerPoints[0].y + (transformedCornerPoints[2].y - transformedCornerPoints[0].y) / 2), 'w-resize', this._circle4);
+        this._circle5 = this._drawResizerOverlay(transformedCornerPoints[2].x, transformedCornerPoints[2].y, 'sw-resize', this._circle5);
+        this._circle6 = this._drawResizerOverlay((transformedCornerPoints[2].x + (transformedCornerPoints[3].x - transformedCornerPoints[2].x) / 2), (transformedCornerPoints[2].y + (transformedCornerPoints[3].y - transformedCornerPoints[2].y) / 2), 's-resize', this._circle6);
+        this._circle8 = this._drawResizerOverlay((transformedCornerPoints[1].x + (transformedCornerPoints[3].x - transformedCornerPoints[1].x) / 2), (transformedCornerPoints[1].y + (transformedCornerPoints[3].y - transformedCornerPoints[1].y) / 2), 'e-resize', this._circle8);
+        this._circle7 = this._drawResizerOverlay(transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'se-resize', this._circle7);
+        //#endregion Circles
     }
     _drawResizerOverlay(x, y, cursor, oldCircle) {
         let circle = this._drawCircle(x, y, 3 / this.designerCanvas.zoomFactor, 'svg-primary-resizer', oldCircle);
@@ -60,7 +48,7 @@ export class ResizeExtension extends AbstractExtension {
         circle.style.cursor = cursor;
         return circle;
     }
-    _pointerActionTypeResize(circle, event, actionMode = 'se-resize') {
+    _pointerActionTypeResize(circle, event, actionMode) {
         event.stopPropagation();
         const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
@@ -72,34 +60,130 @@ export class ResizeExtension extends AbstractExtension {
                 this._initialPoint = currentPoint;
                 this._initialSizes = [];
                 this._actionModeStarted = actionMode;
-                let rect = this.designerCanvas.getNormalizedElementCoordinatesAndRealSizes(this.extendedItem.element);
-                this._initialSizes.push({ width: rect.realWidth, height: rect.realHeight });
+                this._initialComputedTransformOrigins = [];
+                this._initialTransformOrigins = [];
+                //#region Calc elements' dimension
+                const transformBackup = this.extendedItem.element.style.transform;
+                this.extendedItem.element.style.transform = '';
+                let rect = this.extendedItem.element.getBoundingClientRect();
+                this.extendedItem.element.style.transform = transformBackup;
+                //#endregion Calc element's dimension
+                this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                this.extendedItem.element.style.width = this._initialSizes[0].width + 'px';
+                const toArr = getComputedStyle(this.extendedItem.element).transformOrigin.split(' ').map(x => parseInt(x.replace('px', '')));
+                const transformOrigin = new DOMPoint(toArr[0], toArr[1]);
+                this._initialComputedTransformOrigins.push(transformOrigin);
+                this._initialTransformOrigins.push(this.extendedItem.element.style.transformOrigin);
                 if (this.resizeAllSelected) {
                     for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                        rect = this.designerCanvas.getNormalizedElementCoordinatesAndRealSizes(designItem.element);
-                        this._initialSizes.push({ width: rect.realWidth, height: rect.realHeight });
+                        rect = designItem.element.getBoundingClientRect();
+                        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);
+                let i = 0;
+                let top = null;
+                let bottom = null;
+                let left = null;
+                let right = null;
+                switch (this._actionModeStarted) {
+                    case 'e-resize':
+                        left = getComputedStyle(this.extendedItem.element).left;
+                        this.extendedItem.element.style.removeProperty('right');
+                        this.extendedItem.element.style.left = left;
+                        this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
+                        break;
+                    case 'se-resize':
+                        top = getComputedStyle(this.extendedItem.element).top;
+                        this.extendedItem.element.style.removeProperty('bottom');
+                        this.extendedItem.element.style.top = top;
+                        left = getComputedStyle(this.extendedItem.element).left;
+                        this.extendedItem.element.style.removeProperty('right');
+                        this.extendedItem.element.style.left = left;
+                        this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
+                        break;
+                    case 's-resize':
+                        top = getComputedStyle(this.extendedItem.element).top;
+                        this.extendedItem.element.style.removeProperty('bottom');
+                        this.extendedItem.element.style.top = top;
+                        this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
+                        break;
+                    case 'sw-resize':
+                        top = getComputedStyle(this.extendedItem.element).top;
+                        this.extendedItem.element.style.removeProperty('bottom');
+                        this.extendedItem.element.style.top = top;
+                        right = getComputedStyle(this.extendedItem.element).right;
+                        this.extendedItem.element.style.removeProperty('left');
+                        this.extendedItem.element.style.right = right;
+                        this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
+                        break;
+                    case 'w-resize':
+                        right = getComputedStyle(this.extendedItem.element).right;
+                        this.extendedItem.element.style.removeProperty('left');
+                        this.extendedItem.element.style.right = right;
+                        this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
+                        break;
+                    case 'nw-resize':
+                        bottom = getComputedStyle(this.extendedItem.element).bottom;
+                        this.extendedItem.element.style.removeProperty('top');
+                        this.extendedItem.element.style.bottom = bottom;
+                        right = getComputedStyle(this.extendedItem.element).right;
+                        this.extendedItem.element.style.removeProperty('left');
+                        this.extendedItem.element.style.right = right;
+                        this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
+                        break;
+                    case 'n-resize':
+                        bottom = getComputedStyle(this.extendedItem.element).bottom;
+                        this.extendedItem.element.style.removeProperty('top');
+                        this.extendedItem.element.style.bottom = bottom;
+                        this.extendedItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
+                        break;
+                    case 'ne-resize':
+                        bottom = getComputedStyle(this.extendedItem.element).bottom;
+                        this.extendedItem.element.style.removeProperty('top');
+                        this.extendedItem.element.style.bottom = bottom;
+                        left = getComputedStyle(this.extendedItem.element).left;
+                        this.extendedItem.element.style.removeProperty('right');
+                        this.extendedItem.element.style.left = left;
+                        this.extendedItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
+                        break;
+                }
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
                     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 - this._offsetPoint.x;
-                    let trackY = diff.y - this._initialPoint.y - this._offsetPoint.y;
+                    let trackX = Math.round(diff.x - this._initialPoint.x - this._offsetPoint.x);
+                    let trackY = Math.round(diff.y - this._initialPoint.y - this._offsetPoint.y);
                     let matrix = getDomMatrix(this.extendedItem.element);
-                    let transformedTrack = convertCoordinates({ x: trackX, y: trackY }, matrix);
+                    let transformedTrack = convertCoordinates(new DOMPoint(trackX, trackY, 0, 0), matrix);
                     let i = 0;
+                    let width = null;
+                    let height = null;
                     switch (this._actionModeStarted) {
+                        case 'e-resize':
+                            width = (this._initialSizes[i].width + transformedTrack.x);
+                            this.extendedItem.element.style.width = width + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
+                                    }
+                                }
+                            }
+                            break;
                         case 'se-resize':
-                            this.extendedItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
-                            this.extendedItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                            width = (this._initialSizes[i].width + transformedTrack.x);
+                            this.extendedItem.element.style.width = width + 'px';
+                            height = (this._initialSizes[i].height + transformedTrack.y);
+                            this.extendedItem.element.style.height = height + 'px';
+                            console.log(this.extendedItem.element.style.transformOrigin);
                             if (this.resizeAllSelected) {
+                                i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                                    i++;
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
                                         designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
@@ -108,7 +192,8 @@ export class ResizeExtension extends AbstractExtension {
                             }
                             break;
                         case 's-resize':
-                            this.extendedItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                            height = (this._initialSizes[i].height + transformedTrack.y);
+                            this.extendedItem.element.style.height = height + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
@@ -118,18 +203,75 @@ export class ResizeExtension extends AbstractExtension {
                                 }
                             }
                             break;
-                        case 'e-resize':
-                            this.extendedItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
+                        case 'sw-resize':
+                            width = (this._initialSizes[i].width - transformedTrack.x);
+                            this.extendedItem.element.style.width = width + 'px';
+                            height = (this._initialSizes[i].height + transformedTrack.y);
+                            this.extendedItem.element.style.height = height + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'w-resize':
+                            width = (this._initialSizes[i].width - transformedTrack.x);
+                            this.extendedItem.element.style.width = width + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'nw-resize':
+                            width = (this._initialSizes[i].width - transformedTrack.x);
+                            this.extendedItem.element.style.width = width + 'px';
+                            height = (this._initialSizes[i].height - transformedTrack.y);
+                            this.extendedItem.element.style.height = height + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'n-resize':
+                            height = (this._initialSizes[i].height - transformedTrack.y);
+                            this.extendedItem.element.style.height = height + 'px';
+                            if (this.resizeAllSelected) {
+                                i++;
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'ne-resize':
+                            width = (this._initialSizes[i].width + transformedTrack.x);
+                            this.extendedItem.element.style.width = width + 'px';
+                            height = (this._initialSizes[i].height - transformedTrack.y);
+                            this.extendedItem.element.style.height = height + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
                                     }
                                 }
                             }
                             break;
-                        //for other resize modes we need a replacement
                     }
                     const resizedElements = [this.extendedItem, this.extendedItem.parent];
                     if (this.resizeAllSelected)
@@ -142,6 +284,24 @@ export class ResizeExtension extends AbstractExtension {
                 let cg = this.extendedItem.openGroup((this.resizeAllSelected && this.designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1) ? "Resize Elements" : "Resize &lt;" + this.extendedItem.name + "&gt;");
                 this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
                 this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
+                this.extendedItem.setStyle('left', normalizeToAbsolutePosition(this.extendedItem.element, 'left'));
+                this.extendedItem.setStyle('top', normalizeToAbsolutePosition(this.extendedItem.element, 'top'));
+                let p3Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
+                this.extendedItem.element.style.transformOrigin = this._initialTransformOrigins[0];
+                let p1Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
+                let p1 = new DOMPoint(p1Abs.x - p3Abs.x, -(p1Abs.y - p3Abs.y));
+                let matrix = new DOMMatrix(getComputedStyle(this.extendedItem.element).transform);
+                let deltaX = 0;
+                let deltaY = 0;
+                let p1transformed = p1.matrixTransform(matrix.inverse());
+                let p2Abs = new DOMPoint(p3Abs.x + p1transformed.x, p3Abs.y - p1transformed.y);
+                let p1p2 = new DOMPoint(p2Abs.x - p1Abs.x, -(p2Abs.y - p1Abs.y));
+                let p1p2transformed = p1p2.matrixTransform(matrix);
+                let p4Abs = new DOMPoint(p1Abs.x + p1p2transformed.x, p1Abs.y - p1p2transformed.y);
+                deltaX = p4Abs.x - p1Abs.x;
+                deltaY = p4Abs.y - p1Abs.y;
+                this.extendedItem.element.style.transform = matrix.translate(deltaX, deltaY).toString();
+                this.extendedItem.setStyle('transform', this.extendedItem.element.style.transform);
                 if (this.resizeAllSelected) {
                     for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                         if (designItem !== this.extendedItem) {

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

@@ -3,10 +3,16 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { AbstractExtension } from './AbstractExtension';
 import { IExtensionManager } from "./IExtensionManger";
 export declare class RotateExtension extends AbstractExtension {
+    private _initialPoint;
+    private _rotateIcon;
+    private _initialElementAngle;
+    private _initialOverlayAngle;
+    private _textAngle;
+    private _actualRotationAngle;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
-    _drawRotateOverlay(itemRect: DOMRect): void;
-    _pointerActionTypeRotate(event: PointerEvent): void;
     refresh(): void;
+    _drawRotateOverlay(itemRect: DOMRect, oldRotateIcon: any): any;
+    _pointerActionTypeRotate(event: PointerEvent): void;
     dispose(): void;
 }

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

@@ -1,70 +1,104 @@
 import { EventNames } from "../../../../enums/EventNames";
+import { cssMatrixToMatrixArray, extractRotationAngleFromDOMMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, getRotationAngleFromMatrix, getRotationMatrix3d, rotateElementByMatrix3d } from "../../../helper/TransformHelper";
 import { AbstractExtension } from './AbstractExtension';
 export class RotateExtension extends AbstractExtension {
+    _initialPoint;
+    _rotateIcon;
+    _initialElementAngle;
+    _initialOverlayAngle;
+    _textAngle;
+    _actualRotationAngle;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
+        this.refresh();
+    }
+    refresh() {
         const rect = this.extendedItem.element.getBoundingClientRect();
-        this._drawRotateOverlay(rect);
+        this._actualRotationAngle = getRotationAngleFromMatrix(null, new DOMMatrix(this.extendedItem.element.style.transform));
+        this._rotateIcon = this._drawRotateOverlay(rect, this._rotateIcon);
     }
-    _drawRotateOverlay(itemRect) {
-        const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
-        const line = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-        line.setAttribute('r', (7.5));
-        line.setAttribute('class', 'svg-primary-rotate');
-        line.setAttribute('style', 'cursor: grabbing');
-        g.appendChild(line);
-        const g2 = document.createElementNS("http://www.w3.org/2000/svg", "g");
-        g2.setAttribute('transform', 'translate(-8,0) scale(0.0015,-0.0015)');
-        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        path.setAttribute('style', 'fill: white');
-        path.setAttribute('d', 'M5260,4367.9c-1803.6-157-3329.6-1457-3771.9-3212.8c-34.5-135.9-72.7-331.2-86.2-430.8c-11.5-99.6-24.9-201-30.6-224l-7.7-44H731.8c-528.4,0-631.8-3.8-631.8-26.8c0-42.1,2029.5-2042.9,2104.2-2073.6c36.4-15.3,86.2-21.1,118.7-15.3c40.2,9.6,346.6,300.6,1089.4,1037.7C3981-58.8,4446.3,414.2,4446.3,429.5c0,23-103.4,26.8-620.3,26.8c-342.7,0-626.1,5.7-629.9,15.3c-13.4,21.1,38.3,245.1,93.8,415.5c114.9,348.5,319.7,681.6,582.1,947.8c478.7,484.4,1062.6,731.4,1742.3,735.2c317.8,0,482.5-23,765.9-114.9c402.1-128.3,725.7-331.2,1022.4-641.4c455.7-474.8,687.4-1047.3,687.4-1702.1c-1.9-693.1-254.6-1284.7-754.4-1771c-396.3-384.9-882.7-614.6-1430.3-679.7c-141.7-17.2-195.3-32.6-227.9-63.2l-44-38.3v-811.8v-811.8l49.8-49.8c49.8-47.9,53.6-49.8,243.2-36.4c1606.4,105.3,3048.1,1146.9,3658.9,2646c453.8,1112.4,415.5,2379.9-105.3,3463.6c-360,752.5-953.5,1397.7-1677.3,1828.5c-515,308.3-1139.2,513.1-1746.2,574.4C5872.7,4379.4,5438.1,4383.3,5260,4367.9z');
-        g2.appendChild(path);
-        g.appendChild(g2);
-        g.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeRotate(event));
-        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) / this.designerCanvas.scaleFactor - 13) + ',' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 8.5) + ')');
-        this.overlayLayerView.addOverlay(g);
-        this.overlays.push(g);
+    _drawRotateOverlay(itemRect, oldRotateIcon) {
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 10, this.designerCanvas);
+        let rotateIconPosition = transformedCornerPoints[0];
+        if (!oldRotateIcon) {
+            const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+            const line = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            line.setAttribute('r', (7.5));
+            line.setAttribute('class', 'svg-primary-rotate');
+            line.setAttribute('style', 'cursor: grabbing');
+            g.appendChild(line);
+            const g2 = document.createElementNS("http://www.w3.org/2000/svg", "g");
+            g2.setAttribute('transform', 'translate(-8,0) scale(0.0015,-0.0015)');
+            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            path.setAttribute('style', 'fill: white');
+            path.setAttribute('d', 'M5260,4367.9c-1803.6-157-3329.6-1457-3771.9-3212.8c-34.5-135.9-72.7-331.2-86.2-430.8c-11.5-99.6-24.9-201-30.6-224l-7.7-44H731.8c-528.4,0-631.8-3.8-631.8-26.8c0-42.1,2029.5-2042.9,2104.2-2073.6c36.4-15.3,86.2-21.1,118.7-15.3c40.2,9.6,346.6,300.6,1089.4,1037.7C3981-58.8,4446.3,414.2,4446.3,429.5c0,23-103.4,26.8-620.3,26.8c-342.7,0-626.1,5.7-629.9,15.3c-13.4,21.1,38.3,245.1,93.8,415.5c114.9,348.5,319.7,681.6,582.1,947.8c478.7,484.4,1062.6,731.4,1742.3,735.2c317.8,0,482.5-23,765.9-114.9c402.1-128.3,725.7-331.2,1022.4-641.4c455.7-474.8,687.4-1047.3,687.4-1702.1c-1.9-693.1-254.6-1284.7-754.4-1771c-396.3-384.9-882.7-614.6-1430.3-679.7c-141.7-17.2-195.3-32.6-227.9-63.2l-44-38.3v-811.8v-811.8l49.8-49.8c49.8-47.9,53.6-49.8,243.2-36.4c1606.4,105.3,3048.1,1146.9,3658.9,2646c453.8,1112.4,415.5,2379.9-105.3,3463.6c-360,752.5-953.5,1397.7-1677.3,1828.5c-515,308.3-1139.2,513.1-1746.2,574.4C5872.7,4379.4,5438.1,4383.3,5260,4367.9z');
+            g2.appendChild(path);
+            g.appendChild(g2);
+            g.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeRotate(event));
+            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(' + rotateIconPosition.x + ',' + rotateIconPosition.y + ')');
+            this.overlayLayerView.addOverlay(g);
+            this.overlays.push(g);
+            return g;
+        }
+        else {
+            oldRotateIcon.setAttribute('transform', 'translate(' + rotateIconPosition.x + ',' + rotateIconPosition.y + ')');
+            return oldRotateIcon;
+        }
     }
     _pointerActionTypeRotate(event) {
         event.stopPropagation();
+        const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
-                //his._actionModeStarted = actionMode;
+                const el = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+                let transformOriginInPx = {
+                    x: el.x + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')),
+                    y: el.y + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', ''))
+                };
+                this._initialPoint = currentPoint;
+                this._initialElementAngle = getRotationAngleFromMatrix(cssMatrixToMatrixArray(getComputedStyle(this.extendedItem.element).transform), null);
+                this._initialOverlayAngle = Math.atan2(currentPoint.y - transformOriginInPx.y, currentPoint.x - transformOriginInPx.x) * (180 / Math.PI);
+                event.target.setPointerCapture(event.pointerId);
                 break;
             case EventNames.PointerMove:
-                //let trackX = currentPoint.x - this._initialPoint.x;
-                //let trackY = currentPoint.y - this._initialPoint.y;
-                //let i = 0;
-                /*
-                        var center_x = (offset.left) + (img.width() / 2);
-                    var center_y = (offset.top) + (img.height() / 2);
-                    var mouse_x = evt.pageX;
-                    var mouse_y = evt.pageY;
-                    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
-                    var degree = (radians * (180 / Math.PI) * -1) + 90;
-                    img.css('-moz-transform', 'rotate(' + degree + 'deg)');*/
+                if (this._initialPoint) {
+                    const el = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+                    let transformOriginInPx = {
+                        x: el.x + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')),
+                        y: el.y + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', ''))
+                    };
+                    let angle = Math.atan2(currentPoint.y - transformOriginInPx.y, currentPoint.x - transformOriginInPx.x) * (180 / Math.PI);
+                    angle = angle - this._initialOverlayAngle + this._initialElementAngle;
+                    angle *= -1;
+                    const rotationMatrix3d = getRotationMatrix3d('z', angle);
+                    rotateElementByMatrix3d(this.extendedItem.element, rotationMatrix3d);
+                    let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 30, this.designerCanvas);
+                    let angleTextPosition = transformedCornerPoints[0];
+                    this._textAngle = this._drawTextWithBackground(this._actualRotationAngle + '°', angleTextPosition.x, angleTextPosition.y, 'white', 'svg-rotate-text', this._textAngle);
+                    this._textAngle[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+                    this._textAngle[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+                }
                 this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 break;
             case EventNames.PointerUp:
                 let cg = this.extendedItem.openGroup("Rotate Elements");
-                /*for (const designItem of this.instanceServiceContainer.selectionService.selectedElements) {
-                  designItem.setStyle('width', (<HTMLElement>designItem.element).style.width);
-                  designItem.setStyle('height', (<HTMLElement>designItem.element).style.height);
-                }*/
+                event.target.releasePointerCapture(event.pointerId);
+                this.extendedItem.element.style.transform = 'rotate(' + extractRotationAngleFromDOMMatrix(new DOMMatrix(this.extendedItem.element.style.transform)) + 'deg)';
+                this.extendedItem.setStyle('transform', this.extendedItem.element.style.transform);
                 cg.commit();
-                //this._initialSizes = null;
+                this._textAngle.forEach(x => {
+                    this.designerCanvas.overlayLayer.removeOverlay(x);
+                });
+                this._textAngle = null;
+                this._initialPoint = null;
                 break;
         }
     }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
     dispose() {
         this._removeAllOverlays();
     }

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

@@ -9,5 +9,6 @@ export class RotateExtensionProvider {
     }
     style = css `
     .svg-primary-rotate { stroke: #3899ec; fill: #3899ec; pointer-events: all }
+    .svg-rotate-text { text-anchor: middle; alignment-baseline: central; }
   `;
 }

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

@@ -3,7 +3,10 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { AbstractExtension } from './AbstractExtension';
 import { IExtensionManager } from "./IExtensionManger";
 export declare class SelectionDefaultExtension extends AbstractExtension {
-    private _rect;
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;

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

@@ -1,6 +1,10 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../helper/TransformHelper";
 import { AbstractExtension } from './AbstractExtension';
 export class SelectionDefaultExtension extends AbstractExtension {
-    _rect;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -8,14 +12,15 @@ export class SelectionDefaultExtension extends AbstractExtension {
         this.refresh();
     }
     refresh() {
-        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
-        const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
-        const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
-        const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-        this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-selection', this._rect);
-        this._rect.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, 0, this.designerCanvas);
+        this._line1 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[1].x, transformedCornerPoints[1].y, 'svg-selection', this._line1);
+        this._line2 = this._drawLine(transformedCornerPoints[0].x, transformedCornerPoints[0].y, transformedCornerPoints[2].x, transformedCornerPoints[2].y, 'svg-selection', this._line2);
+        this._line3 = this._drawLine(transformedCornerPoints[1].x, transformedCornerPoints[1].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'svg-selection', this._line3);
+        this._line4 = this._drawLine(transformedCornerPoints[2].x, transformedCornerPoints[2].y, transformedCornerPoints[3].x, transformedCornerPoints[3].y, 'svg-selection', this._line4);
+        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();