@node-projects/web-component-designer 0.0.125 → 0.0.127

package/ACKNOWLEDGMENTS

@@ -4,4 +4,6 @@
   https://github.com/PolymerLabs/wizzywid
   This was a start for this whole project (even if mostly nothing of the original code is left)
 - Thanks to @chdh for plain-scrollbar component
-  https://github.com/chdh/plain-scrollbar
+  https://github.com/chdh/plain-scrollbar
+- Thanks to @m-thalmann for contextmenujs
+  https://github.com/m-thalmann/contextmenujs (also we have heavily modified it)

package/dist/elements/helper/contextMenu/ContextMenu.d.ts

@@ -0,0 +1,29 @@
+import { IContextMenuItem } from "./IContextMenuItem";
+export interface IContextMenuOptions {
+    defaultIcon?: string;
+    subIcon?: string;
+    mouseOffset?: number;
+    shadowRoot?: ShadowRoot | Document;
+}
+export declare class ContextMenu {
+    private static _contextMenuCss;
+    static count: number;
+    menu: IContextMenuItem[];
+    options: IContextMenuOptions;
+    private num;
+    private _windowDownBound;
+    private _windowUpBound;
+    private _windowKeyUpBound;
+    private _windowResizeBound;
+    private _menuElement;
+    constructor(menu: IContextMenuItem[], options?: IContextMenuOptions);
+    reload(): void;
+    renderLevel(level: IContextMenuItem[]): HTMLUListElement;
+    display(event: MouseEvent): void;
+    _windowResize(): void;
+    _windowDown(e: MouseEvent): void;
+    _windowUp(e: MouseEvent): void;
+    _windowKeyUp(e: KeyboardEvent): void;
+    static show(menu: IContextMenuItem[], event: MouseEvent, options?: IContextMenuOptions): ContextMenu;
+    close(): void;
+}

package/dist/elements/helper/contextMenu/ContextMenu.js

@@ -0,0 +1,304 @@
+import { css } from "@node-projects/base-custom-webcomponent";
+export class ContextMenu {
+    static _contextMenuCss = css `
+	  .context_menu {
+		position: fixed;
+		opacity: 0;
+		transform: scale(0);
+		transition: transform 0.1s;
+		transform-origin: top left;
+		padding: 0;
+	  }
+	  
+	  .context_menu.display {
+		opacity: 1;
+		transform: scale(1);
+	  }
+	  
+	  .context_menu,
+	  .context_menu * {
+		box-sizing: border-box;
+	  }
+	  
+	  .context_menu * {
+		position: relative;
+	  }
+	  
+	  .context_menu ul {
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+		background-color: #ccc;
+		box-shadow: 0 0 5px #333;
+	  }
+	  
+	  .context_menu li {
+		padding: 0;
+		padding-right: 1.7em;
+		cursor: pointer;
+		white-space: nowrap;
+	  }
+	  
+	  .context_menu li:hover {
+		background-color: #bbb;
+	  }
+	  
+	  .context_menu li .cm_icon_span {
+		width: 1.5em;
+		height: 1.2em;
+		vertical-align: bottom;
+		display: inline-block;
+		border-right: 1px solid #aaa;
+		margin-right: 5px;
+		padding-right: 5px;
+		text-align: center;
+	  }
+	  
+	  .context_menu li .cm_sub_span {
+		width: 1em;
+		display: inline-block;
+		text-align: center;
+		position: absolute;
+		top: 50%;
+		right: 0.5em;
+		transform: translateY(-50%);
+	  }
+	  
+	  .context_menu li>ul {
+		position: absolute;
+		top: 0;
+		left: 100%;
+		opacity: 0;
+		transition: opacity 0.2s;
+		visibility: hidden;
+	  }
+	  
+	  .context_menu li:hover>ul {
+		opacity: 1;
+		visibility: visible;
+	  }
+	  
+	  .context_menu li.cm_divider {
+		border-bottom: 1px solid #aaa;
+		margin: 5px;
+		padding: 0;
+		cursor: default;
+	  }
+	  
+	  .context_menu li.cm_divider:hover {
+		background-color: inherit;
+	  }
+	  
+	  .context_menu.cm_border_right>ul ul {
+		left: unset;
+		right: 100%;
+	  }
+	  
+	  .context_menu.cm_border_bottom>ul ul {
+		top: unset;
+		bottom: 0;
+	  }
+	  
+	  .context_menu li[disabled=""] {
+		color: #777;
+		cursor: default;
+	  }
+	  
+	  .context_menu li[disabled=""]:hover {
+		background-color: inherit;
+	  }`;
+    static count = 0;
+    menu;
+    options;
+    num;
+    _windowDownBound;
+    _windowUpBound;
+    _windowKeyUpBound;
+    _windowResizeBound;
+    _menuElement;
+    constructor(menu, options) {
+        this.num = ContextMenu.count++;
+        this.menu = menu;
+        this.options = options;
+        this.reload();
+        this._windowDownBound = this._windowDown.bind(this);
+        this._windowUpBound = this._windowUp.bind(this);
+        this._windowKeyUpBound = this._windowKeyUp.bind(this);
+        this._windowResizeBound = this._windowResize.bind(this);
+    }
+    reload() {
+        let shadowRoot = this.options?.shadowRoot ?? document;
+        if (this._menuElement == null) {
+            this._menuElement = document.createElement("div");
+            this._menuElement.className = "context_menu";
+            this._menuElement.id = "cm_" + this.num;
+            if (shadowRoot === document)
+                document.body.appendChild(this._menuElement);
+            else
+                shadowRoot.appendChild(this._menuElement);
+        }
+        this._menuElement.innerHTML = "";
+        if (shadowRoot.adoptedStyleSheets.indexOf(ContextMenu._contextMenuCss) < 0) {
+            shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, ContextMenu._contextMenuCss];
+        }
+        this._menuElement.appendChild(this.renderLevel(this.menu));
+    }
+    renderLevel(level) {
+        let ul_outer = document.createElement("ul");
+        let lastWasDivider = false;
+        level.forEach((item) => {
+            let li = document.createElement("li");
+            if (item.title !== '-') {
+                let icon_span = document.createElement("span");
+                icon_span.className = 'cm_icon_span';
+                if ((item.icon ?? '') != '') {
+                    icon_span.innerHTML = item.icon;
+                }
+                else {
+                    icon_span.innerHTML = this.options?.defaultIcon ?? '';
+                }
+                let text_span = document.createElement("span");
+                text_span.className = 'cm_text';
+                text_span.innerHTML = item.title;
+                let sub_span = document.createElement("span");
+                sub_span.className = 'cm_sub_span';
+                if (item.children != null) {
+                    sub_span.innerHTML = this.options?.subIcon ?? '&#155;';
+                }
+                li.appendChild(icon_span);
+                li.appendChild(text_span);
+                li.appendChild(sub_span);
+                if (item.disabled) {
+                    li.setAttribute("disabled", "");
+                }
+                else {
+                    if (item.action)
+                        li.addEventListener('click', (e) => {
+                            item.action(e, item);
+                            this.close();
+                        });
+                    if (item.children != null) {
+                        li.appendChild(this.renderLevel(item.children));
+                    }
+                }
+                lastWasDivider = false;
+                ul_outer.appendChild(li);
+            }
+            else {
+                if (!lastWasDivider) {
+                    li.className = "cm_divider";
+                    lastWasDivider = true;
+                    ul_outer.appendChild(li);
+                }
+            }
+        });
+        return ul_outer;
+    }
+    display(event) {
+        let menu = this._menuElement;
+        let clickCoords = { x: event.clientX, y: event.clientY };
+        let clickCoordsX = clickCoords.x;
+        let clickCoordsY = clickCoords.y;
+        let menuWidth = menu.offsetWidth + 4;
+        let menuHeight = menu.offsetHeight + 4;
+        let windowWidth = window.innerWidth;
+        let windowHeight = window.innerHeight;
+        let mouseOffset = this.options?.mouseOffset != null ? this.options.mouseOffset : 2;
+        if ((windowWidth - clickCoordsX) < menuWidth) {
+            menu.style.left = windowWidth - menuWidth + "px";
+        }
+        else {
+            menu.style.left = (clickCoordsX + mouseOffset) + "px";
+        }
+        if ((windowHeight - clickCoordsY) < menuHeight) {
+            menu.style.top = windowHeight - menuHeight + "px";
+        }
+        else {
+            menu.style.top = (clickCoordsY + mouseOffset) + "px";
+        }
+        let sizes = ContextUtil.getSizes(menu);
+        if ((windowWidth - clickCoordsX) < sizes.width) {
+            menu.classList.add("cm_border_right");
+        }
+        else {
+            menu.classList.remove("cm_border_right");
+        }
+        if ((windowHeight - clickCoordsY) < sizes.height) {
+            menu.classList.add("cm_border_bottom");
+        }
+        else {
+            menu.classList.remove("cm_border_bottom");
+        }
+        menu.classList.add("display");
+        window.addEventListener("keyup", this._windowKeyUpBound);
+        window.addEventListener("mousedown", this._windowDownBound);
+        window.addEventListener("mouseup", this._windowUpBound);
+        window.addEventListener("resize", this._windowResizeBound);
+        event.preventDefault();
+    }
+    _windowResize() {
+        this.close();
+    }
+    _windowDown(e) {
+        const p = e.composedPath();
+        if (p.indexOf(this._menuElement) < 0)
+            this.close();
+    }
+    _windowUp(e) {
+        const p = e.composedPath();
+        if (p.indexOf(this._menuElement) < 0)
+            this.close();
+    }
+    _windowKeyUp(e) {
+        if (e.key === 'Escape') {
+            this.close();
+        }
+    }
+    static show(menu, event, options) {
+        let ctxMenu = new ContextMenu(menu, options);
+        ctxMenu.display(event);
+        return ctxMenu;
+    }
+    close() {
+        this._menuElement.remove();
+        window.removeEventListener("keyup", this._windowKeyUpBound);
+        window.removeEventListener("mousedown", this._windowDownBound);
+        window.removeEventListener("mouseup", this._windowUpBound);
+        window.removeEventListener("resize", this._windowResizeBound);
+    }
+}
+class ContextUtil {
+    static getSizes(obj) {
+        let lis = obj.getElementsByTagName('li');
+        let width_def = 0;
+        let height_def = 0;
+        for (let i = 0; i < lis.length; i++) {
+            let li = lis[i];
+            if (li.offsetWidth > width_def) {
+                width_def = li.offsetWidth;
+            }
+            if (li.offsetHeight > height_def) {
+                height_def = li.offsetHeight;
+            }
+        }
+        let width = width_def;
+        let height = height_def;
+        for (let i = 0; i < lis.length; i++) {
+            let li = lis[i];
+            let ul = li.getElementsByTagName('ul');
+            if (typeof ul[0] !== "undefined") {
+                let ul_size = ContextUtil.getSizes(ul[0]);
+                if (width_def + ul_size.width > width) {
+                    width = width_def + ul_size.width;
+                }
+                if (height_def + ul_size.height > height) {
+                    height = height_def + ul_size.height;
+                }
+            }
+        }
+        return {
+            "width": width,
+            "height": height
+        };
+    }
+}

package/dist/elements/helper/contextMenu/{IContextmenuItem.d.ts → IContextMenuItem.d.ts}

@@ -1,7 +1,8 @@
 export interface IContextMenuItem {
-    readonly title: string;
+    readonly title?: string;
     readonly icon?: string;
-    readonly action?: (e: HTMLElement, args?: Event) => void;
     readonly children?: IContextMenuItem[];
+    readonly disabled?: boolean;
     readonly shortCut?: string;
+    action?: (event: MouseEvent, item: IContextMenuItem) => void;
 }

package/dist/elements/helper/contextMenu/{IContextmenuItem.js → IContextMenuItem.js}

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

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

@@ -4,7 +4,6 @@ import { IDesignItem } from '../../item/IDesignItem';
 import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { IDesignerCanvas } from './IDesignerCanvas';
 import { Snaplines } from './Snaplines';
-import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { IPlacementView } from './IPlacementView';
 import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
 import { IUiCommand } from '../../../commandHandling/IUiCommand';
@@ -15,6 +14,7 @@ import { OverlayLayerView } from './overlayLayerView';
 import { IRect } from "../../../interfaces/IRect.js";
 import { ISize } from "../../../interfaces/ISize.js";
 import { ITool } from "./tools/ITool.js";
+import { ContextMenu } from "../../helper/contextMenu/ContextMenu";
 export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
@@ -87,7 +87,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _onDragOver;
     private _getPossibleContainerForDrop;
     private _onDrop;
-    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenu;
     private _onDblClick;
     private onKeyUp;
     private onKeyDown;

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

@@ -8,7 +8,6 @@ import { dragDropFormatNameElementDefinition, dragDropFormatNameBindingObject }
 import { ContentService } from '../../services/contentService/ContentService';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
 import { Snaplines } from './Snaplines';
-import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction';
 import { CommandType } from '../../../commandHandling/CommandType';
 import { DefaultHtmlParserService } from "../../services/htmlParserService/DefaultHtmlParserService";
@@ -20,6 +19,7 @@ import { dataURItoBlob, exportData, sleep } from "../../helper/Helper";
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 import { OverlayLayer } from "./extensions/OverlayLayer";
 import { OverlayLayerView } from './overlayLayerView';
+import { ContextMenu } from "../../helper/contextMenu/ContextMenu";
 export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     // Public Properties
     serviceContainer;
@@ -639,8 +639,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 mnuItems.push(...cme.provideContextMenuItems(event, this, designItem));
             }
         }
-        this._currentContextMenu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
-        return this._currentContextMenu;
+        let ctxMenu = new ContextMenu(mnuItems, null);
+        ctxMenu.display(event);
+        return ctxMenu;
     }
     _onDblClick(event) {
         event.preventDefault();

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 export declare type ContextmenuInitiator = 'designer' | 'treeView' | 'other';

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";

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

@@ -6,8 +6,7 @@ export class ItemsBelowContextMenu {
     provideContextMenuItems(event, designerCanvas, designItem) {
         const lstItems = designerCanvas.elementsFromPoint(event.x, event.y);
         if (lstItems.length > 0) {
-            //TODO: create a submenu 'select items below...'
-            return [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))];
+            return [{ title: 'items below', children: [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))] }];
         }
         return [];
     }

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";

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

@@ -1,4 +1,4 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";

package/dist/elements/widgets/designerView/extensions/svg/PathExtension.js

@@ -2,7 +2,7 @@ import { AbstractExtension } from "../AbstractExtension";
 import "../../../../helper/PathDataPolyfill";
 import { EventNames } from "../../../../../enums/EventNames";
 import { createPathD } from "../../../../helper/PathDataPolyfill";
-import { ContextMenuHelper } from "../../../../helper/contextMenu/ContextMenuHelper";
+import { ContextMenu } from "../../../../helper/contextMenu/ContextMenu";
 export class PathExtension extends AbstractExtension {
     _lastPos;
     _parentRect;
@@ -253,7 +253,7 @@ export class PathExtension extends AbstractExtension {
         circle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, circle, p, index));
         circle.addEventListener(EventNames.ContextMenu, event => {
             event.preventDefault();
-            ContextMenuHelper.showContextMenu(null, event, null, items);
+            ContextMenu.show(items, event);
         });
     }
     _drawPathLine(x1, y1, x2, y2) {

package/dist/elements/widgets/designerView/tools/PointerTool.js

@@ -46,7 +46,7 @@ export class PointerTool {
                 if (s.stopEventHandling(designerCanvas, event, currentElement))
                     return;
             }
-        if (event.button == 2) {
+        if (event.button == 2 && event.type == EventNames.PointerDown) {
             this._showContextMenu(event, designerCanvas);
             return;
         }

package/dist/elements/widgets/propertyGrid/PropertyGridPropertyList.js

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentLazyAppend, css, DomHelper } from '@node-projects/base-custom-webcomponent';
-import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { ValueType } from '../../services/propertiesService/ValueType';
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
 export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
     _div;
     _propertyMap = new Map();
@@ -146,7 +146,7 @@ export class PropertyGridPropertyList extends BaseCustomWebComponentLazyAppend {
             ]);
         }
         ;
-        ContextMenuHelper.showContextMenu(null, event, null, ctxMenu);
+        ContextMenu.show(ctxMenu, event);
     }
     designItemsChanged(designItems) {
         this._designItems = designItems;

package/dist/elements/widgets/treeView/treeViewExtended.d.ts

@@ -3,7 +3,7 @@ import { ITreeView } from './ITreeView';
 import { IDesignItem } from '../../item/IDesignItem';
 import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper.js';
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
 export declare class TreeViewExtended extends BaseCustomWebComponentConstructorAppend implements ITreeView {
     private _treeDiv;
     private _tree;
@@ -21,7 +21,7 @@ export declare class TreeViewExtended extends BaseCustomWebComponentConstructorA
     _switchLockAtDesignTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
     _showHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
     _switchHideAtRunTimeState(img: HTMLImageElement, designItem: IDesignItem): void;
-    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenu;
     ready(): Promise<void>;
     createTree(rootItem: IDesignItem): void;
     set instanceServiceContainer(value: InstanceServiceContainer);

package/dist/elements/widgets/treeView/treeViewExtended.js

@@ -1,7 +1,7 @@
 import { css, html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
 import { NodeType } from '../../item/NodeType';
 import { assetsPath } from '../../../Constants';
-import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper.js';
+import { ContextMenu } from '../../helper/contextMenu/ContextMenu';
 export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
     _treeDiv;
     _tree;
@@ -157,7 +157,7 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                 mnuItems.push(...cme.provideContextMenuItems(event, designItem.instanceServiceContainer.designerCanvas, designItem));
             }
         }
-        let ctxMnu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
+        let ctxMnu = ContextMenu.show(mnuItems, event);
         return ctxMnu;
     }
     async ready() {
@@ -185,8 +185,8 @@ export class TreeViewExtended extends BaseCustomWebComponentConstructorAppend {
                 let node = data.node;
                 if (node.tr.children[0]) {
                     let designItem = node.data.ref;
+                    node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
                     if (designItem && designItem.nodeType === NodeType.Element && designItem !== designItem.instanceServiceContainer.contentService.rootDesignItem) {
-                        node.tr.oncontextmenu = (e) => this.showDesignItemContextMenu(designItem, e);
                         node.tr.onmouseenter = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(designItem.element);
                         node.tr.onmouseleave = (e) => designItem.instanceServiceContainer.designerCanvas.showHoverExtension(null);
                         let d = document.createElement("div");

package/dist/index.d.ts

@@ -9,9 +9,9 @@ export * from "./elements/helper/PathDataPolyfill.js";
 export * from "./elements/helper/Screenshot.js";
 export * from "./elements/loader/OldCustomElementsManifestLoader.js";
 export * from "./elements/helper/w3color.js";
-export * from "./elements/helper/contextMenu/ContextMenuHelper.js";
+export * from "./elements/helper/contextMenu/ContextMenu.js";
 export * from "./elements/helper/Helper.js";
-export type { IContextMenuItem } from "./elements/helper/contextMenu/IContextmenuItem.js";
+export type { IContextMenuItem } from "./elements/helper/contextMenu/IContextMenuItem.js";
 export * from "./elements/item/DesignItem.js";
 export type { IDesignItem } from "./elements/item/IDesignItem.js";
 export type { IBinding } from "./elements/item/IBinding.js";

package/dist/index.js

@@ -9,7 +9,7 @@ export * from "./elements/helper/PathDataPolyfill.js";
 export * from "./elements/helper/Screenshot.js";
 export * from "./elements/loader/OldCustomElementsManifestLoader.js";
 export * from "./elements/helper/w3color.js";
-export * from "./elements/helper/contextMenu/ContextMenuHelper.js";
+export * from "./elements/helper/contextMenu/ContextMenu.js";
 export * from "./elements/helper/Helper.js";
 export * from "./elements/item/DesignItem.js";
 export * from "./elements/item/BindingMode.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.125",
+  "version": "0.0.127",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,7 +13,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.10.1",
+    "@node-projects/base-custom-webcomponent": "^0.10.3",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {

package/dist/elements/helper/KeyNameHelper.js

@@ -1 +0,0 @@
-"use strict";