fix(Topology): 🐞 Canvas zoom is triggered during a combo drag

skupperproject · Jan 11, 2025 · 1d646a9 · 1d646a9
1 parent c779bf4
commit 1d646a9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -46,7 +46,8 @@
     "check-cycles": "madge --circular --extensions ts,tsx src",
     "find-unused-modules": "ts-prune",
     "prepare": "husky",
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "tsc:watch": "tsc --noEmit --watch"
   },
   "dependencies": {
     "@antv/g6": "5.0.42",

diff --git a/src/core/components/SkGraph/behaviours.ts b/src/core/components/SkGraph/behaviours.ts
@@ -43,7 +43,7 @@ const HOVER_ACTIVATE_BEHAVIOR = {
 };
 
 export const behaviors: CustomBehaviorOption[] = [
-  { key: 'drag-canvas', type: 'drag-canvas' },
+  { key: 'drag-canvas', type: 'drag-canvas', enable: false },
   { key: 'zoom-canvas', type: 'zoom-canvas' },
   { key: 'drag-element', type: 'drag-element' },
   CLICK_SELECT_BEHAVIOR,

diff --git a/src/core/components/SkGraph/index.tsx b/src/core/components/SkGraph/index.tsx
@@ -1,6 +1,6 @@
 import { FC, memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
-import { Edge, EdgeEvent, Graph, GraphOptions, IPointerEvent, Node, NodeEvent } from '@antv/g6';
+import { Combo, ComboEvent, Edge, EdgeEvent, Graph, GraphOptions, IPointerEvent, Node, NodeEvent } from '@antv/g6';
 import { debounce } from '@patternfly/react-core';
 
 import { GraphCombo, GraphEdge, GraphNode, SkGraphProps, LocalStorageData } from 'types/Graph.interfaces';
@@ -55,6 +55,8 @@ const SkGraph: FC<SkGraphProps> = memo(
     const toggleHover = useCallback((enable: boolean = false) => {
       const graphInstance = topologyGraphRef.current as Graph;
 
+      graphInstance.updateBehavior({ key: 'zoom-canvas', enable });
+
       graphInstance.updateBehavior({
         key: 'hover-activate',
         enable: ({ targetType }: IPointerEvent) => (enable ? targetType === 'node' : false)
@@ -101,6 +103,8 @@ const SkGraph: FC<SkGraphProps> = memo(
         // Enable the graphic behavior ActivateNodeRelation for the drag and drop event
         graph.on<IPointerEvent<Node>>(NodeEvent.POINTER_DOWN, () => toggleHover(false));
         graph.on<IPointerEvent<Node>>(NodeEvent.POINTER_UP, () => toggleHover(true));
+        graph.on<IPointerEvent<Combo>>(ComboEvent.DRAG_START, () => toggleHover(false));
+        graph.on<IPointerEvent<Combo>>(ComboEvent.DRAG_END, () => toggleHover(true));
 
         graph.on<IPointerEvent<Node>>(NodeEvent.CLICK, ({ target }) => {
           // if the node is already selected , set id = undefined to deleselect it