@node-projects/web-component-designer 0.0.87 → 0.0.90

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

@@ -39,12 +39,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     _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 };
+    _currentContextMenu;
+    _lastPointerDownHandler;
     get zoomFactor() {
         return this._zoomFactor;
     }
     set zoomFactor(value) {
         this._zoomFactor = value;
-        this.zoomFactorChanged();
+        this._zoomFactorChanged();
     }
     get scaleFactor() {
         return this._scaleFactor;
@@ -54,15 +56,21 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     }
     set canvasOffset(value) {
         this._canvasOffset = value;
-        this.zoomFactorChanged();
+        this._zoomFactorChanged();
+    }
+    get canvasOffsetUnzoomed() {
+        return { x: this._canvasOffset.x * this.zoomFactor, y: this._canvasOffset.y * this.zoomFactor };
+    }
+    set canvasOffsetUnzoomed(value) {
+        this.canvasOffset = { x: value.x / this.zoomFactor, y: value.y / this.zoomFactor };
     }
     onContentChanged = new TypedEvent();
+    onZoomFactorChanged = new TypedEvent();
     // Private Variables
     _canvas;
     _canvasContainer;
     _outercanvas2;
     _lastHoverDesignItem;
-    _onContextMenuBound;
     _pointerEventHandlerBound;
     _firstConnect;
     _onKeyDownBound;
@@ -135,10 +143,9 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     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;">
+        <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;left: 0;user-select: none;">
+            style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;user-select: none;">
             <div id="node-projects-designer-canvas-canvas" part="canvas"></div>
           </div>
         </div>
@@ -159,23 +166,31 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._onKeyDownBound = this.onKeyDown.bind(this);
         this._onKeyUpBound = this.onKeyUp.bind(this);
         this._onDblClickBound = this._onDblClick.bind(this);
-        this._onContextMenuBound = this._onContextMenu.bind(this);
         this._pointerEventHandlerBound = this._pointerEventHandler.bind(this);
-        this.clickOverlay.oncontextmenu = this._onContextMenuBound;
+        this.clickOverlay.oncontextmenu = (e) => e.preventDefault();
     }
     get designerWidth() {
         return this._canvasContainer.style.width;
     }
     set designerWidth(value) {
         this._canvasContainer.style.width = value;
-        this.zoomFactorChanged();
+        this._zoomFactorChanged();
     }
     get designerHeight() {
         return this._canvasContainer.style.height;
     }
     set designerHeight(value) {
         this._canvasContainer.style.height = value;
-        this.zoomFactorChanged();
+        this._zoomFactorChanged();
+    }
+    getDesignSurfaceDimensions() {
+        let ret = { width: null, height: null };
+        const cs = getComputedStyle(this._canvasContainer);
+        if (this._canvasContainer.style.width)
+            ret.width = parseFloat(cs.width);
+        if (this._canvasContainer.style.height)
+            ret.height = parseFloat(cs.height);
+        return ret;
     }
     get designerOffsetWidth() {
         return this._canvasContainer.offsetWidth;
@@ -371,7 +386,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClickBound, true);
         }
     }
-    zoomFactorChanged() {
+    _zoomFactorChanged() {
         //a@ts-ignore
         //this._canvasContainer.style.zoom = <any>this._zoomFactor;
         //this._canvasContainer.style.transform = 'scale(' + this._zoomFactor+') translate(' + this._translate.x + ', '+this._translate.y+')';
@@ -379,10 +394,11 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer.style.bottom = this._outercanvas2.offsetHeight >= this._canvasContainer.offsetHeight ? '0' : '';
         this._canvasContainer.style.right = this._outercanvas2.offsetWidth >= this._canvasContainer.offsetWidth ? '0' : '';
         this._updateTransform();
+        this.onZoomFactorChanged.emit(this._zoomFactor);
     }
     _updateTransform() {
         this._scaleFactor = this._zoomFactor;
-        this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + this._canvasOffset.x + 'px, ' + this._canvasOffset.y + 'px)';
+        this._canvasContainer.style.transform = 'scale(' + this._zoomFactor + ') translate(' + (isNaN(this._canvasOffset.x) ? '0' : this._canvasOffset.x) + 'px, ' + (isNaN(this._canvasOffset.y) ? '0' : this._canvasOffset.y) + 'px)';
         this._canvasContainer.style.transformOrigin = '0 0';
         this.snapLines.clearSnaplines();
     }
@@ -497,30 +513,16 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             }
         }
     }
-    _onContextMenu(event) {
-        event.preventDefault();
-        if (!event.shiftKey) {
-            let items = this.getItemsBelowMouse(event);
-            if (items.indexOf(this.instanceServiceContainer.selectionService.primarySelection.element) >= 0)
-                this.showDesignItemContextMenu(this.instanceServiceContainer.selectionService.primarySelection, event);
-            else {
-                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);
-            }
-        }
-    }
     showDesignItemContextMenu(designItem, event) {
+        this._currentContextMenu?.close();
         const mnuItems = [];
         for (let cme of this.serviceContainer.designerContextMenuExtensions) {
             if (cme.shouldProvideContextmenu(event, this, designItem, 'designer')) {
                 mnuItems.push(...cme.provideContextMenuItems(event, this, designItem));
             }
         }
-        let ctxMnu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
-        return ctxMnu;
+        this._currentContextMenu = ContextMenuHelper.showContextMenu(null, event, null, mnuItems);
+        return this._currentContextMenu;
     }
     _onDblClick(event) {
         event.preventDefault();
@@ -591,12 +593,26 @@ 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 * this._scaleFactor;
+        const offsetOfCanvasX = this.containerBoundingRect.x - this.outerRect.x;
         const offsetOfOuterY = (event.clientY - this.outerRect.y) / this.zoomFactor;
-        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y / this.zoomFactor * this._scaleFactor;
+        const offsetOfCanvasY = this.containerBoundingRect.y - this.outerRect.y;
+        return {
+            x: offsetOfOuterX - offsetOfCanvasX / this.zoomFactor,
+            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
+        };
+    }
+    getViewportCoordinates(event) {
         return {
-            x: offsetOfOuterX - offsetOfCanvasX + offsetOfCanvasX - offsetOfCanvasX / this.zoomFactor,
-            y: offsetOfOuterY - offsetOfCanvasY + offsetOfCanvasY - offsetOfCanvasY / this.zoomFactor
+            x: (event.clientX - this.outerRect.x),
+            y: (event.clientY - this.outerRect.y)
         };
     }
     getNormalizedElementCoordinates(element) {
@@ -661,8 +677,6 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         if (event.composedPath().indexOf(this.eatEvents) >= 0)
             return;
-        if (event.buttons == 2)
-            return;
         let currentElement;
         if (forceElement)
             currentElement = forceElement;
@@ -675,9 +689,20 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
           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;
-            //@ts-ignore
+            if (event.type == EventNames.PointerDown) {
+                this._lastPointerDownHandler = (evt) => currentElement.dispatchEvent(new evt.constructor(evt.type, evt));
+            }
             currentElement.dispatchEvent(new event.constructor(event.type, event));
             return;
         }
@@ -700,8 +725,14 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         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;
+    }
     _fillCalculationrects() {
         this.containerBoundingRect = this._canvasContainer.getBoundingClientRect();
         this.outerRect = this._outercanvas2.getBoundingClientRect();
@@ -746,5 +777,31 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         }
         return lstEl;
     }
+    zoomOntoRectangle(startPoint, endPoint) {
+        let rect = {
+            x: startPoint.x < endPoint.x ? startPoint.x : endPoint.x,
+            y: startPoint.y < endPoint.y ? startPoint.y : endPoint.y,
+            width: Math.abs(startPoint.x - endPoint.x),
+            height: Math.abs(startPoint.y - endPoint.y),
+        };
+        let zFactorWidth = this.outerRect.width / rect.width;
+        let zFactorHeight = this.outerRect.height / rect.height;
+        let zoomFactor = zFactorWidth >= zFactorHeight ? zFactorHeight : zFactorWidth;
+        let rectCenter = {
+            x: (rect.width / 2) + rect.x,
+            y: (rect.height / 2) + rect.y
+        };
+        this.zoomTowardsPoint(rectCenter, zoomFactor);
+    }
+    zoomTowardsPoint(canvasPoint, newZoom) {
+        const scaleChange = newZoom / this.zoomFactor;
+        const point = this.convertEventToViewPortCoordinates(canvasPoint);
+        const newCanvasOffset = {
+            x: -(point.x * (scaleChange - 1) + scaleChange * -this.canvasOffsetUnzoomed.x),
+            y: -(point.y * (scaleChange - 1) + scaleChange * -this.canvasOffsetUnzoomed.y)
+        };
+        this.zoomFactor = newZoom;
+        this.canvasOffsetUnzoomed = newCanvasOffset;
+    }
 }
 customElements.define('node-projects-designer-canvas', DesignerCanvas);

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

@@ -0,0 +1,92 @@
+import { ServiceContainer } from '../../services/ServiceContainer';
+import { InstanceServiceContainer } from '../../services/InstanceServiceContainer';
+import { IDesignItem } from '../../item/IDesignItem';
+import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { IDesignerCanvas } from './IDesignerCanvas';
+import { Snaplines } from './Snaplines';
+import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
+import { IPlacementView } from './IPlacementView';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler';
+import { IUiCommand } from '../../../commandHandling/IUiCommand';
+import { IExtensionManager } from "./extensions/IExtensionManger";
+import { IPoint } from "../../../interfaces/IPoint";
+import { OverlayLayer } from "./extensions/OverlayLayer";
+import { OverlayLayerView } from './overlayLayerView';
+import { IRect } from "../../../interfaces/IRect.js";
+export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend implements IDesignerCanvas, IPlacementView, IUiCommandHandler {
+    serviceContainer: ServiceContainer;
+    instanceServiceContainer: InstanceServiceContainer;
+    containerBoundingRect: DOMRect;
+    outerRect: DOMRect;
+    gridSize: number;
+    alignOnGrid: boolean;
+    alignOnSnap: boolean;
+    snapLines: Snaplines;
+    overlayLayer: OverlayLayerView;
+    rootDesignItem: IDesignItem;
+    eatEvents: Element;
+    transformHelperElement: HTMLDivElement;
+    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;
+    private _lastHoverDesignItem;
+    private _onContextMenuBound;
+    private _pointerEventHandlerBound;
+    private _firstConnect;
+    private _onKeyDownBound;
+    private _onKeyUpBound;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    extensionManager: IExtensionManager;
+    private _pointerextensions;
+    private _onDblClickBound;
+    constructor();
+    get designerWidth(): string;
+    set designerWidth(value: string);
+    get designerHeight(): string;
+    set designerHeight(value: string);
+    get designerOffsetWidth(): number;
+    get designerOffsetHeight(): number;
+    set additionalStyle(value: CSSStyleSheet);
+    executeCommand(command: IUiCommand): Promise<void>;
+    canExecuteCommand(command: IUiCommand): boolean;
+    handleSelectAll(): void;
+    handleCopyCommand(): Promise<void>;
+    handlePasteCommand(): Promise<void>;
+    handleDeleteCommand(): void;
+    initialize(serviceContainer: ServiceContainer): void;
+    elementFromPoint(x: number, y: number): Element;
+    connectedCallback(): void;
+    zoomFactorChanged(): void;
+    _updateTransform(): void;
+    setDesignItems(designItems: IDesignItem[]): void;
+    addDesignItems(designItems: IDesignItem[]): void;
+    private _onDragEnter;
+    private _onDragLeave;
+    private _onDragOver;
+    private _onDrop;
+    private _onContextMenu;
+    showDesignItemContextMenu(designItem: IDesignItem, event: MouseEvent): ContextMenuHelper;
+    private _onDblClick;
+    private onKeyUp;
+    private onKeyDown;
+    getNormalizedEventCoordinates(event: MouseEvent): IPoint;
+    getNormalizedElementCoordinates(element: Element): IRect;
+    getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
+    getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
+    _rect: SVGRectElement;
+    private _pointerEventHandler;
+    private _fillCalculationrects;
+    addOverlay(element: SVGGraphicsElement, overlayLayer?: OverlayLayer): void;
+    removeOverlay(element: SVGGraphicsElement): void;
+    getItemsBelowMouse(event: MouseEvent): Element[];
+}