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

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/htmlParserService/AbstractClassElementParserService.js

@@ -1,22 +1,21 @@
 import { DesignItem } from '../../item/DesignItem.js';
 import { CssAttributeParser } from '../../helper/CssAttributeParser.js';
 import { newElementFromString } from '../../helper/ElementHelper.js';
-import * as esprima from "esprima-next/dist/esm/esprima";
 function* getChildNodes(node) {
     switch (node.type) {
-        case esprima.Syntax.Program:
+        case 'Program':
             yield node.body;
             break;
-        case esprima.Syntax.ClassDeclaration:
+        case 'ClassDeclaration':
             yield node.body;
             break;
-        case esprima.Syntax.MethodDefinition:
+        case 'MethodDefinition':
             yield node.value;
             break;
     }
 }
-// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
-// attributes from their DOM, so you loose Data
+//WIP - not yet workin
+//Parse HTML inside of Javascript Classes
 export class AbstractClassElementParserService {
     _parserUrl;
     _esprimaUrl;
@@ -32,6 +31,8 @@ export class AbstractClassElementParserService {
         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);

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/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.186",
+  "version": "0.0.187",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",