@node-projects/web-component-designer 0.0.84 → 0.0.85

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

@@ -1,109 +1,109 @@
-import { DomConverter } from '../../widgets/designerView/DomConverter.js';
-import { combineTransforms } from '../../helper/TransformHelper.js';
-import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.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;
-        return true;
-    }
-    canLeave(container, items) {
-        return true;
-    }
-    getElementOffset(container, designItem) {
-        return container.element.getBoundingClientRect();
-    }
-    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 };
-    }
-    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 filterdItems = filterChildPlaceItems(items);
-        //TODO: -> what is if a transform already exists -> backup existing style.?
-        for (const designItem of filterdItems) {
-            const newTransform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
-            combineTransforms(designItem.element, designItem.styles.get('transform'), newTransform);
-        }
-    }
-    enterContainer(container, items) {
-        let filterdItems = filterChildPlaceItems(items);
-        for (let i of filterdItems) {
-            if (i.lastContainerSize) {
-                if (!i.styles.has('width'))
-                    i.setStyle('width', i.lastContainerSize.width + 'px');
-                if (!i.styles.has('height'))
-                    i.setStyle('height', i.lastContainerSize.height + 'px');
-            }
-        }
-    }
-    leaveContainer(container, items) {
-    }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
-        let filterdItems = filterChildPlaceItems(items);
-        for (const designItem of filterdItems) {
-            designItem.element.style.transform = designItem.styles.get('transform') ?? '';
-            placeDesignItem(container, designItem, track, 'position');
-        }
-    }
-}
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { combineTransforms } from '../../helper/TransformHelper.js';
+import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.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;
+        return true;
+    }
+    canLeave(container, items) {
+        return true;
+    }
+    getElementOffset(container, designItem) {
+        return container.element.getBoundingClientRect();
+    }
+    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 };
+    }
+    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 filterdItems = filterChildPlaceItems(items);
+        //TODO: -> what is if a transform already exists -> backup existing style.?
+        for (const designItem of filterdItems) {
+            const newTransform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
+            combineTransforms(designItem.element, designItem.styles.get('transform'), newTransform);
+        }
+    }
+    enterContainer(container, items) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (let i of filterdItems) {
+            if (i.lastContainerSize) {
+                if (!i.styles.has('width'))
+                    i.setStyle('width', i.lastContainerSize.width + 'px');
+                if (!i.styles.has('height'))
+                    i.setStyle('height', i.lastContainerSize.height + 'px');
+            }
+        }
+    }
+    leaveContainer(container, items) {
+    }
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
+        let filterdItems = filterChildPlaceItems(items);
+        for (const designItem of filterdItems) {
+            designItem.element.style.transform = designItem.styles.get('transform') ?? '';
+            placeDesignItem(container, designItem, track, 'position');
+        }
+    }
+}

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

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

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

@@ -1,42 +1,42 @@
-export class FlexBoxPlacementService {
-    enterContainer(container, items) {
-        for (let i of items) {
-            i.removeStyle("position");
-            i.removeStyle("left");
-            i.removeStyle("top");
-            i.removeStyle("right");
-            i.removeStyle("transform");
-        }
-    }
-    leaveContainer(container, items) {
-    }
-    serviceForContainer(container, containerStyle) {
-        if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex')
-            return true;
-        return false;
-    }
-    canEnter(container, items) {
-        return true;
-    }
-    canLeave(container, items) {
-        return true;
-    }
-    getElementOffset(container, designItem) {
-        return container.element.getBoundingClientRect();
-    }
-    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        return null;
-    }
-    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        /*let direction = getComputedStyle(container.element).flexDirection;
-        
-        const pos = (<IDesignerCanvas><unknown>placementView).getNormalizedEventCoordinates(event);
-        const posElement = (<IDesignerCanvas><unknown>placementView).getNormalizedElementCoordinates(items[0].element)
-    
-        for (let e of container.element.children) {
-    
-        }*/
-    }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-    }
-}
+export class FlexBoxPlacementService {
+    enterContainer(container, items) {
+        for (let i of items) {
+            i.removeStyle("position");
+            i.removeStyle("left");
+            i.removeStyle("top");
+            i.removeStyle("right");
+            i.removeStyle("transform");
+        }
+    }
+    leaveContainer(container, items) {
+    }
+    serviceForContainer(container, containerStyle) {
+        if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex')
+            return true;
+        return false;
+    }
+    canEnter(container, items) {
+        return true;
+    }
+    canLeave(container, items) {
+        return true;
+    }
+    getElementOffset(container, designItem) {
+        return container.element.getBoundingClientRect();
+    }
+    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        return null;
+    }
+    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        /*let direction = getComputedStyle(container.element).flexDirection;
+        
+        const pos = (<IDesignerCanvas><unknown>placementView).getNormalizedEventCoordinates(event);
+        const posElement = (<IDesignerCanvas><unknown>placementView).getNormalizedElementCoordinates(items[0].element)
+    
+        for (let e of container.element.children) {
+    
+        }*/
+    }
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    }
+}

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

@@ -1,15 +1,15 @@
-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 {
-    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
-    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    canEnter(container: IDesignItem, items: 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;
-    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 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 {
+    enterContainer(container: IDesignItem, items: IDesignItem[]): void;
+    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    canEnter(container: IDesignItem, items: 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;
+    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;
+}

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

@@ -1,99 +1,99 @@
-import { CalculateGridInformation } from '../../helper/GridHelper.js';
-import { pointInRect } from '../../helper/Helper.js';
-import { DefaultPlacementService } from './DefaultPlacementService';
-export class GridPlacementService {
-    enterContainer(container, items) {
-        for (let i of items) {
-            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;
-    }
-    canEnter(container, items) {
-        return true;
-    }
-    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);
-    }
-    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        const gridInformation = CalculateGridInformation(container);
-        const pos = placementView.getNormalizedEventCoordinates(event);
-        const posElement = placementView.getNormalizedElementCoordinates(items[0].element);
-        let row = 0;
-        let column = 0;
-        if (!pointInRect(pos, posElement)) {
-            row = 0;
-            for (let cellRow of gridInformation.cells) {
-                column = 0;
-                for (let cell of cellRow) {
-                    if (pointInRect(pos, cell)) {
-                        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;
-                            items[0].element.style.gridRow = row + 1;
-                        }
-                    }
-                    column++;
-                }
-                row++;
-            }
-        }
-        placementView.extensionManager.refreshAllExtensions([container]);
-    }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        const gridInformation = CalculateGridInformation(container);
-        const pos = placementView.getNormalizedEventCoordinates(event);
-        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)) {
-                    if (cell.name) {
-                        items[0].removeStyle('grid-column');
-                        items[0].removeStyle('grid-row');
-                        items[0].setStyle('grid-area', cell.name);
-                    }
-                    else {
-                        items[0].removeStyle('grid-area');
-                        items[0].setStyle('grid-column', column + 1);
-                        items[0].setStyle('grid-row', row + 1);
-                    }
-                }
-                column++;
-            }
-            row++;
-        }
-        placementView.extensionManager.refreshAllExtensions([container]);
-    }
-}
+import { CalculateGridInformation } from '../../helper/GridHelper.js';
+import { pointInRect } from '../../helper/Helper.js';
+import { DefaultPlacementService } from './DefaultPlacementService';
+export class GridPlacementService {
+    enterContainer(container, items) {
+        for (let i of items) {
+            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;
+    }
+    canEnter(container, items) {
+        return true;
+    }
+    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);
+    }
+    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const gridInformation = CalculateGridInformation(container);
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        const posElement = placementView.getNormalizedElementCoordinates(items[0].element);
+        let row = 0;
+        let column = 0;
+        if (!pointInRect(pos, posElement)) {
+            row = 0;
+            for (let cellRow of gridInformation.cells) {
+                column = 0;
+                for (let cell of cellRow) {
+                    if (pointInRect(pos, cell)) {
+                        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;
+                            items[0].element.style.gridRow = row + 1;
+                        }
+                    }
+                    column++;
+                }
+                row++;
+            }
+        }
+        placementView.extensionManager.refreshAllExtensions([container]);
+    }
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const gridInformation = CalculateGridInformation(container);
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        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)) {
+                    if (cell.name) {
+                        items[0].removeStyle('grid-column');
+                        items[0].removeStyle('grid-row');
+                        items[0].setStyle('grid-area', cell.name);
+                    }
+                    else {
+                        items[0].removeStyle('grid-area');
+                        items[0].setStyle('grid-column', column + 1);
+                        items[0].setStyle('grid-row', row + 1);
+                    }
+                }
+                column++;
+            }
+            row++;
+        }
+        placementView.extensionManager.refreshAllExtensions([container]);
+    }
+}

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

@@ -1,15 +1,15 @@
-import { IService } from "../IService";
-import { IDesignItem } from "../../item/IDesignItem";
-import { IPlacementView } from "../../widgets/designerView/IPlacementView";
-import { IPoint } from "../../../interfaces/IPoint";
-export interface IPlacementService extends IService {
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): any;
-    canEnter(container: IDesignItem, items: IDesignItem[]): any;
-    canLeave(container: IDesignItem, items: IDesignItem[]): any;
-    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;
-    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;
-}
+import { IService } from "../IService";
+import { IDesignItem } from "../../item/IDesignItem";
+import { IPlacementView } from "../../widgets/designerView/IPlacementView";
+import { IPoint } from "../../../interfaces/IPoint";
+export interface IPlacementService extends IService {
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): any;
+    canEnter(container: IDesignItem, items: IDesignItem[]): any;
+    canLeave(container: IDesignItem, items: IDesignItem[]): any;
+    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;
+    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;
+}

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

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

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

@@ -1,12 +1,12 @@
-import { IService } from "../IService";
-import { IDesignItem } from "../../item/IDesignItem";
-import { IRect } from "../../../interfaces/IRect.js";
-export interface ISnaplinesProviderService extends IService {
-    provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
-        outerRect: DOMRect;
-        positionsH: [number, IRect][];
-        positionsMiddleH: [number, IRect][];
-        positionsV: [number, IRect][];
-        positionsMiddleV: [number, IRect][];
-    };
-}
+import { IService } from "../IService";
+import { IDesignItem } from "../../item/IDesignItem";
+import { IRect } from "../../../interfaces/IRect.js";
+export interface ISnaplinesProviderService extends IService {
+    provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
+        outerRect: DOMRect;
+        positionsH: [number, IRect][];
+        positionsMiddleH: [number, IRect][];
+        positionsV: [number, IRect][];
+        positionsMiddleV: [number, IRect][];
+    };
+}

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

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