@node-projects/web-component-designer 0.0.243 → 0.0.245

package/dist/elements/documentContainer.d.ts

@@ -26,7 +26,7 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
         name: string;
         newStyle: string;
         oldStyle: string;
-        changeSource: 'extern' | 'styleupdate';
+        changeSource: 'extern' | 'styleupdate' | 'undo';
     }>;
     onContentChanged: TypedEvent<void>;
     private _serviceContainer;

package/dist/elements/helper/GridHelper.js

@@ -1,8 +1,9 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "./TransformHelper.js";
 export function CalculateGridInformation(designItem) {
     //todo:
     //same name should combine columns/rows
     let itemRect = designItem.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(designItem.element);
-    //let itemRect = designItem.element.getBoundingClientRect();
+    let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(designItem.element, null, designItem.instanceServiceContainer.designerCanvas);
     const computedStyle = getComputedStyle(designItem.element);
     const rows = computedStyle.gridTemplateRows.split(' ');
     const columns = computedStyle.gridTemplateColumns.split(' ');
@@ -12,8 +13,8 @@ export function CalculateGridInformation(designItem) {
     let xGap = 0;
     let yGap = 0;
     let rw = 0;
-    let xOffset = itemRect.x; // - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.x;
-    let yOffset = itemRect.y; // - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.y;
+    let xOffset = transformedCornerPoints[0].x;
+    let yOffset = transformedCornerPoints[0].y;
     let gridA = null;
     if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
         gridA = computedStyle.gridTemplateAreas.split('\"');

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

@@ -1,5 +1,6 @@
 import { IPoint } from "../../interfaces/IPoint.js";
 import { IDesignerCanvas } from "../widgets/designerView/IDesignerCanvas.js";
+export declare function getElementCombinedTransform(element: HTMLElement): DOMMatrix;
 export declare function combineTransforms(element: HTMLElement, actualTransforms: string, requestedTransformation: string): void;
 export declare function getDomMatrix(element: HTMLElement): DOMMatrix;
 export declare function transformPointByInverseMatrix(point: DOMPoint, matrix: DOMMatrix): DOMPoint;

package/dist/elements/helper/TransformHelper.js

@@ -5,6 +5,24 @@ let identityMatrix = [
     0, 0, 1, 0,
     0, 0, 0, 1
 ];
+export function getElementCombinedTransform(element) {
+    //https://www.w3.org/TR/css-transforms-2/#ctm
+    let s = getComputedStyle(element);
+    let m = new DOMMatrix();
+    if (s.translate != 'none') {
+        m = m.multiply(new DOMMatrix('translate(' + s.translate + ')'));
+    }
+    if (s.rotate != 'none') {
+        m = m.multiply(new DOMMatrix('rotate(' + s.rotate + ')'));
+    }
+    if (s.scale != 'none') {
+        m = m.multiply(new DOMMatrix('scale(' + s.rotate + ')'));
+    }
+    if (s.transform != 'none') {
+        m = m.multiply(new DOMMatrix(s.transform));
+    }
+    return m;
+}
 export function combineTransforms(element, actualTransforms, requestedTransformation) {
     if (actualTransforms == null || actualTransforms == '') {
         element.style.transform = requestedTransformation;
@@ -100,8 +118,8 @@ export function getResultingTransformationBetweenElementAndAllAncestors(element,
     let originalElementAndAllParentsMultipliedMatrix;
     while (actualElement != ancestor) {
         const newElement = getParentElementIncludingSlots(actualElement);
-        actualElementMatrix = new DOMMatrix(getComputedStyle(actualElement).transform);
-        newElementMatrix = new DOMMatrix(getComputedStyle(newElement).transform);
+        actualElementMatrix = getElementCombinedTransform(actualElement);
+        newElementMatrix = getElementCombinedTransform(newElement);
         newElementMatrix.m41 = newElementMatrix.m42 = 0;
         if (actualElement == element) {
             originalElementAndAllParentsMultipliedMatrix = actualElementMatrix.multiply(newElementMatrix);

package/dist/elements/services/placementService/FlexBoxPlacementService.js

@@ -44,23 +44,31 @@ export class FlexBoxPlacementService {
         const pos = placementView.getNormalizedEventCoordinates(event);
         const style = getComputedStyle(container.element);
         const childrenWithPos = Array.from(container.children()).filter(x => !x.isEmptyTextNode).map(x => [x, placementView.getNormalizedElementCoordinates(x.element)]);
-        if (style.flexDirection == 'row') {
+        if (style.flexDirection == 'row' || style.flexDirection == 'row-reverse') {
             childrenWithPos.sort(x => x[1].x);
             let elBefore = null;
             for (let c of childrenWithPos) {
                 if (c[1].x + c[1].width / 2 < pos.x) {
                     elBefore = c;
+                    if (style.flexDirection == 'row-reverse')
+                        break;
                 }
             }
             let posBefore = childrenWithPos.indexOf(elBefore);
             let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0]));
             if (elBefore && elBefore[0] != items[0]) {
-                if (posBefore + 1 === posDrag)
+                if (style.flexDirection == 'row-reverse' && posBefore - 1 === posDrag)
+                    return;
+                if (style.flexDirection == 'row' && posBefore + 1 === posDrag)
                     return;
                 const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
-                items[0].remove();
-                elBefore[0].insertAdjacentElement(items[0], 'afterend');
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'row-reverse')
+                    elBefore[0].insertAdjacentElement(items[0], 'beforebegin');
+                else
+                    elBefore[0].insertAdjacentElement(items[0], 'afterend');
                 cg.commit();
                 container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
@@ -69,29 +77,41 @@ export class FlexBoxPlacementService {
                     return;
                 const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
-                items[0].remove();
-                container.insertChild(items[0], 0);
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'row-reverse')
+                    container.insertChild(items[0]);
+                else
+                    container.insertChild(items[0], 0);
                 cg.commit();
                 container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
         }
-        else if (style.flexDirection == 'column') {
+        else if (style.flexDirection == 'column' || style.flexDirection == 'column-reverse') {
             childrenWithPos.sort(x => x[1].y);
             let elBefore = null;
             for (let c of childrenWithPos) {
                 if (c[1].y + c[1].height / 2 < pos.y) {
                     elBefore = c;
+                    if (style.flexDirection == 'column-reverse')
+                        break;
                 }
             }
             let posBefore = childrenWithPos.indexOf(elBefore);
             let posDrag = childrenWithPos.indexOf(childrenWithPos.find(x => x[0] == items[0]));
             if (elBefore && elBefore[0] != items[0]) {
-                if (posBefore + 1 === posDrag)
+                if (style.flexDirection == 'column-reverse' && posBefore - 1 === posDrag)
+                    return;
+                if (style.flexDirection == 'column' && posBefore + 1 === posDrag)
                     return;
                 const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
-                items[0].remove();
-                elBefore[0].insertAdjacentElement(items[0], 'afterend');
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'column-reverse')
+                    elBefore[0].insertAdjacentElement(items[0], 'beforebegin');
+                else
+                    elBefore[0].insertAdjacentElement(items[0], 'afterend');
                 cg.commit();
                 container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
@@ -100,8 +120,12 @@ export class FlexBoxPlacementService {
                     return;
                 const sel = [...container.instanceServiceContainer.selectionService.selectedElements];
                 let cg = items[0].openGroup('move in flexbox');
-                items[0].remove();
-                container.insertChild(items[0], 0);
+                if (items[0].parent)
+                    items[0].remove();
+                if (style.flexDirection == 'column-reverse')
+                    container.insertChild(items[0]);
+                else
+                    container.insertChild(items[0], 0);
                 cg.commit();
                 container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }

package/dist/elements/services/propertiesService/services/CssProperties.json

@@ -3,7 +3,26 @@
         "type": "color"
     },
     "additiveSymbols": {},
-    "alignContent": {},
+    "alignContent": {
+        "type": "list",
+        "values": [
+            "start",
+            "end",
+            "flex-start",
+            "flex-end",
+            "center",
+            "normal",
+            "baseline",
+            "first baseline",
+            "last baseline",
+            "space-between",
+            "space-around",
+            "space-evenly",
+            "stretch",
+            "safe",
+            "unsafe"
+        ]
+    },
     "alignItems": {},
     "alignSelf": {},
     "alignmentBaseline": {},
@@ -229,11 +248,30 @@
     "filter": {},
     "flex": {},
     "flexBasis": {},
-    "flexDirection": {},
+    "flexDirection": {
+        "type": "list",
+        "values": [
+            "row",
+            "column",
+            "row-reverse",
+            "column-reverse"
+        ]
+    },
     "flexFlow": {},
-    "flexGrow": {},
-    "flexShrink": {},
-    "flexWrap": {},
+    "flexGrow": {
+        "type": "number"
+    },
+    "flexShrink": {
+        "type": "number"
+    },
+    "flexWrap": {
+        "type": "list",
+        "values": [
+            "nowrap",
+            "wrap",
+            "wrap-reverse"
+        ]
+    },
     "float": {},
     "floodColor": {
         "type": "color"
@@ -413,7 +451,11 @@
     "pointerEvents": {},
     "position": {
         "type": "list",
-        "values": ["static", "relative", "absolute"]
+        "values": [
+            "static",
+            "relative",
+            "absolute"
+        ]
     },
     "prefix": {},
     "quotes": {},

package/dist/elements/services/stylesheetService/AbstractStylesheetService.d.ts

@@ -32,12 +32,13 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
     abstract insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
     abstract removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
     abstract updateCompleteStylesheet(name: string, newStyle: string): any;
+    abstract updateCompleteStylesheetWithoutUndo(name: string, newStyle: string): any;
     abstract updateDeclarationValueWithoutUndo(declaration: IStyleDeclaration, value: string, important: boolean): any;
     stylesheetChanged: TypedEvent<{
         name: string;
         newStyle: string;
         oldStyle: string;
-        changeSource: 'extern' | 'styleupdate';
+        changeSource: 'extern' | 'styleupdate' | 'undo';
     }>;
     stylesheetsChanged: TypedEvent<void>;
     protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): boolean;

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -1,6 +1,5 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js';
-import { StylesheetStyleChangeAction } from "../undoService/transactionItems/StylesheetStyleChangeAction.js";
 export class AbstractStylesheetService {
     _stylesheets = new Map();
     _documentStylesheets = new Map();
@@ -74,13 +73,7 @@ export class AbstractStylesheetService {
         return stylesheets;
     }
     updateDeclarationValue(declaration, value, important) {
-        if (!declaration.stylesheet.designItem) {
-            const action = new StylesheetStyleChangeAction(this, declaration, value, declaration.value);
-            this._instanceServiceContainer.undoService.execute(action);
-        }
-        else {
-            this.updateDeclarationValueWithoutUndo(declaration, value, important);
-        }
+        this.updateDeclarationValueWithoutUndo(declaration, value, important);
     }
     stylesheetChanged = new TypedEvent();
     stylesheetsChanged = new TypedEvent();

package/dist/elements/services/stylesheetService/CssToolsStylesheetService.d.ts

@@ -36,5 +36,7 @@ export declare class CssToolsStylesheetService extends AbstractStylesheetService
     removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
     private updateStylesheet;
     updateCompleteStylesheet(name: string, newStyle: string): void;
+    updateCompleteStylesheetWithoutUndo(name: string, newStyle: string, noUndo?: boolean): void;
+    private updateCompleteStylesheetInternal;
 }
 export {};

package/dist/elements/services/stylesheetService/CssToolsStylesheetService.js

@@ -57,6 +57,15 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
         declaration.ast.value = important ? value + ' !important' : value;
         let ss = this._allStylesheets.get(declaration.parent.stylesheetName);
         this.updateStylesheet(ss);
+        /*
+        declaration.ast.value = important ? value + ' !important' : value;
+        let ss = declaration.ast;
+        while (ss?.parent)
+            ss = ss?.parent;
+        let obj = { ast: ss, stylesheet: declaration.stylesheet };
+        this._allStylesheets.set(declaration.parent.stylesheetName, obj)
+        this.updateStylesheet(obj);
+        */
     }
     insertDeclarationIntoRule(rule, property, value, important) {
         rule.ast.declarations.push({
@@ -85,6 +94,12 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
             this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
     }
     updateCompleteStylesheet(name, newStyle) {
+        this.updateCompleteStylesheetInternal(name, newStyle, 'styleupdate');
+    }
+    updateCompleteStylesheetWithoutUndo(name, newStyle, noUndo = false) {
+        this.updateCompleteStylesheetInternal(name, newStyle, 'undo');
+    }
+    updateCompleteStylesheetInternal(name, newStyle, changeSource) {
         const ss = this._allStylesheets.get(name);
         if (ss.stylesheet.content != newStyle) {
             const old = ss.stylesheet.content;
@@ -93,7 +108,7 @@ export class CssToolsStylesheetService extends AbstractStylesheetService {
                 ss.stylesheet.designItem.content = ss.stylesheet.content;
             }
             else
-                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource });
         }
     }
 }

package/dist/elements/services/stylesheetService/CssTreeStylesheetService.d.ts

@@ -45,6 +45,8 @@ export declare class CssTreeStylesheetService extends AbstractStylesheetService
     insertDeclarationIntoRule(rule: IRuleWithAST, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IRuleWithAST, property: string): boolean;
     updateCompleteStylesheet(name: string, newStyle: string): void;
+    updateCompleteStylesheetWithoutUndo(name: string, newStyle: string, noUndo?: boolean): void;
+    private updateCompleteStylesheetInternal;
     private rulesFromAST;
     private astHasChildren;
     private buildSelectorString;

package/dist/elements/services/stylesheetService/CssTreeStylesheetService.js

@@ -113,6 +113,12 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
         return true;
     }
     updateCompleteStylesheet(name, newStyle) {
+        this.updateCompleteStylesheetInternal(name, newStyle, 'styleupdate');
+    }
+    updateCompleteStylesheetWithoutUndo(name, newStyle, noUndo = false) {
+        this.updateCompleteStylesheetInternal(name, newStyle, 'undo');
+    }
+    updateCompleteStylesheetInternal(name, newStyle, changeSource) {
         const ss = this._allStylesheets.get(name);
         if (ss.stylesheet.content != newStyle) {
             const old = ss.stylesheet.content;
@@ -121,7 +127,7 @@ export class CssTreeStylesheetService extends AbstractStylesheetService {
                 ss.stylesheet.designItem.content = ss.stylesheet.content;
             }
             else
-                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource: 'styleupdate' });
+                this.stylesheetChanged.emit({ name: ss.stylesheet.name, newStyle: ss.stylesheet.content, oldStyle: old, changeSource });
         }
     }
     /* Section covers the internal traversal creation of rules and declarations */

package/dist/elements/services/stylesheetService/IStylesheetService.d.ts

@@ -31,11 +31,12 @@ export interface IStylesheetService {
     insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
     removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
     updateCompleteStylesheet(name: string, newStyle: string): void;
+    updateCompleteStylesheetWithoutUndo(name: string, newStyle: string): void;
     stylesheetChanged: TypedEvent<{
         name: string;
         newStyle: string;
         oldStyle: string;
-        changeSource: 'extern' | 'styleupdate';
+        changeSource: 'extern' | 'styleupdate' | 'undo';
     }>;
     stylesheetsChanged: TypedEvent<void>;
 }

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

@@ -12,10 +12,10 @@ export class StylesheetChangedAction {
         return [];
     }
     undo() {
-        this.stylesheetService.updateCompleteStylesheet(this.name, this.oldValue);
+        this.stylesheetService.updateCompleteStylesheetWithoutUndo(this.name, this.oldValue);
     }
     do() {
-        this.stylesheetService.updateCompleteStylesheet(this.name, this.newValue);
+        this.stylesheetService.updateCompleteStylesheetWithoutUndo(this.name, this.newValue);
     }
     name;
     newValue;

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

@@ -544,7 +544,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             const instance = stylesheetService(this);
             this.instanceServiceContainer.register("stylesheetService", instance);
             this.instanceServiceContainer.stylesheetService.stylesheetChanged.on((ss) => {
-                if (ss.changeSource == 'extern') {
+                if (ss.changeSource != 'undo') {
                     const ssca = new StylesheetChangedAction(this.instanceServiceContainer.stylesheetService, ss.name, ss.newStyle, ss.oldStyle);
                     this.instanceServiceContainer.undoService.execute(ssca);
                 }

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

@@ -11,6 +11,7 @@ export declare abstract class AbstractExtensionBase {
     constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
     protected _removeAllOverlays(): void;
     protected _addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
+    protected _drawGroup(className?: string, group?: SVGGElement, overlayLayer?: OverlayLayer): SVGGElement;
     protected _drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
     protected _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
     protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;

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

@@ -24,6 +24,13 @@ export class AbstractExtensionBase {
         this.overlayLayerView.addOverlay(this.constructor.name, element, overlayLayer);
         this.overlays.push(element);
     }
+    _drawGroup(className, group, overlayLayer) {
+        const newGroup = this.overlayLayerView.drawGroup(this.constructor.name, className, group, overlayLayer);
+        if (!group) {
+            this.overlays.push(newGroup);
+        }
+        return newGroup;
+    }
     _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
         const newLine = this.overlayLayerView.drawLine(this.constructor.name, x1, y1, x2, y2, className, line, overlayLayer);
         if (!line) {

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

@@ -6,6 +6,7 @@ export declare class DisplayGridExtension extends AbstractExtension {
     private _cells;
     private _texts;
     private _gaps;
+    private _group;
     private gridInformation;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(event?: Event): void;

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

@@ -1,10 +1,12 @@
 import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from '../AbstractExtension.js';
 import { OverlayLayer } from "../OverlayLayer.js";
 export class DisplayGridExtension extends AbstractExtension {
     _cells;
     _texts;
     _gaps;
+    _group;
     gridInformation;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
@@ -16,17 +18,23 @@ export class DisplayGridExtension extends AbstractExtension {
     refresh(event) {
         this.gridInformation = CalculateGridInformation(this.extendedItem);
         let cells = this.gridInformation.cells;
+        this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
+        this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
+        this._group.style.transformOrigin = '0 0';
+        this._group.style.transformBox = 'fill-box';
         if (cells[0][0] && !isNaN(cells[0][0].height) && !isNaN(cells[0][0].width)) {
             if (this.gridInformation.cells.length != this._cells.length || this.gridInformation.cells[0].length != this._cells[0].length)
                 this._initSVGArrays();
             //draw gaps
             this.gridInformation.gaps.forEach((gap, i) => {
-                this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Normal);
+                this._gaps[i] = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-gap', this._gaps[i], OverlayLayer.Background);
+                this._group.appendChild(this._gaps[i]);
             });
             //draw cells
             cells.forEach((row, i) => {
                 row.forEach((cell, j) => {
                     this._cells[i][j] = this._drawRect(cell.x, cell.y, cell.width, cell.height, 'svg-grid', this._cells[i][j], OverlayLayer.Background);
+                    this._group.appendChild(this._cells[i][j]);
                     if (cell.name) {
                         this._texts[i][j] = this._drawText(cell.name, cell.x, cell.y, 'svg-grid-area', this._texts[i][j], OverlayLayer.Background);
                         this._texts[i][j].setAttribute("dominant-baseline", "hanging");

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

@@ -8,6 +8,7 @@ export declare class EditGridColumnRowSizesExtension extends AbstractExtension {
     private _resizers;
     private _initalPos;
     private _initialSizes;
+    private _group;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(event?: Event): void;
     refresh(event?: Event): void;

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

@@ -1,6 +1,7 @@
 import { EventNames } from "../../../../../enums/EventNames.js";
 import { convertCssUnit, convertCssUnitToPixel, getCssUnit } from "../../../../helper/CssUnitConverter.js";
 import { CalculateGridInformation } from "../../../../helper/GridHelper.js";
+import { getElementCombinedTransform } from "../../../../helper/TransformHelper.js";
 import { AbstractExtension } from '../AbstractExtension.js';
 import { OverlayLayer } from "../OverlayLayer.js";
 export class EditGridColumnRowSizesExtension extends AbstractExtension {
@@ -8,6 +9,7 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
     _resizers = [];
     _initalPos;
     _initialSizes;
+    _group;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -16,6 +18,10 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
     }
     refresh(event) {
         this.gridInformation = CalculateGridInformation(this.extendedItem);
+        this._group = this._drawGroup(null, this._group, OverlayLayer.Background);
+        this._group.style.transform = getElementCombinedTransform(this.extendedItem.element).toString();
+        this._group.style.transformOrigin = '0 0';
+        this._group.style.transformBox = 'fill-box';
         this.gridInformation.gaps.forEach((gap, i) => {
             if (gap.width < 3) {
                 gap.width = 3;
@@ -26,6 +32,7 @@ export class EditGridColumnRowSizesExtension extends AbstractExtension {
                 gap.y--;
             }
             let rect = this._drawRect(gap.x, gap.y, gap.width, gap.height, 'svg-grid-resizer-' + gap.type, this._resizers[i], OverlayLayer.Normal);
+            this._group.appendChild(rect);
             if (!this._resizers[i]) {
                 this._resizers[i] = rect;
                 rect.addEventListener(EventNames.PointerDown, event => this._pointerActionTypeResize(event, rect, gap));

package/dist/elements/widgets/designerView/overlayLayerView.d.ts

@@ -20,6 +20,7 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     removeAllOverlays(): void;
     createPoint(): DOMPointInit;
     elementFromPoint(x: number, y: number): Element;
+    drawGroup(overlaySource: string, className?: string, group?: SVGGElement, overlayLayer?: OverlayLayer): SVGGElement;
     drawLine(overlaySource: string, x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
     drawCircle(overlaySource: string, x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
     drawRect(overlaySource: string, x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;

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

@@ -101,6 +101,15 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         //@ts-ignore
         return this.shadowRoot.elementFromPoint(x, y);
     }
+    drawGroup(overlaySource, className, group, overlayLayer) {
+        if (!group) {
+            group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+            this.addOverlay(overlaySource, group, overlayLayer);
+        }
+        if (className)
+            group.setAttribute('class', className);
+        return group;
+    }
     drawLine(overlaySource, x1, y1, x2, y2, className, line, overlayLayer) {
         if (!line) {
             line = document.createElementNS("http://www.w3.org/2000/svg", "line");

package/dist/index.d.ts

@@ -128,7 +128,6 @@ export * from "./elements/services/undoService/transactionItems/DeleteAction.js"
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/StylesheetChangedAction.js";
-export * from "./elements/services/undoService/transactionItems/StylesheetStyleChangeAction.js";
 export * from "./elements/services/undoService/transactionItems/SetDesignItemsAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";

package/dist/index.js

@@ -88,7 +88,6 @@ export * from "./elements/services/undoService/transactionItems/DeleteAction.js"
 export * from "./elements/services/undoService/transactionItems/InsertAction.js";
 export * from "./elements/services/undoService/transactionItems/InsertChildAction.js";
 export * from "./elements/services/undoService/transactionItems/StylesheetChangedAction.js";
-export * from "./elements/services/undoService/transactionItems/StylesheetStyleChangeAction.js";
 export * from "./elements/services/undoService/transactionItems/SetDesignItemsAction.js";
 export * from "./elements/services/BaseServiceContainer.js";
 export * from "./elements/services/InstanceServiceContainer.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.243",
+  "version": "0.0.245",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,10 +13,10 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.11.0"
+    "@node-projects/base-custom-webcomponent": "^0.13.0"
   },
   "devDependencies": {
-    "@adobe/css-tools": "4.3.0-beta.1",
+    "@adobe/css-tools": "4.3.0-rc.1",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.1.5",
     "@papyrs/stylo": "^0.0.45",
@@ -24,17 +24,17 @@
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^20.3.3",
-    "ace-builds": "^1.23.1",
+    "@types/node": "^20.4.5",
+    "ace-builds": "^1.23.4",
     "codemirror": "^5.0.0",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.5.0",
+    "jest": "^29.6.2",
     "jquery": "^3.7.0",
     "jquery.fancytree": "^2.38.3",
     "mdn-data": "^2.0.32",
-    "monaco-editor": "^0.39.0",
+    "monaco-editor": "^0.40.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.1.6",
     "typescript-lit-html-plugin": "^0.9.0"