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

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

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

package/dist/elements/helper/GridHelper.js

@@ -0,0 +1,131 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "./TransformHelper.js";
+export function getElementGridInformation(element) {
+    let cs = getComputedStyle(element);
+    let rowSpan = 1;
+    let colSpan = 1;
+    if (cs.gridRowEnd == 'auto')
+        rowSpan = 1;
+    else if (cs.gridRowEnd.startsWith('span'))
+        rowSpan = parseInt(cs.gridRowEnd.substring(4));
+    else
+        rowSpan = parseInt(cs.gridRowEnd) - parseInt(cs.gridRowStart);
+    if (cs.gridColumnEnd == 'auto')
+        colSpan = 1;
+    else if (cs.gridColumnEnd.startsWith('span'))
+        colSpan = parseInt(cs.gridColumnEnd.substring(4));
+    else
+        colSpan = parseInt(cs.gridColumnEnd) - parseInt(cs.gridColumnStart);
+    return { colSpan, rowSpan };
+}
+export function calculateGridInformation(designItem) {
+    //todo:
+    //same name should combine columns/rows
+    let itemRect = designItem.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(designItem.element);
+    let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(designItem.element, null, designItem.instanceServiceContainer.designerCanvas);
+    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 = transformedCornerPoints[0].x;
+    let yOffset = transformedCornerPoints[0].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 rowIdx = 0; rowIdx < rows.length; rowIdx++) {
+        const r = rows[rowIdx];
+        let areas = null;
+        if (gridA && gridA[rw + 1]) {
+            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 colIdx = 0; colIdx < columns.length; colIdx++) {
+            const c = columns[colIdx];
+            if (colIdx > 0) {
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY, column: colIdx, row: rowIdx, type: 'v' });
+                x += xGap;
+            }
+            const currX = Number.parseFloat(c.replace('px', ''));
+            if (rowIdx > 0) {
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap, column: colIdx, row: rowIdx, type: 'h' });
+            }
+            let name = null;
+            if (areas && areas[cl]) {
+                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

@@ -0,0 +1,8 @@
+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;
+export declare function removeTrailing(text: string, char: string): string;
+export declare function removeLeading(text: string, char: string): string;

package/dist/elements/helper/Helper.js

@@ -0,0 +1,36 @@
+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 removeTrailing(text, char) {
+    if (text.endsWith(char ?? '/'))
+        return text.substring(0, text.length - 1);
+    return text;
+}
+export function removeLeading(text, char) {
+    if (text.startsWith(char ?? '/'))
+        return text.substring(1);
+    return text;
+}

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

@@ -0,0 +1,11 @@
+export interface ITextWriter {
+    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/ITextWriter.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,15 @@
+import { ITextWriter } from './ITextWriter.js';
+export declare class IndentedTextWriter implements ITextWriter {
+    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

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

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

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

package/dist/elements/helper/LayoutHelper.js

@@ -0,0 +1,73 @@
+//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');
+        if (oldLeft || oldRight == null)
+            designItem.setStyle('left', (offset.x + (oldLeft ?? 0) + containerLeft) + "px");
+        if (oldTop || oldBottom == null)
+            designItem.setStyle('top', (offset.y + (oldTop ?? 0) + containerTop) + "px");
+        if (oldRight)
+            designItem.setStyle('right', ((oldRight ?? 0) - offset.x + containerRight) + "px");
+        if (oldBottom)
+            designItem.setStyle('bottom', ((oldBottom ?? 0) - offset.y + containerBottom) + "px");
+    }
+}
+/*function placeViaPosition(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding') {
+  
+}*/ 

package/dist/elements/helper/NpmPackageHacks.json

@@ -0,0 +1,15 @@
+{
+    "@shoelace-style/shoelace": {
+        "html": "<link rel=\"stylesheet\" media=\"(prefers-color-scheme:light)\" href=\"${baseUrl}dist/themes/light.css\">\n<link rel=\"stylesheet\" media=\"(prefers-color-scheme:dark)\" href=\"${baseUrl}dist/themes/dark.css\" onload=\"document.documentElement.classList.add('sl-theme-dark');\">"
+    },
+    "@microsoft/fast-components": {
+        "script": "let res = await import('@microsoft/fast-components');\nres.provideFASTDesignSystem().register(res.allComponents);"
+    },
+    "@zooplus/zoo-web-components": {
+        "script": "let res = await import('@zooplus/zoo-web-components');\nres.registerComponents(res);",
+        "style": ":root {\n--primary-mid: #3C9700;\n--primary-light: #66B100;\n--primary-dark: #286400;\n--primary-ultralight: #EBF4E5;\n--secondary-mid: #FF6200;\n--secondary-light: #F80;\n--secondary-dark: #CC4E00;\n--info-ultralight: #ECF5FA;\n--info-mid: #459FD0;\n--warning-ultralight: #FDE8E9;\n--warning-mid: #ED1C24;\n}"
+    },
+    "@material/web": {
+        "import": "@material/web/all.js"
+    }
+}

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

@@ -0,0 +1,20 @@
+import { ServiceContainer } from "../services/ServiceContainer.js";
+export declare class NpmPackageLoader {
+    private static registryPatchedTohandleErrors;
+    private _packageSource;
+    private _dependecies;
+    constructor(packageSource?: string);
+    static patchCustomElementsRegistryToHandleErrors(): void;
+    loadNpmPackage(pkg: string, serviceContainer?: ServiceContainer, paletteTree?: any, loadAllImports?: boolean, reportState?: (state: string) => void): Promise<{
+        html: string;
+        style: string;
+    }>;
+    loadDependency(dependency: string, version?: string, reportState?: (state: string) => void): Promise<void>;
+    addToImportmap(baseUrl: string, packageJsonObj: {
+        name?: string;
+        module?: string;
+        main?: string;
+        unpkg?: string;
+        exports?: Record<string, string>;
+    }): Promise<void>;
+}