@node-projects/web-component-designer 0.0.48 → 0.0.52

package/dist/elements/helper/GridHelper.d.ts

@@ -0,0 +1,16 @@
+import { IDesignItem } from "../item/IDesignItem.js";
+export declare function CalculateGridInformation(designItem: IDesignItem): {
+    cells?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        name: string;
+    }[][];
+    gaps?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }[];
+};

package/dist/elements/helper/GridHelper.js

@@ -0,0 +1,107 @@
+export function CalculateGridInformation(designItem) {
+    let itemRect = designItem.element.getBoundingClientRect();
+    const computedStyle = getComputedStyle(designItem.element);
+    const rows = computedStyle.gridTemplateRows.split(' ');
+    const columns = computedStyle.gridTemplateColumns.split(' ');
+    let y = 0;
+    let xGap = 0;
+    let yGap = 0;
+    let rw = 0;
+    let xOffset = itemRect.x - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.x;
+    let yOffset = itemRect.y - designItem.instanceServiceContainer.designerCanvas.containerBoundingRect.y;
+    let gridA = null;
+    if (computedStyle.gridTemplateAreas && computedStyle.gridTemplateAreas !== 'none')
+        gridA = computedStyle.gridTemplateAreas.split('\"');
+    if (computedStyle.columnGap && computedStyle.columnGap != 'normal')
+        xGap = Number.parseFloat(computedStyle.columnGap.replace('px', ''));
+    if (computedStyle.rowGap && computedStyle.rowGap != 'normal')
+        yGap = Number.parseFloat(computedStyle.rowGap.replace('px', ''));
+    let gesX = 0;
+    let gesY = 0;
+    for (let c of columns) {
+        const currX = Number.parseFloat(c.replace('px', ''));
+        gesX += currX + xGap;
+    }
+    gesX -= xGap;
+    for (let r of rows) {
+        const currY = Number.parseFloat(r.replace('px', ''));
+        gesY += currY + yGap;
+    }
+    gesY -= yGap;
+    if (computedStyle.justifyContent == 'center') {
+        xOffset += (itemRect.width - gesX) / 2;
+    }
+    else if (computedStyle.justifyContent == 'end') {
+        xOffset += itemRect.width - gesX;
+    }
+    else if (computedStyle.justifyContent == 'space-between') {
+        xGap += (itemRect.width - gesX) / (columns.length - 1);
+    }
+    else if (computedStyle.justifyContent == 'space-around') {
+        let gp = (itemRect.width - gesX) / (columns.length * 2);
+        xGap += gp * 2;
+        xOffset += gp;
+    }
+    else if (computedStyle.justifyContent == 'space-evenly') {
+        let gp = (itemRect.width - gesX) / (columns.length + 1);
+        xGap += gp;
+        xOffset += gp;
+    }
+    if (computedStyle.alignContent == 'center') {
+        xOffset += (itemRect.height - gesY) / 2;
+    }
+    else if (computedStyle.alignContent == 'end') {
+        xOffset += itemRect.height - gesY;
+    }
+    else if (computedStyle.alignContent == 'space-between') {
+        yGap += (itemRect.height - gesY) / (rows.length - 1);
+    }
+    else if (computedStyle.alignContent == 'space-around') {
+        let gp = (itemRect.height - gesY) / (rows.length * 2);
+        yGap += gp * 2;
+        yOffset += gp;
+    }
+    else if (computedStyle.alignContent == 'space-evenly') {
+        let gp = (itemRect.height - gesY) / (rows.length + 1);
+        yGap += gp;
+        yOffset += gp;
+    }
+    const retVal = { cells: [], gaps: [] };
+    for (let xIdx = 0; xIdx < rows.length; xIdx++) {
+        const r = rows[xIdx];
+        let areas = null;
+        if (gridA) {
+            areas = gridA[rw + 1].split(' ');
+        }
+        let x = 0;
+        let cl = 0;
+        const currY = Number.parseFloat(r.replace('px', ''));
+        let cellList = [];
+        retVal.cells.push(cellList);
+        for (let yIdx = 0; yIdx < columns.length; yIdx++) {
+            const c = columns[yIdx];
+            if (x > 0 && xGap) {
+                retVal.gaps.push({ x: x + xOffset, y: y + yOffset, width: xGap, height: currY });
+                x += xGap;
+            }
+            const currX = Number.parseFloat(c.replace('px', ''));
+            if (y > 0 && yGap) {
+                retVal.gaps.push({ x: x + xOffset, y: y + yOffset - yGap, width: currX, height: yGap });
+            }
+            let name = null;
+            if (areas) {
+                const nm = areas[cl].trim();
+                if (nm != '.') {
+                    name = nm;
+                }
+            }
+            const cell = { x: x + xOffset, y: y + yOffset, width: currX, height: currY, name: name };
+            cellList.push(cell);
+            x += currX;
+            cl++;
+        }
+        y += currY + yGap;
+        rw += 2;
+    }
+    return retVal;
+}

package/dist/elements/helper/Helper.d.ts

@@ -1,3 +1,6 @@
+import { IPoint } from "../../interfaces/IPoint.js";
+import { IRect } from "../../interfaces/IRect.js";
 export declare function sleep(ms: any): Promise<unknown>;
 export declare function exportData(blob: Blob, fileName: string): Promise<void>;
 export declare function dataURItoBlob(dataURI: any): Blob;
+export declare function pointInRect(point: IPoint, rect: IRect): boolean;

package/dist/elements/helper/Helper.js

@@ -21,3 +21,6 @@ export function dataURItoBlob(dataURI) {
     }
     return new Blob([new Uint8Array(array)], { type: mime });
 }
+export function pointInRect(point, rect) {
+    return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+}

package/dist/elements/helper/LayoutHelper.d.ts

@@ -0,0 +1,3 @@
+import { IPoint } from "../../interfaces/IPoint.js";
+import { IDesignItem } from "../item/IDesignItem.js";
+export declare function placeDesignItem(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding'): void;

package/dist/elements/helper/LayoutHelper.js

@@ -1,4 +1,50 @@
-"use strict";
 //todo
 //this function should return the correct property to change a layout, for example left/right when left or right is used,
 //maybe margin on grid? or transform??
+export function placeDesignItem(container, designItem, offset, mode) {
+    const movedElement = designItem.element;
+    const computedStyleMovedElement = getComputedStyle(movedElement);
+    if (mode === 'position') {
+        let positionedContainerElement = container.element;
+        let computedStylePositionedContainer = getComputedStyle(container.element);
+        while (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute') {
+            positionedContainerElement = positionedContainerElement.parentElement;
+            computedStylePositionedContainer = getComputedStyle(positionedContainerElement);
+        }
+        let oldLeft = null;
+        let oldRight = null;
+        let oldTop = null;
+        let oldBottom = null;
+        let containerLeft = 0;
+        let containerRight = 0;
+        let containerTop = 0;
+        let containerBottom = 0;
+        if (computedStyleMovedElement.position === 'relative' || computedStyleMovedElement.position === 'absolute') {
+            oldLeft = parseFloat(movedElement.style.left);
+            oldLeft = Number.isNaN(oldLeft) ? null : oldLeft;
+            oldTop = parseFloat(movedElement.style.top);
+            oldTop = Number.isNaN(oldTop) ? null : oldTop;
+            oldRight = parseFloat(movedElement.style.right);
+            oldRight = Number.isNaN(oldRight) ? null : oldRight;
+            oldBottom = parseFloat(movedElement.style.bottom);
+            oldBottom = Number.isNaN(oldBottom) ? null : oldBottom;
+        }
+        else {
+            if (positionedContainerElement !== container.element) {
+                let posContainerRect = positionedContainerElement.getBoundingClientRect();
+                let elementRect = designItem.element.getBoundingClientRect();
+                containerLeft = elementRect.left - posContainerRect.left;
+                containerRight = elementRect.right - posContainerRect.right;
+                containerTop = elementRect.top - posContainerRect.top;
+                containerBottom = elementRect.bottom - posContainerRect.bottom;
+            }
+        }
+        designItem.element.style.transform = designItem.styles.get('transform') ?? '';
+        designItem.setStyle('position', 'absolute');
+        designItem.setStyle('left', (offset.x + oldLeft + containerLeft) + "px");
+        designItem.setStyle('top', (offset.y + oldTop + containerTop) + "px");
+    }
+}
+/*function placeViaPosition(container: IDesignItem, designItem: IDesignItem, offset: IPoint, mode: 'position' | 'transform' | 'margin' | 'padding') {
+  
+}*/ 

package/dist/elements/helper/TransformHelper.d.ts

@@ -0,0 +1 @@
+export declare function combineTransforms(element: HTMLElement, transform1: string, transform2: string): void;

package/dist/elements/helper/TransformHelper.js

@@ -0,0 +1,12 @@
+export function combineTransforms(element, transform1, transform2) {
+    if (transform1 == null || transform1 == '') {
+        element.style.transform = transform2;
+        return;
+    }
+    element.style.transform = transform1;
+    const matrix1 = new DOMMatrix(window.getComputedStyle(element).transform);
+    element.style.transform = transform2;
+    const matrix2 = new DOMMatrix(window.getComputedStyle(element).transform);
+    const result = matrix2.multiply(matrix1);
+    element.style.transform = result.toString();
+}

package/dist/elements/item/DesignItem.d.ts

@@ -5,7 +5,9 @@ import { ChangeGroup } from '../services/undoService/ChangeGroup';
 import { NodeType } from './NodeType';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
 import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension';
+import { ISize } from '../../interfaces/ISize.js';
 export declare class DesignItem implements IDesignItem {
+    lastContainerSize: ISize;
     node: Node;
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
@@ -51,8 +53,8 @@ export declare class DesignItem implements IDesignItem {
     getOrCreateDesignItem(node: Node): IDesignItem;
     static GetOrCreateDesignItem(node: Node, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
     static GetDesignItem(node: Node): IDesignItem;
-    setStyle(name: keyof CSSStyleDeclaration, value?: string | null): void;
-    removeStyle(name: keyof CSSStyleDeclaration): void;
+    setStyle(name: string, value?: string | null): void;
+    removeStyle(name: string): void;
     setAttribute(name: string, value?: string | null): void;
     removeAttribute(name: string): void;
 }

package/dist/elements/item/DesignItem.js

@@ -1,14 +1,15 @@
 import { CssStyleChangeAction } from '../services/undoService/transactionItems/CssStyleChangeAction';
 import { NodeType } from './NodeType';
 import { AttributeChangeAction } from '../services/undoService/transactionItems/AttributeChangeAction';
-//import { PropertyChangeAction } from '../services/undoService/transactionItems/PropertyChangeAction';
 import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType';
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
 import { CssAttributeParser } from '../helper/CssAttributeParser.js';
+import { PropertiesHelper } from '../services/propertiesService/services/PropertiesHelper.js';
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
 export class DesignItem {
+    lastContainerSize;
     node;
     serviceContainer;
     instanceServiceContainer;
@@ -241,11 +242,13 @@ export class DesignItem {
         return designItem;
     }
     setStyle(name, value) {
-        const action = new CssStyleChangeAction(this, name, value, this.styles.get(name));
+        let nm = PropertiesHelper.camelToDashCase(name);
+        const action = new CssStyleChangeAction(this, nm, value, this.styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
     }
     removeStyle(name) {
-        const action = new CssStyleChangeAction(this, name, '', this.styles.get(name));
+        let nm = PropertiesHelper.camelToDashCase(name);
+        const action = new CssStyleChangeAction(this, nm, '', this.styles.get(nm));
         this.instanceServiceContainer.undoService.execute(action);
     }
     setAttribute(name, value) {

package/dist/elements/item/IDesignItem.d.ts

@@ -4,7 +4,9 @@ import { ChangeGroup } from "../services/undoService/ChangeGroup";
 import { NodeType } from './NodeType';
 import { ExtensionType } from "../widgets/designerView/extensions/ExtensionType";
 import { IDesignerExtension } from "../widgets/designerView/extensions/IDesignerExtension";
+import { ISize } from "../../interfaces/ISize.js";
 export interface IDesignItem {
+    lastContainerSize: ISize;
     replaceNode(newNode: Node): any;
     readonly nodeType: NodeType;
     readonly name: string;
@@ -33,8 +35,8 @@ export interface IDesignItem {
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
     getOrCreateDesignItem(node: Node): any;
     openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
-    setStyle(name: keyof CSSStyleDeclaration, value?: string | null): any;
-    removeStyle(name: keyof CSSStyleDeclaration): any;
+    setStyle(name: string, value?: string | null): any;
+    removeStyle(name: string): any;
     setAttribute(name: string, value?: string | null): any;
     removeAttribute(name: string): any;
     hideAtDesignTime: boolean;

package/dist/elements/services/htmlWriterService/HtmlWriterService.js

@@ -53,12 +53,7 @@ export class HtmlWriterService {
                     styles = CssCombiner.combine(styles);
                 for (const s of styles) {
                     if (s[0]) {
-                        if (typeof s[1] === 'string') {
-                            indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
-                        }
-                        else {
-                            //TODO: writing of bindings
-                        }
+                        indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
                     }
                 }
                 indentedTextWriter.write('"');

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -1,4 +1,6 @@
 import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { combineTransforms } from '../../helper/TransformHelper.js';
+import { placeDesignItem } from '../../helper/LayoutHelper.js';
 export class DefaultPlacementService {
     serviceForContainer(container) {
         if (container.element.style.display === 'grid' || container.element.style.display === 'inline-grid' ||
@@ -78,26 +80,36 @@ export class DefaultPlacementService {
         let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         //TODO: -> what is if a transform already exists -> backup existing style.?
         for (const designItem of items) {
-            designItem.element.style.transform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
+            const newTransform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
+            combineTransforms(designItem.element, designItem.styles.get('transform'), newTransform);
         }
     }
     enterContainer(container, items) {
+        for (let i of items) {
+            if (i.lastContainerSize) {
+                if (!i.styles.has('width'))
+                    i.setStyle('width', i.lastContainerSize.width + 'px');
+                if (!i.styles.has('height'))
+                    i.setStyle('height', i.lastContainerSize.height + 'px');
+            }
+        }
     }
     leaveContainer(container, items) {
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         for (const designItem of items) {
-            let movedElement = designItem.element;
-            let oldLeft = parseFloat(movedElement.style.left);
+            /*let movedElement = designItem.element;
+            let oldLeft = parseFloat((<HTMLElement>movedElement).style.left);
             oldLeft = Number.isNaN(oldLeft) ? 0 : oldLeft;
-            let oldTop = parseFloat(movedElement.style.top);
-            oldTop = Number.isNaN(oldTop) ? 0 : oldTop;
+            let oldTop = parseFloat((<HTMLElement>movedElement).style.top);
+            oldTop = Number.isNaN(oldTop) ? 0 : oldTop;*/
             //let oldPosition = movedElement.style.position;
-            designItem.element.style.transform = null;
-            designItem.setStyle('position', 'absolute');
+            designItem.element.style.transform = designItem.styles.get('transform') ?? '';
+            placeDesignItem(container, designItem, track, 'position');
+            /*designItem.setStyle('position', 'absolute');
             designItem.setStyle('left', (track.x + oldLeft) + "px");
-            designItem.setStyle('top', (track.y + oldTop) + "px");
+            designItem.setStyle('top', (track.y + oldTop) + "px");*/
         }
     }
 }

package/dist/elements/services/placementService/FlexBoxPlacementService.js

@@ -1,5 +1,12 @@
 export class FlexBoxPlacementService {
     enterContainer(container, items) {
+        for (let i of items) {
+            i.removeStyle("position");
+            i.removeStyle("left");
+            i.removeStyle("top");
+            i.removeStyle("right");
+            i.removeStyle("transform");
+        }
     }
     leaveContainer(container, items) {
     }
@@ -15,13 +22,20 @@ export class FlexBoxPlacementService {
         return true;
     }
     getElementOffset(container, designItem) {
-        //TODO: offset could be bigger, when it was in a other cell???
         return container.element.getBoundingClientRect();
     }
     placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         return null;
     }
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        /*let direction = getComputedStyle(container.element).flexDirection;
+        
+        const pos = (<IDesignerCanvas><unknown>placementView).getNormalizedEventCoordinates(event);
+        const posElement = (<IDesignerCanvas><unknown>placementView).getNormalizedElementCoordinates(items[0].element)
+    
+        for (let e of container.element.children) {
+    
+        }*/
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
     }

package/dist/elements/services/placementService/GridPlacementService.js

@@ -1,7 +1,24 @@
+import { CalculateGridInformation } from '../../helper/GridHelper.js';
+import { pointInRect } from '../../helper/Helper.js';
 export class GridPlacementService {
     enterContainer(container, items) {
+        for (let i of items) {
+            i.removeStyle("position");
+            i.removeStyle("left");
+            i.removeStyle("top");
+            i.removeStyle("right");
+            i.removeStyle("width");
+            i.removeStyle("height");
+            i.removeStyle("transform");
+        }
     }
     leaveContainer(container, items) {
+        for (let i of items) {
+            if (!i.lastContainerSize) {
+                const rect = i.element.getBoundingClientRect();
+                i.lastContainerSize = { width: rect.width, height: rect.height };
+            }
+        }
     }
     serviceForContainer(container) {
         if (container.element.style.display == 'grid' || container.element.style.display == 'inline-grid')
@@ -15,14 +32,48 @@ export class GridPlacementService {
         return true;
     }
     getElementOffset(container, designItem) {
-        //TODO: offset could be bigger, when it was in a other cell???
         return container.element.getBoundingClientRect();
     }
     placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         return null;
     }
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const gridInformation = CalculateGridInformation(container);
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        const posElement = placementView.getNormalizedElementCoordinates(items[0].element);
+        let row = 0;
+        let column = 0;
+        if (!pointInRect(pos, posElement)) {
+            row = 0;
+            for (let cellRow of gridInformation.cells) {
+                column = 0;
+                for (let cell of cellRow) {
+                    if (pointInRect(pos, cell)) {
+                        items[0].element.style.gridColumn = column + 1;
+                        items[0].element.style.gridRow = row + 1;
+                    }
+                    column++;
+                }
+                row++;
+            }
+        }
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        const gridInformation = CalculateGridInformation(container);
+        const pos = placementView.getNormalizedEventCoordinates(event);
+        let row = 0;
+        let column = 0;
+        row = 0;
+        for (let cellRow of gridInformation.cells) {
+            column = 0;
+            for (let cell of cellRow) {
+                if (pointInRect(pos, cell)) {
+                    items[0].setStyle('grid-column', column + 1);
+                    items[0].setStyle('grid-row', row + 1);
+                }
+                column++;
+            }
+            row++;
+        }
     }
 }

package/dist/elements/services/undoService/transactionItems/CssStyleChangeAction.d.ts

@@ -1,13 +1,13 @@
 import { ITransactionItem } from '../ITransactionItem';
 import { IDesignItem } from '../../../item/IDesignItem';
 export declare class CssStyleChangeAction implements ITransactionItem {
-    constructor(designItem: IDesignItem, name: keyof CSSStyleDeclaration, newValue: any, oldValue: any);
+    constructor(designItem: IDesignItem, name: string, newValue: any, oldValue: any);
     title?: string;
     get affectedItems(): IDesignItem[];
     undo(): void;
     do(): void;
     designItem: IDesignItem;
-    name: keyof CSSStyleDeclaration;
+    name: string;
     newValue: any;
     oldValue: any;
     mergeWith(other: ITransactionItem): boolean;

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

@@ -1,7 +1,7 @@
 import { IDesignItem } from "../../item/IDesignItem";
 import { IStringPosition } from "../../services/htmlWriterService/IStringPosition";
 export declare class DomConverter {
-    static normalizeAttributeValue(value: string): string;
+    static normalizeAttributeValue(value: string | number): string;
     static normalizeContentValue(value: string): string;
     static IsSelfClosingElement(tag: string): boolean;
     static ConvertToString(designItems: IDesignItem[], designItemsAssignmentList?: Map<IDesignItem, IStringPosition>): string;

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

@@ -1,6 +1,8 @@
 import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
 export class DomConverter {
     static normalizeAttributeValue(value) {
+        if (typeof value === 'number')
+            value = value.toString();
         if (value)
             return value.replaceAll('"', '"');
         return value;

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

@@ -7,6 +7,7 @@ import { IExtensionManager } from "./extensions/IExtensionManger";
 import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
 import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayerView } from "./overlayLayerView";
+import { IRect } from "../../../interfaces/IRect.js";
 export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly serviceContainer: ServiceContainer;
     readonly instanceServiceContainer: InstanceServiceContainer;
@@ -22,6 +23,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;

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

@@ -12,6 +12,7 @@ import { IExtensionManager } from "./extensions/IExtensionManger";
 import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayer } from "./extensions/OverlayLayer";
 import { OverlayLayerView } from './overlayLayerView';
+import { IRect } from "../../../interfaces/IRect.js";
 export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
@@ -69,7 +70,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private onKeyUp;
     private onKeyDown;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
-    getNormalizedElementCoordinates(element: Element): IPoint;
+    getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     static getHost(node: Node): Element;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;

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

@@ -397,7 +397,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     showDesignItemContextMenu(designItem, event) {
         const mnuItems = [];
         for (let cme of this.serviceContainer.designerContextMenuExtensions) {
-            if (cme.shouldProvideContextmenu(event, this, designItem)) {
+            if (cme.shouldProvideContextmenu(event, this, designItem, 'designer')) {
                 mnuItems.push(...cme.provideContextMenuItems(event, this, designItem));
             }
         }
@@ -489,7 +489,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     getNormalizedElementCoordinates(element) {
         const targetRect = element.getBoundingClientRect();
-        return { x: targetRect.x - this.containerBoundingRect.x, y: targetRect.y - this.containerBoundingRect.y };
+        return { x: targetRect.x - this.containerBoundingRect.x, y: targetRect.y - this.containerBoundingRect.y, width: targetRect.width, height: targetRect.height };
     }
     getNormalizedOffsetInElement(event, element) {
         const normEvt = this.getNormalizedEventCoordinates(event);