@node-projects/web-component-designer 0.0.252 → 0.0.253

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

@@ -8,6 +8,7 @@ import { IDesignerExtension } from '../widgets/designerView/extensions/IDesigner
 import { ISize } from '../../interfaces/ISize.js';
 import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
 import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
+import { IPlacementService } from '../services/placementService/IPlacementService.js';
 export declare class DesignItem implements IDesignItem {
     lastContainerSize: ISize;
     parsedNode: any;
@@ -85,4 +86,5 @@ export declare class DesignItem implements IDesignItem {
     _insertChildInternal(designItem: IDesignItem, index?: number): void;
     _removeChildInternal(designItem: IDesignItem): void;
     _refreshIfStyleSheet(): void;
+    getPlacementService(style?: CSSStyleDeclaration): IPlacementService;
 }

package/dist/elements/item/DesignItem.js

@@ -422,8 +422,10 @@ export class DesignItem {
     }
     // Internal implementations wich don't use undo/redo
     _insertChildInternal(designItem, index) {
-        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem) {
             designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
+        }
         if (designItem.parent) {
             designItem.parent._removeChildInternal(designItem);
         }
@@ -438,13 +440,18 @@ export class DesignItem {
         }
         designItem._parent = this;
         //todo: is this still needed???
-        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
+        if (this.instanceServiceContainer.selectionService.primarySelection == designItem) {
             designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+            if (designItem.getPlacementService().isEnterableContainer(this))
+                designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
+        }
         this._refreshIfStyleSheet();
     }
     _removeChildInternal(designItem) {
-        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem) {
             designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionAndCanBeEntered);
+        }
         designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtensions([designItem], true);
         const index = this._childArray.indexOf(designItem);
         if (index > -1) {
@@ -465,4 +472,8 @@ export class DesignItem {
         else if (this.name == 'link') {
         }
     }
+    getPlacementService(style) {
+        style ??= getComputedStyle(this.element);
+        return this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this, style));
+    }
 }

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

@@ -7,6 +7,7 @@ import { IDesignerExtension } from '../widgets/designerView/extensions/IDesigner
 import { ISize } from "../../interfaces/ISize.js";
 import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
 import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
+import { IPlacementService } from '../services/placementService/IPlacementService.js';
 export interface IDesignItem {
     lastContainerSize: ISize;
     replaceNode(newNode: Node): any;
@@ -67,4 +68,5 @@ export interface IDesignItem {
     hideAtDesignTime: boolean;
     hideAtRunTime: boolean;
     lockAtDesignTime: boolean;
+    getPlacementService(style?: CSSStyleDeclaration): IPlacementService;
 }

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -85,6 +85,10 @@ import { MultipleSelectionRectExtensionProvider } from '../widgets/designerView/
 import { DragDropService } from './dragDropService/DragDropService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
+    let defaultPlacementService = new DefaultPlacementService();
+    serviceContainer.register("containerService", defaultPlacementService);
+    serviceContainer.register("containerService", new GridPlacementService(defaultPlacementService));
+    serviceContainer.register("containerService", new FlexBoxPlacementService(defaultPlacementService));
     serviceContainer.register("propertyService", new PolymerPropertiesService());
     serviceContainer.register("propertyService", new LitElementPropertiesService());
     serviceContainer.register("propertyService", new NativeElementsPropertiesService());
@@ -95,9 +99,6 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("instanceService", new DefaultInstanceService());
     serviceContainer.register("editorTypesService", new DefaultEditorTypesService());
     serviceContainer.register("htmlWriterService", new HtmlWriterService());
-    serviceContainer.register("containerService", new DefaultPlacementService());
-    serviceContainer.register("containerService", new GridPlacementService());
-    serviceContainer.register("containerService", new FlexBoxPlacementService());
     serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService());
     serviceContainer.register("htmlParserService", new DefaultHtmlParserService());
     serviceContainer.register("elementAtPointService", new ElementAtPointService());
@@ -118,9 +119,6 @@ export function createDefaultServiceContainer() {
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ElementDragTitleExtensionProvider(),
-        new DisplayGridExtensionProvider(),
-        new EditGridColumnRowSizesExtensionProvider(),
-        new FlexboxExtensionProvider(),
         new TransformOriginExtensionProvider(),
         new CanvasExtensionProvider(),
         new PositionExtensionProvider(),
@@ -132,10 +130,15 @@ export function createDefaultServiceContainer() {
         new RotateExtensionProvider(),
         new MultipleSelectionRectExtensionProvider(),
     ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionAndCanBeEntered, [
+        new DisplayGridExtensionProvider(),
+        new EditGridColumnRowSizesExtensionProvider(),
+        new FlexboxExtensionProvider(),
+    ]);
     serviceContainer.designerExtensions.set(ExtensionType.Selection, [
         new SelectionDefaultExtensionProvider()
     ]);
-    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainer, [
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainerAndCanBeEntered, [
         new DisplayGridExtensionProvider(),
         new EditGridColumnRowSizesExtensionProvider(),
         new FlexboxExtensionProvider()
@@ -149,11 +152,11 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.ContainerDrag, [
         new GrayOutExtensionProvider()
     ]);
-    serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOver, [
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOverAndCanBeEntered, [
         new ApplyFirstMachingExtensionProvider(new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider()),
         new AltToEnterContainerExtensionProvider()
     ]);
-    serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOver, [
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOverAndCanBeEntered, [
         new ApplyFirstMachingExtensionProvider(new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider()),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [

package/dist/elements/services/dragDropService/DragDropService.js

@@ -10,28 +10,28 @@ export class DragDropService {
     }
     dragLeave(designerCanvas, event) {
         if (this._dragOverExtensionItem) {
-            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOverAndCanBeEntered);
             this._dragOverExtensionItem = null;
         }
     }
     dragOver(designerCanvas, event) {
         let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event);
         if (this._dragOverExtensionItem != newContainer) {
-            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
-            designerCanvas.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOverAndCanBeEntered);
+            designerCanvas.extensionManager.applyExtension(newContainer, ExtensionType.ContainerExternalDragOverAndCanBeEntered, event);
             this._dragOverExtensionItem = newContainer;
         }
         else {
             if (event.x != this._oldX && event.y != this._oldY) {
                 this._oldX = event.x;
                 this._oldY = event.y;
-                designerCanvas.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOver, event);
+                designerCanvas.extensionManager.refreshExtension(newContainer, ExtensionType.ContainerExternalDragOverAndCanBeEntered, event);
             }
         }
     }
     async drop(designerCanvas, event) {
         if (this._dragOverExtensionItem) {
-            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
+            designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOverAndCanBeEntered);
             this._dragOverExtensionItem = null;
         }
         let [newContainer] = this.getPossibleContainerForDragDrop(designerCanvas, event);
@@ -76,7 +76,7 @@ export class DragDropService {
                 newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
                 if (newContainerService) {
                     //TODO: Maybe the check for SVG Elemnt should be in "canEnterByDrop"?
-                    if (newContainerService.canEnterByDrop(newContainerElementDesignItem) && !(newContainerElementDesignItem.element instanceof SVGElement)) {
+                    if (newContainerService.isEnterableContainer(newContainerElementDesignItem) && !(newContainerElementDesignItem.element instanceof SVGElement)) {
                         break;
                     }
                     else {

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

@@ -4,8 +4,8 @@ import type { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class DefaultPlacementService implements IPlacementService {
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    isEnterableContainer(container: IDesignItem): 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

@@ -10,19 +10,17 @@ export class DefaultPlacementService {
             return false;
         return true;
     }
-    canEnter(container, items) {
+    isEnterableContainer(container) {
         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))
+    canEnter(container, items) {
+        if (!this.isEnterableContainer(container))
             return false;
-        if (container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+        if (!items.every(x => !x.element.contains(container.element)))
             return false;
         return true;
     }

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

@@ -3,11 +3,13 @@ import { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 import { IPlacementService } from './IPlacementService.js';
 export declare class FlexBoxPlacementService implements IPlacementService {
+    private _basePlacementService;
+    constructor(basePlacementService: IPlacementService);
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
-    canEnterByDrop(container: IDesignItem): boolean;
+    isEnterableContainer(container: IDesignItem): any;
+    canEnter(container: IDesignItem, items: IDesignItem[]): any;
     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

@@ -1,5 +1,9 @@
 import { DefaultPlacementService } from './DefaultPlacementService.js';
 export class FlexBoxPlacementService {
+    _basePlacementService;
+    constructor(basePlacementService) {
+        this._basePlacementService = basePlacementService ?? new DefaultPlacementService();
+    }
     enterContainer(container, items) {
         for (let i of items) {
             i.removeStyle("position");
@@ -22,11 +26,11 @@ export class FlexBoxPlacementService {
             return true;
         return false;
     }
-    canEnter(container, items) {
-        return true;
+    isEnterableContainer(container) {
+        return this._basePlacementService.isEnterableContainer(container);
     }
-    canEnterByDrop(container) {
-        return true;
+    canEnter(container, items) {
+        return this._basePlacementService.canEnter(container, items);
     }
     canLeave(container, items) {
         return true;

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

@@ -3,11 +3,13 @@ import type { IPlacementService } from './IPlacementService.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class GridPlacementService implements IPlacementService {
+    private _basePlacementService;
+    constructor(basePlacementService: IPlacementService);
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
-    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
-    canEnterByDrop(container: IDesignItem): boolean;
+    isEnterableContainer(container: IDesignItem): any;
+    canEnter(container: IDesignItem, items: IDesignItem[]): any;
     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

@@ -2,6 +2,10 @@ import { CalculateGridInformation } from '../../helper/GridHelper.js';
 import { pointInRect } from '../../helper/Helper.js';
 import { DefaultPlacementService } from './DefaultPlacementService.js';
 export class GridPlacementService {
+    _basePlacementService;
+    constructor(basePlacementService) {
+        this._basePlacementService = basePlacementService ?? new DefaultPlacementService();
+    }
     enterContainer(container, items) {
         for (let i of items) {
             i.removeStyle("position");
@@ -26,11 +30,11 @@ export class GridPlacementService {
             return true;
         return false;
     }
-    canEnter(container, items) {
-        return true;
+    isEnterableContainer(container) {
+        return this._basePlacementService.isEnterableContainer(container);
     }
-    canEnterByDrop(container) {
-        return true;
+    canEnter(container, items) {
+        return this._basePlacementService.canEnter(container, items);
     }
     canLeave(container, items) {
         return true;

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

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

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

@@ -27,6 +27,7 @@ export class EditTextExtension extends AbstractExtension {
         //maybe use a html edit framework
         this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
         //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelectionAndCanBeEntered);
         //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
         this.extendedItem.element.setAttribute('contenteditable', '');
         this.extendedItem.element.addEventListener('input', this._contentEditedBound);

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

@@ -32,15 +32,21 @@ export class ExtensionManager {
             if (selectionChangedEvent.oldSelectedElements[0].parent) {
                 const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
                 this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
+                this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
                 this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelection);
+                this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
                 this.removeExtensions(selectionChangedEvent.oldSelectedElements, false, ExtensionType.Selection);
             }
         }
         if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
             this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection);
             this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection);
+            if (selectionChangedEvent.selectedElements[0].getPlacementService().isEnterableContainer(selectionChangedEvent.selectedElements[0]))
+                this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
             const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
             this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
+            if (primaryContainer.getPlacementService().isEnterableContainer(primaryContainer))
+                this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
         }
         //this.refreshExtensions(selectionChangedEvent.selectedElements);
     }
@@ -273,10 +279,12 @@ export class ExtensionManager {
             this.refreshExtensions(designItems, ExtensionType.MouseOver, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected, null, ignoredExtension);
-            this.refreshExtensions(designItems, ExtensionType.ContainerDragOver, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDragOverAndCanBeEntered, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.ContainerDrag, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.Doubleclick, null, ignoredExtension);
             this.refreshExtensions(designItems, ExtensionType.Placement, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionAndCanBeEntered, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainerAndCanBeEntered, null, ignoredExtension);
         }
     }
     refreshAllAppliedExtentions() {

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

@@ -9,15 +9,22 @@ export declare enum ExtensionType {
     /**
      * Extension for the Container wich the dragged element is draged over.
      */
-    ContainerDragOver = 8,
+    ContainerDragOverAndCanBeEntered = 8,
     /**
     * Extension for the Container on wich a new element is draged over.
     */
-    ContainerExternalDragOver = 9,
+    ContainerExternalDragOverAndCanBeEntered = 9,
     /**
      * Extension for the Current Container wich the dragged element is contained.
      */
     ContainerDrag = 10,
     Doubleclick = 11,
-    Placement = 12
+    Placement = 12,
+    /**
+     * Extensions only when the container can be Entered.
+     * So for Example on a custome webcomponent wich uses a grid layout for it's root, but can not show children,
+     * do not display grid extension.
+     */
+    PrimarySelectionAndCanBeEntered = 13,
+    PrimarySelectionContainerAndCanBeEntered = 14
 }

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

@@ -10,15 +10,22 @@ export var ExtensionType;
     /**
      * Extension for the Container wich the dragged element is draged over.
      */
-    ExtensionType[ExtensionType["ContainerDragOver"] = 8] = "ContainerDragOver";
+    ExtensionType[ExtensionType["ContainerDragOverAndCanBeEntered"] = 8] = "ContainerDragOverAndCanBeEntered";
     /**
     * Extension for the Container on wich a new element is draged over.
     */
-    ExtensionType[ExtensionType["ContainerExternalDragOver"] = 9] = "ContainerExternalDragOver";
+    ExtensionType[ExtensionType["ContainerExternalDragOverAndCanBeEntered"] = 9] = "ContainerExternalDragOverAndCanBeEntered";
     /**
      * Extension for the Current Container wich the dragged element is contained.
      */
     ExtensionType[ExtensionType["ContainerDrag"] = 10] = "ContainerDrag";
     ExtensionType[ExtensionType["Doubleclick"] = 11] = "Doubleclick";
     ExtensionType[ExtensionType["Placement"] = 12] = "Placement";
+    /**
+     * Extensions only when the container can be Entered.
+     * So for Example on a custome webcomponent wich uses a grid layout for it's root, but can not show children,
+     * do not display grid extension.
+     */
+    ExtensionType[ExtensionType["PrimarySelectionAndCanBeEntered"] = 13] = "PrimarySelectionAndCanBeEntered";
+    ExtensionType[ExtensionType["PrimarySelectionContainerAndCanBeEntered"] = 14] = "PrimarySelectionContainerAndCanBeEntered";
 })(ExtensionType || (ExtensionType = {}));

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

@@ -249,17 +249,17 @@ export class PointerTool {
                                 //if we found a new enterable container create extensions 
                                 if (newContainerElementDesignItem != null) {
                                     if (this._dragOverExtensionItem != newContainerElementDesignItem) {
-                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
-                                        designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver, event);
+                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
+                                        designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOverAndCanBeEntered, event);
                                         this._dragOverExtensionItem = newContainerElementDesignItem;
                                     }
                                     else {
-                                        designerCanvas.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver, event);
+                                        designerCanvas.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOverAndCanBeEntered, event);
                                     }
                                 }
                                 else {
                                     if (this._dragOverExtensionItem) {
-                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
+                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
                                         this._dragOverExtensionItem = null;
                                     }
                                 }
@@ -325,7 +325,7 @@ export class PointerTool {
                         }
                         designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
                         this._dragExtensionItem = null;
-                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
+                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
                         this._dragOverExtensionItem = null;
                         this._moveItemsOffset = { x: 0, y: 0 };
                     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.252",
+  "version": "0.0.253",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",