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

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

@@ -0,0 +1,137 @@
+import { EventNames } from "../../../../../enums/EventNames";
+import { AbstractExtension } from "../AbstractExtension";
+export class RectExtension extends AbstractExtension {
+    _parentRect;
+    _rectElement;
+    _circlePos;
+    _startPos;
+    _lastPos;
+    _originalPoint;
+    _x;
+    _y;
+    _w;
+    _h;
+    _circle1;
+    _circle2;
+    _circle3;
+    _circle4;
+    _rect = { x: 0, y: 0, w: 0, h: 0 };
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
+        this._rectElement = this.extendedItem.node;
+        this._x = this._rectElement.x.baseVal.value;
+        this._y = this._rectElement.y.baseVal.value;
+        this._w = this._rectElement.width.baseVal.value;
+        this._h = this._rectElement.height.baseVal.value;
+        this._circle1 = this._drawPathCircle(this._x, this._y, this._rectElement, 0);
+        this._circle2 = this._drawPathCircle(this._x + this._w, this._y, this._rectElement, 1);
+        this._circle3 = this._drawPathCircle(this._x + this._w, this._y + this._h, this._rectElement, 2);
+        this._circle4 = this._drawPathCircle(this._x, this._y + this._h, this._rectElement, 3);
+    }
+    pointerEvent(event, circle, r, index) {
+        event.stopPropagation();
+        const cursorPos = this.designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._startPos = cursorPos;
+                this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
+                this._originalPoint = { x: this._x, y: this._y };
+                break;
+            case EventNames.PointerMove:
+                if (this._startPos && event.buttons > 0) {
+                    this._lastPos = { x: this._startPos.x, y: this._startPos.y };
+                    const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
+                    const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
+                    let dx = cx - this._circlePos.x;
+                    let dy = cy - this._circlePos.y;
+                    if (event.shiftKey) {
+                        if (Math.abs(dx) < Math.abs(dy)) {
+                            dx = 0;
+                        }
+                        else {
+                            dy = 0;
+                        }
+                    }
+                    switch (index) {
+                        case 0:
+                            this._rect = this._calculateRect(this._originalPoint.x + dx, this._originalPoint.y + dy, this._w - dx, this._h - dy);
+                            break;
+                        case 1:
+                            this._rect = this._calculateRect(this._originalPoint.x, this._originalPoint.y + dy, this._w + dx, this._h - dy);
+                            break;
+                        case 2:
+                            this._rect = this._calculateRect(this._originalPoint.x, this._originalPoint.y, this._w + dx, this._h + dy);
+                            break;
+                        case 3:
+                            this._rect = this._calculateRect(this._originalPoint.x + dx, this._originalPoint.y, this._w - dx, this._h + dy);
+                            break;
+                    }
+                    r.setAttribute("x", this._rect.x.toString());
+                    r.setAttribute("y", this._rect.y.toString());
+                    r.setAttribute("width", this._rect.w.toString());
+                    r.setAttribute("height", this._rect.h.toString());
+                    circle.setAttribute("cx", (this._circlePos.x + dx).toString());
+                    circle.setAttribute("cy", (this._circlePos.y + dy).toString());
+                    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);
+                    this._redrawPathCircle(this._rect.x, this._rect.y + this._rect.h, this._circle4);
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                this._startPos = null;
+                this._circlePos = null;
+                this._originalPoint = null;
+                this.extendedItem.setAttribute("x", this._rect.x.toString());
+                this.extendedItem.setAttribute("y", this._rect.y.toString());
+                this.extendedItem.setAttribute("width", this._rect.w.toString());
+                this.extendedItem.setAttribute("height", this._rect.h.toString());
+                break;
+        }
+    }
+    _drawPathCircle(x, y, r, index) {
+        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path');
+        circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, circle, r, index));
+        circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, circle, r, index));
+        circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, r, index));
+        return circle;
+    }
+    _redrawPathCircle(x, y, oldCircle) {
+        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
+        circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        return circle;
+    }
+    _calculateRect(x, y, w, h) {
+        let rect = { x: 0, y: 0, w: 0, h: 0 };
+        if (w >= 0) {
+            rect.x = x;
+            rect.w = w;
+        }
+        else {
+            rect.x = x + w;
+            rect.w = -w;
+        }
+        if (h >= 0) {
+            rect.y = y;
+            rect.h = h;
+        }
+        else {
+            rect.y = y + h;
+            rect.h = -h;
+        }
+        return rect;
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/svg/RectExtensionProvider.d.ts

@@ -0,0 +1,9 @@
+import { IDesignerExtensionProvider } from "../IDesignerExtensionProvider";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { IDesignerExtension } from "../IDesignerExtension";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class RectExtentionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

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

@@ -0,0 +1,12 @@
+import { RectExtension } from "./RectExtension";
+export class RectExtentionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.node instanceof SVGRectElement) {
+            return true;
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new RectExtension(extensionManager, designerView, designItem);
+    }
+}

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/DrawPathTool.js

@@ -22,7 +22,7 @@ export class DrawPathTool {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
         const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        const offset = 50;
+        const offset = 10;
         switch (event.type) {
             case EventNames.PointerDown:
                 this._eventStarted = true;
@@ -30,7 +30,7 @@ export class DrawPathTool {
                     event.target.setPointerCapture(event.pointerId);
                     designerCanvas.captureActiveTool(this);
                     this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                    this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
+                    this._pathD = "M " + currentPoint.x + " " + currentPoint.y + " ";
                     this._path.setAttribute("d", this._pathD);
                     this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
                     this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
@@ -55,7 +55,7 @@ export class DrawPathTool {
                 if (!this._p2pMode) {
                     this._dragMode = true;
                     if (this._path) {
-                        this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                        this._pathD += "L " + currentPoint.x + " " + currentPoint.y + " ";
                         this._path.setAttribute("d", this._pathD);
                     }
                 }
@@ -65,7 +65,7 @@ export class DrawPathTool {
                         if (event.shiftKey) {
                             straightLine = straightenLine(this._lastPoint, currentPoint);
                         }
-                        this._path.setAttribute("d", this._pathD + "L" + straightLine.x + " " + straightLine.y);
+                        this._path.setAttribute("d", this._pathD + "L " + straightLine.x + " " + straightLine.y) + " ";
                     }
                 }
                 break;
@@ -77,12 +77,12 @@ export class DrawPathTool {
                     if (this._path) {
                         if (event.shiftKey) {
                             let straightLine = straightenLine(this._lastPoint, currentPoint);
-                            this._pathD += "L" + straightLine.x + " " + straightLine.y;
+                            this._pathD += "L " + straightLine.x + " " + straightLine.y + " ";
                             this._path.setAttribute("d", this._pathD);
                             this._lastPoint = straightLine;
                         }
                         else {
-                            this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
+                            this._pathD += "L " + currentPoint.x + " " + currentPoint.y + " ";
                             this._path.setAttribute("d", this._pathD);
                             this._lastPoint = currentPoint;
                         }
@@ -96,19 +96,19 @@ export class DrawPathTool {
                     this._pointerMoved = false;
                     this._samePoint = false;
                     this._dragMode = false;
-                    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;
                     const d = moveSVGPath(this._path, mvX, mvY);
                     this._path.setAttribute("d", d);
                     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';
                     //designerView.rootDesignItem.element.appendChild(svg);
                     this._path = null;

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";
@@ -153,8 +154,8 @@ export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/PathExtension.js";
-export * from "./elements/widgets/designerView/extensions/PathExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
+export * from "./elements/widgets/designerView/extensions/svg/PathExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtension.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ElementDragTitleExtension.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";
@@ -111,8 +112,8 @@ export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtension.js";
 export * from "./elements/widgets/designerView/extensions/MouseOverExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/PathExtension.js";
-export * from "./elements/widgets/designerView/extensions/PathExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
+export * from "./elements/widgets/designerView/extensions/svg/PathExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtension.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ElementDragTitleExtension.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.120",
+  "version": "0.0.122",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,7 +13,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.9.2",
+    "@node-projects/base-custom-webcomponent": "^0.10.1",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
@@ -27,11 +27,11 @@
     "codemirror": "^6.0.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.1.1",
+    "jest": "^29.1.2",
     "jquery": "^3.6.1",
     "jquery.fancytree": "^2.38.2",
     "monaco-editor": "^0.34.0",
-    "ts-jest": "^29.0.2",
+    "ts-jest": "^29.0.3",
     "typescript": "^4.8.4",
     "typescript-lit-html-plugin": "^0.9.0"
   },