@node-projects/web-component-designer 0.0.150 → 0.0.152

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

@@ -9,3 +9,8 @@ export declare function isInlineAfter(element: HTMLElement): boolean;
 export declare function getElementDisplaytype(element: HTMLElement): ElementDisplayType;
 export declare function isEmptyTextNode(node: Node): boolean;
 export declare function getActiveElement(): Element;
+export declare function getParentElementIncludingSlots(element: Element): Element;
+export declare function getElementsWindowOffsetWithoutSelfAndParentTransformations(element: any): {
+    offsetLeft: number;
+    offsetTop: number;
+};

package/dist/elements/helper/ElementHelper.js

@@ -33,3 +33,23 @@ export function getActiveElement() {
     }
     return activeElement;
 }
+export function getParentElementIncludingSlots(element) {
+    if (element.assignedSlot)
+        return element.assignedSlot;
+    if (element.parentElement == null) {
+        if (element.parentNode instanceof ShadowRoot) {
+            return element.parentNode.host;
+        }
+    }
+    return element.parentElement;
+}
+export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element) {
+    var offsetLeft = 0;
+    var offsetTop = 0;
+    while (element) {
+        offsetLeft += element.offsetLeft;
+        offsetTop += element.offsetTop;
+        element = element.offsetParent;
+    }
+    return { offsetLeft: offsetLeft, offsetTop: offsetTop };
+}

package/dist/elements/helper/GridHelper.js

@@ -75,7 +75,7 @@ export function CalculateGridInformation(designItem) {
     for (let xIdx = 0; xIdx < rows.length; xIdx++) {
         const r = rows[xIdx];
         let areas = null;
-        if (gridA) {
+        if (gridA && gridA[rw + 1]) {
             areas = gridA[rw + 1].split(' ');
         }
         let x = 0;
@@ -94,7 +94,7 @@ export function CalculateGridInformation(designItem) {
                 retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap });
             }
             let name = null;
-            if (areas) {
+            if (areas && areas[cl]) {
                 const nm = areas[cl].trim();
                 if (nm != '.') {
                     name = nm;

package/dist/elements/helper/LayoutHelper.js

@@ -58,8 +58,14 @@ export function placeDesignItem(container, designItem, offset, mode) {
         }
         if (!hasPositionedLayout)
             designItem.setStyle('position', 'absolute');
-        designItem.setStyle('left', (offset.x + (oldLeft ?? 0) + containerLeft) + "px");
-        designItem.setStyle('top', (offset.y + (oldTop ?? 0) + containerTop) + "px");
+        if (oldLeft || oldRight == null)
+            designItem.setStyle('left', (offset.x + (oldLeft ?? 0) + containerLeft) + "px");
+        if (oldTop || oldBottom == null)
+            designItem.setStyle('top', (offset.y + (oldTop ?? 0) + containerTop) + "px");
+        if (oldRight)
+            designItem.setStyle('right', ((oldRight ?? 0) - offset.x + containerRight) + "px");
+        if (oldBottom)
+            designItem.setStyle('bottom', ((oldBottom ?? 0) - offset.y + containerBottom) + "px");
     }
 }
 /*function placeViaPosition(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding') {

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

@@ -1,4 +1,18 @@
-import { IPoint } from "../../index.js";
-export declare function combineTransforms(helperElement: HTMLElement, element: HTMLElement, transform1: string, transform2: string): void;
+import { IPoint } from "../../interfaces/IPoint.js";
+import { IDesignerCanvas } from "../widgets/designerView/IDesignerCanvas.js";
+export declare function combineTransforms(element: HTMLElement, actualTransforms: string, requestedTransformation: string): void;
 export declare function getDomMatrix(element: HTMLElement): DOMMatrix;
-export declare function convertCoordinates(point: IPoint, matrix: DOMMatrix): DOMPoint;
+export declare function convertCoordinates(point: DOMPoint, matrix: DOMMatrix): DOMPoint;
+export declare function getRotationMatrix3d(axisOfRotation: 'x' | 'y' | 'z' | 'X' | 'Y' | 'Z', angle: number): any[];
+export declare function rotateElementByMatrix3d(element: HTMLElement, matrix: number[]): void;
+export declare function matrixArrayToCssMatrix(matrixArray: number[]): string;
+export declare function cssMatrixToMatrixArray(cssMatrix: string): number[];
+export declare function getRotationAngleFromMatrix(matrixArray: number[], domMatrix: DOMMatrix): any;
+export declare function addVectors(vectorA: [number, number], vectorB: [number, number]): [number, number];
+export declare function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element: HTMLElement, designerCanvas: IDesignerCanvas): DOMPoint;
+export declare function getResultingTransformationBetweenElementAndAllAncestors(element: HTMLElement, ancestor: HTMLElement, excludeAncestor?: boolean): DOMMatrix;
+export declare function getByParentsTransformedPointRelatedToCanvas(element: HTMLElement, point: DOMPoint, designerCanvas: IDesignerCanvas): IPoint;
+export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: number, designerCanvas: IDesignerCanvas): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
+export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
+export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;
+export declare function normalizeToAbsolutePosition(element: HTMLElement, normalizeProperty: "left" | "top"): string;

package/dist/elements/helper/TransformHelper.js

@@ -1,21 +1,212 @@
-export function combineTransforms(helperElement, element, transform1, transform2) {
-    if (transform1 == null || transform1 == '') {
-        element.style.transform = transform2;
+import { getElementsWindowOffsetWithoutSelfAndParentTransformations, getParentElementIncludingSlots } from "./ElementHelper.js";
+let identityMatrix = [
+    1, 0, 0, 0,
+    0, 1, 0, 0,
+    0, 0, 1, 0,
+    0, 0, 0, 1
+];
+export function combineTransforms(element, actualTransforms, requestedTransformation) {
+    if (actualTransforms == null || actualTransforms == '') {
+        element.style.transform = requestedTransformation;
         return;
     }
-    helperElement.style.transform = '';
-    helperElement.style.transform = transform1;
-    const matrix1 = new DOMMatrix(window.getComputedStyle(helperElement).transform);
-    helperElement.style.transform = '';
-    helperElement.style.transform = transform2;
-    const matrix2 = new DOMMatrix(window.getComputedStyle(helperElement).transform);
-    const result = matrix2.multiply(matrix1);
-    element.style.transform = result.toString();
+    const actualTransformationMatrix = new DOMMatrix(actualTransforms);
+    const requestedTransformationMatrix = new DOMMatrix(requestedTransformation);
+    const newTransformationMatrix = requestedTransformationMatrix.multiply(actualTransformationMatrix);
+    element.style.transform = newTransformationMatrix.toString();
 }
 export function getDomMatrix(element) {
     return new DOMMatrix(window.getComputedStyle(element).transform);
 }
 export function convertCoordinates(point, matrix) {
-    let domPoint = new DOMPoint(point.x, point.y);
-    return domPoint.matrixTransform(matrix.inverse());
+    return point.matrixTransform(matrix.inverse());
+}
+export function getRotationMatrix3d(axisOfRotation, angle) {
+    const angleInRadians = angle / 180 * Math.PI;
+    const sin = Math.sin;
+    const cos = Math.cos;
+    let rotationMatrix3d = [];
+    switch (axisOfRotation.toLowerCase()) {
+        case 'x':
+            rotationMatrix3d = [
+                1, 0, 0, 0,
+                0, cos(angleInRadians), -sin(angleInRadians), 0,
+                0, sin(angleInRadians), cos(angleInRadians), 0,
+                0, 0, 0, 1
+            ];
+            break;
+        case 'y':
+            rotationMatrix3d = [
+                cos(angleInRadians), 0, sin(angleInRadians), 0,
+                0, 1, 0, 0,
+                -sin(angleInRadians), 0, cos(angleInRadians), 0,
+                0, 0, 0, 1
+            ];
+            break;
+        case 'z':
+            rotationMatrix3d = [
+                cos(angleInRadians), -sin(angleInRadians), 0, 0,
+                sin(angleInRadians), cos(angleInRadians), 0, 0,
+                0, 0, 1, 0,
+                0, 0, 0, 1
+            ];
+            break;
+        default:
+            rotationMatrix3d = null;
+            break;
+    }
+    return rotationMatrix3d;
+}
+export function rotateElementByMatrix3d(element, matrix) {
+    element.style.transform = matrixArrayToCssMatrix(matrix);
+}
+export function matrixArrayToCssMatrix(matrixArray) {
+    return "matrix3d(" + matrixArray.join(',') + ")";
+}
+export function cssMatrixToMatrixArray(cssMatrix) {
+    if (!cssMatrix.includes('matrix')) {
+        if (cssMatrix != 'none')
+            console.error('cssMatrixToMatrixArray: no css matrix passed');
+        return identityMatrix;
+    }
+    let matrixArray = cssMatrix.match(/^matrix.*\((.*)\)/)[1].split(',').map(Number);
+    return matrixArray;
+}
+export function getRotationAngleFromMatrix(matrixArray, domMatrix) {
+    let angle = null;
+    const a = domMatrix != null ? domMatrix.a : matrixArray[0];
+    const b = domMatrix != null ? domMatrix.b : matrixArray[1];
+    angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
+    return angle;
+}
+export function addVectors(vectorA, vectorB) {
+    return [vectorA[0] + vectorB[0], vectorA[1] + vectorB[1]];
+}
+export function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element, designerCanvas) {
+    const top0 = new DOMPointReadOnly(-parseInt(getComputedStyle(element).transformOrigin.split(' ')[0]), -parseInt(getComputedStyle(element).transformOrigin.split(' ')[1]), 0, 0);
+    const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element);
+    const transformOriginAbsolutRelatedToWindowWithoutAnyTransformation = new DOMPoint(p0Offsets.offsetLeft - top0.x, p0Offsets.offsetTop - top0.y);
+    const designerCanvasNormalizedTransformedOrigin = new DOMPoint(transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.x - designerCanvas.containerBoundingRect.x, transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.y - designerCanvas.containerBoundingRect.y);
+    return designerCanvasNormalizedTransformedOrigin;
+}
+export function getResultingTransformationBetweenElementAndAllAncestors(element, ancestor, excludeAncestor) {
+    let actualElement = element;
+    let actualElementMatrix;
+    let originalElementAndAllParentsMultipliedMatrix;
+    while (actualElement != ancestor) {
+        const newElement = getParentElementIncludingSlots(actualElement);
+        actualElementMatrix = new DOMMatrix(getComputedStyle(actualElement).transform);
+        if (actualElement == element) {
+            originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(new DOMMatrix(getComputedStyle(newElement).transform));
+        }
+        else if (newElement != ancestor || !excludeAncestor) {
+            originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(new DOMMatrix(getComputedStyle(newElement).transform));
+        }
+        actualElement = newElement;
+    }
+    return originalElementAndAllParentsMultipliedMatrix;
+}
+export function getByParentsTransformedPointRelatedToCanvas(element, point, designerCanvas) {
+    const canvas = element.closest('#node-projects-designer-canvas-canvas');
+    let actualElement = element;
+    let parentElementTransformOriginToPointVectorTransformed;
+    let byParentTransformedPointRelatedToCanvas = { x: 0, y: 0 };
+    while (actualElement != canvas) {
+        const parentElement = getParentElementIncludingSlots(actualElement);
+        const parentElementTransformOrigin = new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetLeft - designerCanvas.outerRect.x + parseInt(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetTop - designerCanvas.outerRect.y + parseInt(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
+        parentElementTransformOrigin.x -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).x;
+        parentElementTransformOrigin.y -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).y;
+        const parentElementTransformOriginToPointVector = new DOMPointReadOnly(-parentElementTransformOrigin.x + (element == actualElement ? point.x : byParentTransformedPointRelatedToCanvas.x), -parentElementTransformOrigin.y + (element == actualElement ? point.y : byParentTransformedPointRelatedToCanvas.y));
+        parentElementTransformOriginToPointVectorTransformed = parentElementTransformOriginToPointVector.matrixTransform(new DOMMatrix(getComputedStyle(parentElement).transform));
+        byParentTransformedPointRelatedToCanvas = new DOMPoint(parentElementTransformOrigin.x + parentElementTransformOriginToPointVectorTransformed.x, parentElementTransformOrigin.y + parentElementTransformOriginToPointVectorTransformed.y);
+        actualElement = parentElement;
+    }
+    return byParentTransformedPointRelatedToCanvas;
+}
+export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas) {
+    const topleft = 0;
+    const topright = 1;
+    const bottomleft = 2;
+    const bottomright = 3;
+    const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element);
+    const p0OffsetsRelatedToCanvas = DOMPoint.fromPoint({
+        x: p0Offsets.offsetLeft - designerCanvas.containerBoundingRect.left,
+        y: p0Offsets.offsetTop - designerCanvas.containerBoundingRect.top
+    });
+    let width = parseInt(getComputedStyle(element).width.replace('px', ''));
+    let height = parseInt(getComputedStyle(element).height.replace('px', ''));
+    if (getComputedStyle(element).boxSizing == 'content-box') {
+        width += parseInt(getComputedStyle(element).paddingLeft.replace('px', ''))
+            + parseInt(getComputedStyle(element).marginLeft.replace('px', ''))
+            + parseInt(getComputedStyle(element).borderLeft.replace('px', ''))
+            + parseInt(getComputedStyle(element).paddingRight.replace('px', ''))
+            + parseInt(getComputedStyle(element).marginRight.replace('px', ''))
+            + parseInt(getComputedStyle(element).borderRight.replace('px', ''));
+        height += parseInt(getComputedStyle(element).paddingTop.replace('px', ''))
+            + parseInt(getComputedStyle(element).marginTop.replace('px', ''))
+            + parseInt(getComputedStyle(element).borderTop.replace('px', ''))
+            + parseInt(getComputedStyle(element).paddingBottom.replace('px', ''))
+            + parseInt(getComputedStyle(element).marginBottom.replace('px', ''))
+            + parseInt(getComputedStyle(element).borderBottom.replace('px', ''));
+    }
+    const elementWithoutTransformCornerDOMPoints = [];
+    elementWithoutTransformCornerDOMPoints[topleft] = DOMPoint.fromPoint({
+        x: p0OffsetsRelatedToCanvas.x - untransformedCornerPointsOffset,
+        y: p0OffsetsRelatedToCanvas.y - untransformedCornerPointsOffset
+    });
+    elementWithoutTransformCornerDOMPoints[topright] = DOMPoint.fromPoint({
+        x: p0OffsetsRelatedToCanvas.x + width + untransformedCornerPointsOffset,
+        y: p0OffsetsRelatedToCanvas.y - untransformedCornerPointsOffset
+    });
+    elementWithoutTransformCornerDOMPoints[bottomleft] = DOMPoint.fromPoint({
+        x: p0OffsetsRelatedToCanvas.x - untransformedCornerPointsOffset,
+        y: p0OffsetsRelatedToCanvas.y + height + untransformedCornerPointsOffset
+    });
+    elementWithoutTransformCornerDOMPoints[bottomright] = DOMPoint.fromPoint({
+        x: p0OffsetsRelatedToCanvas.x + width + untransformedCornerPointsOffset,
+        y: p0OffsetsRelatedToCanvas.y + height + untransformedCornerPointsOffset
+    });
+    const transformOriginWithoutTransformRelatedToCanvas = DOMPointReadOnly.fromPoint({
+        x: p0OffsetsRelatedToCanvas.x + parseInt(getComputedStyle(element).transformOrigin.split(' ')[0]),
+        y: p0OffsetsRelatedToCanvas.y + parseInt(getComputedStyle(element).transformOrigin.split(' ')[1]),
+        z: 0,
+        w: 0
+    });
+    const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetLeft - designerCanvas.outerRect.left + parseInt(getComputedStyle(element).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetTop - designerCanvas.outerRect.top + parseInt(getComputedStyle(element).transformOrigin.split(' ')[1])), designerCanvas);
+    let top0 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[topleft].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[topleft].y));
+    let top1 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[topright].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[topright].y));
+    let top2 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[bottomleft].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[bottomleft].y));
+    let top3 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[bottomright].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[bottomright].y));
+    let originalElementAndAllParentsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(element, designerCanvas.canvas, true);
+    let top0Transformed = top0.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
+    let top1Transformed = top1.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
+    let top2Transformed = top2.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
+    let top3Transformed = top3.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
+    let transformedCornerPoints = [];
+    transformedCornerPoints[0] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top0Transformed.x, designerCanvasNormalizedTransformOrigin.y + top0Transformed.y);
+    transformedCornerPoints[1] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top1Transformed.x, designerCanvasNormalizedTransformOrigin.y + top1Transformed.y);
+    transformedCornerPoints[2] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top2Transformed.x, designerCanvasNormalizedTransformOrigin.y + top2Transformed.y);
+    transformedCornerPoints[3] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top3Transformed.x, designerCanvasNormalizedTransformOrigin.y + top3Transformed.y);
+    return transformedCornerPoints;
+}
+export function extractTranslationFromDOMMatrix(matrix) {
+    return new DOMPoint(matrix.m41, matrix.m42, 0, 0);
+}
+export function extractRotationAngleFromDOMMatrix(matrix) {
+    return getRotationAngleFromMatrix(null, matrix);
+}
+export function normalizeToAbsolutePosition(element, normalizeProperty) {
+    switch (normalizeProperty) {
+        case "left":
+            let left = getComputedStyle(element).left;
+            element.style.removeProperty('right');
+            element.style.left = left;
+            return left;
+        case "top":
+            let top = getComputedStyle(element).top;
+            element.style.removeProperty('bottom');
+            element.style.top = top;
+            return top;
+    }
+    return null;
 }

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -69,6 +69,9 @@ import { LineExtensionProvider } from '../widgets/designerView/extensions/svg/Li
 import { RectExtentionProvider } from '../widgets/designerView/extensions/svg/RectExtensionProvider.js';
 import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/svg/EllipsisExtensionProvider.js';
 import { PropertyGroupsService } from './propertiesService/PropertyGroupsService.js';
+import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js';
+import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/FlexboxExtensionProvider.js';
+import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/FlexboxExtensionDesignViewConfigButtons.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -99,6 +102,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ElementDragTitleExtensionProvider(),
         new GridExtensionProvider(),
+        new FlexboxExtensionProvider(),
         new TransformOriginExtensionProvider(),
         new CanvasExtensionProvider(),
         new PositionExtensionProvider(),
@@ -113,11 +117,15 @@ export function createDefaultServiceContainer() {
         new SelectionDefaultExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainer, [
-        new GridExtensionProvider()
+        new GridExtensionProvider(),
+        new FlexboxExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [
         new MouseOverExtensionProvider()
     ]);
+    serviceContainer.designerExtensions.set(ExtensionType.Placement, [
+        new PlacementExtensionProvider()
+    ]);
     serviceContainer.designerExtensions.set(ExtensionType.ContainerDrag, [
         new GrayOutExtensionProvider()
     ]);
@@ -146,7 +154,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );
-    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons());
     serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(5), new TextToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),

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

@@ -10,6 +10,7 @@ export declare class DefaultPlacementService implements IPlacementService {
     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;
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;

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

@@ -1,6 +1,7 @@
 import { DomConverter } from '../../widgets/designerView/DomConverter.js';
-import { combineTransforms } from '../../helper/TransformHelper.js';
+import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
 import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
+import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
 export class DefaultPlacementService {
     serviceForContainer(container, containerStyle) {
         if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
@@ -83,15 +84,25 @@ export class DefaultPlacementService {
         }
         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]);
-        let filterdItems = filterChildPlaceItems(items);
-        //TODO: -> maybe get existing transform via getComputedStyle???
-        for (const designItem of filterdItems) {
-            const newTransform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
-            combineTransforms(placementView.transformHelperElement, designItem.element, designItem.styles.get('transform'), newTransform);
+        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.styles.get('transform'), translationMatrix.toString());
         }
     }
     enterContainer(container, items) {
@@ -108,11 +119,16 @@ export class DefaultPlacementService {
     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) {
+            let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
+            const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.styles.get('transform') ?? ''));
             designItem.element.style.transform = designItem.styles.get('transform') ?? '';
-            placeDesignItem(container, designItem, track, 'position');
+            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

@@ -11,6 +11,7 @@ export declare class FlexBoxPlacementService implements IPlacementService {
     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;
 }

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

@@ -38,6 +38,8 @@ export class FlexBoxPlacementService {
         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);

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

@@ -11,6 +11,7 @@ export declare class GridPlacementService implements IPlacementService {
     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;
 }

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

@@ -42,6 +42,8 @@ export class GridPlacementService {
         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);

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

@@ -11,6 +11,7 @@ export interface IPlacementService extends IService {
     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;
 }

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -26,8 +26,11 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly alignOnSnap: boolean;
     readonly onContentChanged: TypedEvent<void>;
     zoomFactor: number;
+    designerOffsetWidth: number;
+    designerOffsetHeight: number;
     readonly scaleFactor: number;
     canvasOffset: IPoint;
+    canvas: HTMLElement;
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
@@ -37,6 +40,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
         realWidth: number;
         realHeight: number;
     };
+    getNormalizedElementCoordinates(element: Element, ignoreScalefactor?: boolean): IRect;
     captureActiveTool(tool: ITool): any;
     releaseActiveTool(): any;
     getDesignSurfaceDimensions(): ISize;

package/dist/elements/widgets/designerView/IPlacementView.d.ts

@@ -10,5 +10,4 @@ export interface IPlacementView {
     snapLines: Snaplines;
     readonly zoomFactor: number;
     readonly scaleFactor: number;
-    readonly transformHelperElement: HTMLDivElement;
 }

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -29,7 +29,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     overlayLayer: OverlayLayerView;
     rootDesignItem: IDesignItem;
     eatEvents: Element;
-    transformHelperElement: HTMLDivElement;
     private _zoomFactor;
     private _scaleFactor;
     private _canvasOffset;
@@ -44,6 +43,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     set canvasOffsetUnzoomed(value: IPoint);
     onContentChanged: TypedEvent<void>;
     onZoomFactorChanged: TypedEvent<number>;
+    get canvas(): HTMLElement;
     private _canvas;
     private _canvasContainer;
     private _outercanvas2;
@@ -100,7 +100,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
      * Converts the Event x/y coordinates, to the mouse position in the viewport
      */
     getViewportCoordinates(event: MouseEvent): IPoint;
-    getNormalizedElementCoordinates(element: Element): IRect;
+    getNormalizedElementCoordinates(element: Element, ignoreScalefactor?: boolean): IRect;
     getNormalizedElementCoordinatesAndRealSizes(element: Element): IRect & {
         realWidth: number;
         realHeight: number;

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -36,7 +36,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     overlayLayer;
     rootDesignItem;
     eatEvents;
-    transformHelperElement;
     _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
     _canvasOffset = { x: 0, y: 0 };
@@ -67,6 +66,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     onContentChanged = new TypedEvent();
     onZoomFactorChanged = new TypedEvent();
+    get canvas() {
+        return this._canvas;
+    }
     // Private Variables
     _canvas;
     _canvasContainer;
@@ -103,6 +105,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       width: 100%;
       height: 100%;
       transform-origin: 0 0;
+      position: relative;
     }
 
     #node-projects-designer-canvas-canvas.dragFileActive {
@@ -136,11 +139,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       height: 100%;
       top: 0;
     }
-    
-    #node-projects-designer-canvas-transformHelper {
+
+    #node-projects-designer-canvas-helper-element {
       height: 0;
       width: 0;
-    }`;
+    }  
+  `;
     static template = html `
     <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
       <div style="width: 100%;height: 100%;">
@@ -152,7 +156,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         </div>
         <div id="node-projects-designer-canvas-clickOverlay" tabindex="0" style="pointer-events: auto;"></div>
       </div>
-      <div id="node-projects-designer-canvas-transformHelper"></div>
     </div>`;
     extensionManager;
     _pointerextensions;
@@ -164,7 +167,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
         this.clickOverlay = this._getDomElement('node-projects-designer-canvas-clickOverlay');
-        this.transformHelperElement = this._getDomElement('node-projects-designer-canvas-transformHelper');
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
         this._onDblClickBound = this._onDblClick.bind(this);
@@ -768,9 +770,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             y: (event.clientY - this.outerRect.y)
         };
     }
-    getNormalizedElementCoordinates(element) {
+    getNormalizedElementCoordinates(element, ignoreScalefactor) {
         const targetRect = element.getBoundingClientRect();
-        return { x: (targetRect.x - this.containerBoundingRect.x) / this.scaleFactor, y: (targetRect.y - this.containerBoundingRect.y) / this.scaleFactor, width: targetRect.width / this.scaleFactor, height: targetRect.height / this.scaleFactor };
+        return { x: (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) };
     }
     getNormalizedElementCoordinatesAndRealSizes(element) {
         let ret = this.getNormalizedElementCoordinates(element);

package/dist/elements/widgets/designerView/extensions/AbstractExtensionBase.d.ts

@@ -2,6 +2,7 @@ import { IDesignerCanvas } from "../IDesignerCanvas";
 import { IExtensionManager } from "./IExtensionManger";
 import { OverlayLayerView } from '../overlayLayerView';
 import { OverlayLayer } from './OverlayLayer';
+import { IPoint } from "../../../../interfaces/IPoint";
 export declare abstract class AbstractExtensionBase {
     protected overlays: SVGElement[];
     protected overlayLayerView: OverlayLayerView;
@@ -14,4 +15,5 @@ export declare abstract class AbstractExtensionBase {
     protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
     protected _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
     protected _drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
+    protected _drawTransformedRect(points: [IPoint, IPoint, IPoint, IPoint], className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
 }

package/dist/elements/widgets/designerView/extensions/AbstractExtensionBase.js

@@ -54,4 +54,12 @@ export class AbstractExtensionBase {
         }
         return newEls;
     }
+    _drawTransformedRect(points, className, path, overlayLayer) {
+        let data = "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + "Z";
+        const newPath = this.overlayLayerView.drawPath(data, className, path, overlayLayer);
+        if (!path) {
+            this.overlays.push(newPath);
+        }
+        return newPath;
+    }
 }