@node-projects/web-component-designer 0.0.121 → 0.0.123

package/dist/elements/helper/PathDataPolyfill.js

@@ -916,25 +916,25 @@ export function moveSVGPath(path, xFactor, yFactor) {
                 case ('l'):
                 case ('T'):
                 case ('t'):
-                    newPathData += p.type + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor);
+                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " ";
                     break;
                 case ('Z'):
                 case ('z'):
-                    newPathData += p.type;
+                    newPathData += p.type + " ";
                     break;
                 case ('C'):
                 case ('c'):
-                    newPathData += p.type + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + (p.values[2] - xFactor) + " " + (p.values[3] - yFactor) + " " + (p.values[4] - xFactor) + " " + (p.values[5] - yFactor);
+                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + (p.values[2] - xFactor) + " " + (p.values[3] - yFactor) + " " + (p.values[4] - xFactor) + " " + (p.values[5] - yFactor) + " ";
                     break;
                 case ('S'):
                 case ('s'):
                 case ('Q'):
                 case ('q'):
-                    newPathData += p.type + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + (p.values[2] - xFactor) + " " + (p.values[3] - yFactor);
+                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + (p.values[2] - xFactor) + " " + (p.values[3] - yFactor) + " ";
                     break;
                 case ('A'):
                 case ('a'):
-                    newPathData += p.type + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + p.values[2] + " " + p.values[3] + " " + p.values[4] + " " + (p.values[5] - xFactor) + " " + (p.values[6] - yFactor);
+                    newPathData += p.type + " " + (p.values[0] - xFactor) + " " + (p.values[1] - yFactor) + " " + p.values[2] + " " + p.values[3] + " " + p.values[4] + " " + (p.values[5] - xFactor) + " " + (p.values[6] - yFactor) + " ";
                     break;
             }
         }

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

@@ -41,6 +41,7 @@ export declare class DesignItem implements IDesignItem {
     set content(value: string);
     get innerHTML(): string;
     set innerHTML(value: string);
+    get isEmptyTextNode(): boolean;
     private _hideAtDesignTime;
     get hideAtDesignTime(): boolean;
     set hideAtDesignTime(value: boolean);

package/dist/elements/item/DesignItem.js

@@ -85,7 +85,7 @@ export class DesignItem {
             action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
         }
         else if (where == 'afterend') {
-            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this));
+            action = new InsertChildAction(designItem, this.parent, this.parent.indexOf(this) + 1);
         }
         this.instanceServiceContainer.undoService.execute(action);
     }
@@ -124,6 +124,9 @@ export class DesignItem {
         this.element.innerHTML = value;
         this.updateChildrenFromNodesChildren();
     }
+    get isEmptyTextNode() {
+        return this.nodeType === NodeType.TextNode && this.content?.trim() == '';
+    }
     _hideAtDesignTime;
     get hideAtDesignTime() {
         return this._hideAtDesignTime;

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

@@ -33,6 +33,7 @@ export interface IDesignItem {
     readonly hasContent: boolean;
     content: string;
     innerHTML?: string;
+    readonly isEmptyTextNode: boolean;
     readonly node: Node;
     readonly element: Element;
     serviceContainer: ServiceContainer;

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

@@ -0,0 +1,12 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer";
+import { ServiceContainer } from "../ServiceContainer";
+import { IHtmlParserService } from "./IHtmlParserService";
+import { IDesignItem } from '../../item/IDesignItem';
+export declare class LitElementParserService 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/LitElementParserService.js

@@ -0,0 +1,106 @@
+import { DesignItem } from '../../item/DesignItem';
+import { CssAttributeParser } from "../../helper/CssAttributeParser";
+import { newElementFromString } from "../../helper/ElementHelper";
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class LitElementParserService {
+    _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;
+        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, 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.attributes.set(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.styles.set(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, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

package/dist/elements/services/htmlParserService/NodeHtmlParserService copy.d.ts

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

package/dist/elements/services/htmlParserService/NodeHtmlParserService copy.js

@@ -0,0 +1,96 @@
+import { DesignItem } from '../../item/DesignItem';
+import { CssAttributeParser } from "../../helper/CssAttributeParser";
+import { newElementFromString } from "../../helper/ElementHelper";
+// Alternative Parser, cause when you use the Browser, it instanciates the CusomElements, and some Elemnts remove
+// attributes from their DOM, so you loose Data
+export class NodeHtmlParserService {
+    _parserUrl;
+    constructor(parserUrl = '../../../../../node-html-parser-esm/dist/index.js') {
+        this._parserUrl = parserUrl;
+    }
+    async parse(html, serviceContainer, instanceServiceContainer) {
+        //@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, 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.attributes.set(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.styles.set(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, serviceContainer, instanceServiceContainer);
+        }
+        else if (item.nodeType == 8) {
+            let element = document.createComment(item.rawText);
+            designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
+        }
+        return designItem;
+    }
+}

package/dist/elements/services/placementService/FlexBoxPlacementService.js

@@ -1,3 +1,4 @@
+import { DefaultPlacementService } from './DefaultPlacementService.js';
 export class FlexBoxPlacementService {
     enterContainer(container, items) {
         for (let i of items) {
@@ -9,6 +10,12 @@ export class FlexBoxPlacementService {
         }
     }
     leaveContainer(container, items) {
+        for (let i of items) {
+            if (!i.lastContainerSize) {
+                const rect = i.element.getBoundingClientRect();
+                i.lastContainerSize = { width: rect.width, height: rect.height };
+            }
+        }
     }
     serviceForContainer(container, containerStyle) {
         if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex')
@@ -28,17 +35,68 @@ export class FlexBoxPlacementService {
         return container.element.getBoundingClientRect();
     }
     placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        return null;
+        const defaultPlacementService = container.serviceContainer.getLastServiceWhere('containerService', x => x instanceof DefaultPlacementService);
+        return defaultPlacementService.placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items);
     }
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        /*let direction = getComputedStyle(container.element).flexDirection;
-        
-        const pos = (<IDesignerCanvas><unknown>placementView).getNormalizedEventCoordinates(event);
-        const posElement = (<IDesignerCanvas><unknown>placementView).getNormalizedElementCoordinates(items[0].element)
-    
-        for (let e of container.element.children) {
-    
-        }*/
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        const style = getComputedStyle(container.element);
+        const childrenWithPos = Array.from(container.children()).filter(x => !x.isEmptyTextNode).map(x => [x, placementView.getNormalizedElementCoordinates(x.element)]);
+        if (style.flexDirection == 'row') {
+            childrenWithPos.sort(x => x[1].x);
+            let elBefore = null;
+            for (let c of childrenWithPos) {
+                if (c[1].x + c[1].width / 2 < pos.x) {
+                    elBefore = c;
+                }
+            }
+            let posBefore = childrenWithPos.indexOf(elBefore);
+            let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0]));
+            if (elBefore && elBefore[0] != items[0]) {
+                if (posBefore + 1 === posDrag)
+                    return;
+                let cg = items[0].openGroup('move in flexbox');
+                items[0].remove();
+                elBefore[0].insertAdjacentElement(items[0], 'afterend');
+                cg.commit();
+            }
+            else if (elBefore == null) {
+                if (posDrag == 0)
+                    return;
+                let cg = items[0].openGroup('move in flexbox');
+                items[0].remove();
+                container.insertChild(items[0], 0);
+                cg.commit();
+            }
+        }
+        else if (style.flexDirection == 'column') {
+            childrenWithPos.sort(x => x[1].y);
+            let elBefore = null;
+            for (let c of childrenWithPos) {
+                if (c[1].y + c[1].height / 2 < pos.y) {
+                    elBefore = c;
+                }
+            }
+            let posBefore = childrenWithPos.indexOf(elBefore);
+            let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0]));
+            if (elBefore && elBefore[0] != items[0]) {
+                if (posBefore + 1 === posDrag)
+                    return;
+                let cg = items[0].openGroup('move in flexbox');
+                items[0].remove();
+                elBefore[0].insertAdjacentElement(items[0], 'afterend');
+                cg.commit();
+            }
+            else if (elBefore == null) {
+                if (posDrag == 0)
+                    return;
+                let cg = items[0].openGroup('move in flexbox');
+                items[0].remove();
+                container.insertChild(items[0], 0);
+                cg.commit();
+            }
+        }
+        placementView.extensionManager.refreshAllExtensions([container]);
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }

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

@@ -66,6 +66,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     get designerOffsetHeight(): number;
     set additionalStyles(value: CSSStyleSheet[]);
     executeCommand(command: IUiCommand): Promise<void>;
+    zoomToFit(): void;
     canExecuteCommand(command: IUiCommand): boolean;
     handleSelectAll(): void;
     handleCopyCommand(): Promise<void>;

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

@@ -16,7 +16,7 @@ import { ExtensionType } from "./extensions/ExtensionType";
 import { ExtensionManager } from "./extensions/ExtensionManager";
 import { NamedTools } from "./tools/NamedTools";
 import { Screenshot } from '../../helper/Screenshot';
-import { dataURItoBlob, exportData } from "../../helper/Helper";
+import { dataURItoBlob, exportData, sleep } from "../../helper/Helper";
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 import { OverlayLayer } from "./extensions/OverlayLayer";
 import { OverlayLayerView } from './overlayLayerView';
@@ -232,8 +232,19 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         switch (command.type) {
             case CommandType.screenshot:
                 {
-                    if (!this.instanceServiceContainer.selectionService.primarySelection)
-                        alert("you need to select an element!");
+                    if (!this.instanceServiceContainer.selectionService.primarySelection) {
+                        this.zoomToFit();
+                        const backgroundImage = this._canvas.style.backgroundImage;
+                        this._canvas.style.backgroundImage = 'none';
+                        await sleep(100);
+                        const el = this.rootDesignItem.element;
+                        const sel = this.instanceServiceContainer.selectionService.selectedElements;
+                        this.instanceServiceContainer.selectionService.setSelectedElements(null);
+                        const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
+                        await exportData(dataURItoBlob(screenshot), "screenshot.png");
+                        this.instanceServiceContainer.selectionService.setSelectedElements(sel);
+                        this._canvas.style.backgroundImage = backgroundImage;
+                    }
                     else {
                         if (!Screenshot.screenshotsEnabled) {
                             alert("you need to select current tab in next browser dialog, or screenshots will not work correctly");
@@ -291,6 +302,35 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 break;
         }
     }
+    zoomToFit() {
+        const autoZomOffset = 10;
+        let maxX = 0, maxY = 0, minX = 0, minY = 0;
+        this.canvasOffset = { x: 0, y: 0 };
+        this.zoomFactor = 1;
+        for (let n of DomHelper.getAllChildNodes(this.rootDesignItem.element)) {
+            if (n instanceof Element) {
+                const rect = n.getBoundingClientRect();
+                minX = minX < rect.x ? minX : rect.x;
+                minY = minY < rect.y ? minY : rect.y;
+                maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
+                maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
+            }
+        }
+        const cvRect = this.getBoundingClientRect();
+        maxX -= cvRect.x;
+        maxY -= cvRect.y;
+        let scaleX = cvRect.width / (maxX / this.zoomFactor);
+        let scaleY = cvRect.height / (maxY / this.zoomFactor);
+        const dimensions = this.getDesignSurfaceDimensions();
+        if (dimensions.width)
+            scaleX = cvRect.width / dimensions.width;
+        if (dimensions.height)
+            scaleY = cvRect.height / dimensions.height;
+        let fak = scaleX < scaleY ? scaleX : scaleY;
+        if (!isNaN(fak))
+            this.zoomFactor = fak;
+        //this._zoomInput.value = Math.round(this.zoomFactor * 100) + '%';
+    }
     canExecuteCommand(command) {
         const modelCommandService = this.serviceContainer.modelCommandService;
         if (modelCommandService) {

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

@@ -4,7 +4,6 @@ import { DomConverter } from './DomConverter.js';
 import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
 import { EventNames } from '../../../enums/EventNames.js';
 import { DesignerToolbar } from './tools/toolBar/DesignerToolbar.js';
-const autoZomOffset = 10;
 export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     _sVert;
     _sHor;
@@ -221,32 +220,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
     }
     zoomToFit() {
-        let maxX = 0, maxY = 0, minX = 0, minY = 0;
-        this._designerCanvas.canvasOffset = { x: 0, y: 0 };
-        this._designerCanvas.zoomFactor = 1;
-        for (let n of DomHelper.getAllChildNodes(this.designerCanvas.rootDesignItem.element)) {
-            if (n instanceof Element) {
-                const rect = n.getBoundingClientRect();
-                minX = minX < rect.x ? minX : rect.x;
-                minY = minY < rect.y ? minY : rect.y;
-                maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
-                maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
-            }
-        }
-        const cvRect = this.designerCanvas.getBoundingClientRect();
-        maxX -= cvRect.x;
-        maxY -= cvRect.y;
-        let scaleX = cvRect.width / (maxX / this._designerCanvas.zoomFactor);
-        let scaleY = cvRect.height / (maxY / this._designerCanvas.zoomFactor);
-        const dimensions = this.designerCanvas.getDesignSurfaceDimensions();
-        if (dimensions.width)
-            scaleX = cvRect.width / dimensions.width;
-        if (dimensions.height)
-            scaleY = cvRect.height / dimensions.height;
-        let fak = scaleX < scaleY ? scaleX : scaleY;
-        if (!isNaN(fak))
-            this._designerCanvas.zoomFactor = fak;
-        this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+        this._designerCanvas.zoomToFit();
     }
     _onScrollbar(e) {
         if (e?.detail == 'incrementLarge')

package/dist/elements/widgets/designerView/extensions/AbstractExtensionBase.d.ts

@@ -3,7 +3,7 @@ import { IExtensionManager } from "./IExtensionManger";
 import { OverlayLayerView } from '../overlayLayerView';
 import { OverlayLayer } from './OverlayLayer';
 export declare abstract class AbstractExtensionBase {
-    protected overlays: SVGGraphicsElement[];
+    protected overlays: SVGElement[];
     protected overlayLayerView: OverlayLayerView;
     protected extensionManager: IExtensionManager;
     protected designerCanvas: IDesignerCanvas;
@@ -13,4 +13,5 @@ export declare abstract class AbstractExtensionBase {
     protected _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
     protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
     protected _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+    protected _drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
 }

package/dist/elements/widgets/designerView/extensions/AbstractExtensionBase.js

@@ -47,4 +47,11 @@ export class AbstractExtensionBase {
         }
         return newText;
     }
+    _drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer) {
+        const newEls = this.overlayLayerView.drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer);
+        if (!existingEls) {
+            this.overlays.push(...newEls);
+        }
+        return newEls;
+    }
 }

package/dist/elements/widgets/designerView/extensions/ExtensionManager.d.ts

@@ -13,7 +13,7 @@ export declare class ExtensionManager implements IExtensionManager {
     removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
-    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
-    refreshAllExtensions(designItems: IDesignItem[]): void;
+    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, ignoredExtension?: any): void;
+    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: any): void;
     refreshAllAppliedExtentions(): void;
 }

package/dist/elements/widgets/designerView/extensions/ExtensionManager.js

@@ -204,7 +204,7 @@ export class ExtensionManager {
             }
         }
     }
-    refreshExtensions(designItems, extensionType) {
+    refreshExtensions(designItems, extensionType, ignoredExtension) {
         if (designItems) {
             if (extensionType) {
                 for (let i of designItems) {
@@ -212,7 +212,8 @@ export class ExtensionManager {
                     if (exts) {
                         for (let e of exts) {
                             try {
-                                e.refresh();
+                                if (e != ignoredExtension)
+                                    e.refresh();
                             }
                             catch (err) {
                                 console.error(err);
@@ -226,7 +227,8 @@ export class ExtensionManager {
                     for (let appE of i.appliedDesignerExtensions) {
                         for (let e of appE[1]) {
                             try {
-                                e.refresh();
+                                if (e != ignoredExtension)
+                                    e.refresh();
                             }
                             catch (err) {
                                 console.error(err);
@@ -237,18 +239,18 @@ export class ExtensionManager {
             }
         }
     }
-    refreshAllExtensions(designItems) {
+    refreshAllExtensions(designItems, ignoredExtension) {
         if (designItems) {
-            this.refreshExtensions(designItems, ExtensionType.Permanent);
-            this.refreshExtensions(designItems, ExtensionType.Selection);
-            this.refreshExtensions(designItems, ExtensionType.PrimarySelection);
-            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer);
-            this.refreshExtensions(designItems, ExtensionType.MouseOver);
-            this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected);
-            this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected);
-            this.refreshExtensions(designItems, ExtensionType.ContainerDragOver);
-            this.refreshExtensions(designItems, ExtensionType.ContainerDrag);
-            this.refreshExtensions(designItems, ExtensionType.Doubleclick);
+            this.refreshExtensions(designItems, ExtensionType.Permanent, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Selection, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelection, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.MouseOver, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDragOver, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDrag, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Doubleclick, ignoredExtension);
         }
     }
     refreshAllAppliedExtentions() {

package/dist/elements/widgets/designerView/extensions/IExtensionManger.d.ts

@@ -7,6 +7,6 @@ export interface IExtensionManager {
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
-    refreshAllExtensions(designItems: IDesignItem[]): any;
+    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: any): any;
     refreshAllAppliedExtentions(): any;
 }

package/dist/elements/widgets/designerView/extensions/PositionExtension.d.ts

@@ -7,9 +7,7 @@ export declare class PositionExtension extends AbstractExtension {
     private _line2;
     private _line3;
     private _line4;
-    private _rectX;
     private _textX;
-    private _rectY;
     private _textY;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;

package/dist/elements/widgets/designerView/extensions/PositionExtension.js

@@ -4,9 +4,7 @@ export class PositionExtension extends AbstractExtension {
     _line2;
     _line3;
     _line4;
-    _rectX;
     _textX;
-    _rectY;
     _textY;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
@@ -31,12 +29,12 @@ export class PositionExtension extends AbstractExtension {
         this._line4.style.strokeDasharray = '' + (4 / this.designerCanvas.scaleFactor);
         let x = Math.round(itemRect.x - itemParentRect.x);
         let y = Math.round(itemRect.y - itemParentRect.y);
-        this._rectX = this._drawRect(itemParentRect.x + x / 2 - 10, itemRect.y + itemRect.height / 2 - 8, 20, 16, 'svg-position-text-rect', this._rectX);
-        this._textX = this._drawText('' + x, itemParentRect.x + x / 2 - 9, itemRect.y + itemRect.height / 2 + 4, null, this._textX);
-        this._textX.style.fontSize = '12px';
-        this._rectY = this._drawRect(itemRect.x + itemRect.width / 2 - 10, itemParentRect.y + y / 2 - 8, 20, 16, 'svg-position-text-rect', this._rectY);
-        this._textY = this._drawText('' + y, itemRect.x + itemRect.width / 2 - 10, itemParentRect.y + y / 2 + 4, null, this._textY);
-        this._textY.style.fontSize = '12px';
+        this._textX = this._drawTextWithBackground('' + x, itemParentRect.x + x / 2, itemRect.y + itemRect.height / 2, 'white', 'svg-position-text', this._textX);
+        this._textX[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        this._textX[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        this._textY = this._drawTextWithBackground('' + y, itemRect.x + itemRect.width / 2, itemParentRect.y + y / 2, 'white', 'svg-position-text', this._textY);
+        this._textY[2].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
+        this._textY[3].style.fontSize = (12 / this.designerCanvas.scaleFactor) + 'px';
     }
     dispose() {
         this._removeAllOverlays();

package/dist/elements/widgets/designerView/extensions/PositionExtensionProvider.js

@@ -11,6 +11,6 @@ export class PositionExtensionProvider {
         return new PositionExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-position-text-rect { fill: white; }
+    .svg-position-text { text-anchor: middle; alignment-baseline: central; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtension.js

@@ -73,6 +73,7 @@ export class EllipsisExtension extends AbstractExtension {
                     }
                     e.setAttribute("rx", this._newRx.toString());
                     e.setAttribute("ry", this._newRy.toString());
+                    this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this);
                     this._redrawPathCircle(this._cx, this._cy - this._newRy, this._circle1);
                     this._redrawPathCircle(this._cx + this._newRx, this._cy, this._circle2);
                     this._redrawPathCircle(this._cx, this._cy + this._newRy, this._circle3);

package/dist/elements/widgets/designerView/extensions/svg/LineExtension.js

@@ -53,6 +53,7 @@ export class LineExtension extends AbstractExtension {
                         this._newCirclePoint = { x: this._circlePos.x + dx, y: this._circlePos.y + dy };
                         this._newLinePoint = { x: this._originalPoint.x + dx, y: this._originalPoint.y + dy };
                     }
+                    this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this);
                     circle.setAttribute("cx", this._newCirclePoint.x.toString());
                     circle.setAttribute("cy", this._newCirclePoint.y.toString());
                     l.setAttribute("x" + index, this._newLinePoint.x.toString());

package/dist/elements/widgets/designerView/extensions/svg/PathExtension.js

@@ -148,6 +148,7 @@ export class PathExtension extends AbstractExtension {
                             circle.setAttribute("cy", (this._circlePos.y + dy).toString());
                         }
                     }
+                    this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this);
                     this.extendedItem.element.setAttribute("d", createPathD(this._pathdata));
                 }
                 break;

package/dist/elements/widgets/designerView/extensions/svg/RectExtension.js

@@ -76,6 +76,7 @@ export class RectExtension extends AbstractExtension {
                     r.setAttribute("height", this._rect.h.toString());
                     circle.setAttribute("cx", (this._circlePos.x + dx).toString());
                     circle.setAttribute("cy", (this._circlePos.y + dy).toString());
+                    this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this);
                     this._redrawPathCircle(this._rect.x, this._rect.y, this._circle1);
                     this._redrawPathCircle(this._rect.x + this._rect.w, this._rect.y, this._circle2);
                     this._redrawPathCircle(this._rect.x + this._rect.w, this._rect.y + this._rect.h, this._circle3);

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

@@ -10,10 +10,12 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     private _gBackground;
     private _gNormal;
     private _gForeground;
+    private _defs;
+    private _id;
     constructor(serviceContainer: ServiceContainer);
     private _initialize;
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
-    removeOverlay(element: SVGGraphicsElement): void;
+    removeOverlay(element: SVGElement): void;
     removeAllNodesWithClass(className: string): void;
     removeAllOverlays(): void;
     createPoint(): DOMPointInit;
@@ -22,4 +24,5 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
     drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
     drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+    drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
 }

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

@@ -3,6 +3,7 @@ import { OverlayLayer } from './extensions/OverlayLayer.js';
 export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     static template = html `
     <svg id="svg" style="pointer-events: none;">
+      <defs id="defs"></defs>
       <g id="background"></g>
       <g id="normal"></g>
       <g id="foreground"></g>
@@ -27,6 +28,8 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     _gBackground;
     _gNormal;
     _gForeground;
+    _defs;
+    _id = 0;
     constructor(serviceContainer) {
         super();
         this._serviceContainer = serviceContainer;
@@ -34,6 +37,7 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         this._gBackground = this._getDomElement('background');
         this._gNormal = this._getDomElement('normal');
         this._gForeground = this._getDomElement('foreground');
+        this._defs = this._getDomElement('defs');
         this._initialize();
     }
     _initialize() {
@@ -143,5 +147,40 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             textEl.setAttribute('class', className);
         return textEl;
     }
+    drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer) {
+        if (!existingEls) {
+            let filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
+            filter.setAttribute("x", "0");
+            filter.setAttribute("y", "0");
+            filter.setAttribute("width", "1");
+            filter.setAttribute("height", "1");
+            filter.setAttribute("id", "solid_" + (++this._id));
+            let flood = document.createElementNS("http://www.w3.org/2000/svg", "feFlood");
+            flood.setAttribute("flood-color", backgroundColor);
+            filter.appendChild(flood);
+            let composite = document.createElementNS("http://www.w3.org/2000/svg", "feComposite");
+            composite.setAttribute("in", "SourceGraphic");
+            composite.setAttribute("operator", "xor");
+            filter.appendChild(composite);
+            this._defs.appendChild(filter);
+            let textEl1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            textEl1.setAttribute("filter", "url(#solid_" + this._id + ")");
+            let textEl2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            this.addOverlay(textEl1, overlayLayer);
+            this.addOverlay(textEl2, overlayLayer);
+            existingEls = [filter, flood, textEl1, textEl2];
+        }
+        existingEls[2].setAttribute('x', x);
+        existingEls[3].setAttribute('x', x);
+        existingEls[2].setAttribute('y', y);
+        existingEls[3].setAttribute('y', y);
+        existingEls[2].textContent = text;
+        existingEls[3].textContent = text;
+        if (className) {
+            existingEls[2].setAttribute('class', className);
+            existingEls[3].setAttribute('class', className);
+        }
+        return existingEls;
+    }
 }
 customElements.define(OverlayLayerView.is, OverlayLayerView);

package/dist/elements/widgets/designerView/tools/DrawEllipsisTool.js

@@ -18,7 +18,7 @@ export class DrawEllipsisTool {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        const offset = 50;
+        const offset = 10;
         switch (event.type) {
             case EventNames.PointerDown:
                 this._startPoint = currentPoint;
@@ -69,19 +69,19 @@ export class DrawEllipsisTool {
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
                 designerCanvas.releaseActiveTool();
-                const rect = this._path.getBoundingClientRect();
+                let coords = designerCanvas.getNormalizedElementCoordinates(this._path);
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
-                const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
+                const mvX = coords.x - offset;
+                const mvY = coords.y - offset;
                 svg.appendChild(this._path);
                 this._path.setAttribute("cx", (this._cx - mvX).toString());
                 this._path.setAttribute("cy", (this._cy - mvY).toString());
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
                 svg.style.position = 'absolute';
-                svg.style.width = (rect.width + 2 * offset) + 'px';
-                svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.width = (coords.width + 2 * offset) + 'px';
+                svg.style.height = (coords.height + 2 * offset) + 'px';
                 svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);

package/dist/elements/widgets/designerView/tools/DrawLineTool.js

@@ -16,7 +16,7 @@ export class DrawLineTool {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        const offset = 50;
+        const offset = 10;
         switch (event.type) {
             case EventNames.PointerDown:
                 this._startPoint = currentPoint;
@@ -52,11 +52,11 @@ export class DrawLineTool {
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
                 designerCanvas.releaseActiveTool();
-                const rect = this._path.getBoundingClientRect();
+                let coords = designerCanvas.getNormalizedElementCoordinates(this._path);
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
-                const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
+                const mvX = coords.x - offset;
+                const mvY = coords.y - offset;
                 this._path.setAttribute("x1", (this._startPoint.x - mvX).toString());
                 this._path.setAttribute("y1", (this._startPoint.y - mvY).toString());
                 this._path.setAttribute("x2", (this._endPoint.x - mvX).toString());
@@ -65,8 +65,8 @@ export class DrawLineTool {
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
                 svg.style.position = 'absolute';
-                svg.style.width = (rect.width + 2 * offset) + 'px';
-                svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.width = (coords.width + 2 * offset) + 'px';
+                svg.style.height = (coords.height + 2 * offset) + 'px';
                 svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);

package/dist/elements/widgets/designerView/tools/DrawRectTool.js

@@ -21,7 +21,7 @@ export class DrawRectTool {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        const offset = 50;
+        const offset = 10;
         switch (event.type) {
             case EventNames.PointerDown:
                 this._startPoint = currentPoint;
@@ -84,19 +84,19 @@ export class DrawRectTool {
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
                 designerCanvas.releaseActiveTool();
-                const rect = this._path.getBoundingClientRect();
+                let coords = designerCanvas.getNormalizedElementCoordinates(this._path);
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
-                const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
+                const mvX = coords.x - offset;
+                const mvY = coords.y - offset;
                 this._path.setAttribute("x", (this._px - mvX).toString());
                 this._path.setAttribute("y", (this._py - mvY).toString());
                 svg.appendChild(this._path);
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
                 svg.style.position = 'absolute';
-                svg.style.width = (rect.width + 2 * offset) + 'px';
-                svg.style.height = (rect.height + 2 * offset) + 'px';
+                svg.style.width = (coords.width + 2 * offset) + 'px';
+                svg.style.height = (coords.height + 2 * offset) + 'px';
                 svg.style.overflow = 'visible';
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -171,6 +171,9 @@ export class PointerTool {
                 }
             case EventNames.PointerMove:
                 {
+                    if (event.buttons == 0) {
+                        return;
+                    }
                     const elementMoved = currentPoint.x != this._initialPoint.x || currentPoint.y != this._initialPoint.y;
                     if (this._actionType != PointerActionType.Drag && elementMoved) {
                         this._actionType = PointerActionType.Drag;

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -377,7 +377,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             ref: item
         });
         for (let i of item.children()) {
-            if (i.nodeType !== NodeType.TextNode || i.content?.trim()) {
+            if (!i.isEmptyTextNode) {
                 this._getChildren(i, newNode);
             }
         }

package/dist/index.d.ts

@@ -56,6 +56,7 @@ export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/LitTsElementWriterService.js";
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
+export * from "./elements/services/htmlParserService/LitElementParserService.js";
 export type { IHtmlParserService } from "./elements/services/htmlParserService/IHtmlParserService.js";
 export type { IIntializationService } from "./elements/services/initializationService/IIntializationService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";

package/dist/index.js

@@ -35,6 +35,7 @@ export * from "./elements/services/htmlWriterService/HtmlWriterService.js";
 export * from "./elements/services/htmlWriterService/LitTsElementWriterService.js";
 export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js";
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
+export * from "./elements/services/htmlParserService/LitElementParserService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/manifestParsers/WebcomponentManifestParserService.js";
 export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";

package/package.json

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