@node-projects/web-component-designer 0.0.102 → 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

@@ -17,6 +17,13 @@ export class DefaultPlacementService {
             return false;
         return true;
     }
+    canEnterByDrop(container) {
+        if (DomConverter.IsSelfClosingElement(container.element.localName))
+            return false;
+        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+            return false;
+        return true;
+    }
     canLeave(container, items) {
         return true;
     }

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

@@ -19,10 +19,11 @@ export class GrayOutExtension extends AbstractExtension {
         this.drawGrayOut(normalizedRect);
     }
     drawGrayOut(r) {
-        const pathPoints = "M0 0 L0 " + this.designerCanvas.outerRect.height + "L" + r.x + " " + this.designerCanvas.outerRect.height + "L" + r.x + " 0" + " L0 0" +
-            "M" + r.x + " 0 L" + r.x + " " + r.y + "L" + this.designerCanvas.outerRect.width + " " + r.y + "L" + this.designerCanvas.outerRect.width + " 0" + "L" + r.x + " 0" +
-            "M" + r.x + " " + (r.y + r.height) + "L" + r.x + " " + this.designerCanvas.outerRect.height + "L" + this.designerCanvas.outerRect.width + " " + this.designerCanvas.outerRect.height + "L" + this.designerCanvas.outerRect.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.outerRect.width + " " + (r.y + r.height) + "L" + this.designerCanvas.outerRect.width + " " + (r.y) + "L" + (r.x + r.width) + " " + r.y;
+        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";
@@ -21,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

@@ -185,39 +185,7 @@ export class PointerTool {
                             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._actionStartedDesignItems)) {
-                                                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) {
@@ -284,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,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.102",
+  "version": "0.0.103",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",