[NU-1191][NU-1202][NU-1203] fix various issues with a diagram (#4991)

* NU-1191 fix various issues with a diagram * NU-1191 fix cursor on toolbars hover * NU-1191 rename component
TouK · Nov 13, 2023 · 4ff2c35 · 4ff2c35
1 parent bea0e9a
commit 4ff2c35
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 52 deletions.
diff --git a/designer/client/src/components/graph/CursorMask.ts b/designer/client/src/components/graph/CursorMask.ts
diff --git a/designer/client/src/components/graph/GlobalCursor.ts b/designer/client/src/components/graph/GlobalCursor.ts
@@ -0,0 +1,18 @@
+import { CSSProperties } from "react";
+
+export class GlobalCursor {
+    private cursorMask: HTMLElement;
+
+    enable(cursor: CSSProperties["cursor"] = "not-allowed"): void {
+        this.cursorMask = document.createElement("style");
+        this.cursorMask.innerHTML = `*{cursor: ${cursor}!important;}`;
+        this.cursorMask.id = "cursor-style";
+        document.head.appendChild(this.cursorMask);
+    }
+
+    disable(): void {
+        if (this.cursorMask) {
+            this.cursorMask.remove();
+        }
+    }
+}
diff --git a/designer/client/src/components/graph/PanZoomPlugin.ts b/designer/client/src/components/graph/PanZoomPlugin.ts
@@ -3,7 +3,7 @@ import { dia, g } from "jointjs";
 import { debounce, throttle } from "lodash";
 import { isTouchDevice, isTouchEvent, LONG_PRESS_TIME } from "../../helpers/detectDevice";
 import svgPanZoom from "svg-pan-zoom";
-import { CursorMask } from "./CursorMask";
+import { GlobalCursor } from "./GlobalCursor";
 import { Events } from "./types";
 import Hammer from "hammerjs";
 
@@ -15,7 +15,7 @@ const getAnimationClass = (disabled?: boolean) =>
     });
 
 export class PanZoomPlugin {
-    private cursorMask: CursorMask;
+    private globalCursor: GlobalCursor;
     private instance: SvgPanZoom.Instance;
     private pinchEventActive = false;
     private animationClassHolder: HTMLElement;
@@ -25,10 +25,10 @@ export class PanZoomPlugin {
         touched?: boolean;
     };
 
-    private disabledPan = true;
+    private panEnabled = false;
 
     constructor(private paper: dia.Paper) {
-        this.cursorMask = new CursorMask();
+        this.globalCursor = new GlobalCursor();
         this.instance = svgPanZoom(paper.svg, {
             fit: false,
             contain: false,
@@ -63,7 +63,7 @@ export class PanZoomPlugin {
     private handleBlankPointerDown = (event: dia.Event) => {
         if (isTouchEvent(event)) {
             const pressTimer = setTimeout(() => {
-                this.disabledPan = true;
+                this.panEnabled = false;
             }, LONG_PRESS_TIME);
             this.paper.once(Events.BLANK_POINTERUP, () => clearTimeout(pressTimer));
             this.paper.once(Events.BLANK_POINTERMOVE, () => clearTimeout(pressTimer));
@@ -74,7 +74,7 @@ export class PanZoomPlugin {
         const isModified = event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;
         if (!isModified) {
             if (!isTouchEvent(event)) {
-                this.cursorMask.enable("move");
+                this.globalCursor.enable("move");
             }
             this.panStart = {
                 x: event.clientX,
@@ -97,7 +97,7 @@ export class PanZoomPlugin {
 
     private cleanup() {
         this.panStart = null;
-        this.cursorMask.disable();
+        this.globalCursor.disable();
     }
 
     fitSmallAndLargeGraphs = debounce((): void => {
@@ -189,18 +189,22 @@ export class PanZoomPlugin {
 
     private initPanMove = (paper: dia.Paper) => {
         const hammer = new Hammer(paper.el);
-        hammer.get("pan").set({ threshold: 2 });
-
-        paper.on("blank:pointerdown", (e) => {
-            this.disabledPan = e.target?.parentElement?.id !== "nk-graph-main";
+        hammer.get("pan").set({
+            threshold: 2,
+            direction: Hammer.DIRECTION_ALL,
+            enable: (recognizer, input) => {
+                const isInitialPanTouch = input?.isFirst;
+
+                if (isInitialPanTouch) {
+                    const diagramBoardIds = ["nk-graph-main", "nk-graph-fragment"];
+                    this.panEnabled = diagramBoardIds.some((diagramBoardId) => diagramBoardId === input?.target.parentElement.id);
+                }
+
+                return this.panEnabled;
+            },
         });
 
         hammer.on("panstart", (event) => {
-            if (this.disabledPan) {
-                this.cleanup();
-                return;
-            }
-
             this.initMove(event.pointers[0]);
         });
 
@@ -227,7 +231,6 @@ export class PanZoomPlugin {
                 event.pointers[0].stopImmediatePropagation();
             }
             this.cleanup();
-            this.disabledPan = true;
         });
     };
 

diff --git a/designer/client/src/components/graph/RangeSelectPlugin.ts b/designer/client/src/components/graph/RangeSelectPlugin.ts
@@ -1,6 +1,6 @@
 /* eslint-disable i18next/no-literal-string */
 import { dia, g, shapes } from "jointjs";
-import { CursorMask } from "./CursorMask";
+import { GlobalCursor } from "./GlobalCursor";
 import { Events } from "./types";
 import { pressedKeys } from "./KeysObserver";
 import { isTouchEvent, LONG_PRESS_TIME } from "../../helpers/detectDevice";
@@ -16,7 +16,7 @@ export interface RangeSelectedEventData {
 }
 
 export class RangeSelectPlugin {
-    private readonly cursorMask = new CursorMask();
+    private readonly globalCursor = new GlobalCursor();
     private readonly rectangle = new shapes.standard.Rectangle();
     private readonly pressedKeys = pressedKeys.map((events) => events.map((e) => e.key));
     private keys: string[];
@@ -87,7 +87,7 @@ export class RangeSelectPlugin {
 
     private startSelection(event: dia.Event) {
         event.stopImmediatePropagation();
-        this.cursorMask.enable("crosshair");
+        this.globalCursor.enable("crosshair");
 
         this.selectStart = {
             x: event.clientX,
@@ -169,7 +169,7 @@ export class RangeSelectPlugin {
     }
 
     private cleanup(): void {
-        this.cursorMask.disable();
+        this.globalCursor.disable();
         this.rectangle.remove();
         this.selectStart = null;
     }