@node-projects/web-component-designer 0.0.185 → 0.0.187

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

@@ -0,0 +1,4 @@
+export declare function copyTextToClipboard(text: any): Promise<void>;
+export declare function copyToClipboard(items: [format: string, data: string][]): Promise<void>;
+export declare function getTextFromClipboard(): Promise<string>;
+export declare function getFromClipboard(): Promise<ClipboardItems>;

package/dist/elements/helper/ClipboardHelper.js

@@ -0,0 +1,84 @@
+export async function copyTextToClipboard(text) {
+    copyToClipboard(['text/plain', text]);
+}
+export async function copyToClipboard(items) {
+    if (navigator.clipboard) {
+        try {
+            let data = [];
+            for (let n of items) {
+                data.push(new ClipboardItem({ [n[0]]: new Blob([n[1]], { type: n[0] }) }));
+            }
+            await navigator.clipboard.write(data);
+        }
+        catch (err) {
+            await navigator.clipboard.writeText(items[0][1]);
+        }
+        console.info('Copy to clipboard successful');
+    }
+    else {
+        const textArea = document.createElement('textarea');
+        textArea.style.position = 'fixed';
+        textArea.style.top = '0';
+        textArea.style.left = '0';
+        textArea.style.width = '2em';
+        textArea.style.height = '2em';
+        textArea.style.padding = '0';
+        textArea.style.border = 'none';
+        textArea.style.outline = 'none';
+        textArea.style.boxShadow = 'none';
+        textArea.style.background = 'transparent';
+        textArea.value = items[0][1];
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+            document.execCommand('copy');
+        }
+        catch (err) {
+            try {
+                document.execCommand('copy');
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        document.body.removeChild(textArea);
+    }
+}
+export async function getTextFromClipboard() {
+    if (navigator.clipboard) {
+        return new Promise(async (resolve, reject) => {
+            const clipText = await navigator.clipboard.readText();
+            resolve(clipText);
+        });
+    }
+    else {
+        return new Promise(async (resolve, reject) => {
+            const textArea = document.createElement('textarea');
+            textArea.style.position = 'fixed';
+            textArea.style.top = '0';
+            textArea.style.left = '0';
+            textArea.style.width = '2em';
+            textArea.style.height = '2em';
+            textArea.style.padding = '0';
+            textArea.style.border = 'none';
+            textArea.style.outline = 'none';
+            textArea.style.boxShadow = 'none';
+            textArea.style.background = 'transparent';
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            document.execCommand('paste');
+            let value = textArea.value;
+            document.body.removeChild(textArea);
+            resolve(value);
+        });
+    }
+}
+export async function getFromClipboard() {
+    if (navigator.clipboard) {
+        return await navigator.clipboard.read();
+    }
+    else {
+        return null;
+    }
+}

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

@@ -6,7 +6,7 @@ export declare class NpmPackageLoader {
     private _dependecies;
     constructor(packageSource?: string);
     static patchCustomElementsRegistryToHandleErrors(): void;
-    loadNpmPackage(pkg: string, serviceContainer: ServiceContainer, paletteTree: PaletteTreeView, reportState?: (state: string) => void): Promise<void>;
+    loadNpmPackage(pkg: string, serviceContainer: ServiceContainer, paletteTree: PaletteTreeView, loadAllImports: boolean, reportState?: (state: string) => void): Promise<void>;
     loadDependency(dependency: string, version?: string, reportState?: (state: string) => void): Promise<void>;
     addToImportmap(baseUrl: string, packageJsonObj: {
         name?: string;

package/dist/elements/helper/NpmPackageLoader.js

@@ -41,7 +41,7 @@ export class NpmPackageLoader {
         }
     }
     //TODO: remove paletteTree form params. elements should be added to serviceconatiner, and the container should notify
-    async loadNpmPackage(pkg, serviceContainer, paletteTree, reportState) {
+    async loadNpmPackage(pkg, serviceContainer, paletteTree, loadAllImports, reportState) {
         const baseUrl = window.location.protocol + this._packageSource + pkg + '/';
         const packageJsonUrl = baseUrl + 'package.json';
         if (reportState)
@@ -106,7 +106,7 @@ export class NpmPackageLoader {
             serviceContainer.register('elementsService', elements);
             let properties = new WebcomponentManifestPropertiesService(packageJsonObj.name, customElementsJsonObj);
             serviceContainer.register('propertyService', properties);
-            if (window.location.search.includes("loadAllImports")) {
+            if (loadAllImports) {
                 for (let e of await elements.getElements()) {
                     //@ts-ignore
                     importShim(e.import);

package/dist/elements/item/DesignItem.d.ts

@@ -17,6 +17,7 @@ export declare class DesignItem implements IDesignItem {
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
     shouldAppliedDesignerExtensions: Map<ExtensionType, IDesignerExtensionProvider[]>;
     clone(): Promise<IDesignItem>;
+    allMatching(selectors: string): Generator<IDesignItem, void, undefined>;
     replaceNode(newNode: Node): void;
     get nodeType(): NodeType;
     private _attributes;

package/dist/elements/item/DesignItem.js

@@ -31,6 +31,15 @@ export class DesignItem {
         }
         return null;
     }
+    *allMatching(selectors) {
+        if (this.hasChildren) {
+            for (let d of this.children()) {
+                if (d.element.matches(selectors))
+                    yield d;
+                yield* d.allMatching(selectors);
+            }
+        }
+    }
     replaceNode(newNode) {
         DesignItem._designItemMap.delete(this.node);
         DesignItem._designItemMap.set(newNode, this);

package/dist/elements/item/IDesignItem.d.ts

@@ -19,6 +19,7 @@ export interface IDesignItem {
     readonly hasStyles: boolean;
     readonly hasChildren: boolean;
     children(): IterableIterator<IDesignItem>;
+    allMatching(selectors: string): IterableIterator<IDesignItem>;
     readonly childCount: number;
     readonly firstChild: IDesignItem;
     readonly parent: IDesignItem;

package/dist/elements/services/copyPasteService/CopyPasteService.js

@@ -1,32 +1,32 @@
 import { DomConverter } from "../../widgets/designerView/DomConverter.js";
+import { copyToClipboard, getFromClipboard, getTextFromClipboard } from "../../helper/ClipboardHelper.js";
 export const positionsJsonMime = 'web text/positions';
 export class CopyPasteService {
     async copyItems(designItems) {
         const copyText = DomConverter.ConvertToString(designItems, null, false);
-        try {
-            const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
-            const data = [new ClipboardItem({ ["text/html"]: new Blob([copyText], { type: 'text/html' }), [positionsJsonMime]: new Blob([JSON.stringify(positions)], { type: positionsJsonMime }) })];
-            await navigator.clipboard.write(data);
-        }
-        catch (err) {
-            await navigator.clipboard.writeText(copyText);
-        }
+        const positions = designItems.map(x => x.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(x.element));
+        copyToClipboard([["text/html", copyText], [positionsJsonMime, JSON.stringify(positions)]]);
     }
     async getPasteItems(serviceContainer, instanceServiceContainer) {
-        const items = await navigator.clipboard.read();
         let html = '';
-        try {
-            html = await (await items[0].getType('text/html'))?.text();
-        }
-        catch { }
-        if (!html)
-            html = await (await items[0].getType('text/plain'))?.text();
         let positions = null;
-        try {
-            let positionsJson = await (await items[0].getType(positionsJsonMime))?.text();
-            positions = JSON.parse(positionsJson);
+        const items = await getFromClipboard();
+        if (items != null) {
+            try {
+                html = await (await items[0].getType('text/html'))?.text();
+            }
+            catch { }
+            if (!html)
+                html = await (await items[0].getType('text/plain'))?.text();
+            try {
+                let positionsJson = await (await items[0].getType(positionsJsonMime))?.text();
+                positions = JSON.parse(positionsJson);
+            }
+            catch { }
+        }
+        else {
+            html = await getTextFromClipboard();
         }
-        catch { }
         const parserService = serviceContainer.htmlParserService;
         return [await parserService.parse(html, serviceContainer, instanceServiceContainer), positions];
     }

package/dist/elements/services/htmlParserService/AbstractClassElementParserService.d.ts

@@ -0,0 +1,12 @@
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { ServiceContainer } from '../ServiceContainer.js';
+import { IHtmlParserService } from './IHtmlParserService.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+export declare abstract class AbstractClassElementParserService implements IHtmlParserService {
+    private _parserUrl;
+    private _esprimaUrl;
+    constructor(parserUrl?: string, esprimaUrl?: string);
+    parse(module: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+    private _parseDiv;
+    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+}

package/dist/elements/services/htmlParserService/AbstractClassElementParserService.js

@@ -0,0 +1,121 @@
+import { DesignItem } from '../../item/DesignItem.js';
+import { CssAttributeParser } from '../../helper/CssAttributeParser.js';
+import { newElementFromString } from '../../helper/ElementHelper.js';
+function* getChildNodes(node) {
+    switch (node.type) {
+        case 'Program':
+            yield node.body;
+            break;
+        case 'ClassDeclaration':
+            yield node.body;
+            break;
+        case 'MethodDefinition':
+            yield node.value;
+            break;
+    }
+}
+//WIP - not yet workin
+//Parse HTML inside of Javascript Classes
+export class AbstractClassElementParserService {
+    _parserUrl;
+    _esprimaUrl;
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js', esprimaUrl = '../../../../../esprima-next/dist/esm/esprima.js') {
+        this._parserUrl = parserUrl;
+        this._esprimaUrl = esprimaUrl;
+    }
+    async parse(module, serviceContainer, instanceServiceContainer) {
+        let esprima = await import(this._esprimaUrl);
+        const parsedModule = esprima.parseModule(module);
+        const classDecl = parsedModule.body.find(x => x.type == esprima.Syntax.ClassDeclaration);
+        const renderMethod = classDecl.body.body.find(x => x.type == esprima.Syntax.MethodDefinition && x.key.name == 'render');
+        const renderMethodStatement = renderMethod.value.body.body[0];
+        const taggedTemplate = renderMethodStatement.argument;
+        const templateLiteral = taggedTemplate.quasi;
+        //@ts-ignore
+        const tmp = getChildNodes(parsedModule);
+        const html = templateLiteral.quasis.map(x => x.value.raw).join();
+        //@ts-ignore
+        let parser = await import(this._parserUrl);
+        const parsed = parser.parse(html, { comment: true });
+        let designItems = [];
+        for (let p of parsed.childNodes) {
+            let di = this._createDesignItemsRecursive(p, serviceContainer, instanceServiceContainer, null);
+            if (di != null)
+                designItems.push(di);
+            else
+                console.warn("NodeHtmlParserService - could not parse element", p);
+        }
+        return designItems;
+    }
+    _parseDiv = document.createElement("div");
+    _createDesignItemsRecursive(item, serviceContainer, instanceServiceContainer, namespace) {
+        let designItem = null;
+        if (item.nodeType == 1) {
+            let element;
+            let manualCreatedElement = false;
+            if (!namespace)
+                element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
+            if (!element) {
+                if (namespace)
+                    element = document.createElementNS(namespace, item.rawTagName);
+                else
+                    element = document.createElement(item.rawTagName);
+                manualCreatedElement = true;
+            }
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+            let hideAtDesignTime = false;
+            let hideAtRunTime = false;
+            let lockAtDesignTime = false;
+            let style = '';
+            let attr = item.attributes;
+            for (let a in attr) {
+                if (a !== 'style') {
+                    designItem._withoutUndoSetAttribute(a, attr[a]);
+                    if (manualCreatedElement) {
+                        element.setAttribute(a, attr[a]);
+                    }
+                    if (a === 'node-projects-hide-at-design-time')
+                        hideAtDesignTime = true;
+                    else if (a === 'node-projects-hide-at-run-time')
+                        hideAtRunTime = true;
+                    else if (a === 'node-projects-lock-at-design-time')
+                        lockAtDesignTime = true;
+                }
+                else {
+                    style = attr[a];
+                }
+            }
+            if ((element instanceof HTMLElement || element instanceof SVGElement) && style) {
+                let styleParser = new CssAttributeParser();
+                styleParser.parse(style);
+                for (let s of styleParser.entries) {
+                    designItem._withoutUndoSetStyle(s.name, s.value);
+                    if (manualCreatedElement) {
+                        element.style[s.name] = s.value;
+                    }
+                }
+            }
+            if (!lockAtDesignTime && (element instanceof HTMLElement || element instanceof SVGElement)) {
+                requestAnimationFrame(() => element.style.pointerEvents = 'auto');
+            }
+            designItem.hideAtDesignTime = hideAtDesignTime;
+            designItem.hideAtRunTime = hideAtRunTime;
+            designItem.lockAtDesignTime = lockAtDesignTime;
+            element.draggable = false; //even if it should be true, for better designer exp.
+            for (let c of item.childNodes) {
+                let di = this._createDesignItemsRecursive(c, serviceContainer, instanceServiceContainer, element instanceof SVGElement ? 'http://www.w3.org/2000/svg' : null);
+                designItem._insertChildInternal(di);
+            }
+        }
+        else if (item.nodeType == 3) {
+            this._parseDiv.innerHTML = item.rawText;
+            let element = this._parseDiv.childNodes[0];
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, item, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -35,6 +35,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _additionalStyle;
     private _currentContextMenu;
     private _backgroundImage;
+    private _enableSelectTextNodesOnClick;
     get zoomFactor(): number;
     set zoomFactor(value: number);
     get scaleFactor(): number;

package/dist/elements/widgets/designerView/designerCanvas.js

@@ -40,6 +40,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _additionalStyle;
     _currentContextMenu;
     _backgroundImage;
+    _enableSelectTextNodesOnClick = false;
     get zoomFactor() {
         return this._zoomFactor;
     }
@@ -910,6 +911,18 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             if (!currentElement) {
                 currentElement = this._canvas;
             }
+            else if (this._enableSelectTextNodesOnClick) {
+                const norm = this.getNormalizedEventCoordinates(event);
+                for (let n of currentElement.childNodes) {
+                    if (n.nodeType == NodeType.TextNode) {
+                        let nc = this.getNormalizedElementCoordinates(n);
+                        if (nc.x <= norm.x && nc.x + nc.width >= norm.x && nc.y <= norm.y && nc.y + nc.height >= norm.y) {
+                            currentElement = n;
+                            break;
+                        }
+                    }
+                }
+            }
         }
         if (this._activeTool) {
             this._activeTool.pointerEventHandler(this, event, currentElement);

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from "./elements/helper/ElementHelper.js";
 export * from "./elements/helper/IndentedTextWriter.js";
 export * from "./elements/helper/PathDataPolyfill.js";
 export * from "./elements/helper/Screenshot.js";
+export * from "./elements/helper/ClipboardHelper.js";
 export * from "./elements/loader/OldCustomElementsManifestLoader.js";
 export * from "./elements/helper/w3color.js";
 export * from "./elements/helper/contextMenu/ContextMenu.js";

package/dist/index.js

@@ -7,6 +7,7 @@ export * from "./elements/helper/ElementHelper.js";
 export * from "./elements/helper/IndentedTextWriter.js";
 export * from "./elements/helper/PathDataPolyfill.js";
 export * from "./elements/helper/Screenshot.js";
+export * from "./elements/helper/ClipboardHelper.js";
 export * from "./elements/loader/OldCustomElementsManifestLoader.js";
 export * from "./elements/helper/w3color.js";
 export * from "./elements/helper/contextMenu/ContextMenu.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.185",
+  "version": "0.0.187",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -14,7 +14,6 @@
   },
   "dependencies": {
     "@node-projects/base-custom-webcomponent": "^0.10.9",
-    "@types/node": "^18.11.19",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
@@ -23,19 +22,20 @@
     "@node-projects/node-html-parser-esm": "^2.5.1",
     "@papyrs/stylo": "^0.0.42",
     "@types/codemirror": "^5.60.7",
-    "@types/css-tree": "^2.0.1",
+    "@types/css-tree": "^2.3.0",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
+    "@types/node": "^18.13.0",
     "ace-builds": "^1.15.0",
     "codemirror": "^6.0.1",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.4.1",
+    "jest": "^29.4.2",
     "jquery": "^3.6.3",
     "jquery.fancytree": "^2.38.3",
     "mdn-data": "^2.0.31",
-    "monaco-editor": "^0.34.1",
+    "monaco-editor": "^0.35.0",
     "ts-jest": "^29.0.5",
     "typescript": "^4.9.5",
     "typescript-lit-html-plugin": "^0.9.0"