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

package/dist/elements/helper/ElementHelper.js

@@ -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,31 @@ 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) {
-        offsetLeft += element.offsetLeft;
-        offsetTop += element.offsetTop;
-        element = element.offsetParent;
+        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;
+        }
+        else if (element instanceof SVGGraphicsElement) {
+            let bbox = element.getBBox();
+            offsetLeft += bbox.x;
+            offsetTop += bbox.y;
+            element = element.ownerSVGElement;
+        }
+        else {
+            offsetLeft += element.offsetLeft;
+            offsetTop += element.offsetTop;
+            element = element.offsetParent;
+        }
     }
     return { offsetLeft: offsetLeft, offsetTop: offsetTop };
 }

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

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

package/dist/elements/helper/SvgHelper.js

@@ -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.d.ts

@@ -2,7 +2,7 @@ import { IPoint } from "../../interfaces/IPoint.js";
 import { IDesignerCanvas } from "../widgets/designerView/IDesignerCanvas.js";
 export declare function combineTransforms(element: HTMLElement, actualTransforms: string, requestedTransformation: string): void;
 export declare function getDomMatrix(element: HTMLElement): DOMMatrix;
-export declare function convertCoordinates(point: DOMPoint, matrix: DOMMatrix): DOMPoint;
+export declare function transformPointByInverseMatrix(point: DOMPoint, matrix: DOMMatrix): DOMPoint;
 export declare function getRotationMatrix3d(axisOfRotation: 'x' | 'y' | 'z' | 'X' | 'Y' | 'Z', angle: number): any[];
 export declare function rotateElementByMatrix3d(element: HTMLElement, matrix: number[]): void;
 export declare function matrixArrayToCssMatrix(matrixArray: number[]): string;
@@ -13,6 +13,10 @@ export declare function getDesignerCanvasNormalizedTransformedOriginWithoutParen
 export declare function getResultingTransformationBetweenElementAndAllAncestors(element: HTMLElement, ancestor: HTMLElement, excludeAncestor?: boolean): DOMMatrix;
 export declare function getByParentsTransformedPointRelatedToCanvas(element: HTMLElement, point: DOMPoint, designerCanvas: IDesignerCanvas): IPoint;
 export declare function getDesignerCanvasNormalizedTransformedPoint(element: HTMLElement, point: IPoint, designerCanvas: IDesignerCanvas): IPoint;
+export declare function getElementSize(element: HTMLElement): {
+    width: number;
+    height: number;
+};
 export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
 export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
 export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;

package/dist/elements/helper/TransformHelper.js

@@ -18,8 +18,12 @@ export function combineTransforms(element, actualTransforms, requestedTransforma
 export function getDomMatrix(element) {
     return new DOMMatrix(window.getComputedStyle(element).transform);
 }
-export function convertCoordinates(point, matrix) {
-    return point.matrixTransform(matrix.inverse());
+export function transformPointByInverseMatrix(point, matrix) {
+    const inverse = matrix.inverse();
+    //fix chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1395645
+    inverse.m33 = 1;
+    inverse.m44 = 1;
+    return point.matrixTransform(inverse);
 }
 export function getRotationMatrix3d(axisOfRotation, angle) {
     const angleInRadians = angle / 180 * Math.PI;
@@ -83,7 +87,7 @@ export function addVectors(vectorA, vectorB) {
     return [vectorA[0] + vectorB[0], vectorA[1] + vectorB[1]];
 }
 export function getDesignerCanvasNormalizedTransformedOriginWithoutParentTransformation(element, designerCanvas) {
-    const top0 = new DOMPointReadOnly(-parseInt(getComputedStyle(element).transformOrigin.split(' ')[0]), -parseInt(getComputedStyle(element).transformOrigin.split(' ')[1]), 0, 0);
+    const top0 = new DOMPointReadOnly(-parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), -parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1]), 0, 0);
     const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element);
     const transformOriginAbsolutRelatedToWindowWithoutAnyTransformation = new DOMPoint(p0Offsets.offsetLeft - top0.x, p0Offsets.offsetTop - top0.y);
     const designerCanvasNormalizedTransformedOrigin = new DOMPoint(transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.x - designerCanvas.containerBoundingRect.x, transformOriginAbsolutRelatedToWindowWithoutAnyTransformation.y - designerCanvas.containerBoundingRect.y);
@@ -92,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;
     }
@@ -113,9 +120,11 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
     let byParentTransformedPointRelatedToCanvas = { x: 0, y: 0 };
     while (actualElement != canvas) {
         const parentElement = getParentElementIncludingSlots(actualElement);
-        const parentElementTransformOrigin = new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetLeft - designerCanvas.outerRect.x + parseInt(getComputedStyle(parentElement).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(parentElement).offsetTop - designerCanvas.outerRect.y + parseInt(getComputedStyle(parentElement).transformOrigin.split(' ')[1]));
-        parentElementTransformOrigin.x -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).x;
-        parentElementTransformOrigin.y -= extractTranslationFromDOMMatrix(new DOMMatrix(element.style.transform)).y;
+        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]));
+        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);
@@ -126,6 +135,20 @@ export function getByParentsTransformedPointRelatedToCanvas(element, point, desi
 export function getDesignerCanvasNormalizedTransformedPoint(element, point, designerCanvas) {
     return getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, { x: -point.x, y: -point.y }, designerCanvas)[0];
 }
+export function getElementSize(element) {
+    let width = element.offsetWidth;
+    let height = element.offsetHeight;
+    if (element instanceof SVGElement && element.width) {
+        width = element.width.baseVal.value;
+        height = element.height.baseVal.value;
+    }
+    else if (element instanceof SVGGraphicsElement) {
+        let bbox = element.getBBox();
+        width = bbox.width;
+        height = bbox.height;
+    }
+    return { width, height };
+}
 export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas) {
     const topleft = 0;
     const topright = 1;
@@ -137,22 +160,7 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
         x: p0Offsets.offsetLeft - designerCanvas.containerBoundingRect.left,
         y: p0Offsets.offsetTop - designerCanvas.containerBoundingRect.top
     });
-    let width = parseInt(getComputedStyle(element).width.replace('px', ''));
-    let height = parseInt(getComputedStyle(element).height.replace('px', ''));
-    if (getComputedStyle(element).boxSizing == 'content-box') {
-        width += parseInt(getComputedStyle(element).paddingLeft.replace('px', ''))
-            + parseInt(getComputedStyle(element).marginLeft.replace('px', ''))
-            + parseInt(getComputedStyle(element).borderLeft.replace('px', ''))
-            + parseInt(getComputedStyle(element).paddingRight.replace('px', ''))
-            + parseInt(getComputedStyle(element).marginRight.replace('px', ''))
-            + parseInt(getComputedStyle(element).borderRight.replace('px', ''));
-        height += parseInt(getComputedStyle(element).paddingTop.replace('px', ''))
-            + parseInt(getComputedStyle(element).marginTop.replace('px', ''))
-            + parseInt(getComputedStyle(element).borderTop.replace('px', ''))
-            + parseInt(getComputedStyle(element).paddingBottom.replace('px', ''))
-            + parseInt(getComputedStyle(element).marginBottom.replace('px', ''))
-            + parseInt(getComputedStyle(element).borderBottom.replace('px', ''));
-    }
+    let { width, height } = getElementSize(element);
     const elementWithoutTransformCornerDOMPoints = [];
     elementWithoutTransformCornerDOMPoints[topleft] = DOMPoint.fromPoint({
         x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset.x,
@@ -171,12 +179,12 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
         y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
     });
     const transformOriginWithoutTransformRelatedToCanvas = DOMPointReadOnly.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x + parseInt(getComputedStyle(element).transformOrigin.split(' ')[0]),
-        y: p0OffsetsRelatedToCanvas.y + parseInt(getComputedStyle(element).transformOrigin.split(' ')[1]),
+        x: p0OffsetsRelatedToCanvas.x + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]),
+        y: p0OffsetsRelatedToCanvas.y + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1]),
         z: 0,
         w: 0
     });
-    const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetLeft - designerCanvas.outerRect.left + parseInt(getComputedStyle(element).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetTop - designerCanvas.outerRect.top + parseInt(getComputedStyle(element).transformOrigin.split(' ')[1])), designerCanvas);
+    const designerCanvasNormalizedTransformOrigin = getByParentsTransformedPointRelatedToCanvas(element, new DOMPoint(getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetLeft - designerCanvas.outerRect.left + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[0]), getElementsWindowOffsetWithoutSelfAndParentTransformations(element).offsetTop - designerCanvas.outerRect.top + parseFloat(getComputedStyle(element).transformOrigin.split(' ')[1])), designerCanvas);
     let top0 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[topleft].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[topleft].y));
     let top1 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[topright].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[topright].y));
     let top2 = new DOMPoint(-(transformOriginWithoutTransformRelatedToCanvas.x - elementWithoutTransformCornerDOMPoints[bottomleft].x), -(transformOriginWithoutTransformRelatedToCanvas.y - elementWithoutTransformCornerDOMPoints[bottomleft].y));

package/dist/elements/helper/contextMenu/ContextMenu.js

@@ -178,7 +178,15 @@ export class ContextMenu {
                             this.close();
                         });
                     if (item.children != null) {
-                        li.appendChild(this.renderLevel(item.children));
+                        let childmenu = this.renderLevel(item.children);
+                        li.appendChild(childmenu);
+                        li.addEventListener('mouseenter', () => {
+                            const childRect = childmenu.getBoundingClientRect();
+                            if (childRect.top + childRect.height > window.innerHeight) {
+                                childmenu.style.top = 'unset';
+                                childmenu.style.bottom = '0';
+                            }
+                        });
                     }
                 }
                 lastWasDivider = false;

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

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

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

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

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

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

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

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

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

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

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

@@ -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/manifestParsers/WebcomponentManifestParserService.d.ts

@@ -1,12 +1,12 @@
 import { BindingTarget } from "../../item/BindingTarget";
 import { IElementDefinition } from "../elementsService/IElementDefinition";
 import { IElementsService } from "../elementsService/IElementsService";
-import { IPropertiesService } from "../propertiesService/IPropertiesService";
+import { IPropertiesService, RefreshMode } from "../propertiesService/IPropertiesService";
 import { IProperty } from "../propertiesService/IProperty";
 import { IDesignItem } from "../../item/IDesignItem";
 import { AbstractPropertiesService } from "../propertiesService/services/AbstractPropertiesService";
 export declare class WebcomponentManifestParserService extends AbstractPropertiesService implements IElementsService, IPropertiesService {
-    listNeedsRefresh(designItem: IDesignItem): boolean;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
     private _name;
     get name(): string;
     private _packageData;

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js

@@ -1,9 +1,10 @@
 import { BindingTarget } from "../../item/BindingTarget";
+import { RefreshMode } from "../propertiesService/IPropertiesService";
 import { PropertyType } from "../propertiesService/PropertyType";
 import { AbstractPropertiesService } from "../propertiesService/services/AbstractPropertiesService";
 export class WebcomponentManifestParserService extends AbstractPropertiesService {
-    listNeedsRefresh(designItem) {
-        return false;
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
     }
     _name;
     get name() { return this._name; }