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

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

@@ -0,0 +1,94 @@
+import { EventNames } from '../../../../enums/EventNames.js';
+import { convertCssUnit, getCssUnit } from '../../../helper/CssUnitConverter.js';
+import { getDesignerCanvasNormalizedTransformedPoint } from '../../../helper/TransformHelper.js';
+import { AbstractExtension } from './AbstractExtension.js';
+export class TransformOriginExtension extends AbstractExtension {
+    _startPos;
+    _circle;
+    _circle2;
+    _oldValue;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        const computed = getComputedStyle(this.extendedItem.element);
+        const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
+        const toDOMPoint = getDesignerCanvasNormalizedTransformedPoint(this.extendedItem.element, { x: parseFloat(to[0]) * this.designerCanvas.zoomFactor, y: parseFloat(to[1]) * this.designerCanvas.zoomFactor }, this.designerCanvas);
+        this._circle = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 5 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
+        this._circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        this._circle.style.cursor = 'pointer';
+        this._circle2 = this._drawCircle(toDOMPoint.x, toDOMPoint.y, 1 / this.designerCanvas.zoomFactor, 'svg-transform-origin');
+        this._circle2.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        this._circle2.style.pointerEvents = 'none';
+        this._circle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event));
+        this._circle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event));
+        this._circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event)); //TODO: -> assign to window
+        let old = this.extendedItem.getStyleFromSheetOrLocal('transform-origin');
+        if (old) {
+            this._oldValue = old;
+        }
+    }
+    pointerEvent(event) {
+        event.stopPropagation();
+        const rect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computed = getComputedStyle(this.extendedItem.element);
+        const x = 0;
+        const y = 1;
+        const to = computed.transformOrigin.split(' '); // This value remains the same regardless of scalefactor
+        const toInPercentage = [];
+        toInPercentage[0] = parseFloat(to[0]) / parseFloat(this.extendedItem.element.style.width); // This value remains the same regardless of scalefactor
+        toInPercentage[1] = parseFloat(to[1]) / parseFloat(this.extendedItem.element.style.height); // This value remains the same regardless of scalefactor
+        const toDOMPoint = new DOMPoint(rect.x + toInPercentage[x] * rect.width, rect.y + toInPercentage[y] * rect.height);
+        const normalized = this.designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._startPos = { x: normalized.x, y: normalized.y };
+                break;
+            case EventNames.PointerMove:
+                if (this._startPos && event.buttons > 0) {
+                    const dx = normalized.x - this._startPos.x;
+                    const dy = normalized.y - this._startPos.y;
+                    this._circle.setAttribute('cx', (toDOMPoint.x + dx));
+                    this._circle.setAttribute('cy', (toDOMPoint.y + dy));
+                    this._circle2.setAttribute('cx', (toDOMPoint.x + dx));
+                    this._circle2.setAttribute('cy', (toDOMPoint.y + dy));
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                if (this._startPos) {
+                    const dx = normalized.x - this._startPos.x;
+                    const dy = normalized.y - this._startPos.y;
+                    const newX = (dx + parseFloat(to[x]));
+                    const newY = (dy + parseFloat(to[y]));
+                    if (this._oldValue) { //Restore old units
+                        try {
+                            const oldSplit = this._oldValue.split(' ');
+                            let newXs = convertCssUnit(newX, this.extendedItem.element, 'width', getCssUnit(oldSplit[0]));
+                            let newYs = convertCssUnit(newX, this.extendedItem.element, 'width', getCssUnit(oldSplit[0]));
+                            if (oldSplit.length > 1) {
+                                newYs = convertCssUnit(newY, this.extendedItem.element, 'height', getCssUnit(oldSplit[1]));
+                            }
+                            this.extendedItem.updateStyleInSheetOrLocal('transform-origin', newXs + ' ' + newYs);
+                        }
+                        catch (err) {
+                            this.extendedItem.updateStyleInSheetOrLocal('transform-origin', newX + 'px' + ' ' + newY + 'px');
+                        }
+                    }
+                    else
+                        this.extendedItem.updateStyleInSheetOrLocal('transform-origin', newX + 'px' + ' ' + newY + 'px');
+                    this.refresh();
+                    this._startPos = null;
+                }
+                break;
+        }
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -0,0 +1,12 @@
+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 TransformOriginExtensionProvider implements IDesignerExtensionProvider {
+    showOnlyWhenSet: boolean;
+    constructor(showOnlyWhenSet?: boolean);
+    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/TransformOriginExtensionProvider.js

@@ -0,0 +1,28 @@
+import { TransformOriginExtension } from './TransformOriginExtension.js';
+import { css } from "@node-projects/base-custom-webcomponent";
+export class TransformOriginExtensionProvider {
+    showOnlyWhenSet;
+    constructor(showOnlyWhenSet = true) {
+        this.showOnlyWhenSet = showOnlyWhenSet;
+    }
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg')) {
+            if (!this.showOnlyWhenSet)
+                return true;
+            if (designItem.hasStyle('transformOrigin'))
+                return true;
+            if (getComputedStyle(designItem.element).display != 'inline' && designItem.element.getBoundingClientRect) {
+                const r = designItem.element.getBoundingClientRect();
+                if (getComputedStyle(designItem.element).transformOrigin != r.width / 2 + 'px ' + r.height / 2 + 'px')
+                    return true;
+            }
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new TransformOriginExtension(extensionManager, designerView, designItem);
+    }
+    style = css `
+    .svg-transform-origin { stroke: #3899ec; fill: black; pointer-events: all }
+  `;
+}

package/dist/elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.d.ts

@@ -0,0 +1,12 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem.js";
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class AbstractDesignViewConfigButton implements IDesignViewConfigButtonsProvider {
+    protected settingName: any;
+    private content;
+    private tooltp;
+    private contextmenu;
+    constructor(settingName: string, content: string | HTMLElement, tooltip: string, contextmenu?: IContextMenuItem[]);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/AbstractDesignViewConfigButton.js

@@ -0,0 +1,40 @@
+import { ContextMenu } from "../../../../helper/contextMenu/ContextMenu.js";
+export class AbstractDesignViewConfigButton {
+    settingName;
+    content;
+    tooltp;
+    contextmenu;
+    constructor(settingName, content, tooltip, contextmenu) {
+        this.settingName = settingName;
+        this.content = content;
+        this.tooltp = tooltip;
+        this.contextmenu = contextmenu;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const btn = document.createElement('div');
+        if (typeof this.content == 'string')
+            btn.innerHTML = this.content;
+        else
+            btn.appendChild(this.content);
+        btn.title = this.tooltp;
+        btn.className = 'toolbar-control';
+        const extensionOptions = designerCanvas.instanceServiceContainer.designContext.extensionOptions;
+        if (extensionOptions[this.settingName] !== false)
+            btn.classList.add('selected');
+        btn.onclick = () => {
+            const val = extensionOptions[this.settingName];
+            extensionOptions[this.settingName] = val === false ? true : false;
+            if (extensionOptions[this.settingName] !== false)
+                btn.classList.add('selected');
+            else
+                btn.classList.remove('selected');
+        };
+        btn.oncontextmenu = (e) => {
+            e.preventDefault();
+            if (this.contextmenu) {
+                ContextMenu.show(this.contextmenu, e);
+            }
+        };
+        return [btn];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.d.ts

@@ -0,0 +1,8 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js

@@ -0,0 +1,12 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const div = document.createElement('div');
+        div.style.width = this._space + 'px';
+        div.oncontextmenu = (e) => { e.preventDefault(); };
+        return [div];
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,4 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class FlexboxExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js

@@ -0,0 +1,7 @@
+import { flexboxExtensionShowOverlayOptionName } from "../FlexboxExtensionProvider.js";
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class FlexboxExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(flexboxExtensionShowOverlayOptionName, "F", "show flexbox overlay");
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,4 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js

@@ -0,0 +1,7 @@
+import { gridExtensionShowOverlayOptionName } from "../grid/DisplayGridExtensionProvider.js";
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class GridExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(gridExtensionShowOverlayOptionName, "G", "show grid overlay");
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.d.ts

@@ -0,0 +1,5 @@
+import { DesignerView } from "../../designerView.js";
+import { IDesignerCanvas } from "../../IDesignerCanvas.js";
+export interface IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.js

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

package/dist/elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.d.ts

@@ -0,0 +1,4 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare class InvisibleElementExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js

@@ -0,0 +1,7 @@
+import { invisibleElementExtensionShowOverlayOptionName } from "../InvisibleElementExtensionProvider.js";
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export class InvisibleElementExtensionDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(invisibleElementExtensionShowOverlayOptionName, "I", "show invisible div overlay");
+    }
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.d.ts

@@ -0,0 +1,5 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export declare const enableStylesheetService = "enableStylesheetService";
+export declare class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor();
+}

package/dist/elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js

@@ -0,0 +1,7 @@
+import { AbstractDesignViewConfigButton } from "./AbstractDesignViewConfigButton.js";
+export const enableStylesheetService = 'enableStylesheetService';
+export class StylesheetServiceDesignViewConfigButtons extends AbstractDesignViewConfigButton {
+    constructor() {
+        super(enableStylesheetService, "ss", "modify Stylesheet");
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class CopyPasteContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js

@@ -0,0 +1,14 @@
+import { CommandType } from '../../../../../commandHandling/CommandType.js';
+export class CopyPasteContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); }, shortCut: 'Ctrl + C' },
+            { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); }, shortCut: 'Ctrl + X' },
+            { title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); }, shortCut: 'Ctrl + V' },
+            { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); }, shortCut: 'Del' },
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+export type ContextmenuInitiator = 'designer' | 'treeView' | 'other';
+export interface IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): any;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.js

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

package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.d.ts

@@ -0,0 +1,9 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class ItemsBelowContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+    private _select;
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js

@@ -0,0 +1,17 @@
+import { DesignItem } from '../../../../item/DesignItem.js';
+export class ItemsBelowContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return initiator == 'designer';
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        const lstItems = designerCanvas.elementsFromPoint(event.x, event.y);
+        if (lstItems.length > 0) {
+            return [{ title: 'items below', children: [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))] }];
+        }
+        return [];
+    }
+    _select(designerView, element) {
+        const item = DesignItem.GetOrCreateDesignItem(element, element, designerView.serviceContainer, designerView.instanceServiceContainer);
+        designerView.instanceServiceContainer.selectionService.setSelectedElements([item]);
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class JumpToElementContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js

@@ -0,0 +1,15 @@
+export class JumpToElementContextMenu {
+    shouldProvideContextmenu(event, designerCanvas, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [
+            {
+                title: 'jump to', action: () => {
+                    const coord = designerCanvas.getNormalizedElementCoordinates(designItem.element);
+                    designerCanvas.zoomPoint({ x: coord.x + coord.width / 2, y: coord.y + coord.height / 2 }, designerCanvas.zoomFactor);
+                }
+            },
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.d.ts

@@ -0,0 +1,9 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class MultipleItemsSelectedContextMenu implements IContextMenuExtension {
+    orderIndex: number;
+    shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js

@@ -0,0 +1,33 @@
+import { switchContainer } from '../../../../helper/SwitchContainerHelper.js';
+import { DesignItem } from '../../../../item/DesignItem.js';
+export class MultipleItemsSelectedContextMenu {
+    orderIndex = 60;
+    shouldProvideContextmenu(event, designerCanvas, designItem, initiator) {
+        if (designItem.instanceServiceContainer.selectionService.selectedElements.length > 1) {
+            return true;
+        }
+        return false;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [
+            {
+                title: 'wrap in',
+                children: [
+                    {
+                        title: 'div',
+                        action: () => {
+                            const grp = designItem.openGroup("wrap in Div");
+                            let elements = designItem.instanceServiceContainer.selectionService.selectedElements;
+                            let newContainer = document.createElement('div');
+                            const newContainerDesignItem = DesignItem.createDesignItemFromInstance(newContainer, designItem.serviceContainer, designItem.instanceServiceContainer);
+                            elements[0].insertAdjacentElement(newContainerDesignItem, 'beforebegin');
+                            switchContainer(elements, newContainerDesignItem, true, 10);
+                            grp.commit();
+                            designItem.instanceServiceContainer.selectionService.setSelectedElements([newContainerDesignItem]);
+                        }
+                    }
+                ]
+            }
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/PathContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class PathContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/PathContextMenu.js

@@ -0,0 +1,31 @@
+import { createPathD } from '../../../../helper/PathDataPolyfill.js';
+export class PathContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        if (designItem.element instanceof SVGPathElement)
+            return true;
+        return false;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        const pathdata = designItem.node.getPathData({ normalize: true });
+        const items = [];
+        const lastType = pathdata[pathdata.length - 1].type;
+        items.push({ title: '-' });
+        if (lastType == 'z' || lastType == 'Z') {
+            items.push({
+                title: 'open path ', action: () => {
+                    pathdata.splice(pathdata.length - 1, 1);
+                    designItem.setAttribute('d', createPathD(pathdata));
+                }
+            });
+        }
+        else {
+            items.push({
+                title: 'close path ', action: () => {
+                    pathdata.push({ type: 'Z' });
+                    designItem.setAttribute('d', createPathD(pathdata));
+                }
+            });
+        }
+        return items;
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/RectContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class RectContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/RectContextMenu.js

@@ -0,0 +1,33 @@
+import { DesignItem } from '../../../../item/DesignItem.js';
+import { DeleteAction } from '../../../../services/undoService/transactionItems/DeleteAction.js';
+import { InsertAction } from '../../../../services/undoService/transactionItems/InsertAction.js';
+export class RectContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        if (designItem.element instanceof SVGRectElement)
+            return true;
+        return false;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [
+            {
+                title: 'convert to path', action: () => {
+                    let rect = designItem.element;
+                    let pathD = "";
+                    pathD += "M" + rect.x.baseVal.value + " " + rect.y.baseVal.value +
+                        "L" + (rect.x.baseVal.value + rect.width.baseVal.value) + " " + rect.y.baseVal.value +
+                        "L" + (rect.x.baseVal.value + rect.width.baseVal.value) + " " + (rect.y.baseVal.value + rect.height.baseVal.value) +
+                        "L" + rect.x.baseVal.value + " " + (rect.y.baseVal.value + rect.height.baseVal.value) +
+                        "Z";
+                    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    path.setAttribute("d", pathD);
+                    path.setAttribute("stroke", rect.getAttribute("stroke"));
+                    path.setAttribute("fill", rect.getAttribute("fill"));
+                    path.setAttribute("stroke-width", rect.getAttribute("stroke-width"));
+                    const di = DesignItem.createDesignItemFromInstance(path, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                    designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designItem.parent, designItem.childCount, di));
+                    designerCanvas.instanceServiceContainer.undoService.execute(new DeleteAction([designItem]));
+                }
+            }
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class RotateLeftAndRight implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js

@@ -0,0 +1,13 @@
+import { CommandType } from '../../../../../commandHandling/CommandType.js';
+import { NodeType } from '../../../../item/NodeType.js';
+export class RotateLeftAndRight {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return !designItem.isRootItem && designItem.nodeType == NodeType.Element;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: 'rotate right', action: () => { designerView.executeCommand({ type: CommandType.rotateClockwise }); }, shortCut: 'Ctrl + R' },
+            { title: 'rotate left', action: () => { designerView.executeCommand({ type: CommandType.rotateCounterClockwise }); }, shortCut: 'Ctrl + Shift + R' }
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class SelectAllChildrenContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js

@@ -0,0 +1,13 @@
+import { NodeType } from "../../../../item/NodeType.js";
+export class SelectAllChildrenContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return designItem.hasChildren;
+    }
+    provideContextMenuItems(event, designerCanvas, designItem) {
+        return [{
+                title: 'select all Children', action: () => {
+                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(Array.from(designItem.children()).filter(x => x.nodeType == NodeType.Element));
+                }
+            }];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class SeperatorContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js

@@ -0,0 +1,10 @@
+export class SeperatorContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: '-' }
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class ZMoveContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js

@@ -0,0 +1,15 @@
+import { CommandType } from '../../../../../commandHandling/CommandType.js';
+import { NodeType } from '../../../../item/NodeType.js';
+export class ZMoveContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return !designItem.isRootItem && designItem.nodeType == NodeType.Element;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: 'to front', action: () => { designerView.executeCommand({ type: CommandType.moveToFront }); } },
+            { title: 'move forward', action: () => { designerView.executeCommand({ type: CommandType.moveForward }); } },
+            { title: 'move backward', action: () => { designerView.executeCommand({ type: CommandType.moveBackward }); } },
+            { title: 'to back', action: () => { designerView.executeCommand({ type: CommandType.moveToBack }); } },
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class ZoomToElementContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerCanvas: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}