@node-projects/web-component-designer 0.0.126 → 0.0.128

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

@@ -1,109 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames';
-import { OverlayLayer } from '../extensions/OverlayLayer.js';
-import { calculateNormLegth } from '../../../helper/PathDataPolyfill';
-import { DesignItem } from '../../../item/DesignItem';
-import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction';
-export class DrawRectTool {
-    cursor = 'crosshair';
-    _path;
-    _startPoint;
-    _minX;
-    _minY;
-    _maxX;
-    _maxY;
-    _px;
-    _py;
-    constructor() {
-    }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        const offset = 50;
-        switch (event.type) {
-            case EventNames.PointerDown:
-                this._startPoint = currentPoint;
-                event.target.setPointerCapture(event.pointerId);
-                designerCanvas.captureActiveTool(this);
-                this._path = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-                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);
-                this._path.setAttribute("x", currentPoint.x.toString());
-                this._path.setAttribute("y", currentPoint.y.toString());
-                this._path.setAttribute("width", "0");
-                this._path.setAttribute("height", "0");
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._path) {
-                    this._minX = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
-                    this._maxX = currentPoint.x > this._startPoint.x ? currentPoint.x : this._startPoint.x;
-                    this._minY = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
-                    this._maxY = currentPoint.y > this._startPoint.y ? currentPoint.y : this._startPoint.y;
-                    if (event.ctrlKey) {
-                        if (event.shiftKey) {
-                            const normLength = 2 * calculateNormLegth(this._startPoint, currentPoint);
-                            this._px = this._startPoint.x - normLength / 2;
-                            this._py = this._startPoint.y - normLength / 2;
-                            this._path.setAttribute("width", (normLength).toString());
-                            this._path.setAttribute("height", (normLength).toString());
-                        }
-                        else {
-                            const w = 2 * (this._maxX - this._minX);
-                            const h = 2 * (this._maxY - this._minY);
-                            this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x - w / 2;
-                            this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y - h / 2;
-                            this._path.setAttribute("width", (w).toString());
-                            this._path.setAttribute("height", (h).toString());
-                        }
-                        this._path.setAttribute("x", this._px.toString());
-                        this._path.setAttribute("y", this._py.toString());
-                    }
-                    else {
-                        if (event.shiftKey) {
-                            const normLength = calculateNormLegth(this._startPoint, currentPoint);
-                            this._px = currentPoint.x < this._startPoint.x ? this._startPoint.x - normLength : this._startPoint.x;
-                            this._py = currentPoint.y < this._startPoint.y ? this._startPoint.y - normLength : this._startPoint.y;
-                            this._path.setAttribute("width", (normLength).toString());
-                            this._path.setAttribute("height", (normLength).toString());
-                        }
-                        else {
-                            this._px = currentPoint.x < this._startPoint.x ? currentPoint.x : this._startPoint.x;
-                            this._py = currentPoint.y < this._startPoint.y ? currentPoint.y : this._startPoint.y;
-                            this._path.setAttribute("width", (this._maxX - this._minX).toString());
-                            this._path.setAttribute("height", (this._maxY - this._minY).toString());
-                        }
-                        this._path.setAttribute("x", this._px.toString());
-                        this._path.setAttribute("y", this._py.toString());
-                    }
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.releaseActiveTool();
-                const rect = this._path.getBoundingClientRect();
-                designerCanvas.overlayLayer.removeOverlay(this._path);
-                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-                const mvX = rect.x - designerCanvas.containerBoundingRect.x - offset;
-                const mvY = rect.y - designerCanvas.containerBoundingRect.y - offset;
-                this._path.setAttribute("x", (this._px - mvX).toString());
-                this._path.setAttribute("y", (this._py - mvY).toString());
-                svg.appendChild(this._path);
-                svg.style.left = (mvX) + 'px';
-                svg.style.top = (mvY) + 'px';
-                svg.style.position = 'absolute';
-                svg.style.width = (rect.width + 2 * offset) + 'px';
-                svg.style.height = (rect.height + 2 * offset) + 'px';
-                svg.style.overflow = 'visible';
-                this._path = null;
-                const di = DesignItem.createDesignItemFromInstance(svg, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                break;
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-}

package/dist/elements/widgets/designerView/toolBar/ITool.d.ts

@@ -1,9 +0,0 @@
-import { IDisposable } from "../../../../interfaces/IDisposable";
-import { ServiceContainer } from "../../../services/ServiceContainer.js";
-import { IDesignerCanvas } from "../IDesignerCanvas";
-export interface ITool extends IDisposable {
-    readonly cursor: string;
-    activated(serviceContainer: ServiceContainer): any;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): any;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): any;
-}

package/dist/elements/widgets/designerView/toolBar/ITool.js

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

package/dist/elements/widgets/designerView/toolBar/MagicWandSelectorTool.d.ts

@@ -1,12 +0,0 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-export declare class MagicWandSelectorTool implements ITool {
-    cursor: string;
-    private _pathD;
-    private _path;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-}

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

@@ -1,64 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames';
-import { DesignItem } from '../../../item/DesignItem';
-import { OverlayLayer } from '../extensions/OverlayLayer.js';
-export class MagicWandSelectorTool {
-    cursor = 'progress';
-    _pathD;
-    _path;
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                designerCanvas.captureActiveTool(this);
-                this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                this._path.setAttribute('class', 'svg-selector');
-                this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
-                this._path.setAttribute("D", this._pathD);
-                designerCanvas.overlayLayer.addOverlay(this._path, OverlayLayer.Foregorund);
-                break;
-            case EventNames.PointerMove:
-                if (this._path) {
-                    this._pathD += "L" + currentPoint.x + " " + currentPoint.y;
-                    this._path.setAttribute("d", this._pathD + "Z");
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.releaseActiveTool();
-                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
-                const inSelectionElements = [];
-                let point = designerCanvas.overlayLayer.createPoint();
-                for (let e of elements) {
-                    let elementRect = designerCanvas.getNormalizedElementCoordinates(e);
-                    point.x = elementRect.x;
-                    point.y = elementRect.y;
-                    const p1 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.x + elementRect.width;
-                    point.y = elementRect.y;
-                    const p2 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.x;
-                    point.y = elementRect.y + elementRect.height;
-                    const p3 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    point.x = elementRect.x + elementRect.width;
-                    point.y = elementRect.y + elementRect.height;
-                    const p4 = this._path.isPointInFill(point) || this._path.isPointInStroke(point);
-                    if (p1 && p2 && p3 && p4) {
-                        const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                        inSelectionElements.push(desItem);
-                    }
-                }
-                designerCanvas.overlayLayer.removeOverlay(this._path);
-                this._path = null;
-                this._pathD = null;
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
-                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
-                break;
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-}

package/dist/elements/widgets/designerView/toolBar/NamedTools.d.ts

@@ -1,15 +0,0 @@
-export declare enum NamedTools {
-    Pointer = "Pointer",
-    DrawSelection = "DrawSelection",
-    DrawPath = "DrawPath",
-    DrawRect = "DrawRect",
-    DrawEllipsis = "DrawEllipsis",
-    DrawLine = "DrawLine",
-    Zoom = "Zoom",
-    Pan = "Pan",
-    MagicWandSelector = "MagicWandSelector",
-    RectangleSelector = "RectangleSelector",
-    PickColor = "PickColor",
-    Text = "Text",
-    TextBoc = "TextBoc"
-}

package/dist/elements/widgets/designerView/toolBar/NamedTools.js

@@ -1,16 +0,0 @@
-export var NamedTools;
-(function (NamedTools) {
-    NamedTools["Pointer"] = "Pointer";
-    NamedTools["DrawSelection"] = "DrawSelection";
-    NamedTools["DrawPath"] = "DrawPath";
-    NamedTools["DrawRect"] = "DrawRect";
-    NamedTools["DrawEllipsis"] = "DrawEllipsis";
-    NamedTools["DrawLine"] = "DrawLine";
-    NamedTools["Zoom"] = "Zoom";
-    NamedTools["Pan"] = "Pan";
-    NamedTools["MagicWandSelector"] = "MagicWandSelector";
-    NamedTools["RectangleSelector"] = "RectangleSelector";
-    NamedTools["PickColor"] = "PickColor";
-    NamedTools["Text"] = "Text";
-    NamedTools["TextBoc"] = "TextBoc";
-})(NamedTools || (NamedTools = {}));

package/dist/elements/widgets/designerView/toolBar/PanTool.d.ts

@@ -1,10 +0,0 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-export declare class PanTool implements ITool {
-    readonly cursor: string;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/toolBar/PanTool.js

@@ -1,26 +0,0 @@
-import { EventNames } from '../../../../enums/EventNames.js';
-export class PanTool {
-    cursor = 'grab';
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                designerCanvas.captureActiveTool(this);
-                break;
-            case EventNames.PointerMove:
-                if (event.buttons == 1) {
-                    designerCanvas.canvasOffset = { x: designerCanvas.canvasOffset.x + +event.movementX / designerCanvas.zoomFactor, y: designerCanvas.canvasOffset.y + event.movementY / designerCanvas.zoomFactor };
-                }
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.releaseActiveTool();
-                break;
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-}

package/dist/elements/widgets/designerView/toolBar/PickColorTool.d.ts

@@ -1,10 +0,0 @@
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-import { ServiceContainer } from '../../../services/ServiceContainer';
-export declare class PickColorTool implements ITool {
-    readonly cursor = "crosshair";
-    activated(serviceContainer: ServiceContainer): Promise<void>;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): Promise<void>;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-    dispose(): void;
-}

package/dist/elements/widgets/designerView/toolBar/PickColorTool.js

@@ -1,20 +0,0 @@
-export class PickColorTool {
-    cursor = 'crosshair';
-    async activated(serviceContainer) {
-        try {
-            //@ts-ignore
-            const eyeDropper = new EyeDropper();
-            const colorSelectionResult = await eyeDropper.open();
-            const color = colorSelectionResult.sRGBHex;
-            serviceContainer.globalContext.strokeColor = color;
-        }
-        finally {
-            serviceContainer.globalContext.finishedWithTool(this);
-        }
-    }
-    async pointerEventHandler(designerCanvas, event, currentElement) {
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-    dispose() {
-    }
-}

package/dist/elements/widgets/designerView/toolBar/PointerTool.d.ts

@@ -1,24 +0,0 @@
-import { IDesignerCanvas } from "../IDesignerCanvas";
-import { ITool } from "./ITool";
-import { ServiceContainer } from "../../../services/ServiceContainer.js";
-export declare class PointerTool implements ITool {
-    readonly cursor: string;
-    private _movedSinceStartedAction;
-    private _initialPoint;
-    private _actionType?;
-    private _actionStartedDesignItem?;
-    private _previousEventName;
-    private _dragOverExtensionItem;
-    private _dragExtensionItem;
-    private _moveItemsOffset;
-    private _initialOffset;
-    constructor();
-    activated(serviceContainer: ServiceContainer): void;
-    dispose(): void;
-    private _showContextMenu;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    private _resetTool;
-    private _pointerActionTypeDrawSelection;
-    private _pointerActionTypeDragOrSelect;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-}

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

@@ -1,283 +0,0 @@
-import { EventNames } from "../../../../enums/EventNames";
-import { PointerActionType } from "../../../../enums/PointerActionType";
-import { DesignItem } from "../../../item/DesignItem";
-import { ExtensionType } from "../extensions/ExtensionType";
-import { NamedTools } from './NamedTools';
-export class PointerTool {
-    cursor = 'default';
-    _movedSinceStartedAction = false;
-    _initialPoint;
-    _actionType;
-    _actionStartedDesignItem;
-    _previousEventName;
-    _dragOverExtensionItem;
-    _dragExtensionItem;
-    _moveItemsOffset = { x: 0, y: 0 };
-    _initialOffset;
-    constructor() {
-    }
-    activated(serviceContainer) {
-    }
-    dispose() {
-    }
-    _showContextMenu(event, designerCanvas) {
-        event.preventDefault();
-        if (!event.shiftKey) {
-            let items = designerCanvas.elementsFromPoint(event.x, event.y);
-            for (let e of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
-                if (items.indexOf(e.element) >= 0) {
-                    designerCanvas.showDesignItemContextMenu(designerCanvas.instanceServiceContainer.selectionService.primarySelection, event);
-                    return;
-                }
-            }
-            const designItem = DesignItem.GetOrCreateDesignItem(event.target, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-            if (!designerCanvas.instanceServiceContainer.selectionService.isSelected(designItem)) {
-                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
-            }
-            designerCanvas.showDesignItemContextMenu(designItem, event);
-        }
-    }
-    pointerEventHandler(designerCanvas, event, currentElement) {
-        if (event.button == 2) {
-            this._showContextMenu(event, designerCanvas);
-            return;
-        }
-        if (((event.ctrlKey || event.metaKey) && event.shiftKey) || event.buttons == 4) {
-            const panTool = designerCanvas.serviceContainer.designerTools.get(NamedTools.Pan);
-            if (panTool) {
-                panTool.pointerEventHandler(designerCanvas, event, currentElement);
-                return;
-            }
-        }
-        switch (event.type) {
-            case EventNames.PointerDown:
-                event.target.setPointerCapture(event.pointerId);
-                designerCanvas.captureActiveTool(this);
-                this._movedSinceStartedAction = false;
-                break;
-            case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.releaseActiveTool();
-                break;
-        }
-        if (!currentElement)
-            return;
-        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
-        const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-        if (this._actionType == null) {
-            this._initialPoint = currentPoint;
-            this._initialOffset = designerCanvas.getNormalizedOffsetInElement(event, currentElement);
-            if (event.type == EventNames.PointerDown) {
-                this._actionStartedDesignItem = currentDesignItem;
-                designerCanvas.snapLines.clearSnaplines();
-                if (currentDesignItem !== designerCanvas.rootDesignItem) {
-                    this._actionType = PointerActionType.Drag;
-                }
-                else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) {
-                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(null);
-                    this._actionType = PointerActionType.DrawSelection;
-                }
-                else {
-                    this._actionType = PointerActionType.DragOrSelect;
-                }
-            }
-        }
-        if (event.type === EventNames.PointerMove) {
-            this._movedSinceStartedAction = this._movedSinceStartedAction || currentPoint.x != this._initialPoint.x || currentPoint.y != this._initialPoint.y;
-            if (this._actionType == PointerActionType.DrawSelection)
-                this._actionType = PointerActionType.DrawingSelection;
-        }
-        if (this._actionType == PointerActionType.DrawSelection || this._actionType == PointerActionType.DrawingSelection) {
-            this._pointerActionTypeDrawSelection(designerCanvas, event, currentElement);
-        }
-        else if (this._actionType == PointerActionType.DragOrSelect || this._actionType == PointerActionType.Drag) {
-            this._pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint);
-        }
-        if (event.type == EventNames.PointerUp) {
-            designerCanvas.snapLines.clearSnaplines();
-            if (this._actionType == PointerActionType.DrawSelection) {
-                if (currentDesignItem !== designerCanvas.rootDesignItem)
-                    designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
-            }
-            this._resetTool();
-        }
-        this._previousEventName = event.type;
-    }
-    _resetTool() {
-        this._actionType = null;
-        this._actionStartedDesignItem = null;
-        this._movedSinceStartedAction = false;
-        this._initialPoint = null;
-    }
-    _pointerActionTypeDrawSelection(designerView, event, currentElement) {
-        const drawSelectionTool = designerView.serviceContainer.designerTools.get(NamedTools.DrawSelection);
-        if (drawSelectionTool) {
-            this._resetTool();
-            drawSelectionTool.pointerEventHandler(designerView, event, currentElement);
-        }
-    }
-    _pointerActionTypeDragOrSelect(designerCanvas, event, currentDesignItem, currentPoint) {
-        if (event.altKey) {
-            if (event.type == EventNames.PointerDown) {
-                const currentSelection = designerCanvas.instanceServiceContainer.selectionService.primarySelection;
-                if (currentSelection) {
-                    const elements = designerCanvas.elementsFromPoint(event.x, event.y);
-                    let idx = elements.indexOf(currentSelection.element);
-                    if (idx >= 0) {
-                        idx++;
-                    }
-                    let currentElement = elements[idx];
-                    if (currentElement)
-                        currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                }
-            }
-        }
-        switch (event.type) {
-            case EventNames.PointerDown:
-                {
-                    this._actionStartedDesignItem = currentDesignItem;
-                    this._moveItemsOffset = { x: 0, y: 0 };
-                    if (event.shiftKey || event.ctrlKey) {
-                        const index = designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem);
-                        if (index >= 0) {
-                            let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);
-                            newSelectedList.splice(index, 1);
-                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
-                        }
-                        else {
-                            let newSelectedList = designerCanvas.instanceServiceContainer.selectionService.selectedElements.slice(0);
-                            newSelectedList.push(currentDesignItem);
-                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(newSelectedList);
-                        }
-                    }
-                    else {
-                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements.indexOf(currentDesignItem) < 0)
-                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
-                    }
-                    if (designerCanvas.alignOnSnap)
-                        designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                    break;
-                }
-            case EventNames.PointerMove:
-                {
-                    const elementMoved = currentPoint.x != this._initialPoint.x || currentPoint.y != this._initialPoint.y;
-                    if (this._actionType != PointerActionType.Drag && elementMoved) {
-                        this._actionType = PointerActionType.Drag;
-                    }
-                    if (this._movedSinceStartedAction) {
-                        const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
-                        const currentContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
-                        if (currentContainerService) {
-                            const dragItem = this._actionStartedDesignItem.parent;
-                            if (this._dragExtensionItem != dragItem) {
-                                designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
-                                designerCanvas.extensionManager.applyExtension(dragItem, ExtensionType.ContainerDrag);
-                                this._dragExtensionItem = dragItem;
-                            }
-                            else {
-                                designerCanvas.extensionManager.refreshExtension(dragItem, ExtensionType.ContainerDrag);
-                            }
-                            const canLeave = currentContainerService.canLeave(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
-                            let newContainerElementDesignItem = null;
-                            let newContainerService = null;
-                            if (canLeave) {
-                                const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y);
-                                for (let e of elementsFromPoint) {
-                                    if (e == this._actionStartedDesignItem.element) {
-                                        continue;
-                                    }
-                                    else if (e == this._actionStartedDesignItem.parent.element) {
-                                        break;
-                                    }
-                                    else if (e == designerCanvas.rootDesignItem.element) {
-                                        newContainerElementDesignItem = designerCanvas.rootDesignItem;
-                                        const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                                        newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                                        break;
-                                    }
-                                    else if (false) {
-                                        //check we don't try to move a item over one of its children..
-                                    }
-                                    else {
-                                        newContainerElementDesignItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
-                                        const containerStyle = getComputedStyle(newContainerElementDesignItem.element);
-                                        newContainerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(newContainerElementDesignItem, containerStyle));
-                                        if (newContainerService) {
-                                            if (newContainerService.canEnter(newContainerElementDesignItem, [this._actionStartedDesignItem])) {
-                                                break;
-                                            }
-                                            else {
-                                                newContainerElementDesignItem = null;
-                                                newContainerService = null;
-                                                continue;
-                                            }
-                                        }
-                                    }
-                                }
-                                //if we found a new enterable container create extensions 
-                                if (newContainerElementDesignItem != null) {
-                                    if (this._dragOverExtensionItem != newContainerElementDesignItem) {
-                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
-                                        designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver);
-                                        this._dragOverExtensionItem = newContainerElementDesignItem;
-                                    }
-                                    else {
-                                        designerCanvas.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOver);
-                                    }
-                                }
-                                else {
-                                    if (this._dragOverExtensionItem) {
-                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
-                                        this._dragOverExtensionItem = null;
-                                    }
-                                }
-                            }
-                            if (newContainerService && event.altKey) {
-                                //TODO: all items, fix position
-                                const oldOffset = currentContainerService.getElementOffset(this._actionStartedDesignItem.parent, this._actionStartedDesignItem);
-                                const newOffset = newContainerService.getElementOffset(newContainerElementDesignItem, this._actionStartedDesignItem);
-                                this._moveItemsOffset = { x: newOffset.x - oldOffset.x + this._moveItemsOffset.x, y: newOffset.y - oldOffset.y + this._moveItemsOffset.y };
-                                currentContainerService.leaveContainer(this._actionStartedDesignItem.parent, [this._actionStartedDesignItem]);
-                                newContainerElementDesignItem._insertChildInternal(this._actionStartedDesignItem);
-                                const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
-                                newContainerService.enterContainer(newContainerElementDesignItem, [this._actionStartedDesignItem]);
-                                newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                            }
-                            else {
-                                const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
-                                currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                            }
-                            designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                        }
-                    }
-                    break;
-                }
-            case EventNames.PointerUp:
-                {
-                    if (!this._movedSinceStartedAction || this._actionType == PointerActionType.DragOrSelect) {
-                        if (this._previousEventName == EventNames.PointerDown && !event.shiftKey && !event.ctrlKey)
-                            designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([this._actionStartedDesignItem]);
-                        return;
-                    }
-                    if (this._movedSinceStartedAction) {
-                        const containerStyle = getComputedStyle(this._actionStartedDesignItem.parent.element);
-                        let containerService = designerCanvas.serviceContainer.getLastServiceWhere('containerService', x => x.serviceForContainer(this._actionStartedDesignItem.parent, containerStyle));
-                        const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
-                        if (containerService) {
-                            let cg = designerCanvas.rootDesignItem.openGroup("Move Elements", designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                            containerService.finishPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                            cg.commit();
-                        }
-                        designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
-                        this._dragExtensionItem = null;
-                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOver);
-                        this._dragOverExtensionItem = null;
-                        this._moveItemsOffset = { x: 0, y: 0 };
-                    }
-                    designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
-                    break;
-                }
-        }
-    }
-    keyboardEventHandler(designerCanvas, event, currentElement) { }
-}

package/dist/elements/widgets/designerView/toolBar/RectangleSelectorTool.d.ts

@@ -1,12 +0,0 @@
-import { ServiceContainer } from '../../../services/ServiceContainer.js';
-import { IDesignerCanvas } from '../IDesignerCanvas';
-import { ITool } from './ITool';
-export declare class RectangleSelectorTool implements ITool {
-    cursor: string;
-    private _rect;
-    private _initialPoint;
-    activated(serviceContainer: ServiceContainer): void;
-    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
-    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
-    dispose(): void;
-}