@node-projects/web-component-designer 0.0.46 → 0.0.50

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

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

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

@@ -1,7 +1,7 @@
 import { DesignItem } from "../../../../item/DesignItem";
 export class ItemsBelowContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem) {
-        return true;
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return initiator == 'designer';
     }
     provideContextMenuItems(event, designerView, designItem) {
         const lstItems = this._searchForItemsBelow(event, designerView);
@@ -31,7 +31,8 @@ export class ItemsBelowContextMenu {
                         break;
                     if (el !== designerView.overlayLayer && el.parentElement !== designerView.overlayLayer && el.getRootNode() === designerView.shadowRoot)
                         lstEl.push(el);
-                    backupPEventsMap.set(el, el.style.pointerEvents);
+                    if (!backupPEventsMap.has(el))
+                        backupPEventsMap.set(el, el.style.pointerEvents);
                     el.style.pointerEvents = 'none';
                     const oldEl = el;
                     el = designerView.elementFromPoint(event.x, event.y);

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

@@ -1,9 +1,9 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IContextMenuExtension } from "./IContextMenuExtension";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class MultipleItemsSelectedContextMenu implements IContextMenuExtension {
     orderIndex: number;
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    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/MultipleItemsSelectedContextMenu.js

@@ -1,6 +1,6 @@
 export class MultipleItemsSelectedContextMenu {
     orderIndex = 60;
-    shouldProvideContextmenu(event, designerView, designItem) {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
         if (designItem.instanceServiceContainer.selectionService.selectedElements.length > 1) {
             return true;
         }

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

@@ -1,8 +1,8 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { IContextMenuExtension } from "./IContextMenuExtension";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
 export declare class ZMoveContextMenu implements IContextMenuExtension {
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    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

@@ -1,6 +1,6 @@
 import { CommandType } from "../../../../../commandHandling/CommandType";
 export class ZMoveContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem) {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
         return true;
     }
     provideContextMenuItems(event, designerView, designItem) {

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

@@ -221,8 +221,10 @@ export class PointerTool {
                                             backupPEventsMap.set(newContainerElement, newContainerElement.style.pointerEvents);
                                             newContainerElement.style.pointerEvents = 'none';
                                             const newC = designerCanvas.elementFromPoint(event.x, event.y);
-                                            if (newContainerElement === newC)
+                                            if (newContainerElement === newC) {
+                                                newContainerElement = null;
                                                 break;
+                                            }
                                             newContainerElement = newC;
                                         }
                                     }
@@ -232,7 +234,7 @@ export class PointerTool {
                                         e[0].style.pointerEvents = e[1];
                                     }
                                 }
-                                if (newContainerElement != null) {
+                                if (newContainerElement != null) { //Check if container is in designer canvas....
                                     let p = newContainerElement;
                                     while (p != null) {
                                         if (p === designerCanvas.rootDesignItem.element)

package/dist/elements/widgets/propertyGrid/PropertyGrid copy.d.ts

@@ -0,0 +1,17 @@
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { IDesignItem } from '../../item/IDesignItem';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+    private _serviceContainer;
+    private _designerTabControl;
+    private _selectedItems;
+    private _propertyGridPropertyLists;
+    private _itemsObserver;
+    static readonly style: CSSStyleSheet;
+    constructor();
+    set serviceContainer(value: ServiceContainer);
+    get serviceContainer(): ServiceContainer;
+    get selectedItems(): IDesignItem[];
+    set selectedItems(items: IDesignItem[]);
+    private _observeItems;
+}

package/dist/elements/widgets/propertyGrid/PropertyGrid copy.js

@@ -0,0 +1,143 @@
+import { PropertyGridPropertyList } from './PropertyGridPropertyList';
+import { DesignerTabControl } from '../../controls/DesignerTabControl';
+import { BaseCustomWebComponentLazyAppend, css } from '@node-projects/base-custom-webcomponent';
+import { CssPropertiesService } from '../../services/propertiesService/services/CssPropertiesService';
+import { CommonPropertiesService } from '../../services/propertiesService/services/CommonPropertiesService';
+import { AttributesPropertiesService } from '../../services/propertiesService/services/AttributesPropertiesService';
+export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
+    _serviceContainer;
+    _designerTabControl;
+    _selectedItems;
+    _propertyGridPropertyLists;
+    _itemsObserver;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      user-select: none;
+    }
+    iron-pages {
+      overflow: hidden;
+      height: 250px;
+      background: var(--medium-grey, #2f3545);
+      color: white;
+    }
+    button:hover {
+      box-shadow: inset 0 3px 0 var(--light-grey);
+    }
+    button:focus {
+      box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
+    }
+    `;
+    constructor() {
+        super();
+        this._designerTabControl = new DesignerTabControl();
+        this.shadowRoot.appendChild(this._designerTabControl);
+        this.addEventListener('contextmenu', (e) => {
+            if (e.composedPath()[0].localName != 'input')
+                e.preventDefault();
+        });
+        this._itemsObserver = new MutationObserver((m) => {
+            for (const a of this._propertyGridPropertyLists) {
+                a.refreshForDesignItems(this._selectedItems);
+            }
+        });
+    }
+    set serviceContainer(value) {
+        this._serviceContainer = value;
+        this._propertyGridPropertyLists = [];
+        let elementPropertyEditorAttributeList = new PropertyGridPropertyList(value);
+        elementPropertyEditorAttributeList.setPropertiesService(new CssPropertiesService("styles")); //This is replace in selectedItems
+        elementPropertyEditorAttributeList.title = "properties";
+        this._designerTabControl.appendChild(elementPropertyEditorAttributeList);
+        this._propertyGridPropertyLists.push(elementPropertyEditorAttributeList);
+        let attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new AttributesPropertiesService());
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "attributes";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CommonPropertiesService());
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "common";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("set-styles"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "set-styles";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("styles"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "styles";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("alignment"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "alignment";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("grid"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "grid";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        attributeEditorAttributeList = new PropertyGridPropertyList(value);
+        attributeEditorAttributeList.setPropertiesService(new CssPropertiesService("flex"));
+        attributeEditorAttributeList.createElements(null);
+        attributeEditorAttributeList.title = "flex";
+        this._designerTabControl.appendChild(attributeEditorAttributeList);
+        this._propertyGridPropertyLists.push(attributeEditorAttributeList);
+        this._designerTabControl.selectedIndex = 0;
+    }
+    get serviceContainer() {
+        return this._serviceContainer;
+    }
+    get selectedItems() {
+        return this._selectedItems;
+    }
+    set selectedItems(items) {
+        this._selectedItems = items;
+        if (this.selectedItems && this.selectedItems.length > 0) {
+            const propService = this._serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(this.selectedItems[0]));
+            this._propertyGridPropertyLists[0].setPropertiesService(propService);
+            this._propertyGridPropertyLists[0].createElements(this.selectedItems[0]);
+            this._propertyGridPropertyLists[1].createElements(this.selectedItems[0]);
+            this._propertyGridPropertyLists[3].createElements(this.selectedItems[0]);
+        }
+        for (const a of this._propertyGridPropertyLists) {
+            a.designItemsChanged(items);
+        }
+        if (items) {
+            if (items.length == 1) {
+                for (const a of this._propertyGridPropertyLists) {
+                    a.designItemsChanged(items);
+                    a.refreshForDesignItems(items);
+                }
+                this._observeItems();
+                /*let properties = serviceContainer.forSomeServicesTillResult("propertyService", x => x.getProperties(element));
+        
+                if (properties) {
+                  let attributeEditorAttributeList = new PropertyGridPropertyList();
+                  attributeEditorAttributeList.serviceContainer = this.serviceContainer;
+                  // attributeEditorAttributeList.title =
+                  attributeEditorAttributeList.createElements(properties);
+                  this._designerTabControl.appendChild(attributeEditorAttributeList);
+                }*/
+            }
+        }
+        else {
+            this._itemsObserver.disconnect();
+        }
+    }
+    _observeItems() {
+        this._itemsObserver.disconnect();
+        this._itemsObserver.observe(this._selectedItems[0].element, { attributes: true, childList: false, characterData: false });
+    }
+}
+customElements.define('node-projects-property-grid', PropertyGrid);

package/dist/elements/widgets/propertyGrid/PropertyGrid.d.ts

@@ -1,16 +1,20 @@
 import { ServiceContainer } from '../../services/ServiceContainer';
 import { IDesignItem } from '../../item/IDesignItem';
 import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 export declare class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     private _serviceContainer;
     private _designerTabControl;
     private _selectedItems;
     private _propertyGridPropertyLists;
     private _itemsObserver;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
     static readonly style: CSSStyleSheet;
     constructor();
     set serviceContainer(value: ServiceContainer);
     get serviceContainer(): ServiceContainer;
+    set instanceServiceContainer(value: InstanceServiceContainer);
     get selectedItems(): IDesignItem[];
     set selectedItems(items: IDesignItem[]);
     private _observeItems;

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

@@ -10,18 +10,14 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     _selectedItems;
     _propertyGridPropertyLists;
     _itemsObserver;
+    _instanceServiceContainer;
+    _selectionChangedHandler;
     static style = css `
     :host {
       display: block;
       height: 100%;
       user-select: none;
     }
-    iron-pages {
-      overflow: hidden;
-      height: 250px;
-      background: var(--medium-grey, #2f3545);
-      color: white;
-    }
     button:hover {
       box-shadow: inset 0 3px 0 var(--light-grey);
     }
@@ -98,6 +94,14 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
     get serviceContainer() {
         return this._serviceContainer;
     }
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+            this.selectedItems = e.selectedElements;
+        });
+        this.selectedItems = this._instanceServiceContainer.selectionService.selectedElements;
+    }
     get selectedItems() {
         return this._selectedItems;
     }
@@ -120,15 +124,6 @@ export class PropertyGrid extends BaseCustomWebComponentLazyAppend {
                     a.refreshForDesignItems(items);
                 }
                 this._observeItems();
-                /*let properties = serviceContainer.forSomeServicesTillResult("propertyService", x => x.getProperties(element));
-        
-                if (properties) {
-                  let attributeEditorAttributeList = new PropertyGridPropertyList();
-                  attributeEditorAttributeList.serviceContainer = this.serviceContainer;
-                  // attributeEditorAttributeList.title =
-                  attributeEditorAttributeList.createElements(properties);
-                  this._designerTabControl.appendChild(attributeEditorAttributeList);
-                }*/
             }
         }
         else {

package/dist/elements/widgets/propertyGrid/PropertyGridWithHeader.d.ts

@@ -0,0 +1,15 @@
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
+export declare class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _type;
+    private _id;
+    private _pg;
+    private _selectionChangedHandler;
+    private _instanceServiceContainer;
+    constructor();
+    set serviceContainer(value: ServiceContainer);
+    set instanceServiceContainer(value: InstanceServiceContainer);
+}

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

@@ -0,0 +1,86 @@
+import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { sleep } from '../../helper/Helper.js';
+export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      user-select: none;
+      background: var(--medium-grey, #2f3545);
+      color: white;
+    }
+    div {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      padding: 3px 6px;
+      font-family: monospace; 
+      align-items: center;
+    }
+    .desc {
+      font-weight: 700;
+      font-size: 10px;
+      margin-right: 5px;
+    }
+    input {
+      background: var(--medium-grey, #2f3545);
+      border: solid 1px gray;
+      color: white;
+      width: calc(100% - 6px);
+    }
+    #type {
+      color: wheat;
+      white-space: nowrap;
+      overflow: hidden;
+      font-size: 12px;
+      height: 20px;
+    }
+    `;
+    static template = html `
+  <div>
+    <span class="desc">Type:</span><span id="type"></span>
+    <span class="desc">Id:</span><input type="text" id="id">
+  </div>
+  <node-projects-property-grid id="pg"></node-projects-property-grid>
+  `;
+    _type;
+    _id;
+    _pg;
+    _selectionChangedHandler;
+    _instanceServiceContainer;
+    constructor() {
+        super();
+        this._type = this._getDomElement('type');
+        this._id = this._getDomElement('id');
+        this._pg = this._getDomElement('pg');
+        this._id.onkeydown = e => {
+            if (e.key == 'Enter')
+                this._instanceServiceContainer.selectionService.primarySelection.id = this._id.value;
+            else if (e.key == 'Escape') {
+                this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        let pSel;
+        this._id.onfocus = e => {
+            pSel = this._instanceServiceContainer.selectionService.primarySelection;
+        };
+        this._id.onblur = e => {
+            pSel.id = this._id.value;
+        };
+    }
+    set serviceContainer(value) {
+        this._waitForChildrenReady().then(() => this._pg.serviceContainer = value);
+    }
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(async (e) => {
+            this._pg.instanceServiceContainer = value;
+            await sleep(20); // delay assignment a little bit, so onblur above could still set the value.
+            this._type.innerText = this._instanceServiceContainer.selectionService.primarySelection?.name ?? '';
+            this._id.value = this._instanceServiceContainer.selectionService.primarySelection?.id ?? '';
+        });
+    }
+}
+customElements.define('node-projects-property-grid-with-header', PropertyGridWithHeader);

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

@@ -2,16 +2,21 @@ import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-web
 import { ISelectionChangedEvent } from '../../services/selectionService/ISelectionChangedEvent';
 import { IDesignItem } from '../../item/IDesignItem';
 import { ITreeView } from './ITreeView';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
 export declare class TreeView extends BaseCustomWebComponentLazyAppend implements ITreeView {
     private _items;
     private _index;
     private _previouslySelected;
     private _treeDiv;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
+    private _contentChangedHandler;
     private _mapElementTreeitem;
     private _rootItem;
     static readonly style: CSSStyleSheet;
     constructor();
     createTree(rootItem: IDesignItem): void;
+    set instanceServiceContainer(value: InstanceServiceContainer);
     selectionChanged(event: ISelectionChangedEvent): void;
     private _recomputeTree;
     private _makeButton;

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

@@ -5,6 +5,9 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
     _index;
     _previouslySelected;
     _treeDiv;
+    _instanceServiceContainer;
+    _selectionChangedHandler;
+    _contentChangedHandler;
     _mapElementTreeitem;
     _rootItem;
     //TODO, buuton so key events can be transfered to designer Cnvas (so you can move controls with keys)
@@ -115,6 +118,18 @@ export class TreeView extends BaseCustomWebComponentLazyAppend {
             this._recomputeTree(rootItem.element, null /*, activeElement */);
     }
     // this.instanceServiceContainer.selectionService.setSelectedElements(null);
+    set instanceServiceContainer(value) {
+        this._instanceServiceContainer = value;
+        this._selectionChangedHandler?.dispose();
+        this._selectionChangedHandler = this._instanceServiceContainer.selectionService.onSelectionChanged.on(e => {
+            this.selectionChanged(e);
+        });
+        this._contentChangedHandler?.dispose();
+        this._contentChangedHandler = this._instanceServiceContainer.contentService.onContentChanged.on(e => {
+            this.createTree(value.contentService.rootDesignItem);
+        });
+        this.createTree(value.contentService.rootDesignItem);
+    }
     selectionChanged(event) {
         if (event.selectedElements.length > 0) {
             this._selectTreeElements(event.selectedElements.map(x => this._mapElementTreeitem.get(x.element)));

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

@@ -2,10 +2,15 @@ import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-cus
 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';
 export declare class TreeViewExtended extends BaseCustomWebComponentConstructorAppend implements ITreeView {
     private _treeDiv;
     private _tree;
     private _filter;
+    private _instanceServiceContainer;
+    private _selectionChangedHandler;
+    private _contentChangedHandler;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
@@ -15,8 +20,10 @@ 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;
     ready(): Promise<void>;
     createTree(rootItem: IDesignItem): void;
+    set instanceServiceContainer(value: InstanceServiceContainer);
     selectionChanged(event: ISelectionChangedEvent): void;
     private _recomputeTree;
     private _getChildren;