@node-projects/web-component-designer 0.0.86 → 0.0.89

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.getNormalizedEventCoordinates(event);
+            this.designerCanvas.zoomTowardsPoint(vp, zf);
         }
         else {
             this._sHor.value += event.deltaX / 1000;

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension copy.d.ts

@@ -0,0 +1,17 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    private static template;
+    private _blurTimeout;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _contentEdited(): void;
+    _blur(): void;
+    _formatSelection(type: string): void;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension copy.js

@@ -0,0 +1,80 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+export class EditTextExtension extends AbstractExtension {
+    _contentEditedBound;
+    _blurBound;
+    static template = html `
+    <div style="height: 24px; display: flex;">
+      <button data-command="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
+      <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
+      <button data-command="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
+      <button data-command="strikeThrough" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
+    </div>
+  `;
+    _blurTimeout;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this._contentEditedBound = this._contentEdited.bind(this);
+        this._blurBound = this._blur.bind(this);
+    }
+    extend() {
+        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.element.setAttribute('contenteditable', '');
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerCanvas.eatEvents = this.extendedItem.element;
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const elements = EditTextExtension.template.content.cloneNode(true);
+        elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
+        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
+        foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
+        foreignObject.setAttribute('width', '96');
+        foreignObject.setAttribute('height', '24');
+        foreignObject.appendChild(elements);
+        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
+        this.overlays.push(foreignObject);
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        this.designerCanvas.eatEvents = null;
+        this.extendedItem.updateChildrenFromNodesChildren();
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        if (!this._blurTimeout) {
+            this._blurTimeout = setTimeout(() => {
+                //todo, don't remove doubleclick extension (another type could be used), remove extension itself
+                //maybe also configureable when when to remove the extension
+                this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+            }, 150);
+        }
+    }
+    _formatSelection(type) {
+        if (this._blurTimeout)
+            clearTimeout(this._blurTimeout);
+        this._blurTimeout = null;
+        //const selection = <Selection>(<any>this.designerView.shadowRoot).getSelection()
+        document.execCommand(type, false, null);
+        this.extendedItem.element.focus();
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -34,13 +34,14 @@ export class EditTextExtension extends AbstractExtension {
         const elements = EditTextExtension.template.content.cloneNode(true);
         elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
         let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x));
-        foreignObject.setAttribute('y', '' + (itemRect.y - this.designerCanvas.containerBoundingRect.y - 30));
+        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
+        foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
         foreignObject.setAttribute('width', '96');
         foreignObject.setAttribute('height', '24');
         foreignObject.appendChild(elements);
         this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
         this.overlays.push(foreignObject);
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
     }
     refresh() {
         this.dispose();
@@ -52,6 +53,7 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.removeEventListener('blur', this._blurBound);
         this.designerCanvas.eatEvents = null;
         this.extendedItem.updateChildrenFromNodesChildren();
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
     }
     _contentEdited() {
         //todo -> save???

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider copy.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 EditTextExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider copy.js

@@ -0,0 +1,11 @@
+import { EditTextExtension } from "./EditTextExtension.js";
+export class EditTextExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.name === 'button' || designItem.name === 'input')
+            return false;
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.d.ts

@@ -0,0 +1,20 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextWithStyloExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    private static template;
+    private _resizeObserver;
+    private _rect1;
+    private _rect2;
+    private _rect3;
+    private _rect4;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    private _drawClickOverlayRects;
+    refresh(): void;
+    dispose(): void;
+    _clickOutside(e: any): void;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js

@@ -0,0 +1,83 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+export class EditTextWithStyloExtension extends AbstractExtension {
+    _contentEditedBound;
+    _blurBound;
+    static template = html `
+    <stylo-editor></stylo-editor>
+  `;
+    _resizeObserver;
+    _rect1;
+    _rect2;
+    _rect3;
+    _rect4;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        import('@papyrs/stylo/dist/esm/loader.js').then(d => d.defineCustomElements());
+    }
+    extend() {
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        this.extendedItem.element.setAttribute('contenteditable', 'true');
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerCanvas.eatEvents = this.extendedItem.element;
+        const elements = EditTextWithStyloExtension.template.content.cloneNode(true);
+        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        foreignObject.setAttribute('x', '0');
+        foreignObject.setAttribute('y', '0');
+        foreignObject.setAttribute('width', '100%');
+        foreignObject.setAttribute('height', '100%');
+        foreignObject.appendChild(elements);
+        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
+        this.overlays.push(foreignObject);
+        this._drawClickOverlayRects();
+        this._rect1.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect1.addEventListener('pointerup', (e) => this._clickOutside(e));
+        this._rect2.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect2.addEventListener('pointerup', (e) => this._clickOutside(e));
+        this._rect3.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect3.addEventListener('pointerup', (e) => this._clickOutside(e));
+        this._rect4.addEventListener('pointerdown', (e) => this._clickOutside(e));
+        this._rect4.addEventListener('pointerup', (e) => this._clickOutside(e));
+        requestAnimationFrame(() => {
+            const stylo = foreignObject.querySelector('stylo-editor');
+            //@ts-ignore
+            stylo.containerRef = this.extendedItem.element;
+            //@ts-ignore
+            stylo.config = {
+                dontInjectHeadCss: true
+            };
+        });
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
+        this._resizeObserver = new ResizeObserver(() => this._drawClickOverlayRects());
+        this._resizeObserver.observe(this.extendedItem.element);
+    }
+    _drawClickOverlayRects() {
+        const normalized = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._rect1 = this._drawRect(0, 0, this.designerCanvas.containerBoundingRect.width, normalized.y, 'svg-transparent', this._rect1, OverlayLayer.Normal);
+        this._rect2 = this._drawRect(0, 0, normalized.x, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect2, OverlayLayer.Normal);
+        this._rect3 = this._drawRect(normalized.x + normalized.width, 0, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect3, OverlayLayer.Normal);
+        this._rect4 = this._drawRect(0, normalized.y + normalized.height, this.designerCanvas.containerBoundingRect.width, this.designerCanvas.containerBoundingRect.height, 'svg-transparent', this._rect4, OverlayLayer.Normal);
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this._resizeObserver.disconnect();
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.designerCanvas.eatEvents = null;
+        this.extendedItem.updateChildrenFromNodesChildren();
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
+    }
+    _clickOutside(e) {
+        this.extendedItem.innerHTML = this.extendedItem.element.innerHTML;
+        //TODO: the extension should remove itself, not the doubleclick extensions
+        //      cause the extension could be applied in another way
+        //maybe also the removal is maybe not desired (for example if it's permanet extension)
+        this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtensionProvider.d.ts

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

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtensionProvider.js

@@ -0,0 +1,15 @@
+import { EditTextWithStyloExtension } from "./EditTextWithStyloExtension.js";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class EditTextWithStyloExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.name === 'button' || designItem.name === 'input')
+            return false;
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextWithStyloExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+  .svg-transparent { stroke: none; fill: transparent; pointer-events: all; }
+`;
+}

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

@@ -1,3 +1,4 @@
+import { NamedTools } from "../tools/NamedTools.js";
 import { AbstractExtension } from './AbstractExtension';
 export class ElementDragTitleExtension extends AbstractExtension {
     _rect;
@@ -29,8 +30,7 @@ export class ElementDragTitleExtension extends AbstractExtension {
     _pointerEvent(event) {
         event.preventDefault();
         event.stopPropagation();
-        //@ts-ignore
-        this.designerCanvas._pointerEventHandlerBound(event, this.extendedItem.element);
+        this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -4,8 +4,6 @@ import { EventNames } from "../../../../enums/EventNames";
 import { createPathD } from "../../../helper/PathDataPolyfill";
 import { ContextMenuHelper } from "../../../helper/contextMenu/ContextMenuHelper";
 export class PathExtension extends AbstractExtension {
-    //private _itemRect: DOMRect;
-    //private _svgRect: DOMRect;
     _lastPos;
     _parentRect;
     _startPos;
@@ -16,8 +14,6 @@ export class PathExtension extends AbstractExtension {
         super(extensionManager, designerView, extendedItem);
     }
     extend() {
-        //this._itemRect = this.extendedItem.element.getBoundingClientRect();
-        //this._svgRect = (<SVGGeometryElement>this.extendedItem.element).ownerSVGElement.getBoundingClientRect();
         this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
         this._pathdata = this.extendedItem.node.getPathData({ normalize: false });
         for (let p of this._pathdata) {
@@ -117,6 +113,7 @@ export class PathExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                this.designerCanvas.removeCurrentPointerEventHandler();
                 this._startPos = null;
                 this._circlePos = null;
                 this._lastPos = null;
@@ -125,7 +122,7 @@ export class PathExtension extends AbstractExtension {
         }
     }
     _drawPathCircle(x, y, p, index) {
-        let circle = this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 5, 'svg-path');
+        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, 'svg-path');
         let circlePos = { x: x, y: y };
         const items = [];
         const pidx = this._pathdata.indexOf(p);

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

@@ -60,7 +60,7 @@ export class ResizeExtension extends AbstractExtension {
     }
     _pointerActionTypeResize(circle, event, actionMode = 'se-resize') {
         event.stopPropagation();
-        const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event); //, this.extendedItem.element, event.type === 'pointerdown' ? null : this._initialPoint);
+        const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
                 const cx = parseFloat(circle.getAttribute('cx'));
@@ -135,6 +135,7 @@ export class ResizeExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                this.designerCanvas.removeCurrentPointerEventHandler();
                 let cg = this.extendedItem.openGroup("Resize Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
                 this.extendedItem.setStyle('height', this.extendedItem.element.style.height);

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

@@ -43,6 +43,7 @@ export class TransformOriginExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                this.designerCanvas.removeCurrentPointerEventHandler();
                 if (this._startPos) {
                     const dx = normalized.x - this._startPos.x;
                     const dy = normalized.y - this._startPos.y;

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

@@ -67,6 +67,7 @@ export class DrawEllipsisTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 const rect = this._path.getBoundingClientRect();
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

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

@@ -50,6 +50,7 @@ export class DrawLineTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 const rect = this._path.getBoundingClientRect();
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

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

@@ -70,6 +70,7 @@ export class DrawPathTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 if (this._eventStarted && !this._pointerMoved) {
                     this._p2pMode = true;
                 }

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

@@ -82,6 +82,7 @@ export class DrawRectTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 const rect = this._path.getBoundingClientRect();
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

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

@@ -24,22 +24,23 @@ export class MagicWandSelectorTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
                 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/PanTool.js

@@ -13,6 +13,7 @@ export class PanTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 break;
         }
     }

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

@@ -37,6 +37,7 @@ export class PointerTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 break;
         }
         if (!event.altKey)
@@ -189,7 +190,7 @@ export class PointerTool {
                                                 break;
                                             }
                                         }
-                                        else if (newContainerElement == this._actionStartedDesignItem.element) {
+                                        else if (newContainerElement == this._actionStartedDesignItem.element || newContainerElement == currentDesignItem.element) {
                                             backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
                                             newContainerElement.style.pointerEvents = 'none';
                                             const old = newContainerElement;
@@ -197,6 +198,7 @@ export class PointerTool {
                                             if (old === newContainerElement) {
                                                 newContainerElementDesignItem = null;
                                                 newContainerService = null;
+                                                newContainerElement = null;
                                                 break;
                                             }
                                         }
@@ -297,7 +299,7 @@ export class PointerTool {
                 }
             case EventNames.PointerUp:
                 {
-                    if (this._actionType == PointerActionType.DragOrSelect) {
+                    if (!this._movedSinceStartedAction || this._actionType == PointerActionType.DragOrSelect) {
                         if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey)
                             designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
                         return;

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

@@ -46,22 +46,23 @@ export class RectangleSelectorTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.removeCurrentPointerEventHandler();
                 const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
                 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,16 @@ 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 _rect;
+    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;
 }