@node-projects/web-component-designer 0.1.0 → 0.1.2

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

@@ -0,0 +1,148 @@
+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;
+        if (command.type == CommandType.rotateCounterClockwise ||
+            command.type == CommandType.rotateClockwise ||
+            command.type == CommandType.mirrorHorizontal ||
+            command.type == CommandType.mirrorVertical)
+            return designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 0;
+        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 if (command.type == CommandType.mirrorHorizontal) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('mirrorHorizontal');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('transform', 'scaleX(-1)');
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.mirrorVertical) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('mirrorHorizontal');
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('transform', 'scaleY(-1)');
+            }
+            grp.commit();
+        }
+        else
+            return null;
+        designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(selection);
+        return true;
+    }
+}
+//TODO: combine transforms, could be easy, add new transform, get the matrix and convert back to simple ones (if possible)

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

@@ -0,0 +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;
+}

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

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

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

@@ -0,0 +1,19 @@
+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;
+    isEnterableContainer(container: IDesignItem): boolean;
+    canEnter(container: IDesignItem, items: 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;
+    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): 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

@@ -0,0 +1,148 @@
+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';
+import { straightenLine } from '../../helper/PathDataPolyfill.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;
+    }
+    isEnterableContainer(container) {
+        if (DomConverter.IsSelfClosingElement(container.element.localName))
+            return false;
+        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+            return false;
+        return true;
+    }
+    canEnter(container, items) {
+        if (!this.isEnterableContainer(container))
+            return false;
+        if (!items.every(x => !x.element.contains(container.element)))
+            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]);
+        if (event.shiftKey) {
+            track = straightenLine({ x: 0, y: 0 }, track, true);
+        }
+        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());
+        }
+    }
+    moveElements(designItems, position, absolute) {
+        //TODO: Check if we set left or right
+        //TODO: Use CSS units
+        for (let d of designItems) {
+            if (position.x)
+                d.setStyle('left', parseInt(d.element.style.left) - position.x + 'px');
+            if (position.y)
+                d.setStyle('top', parseInt(d.element.style.top) - position.y + 'px');
+        }
+        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems);
+    }
+    enterContainer(container, items) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (let i of filterdItems) {
+            container.insertChild(i);
+            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

@@ -0,0 +1,20 @@
+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 {
+    private _basePlacementService;
+    constructor(basePlacementService: IPlacementService);
+    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
+    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    isEnterableContainer(container: IDesignItem): any;
+    canEnter(container: IDesignItem, items: IDesignItem[]): any;
+    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;
+    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
+}

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

@@ -0,0 +1,144 @@
+import { DefaultPlacementService } from './DefaultPlacementService.js';
+export class FlexBoxPlacementService {
+    _basePlacementService;
+    constructor(basePlacementService) {
+        this._basePlacementService = basePlacementService ?? new DefaultPlacementService();
+    }
+    enterContainer(container, items) {
+        for (let i of items) {
+            container.insertChild(i);
+            i.removeStyle("position");
+            i.removeStyle("left");
+            i.removeStyle("top");
+            i.removeStyle("right");
+            i.removeStyle("transform");
+        }
+    }
+    leaveContainer(container, items) {
+        for (let i of items) {
+            if (!i.lastContainerSize) {
+                const rect = i.element.getBoundingClientRect();
+                i.lastContainerSize = { width: rect.width, height: rect.height };
+            }
+        }
+    }
+    serviceForContainer(container, containerStyle) {
+        if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex')
+            return true;
+        return false;
+    }
+    isEnterableContainer(container) {
+        return this._basePlacementService.isEnterableContainer(container);
+    }
+    canEnter(container, items) {
+        return this._basePlacementService.canEnter(container, items);
+    }
+    canLeave(container, items) {
+        return true;
+    }
+    getElementOffset(container, designItem) {
+        return container.element.getBoundingClientRect();
+    }
+    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const defaultPlacementService = container.serviceContainer.getLastServiceWhere('containerService', x => x instanceof DefaultPlacementService);
+        return defaultPlacementService.placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items);
+    }
+    startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    }
+    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        const style = getComputedStyle(container.element);
+        const childrenWithPos = Array.from(container.children()).filter(x => !x.isEmptyTextNode).map(x => [x, placementView.getNormalizedElementCoordinates(x.element)]);
+        if (style.flexDirection == 'row' || style.flexDirection == 'row-reverse') {
+            childrenWithPos.sort(x => x[1].x);
+            let elBefore = null;
+            for (let c of childrenWithPos) {
+                if (c[1].x + c[1].width / 2 < pos.x) {
+                    elBefore = c;
+                    if (style.flexDirection == 'row-reverse')
+                        break;
+                }
+            }
+            let posBefore = childrenWithPos.indexOf(elBefore);
+            let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0]));
+            if (elBefore && elBefore[0] != items[0]) {
+                if (style.flexDirection == 'row-reverse' && posBefore - 1 === posDrag)
+                    return;
+                if (style.flexDirection == 'row' && posBefore + 1 === posDrag)
+                    return;
+                const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
+                let cg = items[0].openGroup('move in flexbox');
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'row-reverse')
+                    elBefore[0].insertAdjacentElement(items[0], 'beforebegin');
+                else
+                    elBefore[0].insertAdjacentElement(items[0], 'afterend');
+                cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
+            }
+            else if (elBefore == null) {
+                if (posDrag == 0)
+                    return;
+                const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
+                let cg = items[0].openGroup('move in flexbox');
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'row-reverse')
+                    container.insertChild(items[0]);
+                else
+                    container.insertChild(items[0], 0);
+                cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
+            }
+        }
+        else if (style.flexDirection == 'column' || style.flexDirection == 'column-reverse') {
+            childrenWithPos.sort(x => x[1].y);
+            let elBefore = null;
+            for (let c of childrenWithPos) {
+                if (c[1].y + c[1].height / 2 < pos.y) {
+                    elBefore = c;
+                    if (style.flexDirection == 'column-reverse')
+                        break;
+                }
+            }
+            let posBefore = childrenWithPos.indexOf(elBefore);
+            let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0]));
+            if (elBefore && elBefore[0] != items[0]) {
+                if (style.flexDirection == 'column-reverse' && posBefore - 1 === posDrag)
+                    return;
+                if (style.flexDirection == 'column' && posBefore + 1 === posDrag)
+                    return;
+                const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
+                let cg = items[0].openGroup('move in flexbox');
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'column-reverse')
+                    elBefore[0].insertAdjacentElement(items[0], 'beforebegin');
+                else
+                    elBefore[0].insertAdjacentElement(items[0], 'afterend');
+                cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
+            }
+            else if (elBefore == null) {
+                if (posDrag == 0)
+                    return;
+                const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
+                let cg = items[0].openGroup('move in flexbox');
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'column-reverse')
+                    container.insertChild(items[0]);
+                else
+                    container.insertChild(items[0], 0);
+                cg.commit();
+                container.instanceServiceContainer.selectionService.setSelectedElements(sel);
+            }
+        }
+        placementView.extensionManager.refreshAllExtensions([container]);
+    }
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    }
+    moveElements(designItems, position, absolute) {
+    }
+}

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

@@ -0,0 +1,20 @@
+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 GridPlacementService implements IPlacementService {
+    private _basePlacementService;
+    constructor(basePlacementService: IPlacementService);
+    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
+    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    isEnterableContainer(container: IDesignItem): any;
+    canEnter(container: IDesignItem, items: IDesignItem[]): any;
+    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;
+    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
+}

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

@@ -0,0 +1,117 @@
+import { calculateGridInformation, getElementGridInformation } from '../../helper/GridHelper.js';
+import { pointInRect } from '../../helper/Helper.js';
+import { DefaultPlacementService } from './DefaultPlacementService.js';
+export class GridPlacementService {
+    _basePlacementService;
+    constructor(basePlacementService) {
+        this._basePlacementService = basePlacementService ?? new DefaultPlacementService();
+    }
+    enterContainer(container, items) {
+        for (let i of items) {
+            container.insertChild(i);
+            i.removeStyle("position");
+            i.removeStyle("left");
+            i.removeStyle("top");
+            i.removeStyle("right");
+            i.removeStyle("width");
+            i.removeStyle("height");
+            i.removeStyle("transform");
+        }
+    }
+    leaveContainer(container, items) {
+        for (let i of items) {
+            if (!i.lastContainerSize) {
+                const rect = i.element.getBoundingClientRect();
+                i.lastContainerSize = { width: rect.width, height: rect.height };
+            }
+        }
+    }
+    serviceForContainer(container, containerStyle) {
+        if (containerStyle.display == 'grid' || containerStyle.display == 'inline-grid')
+            return true;
+        return false;
+    }
+    isEnterableContainer(container) {
+        return this._basePlacementService.isEnterableContainer(container);
+    }
+    canEnter(container, items) {
+        return this._basePlacementService.canEnter(container, items);
+    }
+    canLeave(container, items) {
+        return true;
+    }
+    getElementOffset(container, designItem) {
+        return container.element.getBoundingClientRect();
+    }
+    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const defaultPlacementService = container.serviceContainer.getLastServiceWhere('containerService', x => x instanceof DefaultPlacementService);
+        return defaultPlacementService.placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items);
+    }
+    startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    }
+    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const gridInformation = calculateGridInformation(container);
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        //pos.x -= offsetInControl.x;
+        //pos.y -= offsetInControl.y;
+        let row = 0;
+        let column = 0;
+        for (let cellRow of gridInformation.cells) {
+            column = 0;
+            for (let cell of cellRow) {
+                if (pointInRect(pos, cell)) {
+                    let info = getElementGridInformation(items[0].element);
+                    if (cell.name) {
+                        items[0].element.style.gridColumn = '';
+                        items[0].element.style.gridRow = '';
+                        items[0].element.style.gridArea = cell.name;
+                    }
+                    else {
+                        items[0].element.style.gridArea = '';
+                        items[0].element.style.gridColumn = (column + 1) + (info.colSpan > 1 ? ' / span ' + info.colSpan : '');
+                        items[0].element.style.gridRow = (row + 1) + (info.rowSpan > 1 ? ' / span ' + info.rowSpan : '');
+                    }
+                }
+                column++;
+            }
+            row++;
+        }
+        placementView.extensionManager.refreshAllExtensions([container]);
+    }
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const gridInformation = calculateGridInformation(container);
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        //pos.x -= offsetInControl.x;
+        //pos.y -= offsetInControl.y;
+        let row = 0;
+        let column = 0;
+        row = 0;
+        for (let cellRow of gridInformation.cells) {
+            column = 0;
+            for (let cell of cellRow) {
+                if (pointInRect(pos, cell)) {
+                    let info = getElementGridInformation(items[0].element);
+                    //Grid Area is shorthand for grid row/column, to make undo work correctly we need to set befor and after clear
+                    if (cell.name) {
+                        items[0].setStyle('grid-area', cell.name);
+                        items[0].removeStyle('grid-column');
+                        items[0].removeStyle('grid-row');
+                        items[0].setStyle('grid-area', cell.name);
+                    }
+                    else {
+                        items[0].setStyle('grid-column', (column + 1) + (info.colSpan > 1 ? ' / span ' + info.colSpan : ''));
+                        items[0].setStyle('grid-row', (row + 1) + (info.rowSpan > 1 ? ' / span ' + info.rowSpan : ''));
+                        items[0].removeStyle('grid-area');
+                        items[0].setStyle('grid-column', (column + 1) + (info.colSpan > 1 ? ' / span ' + info.colSpan : ''));
+                        items[0].setStyle('grid-row', (row + 1) + (info.rowSpan > 1 ? ' / span ' + info.rowSpan : ''));
+                    }
+                }
+                column++;
+            }
+            row++;
+        }
+        placementView.extensionManager.refreshAllExtensions([container]);
+    }
+    moveElements(designItems, position, absolute) {
+    }
+}

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

@@ -0,0 +1,18 @@
+import { IService } from '../IService.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
+import { IPoint } from '../../../interfaces/IPoint.js';
+export interface IPlacementService extends IService {
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    isEnterableContainer(container: IDesignItem): boolean;
+    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
+    enterContainer(container: IDesignItem, items: IDesignItem[]): any;
+    leaveContainer(container: IDesignItem, items: IDesignItem[]): any;
+    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[]): any;
+    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
+    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
+    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): any;
+}

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

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