@node-projects/web-component-designer 0.0.216 → 0.0.217

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

@@ -1,84 +1,84 @@
-import { EventNames } from '../../../enums/EventNames.js';
-import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { DesignItem } from '../../item/DesignItem.js';
-import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
-import { dragDropFormatNameElementDefinition, dragDropFormatNameBindingObject } from '../../../Constants.js';
-import { InsertAction } from '../../services/undoService/transactionItems/InsertAction.js';
-import { Snaplines } from './Snaplines.js';
-import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction.js';
-import { CommandType } from '../../../commandHandling/CommandType.js';
-import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
-import { ExtensionType } from './extensions/ExtensionType.js';
-import { ExtensionManager } from './extensions/ExtensionManager.js';
-import { NamedTools } from './tools/NamedTools.js';
-import { Screenshot } from '../../helper/Screenshot.js';
-import { dataURItoBlob, exportData, sleep } from '../../helper/Helper.js';
-import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper.js';
-import { OverlayLayer } from './extensions/OverlayLayer.js';
-import { OverlayLayerView } from './overlayLayerView.js';
-import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
-import { NodeType } from '../../item/NodeType.js';
-import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js';
-import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
-import { AbstractStylesheetService } from '../../services/stylesheetService/AbstractStylesheetService.js';
-export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
-    // Public Properties
-    serviceContainer;
-    instanceServiceContainer;
-    containerBoundingRect;
-    outerRect;
-    clickOverlay;
-    _activeTool;
-    // IPlacementView
-    gridSize = 10;
-    alignOnGrid = false;
-    alignOnSnap = true;
-    snapLines;
-    overlayLayer;
-    rootDesignItem;
-    eatEvents;
-    _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 };
-    _additionalStyle;
-    _currentContextMenu;
-    _backgroundImage;
-    _enableSelectTextNodesOnClick = false;
-    get zoomFactor() {
-        return this._zoomFactor;
-    }
-    set zoomFactor(value) {
-        this._zoomFactor = value;
-        this._zoomFactorChanged();
-    }
-    get scaleFactor() {
-        return this._scaleFactor;
-    }
-    get canvasOffset() {
-        return this._canvasOffset;
-    }
-    set canvasOffset(value) {
-        this._canvasOffset = value;
-        this._zoomFactorChanged(false);
-    }
-    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();
-    get canvas() {
-        return this._canvas;
-    }
-    // Private Variables
-    _canvas;
-    _canvasContainer;
-    _outercanvas2;
-    _lastHoverDesignItem;
-    _firstConnect;
-    static cssprefixConstant = '#node-projects-designer-canvas-canvas ';
+import { EventNames } from '../../../enums/EventNames.js';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { DesignItem } from '../../item/DesignItem.js';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
+import { dragDropFormatNameElementDefinition, dragDropFormatNameBindingObject } from '../../../Constants.js';
+import { InsertAction } from '../../services/undoService/transactionItems/InsertAction.js';
+import { Snaplines } from './Snaplines.js';
+import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction.js';
+import { CommandType } from '../../../commandHandling/CommandType.js';
+import { DefaultHtmlParserService } from '../../services/htmlParserService/DefaultHtmlParserService.js';
+import { ExtensionType } from './extensions/ExtensionType.js';
+import { ExtensionManager } from './extensions/ExtensionManager.js';
+import { NamedTools } from './tools/NamedTools.js';
+import { Screenshot } from '../../helper/Screenshot.js';
+import { dataURItoBlob, exportData, sleep } from '../../helper/Helper.js';
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper.js';
+import { OverlayLayer } from './extensions/OverlayLayer.js';
+import { OverlayLayerView } from './overlayLayerView.js';
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
+import { NodeType } from '../../item/NodeType.js';
+import { StylesheetChangedAction } from '../../services/undoService/transactionItems/StylesheetChangedAction.js';
+import { SetDesignItemsAction } from '../../services/undoService/transactionItems/SetDesignItemsAction.js';
+import { AbstractStylesheetService } from '../../services/stylesheetService/AbstractStylesheetService.js';
+class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
+    // Public Properties
+    serviceContainer;
+    instanceServiceContainer;
+    containerBoundingRect;
+    outerRect;
+    clickOverlay;
+    _activeTool;
+    // IPlacementView
+    gridSize = 10;
+    alignOnGrid = false;
+    alignOnSnap = true;
+    snapLines;
+    overlayLayer;
+    rootDesignItem;
+    eatEvents;
+    _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 };
+    _additionalStyle;
+    _currentContextMenu;
+    _backgroundImage;
+    _enableSelectTextNodesOnClick = false;
+    get zoomFactor() {
+        return this._zoomFactor;
+    }
+    set zoomFactor(value) {
+        this._zoomFactor = value;
+        this._zoomFactorChanged();
+    }
+    get scaleFactor() {
+        return this._scaleFactor;
+    }
+    get canvasOffset() {
+        return this._canvasOffset;
+    }
+    set canvasOffset(value) {
+        this._canvasOffset = value;
+        this._zoomFactorChanged(false);
+    }
+    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();
+    get canvas() {
+        return this._canvas;
+    }
+    // Private Variables
+    _canvas;
+    _canvasContainer;
+    _outercanvas2;
+    _lastHoverDesignItem;
+    _firstConnect;
+    static cssprefixConstant = '#node-projects-designer-canvas-canvas ';
     static style = css `
     :host {
       display: block;
@@ -149,7 +149,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       height: 0;
       width: 0;
     }  
-  `;
+  `;
     static template = html `
     <div style="display: flex;flex-direction: column;width: 100%;height: 100%; margin: 0 !important; padding: 0 !important; border: none !important;">
       <div style="width: 100%;height: 100%; margin: 0 !important; padding: 0 !important; border: none !important;">
@@ -161,887 +161,888 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       </div>
       <div id="node-projects-designer-canvas-clickOverlay" tabindex="0" style="pointer-events: auto;  margin: 0 !important; padding: 0 !important; border: none !important;"></div>
       </div>
-    </div>`;
-    extensionManager;
-    _pointerextensions;
-    _lastCopiedPrimaryItem;
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        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.clickOverlay = this._getDomElement('node-projects-designer-canvas-clickOverlay');
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.onKeyUp = this.onKeyUp.bind(this);
-        this._onDblClick = this._onDblClick.bind(this);
-        this._pointerEventHandler = this._pointerEventHandler.bind(this);
-        this.clickOverlay.oncontextmenu = (e) => e.preventDefault();
-    }
-    get designerWidth() {
-        return this._canvasContainer.style.width;
-    }
-    set designerWidth(value) {
-        this._canvasContainer.style.width = value;
-        this._zoomFactorChanged();
-    }
-    get designerHeight() {
-        return this._canvasContainer.style.height;
-    }
-    set designerHeight(value) {
-        this._canvasContainer.style.height = value;
-        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;
-    }
-    get designerOffsetHeight() {
-        return this._canvasContainer.offsetHeight;
-    }
-    set additionalStyles(value) {
-        this._additionalStyle = value;
-        this.applyAllStyles();
-    }
-    get additionalStyles() {
-        return this._additionalStyle;
-    }
-    applyAllStyles() {
-        let styles = [this.constructor.style];
-        if (this._additionalStyle)
-            styles.push(cssFromString(AbstractStylesheetService.buildPatchedStyleSheet(this._additionalStyle)));
-        if (this.instanceServiceContainer.stylesheetService) {
-            styles.push(...this.instanceServiceContainer.stylesheetService
-                .getStylesheets()
-                .map(x => cssFromString(AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(x.content)]))));
-        }
-        this.shadowRoot.adoptedStyleSheets = styles;
-    }
-    /* --- start IUiCommandHandler --- */
-    async executeCommand(command) {
-        const modelCommandService = this.serviceContainer.modelCommandService;
-        if (modelCommandService) {
-            let handeled = await modelCommandService.executeCommand(this, command);
-            if (handeled != null)
-                return;
-        }
-        switch (command.type) {
-            case CommandType.screenshot:
-                {
-                    if (!Screenshot.screenshotsEnabled) {
-                        alert("you need to select current tab in next browser dialog, or screenshots will not work correctly");
-                    }
-                    if (!this.instanceServiceContainer.selectionService.primarySelection) {
-                        this.zoomToFit();
-                        this.disableBackgroud();
-                        const el = this.rootDesignItem.element;
-                        const sel = this.instanceServiceContainer.selectionService.selectedElements;
-                        this.instanceServiceContainer.selectionService.setSelectedElements(null);
-                        await sleep(100);
-                        const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
-                        await exportData(dataURItoBlob(screenshot), "screenshot.png");
-                        this.instanceServiceContainer.selectionService.setSelectedElements(sel);
-                        this.enableBackground();
-                    }
-                    else {
-                        this.disableBackgroud();
-                        const el = this.instanceServiceContainer.selectionService.primarySelection.element;
-                        const sel = this.instanceServiceContainer.selectionService.selectedElements;
-                        this.instanceServiceContainer.selectionService.setSelectedElements(null);
-                        await sleep(100);
-                        const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
-                        await exportData(dataURItoBlob(screenshot), "screenshot.png");
-                        this.instanceServiceContainer.selectionService.setSelectedElements(sel);
-                        this.enableBackground();
-                    }
-                }
-                break;
-            case CommandType.setTool:
-                {
-                    this.serviceContainer.globalContext.tool = this.serviceContainer.designerTools.get(command.parameter);
-                }
-                break;
-            case CommandType.setStrokeColor:
-                {
-                    this.serviceContainer.globalContext.strokeColor = command.parameter;
-                }
-                break;
-            case CommandType.setFillBrush:
-                {
-                    this.serviceContainer.globalContext.fillBrush = command.parameter;
-                }
-                break;
-            case CommandType.setStrokeThickness:
-                {
-                    this.serviceContainer.globalContext.strokeThickness = command.parameter;
-                }
-                break;
-            case CommandType.delete:
-                this.handleDeleteCommand();
-                break;
-            case CommandType.undo:
-                this.instanceServiceContainer.undoService.undo();
-                break;
-            case CommandType.redo:
-                this.instanceServiceContainer.undoService.redo();
-                break;
-            case CommandType.copy:
-                this.handleCopyCommand();
-                break;
-            case CommandType.cut:
-                this.handleCopyCommand();
-                this.handleDeleteCommand();
-                break;
-            case CommandType.paste:
-                this.handlePasteCommand(command.altKey == true);
-                break;
-            case CommandType.selectAll:
-                this.handleSelectAll();
-                break;
-        }
-    }
-    disableBackgroud() {
-        this._backgroundImage = this._canvas.style.backgroundImage;
-        this._canvas.style.backgroundImage = 'none';
-    }
-    enableBackground() {
-        this._canvas.style.backgroundImage = this._backgroundImage;
-    }
-    zoomToFit() {
-        const autoZomOffset = 10;
-        let maxX = 0, maxY = 0, minX = 0, minY = 0;
-        this.canvasOffset = { x: 0, y: 0 };
-        this.zoomFactor = 1;
-        for (let n of DomHelper.getAllChildNodes(this.rootDesignItem.element)) {
-            if (n instanceof Element) {
-                const rect = n.getBoundingClientRect();
-                minX = minX < rect.x ? minX : rect.x;
-                minY = minY < rect.y ? minY : rect.y;
-                maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
-                maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
-            }
-        }
-        const cvRect = this.getBoundingClientRect();
-        maxX -= cvRect.x;
-        maxY -= cvRect.y;
-        let scaleX = cvRect.width / (maxX / this.zoomFactor);
-        let scaleY = cvRect.height / (maxY / this.zoomFactor);
-        const dimensions = this.getDesignSurfaceDimensions();
-        if (dimensions.width)
-            scaleX = cvRect.width / dimensions.width;
-        if (dimensions.height)
-            scaleY = cvRect.height / dimensions.height;
-        let fak = scaleX < scaleY ? scaleX : scaleY;
-        if (!isNaN(fak))
-            this.zoomFactor = fak;
-        //this._zoomInput.value = Math.round(this.zoomFactor * 100) + '%';
-    }
-    canExecuteCommand(command) {
-        const modelCommandService = this.serviceContainer.modelCommandService;
-        if (modelCommandService) {
-            let handeled = modelCommandService.canExecuteCommand(this, command);
-            if (handeled !== null)
-                return handeled;
-        }
-        if (command.type === CommandType.undo) {
-            return this.instanceServiceContainer.undoService.canUndo();
-        }
-        if (command.type === CommandType.redo) {
-            return this.instanceServiceContainer.undoService.canRedo();
-        }
-        if (command.type === CommandType.setTool) {
-            return this.serviceContainer.designerTools.has(command.parameter);
-        }
-        return true;
-    }
-    /* --- end IUiCommandHandler --- */
-    handleSelectAll() {
-        this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
-    }
-    async handleCopyCommand() {
-        this._lastCopiedPrimaryItem = this.instanceServiceContainer.selectionService.primarySelection;
-        await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
-    }
-    async handlePasteCommand(disableRestoreOfPositions) {
-        const [designItems, positions] = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
-        let grp = this.rootDesignItem.openGroup("Insert");
-        let pasteContainer = this.rootDesignItem;
-        let pCon = this._lastCopiedPrimaryItem?.parent ?? this.instanceServiceContainer.selectionService.primarySelection;
-        while (pCon != null) {
-            const containerStyle = getComputedStyle(pCon.element);
-            let newContainerService;
-            newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(pCon, containerStyle));
-            if (newContainerService) {
-                if (newContainerService.canEnter(pCon, designItems)) {
-                    pasteContainer = pCon;
-                    break;
-                }
-                else {
-                    pCon = pCon.parent;
-                    continue;
-                }
-            }
-        }
-        if (designItems) {
-            let containerPos = this.getNormalizedElementCoordinates(pasteContainer.element);
-            for (let i = 0; i < designItems.length; i++) {
-                let di = designItems[i];
-                let pos = positions ? positions[i] : null;
-                this.instanceServiceContainer.undoService.execute(new InsertAction(pasteContainer, pasteContainer.childCount, di));
-                if (!disableRestoreOfPositions && pos && di.nodeType == NodeType.Element) {
-                    di.setStyle('left', (pos.x - containerPos.x) + 'px');
-                    di.setStyle('top', (pos.y - containerPos.y) + 'px');
-                }
-            }
-            const intializationService = this.serviceContainer.intializationService;
-            if (intializationService) {
-                for (let di of designItems)
-                    intializationService.init(di);
-            }
-            this.instanceServiceContainer.selectionService.setSelectedElements(designItems);
-        }
-        grp.commit();
-        this.snapLines.clearSnaplines();
-    }
-    handleDeleteCommand() {
-        let items = this.instanceServiceContainer.selectionService.selectedElements;
-        this.instanceServiceContainer.undoService.execute(new DeleteAction(items));
-        this.instanceServiceContainer.selectionService.setSelectedElements(null);
-    }
-    initialize(serviceContainer) {
-        this.serviceContainer = serviceContainer;
-        this.instanceServiceContainer = new InstanceServiceContainer(this);
-        const undoService = this.serviceContainer.getLastService('undoService');
-        if (undoService)
-            this.instanceServiceContainer.register("undoService", undoService(this));
-        const selectionService = this.serviceContainer.getLastService('selectionService');
-        if (selectionService) {
-            this.instanceServiceContainer.register("selectionService", selectionService(this));
-            this.instanceServiceContainer.selectionService.onSelectionChanged.on(() => {
-                this._lastCopiedPrimaryItem = null;
-            });
-        }
-        const designItemDocumentPositionService = this.serviceContainer.getLastService('designItemDocumentPositionService');
-        if (designItemDocumentPositionService) {
-            this.instanceServiceContainer.register("designItemDocumentPositionService", designItemDocumentPositionService(this));
-        }
-        this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
-        const contentService = this.serviceContainer.getLastService('contentService');
-        if (contentService) {
-            this.instanceServiceContainer.register("contentService", contentService(this));
-        }
-        const stylesheetService = this.serviceContainer.getLastService('stylesheetService');
-        if (stylesheetService) {
-            const instance = stylesheetService(this);
-            this.instanceServiceContainer.register("stylesheetService", instance);
-            this.instanceServiceContainer.stylesheetService.stylesheetChanged.on((ss) => {
-                if (ss.changeSource == 'extern') {
-                    const ssca = new StylesheetChangedAction(this.instanceServiceContainer.stylesheetService, ss.name, ss.newStyle, ss.oldStyle);
-                    this.instanceServiceContainer.undoService.execute(ssca);
-                }
-                this.applyAllStyles();
-            });
-            this.instanceServiceContainer.stylesheetService.stylesheetsChanged.on(() => {
-                this.applyAllStyles();
-            });
-        }
-        this.extensionManager = new ExtensionManager(this);
-        this.overlayLayer = new OverlayLayerView(serviceContainer);
-        this.overlayLayer.style.pointerEvents = 'none';
-        this.overlayLayer.style.setProperty('margin', '0', 'important');
-        this.overlayLayer.style.setProperty('padding', '0', 'important');
-        this.overlayLayer.style.setProperty('border', 'none', 'important');
-        this.clickOverlay.appendChild(this.overlayLayer);
-        this.snapLines = new Snaplines(this.overlayLayer);
-        this.snapLines.initialize(this.rootDesignItem);
-        if (this.serviceContainer.designerPointerExtensions)
-            for (let pe of this.serviceContainer.designerPointerExtensions) {
-                if (!this._pointerextensions)
-                    this._pointerextensions = [];
-                this._pointerextensions.push(pe.getExtension(this));
-            }
-        if (this.children) {
-            let children = this.children;
-            if (this.children.length == 1 && this.children[0] instanceof HTMLSlotElement) {
-                children = this.children[0].assignedElements();
-            }
-            const parser = this.serviceContainer.getLastServiceWhere('htmlParserService', x => x.constructor == DefaultHtmlParserService);
-            this.addDesignItems(parser.createDesignItems(children, this.serviceContainer, this.instanceServiceContainer));
-        }
-        if (!this.serviceContainer.options.zoomDesignerBackground) {
-            requestAnimationFrame(() => {
-                this._resizeBackgroundGrid();
-            });
-        }
-    }
-    connectedCallback() {
-        if (!this._firstConnect) {
-            this._firstConnect = true;
-            this.clickOverlay.addEventListener(EventNames.PointerDown, this._pointerEventHandler);
-            this.clickOverlay.addEventListener(EventNames.PointerMove, this._pointerEventHandler);
-            this.clickOverlay.addEventListener(EventNames.PointerUp, this._pointerEventHandler);
-            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.onKeyDown, true);
-            this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp, true);
-            this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClick, true);
-        }
-    }
-    _zoomFactorChanged(refreshExtensions = true) {
-        //a@ts-ignore
-        //this._canvasContainer.style.zoom = <any>this._zoomFactor;
-        //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+') translate(' + this._translate.x + ', '+this._translate.y+')';
-        //this._canvasContainer.style.transformOrigin = '0 0';
-        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._fillCalculationrects();
-        this.onZoomFactorChanged.emit(this._zoomFactor);
-        if (refreshExtensions) {
-            this.extensionManager.refreshAllAppliedExtentions();
-            setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 200);
-        }
-        if (!this.serviceContainer.options.zoomDesignerBackground)
-            this._resizeBackgroundGrid();
-    }
-    _resizeBackgroundGrid() {
-        const backgroundGridSize = 10;
-        const backgroundGridFactor = backgroundGridSize * 100 * 2;
-        let canvasWidth = this.canvas.getBoundingClientRect().width;
-        let backgroundGridZoom = backgroundGridFactor / canvasWidth;
-        this.canvas.style.backgroundSize = backgroundGridZoom.toString() + '%';
-    }
-    _updateTransform() {
-        this._scaleFactor = this._zoomFactor;
-        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.overlayLayer.style.transform = this._canvasContainer.style.transform;
-        this.overlayLayer.style.transformOrigin = '0 0';
-        this.snapLines.clearSnaplines();
-    }
-    setDesignItems(designItems) {
-        const setItemsAction = new SetDesignItemsAction(designItems, [...this.rootDesignItem.children()]);
-        this.instanceServiceContainer.undoService.execute(setItemsAction);
-    }
-    _internalSetDesignItems(designItems) {
-        this._fillCalculationrects();
-        this.overlayLayer.removeAllOverlays();
-        DomHelper.removeAllChildnodes(this.overlayLayer);
-        for (let i of [...this.rootDesignItem.children()])
-            this.rootDesignItem._removeChildInternal(i);
-        this.addDesignItems(designItems);
-        this.lazyTriggerReparseDocumentStylesheets();
-        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
-        this.instanceServiceContainer.selectionService._withoutUndoSetSelectedElements(null);
-        setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 50);
-    }
-    reparseTimeout;
-    lazyTriggerReparseDocumentStylesheets() {
-        if (this.reparseTimeout) {
-            clearTimeout(this.reparseTimeout);
-        }
-        this.reparseTimeout = setTimeout(async () => {
-            await this.reparseDocumentStylesheets();
-            clearTimeout(this.reparseTimeout);
-        }, 20);
-    }
-    async reparseDocumentStylesheets() {
-        if (this.instanceServiceContainer.stylesheetService) {
-            const styleElements = this.rootDesignItem.element.querySelectorAll('style');
-            let i = 1;
-            const intStyleSheets = [...styleElements].map(x => ({ name: '&lt;style&gt; #' + (x.id ? x.id + '(' + i++ + ')' : i++), content: DesignItem.GetDesignItem(x).content, designItem: DesignItem.GetDesignItem(x) }));
-            await this.instanceServiceContainer.stylesheetService.setDocumentStylesheets(intStyleSheets);
-        }
-    }
-    addDesignItems(designItems) {
-        if (designItems) {
-            for (let di of designItems) {
-                this.rootDesignItem._insertChildInternal(di);
-            }
-        }
-        const intializationService = this.serviceContainer.intializationService;
-        if (intializationService) {
-            for (let di of designItems)
-                intializationService.init(di);
-        }
-        this.snapLines.clearSnaplines();
-    }
-    _dragOverExtensionItem;
-    _onDragEnter(event) {
-        this._fillCalculationrects();
-        event.preventDefault();
-        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
-        if (hasTransferDataBindingObject) {
-            const ddService = this.serviceContainer.bindableObjectDragDropService;
-            if (ddService) {
-                const el = this.getElementAtPoint({ x: event.x, y: event.y });
-                if (this._lastDdElement != el) {
-                    ddService.dragLeave(this, event, this._lastDdElement);
-                    ddService.dragEnter(this, event, el);
-                    this._lastDdElement = el;
-                }
-            }
-            else {
-                this._lastDdElement = null;
-            }
-        }
-        else {
-            this._lastDdElement = null;
-        }
-    }
-    _onDragLeave(event) {
-        this._fillCalculationrects();
-        event.preventDefault();
-        this._canvas.classList.remove('dragFileActive');
-        if (this._dragOverExtensionItem) {
-            this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
-            this._dragOverExtensionItem = null;
-        }
-    }
-    _lastDdElement = null;
-    _onDragOver(event) {
-        event.preventDefault();
-        /*if (this.alignOnSnap) {
-          this.snapLines.calculateSnaplines(this.instanceServiceContainer.selectionService.selectedElements);
-          //TODO: fix this following code...
-          const currentPoint = this.getDesignerMousepoint(event);
-          let containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.rootDesignItem))
-          containerService.finishPlace(this, this.rootDesignItem, this._initialPoint, currentPoint, this.instanceServiceContainer.selectionService.selectedElements);
-        }*/
-        this._fillCalculationrects();
-        if (event.dataTransfer.types.length > 0 && event.dataTransfer.types[0] == 'Files') {
-            const ddService = this.serviceContainer.dragDropService;
-            if (ddService) {
-                const effect = ddService.dragOver(event);
-                event.dataTransfer.dropEffect = effect;
-                if (effect !== 'none')
-                    this._canvas.classList.add('dragFileActive');
-            }
-        }
-        else {
-            const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
-            if (hasTransferDataBindingObject) {
-                const ddService = this.serviceContainer.bindableObjectDragDropService;
-                if (ddService) {
-                    const el = this.getElementAtPoint({ x: event.x, y: event.y });
-                    if (this._lastDdElement != el) {
-                        ddService.dragLeave(this, event, this._lastDdElement);
-                        ddService.dragEnter(this, event, el);
-                        this._lastDdElement = el;
-                    }
-                    const effect = ddService.dragOver(this, event, el);
-                    event.dataTransfer.dropEffect = effect;
-                }
-            }
-            else {
-                let [newContainer] = this._getPossibleContainerForDrop(event);
-                if (this._dragOverExtensionItem != newContainer) {
-                    this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
-                    this.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
-                    this._dragOverExtensionItem = newContainer;
-                }
-                else {
-                    this.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
-                }
-            }
-        }
-    }
-    _getPossibleContainerForDrop(event) {
-        let newContainerElementDesignItem = null;
-        let newContainerService = null;
-        const elementsFromPoint = this.elementsFromPoint(event.x, event.y);
-        for (let e of elementsFromPoint) {
-            if (e == this.rootDesignItem.element) {
-                newContainerElementDesignItem = this.rootDesignItem;
-                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                break;
-            }
-            else if (false) {
-                //check we don't try to move a item over one of its children..
-            }
-            else {
-                newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, this.serviceContainer, this.instanceServiceContainer);
-                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                if (newContainerService) {
-                    if (newContainerService.canEnterByDrop(newContainerElementDesignItem)) {
-                        break;
-                    }
-                    else {
-                        newContainerElementDesignItem = null;
-                        newContainerService = null;
-                        continue;
-                    }
-                }
-            }
-        }
-        return [newContainerElementDesignItem, newContainerService];
-    }
-    async _onDrop(event) {
-        this._lastDdElement = null;
-        event.preventDefault();
-        this._canvas.classList.remove('dragFileActive');
-        this._fillCalculationrects();
-        if (event.dataTransfer.files?.length > 0) {
-            const ddService = this.serviceContainer.dragDropService;
-            if (ddService) {
-                ddService.drop(this, event);
-            }
-        }
-        else {
-            const transferDataBindingObject = event.dataTransfer.getData(dragDropFormatNameBindingObject);
-            if (transferDataBindingObject) {
-                const bo = JSON.parse(transferDataBindingObject);
-                const ddService = this.serviceContainer.bindableObjectDragDropService;
-                if (ddService) {
-                    const el = this.getElementAtPoint({ x: event.x, y: event.y });
-                    const effect = ddService.drop(this, event, bo, el);
-                    event.dataTransfer.dropEffect = effect;
-                }
-            }
-            else {
-                if (this._dragOverExtensionItem) {
-                    this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
-                    this._dragOverExtensionItem = null;
-                }
-                let [newContainer] = this._getPossibleContainerForDrop(event);
-                if (!newContainer)
-                    newContainer = this.rootDesignItem;
-                this._fillCalculationrects();
-                //TODO : we need to use container service for adding to element, so also grid and flexbox work correct
-                const transferData = event.dataTransfer.getData(dragDropFormatNameElementDefinition);
-                const elementDefinition = JSON.parse(transferData);
-                const di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
-                const grp = di.openGroup("Insert of &lt;" + di.name + "&gt;");
-                di.setStyle('position', 'absolute');
-                const containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
-                containerService.enterContainer(newContainer, [di]);
-                const containerPos = this.getNormalizedElementCoordinates(newContainer.element);
-                const evCoord = this.getNormalizedEventCoordinates(event);
-                const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };
-                containerService.place(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
-                containerService.finishPlace(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
-                this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
-                requestAnimationFrame(() => {
-                    this.instanceServiceContainer.selectionService.setSelectedElements([di]);
-                    grp.commit();
-                });
-            }
-        }
-    }
-    showDesignItemContextMenu(designItem, event) {
-        this._currentContextMenu?.close();
-        const mnuItems = [];
-        for (let cme of this.serviceContainer.designerContextMenuExtensions) {
-            if (cme.shouldProvideContextmenu(event, this, designItem, 'designer')) {
-                mnuItems.push(...cme.provideContextMenuItems(event, this, designItem));
-            }
-        }
-        let ctxMenu = new ContextMenu(mnuItems, null);
-        ctxMenu.display(event);
-        return ctxMenu;
-    }
-    _onDblClick(event) {
-        event.preventDefault();
-        this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
-    }
-    onKeyUp(event) {
-        if (event.composedPath().indexOf(this.eatEvents) >= 0)
-            return;
-        event.preventDefault();
-    }
-    onKeyDown(event) {
-        if (event.composedPath().indexOf(this.eatEvents) >= 0)
-            return;
-        if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey)
-            this.executeCommand({ type: CommandType.undo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
-        else if ((event.ctrlKey || event.metaKey) && event.key === 'z' && event.shiftKey)
-            this.executeCommand({ type: CommandType.redo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
-        else if ((event.ctrlKey || event.metaKey) && event.key === 'y')
-            this.executeCommand({ type: CommandType.redo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
-        else if ((event.ctrlKey || event.metaKey) && event.key === 'a')
-            this.executeCommand({ type: CommandType.selectAll, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
-        else if ((event.ctrlKey || event.metaKey) && event.key === 'c')
-            this.executeCommand({ type: CommandType.copy, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
-        else if ((event.ctrlKey || event.metaKey) && event.key === 'v')
-            this.executeCommand({ type: CommandType.paste, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
-        else if ((event.ctrlKey || event.metaKey) && event.key === 'x')
-            this.executeCommand({ type: CommandType.cut, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
-        else {
-            let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
-            if (!primarySelection) {
-                return;
-            }
-            let moveOffset = 1;
-            if (event.shiftKey)
-                moveOffset = 10;
-            switch (event.key) {
-                case 'Delete':
-                case 'Backspace':
-                    this.executeCommand({ type: CommandType.delete, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
-                    break;
-                case 'ArrowUp':
-                    {
-                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('top', parseInt(x.element.style.top) - moveOffset + 'px'));
-                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
-                    }
-                    break;
-                case 'ArrowDown':
-                    {
-                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('top', parseInt(x.element.style.top) + moveOffset + 'px'));
-                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
-                    }
-                    break;
-                case 'ArrowLeft':
-                    {
-                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('left', parseInt(x.element.style.left) - moveOffset + 'px'));
-                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
-                    }
-                    break;
-                case 'ArrowRight':
-                    {
-                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('left', parseInt(x.element.style.left) + moveOffset + 'px'));
-                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
-                    }
-                    break;
-            }
-        }
-        event.preventDefault();
-    }
-    /**
-     * Converts the Event x/y coordinates, to the mouse position on the canvas
-     */
-    getNormalizedEventCoordinates(event) {
-        const offsetOfOuterX = (event.clientX - this.outerRect.x) / this.zoomFactor;
-        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;
-        return {
-            x: offsetOfOuterX - offsetOfCanvasX / this.zoomFactor,
-            y: offsetOfOuterY - offsetOfCanvasY / this.zoomFactor
-        };
-    }
-    /**
-     * Converts the Event x/y coordinates, to the mouse position in the viewport
-     */
-    getViewportCoordinates(event) {
-        return {
-            x: (event.clientX - this.outerRect.x),
-            y: (event.clientY - this.outerRect.y)
-        };
-    }
-    getNormalizedTextNodeCoordinates(element, ignoreScalefactor) {
-        let range = document.createRange();
-        range.selectNodeContents(element);
-        let targetRect = range.getBoundingClientRect();
-        return { x: (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) };
-    }
-    getNormalizedElementCoordinates(element, ignoreScalefactor) {
-        if (element.nodeType == NodeType.TextNode) {
-            return this.getNormalizedTextNodeCoordinates(element, ignoreScalefactor);
-        }
-        const targetRect = element.getBoundingClientRect();
-        return { x: (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) };
-    }
-    getNormalizedElementCoordinatesAndRealSizes(element) {
-        let ret = this.getNormalizedElementCoordinates(element);
-        const st = getComputedStyle(element);
-        let realWidth = ret.width;
-        let realHeight = ret.height;
-        if (st.boxSizing != 'border-box') {
-            realWidth = realWidth - (parseFloat(st.borderLeft) + parseFloat(st.paddingLeft) + parseFloat(st.paddingRight) + parseFloat(st.borderRight));
-            realHeight = realHeight - (parseFloat(st.borderTop) + parseFloat(st.paddingTop) + parseFloat(st.paddingBottom) + parseFloat(st.borderBottom));
-        }
-        return { ...ret, realWidth, realHeight };
-    }
-    getNormalizedOffsetInElement(event, element) {
-        const normEvt = this.getNormalizedEventCoordinates(event);
-        const normEl = this.getNormalizedElementCoordinates(element);
-        return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
-    }
-    //todo: remove
-    elementFromPoint(x, y) {
-        let elements = this.shadowRoot.elementsFromPoint(x, y);
-        let element = elements[0];
-        if (element === this.clickOverlay)
-            element = elements[1];
-        if (element === this.clickOverlay)
-            element = this._canvas;
-        return element;
-    }
-    elementsFromPoint(x, y) {
-        let retVal = [];
-        let elements = this.shadowRoot.elementsFromPoint(x, y);
-        for (let e of elements) {
-            if (e == this.clickOverlay)
-                continue;
-            if (e == this.overlayLayer)
-                continue;
-            if (e.getRootNode() !== this.shadowRoot)
-                continue;
-            if (e == this._outercanvas2)
-                break;
-            retVal.push(e);
-            if (e === this._canvas)
-                break;
-        }
-        return retVal;
-    }
-    getElementAtPoint(point, ignoreElementCallback) {
-        const elements = this.shadowRoot.elementsFromPoint(point.x, point.y);
-        let currentElement = null;
-        for (let i = 0; i < elements.length; i++) {
-            currentElement = elements[i];
-            if (currentElement == this._outercanvas2) {
-                currentElement = null;
-                break;
-            }
-            if (currentElement == this.clickOverlay) {
-                currentElement = null;
-                continue;
-            }
-            if (currentElement == this.overlayLayer) {
-                currentElement = null;
-                continue;
-            }
-            if (ignoreElementCallback && ignoreElementCallback(currentElement)) {
-                currentElement = null;
-                continue;
-            }
-            if (currentElement.getRootNode() !== this.shadowRoot) {
-                currentElement = null;
-                continue;
-            }
-            break;
-        }
-        return currentElement;
-    }
-    showHoverExtension(element, event) {
-        const currentDesignItem = DesignItem.GetOrCreateDesignItem(element, this.serviceContainer, this.instanceServiceContainer);
-        if (this._lastHoverDesignItem != currentDesignItem) {
-            if (this._lastHoverDesignItem)
-                this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver);
-            if (currentDesignItem && currentDesignItem != this.rootDesignItem && DomHelper.getHost(element.parentNode) !== this.overlayLayer)
-                this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver, event);
-            this._lastHoverDesignItem = currentDesignItem;
-        }
-    }
-    _pointerEventHandler(event, forceElement = null) {
-        if (!this.serviceContainer)
-            return;
-        this._fillCalculationrects();
-        if (this._pointerextensions) {
-            for (let pe of this._pointerextensions)
-                pe.refresh(event);
-        }
-        if (event.composedPath().indexOf(this.eatEvents) >= 0)
-            return;
-        let currentElement;
-        if (forceElement)
-            currentElement = forceElement;
-        else {
-            currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
-            if (!currentElement) {
-                currentElement = this._canvas;
-            }
-            else if (this._enableSelectTextNodesOnClick) {
-                const norm = this.getNormalizedEventCoordinates(event);
-                for (let n of currentElement.childNodes) {
-                    if (n.nodeType == NodeType.TextNode) {
-                        let nc = this.getNormalizedElementCoordinates(n);
-                        if (nc.x <= norm.x && nc.x + nc.width >= norm.x && nc.y <= norm.y && nc.y + nc.height >= norm.y) {
-                            currentElement = n;
-                            break;
-                        }
-                    }
-                }
-            }
-        }
-        if (this._activeTool) {
-            this._activeTool.pointerEventHandler(this, event, currentElement);
-            return;
-        }
-        this.clickOverlay.style.cursor = this._canvas.style.cursor;
-        const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, this.serviceContainer, this.instanceServiceContainer);
-        this.showHoverExtension(currentDesignItem.element, event);
-        //TODO: needed ??
-        if (currentElement && DomHelper.getHost(currentElement.parentNode) === this.overlayLayer) {
-            if (this.eatEvents)
-                return;
-            currentElement = this.instanceServiceContainer.selectionService.primarySelection?.element ?? this._canvas;
-        }
-        let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer);
-        tool.pointerEventHandler(this, event, currentElement);
-        this._canvas.style.cursor = tool.cursor;
-    }
-    captureActiveTool(tool) {
-        this._activeTool = tool;
-    }
-    releaseActiveTool() {
-        this._activeTool = null;
-    }
-    _fillCalculationrects() {
-        this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
-        this.outerRect = this._outercanvas2.getBoundingClientRect();
-    }
-    addOverlay(element, overlayLayer = OverlayLayer.Normal) {
-        this.overlayLayer.addOverlay(element, overlayLayer);
-    }
-    removeOverlay(element) {
-        this.overlayLayer.removeOverlay(element);
-    }
-    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.zoomPoint(rectCenter, zoomFactor);
-    }
-    zoomPoint(canvasPoint, newZoom) {
-        this.zoomFactor = newZoom;
-        const newCanvasOffset = {
-            x: -(canvasPoint.x) + this.outerRect.width / this.zoomFactor / 2,
-            y: -(canvasPoint.y) + this.outerRect.height / this.zoomFactor / 2
-        };
-        this.canvasOffset = newCanvasOffset;
-    }
-    zoomConvertEventToViewPortCoordinates(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
-        };
-    }
-    zoomTowardsPoint(canvasPoint, newZoom) {
-        const scaleChange = newZoom / this.zoomFactor;
-        const point = this.zoomConvertEventToViewPortCoordinates(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);
+    </div>`;
+    extensionManager;
+    _pointerextensions;
+    _lastCopiedPrimaryItem;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        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.clickOverlay = this._getDomElement('node-projects-designer-canvas-clickOverlay');
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onKeyUp = this.onKeyUp.bind(this);
+        this._onDblClick = this._onDblClick.bind(this);
+        this._pointerEventHandler = this._pointerEventHandler.bind(this);
+        this.clickOverlay.oncontextmenu = (e) => e.preventDefault();
+    }
+    get designerWidth() {
+        return this._canvasContainer.style.width;
+    }
+    set designerWidth(value) {
+        this._canvasContainer.style.width = value;
+        this._zoomFactorChanged();
+    }
+    get designerHeight() {
+        return this._canvasContainer.style.height;
+    }
+    set designerHeight(value) {
+        this._canvasContainer.style.height = value;
+        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;
+    }
+    get designerOffsetHeight() {
+        return this._canvasContainer.offsetHeight;
+    }
+    set additionalStyles(value) {
+        this._additionalStyle = value;
+        this.applyAllStyles();
+    }
+    get additionalStyles() {
+        return this._additionalStyle;
+    }
+    applyAllStyles() {
+        let styles = [this.constructor.style];
+        if (this._additionalStyle)
+            styles.push(cssFromString(AbstractStylesheetService.buildPatchedStyleSheet(this._additionalStyle)));
+        if (this.instanceServiceContainer.stylesheetService) {
+            styles.push(...this.instanceServiceContainer.stylesheetService
+                .getStylesheets()
+                .map(x => cssFromString(AbstractStylesheetService.buildPatchedStyleSheet([cssFromString(x.content)]))));
+        }
+        this.shadowRoot.adoptedStyleSheets = styles;
+    }
+    /* --- start IUiCommandHandler --- */
+    async executeCommand(command) {
+        const modelCommandService = this.serviceContainer.modelCommandService;
+        if (modelCommandService) {
+            let handeled = await modelCommandService.executeCommand(this, command);
+            if (handeled != null)
+                return;
+        }
+        switch (command.type) {
+            case CommandType.screenshot:
+                {
+                    if (!Screenshot.screenshotsEnabled) {
+                        alert("you need to select current tab in next browser dialog, or screenshots will not work correctly");
+                    }
+                    if (!this.instanceServiceContainer.selectionService.primarySelection) {
+                        this.zoomToFit();
+                        this.disableBackgroud();
+                        const el = this.rootDesignItem.element;
+                        const sel = this.instanceServiceContainer.selectionService.selectedElements;
+                        this.instanceServiceContainer.selectionService.setSelectedElements(null);
+                        await sleep(100);
+                        const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
+                        await exportData(dataURItoBlob(screenshot), "screenshot.png");
+                        this.instanceServiceContainer.selectionService.setSelectedElements(sel);
+                        this.enableBackground();
+                    }
+                    else {
+                        this.disableBackgroud();
+                        const el = this.instanceServiceContainer.selectionService.primarySelection.element;
+                        const sel = this.instanceServiceContainer.selectionService.selectedElements;
+                        this.instanceServiceContainer.selectionService.setSelectedElements(null);
+                        await sleep(100);
+                        const screenshot = await Screenshot.takeScreenshot(el, el.clientWidth, el.clientHeight);
+                        await exportData(dataURItoBlob(screenshot), "screenshot.png");
+                        this.instanceServiceContainer.selectionService.setSelectedElements(sel);
+                        this.enableBackground();
+                    }
+                }
+                break;
+            case CommandType.setTool:
+                {
+                    this.serviceContainer.globalContext.tool = this.serviceContainer.designerTools.get(command.parameter);
+                }
+                break;
+            case CommandType.setStrokeColor:
+                {
+                    this.serviceContainer.globalContext.strokeColor = command.parameter;
+                }
+                break;
+            case CommandType.setFillBrush:
+                {
+                    this.serviceContainer.globalContext.fillBrush = command.parameter;
+                }
+                break;
+            case CommandType.setStrokeThickness:
+                {
+                    this.serviceContainer.globalContext.strokeThickness = command.parameter;
+                }
+                break;
+            case CommandType.delete:
+                this.handleDeleteCommand();
+                break;
+            case CommandType.undo:
+                this.instanceServiceContainer.undoService.undo();
+                break;
+            case CommandType.redo:
+                this.instanceServiceContainer.undoService.redo();
+                break;
+            case CommandType.copy:
+                this.handleCopyCommand();
+                break;
+            case CommandType.cut:
+                this.handleCopyCommand();
+                this.handleDeleteCommand();
+                break;
+            case CommandType.paste:
+                this.handlePasteCommand(command.altKey == true);
+                break;
+            case CommandType.selectAll:
+                this.handleSelectAll();
+                break;
+        }
+    }
+    disableBackgroud() {
+        this._backgroundImage = this._canvas.style.backgroundImage;
+        this._canvas.style.backgroundImage = 'none';
+    }
+    enableBackground() {
+        this._canvas.style.backgroundImage = this._backgroundImage;
+    }
+    zoomToFit() {
+        const autoZomOffset = 10;
+        let maxX = 0, maxY = 0, minX = 0, minY = 0;
+        this.canvasOffset = { x: 0, y: 0 };
+        this.zoomFactor = 1;
+        for (let n of DomHelper.getAllChildNodes(this.rootDesignItem.element)) {
+            if (n instanceof Element) {
+                const rect = n.getBoundingClientRect();
+                minX = minX < rect.x ? minX : rect.x;
+                minY = minY < rect.y ? minY : rect.y;
+                maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
+                maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
+            }
+        }
+        const cvRect = this.getBoundingClientRect();
+        maxX -= cvRect.x;
+        maxY -= cvRect.y;
+        let scaleX = cvRect.width / (maxX / this.zoomFactor);
+        let scaleY = cvRect.height / (maxY / this.zoomFactor);
+        const dimensions = this.getDesignSurfaceDimensions();
+        if (dimensions.width)
+            scaleX = cvRect.width / dimensions.width;
+        if (dimensions.height)
+            scaleY = cvRect.height / dimensions.height;
+        let fak = scaleX < scaleY ? scaleX : scaleY;
+        if (!isNaN(fak))
+            this.zoomFactor = fak;
+        //this._zoomInput.value = Math.round(this.zoomFactor * 100) + '%';
+    }
+    canExecuteCommand(command) {
+        const modelCommandService = this.serviceContainer.modelCommandService;
+        if (modelCommandService) {
+            let handeled = modelCommandService.canExecuteCommand(this, command);
+            if (handeled !== null)
+                return handeled;
+        }
+        if (command.type === CommandType.undo) {
+            return this.instanceServiceContainer.undoService.canUndo();
+        }
+        if (command.type === CommandType.redo) {
+            return this.instanceServiceContainer.undoService.canRedo();
+        }
+        if (command.type === CommandType.setTool) {
+            return this.serviceContainer.designerTools.has(command.parameter);
+        }
+        return true;
+    }
+    /* --- end IUiCommandHandler --- */
+    handleSelectAll() {
+        this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
+    }
+    async handleCopyCommand() {
+        this._lastCopiedPrimaryItem = this.instanceServiceContainer.selectionService.primarySelection;
+        await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
+    }
+    async handlePasteCommand(disableRestoreOfPositions) {
+        const [designItems, positions] = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
+        let grp = this.rootDesignItem.openGroup("Insert");
+        let pasteContainer = this.rootDesignItem;
+        let pCon = this._lastCopiedPrimaryItem?.parent ?? this.instanceServiceContainer.selectionService.primarySelection;
+        while (pCon != null) {
+            const containerStyle = getComputedStyle(pCon.element);
+            let newContainerService;
+            newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(pCon, containerStyle));
+            if (newContainerService) {
+                if (newContainerService.canEnter(pCon, designItems)) {
+                    pasteContainer = pCon;
+                    break;
+                }
+                else {
+                    pCon = pCon.parent;
+                    continue;
+                }
+            }
+        }
+        if (designItems) {
+            let containerPos = this.getNormalizedElementCoordinates(pasteContainer.element);
+            for (let i = 0; i < designItems.length; i++) {
+                let di = designItems[i];
+                let pos = positions ? positions[i] : null;
+                this.instanceServiceContainer.undoService.execute(new InsertAction(pasteContainer, pasteContainer.childCount, di));
+                if (!disableRestoreOfPositions && pos && di.nodeType == NodeType.Element) {
+                    di.setStyle('left', (pos.x - containerPos.x) + 'px');
+                    di.setStyle('top', (pos.y - containerPos.y) + 'px');
+                }
+            }
+            const intializationService = this.serviceContainer.intializationService;
+            if (intializationService) {
+                for (let di of designItems)
+                    intializationService.init(di);
+            }
+            this.instanceServiceContainer.selectionService.setSelectedElements(designItems);
+        }
+        grp.commit();
+        this.snapLines.clearSnaplines();
+    }
+    handleDeleteCommand() {
+        let items = this.instanceServiceContainer.selectionService.selectedElements;
+        this.instanceServiceContainer.undoService.execute(new DeleteAction(items));
+        this.instanceServiceContainer.selectionService.setSelectedElements(null);
+    }
+    initialize(serviceContainer) {
+        this.serviceContainer = serviceContainer;
+        this.instanceServiceContainer = new InstanceServiceContainer(this);
+        const undoService = this.serviceContainer.getLastService('undoService');
+        if (undoService)
+            this.instanceServiceContainer.register("undoService", undoService(this));
+        const selectionService = this.serviceContainer.getLastService('selectionService');
+        if (selectionService) {
+            this.instanceServiceContainer.register("selectionService", selectionService(this));
+            this.instanceServiceContainer.selectionService.onSelectionChanged.on(() => {
+                this._lastCopiedPrimaryItem = null;
+            });
+        }
+        const designItemDocumentPositionService = this.serviceContainer.getLastService('designItemDocumentPositionService');
+        if (designItemDocumentPositionService) {
+            this.instanceServiceContainer.register("designItemDocumentPositionService", designItemDocumentPositionService(this));
+        }
+        this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
+        const contentService = this.serviceContainer.getLastService('contentService');
+        if (contentService) {
+            this.instanceServiceContainer.register("contentService", contentService(this));
+        }
+        const stylesheetService = this.serviceContainer.getLastService('stylesheetService');
+        if (stylesheetService) {
+            const instance = stylesheetService(this);
+            this.instanceServiceContainer.register("stylesheetService", instance);
+            this.instanceServiceContainer.stylesheetService.stylesheetChanged.on((ss) => {
+                if (ss.changeSource == 'extern') {
+                    const ssca = new StylesheetChangedAction(this.instanceServiceContainer.stylesheetService, ss.name, ss.newStyle, ss.oldStyle);
+                    this.instanceServiceContainer.undoService.execute(ssca);
+                }
+                this.applyAllStyles();
+            });
+            this.instanceServiceContainer.stylesheetService.stylesheetsChanged.on(() => {
+                this.applyAllStyles();
+            });
+        }
+        this.extensionManager = new ExtensionManager(this);
+        this.overlayLayer = new OverlayLayerView(serviceContainer);
+        this.overlayLayer.style.pointerEvents = 'none';
+        this.overlayLayer.style.setProperty('margin', '0', 'important');
+        this.overlayLayer.style.setProperty('padding', '0', 'important');
+        this.overlayLayer.style.setProperty('border', 'none', 'important');
+        this.clickOverlay.appendChild(this.overlayLayer);
+        this.snapLines = new Snaplines(this.overlayLayer);
+        this.snapLines.initialize(this.rootDesignItem);
+        if (this.serviceContainer.designerPointerExtensions)
+            for (let pe of this.serviceContainer.designerPointerExtensions) {
+                if (!this._pointerextensions)
+                    this._pointerextensions = [];
+                this._pointerextensions.push(pe.getExtension(this));
+            }
+        if (this.children) {
+            let children = this.children;
+            if (this.children.length == 1 && this.children[0] instanceof HTMLSlotElement) {
+                children = this.children[0].assignedElements();
+            }
+            const parser = this.serviceContainer.getLastServiceWhere('htmlParserService', x => x.constructor == DefaultHtmlParserService);
+            this.addDesignItems(parser.createDesignItems(children, this.serviceContainer, this.instanceServiceContainer));
+        }
+        if (!this.serviceContainer.options.zoomDesignerBackground) {
+            requestAnimationFrame(() => {
+                this._resizeBackgroundGrid();
+            });
+        }
+    }
+    connectedCallback() {
+        if (!this._firstConnect) {
+            this._firstConnect = true;
+            this.clickOverlay.addEventListener(EventNames.PointerDown, this._pointerEventHandler);
+            this.clickOverlay.addEventListener(EventNames.PointerMove, this._pointerEventHandler);
+            this.clickOverlay.addEventListener(EventNames.PointerUp, this._pointerEventHandler);
+            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.onKeyDown, true);
+            this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp, true);
+            this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClick, true);
+        }
+    }
+    _zoomFactorChanged(refreshExtensions = true) {
+        //a@ts-ignore
+        //this._canvasContainer.style.zoom = <any>this._zoomFactor;
+        //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+') translate(' + this._translate.x + ', '+this._translate.y+')';
+        //this._canvasContainer.style.transformOrigin = '0 0';
+        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._fillCalculationrects();
+        this.onZoomFactorChanged.emit(this._zoomFactor);
+        if (refreshExtensions) {
+            this.extensionManager.refreshAllAppliedExtentions();
+            setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 200);
+        }
+        if (!this.serviceContainer.options.zoomDesignerBackground)
+            this._resizeBackgroundGrid();
+    }
+    _resizeBackgroundGrid() {
+        const backgroundGridSize = 10;
+        const backgroundGridFactor = backgroundGridSize * 100 * 2;
+        let canvasWidth = this.canvas.getBoundingClientRect().width;
+        let backgroundGridZoom = backgroundGridFactor / canvasWidth;
+        this.canvas.style.backgroundSize = backgroundGridZoom.toString() + '%';
+    }
+    _updateTransform() {
+        this._scaleFactor = this._zoomFactor;
+        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.overlayLayer.style.transform = this._canvasContainer.style.transform;
+        this.overlayLayer.style.transformOrigin = '0 0';
+        this.snapLines.clearSnaplines();
+    }
+    setDesignItems(designItems) {
+        const setItemsAction = new SetDesignItemsAction(designItems, [...this.rootDesignItem.children()]);
+        this.instanceServiceContainer.undoService.execute(setItemsAction);
+    }
+    _internalSetDesignItems(designItems) {
+        this._fillCalculationrects();
+        this.overlayLayer.removeAllOverlays();
+        DomHelper.removeAllChildnodes(this.overlayLayer);
+        for (let i of [...this.rootDesignItem.children()])
+            this.rootDesignItem._removeChildInternal(i);
+        this.addDesignItems(designItems);
+        this.lazyTriggerReparseDocumentStylesheets();
+        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
+        this.instanceServiceContainer.selectionService._withoutUndoSetSelectedElements(null);
+        setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 50);
+    }
+    reparseTimeout;
+    lazyTriggerReparseDocumentStylesheets() {
+        if (this.reparseTimeout) {
+            clearTimeout(this.reparseTimeout);
+        }
+        this.reparseTimeout = setTimeout(async () => {
+            await this.reparseDocumentStylesheets();
+            clearTimeout(this.reparseTimeout);
+        }, 20);
+    }
+    async reparseDocumentStylesheets() {
+        if (this.instanceServiceContainer.stylesheetService) {
+            const styleElements = this.rootDesignItem.element.querySelectorAll('style');
+            let i = 1;
+            const intStyleSheets = [...styleElements].map(x => ({ name: '&lt;style&gt; #' + (x.id ? x.id + '(' + i++ + ')' : i++), content: DesignItem.GetDesignItem(x).content, designItem: DesignItem.GetDesignItem(x) }));
+            await this.instanceServiceContainer.stylesheetService.setDocumentStylesheets(intStyleSheets);
+        }
+    }
+    addDesignItems(designItems) {
+        if (designItems) {
+            for (let di of designItems) {
+                this.rootDesignItem._insertChildInternal(di);
+            }
+        }
+        const intializationService = this.serviceContainer.intializationService;
+        if (intializationService) {
+            for (let di of designItems)
+                intializationService.init(di);
+        }
+        this.snapLines.clearSnaplines();
+    }
+    _dragOverExtensionItem;
+    _onDragEnter(event) {
+        this._fillCalculationrects();
+        event.preventDefault();
+        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
+        if (hasTransferDataBindingObject) {
+            const ddService = this.serviceContainer.bindableObjectDragDropService;
+            if (ddService) {
+                const el = this.getElementAtPoint({ x: event.x, y: event.y });
+                if (this._lastDdElement != el) {
+                    ddService.dragLeave(this, event, this._lastDdElement);
+                    ddService.dragEnter(this, event, el);
+                    this._lastDdElement = el;
+                }
+            }
+            else {
+                this._lastDdElement = null;
+            }
+        }
+        else {
+            this._lastDdElement = null;
+        }
+    }
+    _onDragLeave(event) {
+        this._fillCalculationrects();
+        event.preventDefault();
+        this._canvas.classList.remove('dragFileActive');
+        if (this._dragOverExtensionItem) {
+            this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+            this._dragOverExtensionItem = null;
+        }
+    }
+    _lastDdElement = null;
+    _onDragOver(event) {
+        event.preventDefault();
+        /*if (this.alignOnSnap) {
+          this.snapLines.calculateSnaplines(this.instanceServiceContainer.selectionService.selectedElements);
+          //TODO: fix this following code...
+          const currentPoint = this.getDesignerMousepoint(event);
+          let containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.rootDesignItem))
+          containerService.finishPlace(this, this.rootDesignItem, this._initialPoint, currentPoint, this.instanceServiceContainer.selectionService.selectedElements);
+        }*/
+        this._fillCalculationrects();
+        if (event.dataTransfer.types.length > 0 && event.dataTransfer.types[0] == 'Files') {
+            const ddService = this.serviceContainer.dragDropService;
+            if (ddService) {
+                const effect = ddService.dragOver(event);
+                event.dataTransfer.dropEffect = effect;
+                if (effect !== 'none')
+                    this._canvas.classList.add('dragFileActive');
+            }
+        }
+        else {
+            const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
+            if (hasTransferDataBindingObject) {
+                const ddService = this.serviceContainer.bindableObjectDragDropService;
+                if (ddService) {
+                    const el = this.getElementAtPoint({ x: event.x, y: event.y });
+                    if (this._lastDdElement != el) {
+                        ddService.dragLeave(this, event, this._lastDdElement);
+                        ddService.dragEnter(this, event, el);
+                        this._lastDdElement = el;
+                    }
+                    const effect = ddService.dragOver(this, event, el);
+                    event.dataTransfer.dropEffect = effect;
+                }
+            }
+            else {
+                let [newContainer] = this._getPossibleContainerForDrop(event);
+                if (this._dragOverExtensionItem != newContainer) {
+                    this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+                    this.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+                    this._dragOverExtensionItem = newContainer;
+                }
+                else {
+                    this.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+                }
+            }
+        }
+    }
+    _getPossibleContainerForDrop(event) {
+        let newContainerElementDesignItem = null;
+        let newContainerService = null;
+        const elementsFromPoint = this.elementsFromPoint(event.x, event.y);
+        for (let e of elementsFromPoint) {
+            if (e == this.rootDesignItem.element) {
+                newContainerElementDesignItem = this.rootDesignItem;
+                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                break;
+            }
+            else if (false) {
+                //check we don't try to move a item over one of its children..
+            }
+            else {
+                newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, this.serviceContainer, this.instanceServiceContainer);
+                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                newContainerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                if (newContainerService) {
+                    if (newContainerService.canEnterByDrop(newContainerElementDesignItem)) {
+                        break;
+                    }
+                    else {
+                        newContainerElementDesignItem = null;
+                        newContainerService = null;
+                        continue;
+                    }
+                }
+            }
+        }
+        return [newContainerElementDesignItem, newContainerService];
+    }
+    async _onDrop(event) {
+        this._lastDdElement = null;
+        event.preventDefault();
+        this._canvas.classList.remove('dragFileActive');
+        this._fillCalculationrects();
+        if (event.dataTransfer.files?.length > 0) {
+            const ddService = this.serviceContainer.dragDropService;
+            if (ddService) {
+                ddService.drop(this, event);
+            }
+        }
+        else {
+            const transferDataBindingObject = event.dataTransfer.getData(dragDropFormatNameBindingObject);
+            if (transferDataBindingObject) {
+                const bo = JSON.parse(transferDataBindingObject);
+                const ddService = this.serviceContainer.bindableObjectDragDropService;
+                if (ddService) {
+                    const el = this.getElementAtPoint({ x: event.x, y: event.y });
+                    const effect = ddService.drop(this, event, bo, el);
+                    event.dataTransfer.dropEffect = effect;
+                }
+            }
+            else {
+                if (this._dragOverExtensionItem) {
+                    this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+                    this._dragOverExtensionItem = null;
+                }
+                let [newContainer] = this._getPossibleContainerForDrop(event);
+                if (!newContainer)
+                    newContainer = this.rootDesignItem;
+                this._fillCalculationrects();
+                //TODO : we need to use container service for adding to element, so also grid and flexbox work correct
+                const transferData = event.dataTransfer.getData(dragDropFormatNameElementDefinition);
+                const elementDefinition = JSON.parse(transferData);
+                const di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
+                const grp = di.openGroup("Insert of &lt;" + di.name + "&gt;");
+                di.setStyle('position', 'absolute');
+                const containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
+                containerService.enterContainer(newContainer, [di]);
+                const containerPos = this.getNormalizedElementCoordinates(newContainer.element);
+                const evCoord = this.getNormalizedEventCoordinates(event);
+                const pos = { x: evCoord.x - containerPos.x, y: evCoord.y - containerPos.y };
+                containerService.place(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
+                containerService.finishPlace(event, this, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
+                this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
+                requestAnimationFrame(() => {
+                    this.instanceServiceContainer.selectionService.setSelectedElements([di]);
+                    grp.commit();
+                });
+            }
+        }
+    }
+    showDesignItemContextMenu(designItem, event) {
+        this._currentContextMenu?.close();
+        const mnuItems = [];
+        for (let cme of this.serviceContainer.designerContextMenuExtensions) {
+            if (cme.shouldProvideContextmenu(event, this, designItem, 'designer')) {
+                mnuItems.push(...cme.provideContextMenuItems(event, this, designItem));
+            }
+        }
+        let ctxMenu = new ContextMenu(mnuItems, null);
+        ctxMenu.display(event);
+        return ctxMenu;
+    }
+    _onDblClick(event) {
+        event.preventDefault();
+        this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
+    }
+    onKeyUp(event) {
+        if (event.composedPath().indexOf(this.eatEvents) >= 0)
+            return;
+        event.preventDefault();
+    }
+    onKeyDown(event) {
+        if (event.composedPath().indexOf(this.eatEvents) >= 0)
+            return;
+        if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey)
+            this.executeCommand({ type: CommandType.undo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'z' && event.shiftKey)
+            this.executeCommand({ type: CommandType.redo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'y')
+            this.executeCommand({ type: CommandType.redo, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'a')
+            this.executeCommand({ type: CommandType.selectAll, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'c')
+            this.executeCommand({ type: CommandType.copy, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'v')
+            this.executeCommand({ type: CommandType.paste, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
+        else if ((event.ctrlKey || event.metaKey) && event.key === 'x')
+            this.executeCommand({ type: CommandType.cut, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
+        else {
+            let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+            if (!primarySelection) {
+                return;
+            }
+            let moveOffset = 1;
+            if (event.shiftKey)
+                moveOffset = 10;
+            switch (event.key) {
+                case 'Delete':
+                case 'Backspace':
+                    this.executeCommand({ type: CommandType.delete, ctrlKey: event.ctrlKey, altKey: event.altKey, shiftKey: event.shiftKey });
+                    break;
+                case 'ArrowUp':
+                    {
+                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('top', parseInt(x.element.style.top) - moveOffset + 'px'));
+                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
+                    }
+                    break;
+                case 'ArrowDown':
+                    {
+                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('top', parseInt(x.element.style.top) + moveOffset + 'px'));
+                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
+                    }
+                    break;
+                case 'ArrowLeft':
+                    {
+                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('left', parseInt(x.element.style.left) - moveOffset + 'px'));
+                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
+                    }
+                    break;
+                case 'ArrowRight':
+                    {
+                        this.instanceServiceContainer.selectionService.selectedElements.forEach(x => x.setStyle('left', parseInt(x.element.style.left) + moveOffset + 'px'));
+                        this.extensionManager.refreshExtensions(this.instanceServiceContainer.selectionService.selectedElements);
+                    }
+                    break;
+            }
+        }
+        event.preventDefault();
+    }
+    /**
+     * Converts the Event x/y coordinates, to the mouse position on the canvas
+     */
+    getNormalizedEventCoordinates(event) {
+        const offsetOfOuterX = (event.clientX - this.outerRect.x) / this.zoomFactor;
+        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;
+        return {
+            x: offsetOfOuterX - offsetOfCanvasX / this.zoomFactor,
+            y: offsetOfOuterY - offsetOfCanvasY / this.zoomFactor
+        };
+    }
+    /**
+     * Converts the Event x/y coordinates, to the mouse position in the viewport
+     */
+    getViewportCoordinates(event) {
+        return {
+            x: (event.clientX - this.outerRect.x),
+            y: (event.clientY - this.outerRect.y)
+        };
+    }
+    getNormalizedTextNodeCoordinates(element, ignoreScalefactor) {
+        let range = document.createRange();
+        range.selectNodeContents(element);
+        let targetRect = range.getBoundingClientRect();
+        return { x: (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) };
+    }
+    getNormalizedElementCoordinates(element, ignoreScalefactor) {
+        if (element.nodeType == NodeType.TextNode) {
+            return this.getNormalizedTextNodeCoordinates(element, ignoreScalefactor);
+        }
+        const targetRect = element.getBoundingClientRect();
+        return { x: (targetRect.x - this.containerBoundingRect.x) / (ignoreScalefactor ? 1 : this.scaleFactor), y: (targetRect.y - this.containerBoundingRect.y) / (ignoreScalefactor ? 1 : this.scaleFactor), width: targetRect.width / (ignoreScalefactor ? 1 : this.scaleFactor), height: targetRect.height / (ignoreScalefactor ? 1 : this.scaleFactor) };
+    }
+    getNormalizedElementCoordinatesAndRealSizes(element) {
+        let ret = this.getNormalizedElementCoordinates(element);
+        const st = getComputedStyle(element);
+        let realWidth = ret.width;
+        let realHeight = ret.height;
+        if (st.boxSizing != 'border-box') {
+            realWidth = realWidth - (parseFloat(st.borderLeft) + parseFloat(st.paddingLeft) + parseFloat(st.paddingRight) + parseFloat(st.borderRight));
+            realHeight = realHeight - (parseFloat(st.borderTop) + parseFloat(st.paddingTop) + parseFloat(st.paddingBottom) + parseFloat(st.borderBottom));
+        }
+        return { ...ret, realWidth, realHeight };
+    }
+    getNormalizedOffsetInElement(event, element) {
+        const normEvt = this.getNormalizedEventCoordinates(event);
+        const normEl = this.getNormalizedElementCoordinates(element);
+        return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
+    }
+    //todo: remove
+    elementFromPoint(x, y) {
+        let elements = this.shadowRoot.elementsFromPoint(x, y);
+        let element = elements[0];
+        if (element === this.clickOverlay)
+            element = elements[1];
+        if (element === this.clickOverlay)
+            element = this._canvas;
+        return element;
+    }
+    elementsFromPoint(x, y) {
+        let retVal = [];
+        let elements = this.shadowRoot.elementsFromPoint(x, y);
+        for (let e of elements) {
+            if (e == this.clickOverlay)
+                continue;
+            if (e == this.overlayLayer)
+                continue;
+            if (e.getRootNode() !== this.shadowRoot)
+                continue;
+            if (e == this._outercanvas2)
+                break;
+            retVal.push(e);
+            if (e === this._canvas)
+                break;
+        }
+        return retVal;
+    }
+    getElementAtPoint(point, ignoreElementCallback) {
+        const elements = this.shadowRoot.elementsFromPoint(point.x, point.y);
+        let currentElement = null;
+        for (let i = 0; i < elements.length; i++) {
+            currentElement = elements[i];
+            if (currentElement == this._outercanvas2) {
+                currentElement = null;
+                break;
+            }
+            if (currentElement == this.clickOverlay) {
+                currentElement = null;
+                continue;
+            }
+            if (currentElement == this.overlayLayer) {
+                currentElement = null;
+                continue;
+            }
+            if (ignoreElementCallback && ignoreElementCallback(currentElement)) {
+                currentElement = null;
+                continue;
+            }
+            if (currentElement.getRootNode() !== this.shadowRoot) {
+                currentElement = null;
+                continue;
+            }
+            break;
+        }
+        return currentElement;
+    }
+    showHoverExtension(element, event) {
+        const currentDesignItem = DesignItem.GetOrCreateDesignItem(element, this.serviceContainer, this.instanceServiceContainer);
+        if (this._lastHoverDesignItem != currentDesignItem) {
+            if (this._lastHoverDesignItem)
+                this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver);
+            if (currentDesignItem && currentDesignItem != this.rootDesignItem && DomHelper.getHost(element.parentNode) !== this.overlayLayer)
+                this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver, event);
+            this._lastHoverDesignItem = currentDesignItem;
+        }
+    }
+    _pointerEventHandler(event, forceElement = null) {
+        if (!this.serviceContainer)
+            return;
+        this._fillCalculationrects();
+        if (this._pointerextensions) {
+            for (let pe of this._pointerextensions)
+                pe.refresh(event);
+        }
+        if (event.composedPath().indexOf(this.eatEvents) >= 0)
+            return;
+        let currentElement;
+        if (forceElement)
+            currentElement = forceElement;
+        else {
+            currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
+            if (!currentElement) {
+                currentElement = this._canvas;
+            }
+            else if (this._enableSelectTextNodesOnClick) {
+                const norm = this.getNormalizedEventCoordinates(event);
+                for (let n of currentElement.childNodes) {
+                    if (n.nodeType == NodeType.TextNode) {
+                        let nc = this.getNormalizedElementCoordinates(n);
+                        if (nc.x <= norm.x && nc.x + nc.width >= norm.x && nc.y <= norm.y && nc.y + nc.height >= norm.y) {
+                            currentElement = n;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        if (this._activeTool) {
+            this._activeTool.pointerEventHandler(this, event, currentElement);
+            return;
+        }
+        this.clickOverlay.style.cursor = this._canvas.style.cursor;
+        const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, this.serviceContainer, this.instanceServiceContainer);
+        this.showHoverExtension(currentDesignItem.element, event);
+        //TODO: needed ??
+        if (currentElement && DomHelper.getHost(currentElement.parentNode) === this.overlayLayer) {
+            if (this.eatEvents)
+                return;
+            currentElement = this.instanceServiceContainer.selectionService.primarySelection?.element ?? this._canvas;
+        }
+        let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer);
+        tool.pointerEventHandler(this, event, currentElement);
+        this._canvas.style.cursor = tool.cursor;
+    }
+    captureActiveTool(tool) {
+        this._activeTool = tool;
+    }
+    releaseActiveTool() {
+        this._activeTool = null;
+    }
+    _fillCalculationrects() {
+        this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
+        this.outerRect = this._outercanvas2.getBoundingClientRect();
+    }
+    addOverlay(element, overlayLayer = OverlayLayer.Normal) {
+        this.overlayLayer.addOverlay(element, overlayLayer);
+    }
+    removeOverlay(element) {
+        this.overlayLayer.removeOverlay(element);
+    }
+    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.zoomPoint(rectCenter, zoomFactor);
+    }
+    zoomPoint(canvasPoint, newZoom) {
+        this.zoomFactor = newZoom;
+        const newCanvasOffset = {
+            x: -(canvasPoint.x) + this.outerRect.width / this.zoomFactor / 2,
+            y: -(canvasPoint.y) + this.outerRect.height / this.zoomFactor / 2
+        };
+        this.canvasOffset = newCanvasOffset;
+    }
+    zoomConvertEventToViewPortCoordinates(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
+        };
+    }
+    zoomTowardsPoint(canvasPoint, newZoom) {
+        const scaleChange = newZoom / this.zoomFactor;
+        const point = this.zoomConvertEventToViewPortCoordinates(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;
+    }
+}
+export { DesignerCanvas };
+customElements.define('node-projects-designer-canvas', DesignerCanvas);