@node-projects/web-component-designer 0.0.66 → 0.0.70

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

@@ -1,22 +1,22 @@
-import { AbstractExtension } from './AbstractExtension';
-export class SelectionDefaultExtension extends AbstractExtension {
-    _rect;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        this.refresh();
-    }
-    refresh() {
-        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
-        const computedStyle = getComputedStyle(this.extendedItem.element);
-        const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
-        const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
-        const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
-        const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
-        this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-selection', this._rect);
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { AbstractExtension } from './AbstractExtension';
+export class SelectionDefaultExtension extends AbstractExtension {
+    _rect;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+        const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+        const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
+        const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
+        this._rect = this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top + itemRect.height + bottom, 'svg-selection', this._rect);
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,10 +1,10 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class SelectionDefaultExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class SelectionDefaultExtensionProvider 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/SelectionDefaultExtensionProvider.js

@@ -1,13 +1,13 @@
-import { SelectionDefaultExtension } from "./SelectionDefaultExtension";
-import { css } from "@node-projects/base-custom-webcomponent";
-export class SelectionDefaultExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        return true;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new SelectionDefaultExtension(extensionManager, designerView, designItem);
-    }
+import { SelectionDefaultExtension } from "./SelectionDefaultExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class SelectionDefaultExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        return true;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new SelectionDefaultExtension(extensionManager, designerView, designItem);
+    }
     style = css `
     .svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; /*pointer-events: all;*/ }
-  `;
-}
+  `;
+}

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

@@ -1,14 +1,14 @@
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { AbstractExtension } from './AbstractExtension';
-import { IExtensionManager } from "./IExtensionManger";
-export declare class TransformOriginExtension extends AbstractExtension {
-    private _startPos;
-    private _circle;
-    private _circle2;
-    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
-    extend(): void;
-    pointerEvent(event: PointerEvent): void;
-    refresh(): void;
-    dispose(): void;
-}
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { AbstractExtension } from './AbstractExtension';
+import { IExtensionManager } from "./IExtensionManger";
+export declare class TransformOriginExtension extends AbstractExtension {
+    private _startPos;
+    private _circle;
+    private _circle2;
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    pointerEvent(event: PointerEvent): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -1,68 +1,68 @@
-import { EventNames } from "../../../../enums/EventNames";
-import { AbstractExtension } from './AbstractExtension';
-export class TransformOriginExtension extends AbstractExtension {
-    _startPos;
-    _circle;
-    _circle2;
-    constructor(extensionManager, designerView, extendedItem) {
-        super(extensionManager, designerView, extendedItem);
-    }
-    extend() {
-        const rect = this.extendedItem.element.getBoundingClientRect();
-        const computed = getComputedStyle(this.extendedItem.element);
-        const to = computed.transformOrigin.split(' ');
-        this._circle = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 5, 'svg-transform-origin');
-        this._circle.setAttribute('style', 'cursor: pointer');
-        this._circle2 = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 1, 'svg-transform-origin');
-        this._circle2.setAttribute('style', 'pointer-events: 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
-    }
-    pointerEvent(event) {
-        event.stopPropagation();
-        const rect = this.extendedItem.element.getBoundingClientRect();
-        const computed = getComputedStyle(this.extendedItem.element);
-        const to = computed.transformOrigin.split(' ');
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                this._startPos = { x: event.x, y: event.y };
-                break;
-            case EventNames.PointerMove:
-                if (this._startPos && event.buttons > 0) {
-                    const dx = event.x - this._startPos.x;
-                    const dy = event.y - this._startPos.y;
-                    this._circle.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
-                    this._circle2.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
-                    this._circle2.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                if (this._startPos) {
-                    const dx = event.x - this._startPos.x;
-                    const dy = event.y - this._startPos.y;
-                    const x = Number.parseFloat(to[0].replace('px', ''));
-                    const y = Number.parseFloat(to[1].replace('px', ''));
-                    const newX = (dx + x);
-                    const newY = (dy + y);
-                    const przX = Math.round(newX / rect.width * 10000) / 100; //round to 2 decimal places
-                    const przY = Math.round(newY / rect.height * 10000) / 100;
-                    //this.extendedItem.setStyle('transform-origin',newX + 'px ' + newY + 'px');
-                    this.extendedItem.setStyle('transform-origin', przX + '% ' + przY + '%');
-                    this.refresh();
-                    this._startPos = null;
-                }
-                break;
-        }
-    }
-    refresh() {
-        this._removeAllOverlays();
-        this.extend();
-    }
-    dispose() {
-        this._removeAllOverlays();
-    }
-}
+import { EventNames } from "../../../../enums/EventNames";
+import { AbstractExtension } from './AbstractExtension';
+export class TransformOriginExtension extends AbstractExtension {
+    _startPos;
+    _circle;
+    _circle2;
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        const rect = this.extendedItem.element.getBoundingClientRect();
+        const computed = getComputedStyle(this.extendedItem.element);
+        const to = computed.transformOrigin.split(' ');
+        this._circle = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 5, 'svg-transform-origin');
+        this._circle.setAttribute('style', 'cursor: pointer');
+        this._circle2 = this._drawCircle((rect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + Number.parseFloat(to[0].replace('px', '')), (rect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + Number.parseFloat(to[1].replace('px', '')), 1, 'svg-transform-origin');
+        this._circle2.setAttribute('style', 'pointer-events: 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
+    }
+    pointerEvent(event) {
+        event.stopPropagation();
+        const rect = this.extendedItem.element.getBoundingClientRect();
+        const computed = getComputedStyle(this.extendedItem.element);
+        const to = computed.transformOrigin.split(' ');
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._startPos = { x: event.x, y: event.y };
+                break;
+            case EventNames.PointerMove:
+                if (this._startPos && event.buttons > 0) {
+                    const dx = event.x - this._startPos.x;
+                    const dy = event.y - this._startPos.y;
+                    this._circle.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
+                    this._circle.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
+                    this._circle2.setAttribute('cx', (rect.x - this.designerCanvas.containerBoundingRect.x + Number.parseFloat(to[0].replace('px', '')) + dx));
+                    this._circle2.setAttribute('cy', (rect.y - this.designerCanvas.containerBoundingRect.y + Number.parseFloat(to[1].replace('px', '')) + dy));
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                if (this._startPos) {
+                    const dx = event.x - this._startPos.x;
+                    const dy = event.y - this._startPos.y;
+                    const x = Number.parseFloat(to[0].replace('px', ''));
+                    const y = Number.parseFloat(to[1].replace('px', ''));
+                    const newX = (dx + x);
+                    const newY = (dy + y);
+                    const przX = Math.round(newX / rect.width * 10000) / 100; //round to 2 decimal places
+                    const przY = Math.round(newY / rect.height * 10000) / 100;
+                    //this.extendedItem.setStyle('transform-origin',newX + 'px ' + newY + 'px');
+                    this.extendedItem.setStyle('transform-origin', przX + '% ' + przY + '%');
+                    this.refresh();
+                    this._startPos = null;
+                }
+                break;
+        }
+    }
+    refresh() {
+        this._removeAllOverlays();
+        this.extend();
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

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

@@ -1,10 +1,10 @@
-import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
-import { IDesignItem } from "../../../item/IDesignItem";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { IDesignerExtension } from "./IDesignerExtension";
-import { IExtensionManager } from "./IExtensionManger";
-export declare class TransformOriginExtensionProvider implements IDesignerExtensionProvider {
-    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
-    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
-    readonly style: CSSStyleSheet;
-}
+import { IDesignerExtensionProvider } from "./IDesignerExtensionProvider";
+import { IDesignItem } from "../../../item/IDesignItem";
+import { IDesignerCanvas } from "../IDesignerCanvas";
+import { IDesignerExtension } from "./IDesignerExtension";
+import { IExtensionManager } from "./IExtensionManger";
+export declare class TransformOriginExtensionProvider 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/TransformOriginExtensionProvider.js

@@ -1,15 +1,15 @@
-import { TransformOriginExtension } from "./TransformOriginExtension";
-import { css } from "@node-projects/base-custom-webcomponent";
-export class TransformOriginExtensionProvider {
-    shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg'))
-            return true;
-        return false;
-    }
-    getExtension(extensionManager, designerView, designItem) {
-        return new TransformOriginExtension(extensionManager, designerView, designItem);
-    }
+import { TransformOriginExtension } from "./TransformOriginExtension";
+import { css } from "@node-projects/base-custom-webcomponent";
+export class TransformOriginExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg'))
+            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/contextMenu/CopyPasteContextMenu.d.ts

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

@@ -1,16 +1,16 @@
-import { CommandType } from "../../../../../commandHandling/CommandType";
-export class CopyPasteContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        return true;
-    }
-    provideContextMenuItems(event, designerView, designItem) {
-        return [
-            { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); } },
-            { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); } },
-            { title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); } },
-            { title: '-' },
-            { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); } },
-            { title: '-' }
-        ];
-    }
-}
+import { CommandType } from "../../../../../commandHandling/CommandType";
+export class CopyPasteContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: 'copy', action: () => { designerView.executeCommand({ type: CommandType.copy }); } },
+            { title: 'cut', action: () => { designerView.executeCommand({ type: CommandType.cut }); } },
+            { title: 'paste', action: () => { designerView.executeCommand({ type: CommandType.paste }); } },
+            { title: '-' },
+            { title: 'delete', action: () => { designerView.executeCommand({ type: CommandType.delete }); } },
+            { title: '-' }
+        ];
+    }
+}

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

@@ -1,8 +1,8 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
-import { IDesignItem } from "../../../../item/IDesignItem";
-import { IDesignerCanvas } from "../../IDesignerCanvas";
-export declare 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[];
-}
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+export declare 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

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

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

@@ -1,10 +1,10 @@
-import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
-import { IDesignItem } from "../../../../item/IDesignItem";
-import { IDesignerCanvas } from "../../IDesignerCanvas";
-import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
-export declare class ItemsBelowContextMenu implements IContextMenuExtension {
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
-    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
-    private _select;
-    private _searchForItemsBelow;
-}
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class ItemsBelowContextMenu implements IContextMenuExtension {
+    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,51 +1,51 @@
-import { DesignItem } from "../../../../item/DesignItem";
-export class ItemsBelowContextMenu {
-    shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        return initiator == 'designer';
-    }
-    provideContextMenuItems(event, designerView, designItem) {
-        const lstItems = this._searchForItemsBelow(event, designerView);
-        if (lstItems.length > 0) {
-            //TODO: create a submenu 'select items below...'
-            return [{ title: '-' }, ...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerView, x) }))];
-        }
-        return [];
-    }
-    _select(designerView, element) {
-        const item = DesignItem.GetOrCreateDesignItem(element, designerView.serviceContainer, designerView.instanceServiceContainer);
-        designerView.instanceServiceContainer.selectionService.setSelectedElements([item]);
-    }
-    _searchForItemsBelow(event, designerView) {
-        const lstEl = [];
-        //search for containers below mouse cursor.
-        //to do this, we need to disable pointer events for each in a loop and search wich element is there
-        let backupPEventsMap = new Map();
-        try {
-            let el = designerView.elementFromPoint(event.x, event.y);
-            backupPEventsMap.set(el, el.style.pointerEvents);
-            el.style.pointerEvents = 'none';
-            if (el !== designerView.rootDesignItem.element) {
-                el = designerView.elementFromPoint(event.x, event.y);
-                while (el != null) {
-                    if (el === designerView.rootDesignItem.element)
-                        break;
-                    if (el !== designerView.overlayLayer && el.parentElement !== designerView.overlayLayer && el.getRootNode() === designerView.shadowRoot)
-                        lstEl.push(el);
-                    if (!backupPEventsMap.has(el))
-                        backupPEventsMap.set(el, el.style.pointerEvents);
-                    el.style.pointerEvents = 'none';
-                    const oldEl = el;
-                    el = designerView.elementFromPoint(event.x, event.y);
-                    if (oldEl === el)
-                        break;
-                }
-            }
-        }
-        finally {
-            for (let e of backupPEventsMap.entries()) {
-                e[0].style.pointerEvents = e[1];
-            }
-        }
-        return lstEl;
-    }
-}
+import { DesignItem } from "../../../../item/DesignItem";
+export class ItemsBelowContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return initiator == 'designer';
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        const lstItems = this._searchForItemsBelow(event, designerView);
+        if (lstItems.length > 0) {
+            //TODO: create a submenu 'select items below...'
+            return [{ title: '-' }, ...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerView, x) }))];
+        }
+        return [];
+    }
+    _select(designerView, element) {
+        const item = DesignItem.GetOrCreateDesignItem(element, designerView.serviceContainer, designerView.instanceServiceContainer);
+        designerView.instanceServiceContainer.selectionService.setSelectedElements([item]);
+    }
+    _searchForItemsBelow(event, designerView) {
+        const lstEl = [];
+        //search for containers below mouse cursor.
+        //to do this, we need to disable pointer events for each in a loop and search wich element is there
+        let backupPEventsMap = new Map();
+        try {
+            let el = designerView.elementFromPoint(event.x, event.y);
+            backupPEventsMap.set(el, el.style.pointerEvents);
+            el.style.pointerEvents = 'none';
+            if (el !== designerView.rootDesignItem.element) {
+                el = designerView.elementFromPoint(event.x, event.y);
+                while (el != null) {
+                    if (el === designerView.rootDesignItem.element)
+                        break;
+                    if (el !== designerView.overlayLayer && el.parentElement !== designerView.overlayLayer && el.getRootNode() === designerView.shadowRoot)
+                        lstEl.push(el);
+                    if (!backupPEventsMap.has(el))
+                        backupPEventsMap.set(el, el.style.pointerEvents);
+                    el.style.pointerEvents = 'none';
+                    const oldEl = el;
+                    el = designerView.elementFromPoint(event.x, event.y);
+                    if (oldEl === el)
+                        break;
+                }
+            }
+        }
+        finally {
+            for (let e of backupPEventsMap.entries()) {
+                e[0].style.pointerEvents = e[1];
+            }
+        }
+        return lstEl;
+    }
+}

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 { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
-export declare class MultipleItemsSelectedContextMenu implements IContextMenuExtension {
-    orderIndex: number;
-    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
-    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
-}
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class MultipleItemsSelectedContextMenu implements IContextMenuExtension {
+    orderIndex: number;
+    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,22 +1,22 @@
-export class MultipleItemsSelectedContextMenu {
-    orderIndex = 60;
-    shouldProvideContextmenu(event, designerView, designItem, initiator) {
-        if (designItem.instanceServiceContainer.selectionService.selectedElements.length > 1) {
-            return true;
-        }
-        return false;
-    }
-    provideContextMenuItems(event, designerView, designItem) {
-        return [
-            {
-                title: 'wrap in',
-                children: [
-                    {
-                        title: 'div',
-                        action: () => { }
-                    }
-                ]
-            }
-        ];
-    }
-}
+export class MultipleItemsSelectedContextMenu {
+    orderIndex = 60;
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        if (designItem.instanceServiceContainer.selectionService.selectedElements.length > 1) {
+            return true;
+        }
+        return false;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            {
+                title: 'wrap in',
+                children: [
+                    {
+                        title: 'div',
+                        action: () => { }
+                    }
+                ]
+            }
+        ];
+    }
+}

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