@node-projects/web-component-designer 0.0.61 → 0.0.65

package/dist/elements/controls/aa.d.ts

@@ -0,0 +1,24 @@
+/**
+   * Split View is an image comparison component
+   *
+   * <split-view>
+   *   <picture slot="top">[...]</picture>
+   *   <picture slot="bottom">[...]</picture>
+   * </split-view>
+   *
+   * Options are;
+   *
+   * start (number) The point where the comparison line should start (0 = left, 1000 = right)
+   * mode (string) A CSS mix-blend-mode to use for comparison
+   */
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+export declare class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    static properties: {
+        start: NumberConstructor;
+    };
+    constructor();
+    start: number;
+    ready(): void;
+}

package/dist/elements/controls/aa.js

@@ -0,0 +1,98 @@
+/**
+   * Split View is an image comparison component
+   *
+   * <split-view>
+   *   <picture slot="top">[...]</picture>
+   *   <picture slot="bottom">[...]</picture>
+   * </split-view>
+   *
+   * Options are;
+   *
+   * start (number) The point where the comparison line should start (0 = left, 1000 = right)
+   * mode (string) A CSS mix-blend-mode to use for comparison
+   */
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    :host {
+      display: block;
+    }
+    :host([hidden]) { display: none }
+    .split {
+      position: relative;
+      height: 100%;
+      display: grid;
+      align-items: center;
+      --split: 100;
+    }
+    .top,
+    .bottom {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    .bottom {
+      background-color: red;
+    }
+    .top {
+      z-index: 2;
+      right: calc(8px + (((100% - 16px) / 100) * (100 - var(--split))));
+      overflow: hidden;
+      border-right: 1px solid white;
+    }
+    input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      z-index: 3;
+      background-color: transparent;
+      -webkit-appearance: none;
+    }
+    input[type="range"]:focus {
+      outline: var(--outline, -webkit-focus-ring-color auto 1px);
+    }`;
+    static template = html `
+    <div class="split" id="split" role="img" aria-label="Comparison of two images">
+      <div class="bottom" id="bottom" aria-label="First image to compare">
+        <slot name="bottom"></slot>
+      </div>
+      <div class="top" id="top" aria-label="Second image to compare">
+        <slot name="top"></slot>  
+      </div>
+      <label id="label" for="slider">Slide left and right to compare images</label>
+      <input type="range" role="slider" min="0" max="100" value="50" name="slider" id="slider" aria-labelledby="label" aria-valuemin="0" aria-valuemax="100">
+    </div>`;
+    static properties = {
+        start: Number
+    };
+    constructor() {
+        super();
+    }
+    start;
+    ready() {
+        this._parseAttributesToProperties();
+        const splitter = this._getDomElement("split");
+        const slider = this._getDomElement("slider");
+        const label = this._getDomElement("label");
+        const top = this._getDomElement("top");
+        const splitViewLabelText = this.getAttribute("split-view-label") || 'Comparison of two images';
+        const sliderLabelText = this.getAttribute("slider-label") || 'Press left and right to compare images';
+        const mode = this.getAttribute("mode") || "normal";
+        slider.addEventListener("input", (event) => {
+            const split = +event.target.value;
+            splitter.style.setProperty("--split", split);
+            slider.setAttribute('aria-valuenow', split);
+        });
+        splitter.style.setProperty("--split", this.start);
+        slider.setAttribute('aria-valuenow', this.start);
+        slider.value = this.start;
+        splitter.setAttribute('aria-label', splitViewLabelText);
+        label.innerText = sliderLabelText;
+        top.style.mixBlendMode = mode;
+    }
+}
+customElements.define('node-projects-simple-split-view', SimpleSplitView);

package/dist/elements/documentContainer.d.ts

@@ -7,6 +7,7 @@ import { IDemoView } from './widgets/demoView/IDemoView';
 import { IUiCommandHandler } from "../commandHandling/IUiCommandHandler";
 import { IUiCommand } from "../commandHandling/IUiCommand";
 import { IDisposable } from "../interfaces/IDisposable";
+import { ISelectionChangedEvent } from "./services/selectionService/ISelectionChangedEvent.js";
 export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend implements IUiCommandHandler, IDisposable {
     designerView: DesignerView;
     codeView: ICodeView & HTMLElement;
@@ -20,9 +21,13 @@ export declare class DocumentContainer extends BaseCustomWebComponentLazyAppend
     private _designerDiv;
     private _codeDiv;
     private refreshInSplitViewDebounced;
+    private _disableChangeNotificationDesigner;
+    private _disableChangeNotificationEditor;
     static get style(): CSSStyleSheet;
     constructor(serviceContainer: ServiceContainer, content?: string);
-    refreshInSplitView(): void;
+    refreshInSplitView(): Promise<void>;
+    designerSelectionChanged(e: ISelectionChangedEvent): void;
+    designerContentChanged(): void;
     dispose(): void;
     executeCommand(command: IUiCommand): void;
     canExecuteCommand(command: IUiCommand): boolean;

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,25 +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._tabControl.appendChild(this._designerDiv);
         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._tabControl.appendChild(this._codeDiv);
-        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';
@@ -70,8 +76,39 @@ 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) {
+        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() {
         this.codeView.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,16 @@ 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/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/codeView/code-view-monaco.js

@@ -71,12 +71,12 @@ export class CodeViewMonaco extends BaseCustomWebComponentLazyAppend {
             });
             this._monacoEditor.layout();
             let changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
-                () => this.onTextChanged.emit(this._monacoEditor.getValue());
+                this.onTextChanged.emit(this._monacoEditor.getValue());
             });
             this._monacoEditor.onDidChangeModel(e => {
                 changeContentListener.dispose();
                 changeContentListener = this._monacoEditor.getModel().onDidChangeContent(e => {
-                    () => this.onTextChanged.emit(this._monacoEditor.getValue());
+                    this.onTextChanged.emit(this._monacoEditor.getValue());
                 });
             });
         });

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/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,12 +520,12 @@ 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) {
@@ -565,7 +591,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         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

@@ -11,11 +11,12 @@ export declare class DesignerView extends BaseCustomWebComponentConstructorAppen
     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 _onWheel;
     get designerWidth(): string;