@node-projects/web-component-designer 0.1.104 → 0.1.106

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

@@ -7,3 +7,4 @@ export declare function pointInRect(point: IPoint, rect: IRect): boolean;
 export declare function removeTrailing(text: string, char: string): string;
 export declare function removeLeading(text: string, char: string): string;
 export declare function requestAnimationFramePromise(): Promise<unknown>;
+export declare function arraysEqual<T>(a: T[], b: T[]): boolean;

package/dist/elements/helper/Helper.js

@@ -37,3 +37,16 @@ export function removeLeading(text, char) {
 export function requestAnimationFramePromise() {
     return new Promise(resolve => requestAnimationFrame(resolve));
 }
+export function arraysEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a == null || b == null)
+        return false;
+    if (a.length !== b.length)
+        return false;
+    for (var i = 0; i < a.length; ++i) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+}

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

@@ -4,10 +4,7 @@ import { IDesignItem } from './IDesignItem.js';
 import { InstanceServiceContainer } from '../services/InstanceServiceContainer.js';
 import { ChangeGroup } from '../services/undoService/ChangeGroup.js';
 import { NodeType } from './NodeType.js';
-import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
-import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension.js';
 import { ISize } from '../../interfaces/ISize.js';
-import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
 import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { IPlacementService } from '../services/placementService/IPlacementService.js';
@@ -18,8 +15,6 @@ export declare class DesignItem implements IDesignItem {
     view: Node;
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
-    appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
-    shouldAppliedDesignerExtensions: Map<ExtensionType, IDesignerExtensionProvider[]>;
     nodeReplaced: TypedEvent<void>;
     clone(): Promise<IDesignItem>;
     allMatching(selectors: string): Generator<IDesignItem, void, undefined>;

package/dist/elements/item/DesignItem.js

@@ -20,8 +20,6 @@ export class DesignItem {
     view;
     serviceContainer;
     instanceServiceContainer;
-    appliedDesignerExtensions = new Map();
-    shouldAppliedDesignerExtensions = new Map();
     nodeReplaced = new TypedEvent;
     async clone() {
         try {
@@ -266,11 +264,12 @@ export class DesignItem {
     set innerHTML(value) {
         if (this.nodeType != NodeType.TextNode) {
             const grp = this.openGroup('set innerHTML');
+            this.clearChildren();
             const range = document.createRange();
             range.selectNode(document.body);
             const fragment = range.createContextualFragment(value);
             for (const n of fragment.childNodes) {
-                let di = DesignItem.GetOrCreateDesignItem(n, n, this.serviceContainer, this.instanceServiceContainer);
+                let di = DesignItem.createDesignItemFromInstance(n, this.serviceContainer, this.instanceServiceContainer);
                 this.insertChild(di);
             }
             grp.commit();

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

@@ -2,10 +2,7 @@ import { ServiceContainer } from '../services/ServiceContainer.js';
 import { InstanceServiceContainer } from '../services/InstanceServiceContainer.js';
 import { ChangeGroup } from '../services/undoService/ChangeGroup.js';
 import { NodeType } from './NodeType.js';
-import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
-import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension.js';
 import { ISize } from "../../interfaces/ISize.js";
-import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
 import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
 import { IPlacementService } from '../services/placementService/IPlacementService.js';
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
@@ -51,8 +48,6 @@ export interface IDesignItem {
     readonly element: Element;
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
-    appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
-    shouldAppliedDesignerExtensions: Map<ExtensionType, IDesignerExtensionProvider[]>;
     getOrCreateDesignItem(node: Node): any;
     openGroup(title: string): ChangeGroup;
     styles(): Iterable<[name: string, value: string]>;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -14,7 +14,6 @@ import { ElementDragTitleExtensionProvider } from '../widgets/designerView/exten
 import { TransformOriginExtensionProvider } from '../widgets/designerView/extensions/TransformOriginExtensionProvider.js';
 import { CanvasExtensionProvider } from '../widgets/designerView/extensions/CanvasExtensionProvider.js';
 import { PositionExtensionProvider } from '../widgets/designerView/extensions/PositionExtensionProvider.js';
-import { PathExtensionProvider } from '../widgets/designerView/extensions/svg/PathExtensionProvider.js';
 import { HighlightElementExtensionProvider } from '../widgets/designerView/extensions/HighlightElementExtensionProvider.js';
 import { NamedTools } from '../widgets/designerView/tools/NamedTools.js';
 import { PointerTool } from '../widgets/designerView/tools/PointerTool.js';
@@ -62,9 +61,6 @@ import { DrawToolButtonProvider } from '../widgets/designerView/tools/toolBar/bu
 import { TextToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js';
 import { SelectorToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js';
 import { GrayOutDragOverContainerExtensionProvider } from '../widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js';
-import { LineExtensionProvider } from '../widgets/designerView/extensions/svg/LineExtensionProvider.js';
-import { RectExtentionProvider } from '../widgets/designerView/extensions/svg/RectExtensionProvider.js';
-import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/svg/EllipsisExtensionProvider.js';
 import { PropertyGroupsService } from './propertiesService/PropertyGroupsService.js';
 import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js';
 import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/FlexboxExtensionProvider.js';
@@ -87,6 +83,12 @@ import { SimpleDemoProviderService } from './demoProviderService/SimpleDemoProvi
 import { DrawElementTool } from '../widgets/designerView/tools/DrawElementTool.js';
 import { RoundPixelsDesignViewConfigButton } from '../widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js';
 import { MathMLElementsPropertiesService } from './propertiesService/services/MathMLElementsPropertiesService.js';
+import { SvgElementExtensionProvider } from '../widgets/designerView/extensions/svg/SvgElementExtensionProvider.js';
+import { ConditionExtensionProvider } from '../widgets/designerView/extensions/logic/ConditionExtensionProvider.js';
+import { GridToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridToolbarExtensionProvider.js';
+import { FlexToolbarExtensionProvider } from '../widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js';
+import { BlockToolbarExtensionProvider } from '../widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js';
+import { ChildContextMenu } from '../widgets/designerView/extensions/contextMenu/ChildContextMenu.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -118,22 +120,22 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));
     serviceContainer.register("designItemDocumentPositionService", (designerCanvas) => new DesignItemDocumentPositionService(designerCanvas));
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
-        // new ResizeExtensionProvider(false),
         new InvisibleElementExtensionProvider(),
-        // new ElementDragTitleExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
-        new ElementDragTitleExtensionProvider(),
+        new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
         new TransformOriginExtensionProvider(true),
         new CanvasExtensionProvider(),
         new PositionExtensionProvider(),
-        new EllipsisExtensionProvider(),
-        new LineExtensionProvider(),
-        new PathExtensionProvider(),
-        new RectExtentionProvider(),
+        new SvgElementExtensionProvider(),
         new ResizeExtensionProvider(true),
         new RotateExtensionProvider(),
-        new MultipleSelectionRectExtensionProvider(),
+        new ConditionExtensionProvider(new MultipleSelectionRectExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionRefreshed, [
+        new GridToolbarExtensionProvider(),
+        new FlexToolbarExtensionProvider(),
+        new BlockToolbarExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionAndCanBeEntered, [
         new DisplayGridExtensionProvider(),
@@ -141,7 +143,7 @@ export function createDefaultServiceContainer() {
         new FlexboxExtensionProvider(),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.Selection, [
-        new SelectionDefaultExtensionProvider()
+        new ConditionExtensionProvider(new SelectionDefaultExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
     ]);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainerAndCanBeEntered, [
         new DisplayGridExtensionProvider(),
@@ -186,14 +188,12 @@ export function createDefaultServiceContainer() {
     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.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 CopyPasteContextMenu(),
+        new ChildContextMenu('edit', new CopyPasteContextMenu()),
         new SeperatorContextMenu(),
-        new RotateLeftAndRight(),
+        new ChildContextMenu('modify', new RotateLeftAndRight(), new SeperatorContextMenu(), new ZMoveContextMenu()),
         new SeperatorContextMenu(),
-        new JumpToElementContextMenu(),
-        new ZoomToElementContextMenu(),
+        new ChildContextMenu('view', new JumpToElementContextMenu(), new ZoomToElementContextMenu()),
         new SeperatorContextMenu(),
-        new ZMoveContextMenu(),
         new MultipleItemsSelectedContextMenu(),
         new PathContextMenu(),
         new RectContextMenu(),

package/dist/elements/services/dragDropService/DragDropService.js

@@ -48,7 +48,7 @@ export class DragDropService {
         containerService.place(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
         containerService.finishPlace(event, designerCanvas, newContainer, { x: 0, y: 0 }, { x: 0, y: 0 }, pos, [di]);
         requestAnimationFrame(() => {
-            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]);
+            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di], event);
             grp.commit();
         });
     }

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

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

package/dist/elements/services/selectionService/ISelectionRefreshEvent.d.ts

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

package/dist/elements/services/selectionService/ISelectionRefreshEvent.js

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

package/dist/elements/services/selectionService/ISelectionService.d.ts

@@ -1,12 +1,14 @@
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { ISelectionChangedEvent } from './ISelectionChangedEvent.js';
+import { ISelectionRefreshEvent } from './ISelectionRefreshEvent.js';
 export interface ISelectionService {
     primarySelection: IDesignItem;
     selectedElements: IDesignItem[];
-    setSelectedElements(designItems: IDesignItem[]): void;
+    setSelectedElements(designItems: IDesignItem[], even?: Event): void;
     setSelectionByTextRange(positionStart: number, positionEnd: number): any;
     clearSelectedElements(): void;
     isSelected(designItem: IDesignItem): boolean;
     readonly onSelectionChanged: TypedEvent<ISelectionChangedEvent>;
+    readonly onSelectionRefresh: TypedEvent<ISelectionRefreshEvent>;
 }

package/dist/elements/services/selectionService/SelectionService.d.ts

@@ -3,16 +3,18 @@ import { IDesignItem } from '../../item/IDesignItem.js';
 import { ISelectionChangedEvent } from './ISelectionChangedEvent.js';
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
+import { ISelectionRefreshEvent } from './ISelectionRefreshEvent.js';
 export declare class SelectionService implements ISelectionService {
     primarySelection: IDesignItem;
     selectedElements: IDesignItem[];
     _designerCanvas: IDesignerCanvas;
     _undoSelectionChanges: boolean;
     constructor(designerCanvas: IDesignerCanvas, undoSelectionChanges: boolean);
-    setSelectedElements(designItems: IDesignItem[]): void;
+    setSelectedElements(designItems: IDesignItem[], event?: Event): void;
     setSelectionByTextRange(positionStart: number, positionEnd: number): void;
-    _withoutUndoSetSelectedElements(designItems: IDesignItem[]): void;
+    _withoutUndoSetSelectedElements(designItems: IDesignItem[], event?: Event): void;
     clearSelectedElements(): void;
     isSelected(designItem: IDesignItem): boolean;
     readonly onSelectionChanged: TypedEvent<ISelectionChangedEvent>;
+    readonly onSelectionRefresh: TypedEvent<ISelectionRefreshEvent>;
 }

package/dist/elements/services/selectionService/SelectionService.js

@@ -1,5 +1,6 @@
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { SelectionChangedAction } from '../undoService/transactionItems/SelectionChangedAction.js';
+import { arraysEqual } from '../../helper/Helper.js';
 function findDesignItem(designItem, position) {
     let usedItem = null;
     if (designItem.hasChildren) {
@@ -25,14 +26,18 @@ export class SelectionService {
         this._designerCanvas = designerCanvas;
         this._undoSelectionChanges = undoSelectionChanges;
     }
-    setSelectedElements(designItems) {
+    setSelectedElements(designItems, event) {
         if (this.selectedElements != designItems && !(this.selectedElements.length === 0 && (designItems == null || designItems.length === 0))) {
+            if (arraysEqual(designItems, this.selectedElements)) {
+                this.onSelectionRefresh.emit({ selectedElements: this.selectedElements, event });
+                return;
+            }
             if (this._undoSelectionChanges) {
                 const action = new SelectionChangedAction(this.selectedElements, designItems, this);
                 this._designerCanvas.instanceServiceContainer.undoService.execute(action);
             }
             else {
-                this._withoutUndoSetSelectedElements(designItems);
+                this._withoutUndoSetSelectedElements(designItems, event);
             }
         }
     }
@@ -43,7 +48,7 @@ export class SelectionService {
                 this.setSelectedElements([item]);
         }
     }
-    _withoutUndoSetSelectedElements(designItems) {
+    _withoutUndoSetSelectedElements(designItems, event) {
         let oldSelectedElements = this.selectedElements;
         if (!designItems) {
             this.selectedElements = [];
@@ -61,7 +66,7 @@ export class SelectionService {
             else
                 this.primarySelection = null;
         }
-        this.onSelectionChanged.emit({ selectedElements: this.selectedElements, oldSelectedElements: oldSelectedElements });
+        this.onSelectionChanged.emit({ selectedElements: this.selectedElements, oldSelectedElements: oldSelectedElements, event });
     }
     clearSelectedElements() {
         this.setSelectedElements([]);
@@ -70,4 +75,5 @@ export class SelectionService {
         return this.selectedElements.indexOf(designItem) >= 0;
     }
     onSelectionChanged = new TypedEvent();
+    onSelectionRefresh = new TypedEvent();
 }

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

@@ -3,6 +3,12 @@ import { IDesignerCanvas } from '../IDesignerCanvas.js';
 import { IDesignerExtension } from './IDesignerExtension.js';
 import { IExtensionManager } from './IExtensionManger.js';
 import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
+import { OverlayLayer } from './OverlayLayer.js';
+import { IPoint } from '../../../../interfaces/IPoint.js';
+export type toolbarObject = SVGForeignObjectElement & {
+    updatePosition: (position: IPoint) => void;
+    getById: <T>(id: string) => T;
+};
 export declare abstract class AbstractExtension extends AbstractExtensionBase implements IDesignerExtension {
     protected extendedItem: IDesignItem;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
@@ -10,4 +16,5 @@ export declare abstract class AbstractExtension extends AbstractExtensionBase im
     abstract refresh(cache: Record<string | symbol, any>, event?: Event): any;
     abstract dispose(): any;
     remove(): void;
+    createToolbar(template: HTMLTemplateElement, width: number, height: number, overlayLayer?: OverlayLayer): toolbarObject;
 }

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

@@ -1,4 +1,5 @@
 import { AbstractExtensionBase } from "./AbstractExtensionBase.js";
+import { OverlayLayer } from './OverlayLayer.js';
 export class AbstractExtension extends AbstractExtensionBase {
     extendedItem;
     constructor(extensionManager, designerView, extendedItem) {
@@ -8,4 +9,24 @@ export class AbstractExtension extends AbstractExtensionBase {
     remove() {
         this.extensionManager.removeExtensionInstance(this.extendedItem, this);
     }
+    createToolbar(template, width, height, overlayLayer = OverlayLayer.Foreground) {
+        const element = 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');
+        foreignObject.classList.add('svg-toolbar-container');
+        foreignObject.setAttribute('width', '' + width);
+        foreignObject.setAttribute('height', '' + height);
+        foreignObject.appendChild(element);
+        this._addOverlay(foreignObject, overlayLayer);
+        foreignObject.updatePosition = (position) => {
+            foreignObject.setAttribute('x', '' + position.x);
+            foreignObject.setAttribute('y', '' + position.y);
+        };
+        foreignObject.getById = (id) => {
+            return foreignObject.querySelector('#' + id);
+        };
+        return foreignObject;
+    }
 }

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

@@ -0,0 +1,13 @@
+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 ConditionExtensionProvider implements IDesignerExtensionProvider {
+    constructor(extensionProvider: IDesignerExtensionProvider, condition: (designItem: IDesignItem) => boolean);
+    extensionProvider: IDesignerExtensionProvider;
+    condition: (designItem: IDesignItem) => boolean;
+    style: CSSStyleSheet;
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

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

@@ -0,0 +1,18 @@
+export class ConditionExtensionProvider {
+    constructor(extensionProvider, condition) {
+        this.extensionProvider = extensionProvider;
+        this.condition = condition;
+        this.style = extensionProvider.style;
+    }
+    extensionProvider;
+    condition;
+    style;
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (!this.condition(designItem))
+            return false;
+        return this.extensionProvider.shouldExtend(extensionManager, designerView, designItem);
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return this.extensionProvider.getExtension(extensionManager, designerView, designItem);
+    }
+}

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

@@ -9,6 +9,7 @@ export declare class EditTextExtension extends AbstractExtension implements hand
     private static template;
     private _foreignObject;
     private _path;
+    private _toolbar;
     constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
     extend(): void;
     refresh(): void;

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

@@ -6,7 +6,7 @@ import { shadowrootGetSelection, wrapSelectionInSpans } from "../../../../helper
 import { FontPropertyEditor } from "../../../../services/propertiesService/propertyEditors/FontPropertyEditor.js";
 export class EditTextExtension extends AbstractExtension {
     static template = html `
-    <div style="height: 24px; display: flex; gap: 2px;">
+    <div style="height: 100%; display: flex; gap: 2px; width: 100%;">
       <button data-command="font-weight" data-command-parameter="800" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
       <button data-command="font-style" data-command-parameter="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
       <button data-command="text-decoration" data-command-parameter="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
@@ -34,6 +34,7 @@ export class EditTextExtension extends AbstractExtension {
   `;
     _foreignObject;
     _path;
+    _toolbar;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
     }
@@ -45,23 +46,13 @@ export class EditTextExtension extends AbstractExtension {
         this.extendedItem.element.setAttribute('contenteditable', '');
         this.extendedItem.element.focus();
         let itemRect = this.extendedItem.element.getBoundingClientRect();
-        const elements = EditTextExtension.template.content.cloneNode(true);
-        FontPropertyEditor.addFontsToSelect(elements.querySelector('#fontFamily'));
-        elements.querySelectorAll('button').forEach(x => x.onpointerdown = (e) => {
-            this.designerCanvas.ignoreEvent(e);
+        this._toolbar = this.createToolbar(EditTextExtension.template, 300, 24);
+        this._toolbar.updatePosition({ x: (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, y: ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 36) });
+        FontPropertyEditor.addFontsToSelect(this._toolbar.getById('fontFamily'));
+        this._toolbar.querySelectorAll('button').forEach(x => x.onpointerdown = (e) => {
             this._formatSelection(x.dataset['command'], x.dataset['commandParameter']);
         });
-        elements.querySelectorAll('select').forEach(x => x.onpointerdown = (e) => this.designerCanvas.ignoreEvent(e));
-        elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
-        //Button overlay
-        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
-        this._foreignObject = foreignObject;
-        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
-        foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
-        foreignObject.setAttribute('width', '300');
-        foreignObject.setAttribute('height', '24');
-        foreignObject.appendChild(elements);
-        this._addOverlay(foreignObject, OverlayLayer.Foreground);
+        this._toolbar.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
         //TODO - nice way to disable click overlay
         this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
         //overlay to detect click outside

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

@@ -0,0 +1,18 @@
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from "../AbstractExtension.js";
+import { IExtensionManager } from '../IExtensionManger.js';
+export type handlesPointerEvent = {
+    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
+};
+export declare class EditTextExtension extends AbstractExtension implements handlesPointerEvent {
+    private static template;
+    private _foreignObject;
+    private _path;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
+    _formatSelection(type: string, value?: string): void;
+}

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

@@ -0,0 +1,107 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from "../../../../helper/TransformHelper.js";
+import { shadowrootGetSelection, wrapSelectionInSpans } from "../../../../helper/SelectionHelper.js";
+import { FontPropertyEditor } from "../../../../services/propertiesService/propertyEditors/FontPropertyEditor.js";
+export class EditTextExtension extends AbstractExtension {
+    static template = html `
+    <div style="height: 24px; display: flex; gap: 2px;">
+      <button data-command="font-weight" data-command-parameter="800" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
+      <button data-command="font-style" data-command-parameter="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
+      <button data-command="text-decoration" data-command-parameter="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
+      <button data-command="text-decoration" data-command-parameter="line-through" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
+      <button data-command="text-decoration" data-command-parameter="overline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><span style="text-decoration: overline">o</span></button>
+      <select data-command="fontSize" style="pointer-events: all; height: 24px; width: 60px; padding: 0;">
+        <option>8px</option>
+        <option>9px</option>
+        <option>10px</option>
+        <option>11px</option>
+        <option>12px</option>
+        <option>14px</option>
+        <option>16px</option>
+        <option>18px</option>
+        <option>20px</option>
+        <option>24px</option>
+        <option>28px</option>
+        <option>32px</option>
+        <option>36px</option>
+      </select>
+      <select id="fontFamily" data-command="font-family" style="pointer-events: all; height: 24px; width: 90px; padding: 0;">
+        
+      </select>
+    </div>
+  `;
+    _foreignObject;
+    _path;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        //TODO: -> check what to do with extensions, do not loose edit on mouse click,...
+        //maybe use a html edit framework
+        this.extendedItem.instanceServiceContainer.selectionService.clearSelectedElements();
+        this.extendedItem.removeDesignerAttributesAndStylesFromChildren();
+        this.extendedItem.element.setAttribute('contenteditable', '');
+        this.extendedItem.element.focus();
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const elements = EditTextExtension.template.content.cloneNode(true);
+        FontPropertyEditor.addFontsToSelect(elements.querySelector('#fontFamily'));
+        elements.querySelectorAll('button').forEach(x => x.onpointerdown = (e) => {
+            this.designerCanvas.ignoreEvent(e);
+            this._formatSelection(x.dataset['command'], x.dataset['commandParameter']);
+        });
+        elements.querySelectorAll('select').forEach(x => x.onpointerdown = (e) => this.designerCanvas.ignoreEvent(e));
+        elements.querySelectorAll('select').forEach(x => x.onchange = () => this._formatSelection(x.dataset['command'], x.value));
+        //Button overlay
+        const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
+        this._foreignObject = foreignObject;
+        foreignObject.setAttribute('x', '' + (itemRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor);
+        foreignObject.setAttribute('y', '' + ((itemRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 30));
+        foreignObject.setAttribute('width', '300');
+        foreignObject.setAttribute('height', '24');
+        foreignObject.appendChild(elements);
+        this._addOverlay(foreignObject, OverlayLayer.Foreground);
+        //TODO - nice way to disable click overlay
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
+        //overlay to detect click outside
+        this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        this._path.setAttribute('class', 'svg-edit-text-clickoutside');
+        this._path.setAttribute('fill-rule', 'evenodd');
+        this._path.style.pointerEvents = 'auto';
+        this._path.onpointerdown = (e) => {
+            this.extensionManager.removeExtensionInstance(this.extendedItem, this);
+        };
+        this._addOverlay(this._path, OverlayLayer.Background);
+        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
+        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
+        data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
+        this._path.setAttribute("d", data);
+    }
+    refresh() {
+        let points = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        let outsideRect = { width: this.designerCanvas.containerBoundingRect.width / this.designerCanvas.scaleFactor, height: this.designerCanvas.containerBoundingRect.height / this.designerCanvas.scaleFactor };
+        let data = "M0 0 L" + outsideRect.width + " 0 L" + outsideRect.width + ' ' + outsideRect.height + " L0 " + outsideRect.height + " Z ";
+        data += "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + " Z";
+        this._path.setAttribute("d", data);
+    }
+    dispose() {
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.extendedItem.updateChildrenFromNodesChildren();
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
+    }
+    handlesPointerEvent(designerCanvas, event, currentElement) {
+        const p = event.composedPath();
+        const stylo = this._foreignObject.querySelector('stylo-editor');
+        return p.indexOf(stylo) >= 0;
+    }
+    _formatSelection(type, value) {
+        const selection = shadowrootGetSelection(this.designerCanvas.rootDesignItem.element.shadowRoot);
+        const spans = wrapSelectionInSpans(selection);
+        for (const span of spans)
+            span.style[type] = value;
+        this.extendedItem.element.focus();
+    }
+}