@node-projects/web-component-designer 0.1.106 → 0.1.107

package/dist/elements/documentContainer.js

@@ -3,6 +3,7 @@ import { DesignerTabControl } from './controls/DesignerTabControl.js';
 import { DesignerView } from './widgets/designerView/designerView.js';
 import { SimpleSplitView } from './controls/SimpleSplitView.js';
 import { sleep } from "./helper/Helper.js";
+import { ExtensionType } from "./widgets/designerView/extensions/ExtensionType.js";
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     designerView;
     codeView;
@@ -253,7 +254,8 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 return this.designerView.parseHTML(this._content, this._firstLoad);
             else {
                 this.instanceServiceContainer.undoService.clearTransactionstackIfNotEmpty();
-                this.designerView.designerCanvas.extensionManager.refreshAllAppliedExtentions();
+                this.designerView.designerCanvas.overlayLayer.removeAllOverlays();
+                this.designerView.designerCanvas.extensionManager.reapplyAllAppliedExtentions(null, [ExtensionType.Permanent, ExtensionType.Selection, ExtensionType.PrimarySelection, ExtensionType.PrimarySelectionContainer]);
             }
         }
     }

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

@@ -4,6 +4,10 @@ import { IPropertyGroupsService } from './IPropertyGroupsService.js';
 import { AttachedPropertiesService } from './services/AttachedPropertiesService.js';
 export declare class PropertyGroupsService implements IPropertyGroupsService {
     protected _attachedPropertiesService: AttachedPropertiesService;
+    protected _rootPgList: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
     protected _pgList: {
         name: string;
         propertiesService: IPropertiesService;

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

@@ -7,6 +7,13 @@ import { CssCustomPropertiesService } from './services/CssCustomPropertiesServic
 import { CssPropertiesService } from './services/CssPropertiesService.js';
 export class PropertyGroupsService {
     _attachedPropertiesService = new AttachedPropertiesService();
+    _rootPgList = [
+        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
+        { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
+        { name: 'layout', propertiesService: new CssPropertiesService("layout") },
+        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
+        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
+    ];
     _pgList = [
         { name: 'properties', propertiesService: null },
         { name: 'attached', propertiesService: this._attachedPropertiesService },
@@ -39,6 +46,8 @@ export class PropertyGroupsService {
             return [];
         if (designItems[0].nodeType == NodeType.TextNode || designItems[0].nodeType == NodeType.Comment)
             return [];
+        if (designItems[0].isRootItem)
+            return this._rootPgList;
         this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
         let lst = this._pgList;
@@ -51,6 +60,6 @@ export class PropertyGroupsService {
             else if (parentStyle.display.includes('flex'))
                 lst = [...lst, this._flexChild[0]];
         }
-        return lst;
+        return lst; //.filter(x => x.propertiesService.isHandledElement(designItems[0]));
     }
 }

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

@@ -9,7 +9,7 @@ export class AttributesPropertiesService {
         return RefreshMode.fullOnValueChange;
     }
     isHandledElement(designItem) {
-        return true;
+        return !designItem.isRootItem;
     }
     getProperty(designItem, name) {
         return { name: name, type: 'string', service: this, propertyType: PropertyType.attribute };

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

@@ -38,7 +38,7 @@ export class CommonPropertiesService extends AbstractPropertiesService {
     ];
     name = "common";
     isHandledElement(designItem) {
-        return true;
+        return !designItem.isRootItem;
     }
     getProperty(designItem, name) {
         return this.commonProperties.find(x => x.name == name);

package/dist/elements/services/selectionService/SelectionService.js

@@ -1,6 +1,5 @@
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { SelectionChangedAction } from '../undoService/transactionItems/SelectionChangedAction.js';
-import { arraysEqual } from '../../helper/Helper.js';
 function findDesignItem(designItem, position) {
     let usedItem = null;
     if (designItem.hasChildren) {
@@ -27,8 +26,10 @@ export class SelectionService {
         this._undoSelectionChanges = undoSelectionChanges;
     }
     setSelectedElements(designItems, event) {
+        if (designItems === null || designItems.length === 0)
+            designItems = [this._designerCanvas.rootDesignItem];
         if (this.selectedElements != designItems && !(this.selectedElements.length === 0 && (designItems == null || designItems.length === 0))) {
-            if (arraysEqual(designItems, this.selectedElements)) {
+            if (this.selectedElements?.length === 1 && designItems?.length === 1 && designItems[0] === this.selectedElements[0]) {
                 this.onSelectionRefresh.emit({ selectedElements: this.selectedElements, event });
                 return;
             }
@@ -57,7 +58,7 @@ export class SelectionService {
         else {
             let newSelection = [];
             for (let d of designItems) {
-                if (d && d != d.instanceServiceContainer.contentService.rootDesignItem)
+                if (d && (designItems.length == 1 || d !== d.instanceServiceContainer.contentService.rootDesignItem))
                     newSelection.push(d);
             }
             this.selectedElements = newSelection;

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

@@ -83,7 +83,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     set canvasOffset(value) {
         this._canvasOffset = value;
-        this._zoomFactorChanged(false);
+        this._zoomFactorChanged();
     }
     get canvasOffsetUnzoomed() {
         return { x: this._canvasOffset.x * this.zoomFactor, y: this._canvasOffset.y * this.zoomFactor };
@@ -657,7 +657,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     disconnectedCallback() {
         this.extensionManager.disconnected();
     }
-    _zoomFactorChanged(refreshExtensions = true) {
+    _zoomFactorChanged() {
         //a@ts-ignore
         //this._canvasContainer.style.zoom = <any>this._zoomFactor;
         //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+') translate(' + this._translate.x + ', '+this._translate.y+')';
@@ -667,10 +667,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._updateTransform();
         this.fillCalculationrects();
         this.onZoomFactorChanged.emit(this._zoomFactor);
-        if (refreshExtensions) {
-            this.extensionManager.refreshAllAppliedExtentions();
-            setTimeout(() => this.extensionManager.refreshAllAppliedExtentions(), 200);
-        }
         if (!this.serviceContainer.options.zoomDesignerBackground)
             this._resizeBackgroundGrid();
     }
@@ -853,8 +849,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     _onDblClick(event) {
         event.preventDefault();
-        if (this.serviceContainer.globalContext.tool == null || this.serviceContainer.globalContext.tool === this.serviceContainer.designerTools.get(NamedTools.Pointer))
+        if (this.serviceContainer.globalContext.tool == null || this.serviceContainer.globalContext.tool === this.serviceContainer.designerTools.get(NamedTools.Pointer)) {
+            this.extensionManager.removeExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.PrimarySelectionRefreshed);
             this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
+        }
     }
     _searchShowOverlay() {
         let divElement = this._getDomElement('node-projects-designer-search-container');

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

@@ -19,6 +19,8 @@ export class AbstractExtension extends AbstractExtensionBase {
         foreignObject.setAttribute('width', '' + width);
         foreignObject.setAttribute('height', '' + height);
         foreignObject.appendChild(element);
+        foreignObject.style.scale = '' + 1 / this.designerCanvas.zoomFactor;
+        foreignObject.style.transformBox = 'fill-box';
         this._addOverlay(foreignObject, overlayLayer);
         foreignObject.updatePosition = (position) => {
             foreignObject.setAttribute('x', '' + position.x);

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

@@ -14,6 +14,7 @@ export declare class EditTextExtension extends AbstractExtension implements hand
     extend(): void;
     refresh(): void;
     dispose(): void;
+    commitchanges(): void;
     handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
     _formatSelection(type: string, value?: string): void;
 }

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

@@ -61,6 +61,8 @@ export class EditTextExtension extends AbstractExtension {
         this._path.setAttribute('fill-rule', 'evenodd');
         this._path.style.pointerEvents = 'auto';
         this._path.onpointerdown = (e) => {
+            this.designerCanvas.ignoreEvent(e);
+            this.commitchanges();
             this.extensionManager.removeExtensionInstance(this.extendedItem, this);
         };
         this._addOverlay(this._path, OverlayLayer.Background);
@@ -78,6 +80,11 @@ export class EditTextExtension extends AbstractExtension {
         this._path.setAttribute("d", data);
     }
     dispose() {
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
+    }
+    commitchanges() {
         this._removeAllOverlays();
         this.extendedItem.element.removeAttribute('contenteditable');
         this.extendedItem.updateChildrenFromNodesChildren();

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

@@ -2,7 +2,7 @@ import { ElementDragTitleExtension } from './ElementDragTitleExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class ElementDragTitleExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        return true;
+        return !designItem.isRootItem;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new ElementDragTitleExtension(extensionManager, designerView, designItem);

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

@@ -30,6 +30,6 @@ export declare class ExtensionManager implements IExtensionManager {
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension, timeout?: number): void;
     refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension, event?: Event): void;
     refreshAllAppliedExtentions(event?: Event): void;
-    reapplyAllAppliedExtentions(filterDesignItems?: IDesignItem[]): void;
+    reapplyAllAppliedExtentions(filterDesignItems?: IDesignItem[], enabledExtensionTypes?: ExtensionType[]): void;
     private static getAllChildElements;
 }

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

@@ -22,6 +22,9 @@ export class ExtensionManager {
         designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));
         designerCanvas.instanceServiceContainer.selectionService.onSelectionRefresh.on(this._selectedElementsRefresh.bind(this));
         designerCanvas.instanceServiceContainer.contentService.onContentChanged.on(this._contentChanged.bind(this));
+        designerCanvas.serviceContainer.globalContext.onToolChanged.on(() => {
+            this.removeExtension(designerCanvas.instanceServiceContainer.selectionService.primarySelection, ExtensionType.PrimarySelectionRefreshed);
+        });
     }
     connected() {
         if (!this._timeout)
@@ -57,14 +60,14 @@ export class ExtensionManager {
     _selectedElementsChanged(selectionChangedEvent) {
         this._lastPrimarySelectionRefreshItem = null;
         if (selectionChangedEvent.oldSelectedElements && selectionChangedEvent.oldSelectedElements.length) {
+            this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelectionRefreshed);
+            this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelection);
+            this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
+            this.removeExtensions(selectionChangedEvent.oldSelectedElements, false, ExtensionType.Selection);
             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.PrimarySelectionRefreshed);
-                this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
-                this.removeExtensions(selectionChangedEvent.oldSelectedElements, false, ExtensionType.Selection);
             }
         }
         if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
@@ -72,10 +75,12 @@ export class ExtensionManager {
             this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection, selectionChangedEvent.event);
             if (selectionChangedEvent.selectedElements[0].getPlacementService()?.isEnterableContainer(selectionChangedEvent.selectedElements[0]))
                 this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered, selectionChangedEvent.event);
-            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, selectionChangedEvent.event);
-            if (primaryContainer.getPlacementService()?.isEnterableContainer(primaryContainer))
-                this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered, selectionChangedEvent.event);
+            if (selectionChangedEvent.selectedElements[0].parent) {
+                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, selectionChangedEvent.event);
+                if (primaryContainer.getPlacementService()?.isEnterableContainer(primaryContainer))
+                    this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered, selectionChangedEvent.event);
+            }
         }
     }
     _selectedElementsRefresh(selectionChangedEvent) {
@@ -415,7 +420,7 @@ export class ExtensionManager {
     }
     //TODO: does not work with permanant, when not applied... maybe we need to do in another way
     //maybe store the "shouldAppliedExtensions??"
-    reapplyAllAppliedExtentions(filterDesignItems) {
+    reapplyAllAppliedExtentions(filterDesignItems, enabledExtensionTypes) {
         this.designerCanvas.overlayLayer.startBatch();
         for (let d of ExtensionManager.getAllChildElements(this.designerCanvas.rootDesignItem)) {
             if (!filterDesignItems || filterDesignItems.includes(d)) {
@@ -423,7 +428,8 @@ export class ExtensionManager {
                 for (let t of keys) {
                     const evt = wmGet(d, this._lastApplyEventPerType).get(t);
                     this.removeExtension(d, t);
-                    this.applyExtension(d, t, evt);
+                    if (enabledExtensionTypes == null || enabledExtensionTypes.includes(t))
+                        this.applyExtension(d, t, evt);
                 }
             }
         }

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

@@ -12,7 +12,7 @@ export interface IExtensionManager {
     refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension, timeout?: number): any;
     refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension, event?: Event): any;
     refreshAllAppliedExtentions(event?: Event): any;
-    reapplyAllAppliedExtentions(filterDesignItems?: IDesignItem[]): any;
+    reapplyAllAppliedExtentions(filterDesignItems?: IDesignItem[], enabledExtensionTypes?: ExtensionType[]): any;
     connected(): any;
     disconnected(): any;
 }

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

@@ -2,7 +2,7 @@ import { css } from "@node-projects/base-custom-webcomponent";
 import { MultipleSelectionRectExtension as MultipleSelectionRectExtension } from './MultipleSelectionRectExtension.js';
 export class MultipleSelectionRectExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        return true;
+        return !designItem.isRootItem;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new MultipleSelectionRectExtension(extensionManager, designerView, designItem);

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

@@ -2,6 +2,8 @@ import { PositionExtension } from './PositionExtension.js';
 import { css } from "@node-projects/base-custom-webcomponent";
 export class PositionExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
+        if (!designItem?.parent)
+            return false;
         const cs = getComputedStyle(designItem.element);
         if (cs.position === 'relative' || cs.position === 'absolute')
             return true;

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

@@ -9,7 +9,7 @@ export class ResizeExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         if (designItem.element instanceof SVGElement)
             return false;
-        return designItem.nodeType == NodeType.Element;
+        return !designItem.isRootItem && designItem.nodeType == NodeType.Element;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new ResizeExtension(extensionManager, designerView, designItem, this.resizeAllSelected);

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

@@ -5,7 +5,7 @@ export class RotateExtensionProvider {
         if (designItem.element instanceof SVGElement) {
             return false;
         }
-        return true;
+        return !designItem.isRootItem;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new RotateExtension(extensionManager, designerView, designItem);

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

@@ -3,7 +3,7 @@ import { css } from "@node-projects/base-custom-webcomponent";
 import { NodeType } from '../../../item/NodeType.js';
 export class SelectionDefaultExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        return designItem.nodeType != NodeType.Comment;
+        return !designItem.isRootItem && designItem.nodeType != NodeType.Comment;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new SelectionDefaultExtension(extensionManager, designerView, designItem);

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

@@ -6,7 +6,7 @@ export class TransformOriginExtensionProvider {
         this.showOnlyWhenSet = showOnlyWhenSet;
     }
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg')) {
+        if (!designItem.isRootItem && designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg')) {
             if (!this.showOnlyWhenSet)
                 return true;
             if (designItem.hasStyle('transformOrigin'))

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtension.js

@@ -26,7 +26,7 @@ export class BlockToolbarExtension extends AbstractExtension {
     refresh(cache, event) {
         if (event) {
             const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 44) });
+            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
         }
     }
     dispose() {

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js

@@ -26,7 +26,7 @@ export class FlexToolbarExtension extends AbstractExtension {
     refresh(cache, event) {
         if (event) {
             const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 44) });
+            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
         }
     }
     dispose() {

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension.js

@@ -58,7 +58,7 @@ export class GridToolbarExtension extends AbstractExtension {
     refresh(cache, event) {
         if (event) {
             const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
-            this._toolbar.updatePosition({ x: (pos.x - 16), y: (pos.y - 44) });
+            this._toolbar.updatePosition({ x: (pos.x - (16 / this.designerCanvas.zoomFactor)), y: (pos.y - (44 / this.designerCanvas.zoomFactor)) });
         }
     }
     dispose() {

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

@@ -110,8 +110,8 @@ export class PointerTool {
                     this._actionType = PointerActionType.Drag;
                 }
                 else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) {
-                    if (!event.ctrlKey && !event.shiftKey)
-                        designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null, event);
+                    //if (!event.ctrlKey && !event.shiftKey)
+                    //  designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null, event);
                     this._actionType = PointerActionType.DrawSelection;
                 }
                 else {

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

@@ -89,7 +89,7 @@ export class RectangleSelectorTool {
                 designerCanvas.overlayLayer.removeOverlay(this._rect);
                 this._rect = null;
                 this._initialPoint = null;
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements, event);
                 designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
                 break;
         }

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.js

@@ -48,10 +48,10 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
     <span style="grid-column: span 3;" class="desc">Type:</span><input type="text" readonly id="type">
     <button id="config" style="display: none; grid-column: 5; grid-row: span 3; height: calc(100% - 10px); margin-left: 10px;">config</button>
     <div title="id" id="idRect" style="grid-column: 1; width: 7px; height: 7px; border: 1px solid white;"></div>
-    <span style="grid-column: span 2;" class="desc">Id:</span><input type="text" id="id">
+    <span id="idSpan" style="grid-column: span 2;" class="desc">Id:</span><input type="text" id="id">
     <div title="innerHTML" id="innerRect" style="grid-column: 1; width: 7px; height: 7px; border: 1px solid white;"></div>
     <div title="textContent" id="contentRect" style="width: 7px; height: 7px; border: 1px solid white;"></div>
-    <span class="desc">Content:</span><input type="text" id="content">
+    <span id="contentSpan" class="desc">Content:</span><input type="text" id="content">
   </div>
   <node-projects-web-component-designer-property-grid id="pg"></node-projects-web-component-designer-property-grid>`;
     _type;
@@ -84,15 +84,18 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._propertiesService = new ContentAndIdPropertiesService();
         this._idRect.oncontextmenu = (event) => {
             event.preventDefault();
-            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.idProperty);
+            if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem)
+                PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.idProperty);
         };
         this._contentRect.oncontextmenu = (event) => {
             event.preventDefault();
-            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty);
+            if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem)
+                PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.contentProperty);
         };
         this._innerRect.oncontextmenu = (event) => {
             event.preventDefault();
-            PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.innerHtmlProperty);
+            if (!this._instanceServiceContainer.selectionService.primarySelection?.isRootItem)
+                PropertyGridPropertyList.openContextMenu(event, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService.innerHtmlProperty);
         };
         this._id.onkeydown = e => {
             if (e.key == 'Enter')
@@ -137,33 +140,46 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
         this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(async (e) => {
             this._pg.instanceServiceContainer = value;
             await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
-            const srv = await this.serviceContainer?.getLastServiceWhereAsync('configUiService', x => x.hasConfigUi(this._instanceServiceContainer.selectionService.primarySelection));
-            if (srv) {
-                this._configButton.style.display = 'block';
-            }
-            else {
+            if (this._instanceServiceContainer.selectionService.primarySelection.isRootItem) {
                 this._configButton.style.display = 'none';
-            }
-            if (this._instanceServiceContainer.selectionService.primarySelection?.nodeType == NodeType.Element) {
-                this._type.value = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
+                this._id.value = '';
+                this._content.value = '';
+                this._id.disabled = true;
+                this._content.disabled = true;
+                this._idRect.style.background = '';
+                this._contentRect.style.background = '';
+                this._innerRect.style.background = '';
+                this._type.value = ":host";
             }
             else {
-                this._type.value = this._instanceServiceContainer.selectionService.primarySelection?.node?.nodeName ?? '';
-            }
-            this._type.title = this._type.value;
-            this._id.blur();
-            this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
-            if (this._instanceServiceContainer.selectionService.primarySelection?.element?.nodeType != NodeType.Element) {
-                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.content ?? '';
+                const srv = await this.serviceContainer?.getLastServiceWhereAsync('configUiService', x => x.hasConfigUi(this._instanceServiceContainer.selectionService.primarySelection));
+                if (srv) {
+                    this._configButton.style.display = 'block';
+                }
+                else {
+                    this._configButton.style.display = 'none';
+                }
+                if (this._instanceServiceContainer.selectionService.primarySelection?.nodeType == NodeType.Element) {
+                    this._type.value = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
+                }
+                else {
+                    this._type.value = this._instanceServiceContainer.selectionService.primarySelection?.node?.nodeName ?? '';
+                }
+                this._type.title = this._type.value;
+                this._id.blur();
+                this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+                if (this._instanceServiceContainer.selectionService.primarySelection?.element?.nodeType != NodeType.Element) {
+                    this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.content ?? '';
+                }
+                else if (this._instanceServiceContainer.selectionService.primarySelection?.element?.children?.length <= 0)
+                    this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.content ?? '';
+                else
+                    this._content.value = '';
+                this._content.title = this._content.value;
+                PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
+                PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._contentRect, this._propertiesService.contentProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
+                PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
             }
-            else if (this._instanceServiceContainer.selectionService.primarySelection?.element?.children?.length <= 0)
-                this._content.value = this._instanceServiceContainer.selectionService.primarySelection?.content ?? '';
-            else
-                this._content.value = '';
-            this._content.title = this._content.value;
-            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._idRect, this._propertiesService.idProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
-            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._contentRect, this._propertiesService.contentProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
-            PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
         });
         this._pg.instanceServiceContainer = value;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.106",
+  "version": "0.1.107",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",