@node-projects/web-component-designer 0.0.82 → 0.0.86

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

@@ -1,150 +1,158 @@
-import { EventNames } from "../../../../enums/EventNames";
-import { AbstractExtension } from './AbstractExtension';
-export class ResizeExtension extends AbstractExtension {
-    resizeAllSelected;
-    _initialSizes;
-    _actionModeStarted;
-    _initialPoint;
-    _offsetPoint;
-    _circle1;
-    _circle2;
-    _circle3;
-    _circle4;
-    _circle5;
-    _circle6;
-    _circle7;
-    _circle8;
-    constructor(extensionManager, designerView, extendedItem, resizeAllSelected) {
-        super(extensionManager, designerView, extendedItem);
-        this.resizeAllSelected = resizeAllSelected;
-    }
-    extend() {
-    }
-    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 = '';
-        }
-    }
-    _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(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(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 / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
-                }
-                if (this.designerCanvas.alignOnSnap)
-                    this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                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 i = 0;
-                    switch (this._actionModeStarted) {
-                        case 'se-resize':
-                            this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
-                            this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
-                            if (this.resizeAllSelected) {
-                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                                    if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
-                                        designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
-                                    }
-                                }
-                            }
-                            break;
-                        case 's-resize':
-                            this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
-                            if (this.resizeAllSelected) {
-                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                                    if (designItem !== this.extendedItem) {
-                                        designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
-                                    }
-                                }
-                            }
-                            break;
-                        case 'e-resize':
-                            this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
-                            if (this.resizeAllSelected) {
-                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                                    if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
-                                    }
-                                }
-                            }
-                            break;
-                        //for other resize modes we need a replacement
-                    }
-                    const resizedElements = [this.extendedItem, this.extendedItem.parent];
-                    if (this.resizeAllSelected)
-                        resizedElements.push(...this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                    this.extensionManager.refreshExtensions(resizedElements);
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                let cg = this.extendedItem.openGroup("Resize Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
-                this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
-                if (this.resizeAllSelected) {
-                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                        if (designItem !== this.extendedItem) {
-                            designItem.setStyle('width', designItem.element.style.width);
-                            designItem.setStyle('height', designItem.element.style.height);
-                        }
-                    }
-                }
-                cg.commit();
-                this._initialSizes = null;
-                this._initialPoint = null;
-                break;
-        }
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { EventNames } from "../../../../enums/EventNames";
+import { AbstractExtension } from './AbstractExtension';
+export class ResizeExtension extends AbstractExtension {
+    resizeAllSelected;
+    _initialSizes;
+    _actionModeStarted;
+    _initialPoint;
+    _offsetPoint;
+    _circle1;
+    _circle2;
+    _circle3;
+    _circle4;
+    _circle5;
+    _circle6;
+    _circle7;
+    _circle8;
+    constructor(extensionManager, designerView, extendedItem, resizeAllSelected) {
+        super(extensionManager, designerView, extendedItem);
+        this.resizeAllSelected = resizeAllSelected;
+    }
+    extend() {
+        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 = '';
+        }
+    }
+    _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(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(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;
+                let rect = this.extendedItem.element.getBoundingClientRect();
+                this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
+                if (this.resizeAllSelected) {
+                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                        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);
+                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 i = 0;
+                    switch (this._actionModeStarted) {
+                        case 'se-resize':
+                            this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
+                            this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
+                            if (this.resizeAllSelected) {
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                                    i++;
+                                    if (designItem !== this.extendedItem) {
+                                        designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 's-resize':
+                            this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + '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 + trackY + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        case 'e-resize':
+                            this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + '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 + trackX + 'px';
+                                    }
+                                }
+                            }
+                            break;
+                        //for other resize modes we need a replacement
+                    }
+                    const resizedElements = [this.extendedItem, this.extendedItem.parent];
+                    if (this.resizeAllSelected)
+                        resizedElements.push(...this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                    this.extensionManager.refreshExtensions(resizedElements);
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                let cg = this.extendedItem.openGroup("Resize Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
+                this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
+                if (this.resizeAllSelected) {
+                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                        if (designItem !== this.extendedItem) {
+                            designItem.setStyle('width', designItem.element.style.width);
+                            designItem.setStyle('height', designItem.element.style.height);
+                        }
+                    }
+                }
+                cg.commit();
+                this._initialSizes = null;
+                this._initialPoint = null;
+                break;
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,12 +1,12 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class ResizeExtensionProvider implements IDesignerExtensionProvider {
-    private resizeAllSelected;
-    constructor(resizeAllSelected?: boolean);
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class ResizeExtensionProvider implements IDesignerExtensionProvider {
+    private resizeAllSelected;
+    constructor(resizeAllSelected?: boolean);
+    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/ResizeExtensionProvider.js

@@ -1,17 +1,18 @@
-import { ResizeExtension } from "./ResizeExtension";
-import { css } from "@node-projects/base-custom-webcomponent";
-export class ResizeExtensionProvider {
-    resizeAllSelected;
-    constructor(resizeAllSelected = false) {
-        this.resizeAllSelected = resizeAllSelected;
-    }
-    shouldExtend(extensionManager, designerView, designItem) {
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new ResizeExtension(extensionManager, designerView, designItem, this.resizeAllSelected);
-    }
+import { ResizeExtension } from "./ResizeExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+import { NodeType } from "../../../item/NodeType.js";
+export class ResizeExtensionProvider {
+    resizeAllSelected;
+    constructor(resizeAllSelected = false) {
+        this.resizeAllSelected = resizeAllSelected;
+    }
+    shouldExtend(extensionManager, designerView, designItem) {
+        return designItem.nodeType == NodeType.Element;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new ResizeExtension(extensionManager, designerView, designItem, this.resizeAllSelected);
+    }
     style = css `
     .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
-  `;
-}
+  `;
+}

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

@@ -1,12 +1,12 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from './AbstractExtension';
-import { IExtensionManager } from "./IExtensionManger";
-export declare class RotateExtension extends AbstractExtension {
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    _drawRotateOverlay(itemRect: DOMRect): void;
-    _pointerActionTypeRotate(event: PointerEvent): void;
-    refresh(): void;
-    dispose(): void;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class RotateExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    _drawRotateOverlay(itemRect: DOMRect): void;
+    _pointerActionTypeRotate(event: PointerEvent): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -1,71 +1,71 @@
-import { EventNames } from "../../../../enums/EventNames";
-import { AbstractExtension } from './AbstractExtension';
-export class RotateExtension extends AbstractExtension {
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        const rect = this.extendedItem.element.getBoundingClientRect();
-        this._drawRotateOverlay(rect);
-    }
-    _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);
-    }
-    _pointerActionTypeRotate(event) {
-        event.stopPropagation();
-        switch (event.type) {
-            case EventNames.PointerDown:
-                //his._actionModeStarted = actionMode;
-                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)');*/
-                this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                break;
-            case EventNames.PointerUp:
-                let cg = this.extendedItem.openGroup("Rotate Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                /*for (const designItem of this.instanceServiceContainer.selectionService.selectedElements) {
-                  designItem.setStyle('width', (<HTMLElement>designItem.element).style.width);
-                  designItem.setStyle('height', (<HTMLElement>designItem.element).style.height);
-                }*/
-                cg.commit();
-                //this._initialSizes = null;
-                break;
-        }
-    }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { EventNames } from "../../../../enums/EventNames";
+import { AbstractExtension } from './AbstractExtension';
+export class RotateExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        const rect = this.extendedItem.element.getBoundingClientRect();
+        this._drawRotateOverlay(rect);
+    }
+    _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);
+    }
+    _pointerActionTypeRotate(event) {
+        event.stopPropagation();
+        switch (event.type) {
+            case EventNames.PointerDown:
+                //his._actionModeStarted = actionMode;
+                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)');*/
+                this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                break;
+            case EventNames.PointerUp:
+                let cg = this.extendedItem.openGroup("Rotate Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                /*for (const designItem of this.instanceServiceContainer.selectionService.selectedElements) {
+                  designItem.setStyle('width', (<HTMLElement>designItem.element).style.width);
+                  designItem.setStyle('height', (<HTMLElement>designItem.element).style.height);
+                }*/
+                cg.commit();
+                //this._initialSizes = null;
+                break;
+        }
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,10 +1,10 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class RotateExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class RotateExtensionProvider 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/RotateExtensionProvider.js

@@ -1,13 +1,13 @@
-import { RotateExtension } from "./RotateExtension";
-import { css } from "@node-projects/base-custom-webcomponent";
-export class RotateExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new RotateExtension(extensionManager, designerView, designItem);
-    }
+import { RotateExtension } from "./RotateExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class RotateExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new RotateExtension(extensionManager, designerView, designItem);
+    }
     style = css `
     .svg-primary-rotate { stroke: #3899ec; fill: #3899ec; pointer-events: all }
-  `;
-}
+  `;
+}