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

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

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

package/dist/elements/helper/LayoutHelper.js

@@ -1,4 +1,54 @@
-"use strict";
 //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 placeDesignItem(container, designItem, offset, mode) {
+    const movedElement = designItem.element;
+    const computedStyleMovedElement = getComputedStyle(movedElement);
+    if (mode === 'position') {
+        let positionedContainerElement = container.element;
+        let computedStylePositionedContainer = getComputedStyle(container.element);
+        while (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute') {
+            positionedContainerElement = positionedContainerElement.parentElement;
+            computedStylePositionedContainer = getComputedStyle(positionedContainerElement);
+        }
+        let oldLeft = null;
+        let oldRight = null;
+        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;
+            oldTop = parseFloat(movedElement.style.top);
+            oldTop = Number.isNaN(oldTop) ? null : oldTop;
+            oldRight = parseFloat(movedElement.style.right);
+            oldRight = Number.isNaN(oldRight) ? null : oldRight;
+            oldBottom = parseFloat(movedElement.style.bottom);
+            oldBottom = Number.isNaN(oldBottom) ? null : oldBottom;
+            hasPositionedLayout = true;
+        }
+        else {
+            if (positionedContainerElement !== container.element) {
+                let posContainerRect = positionedContainerElement.getBoundingClientRect();
+                let elementRect = designItem.element.getBoundingClientRect();
+                containerLeft = elementRect.left - posContainerRect.left;
+                containerRight = elementRect.right - posContainerRect.right;
+                containerTop = elementRect.top - posContainerRect.top;
+                containerBottom = elementRect.bottom - posContainerRect.bottom;
+            }
+        }
+        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/helper/TransformHelper.d.ts

@@ -0,0 +1 @@
+export declare function combineTransforms(element: HTMLElement, transform1: string, transform2: string): void;

package/dist/elements/helper/TransformHelper.js

@@ -0,0 +1,12 @@
+export function combineTransforms(element, transform1, transform2) {
+    if (transform1 == null || transform1 == '') {
+        element.style.transform = transform2;
+        return;
+    }
+    element.style.transform = transform1;
+    const matrix1 = new DOMMatrix(window.getComputedStyle(element).transform);
+    element.style.transform = transform2;
+    const matrix2 = new DOMMatrix(window.getComputedStyle(element).transform);
+    const result = matrix2.multiply(matrix1);
+    element.style.transform = result.toString();
+}

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

@@ -1,4 +1,6 @@
 import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { combineTransforms } from '../../helper/TransformHelper.js';
+import { placeDesignItem } from '../../helper/LayoutHelper.js';
 export class DefaultPlacementService {
     serviceForContainer(container) {
         if (container.element.style.display === 'grid' || container.element.style.display === 'inline-grid' ||
@@ -78,14 +80,17 @@ export class DefaultPlacementService {
         let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         //TODO: -> what is if a transform already exists -> backup existing style.?
         for (const designItem of items) {
-            designItem.element.style.transform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
+            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) {
             if (i.lastContainerSize) {
-                i.setStyle('width', i.lastContainerSize.width + 'px');
-                i.setStyle('height', i.lastContainerSize.height + 'px');
+                if (!i.styles.has('width'))
+                    i.setStyle('width', i.lastContainerSize.width + 'px');
+                if (!i.styles.has('height'))
+                    i.setStyle('height', i.lastContainerSize.height + 'px');
             }
         }
     }
@@ -94,16 +99,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 movedElement = designItem.element;
-            let oldLeft = parseFloat(movedElement.style.left);
-            oldLeft = Number.isNaN(oldLeft) ? 0 : oldLeft;
-            let oldTop = parseFloat(movedElement.style.top);
-            oldTop = Number.isNaN(oldTop) ? 0 : oldTop;
-            //let oldPosition = movedElement.style.position;
-            designItem.element.style.transform = null;
-            designItem.setStyle('position', 'absolute');
-            designItem.setStyle('left', (track.x + oldLeft) + "px");
-            designItem.setStyle('top', (track.y + oldTop) + "px");
+            designItem.element.style.transform = designItem.styles.get('transform') ?? '';
+            placeDesignItem(container, designItem, track, 'position');
         }
     }
 }

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

@@ -1,5 +1,12 @@
 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) {
     }
@@ -15,13 +22,20 @@ export class FlexBoxPlacementService {
         return true;
     }
     getElementOffset(container, designItem) {
-        //TODO: offset could be bigger, when it was in a other cell???
         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/package.json

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