@node-projects/web-component-designer 0.1.0 → 0.1.2

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

@@ -0,0 +1,96 @@
+import { html } from "@node-projects/base-custom-webcomponent";
+import { AbstractExtension } from "../AbstractExtension.js";
+import { ExtensionType } from "../ExtensionType.js";
+import { OverlayLayer } from "../OverlayLayer.js";
+export class EditTextExtension extends AbstractExtension {
+    static template = html `
+    <div style="height: 24px; display: flex;">
+      <button data-command="bold" style="pointer-events: all; height: 24px; width: 24px; padding: 0; font-weight: 900;">b</button>
+      <button data-command="italic" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><em>i</em></button>
+      <button data-command="underline" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><ins>u</ins></button>
+      <button data-command="strikeThrough" style="pointer-events: all; height: 24px; width: 24px; padding: 0;"><del>s</del></button>
+    </div>
+  `;
+    _contentEditedBound;
+    _blurBound;
+    _blurTimeout;
+    _foreignObject;
+    _focusBound;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+        this._contentEditedBound = this._contentEdited.bind(this);
+        this._blurBound = this._blur.bind(this);
+        this._focusBound = this._focus.bind(this);
+    }
+    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.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelection);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.PrimarySelectionAndCanBeEntered);
+        //this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Selection);
+        this.extendedItem.element.setAttribute('contenteditable', '');
+        this.extendedItem.element.addEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.focus();
+        this.designerCanvas.eatEvents = this.extendedItem.element;
+        let itemRect = this.extendedItem.element.getBoundingClientRect();
+        const elements = EditTextExtension.template.content.cloneNode(true);
+        elements.querySelectorAll('button').forEach(x => x.onclick = () => this._formatSelection(x.dataset['command']));
+        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', '96');
+        foreignObject.setAttribute('height', '24');
+        foreignObject.appendChild(elements);
+        this._addOverlay(foreignObject, OverlayLayer.Foregorund);
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
+        this.extendedItem.element.addEventListener('blur', this._blurBound);
+        this.extendedItem.element.addEventListener('focus', this._focusBound);
+    }
+    refresh() {
+        this.dispose();
+    }
+    dispose() {
+        this._removeAllOverlays();
+        this.extendedItem.element.removeAttribute('contenteditable');
+        this.extendedItem.element.removeEventListener('input', this._contentEditedBound);
+        this.extendedItem.element.removeEventListener('blur', this._blurBound);
+        this.designerCanvas.eatEvents = null;
+        this.extendedItem.updateChildrenFromNodesChildren();
+        this.designerCanvas.clickOverlay.style.pointerEvents = 'auto';
+    }
+    handlesPointerEvent(designerCanvas, event, currentElement) {
+        let p = event.composedPath();
+        const stylo = this._foreignObject.querySelector('stylo-editor');
+        return p.indexOf(stylo) >= 0;
+    }
+    _contentEdited() {
+        //todo -> save???
+        //this.extendedItem.content = this.extendedItem.element.innerHTML;
+        //console.log(this.extendedItem.element.innerHTML)
+    }
+    _blur() {
+        if (!this._blurTimeout) {
+            this._blurTimeout = setTimeout(() => {
+                //todo, don't remove doubleclick extension (another type could be used), remove extension itself
+                //maybe also configureable when when to remove the extension
+                this.extensionManager.removeExtension(this.extendedItem, ExtensionType.Doubleclick);
+            }, 150);
+        }
+    }
+    _focus() {
+        if (this._blurTimeout) {
+            clearTimeout(this._blurTimeout);
+            this._blurTimeout = null;
+        }
+    }
+    _formatSelection(type) {
+        if (this._blurTimeout)
+            clearTimeout(this._blurTimeout);
+        this._blurTimeout = null;
+        //const selection = <Selection>(<any>this.designerView.shadowRoot).getSelection()
+        document.execCommand(type, false, null);
+        this.extendedItem.element.focus();
+    }
+}

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

@@ -0,0 +1,9 @@
+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 EditTextExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

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

@@ -0,0 +1,11 @@
+import { EditTextExtension } from "./EditTextExtension.js";
+export class EditTextExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.name === 'button' || designItem.name === 'input')
+            return false;
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new EditTextExtension(extensionManager, designerView, designItem);
+    }
+}

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

@@ -0,0 +1,15 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class ElementDragTitleExtension extends AbstractExtension {
+    private _rect;
+    private _text;
+    private _width;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    _drawMoveOverlay(itemRect: DOMRect): void;
+    refresh(): void;
+    _pointerEvent(event: PointerEvent): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,60 @@
+import { getTextWidth } from '../../../helper/TextHelper.js';
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { NamedTools } from "../tools/NamedTools.js";
+import { AbstractExtension } from './AbstractExtension.js';
+const extensionWidth = 60;
+export class ElementDragTitleExtension extends AbstractExtension {
+    _rect;
+    _text;
+    _width;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        const boundRect = this.extendedItem.element.getBoundingClientRect();
+        let w = getTextWidth(this.extendedItem.name, '10px monospace');
+        let elementWidth = Math.sqrt(Math.pow(transformedCornerPoints[1].x - transformedCornerPoints[0].x, 2) + Math.pow(transformedCornerPoints[1].y - transformedCornerPoints[0].y, 2));
+        let text = this.extendedItem.name;
+        this._width = Math.max(Math.min(elementWidth, w), extensionWidth);
+        if (w > this._width)
+            text = this.extendedItem.name.substring(0, 10) + '…';
+        this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-primary-selection-move', this._rect);
+        this._text = this._drawText(text, (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5, 'svg-text-primary', this._text);
+        const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+        title.textContent = this.extendedItem.name;
+        this._text.appendChild(title);
+        this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
+        this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
+        this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
+        this.refresh();
+    }
+    _drawMoveOverlay(itemRect) {
+    }
+    refresh() {
+        const transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 16 }, this.designerCanvas);
+        const angle = Math.atan2((transformedCornerPoints[1].y - transformedCornerPoints[0].y), (transformedCornerPoints[1].x - transformedCornerPoints[0].x)) * 180 / Math.PI;
+        const transformedCornerPointsTx = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, { x: 0, y: 5 }, this.designerCanvas);
+        const h = (15 / this.designerCanvas.scaleFactor);
+        const w = (this._width / this.designerCanvas.scaleFactor);
+        this._rect.setAttribute('x', '' + transformedCornerPoints[0].x);
+        this._rect.setAttribute('y', '' + transformedCornerPoints[0].y);
+        this._rect.style.rotate = angle + 'deg';
+        this._rect.style.transformBox = 'fill-box';
+        this._rect.setAttribute('height', '' + h);
+        this._rect.setAttribute('width', '' + w);
+        this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
+        this._text.setAttribute('x', '' + transformedCornerPointsTx[0].x);
+        this._text.setAttribute('y', '' + transformedCornerPointsTx[0].y);
+        this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
+        this._text.setAttribute('transform', 'rotate(' + angle + ' ' + transformedCornerPointsTx[0].x + ' ' + transformedCornerPointsTx[0].y + ')');
+    }
+    _pointerEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/ElementDragTitleExtensionProvider.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 ElementDragTitleExtensionProvider 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/ElementDragTitleExtensionProvider.js

@@ -0,0 +1,13 @@
+import { ElementDragTitleExtension } from './ElementDragTitleExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class ElementDragTitleExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new ElementDragTitleExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-text-primary { stroke: none; fill: white; font-family: monospace; }
+  `;
+}

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

@@ -0,0 +1,22 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { ExtensionType } from './ExtensionType.js';
+import { IExtensionManager } from './IExtensionManger.js';
+import { IDesignerExtension } from './IDesignerExtension.js';
+export declare class ExtensionManager implements IExtensionManager {
+    designerCanvas: IDesignerCanvas;
+    designItemsWithExtentions: Set<IDesignItem>;
+    constructor(designerCanvas: IDesignerCanvas);
+    private _contentChanged;
+    private _selectedElementsChanged;
+    applyExtension(designItem: IDesignItem, extensionType: ExtensionType, event?: Event, recursive?: boolean): IDesignerExtension[];
+    applyExtensions(designItems: IDesignItem[], extensionType: ExtensionType, event?: Event, recursive?: boolean): void;
+    removeExtension(designItem: IDesignItem, extensionType?: ExtensionType): void;
+    removeExtensions(designItems: IDesignItem[], recursive: boolean, extensionType?: ExtensionType): void;
+    refreshExtension(designItem: IDesignItem, extensionType?: ExtensionType, event?: Event): void;
+    refreshExtensions(designItems: IDesignItem[], extensionType?: ExtensionType, event?: Event, ignoredExtension?: IDesignerExtension): void;
+    refreshAllExtensions(designItems: IDesignItem[], ignoredExtension?: IDesignerExtension): void;
+    refreshAllAppliedExtentions(): void;
+    reapplyAllAppliedExtentions(): void;
+    private static getAllChildElements;
+}

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

@@ -0,0 +1,313 @@
+import { DesignItem } from '../../../item/DesignItem.js';
+import { NodeType } from "../../../item/NodeType.js";
+import { ExtensionType } from './ExtensionType.js';
+export class ExtensionManager {
+    designerCanvas;
+    designItemsWithExtentions = new Set();
+    constructor(designerCanvas) {
+        this.designerCanvas = designerCanvas;
+        designerCanvas.instanceServiceContainer.selectionService.onSelectionChanged.on(this._selectedElementsChanged.bind(this));
+        designerCanvas.instanceServiceContainer.contentService.onContentChanged.on(this._contentChanged.bind(this));
+    }
+    _contentChanged(contentChanged) {
+        requestAnimationFrame(() => {
+            switch (contentChanged.changeType) {
+                case 'added':
+                    this.applyExtensions(contentChanged.designItems, ExtensionType.Permanent, null, true);
+                    break;
+                case 'moved':
+                    this.refreshExtensions(contentChanged.designItems, ExtensionType.Permanent);
+                    break;
+                case 'parsed':
+                    this.applyExtensions(Array.from(this.designerCanvas.rootDesignItem.children()), ExtensionType.Permanent, null, true);
+                    break;
+                case 'removed':
+                    this.removeExtensions(contentChanged.designItems, true, ExtensionType.Permanent);
+                    break;
+            }
+        });
+    }
+    _selectedElementsChanged(selectionChangedEvent) {
+        if (selectionChangedEvent.oldSelectedElements && selectionChangedEvent.oldSelectedElements.length) {
+            if (selectionChangedEvent.oldSelectedElements[0].parent) {
+                const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.oldSelectedElements[0].parent.element, selectionChangedEvent.oldSelectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
+                this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
+                this.removeExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
+                this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelection);
+                this.removeExtension(selectionChangedEvent.oldSelectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
+                this.removeExtensions(selectionChangedEvent.oldSelectedElements, false, ExtensionType.Selection);
+            }
+        }
+        if (selectionChangedEvent.selectedElements && selectionChangedEvent.selectedElements.length) {
+            this.applyExtensions(selectionChangedEvent.selectedElements, ExtensionType.Selection);
+            this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelection);
+            if (selectionChangedEvent.selectedElements[0].getPlacementService()?.isEnterableContainer(selectionChangedEvent.selectedElements[0]))
+                this.applyExtension(selectionChangedEvent.selectedElements[0], ExtensionType.PrimarySelectionAndCanBeEntered);
+            const primaryContainer = DesignItem.GetOrCreateDesignItem(selectionChangedEvent.selectedElements[0].parent.element, selectionChangedEvent.selectedElements[0].parent.element, this.designerCanvas.serviceContainer, this.designerCanvas.instanceServiceContainer);
+            this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainer);
+            if (primaryContainer.getPlacementService()?.isEnterableContainer(primaryContainer))
+                this.applyExtension(primaryContainer, ExtensionType.PrimarySelectionContainerAndCanBeEntered);
+        }
+        //this.refreshExtensions(selectionChangedEvent.selectedElements);
+    }
+    applyExtension(designItem, extensionType, event, recursive = false) {
+        if (designItem && designItem.nodeType == NodeType.Element) {
+            const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
+            let extensions = [];
+            if (extProv) {
+                for (let e of extProv) {
+                    let shouldAppE = designItem.shouldAppliedDesignerExtensions.get(extensionType);
+                    if (!shouldAppE)
+                        shouldAppE = [];
+                    shouldAppE.push(e);
+                    designItem.shouldAppliedDesignerExtensions.set(extensionType, shouldAppE);
+                    if (e.shouldExtend(this, this.designerCanvas, designItem)) {
+                        let appE = designItem.appliedDesignerExtensions.get(extensionType);
+                        if (!appE)
+                            appE = [];
+                        const ext = e.getExtension(this, this.designerCanvas, designItem);
+                        try {
+                            ext.extend(event);
+                            extensions.push(ext);
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                        appE.push(ext);
+                        designItem.appliedDesignerExtensions.set(extensionType, appE);
+                        this.designItemsWithExtentions.add(designItem);
+                    }
+                }
+            }
+            if (recursive) {
+                for (const d of designItem.children()) {
+                    this.applyExtension(d, extensionType, event, recursive);
+                }
+            }
+            return extensions;
+        }
+        return null;
+    }
+    applyExtensions(designItems, extensionType, event, recursive = false) {
+        if (designItems) {
+            const extProv = this.designerCanvas.serviceContainer.designerExtensions.get(extensionType);
+            if (extProv) {
+                for (let e of extProv) {
+                    for (let i of designItems) {
+                        let shouldAppE = i.shouldAppliedDesignerExtensions.get(extensionType);
+                        if (!shouldAppE)
+                            shouldAppE = [];
+                        shouldAppE.push(e);
+                        i.shouldAppliedDesignerExtensions.set(extensionType, shouldAppE);
+                        if (e.shouldExtend(this, this.designerCanvas, i)) {
+                            let appE = i.appliedDesignerExtensions.get(extensionType);
+                            if (!appE)
+                                appE = [];
+                            const ext = e.getExtension(this, this.designerCanvas, i);
+                            try {
+                                ext.extend(event);
+                            }
+                            catch (err) {
+                                console.error(err);
+                            }
+                            appE.push(ext);
+                            i.appliedDesignerExtensions.set(extensionType, appE);
+                            this.designItemsWithExtentions.add(i);
+                        }
+                    }
+                }
+            }
+            if (recursive) {
+                for (const d of designItems) {
+                    this.applyExtensions(Array.from(d.children()), extensionType, event, recursive);
+                }
+            }
+        }
+    }
+    removeExtension(designItem, extensionType) {
+        if (designItem) {
+            if (extensionType) {
+                designItem.shouldAppliedDesignerExtensions.delete(extensionType);
+                let exts = designItem.appliedDesignerExtensions.get(extensionType);
+                if (exts) {
+                    for (let e of exts) {
+                        try {
+                            e.dispose();
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    }
+                    designItem.appliedDesignerExtensions.delete(extensionType);
+                    if (!designItem.appliedDesignerExtensions.size)
+                        this.designItemsWithExtentions.delete(designItem);
+                }
+            }
+            else {
+                designItem.shouldAppliedDesignerExtensions.clear();
+                for (let appE of designItem.appliedDesignerExtensions) {
+                    for (let e of appE[1]) {
+                        try {
+                            e.dispose();
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    }
+                }
+                designItem.appliedDesignerExtensions.clear();
+                this.designItemsWithExtentions.delete(designItem);
+            }
+        }
+    }
+    removeExtensions(designItems, recursive, extensionType) {
+        if (designItems) {
+            if (extensionType) {
+                for (let i of designItems) {
+                    if (recursive && i.hasChildren) {
+                        this.removeExtensions([...i.children()], true, extensionType);
+                    }
+                    i.shouldAppliedDesignerExtensions.delete(extensionType);
+                    let exts = i.appliedDesignerExtensions.get(extensionType);
+                    if (exts) {
+                        for (let e of exts) {
+                            try {
+                                e.dispose();
+                            }
+                            catch (err) {
+                                console.error(err);
+                            }
+                        }
+                        i.appliedDesignerExtensions.delete(extensionType);
+                        if (!i.appliedDesignerExtensions.size)
+                            this.designItemsWithExtentions.delete(i);
+                    }
+                }
+            }
+            else {
+                for (let i of designItems) {
+                    if (recursive && i.hasChildren) {
+                        this.removeExtensions([...i.children()], true, extensionType);
+                    }
+                    i.shouldAppliedDesignerExtensions.clear();
+                    for (let appE of i.appliedDesignerExtensions) {
+                        for (let e of appE[1]) {
+                            try {
+                                e.dispose();
+                            }
+                            catch (err) {
+                                console.error(err);
+                            }
+                        }
+                    }
+                    i.appliedDesignerExtensions.clear();
+                    this.designItemsWithExtentions.delete(i);
+                }
+            }
+        }
+    }
+    refreshExtension(designItem, extensionType, event) {
+        if (designItem) {
+            if (extensionType) {
+                let exts = designItem.appliedDesignerExtensions.get(extensionType);
+                if (exts) {
+                    for (let e of exts) {
+                        try {
+                            e.refresh(event);
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    }
+                }
+            }
+            else {
+                for (let appE of designItem.appliedDesignerExtensions) {
+                    for (let e of appE[1]) {
+                        try {
+                            e.refresh(event);
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    refreshExtensions(designItems, extensionType, event, ignoredExtension) {
+        if (designItems) {
+            if (extensionType) {
+                for (let i of designItems) {
+                    let exts = i.appliedDesignerExtensions.get(extensionType);
+                    if (exts) {
+                        for (let e of exts) {
+                            try {
+                                if (e != ignoredExtension)
+                                    e.refresh(event);
+                            }
+                            catch (err) {
+                                console.error(err);
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                for (let i of designItems) {
+                    for (let appE of i.appliedDesignerExtensions) {
+                        for (let e of appE[1]) {
+                            try {
+                                if (e != ignoredExtension)
+                                    e.refresh(event);
+                            }
+                            catch (err) {
+                                console.error(err);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    refreshAllExtensions(designItems, ignoredExtension) {
+        if (designItems) {
+            this.refreshExtensions(designItems, ExtensionType.Permanent, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Selection, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelection, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainer, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.MouseOver, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.OnlyOneItemSelected, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.MultipleItemsSelected, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDragOverAndCanBeEntered, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.ContainerDrag, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Doubleclick, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.Placement, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionAndCanBeEntered, null, ignoredExtension);
+            this.refreshExtensions(designItems, ExtensionType.PrimarySelectionContainerAndCanBeEntered, null, ignoredExtension);
+        }
+    }
+    refreshAllAppliedExtentions() {
+        this.refreshAllExtensions([...this.designItemsWithExtentions]);
+    }
+    //todo does not work with permanant, when not applied... maybe we need to do in another way
+    //maybe store the "shouldAppliedExtensions??"
+    reapplyAllAppliedExtentions() {
+        for (let d of ExtensionManager.getAllChildElements(this.designerCanvas.rootDesignItem)) {
+            const keys = [...d.shouldAppliedDesignerExtensions.keys()];
+            for (let e of keys) {
+                this.removeExtension(d, e);
+                this.applyExtension(d, e);
+            }
+        }
+    }
+    static *getAllChildElements(designItem) {
+        if (designItem.nodeType == NodeType.Element)
+            yield designItem;
+        if (designItem.hasChildren) {
+            for (let c of designItem.children())
+                for (let di of ExtensionManager.getAllChildElements(c))
+                    yield di;
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+export declare enum ExtensionType {
+    Permanent = 1,
+    Selection = 2,
+    PrimarySelection = 3,
+    PrimarySelectionContainer = 4,
+    MouseOver = 5,
+    OnlyOneItemSelected = 6,
+    MultipleItemsSelected = 7,
+    /**
+     * Extension for the Container wich the dragged element is draged over.
+     */
+    ContainerDragOverAndCanBeEntered = 8,
+    /**
+    * Extension for the Container on wich a new element is draged over.
+    */
+    ContainerExternalDragOverAndCanBeEntered = 9,
+    /**
+     * Extension for the Current Container wich the dragged element is contained.
+     */
+    ContainerDrag = 10,
+    Doubleclick = 11,
+    Placement = 12,
+    /**
+     * Extensions only when the container can be Entered.
+     * So for Example on a custome webcomponent wich uses a grid layout for it's root, but can not show children,
+     * do not display grid extension.
+     */
+    PrimarySelectionAndCanBeEntered = 13,
+    PrimarySelectionContainerAndCanBeEntered = 14
+}

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

@@ -0,0 +1,31 @@
+export var ExtensionType;
+(function (ExtensionType) {
+    ExtensionType[ExtensionType["Permanent"] = 1] = "Permanent";
+    ExtensionType[ExtensionType["Selection"] = 2] = "Selection";
+    ExtensionType[ExtensionType["PrimarySelection"] = 3] = "PrimarySelection";
+    ExtensionType[ExtensionType["PrimarySelectionContainer"] = 4] = "PrimarySelectionContainer";
+    ExtensionType[ExtensionType["MouseOver"] = 5] = "MouseOver";
+    ExtensionType[ExtensionType["OnlyOneItemSelected"] = 6] = "OnlyOneItemSelected";
+    ExtensionType[ExtensionType["MultipleItemsSelected"] = 7] = "MultipleItemsSelected";
+    /**
+     * Extension for the Container wich the dragged element is draged over.
+     */
+    ExtensionType[ExtensionType["ContainerDragOverAndCanBeEntered"] = 8] = "ContainerDragOverAndCanBeEntered";
+    /**
+    * Extension for the Container on wich a new element is draged over.
+    */
+    ExtensionType[ExtensionType["ContainerExternalDragOverAndCanBeEntered"] = 9] = "ContainerExternalDragOverAndCanBeEntered";
+    /**
+     * Extension for the Current Container wich the dragged element is contained.
+     */
+    ExtensionType[ExtensionType["ContainerDrag"] = 10] = "ContainerDrag";
+    ExtensionType[ExtensionType["Doubleclick"] = 11] = "Doubleclick";
+    ExtensionType[ExtensionType["Placement"] = 12] = "Placement";
+    /**
+     * Extensions only when the container can be Entered.
+     * So for Example on a custome webcomponent wich uses a grid layout for it's root, but can not show children,
+     * do not display grid extension.
+     */
+    ExtensionType[ExtensionType["PrimarySelectionAndCanBeEntered"] = 13] = "PrimarySelectionAndCanBeEntered";
+    ExtensionType[ExtensionType["PrimarySelectionContainerAndCanBeEntered"] = 14] = "PrimarySelectionContainerAndCanBeEntered";
+})(ExtensionType || (ExtensionType = {}));

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

@@ -0,0 +1,11 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class FlexboxExtension extends AbstractExtension {
+    private _path;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,20 @@
+import { getDesignerCanvasNormalizedTransformedCornerDOMPoints } from '../../../helper/TransformHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { OverlayLayer } from './OverlayLayer.js';
+export class FlexboxExtension extends AbstractExtension {
+    _path;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        let transformedCornerPoints = getDesignerCanvasNormalizedTransformedCornerDOMPoints(this.extendedItem.element, null, this.designerCanvas);
+        this._path = this._drawTransformedRect(transformedCornerPoints, 'svg-flexbox', this._path, OverlayLayer.Background);
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}