@node-projects/web-component-designer 0.1.0 → 0.1.2

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

@@ -0,0 +1,11 @@
+export declare class Screenshot {
+    private static _canvas;
+    private static _context;
+    private static _video;
+    private static _captureStream;
+    private static _disableStream;
+    static get screenshotsEnabled(): boolean;
+    static enableScreenshots(elementHostForVideo?: Element): Promise<void>;
+    static takeScreenshot(element: Element, width?: number, height?: number, elementHostForVideo?: Element): Promise<string>;
+    private static _sleep;
+}

package/dist/elements/helper/Screenshot.js

@@ -0,0 +1,60 @@
+// for screenshots to be genrated properly, you need to select the current tab only in media source selector
+export class Screenshot {
+    static _canvas;
+    static _context;
+    static _video;
+    static _captureStream;
+    static _disableStream() {
+        Screenshot._captureStream.getTracks().forEach(track => track.stop());
+        Screenshot._canvas = null;
+    }
+    static get screenshotsEnabled() {
+        return Screenshot._captureStream && Screenshot._captureStream.active;
+    }
+    static async enableScreenshots(elementHostForVideo = document.body) {
+        if (Screenshot._captureStream && !Screenshot._captureStream.active) {
+            Screenshot._disableStream();
+        }
+        if (Screenshot._canvas == null) {
+            Screenshot._canvas = document.createElement("canvas");
+            Screenshot._context = Screenshot._canvas.getContext("2d");
+            Screenshot._video = document.createElement("video");
+            const gdmOptions = {
+                video: {
+                    cursor: "never",
+                    displaySurface: 'browser'
+                },
+                audio: false
+            };
+            Screenshot._video.style.display = "none";
+            elementHostForVideo.appendChild(Screenshot._video);
+            //@ts-ignore
+            Screenshot._captureStream = await navigator.mediaDevices.getDisplayMedia(gdmOptions);
+            //@ts-ignore
+            const captureType = Screenshot._captureStream.getVideoTracks()[0].getSettings().displaySurface;
+            if (captureType != 'browser') {
+                Screenshot._disableStream();
+                alert('You need to share the current Tab, for the screenshot API to work');
+                throw 'You need to share the current Tab, for the screenshot API to work';
+            }
+            Screenshot._video.srcObject = Screenshot._captureStream;
+            Screenshot._video.play();
+            await Screenshot._sleep(150);
+        }
+    }
+    static async takeScreenshot(element, width = 100, height = 100, elementHostForVideo = document.body) {
+        await Screenshot.enableScreenshots(elementHostForVideo);
+        const rect = element.getBoundingClientRect();
+        Screenshot._canvas.width = width;
+        Screenshot._canvas.height = height;
+        Screenshot._context.drawImage(Screenshot._video, rect.left, rect.top, rect.width, rect.height, 0, 0, width, height);
+        const frame = Screenshot._canvas.toDataURL("image/png");
+        return frame;
+    }
+    static _sleep(timeout) {
+        let resolve = null;
+        const promise = new Promise(r => resolve = r);
+        window.setTimeout(resolve, timeout);
+        return promise;
+    }
+}

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

@@ -0,0 +1,13 @@
+import { ITextWriter } from './ITextWriter.js';
+export declare class SimpleTextWriter implements ITextWriter {
+    private _textHolder;
+    get position(): number;
+    isLastCharNewline(): boolean;
+    levelRaise(): void;
+    levelShrink(): void;
+    write(text: string): void;
+    writeLine(text: string): void;
+    writeIndent(): void;
+    writeNewline(): void;
+    getString(): string;
+}

package/dist/elements/helper/SimpleTextWriter.js

@@ -0,0 +1,26 @@
+export class SimpleTextWriter {
+    _textHolder = '';
+    get position() {
+        return this._textHolder.length;
+    }
+    isLastCharNewline() {
+        return this._textHolder[this._textHolder.length - 1] === '\n';
+    }
+    levelRaise() {
+    }
+    levelShrink() {
+    }
+    write(text) {
+        this._textHolder += text;
+    }
+    writeLine(text) {
+        this._textHolder += text;
+    }
+    writeIndent() {
+    }
+    writeNewline() {
+    }
+    getString() {
+        return this._textHolder;
+    }
+}

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

@@ -0,0 +1 @@
+export declare function isVisualSvgElement(element: SVGElement): boolean;

package/dist/elements/helper/SvgHelper.js

@@ -0,0 +1,13 @@
+export function isVisualSvgElement(element) {
+    let el = element;
+    while (el) {
+        if (el instanceof SVGSVGElement)
+            return true;
+        if (el instanceof SVGDefsElement)
+            return false;
+        if (el instanceof SVGMetadataElement)
+            return false;
+        el = el.parentElement;
+    }
+    return true;
+}

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

@@ -0,0 +1,2 @@
+import { IDesignItem } from '../item/IDesignItem.js';
+export declare function switchContainer(items: IDesignItem[], newContainer: IDesignItem, resizeNewContainer?: boolean, newContainerOffset?: number): void;

package/dist/elements/helper/SwitchContainerHelper.js

@@ -0,0 +1,45 @@
+export function switchContainer(items, newContainer, resizeNewContainer = false, newContainerOffset = 0) {
+    //todo...
+    //- switch to other containers? like grid, flexbox, ...
+    //- position non absolute, or absolute from bottom or right
+    const firstItem = items[0];
+    const grp = firstItem.openGroup('switchContainerHelper');
+    const designerCanvas = firstItem.instanceServiceContainer.designerCanvas;
+    let minX = Number.MAX_VALUE;
+    let minY = Number.MAX_VALUE;
+    let maxX = 0;
+    let maxY = 0;
+    for (let e of items) {
+        let rect = designerCanvas.getNormalizedElementCoordinates(e.element);
+        if (rect.x < minX)
+            minX = rect.x;
+        if (rect.y < minY)
+            minY = rect.y;
+        if (rect.x + rect.width > maxX)
+            maxX = rect.x + rect.width;
+        if (rect.y + rect.height > maxY)
+            maxY = rect.y + rect.height;
+    }
+    let rectNewContainer = designerCanvas.getNormalizedElementCoordinates(newContainer.element);
+    for (let e of items) {
+        let rect = designerCanvas.getNormalizedElementCoordinates(e.element);
+        e.remove();
+        if (resizeNewContainer) {
+            e.setStyle('left', (rect.x - minX + newContainerOffset).toString() + 'px');
+            e.setStyle('top', (rect.y - minY + newContainerOffset).toString() + 'px');
+        }
+        else {
+            e.setStyle('left', (rect.x - rectNewContainer.x).toString() + 'px');
+            e.setStyle('top', (rect.y - rectNewContainer.y).toString() + 'px');
+        }
+        newContainer.insertChild(e);
+    }
+    if (resizeNewContainer) {
+        newContainer.setStyle('position', 'absolute');
+        newContainer.setStyle('left', (minX - newContainerOffset).toString() + 'px');
+        newContainer.setStyle('top', (minY - newContainerOffset).toString() + 'px');
+        newContainer.setStyle('width', (maxX - minX + 2 * newContainerOffset).toString() + 'px');
+        newContainer.setStyle('height', (maxY - minY + 2 * newContainerOffset).toString() + 'px');
+    }
+    grp.commit();
+}

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

@@ -0,0 +1,10 @@
+/**
+  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+  *
+  * @param {String} text The text to be rendered.
+  * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+  *
+  * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+  */
+export declare function getTextWidth(text: string, font: string): number;
+export declare function getFont(el: Element): string;

package/dist/elements/helper/TextHelper.js

@@ -0,0 +1,23 @@
+let canvas;
+/**
+  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+  *
+  * @param {String} text The text to be rendered.
+  * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+  *
+  * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+  */
+export function getTextWidth(text, font) {
+    if (!canvas)
+        canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    context.font = font;
+    const metrics = context.measureText(text);
+    return metrics.width;
+}
+export function getFont(el) {
+    const fontWeight = getComputedStyle(el).fontWeight || 'normal';
+    const fontSize = getComputedStyle(el).fontSize || '16px';
+    const fontFamily = getComputedStyle(el).fontFamily || 'Times New Roman';
+    return `${fontWeight} ${fontSize} ${fontFamily}`;
+}

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

@@ -0,0 +1,23 @@
+import { IPoint } from "../../interfaces/IPoint.js";
+import { IDesignerCanvas } from "../widgets/designerView/IDesignerCanvas.js";
+export declare function getElementCombinedTransform(element: HTMLElement): DOMMatrix;
+export declare function combineTransforms(element: HTMLElement, actualTransforms: string, requestedTransformation: string): void;
+export declare function transformPointByInverseMatrix(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 getDesignerCanvasNormalizedTransformedPoint(element: HTMLElement, point: IPoint, designerCanvas: IDesignerCanvas): IPoint;
+export declare function getElementSize(element: HTMLElement): {
+    width: number;
+    height: number;
+};
+export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, 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

@@ -0,0 +1,239 @@
+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 getElementCombinedTransform(element) {
+    //https://www.w3.org/TR/css-transforms-2/#ctm
+    let s = getComputedStyle(element);
+    let m = new DOMMatrix();
+    if (s.translate != 'none') {
+        m = m.multiply(new DOMMatrix('translate(' + s.translate + ')'));
+    }
+    if (s.rotate != 'none') {
+        m = m.multiply(new DOMMatrix('rotate(' + s.rotate + ')'));
+    }
+    if (s.scale != 'none') {
+        m = m.multiply(new DOMMatrix('scale(' + s.rotate + ')'));
+    }
+    if (s.transform != 'none') {
+        m = m.multiply(new DOMMatrix(s.transform));
+    }
+    return m;
+}
+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 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, designerCanvas.zoomFactor);
+    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 = getElementCombinedTransform(actualElement);
+        newElementMatrix = getElementCombinedTransform(newElement);
+        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, designerCanvas.zoomFactor).offsetLeft - designerCanvas.outerRect.x + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement, designerCanvas.zoomFactor).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, designerCanvas.zoomFactor);
+    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, designerCanvas.zoomFactor).offsetLeft - designerCanvas.outerRect.left + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor).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

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

package/dist/elements/helper/XmlHelper.js

@@ -0,0 +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, '&');
+}
+;

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

@@ -0,0 +1,26 @@
+import { IContextMenu, IContextMenuItem } from './IContextMenuItem.js';
+export interface IContextMenuOptions {
+    defaultIcon?: string;
+    subIcon?: string;
+    mouseOffset?: number;
+    shadowRoot?: ShadowRoot | Document;
+    mode?: 'normal' | 'undo';
+}
+export declare class ContextMenu implements IContextMenu {
+    private static _contextMenuCss;
+    static count: number;
+    menu: IContextMenuItem[];
+    options: IContextMenuOptions;
+    context: any;
+    private num;
+    private _menuElement;
+    constructor(menu: IContextMenuItem[], options?: IContextMenuOptions, context?: any);
+    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, context?: any): ContextMenu;
+    close(): void;
+}