@node-projects/web-component-designer 0.1.104 → 0.1.106

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

@@ -0,0 +1,181 @@
+import { EventNames } from '../../../../../enums/EventNames.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+export class RectExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+    }
+    pointerEvent(event, circle, r, index) {
+        event.stopPropagation();
+        const cursorPos = this.designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._startPos = cursorPos;
+                this._circlePos = { x: parseFloat(circle.getAttribute("cx")), y: parseFloat(circle.getAttribute("cy")) };
+                this._originalPoint = { x: this._x, y: this._y };
+                this._parentCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement.parentElement);
+                break;
+            case EventNames.PointerMove:
+                if (this._startPos && event.buttons > 0) {
+                    this._deltaScrollOffset = {
+                        x: this._startScrollOffset.x - this.designerCanvas.canvasOffset.x,
+                        y: this._startScrollOffset.y - this.designerCanvas.canvasOffset.y
+                    };
+                    this._lastPos = { x: this._startPos.x, y: this._startPos.y };
+                    const cx = cursorPos.x - this._lastPos.x + this._circlePos.x;
+                    const cy = cursorPos.y - this._lastPos.y + this._circlePos.y;
+                    let dx = cx - this._circlePos.x;
+                    let dy = cy - this._circlePos.y;
+                    if (dx != 0 || dy != 0)
+                        this._circleMoved = true;
+                    if (event.shiftKey) {
+                        if (Math.abs(dx) < Math.abs(dy)) {
+                            dx = 0;
+                        }
+                        else {
+                            dy = 0;
+                        }
+                    }
+                    switch (index) {
+                        case 0:
+                            this._rect = this._calculateRect(this._originalPoint.x + dx, this._originalPoint.y + dy, this._w - dx, this._h - dy);
+                            break;
+                        case 1:
+                            this._rect = this._calculateRect(this._originalPoint.x, this._originalPoint.y + dy, this._w + dx, this._h - dy);
+                            break;
+                        case 2:
+                            this._rect = this._calculateRect(this._originalPoint.x, this._originalPoint.y, this._w + dx, this._h + dy);
+                            break;
+                        case 3:
+                            this._rect = this._calculateRect(this._originalPoint.x + dx, this._originalPoint.y, this._w - dx, this._h + dy);
+                            break;
+                    }
+                    r.setAttribute("x", this._rect.x.toString());
+                    r.setAttribute("y", this._rect.y.toString());
+                    r.setAttribute("width", this._rect.w.toString());
+                    r.setAttribute("height", this._rect.h.toString());
+                    circle.setAttribute("cx", (this._circlePos.x + dx).toString());
+                    circle.setAttribute("cy", (this._circlePos.y + dy).toString());
+                    this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this);
+                    this._redrawPathCircle(this._rect.x, this._rect.y, this._circle1);
+                    this._redrawPathCircle(this._rect.x + this._rect.w, this._rect.y, this._circle2);
+                    this._redrawPathCircle(this._rect.x + this._rect.w, this._rect.y + this._rect.h, this._circle3);
+                    this._redrawPathCircle(this._rect.x, this._rect.y + this._rect.h, this._circle4);
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                this._startPos = null;
+                this._circlePos = null;
+                this._originalPoint = null;
+                if (this._circleMoved) {
+                    this.extendedItem.setAttribute("x", this._rect.x.toString());
+                    this.extendedItem.setAttribute("y", this._rect.y.toString());
+                    this.extendedItem.setAttribute("width", this._rect.w.toString());
+                    this.extendedItem.setAttribute("height", this._rect.h.toString());
+                }
+                if (getComputedStyle(this._rectElement.parentElement).position == "absolute") {
+                    let group = this.extendedItem.openGroup('rearrangeSvg');
+                    let newRectCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement);
+                    let newRectCoordinatesCloud = this._getPointsFromRect(newRectCoordinates);
+                    let newRectExtrema = this._getMinMaxValues(newRectCoordinatesCloud);
+                    this._rearrangeSvgParent(newRectExtrema);
+                    this._rearrangePointsFromElement(this._parentCoordinates);
+                    group.commit();
+                }
+                break;
+        }
+    }
+    _drawPathCircle(point, changedCallback) {
+        let newCircle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + point.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + point.y, 5 / this.designerCanvas.scaleFactor, 'svg-path', circle);
+        newCircle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        /*if (!circle) {
+            newCircle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, newCircle, r, index));
+            newCircle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, newCircle, r, index));
+            newCircle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, newCircle, r, index));
+        }
+        return newCircle;*/
+    }
+    _redrawPathCircle(x, y, oldCircle) {
+        let circle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + x - this._deltaScrollOffset.x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + y - this._deltaScrollOffset.y, 5 / this.designerCanvas.scaleFactor, 'svg-path', oldCircle);
+        circle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        return circle;
+    }
+    _calculateRect(x, y, w, h) {
+        let rect = { x: 0, y: 0, w: 0, h: 0 };
+        if (w >= 0) {
+            rect.x = x;
+            rect.w = w;
+        }
+        else {
+            rect.x = x + w;
+            rect.w = -w;
+        }
+        if (h >= 0) {
+            rect.y = y;
+            rect.h = h;
+        }
+        else {
+            rect.y = y + h;
+            rect.h = -h;
+        }
+        return rect;
+    }
+    _getPointsFromRect(elementCoords) {
+        let Coords = [];
+        Coords.push(elementCoords.x);
+        Coords.push(elementCoords.x + elementCoords.width);
+        Coords.push(elementCoords.x);
+        Coords.push(elementCoords.x + elementCoords.width);
+        Coords.push(elementCoords.y);
+        Coords.push(elementCoords.y);
+        Coords.push(elementCoords.y + elementCoords.height);
+        Coords.push(elementCoords.y + elementCoords.height);
+        Coords.push(elementCoords.height);
+        Coords.push(elementCoords.width);
+        return Coords;
+    }
+    _getMinMaxValues(coords) {
+        let extrema = { xMin: 0.0, xMax: 0.0, yMin: 0.0, yMax: 0.0 };
+        for (let i = 0; i < coords.length - 2; i++) {
+            if (coords[i] < coords[i + 1] && i <= 3) {
+                extrema.xMin = coords[i];
+            }
+            else if (coords[i] < coords[i + 1] && i > 3 && i <= 7) {
+                extrema.yMin = coords[i];
+            }
+            if (coords[i] > coords[i + 1] && i <= 3) {
+                extrema.xMax = coords[i];
+            }
+            else if (coords[i] > coords[i + 1] && i > 3 && i <= 8) {
+                extrema.yMax = coords[i];
+            }
+        }
+        return extrema;
+    }
+    _rearrangeSvgParent(newRectExtrema) {
+        let parentLeft = newRectExtrema.xMin - this._offsetSvg;
+        let parentTop = newRectExtrema.yMin - this._offsetSvg;
+        let widthRectElement = newRectExtrema.xMax - newRectExtrema.xMin + (2 * this._offsetSvg);
+        let heightRectElement = newRectExtrema.yMax - newRectExtrema.yMin + (2 * this._offsetSvg);
+        this.extendedItem.parent.setStyle("left", parentLeft.toString() + "px");
+        this.extendedItem.parent.setStyle("top", parentTop.toString() + "px");
+        this.extendedItem.parent.setStyle("height", Math.round(heightRectElement).toString() + "px");
+        this.extendedItem.parent.setStyle("width", Math.round(widthRectElement).toString() + "px");
+    }
+    _rearrangePointsFromElement(oldParentCoords) {
+        let newParentCoords = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement.parentElement);
+        let diffX = oldParentCoords.x - newParentCoords.x;
+        let diffY = oldParentCoords.y - newParentCoords.y;
+        this.extendedItem.setAttribute('x', (this._rectElement.x.baseVal.value + diffX).toString());
+        this.extendedItem.setAttribute('y', (this._rectElement.y.baseVal.value + diffY).toString());
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}

package/dist/elements/widgets/designerView/extensions/svg/SvgElementExtension.d.ts

@@ -0,0 +1,26 @@
+import { IPoint } from '../../../../../interfaces/IPoint.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class SvgElementExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    private _parentRect;
+    private _svgElement;
+    private _circles;
+    private _points;
+    private _startPoint;
+    private _startPos;
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+    _drawPathCircle(index: number, circle: SVGCircleElement): SVGCircleElement;
+    pointerEvent(event: PointerEvent, index: number, circle: SVGCircleElement, changed?: ({}: {}) => void): void;
+    modifyElementPoint(element: SVGElement, index: number, newPoint: IPoint): void;
+    _getMinMaxValues(coords: any): {
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+    };
+}

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

@@ -0,0 +1,144 @@
+import { EventNames } from '../../../../../enums/EventNames.js';
+import { AbstractExtension } from '../AbstractExtension.js';
+import { OverlayLayer } from '../OverlayLayer.js';
+function getSvgElementPoints(element) {
+    if (element instanceof SVGRectElement) {
+        return [
+            { x: element.x.baseVal.value, y: element.y.baseVal.value },
+            { x: element.x.baseVal.value + element.width.baseVal.value, y: element.y.baseVal.value },
+            { x: element.x.baseVal.value + element.width.baseVal.value, y: element.y.baseVal.value + element.height.baseVal.value },
+            { x: element.x.baseVal.value, y: element.y.baseVal.value + element.height.baseVal.value },
+        ];
+    }
+    else if (element instanceof SVGLineElement) {
+        return [
+            { x: element.x1.baseVal.value, y: element.y1.baseVal.value },
+            { x: element.x2.baseVal.value, y: element.y2.baseVal.value }
+        ];
+    }
+    return null;
+}
+export class SvgElementExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    _parentRect;
+    _svgElement;
+    //private _startScrollOffset: IPoint;
+    _circles = [];
+    _points;
+    _startPoint;
+    _startPos;
+    extend() {
+        this._parentRect = this.extendedItem.element.parentElement.getBoundingClientRect();
+        this._svgElement = this.extendedItem.node;
+        //this._startScrollOffset = this.designerCanvas.canvasOffset;
+        this.refresh();
+    }
+    refresh() {
+        let points = getSvgElementPoints(this._svgElement);
+        if (this._valuesHaveChanges(this.designerCanvas.scaleFactor, ...points.map(x => x.x), ...points.map(x => x.y))) {
+            this._points = points;
+            for (let i = 0; i < this._points.length; i++) {
+                this._circles[i] = this._drawPathCircle(i, this._circles[i]);
+            }
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+    _drawPathCircle(index, circle) {
+        let newCircle = this._drawCircle((this._parentRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor + this._points[index].x, (this._parentRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor + this._points[index].y, 5 / this.designerCanvas.scaleFactor, 'svg-path', circle, OverlayLayer.Foreground);
+        newCircle.style.strokeWidth = (1 / this.designerCanvas.zoomFactor).toString();
+        if (!circle) {
+            newCircle.addEventListener(EventNames.PointerDown, event => this.pointerEvent(event, index, newCircle));
+            newCircle.addEventListener(EventNames.PointerMove, event => this.pointerEvent(event, index, newCircle));
+            newCircle.addEventListener(EventNames.PointerUp, event => this.pointerEvent(event, index, newCircle));
+        }
+        return newCircle;
+    }
+    pointerEvent(event, index, circle, changed) {
+        event.stopPropagation();
+        event.preventDefault();
+        const cursorPos = this.designerCanvas.getNormalizedEventCoordinates(event);
+        const point = this._points[index];
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                this._startPos = cursorPos;
+                this._startPoint = { ...point };
+                break;
+            case EventNames.PointerMove:
+                if (this._startPos && event.buttons > 0) {
+                    let diffX = this._startPos.x - cursorPos.x;
+                    let diffY = this._startPos.y - cursorPos.y;
+                    if (event.shiftKey) {
+                        if (Math.abs(diffX) < Math.abs(diffY)) {
+                            diffX = 0;
+                        }
+                        else {
+                            diffY = 0;
+                        }
+                    }
+                    point.x = this._startPoint.x - diffX;
+                    point.y = this._startPoint.y - diffY;
+                    this.modifyElementPoint(this._svgElement, index, point);
+                    this.designerCanvas.extensionManager.refreshAllExtensions([this.extendedItem], this);
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                this._startPos = null;
+                /*if (getComputedStyle(this._rectElement.parentElement).position == "absolute") {
+                    let group = this.extendedItem.openGroup('rearrangeSvg');
+                    let newRectCoordinates = this.designerCanvas.getNormalizedElementCoordinates(this._rectElement);
+                    let newRectCoordinatesCloud = this._getPointsFromRect(newRectCoordinates);
+                    let newRectExtrema = this._getMinMaxValues(newRectCoordinatesCloud);
+                    this._rearrangeSvgParent(newRectExtrema);
+                    this._rearrangePointsFromElement(this._parentCoordinates);
+                    group.commit();
+                }*/
+                break;
+        }
+    }
+    modifyElementPoint(element, index, newPoint) {
+        if (element instanceof SVGRectElement) {
+            if (index == 1) {
+                this._points[0].y = newPoint.y;
+                this._points[2].x = newPoint.x;
+            }
+            else if (index == 3) {
+                this._points[2].y = newPoint.y;
+                this._points[0].x = newPoint.x;
+            }
+            element.x.baseVal.value = this._points[0].x;
+            element.y.baseVal.value = this._points[0].y;
+            element.width.baseVal.value = this._points[2].x - this._points[0].x;
+            element.height.baseVal.value = this._points[2].y - this._points[0].y;
+        }
+        else if (element instanceof SVGLineElement) {
+            element.x1.baseVal.value = this._points[0].x;
+            element.y1.baseVal.value = this._points[0].y;
+            element.x2.baseVal.value = this._points[1].x;
+            element.y2.baseVal.value = this._points[1].y;
+        }
+    }
+    _getMinMaxValues(coords) {
+        let extrema = { xMin: 0.0, xMax: 0.0, yMin: 0.0, yMax: 0.0 };
+        for (let i = 0; i < coords.length - 2; i++) {
+            if (coords[i] < coords[i + 1] && i <= 3) {
+                extrema.xMin = coords[i];
+            }
+            else if (coords[i] < coords[i + 1] && i > 3 && i <= 7) {
+                extrema.yMin = coords[i];
+            }
+            if (coords[i] > coords[i + 1] && i <= 3) {
+                extrema.xMax = coords[i];
+            }
+            else if (coords[i] > coords[i + 1] && i > 3 && i <= 8) {
+                extrema.yMax = coords[i];
+            }
+        }
+        return extrema;
+    }
+}

package/dist/elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.d.ts

@@ -0,0 +1,9 @@
+import { IDesignerExtensionProvider } from '../IDesignerExtensionProvider.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { IDesignerExtension } from '../IDesignerExtension.js';
+import { IExtensionManager } from '../IExtensionManger.js';
+export declare class SvgElementExtensionProvider implements IDesignerExtensionProvider {
+    shouldExtend(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): boolean;
+    getExtension(extensionManager: IExtensionManager, designerView: IDesignerCanvas, designItem: IDesignItem): IDesignerExtension;
+}

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

@@ -0,0 +1,16 @@
+import { isVisualSvgElement } from '../../../../helper/SvgHelper.js';
+import { SvgElementExtension } from './SvgElementExtension.js';
+export class SvgElementExtensionProvider {
+    shouldExtend(extensionManager, designerView, designItem) {
+        if (designItem.node instanceof SVGRectElement ||
+            designItem.node instanceof SVGLineElement ||
+            designItem.node instanceof SVGCircleElement ||
+            designItem.node instanceof SVGPathElement) {
+            return isVisualSvgElement(designItem.node);
+        }
+        return false;
+    }
+    getExtension(extensionManager, designerView, designItem) {
+        return new SvgElementExtension(extensionManager, designerView, designItem);
+    }
+}

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

@@ -21,7 +21,10 @@ export class OverlayLayerView extends BaseCustomWebComponentConstructorAppend {
     .svg-position  { stroke: black; stroke-dasharray: 2; }
     .svg-path { stroke: #3899ec; fill: orange; pointer-events: all }
     .svg-path-line { stroke: #3899ec; stroke-dasharray: 2; }
-    .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }`;
+    .svg-draw-new-element { stroke: black; fill: transparent; stroke-width: 1; }
+    .svg-toolbar-container { overflow: visible }
+    .svg-toolbar-container div { padding: 5px; display: flex; gap: 2px; background: white; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(19,23,32,.2); align-items: center; }
+    `;
     static is = 'node-projects-overlay-layer-view';
     _serviceContainer;
     _svg;

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

@@ -75,7 +75,7 @@ export class DrawElementTool {
     async _onPointerUp(designerView, event) {
         if (this.sizeOverlapThreshold) {
             this._changeGroup.commit();
-            designerView.instanceServiceContainer.selectionService.setSelectedElements([this._createdItem]);
+            designerView.instanceServiceContainer.selectionService.setSelectedElements([this._createdItem], event);
         }
         else {
             this._changeGroup.abort();

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

@@ -41,7 +41,7 @@ export class PointerTool {
             let newEl = designerCanvas.serviceContainer.elementAtPointService.getElementAtPoint(designerCanvas, { x: event.x, y: event.y });
             const designItem = DesignItem.GetOrCreateDesignItem(newEl, newEl, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
             if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) {
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem], event);
             }
             designerCanvas.showDesignItemContextMenu(designItem, event);
         }
@@ -111,7 +111,7 @@ export class PointerTool {
                 }
                 else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) {
                     if (!event.ctrlKey && !event.shiftKey)
-                        designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
+                        designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null, event);
                     this._actionType = PointerActionType.DrawSelection;
                 }
                 else {
@@ -134,7 +134,7 @@ export class PointerTool {
             designerCanvas.snapLines.clearSnaplines();
             if (this._actionType == PointerActionType.DrawSelection) {
                 if (currentDesignItem !== designerCanvas.rootDesignItem)
-                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem], event);
             }
             this._resetTool();
         }
@@ -192,9 +192,9 @@ export class PointerTool {
                     if (this._firstTimeInMove) {
                         if (!currentDesignItem.instanceServiceContainer.selectionService.selectedElements.includes(currentDesignItem)) {
                             if (event.ctrlKey || event.shiftKey)
-                                currentDesignItem.instanceServiceContainer.selectionService.setSelectedElements([...currentDesignItem.instanceServiceContainer.selectionService.selectedElements, currentDesignItem]);
+                                currentDesignItem.instanceServiceContainer.selectionService.setSelectedElements([...currentDesignItem.instanceServiceContainer.selectionService.selectedElements, currentDesignItem], event);
                             else
-                                currentDesignItem.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+                                currentDesignItem.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem], event);
                             this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
                             if (designerCanvas.alignOnSnap)
                                 designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
@@ -314,7 +314,7 @@ export class PointerTool {
                     this._started = false;
                     if (!this._movedSinceStartedAction || this._actionType == PointerActionType.DragOrSelect) {
                         if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey) {
-                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([this._actionStartedDesignItem]);
+                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([this._actionStartedDesignItem], event);
                         }
                         else {
                             this.checkSelectElement(event, designerCanvas, currentDesignItem);
@@ -370,17 +370,17 @@ export class PointerTool {
             if (index >= 0) {
                 let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);
                 newSelectedList.splice(index, 1);
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList, event);
             }
             else {
                 let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);
                 newSelectedList.push(currentDesignItem);
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList, event);
             }
         }
         else {
             if (designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem) < 0)
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem], event);
         }
     }
     static FindPossibleContainer(designItem, designItems, event) {

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

@@ -86,7 +86,6 @@ export class RectangleSelectorTool {
                         }
                     }
                 }
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
                 designerCanvas.overlayLayer.removeOverlay(this._rect);
                 this._rect = null;
                 this._initialPoint = null;

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

@@ -165,6 +165,7 @@ export class PropertyGridWithHeader extends BaseCustomWebComponentLazyAppend {
             PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._contentRect, this._propertiesService.contentProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
             PropertyGridPropertyList.refreshIsSetElementAndEditorForDesignItems(this._innerRect, this._propertiesService.innerHtmlProperty, this._instanceServiceContainer.selectionService.selectedElements, this._propertiesService);
         });
+        this._pg.instanceServiceContainer = value;
     }
 }
 customElements.define('node-projects-web-component-designer-property-grid-with-header', PropertyGridWithHeader);

package/dist/index.d.ts

@@ -131,6 +131,7 @@ export * from "./elements/services/refactorService/TextRefactorService.js";
 export type { IRefactorService } from "./elements/services/refactorService/IRefactorService.js";
 export type { IRefactoring } from "./elements/services/refactorService/IRefactoring.js";
 export type { ISelectionChangedEvent } from "./elements/services/selectionService/ISelectionChangedEvent.js";
+export type { ISelectionRefreshEvent } from "./elements/services/selectionService/ISelectionRefreshEvent.js";
 export type { ISelectionService } from "./elements/services/selectionService/ISelectionService.js";
 export * from "./elements/services/selectionService/SelectionService.js";
 export type { IStyleRule, IStyleDeclaration, IStylesheet, IStylesheetService, IDocumentStylesheet } from "./elements/services/stylesheetService/IStylesheetService.js";
@@ -202,6 +203,7 @@ export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExt
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/CanvasExtension.js";
 export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtensionProvider.js";
@@ -213,6 +215,8 @@ export * from "./elements/widgets/designerView/extensions/InvisibleElementExtens
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/svg/SvgElementExtension.js";
+export * from "./elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtension.js";
@@ -227,10 +231,20 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtension.js";
+export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js";
+export * from "./elements/widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.js";
 export * from "./elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/grid/DisplayGridExtension.js";
 export * from "./elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridChildResizeExtension.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridChildToolbarExtension.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridToolbarExtension.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js";
@@ -242,6 +256,7 @@ export type { IDesignViewConfigButtonsProvider } from './elements/widgets/design
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
 export type { IContextMenuExtension, ContextmenuInitiator } from "./elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/ChildContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";

package/dist/index.js

@@ -144,6 +144,7 @@ export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExt
 export * from "./elements/widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/CanvasExtension.js";
 export * from "./elements/widgets/designerView/extensions/CanvasExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/logic/ConditionExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/ExtensionManager.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtension.js";
 export * from "./elements/widgets/designerView/extensions/FlexboxExtensionProvider.js";
@@ -155,6 +156,8 @@ export * from "./elements/widgets/designerView/extensions/InvisibleElementExtens
 export * from "./elements/widgets/designerView/extensions/InvisibleElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtension.js";
 export * from "./elements/widgets/designerView/extensions/HighlightElementExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/svg/SvgElementExtension.js";
+export * from "./elements/widgets/designerView/extensions/svg/SvgElementExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtension.js";
 export * from "./elements/widgets/designerView/extensions/svg/PathExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/PositionExtension.js";
@@ -169,10 +172,20 @@ export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtens
 export * from "./elements/widgets/designerView/extensions/SelectionDefaultExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtension.js";
 export * from "./elements/widgets/designerView/extensions/TransformOriginExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtension.js";
+export * from "./elements/widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js";
+export * from "./elements/widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtension.js";
 export * from "./elements/widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/grid/DisplayGridExtension.js";
 export * from "./elements/widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridChildResizeExtension.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridChildToolbarExtension.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridToolbarExtension.js";
+export * from "./elements/widgets/designerView/extensions/grid/GridToolbarExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js";
@@ -182,6 +195,7 @@ export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperato
 export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/ChildContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.104",
+  "version": "0.1.106",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",