@node-projects/web-component-designer 0.1.0 → 0.1.1

package/dist/elements/widgets/designerView/tools/toolBar/popups/TransformToolPopup.js

@@ -0,0 +1,293 @@
+import { html, BaseCustomWebComponentConstructorAppend, css } from '@node-projects/base-custom-webcomponent';
+import { filterChildPlaceItems } from '../../../../../helper/LayoutHelper.js';
+import { calculateOuterRect } from '../../../../../helper/ElementHelper.js';
+export class TransformToolPopup extends BaseCustomWebComponentConstructorAppend {
+    _designerView;
+    _previousSelectionRect;
+    _selectionChanged;
+    _relativeButton;
+    _absoluteButton;
+    _applyButton;
+    _inputX;
+    _inputY;
+    _inputR;
+    _originTopLeft;
+    _originTopMid;
+    _originTopRight;
+    _originMidLeft;
+    _originMidMid;
+    _originMidRight;
+    _originBotLeft;
+    _originBotMid;
+    _originBotRight;
+    _transformMode;
+    _transformOrigin;
+    static style = css `
+      .container {
+          width: 220px;
+          min-height: 200px;
+          color: white;
+          background-color: rgb(64, 64, 64);
+          border: 1px solid black;
+      }
+      header {
+          text-align: center;
+      }
+      .inputs{
+        float: left;
+        margin-top: 5px;
+        align-items: center;
+      }
+      .input {
+        display: flex;
+        align-items: center; 
+        margin-top: 5px;
+      }
+      .text {
+        margin-left: 5px;
+        font-size: 14px;
+      }
+      .strokecolor{ 
+        float: both;
+      }
+      .fillbrush{
+        float: both;
+      }
+      .strokethickness{
+        float: both;
+      }
+      #input-div{
+        display: grid;
+        grid-template-columns: 1fr 9fr;
+        grid-template-rows: 25px 25px 25px;
+        grid-row-gap: 2px;
+        font-size: small;
+        margin: 10px;
+      }
+      #button-div{
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 25px;
+        font-size: small;
+        margin: 10px;
+        grid-column-gap: 5px
+      }
+      #apply-div{
+        font-size: small;
+        justify-content: center;
+        width: 100%;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        display: flex;
+      }
+      #cube{
+        display: grid;
+        grid-template-columns: 20px 20px 20px;
+        grid-template-rows: 20px 20px 20px;
+        grid-gap: 10px;
+        padding: 10px;
+        top: -80px;
+        position: relative;
+      }
+      #cube-background{
+        width: 60px;
+        height: 60px;
+        background: gray;
+        margin-top: 20px;
+        margin-left: 20px;
+      }
+      `;
+    static template = html `
+        <div class="container">
+          <header>
+            <h2 id="title" style="margin:0px;">Transform</h2>
+          </header>
+          <main id="content-area">
+            <div id="input-div">
+              <span>X:</span>
+              <input type="number" id="transform-input-x">
+              <span>Y:</span>
+              <input type="number" id="transform-input-y">
+              <span>R:</span>
+              <input type="number" id="transform-input-r">
+            </div>
+            <div id="button-div">
+              <button id="transform-button-absolute">absolute</button>
+              <button id="transform-button-relative">relative</button>
+            </div>
+
+            <div style="justify-content: center; display: grid; height: 100px">
+              <div id="cube-background"></div>
+                <div id="cube">
+                  <input id="origin-top-left" type="radio" name="origin-radio">
+                  <input id="origin-top-mid" type="radio" name="origin-radio">
+                  <input id="origin-top-right" type="radio" name="origin-radio">
+                  <input id="origin-mid-left" type="radio" name="origin-radio">
+                  <input id="origin-mid-mid" type="radio" name="origin-radio" checked>
+                  <input id="origin-mid-right" type="radio" name="origin-radio">
+                  <input id="origin-bot-left" type="radio" name="origin-radio">
+                  <input id="origin-bot-mid" type="radio" name="origin-radio">
+                  <input id="origin-bot-right" type="radio" name="origin-radio">
+                </div>
+            </div>
+
+            <div id="apply-div">
+              <button id="transform-button-apply" style="width:100px;">apply</button>
+            </div>
+          </main>
+        </div>`;
+    constructor() {
+        super();
+        this._relativeButton = this._getDomElement("transform-button-relative");
+        this._absoluteButton = this._getDomElement("transform-button-absolute");
+        this._applyButton = this._getDomElement("transform-button-apply");
+        this._inputX = this._getDomElement("transform-input-x");
+        this._inputY = this._getDomElement("transform-input-y");
+        this._inputR = this._getDomElement("transform-input-r");
+        this._originTopLeft = this._getDomElement("origin-top-left");
+        this._originTopMid = this._getDomElement("origin-top-mid");
+        this._originTopRight = this._getDomElement("origin-top-right");
+        this._originMidLeft = this._getDomElement("origin-mid-left");
+        this._originMidMid = this._getDomElement("origin-mid-mid");
+        this._originMidRight = this._getDomElement("origin-mid-right");
+        this._originBotLeft = this._getDomElement("origin-bot-left");
+        this._originBotMid = this._getDomElement("origin-bot-mid");
+        this._originBotRight = this._getDomElement("origin-bot-right");
+        this._relativeButton.onclick = () => this._changePositionMode("relative");
+        this._absoluteButton.onclick = () => this._changePositionMode("absolute");
+        this._applyButton.onclick = () => this._applyTransform();
+        this._transformMode = "relative";
+        this._changePositionMode(this._transformMode);
+    }
+    _changePositionMode(mode) {
+        if (mode == "relative") {
+            this._relativeButton.style.backgroundColor = "#6F8A9D";
+            this._relativeButton.style.color = "black";
+            this._absoluteButton.style.backgroundColor = "#A4B5C1";
+            this._absoluteButton.style.color = "#77716E";
+        }
+        else {
+            this._absoluteButton.style.backgroundColor = "#6F8A9D";
+            this._absoluteButton.style.color = "black";
+            this._relativeButton.style.backgroundColor = "#A4B5C1";
+            this._relativeButton.style.color = "#77716E";
+        }
+        this._transformMode = mode;
+    }
+    _applyTransform() {
+        this._checkOrigin();
+        this._designerView = this.getRootNode().host.designerView;
+        let selection = this._designerView.instanceServiceContainer.selectionService.selectedElements;
+        selection = filterChildPlaceItems(selection);
+        this._selectionChanged = false;
+        this._designerView.instanceServiceContainer.selectionService.onSelectionChanged.once(() => {
+            this._selectionChanged = true;
+            this._previousSelectionRect = null;
+        });
+        if (selection.length != 0) {
+            let inputPos = {
+                x: isNaN(this._inputX.valueAsNumber) ? null : this._inputX.valueAsNumber,
+                y: isNaN(this._inputY.valueAsNumber) ? null : this._inputY.valueAsNumber
+            };
+            let inputRotation = this._inputR.valueAsNumber ? this._inputR.valueAsNumber : 0;
+            let grp = selection[0].openGroup("Transform selection");
+            if (!this._previousSelectionRect || this._selectionChanged)
+                this._previousSelectionRect = calculateOuterRect(selection, this._designerView.designerCanvas);
+            let origin = this._calculateTransformOriginPosition(this._previousSelectionRect);
+            for (let item of selection) {
+                let itemPos = {
+                    x: parseFloat(item.getStyle("left")),
+                    y: parseFloat(item.getStyle("top")),
+                    width: parseFloat(item.getStyle("width")),
+                    height: parseFloat(item.getStyle("height"))
+                };
+                let itemRotStyle = item.getStyle("transform");
+                let itemRotation = 0;
+                if (itemRotStyle)
+                    itemRotation = parseFloat(item.getStyle("transform").replaceAll("rotate(", "").replaceAll("deg)", ""));
+                let newPos = this._calculateTransform(this._previousSelectionRect, origin, itemPos, inputRotation, inputPos, this._transformMode);
+                item.setStyle("left", newPos.x.toString() + "px");
+                item.setStyle("top", newPos.y.toString() + "px");
+                let rotation;
+                if (this._transformMode == 'relative')
+                    rotation = itemRotation + inputRotation;
+                else
+                    rotation = inputRotation;
+                while (rotation >= 360)
+                    rotation -= 360;
+                if (rotation != 0)
+                    item.setStyle("transform", "rotate(" + rotation + "deg)");
+                else
+                    item.removeStyle("transform");
+            }
+            grp.commit();
+        }
+    }
+    _calculateTransformOriginPosition(selectionRect) {
+        switch (this._transformOrigin) {
+            case "topLeft":
+                return { x: selectionRect.x, y: selectionRect.y };
+            case "topMid":
+                return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y };
+            case "topRight":
+                return { x: selectionRect.x + selectionRect.width, y: selectionRect.y };
+            case "midLeft":
+                return { x: selectionRect.x, y: selectionRect.y + selectionRect.height / 2 };
+            case "midMid":
+                return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y + selectionRect.height / 2 };
+            case "midRight":
+                return { x: selectionRect.x + selectionRect.width, y: selectionRect.y + selectionRect.height / 2 };
+            case "botLeft":
+                return { x: selectionRect.x, y: selectionRect.y + selectionRect.height };
+            case "botMid":
+                return { x: selectionRect.x + selectionRect.width / 2, y: selectionRect.y + selectionRect.height };
+            case "botRight":
+                return { x: selectionRect.x + selectionRect.width, y: selectionRect.y + selectionRect.height };
+        }
+    }
+    _checkOrigin() {
+        if (this._originTopLeft.checked)
+            this._transformOrigin = "topLeft";
+        else if (this._originTopMid.checked)
+            this._transformOrigin = "topMid";
+        else if (this._originTopRight.checked)
+            this._transformOrigin = "topRight";
+        else if (this._originMidLeft.checked)
+            this._transformOrigin = "midLeft";
+        else if (this._originMidMid.checked)
+            this._transformOrigin = "midMid";
+        else if (this._originMidRight.checked)
+            this._transformOrigin = "midRight";
+        else if (this._originBotLeft.checked)
+            this._transformOrigin = "botLeft";
+        else if (this._originBotMid.checked)
+            this._transformOrigin = "botMid";
+        else if (this._originBotRight.checked)
+            this._transformOrigin = "botRight";
+    }
+    _calculateTransform(selectionRect, origin, itemRect, rotation, inputPos, transformMode) {
+        let newPoint;
+        // convert deg in rad
+        rotation = rotation * (Math.PI / 180);
+        if (transformMode == 'absolute') {
+            if (inputPos.x)
+                inputPos.x = inputPos.x - selectionRect.x;
+            if (inputPos.y)
+                inputPos.y = inputPos.y - selectionRect.y;
+        }
+        origin = {
+            x: origin.x - itemRect.width / 2,
+            y: origin.y - itemRect.height / 2
+        };
+        let diffItemPosToOrigin = {
+            x: itemRect.x - origin.x,
+            y: itemRect.y - origin.y
+        };
+        newPoint = {
+            x: Math.cos(rotation) * diffItemPosToOrigin.x - Math.sin(rotation) * diffItemPosToOrigin.y + origin.x + inputPos.x,
+            y: Math.sin(rotation) * diffItemPosToOrigin.x + Math.cos(rotation) * diffItemPosToOrigin.y + origin.y + inputPos.y
+        };
+        return newPoint;
+    }
+}
+customElements.define('node-projects-designer-transformtool-popup', TransformToolPopup);

package/dist/elements/widgets/miniatureView/IMiniatureView.d.ts

@@ -0,0 +1,2 @@
+export interface IMiniatureView {
+}

package/dist/elements/widgets/miniatureView/IMiniatureView.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/paletteView/paletteElements.d.ts

@@ -0,0 +1,10 @@
+import { IElementDefinition } from '../../services/elementsService/IElementDefinition.js';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+export declare class PaletteElements extends BaseCustomWebComponentLazyAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _table;
+    constructor();
+    loadElements(serviceContainer: ServiceContainer, elementDefintions: IElementDefinition[]): void;
+}

package/dist/elements/widgets/paletteView/paletteElements.js

@@ -0,0 +1,139 @@
+import { dragDropFormatNameElementDefinition } from '../../../Constants.js';
+import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { DrawElementTool } from '../designerView/tools/DrawElementTool.js';
+export class PaletteElements extends BaseCustomWebComponentLazyAppend {
+    static style = css `
+    :host {
+      display: block;
+      box-sizing: border-box;
+      height: 100%;
+      overflow: auto;        
+    }
+
+    button {
+      background-color: transparent;
+      color: white;
+      border: none;
+      font-size: 13px;
+      display: block;
+      cursor: pointer;
+      width: 100%;
+      text-align: left;
+      padding: 8px 14px;
+    }
+    button:hover {
+      background: var(--light-grey, #383f52);
+    }
+
+    table {
+      width: 100%
+    }
+
+    td {
+      color: white;
+      font-size: 13px;
+    }
+
+    div {
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: bold;
+      padding: 4px 14px;
+    }
+    `;
+    static template = html `
+    <table id="table">
+    </table>
+  `;
+    _table;
+    constructor() {
+        super();
+        this._table = this._getDomElement('table');
+    }
+    loadElements(serviceContainer, elementDefintions) {
+        for (const elementDefintion of elementDefintions) {
+            let option = document.createElement("option");
+            option.value = elementDefintion.tag;
+            const tr = document.createElement("tr");
+            const tdEl = document.createElement("td");
+            const button = document.createElement("button");
+            button.innerText = elementDefintion.name ? elementDefintion.name : elementDefintion.tag;
+            button.draggable = true;
+            button.ondragstart = (e) => {
+                e.dataTransfer.setData(dragDropFormatNameElementDefinition, JSON.stringify(elementDefintion));
+                e.currentTarget.style.outline = "dashed";
+                if (elementDefintion.ghostElement) {
+                    if (typeof elementDefintion.ghostElement === 'string') {
+                        const range = document.createRange();
+                        range.selectNode(document.body);
+                        const fragment = range.createContextualFragment(elementDefintion.ghostElement);
+                        let elem = fragment.firstChild;
+                        elem.style.position = "absolute";
+                        elem.style.top = "-1000px";
+                        document.body.appendChild(elem);
+                        e.dataTransfer.setDragImage(elem, 0, 0);
+                        requestAnimationFrame(() => document.body.removeChild(elem));
+                    }
+                    else {
+                        e.dataTransfer.setDragImage(elementDefintion.ghostElement, 0, 0);
+                    }
+                }
+                else if (!elementDefintion.import) {
+                    try {
+                        let elem = document.createElement(elementDefintion.tag);
+                        if (elementDefintion.defaultContent)
+                            elem.innerHTML = elementDefintion.defaultContent;
+                        if (elementDefintion.defaultWidth)
+                            elem.style.width = elementDefintion.defaultWidth;
+                        if (elementDefintion.defaultHeight)
+                            elem.style.height = elementDefintion.defaultHeight;
+                        if (elementDefintion.defaultAttributes) {
+                            for (let a in elementDefintion.defaultAttributes) {
+                                elem.setAttribute(a, elementDefintion.defaultAttributes[a]);
+                            }
+                        }
+                        if (elementDefintion.defaultStyles) {
+                            for (let s in elementDefintion.defaultStyles) {
+                                elem.style[s] = elementDefintion.defaultStyles[s];
+                            }
+                        }
+                        elem.style.position = "absolute";
+                        if (elementDefintion.defaultWidth)
+                            elem.style.top = "-" + (parseInt(elementDefintion.defaultHeight) + 500) + 'px';
+                        else
+                            elem.style.top = "-500px";
+                        if (elementDefintion.defaultWidth)
+                            elem.style.left = "-" + (parseInt(elementDefintion.defaultWidth) + 500) + 'px';
+                        else
+                            elem.style.left = "-500px";
+                        document.body.appendChild(elem);
+                        let rect = elem.getBoundingClientRect();
+                        if (rect.width > 0 && rect.height > 0)
+                            e.dataTransfer.setDragImage(elem, 0, 0);
+                        requestAnimationFrame(() => document.body.removeChild(elem));
+                    }
+                    catch (err) {
+                        console.warn("error creating gost elment", err);
+                    }
+                }
+            };
+            button.ondragend = (e) => {
+                elementDefintion.import = null;
+                e.currentTarget.style.outline = "none";
+            };
+            button.ontouchstart = (e) => {
+                e.preventDefault();
+            };
+            button.onclick = (x) => {
+                serviceContainer.globalContext.tool = new DrawElementTool(elementDefintion);
+            };
+            tdEl.appendChild(button);
+            tr.appendChild(tdEl);
+            const tdDesc = document.createElement("td");
+            tdDesc.innerText = elementDefintion.description ?? "";
+            tr.appendChild(tdDesc);
+            this._table.appendChild(tr);
+        }
+    }
+}
+customElements.define('node-projects-palette-elements', PaletteElements);

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

@@ -0,0 +1,11 @@
+import '../../controls/DesignerTabControl.js';
+import { IElementsService } from '../../services/elementsService/IElementsService.js';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+export declare class PaletteView extends BaseCustomWebComponentLazyAppend {
+    selected: string;
+    private _designerTabControl;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    loadControls(serviceContainer: ServiceContainer, elementsServices: IElementsService[]): Promise<void>;
+}

package/dist/elements/widgets/paletteView/paletteView.js

@@ -0,0 +1,38 @@
+import '../../controls/DesignerTabControl.js';
+import { PaletteElements } from './paletteElements.js';
+import { DesignerTabControl } from '../../controls/DesignerTabControl.js';
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+export class PaletteView extends BaseCustomWebComponentLazyAppend {
+    selected = 'native';
+    _designerTabControl;
+    static style = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: 100%;
+    }`;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this._designerTabControl = new DesignerTabControl();
+        this._designerTabControl.selectedIndex = 0;
+        this.shadowRoot.appendChild(this._designerTabControl);
+    }
+    async loadControls(serviceContainer, elementsServices) {
+        for (const s of elementsServices) {
+            try {
+                let elements = await s.getElements();
+                let paletteElement = new PaletteElements();
+                paletteElement.title = s.name;
+                this._designerTabControl.appendChild(paletteElement);
+                paletteElement.loadElements(serviceContainer, elements);
+            }
+            catch (err) {
+                console.warn('Error loading elements', err);
+            }
+        }
+        this._designerTabControl.refreshItems();
+    }
+}
+customElements.define('node-projects-palette-view', PaletteView);

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

@@ -0,0 +1,24 @@
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+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 _propertyGridPropertyListsDict;
+    private _itemsObserver;
+    private _nodeReplacedCb;
+    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[]);
+    _mutationOccured(): void;
+    private _observePrimarySelectionForChanges;
+}

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

@@ -0,0 +1,125 @@
+import { PropertyGridPropertyList } from './PropertyGridPropertyList.js';
+import { DesignerTabControl } from '../../controls/DesignerTabControl.js';
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { RefreshMode } from '../../services/propertiesService/IPropertiesService.js';
+export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+    _serviceContainer;
+    _designerTabControl;
+    _selectedItems;
+    _propertyGridPropertyLists;
+    _propertyGridPropertyListsDict;
+    _itemsObserver;
+    _nodeReplacedCb;
+    _instanceServiceContainer;
+    _selectionChangedHandler;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+    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._restoreCachedInititalValues();
+        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) => this._mutationOccured());
+    }
+    set serviceContainer(value) {
+        this._serviceContainer = value;
+        this._propertyGridPropertyLists = [];
+        this._propertyGridPropertyListsDict = {};
+    }
+    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;
+    }
+    set selectedItems(items) {
+        if (this._selectedItems != items) {
+            this._selectedItems = items;
+            const pgGroups = this._serviceContainer.propertyGroupService.getPropertygroups(items);
+            const visibleDict = new Set();
+            for (let p of pgGroups) {
+                let lst = this._propertyGridPropertyListsDict[p.name];
+                if (!lst) {
+                    lst = new PropertyGridPropertyList(this.serviceContainer);
+                    lst.title = p.name;
+                    this._designerTabControl.appendChild(lst);
+                    this._propertyGridPropertyLists.push(lst);
+                    this._propertyGridPropertyListsDict[p.name] = lst;
+                }
+                lst.setPropertiesService(p.propertiesService);
+                if (lst.createElements(items[0]))
+                    visibleDict.add(p.name);
+            }
+            for (let p of this._propertyGridPropertyLists) {
+                if (visibleDict.has(p.title))
+                    p.style.display = 'block';
+                else
+                    p.style.display = 'none';
+            }
+            this._designerTabControl.refreshItems();
+            if (this._designerTabControl.selectedIndex < 0)
+                this._designerTabControl.selectedIndex = 0;
+            for (const a of this._propertyGridPropertyLists) {
+                if (visibleDict.has(a.title))
+                    a.designItemsChanged(items);
+            }
+            if (items) {
+                if (items.length == 1) {
+                    for (const a of this._propertyGridPropertyLists) {
+                        if (visibleDict.has(a.title))
+                            a.refreshForDesignItems(items);
+                    }
+                    this._observePrimarySelectionForChanges();
+                }
+            }
+            else {
+                this._itemsObserver.disconnect();
+                this._nodeReplacedCb?.dispose();
+                this._nodeReplacedCb = null;
+            }
+        }
+    }
+    _mutationOccured() {
+        for (const a of this._propertyGridPropertyLists) {
+            if (a.propertiesService?.getRefreshMode(this._selectedItems[0]) == RefreshMode.fullOnValueChange) {
+                a.createElements(this._selectedItems[0]);
+                a.designItemsChanged(this._selectedItems);
+            }
+            a.refreshForDesignItems(this._selectedItems);
+        }
+    }
+    _observePrimarySelectionForChanges() {
+        this._nodeReplacedCb?.dispose();
+        this._itemsObserver.disconnect();
+        this._itemsObserver.observe(this._selectedItems[0].element, { attributes: true, childList: false, characterData: false });
+        this._nodeReplacedCb = this._selectedItems[0].nodeReplaced.on(() => {
+            this._observePrimarySelectionForChanges();
+            this._mutationOccured();
+        });
+    }
+}
+customElements.define('node-projects-property-grid', PropertyGrid);

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

@@ -0,0 +1,28 @@
+import { IProperty } from '../../services/propertiesService/IProperty.js';
+import { ServiceContainer } from '../../services/ServiceContainer.js';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { IPropertyEditor } from '../../services/propertiesService/IPropertyEditor.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IPropertiesService } from '../../services/propertiesService/IPropertiesService.js';
+export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
+    private _div;
+    private _propertyMap;
+    private _serviceContainer;
+    private _propertiesService;
+    private _designItems;
+    get propertiesService(): IPropertiesService;
+    static get style(): CSSStyleSheet;
+    constructor(serviceContainer: ServiceContainer);
+    setPropertiesService(propertiesService: IPropertiesService): void;
+    createElements(designItem: IDesignItem): boolean;
+    private createPropertyGroups;
+    private createPropertyEditors;
+    private _onDragLeave;
+    private _onDragOver;
+    private _onDrop;
+    openContextMenu(event: MouseEvent, property: IProperty): void;
+    static openContextMenu(event: MouseEvent, designItems: IDesignItem[], property: IProperty): void;
+    designItemsChanged(designItems: IDesignItem[]): void;
+    refreshForDesignItems(items: IDesignItem[]): void;
+    static refreshIsSetElementAndEditorForDesignItems(isSetElement: HTMLElement, property: IProperty, items: IDesignItem[], propertiesService: IPropertiesService, editor?: IPropertyEditor): void;
+}