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

package/dist/elements/helper/ElementHelper.js

@@ -47,9 +47,24 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
     var offsetLeft = 0;
     var offsetTop = 0;
     while (element) {
-        offsetLeft += element.offsetLeft;
-        offsetTop += element.offsetTop;
-        element = element.offsetParent;
+        if (element instanceof SVGSVGElement) {
+            const bcEl = element.getBoundingClientRect();
+            const bcPar = element.parentElement.getBoundingClientRect();
+            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.parentElement;
+        }
+        else {
+            offsetLeft += element.offsetLeft;
+            offsetTop += element.offsetTop;
+            element = element.offsetParent;
+        }
     }
     return { offsetLeft: offsetLeft, offsetTop: offsetTop };
 }

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);
@@ -113,7 +117,7 @@ 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]));
+        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;
         const parentElementTransformOriginToPointVector = new DOMPointReadOnly(-parentElementTransformOrigin.x + (element == actualElement ? point.x : byParentTransformedPointRelatedToCanvas.x), -parentElementTransformOrigin.y + (element == actualElement ? point.y : byParentTransformedPointRelatedToCanvas.y));
@@ -126,6 +130,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 +155,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 +174,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/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; }

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

@@ -21,6 +21,7 @@ export class DefaultModelCommandService {
     }
     async executeCommand(designerCanvas, command) {
         let sel = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
+        const selection = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
         if (command.type == CommandType.moveBackward) {
             let idx = sel.parent.indexOf(sel) - 1;
             if (idx >= 0)
@@ -121,6 +122,7 @@ export class DefaultModelCommandService {
         }
         else
             return null;
+        designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(selection);
         return true;
     }
 }

package/dist/elements/services/propertiesService/IPropertiesService.d.ts

@@ -4,8 +4,13 @@ import { IDesignItem } from '../../item/IDesignItem';
 import { ValueType } from './ValueType';
 import { BindingTarget } from '../../item/BindingTarget';
 import { IBinding } from '../../item/IBinding';
+export declare enum RefreshMode {
+    none = 0,
+    full = 1,
+    fullOnValueChange = 2
+}
 export interface IPropertiesService extends IService {
-    listNeedsRefresh(designItem: IDesignItem): boolean;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperties(designItem: IDesignItem): IProperty[];
     getProperty(designItem: IDesignItem, name: string): IProperty;

package/dist/elements/services/propertiesService/IPropertiesService.js

@@ -1 +1,6 @@
-export {};
+export var RefreshMode;
+(function (RefreshMode) {
+    RefreshMode[RefreshMode["none"] = 0] = "none";
+    RefreshMode[RefreshMode["full"] = 1] = "full";
+    RefreshMode[RefreshMode["fullOnValueChange"] = 2] = "fullOnValueChange";
+})(RefreshMode || (RefreshMode = {}));

package/dist/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.d.ts

@@ -1,8 +1,9 @@
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { AbstractPropertiesService } from "./AbstractPropertiesService";
+import { RefreshMode } from '../IPropertiesService';
 export declare abstract class AbstractPolymerLikePropertiesService extends AbstractPropertiesService {
-    listNeedsRefresh(designItem: IDesignItem): boolean;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
     getProperties(designItem: IDesignItem): IProperty[];
     protected parseProperties(list: any): IProperty[];
 }

package/dist/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.js

@@ -1,9 +1,10 @@
 import { PropertiesHelper } from './PropertiesHelper';
 import { AbstractPropertiesService } from "./AbstractPropertiesService";
 import { PropertyType } from '../PropertyType';
+import { RefreshMode } from '../IPropertiesService';
 export class AbstractPolymerLikePropertiesService extends AbstractPropertiesService {
-    listNeedsRefresh(designItem) {
-        return true;
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
     }
     getProperties(designItem) {
         if (!this.isHandledElement(designItem))

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

@@ -1,11 +1,11 @@
-import { IPropertiesService } from "../IPropertiesService";
+import { IPropertiesService, RefreshMode } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
 import { IBinding } from "../../../item/IBinding";
 export declare abstract class AbstractPropertiesService implements IPropertiesService {
-    abstract listNeedsRefresh(designItem: IDesignItem): boolean;
+    abstract getRefreshMode(designItem: IDesignItem): RefreshMode;
     abstract isHandledElement(designItem: IDesignItem): boolean;
     protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
     getProperty(designItem: IDesignItem, name: string): IProperty;

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

@@ -15,6 +15,9 @@ export class AbstractPropertiesService {
             if (property.propertyType == PropertyType.cssValue) {
                 d.styles.set(property.name, value);
                 d.element.style[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'));
             }
             else {
                 let attributeName = property.attributeName;

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

@@ -1,4 +1,4 @@
-import { IPropertiesService } from "../IPropertiesService";
+import { IPropertiesService, RefreshMode } from "../IPropertiesService";
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { ValueType } from "../ValueType";
@@ -6,7 +6,7 @@ import { IBinding } from "../../../item/IBinding.js";
 import { BindingTarget } from "../../../item/BindingTarget";
 export declare class AttributesPropertiesService implements IPropertiesService {
     name: string;
-    listNeedsRefresh(designItem: IDesignItem): boolean;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];

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

@@ -1,10 +1,11 @@
+import { RefreshMode } from "../IPropertiesService";
 import { ValueType } from "../ValueType";
 import { BindingTarget } from "../../../item/BindingTarget";
 import { PropertyType } from "../PropertyType";
 export class AttributesPropertiesService {
     name = "attributes";
-    listNeedsRefresh(designItem) {
-        return true;
+    getRefreshMode(designItem) {
+        return RefreshMode.fullOnValueChange;
     }
     isHandledElement(designItem) {
         return true;

package/dist/elements/services/propertiesService/services/CommonPropertiesService.d.ts

@@ -1,8 +1,9 @@
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { AbstractPropertiesService } from "./AbstractPropertiesService";
+import { RefreshMode } from '../IPropertiesService';
 export declare class CommonPropertiesService extends AbstractPropertiesService {
-    listNeedsRefresh(designItem: IDesignItem): boolean;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
     private commonProperties;
     name: string;
     isHandledElement(designItem: IDesignItem): boolean;

package/dist/elements/services/propertiesService/services/CommonPropertiesService.js

@@ -1,8 +1,9 @@
 import { PropertyType } from "../PropertyType";
 import { AbstractPropertiesService } from "./AbstractPropertiesService";
+import { RefreshMode } from '../IPropertiesService';
 export class CommonPropertiesService extends AbstractPropertiesService {
-    listNeedsRefresh(designItem) {
-        return false;
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
     }
     //@ts-ignore
     commonProperties = [

package/dist/elements/services/propertiesService/services/CssPropertiesService.d.ts

@@ -2,8 +2,9 @@ import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { BindingTarget } from '../../../item/BindingTarget.js';
 import { CommonPropertiesService } from './CommonPropertiesService';
+import { RefreshMode } from '../IPropertiesService';
 export declare class CssPropertiesService extends CommonPropertiesService {
-    listNeedsRefresh(designItem: IDesignItem): boolean;
+    getRefreshMode(designItem: IDesignItem): RefreshMode.none | RefreshMode.fullOnValueChange;
     layout: IProperty[];
     grid: IProperty[];
     flex: IProperty[];

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

@@ -1,9 +1,10 @@
 import { BindingTarget } from '../../../item/BindingTarget.js';
 import { PropertyType } from '../PropertyType';
 import { CommonPropertiesService } from './CommonPropertiesService';
+import { RefreshMode } from '../IPropertiesService';
 export class CssPropertiesService extends CommonPropertiesService {
-    listNeedsRefresh(designItem) {
-        return this.name == 'styles' ? true : false;
+    getRefreshMode(designItem) {
+        return this.name == 'styles' ? RefreshMode.fullOnValueChange : RefreshMode.none;
     }
     layout = [
         {

package/dist/elements/services/propertiesService/services/ListPropertiesService.d.ts

@@ -2,8 +2,9 @@ import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { IJsonPropertyDefinitions } from './IJsonPropertyDefinitions';
 import { AbstractPropertiesService } from './AbstractPropertiesService';
+import { RefreshMode } from '../IPropertiesService';
 export declare class ListPropertiesService extends AbstractPropertiesService {
-    listNeedsRefresh(designItem: IDesignItem): boolean;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
     name: string;
     private _propertys;
     constructor(propertyDefinitions: IJsonPropertyDefinitions);

package/dist/elements/services/propertiesService/services/ListPropertiesService.js

@@ -1,8 +1,9 @@
 import { AbstractPropertiesService } from './AbstractPropertiesService';
 import { PropertyType } from '../PropertyType';
+import { RefreshMode } from '../IPropertiesService';
 export class ListPropertiesService extends AbstractPropertiesService {
-    listNeedsRefresh(designItem) {
-        return true;
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
     }
     name = "list";
     _propertys = new Map();

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.d.ts

@@ -1,6 +1,7 @@
 import { IProperty } from '../IProperty';
 import { IDesignItem } from '../../../item/IDesignItem';
 import { CommonPropertiesService } from "./CommonPropertiesService";
+import { RefreshMode } from '../IPropertiesService';
 export declare class NativeElementsPropertiesService extends CommonPropertiesService {
     private inputProperties;
     private textareaProperties;
@@ -12,7 +13,7 @@ export declare class NativeElementsPropertiesService extends CommonPropertiesSer
     private iframeProperties;
     private formElementProperties;
     name: string;
-    listNeedsRefresh(designItem: IDesignItem): boolean;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
     isHandledElement(designItem: IDesignItem): boolean;
     getProperty(designItem: IDesignItem, name: string): IProperty;
     getProperties(designItem: IDesignItem): IProperty[];

package/dist/elements/services/propertiesService/services/NativeElementsPropertiesService.js

@@ -1,5 +1,6 @@
 import { CommonPropertiesService } from "./CommonPropertiesService";
 import { PropertyType } from '../PropertyType';
+import { RefreshMode } from '../IPropertiesService';
 export class NativeElementsPropertiesService extends CommonPropertiesService {
     inputProperties = [
         {
@@ -156,8 +157,8 @@ export class NativeElementsPropertiesService extends CommonPropertiesService {
         }
     ];
     name = "native";
-    listNeedsRefresh(designItem) {
-        return true;
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
     }
     isHandledElement(designItem) {
         switch (designItem.element.localName) {

package/dist/elements/services/propertiesService/services/WebcomponentManifestPropertiesService.d.ts

@@ -1,10 +1,10 @@
 import { BindingTarget } from "../../../item/BindingTarget.js";
 import { IDesignItem } from "../../../item/IDesignItem.js";
-import { IPropertiesService } from "../IPropertiesService.js";
+import { IPropertiesService, RefreshMode } from "../IPropertiesService.js";
 import { IProperty } from "../IProperty.js";
 import { AbstractPropertiesService } from "./AbstractPropertiesService.js";
 export declare class WebcomponentManifestPropertiesService extends AbstractPropertiesService implements IPropertiesService {
-    listNeedsRefresh(designItem: IDesignItem): boolean;
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
     private _name;
     get name(): string;
     private _propertiesList;

package/dist/elements/services/propertiesService/services/WebcomponentManifestPropertiesService.js

@@ -1,9 +1,10 @@
 import { BindingTarget } from "../../../item/BindingTarget.js";
+import { RefreshMode } from "../IPropertiesService.js";
 import { PropertyType } from "../PropertyType.js";
 import { AbstractPropertiesService } from "./AbstractPropertiesService.js";
 export class WebcomponentManifestPropertiesService extends AbstractPropertiesService {
-    listNeedsRefresh(designItem) {
-        return true;
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
     }
     _name;
     get name() { return this._name; }

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

@@ -663,6 +663,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 di.setStyle('position', 'absolute');
                 di.setStyle('left', (position.x - pos.x) + 'px');
                 di.setStyle('top', (position.y - pos.y) + 'px');
+                const containerService = this.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainer, getComputedStyle(newContainer.element)));
+                containerService.enterContainer(newContainer, [di]);
                 this.instanceServiceContainer.undoService.execute(new InsertAction(newContainer, newContainer.childCount, di));
                 grp.commit();
                 requestAnimationFrame(() => this.instanceServiceContainer.selectionService.setSelectedElements([di]));

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

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

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

@@ -1,6 +1,7 @@
 import { PropertyGridPropertyList } from './PropertyGridPropertyList';
 import { DesignerTabControl } from '../../controls/DesignerTabControl';
 import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { RefreshMode } from '../../services/propertiesService/IPropertiesService';
 export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _serviceContainer;
     _designerTabControl;
@@ -35,6 +36,10 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
         });
         this._itemsObserver = new MutationObserver((m) => {
             for (const a of this._propertyGridPropertyLists) {
+                if (a.propertiesService.getRefreshMode(this._selectedItems[0]) == RefreshMode.fullOnValueChange) {
+                    a.createElements(this._selectedItems[0]);
+                    a.designItemsChanged(this._selectedItems);
+                }
                 a.refreshForDesignItems(this._selectedItems);
             }
         });

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

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

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

@@ -1,4 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, css, DomHelper } from '@node-projects/base-custom-webcomponent';
+import { RefreshMode } from '../../services/propertiesService/IPropertiesService';
 import { ValueType } from '../../services/propertiesService/ValueType';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
 import { PropertyType } from '../../services/propertiesService/PropertyType';
@@ -8,6 +9,9 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _serviceContainer;
     _propertiesService;
     _designItems;
+    get propertiesService() {
+        return this._propertiesService;
+    }
     static get style() {
         return css `
     :host{
@@ -93,7 +97,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
         }
     }
     createElements(designItem) {
-        if (this._propertiesService && (this._propertiesService.listNeedsRefresh(designItem)) || this._propertyMap.size == 0) {
+        if (this._propertiesService && (this._propertiesService.getRefreshMode(designItem) != RefreshMode.none) || this._propertyMap.size == 0) {
             DomHelper.removeAllChildnodes(this._div);
             this._propertyMap.clear();
             if (this._propertiesService) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.154",
+  "version": "0.0.155",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",