@node-projects/web-component-designer 0.0.122 → 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/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/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/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/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/package.json

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