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

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

@@ -0,0 +1,9 @@
+export declare class CssEntry {
+    constructor(name: string, value: string);
+    name: string;
+    value: string;
+}
+export declare class CssAttributeParser {
+    entries: CssEntry[];
+    parse(text: string, quoteType?: string): void;
+}

package/dist/elements/helper/CssAttributeParser.js

@@ -0,0 +1,67 @@
+var Token;
+(function (Token) {
+    Token[Token["Name"] = 0] = "Name";
+    Token[Token["Value"] = 1] = "Value";
+    Token[Token["InQuote"] = 2] = "InQuote";
+})(Token || (Token = {}));
+export class CssEntry {
+    constructor(name, value) {
+        this.name = name.trim();
+        this.value = value.trim();
+    }
+    name;
+    value;
+}
+export class CssAttributeParser {
+    entries = [];
+    parse(text, quoteType = '\'') {
+        this.entries = [];
+        let name = '';
+        let value = '';
+        let token = Token.Name;
+        for (let n = 0; n < text.length; n++) {
+            let c = text[n];
+            if (token === Token.Name) {
+                if (c === ':')
+                    token = Token.Value;
+                else if (c === ';') {
+                    name = '';
+                }
+                else
+                    name += c;
+            }
+            else if (token === Token.Value) {
+                if (c === ';') {
+                    this.entries.push(new CssEntry(name, value));
+                    name = '';
+                    value = '';
+                    token = Token.Name;
+                }
+                else {
+                    if (c === quoteType) {
+                        token = Token.InQuote;
+                    }
+                    value += c;
+                }
+            }
+            else if (token === Token.InQuote) {
+                if (c === '\\') {
+                    value += c;
+                    n++;
+                    c = text[n];
+                    value += c;
+                }
+                else if (c === quoteType) {
+                    value += c;
+                    token = Token.Value;
+                }
+                else {
+                    value += c;
+                }
+            }
+        }
+        if (name.trim() !== '') {
+            this.entries.push(new CssEntry(name, value));
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+export declare class CssCombiner {
+    private static _helperElement;
+    static combine(styles: Map<string, string>, globalStyles?: Map<string, string>): Map<string, string>;
+    private static combineBorder;
+    private static combineMargin;
+    private static combinePadding;
+    private static combineInset;
+    private static combineBackground;
+    private static combineFont;
+    private static checkIfStyleIsCombinable;
+}

package/dist/elements/helper/CssCombiner.js

@@ -0,0 +1,297 @@
+export class CssCombiner {
+    static _helperElement = document.createElement('div');
+    //todo: inset, flex flow, place content...
+    //flex => flex-grow, flex-shrink, flex-basis
+    static combine(styles, globalStyles) {
+        let e = CssCombiner._helperElement;
+        e.setAttribute('style', '');
+        for (let s of styles) {
+            e.style[s[0]] = s[1];
+        }
+        CssCombiner.combineBorder(styles);
+        CssCombiner.combineMargin(styles);
+        CssCombiner.combinePadding(styles);
+        CssCombiner.combineInset(styles);
+        CssCombiner.combineBackground(styles);
+        CssCombiner.combineFont(styles);
+        if (globalStyles) {
+            for (let g of globalStyles) {
+                if (styles.has(g[0])) {
+                    if (styles.get(g[0]) === g[1])
+                        styles.delete(g[0]);
+                }
+            }
+        }
+        return styles;
+    }
+    static combineBorder(styles) {
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-left-style'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-right-style'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-top-style'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-bottom-style'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-left-color'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-right-color'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-top-color'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-bottom-color'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-left-width'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-right-width'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-top-width'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-bottom-width'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-width'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-style'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-color'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-top'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-right'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-left'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-bottom'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'border-width'))
+            return;
+        let e = CssCombiner._helperElement;
+        let bls = e.style.borderLeftStyle;
+        let blc = e.style.borderLeftColor;
+        if (bls && blc &&
+            e.style.borderRightStyle === bls && e.style.borderTopStyle === bls && e.style.borderBottomStyle === bls &&
+            e.style.borderRightColor === blc && e.style.borderTopColor === blc && e.style.borderBottomColor === blc) {
+            let btw = e.style.borderTopWidth;
+            let brw = e.style.borderRightWidth;
+            let bbw = e.style.borderBottomWidth;
+            let blw = e.style.borderLeftWidth;
+            styles.delete('border-left-style');
+            styles.delete('border-right-style');
+            styles.delete('border-top-style');
+            styles.delete('border-bottom-style');
+            styles.delete('border-left-color');
+            styles.delete('border-right-color');
+            styles.delete('border-top-color');
+            styles.delete('border-bottom-color');
+            styles.delete('border-left-width');
+            styles.delete('border-right-width');
+            styles.delete('border-top-width');
+            styles.delete('border-bottom-width');
+            styles.delete('border-width');
+            styles.delete('border-style');
+            styles.delete('border-color');
+            styles.delete('border-top');
+            styles.delete('border-right');
+            styles.delete('border-left');
+            styles.delete('border-bottom');
+            if (e.style.borderRightWidth == blw && e.style.borderTopWidth === blw && e.style.borderBottomWidth === blw) {
+                styles.set('border', blw + ' ' + bls + ' ' + blc);
+            }
+            else {
+                styles.set('border', bls + ' ' + blc);
+                if (btw === bbw && brw === blw) {
+                    styles.set('border-width', btw + ' ' + brw);
+                }
+                else {
+                    styles.set('border-width', btw + ' ' + brw + ' ' + bbw + ' ' + blw);
+                }
+            }
+        }
+        if (e.style.borderImageSource === 'initial')
+            styles.delete('border-image-source');
+        if (e.style.borderImageSlice === 'initial')
+            styles.delete('border-image-slice');
+        if (e.style.borderImageWidth === 'initial')
+            styles.delete('border-image-width');
+        if (e.style.borderImageOutset === 'initial')
+            styles.delete('border-image-outset');
+        if (e.style.borderImageRepeat === 'initial')
+            styles.delete('border-image-repeat');
+    }
+    static combineMargin(styles) {
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'margin-top'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'margin-right'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'margin-bottom'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'margin-left'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'margin'))
+            return;
+        let e = CssCombiner._helperElement;
+        if (e.style.marginTop && e.style.marginRight && e.style.marginBottom && e.style.marginLeft) {
+            styles.delete('margin-top');
+            styles.delete('margin-right');
+            styles.delete('margin-bottom');
+            styles.delete('margin-left');
+            if (e.style.marginTop == e.style.marginRight && e.style.marginTop == e.style.marginBottom && e.style.marginTop == e.style.marginLeft) {
+                styles.set('margin', e.style.marginTop);
+            }
+            else
+                styles.set('margin', e.style.marginTop + ' ' + e.style.marginRight + ' ' + e.style.marginBottom + ' ' + e.style.marginLeft);
+        }
+    }
+    static combinePadding(styles) {
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'padding-top'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'padding-right'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'padding-bottom'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'padding-left'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'padding'))
+            return;
+        let e = CssCombiner._helperElement;
+        if (e.style.paddingTop && e.style.paddingRight && e.style.paddingBottom && e.style.paddingLeft) {
+            styles.delete('padding-top');
+            styles.delete('padding-right');
+            styles.delete('padding-bottom');
+            styles.delete('padding-left');
+            if (e.style.paddingTop == e.style.paddingRight && e.style.paddingTop == e.style.paddingBottom && e.style.paddingTop == e.style.paddingLeft) {
+                styles.set('padding', e.style.paddingTop);
+            }
+            else
+                styles.set('padding', e.style.paddingTop + ' ' + e.style.paddingRight + ' ' + e.style.paddingBottom + ' ' + e.style.paddingLeft);
+        }
+    }
+    static combineInset(styles) {
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'top'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'right'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'bottom'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'left'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'inset'))
+            return;
+        let e = CssCombiner._helperElement;
+        if (e.style.top && e.style.right && e.style.bottom && e.style.left) {
+            styles.delete('top');
+            styles.delete('right');
+            styles.delete('bottom');
+            styles.delete('left');
+            styles.set('inset', e.style.top + ' ' + e.style.right + ' ' + e.style.bottom + ' ' + e.style.left);
+        }
+    }
+    static combineBackground(styles) {
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-image'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-position'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-position-x'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-position-y'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-size'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-repeat'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-repeat-x'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-repeat-y'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-attachment'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-origin'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-clip'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background-color'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'background'))
+            return;
+        let e = CssCombiner._helperElement;
+        styles.delete('background-image');
+        styles.delete('background-position');
+        styles.delete('background-position-x'); //TODO
+        styles.delete('background-position-y'); //TODO
+        styles.delete('background-size');
+        styles.delete('background-repeat');
+        styles.delete('background-repeat-x'); //TODO
+        styles.delete('background-repeat-y'); //TODO
+        styles.delete('background-attachment');
+        styles.delete('background-origin');
+        styles.delete('background-clip');
+        styles.delete('background-color');
+        styles.delete('background');
+        let background = '';
+        if (e.style.backgroundImage && e.style.backgroundImage !== 'initial')
+            background += (background === '' ? '' : ' ') + e.style.backgroundImage;
+        if (e.style.backgroundPosition && e.style.backgroundPosition !== 'initial')
+            background += (background === '' ? '' : ' ') + e.style.backgroundPosition;
+        if (e.style.backgroundSize && e.style.backgroundSize !== 'initial')
+            background += (background === '' ? '' : ' / ') + e.style.backgroundSize;
+        if (e.style.backgroundRepeat && e.style.backgroundRepeat !== 'initial')
+            background += (background === '' ? '' : ' ') + e.style.backgroundRepeat;
+        if (e.style.backgroundAttachment && e.style.backgroundAttachment !== 'initial')
+            background += (background === '' ? '' : ' ') + e.style.backgroundAttachment;
+        if (e.style.backgroundOrigin && e.style.backgroundOrigin !== 'initial')
+            background += (background === '' ? '' : ' ') + e.style.backgroundOrigin;
+        if (e.style.backgroundClip && e.style.backgroundClip !== 'initial')
+            background += (background === '' ? '' : ' ') + e.style.backgroundClip;
+        if (e.style.backgroundColor && e.style.backgroundColor !== 'initial')
+            background += (background === '' ? '' : ' ') + e.style.backgroundColor;
+        if (background)
+            styles.set('background', background);
+    }
+    static combineFont(styles) {
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'font-style'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'font-weight'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'font-size'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'line-height'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'font-family'))
+            return;
+        if (!CssCombiner.checkIfStyleIsCombinable(styles, 'font'))
+            return;
+        let e = CssCombiner._helperElement;
+        if (e.style.fontFamily) {
+            styles.delete('font-style');
+            styles.delete('font-weight');
+            styles.delete('font-size');
+            styles.delete('line-height');
+            styles.delete('font-family');
+            styles.delete('font');
+            let font = '';
+            if (e.style.fontStyle)
+                font += (font === '' ? '' : ' ') + e.style.fontStyle;
+            if (e.style.fontWeight)
+                font += (font === '' ? '' : ' ') + e.style.fontWeight;
+            if (e.style.fontSize)
+                font += (font === '' ? '' : ' ') + e.style.fontSize;
+            if (e.style.lineHeight)
+                font += '/' + e.style.lineHeight;
+            if (e.style.fontFamily)
+                font += (font === '' ? '' : ' ') + e.style.fontFamily;
+            styles.set('font', font);
+        }
+    }
+    static checkIfStyleIsCombinable(styles, name) {
+        if (styles.has(name)) {
+            const st = styles.get(name);
+            if (typeof st == 'string') {
+                if (st.startsWith('var('))
+                    return false;
+                return true;
+            }
+            return false;
+        }
+        return true;
+    }
+}

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

@@ -0,0 +1,3 @@
+export declare function convertCssUnitToPixel(cssValue: string, target: HTMLElement, percentTarget: 'width' | 'height'): number;
+export declare function getCssUnit(cssValue: string): string;
+export declare function convertCssUnit(cssValue: string | number, target: HTMLElement, percentTarget: 'width' | 'height', unit: string): string;

package/dist/elements/helper/CssUnitConverter.js

@@ -0,0 +1,101 @@
+//unsupported: ex, ch, svw, svh, vw, lvh, dvw, dvh
+const units = ['px', 'cm', 'mm', 'q', 'in', 'pc', 'pt', 'rem', 'em', 'vw', 'vh', 'vmin', 'vmax', 'lh', 'rlh', '%', 'ms', 's', 'deg', 'rad', 'grad', 'turn', 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax', 'fr'];
+const pattern = new RegExp(`^([\-\+]?(?:\\d+(?:\\.\\d+)?))(${units.join('|')})$`, 'i');
+export function convertCssUnitToPixel(cssValue, target, percentTarget) {
+    if (!cssValue)
+        return null;
+    const supportedUnits = {
+        // Absolute sizes
+        'px': value => value,
+        'cm': value => value * 38,
+        'mm': value => value * 3.8,
+        'q': value => value * 0.95,
+        'in': value => value * 96,
+        'pc': value => value * 16,
+        'pt': value => value * 1.333333,
+        // Relative sizes
+        'rem': value => value * parseFloat(getComputedStyle(document.documentElement).fontSize),
+        'em': value => value * parseFloat(getComputedStyle(target).fontSize),
+        'vw': value => value / 100 * window.innerWidth,
+        'vh': value => value / 100 * window.innerHeight,
+        'vmin': value => value / 100 * (window.innerHeight < window.innerWidth ? window.innerHeight : window.innerWidth),
+        'vmax': value => value / 100 * (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth),
+        'lh': value => value * parseFloat(getComputedStyle(target).lineHeight),
+        'rlh': value => value * parseFloat(getComputedStyle(document.documentElement).lineHeight),
+        '%': value => value / 100 * (percentTarget == 'height' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        /* todo
+        //find parent with computed style where container-type is inline-size or size (regarding to query type)
+        //use this size for calculation
+        'cqw':
+        'cqh':
+        'cqi':
+        'cqb':
+        'cqmin':
+        'cqmax':
+        */
+        // Times
+        'ms': value => value,
+        's': value => value * 1000,
+        // Angles
+        'deg': value => value,
+        'rad': value => value * (180 / Math.PI),
+        'grad': value => value * (180 / 200),
+        'turn': value => value * 360
+    };
+    // If is a match, return example: [ "-2.75rem", "-2.75", "rem" ]
+    const matches = cssValue.trim().match(pattern);
+    if (matches) {
+        const value = Number(matches[1]);
+        const unit = matches[2].toLowerCase();
+        // Sanity check, make sure unit conversion function exists
+        if (unit in supportedUnits) {
+            return supportedUnits[unit](value);
+        }
+    }
+    //@ts-ignore
+    return cssValue;
+}
+export function getCssUnit(cssValue) {
+    const matches = cssValue.trim().match(pattern);
+    if (matches)
+        return matches[2].toLowerCase();
+    return null;
+}
+export function convertCssUnit(cssValue, target, percentTarget, unit) {
+    if (!cssValue)
+        return null;
+    const supportedUnits = {
+        // Absolute sizes
+        'px': value => value,
+        'cm': value => value / 38,
+        'mm': value => value / 3.8,
+        'q': value => value / 0.95,
+        'in': value => value / 96,
+        'pc': value => value / 16,
+        'pt': value => value / 1.333333,
+        // Relative sizes
+        'rem': value => value / parseFloat(getComputedStyle(document.documentElement).fontSize),
+        'em': value => value / parseFloat(getComputedStyle(target).fontSize),
+        'vw': value => value * 100 / window.innerWidth,
+        'vh': value => value * 100 / window.innerHeight,
+        'vmin': value => value * 100 / (window.innerHeight < window.innerWidth ? window.innerHeight : window.innerWidth),
+        'vmax': value => value * 100 / (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth),
+        'lh': value => value / parseFloat(getComputedStyle(target).lineHeight),
+        'rlh': value => value / parseFloat(getComputedStyle(document.documentElement).lineHeight),
+        '%': value => value * 100 / (percentTarget == 'height' ? target.getBoundingClientRect().height : target.getBoundingClientRect().width),
+        // Times
+        'ms': value => value,
+        's': value => value / 1000,
+        // Angles
+        'deg': value => value,
+        'rad': value => value / (180 / Math.PI),
+        'grad': value => value / (180 / 200),
+        'turn': value => value / 360
+    };
+    if (typeof cssValue == 'string')
+        cssValue = convertCssUnitToPixel(cssValue, target, percentTarget);
+    if (unit in supportedUnits) {
+        return supportedUnits[unit](cssValue) + unit;
+    }
+    return cssValue;
+}

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

@@ -0,0 +1,23 @@
+import { IPoint } from '../../interfaces/IPoint.js';
+import { IRect } from '../../interfaces/IRect.js';
+import { IDesignItem } from '../item/IDesignItem.js';
+import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
+export declare function inDesigner(element: Element): boolean;
+export declare function newElementFromString(text: any): Element;
+export declare enum ElementDisplayType {
+    none = 0,
+    inline = 1,
+    block = 2
+}
+export declare function isInline(element: HTMLElement): boolean;
+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, zoom: number): {
+    offsetLeft: number;
+    offsetTop: number;
+};
+export declare function getContentBoxContentOffsets(element: any): IPoint;
+export declare function calculateOuterRect(designItems: IDesignItem[], designerCanvas: IDesignerCanvas): IRect;

package/dist/elements/helper/ElementHelper.js

@@ -0,0 +1,136 @@
+export function inDesigner(element) {
+    let node = element.getRootNode();
+    if (node?.host?.localName == "node-projects-designer-canvas")
+        return true;
+    return false;
+}
+export function newElementFromString(text) {
+    const range = document.createRange();
+    range.selectNode(document.body);
+    const fragment = range.createContextualFragment(text);
+    return fragment.firstChild;
+}
+export var ElementDisplayType;
+(function (ElementDisplayType) {
+    ElementDisplayType[ElementDisplayType["none"] = 0] = "none";
+    ElementDisplayType[ElementDisplayType["inline"] = 1] = "inline";
+    ElementDisplayType[ElementDisplayType["block"] = 2] = "block";
+})(ElementDisplayType || (ElementDisplayType = {}));
+export function isInline(element) {
+    if (element instanceof SVGElement)
+        return false;
+    return element != null && window.getComputedStyle(element).display.startsWith('inline');
+}
+export function isInlineAfter(element) {
+    if (element instanceof SVGElement)
+        return false;
+    return element != null && window.getComputedStyle(element).display.startsWith('inline');
+}
+export function getElementDisplaytype(element) {
+    if (element instanceof SVGElement)
+        return ElementDisplayType.block;
+    const display = window.getComputedStyle(element).display;
+    return display == 'none' ? ElementDisplayType.none : display.startsWith('inline') ? ElementDisplayType.inline : ElementDisplayType.block;
+}
+export function isEmptyTextNode(node) {
+    return node.textContent.trim() == '' && node.textContent.indexOf('\xa0' /* &nbsp; */) < 0;
+}
+export function getActiveElement() {
+    let activeElement = document.activeElement;
+    let lastActive = null;
+    while (activeElement != lastActive) {
+        lastActive = activeElement;
+        if (activeElement.shadowRoot != null && activeElement.shadowRoot.activeElement)
+            activeElement = activeElement.shadowRoot.activeElement;
+    }
+    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, zoom) {
+    let offsetLeft = 0;
+    let offsetTop = 0;
+    while (element) {
+        if (element instanceof SVGSVGElement) {
+            //todo - fix without transformation
+            let t = element.style.transform;
+            element.style.transform = '';
+            const bcEl = element.getBoundingClientRect();
+            const bcPar = element.parentElement.getBoundingClientRect();
+            element.style.transform = t;
+            offsetLeft += (bcEl.left - bcPar.left) / zoom;
+            offsetTop += (bcEl.top - bcPar.top) / zoom;
+            element = element.parentElement;
+        }
+        else if (element instanceof SVGGraphicsElement) {
+            let bbox = element.getBBox();
+            offsetLeft += bbox.x;
+            offsetTop += bbox.y;
+            element = element.ownerSVGElement;
+        }
+        else if (element instanceof HTMLBodyElement) {
+            element = element.parentElement;
+        }
+        else if (element instanceof HTMLHtmlElement) {
+            element = element.parentElement;
+        }
+        else {
+            offsetLeft += element.offsetLeft;
+            offsetTop += element.offsetTop;
+            element = element.offsetParent;
+        }
+    }
+    return { offsetLeft: offsetLeft, offsetTop: offsetTop };
+}
+export function getContentBoxContentOffsets(element) {
+    let xOffset = 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', ''));
+    let yOffset = 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', ''));
+    return { x: xOffset, y: yOffset };
+}
+export function calculateOuterRect(designItems, designerCanvas) {
+    let min = { x: Number.MAX_VALUE, y: Number.MAX_VALUE };
+    let max = { x: Number.MIN_VALUE, y: Number.MIN_VALUE };
+    let elementRect;
+    for (let s of designItems) {
+        elementRect = {
+            x: designerCanvas.getNormalizedElementCoordinates(s.element).x,
+            y: designerCanvas.getNormalizedElementCoordinates(s.element).y,
+            width: designerCanvas.getNormalizedElementCoordinates(s.element).width,
+            height: designerCanvas.getNormalizedElementCoordinates(s.element).height
+        };
+        // calculate min and max of selection
+        if (elementRect.x < min.x)
+            min.x = elementRect.x;
+        if (elementRect.y < min.y)
+            min.y = elementRect.y;
+        if (elementRect.x + elementRect.width > max.x)
+            max.x = elementRect.x + elementRect.width;
+        if (elementRect.y + elementRect.height > max.y)
+            max.y = elementRect.y + elementRect.height;
+    }
+    // calculate reckt around selection
+    return {
+        x: min.x,
+        y: min.y,
+        width: max.x - min.x,
+        height: max.y - min.y
+    };
+}