npm - @node-projects/web-component-designer - Versions diffs - 0.0.155 → 0.0.156 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/dist/elements/helper/ElementHelper.js CHANGED Viewed

@@ -11,12 +11,18 @@ export var ElementDisplayType;
     ElementDisplayType[ElementDisplayType["block"] = 2] = "block";
 })(ElementDisplayType || (ElementDisplayType = {}));
 export function isInline(element) {
+    if (element instanceof SVGElement)
+        return false;
     return element != null && window.getComputedStyle(element).display.startsWith('inline');
 }
 export function isInlineAfter(element) {
-    return element != null && window.getComputedStyle(element).display == 'inline';
+    if (element instanceof SVGElement)
+        return false;
+    return element != null && window.getComputedStyle(element).display.startsWith('inline');
 }
 export function getElementDisplaytype(element) {
+    if (element instanceof SVGElement)
+        return ElementDisplayType.block;
     const display = window.getComputedStyle(element).display;
     return display == 'none' ? ElementDisplayType.none : display.startsWith('inline') ? ElementDisplayType.inline : ElementDisplayType.block;
 }
@@ -44,12 +50,16 @@ export function getParentElementIncludingSlots(element) {
     return element.parentElement;
 }
 export function getElementsWindowOffsetWithoutSelfAndParentTransformations(element) {
-    var offsetLeft = 0;
-    var offsetTop = 0;
+    let offsetLeft = 0;
+    let offsetTop = 0;
     while (element) {
         if (element instanceof SVGSVGElement) {
+            //todo - fix without transformation
+            let t = element.style.transform;
+            element.style.transform = '';
             const bcEl = element.getBoundingClientRect();
             const bcPar = element.parentElement.getBoundingClientRect();
+            element.style.transform = t;
             offsetLeft += bcEl.left - bcPar.left;
             offsetTop += bcEl.top - bcPar.top;
             element = element.parentElement;
@@ -58,7 +68,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
             let bbox = element.getBBox();
             offsetLeft += bbox.x;
             offsetTop += bbox.y;
-            element = element.parentElement;
+            element = element.ownerSVGElement;
         }
         else {
             offsetLeft += element.offsetLeft;

package/dist/elements/helper/SvgHelper.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function isVisualSvgElement(element: SVGElement): boolean;

package/dist/elements/helper/SvgHelper.js ADDED Viewed

@@ -0,0 +1,13 @@
+export function isVisualSvgElement(element) {
+    let el = element;
+    while (el) {
+        if (el instanceof SVGSVGElement)
+            return true;
+        if (el instanceof SVGDefsElement)
+            return false;
+        if (el instanceof SVGMetadataElement)
+            return false;
+        el = el.parentElement;
+    }
+    return true;
+}

package/dist/elements/helper/TransformHelper.js CHANGED Viewed

@@ -96,15 +96,18 @@ export function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransfo
 export function getResultingTransformationBetweenElementAndAllAncestors(element, ancestor, excludeAncestor) {
     let actualElement = element;
     let actualElementMatrix;
+    let newElementMatrix;
     let originalElementAndAllParentsMultipliedMatrix;
     while (actualElement != ancestor) {
         const newElement = getParentElementIncludingSlots(actualElement);
         actualElementMatrix = new DOMMatrix(getComputedStyle(actualElement).transform);
+        newElementMatrix = new DOMMatrix(getComputedStyle(newElement).transform);
+        newElementMatrix.m41 = newElementMatrix.m42 = 0;
         if (actualElement == element) {
-            originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(new DOMMatrix(getComputedStyle(newElement).transform));
+            originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(newElementMatrix);
         }
         else if (newElement != ancestor || !excludeAncestor) {
-            originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(new DOMMatrix(getComputedStyle(newElement).transform));
+            originalElementAndAllParentsMultipliedMatrix = originalElementAndAllParentsMultipliedMatrix.multiply(newElementMatrix);
         }
         actualElement = newElement;
     }
@@ -118,8 +121,10 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
     while (actualElement != canvas) {
         const parentElement = getParentElementIncludingSlots(actualElement);
         const parentElementTransformOrigin = new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetLeft - designerCanvas.outerRect.x + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetTop - designerCanvas.outerRect.y + parseFloat(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
-        parentElementTransformOrigin.x -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).x;
-        parentElementTransformOrigin.y -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).y;
+        if (actualElement == element) {
+            parentElementTransformOrigin.x -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).x;
+            parentElementTransformOrigin.y -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).y;
+        }
         const parentElementTransformOriginToPointVector = new DOMPointReadOnly(-parentElementTransformOrigin.x + (element == actualElement ? point.x : byParentTransformedPointRelatedToCanvas.x), -parentElementTransformOrigin.y + (element == actualElement ? point.y : byParentTransformedPointRelatedToCanvas.y));
         parentElementTransformOriginToPointVectorTransformed = parentElementTransformOriginToPointVector.matrixTransform(new DOMMatrix(getComputedStyle(parentElement).transform));
         byParentTransformedPointRelatedToCanvas = new DOMPoint(parentElementTransformOrigin.x + parentElementTransformOriginToPointVectorTransformed.x, parentElementTransformOrigin.y + parentElementTransformOriginToPointVectorTransformed.y);

package/dist/elements/item/DesignItem.d.ts CHANGED Viewed

@@ -15,10 +15,20 @@ export declare class DesignItem implements IDesignItem {
     clone(): Promise<IDesignItem>;
     replaceNode(newNode: Node): void;
     get nodeType(): NodeType;
+    private _attributes;
     get hasAttributes(): boolean;
-    attributes: Map<string, string>;
+    hasAttribute(name: string): boolean;
+    getAttribute(name: string): string;
+    attributes(): Generator<[string, string], void, unknown>;
+    _withoutUndoSetAttribute(name: string, value: string): void;
+    _withoutUndoRemoveAttribute(name: string): void;
+    private _styles;
     get hasStyles(): boolean;
-    styles: Map<string, string>;
+    hasStyle(name: string): boolean;
+    getStyle(name: string): string;
+    styles(): Generator<[string, string], void, unknown>;
+    _withoutUndoSetStyle(name: string, value: string): void;
+    _withoutUndoRemoveStyle(name: string): void;
     private static _designItemMap;
     get element(): Element;
     get name(): string;

package/dist/elements/item/DesignItem.js CHANGED Viewed

@@ -33,14 +33,48 @@ export class DesignItem {
             return NodeType.TextNode;
         return NodeType.Element;
     }
+    _attributes;
     get hasAttributes() {
-        return this.attributes.size > 0;
+        return this._attributes.size > 0;
     }
-    attributes;
+    hasAttribute(name) {
+        return this._attributes.has(name);
+    }
+    getAttribute(name) {
+        return this._attributes.get(name);
+    }
+    *attributes() {
+        for (let s of this._attributes) {
+            yield s;
+        }
+    }
+    _withoutUndoSetAttribute(name, value) {
+        this._attributes.set(name, value);
+    }
+    _withoutUndoRemoveAttribute(name) {
+        this._attributes.delete(name);
+    }
+    _styles;
     get hasStyles() {
-        return this.styles.size > 0;
+        return this._styles.size > 0;
+    }
+    hasStyle(name) {
+        return this._styles.has(name);
+    }
+    getStyle(name) {
+        return this._styles.get(name);
+    }
+    *styles() {
+        for (let s of this._styles) {
+            yield s;
+        }
+    }
+    _withoutUndoSetStyle(name, value) {
+        this._styles.set(name, value);
+    }
+    _withoutUndoRemoveStyle(name) {
+        this._styles.delete(name);
     }
-    styles;
     static _designItemMap = new WeakMap();
     get element() {
         return this.node;
@@ -140,12 +174,12 @@ export class DesignItem {
     set hideAtDesignTime(value) {
         this._hideAtDesignTime = value;
         if (value)
-            this.attributes.set(hideAtDesignTimeAttributeName, "");
+            this._attributes.set(hideAtDesignTimeAttributeName, "");
         else
-            this.attributes.delete(hideAtDesignTimeAttributeName);
+            this._attributes.delete(hideAtDesignTimeAttributeName);
         if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
             if (!value)
-                this.element.style.display = this.styles.get('display') ?? "";
+                this.element.style.display = this._styles.get('display') ?? "";
             else
                 this.element.style.display = 'none';
         }
@@ -157,12 +191,12 @@ export class DesignItem {
     set hideAtRunTime(value) {
         this._hideAtRunTime = value;
         if (value)
-            this.attributes.set(hideAtRunTimeAttributeName, "");
+            this._attributes.set(hideAtRunTimeAttributeName, "");
         else
-            this.attributes.delete(hideAtRunTimeAttributeName);
+            this._attributes.delete(hideAtRunTimeAttributeName);
         if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
             if (!value)
-                this.element.style.opacity = this.styles.get('opacity') ?? "";
+                this.element.style.opacity = this._styles.get('opacity') ?? "";
             else
                 this.element.style.opacity = '0.3';
         }
@@ -174,9 +208,9 @@ export class DesignItem {
     set lockAtDesignTime(value) {
         this._lockAtDesignTime = value;
         if (value)
-            this.attributes.set(lockAtDesignTimeAttributeName, "");
+            this._attributes.set(lockAtDesignTimeAttributeName, "");
         else
-            this.attributes.delete(lockAtDesignTimeAttributeName);
+            this._attributes.delete(lockAtDesignTimeAttributeName);
         if (this.element instanceof HTMLElement || this.element instanceof SVGElement) {
             if (!value)
                 this.element.style.pointerEvents = 'auto';
@@ -189,7 +223,7 @@ export class DesignItem {
         if (designItem.nodeType == NodeType.Element) {
             for (let a of designItem.element.attributes) {
                 if (a.name !== 'style') {
-                    designItem.attributes.set(a.name, a.value);
+                    designItem._attributes.set(a.name, a.value);
                     if (a.name === hideAtDesignTimeAttributeName)
                         designItem._hideAtDesignTime = true;
                     if (a.name === hideAtRunTimeAttributeName)
@@ -204,7 +238,7 @@ export class DesignItem {
                 if (st) {
                     cssParser.parse(st);
                     for (let e of cssParser.entries) {
-                        designItem.styles.set(e.name, e.value);
+                        designItem._styles.set(e.name, e.value);
                     }
                 }
                 if (!designItem._lockAtDesignTime) {
@@ -230,8 +264,8 @@ export class DesignItem {
         this.node = node;
         this.serviceContainer = serviceContainer;
         this.instanceServiceContainer = instanceServiceContainer;
-        this.attributes = new Map();
-        this.styles = new Map();
+        this._attributes = new Map();
+        this._styles = new Map();
         DesignItem._designItemMap.set(node, this);
     }
     openGroup(title) {
@@ -257,20 +291,20 @@ export class DesignItem {
     }
     setStyle(name, value) {
         let nm = PropertiesHelper.camelToDashCase(name);
-        const action = new CssStyleChangeAction(this, nm, value, this.styles.get(nm));
+        const action = new CssStyleChangeAction(this, nm, value, this._styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
     }
     removeStyle(name) {
         let nm = PropertiesHelper.camelToDashCase(name);
-        const action = new CssStyleChangeAction(this, nm, '', this.styles.get(nm));
+        const action = new CssStyleChangeAction(this, nm, '', this._styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
     }
     setAttribute(name, value) {
-        const action = new AttributeChangeAction(this, name, value, this.attributes.get(name));
+        const action = new AttributeChangeAction(this, name, value, this._attributes.get(name));
         this.instanceServiceContainer.undoService.execute(action);
     }
     removeAttribute(name) {
-        const action = new AttributeChangeAction(this, name, null, this.attributes.get(name));
+        const action = new AttributeChangeAction(this, name, null, this._attributes.get(name));
         this.instanceServiceContainer.undoService.execute(action);
     }
     // Internal implementations wich don't use undo/redo
@@ -289,6 +323,7 @@ export class DesignItem {
             this.node.insertBefore(designItem.node, el.element);
             this._childArray.splice(index, 0, designItem);
         }
+        //todo: is this still needed???
         if (this.instanceServiceContainer.selectionService.primarySelection == designItem)
             designItem.instanceServiceContainer.designerCanvas.extensionManager.applyExtension(designItem.parent, ExtensionType.PrimarySelectionContainer);
     }

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

@@ -14,9 +14,7 @@ export interface IDesignItem {
     id: string;
     readonly isRootItem: boolean;
     readonly hasAttributes: boolean;
-    readonly attributes: Map<string, string>;
     readonly hasStyles: boolean;
-    readonly styles: Map<string, string>;
     readonly hasChildren: boolean;
     children(): IterableIterator<IDesignItem>;
     readonly childCount: number;
@@ -24,6 +22,10 @@ export interface IDesignItem {
     readonly parent: IDesignItem;
     _insertChildInternal(designItem: IDesignItem, index?: number): any;
     _removeChildInternal(designItem: IDesignItem): any;
+    _withoutUndoSetStyle(name: string, value: string): any;
+    _withoutUndoRemoveStyle(name: string): any;
+    _withoutUndoSetAttribute(name: string, value: string): any;
+    _withoutUndoRemoveAttribute(name: string): any;
     indexOf(designItem: IDesignItem): number;
     insertAdjacentElement(designItem: IDesignItem, where: InsertPosition): any;
     insertChild(designItem: IDesignItem, index?: number): any;
@@ -42,8 +44,14 @@ export interface IDesignItem {
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
     getOrCreateDesignItem(node: Node): any;
     openGroup(title: string): ChangeGroup;
+    styles(): Iterable<[name: string, value: string]>;
+    getStyle(name: string): any;
+    hasStyle(name: string): any;
     setStyle(name: string, value?: string | null): any;
     removeStyle(name: string): any;
+    attributes(): Iterable<[name: string, value: string]>;
+    getAttribute(name: string): any;
+    hasAttribute(name: string): any;
     setAttribute(name: string, value?: string | null): any;
     removeAttribute(name: string): any;
     hideAtDesignTime: boolean;

package/dist/elements/services/bindingsService/BaseCustomWebcomponentBindingsService.js CHANGED Viewed

@@ -5,7 +5,7 @@ export class BaseCustomWebcomponentBindingsService {
     static type = 'base-custom-webcomponent-binding';
     getBindings(designItem) {
         let bindings = null;
-        for (let a of designItem.attributes) {
+        for (let a of designItem.attributes()) {
             const name = a[0];
             const value = a[1];
             if ((value.startsWith('[[') || value.startsWith('{{')) && (value.endsWith('}}') || value.endsWith(']]'))) {

package/dist/elements/services/htmlParserService/DefaultHtmlParserService.d.ts CHANGED Viewed

@@ -4,6 +4,6 @@ import { ServiceContainer } from "../ServiceContainer";
 import { IHtmlParserService } from "./IHtmlParserService";
 export declare class DefaultHtmlParserService implements IHtmlParserService {
     parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
-    createDesignItems(elements: HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem[];
+    createDesignItems(elements: NodeListOf<ChildNode> | Node[] | HTMLCollection | HTMLElement[], serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem[];
     private _createDesignItemsRecursive;
 }

package/dist/elements/services/htmlParserService/DefaultHtmlParserService.js CHANGED Viewed

@@ -3,7 +3,7 @@ export class DefaultHtmlParserService {
     async parse(html, serviceContainer, instanceServiceContainer) {
         const parser = new DOMParser();
         const doc = parser.parseFromString(html, 'text/html');
-        return this.createDesignItems(doc.body.children, serviceContainer, instanceServiceContainer);
+        return this.createDesignItems(doc.body.childNodes, serviceContainer, instanceServiceContainer);
     }
     createDesignItems(elements, serviceContainer, instanceServiceContainer) {
         let res = [];
@@ -12,7 +12,7 @@ export class DefaultHtmlParserService {
         }
         return res;
     }
-    _createDesignItemsRecursive(element, serviceContainer, instanceServiceContainer) {
-        return DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer);
+    _createDesignItemsRecursive(node, serviceContainer, instanceServiceContainer) {
+        return DesignItem.createDesignItemFromInstance(node, serviceContainer, instanceServiceContainer);
     }
 }

package/dist/elements/services/htmlParserService/LitElementParserService.js CHANGED Viewed

@@ -55,7 +55,7 @@ export class LitElementParserService {
             let attr = item.attributes;
             for (let a in attr) {
                 if (a !== 'style') {
-                    designItem.attributes.set(a, attr[a]);
+                    designItem._withoutUndoSetAttribute(a, attr[a]);
                     if (manualCreatedElement) {
                         element.setAttribute(a, attr[a]);
                     }
@@ -74,7 +74,7 @@ export class LitElementParserService {
                 let styleParser = new CssAttributeParser();
                 styleParser.parse(style);
                 for (let s of styleParser.entries) {
-                    designItem.styles.set(s.name, s.value);
+                    designItem._withoutUndoSetStyle(s.name, s.value);
                     if (manualCreatedElement) {
                         element.style[s.name] = s.value;
                     }

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js CHANGED Viewed

@@ -45,7 +45,7 @@ export class NodeHtmlParserService {
             let attr = item.attributes;
             for (let a in attr) {
                 if (a !== 'style') {
-                    designItem.attributes.set(a, attr[a]);
+                    designItem._withoutUndoSetAttribute(a, attr[a]);
                     if (manualCreatedElement) {
                         element.setAttribute(a, attr[a]);
                     }
@@ -64,7 +64,7 @@ export class NodeHtmlParserService {
                 let styleParser = new CssAttributeParser();
                 styleParser.parse(style);
                 for (let s of styleParser.entries) {
-                    designItem.styles.set(s.name, s.value);
+                    designItem._withoutUndoSetStyle(s.name, s.value);
                     if (manualCreatedElement) {
                         element.style[s.name] = s.value;
                     }

package/dist/elements/services/htmlWriterService/AbstractHtmlWriterService.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper
 export class AbstractHtmlWriterService {
     writeAttributes(indentedTextWriter, designItem, options) {
         if (designItem.hasAttributes) {
-            for (const a of designItem.attributes) {
+            for (const a of designItem.attributes()) {
                 indentedTextWriter.write(' ');
                 if (typeof a[1] === 'string') {
                     if (a[1] === "")
@@ -48,9 +48,9 @@ export class AbstractHtmlWriterService {
     writeStyles(indentedTextWriter, designItem, options) {
         if (designItem.hasStyles) {
             indentedTextWriter.write(' style="');
-            let styles = designItem.styles;
+            let styles = designItem.styles();
             if (options.compressCssToShorthandProperties)
-                styles = CssCombiner.combine(styles);
+                styles = CssCombiner.combine(new Map(styles));
             for (const s of styles) {
                 if (s[0]) {
                     indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');

package/dist/elements/services/htmlWriterService/FormatingHtmlWriterService.js CHANGED Viewed

@@ -12,7 +12,7 @@ var ElementContainerType;
 export class FormatingHtmlWriterService {
     writeAttributes(writeContext, designItem) {
         if (designItem.hasAttributes) {
-            for (const a of designItem.attributes) {
+            for (const a of designItem.attributes()) {
                 writeContext.indentedTextWriter.write(' ');
                 if (typeof a[1] === 'string') {
                     if (a[1] === "")
@@ -30,9 +30,9 @@ export class FormatingHtmlWriterService {
     writeStyles(writeContext, designItem) {
         if (designItem.hasStyles) {
             writeContext.indentedTextWriter.write(' style="');
-            let styles = designItem.styles;
+            let styles = designItem.styles();
             if (writeContext.options.compressCssToShorthandProperties)
-                styles = CssCombiner.combine(styles);
+                styles = CssCombiner.combine(new Map(styles));
             for (const s of styles) {
                 if (s[0]) {
                     writeContext.indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');

package/dist/elements/services/htmlWriterService/SimpleHtmlWriterService.js CHANGED Viewed

@@ -11,7 +11,7 @@ export var ElementContainerType;
 export class SimpleHtmlWriterService {
     writeAttributes(writeContext, designItem) {
         if (designItem.hasAttributes) {
-            for (const a of designItem.attributes) {
+            for (const a of designItem.attributes()) {
                 writeContext.indentedTextWriter.write(' ');
                 if (typeof a[1] === 'string') {
                     if (a[1] === "")
@@ -29,9 +29,9 @@ export class SimpleHtmlWriterService {
     writeStyles(writeContext, designItem) {
         if (designItem.hasStyles) {
             writeContext.indentedTextWriter.write(' style="');
-            let styles = designItem.styles;
+            let styles = designItem.styles();
             if (writeContext.options.compressCssToShorthandProperties)
-                styles = CssCombiner.combine(styles);
+                styles = CssCombiner.combine(new Map(styles));
             for (const s of styles) {
                 if (s[0]) {
                     writeContext.indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js CHANGED Viewed

@@ -56,7 +56,7 @@ export class DefaultModelCommandService {
         }
         else if (command.type == CommandType.unifyHeight) {
             const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyHeight');
-            const height = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('height');
+            const height = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('height');
             for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                 s.setStyle('height', height);
             }
@@ -64,7 +64,7 @@ export class DefaultModelCommandService {
         }
         else if (command.type == CommandType.unifyWidth) {
             const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('unifyWidth');
-            const width = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('width');
+            const width = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('width');
             for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
                 s.setStyle('width', width);
             }
@@ -72,7 +72,7 @@ export class DefaultModelCommandService {
         }
         else if (command.type == CommandType.rotateCounterClockwise) {
             const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateCounterClockwise');
-            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('transform');
+            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('transform');
             let degree = 0;
             let rotation = "";
             if (trf != null) {
@@ -97,7 +97,7 @@ export class DefaultModelCommandService {
         }
         else if (command.type == CommandType.rotateClockwise) {
             const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateClockwise');
-            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('transform');
+            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.getStyle('transform');
             let degree = 0;
             let rotation = "";
             if (trf != null) {

package/dist/elements/services/placementService/DefaultPlacementService.js CHANGED Viewed

@@ -102,16 +102,16 @@ export class DefaultPlacementService {
                 transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0);
             }
             const translationMatrix = new DOMMatrix().translate(transformMatrixParentTransformsCompensated.x, transformMatrixParentTransformsCompensated.y);
-            combineTransforms(designItem.element, designItem.styles.get('transform'), translationMatrix.toString());
+            combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
         }
     }
     enterContainer(container, items) {
         let filterdItems = filterChildPlaceItems(items);
         for (let i of filterdItems) {
             if (i.lastContainerSize) {
-                if (!i.styles.has('width'))
+                if (!i.hasStyle('width'))
                     i.setStyle('width', i.lastContainerSize.width + 'px');
-                if (!i.styles.has('height'))
+                if (!i.hasStyle('height'))
                     i.setStyle('height', i.lastContainerSize.height + 'px');
             }
         }
@@ -122,8 +122,8 @@ export class DefaultPlacementService {
         let filterdItems = filterChildPlaceItems(items);
         for (const designItem of filterdItems) {
             let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
-            const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.styles.get('transform') ?? ''));
-            designItem.element.style.transform = designItem.styles.get('transform') ?? '';
+            const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
+            designItem.element.style.transform = designItem.getStyle('transform') ?? '';
             let track = { x: translation.x, y: translation.y };
             placeDesignItem(container, designItem, { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }, 'position');
         }

package/dist/elements/services/propertiesService/IProperty.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import { IPropertyEditor } from './IPropertyEditor';
 import { PropertyType } from './PropertyType';
 export interface IProperty {
     name: string;
+    renamable?: boolean;
     propertyName?: string;
     attributeName?: string;
     description?: string;

package/dist/elements/services/propertiesService/propertyEditors/BasePropertyEditor.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import { ValueType } from '../ValueType';
-import { PropertyChangeAction } from "../../undoService/transactionItems/PropertyChangeAction";
 export class BasePropertyEditor {
     element;
     property;
@@ -13,9 +12,10 @@ export class BasePropertyEditor {
             if (this.designItems && this.designItems.length) {
                 const cg = this.designItems[0].openGroup("set property: " + this.property.name);
                 for (let d of this.designItems) {
-                    const oldValue = this.property.service.getValue([d], this.property);
-                    const action = new PropertyChangeAction(d, this.property, newValue, oldValue);
-                    d.instanceServiceContainer.undoService.execute(action);
+                    if (newValue == null)
+                        this.property.service.clearValue([d], this.property);
+                    else
+                        this.property.service.setValue([d], this.property, newValue);
                 }
                 cg.commit();
             }

package/dist/elements/services/propertiesService/services/AbstractPropertiesService.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ export declare abstract class AbstractPropertiesService implements IPropertiesSe
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-    getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
+    getValue(designItems: IDesignItem[], property: IProperty): any;
     getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

package/dist/elements/services/propertiesService/services/AbstractPropertiesService.js CHANGED Viewed

@@ -13,8 +13,7 @@ export class AbstractPropertiesService {
         const cg = designItems[0].openGroup("properties changed");
         for (let d of designItems) {
             if (property.propertyType == PropertyType.cssValue) {
-                d.styles.set(property.name, value);
-                d.element.style[property.name] = value;
+                d.setStyle(property.name, value);
                 //unkown css property names do not trigger the mutation observer of property grid,
                 //fixed by assinging stle again to the attribute
                 d.element.setAttribute('style', d.element.getAttribute('style'));
@@ -25,20 +24,16 @@ export class AbstractPropertiesService {
                     attributeName = PropertiesHelper.camelToDashCase(property.name);
                 if (property.type === 'object') {
                     const json = JSON.stringify(value);
-                    d.attributes.set(attributeName, json);
-                    d.element.setAttribute(attributeName, json);
+                    d.setAttribute(attributeName, json);
                 }
                 else if (property.type == 'boolean' && !value) {
-                    d.attributes.delete(attributeName);
-                    d.element.removeAttribute(attributeName);
+                    d.removeAttribute(attributeName);
                 }
                 else if (property.type == 'boolean' && value) {
-                    d.attributes.set(attributeName, "");
-                    d.element.setAttribute(attributeName, "");
+                    d.setAttribute(attributeName, "");
                 }
                 else {
-                    d.attributes.set(attributeName, value);
-                    d.element.setAttribute(attributeName, value);
+                    d.setAttribute(attributeName, value);
                 }
             }
             this._notifyChangedProperty(d, property, value);
@@ -52,15 +47,13 @@ export class AbstractPropertiesService {
         const cg = designItems[0].openGroup("properties cleared");
         for (let d of designItems) {
             if (property.propertyType == PropertyType.cssValue) {
-                d.styles.delete(property.name);
-                d.element.style[property.name] = '';
+                d.removeStyle(property.name);
             }
             else {
                 let attributeName = property.attributeName;
                 if (!attributeName)
                     attributeName = PropertiesHelper.camelToDashCase(property.name);
-                d.attributes.delete(attributeName);
-                d.element.removeAttribute(attributeName);
+                d.removeAttribute(attributeName);
             }
             d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
                 return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
@@ -79,9 +72,9 @@ export class AbstractPropertiesService {
             designItems.forEach((x) => {
                 let has = false;
                 if (property.propertyType == PropertyType.cssValue)
-                    has = x.styles.has(property.name);
+                    has = x.hasStyle(property.name);
                 else
-                    has = x.attributes.has(attributeName);
+                    has = x.hasAttribute(attributeName);
                 all = all && has;
                 some = some || has;
             });
@@ -105,9 +98,9 @@ export class AbstractPropertiesService {
     getValue(designItems, property) {
         if (designItems != null && designItems.length !== 0) {
             if (property.propertyType == PropertyType.cssValue) {
-                let lastValue = designItems[0].styles.get(property.name);
+                let lastValue = designItems[0].getStyle(property.name);
                 for (const x of designItems) {
-                    let value = x.styles.get(property.name);
+                    let value = x.getStyle(property.name);
                     if (value != lastValue) {
                         lastValue = null;
                         break;
@@ -120,8 +113,8 @@ export class AbstractPropertiesService {
                 if (!attributeName)
                     attributeName = PropertiesHelper.camelToDashCase(property.name);
                 if (property.type == 'boolean')
-                    return designItems[0].attributes.has(attributeName);
-                let lastValue = designItems[0].attributes.get(attributeName);
+                    return designItems[0].hasAttribute(attributeName);
+                let lastValue = designItems[0].getAttribute(attributeName);
                 /*
                 for (const x of designItems) {
                   let value = x.attributes.get(attributeName);

package/dist/elements/services/propertiesService/services/AttributesPropertiesService.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ export declare class AttributesPropertiesService implements IPropertiesService {
     getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
     clearValue(designItems: IDesignItem[], property: IProperty): void;
     isSet(designItems: IDesignItem[], property: IProperty): ValueType;
-    getValue(designItems: IDesignItem[], property: IProperty): string;
+    getValue(designItems: IDesignItem[], property: IProperty): any;
     getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
     getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
 }

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

@@ -16,8 +16,8 @@ export class AttributesPropertiesService {
     getProperties(designItem) {
         if (designItem) {
             let p = [];
-            for (let a of designItem.attributes.keys()) {
-                p.push({ name: a, type: 'string', service: this, propertyType: PropertyType.propertyAndAttribute });
+            for (let a of designItem.attributes()) {
+                p.push({ name: a[0], renamable: true, type: 'string', service: this, propertyType: PropertyType.propertyAndAttribute });
             }
             p.push({ name: '', type: 'addNew', service: this, propertyType: PropertyType.complex });
             return p;
@@ -27,8 +27,7 @@ export class AttributesPropertiesService {
     setValue(designItems, property, value) {
         const cg = designItems[0].openGroup("properties changed");
         for (let d of designItems) {
-            d.attributes.set(property.name, value);
-            d.element.setAttribute(property.name, value);
+            d.setAttribute(property.name, value);
         }
         cg.commit();
     }
@@ -37,8 +36,7 @@ export class AttributesPropertiesService {
     }
     clearValue(designItems, property) {
         for (let d of designItems) {
-            d.attributes.delete(property.name);
-            d.element.removeAttribute(property.name);
+            d.removeAttribute(property.name);
             d.serviceContainer.forSomeServicesTillResult('bindingService', (s) => {
                 return s.clearBinding(d, property.name, this.getPropertyTarget(d, property));
             });
@@ -48,11 +46,11 @@ export class AttributesPropertiesService {
         let all = true;
         let some = false;
         if (designItems != null && designItems.length !== 0) {
-            if (designItems.length == 1 && typeof designItems[0].attributes.get(property.name) == 'object')
+            if (designItems.length == 1 && typeof designItems[0].getAttribute(property.name) == 'object')
                 return ValueType.bound;
             let attributeName = property.name;
             designItems.forEach((x) => {
-                let has = x.attributes.has(attributeName);
+                let has = x.hasAttribute(attributeName);
                 all = all && has;
                 some = some || has;
             });
@@ -64,7 +62,7 @@ export class AttributesPropertiesService {
     getValue(designItems, property) {
         if (designItems != null && designItems.length !== 0) {
             let attributeName = property.name;
-            let lastValue = designItems[0].attributes.get(attributeName);
+            let lastValue = designItems[0].getAttribute(attributeName);
             if (typeof lastValue === 'object')
                 return lastValue.rawValue;
             /*

package/dist/elements/services/propertiesService/services/CssPropertiesService.js CHANGED Viewed

@@ -195,7 +195,7 @@ export class CssPropertiesService extends CommonPropertiesService {
         if (this.name == 'styles') {
             if (!designItem)
                 return [];
-            let arr = Array.from(designItem.styles.keys(), x => ({ name: x, type: 'string', service: this, propertyType: PropertyType.cssValue }));
+            let arr = Array.from(designItem.styles(), ([key, value]) => ({ name: key, renamable: true, type: 'string', service: this, propertyType: PropertyType.cssValue }));
             arr.push({ name: '', type: 'addNew', service: this, propertyType: PropertyType.complex });
             return arr;
         }

package/dist/elements/services/selectionService/SelectionService.d.ts CHANGED Viewed

@@ -2,10 +2,14 @@ import { ISelectionService } from './ISelectionService';
 import { IDesignItem } from '../../item/IDesignItem';
 import { ISelectionChangedEvent } from './ISelectionChangedEvent';
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas';
 export declare class SelectionService implements ISelectionService {
     primarySelection: IDesignItem;
     selectedElements: IDesignItem[];
+    _designerCanvas: IDesignerCanvas;
+    constructor(designerCanvas: IDesignerCanvas);
     setSelectedElements(designItems: IDesignItem[]): void;
+    _withoutUndoSetSelectedElements(designItems: IDesignItem[]): void;
     clearSelectedElements(): void;
     isSelected(designItem: IDesignItem): boolean;
     readonly onSelectionChanged: TypedEvent<ISelectionChangedEvent>;

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

@@ -1,8 +1,19 @@
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { SelectionChangedAction } from '../undoService/transactionItems/SelectionChangedAction';
 export class SelectionService {
     primarySelection;
     selectedElements = [];
+    _designerCanvas;
+    constructor(designerCanvas) {
+        this._designerCanvas = designerCanvas;
+    }
     setSelectedElements(designItems) {
+        if (this.selectedElements != designItems) {
+            const action = new SelectionChangedAction(this.selectedElements, designItems, this);
+            this._designerCanvas.instanceServiceContainer.undoService.execute(action);
+        }
+    }
+    _withoutUndoSetSelectedElements(designItems) {
         let oldSelectedElements = this.selectedElements;
         if (!designItems) {
             this.selectedElements = [];

package/dist/elements/services/undoService/UndoService.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export declare class UndoService implements IUndoService {
     private _redoStack;
     private _transactionStack;
     private _designerCanvas;
-    constructor(designerCanvas?: IDesignerCanvas);
+    constructor(designerCanvas: IDesignerCanvas);
     openGroup(title: string): ChangeGroup;
     private commitTransactionItem;
     private abortTransactionItem;

package/dist/elements/services/undoService/transactionItems/AttributeChangeAction.js CHANGED Viewed

@@ -12,7 +12,7 @@ export class AttributeChangeAction {
     }
     undo() {
         if (this.oldValue == null) {
-            this.designItem.attributes.delete(this.name);
+            this.designItem._withoutUndoRemoveAttribute(this.name);
             try {
                 this.designItem.element.removeAttribute(this.name);
             }
@@ -21,7 +21,7 @@ export class AttributeChangeAction {
             }
         }
         else {
-            this.designItem.attributes.set(this.name, this.oldValue);
+            this.designItem._withoutUndoSetAttribute(this.name, this.oldValue);
             if (this.name != "draggable") {
                 try {
                     if (typeof this.oldValue === 'string')
@@ -35,7 +35,7 @@ export class AttributeChangeAction {
     }
     do() {
         if (this.newValue == null) {
-            this.designItem.attributes.delete(this.name);
+            this.designItem._withoutUndoRemoveAttribute(this.name);
             try {
                 this.designItem.element.removeAttribute(this.name);
             }
@@ -44,7 +44,7 @@ export class AttributeChangeAction {
             }
         }
         else {
-            this.designItem.attributes.set(this.name, this.newValue);
+            this.designItem._withoutUndoSetAttribute(this.name, this.newValue);
             if (this.name != "draggable") {
                 try {
                     if (typeof this.newValue === 'string')

package/dist/elements/services/undoService/transactionItems/CssStyleChangeAction.js CHANGED Viewed

@@ -12,21 +12,21 @@ export class CssStyleChangeAction {
     }
     undo() {
         if (this.oldValue === '' || this.oldValue == null) {
-            this.designItem.styles.delete(this.name);
+            this.designItem._withoutUndoRemoveStyle(this.name);
             this.designItem.element.style[this.name] = '';
         }
         else {
-            this.designItem.styles.set(this.name, this.oldValue);
+            this.designItem._withoutUndoSetStyle(this.name, this.oldValue);
             this.designItem.element.style[this.name] = this.oldValue;
         }
     }
     do() {
         if (this.newValue === '' || this.newValue == null) {
-            this.designItem.styles.delete(this.name);
+            this.designItem._withoutUndoRemoveStyle(this.name);
             this.designItem.element.style[this.name] = '';
         }
         else {
-            this.designItem.styles.set(this.name, this.newValue);
+            this.designItem._withoutUndoSetStyle(this.name, this.newValue);
             this.designItem.element.style[this.name] = this.newValue;
         }
     }

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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) {
@@ -666,8 +666,10 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 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 CHANGED Viewed

@@ -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);
@@ -291,9 +291,9 @@ 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;

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/PropertyGridPropertyList.js CHANGED Viewed

@@ -143,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);
@@ -160,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.155",
+  "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": "*",