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

package/dist/elements/controls/ThicknessEditor.js

@@ -123,7 +123,6 @@ export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
     }
     ready() {
         this._parseAttributesToProperties();
-        this._updateValue();
         this._leftInput = this._getDomElement('left');
         this._topInput = this._getDomElement('top');
         this._rightInput = this._getDomElement('right');
@@ -140,6 +139,7 @@ export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
         this._topInput.onblur = (e) => this._valueTop = this._topInput.value;
         this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value;
         this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value;
+        this._updateValue();
     }
 }
 customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/services/ServiceContainer.d.ts

@@ -21,6 +21,7 @@ import { ISnaplinesProviderService } from "./placementService/ISnaplinesProvider
 import { IPrepareElementsForDesignerService } from './instanceService/IPrepareElementsForDesignerService';
 import { IDragDropService } from './dragDropService/IDragDropService';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
+import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -43,6 +44,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;
     readonly designerTools: Map<string | NamedTools, ITool>;

package/dist/elements/services/ServiceContainer.js

@@ -8,6 +8,7 @@ export class ServiceContainer extends BaseServiceContainer {
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();
+    designerPointerExtensions = [];
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);
     designerTools = new Map();

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

@@ -40,6 +40,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     extensionManager: IExtensionManager;
+    private _pointerextensions;
     private _onDblClickBound;
     constructor();
     get designerWidth(): string;

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

@@ -103,13 +103,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
           <div style="width: 100%;height: 100%;">
             <div id="node-projects-designer-canvas-outercanvas2" style="width: 100%;height: 100%;position: relative;overflow: auto;">
               <div id="node-projects-designer-canvas-canvasContainer" style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;/* bottom: 0; does not work with fixed sized when size is bigger then view */left: 0;user-select: none;">
-                <!-- <div id="zoomHelper" style="width: 10px; height: 10px; position: absolute; top: 0; left: 0; pointer-events: none;"></div> -->
                 <div id="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
               </div>
             </div>
           </div>
         </div>`;
     extensionManager;
+    _pointerextensions;
     _onDblClickBound;
     constructor() {
         super();
@@ -276,6 +276,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer.appendChild(this.overlayLayer);
         this.snapLines = new Snaplines(this.overlayLayer);
         this.snapLines.initialize(this.rootDesignItem);
+        if (this.serviceContainer.designerPointerExtensions)
+            for (let pe of this.serviceContainer.designerPointerExtensions) {
+                if (!this._pointerextensions)
+                    this._pointerextensions = [];
+                this._pointerextensions.push(pe.getExtension(this));
+            }
         if (this.children) {
             let children = this.children;
             if (this.children.length == 1 && this.children[0] instanceof HTMLSlotElement) {
@@ -548,6 +554,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _rect;
     _pointerEventHandler(event) {
         this._fillCalculationrects();
+        if (this._pointerextensions) {
+            for (let pe of this._pointerextensions)
+                pe.refresh(event);
+        }
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
         if (event.button == 2)

package/dist/elements/widgets/designerView/extensions/AbstractExtension copy.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;
+    _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/extensions/AbstractExtension copy.js

@@ -0,0 +1,52 @@
+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 = [];
+    }
+    _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+        const newLine = this.overlayLayerView.drawLine(x1, y1, x2, y2, className, line, overlayLayer);
+        if (!line) {
+            this.overlays.push(newLine);
+        }
+        return newLine;
+    }
+    _drawCircle(x, y, radius, className, circle, overlayLayer) {
+        const newCircle = this.overlayLayerView.drawCircle(x, y, radius, className, circle, overlayLayer);
+        if (!circle) {
+            this.overlays.push(newCircle);
+        }
+        return circle;
+    }
+    _drawRect(x, y, w, h, className, rect, overlayLayer) {
+        const newRect = this.overlayLayerView.drawRect(x, y, w, h, className, rect, overlayLayer);
+        if (!rect) {
+            this.overlays.push(newRect);
+        }
+        return newRect;
+    }
+    _drawText(text, x, y, className, textEl, overlayLayer) {
+        const newText = this.overlayLayerView.drawText(text, x, y, className, textEl, overlayLayer);
+        if (!textEl) {
+            this.overlays.push(newText);
+        }
+        return newText;
+    }
+}

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

@@ -2,21 +2,11 @@ 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;
+import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
+export declare abstract class AbstractExtension extends AbstractExtensionBase implements IDesignerExtension {
     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/AbstractExtension.js

@@ -1,78 +1,8 @@
-export class AbstractExtension {
-    overlays = [];
-    overlayLayerView;
-    extensionManager;
-    designerView;
+import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
+export class AbstractExtension extends AbstractExtensionBase {
     extendedItem;
     constructor(extensionManager, designerView, extendedItem) {
-        this.extensionManager = extensionManager;
-        this.designerView = designerView;
+        super(extensionManager, 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/AbstractExtensionBase.d.ts

@@ -0,0 +1,16 @@
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IExtensionManager } from "./IExtensionManger";
+import { OverlayLayerView } from '../overlayLayerView';
+import { OverlayLayer } from './OverlayLayer';
+export declare abstract class AbstractExtensionBase {
+    protected overlays: SVGGraphicsElement[];
+    protected overlayLayerView: OverlayLayerView;
+    protected extensionManager: IExtensionManager;
+    protected designerCanvas: IDesignerCanvas;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
+    protected _removeAllOverlays(): void;
+    protected _drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    protected _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
+    protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    protected _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+}

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

@@ -0,0 +1,50 @@
+export class AbstractExtensionBase {
+    overlays = [];
+    overlayLayerView;
+    extensionManager;
+    designerCanvas;
+    constructor(extensionManager, designerCanvas) {
+        this.extensionManager = extensionManager;
+        this.designerCanvas = designerCanvas;
+        this.overlayLayerView = designerCanvas.overlayLayer;
+    }
+    _removeAllOverlays() {
+        for (let o of this.overlays) {
+            try {
+                this.overlayLayerView.removeOverlay(o);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+        this.overlays = [];
+    }
+    _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+        const newLine = this.overlayLayerView.drawLine(x1, y1, x2, y2, className, line, overlayLayer);
+        if (!line) {
+            this.overlays.push(newLine);
+        }
+        return newLine;
+    }
+    _drawCircle(x, y, radius, className, circle, overlayLayer) {
+        const newCircle = this.overlayLayerView.drawCircle(x, y, radius, className, circle, overlayLayer);
+        if (!circle) {
+            this.overlays.push(newCircle);
+        }
+        return newCircle;
+    }
+    _drawRect(x, y, w, h, className, rect, overlayLayer) {
+        const newRect = this.overlayLayerView.drawRect(x, y, w, h, className, rect, overlayLayer);
+        if (!rect) {
+            this.overlays.push(newRect);
+        }
+        return newRect;
+    }
+    _drawText(text, x, y, className, textEl, overlayLayer) {
+        const newText = this.overlayLayerView.drawText(text, x, y, className, textEl, overlayLayer);
+        if (!textEl) {
+            this.overlays.push(newText);
+        }
+        return newText;
+    }
+}

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

@@ -11,8 +11,8 @@ export class AltToEnterContainerExtension extends AbstractExtension {
     }
     refresh() {
         let itemRect = this.extendedItem.element.getBoundingClientRect();
-        this._text = this._drawText("Press ALT to enter container", itemRect.x - this.designerView.containerBoundingRect.x + 5, itemRect.y - this.designerView.containerBoundingRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Background);
-        this._rect = this._drawRect(itemRect.x - this.designerView.containerBoundingRect.x, itemRect.y - this.designerView.containerBoundingRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Background);
+        this._text = this._drawText("Press ALT to enter container", itemRect.x - this.designerCanvas.containerBoundingRect.x + 5, itemRect.y - this.designerCanvas.containerBoundingRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Background);
+        this._rect = this._drawRect(itemRect.x - this.designerCanvas.containerBoundingRect.x, itemRect.y - this.designerCanvas.containerBoundingRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Background);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -7,8 +7,8 @@ export class CanvasExtension extends AbstractExtension {
         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 xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
+            const yOffset = itemRect.y - this.designerCanvas.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', ''));

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

@@ -29,13 +29,13 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.addEventListener('input', this._contentEditedBound);
         this.extendedItem.element.addEventListener('blur', this._blurBound);
         this.extendedItem.element.focus();
-        this.designerView.eatEvents = this.extendedItem.element;
+        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.designerView.containerBoundingRect.x));
-        foreignObject.setAttribute('y', '' + (itemRect.y - this.designerView.containerBoundingRect.y - 30));
+        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x));
+        foreignObject.setAttribute('y', '' + (itemRect.y - this.designerCanvas.containerBoundingRect.y - 30));
         foreignObject.setAttribute('width', '96');
         foreignObject.setAttribute('height', '24');
         foreignObject.appendChild(elements);
@@ -50,7 +50,7 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.removeAttribute('contenteditable');
         this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
         this.extendedItem.element.removeEventListener('blur', this._blurBound);
-        this.designerView.eatEvents = null;
+        this.designerCanvas.eatEvents = null;
         this.extendedItem.updateChildrenFromNodesChildren();
     }
     _contentEdited() {

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

@@ -12,4 +12,5 @@ export declare class ExtensionManager implements IExtensionManager {
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): void;
+    refreshAllExtensions(designItems: IDesignItem[]): void;
 }

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

@@ -200,4 +200,18 @@ export class ExtensionManager {
             }
         }
     }
+    refreshAllExtensions(designItems) {
+        if (designItems) {
+            this.refreshExtensions(designItems, ExtensionType.Permanent);
+            this.refreshExtensions(designItems, ExtensionType.Selection);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelection);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer);
+            this.refreshExtensions(designItems, ExtensionType.MouseOver);
+            this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected);
+            this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDragOver);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDrag);
+            this.refreshExtensions(designItems, ExtensionType.Doubleclick);
+        }
+    }
 }

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

@@ -14,8 +14,5 @@ export declare enum ExtensionType {
      * Extension for the Current Container wich the dragged element is contained.
      */
     ContainerDrag = 256,
-    /**
-     * Extension for the Current Container wich the dragged element is contained.
-     */
     Doubleclick = 512
 }

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

@@ -15,8 +15,5 @@ export var ExtensionType;
      * Extension for the Current Container wich the dragged element is contained.
      */
     ExtensionType[ExtensionType["ContainerDrag"] = 256] = "ContainerDrag";
-    /**
-     * Extension for the Current Container wich the dragged element is contained.
-     */
     ExtensionType[ExtensionType["Doubleclick"] = 512] = "Doubleclick";
 })(ExtensionType || (ExtensionType = {}));

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

@@ -18,11 +18,11 @@ export class GrayOutExtension extends AbstractExtension {
         this.drawGrayOut(itemRect);
     }
     drawGrayOut(rect) {
-        let r = { x: rect.x - this.designerView.containerBoundingRect.x, y: rect.y - this.designerView.containerBoundingRect.y, width: rect.width, height: rect.height };
-        const pathPoints = "M0 0 L0 " + this.designerView.containerBoundingRect.height + "L" + r.x + " " + this.designerView.containerBoundingRect.height + "L" + r.x + " 0" + " L0 0" +
-            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + this.designerView.containerBoundingRect.width + " " + r.y + "L" + this.designerView.containerBoundingRect.width + " 0" + "L" + r.x + " 0" +
-            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + this.designerView.containerBoundingRect.height + "L" + this.designerView.containerBoundingRect.width + " " + this.designerView.containerBoundingRect.height + "L" + this.designerView.containerBoundingRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
-            "M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + this.designerView.containerBoundingRect.width + " " + (r.y + r.height) + "L" + this.designerView.containerBoundingRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
+        let r = { x: rect.x - this.designerCanvas.containerBoundingRect.x, y: rect.y - this.designerCanvas.containerBoundingRect.y, width: rect.width, height: rect.height };
+        const pathPoints = "M0 0 L0 " + this.designerCanvas.containerBoundingRect.height + "L" + r.x + " " + this.designerCanvas.containerBoundingRect.height + "L" + r.x + " 0" + " L0 0" +
+            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + this.designerCanvas.containerBoundingRect.width + " " + r.y + "L" + this.designerCanvas.containerBoundingRect.width + " 0" + "L" + r.x + " 0" +
+            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + this.designerCanvas.containerBoundingRect.height + "L" + this.designerCanvas.containerBoundingRect.width + " " + this.designerCanvas.containerBoundingRect.height + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
+            "M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y + r.height) + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
         this._path.setAttribute("d", pathPoints);
     }
     dispose() {

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

@@ -13,8 +13,8 @@ export class GridExtension extends AbstractExtension {
         let xGap = 0;
         let yGap = 0;
         let rw = 0;
-        let xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
-        let yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
+        let xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
+        let yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
         let gridA = null;
         if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
             gridA = computedStyle.gridTemplateAreas.split('\"');

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

@@ -7,4 +7,5 @@ export interface IExtensionManager {
     removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
     refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
+    refreshAllExtensions(designItems: IDesignItem[]): any;
 }

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

@@ -14,7 +14,7 @@ export class InvisibleDivExtension extends AbstractExtension {
         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._rect = this._drawRect(itemRect.x - this.designerView.containerBoundingRect.x - left, itemRect.y - this.designerView.containerBoundingRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-invisible-div', this._rect);
+        this._rect = this._drawRect(itemRect.x - this.designerCanvas.containerBoundingRect.x - left, itemRect.y - this.designerCanvas.containerBoundingRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-invisible-div', this._rect);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -10,8 +10,8 @@ export class MouseOverExtension extends AbstractExtension {
     }
     refresh() {
         let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
-        const yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
+        const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
+        const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
         this._rect = this._drawRect(xOffset - offset, yOffset - offset, itemRect.width + offset + offset, itemRect.height + offset + offset, 'svg-hover', this._rect);
     }
     dispose() {

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

@@ -63,10 +63,10 @@ export class PathExtension extends AbstractExtension {
         }
     }
     _drawPathCircle(x, y) {
-        this._drawCircleOverlay(this._parentRect.x - this.designerView.containerBoundingRect.x + x, this._parentRect.y - this.designerView.containerBoundingRect.y + y, 3, 'svg-path');
+        this._drawCircle(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y, 3, 'svg-path');
     }
     _drawPathLine(x1, y1, x2, y2) {
-        this._drawLineOverlay(this._parentRect.x - this.designerView.containerBoundingRect.x + x1, this._parentRect.y - this.designerView.containerBoundingRect.y + y1, this._parentRect.x - this.designerView.containerBoundingRect.x + x2, this._parentRect.y - this.designerView.containerBoundingRect.y + y2, 'svg-path-line');
+        this._drawLine(this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x1, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y1, this._parentRect.x - this.designerCanvas.containerBoundingRect.x + x2, this._parentRect.y - this.designerCanvas.containerBoundingRect.y + y2, 'svg-path-line');
     }
     refresh() {
         this._removeAllOverlays();

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

@@ -13,8 +13,8 @@ export class PositionExtension extends AbstractExtension {
     refresh() {
         const computedStyle = getComputedStyle(this.extendedItem.element);
         let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const xOffset = itemRect.x - this.designerView.containerBoundingRect.x;
-        const yOffset = itemRect.y - this.designerView.containerBoundingRect.y;
+        const xOffset = itemRect.x - this.designerCanvas.containerBoundingRect.x;
+        const yOffset = itemRect.y - this.designerCanvas.containerBoundingRect.y;
         let left = Number.parseFloat(computedStyle.left.replace('px', ''));
         if (isNaN(left))
             left = 0;
@@ -34,10 +34,10 @@ export class PositionExtension extends AbstractExtension {
             tx = Number.parseFloat(transforms[4]);
             ty = Number.parseFloat(transforms[5].replace(')', ''));
         }
-        this._line1 = this._drawLineOverlay(xOffset - left - tx, yOffset + itemRect.height / 2, xOffset, yOffset + itemRect.height / 2, 'svg-position', this._line1);
-        this._line2 = this._drawLineOverlay(xOffset + itemRect.width / 2, yOffset - top - ty, xOffset + itemRect.width / 2, yOffset, 'svg-position', this._line2);
-        this._line3 = this._drawLineOverlay(xOffset + itemRect.width, yOffset + itemRect.height / 2, xOffset + itemRect.width + right + -1 * tx, yOffset + itemRect.height / 2, 'svg-position', this._line3);
-        this._line4 = this._drawLineOverlay(xOffset + itemRect.width / 2, yOffset + itemRect.height, xOffset + itemRect.width / 2, yOffset + itemRect.height + bottom + -1 * ty, 'svg-position', this._line4);
+        this._line1 = this._drawLine(xOffset - left - tx, yOffset + itemRect.height / 2, xOffset, yOffset + itemRect.height / 2, 'svg-position', this._line1);
+        this._line2 = this._drawLine(xOffset + itemRect.width / 2, yOffset - top - ty, xOffset + itemRect.width / 2, yOffset, 'svg-position', this._line2);
+        this._line3 = this._drawLine(xOffset + itemRect.width, yOffset + itemRect.height / 2, xOffset + itemRect.width + right + -1 * tx, yOffset + itemRect.height / 2, 'svg-position', this._line3);
+        this._line4 = this._drawLine(xOffset + itemRect.width / 2, yOffset + itemRect.height, xOffset + itemRect.width / 2, yOffset + itemRect.height + bottom + -1 * ty, 'svg-position', this._line4);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -12,8 +12,8 @@ export class PrimarySelectionDefaultExtension extends AbstractExtension {
     }
     refresh() {
         const boundRect = this.extendedItem.element.getBoundingClientRect();
-        this._rect = this._drawRect(boundRect.x - this.designerView.containerBoundingRect.x, boundRect.y - this.designerView.containerBoundingRect.y - 16, 60, 15, 'svg-primary-selection-move', this._rect);
-        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', boundRect.x - this.designerView.containerBoundingRect.x, boundRect.y - this.designerView.containerBoundingRect.y - 5, 'svg-text', this._text);
+        this._rect = this._drawRect(boundRect.x - this.designerCanvas.containerBoundingRect.x, boundRect.y - this.designerCanvas.containerBoundingRect.y - 16, 60, 15, 'svg-primary-selection-move', this._rect);
+        this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', boundRect.x - this.designerCanvas.containerBoundingRect.x, boundRect.y - this.designerCanvas.containerBoundingRect.y - 5, 'svg-text', this._text);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -21,14 +21,14 @@ export class ResizeExtension extends AbstractExtension {
     }
     refresh() {
         const rect = this.extendedItem.element.getBoundingClientRect();
-        this._circle1 = this._drawResizerOverlay(rect.x - this.designerView.containerBoundingRect.x, rect.y - this.designerView.containerBoundingRect.y, 'nw-resize', this._circle1);
-        this._circle2 = this._drawResizerOverlay(rect.x + (rect.width / 2) - this.designerView.containerBoundingRect.x, rect.y - this.designerView.containerBoundingRect.y, 'n-resize', this._circle2);
-        this._circle3 = this._drawResizerOverlay(rect.x + rect.width - this.designerView.containerBoundingRect.x, rect.y - this.designerView.containerBoundingRect.y, 'ne-resize', this._circle3);
-        this._circle4 = this._drawResizerOverlay(rect.x - this.designerView.containerBoundingRect.x, rect.y + rect.height - this.designerView.containerBoundingRect.y, 'sw-resize', this._circle4);
-        this._circle5 = this._drawResizerOverlay(rect.x + (rect.width / 2) - this.designerView.containerBoundingRect.x, rect.y + rect.height - this.designerView.containerBoundingRect.y, 's-resize', this._circle5);
-        this._circle6 = this._drawResizerOverlay(rect.x + rect.width - this.designerView.containerBoundingRect.x, rect.y + rect.height - this.designerView.containerBoundingRect.y, 'se-resize', this._circle6);
-        this._circle7 = this._drawResizerOverlay(rect.x - this.designerView.containerBoundingRect.x, rect.y + (rect.height / 2) - this.designerView.containerBoundingRect.y, 'w-resize', this._circle7);
-        this._circle8 = this._drawResizerOverlay(rect.x + rect.width - this.designerView.containerBoundingRect.x, rect.y + (rect.height / 2) - this.designerView.containerBoundingRect.y, 'e-resize', this._circle8);
+        this._circle1 = this._drawResizerOverlay(rect.x - this.designerCanvas.containerBoundingRect.x, rect.y - this.designerCanvas.containerBoundingRect.y, 'nw-resize', this._circle1);
+        this._circle2 = this._drawResizerOverlay(rect.x + (rect.width / 2) - this.designerCanvas.containerBoundingRect.x, rect.y - this.designerCanvas.containerBoundingRect.y, 'n-resize', this._circle2);
+        this._circle3 = this._drawResizerOverlay(rect.x + rect.width - this.designerCanvas.containerBoundingRect.x, rect.y - this.designerCanvas.containerBoundingRect.y, 'ne-resize', this._circle3);
+        this._circle4 = this._drawResizerOverlay(rect.x - this.designerCanvas.containerBoundingRect.x, rect.y + rect.height - this.designerCanvas.containerBoundingRect.y, 'sw-resize', this._circle4);
+        this._circle5 = this._drawResizerOverlay(rect.x + (rect.width / 2) - this.designerCanvas.containerBoundingRect.x, rect.y + rect.height - this.designerCanvas.containerBoundingRect.y, 's-resize', this._circle5);
+        this._circle6 = this._drawResizerOverlay(rect.x + rect.width - this.designerCanvas.containerBoundingRect.x, rect.y + rect.height - this.designerCanvas.containerBoundingRect.y, 'se-resize', this._circle6);
+        this._circle7 = this._drawResizerOverlay(rect.x - this.designerCanvas.containerBoundingRect.x, rect.y + (rect.height / 2) - this.designerCanvas.containerBoundingRect.y, 'w-resize', this._circle7);
+        this._circle8 = this._drawResizerOverlay(rect.x + rect.width - this.designerCanvas.containerBoundingRect.x, rect.y + (rect.height / 2) - this.designerCanvas.containerBoundingRect.y, 'e-resize', this._circle8);
         if (rect.width < 12) {
             this._circle2.style.display = 'none';
             this._circle5.style.display = 'none';
@@ -47,7 +47,7 @@ export class ResizeExtension extends AbstractExtension {
         }
     }
     _drawResizerOverlay(x, y, cursor, oldCircle) {
-        let circle = this._drawCircleOverlay(x, y, 3, 'svg-primary-resizer', oldCircle);
+        let circle = this._drawCircle(x, y, 3, 'svg-primary-resizer', oldCircle);
         if (!oldCircle) {
             circle.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, cursor));
             circle.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeResize(event, cursor));
@@ -58,24 +58,24 @@ export class ResizeExtension extends AbstractExtension {
     }
     _pointerActionTypeResize(event, actionMode = 'se-resize') {
         event.stopPropagation();
-        const currentPoint = this.designerView.getNormalizedEventCoordinates(event); //, this.extendedItem.element, event.type === 'pointerdown' ? null : this._initialPoint);
+        const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event); //, this.extendedItem.element, event.type === 'pointerdown' ? null : this._initialPoint);
         switch (event.type) {
             case EventNames.PointerDown:
                 event.target.setPointerCapture(event.pointerId);
                 this._initialPoint = currentPoint;
                 this._initialSizes = [];
                 this._actionModeStarted = actionMode;
-                for (const designItem of this.designerView.instanceServiceContainer.selectionService.selectedElements) {
+                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                     let rect = designItem.element.getBoundingClientRect();
                     this._initialSizes.push({ width: rect.width, height: rect.height });
                 }
-                if (this.designerView.alignOnSnap)
-                    this.designerView.snapLines.calculateSnaplines(this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                if (this.designerCanvas.alignOnSnap)
+                    this.designerCanvas.snapLines.calculateSnaplines(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
-                    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, { x: 0, y: 0 }, currentPoint, this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                    const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent));
+                    const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                     let trackX = diff.x - this._initialPoint.x;
                     let trackY = diff.y - this._initialPoint.y;
                     let i = 0;
@@ -84,7 +84,7 @@ export class ResizeExtension extends AbstractExtension {
                             this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
                             this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
                             if (this.resizeAllSelected) {
-                                for (const designItem of this.designerView.instanceServiceContainer.selectionService.selectedElements) {
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
                                         designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
@@ -95,7 +95,7 @@ export class ResizeExtension extends AbstractExtension {
                         case 's-resize':
                             this.extendedItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
                             if (this.resizeAllSelected) {
-                                for (const designItem of this.designerView.instanceServiceContainer.selectionService.selectedElements) {
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.height = this._initialSizes[i].height + trackY + 'px';
                                     }
@@ -105,7 +105,7 @@ export class ResizeExtension extends AbstractExtension {
                         case 'e-resize':
                             this.extendedItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
                             if (this.resizeAllSelected) {
-                                for (const designItem of this.designerView.instanceServiceContainer.selectionService.selectedElements) {
+                                for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
                                         designItem.element.style.width = this._initialSizes[i].width + trackX + 'px';
                                     }
@@ -114,16 +114,16 @@ export class ResizeExtension extends AbstractExtension {
                             break;
                         //for other resize modes we need a replacement
                     }
-                    this.extensionManager.refreshExtensions(this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                    this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 }
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                let cg = this.extendedItem.openGroup("Resize Elements", this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                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);
                 if (this.resizeAllSelected) {
-                    for (const designItem of this.designerView.instanceServiceContainer.selectionService.selectedElements) {
+                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                         if (designItem !== this.extendedItem) {
                             designItem.setStyle('width', designItem.element.style.width);
                             designItem.setStyle('height', designItem.element.style.height);

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

@@ -26,7 +26,7 @@ export class RotateExtension extends AbstractExtension {
         g.addEventListener(EventNames.PointerMove, event => this._pointerActionTypeRotate(event));
         g.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeRotate(event));
         g.setAttribute('class', 'svg-primary-rotate');
-        g.setAttribute('transform', 'translate(' + (itemRect.x - this.designerView.containerBoundingRect.x - 13) + ',' + (itemRect.y - this.designerView.containerBoundingRect.y - 8.5) + ')');
+        g.setAttribute('transform', 'translate(' + (itemRect.x - this.designerCanvas.containerBoundingRect.x - 13) + ',' + (itemRect.y - this.designerCanvas.containerBoundingRect.y - 8.5) + ')');
         this.overlayLayerView.addOverlay(g);
         this.overlays.push(g);
     }
@@ -48,10 +48,10 @@ export class RotateExtension extends AbstractExtension {
                     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
                     var degree = (radians * (180 / Math.PI) * -1) + 90;
                     img.css('-moz-transform', 'rotate(' + degree + 'deg)');*/
-                this.extensionManager.refreshExtensions(this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                this.extensionManager.refreshExtensions(this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 break;
             case EventNames.PointerUp:
-                let cg = this.extendedItem.openGroup("Rotate Elements", this.designerView.instanceServiceContainer.selectionService.selectedElements);
+                let cg = this.extendedItem.openGroup("Rotate Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 /*for (const designItem of this.instanceServiceContainer.selectionService.selectedElements) {
                   designItem.setStyle('width', (<HTMLElement>designItem.element).style.width);
                   designItem.setStyle('height', (<HTMLElement>designItem.element).style.height);

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

@@ -14,7 +14,7 @@ export class SelectionDefaultExtension extends AbstractExtension {
         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._rect = this._drawRect(itemRect.x - this.designerView.containerBoundingRect.x - left, itemRect.y - this.designerView.containerBoundingRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-selection', this._rect);
+        this._rect = this._drawRect(itemRect.x - this.designerCanvas.containerBoundingRect.x - left, itemRect.y - this.designerCanvas.containerBoundingRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-selection', this._rect);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -11,9 +11,9 @@ export class TransformOriginExtension extends AbstractExtension {
         const rect = this.extendedItem.element.getBoundingClientRect();
         const computed = getComputedStyle(this.extendedItem.element);
         const to = computed.transformOrigin.split(' ');
-        this._circle = this._drawCircleOverlay(rect.x - this.designerView.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')), rect.y - this.designerView.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')), 5, 'svg-transform-origin');
+        this._circle = this._drawCircle(rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')), rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')), 5, 'svg-transform-origin');
         this._circle.setAttribute('style', 'cursor: pointer');
-        this._circle2 = this._drawCircleOverlay(rect.x - this.designerView.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')), rect.y - this.designerView.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')), 1, 'svg-transform-origin');
+        this._circle2 = this._drawCircle(rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')), rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')), 1, 'svg-transform-origin');
         this._circle2.setAttribute('style', 'pointer-events: none');
         this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
@@ -33,10 +33,10 @@ export class TransformOriginExtension extends AbstractExtension {
                 if (this._startPos && event.buttons > 0) {
                     const dx = event.x - this._startPos.x;
                     const dy = event.y - this._startPos.y;
-                    this._circle.setAttribute('cx', (rect.x - this.designerView.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle.setAttribute('cy', (rect.y - this.designerView.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
-                    this._circle2.setAttribute('cx', (rect.x - this.designerView.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle2.setAttribute('cy', (rect.y - this.designerView.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
+                    this._circle.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
+                    this._circle.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
+                    this._circle2.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
+                    this._circle2.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
                 }
                 break;
             case EventNames.PointerUp:

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

@@ -1,22 +1,11 @@
 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;
+import { AbstractExtensionBase } from '../AbstractExtensionBase';
+export declare abstract class AbstractDesignerPointerExtension extends AbstractExtensionBase implements IDesignerPointerExtension {
     protected extendedItem: IDesignItem;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem?: IDesignItem);
-    abstract extend(event: PointerEvent): any;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
     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

@@ -1,82 +1,11 @@
+import { AbstractExtensionBase } from '../AbstractExtensionBase';
 //todo:
 //move draw functions to overlay layer
 //implement designerpointerextension
 //create ruler
-export class AbstractDesignerPointerExtension {
-    overlays = [];
-    overlayLayerView;
-    extensionManager;
-    designerView;
+export class AbstractDesignerPointerExtension extends AbstractExtensionBase {
     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;
+    constructor(extensionManager, designerCanvas) {
+        super(extensionManager, designerCanvas);
     }
 }

package/dist/elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension 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/CursorLinePointerExtension 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/CursorLinePointerExtension.d.ts

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

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/CursorRectanglePointerExtension copy.d.ts

@@ -1,7 +1,13 @@
 import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
 export declare class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
-    private _rect;
+    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

@@ -1,20 +1,27 @@
+import { css } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from '../OverlayLayer.js';
 import { AbstractDesignerPointerExtension } from './AbstractDesignerPointerExtension';
 export class CursorRectanglePointerExtension extends AbstractDesignerPointerExtension {
-    _rect;
+    _lineOffset = 5;
+    _lineLength = 10;
+    _line1;
+    _line2;
+    _line3;
+    _line4;
     extend(event) {
-        this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-        this.overlayLayerView.addOverlay(this._rect, OverlayLayer.Foregorund);
+        this.refresh(event);
     }
     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));
+        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/IDesignerPointerExtension.d.ts

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

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

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

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

@@ -47,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) {
@@ -85,5 +90,55 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         //@ts-ignore
         return this.shadowRoot.elementFromPoint(x, y);
     }
+    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;
+    }
+    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/index.d.ts

@@ -135,6 +135,11 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteC
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
+export type { IDesignerPointerExtension } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js";
+export type { IDesignerPointerExtensionProvider } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";
 export * from "./elements/widgets/demoView/demoView.js";
 export * from "./elements/widgets/paletteView/paletteElements.js";
 export * from "./elements/widgets/paletteView/paletteView.js";

package/dist/index.js

@@ -98,6 +98,9 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteC
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
+export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";
 export * from "./elements/widgets/demoView/demoView.js";
 export * from "./elements/widgets/paletteView/paletteElements.js";
 export * from "./elements/widgets/paletteView/paletteView.js";

package/package.json

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