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

package/dist/elements/helper/CssAttributeParser.js

@@ -1,67 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,297 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,101 +0,0 @@
-//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

@@ -1,23 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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
-    };
-}

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

@@ -1,23 +0,0 @@
-import { IDesignItem } from "../item/IDesignItem.js";
-export declare function getElementGridInformation(element: HTMLElement): {
-    colSpan: number;
-    rowSpan: number;
-};
-export declare function calculateGridInformation(designItem: IDesignItem): {
-    cells?: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        name: string;
-    }[][];
-    gaps?: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        column?: number;
-        row?: number;
-        type: 'h' | 'v';
-    }[];
-};