@node-projects/web-component-designer 0.0.91 → 0.0.94

package/dist/elements/helper/ElementHelper.js

@@ -1,32 +1,32 @@
-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) {
-    return element != null && window.getComputedStyle(element).display.startsWith('inline');
-}
-export function getElementDisplaytype(element) {
-    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 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) {
+    return element != null && window.getComputedStyle(element).display.startsWith('inline');
+}
+export function getElementDisplaytype(element) {
+    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;
+}

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

@@ -1,16 +1,16 @@
-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;
-    }[];
-};
+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;
+    }[];
+};

package/dist/elements/helper/GridHelper.js

@@ -1,111 +1,111 @@
-export function CalculateGridInformation(designItem) {
-    //todo:
-    //same name should combine columns/rows
-    let itemRect = designItem.element.getBoundingClientRect();
-    const computedStyle = getComputedStyle(designItem.element);
-    const rows = computedStyle.gridTemplateRows.split(' ');
-    const columns = computedStyle.gridTemplateColumns.split(' ');
-    const paddingLeft = Number.parseFloat(computedStyle.paddingLeft);
-    const paddingTop = Number.parseFloat(computedStyle.paddingTop);
-    let y = 0;
-    let xGap = 0;
-    let yGap = 0;
-    let rw = 0;
-    let xOffset = itemRect.x - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.x;
-    let yOffset = itemRect.y - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.y;
-    let gridA = null;
-    if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
-        gridA = computedStyle.gridTemplateAreas.split('\"');
-    if (computedStyle.columnGap && computedStyle.columnGap != 'normal')
-        xGap = Number.parseFloat(computedStyle.columnGap.replace('px', ''));
-    if (computedStyle.rowGap && computedStyle.rowGap != 'normal')
-        yGap = Number.parseFloat(computedStyle.rowGap.replace('px', ''));
-    let gesX = 0;
-    let gesY = 0;
-    for (let c of columns) {
-        const currX = Number.parseFloat(c.replace('px', ''));
-        gesX += currX + xGap;
-    }
-    gesX -= xGap;
-    for (let r of rows) {
-        const currY = Number.parseFloat(r.replace('px', ''));
-        gesY += currY + yGap;
-    }
-    gesY -= yGap;
-    if (computedStyle.justifyContent == 'center') {
-        xOffset += (itemRect.width - gesX) / 2;
-    }
-    else if (computedStyle.justifyContent == 'end') {
-        xOffset += itemRect.width - gesX;
-    }
-    else if (computedStyle.justifyContent == 'space-between') {
-        xGap += (itemRect.width - gesX) / (columns.length - 1);
-    }
-    else if (computedStyle.justifyContent == 'space-around') {
-        let gp = (itemRect.width - gesX) / (columns.length * 2);
-        xGap += gp * 2;
-        xOffset += gp;
-    }
-    else if (computedStyle.justifyContent == 'space-evenly') {
-        let gp = (itemRect.width - gesX) / (columns.length + 1);
-        xGap += gp;
-        xOffset += gp;
-    }
-    if (computedStyle.alignContent == 'center') {
-        xOffset += (itemRect.height - gesY) / 2;
-    }
-    else if (computedStyle.alignContent == 'end') {
-        xOffset += itemRect.height - gesY;
-    }
-    else if (computedStyle.alignContent == 'space-between') {
-        yGap += (itemRect.height - gesY) / (rows.length - 1);
-    }
-    else if (computedStyle.alignContent == 'space-around') {
-        let gp = (itemRect.height - gesY) / (rows.length * 2);
-        yGap += gp * 2;
-        yOffset += gp;
-    }
-    else if (computedStyle.alignContent == 'space-evenly') {
-        let gp = (itemRect.height - gesY) / (rows.length + 1);
-        yGap += gp;
-        yOffset += gp;
-    }
-    const retVal = { cells: [], gaps: [] };
-    for (let xIdx = 0; xIdx < rows.length; xIdx++) {
-        const r = rows[xIdx];
-        let areas = null;
-        if (gridA) {
-            areas = gridA[rw + 1].split(' ');
-        }
-        let x = 0;
-        let cl = 0;
-        const currY = Number.parseFloat(r.replace('px', ''));
-        let cellList = [];
-        retVal.cells.push(cellList);
-        for (let yIdx = 0; yIdx < columns.length; yIdx++) {
-            const c = columns[yIdx];
-            if (x > 0 && xGap) {
-                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY });
-                x += xGap;
-            }
-            const currX = Number.parseFloat(c.replace('px', ''));
-            if (y > 0 && yGap) {
-                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap });
-            }
-            let name = null;
-            if (areas) {
-                const nm = areas[cl].trim();
-                if (nm != '.') {
-                    name = nm;
-                }
-            }
-            const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, height: currY, name: name };
-            cellList.push(cell);
-            x += currX;
-            cl++;
-        }
-        y += currY + yGap;
-        rw += 2;
-    }
-    return retVal;
-}
+export function CalculateGridInformation(designItem) {
+    //todo:
+    //same name should combine columns/rows
+    let itemRect = designItem.element.getBoundingClientRect();
+    const computedStyle = getComputedStyle(designItem.element);
+    const rows = computedStyle.gridTemplateRows.split(' ');
+    const columns = computedStyle.gridTemplateColumns.split(' ');
+    const paddingLeft = Number.parseFloat(computedStyle.paddingLeft);
+    const paddingTop = Number.parseFloat(computedStyle.paddingTop);
+    let y = 0;
+    let xGap = 0;
+    let yGap = 0;
+    let rw = 0;
+    let xOffset = itemRect.x - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.x;
+    let yOffset = itemRect.y - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.y;
+    let gridA = null;
+    if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
+        gridA = computedStyle.gridTemplateAreas.split('\"');
+    if (computedStyle.columnGap && computedStyle.columnGap != 'normal')
+        xGap = Number.parseFloat(computedStyle.columnGap.replace('px', ''));
+    if (computedStyle.rowGap && computedStyle.rowGap != 'normal')
+        yGap = Number.parseFloat(computedStyle.rowGap.replace('px', ''));
+    let gesX = 0;
+    let gesY = 0;
+    for (let c of columns) {
+        const currX = Number.parseFloat(c.replace('px', ''));
+        gesX += currX + xGap;
+    }
+    gesX -= xGap;
+    for (let r of rows) {
+        const currY = Number.parseFloat(r.replace('px', ''));
+        gesY += currY + yGap;
+    }
+    gesY -= yGap;
+    if (computedStyle.justifyContent == 'center') {
+        xOffset += (itemRect.width - gesX) / 2;
+    }
+    else if (computedStyle.justifyContent == 'end') {
+        xOffset += itemRect.width - gesX;
+    }
+    else if (computedStyle.justifyContent == 'space-between') {
+        xGap += (itemRect.width - gesX) / (columns.length - 1);
+    }
+    else if (computedStyle.justifyContent == 'space-around') {
+        let gp = (itemRect.width - gesX) / (columns.length * 2);
+        xGap += gp * 2;
+        xOffset += gp;
+    }
+    else if (computedStyle.justifyContent == 'space-evenly') {
+        let gp = (itemRect.width - gesX) / (columns.length + 1);
+        xGap += gp;
+        xOffset += gp;
+    }
+    if (computedStyle.alignContent == 'center') {
+        xOffset += (itemRect.height - gesY) / 2;
+    }
+    else if (computedStyle.alignContent == 'end') {
+        xOffset += itemRect.height - gesY;
+    }
+    else if (computedStyle.alignContent == 'space-between') {
+        yGap += (itemRect.height - gesY) / (rows.length - 1);
+    }
+    else if (computedStyle.alignContent == 'space-around') {
+        let gp = (itemRect.height - gesY) / (rows.length * 2);
+        yGap += gp * 2;
+        yOffset += gp;
+    }
+    else if (computedStyle.alignContent == 'space-evenly') {
+        let gp = (itemRect.height - gesY) / (rows.length + 1);
+        yGap += gp;
+        yOffset += gp;
+    }
+    const retVal = { cells: [], gaps: [] };
+    for (let xIdx = 0; xIdx < rows.length; xIdx++) {
+        const r = rows[xIdx];
+        let areas = null;
+        if (gridA) {
+            areas = gridA[rw + 1].split(' ');
+        }
+        let x = 0;
+        let cl = 0;
+        const currY = Number.parseFloat(r.replace('px', ''));
+        let cellList = [];
+        retVal.cells.push(cellList);
+        for (let yIdx = 0; yIdx < columns.length; yIdx++) {
+            const c = columns[yIdx];
+            if (x > 0 && xGap) {
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY });
+                x += xGap;
+            }
+            const currX = Number.parseFloat(c.replace('px', ''));
+            if (y > 0 && yGap) {
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap });
+            }
+            let name = null;
+            if (areas) {
+                const nm = areas[cl].trim();
+                if (nm != '.') {
+                    name = nm;
+                }
+            }
+            const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, height: currY, name: name };
+            cellList.push(cell);
+            x += currX;
+            cl++;
+        }
+        y += currY + yGap;
+        rw += 2;
+    }
+    return retVal;
+}

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

@@ -1,6 +1,6 @@
-import { IPoint } from "../../interfaces/IPoint.js";
-import { IRect } from "../../interfaces/IRect.js";
-export declare function sleep(ms: any): Promise<unknown>;
-export declare function exportData(blob: Blob, fileName: string): Promise<void>;
-export declare function dataURItoBlob(dataURI: any): Blob;
-export declare function pointInRect(point: IPoint, rect: IRect): boolean;
+import { IPoint } from "../../interfaces/IPoint.js";
+import { IRect } from "../../interfaces/IRect.js";
+export declare function sleep(ms: any): Promise<unknown>;
+export declare function exportData(blob: Blob, fileName: string): Promise<void>;
+export declare function dataURItoBlob(dataURI: any): Blob;
+export declare function pointInRect(point: IPoint, rect: IRect): boolean;

package/dist/elements/helper/Helper.js

@@ -1,26 +1,26 @@
-export function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-export async function exportData(blob, fileName) {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.style.display = 'none';
-    a.download = fileName;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    await sleep(300);
-}
-export function dataURItoBlob(dataURI) {
-    var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
-    var binary = atob(dataURI.split(',')[1]);
-    var array = [];
-    for (var i = 0; i < binary.length; i++) {
-        array.push(binary.charCodeAt(i));
-    }
-    return new Blob([new Uint8Array(array)], { type: mime });
-}
-export function pointInRect(point, rect) {
-    return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
-}
+export function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+export async function exportData(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.style.display = 'none';
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    await sleep(300);
+}
+export function dataURItoBlob(dataURI) {
+    var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
+    var binary = atob(dataURI.split(',')[1]);
+    var array = [];
+    for (var i = 0; i < binary.length; i++) {
+        array.push(binary.charCodeAt(i));
+    }
+    return new Blob([new Uint8Array(array)], { type: mime });
+}
+export function pointInRect(point, rect) {
+    return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+}

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

@@ -1,14 +1,14 @@
-export declare class IndentedTextWriter {
-    private _textHolder;
-    readonly indent: number;
-    level: number;
-    get position(): number;
-    isLastCharNewline(): boolean;
-    levelRaise(): void;
-    levelShrink(): void;
-    write(text: string): void;
-    writeLine(text: string): void;
-    writeIndent(): void;
-    writeNewline(): void;
-    getString(): string;
-}
+export declare class IndentedTextWriter {
+    private _textHolder;
+    readonly indent: number;
+    level: number;
+    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/IndentedTextWriter.js

@@ -1,34 +1,34 @@
-export class IndentedTextWriter {
-    _textHolder = '';
-    indent = 4;
-    level = 0;
-    get position() {
-        return this._textHolder.length;
-    }
-    isLastCharNewline() {
-        return this._textHolder[this._textHolder.length - 1] === '\n';
-    }
-    levelRaise() {
-        this.level++;
-    }
-    levelShrink() {
-        this.level--;
-    }
-    write(text) {
-        this._textHolder += text;
-    }
-    writeLine(text) {
-        this.writeIndent();
-        this._textHolder += text;
-        this.writeNewline();
-    }
-    writeIndent() {
-        this._textHolder += ''.padEnd(this.level * this.indent, ' ');
-    }
-    writeNewline() {
-        this._textHolder += '\n';
-    }
-    getString() {
-        return this._textHolder;
-    }
-}
+export class IndentedTextWriter {
+    _textHolder = '';
+    indent = 4;
+    level = 0;
+    get position() {
+        return this._textHolder.length;
+    }
+    isLastCharNewline() {
+        return this._textHolder[this._textHolder.length - 1] === '\n';
+    }
+    levelRaise() {
+        this.level++;
+    }
+    levelShrink() {
+        this.level--;
+    }
+    write(text) {
+        this._textHolder += text;
+    }
+    writeLine(text) {
+        this.writeIndent();
+        this._textHolder += text;
+        this.writeNewline();
+    }
+    writeIndent() {
+        this._textHolder += ''.padEnd(this.level * this.indent, ' ');
+    }
+    writeNewline() {
+        this._textHolder += '\n';
+    }
+    getString() {
+        return this._textHolder;
+    }
+}

package/dist/elements/helper/KeyNameHelper.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -1,4 +1,4 @@
-import { IPoint } from "../../interfaces/IPoint.js";
-import { IDesignItem } from "../item/IDesignItem.js";
-export declare function filterChildPlaceItems(items: IDesignItem[]): IDesignItem[];
-export declare function placeDesignItem(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding'): void;
+import { IPoint } from "../../interfaces/IPoint.js";
+import { IDesignItem } from "../item/IDesignItem.js";
+export declare function filterChildPlaceItems(items: IDesignItem[]): IDesignItem[];
+export declare function placeDesignItem(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding'): void;

package/dist/elements/helper/LayoutHelper.js

@@ -1,67 +1,67 @@
-//todo
-//this function should return the correct property to change a layout, for example left/right when left or right is used,
-//maybe margin on grid? or transform??
-export function filterChildPlaceItems(items) {
-    const filterdPlaceItems = [];
-    next: for (let i of items) {
-        let par = i.parent;
-        while (par != null && !par.isRootItem) {
-            if (items.indexOf(par) >= 0)
-                continue next;
-            par = par.parent;
-        }
-        filterdPlaceItems.push(i);
-    }
-    return filterdPlaceItems;
-}
-export function placeDesignItem(container, designItem, offset, mode) {
-    const movedElement = designItem.element;
-    const computedStyleMovedElement = getComputedStyle(movedElement);
-    if (mode === 'position') {
-        let positionedContainerElement = container.element;
-        let computedStylePositionedContainer = getComputedStyle(container.element);
-        while (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute') {
-            positionedContainerElement = positionedContainerElement.parentElement;
-            computedStylePositionedContainer = getComputedStyle(positionedContainerElement);
-        }
-        let oldLeft = null;
-        let oldRight = null;
-        let oldTop = null;
-        let oldBottom = null;
-        let containerLeft = 0;
-        //@ts-ignore
-        let containerRight = 0;
-        let containerTop = 0;
-        //@ts-ignore
-        let containerBottom = 0;
-        let hasPositionedLayout = false;
-        if (computedStyleMovedElement.position === 'relative' || computedStyleMovedElement.position === 'absolute') {
-            oldLeft = parseFloat(movedElement.style.left);
-            oldLeft = Number.isNaN(oldLeft) ? null : oldLeft;
-            oldTop = parseFloat(movedElement.style.top);
-            oldTop = Number.isNaN(oldTop) ? null : oldTop;
-            oldRight = parseFloat(movedElement.style.right);
-            oldRight = Number.isNaN(oldRight) ? null : oldRight;
-            oldBottom = parseFloat(movedElement.style.bottom);
-            oldBottom = Number.isNaN(oldBottom) ? null : oldBottom;
-            hasPositionedLayout = true;
-        }
-        else {
-            if (positionedContainerElement !== container.element) {
-                let posContainerRect = positionedContainerElement.getBoundingClientRect();
-                let elementRect = designItem.element.getBoundingClientRect();
-                containerLeft = elementRect.left - posContainerRect.left;
-                containerRight = elementRect.right - posContainerRect.right;
-                containerTop = elementRect.top - posContainerRect.top;
-                containerBottom = elementRect.bottom - posContainerRect.bottom;
-            }
-        }
-        if (!hasPositionedLayout)
-            designItem.setStyle('position', 'absolute');
-        designItem.setStyle('left', (offset.x + (oldLeft ?? 0) + containerLeft) + "px");
-        designItem.setStyle('top', (offset.y + (oldTop ?? 0) + containerTop) + "px");
-    }
-}
-/*function placeViaPosition(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding') {
-  
-}*/ 
+//todo
+//this function should return the correct property to change a layout, for example left/right when left or right is used,
+//maybe margin on grid? or transform??
+export function filterChildPlaceItems(items) {
+    const filterdPlaceItems = [];
+    next: for (let i of items) {
+        let par = i.parent;
+        while (par != null && !par.isRootItem) {
+            if (items.indexOf(par) >= 0)
+                continue next;
+            par = par.parent;
+        }
+        filterdPlaceItems.push(i);
+    }
+    return filterdPlaceItems;
+}
+export function placeDesignItem(container, designItem, offset, mode) {
+    const movedElement = designItem.element;
+    const computedStyleMovedElement = getComputedStyle(movedElement);
+    if (mode === 'position') {
+        let positionedContainerElement = container.element;
+        let computedStylePositionedContainer = getComputedStyle(container.element);
+        while (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute') {
+            positionedContainerElement = positionedContainerElement.parentElement;
+            computedStylePositionedContainer = getComputedStyle(positionedContainerElement);
+        }
+        let oldLeft = null;
+        let oldRight = null;
+        let oldTop = null;
+        let oldBottom = null;
+        let containerLeft = 0;
+        //@ts-ignore
+        let containerRight = 0;
+        let containerTop = 0;
+        //@ts-ignore
+        let containerBottom = 0;
+        let hasPositionedLayout = false;
+        if (computedStyleMovedElement.position === 'relative' || computedStyleMovedElement.position === 'absolute') {
+            oldLeft = parseFloat(movedElement.style.left);
+            oldLeft = Number.isNaN(oldLeft) ? null : oldLeft;
+            oldTop = parseFloat(movedElement.style.top);
+            oldTop = Number.isNaN(oldTop) ? null : oldTop;
+            oldRight = parseFloat(movedElement.style.right);
+            oldRight = Number.isNaN(oldRight) ? null : oldRight;
+            oldBottom = parseFloat(movedElement.style.bottom);
+            oldBottom = Number.isNaN(oldBottom) ? null : oldBottom;
+            hasPositionedLayout = true;
+        }
+        else {
+            if (positionedContainerElement !== container.element) {
+                let posContainerRect = positionedContainerElement.getBoundingClientRect();
+                let elementRect = designItem.element.getBoundingClientRect();
+                containerLeft = elementRect.left - posContainerRect.left;
+                containerRight = elementRect.right - posContainerRect.right;
+                containerTop = elementRect.top - posContainerRect.top;
+                containerBottom = elementRect.bottom - posContainerRect.bottom;
+            }
+        }
+        if (!hasPositionedLayout)
+            designItem.setStyle('position', 'absolute');
+        designItem.setStyle('left', (offset.x + (oldLeft ?? 0) + containerLeft) + "px");
+        designItem.setStyle('top', (offset.y + (oldTop ?? 0) + containerTop) + "px");
+    }
+}
+/*function placeViaPosition(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding') {
+  
+}*/