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

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

@@ -1,6 +1,8 @@
 import { AbstractExtension } from "./AbstractExtension";
 import { OverlayLayer } from "./OverlayLayer.js";
 export class AltToEnterContainerExtension extends AbstractExtension {
+    _text;
+    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -9,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/AltToEnterContainerExtensionProvider.js

@@ -1,16 +1,14 @@
 import { AltToEnterContainerExtension } from './AltToEnterContainerExtension';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class AltToEnterContainerExtensionProvider {
-    constructor() {
-        this.style = css `
-    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
-    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
-  `;
-    }
     shouldExtend(extensionManager, designerView, designItem) {
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
     }
+    style = css `
+    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
+    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
+  `;
 }

package/dist/elements/widgets/designerView/extensions/CanvasExtension copy.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/CanvasExtension copy.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/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/CanvasExtensionProvider 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/CanvasExtensionProvider 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/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);
@@ -18,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);
@@ -39,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() {
@@ -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.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

@@ -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));
@@ -199,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

@@ -1,5 +1,6 @@
 import { AbstractExtension } from "./AbstractExtension";
 export class GrayOutExtension extends AbstractExtension {
+    _path;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -17,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/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/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/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/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

@@ -1,5 +1,6 @@
 import { AbstractExtension } from './AbstractExtension';
 export class InvisibleDivExtension extends AbstractExtension {
+    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -13,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/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);
     }
@@ -9,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/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);
     }
@@ -59,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/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;
+}