@node-projects/web-component-designer 0.0.251 → 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/services/propertiesService/PropertyTabsService.js

@@ -17,6 +17,7 @@ export class PropertyTabsService {
         { name: 'attributes', propertiesService: new AttributesPropertiesService() },
         { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
         { name: 'layout', propertiesService: new CssPropertiesService("layout") },
+        { name: 'svg', propertiesService: new CssPropertiesService("svg") },
     ];
     getPropertygroups(designItems) {
         if (designItems == null || designItems.length == 0)

package/dist/elements/services/propertiesService/services/CssProperties.json

@@ -242,7 +242,9 @@
     "dominantBaseline": {},
     "emptyCells": {},
     "fallback": {},
-    "fill": {},
+    "fill": {
+        "type": "color"
+    },
     "fillOpacity": {},
     "fillRule": {},
     "filter": {},
@@ -413,12 +415,39 @@
     "outlineOffset": {},
     "outlineStyle": {},
     "outlineWidth": {},
-    "overflow": {},
+    "overflow": {
+        "type": "list",
+        "values": [
+            "visible",
+            "hidden",
+            "clip",
+            "scoll",
+            "auto"
+        ]
+    },
     "overflowAnchor": {},
     "overflowClipMargin": {},
     "overflowWrap": {},
-    "overflowX": {},
-    "overflowY": {},
+    "overflowX": {
+        "type": "list",
+        "values": [
+            "visible",
+            "hidden",
+            "clip",
+            "scoll",
+            "auto"
+        ]
+    },
+    "overflowY": {
+        "type": "list",
+        "values": [
+            "visible",
+            "hidden",
+            "clip",
+            "scoll",
+            "auto"
+        ]
+    },
     "overrideColors": {},
     "overscrollBehavior": {},
     "overscrollBehaviorBlock": {},
@@ -509,14 +538,18 @@
         "type": "color"
     },
     "stopOpacity": {},
-    "stroke": {},
+    "stroke": {
+        "type": "color"
+    },
     "strokeDasharray": {},
     "strokeDashoffset": {},
     "strokeLinecap": {},
     "strokeLinejoin": {},
     "strokeMiterlimit": {},
     "strokeOpacity": {},
-    "strokeWidth": {},
+    "strokeWidth": {
+        "type": "number"
+    },
     "suffix": {},
     "symbols": {},
     "syntax": {},

package/dist/elements/services/propertiesService/services/CssPropertiesService.d.ts

@@ -9,7 +9,8 @@ export declare class CssPropertiesService extends CommonPropertiesService {
     layout: string[];
     grid: string[];
     flex: string[];
-    constructor(name: 'layout' | 'grid' | 'flex');
+    svg: string[];
+    constructor(name: 'layout' | 'grid' | 'flex' | 'svg');
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];

package/dist/elements/services/propertiesService/services/CssPropertiesService.js

@@ -59,6 +59,15 @@ export class CssPropertiesService extends CommonPropertiesService {
         "justify-content",
         "align-items"
     ];
+    svg = [
+        "fill",
+        "fill-rule",
+        "fill-opacity",
+        "stroke",
+        "stroke-width",
+        "stroke-dash-array",
+        "stroke-opacity"
+    ];
     constructor(name) {
         super();
         this.name = name;

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

@@ -77,12 +77,16 @@ export class DrawEllipsisTool {
                 svg.appendChild(this._path);
                 this._path.setAttribute("cx", (this._cx - mvX).toString());
                 this._path.setAttribute("cy", (this._cy - mvY).toString());
+                this._path.removeAttribute("stroke");
+                this._path.removeAttribute("stroke-width");
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
                 svg.style.position = 'absolute';
                 svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
                 svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
                 svg.style.overflow = 'visible';
+                svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor;
+                svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness;
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));

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

@@ -61,6 +61,8 @@ export class DrawLineTool {
                 this._path.setAttribute("y1", (this._startPoint.y - mvY).toString());
                 this._path.setAttribute("x2", (this._endPoint.x - mvX).toString());
                 this._path.setAttribute("y2", (this._endPoint.y - mvY).toString());
+                this._path.removeAttribute("stroke");
+                this._path.removeAttribute("stroke-width");
                 svg.appendChild(this._path);
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
@@ -68,6 +70,8 @@ export class DrawLineTool {
                 svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
                 svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
                 svg.style.overflow = 'visible';
+                svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor;
+                svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness;
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));

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

@@ -103,6 +103,8 @@ export class DrawPathTool {
                     const mvY = coords.y - offset;
                     const d = moveSVGPath(this._path, mvX, mvY);
                     this._path.setAttribute("d", d);
+                    this._path.removeAttribute("stroke");
+                    this._path.removeAttribute("stroke-width");
                     svg.appendChild(this._path);
                     svg.style.left = (mvX) + 'px';
                     svg.style.top = (mvY) + 'px';
@@ -110,6 +112,8 @@ export class DrawPathTool {
                     svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
                     svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
                     svg.style.overflow = 'visible';
+                    svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor;
+                    svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness;
                     //designerView.rootDesignItem.element.appendChild(svg);
                     this._path = null;
                     this._pathD = null;

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

@@ -91,6 +91,8 @@ export class DrawRectTool {
                 const mvY = coords.y - offset;
                 this._path.setAttribute("x", (this._px - mvX).toString());
                 this._path.setAttribute("y", (this._py - mvY).toString());
+                this._path.removeAttribute("stroke");
+                this._path.removeAttribute("stroke-width");
                 svg.appendChild(this._path);
                 svg.style.left = (mvX) + 'px';
                 svg.style.top = (mvY) + 'px';
@@ -98,6 +100,8 @@ export class DrawRectTool {
                 svg.style.width = Math.round(coords.width + 2 * offset) + 'px';
                 svg.style.height = Math.round(coords.height + 2 * offset) + 'px';
                 svg.style.overflow = 'visible';
+                svg.style.stroke = designerCanvas.serviceContainer.globalContext.strokeColor;
+                svg.style.strokeWidth = designerCanvas.serviceContainer.globalContext.strokeThickness;
                 this._path = null;
                 const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                 designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));

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 };
                     }