@node-projects/web-component-designer 0.0.84 → 0.0.88

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

@@ -1,32 +1,32 @@
-import { AbstractExtension } from "./AbstractExtension";
-export class GrayOutExtension extends AbstractExtension {
-    _path;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        if (!this._path) {
-            this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            this._path.setAttribute('class', 'svg-gray-out');
-            this.overlayLayerView.appendChild(this._path);
-            this.overlays.push(this._path);
-        }
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
-        this.drawGrayOut(itemRect);
-    }
-    drawGrayOut(rect) {
-        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() {
-        this._removeAllOverlays();
-        this._path = null;
-    }
-}
+import { AbstractExtension } from "./AbstractExtension";
+export class GrayOutExtension extends AbstractExtension {
+    _path;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        if (!this._path) {
+            this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            this._path.setAttribute('class', 'svg-gray-out');
+            this.overlayLayerView.appendChild(this._path);
+            this.overlays.push(this._path);
+        }
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        this.drawGrayOut(itemRect);
+    }
+    drawGrayOut(rect) {
+        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() {
+        this._removeAllOverlays();
+        this._path = null;
+    }
+}

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

@@ -1,10 +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 GrayOutExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GrayOutExtensionProvider 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/GrayOutExtensionProvider.js

@@ -1,13 +1,13 @@
-import { GrayOutExtension } from "./GrayOutExtension";
-import { css } from "@node-projects/base-custom-webcomponent";
-export class GrayOutExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new GrayOutExtension(extensionManager, designerView, designItem);
-    }
+import { GrayOutExtension } from "./GrayOutExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class GrayOutExtensionProvider {
+    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.d.ts

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

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

@@ -1,30 +1,30 @@
-import { CalculateGridInformation } from "../../../helper/GridHelper.js";
-import { AbstractExtension } from "./AbstractExtension";
-import { OverlayLayer } from "./OverlayLayer.js";
-export class GridExtension extends AbstractExtension {
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        const gridInformation = CalculateGridInformation(this.extendedItem);
-        for (let gap of gridInformation.gaps) {
-            this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', null, OverlayLayer.Background);
-        }
-        for (let cellRow of gridInformation.cells) {
-            for (let cell of cellRow) {
-                this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', null, OverlayLayer.Background);
-                if (cell.name) {
-                    const text = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', null, OverlayLayer.Background);
-                    text.setAttribute("dominant-baseline", "hanging");
-                }
-            }
-        }
-    }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { CalculateGridInformation } from "../../../helper/GridHelper.js";
+import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
+export class GridExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        const gridInformation = CalculateGridInformation(this.extendedItem);
+        for (let gap of gridInformation.gaps) {
+            this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', null, OverlayLayer.Background);
+        }
+        for (let cellRow of gridInformation.cells) {
+            for (let cell of cellRow) {
+                this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', null, OverlayLayer.Background);
+                if (cell.name) {
+                    const text = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', null, OverlayLayer.Background);
+                    text.setAttribute("dominant-baseline", "hanging");
+                }
+            }
+        }
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,6 +1,6 @@
-import { DesignerView } from "../designerView.js";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
-export declare class GridExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
-    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
-}
+import { DesignerView } from "../designerView.js";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignViewConfigButtonsProvider } from "../IDesignViewConfigButtonsProvider.js";
+export declare class GridExtensionDesignViewConfigButtons implements IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

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

@@ -1,21 +1,21 @@
-import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
-export class GridExtensionDesignViewConfigButtons {
-    provideButtons(designerView, designerCanvas) {
-        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
-        const btn = document.createElement('div');
-        btn.innerText = 'G';
-        btn.title = 'show grid overlay';
-        btn.className = 'toolbar-control';
-        if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
-            btn.classList.add('selected');
-        btn.onclick = () => {
-            const val = extensionOptions[gridExtensionShowOverlayOptionName];
-            extensionOptions[gridExtensionShowOverlayOptionName] = val === false ? true : false;
-            if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
-                btn.classList.add('selected');
-            else
-                btn.classList.remove('selected');
-        };
-        return [btn];
-    }
-}
+import { gridExtensionShowOverlayOptionName } from "./GridExtensionProvider.js";
+export class GridExtensionDesignViewConfigButtons {
+    provideButtons(designerView, designerCanvas) {
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        const btn = document.createElement('div');
+        btn.innerText = 'G';
+        btn.title = 'show grid overlay';
+        btn.className = 'toolbar-control';
+        if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[gridExtensionShowOverlayOptionName];
+            extensionOptions[gridExtensionShowOverlayOptionName] = val === false ? true : false;
+            if (extensionOptions[gridExtensionShowOverlayOptionName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        return [btn];
+    }
+}

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

@@ -1,11 +1,11 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare const gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
-export declare class GridExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare const gridExtensionShowOverlayOptionName = "gridExtensionShowOverlay";
+export declare class GridExtensionProvider 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/GridExtensionProvider.js

@@ -1,18 +1,18 @@
-import { GridExtension } from './GridExtension';
-import { css } from "@node-projects/base-custom-webcomponent";
-export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
-export class GridExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (getComputedStyle(designItem.element).display == 'grid')
-            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new GridExtension(extensionManager, designerView, designItem);
-    }
+import { GridExtension } from './GridExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
+export class GridExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (getComputedStyle(designItem.element).display == 'grid')
+            return designerView.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
+        return false;
+    }
+    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/IDesignerExtension.d.ts

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

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

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

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

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

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

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

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

@@ -1,11 +1,11 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { ExtensionType } from './ExtensionType';
-export interface IExtensionManager {
-    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): any;
-    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): any;
-    removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
-    removeExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
-    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
-    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType): any;
-    refreshAllExtensions(designItems: IDesignItem[]): any;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { ExtensionType } from './ExtensionType';
+export interface IExtensionManager {
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, recursive?: boolean): any;
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, recursive?: boolean): any;
+    removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): any;
+    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/IExtensionManger.js

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

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

@@ -1,11 +1,11 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from './AbstractExtension';
-import { IExtensionManager } from "./IExtensionManger";
-export declare class IframeExtension extends AbstractExtension {
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    _pointerEvent(event: PointerEvent): void;
-    refresh(): void;
-    dispose(): void;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class IframeExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    _pointerEvent(event: PointerEvent): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -1,46 +1,46 @@
-import { AbstractExtension } from './AbstractExtension';
-export class IframeExtension extends AbstractExtension {
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        // forward events to designer, so iframe is selectable via click
-        let iframe = this.extendedItem.element;
-        iframe.contentWindow.addEventListener('pointerdown', (e) => this._pointerEvent(e), { capture: true });
-        iframe.contentWindow.addEventListener('pointermove', (e) => this._pointerEvent(e), { capture: true });
-        iframe.contentWindow.addEventListener('pointerup', (e) => this._pointerEvent(e), { capture: true });
-    }
-    _pointerEvent(event) {
-        const rect = this.extendedItem.element.getBoundingClientRect();
-        const that = this;
-        const handler = {
-            get(target, property) {
-                switch (property) {
-                    case 'composedPath':
-                        return () => [that.extendedItem.element];
-                    case 'x':
-                    case 'clientX':
-                    case 'offsetX':
-                    case 'pageX':
-                        return target[property] + rect.x;
-                    case 'y':
-                    case 'clientY':
-                    case 'offsetY':
-                    case 'pageY':
-                        return target[property] + rect.y;
-                }
-                return target[property];
-            }
-        };
-        event.preventDefault();
-        event.stopPropagation();
-        const proxy = new Proxy(event, handler);
-        //@ts-ignore
-        this.designerCanvas._pointerEventHandlerBound(proxy);
-    }
-    refresh() {
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { AbstractExtension } from './AbstractExtension';
+export class IframeExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        // forward events to designer, so iframe is selectable via click
+        let iframe = this.extendedItem.element;
+        iframe.contentWindow.addEventListener('pointerdown', (e) => this._pointerEvent(e), { capture: true });
+        iframe.contentWindow.addEventListener('pointermove', (e) => this._pointerEvent(e), { capture: true });
+        iframe.contentWindow.addEventListener('pointerup', (e) => this._pointerEvent(e), { capture: true });
+    }
+    _pointerEvent(event) {
+        const rect = this.extendedItem.element.getBoundingClientRect();
+        const that = this;
+        const handler = {
+            get(target, property) {
+                switch (property) {
+                    case 'composedPath':
+                        return () => [that.extendedItem.element];
+                    case 'x':
+                    case 'clientX':
+                    case 'offsetX':
+                    case 'pageX':
+                        return target[property] + rect.x;
+                    case 'y':
+                    case 'clientY':
+                    case 'offsetY':
+                    case 'pageY':
+                        return target[property] + rect.y;
+                }
+                return target[property];
+            }
+        };
+        event.preventDefault();
+        event.stopPropagation();
+        const proxy = new Proxy(event, handler);
+        //@ts-ignore
+        this.designerCanvas._pointerEventHandlerBound(proxy);
+    }
+    refresh() {
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,9 +1,9 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class IframeExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class IframeExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

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

@@ -1,9 +1,9 @@
-import { IframeExtension } from "./IframeExtension.js";
-export class IframeExtensionProvider {
-    shouldExtend(extensionManager, designerCanvas, designItem) {
-        return designItem.name == 'iframe';
-    }
-    getExtension(extensionManager, designerCanvas, designItem) {
-        return new IframeExtension(extensionManager, designerCanvas, designItem);
-    }
-}
+import { IframeExtension } from "./IframeExtension.js";
+export class IframeExtensionProvider {
+    shouldExtend(extensionManager, designerCanvas, designItem) {
+        return designItem.name == 'iframe';
+    }
+    getExtension(extensionManager, designerCanvas, designItem) {
+        return new IframeExtension(extensionManager, designerCanvas, designItem);
+    }
+}

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

@@ -1,11 +1,11 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from './AbstractExtension';
-import { IExtensionManager } from "./IExtensionManger";
-export declare class InvisibleDivExtension extends AbstractExtension {
-    private _rect;
-    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
-    dispose(): void;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class InvisibleDivExtension extends AbstractExtension {
+    private _rect;
+    constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -1,22 +1,23 @@
-import { AbstractExtension } from './AbstractExtension';
-export class InvisibleDivExtension extends AbstractExtension {
-    _rect;
-    constructor(extensionManager, designerCanvas, extendedItem) {
-        super(extensionManager, designerCanvas, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        const itemRect = this.extendedItem.element.getBoundingClientRect();
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        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._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();
-    }
-}
+import { AbstractExtension } from './AbstractExtension';
+import { OverlayLayer } from "./OverlayLayer.js";
+export class InvisibleDivExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerCanvas, extendedItem) {
+        super(extensionManager, designerCanvas, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        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._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-invisible-div', this._rect, OverlayLayer.Background);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}