@node-projects/web-component-designer 0.0.43 → 0.0.47

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);
@@ -161,9 +161,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     /* --- start IUiCommandHandler --- */
     async executeCommand(command) {
-        let handeled = this.serviceContainer.modelCommandService.executeCommand(this, command);
-        if (handeled != null)
-            return;
+        const modelCommandService = this.serviceContainer.modelCommandService;
+        if (modelCommandService) {
+            let handeled = await modelCommandService.executeCommand(this, command);
+            if (handeled != null)
+                return;
+        }
         switch (command.type) {
             case CommandType.screenshot:
                 {
@@ -212,9 +215,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     canExecuteCommand(command) {
-        let handeled = this.serviceContainer.modelCommandService.canExecuteCommand(this, command);
-        if (handeled !== null)
-            return handeled;
+        const modelCommandService = this.serviceContainer.modelCommandService;
+        if (modelCommandService) {
+            let handeled = modelCommandService.canExecuteCommand(this, command);
+            if (handeled !== null)
+                return handeled;
+        }
         if (command.type === CommandType.undo) {
             return this.instanceServiceContainer.undoService.canUndo();
         }
@@ -312,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) {

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._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,14 @@ 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';
 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();
@@ -17,6 +21,7 @@ export declare class TreeViewExtended extends BaseCustomWebComponentConstructorA
     _switchHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
     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

@@ -5,6 +5,9 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;
     _filter;
+    _instanceServiceContainer;
+    _selectionChangedHandler;
+    _contentChangedHandler;
     static style = css `
       * {
           touch-action: none;
@@ -39,14 +42,20 @@ 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: 4px;
+        align-items: center;
+        gap: 2px;
+      }
+
       table.fancytree-ext-table tbody tr.fancytree-selected {
         background-color: #bebebe;
       }
@@ -58,16 +67,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>
@@ -142,46 +151,27 @@ 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) {
+                        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 +308,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

@@ -49,6 +49,8 @@ export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export type { IInstanceService } from "./elements/services/instanceService/IInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
 export type { IPrepareElementsForDesignerService } from "./elements/services/instanceService/IPrepareElementsForDesignerService.js";
+export type { IModelCommandService } from "./elements/services/modelCommandService/IModelCommandService.js";
+export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export type { IEditorTypesService } from "./elements/services/propertiesService/IEditorTypesService.js";
 export type { IPropertiesService } from "./elements/services/propertiesService/IPropertiesService.js";
@@ -82,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";

package/dist/index.js

@@ -28,6 +28,7 @@ export * from "./elements/services/htmlParserService/DefaultHtmlParserService.js
 export * from "./elements/services/htmlParserService/NodeHtmlParserService.js";
 export * from "./elements/services/instanceService/DefaultInstanceService.js";
 export * from "./elements/services/instanceService/PrepareElementsForDesignerService.js";
+export * from "./elements/services/modelCommandService/DefaultModelCommandService.js";
 export * from "./elements/services/propertiesService/DefaultEditorTypesService.js";
 export * from "./elements/services/propertiesService/services/BaseCustomWebComponentPropertiesService.js";
 export * from "./elements/services/propertiesService/services/CommonPropertiesService.js";
@@ -52,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.43",
+  "version": "0.0.47",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",