@node-projects/web-component-designer 0.0.100 → 0.0.103

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -63,6 +63,7 @@ import { ZoomToolButtonProvider } from '../widgets/designerView/tools/toolBar/bu
 import { DrawToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js';
 import { TextToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js';
 import { SelectorToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js';
+import { GrayOutDragOverContainerExtensionProvider } from '../widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -111,8 +112,12 @@ export function createDefaultServiceContainer() {
         new GrayOutExtensionProvider()
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOver, [
+        new GrayOutDragOverContainerExtensionProvider(),
         new AltToEnterContainerExtensionProvider()
     ]);
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOver, [
+        new GrayOutDragOverContainerExtensionProvider()
+    ]);
     serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [
         new EditTextExtensionProvider()
     ]);

package/dist/elements/services/placementService/DefaultPlacementService.d.ts

@@ -5,6 +5,7 @@ import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class DefaultPlacementService implements IPlacementService {
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canEnterByDrop(container: IDesignItem): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     private calculateTrack;

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -9,6 +9,15 @@ export class DefaultPlacementService {
         return true;
     }
     canEnter(container, items) {
+        if (DomConverter.IsSelfClosingElement(container.element.localName))
+            return false;
+        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+            return false;
+        if (!items.every(x => !x.element.contains(container.element)))
+            return false;
+        return true;
+    }
+    canEnterByDrop(container) {
         if (DomConverter.IsSelfClosingElement(container.element.localName))
             return false;
         if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)

package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts

@@ -7,6 +7,7 @@ export declare class FlexBoxPlacementService implements IPlacementService {
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canEnterByDrop(container: IDesignItem): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;

package/dist/elements/services/placementService/FlexBoxPlacementService.js

@@ -18,6 +18,9 @@ export class FlexBoxPlacementService {
     canEnter(container, items) {
         return true;
     }
+    canEnterByDrop(container) {
+        return true;
+    }
     canLeave(container, items) {
         return true;
     }

package/dist/elements/services/placementService/GridPlacementService.d.ts

@@ -7,6 +7,7 @@ export declare class GridPlacementService implements IPlacementService {
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canEnterByDrop(container: IDesignItem): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;

package/dist/elements/services/placementService/GridPlacementService.js

@@ -29,6 +29,9 @@ export class GridPlacementService {
     canEnter(container, items) {
         return true;
     }
+    canEnterByDrop(container) {
+        return true;
+    }
     canLeave(container, items) {
         return true;
     }

package/dist/elements/services/placementService/IPlacementService.d.ts

@@ -4,6 +4,7 @@ import { IPlacementView } from "../../widgets/designerView/IPlacementView";
 import { IPoint } from "../../../interfaces/IPoint";
 export interface IPlacementService extends IService {
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): any;
+    canEnterByDrop(container: IDesignItem): any;
     canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): any;
     enterContainer(container: IDesignItem, items: IDesignItem[]): any;

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

@@ -77,9 +77,11 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     _updateTransform(): void;
     setDesignItems(designItems: IDesignItem[]): void;
     addDesignItems(designItems: IDesignItem[]): void;
+    _dragOverExtensionItem: IDesignItem;
     private _onDragEnter;
     private _onDragLeave;
     private _onDragOver;
+    private _getPossibleContainerForDrop;
     private _onDrop;
     showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
     private _onDblClick;

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

@@ -422,6 +422,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         this.snapLines.clearSnaplines();
     }
+    _dragOverExtensionItem;
     _onDragEnter(event) {
         this._fillCalculationrects();
         event.preventDefault();
@@ -446,6 +447,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 event.dataTransfer.dropEffect = effect;
             }
         }
+        if (this._dragOverExtensionItem) {
+            this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+            this._dragOverExtensionItem = null;
+        }
     }
     _onDragOver(event) {
         event.preventDefault();
@@ -466,15 +471,57 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                     this._canvas.classList.add('dragFileActive');
             }
         }
-        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
-        if (hasTransferDataBindingObject) {
-            const ddService = this.serviceContainer.bindableObjectDragDropService;
-            if (ddService) {
-                const effect = ddService.dragOver(this, event);
-                event.dataTransfer.dropEffect = effect;
+        else {
+            const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
+            if (hasTransferDataBindingObject) {
+                const ddService = this.serviceContainer.bindableObjectDragDropService;
+                if (ddService) {
+                    const effect = ddService.dragOver(this, event);
+                    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);
+                    this._dragOverExtensionItem = newContainer;
+                }
             }
         }
     }
+    _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) {
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
@@ -496,16 +543,23 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 }
             }
             else {
+                if (this._dragOverExtensionItem) {
+                    this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+                    this._dragOverExtensionItem = null;
+                }
+                let [newContainer] = this._getPossibleContainerForDrop(event);
+                let pos = this.getNormalizedElementCoordinates(newContainer.element);
                 this._fillCalculationrects();
                 const position = this.getNormalizedEventCoordinates(event);
+                //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");
                 di.setStyle('position', 'absolute');
-                di.setStyle('left', position.x + 'px');
-                di.setStyle('top', position.y + 'px');
-                this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));
+                di.setStyle('left', (position.x - pos.x) + 'px');
+                di.setStyle('top', (position.y - pos.y) + 'px');
+                this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
                 grp.commit();
                 requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
             }

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension copy.d.ts

@@ -0,0 +1,12 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class AltToEnterContainerExtension extends AbstractExtension {
+    private _text;
+    private _rect;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtension copy.js

@@ -0,0 +1,20 @@
+import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
+export class AltToEnterContainerExtension extends AbstractExtension {
+    _text;
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
+        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -4,7 +4,6 @@ import { AbstractExtension } from "./AbstractExtension";
 import { IExtensionManager } from "./IExtensionManger";
 export declare class AltToEnterContainerExtension extends AbstractExtension {
     private _text;
-    private _rect;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;

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

@@ -2,7 +2,6 @@ import { AbstractExtension } from "./AbstractExtension";
 import { OverlayLayer } from "./OverlayLayer.js";
 export class AltToEnterContainerExtension extends AbstractExtension {
     _text;
-    _rect;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -12,7 +11,6 @@ export class AltToEnterContainerExtension extends AbstractExtension {
     refresh() {
         let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
-        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
     }
     dispose() {
         this._removeAllOverlays();

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider copy.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class AltToEnterContainerExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider copy.js

@@ -0,0 +1,14 @@
+import { AltToEnterContainerExtension } from './AltToEnterContainerExtension';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class AltToEnterContainerExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
+    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
+  `;
+}

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

@@ -9,6 +9,5 @@ export class AltToEnterContainerExtensionProvider {
     }
     style = css `
     .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
-    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
   `;
 }

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

@@ -10,6 +10,9 @@ export class ElementDragTitleExtension extends AbstractExtension {
         const boundRect = this.extendedItem.element.getBoundingClientRect();
         this._rect = this._drawRect((boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16, 60, 15, 'svg-primary-selection-move', this._rect);
         this._text = this._drawText(this.extendedItem.name.substring(0, 10) + '…', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
+        const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+        title.textContent = this.extendedItem.name;
+        this._text.appendChild(title);
         this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
         this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
         this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));

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

@@ -1,18 +1,22 @@
 export declare enum ExtensionType {
     Permanent = 1,
     Selection = 2,
-    PrimarySelection = 4,
-    PrimarySelectionContainer = 8,
-    MouseOver = 16,
-    OnlyOneItemSelected = 32,
-    MultipleItemsSelected = 64,
+    PrimarySelection = 3,
+    PrimarySelectionContainer = 4,
+    MouseOver = 5,
+    OnlyOneItemSelected = 6,
+    MultipleItemsSelected = 7,
     /**
      * Extension for the Container wich the dragged element is draged over.
      */
-    ContainerDragOver = 128,
+    ContainerDragOver = 8,
+    /**
+    * Extension for the Container on wich a new element is draged over.
+    */
+    ContainerExternalDragOver = 9,
     /**
      * Extension for the Current Container wich the dragged element is contained.
      */
-    ContainerDrag = 256,
-    Doubleclick = 512
+    ContainerDrag = 10,
+    Doubleclick = 11
 }

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

@@ -2,18 +2,22 @@ export var ExtensionType;
 (function (ExtensionType) {
     ExtensionType[ExtensionType["Permanent"] = 1] = "Permanent";
     ExtensionType[ExtensionType["Selection"] = 2] = "Selection";
-    ExtensionType[ExtensionType["PrimarySelection"] = 4] = "PrimarySelection";
-    ExtensionType[ExtensionType["PrimarySelectionContainer"] = 8] = "PrimarySelectionContainer";
-    ExtensionType[ExtensionType["MouseOver"] = 16] = "MouseOver";
-    ExtensionType[ExtensionType["OnlyOneItemSelected"] = 32] = "OnlyOneItemSelected";
-    ExtensionType[ExtensionType["MultipleItemsSelected"] = 64] = "MultipleItemsSelected";
+    ExtensionType[ExtensionType["PrimarySelection"] = 3] = "PrimarySelection";
+    ExtensionType[ExtensionType["PrimarySelectionContainer"] = 4] = "PrimarySelectionContainer";
+    ExtensionType[ExtensionType["MouseOver"] = 5] = "MouseOver";
+    ExtensionType[ExtensionType["OnlyOneItemSelected"] = 6] = "OnlyOneItemSelected";
+    ExtensionType[ExtensionType["MultipleItemsSelected"] = 7] = "MultipleItemsSelected";
     /**
      * Extension for the Container wich the dragged element is draged over.
      */
-    ExtensionType[ExtensionType["ContainerDragOver"] = 128] = "ContainerDragOver";
+    ExtensionType[ExtensionType["ContainerDragOver"] = 8] = "ContainerDragOver";
+    /**
+    * Extension for the Container on wich a new element is draged over.
+    */
+    ExtensionType[ExtensionType["ContainerExternalDragOver"] = 9] = "ContainerExternalDragOver";
     /**
      * Extension for the Current Container wich the dragged element is contained.
      */
-    ExtensionType[ExtensionType["ContainerDrag"] = 256] = "ContainerDrag";
-    ExtensionType[ExtensionType["Doubleclick"] = 512] = "Doubleclick";
+    ExtensionType[ExtensionType["ContainerDrag"] = 10] = "ContainerDrag";
+    ExtensionType[ExtensionType["Doubleclick"] = 11] = "Doubleclick";
 })(ExtensionType || (ExtensionType = {}));

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

@@ -0,0 +1,11 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GrayOutDragOverContainerExtension extends AbstractExtension {
+    private _rect;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,18 @@
+import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
+export class GrayOutDragOverContainerExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GrayOutDragOverContainerExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,13 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { GrayOutDragOverContainerExtension } from "./GrayOutDragOverContainerExtension.js";
+export class GrayOutDragOverContainerExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new GrayOutDragOverContainerExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
+  `;
+}

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

@@ -0,0 +1,11 @@
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from "./AbstractExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class GrayOutDragOverExtension extends AbstractExtension {
+    private _rect;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,18 @@
+import { AbstractExtension } from "./AbstractExtension";
+import { OverlayLayer } from "./OverlayLayer.js";
+export class GrayOutDragOverExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this._rect = this._drawRect(itemRect.x, itemRect.y, itemRect.width, itemRect.height, 'svg-rect-enter-container', this._rect, OverlayLayer.Foregorund);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -8,6 +8,6 @@ export declare class GrayOutExtension extends AbstractExtension {
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;
-    drawGrayOut(rect: IRect): void;
+    drawGrayOut(r: IRect): void;
     dispose(): void;
 }

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

@@ -15,15 +15,15 @@ export class GrayOutExtension extends AbstractExtension {
             this.overlayLayerView.addOverlay(this._path, OverlayLayer.Background);
             this.overlays.push(this._path);
         }
-        let itemRect = this.extendedItem.element.getBoundingClientRect();
-        this.drawGrayOut(itemRect);
+        let normalizedRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        this.drawGrayOut(normalizedRect);
     }
-    drawGrayOut(rect) {
-        let r = { x: rect.x - this.designerCanvas.containerBoundingRect.x, y: rect.y - this.designerCanvas.containerBoundingRect.y, width: rect.width, height: rect.height };
-        const pathPoints = "M0 0 L0 " + this.designerCanvas.containerBoundingRect.height + "L" + r.x + " " + this.designerCanvas.containerBoundingRect.height + "L" + r.x + " 0" + " L0 0" +
-            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + this.designerCanvas.containerBoundingRect.width + " " + r.y + "L" + this.designerCanvas.containerBoundingRect.width + " 0" + "L" + r.x + " 0" +
-            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + this.designerCanvas.containerBoundingRect.height + "L" + this.designerCanvas.containerBoundingRect.width + " " + this.designerCanvas.containerBoundingRect.height + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
-            "M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y + r.height) + "L" + this.designerCanvas.containerBoundingRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
+    drawGrayOut(r) {
+        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
+        const pathPoints = "M0 0 L0 " + outsideRect.height + "L" + r.x + " " + outsideRect.height + "L" + r.x + " 0" + " L0 0" +
+            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + outsideRect.width + " " + r.y + "L" + outsideRect.width + " 0" + "L" + r.x + " 0" +
+            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + outsideRect.height + "L" + outsideRect.width + " " + outsideRect.height + "L" + outsideRect.width + " " + (r.y + r.height) + "L" + r.x + " " + (r.y + r.height) +
+            "M" + (r.x + r.width) + " " + r.y + "L" + (r.x + r.width) + " " + (r.y + r.height) + "L" + outsideRect.width + " " + (r.y + r.height) + "L" + outsideRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
         this._path.setAttribute("d", pathPoints);
     }
     dispose() {

package/dist/elements/widgets/designerView/tools/PointerTool.d.ts

@@ -1,3 +1,6 @@
+import { IPoint } from "../../../../interfaces/IPoint";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IPlacementService } from "../../../services/placementService/IPlacementService";
 import { IDesignerCanvas } from "../IDesignerCanvas";
 import { ITool } from "./ITool";
 import { ServiceContainer } from "../../../services/ServiceContainer.js";
@@ -7,6 +10,7 @@ export declare class PointerTool implements ITool {
     private _initialPoint;
     private _actionType?;
     private _actionStartedDesignItem?;
+    private _actionStartedDesignItems?;
     private _previousEventName;
     private _dragOverExtensionItem;
     private _dragExtensionItem;
@@ -20,5 +24,6 @@ export declare class PointerTool implements ITool {
     private _resetTool;
     private _pointerActionTypeDrawSelection;
     private _pointerActionTypeDragOrSelect;
+    static FindPossibleContainer(designItem: IDesignItem, designItems: IDesignItem[], event: IPoint): [newContainerElementDesignItem: IDesignItem, newContainerService: IPlacementService];
     keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
 }

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

@@ -9,6 +9,7 @@ export class PointerTool {
     _initialPoint;
     _actionType;
     _actionStartedDesignItem;
+    _actionStartedDesignItems;
     _previousEventName;
     _dragOverExtensionItem;
     _dragExtensionItem;
@@ -69,6 +70,7 @@ export class PointerTool {
             this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, currentElement);
             if (event.type == EventNames.PointerDown) {
                 this._actionStartedDesignItem = currentDesignItem;
+                this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
                 designerCanvas.snapLines.clearSnaplines();
                 if (currentDesignItem !== designerCanvas.rootDesignItem) {
                     this._actionType = PointerActionType.Drag;
@@ -106,6 +108,7 @@ export class PointerTool {
     _resetTool() {
         this._actionType = null;
         this._actionStartedDesignItem = null;
+        this._actionStartedDesignItems = null;
         this._movedSinceStartedAction = false;
         this._initialPoint = null;
     }
@@ -154,6 +157,7 @@ export class PointerTool {
                         if (designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem) < 0)
                             designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
                     }
+                    this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
                     if (designerCanvas.alignOnSnap)
                         designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                     break;
@@ -177,43 +181,11 @@ export class PointerTool {
                             else {
                                 designerCanvas.extensionManager.refreshExtension(dragItem, ExtensionType.ContainerDrag);
                             }
-                            const canLeave = currentContainerService.canLeave(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
+                            const canLeave = currentContainerService.canLeave(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
                             let newContainerElementDesignItem = null;
                             let newContainerService = null;
                             if (canLeave) {
-                                const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y);
-                                for (let e of elementsFromPoint) {
-                                    if (e == this._actionStartedDesignItem.element) {
-                                        continue;
-                                    }
-                                    else if (e == this._actionStartedDesignItem.parent.element) {
-                                        break;
-                                    }
-                                    else if (e == designerCanvas.rootDesignItem.element) {
-                                        newContainerElementDesignItem = designerCanvas.rootDesignItem;
-                                        const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                                        newContainerService = designerCanvas.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, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                                        const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                                        newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                                        if (newContainerService) {
-                                            if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
-                                                break;
-                                            }
-                                            else {
-                                                newContainerElementDesignItem = null;
-                                                newContainerService = null;
-                                                continue;
-                                            }
-                                        }
-                                    }
-                                }
+                                [newContainerElementDesignItem, newContainerService] = PointerTool.FindPossibleContainer(this._actionStartedDesignItem, this._actionStartedDesignItems, event);
                                 //if we found a new enterable container create extensions 
                                 if (newContainerElementDesignItem != null) {
                                     if (this._dragOverExtensionItem != newContainerElementDesignItem) {
@@ -237,17 +209,18 @@ export class PointerTool {
                                 const oldOffset = currentContainerService.getElementOffset(this._actionStartedDesignItem.parent, this._actionStartedDesignItem);
                                 const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem);
                                 this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
-                                currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
-                                newContainerElementDesignItem._insertChildInternal(this._actionStartedDesignItem);
+                                currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
+                                for (let di of this._actionStartedDesignItems)
+                                    newContainerElementDesignItem._insertChildInternal(di); //todo -> maybe in enter container???
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
-                                newContainerService.enterContainer(newContainerElementDesignItem, [this._actionStartedDesignItem]);
-                                newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                                newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems);
+                                newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
                             }
                             else {
                                 const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
-                                currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                                currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
                             }
-                            designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                            designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems);
                         }
                     }
                     break;
@@ -279,5 +252,44 @@ export class PointerTool {
                 }
         }
     }
+    static FindPossibleContainer(designItem, designItems, event) {
+        let newContainerElementDesignItem = null;
+        let newContainerService = null;
+        const designerCanvas = designItem.instanceServiceContainer.designerCanvas;
+        const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y);
+        for (let e of elementsFromPoint) {
+            if (e == designItem.element) {
+                continue;
+            }
+            else if (e == designItem.parent.element) {
+                break;
+            }
+            else if (e == designerCanvas.rootDesignItem.element) {
+                newContainerElementDesignItem = designerCanvas.rootDesignItem;
+                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                newContainerService = designerCanvas.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, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
+                newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
+                if (newContainerService) {
+                    if (newContainerService.canEnter(newContainerElementDesignItem, designItems)) {
+                        break;
+                    }
+                    else {
+                        newContainerElementDesignItem = null;
+                        newContainerService = null;
+                        continue;
+                    }
+                }
+            }
+        }
+        return [newContainerElementDesignItem, newContainerService];
+    }
     keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

package/dist/index.d.ts

@@ -139,6 +139,8 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";
+export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";

package/dist/index.js

@@ -99,6 +99,8 @@ export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvide
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtension.js";
 export * from "./elements/widgets/designerView/extensions/GrayOutExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtension.js";
+export * from "./elements/widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/GridExtension.js";
 export * from "./elements/widgets/designerView/extensions/GridExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/InvisibleDivExtension.js";

package/package.json

@@ -1,42 +1,42 @@
-{
-  "description": "A UI designer for Polymer apps",
-  "name": "@node-projects/web-component-designer",
-  "version": "0.0.100",
-  "type": "module",
-  "main": "./dist/index.js",
-  "author": "",
-  "license": "MIT",
-  "scripts": {
-    "tsc": "tsc",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
-    "build": "tsc",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.9.1",
-    "construct-style-sheets-polyfill": "^3.1.0"
-  },
-  "devDependencies": {
-    "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.26",
-    "@types/codemirror": "^5.60.5",
-    "@types/jquery": "^3.5.14",
-    "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.5.1",
-    "codemirror": "^5.65.4",
-    "esprima-next": "^5.8.2",
-    "html2canvas": "*",
-    "jest": "^28.1.0",
-    "jquery": "^3.6.0",
-    "jquery.fancytree": "^2.38.1",
-    "monaco-editor": "^0.33.0",
-    "ts-jest": "^28.0.3",
-    "typescript": "^4.7.2",
-    "typescript-lit-html-plugin": "^0.9.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-projects/web-component-designer.git"
-  }
-}
+{
+  "description": "A UI designer for Polymer apps",
+  "name": "@node-projects/web-component-designer",
+  "version": "0.0.103",
+  "type": "module",
+  "main": "./dist/index.js",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@node-projects/base-custom-webcomponent": "^0.9.1",
+    "construct-style-sheets-polyfill": "^3.1.0"
+  },
+  "devDependencies": {
+    "@node-projects/lean-he-esm": "^3.3.0",
+    "@node-projects/node-html-parser-esm": "^2.4.1",
+    "@papyrs/stylo": "^0.0.30",
+    "@types/codemirror": "^5.60.5",
+    "@types/jquery": "^3.5.14",
+    "@types/jquery.fancytree": "0.0.7",
+    "ace-builds": "^1.7.1",
+    "codemirror": "^6.0.1",
+    "esprima-next": "^5.8.3",
+    "html2canvas": "*",
+    "jest": "^28.1.2",
+    "jquery": "^3.6.0",
+    "jquery.fancytree": "^2.38.2",
+    "monaco-editor": "^0.33.0",
+    "ts-jest": "^28.0.5",
+    "typescript": "^4.7.4",
+    "typescript-lit-html-plugin": "^0.9.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-projects/web-component-designer.git"
+  }
+}