@node-projects/web-component-designer 0.0.35 → 0.0.39

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js

@@ -0,0 +1,26 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorLinePointerExtension extends AbstractDesignerPointerExtension {
+    _lineOffset = 5;
+    _lineLength = 10;
+    _circle;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    refresh(event) {
+        let mp = this.designerCanvas.getNormalizedEventCoordinates(event);
+        this._circle = this._drawCircle(mp.x, mp.y, 1, 'svg-cursor-line', this._circle, OverlayLayer.Foregorund);
+        this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foregorund);
+        this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foregorund);
+        this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foregorund);
+        this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+    style = css `
+    .svg-cursor-line { stroke: black; pointer-events: none }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.d.ts

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerPointerExtension } from './IDesignerPointerExtension.js';
+import { IDesignerPointerExtensionProvider } from './IDesignerPointerExtensionProvider.js';
+export declare class CursorLinePointerExtensionProvider implements IDesignerPointerExtensionProvider {
+    getExtension(designerCanvas: IDesignerCanvas): IDesignerPointerExtension;
+    style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js

@@ -0,0 +1,10 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { CursorLinePointerExtension } from './CursorLinePointerExtension.js';
+export class CursorLinePointerExtensionProvider {
+    getExtension(designerCanvas) {
+        return new CursorLinePointerExtension(designerCanvas.extensionManager, designerCanvas);
+    }
+    style = css `
+    .svg-cursor-line { stroke: black; pointer-events: none }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectangleExtension.d.ts

@@ -0,0 +1,7 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorRectangleExtension extends AbstractDesignerPointerExtension {
+    private _rect;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectangleExtension.js

@@ -0,0 +1,20 @@
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorRectangleExtension extends AbstractDesignerPointerExtension {
+    _rect;
+    extend(event) {
+        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+    }
+    refresh(event) {
+        let mp = this.designerView.getNormalizedEventCoordinates(event);
+        this._rect.setAttribute('class', 'svg-selector');
+        this._rect.setAttribute('x', (mp.x - 5));
+        this._rect.setAttribute('y', (mp.y - 5));
+        this._rect.setAttribute('width', (10));
+        this._rect.setAttribute('height', (10));
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectanglePointerExtension copy.d.ts

@@ -0,0 +1,13 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    private _lineOffset;
+    private _lineLength;
+    private _line1;
+    private _line2;
+    private _line3;
+    private _line4;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+    style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectanglePointerExtension copy.js

@@ -0,0 +1,27 @@
+import { css } from '@node-projects/base-custom-webcomponent';
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    _lineOffset = 5;
+    _lineLength = 10;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
+    extend(event) {
+        this.refresh(event);
+    }
+    refresh(event) {
+        let mp = this.designerView.getNormalizedEventCoordinates(event);
+        this._line1 = this._drawLine(mp.x, mp.y - this._lineOffset, mp.x, mp.y - this._lineOffset - this._lineLength, 'svg-cursor-line', this._line1, OverlayLayer.Foregorund);
+        this._line2 = this._drawLine(mp.x, mp.y + this._lineOffset, mp.x, mp.y + this._lineOffset + this._lineLength, 'svg-cursor-line', this._line2, OverlayLayer.Foregorund);
+        this._line3 = this._drawLine(mp.x - this._lineOffset, mp.y, mp.x - this._lineOffset - this._lineLength, mp.y, 'svg-cursor-line', this._line3, OverlayLayer.Foregorund);
+        this._line4 = this._drawLine(mp.x + this._lineOffset, mp.y, mp.x + this._lineOffset + this._lineLength, mp.y, 'svg-cursor-line', this._line4, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+    style = css `
+    .svg-cursor-line { stroke: black; pointer-events: none }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectanglePointerExtension.d.ts

@@ -0,0 +1,7 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    private _rect;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorRectanglePointerExtension.js

@@ -0,0 +1,20 @@
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    _rect;
+    extend(event) {
+        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+    }
+    refresh(event) {
+        let mp = this.designerView.getNormalizedEventCoordinates(event);
+        this._rect.setAttribute('class', 'svg-selector');
+        this._rect.setAttribute('x', (mp.x - 5));
+        this._rect.setAttribute('y', (mp.y - 5));
+        this._rect.setAttribute('width', (10));
+        this._rect.setAttribute('height', (10));
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerExtension.d.ts

@@ -0,0 +1,5 @@
+import { IDisposable } from "../../../../interfaces/IDisposable";
+export interface IDesignerPointerExtension extends IDisposable {
+    extend(event: PointerEvent): any;
+    refresh(event: PointerEvent): any;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerExtension.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerExtensionProvider.d.ts

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

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerExtensionProvider.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.d.ts

@@ -0,0 +1,5 @@
+import { IDisposable } from "../../../../../interfaces/IDisposable.js";
+export interface IDesignerPointerExtension extends IDisposable {
+    refresh(event: PointerEvent): any;
+    style?: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.d.ts

@@ -0,0 +1,6 @@
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
+export interface IDesignerPointerExtensionProvider {
+    getExtension(designerView: IDesignerCanvas): IDesignerPointerExtension;
+    style?: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/extensions/pointerExtensions/RulerExtension.d.ts

@@ -0,0 +1,7 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    private _rect;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/RulerExtension.js

@@ -0,0 +1,20 @@
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
+    _rect;
+    extend(event) {
+        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+    }
+    refresh(event) {
+        let mp = this.designerView.getNormalizedEventCoordinates(event);
+        this._rect.setAttribute('class', 'svg-selector');
+        this._rect.setAttribute('x', (mp.x - 5));
+        this._rect.setAttribute('y', (mp.y - 5));
+        this._rect.setAttribute('width', (10));
+        this._rect.setAttribute('height', (10));
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/RulerPointerExtension.d.ts

@@ -0,0 +1,7 @@
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export declare class RulerPointerExtension extends AbstractDesignerPointerExtension {
+    private _rect;
+    extend(event: PointerEvent): void;
+    refresh(event: PointerEvent): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/pointerExtensions/RulerPointerExtension.js

@@ -0,0 +1,20 @@
+import { OverlayLayer } from '../OverlayLayer.js';
+import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
+export class RulerPointerExtension extends AbstractDesignerPointerExtension {
+    _rect;
+    extend(event) {
+        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+    }
+    refresh(event) {
+        let mp = this.designerView.getNormalizedEventCoordinates(event);
+        this._rect.setAttribute('class', 'svg-selector');
+        this._rect.setAttribute('x', (mp.x - 5));
+        this._rect.setAttribute('y', (mp.y - 5));
+        this._rect.setAttribute('width', (10));
+        this._rect.setAttribute('height', (10));
+    }
+    dispose() {
+        super._removeAllOverlays();
+    }
+}

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

@@ -1,9 +1,9 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
 export class EditTextOverlay extends BaseCustomWebComponentConstructorAppend {
-}
-EditTextOverlay.style = css ``;
-EditTextOverlay.template = html `
+    static style = css ``;
+    static template = html `
     <div>
       <input type="text">
     </div>
   `;
+}

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

@@ -17,4 +17,8 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     removeAllNodesWithClass(className: string): void;
     createPoint(): DOMPointInit;
     elementFromPoint(x: number, y: number): Element;
+    drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    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;
 }

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

@@ -1,6 +1,34 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from './extensions/OverlayLayer.js';
 export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
+    static template = html `
+    <svg id="svg" style="pointer-events: none;">
+      <g id="background"></g>
+      <g id="normal"></g>
+      <g id="foreground"></g>
+    </svg>`;
+    static style = css `
+    svg {
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+
+    .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
+    .svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; }
+    .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: all }
+    .svg-text { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
+    .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
+    .svg-position  { stroke: black; stroke-dasharray: 2; }
+    .svg-path { stroke: #3899ec; fill: orange; pointer-events: all }
+    .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
+    .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }`;
+    static is = 'node-projects-overlay-layer-view';
+    _serviceContainer;
+    _svg;
+    _gBackground;
+    _gNormal;
+    _gForeground;
     constructor(serviceContainer) {
         super();
         this._serviceContainer = serviceContainer;
@@ -19,6 +47,11 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
                 }
             }
         }
+        for (const ext of this._serviceContainer.designerPointerExtensions) {
+            if (ext.style) {
+                styles.push(ext.style);
+            }
+        }
         this.shadowRoot.adoptedStyleSheets = styles;
     }
     addOverlay(element, overlayLayer = OverlayLayer.Normal) {
@@ -35,7 +68,13 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         }
     }
     removeOverlay(element) {
-        element.parentElement.removeChild(element);
+        try {
+            if (element)
+                element.parentElement.removeChild(element);
+        }
+        catch (err) {
+            console.error(err);
+        }
     }
     removeAllNodesWithClass(className) {
         const nodes = this._svg.querySelectorAll('.' + className);
@@ -51,28 +90,55 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         //@ts-ignore
         return this.shadowRoot.elementFromPoint(x, y);
     }
-}
-OverlayLayerView.template = html `
-    <svg id="svg" style="pointer-events: none;">
-      <g id="background"></g>
-      <g id="normal"></g>
-      <g id="foreground"></g>
-    </svg>`;
-OverlayLayerView.style = css `
-    svg {
-      width: 100%;
-      height: 100%;
-      overflow: visible;
+    drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+        if (!line) {
+            line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            this.addOverlay(line, overlayLayer);
+        }
+        line.setAttribute('x1', x1);
+        line.setAttribute('y1', y1);
+        line.setAttribute('x2', x2);
+        line.setAttribute('y2', y2);
+        if (className)
+            line.setAttribute('class', className);
+        return line;
     }
-
-    .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
-    .svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; }
-    .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: all }
-    .svg-text { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
-    .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
-    .svg-position  { stroke: black; stroke-dasharray: 2; }
-    .svg-path { stroke: #3899ec; fill: orange; pointer-events: all }
-    .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
-    .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }`;
-OverlayLayerView.is = 'node-projects-overlay-layer-view';
+    drawCircle(x, y, radius, className, circle, overlayLayer) {
+        if (!circle) {
+            circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            this.addOverlay(circle, overlayLayer);
+        }
+        circle.setAttribute('cx', x);
+        circle.setAttribute('cy', y);
+        circle.setAttribute('r', radius);
+        if (className)
+            circle.setAttribute('class', className);
+        return circle;
+    }
+    drawRect(x, y, w, h, className, rect, overlayLayer) {
+        if (!rect) {
+            rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+            this.addOverlay(rect, overlayLayer);
+        }
+        rect.setAttribute('x', x);
+        rect.setAttribute('y', y);
+        rect.setAttribute('width', w);
+        rect.setAttribute('height', h);
+        if (className)
+            rect.setAttribute('class', className);
+        return rect;
+    }
+    drawText(text, x, y, className, textEl, overlayLayer) {
+        if (!textEl) {
+            textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            this.addOverlay(textEl, overlayLayer);
+        }
+        textEl.setAttribute('x', x);
+        textEl.setAttribute('y', y);
+        textEl.textContent = text;
+        if (className)
+            textEl.setAttribute('class', className);
+        return textEl;
+    }
+}
 customElements.define(OverlayLayerView.is, OverlayLayerView);

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

@@ -2,8 +2,12 @@ import { EventNames } from '../../../../enums/EventNames';
 import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
 import { OverlayLayer } from '../extensions/OverlayLayer.js';
 export class DrawElementTool {
+    _elementDefinition;
+    _createdItem;
+    _startPosition;
+    cursor = 'crosshair';
+    _rect;
     constructor(elementDefinition) {
-        this.cursor = 'crosshair';
         this._elementDefinition = elementDefinition;
     }
     activated(serviceContainer) {

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

@@ -5,7 +5,6 @@ export declare class DrawPathTool implements ITool {
     readonly cursor = "crosshair";
     private _pathD;
     private _path;
-    private _initialPoint;
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;

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

@@ -4,20 +4,21 @@ import { InsertAction } from '../../../services/undoService/transactionItems/Ins
 import { DesignItem } from '../../../item/DesignItem';
 import { OverlayLayer } from '../extensions/OverlayLayer.js';
 export class DrawPathTool {
+    cursor = 'crosshair';
+    _pathD;
+    _path;
     constructor() {
-        this.cursor = 'crosshair';
     }
     activated(serviceContainer) {
     }
     dispose() {
     }
     pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getDesignerMousepoint(event, currentElement, event.type === 'pointerdown' ? null : this._initialPoint);
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
         const offset = 50;
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
-                this._initialPoint = currentPoint;
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
                 this._path.setAttribute("D", this._pathD);

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

@@ -5,7 +5,6 @@ export declare class MagicWandSelectorTool implements ITool {
     cursor: string;
     private _pathD;
     private _path;
-    private _initialPoint;
     pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;

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

@@ -2,15 +2,14 @@ import { EventNames } from '../../../../enums/EventNames';
 import { DesignItem } from '../../../item/DesignItem';
 import { OverlayLayer } from '../extensions/OverlayLayer.js';
 export class MagicWandSelectorTool {
-    constructor() {
-        this.cursor = 'progress';
-    }
+    cursor = 'progress';
+    _pathD;
+    _path;
     pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getDesignerMousepoint(event, currentElement, event.type === 'pointerdown' ? null : this._initialPoint);
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
-                this._initialPoint = currentPoint;
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                 this._path.setAttribute('class', 'svg-selector');
                 this._pathD = "M" + currentPoint.x + " " + currentPoint.y;

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

@@ -1,7 +1,5 @@
 export class PanTool {
-    constructor() {
-        this.cursor = 'grab';
-    }
+    cursor = 'grab';
     pointerEventHandler(designerCanvas, event, currentElement) {
     }
     activated(serviceContainer) {

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

@@ -1,7 +1,5 @@
 export class PickColorTool {
-    constructor() {
-        this.cursor = 'crosshair';
-    }
+    cursor = 'crosshair';
     async activated(serviceContainer) {
         try {
             //@ts-ignore

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

@@ -12,10 +12,11 @@ export declare class PointerTool implements ITool {
     private _dragOverExtensionItem;
     private _dragExtensionItem;
     private _moveItemsOffset;
+    private _initialOffset;
     constructor();
     activated(serviceContainer: ServiceContainer): void;
     dispose(): void;
-    pointerEventHandler(designerView: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
     private _pointerActionTypeDrawSelection;
     private _resetPointerEventsForClickThrough;
     private _pointerActionTypeDragOrSelect;