@node-projects/web-component-designer 0.0.92 → 0.0.93

package/dist/elements/helper/contextMenu/ContextMenuHelper.js

@@ -103,10 +103,8 @@ export class ContextMenuHelper {
             window.removeEventListener('resize', this._closeBound);
             window.removeEventListener('mousedown', this._closeOnDownBound);
             window.removeEventListener('mouseup', this._closeOnUpBound);
-            if (this._shadowRoot === document)
-                document.body.removeChild(this._element);
-            else
-                this._shadowRoot.removeChild(this._element);
+            if (this._element.parentElement)
+                this._element.parentElement.removeChild(this._element);
         });
     }
     show() {

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

@@ -20,6 +20,8 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
+    zoomReset(): void;
+    zoomToFit(): void;
     private _onScrollbar;
     private _onWheel;
     get designerWidth(): string;

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

@@ -179,38 +179,11 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         };
         let zoomReset = this._getDomElement('zoomReset');
         zoomReset.onclick = () => {
-            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
-            this._designerCanvas.zoomFactor = 1;
-            this._sVert.value = 0.5;
-            this._sHor.value = 0.5;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+            this.zoomReset();
         };
         let zoomFit = this._getDomElement('zoomFit');
         zoomFit.onclick = () => {
-            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;
-            this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+            this.zoomToFit();
         };
         this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
         let alignSnap = this._getDomElement('alignSnap');
@@ -225,6 +198,39 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
         this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
     }
+    zoomReset() {
+        this._designerCanvas.canvasOffset = { x: 0, y: 0 };
+        this._designerCanvas.zoomFactor = 1;
+        this._sVert.value = 0.5;
+        this._sHor.value = 0.5;
+        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;
+        this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
+        this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+    }
     _onScrollbar(e) {
         if (e?.detail == 'incrementLarge')
             e.target.value += 0.25;

package/package.json

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