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

package/dist/elements/helper/NpmPackageLoader.js

@@ -0,0 +1,357 @@
+import { PreDefinedElementsService } from "../services/elementsService/PreDefinedElementsService.js";
+import { WebcomponentManifestElementsService } from "../services/elementsService/WebcomponentManifestElementsService.js";
+import { WebcomponentManifestPropertiesService } from "../services/propertiesService/services/WebcomponentManifestPropertiesService.js";
+import { removeLeading, removeTrailing } from "./Helper.js";
+//TODO: remove this code when import asserts are supported
+let packageHacks;
+//@ts-ignore
+if (window.importShim) {
+    const packageHacksUrl = import.meta.resolve('./NpmPackageHacks.json');
+    //@ts-ignore
+    packageHacks = await importShim(packageHacksUrl, { assert: { type: 'json' } });
+}
+else
+    //@ts-ignore
+    packageHacks = await import("./NpmPackageHacks.json", { assert: { type: 'json' } });
+if (packageHacks.default)
+    packageHacks = packageHacks.default;
+export class NpmPackageLoader {
+    static registryPatchedTohandleErrors;
+    //packageSource = '//unpkg.com/';
+    _packageSource;
+    _dependecies = new Map();
+    constructor(packageSource = '//cdn.jsdelivr.net/npm/') {
+        this._packageSource = packageSource;
+        NpmPackageLoader.patchCustomElementsRegistryToHandleErrors();
+    }
+    static patchCustomElementsRegistryToHandleErrors() {
+        if (!NpmPackageLoader.registryPatchedTohandleErrors) {
+            NpmPackageLoader.registryPatchedTohandleErrors = true;
+            let customElementsRegistry = window.customElements;
+            const registry = {};
+            registry.define = function (name, constructor, options) {
+                try {
+                    customElementsRegistry.define(name, constructor, options);
+                }
+                catch (err) {
+                    console.warn(err);
+                }
+            };
+            registry.get = function (name) {
+                return customElementsRegistry.get(name);
+            };
+            registry.upgrade = function (node) {
+                return customElementsRegistry.upgrade(node);
+            };
+            registry.whenDefined = function (name) {
+                return customElementsRegistry.whenDefined(name);
+            };
+            Object.defineProperty(window, "customElements", {
+                get() {
+                    return registry;
+                }
+            });
+        }
+    }
+    //TODO: remove paletteTree form params. elements should be added to serviceconatiner, and the container should notify
+    async loadNpmPackage(pkg, serviceContainer, paletteTree, loadAllImports, reportState) {
+        const baseUrl = window.location.protocol + this._packageSource + pkg + '/';
+        const packageJsonUrl = baseUrl + 'package.json';
+        if (reportState)
+            reportState(pkg + ": loading package.json");
+        const packageJson = await fetch(packageJsonUrl);
+        const packageJsonObj = await packageJson.json();
+        this.addToImportmap(baseUrl, packageJsonObj);
+        const depPromises = [];
+        if (packageJsonObj.dependencies) {
+            for (let d in packageJsonObj.dependencies) {
+                depPromises.push(this.loadDependency(d, packageJsonObj.dependencies[d]));
+            }
+        }
+        await Promise.all(depPromises);
+        let customElementsUrl = baseUrl + 'custom-elements.json';
+        let elementsRootPath = baseUrl;
+        if (packageJsonObj.customElements) {
+            customElementsUrl = baseUrl + removeTrailing(packageJsonObj.customElements, '/');
+            if (customElementsUrl.includes('/')) {
+                let idx = customElementsUrl.lastIndexOf('/');
+                elementsRootPath = customElementsUrl.substring(0, idx + 1);
+            }
+        }
+        let webComponentDesignerUrl = baseUrl + 'web-component-designer.json';
+        if (packageJsonObj.webComponentDesigner) {
+            webComponentDesignerUrl = baseUrl + removeLeading(packageJsonObj.webComponentDesigner, '/');
+        }
+        if (reportState)
+            reportState(pkg + ": loading custom-elements.json");
+        let customElementsJson = await fetch(customElementsUrl);
+        if (!customElementsJson.ok && packageJsonObj.homepage) {
+            try {
+                const url = new URL(packageJsonObj.homepage);
+                const newurl = 'https://raw.githubusercontent.com/' + url.pathname + '/master/custom-elements.json';
+                customElementsJson = await fetch(newurl);
+                console.warn("custom-elements.json was missing from npm package, but was loaded from github as a fallback.");
+            }
+            catch (err) {
+                console.warn("github custom elments json fallback", err);
+            }
+        }
+        if (serviceContainer) {
+            fetch(webComponentDesignerUrl).then(async (x) => {
+                if (x.ok) {
+                    const webComponentDesignerJson = await x.json();
+                    if (webComponentDesignerJson.services) {
+                        for (let o in webComponentDesignerJson.services) {
+                            for (let s of webComponentDesignerJson.services[o]) {
+                                if (s.startsWith('./'))
+                                    s = s.substring(2);
+                                //@ts-ignore
+                                const classDefinition = (await importShim(baseUrl + s)).default;
+                                //@ts-ignore
+                                serviceContainer.register(o, new classDefinition());
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        if (customElementsJson.ok) {
+            const customElementsJsonObj = await customElementsJson.json();
+            let elements = new WebcomponentManifestElementsService(packageJsonObj.name, elementsRootPath, customElementsJsonObj);
+            if (serviceContainer)
+                serviceContainer.register('elementsService', elements);
+            if (serviceContainer) {
+                let properties = new WebcomponentManifestPropertiesService(packageJsonObj.name, customElementsJsonObj);
+                serviceContainer.register('propertyService', properties);
+            }
+            if (loadAllImports) {
+                for (let e of await elements.getElements()) {
+                    //@ts-ignore
+                    importShim(e.import);
+                }
+            }
+            if (serviceContainer && paletteTree) {
+                //todo: should be retriggered by service container, or changeing list in container
+                paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
+            }
+            /* Package Hacks */
+            if (packageHacks[pkg]?.import) {
+                import(packageHacks[pkg]?.import);
+            }
+            if (packageHacks[pkg]?.script) {
+                const scriptUrl = URL.createObjectURL(new Blob([packageHacks[pkg]?.script], { type: 'application/javascript' }));
+                import(scriptUrl);
+            }
+        }
+        else {
+            console.warn('npm package: ' + pkg + ' - no custom-elements.json found, only loading javascript module');
+            let originalCustomElementsRegistry = window.customElements;
+            const registry = {};
+            const newElements = [];
+            registry.define = function (name, constructor, options) {
+                newElements.push(name);
+                originalCustomElementsRegistry.define(name, constructor, options);
+            };
+            registry.get = function (name) {
+                return originalCustomElementsRegistry.get(name);
+            };
+            registry.upgrade = function (node) {
+                return originalCustomElementsRegistry.upgrade(node);
+            };
+            registry.whenDefined = function (name) {
+                return originalCustomElementsRegistry.whenDefined(name);
+            };
+            Object.defineProperty(window, "customElements", {
+                get() {
+                    return registry;
+                }
+            });
+            if (packageJsonObj.module) {
+                //@ts-ignore
+                await importShim(baseUrl + removeLeading(packageJsonObj.module, '/'));
+            }
+            else if (packageJsonObj.main) {
+                //@ts-ignore
+                await importShim(baseUrl + removeLeading(packageJsonObj.main, '/'));
+            }
+            else if (packageJsonObj.unpkg) {
+                //@ts-ignore
+                await importShim(baseUrl + removeLeading(packageJsonObj.unpkg, '/'));
+            }
+            else {
+                console.warn('npm package: ' + pkg + ' - no entry point in package found.');
+            }
+            /* Package Hacks */
+            if (packageHacks[pkg]?.import) {
+                await import(packageHacks[pkg]?.import);
+            }
+            if (packageHacks[pkg]?.script) {
+                const scriptUrl = URL.createObjectURL(new Blob([packageHacks[pkg]?.script], { type: 'application/javascript' }));
+                await import(scriptUrl);
+            }
+            if (newElements.length > 0 && serviceContainer && paletteTree) {
+                const elementsCfg = {
+                    elements: newElements
+                };
+                let elService = new PreDefinedElementsService(pkg, elementsCfg);
+                serviceContainer.register('elementsService', elService);
+                paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
+            }
+            Object.defineProperty(window, "customElements", {
+                get() {
+                    return originalCustomElementsRegistry;
+                }
+            });
+        }
+        if (reportState)
+            reportState(pkg + ": done");
+        let retVal = {};
+        if (packageHacks[pkg]?.html) {
+            retVal.html = (packageHacks[pkg]?.html).replaceAll("${baseUrl}", baseUrl);
+        }
+        if (packageHacks[pkg]?.style) {
+            retVal.style = (packageHacks[pkg]?.style).replaceAll("${baseUrl}", baseUrl);
+        }
+        return retVal;
+    }
+    async loadDependency(dependency, version, reportState) {
+        if (this._dependecies.has(dependency))
+            return;
+        this._dependecies.set(dependency, true);
+        if (dependency.startsWith('@types')) {
+            console.warn('ignoring wrong dependency: ', dependency);
+            return;
+        }
+        if (reportState)
+            reportState(dependency + ": loading dependency: " + dependency);
+        const baseUrl = window.location.protocol + this._packageSource + dependency + '/';
+        const packageJsonUrl = baseUrl + 'package.json';
+        const packageJson = await fetch(packageJsonUrl);
+        const packageJsonObj = await packageJson.json();
+        const depPromises = [];
+        if (packageJsonObj.dependencies) {
+            for (let d in packageJsonObj.dependencies) {
+                depPromises.push(this.loadDependency(d, packageJsonObj.dependencies[d]));
+            }
+        }
+        await Promise.all(depPromises);
+        this.addToImportmap(baseUrl, packageJsonObj);
+    }
+    async addToImportmap(baseUrl, packageJsonObj) {
+        //@ts-ignore
+        const map = importShim.getImportMap().imports;
+        const importMap = { imports: {}, scopes: {} };
+        if (!map.hasOwnProperty(packageJsonObj.name)) {
+            //todo - use exports of package.json for importMap
+            if (packageJsonObj.exports) {
+                /* "exports": {
+                ".": {
+                    "browser": "./index.browser.js",
+                    "default": "./index.js"
+                },
+                "./async": {
+                    "browser": "./async/index.browser.js",
+                    "default": "./async/index.js"
+                },
+                "./non-secure": "./non-secure/index.js",
+                "./package.json": "./package.json"
+            }
+           
+            "exports": {
+                "node": {
+                  "import": "./feature-node.mjs",
+                  "require": "./feature-node.cjs"
+                },
+                "default": "./feature.mjs"
+              }
+            
+            
+               "exports": {
+                ".": "./index.js",
+                "./feature.js": {
+                  "node": "./feature-node.js",
+                  "default": "./feature.js"
+                }
+              }
+
+            "exports": {
+                ".": {
+                    "types": "./dist/index.d.ts",
+                    "import": {
+                        "browser": {
+                            "development": "./dist/composed-offset-position.browser.mjs",
+                            "default": "./dist/composed-offset-position.browser.min.mjs"
+                        },
+                        "default": "./dist/composed-offset-position.mjs"
+                    },
+                    "module": "./dist/composed-offset-position.esm.js",
+                    "default": "./dist/composed-offset-position.umd.js"
+                },
+                "./package.json": "./package.json"
+            }
+            
+            */
+                /*
+                "exports": {
+                    "import": "./index-module.js",
+                    "require": "./index-require.cjs"
+                },
+                */
+                let getImport = (obj) => {
+                    if (obj?.browser)
+                        return obj.browser;
+                    if (obj?.import)
+                        return obj.import;
+                    if (obj?.module)
+                        return obj.module;
+                    if (obj?.default)
+                        return obj.default;
+                    return obj?.node;
+                };
+                /*
+                for support of this:
+                "exports": {
+                ".": {
+                    "types": "./dist/index.d.ts",
+                    "import": {
+                        "browser": {
+                            "development": "./dist/composed-offset-position.browser.mjs",
+                            "default": "./dist/composed-offset-position.browser.min.mjs"
+                        },
+                */
+                let getImportFlat = (obj) => {
+                    let i = getImport(obj);
+                    if (!(typeof i == 'string'))
+                        i = getImport(i);
+                    if (!(typeof i == 'string'))
+                        i = getImport(i);
+                    if (!(typeof i == 'string'))
+                        i = null;
+                    return i;
+                };
+                //Names to use: browser, import, default, node
+                let imp = getImportFlat(packageJsonObj.exports);
+                if (imp) {
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(imp, '.'), '/');
+                }
+                else if (imp = getImportFlat(packageJsonObj.exports?.['.'])) {
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(imp, '.'), '/');
+                }
+            }
+            let mainImport = packageJsonObj.main;
+            if (packageJsonObj.module)
+                mainImport = packageJsonObj.module;
+            if (packageJsonObj.unpkg && !mainImport)
+                mainImport = packageJsonObj.unpkg;
+            if (!importMap.imports[packageJsonObj.name]) {
+                if (mainImport)
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(mainImport, '.'), '/');
+                else
+                    console.warn('package: ' + baseUrl + 'no main import found');
+            }
+            importMap.imports[packageJsonObj.name + '/'] = baseUrl;
+            //@ts-ignore
+            importShim.addImportMap(importMap);
+        }
+    }
+}

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

@@ -0,0 +1,101 @@
+import { IPoint } from "../../interfaces/IPoint.js";
+export {};
+export declare type PathDataM = {
+    type: 'M' | 'm';
+    values: [x: number, y: number];
+};
+export declare type PathDataL = {
+    type: 'L' | 'l';
+    values: [x: number, y: number];
+};
+export declare type PathDataT = {
+    type: 'T' | 't';
+    values: [x: number, y: number];
+};
+export declare type PathDataH = {
+    type: 'H' | 'h';
+    values: [x: number];
+};
+export declare type PathDataV = {
+    type: 'V' | 'v';
+    values: [y: number];
+};
+export declare type PathDataZ = {
+    type: 'Z' | 'z';
+    values?: [];
+};
+export declare type PathDataC = {
+    type: 'C' | 'c';
+    values: [x1: number, y1: number, x2: number, y2: number, x: number, y: number];
+};
+export declare type PathDataS = {
+    type: 'S' | 's';
+    values: [x2: number, y2: number, x: number, y: number];
+};
+export declare type PathDataQ = {
+    type: 'Q' | 'q';
+    values: [x1: number, y1: number, x: number, y: number];
+};
+export declare type PathDataA = {
+    type: 'A' | 'a';
+    values: [rx: number, ry: number, ang: number, flag1: 0 | 1, flag2: 0 | 1, x: number, y: number];
+};
+export declare type PathData = {
+    type: string;
+} & (PathDataM | PathDataL | PathDataH | PathDataV | PathDataZ | PathDataC | PathDataS | PathDataQ | PathDataT | PathDataA)[];
+export declare function straightenLine(p1: IPoint, p2: IPoint, only90Steps?: boolean): IPoint;
+export declare function calculateNormLegth(p1: IPoint, p2: IPoint): number;
+export declare function calculateAlpha(p1: IPoint, p2: IPoint): number;
+export declare function moveSVGPath(path: SVGPathElement, xFactor: number, yFactor: number): string;
+export declare function createPathD(path: PathData[]): string;
+declare global {
+    interface SVGGraphicsElement {
+        getPathData(options?: {
+            normalize?: boolean;
+        }): PathData[];
+        isPointInStroke(point: {
+            x: number;
+            y: number;
+        }): any;
+        isPointInFill(point: {
+            x: number;
+            y: number;
+        }): any;
+    }
+    interface SVGPathElement {
+        getPathData(options?: {
+            normalize?: boolean;
+        }): PathData[];
+        setPathData(pathData: PathData[]): any;
+    }
+    interface SVGRectElement {
+        getPathData(options?: {
+            normalize?: boolean;
+        }): PathData[];
+    }
+    interface SVGCircleElement {
+        getPathData(options?: {
+            normalize?: boolean;
+        }): PathData[];
+    }
+    interface SVGEllipseElement {
+        getPathData(options?: {
+            normalize?: boolean;
+        }): PathData[];
+    }
+    interface SVGLineElement {
+        getPathData(options?: {
+            normalize?: boolean;
+        }): PathData[];
+    }
+    interface SVGPolylineElement {
+        getPathData(options?: {
+            normalize?: boolean;
+        }): PathData[];
+    }
+    interface SVGPolygonElement {
+        getPathData(options?: {
+            normalize?: boolean;
+        }): PathData[];
+    }
+}