@node-projects/web-component-designer 0.1.169 → 0.1.170

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

@@ -17,6 +17,6 @@ export declare function getElementSize(element: HTMLElement): {
     width: number;
     height: number;
 };
-export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | null, designerCanvas: IDesignerCanvas, cache?: Record<string | symbol, any>): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
+export declare function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: HTMLElement, untransformedCornerPointsOffset: IPoint | [IPoint, IPoint, IPoint, IPoint] | null, designerCanvas: IDesignerCanvas, cache?: Record<string | symbol, any>): [DOMPoint, DOMPoint, DOMPoint, DOMPoint];
 export declare function extractTranslationFromDOMMatrix(matrix: DOMMatrix): DOMPoint;
 export declare function extractRotationAngleFromDOMMatrix(matrix: DOMMatrix): number;

package/dist/elements/helper/TransformHelper.js

@@ -193,12 +193,26 @@ export function getElementSize(element) {
     }
     return { width, height };
 }
+const nullOffsetArray = [{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }];
 export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, untransformedCornerPointsOffset, designerCanvas, cache) {
     const topleft = 0;
     const topright = 1;
     const bottomleft = 2;
     const bottomright = 3;
-    const intUntransformedCornerPointsOffset = untransformedCornerPointsOffset ? { x: untransformedCornerPointsOffset.x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset.y / designerCanvas.scaleFactor } : { x: 0, y: 0 };
+    let intUntransformedCornerPointsOffset = nullOffsetArray;
+    if (untransformedCornerPointsOffset != null) {
+        if (Array.isArray(untransformedCornerPointsOffset)) {
+            const v0 = { x: untransformedCornerPointsOffset[0].x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset[0].y / designerCanvas.scaleFactor };
+            const v1 = { x: untransformedCornerPointsOffset[1].x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset[1].y / designerCanvas.scaleFactor };
+            const v2 = { x: untransformedCornerPointsOffset[2].x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset[2].y / designerCanvas.scaleFactor };
+            const v3 = { x: untransformedCornerPointsOffset[3].x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset[3].y / designerCanvas.scaleFactor };
+            intUntransformedCornerPointsOffset = [v0, v1, v2, v3];
+        }
+        else {
+            const v = { x: untransformedCornerPointsOffset.x / designerCanvas.scaleFactor, y: untransformedCornerPointsOffset.y / designerCanvas.scaleFactor };
+            intUntransformedCornerPointsOffset = [v, v, v, v];
+        }
+    }
     const p0Offsets = getElementsWindowOffsetWithoutSelfAndParentTransformations(element, designerCanvas.zoomFactor, cache);
     const p0OffsetsRelatedToCanvas = DOMPoint.fromPoint({
         x: p0Offsets.offsetLeft - designerCanvas.containerBoundingRect.left,
@@ -207,20 +221,20 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element, u
     let { width, height } = getElementSize(element);
     const elementWithoutTransformCornerDOMPoints = [];
     elementWithoutTransformCornerDOMPoints[topleft] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset.x,
-        y: p0OffsetsRelatedToCanvas.y - intUntransformedCornerPointsOffset.y
+        x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset[0].x,
+        y: p0OffsetsRelatedToCanvas.y - intUntransformedCornerPointsOffset[0].y
     });
     elementWithoutTransformCornerDOMPoints[topright] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
-        y: p0OffsetsRelatedToCanvas.y - intUntransformedCornerPointsOffset.y
+        x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset[1].x,
+        y: p0OffsetsRelatedToCanvas.y - intUntransformedCornerPointsOffset[1].y
     });
     elementWithoutTransformCornerDOMPoints[bottomleft] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset.x,
-        y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
+        x: p0OffsetsRelatedToCanvas.x - intUntransformedCornerPointsOffset[2].x,
+        y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset[2].y
     });
     elementWithoutTransformCornerDOMPoints[bottomright] = DOMPoint.fromPoint({
-        x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset.x,
-        y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset.y
+        x: p0OffsetsRelatedToCanvas.x + width + intUntransformedCornerPointsOffset[3].x,
+        y: p0OffsetsRelatedToCanvas.y + height + intUntransformedCornerPointsOffset[3].y
     });
     const toSplit = getComputedStyle(element).transformOrigin.split(' ');
     const tfX = parseFloat(toSplit[0]);

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

@@ -24,7 +24,7 @@ export declare class DesignItem implements IDesignItem {
     nodeReplaced: TypedEvent<void>;
     get window(): Window & typeof globalThis;
     get document(): Document;
-    get usableContainer(): ShadowRoot | Document | Element;
+    get usableContainer(): Element | ShadowRoot | Document;
     clone(): Promise<IDesignItem>;
     allMatching(selectors: string): Generator<IDesignItem, void, undefined>;
     replaceNode(newNode: Node): void;

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

@@ -44,5 +44,6 @@ export declare abstract class AbstractStylesheetService implements IStylesheetSe
         changeSource: 'extern' | 'styleupdate' | 'undo';
     }>;
     stylesheetsChanged: TypedEvent<void>;
+    static patchStylesheetSelectorForDesigner(text: string): string;
     protected elementMatchesASelector(designItem: IDesignItem, selectors: string[]): boolean;
 }

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

@@ -1,5 +1,5 @@
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js';
+import { forceActiveAttributeName, forceFocusAttributeName, forceFocusVisibleAttributeName, forceFocusWithinAttributeName, forceHoverAttributeName, forceVisitedAttributeName } from "../../item/DesignItem.js";
 export class AbstractStylesheetService {
     _stylesheets = new Map();
     _documentStylesheets = new Map();
@@ -100,14 +100,22 @@ export class AbstractStylesheetService {
     }
     stylesheetChanged = new TypedEvent();
     stylesheetsChanged = new TypedEvent();
+    static patchStylesheetSelectorForDesigner(text) {
+        return text.replaceAll(':hover', '[' + forceHoverAttributeName + ']')
+            .replaceAll(':active', '[' + forceActiveAttributeName + ']')
+            .replaceAll(':visited', '[' + forceVisitedAttributeName + ']')
+            .replaceAll(':focus', '[' + forceFocusAttributeName + ']')
+            .replaceAll(':focus-within', '[' + forceFocusWithinAttributeName + ']')
+            .replaceAll(':focus-visible', '[' + forceFocusVisibleAttributeName + ']');
+    }
     elementMatchesASelector(designItem, selectors) {
         if (designItem == null)
             return true;
         for (let selector of selectors) {
-            if (selector == ':host') {
+            /*if (selector == ':host') {
                 selector = DesignerCanvas.cssprefixConstant;
-            }
-            if (designItem.element.matches(selector))
+            }*/
+            if (designItem.element.matches(AbstractStylesheetService.patchStylesheetSelectorForDesigner(selector)))
                 return true;
         }
         return false;

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

@@ -58,7 +58,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _outercanvas2;
     private _lastHoverDesignItem;
     private _firstConnect;
-    static cssprefixConstant: string;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     extensionManager: IExtensionManager;
@@ -131,7 +130,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private transformPoint;
     elementsFromPoint(x: number, y: number): Element[];
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
-    _patchStylesheetForDesigner(text: string): string;
     private _hoverElement;
     showHoverExtension(element: Element, event: Event): void;
     private _onWheel;

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

@@ -1,6 +1,6 @@
 import { EventNames } from '../../../enums/EventNames.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { DesignItem, forceActiveAttributeName, forceFocusAttributeName, forceFocusVisibleAttributeName, forceFocusWithinAttributeName, forceHoverAttributeName, forceVisitedAttributeName } from '../../item/DesignItem.js';
+import { DesignItem, forceHoverAttributeName } from '../../item/DesignItem.js';
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameBindingObject } from '../../../Constants.js';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction.js';
@@ -22,6 +22,7 @@ import { SetDesignItemsAction } from '../../services/undoService/transactionItem
 import { filterChildPlaceItems } from '../../helper/LayoutHelper.js';
 import { TouchGestureHelper } from '../../helper/TouchGestureHelper.js';
 import { stylesheetFromString } from '../../helper/StylesheetHelper.js';
+import { AbstractStylesheetService } from '../../services/stylesheetService/AbstractStylesheetService.js';
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -111,7 +112,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _outercanvas2;
     _lastHoverDesignItem;
     _firstConnect;
-    static cssprefixConstant = '#node-projects-designer-canvas-canvas ';
+    //public static cssprefixConstant = '#node-projects-designer-canvas-canvas ';
     static style = css `
     :host {
       display: block;
@@ -375,7 +376,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             if (this.instanceServiceContainer.stylesheetService) {
                 styles.push(...this.instanceServiceContainer.stylesheetService
                     .getStylesheets()
-                    .map(x => stylesheetFromString(this._window, this._patchStylesheetForDesigner(x.content))));
+                    .map(x => stylesheetFromString(this._window, AbstractStylesheetService.patchStylesheetSelectorForDesigner(x.content))));
             }
             if (this._useIframe) {
                 this._iframe.contentWindow.document.adoptedStyleSheets = styles;
@@ -1116,14 +1117,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         return currentElement;
     }
-    _patchStylesheetForDesigner(text) {
-        return text.replaceAll(':hover', '[' + forceHoverAttributeName + ']')
-            .replaceAll(':active', '[' + forceActiveAttributeName + ']')
-            .replaceAll(':visited', '[' + forceVisitedAttributeName + ']')
-            .replaceAll(':focus', '[' + forceFocusAttributeName + ']')
-            .replaceAll(':focus-within', '[' + forceFocusWithinAttributeName + ']')
-            .replaceAll(':focus-visible', '[' + forceFocusVisibleAttributeName + ']');
-    }
     _hoverElement;
     showHoverExtension(element, event) {
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(element, element, this.serviceContainer, this.instanceServiceContainer);

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

@@ -17,6 +17,7 @@ export declare abstract class AbstractExtensionBase {
     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;
+    protected _drawComplexRect(points: [IPoint, IPoint, IPoint, IPoint], className?: string, rect?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
     protected _drawPath(data: string, className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
     protected _drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
     protected _drawHTML(html: string | HTMLElement, x: number, y: number, w: number, h: number, className?: string, htmlObj?: SVGForeignObjectElement, overlayLayer?: OverlayLayer): SVGForeignObjectElement;

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

@@ -66,6 +66,14 @@ export class AbstractExtensionBase {
         }
         return newRect;
     }
+    _drawComplexRect(points, className, rect, overlayLayer) {
+        const d = "M" + points.map(x => x.x + ',' + x.y).join(' ') + 'Z';
+        const newRect = this.overlayLayerView.drawPath(this.constructor.name, d, className, rect, overlayLayer);
+        if (!rect) {
+            this.overlays.push(newRect);
+        }
+        return newRect;
+    }
     _drawPath(data, className, path, overlayLayer) {
         const newPath = this.overlayLayerView.drawPath(this.constructor.name, data, className, path, overlayLayer);
         if (!path) {

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

@@ -4,7 +4,8 @@ import { AbstractExtension } from './AbstractExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare class MarginExtension extends AbstractExtension {
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
+    private _path;
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
     dispose(): void;
 }

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

@@ -1,14 +1,15 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
 import { AbstractExtension } from './AbstractExtension.js';
 import { OverlayLayer } from './OverlayLayer.js';
 export class MarginExtension extends AbstractExtension {
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
-    extend() {
-        this.refresh();
+    _path;
+    extend(cache, event) {
+        this.refresh(cache, event);
     }
-    refresh() {
-        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+    refresh(cache, event) {
         const computedStyle = getComputedStyle(this.extendedItem.element);
         if (computedStyle.margin !== '0px') {
             const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
@@ -16,12 +17,14 @@ export class MarginExtension extends AbstractExtension {
             const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
             const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
             if (!isNaN(left) && !isNaN(top) && !isNaN(right) && !isNaN(bottom)) {
-                if (this._valuesHaveChanges(left, top, right, bottom, itemRect.x, itemRect.y, itemRect.width, itemRect.height)) {
-                    this._removeAllOverlays();
-                    this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin', null, OverlayLayer.Background);
-                    this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin', null, OverlayLayer.Background);
-                    this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin', null, OverlayLayer.Background);
-                    this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin', null, OverlayLayer.Background);
+                const p = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
+                if (!isNaN(p[0].x)) {
+                    if (this._valuesHaveChanges(left, top, right, bottom, p[0].x, p[0].y, p[1].x, p[1].y, p[2].x, p[2].y, p[3].x, p[3].y)) {
+                        const p2 = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, [{ x: left, y: top }, { x: right, y: top }, { x: left, y: bottom }, { x: right, y: bottom }], this.designerCanvas, cache);
+                        let d = "M" + [p[0], p[1], p[3], p[2]].map(x => x.x + ',' + x.y).join(' ') + 'Z ';
+                        d += "M" + [p2[0], p2[1], p2[3], p2[2]].map(x => x.x + ',' + x.y).join(' ') + 'Z ';
+                        this._path = this._drawPath(d, 'svg-margin', this._path, OverlayLayer.Background);
+                    }
                 }
             }
         }

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

@@ -11,6 +11,6 @@ export class MarginExtensionProvider {
         return new MarginExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-margin { fill: #ff944766; }
+    .svg-margin { fill: #ff944766; fill-rule: evenodd; }
   `;
 }

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

@@ -17,16 +17,18 @@ export class MultipleSelectionRectExtension extends AbstractExtension {
     }
     refresh() {
         let selection = this._designerView.instanceServiceContainer.selectionService.selectedElements;
-        selection = filterChildPlaceItems(selection);
-        let rect = calculateOuterRect(selection, this._designerView);
-        this._line1 = this._drawLine(rect.x, rect.y, rect.x + rect.width, rect.y, 'svg-multiple-rect-selection', this._line1, OverlayLayer.Background);
-        this._line2 = this._drawLine(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + rect.height, 'svg-multiple-rect-selection', this._line2, OverlayLayer.Background);
-        this._line3 = this._drawLine(rect.x + rect.width, rect.y + rect.height, rect.x, rect.y + rect.height, 'svg-multiple-rect-selection', this._line3, OverlayLayer.Background);
-        this._line4 = this._drawLine(rect.x, rect.y + rect.height, rect.x, rect.y, 'svg-multiple-rect-selection', this._line4, OverlayLayer.Background);
-        this._line1.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line2.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line3.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
-        this._line4.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        if (selection.length > 1) {
+            selection = filterChildPlaceItems(selection);
+            let rect = calculateOuterRect(selection, this._designerView);
+            this._line1 = this._drawLine(rect.x, rect.y, rect.x + rect.width, rect.y, 'svg-multiple-rect-selection', this._line1, OverlayLayer.Background);
+            this._line2 = this._drawLine(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + rect.height, 'svg-multiple-rect-selection', this._line2, OverlayLayer.Background);
+            this._line3 = this._drawLine(rect.x + rect.width, rect.y + rect.height, rect.x, rect.y + rect.height, 'svg-multiple-rect-selection', this._line3, OverlayLayer.Background);
+            this._line4 = this._drawLine(rect.x, rect.y + rect.height, rect.x, rect.y, 'svg-multiple-rect-selection', this._line4, OverlayLayer.Background);
+            this._line1.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+            this._line2.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+            this._line3.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+            this._line4.style.strokeWidth = (2 / this.designerCanvas.zoomFactor).toString();
+        }
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -4,7 +4,8 @@ import { AbstractExtension } from './AbstractExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 export declare class PaddingExtension extends AbstractExtension {
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    refresh(): void;
+    private _path;
+    extend(cache: Record<string | symbol, any>, event?: Event): void;
+    refresh(cache: Record<string | symbol, any>, event?: Event): void;
     dispose(): void;
 }

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

@@ -1,31 +1,34 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
 import { AbstractExtension } from './AbstractExtension.js';
 import { OverlayLayer } from './OverlayLayer.js';
 export class PaddingExtension extends AbstractExtension {
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
-    extend() {
-        this.refresh();
+    _path;
+    extend(cache, event) {
+        this.refresh(cache, event);
     }
-    refresh() {
-        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+    refresh(cache, event) {
         const computedStyle = getComputedStyle(this.extendedItem.element);
         if (computedStyle.padding !== '0px') {
-            const left = Number.parseFloat(computedStyle.paddingLeft.replace('px', ''));
-            const top = Number.parseFloat(computedStyle.paddingTop.replace('px', ''));
-            const right = Number.parseFloat(computedStyle.paddingRight.replace('px', ''));
-            const bottom = Number.parseFloat(computedStyle.paddingBottom.replace('px', ''));
-            const bleft = Number.parseFloat(computedStyle.borderLeftWidth.replace('px', ''));
-            const btop = Number.parseFloat(computedStyle.borderTopWidth.replace('px', ''));
-            const bright = Number.parseFloat(computedStyle.borderRightWidth.replace('px', ''));
-            const bbottom = Number.parseFloat(computedStyle.borderBottomWidth.replace('px', ''));
+            let left = Number.parseFloat(computedStyle.paddingLeft.replace('px', ''));
+            let top = Number.parseFloat(computedStyle.paddingTop.replace('px', ''));
+            let right = Number.parseFloat(computedStyle.paddingRight.replace('px', ''));
+            let bottom = Number.parseFloat(computedStyle.paddingBottom.replace('px', ''));
+            left += Number.parseFloat(computedStyle.borderLeftWidth.replace('px', ''));
+            top += Number.parseFloat(computedStyle.borderTopWidth.replace('px', ''));
+            right += Number.parseFloat(computedStyle.borderRightWidth.replace('px', ''));
+            bottom += Number.parseFloat(computedStyle.borderBottomWidth.replace('px', ''));
             if (!isNaN(left) && !isNaN(top) && !isNaN(right) && !isNaN(bottom)) {
-                if (this._valuesHaveChanges(left, top, right, bottom, bleft, btop, bright, bbottom, itemRect.x, itemRect.y, itemRect.width, itemRect.height)) {
-                    this._removeAllOverlays();
-                    this._drawRect(itemRect.x + bleft + left, itemRect.y + btop, itemRect.width - left - right - bleft - bright, top, 'svg-padding', null, OverlayLayer.Background);
-                    this._drawRect(itemRect.x + bleft, itemRect.y + btop, left, itemRect.height - btop - bbottom, 'svg-padding', null, OverlayLayer.Background);
-                    this._drawRect(itemRect.x + bleft + left, itemRect.y + itemRect.height - bottom - bbottom, itemRect.width - left - right - bleft - bright, bottom, 'svg-padding', null, OverlayLayer.Background);
-                    this._drawRect(itemRect.x + itemRect.width - right - bright, itemRect.y + btop, right, itemRect.height - btop - bbottom, 'svg-padding', null, OverlayLayer.Background);
+                const p = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas, cache);
+                if (!isNaN(p[0].x)) {
+                    if (this._valuesHaveChanges(left, top, right, bottom, p[0].x, p[0].y, p[1].x, p[1].y, p[2].x, p[2].y, p[3].x, p[3].y)) {
+                        const p2 = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, [{ x: -left, y: -top }, { x: -right, y: -top }, { x: -left, y: -bottom }, { x: -right, y: -bottom }], this.designerCanvas, cache);
+                        let d = "M" + [p[0], p[1], p[3], p[2]].map(x => x.x + ',' + x.y).join(' ') + 'Z ';
+                        d += "M" + [p2[0], p2[1], p2[3], p2[2]].map(x => x.x + ',' + x.y).join(' ') + 'Z ';
+                        this._path = this._drawPath(d, 'svg-padding', this._path, OverlayLayer.Background);
+                    }
                 }
             }
         }

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.169",
+  "version": "0.1.170",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",
@@ -9,6 +9,8 @@
   "scripts": {
     "tsc": "tsc",
     "build": "tsc",
+    "link": "npm link",
+    "watch": "pm2 start tsc --watch",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {