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

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/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/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/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/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.122",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",