@node-projects/web-component-designer 0.0.87 → 0.0.88

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

@@ -41,6 +41,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       height: 16px;
       background: #787f82;
       display: flex;
+      bottom: 0;
+      position: absolute;
     }
     input {
       width: 40px;
@@ -75,8 +77,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       height: 100%;
     }
     #canvas {
-      width: 100%;
-      height: 100%;
+      width: calc(100% - 16px);
+      height: calc(100% - 32px);
     }
   
     .zoom-in {
@@ -141,15 +143,21 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._designerCanvas.id = "canvas";
         this._designerCanvas.appendChild(document.createElement("slot"));
         outer.insertAdjacentElement('afterbegin', this._designerCanvas);
+        this._designerCanvas.onZoomFactorChanged.on(() => {
+            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+            const pos = this.designerCanvas.canvasOffset;
+            const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth;
+            const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight;
+            this._sHor.value = (pos.x / (-2 * w)) + 0.5;
+            this._sVert.value = (pos.y / (-2 * h)) + 0.5;
+        });
         this._zoomInput = this._getDomElement('zoomInput');
         this._zoomInput.onkeydown = (e) => {
             if (e.key == 'Enter')
                 this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
         };
         this._zoomInput.onblur = () => {
             this._designerCanvas.zoomFactor = parseFloat(this._zoomInput.value) / 100;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
         };
         this._zoomInput.onclick = this._zoomInput.select;
         let zoomIncrease = this._getDomElement('zoomIncrease');
@@ -158,7 +166,6 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
                 this._designerCanvas.zoomFactor += 0.1;
             else
                 this._designerCanvas.zoomFactor += 0.01;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
         };
         let zoomDecrease = this._getDomElement('zoomDecrease');
         zoomDecrease.onclick = () => {
@@ -197,6 +204,11 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             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) + '%';
         };
@@ -235,16 +247,8 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             zf += event.deltaY * -0.001; //deltamode = 0
             if (zf < 0.02)
                 zf = 0.02;
-            this._designerCanvas.zoomFactor = zf;
-            this._zoomInput.value = Math.round(zf * 100) + '%';
-            const rect = this.getBoundingClientRect();
-            //const xc = this.designerCanvas.canvasOffset.x;
-            //const yc = this.designerCanvas.canvasOffset.y;
-            const xp = event.x - rect.x;
-            const yp = event.y - rect.y;
-            const x = xp / zf * (1 - zf);
-            const y = yp / zf * (1 - zf);
-            this.designerCanvas.canvasOffset = { x, y };
+            const vp = this.designerCanvas.getViewportCoordinates(event);
+            this.designerCanvas.zoomTowardsPointer(vp, zf);
         }
         else {
             this._sHor.value += event.deltaX / 1000;

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

@@ -28,18 +28,18 @@ export class MagicWandSelectorTool {
                 const inSelectionElements = [];
                 let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {
-                    let elementRect = e.getBoundingClientRect();
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
+                    let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
+                    point.x = elementRect.x;
+                    point.y = elementRect.y;
                     const p1 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y;
                     const p2 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
+                    point.x = elementRect.x;
+                    point.y = elementRect.y + elementRect.height;
                     const p3 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y + elementRect.height;
                     const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
                     if (p1 && p2 && p3 && p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);

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

@@ -50,18 +50,18 @@ export class RectangleSelectorTool {
                 const inSelectionElements = [];
                 let point = designerCanvas.overlayLayer.createPoint();
                 for (let e of elements) {
-                    let elementRect = e.getBoundingClientRect();
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
+                    let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
+                    point.x = elementRect.x;
+                    point.y = elementRect.y;
                     const p1 = this._rect.isPointInFill(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y;
                     const p2 = p1 && this._rect.isPointInFill(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
+                    point.x = elementRect.x;
+                    point.y = elementRect.y + elementRect.height;
                     const p3 = p2 && this._rect.isPointInFill(point);
-                    point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
-                    point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y + elementRect.height;
                     const p4 = p3 && this._rect.isPointInFill(point);
                     if (p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);

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

@@ -2,9 +2,15 @@ import { ServiceContainer } from '../../../services/ServiceContainer.js';
 import { IDesignerCanvas } from '../IDesignerCanvas';
 import { ITool } from './ITool';
 export declare class ZoomTool implements ITool {
-    readonly cursor: string;
+    cursor: string;
+    private _startPoint;
+    private _endPoint;
+    private _pointerMovementTolerance;
+    private _zoomStepSize;
     activated(serviceContainer: ServiceContainer): void;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    private _zoomOnto;
+    private _isPositionEqual;
     keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
     dispose(): void;
 }

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

@@ -1,8 +1,42 @@
+import { EventNames } from '../../../../index.js';
 export class ZoomTool {
     cursor = 'zoom-in';
+    _startPoint;
+    _endPoint;
+    _pointerMovementTolerance = 5;
+    _zoomStepSize = 0.2; //number x 100 = Scale in percent
     activated(serviceContainer) {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
+        const eventPoint = designerCanvas.getViewportCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                this._startPoint = eventPoint;
+                break;
+            case EventNames.PointerUp:
+                this._endPoint = eventPoint;
+                let isLeftClick = event.button == 0;
+                switch (event.button) {
+                    case 0: //Left-Click
+                    case 2: //Right-Click
+                        this._zoomOnto(isLeftClick, this._startPoint, this._endPoint, designerCanvas);
+                        break;
+                }
+                break;
+        }
+    }
+    _zoomOnto(isZoomInto, startPoint, endPoint, designerCanvas) {
+        if (this._isPositionEqual(startPoint, endPoint)) {
+            const oldZoom = designerCanvas.zoomFactor;
+            const newZoom = isZoomInto ? oldZoom + this._zoomStepSize : oldZoom - this._zoomStepSize;
+            designerCanvas.zoomTowardsPointer(endPoint, newZoom);
+        }
+        else {
+        }
+    }
+    _isPositionEqual(startPoint, endPoint) {
+        let tolerance = this._pointerMovementTolerance;
+        return Math.abs(startPoint.x - endPoint.x) <= tolerance && Math.abs(startPoint.y - endPoint.y) <= tolerance;
     }
     keyboardEventHandler(designerCanvas, event, currentElement) { }
     dispose() {

package/package.json

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