@node-projects/web-component-designer 0.0.238 → 0.0.240

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.js

@@ -163,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.js

@@ -306,8 +306,8 @@ export class PathExtension extends AbstractExtension {
         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();

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

@@ -191,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/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;

package/dist/elements/widgets/designerView/tools/toolBar/DesignerToolbar.js

@@ -25,7 +25,7 @@ export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
     _toolButtonsElem;
     _serviceContainer;
     _popupContainer;
-    _designerView;
+    designerView;
     constructor() {
         super();
         this._toolButtonsElem = this._getDomElement("toolButtons");
@@ -33,7 +33,7 @@ export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
     }
     initialize(serviceContainer, designerView) {
         this._serviceContainer = serviceContainer;
-        this._designerView = designerView;
+        this.designerView = designerView;
         for (let tb of this._serviceContainer.designViewToolbarButtons) {
             this._toolButtonsElem.appendChild(tb.provideButton(designerView.designerCanvas));
         }
@@ -62,25 +62,25 @@ export class DesignerToolbar extends BaseCustomWebComponentConstructorAppend {
         if (this._popupContainer.children.length) {
             this._popupContainer.innerHTML = '';
         }
-        this._designerView.designerCanvas.executeCommand({ type: CommandType.setTool, parameter: tool });
+        this.designerView.designerCanvas.executeCommand({ type: CommandType.setTool, parameter: tool });
     }
     setStrokeColor(color) {
         if (this._popupContainer.children.length) {
             this._popupContainer.innerHTML = '';
         }
-        this._designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeColor, parameter: color });
+        this.designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeColor, parameter: color });
     }
     setFillBrush(color) {
         if (this._popupContainer.children.length) {
             this._popupContainer.innerHTML = '';
         }
-        this._designerView.designerCanvas.executeCommand({ type: CommandType.setFillBrush, parameter: color });
+        this.designerView.designerCanvas.executeCommand({ type: CommandType.setFillBrush, parameter: color });
     }
     setStrokeThickness(input) {
         if (this._popupContainer.children.length) {
             this._popupContainer.innerHTML = '';
         }
-        this._designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeThickness, parameter: input });
+        this.designerView.designerCanvas.executeCommand({ type: CommandType.setStrokeThickness, parameter: input });
     }
 }
 customElements.define('node-projects-designer-toolbar', DesignerToolbar);

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.d.ts

@@ -0,0 +1,5 @@
+import { IDesignerCanvas } from "../../../IDesignerCanvas.js";
+import { IDesignViewToolbarButtonProvider } from "../IDesignViewToolbarButtonProvider.js";
+export declare class TransformToolButtonProvider implements IDesignViewToolbarButtonProvider {
+    provideButton(designerCanvas: IDesignerCanvas): HTMLElement;
+}

package/dist/elements/widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js

@@ -0,0 +1,10 @@
+import { DesignerToolbarButton } from '../DesignerToolbarButton.js';
+import { assetsPath } from "../../../../../../Constants.js";
+import { TransformToolPopup } from "../popups/TransformToolPopup.js";
+export class TransformToolButtonProvider {
+    provideButton(designerCanvas) {
+        const button = new DesignerToolbarButton(designerCanvas, { 'TransformTool': { icon: assetsPath + 'images/layout/TransformTool.svg' } });
+        button.popup = TransformToolPopup;
+        return button;
+    }
+}

package/dist/elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.d.ts

@@ -0,0 +1,31 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class TransformToolPopup extends BaseCustomWebComponentConstructorAppend {
+    private _designerView;
+    private _previousSelectionRect;
+    private _selectionChanged;
+    private _relativeButton;
+    private _absoluteButton;
+    private _applyButton;
+    private _inputX;
+    private _inputY;
+    private _inputR;
+    private _originTopLeft;
+    private _originTopMid;
+    private _originTopRight;
+    private _originMidLeft;
+    private _originMidMid;
+    private _originMidRight;
+    private _originBotLeft;
+    private _originBotMid;
+    private _originBotRight;
+    private _transformMode;
+    private _transformOrigin;
+    static style: CSSStyleSheet;
+    static template: HTMLTemplateElement;
+    constructor();
+    private _changePositionMode;
+    private _applyTransform;
+    private _calculateTransformOriginPosition;
+    private _checkOrigin;
+    private _calculateTransform;
+}