@node-projects/web-component-designer 0.0.62 → 0.0.66

package/dist/elements/documentContainer.js

@@ -1,6 +1,7 @@
 import { BaseCustomWebComponentLazyAppend, css, debounce } from "@node-projects/base-custom-webcomponent";
 import { DesignerTabControl } from "./controls/DesignerTabControl";
 import { DesignerView } from "./widgets/designerView/designerView";
+import { SimpleSplitView } from './controls/SimpleSplitView';
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     designerView;
     codeView;
@@ -14,6 +15,8 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
     _designerDiv;
     _codeDiv;
     refreshInSplitViewDebounced;
+    _disableChangeNotificationDesigner;
+    _disableChangeNotificationEditor;
     static get style() {
         return css `
       div {
@@ -23,11 +26,7 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
       }                            
       node-projects-designer-view {
         height: 100%;
-        /*overflow: auto;*/
-      }
-      .split-div {
-        display: grid;
-        grid-template-rows: 1fr 1fr;
+        overflow: hidden;
       }
       `;
     }
@@ -42,26 +41,32 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
         div.appendChild(this._tabControl);
         this.designerView = new DesignerView();
         this.designerView.setAttribute('exportparts', 'canvas');
+        this.designerView.slot = 'top';
         this._designerDiv = document.createElement("div");
         this._tabControl.appendChild(this._designerDiv);
         this._designerDiv.title = 'Designer';
         this._designerDiv.appendChild(this.designerView);
         this.designerView.initialize(this._serviceContainer);
         this.designerView.instanceServiceContainer.selectionService.onSelectionChanged.on(e => this.designerSelectionChanged(e));
+        this.designerView.designerCanvas.onContentChanged.on(() => this.designerContentChanged());
         this.codeView = new serviceContainer.config.codeViewWidget();
+        this.codeView.slot = 'bottom';
         this._codeDiv = document.createElement("div");
         this._tabControl.appendChild(this._codeDiv);
         this._codeDiv.title = 'Code';
         this._codeDiv.appendChild(this.codeView);
         this.codeView.onTextChanged.on(text => {
-            if (this._tabControl.selectedIndex === 2) {
-                this._content = text;
-                this.refreshInSplitViewDebounced();
+            if (!this._disableChangeNotificationDesigner) {
+                this._disableChangeNotificationEditor = true;
+                if (this._tabControl.selectedIndex === 2) {
+                    this._content = text;
+                    this.refreshInSplitViewDebounced();
+                }
             }
         });
-        this._splitDiv = document.createElement("div");
+        this._splitDiv = new SimpleSplitView();
+        this._splitDiv.style.height = '100%';
         this._splitDiv.title = 'Split';
-        this._splitDiv.className = 'split-div';
         this._tabControl.appendChild(this._splitDiv);
         this.demoView = new serviceContainer.config.demoViewWidget();
         this.demoView.title = 'Preview';
@@ -71,17 +76,38 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this._tabControl.selectedIndex = 0;
         });
     }
-    refreshInSplitView() {
-        this.designerView.parseHTML(this._content);
+    async refreshInSplitView() {
+        await this.designerView.parseHTML(this._content);
+        this._disableChangeNotificationEditor = false;
     }
     designerSelectionChanged(e) {
-        let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
-        if (primarySelection) {
-            let designItemsAssignmentList = new Map();
-            this._content = this.designerView.getHTML(designItemsAssignmentList);
-            this._selectionPosition = designItemsAssignmentList.get(primarySelection);
-            this.codeView.setSelection(this._selectionPosition);
-            this._selectionPosition = null;
+        if (this._tabControl.selectedIndex === 2) {
+            let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+            if (primarySelection) {
+                let designItemsAssignmentList = new Map();
+                this._content = this.designerView.getHTML(designItemsAssignmentList);
+                this._selectionPosition = designItemsAssignmentList.get(primarySelection);
+                this.codeView.setSelection(this._selectionPosition);
+                this._selectionPosition = null;
+            }
+        }
+    }
+    designerContentChanged() {
+        if (!this._disableChangeNotificationEditor) {
+            this._disableChangeNotificationDesigner = true;
+            if (this._tabControl.selectedIndex === 2) {
+                let primarySelection = this.instanceServiceContainer.selectionService.primarySelection;
+                let designItemsAssignmentList = new Map();
+                this._content = this.designerView.getHTML(designItemsAssignmentList);
+                this.codeView.update(this._content);
+                if (primarySelection) {
+                    this._selectionPosition = designItemsAssignmentList.get(primarySelection);
+                    if (this._selectionPosition)
+                        this.codeView.setSelection(this._selectionPosition);
+                    this._selectionPosition = null;
+                }
+            }
+            this._disableChangeNotificationDesigner = false;
         }
     }
     dispose() {

package/dist/elements/helper/PathDataPolyfill.d.ts

@@ -1,3 +1,4 @@
+import { IPoint } from "../../interfaces/IPoint.js";
 export {};
 declare type PathDataM = {
     type: 'M' | 'm';
@@ -42,7 +43,10 @@ declare type PathDataA = {
 declare type PathData = {
     type: string;
 } & (PathDataM | PathDataL | PathDataH | PathDataV | PathDataZ | PathDataC | PathDataS | PathDataQ | PathDataT | PathDataA)[];
-export declare function movePathData(path: SVGPathElement, xFactor: number, yFactor: number): string;
+export declare function straightenLine(p1: IPoint, p2: IPoint): IPoint;
+export declare function calculateNormLegth(p1: IPoint, p2: IPoint): number;
+export declare function calculateAlpha(p1: IPoint, p2: IPoint): number;
+export declare function moveSVGPath(path: SVGPathElement, xFactor: number, yFactor: number): string;
 declare global {
     interface SVGGraphicsElement {
         getPathData(options?: {

package/dist/elements/helper/PathDataPolyfill.js

@@ -856,7 +856,55 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
         };
     })();
 }
-export function movePathData(path, xFactor, yFactor) {
+export function straightenLine(p1, p2) {
+    let newP = p2;
+    let alpha = calculateAlpha(p1, p2);
+    let normLength;
+    if ((alpha >= 337.5 && alpha < 360 || alpha >= 0 && alpha < 22.5)) { // 0
+        newP = { x: p2.x, y: p1.y };
+    }
+    else if ((alpha >= 22.5 && alpha < 67.5)) { // 45
+        normLength = calculateNormLegth(p1, p2);
+        newP = { x: p1.x + normLength, y: p1.y - normLength };
+    }
+    else if ((alpha >= 67.5 && alpha < 112.5)) { // 90
+        newP = { x: p1.x, y: p2.y };
+    }
+    else if ((alpha >= 112.5 && alpha < 157.5)) { // 135
+        normLength = calculateNormLegth(p1, p2);
+        newP = { x: p1.x - normLength, y: p1.y - normLength };
+    }
+    else if ((alpha >= 157.5 && alpha < 202.5)) { // 180
+        newP = { x: p2.x, y: p1.y };
+    }
+    else if ((alpha >= 202.5 && alpha < 247.5)) { // 225
+        normLength = calculateNormLegth(p1, p2);
+        newP = { x: p1.x - normLength, y: p1.y + normLength };
+    }
+    else if ((alpha >= 247.5 && alpha < 292.5)) { // 270
+        newP = { x: p1.x, y: p2.y };
+    }
+    else if ((alpha >= 292.5 && alpha < 337.5)) { // 315
+        normLength = calculateNormLegth(p1, p2);
+        newP = { x: p1.x + normLength, y: p1.y + normLength };
+    }
+    return newP;
+}
+export function calculateNormLegth(p1, p2) {
+    let normLenght;
+    let currentLength = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+    let alpha = calculateAlpha(p1, p2);
+    let beta = alpha - ((Math.floor(alpha / 90) * 90) + 45);
+    normLenght = currentLength * Math.cos(beta * (Math.PI / 180)) / Math.sqrt(2);
+    return normLenght;
+}
+export function calculateAlpha(p1, p2) {
+    let alpha = -1 * Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
+    if (alpha < 0)
+        alpha += 360;
+    return alpha;
+}
+export function moveSVGPath(path, xFactor, yFactor) {
     let newPathData = "";
     let pd = path.getPathData({ normalize: true });
     {

package/dist/elements/helper/contextMenu/ContextMenuHelper.js

@@ -11,6 +11,7 @@ export class ContextMenuHelper {
     box-shadow: 1px 1px 2px #cfcfcf;
     cursor: default;
     user-select: none;
+    -webkit-user-select: none;
     border-radius: 12px;
   }
 

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -48,6 +48,10 @@ import { DefaultModelCommandService } from './modelCommandService/DefaultModelCo
 import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider';
 import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons';
 import { DemoProviderService } from './demoProviderService/DemoProviderService';
+//import { CursorLinePointerExtensionProvider } from '../widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js';
+import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
+import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
+import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -104,12 +108,18 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerTools.set(NamedTools.Pointer, new PointerTool());
     serviceContainer.designerTools.set(NamedTools.DrawSelection, new RectangleSelectorTool());
     serviceContainer.designerTools.set(NamedTools.DrawPath, new DrawPathTool());
+    serviceContainer.designerTools.set(NamedTools.DrawRect, new DrawRectTool());
+    serviceContainer.designerTools.set(NamedTools.DrawEllipsis, new DrawEllipsisTool());
+    serviceContainer.designerTools.set(NamedTools.DrawLine, new DrawLineTool());
     serviceContainer.designerTools.set(NamedTools.Zoom, new ZoomTool());
     serviceContainer.designerTools.set(NamedTools.Pan, new PanTool());
     serviceContainer.designerTools.set(NamedTools.RectangleSelector, new RectangleSelectorTool());
     serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool());
     serviceContainer.designerTools.set(NamedTools.PickColor, new PickColorTool());
     serviceContainer.designerTools.set(NamedTools.Text, new TextTool());
+    serviceContainer.designerPointerExtensions.push(
+    //new CursorLinePointerExtensionProvider()
+    );
     serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),

package/dist/elements/services/htmlParserService/NodeHtmlParserService.js

@@ -62,6 +62,8 @@ export class NodeHtmlParserService {
                     designItem.setStyle(s.name, s.value);
                 }
             }
+            if (element instanceof HTMLElement || element instanceof SVGElement)
+                element.style.pointerEvents = 'auto';
             designItem.hideAtDesignTime = hideAtDesignTime;
             designItem.hideAtRunTime = hideAtRunTime;
             designItem.lockAtDesignTime = lockAtDesignTime;

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

@@ -31,7 +31,7 @@ export class DefaultPlacementService {
             }
             else if (placementView.alignOnSnap) {
                 let rect = item.element.getBoundingClientRect();
-                let newPos = placementView.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, { width: rect.width, height: rect.height }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                let newPos = placementView.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / placementView.scaleFactor, height: rect.height / placementView.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
                 if (newPos.x !== null) {
                     trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
                 }

package/dist/elements/services/placementService/ISnaplinesProviderService.d.ts

@@ -1,11 +1,12 @@
 import { IService } from "../IService";
 import { IDesignItem } from "../../item/IDesignItem";
+import { IRect } from "../../../interfaces/IRect.js";
 export interface ISnaplinesProviderService extends IService {
     provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
         outerRect: DOMRect;
-        positionsH: [number, DOMRect][];
-        positionsMiddleH: [number, DOMRect][];
-        positionsV: [number, DOMRect][];
-        positionsMiddleV: [number, DOMRect][];
+        positionsH: [number, IRect][];
+        positionsMiddleH: [number, IRect][];
+        positionsV: [number, IRect][];
+        positionsMiddleV: [number, IRect][];
     };
 }

package/dist/elements/services/placementService/SnaplinesProviderService.d.ts

@@ -1,11 +1,12 @@
+import { IRect } from '../../../interfaces/IRect.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
 import { ISnaplinesProviderService } from './ISnaplinesProviderService.js';
 export declare class SnaplinesProviderService implements ISnaplinesProviderService {
     provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
         outerRect: DOMRect;
-        positionsH: [number, DOMRect][];
-        positionsMiddleH: [number, DOMRect][];
-        positionsV: [number, DOMRect][];
-        positionsMiddleV: [number, DOMRect][];
+        positionsH: [number, IRect][];
+        positionsMiddleH: [number, IRect][];
+        positionsV: [number, IRect][];
+        positionsMiddleV: [number, IRect][];
     };
 }

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

@@ -2,6 +2,7 @@ import { DomHelper } from '@node-projects/base-custom-webcomponent';
 export class SnaplinesProviderService {
     provideSnaplines(containerItem, ignoredItems) {
         {
+            const canvas = containerItem.instanceServiceContainer.designerCanvas;
             const ignMap = new Map(ignoredItems.map(i => [i.element, i]));
             const outerRect = containerItem.element.getBoundingClientRect();
             const positionsH = [];
@@ -11,19 +12,20 @@ export class SnaplinesProviderService {
             let ignoreElements = ignoredItems.map(x => x.element);
             for (let n of DomHelper.getAllChildNodes(containerItem.element, false, ignoreElements)) {
                 if (!ignMap.has(n)) {
-                    let p = n.getBoundingClientRect();
-                    let pLeft = p.x - outerRect.x;
-                    let pMidH = p.x - outerRect.x + p.width / 2;
-                    let pRight = p.x - outerRect.x + p.width;
-                    positionsH.push([pLeft, p]);
-                    positionsMiddleH.push([pMidH, p]);
-                    positionsH.push([pRight, p]);
-                    let pTop = p.y - outerRect.y;
-                    let pMidV = p.y - outerRect.y + p.height / 2;
-                    let pBottom = p.y - outerRect.y + p.height;
-                    positionsV.push([pTop, p]);
-                    positionsMiddleV.push([pMidV, p]);
-                    positionsV.push([pBottom, p]);
+                    const p = n.getBoundingClientRect();
+                    const pLeft = (p.x - outerRect.x) / canvas.scaleFactor;
+                    const pMidH = (p.x - outerRect.x + p.width / 2) / canvas.scaleFactor;
+                    const pRight = (p.x - outerRect.x + p.width) / canvas.scaleFactor;
+                    const pTop = (p.y - outerRect.y) / canvas.scaleFactor;
+                    const pMidV = (p.y - outerRect.y + p.height / 2) / canvas.scaleFactor;
+                    const pBottom = (p.y - outerRect.y + p.height) / canvas.scaleFactor;
+                    const transformedP = { x: pLeft + outerRect.x, y: pTop + outerRect.y, width: p.width / canvas.scaleFactor, height: p.height / canvas.scaleFactor };
+                    positionsH.push([pLeft, transformedP]);
+                    positionsMiddleH.push([pMidH, transformedP]);
+                    positionsH.push([pRight, transformedP]);
+                    positionsV.push([pTop, transformedP]);
+                    positionsMiddleV.push([pMidV, transformedP]);
+                    positionsV.push([pBottom, transformedP]);
                 }
             }
             positionsH.sort((a, b) => a[0] - b[0]);

package/dist/elements/services/undoService/UndoService.js

@@ -42,6 +42,7 @@ export class UndoService {
             this._transactionStack[this._transactionStack.length - 1].execute(item);
         }
         this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
     }
     clear() {
         this._undoStack = [];
@@ -63,6 +64,7 @@ export class UndoService {
             throw err;
         }
         this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
     }
     redo() {
         if (!this.canRedo())
@@ -79,6 +81,7 @@ export class UndoService {
             throw err;
         }
         this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
     }
     canUndo() {
         return this._undoStack.length > 0;

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

@@ -8,6 +8,7 @@ import { IUiCommandHandler } from "../../../commandHandling/IUiCommandHandler";
 import { IPoint } from "../../../interfaces/IPoint";
 import { OverlayLayerView } from "./overlayLayerView";
 import { IRect } from "../../../interfaces/IRect.js";
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
 export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly serviceContainer: ServiceContainer;
     readonly instanceServiceContainer: InstanceServiceContainer;
@@ -19,7 +20,10 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly shadowRoot: ShadowRoot;
     readonly alignOnGrid: boolean;
     readonly alignOnSnap: boolean;
+    readonly onContentChanged: TypedEvent<void>;
     zoomFactor: number;
+    readonly scaleFactor: number;
+    canvasOffset: IPoint;
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;

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

@@ -8,4 +8,6 @@ export interface IPlacementView {
     rootDesignItem: IDesignItem;
     overlayLayer: OverlayLayerView;
     snapLines: Snaplines;
+    readonly zoomFactor: number;
+    readonly scaleFactor: number;
 }

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

@@ -2,6 +2,7 @@ import type { IDesignItem } from "../../item/IDesignItem";
 import type { IPoint } from "../../../interfaces/IPoint";
 import type { ISize } from '../../../interfaces/ISize';
 import { OverlayLayerView } from "./overlayLayerView";
+import { IRect } from "../../../interfaces/IRect.js";
 export declare class Snaplines {
     snapOffset: number;
     private _overlayLayerView;
@@ -16,5 +17,5 @@ export declare class Snaplines {
     clearSnaplines(): void;
     calculateSnaplines(ignoredItems: IDesignItem[]): void;
     snapToPosition(position: IPoint, size: ISize, moveDirection: IPoint): IPoint;
-    drawSnaplines(position: IPoint, size: ISize, rectsH: DOMRect[], rectsV: DOMRect[]): void;
+    drawSnaplines(position: IPoint, size: ISize, rectsH: IRect[], rectsV: IRect[]): void;
 }

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

@@ -1,7 +1,7 @@
 import { ServiceContainer } from '../../services/ServiceContainer';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
 import { IDesignItem } from '../../item/IDesignItem';
-import { BaseCustomWebComponentLazyAppend } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { IDesignerCanvas } from './IDesignerCanvas';
 import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
@@ -26,8 +26,14 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     rootDesignItem: IDesignItem;
     eatEvents: Element;
     private _zoomFactor;
+    private _scaleFactor;
+    private _canvasOffset;
     get zoomFactor(): number;
     set zoomFactor(value: number);
+    get scaleFactor(): number;
+    get canvasOffset(): IPoint;
+    set canvasOffset(value: IPoint);
+    onContentChanged: TypedEvent<void>;
     private _canvas;
     private _canvasContainer;
     private _outercanvas2;
@@ -58,6 +64,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     elementFromPoint(x: number, y: number): Element;
     connectedCallback(): void;
     zoomFactorChanged(): void;
+    _updateTransform(): void;
     setDesignItems(designItems: IDesignItem[]): void;
     addDesignItems(designItems: IDesignItem[]): void;
     private _onDragEnter;

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

@@ -3,7 +3,7 @@ import { InstanceServiceContainer } from '../../services/InstanceServiceContaine
 import { UndoService } from '../../services/undoService/UndoService';
 import { SelectionService } from '../../services/selectionService/SelectionService';
 import { DesignItem } from '../../item/DesignItem';
-import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base-custom-webcomponent';
+import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatName } from '../../../Constants';
 import { ContentService } from '../../services/contentService/ContentService';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
@@ -34,7 +34,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     overlayLayer;
     rootDesignItem;
     eatEvents;
-    _zoomFactor = 1;
+    _zoomFactor = 1; //if scale or zoom css property is used this needs to be the value
+    _scaleFactor = 1; //if scale css property is used this need to be the scale value
+    _canvasOffset = { x: 0, y: 0 };
     get zoomFactor() {
         return this._zoomFactor;
     }
@@ -42,6 +44,17 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._zoomFactor = value;
         this.zoomFactorChanged();
     }
+    get scaleFactor() {
+        return this._scaleFactor;
+    }
+    get canvasOffset() {
+        return this._canvasOffset;
+    }
+    set canvasOffset(value) {
+        this._canvasOffset = value;
+        this.zoomFactorChanged();
+    }
+    onContentChanged = new TypedEvent();
     // Private Variables
     _canvas;
     _canvasContainer;
@@ -90,23 +103,27 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
       pointer-events: none;
       overflow: visible;
       user-select: none;
+      -webkit-user-select: none;
       z-index: 999999999999;
     }
     
     #node-projects-designer-canvas-canvas * {
       cursor: pointer;
       user-select: none;
+      -webkit-user-select: none;
     }`;
     static template = html `
-        <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
-          <div style="width: 100%;height: 100%;">
-            <div id="node-projects-designer-canvas-outercanvas2" style="width: 100%;height: 100%;position: relative;overflow: auto;">
-              <div id="node-projects-designer-canvas-canvasContainer" style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;/* bottom: 0; does not work with fixed sized when size is bigger then view */left: 0;user-select: none;">
-                <div id="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
-              </div>
-            </div>
+    <div style="display: flex;flex-direction: column;width: 100%;height: 100%;">
+      <div style="width: 100%;height: 100%;">
+        <div id="node-projects-designer-canvas-outercanvas2"
+          style="width:100%;height:100%;position:relative;">
+          <div id="node-projects-designer-canvas-canvasContainer"
+            style="width: 100%;height: 100%;margin: auto;position: absolute;top: 0;/* bottom: 0; does not work with fixed sized when size is bigger then view */left: 0;user-select: none;">
+            <div id="node-projects-designer-canvas-canvas" part="canvas" tabindex="0"></div>
           </div>
-        </div>`;
+        </div>
+      </div>
+    </div>`;
     extensionManager;
     _pointerextensions;
     _onDblClickBound;
@@ -320,16 +337,23 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
     }
     zoomFactorChanged() {
-        //@ts-ignore
-        this._canvasContainer.style.zoom = this._zoomFactor;
-        //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+')';
+        //a@ts-ignore
+        //this._canvasContainer.style.zoom = <any>this._zoomFactor;
+        //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+') translate(' + this._translate.x + ', '+this._translate.y+')';
         //this._canvasContainer.style.transformOrigin = '0 0';
         this._canvasContainer.style.bottom = this._outercanvas2.offsetHeight >= this._canvasContainer.offsetHeight ? '0' : '';
         this._canvasContainer.style.right = this._outercanvas2.offsetWidth >= this._canvasContainer.offsetWidth ? '0' : '';
+        this._updateTransform();
+    }
+    _updateTransform() {
+        this._scaleFactor = this._zoomFactor;
+        this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + this._canvasOffset.x + 'px, ' + this._canvasOffset.y + 'px)';
+        this._canvasContainer.style.transformOrigin = '0 0';
         this.snapLines.clearSnaplines();
     }
     setDesignItems(designItems) {
         this.instanceServiceContainer.undoService.clear();
+        this.overlayLayer.removeAllOverlays();
         DomHelper.removeAllChildnodes(this.overlayLayer);
         this.rootDesignItem.clearChildren();
         this.addDesignItems(designItems);
@@ -403,11 +427,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     _onContextMenu(event) {
         event.preventDefault();
-        const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
-        if (!this.instanceServiceContainer.selectionService.isSelected(designItem)) {
-            this.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+        if (!event.shiftKey) {
+            const designItem = DesignItem.GetOrCreateDesignItem(event.target, this.serviceContainer, this.instanceServiceContainer);
+            if (!this.instanceServiceContainer.selectionService.isSelected(designItem)) {
+                this.instanceServiceContainer.selectionService.setSelectedElements([designItem]);
+            }
+            this.showDesignItemContextMenu(designItem, event);
         }
-        this.showDesignItemContextMenu(designItem, event);
     }
     showDesignItemContextMenu(designItem, event) {
         const mnuItems = [];
@@ -494,17 +520,17 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     getNormalizedEventCoordinates(event) {
         const offsetOfOuterX = (event.clientX - this.outerRect.x) / this.zoomFactor;
-        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x / this.zoomFactor;
+        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x / this.zoomFactor * this._scaleFactor;
         const offsetOfOuterY = (event.clientY - this.outerRect.y) / this.zoomFactor;
-        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y / this.zoomFactor;
+        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y / this.zoomFactor * this._scaleFactor;
         return {
-            x: offsetOfOuterX - offsetOfCanvasX,
-            y: offsetOfOuterY - offsetOfCanvasY
+            x: offsetOfOuterX - offsetOfCanvasX + offsetOfCanvasX - offsetOfCanvasX / this.zoomFactor,
+            y: offsetOfOuterY - offsetOfCanvasY + offsetOfCanvasY - offsetOfCanvasY / this.zoomFactor
         };
     }
     getNormalizedElementCoordinates(element) {
         const targetRect = element.getBoundingClientRect();
-        return { x: targetRect.x - this.containerBoundingRect.x, y: targetRect.y - this.containerBoundingRect.y, width: targetRect.width, height: targetRect.height };
+        return { x: (targetRect.x - this.containerBoundingRect.x) / this.scaleFactor, y: (targetRect.y - this.containerBoundingRect.y) / this.scaleFactor, width: targetRect.width / this.scaleFactor, height: targetRect.height / this.scaleFactor };
     }
     getNormalizedOffsetInElement(event, element) {
         const normEvt = this.getNormalizedEventCoordinates(event);
@@ -556,16 +582,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _rect;
     _pointerEventHandler(event) {
         this._fillCalculationrects();
-        /*let clickOnScrollbar = event.clientX - this.containerBoundingRect.x > this.containerBoundingRect.width || event.clientY - this.containerBoundingRect.y > this.containerBoundingRect.height
-        if (clickOnScrollbar) https://kingsora.github.io/OverlayScrollbars/
-          return;*/
         if (this._pointerextensions) {
             for (let pe of this._pointerextensions)
                 pe.refresh(event);
         }
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
-        if (event.button == 2)
+        if (event.buttons == 2)
             return;
         let currentElement = this.serviceContainer.elementAtPointService.getElementAtPoint(this, { x: event.x, y: event.y });
         if (currentElement === this._outercanvas2 || currentElement === this.overlayLayer || !currentElement) {

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

@@ -7,16 +7,20 @@ import { DesignerCanvas } from "./designerCanvas.js";
 import { IDesignItem } from '../../item/IDesignItem.js';
 import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
 export declare class DesignerView extends BaseCustomWebComponentConstructorAppend implements IUiCommandHandler {
+    private _sVert;
+    private _sHor;
     get serviceContainer(): ServiceContainer;
     set serviceContainer(value: ServiceContainer);
     get instanceServiceContainer(): InstanceServiceContainer;
     set instanceServiceContainer(value: InstanceServiceContainer);
+    private _designerCanvas;
+    get designerCanvas(): DesignerCanvas;
     private _zoomInput;
     private _lowertoolbar;
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
-    private _designerCanvas;
     constructor();
+    private _onScrollbar;
     private _onWheel;
     get designerWidth(): string;
     set designerWidth(value: string);