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

package/dist/elements/controls/PlainScrollbar.js

@@ -142,7 +142,7 @@ class Widget {
         if (clippedNewValue == this.value) {
             return false;
         }
-        this.value = clippedNewValue;
+        this.value = isNaN(clippedNewValue) ? 0 : clippedNewValue;
         this.updateThumbPosition();
         return true;
     }
@@ -281,10 +281,16 @@ export class PlainScrollbar extends HTMLElement {
     widget;
     constructor() {
         super();
-        const value = parseFloat(this.getAttribute("value"));
         this.widget = new Widget(this);
+        const value = parseFloat(this.getAttribute("value"));
         if (!isNaN(value))
             this.widget.value = value;
+        if (this.hasOwnProperty('value')) {
+            let value = this.value;
+            delete this.value;
+            if (!isNaN(value))
+                this.widget.value = value;
+        }
     }
     /* @Override */ connectedCallback() {
         this.widget.connectedCallback();
@@ -343,121 +349,121 @@ export class PlainScrollbar extends HTMLElement {
 const EPS = 1E-9;
 const buttonSize = "var(--plain-scrollbar-button-size, 13px)";
 const buttonPath = '<path d="M -60 30 h 120 L 0 -30 z" stroke-width="0"/>';
-const scrollbarStyle = `
-    :host {
-       display: block;
-       contain: content;
-       background-color: #f8f8f8;
-       border-style: solid;
-       border-width: 1px;
-       border-color: #dddddd;
-    }
-    #root {
-       touch-action: none;
-       user-select: none;
-       box-sizing: border-box;
-       position: relative;
-       width: 100%;
-       height: 100%;
-    }
-    #trough {
-       position: absolute;
-    }
-    #root.vertical #trough {
-       width: 100%;
-       top: ${buttonSize};
-       bottom: ${buttonSize};
-    }
-    #root.horizontal #trough {
-       height: 100%;
-       left: ${buttonSize};
-       right: ${buttonSize};
-    }
-    #thumb {
-       box-sizing: border-box;
-       position: absolute;
-       width: 100%;
-       height: 100%;
-       background-color: var(--plain-scrollbar-thumb-background-color, #f0f0f0);
-       border-style: solid;
-       border-width: var(--plain-scrollbar-thumb-border-width, 1px);
-       border-color: var(--plain-scrollbar-thumb-border-color, #b8b8b8);
-       border-radius: var(--plain-scrollbar-thumb-border-radius, 4px);
-       transition: background-color 50ms linear;
-    }
-    #thumb:hover {
-       background-color: var(--plain-scrollbar-thumb-background-color-hover, #e0e0e0);
-    }
-    #thumb.active {
-       background-color: var(--plain-scrollbar-thumb-background-color-active, #c0c0c0);
-    }
-    #button1,
-    #button2 {
-       box-sizing: border-box;
-       position: absolute;
-       display: block;
-       fill: var(--plain-scrollbar-button-color, #606060);
-    }
-    #root.vertical #button1 {
-       top: 0;
-       width: 100%;
-       height: ${buttonSize};
-    }
-    #root.vertical #button2 {
-       bottom: 0;
-       width: 100%;
-       height: ${buttonSize};
-    }
-    #root.horizontal #button1 {
-       left: 0;
-       height: 100%;
-       width: ${buttonSize};
-    }
-    #root.horizontal #button2 {
-       right: 0;
-       height: 100%;
-       width: ${buttonSize};
-    }
-    #upArrow,
-    #downArrow,
-    #leftArrow,
-    #rightArrow {
-       display: none;
-       width: 100%;
-       height: 100%;
-    }
-    #root.vertical #upArrow,
-    #root.vertical #downArrow {
-       display: block;
-    }
-    #root.horizontal #leftArrow,
-    #root.horizontal #rightArrow {
-       display: block;
-    }
-    #button1:hover,
-    #button2:hover {
-       background-color: var(--plain-scrollbar-button-color-hover, #e0e0e0);
-    }
-    #button1.active,
-    #button2.active {
-       background-color: var(--plain-scrollbar-button-color-active, #c0c0c0);
-    }
+const scrollbarStyle = `
+    :host {
+       display: block;
+       contain: content;
+       background-color: #f8f8f8;
+       border-style: solid;
+       border-width: 1px;
+       border-color: #dddddd;
+    }
+    #root {
+       touch-action: none;
+       user-select: none;
+       box-sizing: border-box;
+       position: relative;
+       width: 100%;
+       height: 100%;
+    }
+    #trough {
+       position: absolute;
+    }
+    #root.vertical #trough {
+       width: 100%;
+       top: ${buttonSize};
+       bottom: ${buttonSize};
+    }
+    #root.horizontal #trough {
+       height: 100%;
+       left: ${buttonSize};
+       right: ${buttonSize};
+    }
+    #thumb {
+       box-sizing: border-box;
+       position: absolute;
+       width: 100%;
+       height: 100%;
+       background-color: var(--plain-scrollbar-thumb-background-color, #f0f0f0);
+       border-style: solid;
+       border-width: var(--plain-scrollbar-thumb-border-width, 1px);
+       border-color: var(--plain-scrollbar-thumb-border-color, #b8b8b8);
+       border-radius: var(--plain-scrollbar-thumb-border-radius, 4px);
+       transition: background-color 50ms linear;
+    }
+    #thumb:hover {
+       background-color: var(--plain-scrollbar-thumb-background-color-hover, #e0e0e0);
+    }
+    #thumb.active {
+       background-color: var(--plain-scrollbar-thumb-background-color-active, #c0c0c0);
+    }
+    #button1,
+    #button2 {
+       box-sizing: border-box;
+       position: absolute;
+       display: block;
+       fill: var(--plain-scrollbar-button-color, #606060);
+    }
+    #root.vertical #button1 {
+       top: 0;
+       width: 100%;
+       height: ${buttonSize};
+    }
+    #root.vertical #button2 {
+       bottom: 0;
+       width: 100%;
+       height: ${buttonSize};
+    }
+    #root.horizontal #button1 {
+       left: 0;
+       height: 100%;
+       width: ${buttonSize};
+    }
+    #root.horizontal #button2 {
+       right: 0;
+       height: 100%;
+       width: ${buttonSize};
+    }
+    #upArrow,
+    #downArrow,
+    #leftArrow,
+    #rightArrow {
+       display: none;
+       width: 100%;
+       height: 100%;
+    }
+    #root.vertical #upArrow,
+    #root.vertical #downArrow {
+       display: block;
+    }
+    #root.horizontal #leftArrow,
+    #root.horizontal #rightArrow {
+       display: block;
+    }
+    #button1:hover,
+    #button2:hover {
+       background-color: var(--plain-scrollbar-button-color-hover, #e0e0e0);
+    }
+    #button1.active,
+    #button2.active {
+       background-color: var(--plain-scrollbar-button-color-active, #c0c0c0);
+    }
     `;
-const scrollbarHtmlTemplate = `
-    <style>${scrollbarStyle}</style>
-    <div id="root" part="root">
-     <div id="button1" part="button button1">
-      <svg id="upArrow" part="arrow upArrow" viewBox="-100 -100 200 200">${buttonPath}</svg>
-      <svg id="leftArrow" part="arrow leftArrow" viewBox="-100 -100 200 200"><g transform="rotate(-90)">${buttonPath}</g></svg>
-     </div>
-     <div id="trough" part="trough">
-      <div id="thumb" part="thumb"></div>
-     </div>
-     <div id="button2" part="button button2">
-      <svg id="downArrow" part="arrow downArrow" viewBox="-100 -100 200 200"><g transform="rotate(180)">${buttonPath}</g></svg>
-      <svg id="rightArrow" part="arrow rightArrow" viewBox="-100 -100 200 200"><g transform="rotate(90)">${buttonPath}</g></svg>
-     </div>
-    </div>
+const scrollbarHtmlTemplate = `
+    <style>${scrollbarStyle}</style>
+    <div id="root" part="root">
+     <div id="button1" part="button button1">
+      <svg id="upArrow" part="arrow upArrow" viewBox="-100 -100 200 200">${buttonPath}</svg>
+      <svg id="leftArrow" part="arrow leftArrow" viewBox="-100 -100 200 200"><g transform="rotate(-90)">${buttonPath}</g></svg>
+     </div>
+     <div id="trough" part="trough">
+      <div id="thumb" part="thumb"></div>
+     </div>
+     <div id="button2" part="button button2">
+      <svg id="downArrow" part="arrow downArrow" viewBox="-100 -100 200 200"><g transform="rotate(180)">${buttonPath}</g></svg>
+      <svg id="rightArrow" part="arrow rightArrow" viewBox="-100 -100 200 200"><g transform="rotate(90)">${buttonPath}</g></svg>
+     </div>
+    </div>
     `;
 //------------------------------------------------------------------------------
 function formatOrientation(b) {

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

@@ -9,10 +9,12 @@ import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayerView } from "./overlayLayerView";
 import { IRect } from "../../../interfaces/IRect.js";
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { ISize } from "../../../interfaces/ISize.js";
 export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly serviceContainer: ServiceContainer;
     readonly instanceServiceContainer: InstanceServiceContainer;
     readonly containerBoundingRect: DOMRect;
+    readonly outerRect: DOMRect;
     readonly rootDesignItem: IDesignItem;
     readonly overlayLayer: OverlayLayerView;
     readonly extensionManager: IExtensionManager;
@@ -28,9 +30,12 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
+    getDesignSurfaceDimensions(): ISize;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
     getItemsBelowMouse(event: MouseEvent): Element[];
+    zoomTowardsPointer(point: IPoint, scalechange: number): void;
 }

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

@@ -13,6 +13,7 @@ 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;
@@ -30,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;
@@ -55,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);
@@ -67,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;
@@ -81,6 +87,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private onKeyUp;
     private onKeyDown;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
@@ -90,4 +97,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
     getItemsBelowMouse(event: MouseEvent): Element[];
+    zoomOntoRectangle(startpoint: IPoint, endPoint: IPoint, scalechange: number): void;
+    zoomTowardsPointer(point: IPoint, newZoom: number): void;
 }

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

@@ -39,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;
@@ -54,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;
@@ -135,10 +143,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     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;left: 0;user-select: none;">
+            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>
@@ -168,14 +175,23 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     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;
@@ -371,7 +387,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             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+')';
@@ -379,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();
     }
@@ -591,12 +608,18 @@ 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 / this.zoomFactor,
+            y: offsetOfOuterY - offsetOfCanvasY / this.zoomFactor
+        };
+    }
+    getViewportCoordinates(event) {
         return {
-            x: offsetOfOuterX - offsetOfCanvasX + offsetOfCanvasX - offsetOfCanvasX / this.zoomFactor,
-            y: offsetOfOuterY - offsetOfCanvasY + offsetOfCanvasY - offsetOfCanvasY / this.zoomFactor
+            x: (event.clientX - this.outerRect.x),
+            y: (event.clientY - this.outerRect.y)
         };
     }
     getNormalizedElementCoordinates(element) {
@@ -675,9 +698,20 @@ 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;
-            //@ts-ignore
+            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;
         }
@@ -701,6 +735,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer);
         this._canvas.style.cursor = tool.cursor;
         tool.pointerEventHandler(this, event, currentElement);
+        if (event.type == EventNames.PointerDown) {
+            this._lastPointerDownHandler = (evt) => tool.pointerEventHandler(this, evt, currentElement);
+        }
+        tool.pointerEventHandler(this, event, currentElement);
     }
     _fillCalculationrects() {
         this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
@@ -746,5 +784,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         return lstEl;
     }
+    zoomOntoRectangle(startpoint, endPoint, scalechange) {
+    }
+    zoomTowardsPointer(point, newZoom) {
+        const scaleChange = newZoom / this.zoomFactor;
+        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[];
+}