@node-projects/web-component-designer 0.0.217 → 0.0.219

package/RemoveOldRemoteBranches.bat

@@ -0,0 +1,7 @@
+@echo off
+echo.
+echo Removes Remote Branches not existing on Server any more
+echo.
+pause
+git remote prune origin
+pause

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

@@ -2,11 +2,8 @@ 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, parseSnippet: boolean): Promise<IDesignItem[]>;
-    private _parseDiv;
-    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
+export declare class AbstractClassElementParserService implements IHtmlParserService {
+    private htmlParser;
+    constructor(htmlParser: IHtmlParserService);
+    parse(code: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise<IDesignItem[]>;
 }

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

@@ -1,106 +1,46 @@
-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;
-    }
+function* findAllNodesOfKind(node, kind) {
+    if (node.kind == kind)
+        yield node;
+    for (const c of node.getChildren())
+        yield* findAllNodesOfKind(c, kind);
 }
-//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;
+    htmlParser;
+    constructor(htmlParser) {
+        this.htmlParser = htmlParser;
     }
-    async parse(module, serviceContainer, instanceServiceContainer, parseSnippet) {
-        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();
+    async parse(code, serviceContainer, instanceServiceContainer, parseSnippet) {
+        const compilerHost /*: ts.CompilerHost*/ = {
+            fileExists: () => true,
+            getCanonicalFileName: filename => filename,
+            getCurrentDirectory: () => '',
+            getDefaultLibFileName: () => 'lib.d.ts',
+            getNewLine: () => '\n',
+            getSourceFile: filename => {
+                //@ts-ignore
+                return ts.createSourceFile(filename, code, ts.ScriptTarget.Latest, true);
+            },
+            readFile: () => null,
+            useCaseSensitiveFileNames: () => true,
+            writeFile: () => null,
+        };
+        const filename = 'aa.ts';
         //@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 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]);
-                    }
-                }
-                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;
-                    }
-                }
-            }
-            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);
+        const program = ts.createProgram([filename], {
+            noResolve: true,
+            //@ts-ignore
+            target: ts.ScriptTarget.Latest,
+        }, compilerHost);
+        const sourceFile = program.getSourceFile(filename);
+        let htmlCode = "";
+        let cssStyle = "";
+        const nodes = findAllNodesOfKind(sourceFile, 212);
+        for (let nd of nodes) {
+            if (nd.tag.escapedText == 'html' && nd.parent.name.escapedText == "template")
+                htmlCode = nd.template.rawText;
+            if (nd.tag.escapedText == 'css' && nd.parent.name.escapedText == "style")
+                cssStyle = nd.template.rawText;
         }
-        return designItem;
+        return this.htmlParser.parse(htmlCode, serviceContainer, instanceServiceContainer, parseSnippet);
     }
 }

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

@@ -0,0 +1,9 @@
+import { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { ServiceContainer } from '../ServiceContainer.js';
+import { IHtmlParserService } from './IHtmlParserService.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+export declare class BaseCustomWebcomponentParserService implements IHtmlParserService {
+    private htmlParser;
+    constructor(htmlParser: IHtmlParserService);
+    parse(code: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise<IDesignItem[]>;
+}

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

@@ -0,0 +1,47 @@
+function* findAllNodesOfKind(node, kind) {
+    if (node.kind == kind)
+        yield node;
+    for (const c of node.getChildren())
+        yield* findAllNodesOfKind(c, kind);
+}
+export class BaseCustomWebcomponentParserService {
+    htmlParser;
+    constructor(htmlParser) {
+        this.htmlParser = htmlParser;
+    }
+    async parse(code, serviceContainer, instanceServiceContainer, parseSnippet) {
+        const compilerHost = {
+            fileExists: () => true,
+            getCanonicalFileName: filename => filename,
+            getCurrentDirectory: () => '',
+            getDefaultLibFileName: () => 'lib.d.ts',
+            getNewLine: () => '\n',
+            getSourceFile: filename => {
+                //@ts-ignore
+                return ts.createSourceFile(filename, code, ts.ScriptTarget.Latest, true);
+            },
+            readFile: () => null,
+            useCaseSensitiveFileNames: () => true,
+            writeFile: () => null,
+        };
+        const filename = 'aa.ts';
+        //@ts-ignore
+        const program = ts.createProgram([filename], {
+            noResolve: true,
+            //@ts-ignore
+            target: ts.ScriptTarget.Latest,
+        }, compilerHost);
+        const sourceFile = program.getSourceFile(filename);
+        let htmlCode = "";
+        let cssStyle = "";
+        const nodes = findAllNodesOfKind(sourceFile, 212);
+        for (let nd of nodes) {
+            if (nd.tag.escapedText == 'html' && nd.parent.name.escapedText == "template")
+                htmlCode = nd.template.rawText;
+            if (nd.tag.escapedText == 'css' && nd.parent.name.escapedText == "style")
+                cssStyle = nd.template.rawText;
+        }
+        instanceServiceContainer.stylesheetService.setStylesheets([{ name: 'css', content: cssStyle }]);
+        return this.htmlParser.parse(htmlCode, serviceContainer, instanceServiceContainer, parseSnippet);
+    }
+}

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

@@ -98,6 +98,9 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _onDrop;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenu;
     private _onDblClick;
+    private _searchShowOverlay;
+    private _searchHideOverlay;
+    private _searchRun;
     private onKeyUp;
     private onKeyDown;
     /**

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

@@ -148,7 +148,86 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     #node-projects-designer-canvas-helper-element {
       height: 0;
       width: 0;
-    }  
+    }
+
+    #node-projects-designer-search-container {
+      position:absolute;
+      display: grid;
+      grid-template-columns: 1fr auto auto;
+      align-items: center;
+      justify-content: left;
+      gap: 8px;
+      width: auto;
+      right: 10px;
+      top: 0;
+      background:rgb(242, 242, 242);
+      padding: 5px 6px;
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+    
+    #node-projects-designer-search-container > #node-projects-designer-search-bar {
+      border: 1px solid black;
+      padding: 0;
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      background-color: white;
+      padding: 1px 2px;
+    }
+    
+    #node-projects-designer-search-container > div > input {
+      height:20px;
+      padding-left: 6px;
+      font-size: 13px;
+      border: none;
+      outline: none;
+    }
+    
+    #node-projects-designer-search-container > div > #node-projects-designer-search-start {
+      height:22px;
+      border: none;
+      background-color: white;
+      font-size: 13px;
+    }
+    
+    #node-projects-designer-search-container > div > #node-projects-designer-search-start:hover {
+      background-color: #D3D3D3;
+      transition: 0.9s;
+      border-radius: 2px;
+    }
+    
+    #node-projects-designer-search-container > #node-projects-designer-search-close {
+      position: relative;
+      width: 20px;
+      height: 20px;
+      border: none;
+      background-color: transparent;
+    }
+    
+    #node-projects-designer-search-container > span {
+      font-family:sans-serif;
+      font-size: 12px;
+    }
+    
+    #node-projects-designer-search-container > #node-projects-designer-search-close::before,
+    #node-projects-designer-search-container > #node-projects-designer-search-close::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 60%;
+      background-color: black;
+      height: 1px;
+    }
+    
+    #node-projects-designer-search-container > #node-projects-designer-search-close::before {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+    
+    #node-projects-designer-search-container > #node-projects-designer-search-close::after {
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
   `;
     static template = html `
     <div style="display: flex;flex-direction: column;width: 100%;height: 100%; margin: 0 !important; padding: 0 !important; border: none !important;">
@@ -161,6 +240,15 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       </div>
       <div id="node-projects-designer-canvas-clickOverlay" tabindex="0" style="pointer-events: auto;  margin: 0 !important; padding: 0 !important; border: none !important;"></div>
       </div>
+      
+      <div id="node-projects-designer-search-container" style="display: none;">
+        <div id="node-projects-designer-search-bar">
+          <input id="node-projects-designer-search-input">
+          <button id="node-projects-designer-search-start">&darr;</button>
+        </div>
+        <span id="node-projects-designer-search-result">0 selected</span>
+        <button id="node-projects-designer-search-close"></button>
+      </div>
     </div>`;
     extensionManager;
     _pointerextensions;
@@ -176,6 +264,12 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.onKeyUp = this.onKeyUp.bind(this);
         this._onDblClick = this._onDblClick.bind(this);
         this._pointerEventHandler = this._pointerEventHandler.bind(this);
+        this._getDomElement('node-projects-designer-search-close').onclick = () => this._searchHideOverlay();
+        this._getDomElement('node-projects-designer-search-start').onclick = () => this._searchRun();
+        this._getDomElement('node-projects-designer-search-container').onkeydown = (event) => {
+            if (event.key === "Enter")
+                this._searchRun();
+        };
         this.clickOverlay.oncontextmenu = (e) => e.preventDefault();
     }
     get designerWidth() {
@@ -756,6 +850,31 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         event.preventDefault();
         this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
     }
+    _searchShowOverlay() {
+        let divElement = this._getDomElement('node-projects-designer-search-container');
+        divElement.style.display = '';
+        this._getDomElement('node-projects-designer-search-input').focus();
+    }
+    _searchHideOverlay() {
+        let divElement = this._getDomElement('node-projects-designer-search-container');
+        divElement.style.display = 'none';
+    }
+    _searchRun() {
+        let input = this._getDomElement('node-projects-designer-search-input');
+        this._getDomElement('node-projects-designer-search-result').innerHTML = "0 selected";
+        if (input.value != "") {
+            let selectedElements = this.shadowRoot.querySelectorAll(input.value);
+            let designItems = [];
+            for (let i = 0; i <= selectedElements.length; i++) {
+                if (this._canvasContainer.contains(selectedElements[i]))
+                    designItems.push(DesignItem.GetDesignItem(selectedElements[i]));
+            }
+            if (designItems.length > 0) {
+                this.instanceServiceContainer.selectionService.setSelectedElements(designItems);
+                this._getDomElement('node-projects-designer-search-result').innerHTML = designItems.length.toString() + " selected";
+            }
+        }
+    }
     onKeyUp(event) {
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
@@ -778,6 +897,8 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.executeCommand({ type: CommandType.paste, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'x')
             this.executeCommand({ type: CommandType.cut, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'f')
+            this._searchShowOverlay();
         else {
             let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
             if (!primarySelection) {

package/dist/index.d.ts

@@ -57,6 +57,7 @@ export * from "./elements/services/htmlWriterService/AbstractHtmlWriterService.j
 export * from "./elements/services/htmlWriterService/FormatingHtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/LitTsElementWriterService.js";
+export * from "./elements/services/htmlParserService/BaseCustomWebcomponentParserService.js";
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/htmlParserService/LitElementParserService.js";

package/dist/index.js

@@ -35,6 +35,7 @@ export * from "./elements/services/htmlWriterService/AbstractHtmlWriterService.j
 export * from "./elements/services/htmlWriterService/FormatingHtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/LitTsElementWriterService.js";
+export * from "./elements/services/htmlParserService/BaseCustomWebcomponentParserService.js";
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/htmlParserService/LitElementParserService.js";

package/package.json

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