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

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/controls/SimpleSplitView.js

@@ -8,7 +8,7 @@ export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
       position: relative;
       height: 100%;
       width: 100%;
-      grid-template-rows: calc(var(--split) * 1%) 5px calc((100 - var(--split)) * 1%);
+      grid-template-rows: calc(var(--split) * 1%) 5px calc(((100 - var(--split)) * 1%) - 5px);
       display: grid;
       align-items: center;
     }

package/dist/elements/documentContainer.js

@@ -62,9 +62,11 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
         this.codeView = new serviceContainer.config.codeViewWidget();
         this.codeView.slot = 'bottom';
+        this.codeView.style.position = 'relative';
         this._codeDiv = document.createElement("div");
         this._tabControl.appendChild(this._codeDiv);
         this._codeDiv.title = 'Code';
+        this._codeDiv.style.position = 'relative';
         this._codeDiv.appendChild(this.codeView);
         this.codeView.onTextChanged.on(text => {
             if (!this._disableChangeNotificationDesigner) {

package/dist/elements/helper/ElementHelper.d.ts

@@ -7,3 +7,4 @@ export declare enum ElementDisplayType {
 export declare function isInline(element: HTMLElement): boolean;
 export declare function getElementDisplaytype(element: HTMLElement): ElementDisplayType;
 export declare function isEmptyTextNode(node: Node): boolean;
+export declare function getActiveElement(): Element;

package/dist/elements/helper/ElementHelper.js

@@ -20,3 +20,13 @@ export function getElementDisplaytype(element) {
 export function isEmptyTextNode(node) {
     return node.textContent.trim() == '' && node.textContent.indexOf('\xa0' /* &nbsp; */) < 0;
 }
+export function getActiveElement() {
+    let activeElement = document.activeElement;
+    let lastActive = null;
+    while (activeElement != lastActive) {
+        lastActive = activeElement;
+        if (activeElement.shadowRoot != null && activeElement.shadowRoot.activeElement)
+            activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return activeElement;
+}

package/dist/elements/item/DesignItem.d.ts

@@ -39,6 +39,8 @@ export declare class DesignItem implements IDesignItem {
     get hasContent(): boolean;
     get content(): string;
     set content(value: string);
+    get innerHTML(): string;
+    set innerHTML(value: string);
     private _hideAtDesignTime;
     get hideAtDesignTime(): boolean;
     set hideAtDesignTime(value: boolean);

package/dist/elements/item/DesignItem.js

@@ -114,6 +114,13 @@ export class DesignItem {
     set content(value) {
         this.node.textContent = value;
     }
+    get innerHTML() {
+        return this.element.innerHTML;
+    }
+    set innerHTML(value) {
+        this.element.innerHTML = value;
+        this.updateChildrenFromNodesChildren();
+    }
     _hideAtDesignTime;
     get hideAtDesignTime() {
         return this._hideAtDesignTime;

package/dist/elements/item/IDesignItem.d.ts

@@ -32,6 +32,7 @@ export interface IDesignItem {
     updateChildrenFromNodesChildren(): any;
     readonly hasContent: boolean;
     content: string;
+    innerHTML?: string;
     readonly node: Node;
     readonly element: Element;
     serviceContainer: ServiceContainer;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -39,7 +39,6 @@ import { GridPlacementService } from './placementService/GridPlacementService.js
 import { ElementAtPointService } from './elementAtPointService/ElementAtPointService';
 import { FlexBoxPlacementService } from './placementService/FlexBoxPlacementService';
 import { SnaplinesProviderService } from './placementService/SnaplinesProviderService';
-import { PrepareElementsForDesignerService } from './instanceService/PrepareElementsForDesignerService';
 import { DragDropService } from './dragDropService/DragDropService';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 import { CopyPasteService } from './copyPasteService/CopyPasteService';
@@ -54,7 +53,6 @@ import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
 import { HtmlWriterService } from './htmlWriterService/HtmlWriterService.js';
 import { RectContextMenu } from '../widgets/designerView/extensions/contextMenu/RectContextMenu.js';
 import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/PathContextMenu.js';
-import { IframeExtensionProvider } from '../widgets/designerView/extensions/IframeExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -71,7 +69,6 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService());
     serviceContainer.register("htmlParserService", new DefaultHtmlParserService());
     serviceContainer.register("elementAtPointService", new ElementAtPointService());
-    serviceContainer.register("prepareElementsForDesignerService", new PrepareElementsForDesignerService());
     serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
@@ -79,7 +76,6 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         // new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider(),
-        new IframeExtensionProvider(),
         // new ElementDragTitleExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [

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

@@ -18,7 +18,6 @@ import { GlobalContext } from './GlobalContext';
 import { IBindingService } from "./bindingsService/IBindingService";
 import { IElementAtPointService } from './elementAtPointService/IElementAtPointService';
 import { ISnaplinesProviderService } from "./placementService/ISnaplinesProviderService.js";
-import { IPrepareElementsForDesignerService } from './instanceService/IPrepareElementsForDesignerService';
 import { IDragDropService } from './dragDropService/IDragDropService';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
@@ -41,7 +40,6 @@ interface ServiceNameMap {
     "bindableObjectsService": IBindableObjectsService;
     "bindableObjectDragDropService": IBindableObjectDragDropService;
     "elementAtPointService": IElementAtPointService;
-    "prepareElementsForDesignerService": IPrepareElementsForDesignerService;
     "dragDropService": IDragDropService;
     "copyPasteService": ICopyPasteService;
     "modelCommandService": IModelCommandService;
@@ -53,6 +51,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    removeDesignerExtensionOfType(container: (ExtensionType | string), lambda: new (...args: any[]) => IDesignerExtensionProvider): void;
     readonly designViewConfigButtons: IDesignViewConfigButtonsProvider[];
     readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
@@ -71,7 +70,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get htmlParserService(): IHtmlParserService;
     get intializationService(): IIntializationService;
     get elementAtPointService(): IElementAtPointService;
-    get prepareElementsForDesignerService(): IPrepareElementsForDesignerService;
     get dragDropService(): IDragDropService;
     get copyPasteService(): ICopyPasteService;
     get modelCommandService(): IModelCommandService;

package/dist/elements/services/ServiceContainer.js

@@ -8,6 +8,14 @@ export class ServiceContainer extends BaseServiceContainer {
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();
+    removeDesignerExtensionOfType(container, lambda) {
+        const extContainer = this.designerExtensions.get(container);
+        for (let i = 0; i < extContainer.length; i++) {
+            if (extContainer[i].constructor === lambda) {
+                extContainer.splice(i, 1);
+            }
+        }
+    }
     designViewConfigButtons = [];
     designerPointerExtensions = [];
     designerContextMenuExtensions;
@@ -52,9 +60,6 @@ export class ServiceContainer extends BaseServiceContainer {
     get elementAtPointService() {
         return this.getLastService('elementAtPointService');
     }
-    get prepareElementsForDesignerService() {
-        return this.getLastService('prepareElementsForDesignerService');
-    }
     get dragDropService() {
         return this.getLastService('dragDropService');
     }

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -27,6 +27,7 @@ export class NodeHtmlParserService {
         let designItem = null;
         if (item.nodeType == 1) {
             let element;
+            let manualCreatedElement = false;
             if (!namespace)
                 element = newElementFromString('<' + item.rawTagName + ' ' + item.rawAttrs + '></' + item.rawTagName + '>'); // some custom elements only parse attributes during constructor call 
             if (!element) {
@@ -34,6 +35,7 @@ export class NodeHtmlParserService {
                     element = document.createElementNS(namespace, item.rawTagName);
                 else
                     element = document.createElement(item.rawTagName);
+                manualCreatedElement = true;
             }
             designItem = new DesignItem(element, serviceContainer, instanceServiceContainer);
             let hideAtDesignTime = false;
@@ -44,6 +46,9 @@ export class NodeHtmlParserService {
             for (let a in attr) {
                 if (a !== 'style') {
                     designItem.attributes.set(a, attr[a]);
+                    if (manualCreatedElement) {
+                        element.setAttribute(a, attr[a]);
+                    }
                     if (a === 'node-projects-hide-at-design-time')
                         hideAtDesignTime = true;
                     else if (a === 'node-projects-hide-at-run-time')
@@ -60,6 +65,9 @@ export class NodeHtmlParserService {
                 styleParser.parse(style);
                 for (let s of styleParser.entries) {
                     designItem.styles.set(s.name, s.value);
+                    if (manualCreatedElement) {
+                        element.style[s.name] = s.value;
+                    }
                 }
             }
             if (!lockAtDesignTime && (element instanceof HTMLElement || element instanceof SVGElement)) {

package/dist/elements/services/initializationService/DefaultIntializationService.js

@@ -1,22 +1,22 @@
 export class DefaultIntializationService {
     init(designItem) {
-        if (designItem.name == 'iframe') {
-            this.initializeIframe(designItem.element);
-        }
+        /*if (designItem.name == 'iframe') {
+          this.initializeIframe(<HTMLIFrameElement>designItem.element);
+        }*/
     }
     initializeIframe(iframe) {
-        iframe.contentDocument.body.style.pointerEvents = 'none';
-        function cloneIframeEvent(event) {
-            var clRect = iframe.getBoundingClientRect();
-            let data = { ...event };
-            data.clientX = event.clientX + clRect.left;
-            data.clientY = event.clientY + clRect.top;
-            var evt = new PointerEvent(event.type, data); //new CustomEvent('pointerdown', {bubbles: true, cancelable: false});
-            iframe.dispatchEvent(evt);
+        /*iframe.contentDocument.body.style.pointerEvents = 'none';
+        function cloneIframeEvent(event: PointerEvent) {
+          var clRect = iframe.getBoundingClientRect();
+          let data = { ...event };
+          data.clientX = event.clientX + clRect.left;
+          data.clientY = event.clientY + clRect.top;
+          var evt = new PointerEvent(event.type, data) //new CustomEvent('pointerdown', {bubbles: true, cancelable: false});
+          iframe.dispatchEvent(evt);
         }
         iframe.contentWindow.addEventListener('pointerdown', cloneIframeEvent);
         iframe.contentWindow.addEventListener('pointermove', cloneIframeEvent);
-        iframe.contentWindow.addEventListener('pointerup', cloneIframeEvent);
+        iframe.contentWindow.addEventListener('pointerup', cloneIframeEvent);*/
     }
     ;
 }

package/dist/elements/services/instanceService/PrepareElementsForDesignerService.js

@@ -5,28 +5,28 @@ export class PrepareElementsForDesignerService {
         this._prepareElementsForDesigner(designItem.element.querySelectorAll('*'), true);
     }
     _prepareElementsForDesigner(elements, rootElements) {
-        for (let el of elements) {
-            if (el.shadowRoot) {
-                this._prepareElementsForDesigner((el.shadowRoot).querySelectorAll('*'), false);
-            }
-            if (el instanceof HTMLElement) {
-                el.onclick = null;
-                el.onmousedown = null;
-                el.onmouseup = null;
-                if (!rootElements)
-                    el.style.pointerEvents = 'none';
-            }
-            if (el instanceof HTMLImageElement) {
-                el.draggable = false;
-            }
-            else if (el instanceof HTMLInputElement) {
-                el.onmousedown = (e) => e.preventDefault();
-                //const ip = el;
-                //el.onclick = (e) => { if (ip.type == 'checkbox') ip.checked = !ip.checked };
-            }
-            else if (el instanceof HTMLSelectElement) {
-                el.onmousedown = (e) => e.preventDefault();
-            }
-        }
+        /*for (let el of elements) {
+          if ((<HTMLElement>el).shadowRoot) {
+            this._prepareElementsForDesigner(((<HTMLElement>el).shadowRoot).querySelectorAll('*'), false);
+          }
+          if (el instanceof HTMLElement) {
+            el.onclick = null;
+            el.onmousedown = null;
+            el.onmouseup = null;
+            if (!rootElements)
+              el.style.pointerEvents = 'none';
+          }
+          if (el instanceof HTMLImageElement) {
+            el.draggable = false;
+          }
+          else if (el instanceof HTMLInputElement) {
+            el.onmousedown = (e) => e.preventDefault();
+            //const ip = el;
+            //el.onclick = (e) => { if (ip.type == 'checkbox') ip.checked = !ip.checked };
+          }
+          else if (el instanceof HTMLSelectElement) {
+            el.onmousedown = (e) => e.preventDefault();
+          }
+        }*/
     }
 }

package/dist/elements/services/undoService/UndoService.js

@@ -19,16 +19,17 @@ export class UndoService {
         let itm = this._transactionStack.pop();
         if (itm !== transactionItem) {
             this.clear();
-            throw "UndoService - Commited Transation was not the last";
+            throw "UndoService - Commited Transaction was not the last";
         }
         if (itm.undoStack.length)
             this._undoStack.push(itm);
+        this._redoStack = [];
     }
     abortTransactionItem(transactionItem) {
         let itm = this._transactionStack.pop();
         if (itm !== transactionItem) {
             this.clear();
-            throw "UndoService - Aborted Transation was not the last";
+            throw "UndoService - Aborted Transaction was not the last";
         }
         itm.undo();
     }

package/dist/elements/services/undoService/transactionItems/InsertAction.js

@@ -15,9 +15,6 @@ export class InsertAction {
     }
     do() {
         this.designItem._insertChildInternal(this.newItem, this.index);
-        const prepService = this.designItem.serviceContainer.prepareElementsForDesignerService;
-        if (prepService)
-            requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: [this.newItem] });
     }
     designItem;

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

@@ -9,13 +9,16 @@ 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;
+    readonly clickOverlay: HTMLDivElement;
     readonly snapLines: Snaplines;
     readonly shadowRoot: ShadowRoot;
     readonly alignOnGrid: boolean;
@@ -27,9 +30,14 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
+    removeCurrentPointerEventHandler(): any;
+    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[];
+    zoomTowardsPoint(point: IPoint, scalechange: number): void;
+    zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
 }