@node-projects/web-component-designer 0.0.216 → 0.0.218

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -1,128 +1,128 @@
-import { CommandType } from "../../../commandHandling/CommandType.js";
-import { ArrangeHelper } from "../../helper/ArrangeHelper.js";
-import { Orientation } from "../../../enums/Orientation.js";
-export class DefaultModelCommandService {
-    canExecuteCommand(designerCanvas, command) {
-        if (command.type == CommandType.moveBackward ||
-            command.type == CommandType.moveForward ||
-            command.type == CommandType.moveToBack ||
-            command.type == CommandType.moveToFront)
-            return designerCanvas.instanceServiceContainer.selectionService.primarySelection != null;
-        if (command.type == CommandType.arrangeBottom ||
-            command.type == CommandType.arrangeCenter ||
-            command.type == CommandType.arrangeLeft ||
-            command.type == CommandType.arrangeMiddle ||
-            command.type == CommandType.arrangeRight ||
-            command.type == CommandType.arrangeTop ||
-            command.type == CommandType.unifyHeight ||
-            command.type == CommandType.unifyWidth)
-            return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1;
-        return null;
-    }
-    async executeCommand(designerCanvas, command) {
-        let sel = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
-        const selection = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
-        if (command.type == CommandType.moveBackward) {
-            let idx = sel.parent.indexOf(sel) - 1;
-            if (idx >= 0)
-                sel.parent.insertChild(sel, idx);
-        }
-        else if (command.type == CommandType.moveForward) {
-            let idx = sel.parent.indexOf(sel) + 1;
-            if (idx < sel.parent.childCount)
-                sel.parent.insertChild(sel, idx);
-        }
-        else if (command.type == CommandType.moveToBack)
-            sel.parent.insertChild(sel, 0);
-        else if (command.type == CommandType.moveToFront)
-            sel.parent.insertChild(sel);
-        else if (command.type == CommandType.arrangeTop) {
-            ArrangeHelper.arrangeElements(Orientation.TOP, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.arrangeRight) {
-            ArrangeHelper.arrangeElements(Orientation.RIGHT, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.arrangeLeft) {
-            ArrangeHelper.arrangeElements(Orientation.LEFT, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.arrangeBottom) {
-            ArrangeHelper.arrangeElements(Orientation.BOTTOM, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.arrangeCenter) {
-            ArrangeHelper.arrangeElements(Orientation.HORIZONTAL_CENTER, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.arrangeMiddle) {
-            ArrangeHelper.arrangeElements(Orientation.VERTICAL_CENTER, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-        }
-        else if (command.type == CommandType.unifyHeight) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyHeight');
-            const height = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('height');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('height', height);
-            }
-            grp.commit();
-        }
-        else if (command.type == CommandType.unifyWidth) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyWidth');
-            const width = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('width');
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('width', width);
-            }
-            grp.commit();
-        }
-        else if (command.type == CommandType.rotateCounterClockwise) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateCounterClockwise');
-            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('transform');
-            let degree = 0;
-            let rotation = "";
-            if (trf != null) {
-                try {
-                    if (trf.includes('-'))
-                        degree = parseInt(trf.match(/\d+/)[0]) * -1;
-                    else
-                        degree = parseInt(trf.match(/\d+/)[0]);
-                    rotation = "rotate(" + (degree - 90) + "deg)";
-                }
-                catch {
-                    rotation = "rotate(-90deg)";
-                }
-            }
-            else {
-                rotation = "rotate(-90deg)";
-            }
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('transform', rotation);
-            }
-            grp.commit();
-        }
-        else if (command.type == CommandType.rotateClockwise) {
-            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateClockwise');
-            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('transform');
-            let degree = 0;
-            let rotation = "";
-            if (trf != null) {
-                try {
-                    if (trf.includes('-'))
-                        degree = parseInt(trf.match(/\d+/)[0]) * -1;
-                    else
-                        degree = parseInt(trf.match(/\d+/)[0]);
-                    rotation = "rotate(" + (degree + 90) + "deg)";
-                }
-                catch {
-                    rotation = "rotate(90deg)";
-                }
-            }
-            else {
-                rotation = "rotate(90deg)";
-            }
-            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                s.setStyle('transform', rotation);
-            }
-            grp.commit();
-        }
-        else
-            return null;
-        designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(selection);
-        return true;
-    }
-}
+import { CommandType } from "../../../commandHandling/CommandType.js";
+import { ArrangeHelper } from "../../helper/ArrangeHelper.js";
+import { Orientation } from "../../../enums/Orientation.js";
+export class DefaultModelCommandService {
+    canExecuteCommand(designerCanvas, command) {
+        if (command.type == CommandType.moveBackward ||
+            command.type == CommandType.moveForward ||
+            command.type == CommandType.moveToBack ||
+            command.type == CommandType.moveToFront)
+            return designerCanvas.instanceServiceContainer.selectionService.primarySelection != null;
+        if (command.type == CommandType.arrangeBottom ||
+            command.type == CommandType.arrangeCenter ||
+            command.type == CommandType.arrangeLeft ||
+            command.type == CommandType.arrangeMiddle ||
+            command.type == CommandType.arrangeRight ||
+            command.type == CommandType.arrangeTop ||
+            command.type == CommandType.unifyHeight ||
+            command.type == CommandType.unifyWidth)
+            return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1;
+        return null;
+    }
+    async executeCommand(designerCanvas, command) {
+        let sel = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
+        const selection = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
+        if (command.type == CommandType.moveBackward) {
+            let idx = sel.parent.indexOf(sel) - 1;
+            if (idx >= 0)
+                sel.parent.insertChild(sel, idx);
+        }
+        else if (command.type == CommandType.moveForward) {
+            let idx = sel.parent.indexOf(sel) + 1;
+            if (idx < sel.parent.childCount)
+                sel.parent.insertChild(sel, idx);
+        }
+        else if (command.type == CommandType.moveToBack)
+            sel.parent.insertChild(sel, 0);
+        else if (command.type == CommandType.moveToFront)
+            sel.parent.insertChild(sel);
+        else if (command.type == CommandType.arrangeTop) {
+            ArrangeHelper.arrangeElements(Orientation.TOP, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+        }
+        else if (command.type == CommandType.arrangeRight) {
+            ArrangeHelper.arrangeElements(Orientation.RIGHT, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+        }
+        else if (command.type == CommandType.arrangeLeft) {
+            ArrangeHelper.arrangeElements(Orientation.LEFT, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+        }
+        else if (command.type == CommandType.arrangeBottom) {
+            ArrangeHelper.arrangeElements(Orientation.BOTTOM, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+        }
+        else if (command.type == CommandType.arrangeCenter) {
+            ArrangeHelper.arrangeElements(Orientation.HORIZONTAL_CENTER, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+        }
+        else if (command.type == CommandType.arrangeMiddle) {
+            ArrangeHelper.arrangeElements(Orientation.VERTICAL_CENTER, designerCanvas, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+        }
+        else if (command.type == CommandType.unifyHeight) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyHeight');
+            const height = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('height');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('height', height);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.unifyWidth) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyWidth');
+            const width = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('width');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('width', width);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.rotateCounterClockwise) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateCounterClockwise');
+            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('transform');
+            let degree = 0;
+            let rotation = "";
+            if (trf != null) {
+                try {
+                    if (trf.includes('-'))
+                        degree = parseInt(trf.match(/\d+/)[0]) * -1;
+                    else
+                        degree = parseInt(trf.match(/\d+/)[0]);
+                    rotation = "rotate(" + (degree - 90) + "deg)";
+                }
+                catch {
+                    rotation = "rotate(-90deg)";
+                }
+            }
+            else {
+                rotation = "rotate(-90deg)";
+            }
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('transform', rotation);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.rotateClockwise) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateClockwise');
+            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('transform');
+            let degree = 0;
+            let rotation = "";
+            if (trf != null) {
+                try {
+                    if (trf.includes('-'))
+                        degree = parseInt(trf.match(/\d+/)[0]) * -1;
+                    else
+                        degree = parseInt(trf.match(/\d+/)[0]);
+                    rotation = "rotate(" + (degree + 90) + "deg)";
+                }
+                catch {
+                    rotation = "rotate(90deg)";
+                }
+            }
+            else {
+                rotation = "rotate(90deg)";
+            }
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('transform', rotation);
+            }
+            grp.commit();
+        }
+        else
+            return null;
+        designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(selection);
+        return true;
+    }
+}

package/dist/elements/services/modelCommandService/IModelCommandService.d.ts

@@ -1,7 +1,7 @@
-import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
-import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
-import { IService } from '../IService.js';
-export interface IModelCommandService extends IService {
-    canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): boolean | null;
-    executeCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): any;
-}
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
+import { IService } from '../IService.js';
+export interface IModelCommandService extends IService {
+    canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): boolean | null;
+    executeCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): any;
+}

package/dist/elements/services/modelCommandService/IModelCommandService.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/elements/services/placementService/DefaultPlacementService.d.ts

@@ -1,18 +1,18 @@
-import type { IPoint } from '../../../interfaces/IPoint.js';
-import type { IPlacementService } from './IPlacementService.js';
-import type { IDesignItem } from '../../item/IDesignItem.js';
-import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
-export declare class DefaultPlacementService implements IPlacementService {
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
-    canEnterByDrop(container: IDesignItem): boolean;
-    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
-    getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    private calculateTrack;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
-    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
-    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-}
+import type { IPoint } from '../../../interfaces/IPoint.js';
+import type { IPlacementService } from './IPlacementService.js';
+import type { IDesignItem } from '../../item/IDesignItem.js';
+import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
+export declare class DefaultPlacementService implements IPlacementService {
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canEnterByDrop(container: IDesignItem): boolean;
+    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
+    getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
+    private calculateTrack;
+    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
+    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
+    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+}

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -1,134 +1,134 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter.js';
-import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
-import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
-import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
-export class DefaultPlacementService {
-    serviceForContainer(container, containerStyle) {
-        if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
-            containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
-            return false;
-        return true;
-    }
-    canEnter(container, items) {
-        if (DomConverter.IsSelfClosingElement(container.element.localName))
-            return false;
-        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
-            return false;
-        if (!items.every(x => !x.element.contains(container.element)))
-            return false;
-        return true;
-    }
-    canEnterByDrop(container) {
-        if (DomConverter.IsSelfClosingElement(container.element.localName))
-            return false;
-        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
-            return false;
-        return true;
-    }
-    canLeave(container, items) {
-        return true;
-    }
-    getElementOffset(container, designItem) {
-        return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
-    }
-    calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
-        let trackX = newPoint.x - startPoint.x;
-        let trackY = newPoint.y - startPoint.y;
-        if (!event.ctrlKey) {
-            if (placementView.alignOnGrid) {
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
-            }
-            else if (placementView.alignOnSnap) {
-                let rect = item.element.getBoundingClientRect();
-                let newPos = placementView.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / placementView.scaleFactor, height: rect.height / placementView.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
-                if (newPos.x !== null) {
-                    trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
-                }
-                else {
-                    trackX = Math.round(trackX);
-                }
-                if (newPos.y !== null) {
-                    trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y);
-                }
-                else {
-                    trackY = Math.round(trackY);
-                }
-            }
-        }
-        return { x: trackX, y: trackY };
-    }
-    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        let trackX = newPoint.x;
-        let trackY = newPoint.y;
-        if (!event.ctrlKey) {
-            if (placementView.alignOnGrid) {
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
-            }
-            else if (placementView.alignOnSnap) {
-                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
-                if (newPos.x !== null) {
-                    trackX = newPos.x;
-                }
-                else {
-                    trackX = Math.round(trackX);
-                }
-                if (newPos.y !== null) {
-                    trackY = newPos.y;
-                }
-                else {
-                    trackY = Math.round(trackY);
-                }
-            }
-        }
-        return { x: trackX, y: trackY };
-    }
-    startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-    }
-    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        //TODO:, this should revert all undo actions while active
-        //maybe a undo actions returns itself or an id so it could be changed?
-        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
-        let filteredItems = filterChildPlaceItems(items);
-        for (const designItem of filteredItems) {
-            const canvas = designItem.element.closest('#node-projects-designer-canvas-canvas');
-            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.element.parentElement, canvas, true);
-            let transformMatrixParentTransformsCompensated = null;
-            if (originalElementAndAllAncestorsMultipliedMatrix) {
-                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0).matrixTransform(originalElementAndAllAncestorsMultipliedMatrix.inverse());
-            }
-            else {
-                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0);
-            }
-            const translationMatrix = new DOMMatrix().translate(transformMatrixParentTransformsCompensated.x, transformMatrixParentTransformsCompensated.y);
-            combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
-        }
-    }
-    enterContainer(container, items) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (let i of filterdItems) {
-            if (i.lastContainerSize) {
-                if (!i.hasStyle('width'))
-                    i.setStyle('width', i.lastContainerSize.width + 'px');
-                if (!i.hasStyle('height'))
-                    i.setStyle('height', i.lastContainerSize.height + 'px');
-            }
-        }
-    }
-    leaveContainer(container, items) {
-    }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (const designItem of filterdItems) {
-            let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
-            const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
-            designItem.element.style.transform = designItem.getStyle('transform') ?? '';
-            let track = { x: translation.x, y: translation.y };
-            placeDesignItem(container, designItem, { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }, 'position');
-        }
-        for (const item of items) {
-            placementView.extensionManager.removeExtension(item, ExtensionType.Placement);
-        }
-    }
-}
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
+import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
+import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
+export class DefaultPlacementService {
+    serviceForContainer(container, containerStyle) {
+        if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
+            containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
+            return false;
+        return true;
+    }
+    canEnter(container, items) {
+        if (DomConverter.IsSelfClosingElement(container.element.localName))
+            return false;
+        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+            return false;
+        if (!items.every(x => !x.element.contains(container.element)))
+            return false;
+        return true;
+    }
+    canEnterByDrop(container) {
+        if (DomConverter.IsSelfClosingElement(container.element.localName))
+            return false;
+        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+            return false;
+        return true;
+    }
+    canLeave(container, items) {
+        return true;
+    }
+    getElementOffset(container, designItem) {
+        return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
+    }
+    calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
+        let trackX = newPoint.x - startPoint.x;
+        let trackY = newPoint.y - startPoint.y;
+        if (!event.ctrlKey) {
+            if (placementView.alignOnGrid) {
+                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
+                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
+            }
+            else if (placementView.alignOnSnap) {
+                let rect = item.element.getBoundingClientRect();
+                let newPos = placementView.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / placementView.scaleFactor, height: rect.height / placementView.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                if (newPos.x !== null) {
+                    trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
+                }
+                else {
+                    trackX = Math.round(trackX);
+                }
+                if (newPos.y !== null) {
+                    trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y);
+                }
+                else {
+                    trackY = Math.round(trackY);
+                }
+            }
+        }
+        return { x: trackX, y: trackY };
+    }
+    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        let trackX = newPoint.x;
+        let trackY = newPoint.y;
+        if (!event.ctrlKey) {
+            if (placementView.alignOnGrid) {
+                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
+                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
+            }
+            else if (placementView.alignOnSnap) {
+                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                if (newPos.x !== null) {
+                    trackX = newPos.x;
+                }
+                else {
+                    trackX = Math.round(trackX);
+                }
+                if (newPos.y !== null) {
+                    trackY = newPos.y;
+                }
+                else {
+                    trackY = Math.round(trackY);
+                }
+            }
+        }
+        return { x: trackX, y: trackY };
+    }
+    startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    }
+    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        //TODO:, this should revert all undo actions while active
+        //maybe a undo actions returns itself or an id so it could be changed?
+        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
+        let filteredItems = filterChildPlaceItems(items);
+        for (const designItem of filteredItems) {
+            const canvas = designItem.element.closest('#node-projects-designer-canvas-canvas');
+            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.element.parentElement, canvas, true);
+            let transformMatrixParentTransformsCompensated = null;
+            if (originalElementAndAllAncestorsMultipliedMatrix) {
+                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0).matrixTransform(originalElementAndAllAncestorsMultipliedMatrix.inverse());
+            }
+            else {
+                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0);
+            }
+            const translationMatrix = new DOMMatrix().translate(transformMatrixParentTransformsCompensated.x, transformMatrixParentTransformsCompensated.y);
+            combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
+        }
+    }
+    enterContainer(container, items) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (let i of filterdItems) {
+            if (i.lastContainerSize) {
+                if (!i.hasStyle('width'))
+                    i.setStyle('width', i.lastContainerSize.width + 'px');
+                if (!i.hasStyle('height'))
+                    i.setStyle('height', i.lastContainerSize.height + 'px');
+            }
+        }
+    }
+    leaveContainer(container, items) {
+    }
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (const designItem of filterdItems) {
+            let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
+            const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
+            designItem.element.style.transform = designItem.getStyle('transform') ?? '';
+            let track = { x: translation.x, y: translation.y };
+            placeDesignItem(container, designItem, { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }, 'position');
+        }
+        for (const item of items) {
+            placementView.extensionManager.removeExtension(item, ExtensionType.Placement);
+        }
+    }
+}

package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts

@@ -1,17 +1,17 @@
-import { IPoint } from '../../../interfaces/IPoint.js';
-import { IDesignItem } from '../../item/IDesignItem.js';
-import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
-import { IPlacementService } from './IPlacementService.js';
-export declare class FlexBoxPlacementService implements IPlacementService {
-    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
-    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
-    canEnterByDrop(container: IDesignItem): boolean;
-    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
-    getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
-    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-}
+import { IPoint } from '../../../interfaces/IPoint.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
+import { IPlacementService } from './IPlacementService.js';
+export declare class FlexBoxPlacementService implements IPlacementService {
+    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
+    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canEnterByDrop(container: IDesignItem): boolean;
+    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
+    getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
+    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+}