@node-projects/web-component-designer 0.0.33 → 0.0.37

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

@@ -1,11 +1,6 @@
 import { CanvasExtension } from './CanvasExtension';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class CanvasExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-margin { fill: #ff944722; }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         if (getComputedStyle(designItem.element).display == 'block')
             return true;
@@ -14,4 +9,7 @@ export class CanvasExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new CanvasExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-margin { fill: #ff944722; }
+  `;
 }

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

@@ -3,6 +3,17 @@ 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);
@@ -65,11 +76,3 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.focus();
     }
 }
-EditTextExtension.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>
-  `;

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

@@ -1,6 +1,7 @@
 import { DesignItem } from "../../../item/DesignItem";
 import { ExtensionType } from './ExtensionType';
 export class ExtensionManager {
+    designerView;
     constructor(designerView) {
         this.designerView = designerView;
         designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));

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

@@ -1,5 +1,6 @@
 import { AbstractExtension } from "./AbstractExtension";
 export class GrayOutExtension extends AbstractExtension {
+    _path;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }

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

@@ -1,15 +1,13 @@
 import { GrayOutExtension } from "./GrayOutExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class GrayOutExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-gray-out { stroke: transparent; fill: rgba(211, 211, 211, 0.8); pointer-events: none }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new GrayOutExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-gray-out { stroke: transparent; fill: rgba(211, 211, 211, 0.8); pointer-events: none }
+  `;
 }

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

@@ -1,13 +1,6 @@
 import { GridExtension } from './GridExtension';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class GridExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
-    .svg-grid-area { font-size: 8px; }
-    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         if (getComputedStyle(designItem.element).display == 'grid')
             return true;
@@ -16,4 +9,9 @@ export class GridExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new GridExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-grid { stroke: orange; stroke-dasharray: 5; fill: #ff944722; }
+    .svg-grid-area { font-size: 8px; }
+    .svg-grid-gap { stroke: orange; stroke-dasharray: 5; fill: #0000ff22; }
+  `;
 }

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

@@ -1,5 +1,6 @@
 import { AbstractExtension } from './AbstractExtension';
 export class InvisibleDivExtension extends AbstractExtension {
+    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }

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

@@ -1,11 +1,6 @@
 import { InvisibleDivExtension } from "./InvisibleDivExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class InvisibleDivExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-invisible-div { stroke: lightgray; fill: transparent; stroke-width: 1;
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         if (designItem.name == 'div') {
             const st = window.getComputedStyle(designItem.element);
@@ -16,4 +11,7 @@ export class InvisibleDivExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new InvisibleDivExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-invisible-div { stroke: lightgray; fill: transparent; stroke-width: 1;
+  `;
 }

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

@@ -1,6 +1,7 @@
 import { AbstractExtension } from "./AbstractExtension";
 const offset = 3;
 export class MouseOverExtension extends AbstractExtension {
+    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }

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

@@ -1,15 +1,13 @@
 import { MouseOverExtension } from "./MouseOverExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class MouseOverExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-hover { stroke: #90caf9; fill: none; }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new MouseOverExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-hover { stroke: #90caf9; fill: none; }
+  `;
 }

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

@@ -1,6 +1,10 @@
 import { AbstractExtension } from "./AbstractExtension";
 import "../../../helper/PathDataPolyfill";
 export class PathExtension extends AbstractExtension {
+    //private _itemRect: DOMRect;
+    //private _svgRect: DOMRect;
+    _lastPos;
+    _parentRect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }

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

@@ -0,0 +1,10 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,29 @@
+import { AbstractExtension } from "./AbstractExtension";
+export class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        if (computedStyle.margin !== '0px') {
+            const xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
+            const yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
+            const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+            const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+            const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
+            const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
+            this._drawRect(xOffset - left, yOffset - top, left + itemRect.width + right, top, 'svg-margin');
+            this._drawRect(xOffset - left, yOffset, left, itemRect.height, 'svg-margin');
+            this._drawRect(xOffset + itemRect.width, yOffset, right, itemRect.height, 'svg-margin');
+            this._drawRect(xOffset - left, yOffset + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
+        }
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/PermamentCursorExtensionProvider copy.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 CanvasExtensionProvider 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/PermamentCursorExtensionProvider copy.js

@@ -0,0 +1,15 @@
+import { CanvasExtension } from './CanvasExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class CanvasExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'block')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new CanvasExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-margin { fill: #ff944722; }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/PermamentCursorExtensionProvider.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 CanvasExtensionProvider 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/PermamentCursorExtensionProvider.js

@@ -0,0 +1,15 @@
+import { CanvasExtension } from './CanvasExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class CanvasExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'block')
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new CanvasExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-margin { fill: #ff944722; }
+  `;
+}

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

@@ -1,5 +1,9 @@
 import { AbstractExtension } from "./AbstractExtension";
 export class PositionExtension extends AbstractExtension {
+    _line1;
+    _line2;
+    _line3;
+    _line4;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }

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

@@ -1,5 +1,7 @@
 import { AbstractExtension } from './AbstractExtension';
 export class PrimarySelectionDefaultExtension extends AbstractExtension {
+    _rect;
+    _text;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }

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

@@ -1,6 +1,18 @@
 import { EventNames } from "../../../../enums/EventNames";
 import { AbstractExtension } from './AbstractExtension';
 export class ResizeExtension extends AbstractExtension {
+    resizeAllSelected;
+    _initialSizes;
+    _actionModeStarted;
+    _initialPoint;
+    _circle1;
+    _circle2;
+    _circle3;
+    _circle4;
+    _circle5;
+    _circle6;
+    _circle7;
+    _circle8;
     constructor(extensionManager, designerView, extendedItem, resizeAllSelected) {
         super(extensionManager, designerView, extendedItem);
         this.resizeAllSelected = resizeAllSelected;
@@ -46,7 +58,7 @@ export class ResizeExtension extends AbstractExtension {
     }
     _pointerActionTypeResize(event, actionMode = 'se-resize') {
         event.stopPropagation();
-        const currentPoint = this.designerView.getDesignerMousepoint(event, this.extendedItem.element, event.type === 'pointerdown' ? null : this._initialPoint);
+        const currentPoint = this.designerView.getNormalizedEventCoordinates(event); //, this.extendedItem.element, event.type === 'pointerdown' ? null : this._initialPoint);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
@@ -62,10 +74,8 @@ export class ResizeExtension extends AbstractExtension {
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
-                    this._initialPoint.offsetInControlX = 0;
-                    this._initialPoint.offsetInControlY = 0;
                     const containerService = this.designerView.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent));
-                    const diff = containerService.placePoint(event, this.designerView, this.extendedItem.parent, this._initialPoint, currentPoint, this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                    const diff = containerService.placePoint(event, this.designerView, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerView.instanceServiceContainer.selectionService.selectedElements);
                     let trackX = diff.x - this._initialPoint.x;
                     let trackY = diff.y - this._initialPoint.y;
                     let i = 0;

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

@@ -1,5 +1,6 @@
 import { ResizeExtension } from "./ResizeExtension";
 export class ResizeExtensionProvider {
+    resizeAllSelected;
     constructor(resizeAllSelected = false) {
         this.resizeAllSelected = resizeAllSelected;
     }

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

@@ -1,15 +1,13 @@
 import { RotateExtension } from "./RotateExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class RotateExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-primary-rotate { stroke: #3899ec; fill: #3899ec; pointer-events: all }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new RotateExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-primary-rotate { stroke: #3899ec; fill: #3899ec; pointer-events: all }
+  `;
 }

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

@@ -1,5 +1,6 @@
 import { AbstractExtension } from './AbstractExtension';
 export class SelectionDefaultExtension extends AbstractExtension {
+    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }

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

@@ -1,15 +1,13 @@
 import { SelectionDefaultExtension } from "./SelectionDefaultExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class SelectionDefaultExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; /*pointer-events: all;*/ }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new SelectionDefaultExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; /*pointer-events: all;*/ }
+  `;
 }

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

@@ -1,6 +1,9 @@
 import { EventNames } from "../../../../enums/EventNames";
 import { AbstractExtension } from './AbstractExtension';
 export class TransformOriginExtension extends AbstractExtension {
+    _startPos;
+    _circle;
+    _circle2;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }

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

@@ -1,11 +1,6 @@
 import { TransformOriginExtension } from "./TransformOriginExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class TransformOriginExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-transform-origin { stroke: #3899ec; fill: black; pointer-events: all }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         if (designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg'))
             return true;
@@ -14,4 +9,7 @@ export class TransformOriginExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new TransformOriginExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-transform-origin { stroke: #3899ec; fill: black; pointer-events: all }
+  `;
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js

@@ -1,7 +1,5 @@
 export class MultipleItemsSelectedContextMenu {
-    constructor() {
-        this.orderIndex = 60;
-    }
+    orderIndex = 60;
     shouldProvideContextmenu(event, designerView, designItem) {
         if (designItem.instanceServiceContainer.selectionService.selectedElements.length > 1) {
             return true;

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

@@ -0,0 +1,22 @@
+import { IDesignItem } from "../../../../item/IDesignItem.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { OverlayLayerView } from "../../overlayLayerView.js";
+import { IExtensionManager } from "../IExtensionManger.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+import { IDesignerPointerExtension } from "./IDesignerPointerExtension.js";
+export declare abstract class AbstractDesignerPointerExtension implements IDesignerPointerExtension {
+    protected overlays: SVGGraphicsElement[];
+    protected overlayLayerView: OverlayLayerView;
+    protected extensionManager: IExtensionManager;
+    protected designerView: IDesignerCanvas;
+    protected extendedItem: IDesignItem;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem?: IDesignItem);
+    abstract extend(event: PointerEvent): any;
+    abstract refresh(event: PointerEvent): any;
+    abstract dispose(): any;
+    protected _removeAllOverlays(): void;
+    _drawLineOverlay(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    _drawCircleOverlay(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/extensions/pointerExtensions/AbstractDesignerPointerExtension.js

@@ -0,0 +1,82 @@
+//todo:
+//move draw functions to overlay layer
+//implement designerpointerextension
+//create ruler
+export class AbstractDesignerPointerExtension {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerView;
+    extendedItem;
+    constructor(extensionManager, designerView, extendedItem) {
+        this.extensionManager = extensionManager;
+        this.designerView = designerView;
+        this.extendedItem = extendedItem;
+        this.overlayLayerView = designerView.overlayLayer;
+    }
+    _removeAllOverlays() {
+        for (let o of this.overlays) {
+            try {
+                this.overlayLayerView.removeOverlay(o);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        this.overlays = [];
+    }
+    _drawLineOverlay(x1, y1, x2, y2, className, line, overlayLayer) {
+        if (!line) {
+            line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            this.overlayLayerView.addOverlay(line, overlayLayer);
+            this.overlays.push(line);
+        }
+        line.setAttribute('x1', x1);
+        line.setAttribute('y1', y1);
+        line.setAttribute('x2', x2);
+        line.setAttribute('y2', y2);
+        if (className)
+            line.setAttribute('class', className);
+        return line;
+    }
+    _drawCircleOverlay(x, y, radius, className, circle, overlayLayer) {
+        if (!circle) {
+            circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            this.overlayLayerView.addOverlay(circle, overlayLayer);
+            this.overlays.push(circle);
+        }
+        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.overlayLayerView.addOverlay(rect, overlayLayer);
+            this.overlays.push(rect);
+        }
+        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.overlayLayerView.addOverlay(textEl, overlayLayer);
+            this.overlays.push(textEl);
+        }
+        textEl.setAttribute('x', x);
+        textEl.setAttribute('y', y);
+        textEl.textContent = text;
+        if (className)
+            textEl.setAttribute('class', className);
+        return textEl;
+    }
+}

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

@@ -0,0 +1,22 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+import { OverlayLayerView } from '../overlayLayerView';
+import { OverlayLayer } from './OverlayLayer';
+export declare abstract class AbstractExtension implements IDesignerExtension {
+    protected overlays: SVGGraphicsElement[];
+    protected overlayLayerView: OverlayLayerView;
+    protected extensionManager: IExtensionManager;
+    protected designerView: IDesignerCanvas;
+    protected extendedItem: IDesignItem;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    abstract extend(): any;
+    abstract refresh(): any;
+    abstract dispose(): any;
+    protected _removeAllOverlays(): void;
+    _drawLineOverlay(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    _drawCircleOverlay(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/extensions/pointerExtensions/AbstractExtension.js

@@ -0,0 +1,78 @@
+export class AbstractExtension {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerView;
+    extendedItem;
+    constructor(extensionManager, designerView, extendedItem) {
+        this.extensionManager = extensionManager;
+        this.designerView = designerView;
+        this.extendedItem = extendedItem;
+        this.overlayLayerView = designerView.overlayLayer;
+    }
+    _removeAllOverlays() {
+        for (let o of this.overlays) {
+            try {
+                this.overlayLayerView.removeOverlay(o);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        this.overlays = [];
+    }
+    _drawLineOverlay(x1, y1, x2, y2, className, line, overlayLayer) {
+        if (!line) {
+            line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            this.overlayLayerView.addOverlay(line, overlayLayer);
+            this.overlays.push(line);
+        }
+        line.setAttribute('x1', x1);
+        line.setAttribute('y1', y1);
+        line.setAttribute('x2', x2);
+        line.setAttribute('y2', y2);
+        if (className)
+            line.setAttribute('class', className);
+        return line;
+    }
+    _drawCircleOverlay(x, y, radius, className, circle, overlayLayer) {
+        if (!circle) {
+            circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+            this.overlayLayerView.addOverlay(circle, overlayLayer);
+            this.overlays.push(circle);
+        }
+        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.overlayLayerView.addOverlay(rect, overlayLayer);
+            this.overlays.push(rect);
+        }
+        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.overlayLayerView.addOverlay(textEl, overlayLayer);
+            this.overlays.push(textEl);
+        }
+        textEl.setAttribute('x', x);
+        textEl.setAttribute('y', y);
+        textEl.textContent = text;
+        if (className)
+            textEl.setAttribute('class', className);
+        return textEl;
+    }
+}