@node-projects/web-component-designer 0.1.131 → 0.1.132

package/dist/elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class AltToEnterContainerExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -7,7 +7,7 @@ export class AltToEnterContainerExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-weight:800; font-family: monospace; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from '../IExtensionManger.js';
 export declare class EditTextExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js

@@ -11,7 +11,7 @@ export class EditTextExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new EditTextExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-edit-text-clickoutside { stroke: transparent; fill: lightgray; opacity: 0.7 }
   `;
 }

package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class ElementDragTitleExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -7,7 +7,7 @@ export class ElementDragTitleExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new ElementDragTitleExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-text-primary { stroke: none; color: white; font-family: monospace; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class GrayOutDragOverContainerExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -7,7 +7,7 @@ export class GrayOutDragOverContainerExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new GrayOutDragOverContainerExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-rect-enter-container { stroke: none; fill: #aa00ff2e; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/HighlightElementExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class HighlightElementExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -7,7 +7,7 @@ export class HighlightElementExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new HighlightElementExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-hover { stroke: #90caf9; fill: none; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/IDesignerExtensionProvider.d.ts

@@ -6,5 +6,5 @@ export interface IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
     style?: CSSStyleSheet | CSSStyleSheet[];
-    svgDefs?: string;
+    svgDefs?: string | string[];
 }

package/dist/elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.d.ts

@@ -9,5 +9,5 @@ export declare class InvisibleElementExtensionProvider implements IDesignerExten
     constructor(elementFilter?: (designItem: IDesignItem) => boolean);
     shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -18,7 +18,7 @@ export class InvisibleElementExtensionProvider {
     getExtension(extensionManager, designerCanvas, designItem) {
         return new InvisibleElementExtension(extensionManager, designerCanvas, designItem);
     }
-    style = css `
+    static style = css `
     .svg-invisible-div { stroke: lightgray; fill: transparent; stroke-width: 1;
   `;
 }

package/dist/elements/widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class MultipleSelectionRectExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -7,7 +7,7 @@ export class MultipleSelectionRectExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new MultipleSelectionRectExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-multiple-rect-selection { stroke: #909090; stroke-dasharray: 3; fill: transparent; stroke-width: 2; /*pointer-events: all;*/ }
   `;
 }

package/dist/elements/widgets/designerView/extensions/PaddingExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class PaddingExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -10,7 +10,7 @@ export class PaddingExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new PaddingExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-padding { fill: #32cd3266; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/PlacementExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class PlacementExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -7,7 +7,7 @@ export class PlacementExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new PlacementExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-hover { stroke: #90caf9; fill: none; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/PositionExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class PositionExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -12,7 +12,7 @@ export class PositionExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new PositionExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-position-text { text-anchor: middle; alignment-baseline: central; }
   `;
 }

package/dist/elements/widgets/designerView/extensions/ResizeExtensionProvider.d.ts

@@ -8,5 +8,5 @@ export declare class ResizeExtensionProvider implements IDesignerExtensionProvid
     constructor(resizeAllSelected?: boolean);
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -14,7 +14,7 @@ export class ResizeExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new ResizeExtension(extensionManager, designerView, designItem, this.resizeAllSelected);
     }
-    style = css `
+    static style = css `
     .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }
   `;
 }

package/dist/elements/widgets/designerView/extensions/RotateExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class RotateExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -10,7 +10,7 @@ export class RotateExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new RotateExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-primary-rotate { stroke: #3899ec; fill: #3899ec; pointer-events: all }
     .svg-rotate-text { text-anchor: middle; alignment-baseline: central; }
   `;

package/dist/elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from './IExtensionManger.js';
 export declare class SelectionDefaultExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -8,7 +8,7 @@ export class SelectionDefaultExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new SelectionDefaultExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; /*pointer-events: all;*/ }
   `;
 }

package/dist/elements/widgets/designerView/extensions/TransformOriginExtensionProvider.d.ts

@@ -8,5 +8,5 @@ export declare class TransformOriginExtensionProvider implements IDesignerExtens
     constructor(showOnlyWhenSet?: boolean);
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

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

@@ -26,7 +26,7 @@ export class TransformOriginExtensionProvider {
     getExtension(extensionManager, designerView, designItem) {
         return new TransformOriginExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-transform-origin { stroke: #3899ec; fill: black; pointer-events: all }
   `;
 }

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.d.ts

@@ -10,6 +10,6 @@ export declare class DisplayGridExtensionProvider implements IDesignerExtensionP
     constructor(gridColor?: string, gridFillColor?: string);
     shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-    readonly svgDefs = "\n    <pattern id=\"pattern-stripe\" \n      width=\"4\" height=\"4\" \n      patternUnits=\"userSpaceOnUse\"\n      patternTransform=\"rotate(45)\">\n      <rect width=\"1\" height=\"4\" transform=\"translate(0,0)\" fill=\"white\"></rect>\n    </pattern>\n    <mask id=\"mask-stripe\">\n      <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#pattern-stripe)\" />\n    </mask>";
+    static readonly style: CSSStyleSheet;
+    static readonly svgDefs = "\n    <pattern id=\"pattern-stripe\" \n      width=\"4\" height=\"4\" \n      patternUnits=\"userSpaceOnUse\"\n      patternTransform=\"rotate(45)\">\n      <rect width=\"1\" height=\"4\" transform=\"translate(0,0)\" fill=\"white\"></rect>\n    </pattern>\n    <mask id=\"mask-stripe\">\n      <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"url(#pattern-stripe)\" />\n    </mask>";
 }

package/dist/elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js

@@ -17,7 +17,7 @@ export class DisplayGridExtensionProvider {
     getExtension(extensionManager, designerCanvas, designItem) {
         return new DisplayGridExtension(extensionManager, designerCanvas, designItem, this.gridColor, this.gridFillColor);
     }
-    style = css `
+    static style = css `
     .svg-grid { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: var(--svg-grid-fill-color); }
     .svg-grid-current-cell { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: #e3ff4722; }
     .svg-grid-area { font-size: 8px; }
@@ -25,7 +25,7 @@ export class DisplayGridExtensionProvider {
     .svg-grid-header { fill: var(--svg-grid-fill-color); stroke: var(--svg-grid-stroke-color); }
     .svg-grid-plus-sign { stroke: black; }
   `;
-    svgDefs = `
+    static svgDefs = `
     <pattern id="pattern-stripe" 
       width="4" height="4" 
       patternUnits="userSpaceOnUse"

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from '../IExtensionManger.js';
 export declare class EditGridColumnRowSizesExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

package/dist/elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.js

@@ -11,7 +11,7 @@ export class EditGridColumnRowSizesExtensionProvider {
     getExtension(extensionManager, designerCanvas, designItem) {
         return new EditGridColumnRowSizesExtension(extensionManager, designerCanvas, designItem);
     }
-    style = css `
+    static style = css `
     .svg-grid-resizer-v { fill: transparent; cursor: ew-resize; pointer-events: all; }
     .svg-grid-resizer-v:hover { fill: #ff7f5052; }
     .svg-grid-resizer-h { fill: transparent; cursor: ns-resize; pointer-events: all; }

package/dist/elements/widgets/designerView/extensions/grid/GridChildResizeExtension.d.ts

@@ -3,10 +3,8 @@ import { IDesignerCanvas } from "../../IDesignerCanvas.js";
 import { AbstractExtension } from "../AbstractExtension.js";
 import { IExtensionManager } from "../IExtensionManger.js";
 export declare class GridChildResizeExtension extends AbstractExtension {
-    private _initialSizes;
     private _actionModeStarted;
     private _initialPoint;
-    private _offsetPoint;
     private _circle1;
     private _circle2;
     private _circle3;
@@ -17,11 +15,11 @@ export declare class GridChildResizeExtension extends AbstractExtension {
     private _circle8;
     private _initialComputedTransformOrigins;
     private _initialTransformOrigins;
+    private _styleBackup;
     constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, extendedItem: IDesignItem);
     extend(cache: Record<string | symbol, any>, event?: Event): void;
     refresh(cache: Record<string | symbol, any>, event?: Event): void;
     _drawResizerOverlay(x: number, y: number, cursor: string, oldCircle?: SVGCircleElement): SVGCircleElement;
     _pointerActionTypeResize(circle: SVGCircleElement, event: PointerEvent, actionMode: string): void;
-    private prepareResize;
     dispose(): void;
 }

package/dist/elements/widgets/designerView/extensions/grid/GridChildResizeExtension.js

@@ -1,15 +1,10 @@
 import { EventNames } from "../../../../../enums/EventNames.js";
-import { getContentBoxContentOffsets } from "../../../../helper/ElementHelper.js";
 import { calculateGridInformation } from "../../../../helper/GridHelper.js";
-import { roundValue } from "../../../../helper/LayoutHelper.js";
-import { getDesignerCanvasNormalizedTransformedCornerDOMPoints, getElementCombinedTransform, transformPointByInverseMatrix, normalizeToAbsolutePosition } from "../../../../helper/TransformHelper.js";
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from "../AbstractExtension.js";
-//      also when elment aligned to bottom, will it later also be?
 export class GridChildResizeExtension extends AbstractExtension {
-    _initialSizes;
     _actionModeStarted;
     _initialPoint;
-    _offsetPoint;
     _circle1;
     _circle2;
     _circle3;
@@ -20,6 +15,7 @@ export class GridChildResizeExtension extends AbstractExtension {
     _circle8;
     _initialComputedTransformOrigins;
     _initialTransformOrigins;
+    _styleBackup;
     constructor(extensionManager, designerCanvas, extendedItem) {
         super(extensionManager, designerCanvas, extendedItem);
     }
@@ -61,47 +57,19 @@ export class GridChildResizeExtension extends AbstractExtension {
         const currentPoint = this.designerCanvas.getNormalizedEventCoordinates(event);
         switch (event.type) {
             case EventNames.PointerDown:
-                const cx = parseFloat(circle.getAttribute('cx'));
-                const cy = parseFloat(circle.getAttribute('cy'));
-                this._offsetPoint = { x: cx - currentPoint.x, y: cy - currentPoint.y };
+                this._styleBackup = this.extendedItem.element.getAttribute('style');
                 event.target.setPointerCapture(event.pointerId);
                 this._initialPoint = currentPoint;
-                this._initialSizes = [];
                 this._actionModeStarted = actionMode;
                 this._initialComputedTransformOrigins = [];
                 this._initialTransformOrigins = [];
-                //#region Calc elements' dimension
-                const transformBackup = this.extendedItem.element.style.transform;
-                this.extendedItem.element.style.transform = '';
-                let rect = this.extendedItem.element.getBoundingClientRect();
-                this.extendedItem.element.style.transform = transformBackup;
-                //#endregion Calc element's dimension
-                let contentBoxOffset = { x: 0, y: 0 };
-                if (getComputedStyle(this.extendedItem.element).boxSizing == 'content-box') {
-                    contentBoxOffset = getContentBoxContentOffsets(this.extendedItem.element);
-                }
-                this._initialSizes.push({ width: (rect.width - contentBoxOffset.x * this.designerCanvas.scaleFactor) / this.designerCanvas.scaleFactor, height: (rect.height - contentBoxOffset.y * this.designerCanvas.scaleFactor) / this.designerCanvas.scaleFactor });
                 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);
-                this.prepareResize(this.extendedItem, this._actionModeStarted);
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {
-                    const containerStyle = getComputedStyle(this.extendedItem.parent.element);
-                    const containerService = this.designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this.extendedItem.parent, containerStyle));
-                    const diff = containerService.placePoint(event, this.designerCanvas, this.extendedItem.parent, this._initialPoint, { x: 0, y: 0 }, currentPoint, this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                    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 = getElementCombinedTransform(this.extendedItem.element);
-                    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 posX = 0;
                     let posY = 0;
                     let cellX = 0;
@@ -164,105 +132,25 @@ export class GridChildResizeExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
+                const cs = getComputedStyle(this.extendedItem.element);
+                const gridColumnStart = cs.gridColumnStart;
+                const gridColumnEnd = cs.gridColumnEnd;
+                const gridRowStart = cs.gridRowStart;
+                const gridRowEnd = cs.gridRowEnd;
+                if (this._styleBackup)
+                    this.extendedItem.element.setAttribute('style', this._styleBackup);
+                else
+                    this.extendedItem.element.removeAttribute('style');
                 let cg = this.extendedItem.openGroup("Resize &lt;" + this.extendedItem.name + "&gt;");
-                this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
-                this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
-                this.extendedItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(this.extendedItem.element, 'left'))) + 'px');
-                this.extendedItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(this.extendedItem.element, 'top'))) + '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 + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[0].replace('px', '')), this.extendedItem.element.offsetTop + parseFloat(getComputedStyle(this.extendedItem.element).transformOrigin.split(' ')[1].replace('px', '')));
-                let p1 = new DOMPoint(p1Abs.x - p3Abs.x, -(p1Abs.y - p3Abs.y));
-                let matrix = new DOMMatrix(getComputedStyle(this.extendedItem.element).transform);
-                let deltaX = 0;
-                let deltaY = 0;
-                let p1transformed = 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);
-                let p4Abs = new DOMPoint(p1Abs.x + p1p2transformed.x, p1Abs.y - p1p2transformed.y);
-                deltaX = p4Abs.x - p1Abs.x;
-                deltaY = p4Abs.y - p1Abs.y;
-                this.extendedItem.element.style.transform = matrix.translate(deltaX, deltaY).toString();
-                if (matrix.isIdentity) {
-                    this.extendedItem.element.style.transform = '';
-                }
-                this.extendedItem.setStyle('transform', this.extendedItem.element.style.transform);
+                this.extendedItem.setStyle("gridColumnStart", gridColumnStart);
+                this.extendedItem.setStyle("gridColumnEnd", gridColumnEnd);
+                this.extendedItem.setStyle("gridRowStart", gridRowStart);
+                this.extendedItem.setStyle("gridRowEnd", gridRowEnd);
                 cg.commit();
-                this._initialSizes = null;
                 this._initialPoint = null;
                 break;
         }
     }
-    prepareResize(designItem, mode) {
-        let i = 0;
-        let top = null;
-        let bottom = null;
-        let left = null;
-        let right = null;
-        switch (this._actionModeStarted) {
-            case 'e-resize':
-                left = getComputedStyle(designItem.element).left;
-                designItem.element.style.removeProperty('right');
-                designItem.element.style.left = left;
-                designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
-                break;
-            case 'se-resize':
-                top = getComputedStyle(designItem.element).top;
-                designItem.element.style.removeProperty('bottom');
-                designItem.element.style.top = top;
-                left = getComputedStyle(designItem.element).left;
-                designItem.element.style.removeProperty('right');
-                designItem.element.style.left = left;
-                designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
-                break;
-            case 's-resize':
-                top = getComputedStyle(designItem.element).top;
-                designItem.element.style.removeProperty('bottom');
-                designItem.element.style.top = top;
-                designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + this._initialComputedTransformOrigins[i].y + 'px';
-                break;
-            case 'sw-resize':
-                top = getComputedStyle(designItem.element).top;
-                designItem.element.style.removeProperty('bottom');
-                designItem.element.style.top = top;
-                right = getComputedStyle(designItem.element).right;
-                designItem.element.style.removeProperty('left');
-                designItem.element.style.right = right;
-                designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
-                break;
-            case 'w-resize':
-                right = getComputedStyle(designItem.element).right;
-                designItem.element.style.removeProperty('left');
-                designItem.element.style.right = right;
-                designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + this._initialComputedTransformOrigins[i].y + 'px';
-                break;
-            case 'nw-resize':
-                bottom = getComputedStyle(designItem.element).bottom;
-                designItem.element.style.removeProperty('top');
-                designItem.element.style.bottom = bottom;
-                right = getComputedStyle(designItem.element).right;
-                designItem.element.style.removeProperty('left');
-                designItem.element.style.right = right;
-                designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
-                break;
-            case 'n-resize':
-                bottom = getComputedStyle(designItem.element).bottom;
-                designItem.element.style.removeProperty('top');
-                designItem.element.style.bottom = bottom;
-                designItem.element.style.transformOrigin = 'calc(100% - ' + this._initialComputedTransformOrigins[i].x + 'px) ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
-                break;
-            case 'ne-resize':
-                bottom = getComputedStyle(designItem.element).bottom;
-                designItem.element.style.removeProperty('top');
-                designItem.element.style.bottom = bottom;
-                left = getComputedStyle(designItem.element).left;
-                designItem.element.style.removeProperty('right');
-                designItem.element.style.left = left;
-                designItem.element.style.transformOrigin = this._initialComputedTransformOrigins[i].x + 'px ' + 'calc(100% - ' + this._initialComputedTransformOrigins[i].y + 'px)';
-                break;
-        }
-    }
     dispose() {
         this._removeAllOverlays();
     }

package/dist/elements/widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.d.ts

@@ -6,5 +6,5 @@ import { IExtensionManager } from "../IExtensionManger.js";
 export declare class GridChildResizeExtensionProvider implements IDesignerExtensionProvider {
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
+    static readonly style: CSSStyleSheet;
 }

package/dist/elements/widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js

@@ -3,14 +3,14 @@ import { NodeType } from "../../../../item/NodeType.js";
 import { GridChildResizeExtension } from "./GridChildResizeExtension.js";
 export class GridChildResizeExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.nodeType === NodeType.Element && getComputedStyle(designItem.parent.element).display === 'grid')
+        if (designItem.nodeType === NodeType.Element && designItem.parent?.nodeType === NodeType.Element && getComputedStyle(designItem.parent.element).display === 'grid')
             return true;
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {
         return new GridChildResizeExtension(extensionManager, designerView, designItem);
     }
-    style = css `
+    static style = css `
     .svg-grid-resizer { stroke: #3899ec; fill: white; pointer-events: all }
   `;
 }

package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.d.ts

@@ -7,6 +7,7 @@ export declare class ApplyFirstMachingExtensionProvider implements IDesignerExte
     private extensions;
     private extIndex;
     style: CSSStyleSheet[];
+    svgDefs: string[];
     constructor(...extensions: IDesignerExtensionProvider[]);
     shouldExtend(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;

package/dist/elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js

@@ -2,6 +2,7 @@ export class ApplyFirstMachingExtensionProvider {
     extensions;
     extIndex;
     style;
+    svgDefs;
     constructor(...extensions) {
         this.extensions = extensions;
         for (let e of extensions) {
@@ -13,6 +14,30 @@ export class ApplyFirstMachingExtensionProvider {
                 else
                     this.style.push(e.style);
             }
+            if (e.constructor.style) {
+                if (!this.style)
+                    this.style = [];
+                if (Array.isArray(e.constructor.style))
+                    this.style.push(...e.constructor.style);
+                else
+                    this.style.push(e.constructor.style);
+            }
+            if (e.svgDefs) {
+                if (!this.svgDefs)
+                    this.svgDefs = [];
+                if (Array.isArray(e.svgDefs))
+                    this.svgDefs.push(...e.svgDefs);
+                else
+                    this.svgDefs.push(e.svgDefs);
+            }
+            if (e.constructor.svgDefs) {
+                if (!this.svgDefs)
+                    this.svgDefs = [];
+                if (Array.isArray(e.constructor.svgDefs))
+                    this.svgDefs.push(...e.svgDefs);
+                else
+                    this.svgDefs.push(e.constructor.svgDefs);
+            }
         }
     }
     shouldExtend(extensionManager, designerCanvas, designItem) {

package/dist/elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.d.ts

@@ -8,6 +8,7 @@ export declare class ConditionExtensionProvider implements IDesignerExtensionPro
     extensionProvider: IDesignerExtensionProvider;
     condition: (designItem: IDesignItem) => boolean;
     style: CSSStyleSheet;
+    svgDefs: string;
     shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
     getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
 }

package/dist/elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.js

@@ -2,11 +2,13 @@ export class ConditionExtensionProvider {
     constructor(extensionProvider, condition) {
         this.extensionProvider = extensionProvider;
         this.condition = condition;
-        this.style = extensionProvider.style;
+        this.style = extensionProvider.style ?? extensionProvider.constructor.style;
+        this.svgDefs = extensionProvider.svgDefs ?? extensionProvider.constructor.svgDefs;
     }
     extensionProvider;
     condition;
     style;
+    svgDefs;
     shouldExtend(extensionManager, designerView, designItem) {
         if (!this.condition(designItem))
             return false;

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

@@ -63,17 +63,47 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         const alreadyApplied = new Set();
         for (const extList of this._serviceContainer.designerExtensions) {
             for (const ext of extList[1]) {
+                if (ext.constructor.style) {
+                    if (Array.isArray(ext.constructor.style)) {
+                        for (const s of ext.constructor.style) {
+                            if (!alreadyApplied.has(s)) {
+                                alreadyApplied.add(s);
+                                styles.push(s);
+                            }
+                        }
+                    }
+                    else if (!alreadyApplied.has(ext.constructor.style)) {
+                        alreadyApplied.add(ext.constructor.style);
+                        styles.push(ext.constructor.style);
+                    }
+                }
                 if (ext.style) {
-                    if (!alreadyApplied.has(ext.style)) {
+                    if (Array.isArray(ext.style)) {
+                        for (const s of ext.style) {
+                            if (!alreadyApplied.has(s)) {
+                                alreadyApplied.add(s);
+                                styles.push(s);
+                            }
+                        }
+                    }
+                    else if (!alreadyApplied.has(ext.style)) {
                         alreadyApplied.add(ext.style);
-                        if (Array.isArray(ext.style))
-                            styles.push(...ext.style);
-                        else
-                            styles.push(ext.style);
+                        styles.push(ext.style);
                     }
                 }
                 if (ext.svgDefs) {
-                    if (!alreadyApplied.has(ext.svgDefs)) {
+                    if (Array.isArray(ext.svgDefs)) {
+                        for (const s of ext.svgDefs) {
+                            if (!alreadyApplied.has(s)) {
+                                alreadyApplied.add(s);
+                                const a = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+                                a.innerHTML = s;
+                                for (let n of [...a.children])
+                                    this._defs.appendChild(n);
+                            }
+                        }
+                    }
+                    else if (!alreadyApplied.has(ext.svgDefs)) {
                         alreadyApplied.add(ext.svgDefs);
                         const a = document.createElementNS("http://www.w3.org/2000/svg", "defs");
                         a.innerHTML = ext.svgDefs;
@@ -81,6 +111,26 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
                             this._defs.appendChild(n);
                     }
                 }
+                if (ext.constructor.svgDefs) {
+                    if (Array.isArray(ext.constructor.svgDefs)) {
+                        for (const s of ext.constructor.svgDefs) {
+                            if (!alreadyApplied.has(s)) {
+                                alreadyApplied.add(s);
+                                const a = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+                                a.innerHTML = s;
+                                for (let n of [...a.children])
+                                    this._defs.appendChild(n);
+                            }
+                        }
+                    }
+                    else if (!alreadyApplied.has(ext.constructor.svgDefs)) {
+                        alreadyApplied.add(ext.constructor.svgDefs);
+                        const a = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+                        a.innerHTML = ext.constructor.svgDefs;
+                        for (let n of [...a.children])
+                            this._defs.appendChild(n);
+                    }
+                }
             }
         }
         for (const ext of this._serviceContainer.designerPointerExtensions) {

package/dist/polyfill/globals.d.ts

@@ -7,5 +7,6 @@ declare global {
     }
     interface Function {
         style: CSSStyleSheet;
+        svgDefs: string;
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.131",
+  "version": "0.1.132",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",