@node-projects/web-component-designer 0.0.86 → 0.0.89

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

@@ -13,11 +13,13 @@ import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayer } from "./extensions/OverlayLayer";
 import { OverlayLayerView } from './overlayLayerView';
 import { IRect } from "../../../interfaces/IRect.js";
+import { ISize } from "../../../interfaces/ISize.js";
 export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
     containerBoundingRect: DOMRect;
     outerRect: DOMRect;
+    clickOverlay: HTMLDivElement;
     gridSize: number;
     alignOnGrid: boolean;
     alignOnSnap: boolean;
@@ -29,12 +31,16 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _zoomFactor;
     private _scaleFactor;
     private _canvasOffset;
+    private _lastPointerDownHandler;
     get zoomFactor(): number;
     set zoomFactor(value: number);
     get scaleFactor(): number;
     get canvasOffset(): IPoint;
     set canvasOffset(value: IPoint);
+    get canvasOffsetUnzoomed(): IPoint;
+    set canvasOffsetUnzoomed(value: IPoint);
     onContentChanged: TypedEvent<void>;
+    onZoomFactorChanged: TypedEvent<number>;
     private _canvas;
     private _canvasContainer;
     private _outercanvas2;
@@ -54,6 +60,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     set designerWidth(value: string);
     get designerHeight(): string;
     set designerHeight(value: string);
+    getDesignSurfaceDimensions(): ISize;
     get designerOffsetWidth(): number;
     get designerOffsetHeight(): number;
     set additionalStyle(value: CSSStyleSheet);
@@ -66,7 +73,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     initialize(serviceContainer: ServiceContainer): void;
     elementFromPoint(x: number, y: number): Element;
     connectedCallback(): void;
-    zoomFactorChanged(): void;
+    private _zoomFactorChanged;
     _updateTransform(): void;
     setDesignItems(designItems: IDesignItem[]): void;
     addDesignItems(designItems: IDesignItem[]): void;
@@ -80,13 +87,18 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private onKeyUp;
     private onKeyDown;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    convertEventToViewPortCoordinates(point: IPoint): IPoint;
+    getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     _rect: SVGRectElement;
     private _pointerEventHandler;
+    removeCurrentPointerEventHandler(): void;
     private _fillCalculationrects;
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
     getItemsBelowMouse(event: MouseEvent): Element[];
+    zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
+    zoomTowardsPoint(canvasPoint: IPoint, newZoom: number): void;
 }

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

@@ -26,6 +26,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     instanceServiceContainer;
     containerBoundingRect;
     outerRect;
+    clickOverlay;
     // IPlacementView
     gridSize = 10;
     alignOnGrid = false;
@@ -38,12 +39,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
     _canvasOffset = { x: 0, y: 0 };
+    _lastPointerDownHandler;
     get zoomFactor() {
         return this._zoomFactor;
     }
     set zoomFactor(value) {
         this._zoomFactor = value;
-        this.zoomFactorChanged();
+        this._zoomFactorChanged();
     }
     get scaleFactor() {
         return this._scaleFactor;
@@ -53,9 +55,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     set canvasOffset(value) {
         this._canvasOffset = value;
-        this.zoomFactorChanged();
+        this._zoomFactorChanged();
+    }
+    get canvasOffsetUnzoomed() {
+        return { x: this._canvasOffset.x * this.zoomFactor, y: this._canvasOffset.y * this.zoomFactor };
+    }
+    set canvasOffsetUnzoomed(value) {
+        this.canvasOffset = { x: value.x / this.zoomFactor, y: value.y / this.zoomFactor };
     }
     onContentChanged = new TypedEvent();
+    onZoomFactorChanged = new TypedEvent();
     // Private Variables
     _canvas;
     _canvasContainer;
@@ -119,23 +128,30 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       user-select: none;
       -webkit-user-select: none;
     }
+
+    #node-projects-designer-canvas-clickOverlay {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+    }
     
-    #transformHelper {
+    #node-projects-designer-canvas-transformHelper {
       height: 0;
       width: 0;
     }`;
     static template = html `
     <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
       <div style="width: 100%;height: 100%;">
-        <div id="node-projects-designer-canvas-outercanvas2"
-          style="width:100%;height:100%;position:relative;">
+        <div id="node-projects-designer-canvas-outercanvas2" style="width:100%;height:100%;position:relative;">
           <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="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
+            style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;user-select: none;">
+            <div id="node-projects-designer-canvas-canvas" part="canvas"></div>
           </div>
         </div>
+        <div id="node-projects-designer-canvas-clickOverlay" tabindex="0" style="pointer-events: auto;"></div>
       </div>
-      <div id="transformHelper"></div>
+      <div id="node-projects-designer-canvas-transformHelper"></div>
     </div>`;
     extensionManager;
     _pointerextensions;
@@ -145,27 +161,37 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
-        this.transformHelperElement = this._getDomElement('transformHelper');
+        this.clickOverlay = this._getDomElement('node-projects-designer-canvas-clickOverlay');
+        this.transformHelperElement = this._getDomElement('node-projects-designer-canvas-transformHelper');
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
         this._onDblClickBound = this._onDblClick.bind(this);
         this._onContextMenuBound = this._onContextMenu.bind(this);
         this._pointerEventHandlerBound = this._pointerEventHandler.bind(this);
-        this._canvas.oncontextmenu = this._onContextMenuBound;
+        this.clickOverlay.oncontextmenu = this._onContextMenuBound;
     }
     get designerWidth() {
         return this._canvasContainer.style.width;
     }
     set designerWidth(value) {
         this._canvasContainer.style.width = value;
-        this.zoomFactorChanged();
+        this._zoomFactorChanged();
     }
     get designerHeight() {
         return this._canvasContainer.style.height;
     }
     set designerHeight(value) {
         this._canvasContainer.style.height = value;
-        this.zoomFactorChanged();
+        this._zoomFactorChanged();
+    }
+    getDesignSurfaceDimensions() {
+        let ret = { width: null, height: null };
+        const cs = getComputedStyle(this._canvasContainer);
+        if (this._canvasContainer.style.width)
+            ret.width = parseFloat(cs.width);
+        if (this._canvasContainer.style.height)
+            ret.height = parseFloat(cs.height);
+        return ret;
     }
     get designerOffsetWidth() {
         return this._canvasContainer.offsetWidth;
@@ -338,25 +364,30 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     elementFromPoint(x, y) {
+        this.clickOverlay.style.pointerEvents = 'none';
         //@ts-ignore
-        return this.shadowRoot.elementFromPoint(x, y);
+        let element = this.shadowRoot.elementFromPoint(x, y);
+        if (element === this.clickOverlay)
+            element = this._canvas;
+        this.clickOverlay.style.pointerEvents = 'auto';
+        return element;
     }
     connectedCallback() {
         if (!this._firstConnect) {
             this._firstConnect = true;
-            this._outercanvas2.addEventListener(EventNames.PointerDown, this._pointerEventHandlerBound);
-            this._outercanvas2.addEventListener(EventNames.PointerMove, this._pointerEventHandlerBound);
-            this._outercanvas2.addEventListener(EventNames.PointerUp, this._pointerEventHandlerBound);
-            this._outercanvas2.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
-            this._outercanvas2.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
-            this._outercanvas2.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
-            this._outercanvas2.addEventListener(EventNames.Drop, event => this._onDrop(event));
-            this._canvas.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
-            this._canvas.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
-            this._canvas.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
+            this.clickOverlay.addEventListener(EventNames.PointerDown, this._pointerEventHandlerBound);
+            this.clickOverlay.addEventListener(EventNames.PointerMove, this._pointerEventHandlerBound);
+            this.clickOverlay.addEventListener(EventNames.PointerUp, this._pointerEventHandlerBound);
+            this.clickOverlay.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
+            this.clickOverlay.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
+            this.clickOverlay.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
+            this.clickOverlay.addEventListener(EventNames.Drop, event => this._onDrop(event));
+            this.clickOverlay.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
+            this.clickOverlay.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
+            this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
         }
     }
-    zoomFactorChanged() {
+    _zoomFactorChanged() {
         //a@ts-ignore
         //this._canvasContainer.style.zoom = <any>this._zoomFactor;
         //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+') translate(' + this._translate.x + ', '+this._translate.y+')';
@@ -364,10 +395,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer.style.bottom = this._outercanvas2.offsetHeight >= this._canvasContainer.offsetHeight ? '0' : '';
         this._canvasContainer.style.right = this._outercanvas2.offsetWidth >= this._canvasContainer.offsetWidth ? '0' : '';
         this._updateTransform();
+        this.onZoomFactorChanged.emit(this._zoomFactor);
     }
     _updateTransform() {
         this._scaleFactor = this._zoomFactor;
-        this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + this._canvasOffset.x + 'px, ' + this._canvasOffset.y + 'px)';
+        this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + (isNaN(this._canvasOffset.x) ? '0' : this._canvasOffset.x) + 'px, ' + (isNaN(this._canvasOffset.y) ? '0' : this._canvasOffset.y) + 'px)';
         this._canvasContainer.style.transformOrigin = '0 0';
         this.snapLines.clearSnaplines();
     }
@@ -392,9 +424,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 intializationService.init(di);
         }
         this.snapLines.clearSnaplines();
-        const prepService = this.serviceContainer.prepareElementsForDesignerService;
-        if (prepService)
-            requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.rootDesignItem));
     }
     _onDragEnter(event) {
         this._fillCalculationrects();
@@ -517,17 +546,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     onKeyUp(event) {
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
-        switch (event.key) {
-            case 'ArrowUp':
-                //this._resetPointerEventsForClickThrough();
-                break;
-        }
         event.preventDefault();
     }
     onKeyDown(event) {
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
-        //TODO: keyboard events maybe should also be handeled by tools 
         if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey)
             this.executeCommand({ type: CommandType.undo });
         else if ((event.ctrlKey || event.metaKey) && event.key === 'z' && event.shiftKey)
@@ -585,12 +608,26 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     getNormalizedEventCoordinates(event) {
         const offsetOfOuterX = (event.clientX - this.outerRect.x) / this.zoomFactor;
-        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x / this.zoomFactor * this._scaleFactor;
+        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x;
         const offsetOfOuterY = (event.clientY - this.outerRect.y) / this.zoomFactor;
-        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y / this.zoomFactor * this._scaleFactor;
+        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y;
         return {
-            x: offsetOfOuterX - offsetOfCanvasX + offsetOfCanvasX - offsetOfCanvasX / this.zoomFactor,
-            y: offsetOfOuterY - offsetOfCanvasY + offsetOfCanvasY - offsetOfCanvasY / this.zoomFactor
+            x: offsetOfOuterX - offsetOfCanvasX / this.zoomFactor,
+            y: offsetOfOuterY - offsetOfCanvasY / this.zoomFactor
+        };
+    }
+    convertEventToViewPortCoordinates(point) {
+        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x;
+        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y;
+        return {
+            x: (point.x + offsetOfCanvasX / this.zoomFactor) * this.zoomFactor,
+            y: (point.y + offsetOfCanvasY / this.zoomFactor) * this.zoomFactor
+        };
+    }
+    getViewportCoordinates(event) {
+        return {
+            x: (event.clientX - this.outerRect.x),
+            y: (event.clientY - this.outerRect.y)
         };
     }
     getNormalizedElementCoordinates(element) {
@@ -605,6 +642,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     getElementAtPoint(point, ignoreElementCallback) {
         let backupPEventsMap = new Map();
         let currentElement = this.elementFromPoint(point.x, point.y);
+        this.clickOverlay.style.pointerEvents = 'none';
         let lastElement = null;
         try {
             while (currentElement != null) {
@@ -641,6 +679,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             for (let e of backupPEventsMap.entries()) {
                 e[0].style.pointerEvents = e[1];
             }
+            this.clickOverlay.style.pointerEvents = 'auto';
         }
         return currentElement;
     }
@@ -667,6 +706,24 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
           if (!DesignerCanvas.hasOrIsParent(currentElement, this._canvas))
             return;
         }*/
+        if (this._lastPointerDownHandler) {
+            try {
+                this._lastPointerDownHandler(event);
+            }
+            catch { }
+            if (event.type == EventNames.PointerUp)
+                this._lastPointerDownHandler = null;
+            return;
+        }
+        if (currentElement instanceof SVGGraphicsElement && currentElement?.ownerSVGElement?.parentNode?.host == this.overlayLayer) {
+            this.clickOverlay.style.cursor = getComputedStyle(currentElement).cursor;
+            if (event.type == EventNames.PointerDown) {
+                this._lastPointerDownHandler = (evt) => currentElement.dispatchEvent(new evt.constructor(evt.type, evt));
+            }
+            currentElement.dispatchEvent(new event.constructor(event.type, event));
+            return;
+        }
+        this.clickOverlay.style.cursor = this._canvas.style.cursor;
         //TODO: remove duplication when tool refactoring starts
         //this._fillCalculationrects();
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, this.serviceContainer, this.instanceServiceContainer);
@@ -685,8 +742,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._fillCalculationrects();
         let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer);
         this._canvas.style.cursor = tool.cursor;
+        if (event.type == EventNames.PointerDown) {
+            this._lastPointerDownHandler = (evt) => tool.pointerEventHandler(this, evt, currentElement);
+        }
         tool.pointerEventHandler(this, event, currentElement);
     }
+    removeCurrentPointerEventHandler() {
+        this._lastPointerDownHandler = null;
+    }
     _fillCalculationrects() {
         this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
         this.outerRect = this._outercanvas2.getBoundingClientRect();
@@ -702,12 +765,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         //search for containers below mouse cursor.
         //to do this, we need to disable pointer events for each in a loop and search wich element is there
         let backupPEventsMap = new Map();
+        this.clickOverlay.style.pointerEvents = 'none';
         try {
             let el = this.elementFromPoint(event.x, event.y);
             backupPEventsMap.set(el, el.style.pointerEvents);
             el.style.pointerEvents = 'none';
             if (el !== this.rootDesignItem.element) {
-                el = this.elementFromPoint(event.x, event.y);
                 while (el != null) {
                     if (el === this.rootDesignItem.element)
                         break;
@@ -727,8 +790,35 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             for (let e of backupPEventsMap.entries()) {
                 e[0].style.pointerEvents = e[1];
             }
+            this.clickOverlay.style.pointerEvents = 'auto';
         }
         return lstEl;
     }
+    zoomOntoRectangle(startPoint, endPoint) {
+        let rect = {
+            x: startPoint.x < endPoint.x ? startPoint.x : endPoint.x,
+            y: startPoint.y < endPoint.y ? startPoint.y : endPoint.y,
+            width: Math.abs(startPoint.x - endPoint.x),
+            height: Math.abs(startPoint.y - endPoint.y),
+        };
+        let zFactorWidth = this.outerRect.width / rect.width;
+        let zFactorHeight = this.outerRect.height / rect.height;
+        let zoomFactor = zFactorWidth >= zFactorHeight ? zFactorHeight : zFactorWidth;
+        let rectCenter = {
+            x: (rect.width / 2) + rect.x,
+            y: (rect.height / 2) + rect.y
+        };
+        this.zoomTowardsPoint(rectCenter, zoomFactor);
+    }
+    zoomTowardsPoint(canvasPoint, newZoom) {
+        const scaleChange = newZoom / this.zoomFactor;
+        const point = this.convertEventToViewPortCoordinates(canvasPoint);
+        const newCanvasOffset = {
+            x: -(point.x * (scaleChange - 1) + scaleChange * -this.canvasOffsetUnzoomed.x),
+            y: -(point.y * (scaleChange - 1) + scaleChange * -this.canvasOffsetUnzoomed.y)
+        };
+        this.zoomFactor = newZoom;
+        this.canvasOffsetUnzoomed = newCanvasOffset;
+    }
 }
 customElements.define('node-projects-designer-canvas', DesignerCanvas);

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

@@ -0,0 +1,92 @@
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
+import { IDesignItem } from '../../item/IDesignItem';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { IDesignerCanvas } from './IDesignerCanvas';
+import { Snaplines } from './Snaplines';
+import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
+import { IPlacementView } from './IPlacementView';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
+import { IUiCommand } from '../../../commandHandling/IUiCommand';
+import { IExtensionManager } from "./extensions/IExtensionManger";
+import { IPoint } from "../../../interfaces/IPoint";
+import { OverlayLayer } from "./extensions/OverlayLayer";
+import { OverlayLayerView } from './overlayLayerView';
+import { IRect } from "../../../interfaces/IRect.js";
+export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
+    serviceContainer: ServiceContainer;
+    instanceServiceContainer: InstanceServiceContainer;
+    containerBoundingRect: DOMRect;
+    outerRect: DOMRect;
+    gridSize: number;
+    alignOnGrid: boolean;
+    alignOnSnap: boolean;
+    snapLines: Snaplines;
+    overlayLayer: OverlayLayerView;
+    rootDesignItem: IDesignItem;
+    eatEvents: Element;
+    transformHelperElement: HTMLDivElement;
+    private _zoomFactor;
+    private _scaleFactor;
+    private _canvasOffset;
+    get zoomFactor(): number;
+    set zoomFactor(value: number);
+    get scaleFactor(): number;
+    get canvasOffset(): IPoint;
+    set canvasOffset(value: IPoint);
+    onContentChanged: TypedEvent<void>;
+    private _canvas;
+    private _canvasContainer;
+    private _outercanvas2;
+    private _lastHoverDesignItem;
+    private _onContextMenuBound;
+    private _pointerEventHandlerBound;
+    private _firstConnect;
+    private _onKeyDownBound;
+    private _onKeyUpBound;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    extensionManager: IExtensionManager;
+    private _pointerextensions;
+    private _onDblClickBound;
+    constructor();
+    get designerWidth(): string;
+    set designerWidth(value: string);
+    get designerHeight(): string;
+    set designerHeight(value: string);
+    get designerOffsetWidth(): number;
+    get designerOffsetHeight(): number;
+    set additionalStyle(value: CSSStyleSheet);
+    executeCommand(command: IUiCommand): Promise<void>;
+    canExecuteCommand(command: IUiCommand): boolean;
+    handleSelectAll(): void;
+    handleCopyCommand(): Promise<void>;
+    handlePasteCommand(): Promise<void>;
+    handleDeleteCommand(): void;
+    initialize(serviceContainer: ServiceContainer): void;
+    elementFromPoint(x: number, y: number): Element;
+    connectedCallback(): void;
+    zoomFactorChanged(): void;
+    _updateTransform(): void;
+    setDesignItems(designItems: IDesignItem[]): void;
+    addDesignItems(designItems: IDesignItem[]): void;
+    private _onDragEnter;
+    private _onDragLeave;
+    private _onDragOver;
+    private _onDrop;
+    private _onContextMenu;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
+    private _onDblClick;
+    private onKeyUp;
+    private onKeyDown;
+    getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getNormalizedElementCoordinates(element: Element): IRect;
+    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
+    getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
+    _rect: SVGRectElement;
+    private _pointerEventHandler;
+    private _fillCalculationrects;
+    addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
+    removeOverlay(element: SVGGraphicsElement): void;
+    getItemsBelowMouse(event: MouseEvent): Element[];
+}