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

package/dist/elements/helper/GridHelper.js

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

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

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-{
-    "@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

@@ -1,21 +0,0 @@
-import { ServiceContainer } from "../services/ServiceContainer.js";
-import { PaletteTreeView } from "../widgets/paletteView/paletteTreeView.js";
-export declare class NpmPackageLoader {
-    private static registryPatchedTohandleErrors;
-    private _packageSource;
-    private _dependecies;
-    constructor(packageSource?: string);
-    static patchCustomElementsRegistryToHandleErrors(): void;
-    loadNpmPackage(pkg: string, serviceContainer?: ServiceContainer, paletteTree?: PaletteTreeView, 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>;
-}