refactor(minimap): cleanup events when not pannable or zoomable

packages/minimap/src/MiniMap.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { memo, useEffect, useRef } from 'react';
 import type { MouseEvent } from 'react';
@@ -41,12 +42,12 @@ const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 function MiniMap({
   style,
   className,
-  nodeStrokeColor = '#555',
+  nodeStrokeColor = 'transparent',
-  nodeColor = '#fff',
+  nodeColor = '#e2e2e2',
   nodeClassName = '',
   nodeBorderRadius = 5,
   nodeStrokeWidth = 2,
-  maskColor = 'rgb(240, 242, 243, 0.7)',
+  maskColor = 'rgb(240, 240, 240, 0.6)',
   position = 'bottom-right',
   onClick,
   onNodeClick,
@@ -81,11 +82,10 @@ function MiniMap({
     if (svg.current) {
       const selection = select(svg.current as Element);
 
-      const zoomHandler = zoom()
+      const zoomHandler = (event: D3ZoomEvent<SVGSVGElement, any>) => {
-        .on('zoom.wheel', (event: D3ZoomEvent<HTMLDivElement, any>) => {
         const { transform, d3Selection, d3Zoom } = store.getState();
 
-          if (event.sourceEvent.type !== 'wheel' || !zoomable || !d3Selection || !d3Zoom) {
+        if (event.sourceEvent.type !== 'wheel' || !d3Selection || !d3Zoom) {
           return;
         }
 
@@ -96,11 +96,12 @@ function MiniMap({
         const zoom = transform[2] * Math.pow(2, pinchDelta);
 
         d3Zoom.scaleTo(d3Selection, zoom);
-        })
+      };
-        .on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
+
+      const panHandler = (event: D3ZoomEvent<HTMLDivElement, any>) => {
         const { transform, d3Selection, d3Zoom } = store.getState();
 
-          if (event.sourceEvent.type !== 'mousemove' || !pannable || !d3Selection || !d3Zoom) {
+        if (event.sourceEvent.type !== 'mousemove' || !d3Selection || !d3Zoom) {
           return;
         }
 
@@ -113,11 +114,18 @@ function MiniMap({
         const nextTransform = zoomIdentity.translate(position.x, position.y).scale(transform[2]);
 
         d3Zoom.transform(d3Selection, nextTransform);
-        });
+      };
-      selection.call(zoomHandler);
+
+      const zoomAndPanHandler = zoom()
+        // @ts-ignore
+        .on('zoom', pannable ? panHandler : null)
+        // @ts-ignore
+        .on('zoom.wheel', zoomable ? zoomHandler : null);
+
+      selection.call(zoomAndPanHandler);
 
       return () => {
-        selection.on('.zoom', null);
+        selection.on('zoom', null);
       };
     }
   }, [pannable, zoomable]);