@node-projects/web-component-designer 0.0.45 → 0.0.49

package/dist/elements/item/DesignItem.js

@@ -1,6 +1,8 @@
 import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction';
 import { NodeType } from './NodeType';
 import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction';
+//import { PropertyChangeAction } from '../services/undoService/transactionItems/PropertyChangeAction';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 import { CssAttributeParser } from '../helper/CssAttributeParser.js';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
@@ -43,6 +45,7 @@ export class DesignItem {
     }
     set id(value) {
         this.element.id = value;
+        this.setAttribute("id", value);
     }
     get isRootItem() {
         return this.instanceServiceContainer.contentService.rootDesignItem === this;
@@ -66,6 +69,9 @@ export class DesignItem {
         return this.getOrCreateDesignItem(this.element.parentNode);
     }
     insertChild(designItem, index) {
+        //todo... via undoredo system....
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
         if (designItem.parent) {
             designItem.parent.removeChild(designItem);
         }
@@ -79,8 +85,13 @@ export class DesignItem {
             this.node.insertBefore(designItem.node, el.element);
             this._childArray.splice(index, 0, designItem);
         }
+        if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
     }
     removeChild(designItem) {
+        //todo... via undoredo system....
+        if (designItem.parent && this.instanceServiceContainer.selectionService.primarySelection == designItem)
+            designItem.instanceServiceContainer.designerCanvas.extensionManager.removeExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
         const index = this._childArray.indexOf(designItem);
         if (index > -1) {
             this._childArray.splice(index, 1);

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

@@ -8,7 +8,7 @@ export interface IDesignItem {
     replaceNode(newNode: Node): any;
     readonly nodeType: NodeType;
     readonly name: string;
-    readonly id: string;
+    id: string;
     readonly isRootItem: boolean;
     readonly hasAttributes: boolean;
     readonly attributes: Map<string, string>;

package/dist/elements/services/InstanceServiceContainer.d.ts

@@ -3,6 +3,7 @@ import { IUndoService } from './undoService/IUndoService';
 import { BaseServiceContainer } from './BaseServiceContainer';
 import { IContentService } from './contentService/IContentService';
 import { IDesignContext } from '../widgets/designerView/IDesignContext';
+import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
 interface InstanceServiceNameMap {
     "undoService": IUndoService;
     "selectionService": ISelectionService;
@@ -10,6 +11,8 @@ interface InstanceServiceNameMap {
 }
 export declare class InstanceServiceContainer extends BaseServiceContainer<InstanceServiceNameMap> {
     designContext: IDesignContext;
+    readonly designerCanvas: IDesignerCanvas;
+    constructor(designerCanvas: IDesignerCanvas);
     get undoService(): IUndoService;
     get selectionService(): ISelectionService;
     get contentService(): IContentService;

package/dist/elements/services/InstanceServiceContainer.js

@@ -2,6 +2,11 @@ import { BaseServiceContainer } from './BaseServiceContainer';
 import { DesignContext } from '../widgets/designerView/DesignContext';
 export class InstanceServiceContainer extends BaseServiceContainer {
     designContext = new DesignContext();
+    designerCanvas;
+    constructor(designerCanvas) {
+        super();
+        this.designerCanvas = designerCanvas;
+    }
     get undoService() {
         return this.getLastService('undoService');
     }

package/dist/elements/services/contentService/IContentChanged.d.ts

@@ -1,5 +1,5 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
 export interface IContentChanged {
-    changeType: "added" | "removed" | "moved";
-    element: HTMLElement;
-    parent: HTMLElement;
+    changeType: "added" | "removed" | "moved" | 'parsed';
+    designItems?: IDesignItem[];
 }

package/dist/elements/services/undoService/transactionItems/DeleteAction.js

@@ -13,6 +13,7 @@ export class DeleteAction {
         for (let n = 0; n < this.deletedItems.length; n++) {
             this._parentItems[n].insertChild(this.deletedItems[n], this._parentIndexes[n]);
         }
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: this.deletedItems });
     }
     do() {
         this._parentItems = [];
@@ -25,6 +26,7 @@ export class DeleteAction {
             this.deletedItems[n].remove();
         }
         this.extensionManager.removeExtensions(this.deletedItems);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: this.deletedItems });
     }
     deletedItems;
     extensionManager;

package/dist/elements/services/undoService/transactionItems/InsertAction.js

@@ -11,12 +11,14 @@ export class InsertAction {
     }
     undo() {
         this.newItem.element.remove();
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
     }
     do() {
         this.designItem.insertChild(this.newItem, this.index);
         const prepService = this.designItem.serviceContainer.prepareElementsForDesignerService;
         if (prepService)
             requestAnimationFrame(() => prepService.prepareElementsForDesigner(this.newItem));
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: [this.newItem] });
     }
     designItem;
     index;

package/dist/elements/services/undoService/transactionItems/MoveElementInDomAction.js

@@ -13,9 +13,11 @@ export class MoveElementInDomAction {
     }
     undo() {
         this.oldTarget.element.insertAdjacentElement(this.oldPosition, this.designItem.element);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
     }
     do() {
         this.newTarget.element.insertAdjacentElement(this.newPosition, this.designItem.element);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
     }
     designItem;
     newTarget;

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

@@ -115,7 +115,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
-        this.instanceServiceContainer = new InstanceServiceContainer();
+        this.instanceServiceContainer = new InstanceServiceContainer(this);
         this.instanceServiceContainer.register("undoService", new UndoService(this));
         this.instanceServiceContainer.register("selectionService", new SelectionService);
         this.extensionManager = new ExtensionManager(this);
@@ -163,7 +163,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     async executeCommand(command) {
         const modelCommandService = this.serviceContainer.modelCommandService;
         if (modelCommandService) {
-            let handeled = modelCommandService.executeCommand(this, command);
+            let handeled = await modelCommandService.executeCommand(this, command);
             if (handeled != null)
                 return;
         }
@@ -318,6 +318,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         DomHelper.removeAllChildnodes(this.overlayLayer);
         this.rootDesignItem.clearChildren();
         this.addDesignItems(designItems);
+        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
     }
     addDesignItems(designItems) {
         if (designItems) {
@@ -396,7 +397,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     showDesignItemContextMenu(designItem, event) {
         const mnuItems = [];
         for (let cme of this.serviceContainer.designerContextMenuExtensions) {
-            if (cme.shouldProvideContextmenu(event, this, designItem)) {
+            if (cme.shouldProvideContextmenu(event, this, designItem, 'designer')) {
                 mnuItems.push(...cme.provideContextMenuItems(event, this, designItem));
             }
         }

package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.d.ts

@@ -1,8 +1,8 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IContextMenuExtension } from "./IContextMenuExtension";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class CopyPasteContextMenu implements IContextMenuExtension {
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js

@@ -1,6 +1,6 @@
 import { CommandType } from "../../../../../commandHandling/CommandType";
 export class CopyPasteContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem) {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
         return true;
     }
     provideContextMenuItems(event, designerView, designItem) {

package/dist/elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.d.ts

@@ -1,7 +1,8 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
+export declare type ContextmenuInitiator = 'designer' | 'treeView' | 'other';
 export interface IContextMenuExtension {
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): any;
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): any;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.d.ts

@@ -1,9 +1,9 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IContextMenuExtension } from "./IContextMenuExtension";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class ItemsBelowContextMenu implements IContextMenuExtension {
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
     private _select;
     private _searchForItemsBelow;

package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js

@@ -1,7 +1,7 @@
 import { DesignItem } from "../../../../item/DesignItem";
 export class ItemsBelowContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem) {
-        return true;
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return initiator == 'designer';
     }
     provideContextMenuItems(event, designerView, designItem) {
         const lstItems = this._searchForItemsBelow(event, designerView);
@@ -31,7 +31,8 @@ export class ItemsBelowContextMenu {
                         break;
                     if (el !== designerView.overlayLayer && el.parentElement !== designerView.overlayLayer && el.getRootNode() === designerView.shadowRoot)
                         lstEl.push(el);
-                    backupPEventsMap.set(el, el.style.pointerEvents);
+                    if (!backupPEventsMap.has(el))
+                        backupPEventsMap.set(el, el.style.pointerEvents);
                     el.style.pointerEvents = 'none';
                     const oldEl = el;
                     el = designerView.elementFromPoint(event.x, event.y);

package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.d.ts

@@ -1,9 +1,9 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IContextMenuExtension } from "./IContextMenuExtension";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class MultipleItemsSelectedContextMenu implements IContextMenuExtension {
     orderIndex: number;
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js

@@ -1,6 +1,6 @@
 export class MultipleItemsSelectedContextMenu {
     orderIndex = 60;
-    shouldProvideContextmenu(event, designerView, designItem) {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
         if (designItem.instanceServiceContainer.selectionService.selectedElements.length > 1) {
             return true;
         }

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.d.ts

@@ -1,8 +1,8 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IContextMenuExtension } from "./IContextMenuExtension";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class ZMoveContextMenu implements IContextMenuExtension {
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
 }

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js

@@ -1,6 +1,6 @@
 import { CommandType } from "../../../../../commandHandling/CommandType";
 export class ZMoveContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem) {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
         return true;
     }
     provideContextMenuItems(event, designerView, designItem) {

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

@@ -221,8 +221,10 @@ export class PointerTool {
                                             backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
                                             newContainerElement.style.pointerEvents = 'none';
                                             const newC = designerCanvas.elementFromPoint(event.x, event.y);
-                                            if (newContainerElement === newC)
+                                            if (newContainerElement === newC) {
+                                                newContainerElement = null;
                                                 break;
+                                            }
                                             newContainerElement = newC;
                                         }
                                     }
@@ -232,7 +234,7 @@ export class PointerTool {
                                         e[0].style.pointerEvents = e[1];
                                     }
                                 }
-                                if (newContainerElement != null) {
+                                if (newContainerElement != null) { //Check if container is in designer canvas....
                                     let p = newContainerElement;
                                     while (p != null) {
                                         if (p === designerCanvas.rootDesignItem.element)

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

@@ -24,7 +24,6 @@ export class RectangleSelectorTool {
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
-                    console.warn(currentPoint);
                     let w = currentPoint.x - this._initialPoint.x;
                     let h = currentPoint.y - this._initialPoint.y;
                     if (w >= 0) {

package/dist/elements/widgets/propertyGrid/PropertyGrid copy.d.ts

@@ -0,0 +1,17 @@
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { IDesignItem } from '../../item/IDesignItem';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+    private _serviceContainer;
+    private _designerTabControl;
+    private _selectedItems;
+    private _propertyGridPropertyLists;
+    private _itemsObserver;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    set serviceContainer(value: ServiceContainer);
+    get serviceContainer(): ServiceContainer;
+    get selectedItems(): IDesignItem[];
+    set selectedItems(items: IDesignItem[]);
+    private _observeItems;
+}

package/dist/elements/widgets/propertyGrid/PropertyGrid copy.js

@@ -0,0 +1,143 @@
+import { PropertyGridPropertyList } from './PropertyGridPropertyList';
+import { DesignerTabControl } from '../../controls/DesignerTabControl';
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { CssPropertiesService } from '../../services/propertiesService/services/CssPropertiesService';
+import { CommonPropertiesService } from '../../services/propertiesService/services/CommonPropertiesService';
+import { AttributesPropertiesService } from '../../services/propertiesService/services/AttributesPropertiesService';
+export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+    _serviceContainer;
+    _designerTabControl;
+    _selectedItems;
+    _propertyGridPropertyLists;
+    _itemsObserver;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      user-select: none;
+    }
+    iron-pages {
+      overflow: hidden;
+      height: 250px;
+      background: var(--medium-grey, #2f3545);
+      color: white;
+    }
+    button:hover {
+      box-shadow: inset 0 3px 0 var(--light-grey);
+    }
+    button:focus {
+      box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
+    }
+    `;
+    constructor() {
+        super();
+        this._designerTabControl = new DesignerTabControl();
+        this.shadowRoot.appendChild(this._designerTabControl);
+        this.addEventListener('contextmenu', (e) => {
+            if (e.composedPath()[0].localName != 'input')
+                e.preventDefault();
+        });
+        this._itemsObserver = new MutationObserver((m) => {
+            for (const a of this._propertyGridPropertyLists) {
+                a.refreshForDesignItems(this._selectedItems);
+            }
+        });
+    }
+    set serviceContainer(value) {
+        this._serviceContainer = value;
+        this._propertyGridPropertyLists = [];
+        let elementPropertyEditorAttributeList = new PropertyGridPropertyList(value);
+        elementPropertyEditorAttributeList.setPropertiesService(new CssPropertiesService("styles")); //This is replace in selectedItems
+        elementPropertyEditorAttributeList.title = "properties";
+        this._designerTabControl.appendChild(elementPropertyEditorAttributeList);
+        this._propertyGridPropertyLists.push(elementPropertyEditorAttributeList);
+        let attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new AttributesPropertiesService());
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "attributes";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CommonPropertiesService());
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "common";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("set-styles"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "set-styles";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("styles"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "styles";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("alignment"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "alignment";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("grid"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "grid";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("flex"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "flex";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        this._designerTabControl.selectedIndex = 0;
+    }
+    get serviceContainer() {
+        return this._serviceContainer;
+    }
+    get selectedItems() {
+        return this._selectedItems;
+    }
+    set selectedItems(items) {
+        this._selectedItems = items;
+        if (this.selectedItems && this.selectedItems.length > 0) {
+            const propService = this._serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(this.selectedItems[0]));
+            this._propertyGridPropertyLists[0].setPropertiesService(propService);
+            this._propertyGridPropertyLists[0].createElements(this.selectedItems[0]);
+            this._propertyGridPropertyLists[1].createElements(this.selectedItems[0]);
+            this._propertyGridPropertyLists[3].createElements(this.selectedItems[0]);
+        }
+        for (const a of this._propertyGridPropertyLists) {
+            a.designItemsChanged(items);
+        }
+        if (items) {
+            if (items.length == 1) {
+                for (const a of this._propertyGridPropertyLists) {
+                    a.designItemsChanged(items);
+                    a.refreshForDesignItems(items);
+                }
+                this._observeItems();
+                /*let properties = serviceContainer.forSomeServicesTillResult("propertyService", x => x.getProperties(element));
+        
+                if (properties) {
+                  let attributeEditorAttributeList = new PropertyGridPropertyList();
+                  attributeEditorAttributeList.serviceContainer = this.serviceContainer;
+                  // attributeEditorAttributeList.title =
+                  attributeEditorAttributeList.createElements(properties);
+                  this._designerTabControl.appendChild(attributeEditorAttributeList);
+                }*/
+            }
+        }
+        else {
+            this._itemsObserver.disconnect();
+        }
+    }
+    _observeItems() {
+        this._itemsObserver.disconnect();
+        this._itemsObserver.observe(this._selectedItems[0].element, { attributes: true, childList: false, characterData: false });
+    }
+}
+customElements.define('node-projects-property-grid', PropertyGrid);

package/dist/elements/widgets/propertyGrid/PropertyGrid.d.ts

@@ -1,16 +1,20 @@
 import { ServiceContainer } from '../../services/ServiceContainer';
 import { IDesignItem } from '../../item/IDesignItem';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     private _serviceContainer;
     private _designerTabControl;
     private _selectedItems;
     private _propertyGridPropertyLists;
     private _itemsObserver;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
     static readonly style: CSSStyleSheet;
     constructor();
     set serviceContainer(value: ServiceContainer);
     get serviceContainer(): ServiceContainer;
+    set instanceServiceContainer(value: InstanceServiceContainer);
     get selectedItems(): IDesignItem[];
     set selectedItems(items: IDesignItem[]);
     private _observeItems;

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

@@ -10,18 +10,14 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _selectedItems;
     _propertyGridPropertyLists;
     _itemsObserver;
+    _instanceServiceContainer;
+    _selectionChangedHandler;
     static style = css `
     :host {
       display: block;
       height: 100%;
       user-select: none;
     }
-    iron-pages {
-      overflow: hidden;
-      height: 250px;
-      background: var(--medium-grey, #2f3545);
-      color: white;
-    }
     button:hover {
       box-shadow: inset 0 3px 0 var(--light-grey);
     }
@@ -98,6 +94,14 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     get serviceContainer() {
         return this._serviceContainer;
     }
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+            this.selectedItems = e.selectedElements;
+        });
+        this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements;
+    }
     get selectedItems() {
         return this._selectedItems;
     }
@@ -120,15 +124,6 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
                     a.refreshForDesignItems(items);
                 }
                 this._observeItems();
-                /*let properties = serviceContainer.forSomeServicesTillResult("propertyService", x => x.getProperties(element));
-        
-                if (properties) {
-                  let attributeEditorAttributeList = new PropertyGridPropertyList();
-                  attributeEditorAttributeList.serviceContainer = this.serviceContainer;
-                  // attributeEditorAttributeList.title =
-                  attributeEditorAttributeList.createElements(properties);
-                  this._designerTabControl.appendChild(attributeEditorAttributeList);
-                }*/
             }
         }
         else {

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.d.ts

@@ -0,0 +1,15 @@
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
+export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _type;
+    private _id;
+    private _pg;
+    private _selectionChangedHandler;
+    private _instanceServiceContainer;
+    constructor();
+    set serviceContainer(value: ServiceContainer);
+    set instanceServiceContainer(value: InstanceServiceContainer);
+}

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

@@ -0,0 +1,86 @@
+import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { sleep } from '../../helper/Helper.js';
+export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      user-select: none;
+      background: var(--medium-grey, #2f3545);
+      color: white;
+    }
+    div {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      padding: 6px;
+      font-family: monospace; 
+      align-items: center;
+    }
+    .desc {
+      font-weight: 700;
+      font-size: 10px;
+      margin-right: 5px;
+    }
+    input {
+      background: var(--medium-grey, #2f3545);
+      border: solid 1px gray;
+      color: white;
+      width: calc(100% - 6px);
+    }
+    #type {
+      color: wheat;
+      white-space: nowrap;
+      overflow: hidden;
+      font-size: 12px;
+      height: 20px;
+    }
+    `;
+    static template = html `
+  <div>
+    <span class="desc">Type:</span><span id="type"></span>
+    <span class="desc">Id:</span><input type="text" id="id">
+  </div>
+  <node-projects-property-grid id="pg"></node-projects-property-grid>
+  `;
+    _type;
+    _id;
+    _pg;
+    _selectionChangedHandler;
+    _instanceServiceContainer;
+    constructor() {
+        super();
+        this._type = this._getDomElement('type');
+        this._id = this._getDomElement('id');
+        this._pg = this._getDomElement('pg');
+        this._id.onkeydown = e => {
+            if (e.key == 'Enter')
+                this._instanceServiceContainer.selectionService.primarySelection.id = this._id.value;
+            else if (e.key == 'Escape') {
+                this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        let pSel;
+        this._id.onfocus = e => {
+            pSel = this._instanceServiceContainer.selectionService.primarySelection;
+        };
+        this._id.onblur = e => {
+            pSel.id = this._id.value;
+        };
+    }
+    set serviceContainer(value) {
+        this._waitForChildrenReady().then(() => this._pg.serviceContainer = value);
+    }
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        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.
+            this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
+            this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+        });
+    }
+}
+customElements.define('node-projects-property-grid-with-header', PropertyGridWithHeader);

package/dist/elements/widgets/treeView/treeView.d.ts

@@ -2,16 +2,21 @@ import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-web
 import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent';
 import { IDesignItem } from '../../item/IDesignItem';
 import { ITreeView } from './ITreeView';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 export declare class TreeView extends BaseCustomWebComponentLazyAppend implements ITreeView {
     private _items;
     private _index;
     private _previouslySelected;
     private _treeDiv;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
+    private _contentChangedHandler;
     private _mapElementTreeitem;
     private _rootItem;
     static readonly style: CSSStyleSheet;
     constructor();
     createTree(rootItem: IDesignItem): void;
+    set instanceServiceContainer(value: InstanceServiceContainer);
     selectionChanged(event: ISelectionChangedEvent): void;
     private _recomputeTree;
     private _makeButton;

package/dist/elements/widgets/treeView/treeView.js

@@ -5,6 +5,9 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
     _index;
     _previouslySelected;
     _treeDiv;
+    _instanceServiceContainer;
+    _selectionChangedHandler;
+    _contentChangedHandler;
     _mapElementTreeitem;
     _rootItem;
     //TODO, buuton so key events can be transfered to designer Cnvas (so you can move controls with keys)
@@ -115,6 +118,18 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
             this._recomputeTree(rootItem.element, null /*, activeElement */);
     }
     // this.instanceServiceContainer.selectionService.setSelectedElements(null);
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+            this.selectionChanged(e);
+        });
+        this._contentChangedHandler?.dispose();
+        this._contentChangedHandler = this._instanceServiceContainer.contentService.onContentChanged.on(e => {
+            this.createTree(value.contentService.rootDesignItem);
+        });
+        this.createTree(value.contentService.rootDesignItem);
+    }
     selectionChanged(event) {
         if (event.selectedElements.length > 0) {
             this._selectTreeElements(event.selectedElements.map(x => this._mapElementTreeitem.get(x.element)));

package/dist/elements/widgets/treeView/treeViewExtended.d.ts

@@ -2,10 +2,15 @@ import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-cus
 import { ITreeView } from './ITreeView';
 import { IDesignItem } from '../../item/IDesignItem';
 import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
+import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper.js';
 export declare class TreeViewExtended extends BaseCustomWebComponentConstructorAppend implements ITreeView {
     private _treeDiv;
     private _tree;
     private _filter;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
+    private _contentChangedHandler;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
@@ -15,8 +20,10 @@ export declare class TreeViewExtended extends BaseCustomWebComponentConstructorA
     _switchLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
     _showHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
     _switchHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
     ready(): Promise<void>;
     createTree(rootItem: IDesignItem): void;
+    set instanceServiceContainer(value: InstanceServiceContainer);
     selectionChanged(event: ISelectionChangedEvent): void;
     private _recomputeTree;
     private _getChildren;

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -1,10 +1,14 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { NodeType } from '../../item/NodeType';
 import { assetsPath } from '../../../Constants';
+import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper.js';
 export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;
     _filter;
+    _instanceServiceContainer;
+    _selectionChangedHandler;
+    _contentChangedHandler;
     static style = css `
       * {
           touch-action: none;
@@ -39,14 +43,24 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
       }
       td {
         white-space: nowrap;
-      }
-      td:nth-child(n+2) {
-        text-align: center;
+        display: flex;
       }
       td > img {
         vertical-align: middle;
       }
 
+      .cmd {
+        display: flex;
+        position: sticky;
+        right: 0;
+        padding-right: 4px;
+        align-items: center;
+        gap: 2px;
+        background: #ffffffc9;
+        width: 70px;
+        justify-content: flex-end;
+      }
+
       table.fancytree-ext-table tbody tr.fancytree-selected {
         background-color: #bebebe;
       }
@@ -58,16 +72,16 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
       <table id="treetable" style="min-width: 100%;">
         <colgroup>
           <col width="*">
+          <!--<col width="25px">
           <col width="25px">
-          <col width="25px">
-          <col width="25px">
+          <col width="25px">-->
         </colgroup>
         <thead style="display: none;">
           <tr>
             <th></th>
+            <!--<th></th>
             <th></th>
-            <th></th>
-            <th></th>
+            <th></th>-->
           </tr>
         </thead>
       </table>
@@ -122,6 +136,17 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
         designItem.hideAtRunTime = !designItem.hideAtRunTime;
         this._showHideAtRunTimeState(img, designItem);
     }
+    showDesignItemContextMenu(designItem, event) {
+        event.preventDefault();
+        const mnuItems = [];
+        for (let cme of designItem.serviceContainer.designerContextMenuExtensions) {
+            if (cme.shouldProvideContextmenu(event, designItem.instanceServiceContainer.designerCanvas, designItem, 'treeView')) {
+                mnuItems.push(...cme.provideContextMenuItems(event, designItem.instanceServiceContainer.designerCanvas, designItem));
+            }
+        }
+        let ctxMnu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
+        return ctxMnu;
+    }
     async ready() {
         //this._treeDiv.classList.add('fancytree-connectors');
         $(this._treeDiv).fancytree({
@@ -142,46 +167,28 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             },
             createNode: (event, data) => {
                 let node = data.node;
-                if (node.tr.children[1]) {
+                if (node.tr.children[0]) {
                     let designItem = node.data.ref;
-                    if (designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
-                        /*
-                        let toolTipImg: HTMLImageElement;
-                        (<HTMLElement>node.tr.children[0]).onmouseenter = (e) => {
-                          toolTipImg = document.createElement("img");
-                          Screenshot.takeScreenshot(designItem.element).then(x => { if (toolTipImg) toolTipImg.src = x; });
-                          toolTipImg.style.position = 'absolute';
-                          let r = node.tr.children[0].getBoundingClientRect();
-                          toolTipImg.style.left = (e.x + 5 - r.left) + 'px';
-                          toolTipImg.style.top = (e.y + 5 - r.top) + 'px';
-                          (<HTMLElement>node.tr.children[0]).appendChild(toolTipImg);
-                        }
-                        (<HTMLElement>node.tr.children[0]).onmousemove = (e) => {
-                          if (toolTipImg) {
-                            let r = node.tr.children[0].getBoundingClientRect();
-                            toolTipImg.style.left = (e.x + 5 - r.left) + 'px';
-                            toolTipImg.style.top = (e.y + 5 - r.top) + 'px';
-                          }
-                        }
-                        (<HTMLElement>node.tr.children[0]).onmouseout = (e) => {
-                          if (toolTipImg) {
-                            toolTipImg.parentNode?.removeChild(toolTipImg);
-                            toolTipImg = null;
-                          }
-                        }
-                        */
+                    if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
+                        node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
+                        let d = document.createElement("div");
+                        d.className = "cmd";
                         let img = document.createElement('img');
                         this._showHideAtDesignTimeState(img, designItem);
                         img.onclick = () => this._switchHideAtDesignTimeState(img, designItem);
-                        node.tr.children[1].appendChild(img);
+                        img.title = 'hide in designer';
+                        d.appendChild(img);
                         let imgL = document.createElement('img');
                         this._showLockAtDesignTimeState(imgL, designItem);
                         imgL.onclick = () => this._switchLockAtDesignTimeState(imgL, designItem);
-                        node.tr.children[2].appendChild(imgL);
+                        imgL.title = 'lock';
+                        d.appendChild(imgL);
                         let imgH = document.createElement('img');
                         this._showHideAtRunTimeState(imgH, designItem);
                         imgH.onclick = () => this._switchHideAtRunTimeState(imgH, designItem);
-                        node.tr.children[3].appendChild(imgH);
+                        imgH.title = 'hide at runtime';
+                        d.appendChild(imgH);
+                        node.tr.children[0].appendChild(d);
                     }
                 }
             },
@@ -318,6 +325,18 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
             this._recomputeTree(rootItem);
         }
     }
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+            this.selectionChanged(e);
+        });
+        this._contentChangedHandler?.dispose();
+        this._contentChangedHandler = this._instanceServiceContainer.contentService.onContentChanged.on(e => {
+            this.createTree(value.contentService.rootDesignItem);
+        });
+        this.createTree(value.contentService.rootDesignItem);
+    }
     selectionChanged(event) {
         if (event.selectedElements.length > 0) {
             this._highlight(event.selectedElements);

package/dist/index.d.ts

@@ -84,6 +84,7 @@ export type { IServiceContainer } from "./elements/services/IServiceContainer.js
 export * from "./elements/services/ServiceContainer.js";
 export * from "./elements/widgets/propertyGrid/PropertyGrid.js";
 export * from "./elements/widgets/propertyGrid/PropertyGridPropertyList.js";
+export * from "./elements/widgets/propertyGrid/PropertyGridWithHeader.js";
 export type { IDesignerCanvas } from "./elements/widgets/designerView/IDesignerCanvas.js";
 export type { IPlacementView } from "./elements/widgets/designerView/IPlacementView.js";
 export * from "./elements/widgets/designerView/designerView.js";
@@ -132,7 +133,7 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
-export type { IContextMenuExtension } from "./elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.js";
+export type { IContextMenuExtension, ContextmenuInitiator } from "./elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";

package/dist/index.js

@@ -53,6 +53,7 @@ export * from "./elements/services/InstanceServiceContainer.js";
 export * from "./elements/services/ServiceContainer.js";
 export * from "./elements/widgets/propertyGrid/PropertyGrid.js";
 export * from "./elements/widgets/propertyGrid/PropertyGridPropertyList.js";
+export * from "./elements/widgets/propertyGrid/PropertyGridWithHeader.js";
 export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";

package/package.json

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