@node-projects/web-component-designer 0.0.52 → 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);
@@ -16,9 +29,12 @@ export function placeDesignItem(container, designItem, offset, mode) {
         let oldTop = null;
         let oldBottom = null;
         let containerLeft = 0;
+        //@ts-ignore
         let containerRight = 0;
         let containerTop = 0;
+        //@ts-ignore
         let containerBottom = 0;
+        let hasPositionedLayout = false;
         if (computedStyleMovedElement.position === 'relative' || computedStyleMovedElement.position === 'absolute') {
             oldLeft = parseFloat(movedElement.style.left);
             oldLeft = Number.isNaN(oldLeft) ? null : oldLeft;
@@ -28,6 +44,7 @@ export function placeDesignItem(container, designItem, offset, mode) {
             oldRight = Number.isNaN(oldRight) ? null : oldRight;
             oldBottom = parseFloat(movedElement.style.bottom);
             oldBottom = Number.isNaN(oldBottom) ? null : oldBottom;
+            hasPositionedLayout = true;
         }
         else {
             if (positionedContainerElement !== container.element) {
@@ -39,10 +56,10 @@ export function placeDesignItem(container, designItem, offset, mode) {
                 containerBottom = elementRect.bottom - posContainerRect.bottom;
             }
         }
-        designItem.element.style.transform = designItem.styles.get('transform') ?? '';
-        designItem.setStyle('position', 'absolute');
-        designItem.setStyle('left', (offset.x + oldLeft + containerLeft) + "px");
-        designItem.setStyle('top', (offset.y + oldTop + containerTop) + "px");
+        if (!hasPositionedLayout)
+            designItem.setStyle('position', 'absolute');
+        designItem.setStyle('left', (offset.x + (oldLeft ?? 0) + containerLeft) + "px");
+        designItem.setStyle('top', (offset.y + (oldTop ?? 0) + containerTop) + "px");
     }
 }
 /*function placeViaPosition(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding') {

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,18 +100,10 @@ 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 movedElement = designItem.element;
-            let oldLeft = parseFloat((<HTMLElement>movedElement).style.left);
-            oldLeft = Number.isNaN(oldLeft) ? 0 : oldLeft;
-            let oldTop = parseFloat((<HTMLElement>movedElement).style.top);
-            oldTop = Number.isNaN(oldTop) ? 0 : oldTop;*/
-            //let oldPosition = movedElement.style.position;
+        let filterdItems = filterChildPlaceItems(items);
+        for (const designItem of filterdItems) {
             designItem.element.style.transform = designItem.styles.get('transform') ?? '';
             placeDesignItem(container, designItem, track, 'position');
-            /*designItem.setStyle('position', 'absolute');
-            designItem.setStyle('left', (track.x + oldLeft) + "px");
-            designItem.setStyle('top', (track.y + oldTop) + "px");*/
         }
     }
 }

package/package.json

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