@node-projects/web-component-designer 0.0.93 → 0.0.94

package/dist/commandHandling/CommandType.d.ts

@@ -5,6 +5,8 @@ export declare enum CommandType {
     'delete' = "delete",
     'undo' = "undo",
     'redo' = "redo",
+    'rotateCounterClockwise' = "rotateCounterClockwise",
+    'rotateClockwise' = "rotateClockwise",
     'selectAll' = "selectAll",
     'moveToFront' = "moveToFront",
     'moveForward' = "moveForward",

package/dist/commandHandling/CommandType.js

@@ -6,6 +6,8 @@ export var CommandType;
     CommandType["delete"] = "delete";
     CommandType["undo"] = "undo";
     CommandType["redo"] = "redo";
+    CommandType["rotateCounterClockwise"] = "rotateCounterClockwise";
+    CommandType["rotateClockwise"] = "rotateClockwise";
     CommandType["selectAll"] = "selectAll";
     CommandType["moveToFront"] = "moveToFront";
     CommandType["moveForward"] = "moveForward";

package/dist/elements/documentContainer.js

@@ -128,13 +128,13 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         this.codeView.dispose();
     }
     executeCommand(command) {
-        if (this._tabControl.selectedIndex === 0)
+        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2)
             this.designerView.executeCommand(command);
         else if (this._tabControl.selectedIndex === 1)
             this.codeView.executeCommand(command);
     }
     canExecuteCommand(command) {
-        if (this._tabControl.selectedIndex === 0)
+        if (this._tabControl.selectedIndex === 0 || this._tabControl.selectedIndex === 2)
             return this.designerView.canExecuteCommand(command);
         else if (this._tabControl.selectedIndex === 1)
             return this.codeView.canExecuteCommand(command);

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -55,6 +55,7 @@ import { RectContextMenu } from '../widgets/designerView/extensions/contextMenu/
 import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/PathContextMenu.js';
 import { SeperatorContextMenu } from '../widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js';
 import { ZoomToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js';
+import { RotateLeftAndRight } from '../widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -127,6 +128,8 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),
         new SeperatorContextMenu(),
+        new RotateLeftAndRight(),
+        new SeperatorContextMenu(),
         new ZoomToElementContextMenu(),
         new SeperatorContextMenu(),
         new ZMoveContextMenu(),

package/dist/elements/services/modelCommandService/DefaultModelCommandService.js

@@ -69,6 +69,56 @@ export class DefaultModelCommandService {
             }
             grp.commit();
         }
+        else if (command.type == CommandType.rotateCounterClockwise) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateCounterClockwise');
+            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('transform');
+            let degree = 0;
+            let rotation = "";
+            if (trf != null) {
+                try {
+                    if (trf.includes('-'))
+                        degree = parseInt(trf.match(/\d+/)[0]) * -1;
+                    else
+                        degree = parseInt(trf.match(/\d+/)[0]);
+                    rotation = "rotate(" + (degree - 90) + "deg)";
+                }
+                catch {
+                    rotation = "rotate(-90deg)";
+                }
+            }
+            else {
+                rotation = "rotate(-90deg)";
+            }
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('transform', rotation);
+            }
+            grp.commit();
+        }
+        else if (command.type == CommandType.rotateClockwise) {
+            const grp = designerCanvas.instanceServiceContainer.selectionService.primarySelection.openGroup('rotateClockwise');
+            var trf = designerCanvas.instanceServiceContainer.selectionService.primarySelection.styles.get('transform');
+            let degree = 0;
+            let rotation = "";
+            if (trf != null) {
+                try {
+                    if (trf.includes('-'))
+                        degree = parseInt(trf.match(/\d+/)[0]) * -1;
+                    else
+                        degree = parseInt(trf.match(/\d+/)[0]);
+                    rotation = "rotate(" + (degree + 90) + "deg)";
+                }
+                catch {
+                    rotation = "rotate(90deg)";
+                }
+            }
+            else {
+                rotation = "rotate(90deg)";
+            }
+            for (let s of designerCanvas.instanceServiceContainer.selectionService.selectedElements) {
+                s.setStyle('transform', rotation);
+            }
+            grp.commit();
+        }
         else
             return null;
         return true;

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

@@ -19,7 +19,7 @@ export class DefaultPlacementService {
         return true;
     }
     getElementOffset(container, designItem) {
-        return container.element.getBoundingClientRect();
+        return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
     }
     calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, item) {
         let trackX = newPoint.x - startPoint.x;
@@ -79,7 +79,7 @@ export class DefaultPlacementService {
         //maybe a undo actions returns itself or an id so it could be changed?
         let track = this.calculateTrack(event, placementView, startPoint, offsetInControl, newPoint, items[0]);
         let filterdItems = filterChildPlaceItems(items);
-        //TODO: -> what is if a transform already exists -> backup existing style.?
+        //TODO: -> maybe get existing transform via getComputedStyle???
         for (const designItem of filterdItems) {
             const newTransform = 'translate(' + track.x + 'px, ' + track.y + 'px)';
             combineTransforms(placementView.transformHelperElement, designItem.element, designItem.styles.get('transform'), newTransform);

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.d.ts

@@ -5,7 +5,6 @@ export declare class BindableObjectsBrowser extends BaseCustomWebComponentLazyAp
     private _tree;
     static readonly style: CSSStyleSheet;
     constructor();
-    ready(): Promise<void>;
     initialize(serviceContainer: ServiceContainer): Promise<void>;
     private lazyLoad;
 }

package/dist/elements/widgets/bindableObjectsBrowser/bindable-objects-browser.js

@@ -29,6 +29,7 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
     `;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         //@ts-ignore
         import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this._treeDiv = document.createElement('div');
@@ -36,8 +37,6 @@ export class BindableObjectsBrowser extends BaseCustomWebComponentLazyAppend {
         this._treeDiv.style.overflow = 'auto';
         this._treeDiv.setAttribute('id', 'tree');
         this.shadowRoot.appendChild(this._treeDiv);
-    }
-    async ready() {
         $(this._treeDiv).fancytree({
             icon: false,
             extensions: ['dnd5'],

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

@@ -10,6 +10,7 @@ import { OverlayLayerView } from "./overlayLayerView";
 import { IRect } from "../../../interfaces/IRect.js";
 import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { ISize } from "../../../interfaces/ISize.js";
+import { ITool } from "./tools/ITool.js";
 export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly serviceContainer: ServiceContainer;
     readonly instanceServiceContainer: InstanceServiceContainer;
@@ -32,12 +33,14 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
     getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
-    removeCurrentPointerEventHandler(): any;
+    captureActiveTool(tool: ITool): any;
+    releaseActiveTool(): any;
     getDesignSurfaceDimensions(): ISize;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): any;
     elementFromPoint(x: number, y: number): Element;
-    getItemsBelowMouse(event: MouseEvent): Element[];
+    elementsFromPoint(x: number, y: number): Element[];
+    showHoverExtension(element: Element): any;
     zoomTowardsPoint(point: IPoint, scalechange: number): void;
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;

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

@@ -14,12 +14,14 @@ import { OverlayLayer } from "./extensions/OverlayLayer";
 import { OverlayLayerView } from './overlayLayerView';
 import { IRect } from "../../../interfaces/IRect.js";
 import { ISize } from "../../../interfaces/ISize.js";
+import { ITool } from "./tools/ITool.js";
 export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
     containerBoundingRect: DOMRect;
     outerRect: DOMRect;
     clickOverlay: HTMLDivElement;
+    private _activeTool;
     gridSize: number;
     alignOnGrid: boolean;
     alignOnSnap: boolean;
@@ -32,7 +34,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _scaleFactor;
     private _canvasOffset;
     private _currentContextMenu;
-    private _lastPointerDownHandler;
     get zoomFactor(): number;
     set zoomFactor(value: number);
     get scaleFactor(): number;
@@ -71,7 +72,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     handlePasteCommand(): Promise<void>;
     handleDeleteCommand(): void;
     initialize(serviceContainer: ServiceContainer): void;
-    elementFromPoint(x: number, y: number): Element;
     connectedCallback(): void;
     private _zoomFactorChanged;
     _updateTransform(): void;
@@ -85,20 +85,28 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     private _onDblClick;
     private onKeyUp;
     private onKeyDown;
+    /**
+     * Converts the Event x/y coordinates, to the mouse position on the canvas
+     */
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
-    convertEventToViewPortCoordinates(point: IPoint): IPoint;
+    /**
+     * Converts the Event x/y coordinates, to the mouse position in the viewport
+     */
     getViewportCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
+    elementFromPoint(x: number, y: number): Element;
+    elementsFromPoint(x: number, y: number): Element[];
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
-    _rect: SVGRectElement;
+    showHoverExtension(element: Element): void;
     private _pointerEventHandler;
-    removeCurrentPointerEventHandler(): void;
+    captureActiveTool(tool: ITool): void;
+    releaseActiveTool(): void;
     private _fillCalculationrects;
     addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
     removeOverlay(element: SVGGraphicsElement): void;
-    getItemsBelowMouse(event: MouseEvent): Element[];
     zoomOntoRectangle(startPoint: IPoint, endPoint: IPoint): void;
     zoomPoint(canvasPoint: IPoint, newZoom: number): void;
+    private zoomConvertEventToViewPortCoordinates;
     zoomTowardsPoint(canvasPoint: IPoint, newZoom: number): void;
 }

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');
@@ -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;
@@ -592,6 +584,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 +597,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 +615,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 +689,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 +726,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 +750,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.js

@@ -138,6 +138,7 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
     </div>`;
     constructor() {
         super();
+        this._restoreCachedInititalValues();
         const outer = this._getDomElement('outer');
         this._designerCanvas = new DesignerCanvas();
         this._designerCanvas.id = "canvas";
@@ -250,15 +251,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[];
+}