@node-projects/web-component-designer 0.1.0 → 0.1.1

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

@@ -0,0 +1,400 @@
+import { EventNames } from '../../../../enums/EventNames.js';
+import { PointerActionType } from '../../../../enums/PointerActionType.js';
+import { DesignItem } from '../../../item/DesignItem.js';
+import { ExtensionType } from '../extensions/ExtensionType.js';
+import { NamedTools } from './NamedTools.js';
+export class PointerTool {
+    cursor = 'default';
+    _movedSinceStartedAction = false;
+    _initialPoint;
+    _actionType;
+    _actionStartedDesignItem;
+    _actionStartedDesignItems;
+    _clonedItems;
+    _copiedItemsInserted = false;
+    _previousEventName;
+    _dragOverExtensionItem;
+    _dragExtensionItem;
+    _moveItemsOffset = { x: 0, y: 0 };
+    _initialOffset;
+    _started = false;
+    ;
+    _firstTimeInMove;
+    _secondTimeInMove;
+    _changeGroup;
+    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;
+                }
+            }
+            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.showDesignItemContextMenu(designItem, event);
+        }
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        if (event.ctrlKey)
+            this.cursor = 'copy';
+        else
+            this.cursor = 'default';
+        const interactionServices = designerCanvas.serviceContainer.elementInteractionServices;
+        if (interactionServices)
+            for (let s of interactionServices) {
+                if (s.stopEventHandling(designerCanvas, event, currentElement))
+                    return;
+            }
+        if (event.button == 2 && event.type == EventNames.PointerDown) {
+            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;
+                this._copiedItemsInserted = false;
+                this._clonedItems = null;
+                this._firstTimeInMove = false;
+                this._secondTimeInMove = false;
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.releaseActiveTool();
+                this._copiedItemsInserted = false;
+                this._clonedItems = null;
+                this._firstTimeInMove = false;
+                this._secondTimeInMove = false;
+                break;
+            case EventNames.PointerMove:
+                if (this._firstTimeInMove)
+                    this._secondTimeInMove = true;
+                if (this._secondTimeInMove)
+                    this._firstTimeInMove = false;
+                else
+                    this._firstTimeInMove = true;
+                break;
+        }
+        if (!currentElement)
+            return;
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, 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;
+                this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
+                designerCanvas.snapLines.clearSnaplines();
+                if (currentDesignItem !== designerCanvas.rootDesignItem) {
+                    this._actionType = PointerActionType.Drag;
+                }
+                else if (currentElement === designerCanvas || currentElement === designerCanvas.rootDesignItem.element || currentElement == null) {
+                    if (!event.shiftKey)
+                        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._actionStartedDesignItems = 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);
+        }
+    }
+    async _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, currentElement, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                }
+            }
+        }
+        switch (event.type) {
+            case EventNames.PointerDown:
+                {
+                    this._actionStartedDesignItem = currentDesignItem;
+                    this._moveItemsOffset = { x: 0, y: 0 };
+                    this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
+                    if (designerCanvas.alignOnSnap)
+                        designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                    break;
+                }
+            case EventNames.PointerMove:
+                {
+                    if (event.buttons == 0) {
+                        return;
+                    }
+                    if (this._firstTimeInMove) {
+                        if (!currentDesignItem.instanceServiceContainer.selectionService.selectedElements.includes(currentDesignItem)) {
+                            if (event.ctrlKey || event.shiftKey)
+                                currentDesignItem.instanceServiceContainer.selectionService.setSelectedElements([...currentDesignItem.instanceServiceContainer.selectionService.selectedElements, currentDesignItem]);
+                            else
+                                currentDesignItem.instanceServiceContainer.selectionService.setSelectedElements([currentDesignItem]);
+                            this._actionStartedDesignItems = [...designerCanvas.instanceServiceContainer.selectionService.selectedElements];
+                            if (designerCanvas.alignOnSnap)
+                                designerCanvas.snapLines.calculateSnaplines(designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                        }
+                    }
+                    // *** Copy Items via Ctrl Drag ***
+                    if (!this._clonedItems) {
+                        this._clonedItems = [];
+                        for (let d of this._actionStartedDesignItems) {
+                            const clone = await d.clone();
+                            if (this._clonedItems && clone)
+                                this._clonedItems.push(clone);
+                        }
+                    }
+                    if (!this._actionStartedDesignItem)
+                        return;
+                    if (!this._changeGroup)
+                        this._changeGroup = designerCanvas.rootDesignItem.openGroup("Move Elements");
+                    if (event.ctrlKey && !this._copiedItemsInserted) {
+                        this._changeGroup.title = "Copy Elements";
+                        this._copiedItemsInserted = true;
+                        for (let i = 0; i < this._clonedItems.length; i++) {
+                            this._actionStartedDesignItems[i].insertAdjacentElement(this._clonedItems[i], 'beforebegin');
+                        }
+                        designerCanvas.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: this._clonedItems });
+                    }
+                    else if (!event.ctrlKey && this._copiedItemsInserted) {
+                        this._changeGroup.title = "Move Elements";
+                        for (let d of this._clonedItems) {
+                            d.remove();
+                        }
+                        this._copiedItemsInserted = false;
+                        designerCanvas.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: this._clonedItems });
+                    }
+                    // *** End Copy Items Part ***
+                    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, event);
+                                this._dragExtensionItem = dragItem;
+                            }
+                            else {
+                                designerCanvas.extensionManager.refreshExtension(dragItem, ExtensionType.ContainerDrag);
+                            }
+                            const canLeave = currentContainerService.canLeave(this._actionStartedDesignItem.parent, this._actionStartedDesignItems);
+                            let newContainerElementDesignItem = null;
+                            let newContainerService = null;
+                            if (canLeave) {
+                                [newContainerElementDesignItem, newContainerService] = PointerTool.FindPossibleContainer(this._actionStartedDesignItem, this._actionStartedDesignItems, event);
+                                //if we found a new enterable container create extensions 
+                                if (newContainerElementDesignItem != null) {
+                                    if (this._dragOverExtensionItem != newContainerElementDesignItem) {
+                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
+                                        designerCanvas.extensionManager.applyExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOverAndCanBeEntered, event);
+                                        this._dragOverExtensionItem = newContainerElementDesignItem;
+                                    }
+                                    else {
+                                        designerCanvas.extensionManager.refreshExtension(newContainerElementDesignItem, ExtensionType.ContainerDragOverAndCanBeEntered, event);
+                                    }
+                                }
+                                else {
+                                    if (this._dragOverExtensionItem) {
+                                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
+                                        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._actionStartedDesignItems);
+                                const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
+                                newContainerService.enterContainer(newContainerElementDesignItem, this._actionStartedDesignItems);
+                                newContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
+                            }
+                            else {
+                                const cp = { x: currentPoint.x - this._moveItemsOffset.x, y: currentPoint.y - this._moveItemsOffset.y };
+                                if (!this._started) {
+                                    for (const item of this._actionStartedDesignItems) {
+                                        designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
+                                        designerCanvas.extensionManager.removeExtension(item, ExtensionType.MouseOver);
+                                        designerCanvas.extensionManager.applyExtension(item, ExtensionType.Placement, event);
+                                    }
+                                    currentContainerService.startPlace(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
+                                    this._started = true;
+                                }
+                                currentContainerService.place(event, designerCanvas, this._actionStartedDesignItem.parent, this._initialPoint, this._initialOffset, cp, this._actionStartedDesignItems);
+                            }
+                            designerCanvas.extensionManager.refreshExtensions(this._actionStartedDesignItems, null, event);
+                        }
+                    }
+                    break;
+                }
+            case EventNames.PointerUp:
+                {
+                    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]);
+                        }
+                        else {
+                            this.checkSelectElement(event, designerCanvas, currentDesignItem);
+                        }
+                        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) {
+                            if (!this._changeGroup)
+                                this._changeGroup = designerCanvas.rootDesignItem.openGroup("Move Elements");
+                            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) {
+                                if (elements.includes(item.element))
+                                    designerCanvas.extensionManager.applyExtension(item, ExtensionType.MouseOver, event);
+                                designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
+                            }
+                        }
+                        designerCanvas.extensionManager.removeExtension(this._dragExtensionItem, ExtensionType.ContainerDrag);
+                        this._dragExtensionItem = null;
+                        designerCanvas.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerDragOverAndCanBeEntered);
+                        this._dragOverExtensionItem = null;
+                        this._moveItemsOffset = { x: 0, y: 0 };
+                    }
+                    designerCanvas.extensionManager.refreshExtensions(designerCanvas.instanceServiceContainer.selectionService.selectedElements, null, event);
+                    if (this._changeGroup) {
+                        this._changeGroup.abort();
+                        this._changeGroup = null;
+                    }
+                    break;
+                }
+        }
+    }
+    checkSelectElement(event, designerCanvas, currentDesignItem) {
+        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]);
+        }
+    }
+    static FindPossibleContainer(designItem, designItems, event) {
+        let newContainerElementDesignItem = null;
+        let newContainerService = null;
+        const designerCanvas = designItem.instanceServiceContainer.designerCanvas;
+        const elementsFromPoint = designerCanvas.elementsFromPoint(event.x, event.y);
+        for (let e of elementsFromPoint) {
+            if (e == designItem.element) {
+                continue;
+            }
+            else if (e == designItem.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, 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, designItems)) {
+                        break;
+                    }
+                    else {
+                        newContainerElementDesignItem = null;
+                        newContainerService = null;
+                        continue;
+                    }
+                }
+            }
+        }
+        return [newContainerElementDesignItem, newContainerService];
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+}

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

@@ -0,0 +1,12 @@
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { ITool } from './ITool.js';
+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;
+}

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

@@ -0,0 +1,88 @@
+import { EventNames } from '../../../../enums/EventNames.js';
+import { DesignItem } from '../../../item/DesignItem.js';
+import { OverlayLayer } from '../extensions/OverlayLayer.js';
+export class RectangleSelectorTool {
+    cursor = 'progress';
+    _rect;
+    _initialPoint;
+    activated(serviceContainer) {
+    }
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
+                this._initialPoint = currentPoint;
+                if (!this._rect)
+                    this._rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                this._rect.setAttribute('class', 'svg-selector');
+                this._rect.setAttribute('x', (this._initialPoint.x * designerCanvas.scaleFactor));
+                this._rect.setAttribute('y', (this._initialPoint.y * designerCanvas.scaleFactor));
+                this._rect.setAttribute('width', 0);
+                this._rect.setAttribute('height', 0);
+                this._rect.style.strokeWidth = '' + (1 / designerCanvas.scaleFactor);
+                this._rect.style.strokeDasharray = '' + (2 / designerCanvas.scaleFactor);
+                designerCanvas.overlayLayer.addOverlay(this.constructor.name, this._rect, OverlayLayer.Foregorund);
+                break;
+            case EventNames.PointerMove:
+                if (this._initialPoint) {
+                    let w = currentPoint.x - this._initialPoint.x;
+                    let h = currentPoint.y - this._initialPoint.y;
+                    if (w >= 0) {
+                        this._rect.setAttribute('x', this._initialPoint.x);
+                        this._rect.setAttribute('width', w);
+                    }
+                    else {
+                        this._rect.setAttribute('x', currentPoint.x);
+                        this._rect.setAttribute('width', (-1 * w));
+                    }
+                    if (h >= 0) {
+                        this._rect.setAttribute('y', this._initialPoint.y);
+                        this._rect.setAttribute('height', h);
+                    }
+                    else {
+                        this._rect.setAttribute('y', currentPoint.y);
+                        this._rect.setAttribute('height', (-1 * h));
+                    }
+                }
+                break;
+            case EventNames.PointerUp:
+                event.target.releasePointerCapture(event.pointerId);
+                designerCanvas.releaseActiveTool();
+                const elements = designerCanvas.rootDesignItem.element.querySelectorAll('*');
+                let 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._rect.isPointInFill(point);
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y;
+                    const p2 = p1 && this._rect.isPointInFill(point);
+                    point.x = elementRect.x;
+                    point.y = elementRect.y + elementRect.height;
+                    const p3 = p2 && this._rect.isPointInFill(point);
+                    point.x = elementRect.x + elementRect.width;
+                    point.y = elementRect.y + elementRect.height;
+                    const p4 = p3 && this._rect.isPointInFill(point);
+                    if (p4) {
+                        const desItem = DesignItem.GetOrCreateDesignItem(e, e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                        if (designerCanvas.instanceServiceContainer.selectionService.selectedElements)
+                            inSelectionElements.push(...designerCanvas.instanceServiceContainer.selectionService.selectedElements);
+                        inSelectionElements.push(desItem);
+                    }
+                }
+                designerCanvas.overlayLayer.removeOverlay(this._rect);
+                this._rect = null;
+                this._initialPoint = null;
+                designerCanvas.instanceServiceContainer.selectionService.setSelectedElements(inSelectionElements);
+                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+    dispose() {
+    }
+}

package/dist/elements/widgets/designerView/tools/TextTool.d.ts

@@ -0,0 +1,14 @@
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { ITool } from './ITool.js';
+export declare class TextTool implements ITool {
+    private _textEditExtensions;
+    constructor(editExistingText?: boolean);
+    activated(serviceContainer: ServiceContainer): void;
+    dispose(): void;
+    readonly cursor = "text";
+    private _textCreated;
+    private _editExistingText;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+}

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

@@ -0,0 +1,51 @@
+import { EventNames } from '../../../../enums/EventNames.js';
+import { DesignItem } from '../../../item/DesignItem.js';
+import { InsertAction } from '../../../services/undoService/transactionItems/InsertAction.js';
+import { ExtensionType } from '../extensions/ExtensionType.js';
+export class TextTool {
+    _textEditExtensions;
+    constructor(editExistingText) {
+        if (editExistingText)
+            this._editExistingText = true;
+    }
+    activated(serviceContainer) {
+        this._textCreated = false;
+    }
+    dispose() {
+    }
+    cursor = 'text';
+    _textCreated = false;
+    _editExistingText = false;
+    pointerEventHandler(designerCanvas, event, currentElement) {
+        const currentPoint = designerCanvas.getNormalizedEventCoordinates(event);
+        switch (event.type) {
+            case EventNames.PointerDown:
+                if (!this._textCreated && !this._editExistingText) {
+                    this._textCreated = true;
+                    const span = document.createElement('span');
+                    const di = DesignItem.createDesignItemFromInstance(span, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
+                    di.setStyle('position', 'absolute');
+                    di.setStyle('left', currentPoint.x + 'px');
+                    di.setStyle('top', currentPoint.y + 'px');
+                    designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
+                    //todo: Maybe we could also remove the eatEvents property
+                    //TODO - don't apply doubleclick extension (maybe it is not the doubleclick one) - apply edit text extesion directly
+                    //should we configure the editTextExtension anywhere??
+                    this._textEditExtensions = designerCanvas.extensionManager.applyExtension(di, ExtensionType.Doubleclick, event);
+                    setTimeout(() => { span.focus(); }, 50);
+                }
+                else {
+                    for (let e of this._textEditExtensions) {
+                        if (e.handlesPointerEvent) {
+                            const ret = e.handlesPointerEvent(designerCanvas, event, currentElement);
+                            if (!ret) {
+                                designerCanvas.serviceContainer.globalContext.finishedWithTool(this);
+                            }
+                        }
+                    }
+                }
+                break;
+        }
+    }
+    keyboardEventHandler(designerCanvas, event, currentElement) { }
+}

package/dist/elements/widgets/designerView/tools/ZoomTool.d.ts

@@ -0,0 +1,17 @@
+import { ServiceContainer } from '../../../services/ServiceContainer.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { ITool } from './ITool.js';
+export declare class ZoomTool implements ITool {
+    cursor: string;
+    private _rect;
+    private _startPoint;
+    private _endPoint;
+    private _pointerMovementTolerance;
+    private _zoomStepSize;
+    activated(serviceContainer: ServiceContainer): void;
+    pointerEventHandler(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): void;
+    private _zoomOnto;
+    private _isPositionEqual;
+    keyboardEventHandler(designerCanvas: IDesignerCanvas, event: KeyboardEvent, currentElement: Element): void;
+    dispose(): void;
+}