@node-projects/web-component-designer 0.0.14 → 0.0.19

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

@@ -56,6 +56,7 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
         this.extensionManager = new ExtensionManager(this);
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
+        this._onDblClickBound = this._onDblClick.bind(this);
         this._onContextMenuBound = this._onContextMenu.bind(this);
         this._pointerEventHandlerBound = this._pointerEventHandler.bind(this);
         this._canvas.oncontextmenu = this._onContextMenuBound;
@@ -230,10 +231,12 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
             this._outercanvas2.addEventListener(EventNames.PointerMove, this._pointerEventHandlerBound);
             this._outercanvas2.addEventListener(EventNames.PointerUp, this._pointerEventHandlerBound);
             this._canvas.addEventListener(EventNames.DragEnter, event => this._onDragEnter(event));
+            this._canvas.addEventListener(EventNames.DragLeave, event => this._onDragLeave(event));
             this._canvas.addEventListener(EventNames.DragOver, event => this._onDragOver(event));
             this._canvas.addEventListener(EventNames.Drop, event => this._onDrop(event));
-            this._canvas.addEventListener('keydown', this._onKeyDownBound, true);
-            this._canvas.addEventListener('keyup', this._onKeyUpBound, true);
+            this._canvas.addEventListener(EventNames.KeyDown, this._onKeyDownBound, true);
+            this._canvas.addEventListener(EventNames.KeyUp, this._onKeyUpBound, true);
+            this._canvas.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
             this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
         }
     }
@@ -279,24 +282,17 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
                 intializationService.init(di);
         }
         this.snapLines.clearSnaplines();
-        requestAnimationFrame(() => this._removeDraggableOnImages());
-    }
-    _removeDraggableOnImages() {
-        this._removeDraggableOnImagesInner(this.rootDesignItem.element.querySelectorAll('*'));
-    }
-    _removeDraggableOnImagesInner(elements) {
-        for (let e of elements) {
-            if (e.shadowRoot) {
-                this._removeDraggableOnImagesInner((e.shadowRoot).querySelectorAll('*'));
-            }
-            if (e.localName == 'img') {
-                e.draggable = false;
-            }
-        }
+        const prepService = this.serviceContainer.prepareElementsForDesignerService;
+        if (prepService)
+            requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.rootDesignItem));
     }
     _onDragEnter(event) {
         event.preventDefault();
     }
+    _onDragLeave(event) {
+        event.preventDefault();
+        this._canvas.classList.remove('dragFileActive');
+    }
     _onDragOver(event) {
         event.preventDefault();
         /*if (this.alignOnSnap) {
@@ -306,21 +302,39 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
           let containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.rootDesignItem))
           containerService.finishPlace(this, this.rootDesignItem, this._initialPoint, currentPoint, this.instanceServiceContainer.selectionService.selectedElements);
         }*/
+        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');
+            }
+        }
     }
     async _onDrop(event) {
         event.preventDefault();
-        this._fillCalculationrects();
-        let transferData = event.dataTransfer.getData(dragDropFormatName);
-        let elementDefinition = JSON.parse(transferData);
-        let di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
-        let grp = di.openGroup("Insert");
-        di.setStyle('position', 'absolute');
-        const targetRect = event.target.getBoundingClientRect();
-        di.setStyle('top', event.offsetY + targetRect.top - this.containerBoundingRect.y + 'px');
-        di.setStyle('left', event.offsetX + targetRect.left - this.containerBoundingRect.x + 'px');
-        this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
-        grp.commit();
-        requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
+        this._canvas.classList.remove('dragFileActive');
+        if (event.dataTransfer.files.length > 0) {
+            const ddService = this.serviceContainer.dragDropService;
+            if (ddService) {
+                ddService.drop(this, event);
+            }
+        }
+        else {
+            this._fillCalculationrects();
+            let transferData = event.dataTransfer.getData(dragDropFormatName);
+            let elementDefinition = JSON.parse(transferData);
+            let di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
+            let grp = di.openGroup("Insert");
+            di.setStyle('position', 'absolute');
+            const targetRect = event.target.getBoundingClientRect();
+            di.setStyle('top', event.offsetY + targetRect.top - this.containerBoundingRect.y + 'px');
+            di.setStyle('left', event.offsetX + targetRect.left - this.containerBoundingRect.x + 'px');
+            this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
+            grp.commit();
+            requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
+        }
     }
     _onWheel(event) {
         if (event.ctrlKey) {
@@ -350,7 +364,13 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
         let ctxMnu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
         return ctxMnu;
     }
+    _onDblClick(event) {
+        event.preventDefault();
+        this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick);
+    }
     onKeyUp(event) {
+        if (event.composedPath().indexOf(this.eatEvents) >= 0)
+            return;
         switch (event.key) {
             case 'ArrowUp':
                 //this._resetPointerEventsForClickThrough();
@@ -359,6 +379,8 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
         event.preventDefault();
     }
     onKeyDown(event) {
+        if (event.composedPath().indexOf(this.eatEvents) >= 0)
+            return;
         //TODO: keyboard events maybe should also be handeled by tools 
         if ((event.ctrlKey || event.metaKey) && event.key === 'z' && !event.shiftKey)
             this.executeCommand({ type: CommandType.undo });
@@ -473,6 +495,8 @@ export class DesignerView extends BaseCustomWebComponentLazyAppend {
     }
     _pointerEventHandler(event) {
         var _a, _b;
+        if (event.composedPath().indexOf(this.eatEvents) >= 0)
+            return;
         if (event.button == 2)
             return;
         let currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
@@ -540,6 +564,11 @@ DesignerView.style = css `
       transform-origin: 0 0;
     }
 
+    #canvas.dragFileActive {
+      outline: blue 4px solid;
+      outline-offset: -4px;
+    }
+
     node-projects-overlay-layer-view {
       box-sizing: border-box;
       width: 100%;
@@ -618,7 +647,7 @@ DesignerView.template = html `
             <div id="outercanvas2">
               <div id="canvasContainer">
                 <!-- <div id="zoomHelper" style="width: 10px; height: 10px; position: absolute; top: 0; left: 0; pointer-events: none;"></div> -->
-                <div id="canvas" tabindex="0"></div>
+                <div id="canvas" part="canvas" tabindex="0"></div>
               </div>
             </div>
           </div>

package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtension.d.ts

@@ -0,0 +1,14 @@
+import { IDesignItem } from "../../../../item/IDesignItem.js";
+import { IDesignerView } from "../../IDesignerView.js";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from "../IExtensionManger.js";
+export declare class EditTextCkEditorExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerView, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _contentEdited(): void;
+    _blur(): void;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtension.js

@@ -0,0 +1,42 @@
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+export class EditTextCkEditorExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this._contentEditedBound = this._contentEdited.bind(this);
+        this._blurBound = this._blur.bind(this);
+    }
+    extend() {
+        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerView.eatEvents = this.extendedItem.element;
+        //@ts-ignore
+        BalloonEditor
+            .create(this.extendedItem.element)
+            .catch(error => {
+            console.error(error);
+        });
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        //this.designerView.disableKeyboardEvents = false;
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtensionProvider.d.ts

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

package/dist/elements/widgets/designerView/extensions/EditText/EditTextCkEditorExtensionProvider.js

@@ -0,0 +1,9 @@
+import { EditTextCkEditorExtension } from "./EditTextCkEditorExtension.js";
+export class EditTextCkEditorExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextCkEditorExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.d.ts

@@ -0,0 +1,17 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerView } from "../../IDesignerView";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    private static template;
+    private _blurTimeout;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerView, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _contentEdited(): void;
+    _blur(): void;
+    _formatSelection(type: string): void;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -0,0 +1,78 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+export class EditTextExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this._contentEditedBound = this._contentEdited.bind(this);
+        this._blurBound = this._blur.bind(this);
+    }
+    extend() {
+        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.element.setAttribute('contenteditable', '');
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerView.eatEvents = this.extendedItem.element;
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const elements = EditTextExtension.template.content.cloneNode(true);
+        elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
+        let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerView.containerBoundingRect.x));
+        foreignObject.setAttribute('y', '' + (itemRect.y - this.designerView.containerBoundingRect.y - 32));
+        foreignObject.setAttribute('width', '50');
+        foreignObject.setAttribute('height', '32');
+        foreignObject.appendChild(elements);
+        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
+        this.overlays.push(foreignObject);
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        this.designerView.eatEvents = null;
+        this.extendedItem.updateChildrenFromNodesChildren();
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        if (!this._blurTimeout) {
+            this._blurTimeout = setTimeout(() => {
+                this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+            }, 150);
+        }
+    }
+    _formatSelection(type) {
+        if (this._blurTimeout)
+            clearTimeout(this._blurTimeout);
+        this._blurTimeout = null;
+        const selection = this.designerView.shadowRoot.getSelection();
+        console.log(selection);
+        switch (type) {
+            case 'bold':
+                document.execCommand('bold', false, null);
+                break;
+        }
+        this.extendedItem.element.focus();
+    }
+}
+EditTextExtension.template = html `
+    <div style="height: 24px;">
+      <button data-command="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
+      <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
+      <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
+      <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
+    </div>
+  `;

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.d.ts

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

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js

@@ -0,0 +1,11 @@
+import { EditTextExtension } from "./EditTextExtension.js";
+export class EditTextExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.name === 'button' || designItem.name === 'input')
+            return false;
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextExtension(extensionManager, designerView, designItem);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtension.d.ts

@@ -0,0 +1,27 @@
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerView } from "../../IDesignerView";
+import { AbstractExtension } from '../AbstractExtension';
+import { IExtensionManager } from "../IExtensionManger";
+export declare class EditTextTinyMceExtension extends AbstractExtension {
+    private _contentEditedBound;
+    private _blurBound;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerView, extendedItem: IDesignItem);
+    tinyMceConfig: {
+        target: any;
+        menubar: boolean;
+        inline: boolean;
+        plugins: string[];
+        toolbar: string[];
+        valid_elements: string;
+        valid_styles: {
+            '*': string;
+        };
+        powerpaste_word_import: string;
+        powerpaste_html_import: string;
+    };
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _contentEdited(): void;
+    _blur(): void;
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtension.js

@@ -0,0 +1,61 @@
+import { AbstractExtension } from '../AbstractExtension';
+import { ExtensionType } from "../ExtensionType.js";
+export class EditTextTinyMceExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this.tinyMceConfig = {
+            target: null,
+            menubar: false,
+            inline: true,
+            plugins: [
+                'link',
+                'lists',
+                'powerpaste',
+                'autolink',
+                'tinymcespellchecker'
+            ],
+            toolbar: [
+                'undo redo | bold italic underline | fontselect fontsizeselect',
+                'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent'
+            ],
+            valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
+            valid_styles: {
+                '*': 'font-size,font-family,color,text-decoration,text-align'
+            },
+            powerpaste_word_import: 'clean',
+            powerpaste_html_import: 'clean',
+        };
+        this._contentEditedBound = this._contentEdited.bind(this);
+        this._blurBound = this._blur.bind(this);
+    }
+    extend() {
+        //todo -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.focus();
+        this.designerView.eatEvents = this.extendedItem.element;
+        this.tinyMceConfig.target = this.extendedItem.element;
+        //@ts-ignore
+        tinymce.init(this.tinyMceConfig);
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        //this.designerView.disableKeyboardEvents = false;
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+    }
+}

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtensionProvider.d.ts

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

package/dist/elements/widgets/designerView/extensions/EditText/EditTextTinyMceExtensionProvider.js

@@ -0,0 +1,9 @@
+import { EditTextTinyMceExtension } from "./EditTextTinyMceExtension.js";
+export class EditTextTinyMceExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextTinyMceExtension(extensionManager, designerView, designItem);
+    }
+}

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

@@ -13,5 +13,9 @@ export declare enum ExtensionType {
     /**
      * Extension for the Current Container wich the dragged element is contained.
      */
-    ContainerDrag = 256
+    ContainerDrag = 256,
+    /**
+     * Extension for the Current Container wich the dragged element is contained.
+     */
+    Doubleclick = 512
 }

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

@@ -15,4 +15,8 @@ export var ExtensionType;
      * Extension for the Current Container wich the dragged element is contained.
      */
     ExtensionType[ExtensionType["ContainerDrag"] = 256] = "ContainerDrag";
+    /**
+     * Extension for the Current Container wich the dragged element is contained.
+     */
+    ExtensionType[ExtensionType["Doubleclick"] = 512] = "Doubleclick";
 })(ExtensionType || (ExtensionType = {}));

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

@@ -1,4 +1,5 @@
 import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
 export class GridExtension extends AbstractExtension {
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
@@ -83,21 +84,21 @@ export class GridExtension extends AbstractExtension {
             for (let yIdx = 0; yIdx < columns.length; yIdx++) {
                 const c = columns[yIdx];
                 if (x > 0 && xGap) {
-                    this._drawRect(x + xOffset, y + yOffset, xGap, currY, 'svg-grid-gap');
+                    this._drawRect(x + xOffset, y + yOffset, xGap, currY, 'svg-grid-gap', null, OverlayLayer.Background);
                     x += xGap;
                 }
                 const currX = Number.parseFloat(c.replace('px', ''));
                 if (y > 0 && yGap) {
-                    this._drawRect(x + xOffset, y + yOffset - yGap, currX, yGap, 'svg-grid-gap');
+                    this._drawRect(x + xOffset, y + yOffset - yGap, currX, yGap, 'svg-grid-gap', null, OverlayLayer.Background);
                 }
                 if (areas) {
                     const nm = areas[cl].trim();
                     if (nm != '.') {
-                        const text = this._drawText(nm, x + xOffset, y + yOffset, 'svg-grid-area');
+                        const text = this._drawText(nm, x + xOffset, y + yOffset, 'svg-grid-area', null, OverlayLayer.Background);
                         text.setAttribute("dominant-baseline", "hanging");
                     }
                 }
-                this._drawRect(x + xOffset, y + yOffset, currX, currY, 'svg-grid');
+                this._drawRect(x + xOffset, y + yOffset, currX, currY, 'svg-grid', null, OverlayLayer.Background);
                 x += currX;
                 cl++;
             }

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

@@ -27,7 +27,7 @@ export class RotateExtension extends AbstractExtension {
         g.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeRotate(event));
         g.setAttribute('class', 'svg-selection svg-primary-rotate');
         g.setAttribute('transform', 'translate(' + (itemRect.x - this.designerView.containerBoundingRect.x - 13) + ',' + (itemRect.y - this.designerView.containerBoundingRect.y - 8.5) + ')');
-        this.overlayLayerView.appendChild(g);
+        this.overlayLayerView.addOverlay(g);
         this.overlays.push(g);
     }
     _pointerActionTypeRotate(event) {

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

@@ -1,7 +1,7 @@
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from './extensions/OverlayLayer.js';
 import { ServiceContainer } from '../../services/ServiceContainer';
-export declare class OverlayLayerView extends BaseCustomWebComponentLazyAppend {
+export declare class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     static readonly template: HTMLTemplateElement;
     static readonly style: CSSStyleSheet;
     static readonly is = "node-projects-overlay-layer-view";

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

@@ -1,6 +1,6 @@
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { OverlayLayer } from './extensions/OverlayLayer.js';
-export class OverlayLayerView extends BaseCustomWebComponentLazyAppend {
+export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     constructor(serviceContainer) {
         super();
         this._serviceContainer = serviceContainer;
@@ -62,6 +62,7 @@ OverlayLayerView.style = css `
     svg {
       width: 100%;
       height: 100%;
+      overflow: visible;
     }
 
     .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }

package/dist/enums/EventNames.d.ts

@@ -3,9 +3,13 @@ export declare enum EventNames {
     PointerMove = "pointermove",
     PointerUp = "pointerup",
     DragEnter = "dragenter",
+    DragLeave = "dragleave",
     DragOver = "dragover",
     Drop = "drop",
     Scroll = "scroll",
     Wheel = "wheel",
-    ContextMenu = "contextmenu"
+    ContextMenu = "contextmenu",
+    KeyDown = "keydown",
+    KeyUp = "keyup",
+    DblClick = "dblclick"
 }

package/dist/enums/EventNames.js

@@ -4,9 +4,13 @@ export var EventNames;
     EventNames["PointerMove"] = "pointermove";
     EventNames["PointerUp"] = "pointerup";
     EventNames["DragEnter"] = "dragenter";
+    EventNames["DragLeave"] = "dragleave";
     EventNames["DragOver"] = "dragover";
     EventNames["Drop"] = "drop";
     EventNames["Scroll"] = "scroll";
     EventNames["Wheel"] = "wheel";
     EventNames["ContextMenu"] = "contextmenu";
+    EventNames["KeyDown"] = "keydown";
+    EventNames["KeyUp"] = "keyup";
+    EventNames["DblClick"] = "dblclick";
 })(EventNames || (EventNames = {}));

package/dist/index.d.ts

@@ -17,12 +17,18 @@ export * from "./elements/services/bindableObjectsService/BindableObjectType.js"
 export type { IBindableObject } from "./elements/services/bindableObjectsService/IBindableObject.js";
 export type { IBindableObjectsService } from "./elements/services/bindableObjectsService/IBindableObjectsService.js";
 export * from "./elements/services/placementService/DefaultPlacementService.js";
+export * from "./elements/services/placementService/FlexBoxPlacementService.js";
+export * from "./elements/services/placementService/GridPlacementService.js";
 export type { IPlacementService } from "./elements/services/placementService/IPlacementService.js";
+export * from "./elements/services/placementService/SnaplinesProviderService.js";
+export type { ISnaplinesProviderService } from "./elements/services/placementService/ISnaplinesProviderService.js";
 export * from "./elements/services/elementAtPointService/ElementAtPointService.js";
 export type { IElementAtPointService } from "./elements/services/elementAtPointService/IElementAtPointService.js";
 export * from "./elements/services/contentService/ContentService.js";
 export type { IContentChanged } from "./elements/services/contentService/IContentChanged.js";
 export type { IContentService } from "./elements/services/contentService/IContentService.js";
+export * from "./elements/services/dragDropService/DragDropService.js";
+export type { IDragDropService } from "./elements/services/dragDropService/IDragDropService.js";
 export type { IElementDefinition } from "./elements/services/elementsService/IElementDefinition.js";
 export type { IElementsJson } from "./elements/services/elementsService/IElementsJson.js";
 export type { IElementsService } from "./elements/services/elementsService/IElementsService.js";
@@ -36,6 +42,8 @@ export type { IHtmlParserService } from "./elements/services/htmlParserService/I
 export type { IIntializationService } from "./elements/services/initializationService/IIntializationService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export type { IInstanceService } from "./elements/services/instanceService/IInstanceService.js";
+export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
+export type { IPrepareElementsForDesignerService } from "./elements/services/instanceService/IPrepareElementsForDesignerService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";