@node-projects/web-component-designer 0.0.55 → 0.0.56

package/dist/elements/helper/LayoutHelper.d.ts

@@ -1,3 +1,4 @@
 import { IPoint } from "../../interfaces/IPoint.js";
 import { IDesignItem } from "../item/IDesignItem.js";
+export declare function filterChildPlaceItems(items: IDesignItem[]): IDesignItem[];
 export declare function placeDesignItem(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding'): void;

package/dist/elements/helper/LayoutHelper.js

@@ -1,6 +1,19 @@
 //todo
 //this function should return the correct property to change a layout, for example left/right when left or right is used,
 //maybe margin on grid? or transform??
+export function filterChildPlaceItems(items) {
+    const filterdPlaceItems = [];
+    next: for (let i of items) {
+        let par = i.parent;
+        while (par != null && !par.isRootItem) {
+            if (items.indexOf(par) >= 0)
+                continue next;
+            par = par.parent;
+        }
+        filterdPlaceItems.push(i);
+    }
+    return filterdPlaceItems;
+}
 export function placeDesignItem(container, designItem, offset, mode) {
     const movedElement = designItem.element;
     const computedStyleMovedElement = getComputedStyle(movedElement);

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

@@ -1,6 +1,6 @@
 import { DomConverter } from '../../widgets/designerView/DomConverter.js';
 import { combineTransforms } from '../../helper/TransformHelper.js';
-import { placeDesignItem } from '../../helper/LayoutHelper.js';
+import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
 export class DefaultPlacementService {
     serviceForContainer(container) {
         if (container.element.style.display === 'grid' || container.element.style.display === 'inline-grid' ||
@@ -78,14 +78,16 @@ export class DefaultPlacementService {
         //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 items) {
+        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) {
-        for (let i of 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');
@@ -98,7 +100,8 @@ export class DefaultPlacementService {
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
-        for (const designItem of items) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (const designItem of filterdItems) {
             designItem.element.style.transform = designItem.styles.get('transform') ?? '';
             placeDesignItem(container, designItem, track, 'position');
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",