@node-projects/web-component-designer 0.1.126 → 0.1.128

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

@@ -90,6 +90,7 @@ import { FlexToolbarExtensionProvider } from '../widgets/designerView/extensions
 import { BlockToolbarExtensionProvider } from '../widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js';
 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';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -187,7 +188,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );
-    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons(), new ButtonSeperatorProvider(30), new RoundPixelsDesignViewConfigButton());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new ToolbarExtensionsDesignViewConfigButtons(), new ButtonSeperatorProvider(30), new RoundPixelsDesignViewConfigButton());
     serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(22), new TextToolButtonProvider(), new SeperatorToolProvider(22), new TransformToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new ChildContextMenu('edit', new CopyPasteContextMenu()),

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/selectionService/ISelectionChangedEvent copy.d.ts

@@ -0,0 +1,6 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+export interface ISelectionChangedEvent {
+    oldSelectedElements: IDesignItem[];
+    selectedElements: IDesignItem[];
+    event?: Event;
+}

package/dist/elements/services/selectionService/ISelectionChangedEvent copy.js

@@ -0,0 +1 @@
+export {};

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/AbstractToolbarExtension.d.ts

@@ -0,0 +1,9 @@
+import { AbstractExtension } from "./AbstractExtension.js";
+import { IPoint } from "../../../../interfaces/IPoint.js";
+export declare abstract class AbstractToolbarExtension extends AbstractExtension {
+    abstract template: HTMLTemplateElement;
+    protected _toolbarContainer: SVGForeignObjectElement;
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    protected updateToolbarPosition(position: IPoint): void;
+}

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

@@ -0,0 +1,30 @@
+import { OverlayLayer } from "../OverlayLayer.js";
+import { AbstractExtension } from "./AbstractExtension.js";
+export class AbstractToolbarExtension extends AbstractExtension {
+    _toolbarContainer;
+    extend(cache, event) {
+        const element = this.template.content.cloneNode(true);
+        element.querySelectorAll('*').forEach(x => x.onpointerdown = (e) => {
+            this.designerCanvas.ignoreEvent(e);
+        });
+        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        this._toolbarContainer = foreignObject;
+        foreignObject.classList.add('svg-toolbar-container');
+        foreignObject.setAttribute('width', '1');
+        foreignObject.setAttribute('height', '1');
+        foreignObject.appendChild(element);
+        this.refresh(cache, event);
+        this._addOverlay(foreignObject, OverlayLayer.Foreground);
+    }
+    refresh(cache, event) {
+        if (event) {
+            const pos = this.designerCanvas.getNormalizedEventCoordinates(event);
+            this._toolbarContainer.setAttribute('x', '' + (pos.x - 16));
+            this._toolbarContainer.setAttribute('y', '' + (pos.y - 36));
+        }
+    }
+    updateToolbarPosition(position) {
+        this._toolbarContainer.setAttribute('x', '' + position.x);
+        this._toolbarContainer.setAttribute('y', '' + position.y);
+    }
+}

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

@@ -0,0 +1,20 @@
+import { AbstractExtension, toolbarObject } from "./AbstractExtension.js";
+import { IExtensionManager } from "./IExtensionManger.js";
+import { IDesignerCanvas } from "../IDesignerCanvas.js";
+import { IDesignItem } from "../../../item/IDesignItem.js";
+export declare class BasicStackedToolbarExtension extends AbstractExtension {
+    protected static basicTemplate: string;
+    protected _toolbar: toolbarObject;
+    protected _size: {
+        width: number;
+        height: number;
+    };
+    protected _display: string;
+    protected _inline: string;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(cache: Record<string | symbol, any>, event: MouseEvent): void;
+    updateDisplayValue(): Promise<void>;
+    refresh(cache: Record<string | symbol, any>, event?: MouseEvent): void;
+    protected _addStyleButton(styleAndControlName: string): void;
+    dispose(): void;
+}