@node-projects/web-component-designer 0.0.216 → 0.0.217

package/dist/elements/helper/TransformHelper.js

@@ -1,224 +1,224 @@
-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;
-    }
-    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 transformPointByInverseMatrix(point, matrix) {
-    const inverse = matrix.inverse();
-    //fix chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1395645
-    inverse.m33 = 1;
-    inverse.m44 = 1;
-    return point.matrixTransform(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(-parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), -parseFloat(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 newElementMatrix;
-    let originalElementAndAllParentsMultipliedMatrix;
-    while (actualElement != ancestor) {
-        const newElement = getParentElementIncludingSlots(actualElement);
-        actualElementMatrix = new DOMMatrix(getComputedStyle(actualElement).transform);
-        newElementMatrix = new DOMMatrix(getComputedStyle(newElement).transform);
-        newElementMatrix.m41 = newElementMatrix.m42 = 0;
-        if (actualElement == element) {
-            originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(newElementMatrix);
-        }
-        else if (newElement != ancestor || !excludeAncestor) {
-            originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(newElementMatrix);
-        }
-        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 + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetTop - designerCanvas.outerRect.y + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
-        if (actualElement == element) {
-            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 getDesignerCanvasNormalizedTransformedPoint(element, point, designerCanvas) {
-    return getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, { x: -point.x, y: -point.y }, designerCanvas)[0];
-}
-export function getElementSize(element) {
-    let width = element.offsetWidth;
-    let height = element.offsetHeight;
-    if (element instanceof SVGElement && element.width) {
-        width = element.width.baseVal.value;
-        height = element.height.baseVal.value;
-    }
-    else if (element instanceof SVGGraphicsElement) {
-        let bbox = element.getBBox();
-        width = bbox.width;
-        height = bbox.height;
-    }
-    return { width, height };
-}
-export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas) {
-    const topleft = 0;
-    const topright = 1;
-    const bottomleft = 2;
-    const bottomright = 3;
-    const intUntransformedCornerPointsOffset = untransformedCornerPointsOffset ? { x: untransformedCornerPointsOffset.x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset.y / designerCanvas.scaleFactor } : { x: 0, y: 0 };
-    const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element);
-    const p0OffsetsRelatedToCanvas = DOMPoint.fromPoint({
-        x: p0Offsets.offsetLeft - designerCanvas.containerBoundingRect.left,
-        y: p0Offsets.offsetTop - designerCanvas.containerBoundingRect.top
-    });
-    let { width, height } = getElementSize(element);
-    const elementWithoutTransformCornerDOMPoints = [];
-    elementWithoutTransformCornerDOMPoints[topleft] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset.x,
-        y: p0OffsetsRelatedToCanvas.y - intUntransformedCornerPointsOffset.y
-    });
-    elementWithoutTransformCornerDOMPoints[topright] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
-        y: p0OffsetsRelatedToCanvas.y - intUntransformedCornerPointsOffset.y
-    });
-    elementWithoutTransformCornerDOMPoints[bottomleft] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset.x,
-        y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
-    });
-    elementWithoutTransformCornerDOMPoints[bottomright] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
-        y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
-    });
-    const transformOriginWithoutTransformRelatedToCanvas = DOMPointReadOnly.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]),
-        y: p0OffsetsRelatedToCanvas.y + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1]),
-        z: 0,
-        w: 0
-    });
-    const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetLeft - designerCanvas.outerRect.left + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetTop - designerCanvas.outerRect.top + parseFloat(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;
-}
+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;
+    }
+    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 transformPointByInverseMatrix(point, matrix) {
+    const inverse = matrix.inverse();
+    //fix chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1395645
+    inverse.m33 = 1;
+    inverse.m44 = 1;
+    return point.matrixTransform(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(-parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), -parseFloat(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 newElementMatrix;
+    let originalElementAndAllParentsMultipliedMatrix;
+    while (actualElement != ancestor) {
+        const newElement = getParentElementIncludingSlots(actualElement);
+        actualElementMatrix = new DOMMatrix(getComputedStyle(actualElement).transform);
+        newElementMatrix = new DOMMatrix(getComputedStyle(newElement).transform);
+        newElementMatrix.m41 = newElementMatrix.m42 = 0;
+        if (actualElement == element) {
+            originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(newElementMatrix);
+        }
+        else if (newElement != ancestor || !excludeAncestor) {
+            originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(newElementMatrix);
+        }
+        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 + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetTop - designerCanvas.outerRect.y + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
+        if (actualElement == element) {
+            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 getDesignerCanvasNormalizedTransformedPoint(element, point, designerCanvas) {
+    return getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, { x: -point.x, y: -point.y }, designerCanvas)[0];
+}
+export function getElementSize(element) {
+    let width = element.offsetWidth;
+    let height = element.offsetHeight;
+    if (element instanceof SVGElement && element.width) {
+        width = element.width.baseVal.value;
+        height = element.height.baseVal.value;
+    }
+    else if (element instanceof SVGGraphicsElement) {
+        let bbox = element.getBBox();
+        width = bbox.width;
+        height = bbox.height;
+    }
+    return { width, height };
+}
+export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas) {
+    const topleft = 0;
+    const topright = 1;
+    const bottomleft = 2;
+    const bottomright = 3;
+    const intUntransformedCornerPointsOffset = untransformedCornerPointsOffset ? { x: untransformedCornerPointsOffset.x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset.y / designerCanvas.scaleFactor } : { x: 0, y: 0 };
+    const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element);
+    const p0OffsetsRelatedToCanvas = DOMPoint.fromPoint({
+        x: p0Offsets.offsetLeft - designerCanvas.containerBoundingRect.left,
+        y: p0Offsets.offsetTop - designerCanvas.containerBoundingRect.top
+    });
+    let { width, height } = getElementSize(element);
+    const elementWithoutTransformCornerDOMPoints = [];
+    elementWithoutTransformCornerDOMPoints[topleft] = DOMPoint.fromPoint({
+        x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset.x,
+        y: p0OffsetsRelatedToCanvas.y - intUntransformedCornerPointsOffset.y
+    });
+    elementWithoutTransformCornerDOMPoints[topright] = DOMPoint.fromPoint({
+        x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
+        y: p0OffsetsRelatedToCanvas.y - intUntransformedCornerPointsOffset.y
+    });
+    elementWithoutTransformCornerDOMPoints[bottomleft] = DOMPoint.fromPoint({
+        x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset.x,
+        y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
+    });
+    elementWithoutTransformCornerDOMPoints[bottomright] = DOMPoint.fromPoint({
+        x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
+        y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
+    });
+    const transformOriginWithoutTransformRelatedToCanvas = DOMPointReadOnly.fromPoint({
+        x: p0OffsetsRelatedToCanvas.x + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]),
+        y: p0OffsetsRelatedToCanvas.y + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1]),
+        z: 0,
+        w: 0
+    });
+    const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetLeft - designerCanvas.outerRect.left + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetTop - designerCanvas.outerRect.top + parseFloat(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/helper/XmlHelper.d.ts

@@ -1,2 +1,2 @@
-export declare function encodeXMLChars(value: string): string;
-export declare function decodeXMLChars(value: string): string;
+export declare function encodeXMLChars(value: string): string;
+export declare function decodeXMLChars(value: string): string;

package/dist/elements/helper/XmlHelper.js

@@ -1,16 +1,16 @@
-export function encodeXMLChars(value) {
-    return value.replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&apos;');
-}
-;
-export function decodeXMLChars(value) {
-    return value.replace(/&apos;/g, "'")
-        .replace(/&quot;/g, '"')
-        .replace(/&gt;/g, '>')
-        .replace(/&lt;/g, '<')
-        .replace(/&amp;/g, '&');
-}
-;
+export function encodeXMLChars(value) {
+    return value.replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+;
+export function decodeXMLChars(value) {
+    return value.replace(/&apos;/g, "'")
+        .replace(/&quot;/g, '"')
+        .replace(/&gt;/g, '>')
+        .replace(/&lt;/g, '<')
+        .replace(/&amp;/g, '&');
+}
+;

package/dist/elements/helper/contextMenu/ContextMenu.d.ts

@@ -1,25 +1,25 @@
-import { IContextMenuItem } from './IContextMenuItem.js';
-export interface IContextMenuOptions {
-    defaultIcon?: string;
-    subIcon?: string;
-    mouseOffset?: number;
-    shadowRoot?: ShadowRoot | Document;
-    mode?: 'normal' | 'undo';
-}
-export declare class ContextMenu {
-    private static _contextMenuCss;
-    static count: number;
-    menu: IContextMenuItem[];
-    options: IContextMenuOptions;
-    private num;
-    private _menuElement;
-    constructor(menu: IContextMenuItem[], options?: IContextMenuOptions);
-    reload(): void;
-    renderLevel(level: IContextMenuItem[]): HTMLUListElement;
-    display(event: MouseEvent): void;
-    _windowResize(): void;
-    _windowDown(e: MouseEvent): boolean;
-    _windowKeyUp(e: KeyboardEvent): void;
-    static show(menu: IContextMenuItem[], event: MouseEvent, options?: IContextMenuOptions): ContextMenu;
-    close(): void;
-}
+import { IContextMenuItem } from './IContextMenuItem.js';
+export interface IContextMenuOptions {
+    defaultIcon?: string;
+    subIcon?: string;
+    mouseOffset?: number;
+    shadowRoot?: ShadowRoot | Document;
+    mode?: 'normal' | 'undo';
+}
+export declare class ContextMenu {
+    private static _contextMenuCss;
+    static count: number;
+    menu: IContextMenuItem[];
+    options: IContextMenuOptions;
+    private num;
+    private _menuElement;
+    constructor(menu: IContextMenuItem[], options?: IContextMenuOptions);
+    reload(): void;
+    renderLevel(level: IContextMenuItem[]): HTMLUListElement;
+    display(event: MouseEvent): void;
+    _windowResize(): void;
+    _windowDown(e: MouseEvent): boolean;
+    _windowKeyUp(e: KeyboardEvent): void;
+    static show(menu: IContextMenuItem[], event: MouseEvent, options?: IContextMenuOptions): ContextMenu;
+    close(): void;
+}