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

package/dist/elements/helper/CssUnitConverter.js

@@ -1,101 +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;
-}
+//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,18 +1,19 @@
-import { IPoint } from '../../interfaces/IPoint.js';
-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): {
-    offsetLeft: number;
-    offsetTop: number;
-};
-export declare function getContentBoxContentOffsets(element: any): IPoint;
+import { IPoint } from '../../interfaces/IPoint.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): {
+    offsetLeft: number;
+    offsetTop: number;
+};
+export declare function getContentBoxContentOffsets(element: any): IPoint;

package/dist/elements/helper/ElementHelper.js

@@ -1,101 +1,107 @@
-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) {
-    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;
-            offsetTop += bcEl.top - bcPar.top;
-            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 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) {
+    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;
+            offsetTop += bcEl.top - bcPar.top;
+            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 };
+}

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

@@ -1,19 +1,19 @@
-import { IDesignItem } from "../item/IDesignItem.js";
-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';
-    }[];
-};
+import { IDesignItem } from "../item/IDesignItem.js";
+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';
+    }[];
+};