@node-projects/web-component-designer 0.0.154 → 0.0.156

package/dist/elements/services/undoService/transactionItems/InsertAction.d.ts

@@ -1,12 +1,12 @@
 import { ITransactionItem } from '../ITransactionItem';
 import { IDesignItem } from '../../../item/IDesignItem';
 export declare class InsertAction implements ITransactionItem {
-    constructor(designItem: IDesignItem, index: number, newItem: IDesignItem);
+    constructor(containerItem: IDesignItem, index: number, newItem: IDesignItem);
     title?: string;
     get affectedItems(): IDesignItem[];
     undo(): void;
     do(): void;
-    designItem: IDesignItem;
+    containerItem: IDesignItem;
     index: number;
     newItem: IDesignItem;
     mergeWith(other: ITransactionItem): boolean;

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

@@ -1,23 +1,23 @@
 export class InsertAction {
-    constructor(designItem, index, newItem) {
+    constructor(containerItem, index, newItem) {
         this.title = "Insert Item";
-        this.designItem = designItem;
+        this.containerItem = containerItem;
         this.index = index;
         this.newItem = newItem;
     }
     title;
     get affectedItems() {
-        return [this.designItem, this.newItem];
+        return [this.containerItem, this.newItem];
     }
     undo() {
         this.newItem.parent._removeChildInternal(this.newItem);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
     }
     do() {
-        this.designItem._insertChildInternal(this.newItem, this.index);
+        this.containerItem._insertChildInternal(this.newItem, this.index);
         this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: [this.newItem] });
     }
-    designItem;
+    containerItem;
     index;
     newItem;
     mergeWith(other) {

package/dist/elements/services/undoService/transactionItems/SelectionChangedAction.d.ts

@@ -0,0 +1,14 @@
+import { ITransactionItem } from '../ITransactionItem';
+import { IDesignItem } from '../../../item/IDesignItem';
+import { ISelectionService } from '../../selectionService/ISelectionService';
+export declare class SelectionChangedAction implements ITransactionItem {
+    constructor(oldSelection: IDesignItem[], newSelection: IDesignItem[], selectionService: ISelectionService);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    oldSelection: IDesignItem[];
+    newSelection: IDesignItem[];
+    selectionService: ISelectionService;
+    mergeWith(other: ITransactionItem): boolean;
+}

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

@@ -0,0 +1,28 @@
+export class SelectionChangedAction {
+    constructor(oldSelection, newSelection, selectionService) {
+        this.title = "Change Selection";
+        this.oldSelection = oldSelection;
+        this.newSelection = newSelection;
+        this.selectionService = selectionService;
+    }
+    title;
+    get affectedItems() {
+        if (this.oldSelection && this.newSelection)
+            return [...this.oldSelection, ...this.newSelection];
+        if (this.oldSelection)
+            return [...this.oldSelection];
+        return [...this.newSelection];
+    }
+    undo() {
+        this.selectionService._withoutUndoSetSelectedElements(this.oldSelection);
+    }
+    do() {
+        this.selectionService._withoutUndoSetSelectedElements(this.newSelection);
+    }
+    oldSelection;
+    newSelection;
+    selectionService;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/widgets/codeView/code-view-monaco.js

@@ -75,8 +75,28 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
                 minimap: {
                     size: 'fill'
                 },
-                fixedOverflowWidgets: true
+                fixedOverflowWidgets: true,
+                scrollbar: {
+                    useShadows: false,
+                    verticalHasArrows: true,
+                    horizontalHasArrows: true,
+                    vertical: 'visible',
+                    horizontal: 'visible'
+                }
             });
+            //@ts-ignore
+            monaco.editor.defineTheme('myTheme', {
+                base: 'vs',
+                inherit: true,
+                //@ts-ignore
+                rules: [{ background: 'EDF9FA' }],
+                colors: {
+                    'editor.selectionBackground': '#add6ff',
+                    'editor.inactiveSelectionBackground': '#add6ff'
+                }
+            });
+            //@ts-ignore
+            monaco.editor.setTheme('myTheme');
             this._monacoEditor.layout();
             let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
                 this.onTextChanged.emit(this._monacoEditor.getValue());

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

@@ -427,7 +427,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.serviceContainer = serviceContainer;
         this.instanceServiceContainer = new InstanceServiceContainer(this);
         this.instanceServiceContainer.register("undoService", new UndoService(this));
-        this.instanceServiceContainer.register("selectionService", new SelectionService);
+        this.instanceServiceContainer.register("selectionService", new SelectionService(this));
         this.rootDesignItem = DesignItem.GetOrCreateDesignItem(this._canvas, this.serviceContainer, this.instanceServiceContainer);
         this.instanceServiceContainer.register("contentService", new ContentService(this.rootDesignItem));
         this.extensionManager = new ExtensionManager(this);
@@ -498,7 +498,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.rootDesignItem._removeChildInternal(i);
         this.addDesignItems(designItems);
         this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'parsed' });
-        this.instanceServiceContainer.selectionService.setSelectedElements(null);
+        this.instanceServiceContainer.selectionService._withoutUndoSetSelectedElements(null);
     }
     addDesignItems(designItems) {
         if (designItems) {
@@ -663,9 +663,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 di.setStyle('position', 'absolute');
                 di.setStyle('left', (position.x - pos.x) + 'px');
                 di.setStyle('top', (position.y - pos.y) + 'px');
+                const containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
+                containerService.enterContainer(newContainer, [di]);
                 this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
-                grp.commit();
-                requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));
+                requestAnimationFrame(() => {
+                    this.instanceServiceContainer.selectionService.setSelectedElements([di]);
+                    grp.commit();
+                });
             }
         }
     }

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

@@ -1,5 +1,5 @@
 import { EventNames } from "../../../../enums/EventNames";
-import { convertCoordinates, getDomMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition } from "../../../helper/TransformHelper.js";
+import { transformPointByInverseMatrix, getDomMatrix, getDesignerCanvasNormalizedTransformedCornerDOMPoints, normalizeToAbsolutePosition } from "../../../helper/TransformHelper.js";
 import { AbstractExtension } from './AbstractExtension';
 export class ResizeExtension extends AbstractExtension {
     resizeAllSelected;
@@ -70,7 +70,7 @@ export class ResizeExtension extends AbstractExtension {
                 //#endregion Calc element's dimension
                 this._initialSizes.push({ width: rect.width / this.designerCanvas.scaleFactor, height: rect.height / this.designerCanvas.scaleFactor });
                 this.extendedItem.element.style.width = this._initialSizes[0].width + 'px';
-                const toArr = getComputedStyle(this.extendedItem.element).transformOrigin.split(' ').map(x => parseInt(x.replace('px', '')));
+                const toArr = getComputedStyle(this.extendedItem.element).transformOrigin.split(' ').map(x => parseFloat(x.replace('px', '')));
                 const transformOrigin = new DOMPoint(toArr[0], toArr[1]);
                 this._initialComputedTransformOrigins.push(transformOrigin);
                 this._initialTransformOrigins.push(this.extendedItem.element.style.transformOrigin);
@@ -158,116 +158,121 @@ export class ResizeExtension extends AbstractExtension {
                     let trackX = Math.round(diff.x - this._initialPoint.x - this._offsetPoint.x);
                     let trackY = Math.round(diff.y - this._initialPoint.y - this._offsetPoint.y);
                     let matrix = getDomMatrix(this.extendedItem.element);
-                    let transformedTrack = convertCoordinates(new DOMPoint(trackX, trackY, 0, 0), matrix);
+                    let transformedTrack = transformPointByInverseMatrix(new DOMPoint(trackX, trackY, 0, 0), matrix);
+                    let deltaX = transformedTrack.x;
+                    let deltaY = transformedTrack.y;
+                    if (event.shiftKey) {
+                        deltaX = deltaX < deltaY ? deltaX : deltaY;
+                        deltaY = deltaX;
+                    }
                     let i = 0;
                     let width = null;
                     let height = null;
                     switch (this._actionModeStarted) {
                         case 'e-resize':
-                            width = (this._initialSizes[i].width + transformedTrack.x);
+                            width = (this._initialSizes[i].width + deltaX);
                             this.extendedItem.element.style.width = width + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
+                                        designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'se-resize':
-                            width = (this._initialSizes[i].width + transformedTrack.x);
+                            width = (this._initialSizes[i].width + deltaX);
                             this.extendedItem.element.style.width = width + 'px';
-                            height = (this._initialSizes[i].height + transformedTrack.y);
+                            height = (this._initialSizes[i].height + deltaY);
                             this.extendedItem.element.style.height = height + 'px';
-                            console.log(this.extendedItem.element.style.transformOrigin);
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
-                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                                        designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
                                     }
                                 }
                             }
                             break;
                         case 's-resize':
-                            height = (this._initialSizes[i].height + transformedTrack.y);
+                            height = (this._initialSizes[i].height + deltaY);
                             this.extendedItem.element.style.height = height + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'sw-resize':
-                            width = (this._initialSizes[i].width - transformedTrack.x);
+                            width = (this._initialSizes[i].width - deltaX);
                             this.extendedItem.element.style.width = width + 'px';
-                            height = (this._initialSizes[i].height + transformedTrack.y);
+                            height = (this._initialSizes[i].height + deltaY);
                             this.extendedItem.element.style.height = height + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
-                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                                        designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'w-resize':
-                            width = (this._initialSizes[i].width - transformedTrack.x);
+                            width = (this._initialSizes[i].width - deltaX);
                             this.extendedItem.element.style.width = width + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
+                                        designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'nw-resize':
-                            width = (this._initialSizes[i].width - transformedTrack.x);
+                            width = (this._initialSizes[i].width - deltaX);
                             this.extendedItem.element.style.width = width + 'px';
-                            height = (this._initialSizes[i].height - transformedTrack.y);
+                            height = (this._initialSizes[i].height - deltaY);
                             this.extendedItem.element.style.height = height + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
-                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                                        designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'n-resize':
-                            height = (this._initialSizes[i].height - transformedTrack.y);
+                            height = (this._initialSizes[i].height - deltaY);
                             this.extendedItem.element.style.height = height + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
                                     }
                                 }
                             }
                             break;
                         case 'ne-resize':
-                            width = (this._initialSizes[i].width + transformedTrack.x);
+                            width = (this._initialSizes[i].width + deltaX);
                             this.extendedItem.element.style.width = width + 'px';
-                            height = (this._initialSizes[i].height - transformedTrack.y);
+                            height = (this._initialSizes[i].height - deltaY);
                             this.extendedItem.element.style.height = height + 'px';
                             if (this.resizeAllSelected) {
                                 i++;
                                 for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                                     if (designItem !== this.extendedItem) {
-                                        designItem.element.style.width = this._initialSizes[i].width + transformedTrack.x + 'px';
-                                        designItem.element.style.height = this._initialSizes[i].height + transformedTrack.y + 'px';
+                                        designItem.element.style.width = this._initialSizes[i].width + deltaX + 'px';
+                                        designItem.element.style.height = this._initialSizes[i].height + deltaY + 'px';
                                     }
                                 }
                             }
@@ -286,14 +291,14 @@ export class ResizeExtension extends AbstractExtension {
                 this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
                 this.extendedItem.setStyle('left', normalizeToAbsolutePosition(this.extendedItem.element, 'left'));
                 this.extendedItem.setStyle('top', normalizeToAbsolutePosition(this.extendedItem.element, 'top'));
-                let p3Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
+                let p3Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
                 this.extendedItem.element.style.transformOrigin = this._initialTransformOrigins[0];
-                let p1Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseInt(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
+                let p1Abs = new DOMPoint(this.extendedItem.element.offsetLeft + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
                 let p1 = new DOMPoint(p1Abs.x - p3Abs.x, -(p1Abs.y - p3Abs.y));
                 let matrix = new DOMMatrix(getComputedStyle(this.extendedItem.element).transform);
                 let deltaX = 0;
                 let deltaY = 0;
-                let p1transformed = p1.matrixTransform(matrix.inverse());
+                let p1transformed = transformPointByInverseMatrix(p1, matrix);
                 let p2Abs = new DOMPoint(p3Abs.x + p1transformed.x, p3Abs.y - p1transformed.y);
                 let p1p2 = new DOMPoint(p2Abs.x - p1Abs.x, -(p2Abs.y - p1Abs.y));
                 let p1p2transformed = p1p2.matrixTransform(matrix);

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

@@ -2,6 +2,9 @@ import { RotateExtension } from "./RotateExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class RotateExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.element instanceof SVGElement) {
+            return false;
+        }
         return true;
     }
     getExtension(extensionManager, designerView, designItem) {

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

@@ -23,8 +23,8 @@ export class TransformOriginExtension extends AbstractExtension {
         this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
         this._circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event)); //TODO: -> assign to window
-        if (this.extendedItem.styles.get('transform-origin')) {
-            this._oldValue = this.extendedItem.styles.get('transform-origin');
+        if (this.extendedItem.getStyle('transform-origin')) {
+            this._oldValue = this.extendedItem.getStyle('transform-origin');
         }
     }
     pointerEvent(event) {

package/dist/elements/widgets/designerView/extensions/svg/EllipsisExtensionProvider.js

@@ -1,8 +1,9 @@
 import { EllipsisExtension } from "./EllipsisExtension";
+import { isVisualSvgElement } from "../../../../helper/SvgHelper";
 export class EllipsisExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         if (designItem.node instanceof SVGEllipseElement) {
-            return true;
+            return isVisualSvgElement(designItem.node);
         }
         return false;
     }

package/dist/elements/widgets/designerView/extensions/svg/LineExtensionProvider.js

@@ -1,8 +1,10 @@
 import { LineExtension } from "./LineExtension";
+import { isVisualSvgElement } from "../../../../helper/SvgHelper";
 export class LineExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         if (designItem.node instanceof SVGLineElement) {
-            return true;
+            return isVisualSvgElement(designItem.node);
+            ;
         }
         return false;
     }

package/dist/elements/widgets/designerView/extensions/svg/PathExtensionProvider.js

@@ -1,8 +1,10 @@
 import { PathExtension } from "./PathExtension";
+import { isVisualSvgElement } from "../../../../helper/SvgHelper";
 export class PathExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         if (designItem.node instanceof SVGPathElement) {
-            return true;
+            return isVisualSvgElement(designItem.node);
+            ;
         }
         return false;
     }

package/dist/elements/widgets/designerView/extensions/svg/RectExtensionProvider.js

@@ -1,8 +1,10 @@
 import { RectExtension } from "./RectExtension";
+import { isVisualSvgElement } from "../../../../helper/SvgHelper";
 export class RectExtentionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
         if (designItem.node instanceof SVGRectElement) {
-            return true;
+            return isVisualSvgElement(designItem.node);
+            ;
         }
         return false;
     }

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

@@ -1,6 +1,7 @@
 import { PropertyGridPropertyList } from './PropertyGridPropertyList';
 import { DesignerTabControl } from '../../controls/DesignerTabControl';
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { RefreshMode } from '../../services/propertiesService/IPropertiesService';
 export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _serviceContainer;
     _designerTabControl;
@@ -35,6 +36,10 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         });
         this._itemsObserver = new MutationObserver((m) => {
             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);
             }
         });

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

@@ -9,6 +9,7 @@ export declare class PropertyGridPropertyList extends BaseCustomWebComponentLazy
     private _serviceContainer;
     private _propertiesService;
     private _designItems;
+    get propertiesService(): IPropertiesService;
     static get style(): CSSStyleSheet;
     constructor(serviceContainer: ServiceContainer);
     setPropertiesService(propertiesService: IPropertiesService): void;

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

@@ -1,4 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css, DomHelper } from '@node-projects/base-custom-webcomponent';
+import { RefreshMode } from '../../services/propertiesService/IPropertiesService';
 import { ValueType } from '../../services/propertiesService/ValueType';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
 import { PropertyType } from '../../services/propertiesService/PropertyType';
@@ -8,6 +9,9 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _serviceContainer;
     _propertiesService;
     _designItems;
+    get propertiesService() {
+        return this._propertiesService;
+    }
     static get style() {
         return css `
     :host{
@@ -93,7 +97,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         }
     }
     createElements(designItem) {
-        if (this._propertiesService && (this._propertiesService.listNeedsRefresh(designItem)) || this._propertyMap.size == 0) {
+        if (this._propertiesService && (this._propertiesService.getRefreshMode(designItem) != RefreshMode.none) || this._propertyMap.size == 0) {
             DomHelper.removeAllChildnodes(this._div);
             this._propertyMap.clear();
             if (this._propertiesService) {
@@ -139,11 +143,29 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
                                 this._div.appendChild(label);
                             }
                             else {
-                                let label = document.createElement("label");
-                                label.htmlFor = p.name;
-                                label.textContent = p.name;
-                                label.title = p.name;
-                                this._div.appendChild(label);
+                                if (!p.renamable) {
+                                    let label = document.createElement("label");
+                                    label.htmlFor = p.name;
+                                    label.textContent = p.name;
+                                    label.title = p.name;
+                                    this._div.appendChild(label);
+                                }
+                                else {
+                                    let label = document.createElement("input");
+                                    let input = editor.element;
+                                    label.value = p.name;
+                                    label.onkeyup = e => {
+                                        if (e.key == 'Enter' && label.value) {
+                                            const pg = this._designItems[0].openGroup("rename property name from '" + p.name + "' to '" + label.value + "'");
+                                            p.service.clearValue(this._designItems, p);
+                                            p.name = label.value;
+                                            p.service.setValue(this._designItems, p, input.value);
+                                            pg.commit();
+                                            this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems);
+                                        }
+                                    };
+                                    this._div.appendChild(label);
+                                }
                             }
                             editor.element.id = p.name;
                             this._div.appendChild(editor.element);
@@ -156,7 +178,12 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     }
     openContextMenu(event, property) {
         const ctxMenu = [
-            { title: 'clear', action: (e) => property.service.clearValue(this._designItems, property) },
+            {
+                title: 'clear', action: (e) => {
+                    property.service.clearValue(this._designItems, property);
+                    this._designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshAllExtensions(this._designItems);
+                }
+            },
         ];
         if (this._serviceContainer.config.openBindingsEditor) {
             ctxMenu.push(...[

package/dist/index.d.ts

@@ -107,7 +107,6 @@ export * from "./elements/services/undoService/transactionItems/CssStyleChangeAc
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
-export * from "./elements/services/undoService/transactionItems/PropertyChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export type { IService } from "./elements/services/IService.js";

package/dist/index.js

@@ -74,7 +74,6 @@ export * from "./elements/services/undoService/transactionItems/CssStyleChangeAc
 export * from "./elements/services/undoService/transactionItems/DeleteAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
-export * from "./elements/services/undoService/transactionItems/PropertyChangeAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";
 export * from "./elements/services/ServiceContainer.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.154",
+  "version": "0.0.156",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,8 +13,8 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.10.3",
-    "@types/node": "^18.11.9",
+    "@node-projects/base-custom-webcomponent": "^0.10.5",
+    "@types/node": "^18.11.11",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
@@ -24,7 +24,7 @@
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.14",
     "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.13.1",
+    "ace-builds": "^1.13.2",
     "codemirror": "^6.0.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",