@node-projects/web-component-designer 0.0.92 → 0.0.95

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

@@ -27,6 +27,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     containerBoundingRect;
     outerRect;
     clickOverlay;
+    _activeTool;
     // IPlacementView
     gridSize = 10;
     alignOnGrid = false;
@@ -40,7 +41,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _scaleFactor = 1; //if scale css property is used this need to be the scale value
     _canvasOffset = { x: 0, y: 0 };
     _currentContextMenu;
-    _lastPointerDownHandler;
     get zoomFactor() {
         return this._zoomFactor;
     }
@@ -158,6 +158,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _onDblClickBound;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         this._canvas = this._getDomElement('node-projects-designer-canvas-canvas');
         this._canvasContainer = this._getDomElement('node-projects-designer-canvas-canvasContainer');
         this._outercanvas2 = this._getDomElement('node-projects-designer-canvas-outercanvas2');
@@ -344,7 +345,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.extensionManager = new ExtensionManager(this);
         this.overlayLayer = new OverlayLayerView(serviceContainer);
         this.overlayLayer.style.pointerEvents = 'none';
-        this._canvasContainer.appendChild(this.overlayLayer);
+        this.clickOverlay.appendChild(this.overlayLayer);
         this.snapLines = new Snaplines(this.overlayLayer);
         this.snapLines.initialize(this.rootDesignItem);
         if (this.serviceContainer.designerPointerExtensions)
@@ -362,15 +363,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.addDesignItems(parser.createDesignItems(children, this.serviceContainer, this.instanceServiceContainer));
         }
     }
-    elementFromPoint(x, y) {
-        this.clickOverlay.style.pointerEvents = 'none';
-        //@ts-ignore
-        let element = this.shadowRoot.elementFromPoint(x, y);
-        if (element === this.clickOverlay)
-            element = this._canvas;
-        this.clickOverlay.style.pointerEvents = 'auto';
-        return element;
-    }
     connectedCallback() {
         if (!this._firstConnect) {
             this._firstConnect = true;
@@ -401,6 +393,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._scaleFactor = this._zoomFactor;
         this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + (isNaN(this._canvasOffset.x) ? '0' : this._canvasOffset.x) + 'px, ' + (isNaN(this._canvasOffset.y) ? '0' : this._canvasOffset.y) + 'px)';
         this._canvasContainer.style.transformOrigin = '0 0';
+        this.overlayLayer.style.transform = this._canvasContainer.style.transform;
+        this.overlayLayer.style.transformOrigin = '0 0';
         this.snapLines.clearSnaplines();
     }
     setDesignItems(designItems) {
@@ -592,6 +586,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         event.preventDefault();
     }
+    /**
+     * Converts the Event x/y coordinates, to the mouse position on the canvas
+     */
     getNormalizedEventCoordinates(event) {
         const offsetOfOuterX = (event.clientX - this.outerRect.x) / this.zoomFactor;
         const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x;
@@ -602,14 +599,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             y: offsetOfOuterY - offsetOfCanvasY / this.zoomFactor
         };
     }
-    convertEventToViewPortCoordinates(point) {
-        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x;
-        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y;
-        return {
-            x: (point.x + offsetOfCanvasX / this.zoomFactor) * this.zoomFactor,
-            y: (point.y + offsetOfCanvasY / this.zoomFactor) * this.zoomFactor
-        };
-    }
+    /**
+     * Converts the Event x/y coordinates, to the mouse position in the viewport
+     */
     getViewportCoordinates(event) {
         return {
             x: (event.clientX - this.outerRect.x),
@@ -625,51 +617,67 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         const normEl = this.getNormalizedElementCoordinates(element);
         return { x: normEvt.x - normEl.x, y: normEvt.y - normEl.y };
     }
+    //todo: remove
+    elementFromPoint(x, y) {
+        let elements = this.shadowRoot.elementsFromPoint(x, y);
+        let element = elements[0];
+        if (element === this.clickOverlay)
+            element = elements[1];
+        if (element === this.clickOverlay)
+            element = this._canvas;
+        return element;
+    }
+    elementsFromPoint(x, y) {
+        let retVal = [];
+        let elements = this.shadowRoot.elementsFromPoint(x, y);
+        for (let e of elements) {
+            if (e == this.clickOverlay)
+                continue;
+            if (e == this.overlayLayer)
+                continue;
+            if (e.getRootNode() !== this.shadowRoot)
+                continue;
+            retVal.push(e);
+            if (e === this._canvas)
+                break;
+        }
+        return retVal;
+    }
     getElementAtPoint(point, ignoreElementCallback) {
-        let backupPEventsMap = new Map();
-        let currentElement = this.elementFromPoint(point.x, point.y);
-        this.clickOverlay.style.pointerEvents = 'none';
-        let lastElement = null;
-        try {
-            while (currentElement != null) {
-                if (currentElement == lastElement) {
-                    currentElement = null;
-                    break;
-                }
-                lastElement = currentElement;
-                if (currentElement == this._canvas) {
-                    break;
-                }
-                if (currentElement === this.overlayLayer) {
-                    currentElement = this.overlayLayer.elementFromPoint(point.x, point.y);
-                    break;
-                }
-                if (!ignoreElementCallback || !ignoreElementCallback(currentElement)) {
-                    break;
-                }
-                backupPEventsMap.set(currentElement, currentElement.style.pointerEvents);
-                currentElement.style.pointerEvents = 'none';
-                if (currentElement.shadowRoot) {
-                    for (let e of currentElement.shadowRoot.querySelectorAll('*')) {
-                        if (!backupPEventsMap.has(e)) {
-                            if (e.style)
-                                backupPEventsMap.set(e, e.style.pointerEvents);
-                            e.style.pointerEvents = 'none';
-                        }
-                    }
-                }
-                currentElement = this.elementFromPoint(point.x, point.y);
+        const elements = this.shadowRoot.elementsFromPoint(point.x, point.y);
+        let currentElement = null;
+        for (let i = 0; i < elements.length; i++) {
+            currentElement = elements[i];
+            if (currentElement == this.clickOverlay) {
+                currentElement = null;
+                continue;
             }
-        }
-        finally {
-            for (let e of backupPEventsMap.entries()) {
-                e[0].style.pointerEvents = e[1];
+            if (currentElement == this.overlayLayer) {
+                currentElement = null;
+                continue;
+            }
+            if (ignoreElementCallback && ignoreElementCallback(currentElement)) {
+                currentElement = null;
+                continue;
+            }
+            if (currentElement.getRootNode() !== this.shadowRoot) {
+                currentElement = null;
+                continue;
             }
-            this.clickOverlay.style.pointerEvents = 'auto';
+            break;
         }
         return currentElement;
     }
-    _rect;
+    showHoverExtension(element) {
+        const currentDesignItem = DesignItem.GetOrCreateDesignItem(element, this.serviceContainer, this.instanceServiceContainer);
+        if (this._lastHoverDesignItem != currentDesignItem) {
+            if (this._lastHoverDesignItem)
+                this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver);
+            if (currentDesignItem && currentDesignItem != this.rootDesignItem && DomHelper.getHost(element.parentNode) !== this.overlayLayer)
+                this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver);
+            this._lastHoverDesignItem = currentDesignItem;
+        }
+    }
     _pointerEventHandler(event, forceElement = null) {
         this._fillCalculationrects();
         if (this._pointerextensions) {
@@ -683,56 +691,32 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             currentElement = forceElement;
         else {
             currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
-            if (currentElement === this._outercanvas2 || currentElement === this.overlayLayer || !currentElement) {
+            if (!currentElement) {
                 currentElement = this._canvas;
             }
-        } /* else {
-          if (!DesignerCanvas.hasOrIsParent(currentElement, this._canvas))
-            return;
-        }*/
-        if (this._lastPointerDownHandler) {
-            try {
-                this._lastPointerDownHandler(event);
-            }
-            catch { }
-            if (event.type == EventNames.PointerUp)
-                this._lastPointerDownHandler = null;
-            return;
         }
-        if (currentElement instanceof SVGGraphicsElement && currentElement?.ownerSVGElement?.parentNode?.host == this.overlayLayer) {
-            this.clickOverlay.style.cursor = getComputedStyle(currentElement).cursor;
-            if (event.type == EventNames.PointerDown) {
-                this._lastPointerDownHandler = (evt) => currentElement.dispatchEvent(new evt.constructor(evt.type, evt));
-            }
-            currentElement.dispatchEvent(new event.constructor(event.type, event));
+        if (this._activeTool) {
+            this._activeTool.pointerEventHandler(this, event, currentElement);
             return;
         }
         this.clickOverlay.style.cursor = this._canvas.style.cursor;
-        //TODO: remove duplication when tool refactoring starts
-        //this._fillCalculationrects();
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(currentElement, this.serviceContainer, this.instanceServiceContainer);
-        if (this._lastHoverDesignItem != currentDesignItem) {
-            if (this._lastHoverDesignItem)
-                this.extensionManager.removeExtension(this._lastHoverDesignItem, ExtensionType.MouseOver);
-            if (currentDesignItem && currentDesignItem != this.rootDesignItem && DomHelper.getHost(currentElement.parentNode) !== this.overlayLayer)
-                this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver);
-            this._lastHoverDesignItem = currentDesignItem;
-        }
+        this.showHoverExtension(currentDesignItem.element);
+        //TODO: needed ??
         if (currentElement && DomHelper.getHost(currentElement.parentNode) === this.overlayLayer) {
             if (this.eatEvents)
                 return;
             currentElement = this.instanceServiceContainer.selectionService.primarySelection?.element ?? this._canvas;
         }
-        this._fillCalculationrects();
         let tool = this.serviceContainer.globalContext.tool ?? this.serviceContainer.designerTools.get(NamedTools.Pointer);
         this._canvas.style.cursor = tool.cursor;
-        if (event.type == EventNames.PointerDown) {
-            this._lastPointerDownHandler = (evt) => tool.pointerEventHandler(this, evt, currentElement);
-        }
         tool.pointerEventHandler(this, event, currentElement);
     }
-    removeCurrentPointerEventHandler() {
-        this._lastPointerDownHandler = null;
+    captureActiveTool(tool) {
+        this._activeTool = tool;
+    }
+    releaseActiveTool() {
+        this._activeTool = null;
     }
     _fillCalculationrects() {
         this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
@@ -744,40 +728,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     removeOverlay(element) {
         this.overlayLayer.removeOverlay(element);
     }
-    getItemsBelowMouse(event) {
-        const lstEl = [];
-        //search for containers below mouse cursor.
-        //to do this, we need to disable pointer events for each in a loop and search wich element is there
-        let backupPEventsMap = new Map();
-        this.clickOverlay.style.pointerEvents = 'none';
-        try {
-            let el = this.elementFromPoint(event.x, event.y);
-            backupPEventsMap.set(el, el.style.pointerEvents);
-            el.style.pointerEvents = 'none';
-            if (el !== this.rootDesignItem.element) {
-                while (el != null) {
-                    if (el === this.rootDesignItem.element)
-                        break;
-                    if (el !== this.overlayLayer && el.parentElement !== this.overlayLayer && el.getRootNode() === this.shadowRoot)
-                        lstEl.push(el);
-                    if (!backupPEventsMap.has(el))
-                        backupPEventsMap.set(el, el.style.pointerEvents);
-                    el.style.pointerEvents = 'none';
-                    const oldEl = el;
-                    el = this.elementFromPoint(event.x, event.y);
-                    if (oldEl === el)
-                        break;
-                }
-            }
-        }
-        finally {
-            for (let e of backupPEventsMap.entries()) {
-                e[0].style.pointerEvents = e[1];
-            }
-            this.clickOverlay.style.pointerEvents = 'auto';
-        }
-        return lstEl;
-    }
     zoomOntoRectangle(startPoint, endPoint) {
         let rect = {
             x: startPoint.x < endPoint.x ? startPoint.x : endPoint.x,
@@ -802,9 +752,17 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         };
         this.canvasOffset = newCanvasOffset;
     }
+    zoomConvertEventToViewPortCoordinates(point) {
+        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x;
+        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y;
+        return {
+            x: (point.x + offsetOfCanvasX / this.zoomFactor) * this.zoomFactor,
+            y: (point.y + offsetOfCanvasY / this.zoomFactor) * this.zoomFactor
+        };
+    }
     zoomTowardsPoint(canvasPoint, newZoom) {
         const scaleChange = newZoom / this.zoomFactor;
-        const point = this.convertEventToViewPortCoordinates(canvasPoint);
+        const point = this.zoomConvertEventToViewPortCoordinates(canvasPoint);
         const newCanvasOffset = {
             x: -(point.x * (scaleChange - 1) + scaleChange * -this.canvasOffsetUnzoomed.x),
             y: -(point.y * (scaleChange - 1) + scaleChange * -this.canvasOffsetUnzoomed.y)

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

@@ -17,9 +17,13 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     get designerCanvas(): DesignerCanvas;
     private _zoomInput;
     private _lowertoolbar;
+    private _tooldock;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     constructor();
+    ready(): Promise<void>;
+    zoomReset(): void;
+    zoomToFit(): void;
     private _onScrollbar;
     private _onWheel;
     get designerWidth(): string;

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

@@ -25,6 +25,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     }
     _zoomInput;
     _lowertoolbar;
+    _tooldock;
     static style = css `
     :host {
       display: block;
@@ -77,8 +78,15 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
       height: 100%;
     }
     #canvas {
-      width: calc(100% - 16px);
+      left: 36px;
+      width: calc(100% - 52px);
+      height: calc(100% - 32px);
+    }
+
+    #tool-bar{
+      width: 36px;
       height: calc(100% - 32px);
+      position: absolute;
     }
   
     .zoom-in {
@@ -120,7 +128,9 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     static template = html `
     <div id="outer">
       <node-projects-plain-scrollbar id="s-hor" value="0.5" class="bottom-scroll"></node-projects-plain-scrollbar>
-      <node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll"></node-projects-plain-scrollbar>
+      <node-projects-plain-scrollbar id="s-vert" value="0.5" orientation="vertical" class="right-scroll">
+      </node-projects-plain-scrollbar>
+      <node-projects-designer-tools-dock id="tool-bar" class="tool-bar"></node-projects-designer-tools-dock>
       <div class="bottom-right"></div>
       <div id="lowertoolbar">
         <input id="zoomInput" type="text" value="100%">
@@ -138,6 +148,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     </div>`;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         const outer = this._getDomElement('outer');
         this._designerCanvas = new DesignerCanvas();
         this._designerCanvas.id = "canvas";
@@ -179,38 +190,11 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         };
         let zoomReset = this._getDomElement('zoomReset');
         zoomReset.onclick = () => {
-            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
-            this._designerCanvas.zoomFactor = 1;
-            this._sVert.value = 0.5;
-            this._sHor.value = 0.5;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+            this.zoomReset();
         };
         let zoomFit = this._getDomElement('zoomFit');
         zoomFit.onclick = () => {
-            let maxX = 0, maxY = 0, minX = 0, minY = 0;
-            this._designerCanvas.canvasOffset = { x: 0, y: 0 };
-            this._designerCanvas.zoomFactor = 1;
-            for (let n of DomHelper.getAllChildNodes(this.designerCanvas.rootDesignItem.element)) {
-                if (n instanceof Element) {
-                    const rect = n.getBoundingClientRect();
-                    minX = minX < rect.x ? minX : rect.x;
-                    minY = minY < rect.y ? minY : rect.y;
-                    maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
-                    maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
-                }
-            }
-            const cvRect = this.designerCanvas.getBoundingClientRect();
-            maxX -= cvRect.x;
-            maxY -= cvRect.y;
-            let scaleX = cvRect.width / (maxX / this._designerCanvas.zoomFactor);
-            let scaleY = cvRect.height / (maxY / this._designerCanvas.zoomFactor);
-            const dimensions = this.designerCanvas.getDesignSurfaceDimensions();
-            if (dimensions.width)
-                scaleX = cvRect.width / dimensions.width;
-            if (dimensions.height)
-                scaleY = cvRect.height / dimensions.height;
-            this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
-            this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+            this.zoomToFit();
         };
         this.addEventListener(EventNames.Wheel, event => this._onWheel(event));
         let alignSnap = this._getDomElement('alignSnap');
@@ -225,6 +209,43 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
         this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
     }
+    async ready() {
+        this._tooldock = await this._getDomElement('tool-bar');
+        this._tooldock.initialize(this.serviceContainer, this);
+    }
+    zoomReset() {
+        this._designerCanvas.canvasOffset = { x: 0, y: 0 };
+        this._designerCanvas.zoomFactor = 1;
+        this._sVert.value = 0.5;
+        this._sHor.value = 0.5;
+        this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+    }
+    zoomToFit() {
+        let maxX = 0, maxY = 0, minX = 0, minY = 0;
+        this._designerCanvas.canvasOffset = { x: 0, y: 0 };
+        this._designerCanvas.zoomFactor = 1;
+        for (let n of DomHelper.getAllChildNodes(this.designerCanvas.rootDesignItem.element)) {
+            if (n instanceof Element) {
+                const rect = n.getBoundingClientRect();
+                minX = minX < rect.x ? minX : rect.x;
+                minY = minY < rect.y ? minY : rect.y;
+                maxX = maxX > rect.x + rect.width + autoZomOffset ? maxX : rect.x + rect.width + autoZomOffset;
+                maxY = maxY > rect.y + rect.height + autoZomOffset ? maxY : rect.y + rect.height + autoZomOffset;
+            }
+        }
+        const cvRect = this.designerCanvas.getBoundingClientRect();
+        maxX -= cvRect.x;
+        maxY -= cvRect.y;
+        let scaleX = cvRect.width / (maxX / this._designerCanvas.zoomFactor);
+        let scaleY = cvRect.height / (maxY / this._designerCanvas.zoomFactor);
+        const dimensions = this.designerCanvas.getDesignSurfaceDimensions();
+        if (dimensions.width)
+            scaleX = cvRect.width / dimensions.width;
+        if (dimensions.height)
+            scaleY = cvRect.height / dimensions.height;
+        this._designerCanvas.zoomFactor = scaleX < scaleY ? scaleX : scaleY;
+        this._zoomInput.value = Math.round(this._designerCanvas.zoomFactor * 100) + '%';
+    }
     _onScrollbar(e) {
         if (e?.detail == 'incrementLarge')
             e.target.value += 0.25;
@@ -244,15 +265,19 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         event.preventDefault();
         if (event.ctrlKey) {
             let zf = this._designerCanvas.zoomFactor;
-            zf += event.deltaY * -0.001; //deltamode = 0
+            const wheel = event.deltaY < 0 ? 1 : (-1);
+            zf *= Math.exp(wheel * 0.2);
             if (zf < 0.02)
                 zf = 0.02;
             const vp = this.designerCanvas.getNormalizedEventCoordinates(event);
             this.designerCanvas.zoomTowardsPoint(vp, zf);
         }
+        else if (event.shiftKey) {
+            this._sHor.value += event.deltaY / 10000;
+            this._onScrollbar(null);
+        }
         else {
-            this._sHor.value += event.deltaX / 1000;
-            this._sVert.value += event.deltaY / 1000;
+            this._sVert.value += event.deltaY / 10000;
             this._onScrollbar(null);
         }
     }

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

@@ -113,7 +113,6 @@ export class PathExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                this.designerCanvas.removeCurrentPointerEventHandler();
                 this._startPos = null;
                 this._circlePos = null;
                 this._lastPos = null;

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

@@ -7,8 +7,9 @@ export class PathExtensionProvider {
             designItem.node instanceof SVGEllipseElement ||
             designItem.node instanceof SVGLineElement ||
             designItem.node instanceof SVGPolylineElement ||
-            designItem.node instanceof SVGPolygonElement)
+            designItem.node instanceof SVGPolygonElement) {
             return true;
+        }
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

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

@@ -138,7 +138,6 @@ export class ResizeExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                this.designerCanvas.removeCurrentPointerEventHandler();
                 let cg = this.extendedItem.openGroup("Resize Elements", this.designerCanvas.instanceServiceContainer.selectionService.selectedElements);
                 this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
                 this.extendedItem.setStyle('height', this.extendedItem.element.style.height);

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

@@ -43,7 +43,6 @@ export class TransformOriginExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                this.designerCanvas.removeCurrentPointerEventHandler();
                 if (this._startPos) {
                     const dx = normalized.x - this._startPos.x;
                     const dy = normalized.y - this._startPos.y;

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

@@ -2,8 +2,10 @@ import { TransformOriginExtension } from "./TransformOriginExtension";
 import { css } from "@node-projects/base-custom-webcomponent";
 export class TransformOriginExtensionProvider {
     shouldExtend(extensionManager, designerView, designItem) {
-        if (designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg'))
-            return true;
+        if (designItem.node instanceof HTMLElement || (designItem.node instanceof SVGElement && designItem.node.localName === 'svg')) {
+            let r = designItem.element.getBoundingClientRect();
+            return r.width > 10 && r.height > 10;
+        }
         return false;
     }
     getExtension(extensionManager, designerView, designItem) {

package/dist/elements/widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js

@@ -4,7 +4,7 @@ export class ItemsBelowContextMenu {
         return initiator == 'designer';
     }
     provideContextMenuItems(event, designerCanvas, designItem) {
-        const lstItems = designerCanvas.getItemsBelowMouse(event);
+        const lstItems = designerCanvas.elementsFromPoint(event.x, event.y);
         if (lstItems.length > 0) {
             //TODO: create a submenu 'select items below...'
             return [...lstItems.map(x => ({ title: 'select: ' + x.localName + (x.id ? ' (' + x.id + ')' : ''), action: () => this._select(designerCanvas, x) }))];

package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.d.ts

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from "../../../../helper/contextMenu/IContextmenuItem";
+import { IDesignItem } from "../../../../item/IDesignItem";
+import { IDesignerCanvas } from "../../IDesignerCanvas";
+import { ContextmenuInitiator, IContextMenuExtension } from "./IContextMenuExtension";
+export declare class RotateLeftAndRight implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js

@@ -0,0 +1,12 @@
+import { CommandType } from "../../../../../commandHandling/CommandType";
+export class RotateLeftAndRight {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return true;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: 'rotate right', action: () => { designerView.executeCommand({ type: CommandType.rotateClockwise }); }, shortCut: 'Ctrl + R' },
+            { title: 'rotate left', action: () => { designerView.executeCommand({ type: CommandType.rotateCounterClockwise }); }, shortCut: 'Ctrl + Shift + R' }
+        ];
+    }
+}

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

@@ -23,6 +23,7 @@ export class DrawEllipsisTool {
             case EventNames.PointerDown:
                 this._startPoint = currentPoint;
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
                 this._path.setAttribute("stroke", designerCanvas.serviceContainer.globalContext.strokeColor);
                 this._path.setAttribute("fill", designerCanvas.serviceContainer.globalContext.fillBrush);
@@ -67,7 +68,7 @@ export class DrawEllipsisTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 const rect = this._path.getBoundingClientRect();
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

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

@@ -21,6 +21,7 @@ export class DrawLineTool {
             case EventNames.PointerDown:
                 this._startPoint = currentPoint;
                 event.target.setPointerCapture(event.pointerId);
+                designerCanvas.captureActiveTool(this);
                 this._path = document.createElementNS("http://www.w3.org/2000/svg", "line");
                 // this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
                 // this._path.setAttribute("d", this._pathD);
@@ -50,7 +51,7 @@ export class DrawLineTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 const rect = this._path.getBoundingClientRect();
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

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

@@ -28,6 +28,7 @@ export class DrawPathTool {
                 this._eventStarted = true;
                 if (!this._p2pMode) {
                     event.target.setPointerCapture(event.pointerId);
+                    designerCanvas.captureActiveTool(this);
                     this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                     this._pathD = "M" + currentPoint.x + " " + currentPoint.y;
                     this._path.setAttribute("d", this._pathD);
@@ -69,8 +70,6 @@ export class DrawPathTool {
                 }
                 break;
             case EventNames.PointerUp:
-                event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
                 if (this._eventStarted && !this._pointerMoved) {
                     this._p2pMode = true;
                 }
@@ -90,6 +89,8 @@ export class DrawPathTool {
                     }
                 }
                 if (this._samePoint && this._p2pMode || this._dragMode && !this._p2pMode) {
+                    event.target.releasePointerCapture(event.pointerId);
+                    designerCanvas.releaseActiveTool();
                     this._eventStarted = false;
                     this._p2pMode = false;
                     this._pointerMoved = false;
@@ -120,6 +121,8 @@ export class DrawPathTool {
                 //TODO: Better Path drawing (like in SVGEDIT & Adding via Undo Framework. And adding to correct container)
                 break;
         }
+        event.preventDefault();
+        event.stopPropagation();
     }
     keyboardEventHandler(designerCanvas, event, currentElement) { }
 }

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

@@ -26,6 +26,7 @@ export class DrawRectTool {
             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);
@@ -82,7 +83,7 @@ export class DrawRectTool {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                designerCanvas.removeCurrentPointerEventHandler();
+                designerCanvas.releaseActiveTool();
                 const rect = this._path.getBoundingClientRect();
                 designerCanvas.overlayLayer.removeOverlay(this._path);
                 const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");