@node-projects/web-component-designer 0.0.230 → 0.0.232

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

@@ -43,7 +43,7 @@ export declare type PathDataA = {
 export declare type PathData = {
     type: string;
 } & (PathDataM | PathDataL | PathDataH | PathDataV | PathDataZ | PathDataC | PathDataS | PathDataQ | PathDataT | PathDataA)[];
-export declare function straightenLine(p1: IPoint, p2: IPoint): IPoint;
+export declare function straightenLine(p1: IPoint, p2: IPoint, only90Steps?: boolean): IPoint;
 export declare function calculateNormLegth(p1: IPoint, p2: IPoint): number;
 export declare function calculateAlpha(p1: IPoint, p2: IPoint): number;
 export declare function moveSVGPath(path: SVGPathElement, xFactor: number, yFactor: number): string;

package/dist/elements/helper/PathDataPolyfill.js

@@ -856,37 +856,53 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
         };
     })();
 }
-export function straightenLine(p1, p2) {
+export function straightenLine(p1, p2, only90Steps = false) {
     let newP;
     let alpha = calculateAlpha(p1, p2);
     let normLength;
-    if ((alpha >= 337.5 && alpha < 360 || alpha >= 0 && alpha < 22.5)) { // 0
-        newP = { x: p2.x, y: p1.y };
-    }
-    else if ((alpha >= 22.5 && alpha < 67.5)) { // 45
-        normLength = calculateNormLegth(p1, p2);
-        newP = { x: p1.x + normLength, y: p1.y - normLength };
-    }
-    else if ((alpha >= 67.5 && alpha < 112.5)) { // 90
-        newP = { x: p1.x, y: p2.y };
-    }
-    else if ((alpha >= 112.5 && alpha < 157.5)) { // 135
-        normLength = calculateNormLegth(p1, p2);
-        newP = { x: p1.x - normLength, y: p1.y - normLength };
-    }
-    else if ((alpha >= 157.5 && alpha < 202.5)) { // 180
-        newP = { x: p2.x, y: p1.y };
-    }
-    else if ((alpha >= 202.5 && alpha < 247.5)) { // 225
-        normLength = calculateNormLegth(p1, p2);
-        newP = { x: p1.x - normLength, y: p1.y + normLength };
-    }
-    else if ((alpha >= 247.5 && alpha < 292.5)) { // 270
-        newP = { x: p1.x, y: p2.y };
+    if (only90Steps) {
+        if (alpha >= 315 && alpha < 360 || alpha >= 0 && alpha < 45) { // 0
+            newP = { x: p2.x, y: p1.y };
+        }
+        else if (alpha >= 45 && alpha < 135) { // 90
+            newP = { x: p1.x, y: p2.y };
+        }
+        else if (alpha >= 135 && alpha < 225) { // 180
+            newP = { x: p2.x, y: p1.y };
+        }
+        else if (alpha >= 225 && alpha < 315) { // 270
+            newP = { x: p1.x, y: p2.y };
+        }
     }
-    else if ((alpha >= 292.5 && alpha < 337.5)) { // 315
-        normLength = calculateNormLegth(p1, p2);
-        newP = { x: p1.x + normLength, y: p1.y + normLength };
+    else {
+        if (alpha >= 337.5 && alpha < 360 || alpha >= 0 && alpha < 22.5) { // 0
+            newP = { x: p2.x, y: p1.y };
+        }
+        else if (alpha >= 22.5 && alpha < 67.5) { // 45
+            normLength = calculateNormLegth(p1, p2);
+            newP = { x: p1.x + normLength, y: p1.y - normLength };
+        }
+        else if (alpha >= 67.5 && alpha < 112.5) { // 90
+            newP = { x: p1.x, y: p2.y };
+        }
+        else if (alpha >= 112.5 && alpha < 157.5) { // 135
+            normLength = calculateNormLegth(p1, p2);
+            newP = { x: p1.x - normLength, y: p1.y - normLength };
+        }
+        else if (alpha >= 157.5 && alpha < 202.5) { // 180
+            newP = { x: p2.x, y: p1.y };
+        }
+        else if (alpha >= 202.5 && alpha < 247.5) { // 225
+            normLength = calculateNormLegth(p1, p2);
+            newP = { x: p1.x - normLength, y: p1.y + normLength };
+        }
+        else if (alpha >= 247.5 && alpha < 292.5) { // 270
+            newP = { x: p1.x, y: p2.y };
+        }
+        else if (alpha >= 292.5 && alpha < 337.5) { // 315
+            normLength = calculateNormLegth(p1, p2);
+            newP = { x: p1.x + normLength, y: p1.y + normLength };
+        }
     }
     return newP;
 }

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

@@ -2,6 +2,7 @@ import { DomConverter } from '../../widgets/designerView/DomConverter.js';
 import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
 import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
 import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
+import { straightenLine } from '../../helper/PathDataPolyfill.js';
 export class DefaultPlacementService {
     serviceForContainer(container, containerStyle) {
         if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
@@ -90,6 +91,9 @@ export class DefaultPlacementService {
         //TODO:, this should revert all undo actions while active
         //maybe a undo actions returns itself or an id so it could be changed?
         let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
+        if (event.shiftKey) {
+            track = straightenLine({ x: 0, y: 0 }, track, true);
+        }
         let filteredItems = filterChildPlaceItems(items);
         for (const designItem of filteredItems) {
             const canvas = designItem.element.closest('#node-projects-designer-canvas-canvas');

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

@@ -142,7 +142,7 @@ export class Snaplines {
                     line.setAttribute('y1', (minY));
                     line.setAttribute('y2', (maxY));
                     line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
                 }
                 if (r.x - this._outerRect.left + r.width == position.x || (size && r.x - this._outerRect.left + r.width == position.x + size.width)) {
                     let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
@@ -151,7 +151,7 @@ export class Snaplines {
                     line.setAttribute('y1', (minY));
                     line.setAttribute('y2', (maxY));
                     line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
                 }
                 if (size && r.x - this._outerRect.left + r.width / 2 == position.x + size.width / 2) {
                     let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
@@ -160,7 +160,7 @@ export class Snaplines {
                     line.setAttribute('y1', (minY));
                     line.setAttribute('y2', (maxY));
                     line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
                 }
                 let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 rect.setAttribute('x', (r.x - this._outerRect.x));
@@ -168,7 +168,7 @@ export class Snaplines {
                 rect.setAttribute('y', (r.y - this._outerRect.y));
                 rect.setAttribute('height', (r.height));
                 rect.setAttribute('class', 'svg-snapline');
-                this._overlayLayerView.addOverlay(rect, overlayLayer);
+                this._overlayLayerView.addOverlay(this.constructor.name, rect, overlayLayer);
             }
         }
         if (rectsV) {
@@ -187,7 +187,7 @@ export class Snaplines {
                     line.setAttribute('y1', (r.y - this._outerRect.y));
                     line.setAttribute('y2', (r.y - this._outerRect.y));
                     line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
                 }
                 if (r.y - this._outerRect.top + r.height == position.y || (size && r.y - this._outerRect.top + r.height == position.y + size.height)) {
                     let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
@@ -196,7 +196,7 @@ export class Snaplines {
                     line.setAttribute('y1', (r.y - this._outerRect.y + r.height));
                     line.setAttribute('y2', (r.y - this._outerRect.y + r.height));
                     line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
                 }
                 if (size && r.y - this._outerRect.top + r.height / 2 == position.y + size.height / 2) {
                     let line = document.createElementNS("http://www.w3.org/2000/svg", "line");
@@ -205,7 +205,7 @@ export class Snaplines {
                     line.setAttribute('y1', (r.y - this._outerRect.y + r.height / 2));
                     line.setAttribute('y2', (r.y - this._outerRect.y + r.height / 2));
                     line.setAttribute('class', 'svg-snapline');
-                    this._overlayLayerView.addOverlay(line, overlayLayer);
+                    this._overlayLayerView.addOverlay(this.constructor.name, line, overlayLayer);
                 }
                 let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                 rect.setAttribute('x', (r.x - this._outerRect.x));
@@ -213,7 +213,7 @@ export class Snaplines {
                 rect.setAttribute('y', (r.y - this._outerRect.y));
                 rect.setAttribute('height', (r.height));
                 rect.setAttribute('class', 'svg-snapline');
-                this._overlayLayerView.addOverlay(rect, overlayLayer);
+                this._overlayLayerView.addOverlay(this.constructor.name, rect, overlayLayer);
             }
         }
     }

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

@@ -10,7 +10,6 @@ import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js
 import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
 import { IExtensionManager } from './extensions/IExtensionManger.js';
 import { IPoint } from '../../../interfaces/IPoint.js';
-import { OverlayLayer } from './extensions/OverlayLayer.js';
 import { OverlayLayerView } from './overlayLayerView.js';
 import { IRect } from "../../../interfaces/IRect.js";
 import { ISize } from "../../../interfaces/ISize.js";
@@ -126,7 +125,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     captureActiveTool(tool: ITool): void;
     releaseActiveTool(): void;
     private _fillCalculationrects;
-    addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;

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

@@ -14,7 +14,6 @@ import { NamedTools } from './tools/NamedTools.js';
 import { Screenshot } from '../../helper/Screenshot.js';
 import { dataURItoBlob, exportData, sleep } from '../../helper/Helper.js';
 import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper.js';
-import { OverlayLayer } from './extensions/OverlayLayer.js';
 import { OverlayLayerView } from './overlayLayerView.js';
 import { ContextMenu } from '../../helper/contextMenu/ContextMenu.js';
 import { NodeType } from '../../item/NodeType.js';
@@ -1116,9 +1115,6 @@ class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
         this.outerRect = this._outercanvas2.getBoundingClientRect();
     }
-    addOverlay(element, overlayLayer = OverlayLayer.Normal) {
-        this.overlayLayer.addOverlay(element, overlayLayer);
-    }
     removeOverlay(element) {
         this.overlayLayer.removeOverlay(element);
     }

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

@@ -10,6 +10,7 @@ export declare abstract class AbstractExtensionBase {
     protected designerCanvas: IDesignerCanvas;
     constructor(extensionManager: IExtensionManager, designerCanvas: IDesignerCanvas);
     protected _removeAllOverlays(): void;
+    protected _addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     protected _drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
     protected _drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
     protected _drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;

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

@@ -1,3 +1,4 @@
+import { OverlayLayer } from './OverlayLayer.js';
 export class AbstractExtensionBase {
     overlays = [];
     overlayLayerView;
@@ -19,36 +20,40 @@ export class AbstractExtensionBase {
         }
         this.overlays = [];
     }
+    _addOverlay(element, overlayLayer = OverlayLayer.Normal) {
+        this.overlayLayerView.addOverlay(this.constructor.name, element, overlayLayer);
+        this.overlays.push(element);
+    }
     _drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
-        const newLine = this.overlayLayerView.drawLine(x1, y1, x2, y2, className, line, overlayLayer);
+        const newLine = this.overlayLayerView.drawLine(this.constructor.name, x1, y1, x2, y2, className, line, overlayLayer);
         if (!line) {
             this.overlays.push(newLine);
         }
         return newLine;
     }
     _drawCircle(x, y, radius, className, circle, overlayLayer) {
-        const newCircle = this.overlayLayerView.drawCircle(x, y, radius, className, circle, overlayLayer);
+        const newCircle = this.overlayLayerView.drawCircle(this.constructor.name, x, y, radius, className, circle, overlayLayer);
         if (!circle) {
             this.overlays.push(newCircle);
         }
         return newCircle;
     }
     _drawRect(x, y, w, h, className, rect, overlayLayer) {
-        const newRect = this.overlayLayerView.drawRect(x, y, w, h, className, rect, overlayLayer);
+        const newRect = this.overlayLayerView.drawRect(this.constructor.name, x, y, w, h, className, rect, overlayLayer);
         if (!rect) {
             this.overlays.push(newRect);
         }
         return newRect;
     }
     _drawText(text, x, y, className, textEl, overlayLayer) {
-        const newText = this.overlayLayerView.drawText(text, x, y, className, textEl, overlayLayer);
+        const newText = this.overlayLayerView.drawText(this.constructor.name, text, x, y, className, textEl, overlayLayer);
         if (!textEl) {
             this.overlays.push(newText);
         }
         return newText;
     }
     _drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer) {
-        const newEls = this.overlayLayerView.drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer);
+        const newEls = this.overlayLayerView.drawTextWithBackground(this.constructor.name, text, x, y, backgroundColor, className, existingEls, overlayLayer);
         if (!existingEls) {
             this.overlays.push(...newEls);
         }
@@ -56,7 +61,7 @@ export class AbstractExtensionBase {
     }
     _drawTransformedRect(points, className, path, overlayLayer) {
         let data = "M" + points[0].x + " " + points[0].y + " L" + points[1].x + " " + points[1].y + " L" + points[3].x + " " + points[3].y + " L" + points[2].x + " " + points[2].y + "Z";
-        const newPath = this.overlayLayerView.drawPath(data, className, path, overlayLayer);
+        const newPath = this.overlayLayerView.drawPath(this.constructor.name, data, className, path, overlayLayer);
         if (!path) {
             this.overlays.push(newPath);
         }

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.js

@@ -42,8 +42,7 @@ class EditTextExtension extends AbstractExtension {
         foreignObject.setAttribute('width', '96');
         foreignObject.setAttribute('height', '24');
         foreignObject.appendChild(elements);
-        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
-        this.overlays.push(foreignObject);
+        this._addOverlay(foreignObject, OverlayLayer.Foregorund);
         this.designerCanvas.clickOverlay.style.pointerEvents = 'none';
         this.extendedItem.element.addEventListener('blur', this._blurBound);
         this.extendedItem.element.addEventListener('focus', this._focusBound);

package/dist/elements/widgets/designerView/extensions/EditText/EditTextWithStyloExtension.js

@@ -35,8 +35,7 @@ class EditTextWithStyloExtension extends AbstractExtension {
         foreignObject.setAttribute('width', '100%');
         foreignObject.setAttribute('height', '100%');
         foreignObject.appendChild(elements);
-        this.overlayLayerView.addOverlay(foreignObject, OverlayLayer.Foregorund);
-        this.overlays.push(foreignObject);
+        this._addOverlay(foreignObject, OverlayLayer.Foregorund);
         this._drawClickOverlayRects();
         this._rect1.addEventListener('pointerdown', (e) => this._clickOutside(e));
         this._rect2.addEventListener('pointerdown', (e) => this._clickOutside(e));

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

@@ -12,8 +12,7 @@ export class GrayOutExtension extends AbstractExtension {
         if (!this._path) {
             this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
             this._path.setAttribute('class', 'svg-gray-out');
-            this.overlayLayerView.addOverlay(this._path, OverlayLayer.Background);
-            this.overlays.push(this._path);
+            this._addOverlay(this._path, OverlayLayer.Background);
         }
         let normalizedRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         this.drawGrayOut(normalizedRect);

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

@@ -41,8 +41,7 @@ export class RotateExtension extends AbstractExtension {
             g.addEventListener(EventNames.PointerUp, event => this._pointerActionTypeRotate(event));
             g.setAttribute('class', 'svg-primary-rotate');
             g.setAttribute('transform', 'translate(' + rotateIconPosition.x + ',' + rotateIconPosition.y + ') scale(' + 1 / this.designerCanvas.scaleFactor + ')');
-            this.overlayLayerView.addOverlay(g);
-            this.overlays.push(g);
+            this._addOverlay(g);
             return g;
         }
         else {

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

@@ -14,16 +14,16 @@ export declare class OverlayLayerView extends BaseCustomWebComponentConstructorA
     private _id;
     constructor(serviceContainer: ServiceContainer);
     private _initialize;
-    addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
+    addOverlay(overlaySource: string, element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGElement): void;
     removeAllNodesWithClass(className: string): void;
     removeAllOverlays(): void;
     createPoint(): DOMPointInit;
     elementFromPoint(x: number, y: number): Element;
-    drawLine(x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
-    drawCircle(x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
-    drawRect(x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
-    drawPath(data: string, className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
-    drawText(text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
-    drawTextWithBackground(text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
+    drawLine(overlaySource: string, x1: number, y1: number, x2: number, y2: number, className?: string, line?: SVGLineElement, overlayLayer?: OverlayLayer): SVGLineElement;
+    drawCircle(overlaySource: string, x: number, y: number, radius: number, className?: string, circle?: SVGCircleElement, overlayLayer?: OverlayLayer): SVGCircleElement;
+    drawRect(overlaySource: string, x: number, y: number, w: number, h: number, className?: string, rect?: SVGRectElement, overlayLayer?: OverlayLayer): SVGRectElement;
+    drawPath(overlaySource: string, data: string, className?: string, path?: SVGPathElement, overlayLayer?: OverlayLayer): SVGPathElement;
+    drawText(overlaySource: string, text: string, x: number, y: number, className?: string, textEl?: SVGTextElement, overlayLayer?: OverlayLayer): SVGTextElement;
+    drawTextWithBackground(overlaySource: string, text: string, x: number, y: number, backgroundColor: string, className?: string, existingEls?: [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement], overlayLayer?: OverlayLayer): [SVGFilterElement, SVGFEFloodElement, SVGTextElement, SVGTextElement];
 }

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

@@ -59,7 +59,8 @@ class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         }
         this.shadowRoot.adoptedStyleSheets = styles;
     }
-    addOverlay(element, overlayLayer = OverlayLayer.Normal) {
+    addOverlay(overlaySource, element, overlayLayer = OverlayLayer.Normal) {
+        element.setAttribute("overlay-source", overlaySource);
         switch (overlayLayer) {
             case OverlayLayer.Background:
                 this._gBackground.appendChild(element);
@@ -100,10 +101,10 @@ class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
         //@ts-ignore
         return this.shadowRoot.elementFromPoint(x, y);
     }
-    drawLine(x1, y1, x2, y2, className, line, overlayLayer) {
+    drawLine(overlaySource, x1, y1, x2, y2, className, line, overlayLayer) {
         if (!line) {
             line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            this.addOverlay(line, overlayLayer);
+            this.addOverlay(overlaySource, line, overlayLayer);
         }
         line.setAttribute('x1', x1);
         line.setAttribute('y1', y1);
@@ -113,10 +114,10 @@ class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             line.setAttribute('class', className);
         return line;
     }
-    drawCircle(x, y, radius, className, circle, overlayLayer) {
+    drawCircle(overlaySource, x, y, radius, className, circle, overlayLayer) {
         if (!circle) {
             circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-            this.addOverlay(circle, overlayLayer);
+            this.addOverlay(overlaySource, circle, overlayLayer);
         }
         circle.setAttribute('cx', x);
         circle.setAttribute('cy', y);
@@ -125,10 +126,10 @@ class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             circle.setAttribute('class', className);
         return circle;
     }
-    drawRect(x, y, w, h, className, rect, overlayLayer) {
+    drawRect(overlaySource, x, y, w, h, className, rect, overlayLayer) {
         if (!rect) {
             rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-            this.addOverlay(rect, overlayLayer);
+            this.addOverlay(overlaySource, rect, overlayLayer);
         }
         rect.setAttribute('x', x);
         rect.setAttribute('y', y);
@@ -138,20 +139,20 @@ class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             rect.setAttribute('class', className);
         return rect;
     }
-    drawPath(data, className, path, overlayLayer) {
+    drawPath(overlaySource, data, className, path, overlayLayer) {
         if (!path) {
             path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-            this.addOverlay(path, overlayLayer);
+            this.addOverlay(overlaySource, path, overlayLayer);
         }
         path.setAttribute('d', data);
         if (className)
             path.setAttribute('class', className);
         return path;
     }
-    drawText(text, x, y, className, textEl, overlayLayer) {
+    drawText(overlaySource, text, x, y, className, textEl, overlayLayer) {
         if (!textEl) {
             textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
-            this.addOverlay(textEl, overlayLayer);
+            this.addOverlay(overlaySource, textEl, overlayLayer);
         }
         textEl.setAttribute('x', x);
         textEl.setAttribute('y', y);
@@ -160,7 +161,7 @@ class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             textEl.setAttribute('class', className);
         return textEl;
     }
-    drawTextWithBackground(text, x, y, backgroundColor, className, existingEls, overlayLayer) {
+    drawTextWithBackground(overlaySource, text, x, y, backgroundColor, className, existingEls, overlayLayer) {
         if (!existingEls) {
             let filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
             filter.setAttribute("x", "0");
@@ -179,8 +180,10 @@ class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
             let textEl1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
             textEl1.setAttribute("filter", "url(#solid_" + this._id + ")");
             let textEl2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
-            this.addOverlay(textEl1, overlayLayer);
-            this.addOverlay(textEl2, overlayLayer);
+            this.addOverlay(overlaySource, textEl1, overlayLayer);
+            this.addOverlay(overlaySource, textEl2, overlayLayer);
+            filter.setAttribute("overlay-source", overlaySource);
+            flood.setAttribute("overlay-source", overlaySource);
             existingEls = [filter, flood, textEl1, textEl2];
         }
         existingEls[2].setAttribute('x', x);

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

@@ -51,7 +51,7 @@ export class DrawElementTool {
             if (!this._rect) {
                 designerCanvas.rootDesignItem.element.appendChild(this._createdItem.element);
                 this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foregorund);
                 this._rect.setAttribute('class', 'svg-draw-new-element');
                 this._rect.setAttribute('x', (this._startPosition.x - designerCanvas.containerBoundingRect.x));
                 this._rect.setAttribute('y', (this._startPosition.y - designerCanvas.containerBoundingRect.y));

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

@@ -32,7 +32,7 @@ export class DrawEllipsisTool {
                 this._path.setAttribute("cy", currentPoint.y.toString());
                 this._path.setAttribute("rx", "0");
                 this._path.setAttribute("ry", "0");
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:
                 if (this._path) {

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

@@ -31,7 +31,7 @@ export class DrawLineTool {
                 this._path.setAttribute("y1", currentPoint.y.toString());
                 this._path.setAttribute("x2", currentPoint.x.toString());
                 this._path.setAttribute("y2", currentPoint.y.toString());
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:
                 if (this._path) {

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

@@ -35,7 +35,7 @@ export class DrawPathTool {
                     this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
                     this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
                     this._path.setAttribute("stroke-width", designerCanvas.serviceContainer.globalContext.strokeThickness);
-                    designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                    designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
                     this._startPoint = currentPoint;
                 }
                 if (this._lastPoint != null && this._lastPoint.x === currentPoint.x && this._lastPoint.y === currentPoint.y && !this._samePoint) {

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

@@ -35,7 +35,7 @@ export class DrawRectTool {
                 this._path.setAttribute("y", currentPoint.y.toString());
                 this._path.setAttribute("width", "0");
                 this._path.setAttribute("height", "0");
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:
                 if (this._path) {

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

@@ -17,7 +17,7 @@ export class MagicWandSelectorTool {
                 this._path.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
                 this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
                 this._path.setAttribute("D", this._pathD);
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._path, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:
                 if (this._path) {

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

@@ -315,8 +315,10 @@ export class PointerTool {
                             containerService.finishPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                             this._changeGroup.commit();
                             this._changeGroup = null;
+                            let elements = designerCanvas.elementsFromPoint(event.x, event.y);
                             for (const item of this._actionStartedDesignItems) {
-                                designerCanvas.extensionManager.applyExtension(item, ExtensionType.MouseOver, event);
+                                if (elements.includes(item.element))
+                                    designerCanvas.extensionManager.applyExtension(item, ExtensionType.MouseOver, event);
                                 designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
                             }
                         }

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

@@ -23,7 +23,7 @@ export class RectangleSelectorTool {
                 this._rect.setAttribute('height', 0);
                 this._rect.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor);
                 this._rect.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
-                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:
                 if (this._initialPoint) {

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

@@ -23,7 +23,7 @@ export class ZoomTool {
                 this._rect.setAttribute('height', 0);
                 this._rect.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor);
                 this._rect.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
-                designerCanvas.overlayLayer.addOverlay(this._rect, OverlayLayer.Foregorund);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foregorund);
                 break;
             case EventNames.PointerMove:
                 if (this._startPoint) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.230",
+  "version": "0.0.232",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -20,24 +20,24 @@
     "@adobe/css-tools": "4.3.0-beta.1",
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^6.1.5",
-    "@papyrs/stylo": "^0.0.42",
+    "@papyrs/stylo": "^0.0.45",
     "@types/codemirror": "^5.60.7",
     "@types/css-tree": "^2.3.1",
     "@types/jquery": "^3.5.16",
     "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^18.15.5",
-    "ace-builds": "^1.16.0",
+    "@types/node": "^20.2.1",
+    "ace-builds": "^1.21.1",
     "codemirror": "^6.0.1",
     "css-tree": "^2.3.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
     "jest": "^29.5.0",
-    "jquery": "^3.6.4",
+    "jquery": "^3.7.0",
     "jquery.fancytree": "^2.38.3",
-    "mdn-data": "^2.0.31",
-    "monaco-editor": "^0.36.1",
-    "ts-jest": "^29.0.5",
-    "typescript": "^5.0.2",
+    "mdn-data": "^2.0.32",
+    "monaco-editor": "^0.38.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.4",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {