@node-projects/web-component-designer 0.1.127 → 0.1.129

package/dist/elements/documentContainer.js

@@ -4,6 +4,13 @@ import { DesignerView } from './widgets/designerView/designerView.js';
 import { SimpleSplitView } from './controls/SimpleSplitView.js';
 import { sleep } from "./helper/Helper.js";
 import { ExtensionType } from "./widgets/designerView/extensions/ExtensionType.js";
+var tabIndex;
+(function (tabIndex) {
+    tabIndex[tabIndex["designer"] = 0] = "designer";
+    tabIndex[tabIndex["code"] = 1] = "code";
+    tabIndex[tabIndex["split"] = 2] = "split";
+    tabIndex[tabIndex["preview"] = 3] = "preview";
+})(tabIndex || (tabIndex = {}));
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     designerView;
     codeView;
@@ -90,8 +97,8 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this._codeDiv.appendChild(this.codeView);
         this.codeView.onTextChanged.on(text => {
             if (!this._disableChangeNotificationDesigner) {
-                this._disableChangeNotificationEditor = true;
-                if (this._tabControl.selectedIndex === 2) {
+                if (this._tabControl.selectedIndex === tabIndex.code || this._tabControl.selectedIndex === tabIndex.split) {
+                    this._disableChangeNotificationEditor = true;
                     this._content = text;
                     this.refreshInSplitViewDebounced();
                 }
@@ -106,18 +113,22 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this._tabControl.appendChild(this.demoView);
         queueMicrotask(() => {
             this.shadowRoot.appendChild(div);
-            this._tabControl.selectedIndex = 0;
+            this._tabControl.selectedIndex = tabIndex.designer;
         });
     }
     async refreshInSplitView() {
-        await this.updateDesignerHtml();
+        try {
+            await this.updateDesignerHtml();
+        }
+        catch (err) {
+            console.error(err);
+        }
         this._disableChangeNotificationEditor = false;
     }
     designerSelectionChanged(e) {
-        if (this._tabControl.selectedIndex === 2) {
+        if (this._tabControl.selectedIndex === tabIndex.split) {
             let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
             if (primarySelection) {
-                //this._content = this.designerView.getHTML();
                 if (this.designerView.instanceServiceContainer.designItemDocumentPositionService) {
                     this._selectionPosition = this.designerView.instanceServiceContainer.designItemDocumentPositionService.getPosition(primarySelection);
                     if (this._selectionPosition)
@@ -131,7 +142,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this.onContentChanged.emit();
         if (!this._disableChangeNotificationEditor) {
             this._disableChangeNotificationDesigner = true;
-            if (this._tabControl.selectedIndex === 2) {
+            if (this._tabControl.selectedIndex === tabIndex.code || this._tabControl.selectedIndex === tabIndex.split) {
                 let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
                 this._content = this.designerView.getHTML();
                 this.codeView.update(this._content, this.designerView.instanceServiceContainer);
@@ -152,23 +163,23 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this.demoView.dispose();
     }
     executeCommand(command) {
-        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2)
+        if (this._tabControl.selectedIndex === tabIndex.designer || this._tabControl.selectedIndex === tabIndex.split)
             this.designerView.executeCommand(command);
-        else if (this._tabControl.selectedIndex === 1)
+        else if (this._tabControl.selectedIndex === tabIndex.code)
             this.codeView.executeCommand(command);
-        else if (this._tabControl.selectedIndex === 3)
+        else if (this._tabControl.selectedIndex === tabIndex.preview)
             this.demoView.executeCommand(command);
     }
     canExecuteCommand(command) {
-        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2) {
+        if (this._tabControl.selectedIndex === tabIndex.designer || this._tabControl.selectedIndex === tabIndex.split) {
             if (this.designerView?.canExecuteCommand)
                 return this.designerView.canExecuteCommand(command);
         }
-        else if (this._tabControl.selectedIndex === 1) {
+        else if (this._tabControl.selectedIndex === tabIndex.code) {
             if (this.codeView?.canExecuteCommand)
                 return this.codeView.canExecuteCommand(command);
         }
-        else if (this._tabControl.selectedIndex === 3) {
+        else if (this._tabControl.selectedIndex === tabIndex.preview) {
             if (this.demoView?.canExecuteCommand)
                 return this.demoView.canExecuteCommand(command);
         }
@@ -177,21 +188,21 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     set content(value) {
         this._content = value;
         if (this._tabControl) {
-            if (this._tabControl.selectedIndex === 0)
+            if (this._tabControl.selectedIndex === tabIndex.designer)
                 this.updateDesignerHtml();
-            else if (this._tabControl.selectedIndex === 1)
+            else if (this._tabControl.selectedIndex === tabIndex.code)
                 this.codeView.update(this._content, this.designerView.instanceServiceContainer);
-            else if (this._tabControl.selectedIndex === 2) {
+            else if (this._tabControl.selectedIndex === tabIndex.split) {
             }
-            else if (this._tabControl.selectedIndex === 3)
+            else if (this._tabControl.selectedIndex === tabIndex.preview)
                 this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString);
         }
     }
     get content() {
         if (this._tabControl) {
-            if (this._tabControl.selectedIndex === 0)
+            if (this._tabControl.selectedIndex === tabIndex.designer)
                 this._content = this.designerView.getHTML();
-            else if (this._tabControl.selectedIndex === 1)
+            else if (this._tabControl.selectedIndex === tabIndex.code)
                 this._content = this.codeView.getText();
             return this._content;
         }
@@ -213,9 +224,9 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                 this._designerDiv.appendChild(this.designerView);
                 this._codeDiv.appendChild(this.codeView);
             }
-            if (i.newIndex === 0 || i.newIndex === 2)
+            if (i.newIndex === tabIndex.designer || i.newIndex === tabIndex.split)
                 this.updateDesignerHtml();
-            if (i.newIndex === 1 || i.newIndex === 2) {
+            if (i.newIndex === tabIndex.code || i.newIndex === tabIndex.split) {
                 this.codeView.update(this._content, this.designerView.instanceServiceContainer);
                 if (this._selectionPosition) {
                     this.codeView.setSelection(this._selectionPosition);
@@ -229,11 +240,11 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
                     this.codeView.focusEditor();
                 }
             }
-            if (i.newIndex === 2) {
+            if (i.newIndex === tabIndex.split) {
                 this._splitDiv.appendChild(this.designerView);
                 this._splitDiv.appendChild(this.codeView);
             }
-            if (i.newIndex === 3) {
+            if (i.newIndex === tabIndex.preview) {
                 this.demoView.display(this._serviceContainer, this.designerView.instanceServiceContainer, this._content, this.additionalStyleString);
             }
             if (this._content) {
@@ -263,5 +274,4 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         return this.designerView.instanceServiceContainer;
     }
 }
-//@ts-ignore
 customElements.define("node-projects-document-container", DocumentContainer);

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -12,7 +12,7 @@ import { Lit2PropertiesService } from './propertiesService/services/Lit2Properti
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
 import { ElementDragTitleExtensionProvider } from '../widgets/designerView/extensions/ElementDragTitleExtensionProvider.js';
 import { TransformOriginExtensionProvider } from '../widgets/designerView/extensions/TransformOriginExtensionProvider.js';
-import { CanvasExtensionProvider } from '../widgets/designerView/extensions/CanvasExtensionProvider.js';
+import { MarginExtensionProvider } from '../widgets/designerView/extensions/MarginExtensionProvider.js';
 import { PositionExtensionProvider } from '../widgets/designerView/extensions/PositionExtensionProvider.js';
 import { HighlightElementExtensionProvider } from '../widgets/designerView/extensions/HighlightElementExtensionProvider.js';
 import { NamedTools } from '../widgets/designerView/tools/NamedTools.js';
@@ -91,6 +91,7 @@ import { BlockToolbarExtensionProvider } from '../widgets/designerView/extension
 import { ChildContextMenu } from '../widgets/designerView/extensions/contextMenu/ChildContextMenu.js';
 import { GridChildToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js';
 import { ToolbarExtensionsDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js';
+import { PaddingExtensionProvider } from '../widgets/designerView/extensions/PaddingExtensionProvider.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -127,7 +128,8 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
         new TransformOriginExtensionProvider(true),
-        new CanvasExtensionProvider(),
+        new MarginExtensionProvider(),
+        new PaddingExtensionProvider(),
         new PositionExtensionProvider(),
         new SvgElementExtensionProvider(),
         new ResizeExtensionProvider(true),

package/dist/elements/services/placementService/AbsolutePlacementService.d.ts

@@ -1,19 +1,19 @@
 import type { IPoint } from '../../../interfaces/IPoint.js';
 import type { IPlacementService } from './IPlacementService.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
-import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export declare class AbsolutePlacementService implements IPlacementService {
-    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     private calculateTrack;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
-    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
     enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
 }

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

@@ -4,7 +4,9 @@ import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem } from
 import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
 import { straightenLine } from '../../helper/PathDataPolyfill.js';
 export class AbsolutePlacementService {
-    serviceForContainer(container, containerStyle) {
+    serviceForContainer(container, containerStyle, item) {
+        if (item != null && item.getComputedStyle()?.position == 'absolute')
+            return true;
         if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
             containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
             return false;
@@ -30,20 +32,20 @@ export class AbsolutePlacementService {
     getElementOffset(container, designItem) {
         return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
     }
-    calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
+    calculateTrack(event, designerCanvas, startPoint, offsetInControl, newPoint, item) {
         let trackX = newPoint.x - startPoint.x;
         let trackY = newPoint.y - startPoint.y;
         if (!event.ctrlKey) {
-            if (placementView.alignOnGrid) {
+            if (designerCanvas.alignOnGrid) {
                 let p = getDesignItemCurrentPos(item, 'position');
-                p.x = p.x % placementView.gridSize;
-                p.y = p.y % placementView.gridSize;
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize - p.x;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize - p.y;
+                p.x = p.x % designerCanvas.gridSize;
+                p.y = p.y % designerCanvas.gridSize;
+                trackX = Math.round(trackX / designerCanvas.gridSize) * designerCanvas.gridSize - p.x;
+                trackY = Math.round(trackY / designerCanvas.gridSize) * designerCanvas.gridSize - p.y;
             }
-            else if (placementView.alignOnSnap) {
+            else if (designerCanvas.alignOnSnap) {
                 let rect = item.element.getBoundingClientRect();
-                let newPos = placementView.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / placementView.scaleFactor, height: rect.height / placementView.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                let newPos = designerCanvas.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / designerCanvas.scaleFactor, height: rect.height / designerCanvas.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
                 if (newPos.x !== null) {
                     trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
                 }
@@ -60,16 +62,16 @@ export class AbsolutePlacementService {
         }
         return { x: trackX, y: trackY };
     }
-    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    placePoint(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
         let trackX = newPoint.x;
         let trackY = newPoint.y;
         if (!event.ctrlKey) {
-            if (placementView.alignOnGrid) {
-                trackX = Math.round(trackX / placementView.gridSize) * placementView.gridSize;
-                trackY = Math.round(trackY / placementView.gridSize) * placementView.gridSize;
+            if (designerCanvas.alignOnGrid) {
+                trackX = Math.round(trackX / designerCanvas.gridSize) * designerCanvas.gridSize;
+                trackY = Math.round(trackY / designerCanvas.gridSize) * designerCanvas.gridSize;
             }
-            else if (placementView.alignOnSnap) {
-                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+            else if (designerCanvas.alignOnSnap) {
+                let newPos = designerCanvas.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
                 if (newPos.x !== null) {
                     trackX = newPos.x;
                 }
@@ -86,12 +88,12 @@ export class AbsolutePlacementService {
         }
         return { x: trackX, y: trackY };
     }
-    startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    startPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
     }
-    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    place(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
         //TODO: this should revert all undo actions while active
         //maybe a undo actions returns itself or an id so it could be changed?
-        let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
+        let track = this.calculateTrack(event, designerCanvas, startPoint, offsetInControl, newPoint, items[0]);
         if (event.shiftKey) {
             track = straightenLine({ x: 0, y: 0 }, track, true);
         }
@@ -137,7 +139,7 @@ export class AbsolutePlacementService {
     }
     leaveContainer(container, items) {
     }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    finishPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
         let filterdItems = filterChildPlaceItems(items);
         for (const designItem of filterdItems) {
             let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
@@ -147,7 +149,7 @@ export class AbsolutePlacementService {
             placeDesignItem(container, designItem, { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }, 'position');
         }
         for (const item of items) {
-            placementView.extensionManager.removeExtension(item, ExtensionType.Placement);
+            designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
         }
     }
 }

package/dist/elements/services/placementService/DefaultPlacementService.d.ts

@@ -2,6 +2,7 @@ import type { IPoint } from '../../../interfaces/IPoint.js';
 import type { IPlacementService } from './IPlacementService.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export declare class DefaultPlacementService implements IPlacementService {
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): boolean;
@@ -10,8 +11,8 @@ export declare class DefaultPlacementService implements IPlacementService {
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
     private calculateTrack;
     placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
-    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
     enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;

package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts

@@ -1,6 +1,6 @@
 import { IPoint } from '../../../interfaces/IPoint.js';
 import { IDesignItem } from '../../item/IDesignItem.js';
-import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 import { IPlacementService } from './IPlacementService.js';
 export declare class FlexBoxPlacementService implements IPlacementService {
     private _basePlacementService;
@@ -12,9 +12,9 @@ export declare class FlexBoxPlacementService implements IPlacementService {
     canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
-    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
 }

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

@@ -42,16 +42,16 @@ export class FlexBoxPlacementService {
     getElementOffset(container, designItem) {
         return container.element.getBoundingClientRect();
     }
-    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    placePoint(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
         const defaultPlacementService = container.serviceContainer.getLastServiceWhere('containerService', x => x instanceof DefaultPlacementService);
-        return defaultPlacementService.placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items);
+        return defaultPlacementService.placePoint(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items);
     }
-    startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    startPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
     }
-    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        const pos = placementView.getNormalizedEventCoordinates(event);
+    place(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
+        const pos = designerCanvas.getNormalizedEventCoordinates(event);
         const style = getComputedStyle(container.element);
-        const childrenWithPos = Array.from(container.children()).filter(x => !x.isEmptyTextNode).map(x => [x, placementView.getNormalizedElementCoordinates(x.element)]);
+        const childrenWithPos = Array.from(container.children()).filter(x => !x.isEmptyTextNode).map(x => [x, designerCanvas.getNormalizedElementCoordinates(x.element)]);
         if (style.flexDirection == 'row' || style.flexDirection == 'row-reverse') {
             childrenWithPos.sort(x => x[1].x);
             let elBefore = null;
@@ -138,9 +138,9 @@ export class FlexBoxPlacementService {
                 container.instanceServiceContainer.selectionService.setSelectedElements(sel);
             }
         }
-        placementView.extensionManager.refreshAllExtensions([container]);
+        designerCanvas.extensionManager.refreshAllExtensions([container]);
     }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    finishPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
     }
     moveElements(designItems, position, absolute) {
     }

package/dist/elements/services/placementService/GridPlacementService.d.ts

@@ -1,7 +1,7 @@
 import type { IPoint } from '../../../interfaces/IPoint.js';
 import type { IPlacementService } from './IPlacementService.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
-import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export declare class GridPlacementService implements IPlacementService {
     private _basePlacementService;
     constructor(basePlacementService: IPlacementService);
@@ -12,9 +12,9 @@ export declare class GridPlacementService implements IPlacementService {
     canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
-    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
     moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
 }

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

@@ -46,15 +46,15 @@ export class GridPlacementService {
     getElementOffset(container, designItem) {
         return container.element.getBoundingClientRect();
     }
-    placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    placePoint(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
         const defaultPlacementService = container.serviceContainer.getLastServiceWhere('containerService', x => x instanceof DefaultPlacementService);
-        return defaultPlacementService.placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items);
+        return defaultPlacementService.placePoint(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items);
     }
-    startPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    startPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
     }
-    place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    place(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
         const gridInformation = calculateGridInformation(container);
-        const pos = placementView.getNormalizedEventCoordinates(event);
+        const pos = designerCanvas.getNormalizedEventCoordinates(event);
         //pos.x -= offsetInControl.x;
         //pos.y -= offsetInControl.y;
         let row = 0;
@@ -79,11 +79,11 @@ export class GridPlacementService {
             }
             row++;
         }
-        placementView.extensionManager.refreshAllExtensions([container]);
+        designerCanvas.extensionManager.refreshAllExtensions([container]);
     }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    finishPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
         const gridInformation = calculateGridInformation(container);
-        const pos = placementView.getNormalizedEventCoordinates(event);
+        const pos = designerCanvas.getNormalizedEventCoordinates(event);
         //pos.x -= offsetInControl.x;
         //pos.y -= offsetInControl.y;
         let row = 0;
@@ -113,7 +113,7 @@ export class GridPlacementService {
             }
             row++;
         }
-        placementView.extensionManager.refreshAllExtensions([container]);
+        designerCanvas.extensionManager.refreshAllExtensions([container]);
     }
     moveElements(designItems, position, absolute) {
     }

package/dist/elements/services/placementService/IPlacementService.d.ts

@@ -1,7 +1,7 @@
 import { IService } from '../IService.js';
 import { IDesignItem } from '../../item/IDesignItem.js';
-import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 import { IPoint } from '../../../interfaces/IPoint.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
 export interface IPlacementService extends IService {
     serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, item?: IDesignItem): boolean;
     isEnterableContainer(container: IDesignItem): boolean;
@@ -10,9 +10,9 @@ export interface IPlacementService extends IService {
     enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): any;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): any;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
-    placePoint(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
-    startPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
-    place(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
+    placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
+    place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
+    finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): any;
     moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): any;
 }

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

@@ -164,10 +164,12 @@ export class AbstractPropertiesService {
         if (!bindings) {
             const services = designItem.serviceContainer.getServices('bindingService');
             bindings = [];
-            for (const s of services) {
-                const bs = s.getBindings(designItem);
-                if (bs && bs.length > 0) {
-                    bindings.push(...bs);
+            if (services) {
+                for (const s of services) {
+                    const bs = s.getBindings(designItem);
+                    if (bs && bs.length > 0) {
+                        bindings.push(...bs);
+                    }
                 }
             }
             AbstractPropertiesService._bindingsCache.set(designItem, bindings);

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

@@ -47,7 +47,6 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     getDesignSurfaceDimensions(): ISize;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
-    elementFromPoint(x: number, y: number): Element;
     elementsFromPoint(x: number, y: number): Element[];
     showHoverExtension(element: Element, event: Event): any;
     setDesignItems(designItems: IDesignItem[]): any;

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

@@ -124,7 +124,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
         realHeight: number;
     };
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
-    elementFromPoint(x: number, y: number): Element;
     elementsFromPoint(x: number, y: number): Element[];
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     showHoverExtension(element: Element, event: Event): void;

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

@@ -854,6 +854,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         event.preventDefault();
         if (event.target === this.overlayLayer)
             return;
+        if (event.altKey)
+            return;
         if (this.serviceContainer.globalContext.tool == null || this.serviceContainer.globalContext.tool === this.serviceContainer.designerTools.get(NamedTools.Pointer)) {
             this.extensionManager.removeExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.PrimarySelectionRefreshed);
             this.extensionManager.applyExtension(this.instanceServiceContainer.selectionService.primarySelection, ExtensionType.Doubleclick, event);
@@ -1003,12 +1005,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         const normEl = this.getNormalizedElementCoordinates(element);
         return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
     }
-    //TODO: remove
-    elementFromPoint(x, y) {
-        let elements = this._canvasShadowRoot.elementsFromPoint(x, y);
-        let element = elements[0];
-        return element;
-    }
     elementsFromPoint(x, y) {
         let retVal = [];
         let elements = this._canvasShadowRoot.elementsFromPoint(x, y);

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

@@ -0,0 +1,10 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+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;
+    dispose(): void;
+}

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

@@ -0,0 +1,32 @@
+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();
+    }
+    refresh() {
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        if (computedStyle.margin !== '0px') {
+            const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+            const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+            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);
+                }
+            }
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class MarginExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+    readonly style: CSSStyleSheet;
+}

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

@@ -0,0 +1,16 @@
+import { MarginExtension } from './MarginExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+import { NodeType } from '../../../item/NodeType.js';
+export class MarginExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.nodeType == NodeType.Element)
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new MarginExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-margin { fill: #ff944766; }
+  `;
+}

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

@@ -0,0 +1,10 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+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;
+    dispose(): void;
+}

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

@@ -0,0 +1,36 @@
+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();
+    }
+    refresh() {
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        if (computedStyle.margin !== '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', ''));
+            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);
+                }
+            }
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,10 @@
+import { IDesignerExtensionProvider } from './IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+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;
+}

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

@@ -0,0 +1,16 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+import { NodeType } from '../../../item/NodeType.js';
+import { PaddingExtension } from './PaddingExtension.js';
+export class PaddingExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.nodeType == NodeType.Element)
+            return true;
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new PaddingExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-padding { fill: #32cd3266; }
+  `;
+}

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

@@ -241,40 +241,46 @@ export class ResizeExtension extends AbstractExtension {
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
                 let cg = this.extendedItem.openGroup((this.resizeAllSelected && this.designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1) ? "Resize Elements" : "Resize <" + this.extendedItem.name + ">");
-                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);
-                if (this.resizeAllSelected) {
-                    for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                        if (designItem !== this.extendedItem) {
-                            designItem.setStyle('width', designItem.element.style.width);
-                            designItem.setStyle('height', designItem.element.style.height);
-                            designItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'left'))) + 'px');
-                            designItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'top'))) + 'px');
+                try {
+                    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);
+                    if (this.resizeAllSelected) {
+                        for (const designItem of this.designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                            if (designItem !== this.extendedItem) {
+                                designItem.setStyle('width', designItem.element.style.width);
+                                designItem.setStyle('height', designItem.element.style.height);
+                                designItem.setStyle('left', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'left'))) + 'px');
+                                designItem.setStyle('top', roundValue(this.extendedItem, parseFloat(normalizeToAbsolutePosition(designItem.element, 'top'))) + 'px');
+                            }
                         }
                     }
+                    cg.commit();
+                }
+                catch (err) {
+                    cg.abort();
+                    console.error(err);
                 }
-                cg.commit();
                 this._initialSizes = null;
                 this._initialPoint = null;
                 break;

package/dist/elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js

@@ -5,7 +5,7 @@ export class BlockToolbarExtensionProvider {
     shouldExtend(extensionManager, designerCanvas, designItem) {
         if (designItem.nodeType === NodeType.Element) {
             const d = getComputedStyle(designItem.element).display;
-            if (d === 'block' || d === 'inline')
+            if (d === 'block' || d === 'inline' || d === 'inline-block')
                 return designerCanvas.instanceServiceContainer.designContext.extensionOptions[basicStackedToolbarExtensionOverlayOptionName] !== false;
         }
         return false;

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

@@ -25,7 +25,6 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     removeAllNodesWithClass(className: string): void;
     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;

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

@@ -150,10 +150,6 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         //@ts-ignore
         return this._svg.createSVGPoint();
     }
-    elementFromPoint(x, y) {
-        //@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");

package/dist/index.d.ts

@@ -116,6 +116,7 @@ export * from "./elements/services/propertiesService/services/CssCurrentProperti
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
 export * from "./elements/services/propertiesService/services/ListPropertiesService.js";
 export * from "./elements/services/propertiesService/services/LitElementPropertiesService.js";
+export * from "./elements/services/propertiesService/services/Lit2PropertiesService.js";
 export * from "./elements/services/propertiesService/services/MathMLElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/SVGElementsPropertiesService.js";
@@ -203,8 +204,10 @@ export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtension.js";
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/CanvasExtension.js";
-export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/MarginExtension.js";
+export * from "./elements/widgets/designerView/extensions/MarginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/PaddingExtension.js";
+export * from "./elements/widgets/designerView/extensions/PaddingExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
@@ -217,6 +220,8 @@ export * from "./elements/widgets/designerView/extensions/InvisibleElementExtens
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/MultipleSelectionRectExtension.js";
+export * from "./elements/widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/SvgElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
@@ -233,6 +238,8 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/PlacementExtension.js";
+export * from "./elements/widgets/designerView/extensions/PlacementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtension.js";
 export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js";
@@ -255,6 +262,7 @@ export * from "./elements/widgets/designerView/extensions/buttons/AbstractDesign
 export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js";
 export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js";
 export type { IDesignViewConfigButtonsProvider } from './elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.js';
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";

package/dist/index.js

@@ -75,6 +75,7 @@ export * from "./elements/services/propertiesService/services/CssCurrentProperti
 export * from "./elements/services/propertiesService/services/CssPropertiesService.js";
 export * from "./elements/services/propertiesService/services/ListPropertiesService.js";
 export * from "./elements/services/propertiesService/services/LitElementPropertiesService.js";
+export * from "./elements/services/propertiesService/services/Lit2PropertiesService.js";
 export * from "./elements/services/propertiesService/services/MathMLElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/NativeElementsPropertiesService.js";
 export * from "./elements/services/propertiesService/services/SVGElementsPropertiesService.js";
@@ -144,8 +145,10 @@ export * from "./elements/widgets/designerView/extensions/ExtensionType.js";
 export * from "./elements/widgets/designerView/extensions/AbstractExtension.js";
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtension.js";
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js";
-export * from "./elements/widgets/designerView/extensions/CanvasExtension.js";
-export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/MarginExtension.js";
+export * from "./elements/widgets/designerView/extensions/MarginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/PaddingExtension.js";
+export * from "./elements/widgets/designerView/extensions/PaddingExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
@@ -158,6 +161,8 @@ export * from "./elements/widgets/designerView/extensions/InvisibleElementExtens
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/MultipleSelectionRectExtension.js";
+export * from "./elements/widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/SvgElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
@@ -174,6 +179,8 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/PlacementExtension.js";
+export * from "./elements/widgets/designerView/extensions/PlacementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtension.js";
 export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js";
@@ -196,6 +203,7 @@ export * from "./elements/widgets/designerView/extensions/buttons/AbstractDesign
 export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js";
 export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js";
+export * from "./elements/widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ChildContextMenu.js";

package/package.json

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