@reactflow/minimap - npm Package Compare versions

Comparing version 11.0.3 to 11.1.0

dist/esm/index.js

 import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo } from 'react';
+import { memo, useRef, useEffect } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
-import { useStore, Panel, getBoundsOfRects, getRectOfNodes } from '@reactflow/core';
+import { zoom, zoomIdentity } from 'd3-zoom';
+import { select, pointer } from 'd3-selection';
+import { useStoreApi, useStore, Panel, getBoundsOfRects, getRectOfNodes } from '@reactflow/core';
 
-const MiniMapNode = ({ x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, }) => {
+const MiniMapNode = ({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, onClick, }) => {
     const { background, backgroundColor } = style || {};
     const fill = (color || background || backgroundColor);
-    return (jsx("rect", { className: cc(['react-flow__minimap-node', className]), x: x, y: y, rx: borderRadius, ry: borderRadius, width: width, height: height, fill: fill, stroke: strokeColor, strokeWidth: strokeWidth, shapeRendering: shapeRendering }));
+    return (jsx("rect", { className: cc(['react-flow__minimap-node', className]), x: x, y: y, rx: borderRadius, ry: borderRadius, width: width, height: height, fill: fill, stroke: strokeColor, strokeWidth: strokeWidth, shapeRendering: shapeRendering, onClick: onClick ? (event) => onClick(event, id) : undefined }));
 };
@@ -34,3 +36,5 @@ MiniMapNode.displayName = 'MiniMapNode';
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
-function MiniMap({ style, className, nodeStrokeColor = '#555', nodeColor = '#fff', nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, maskColor = 'rgb(240, 242, 243, 0.7)', position = 'bottom-right', }) {
+function MiniMap({ style, className, nodeStrokeColor = 'transparent', nodeColor = '#e2e2e2', nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, maskColor = 'rgb(240, 240, 240, 0.6)', position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, }) {
+    const store = useStoreApi();
+    const svg = useRef(null);
     const { boundingRect, viewBB, nodes, rfId } = useStore(selector, shallow);
@@ -54,4 +58,56 @@ const elementWidth = style?.width ?? defaultWidth;
     const labelledBy = `${ARIA_LABEL_KEY}-${rfId}`;
-    return (jsx(Panel, { position: position, style: style, className: cc(['react-flow__minimap', className]), children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, role: "img", "aria-labelledby": labelledBy, children: [jsx("title", { id: labelledBy, children: "React Flow mini map" }), nodes.map((node) => {
-                    return (jsx(MiniMapNode$1, { x: node.positionAbsolute?.x ?? 0, y: node.positionAbsolute?.y ?? 0, width: node.width, height: node.height, style: node.style, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering: shapeRendering }, node.id));
+    const viewScaleRef = useRef(0);
+    viewScaleRef.current = viewScale;
+    useEffect(() => {
+        if (svg.current) {
+            const selection = select(svg.current);
+            const zoomHandler = (event) => {
+                const { transform, d3Selection, d3Zoom } = store.getState();
+                if (event.sourceEvent.type !== 'wheel' || !d3Selection || !d3Zoom) {
+                    return;
+                }
+                const pinchDelta = -event.sourceEvent.deltaY *
+                    (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
+                    10;
+                const zoom = transform[2] * Math.pow(2, pinchDelta);
+                d3Zoom.scaleTo(d3Selection, zoom);
+            };
+            const panHandler = (event) => {
+                const { transform, d3Selection, d3Zoom } = store.getState();
+                if (event.sourceEvent.type !== 'mousemove' || !d3Selection || !d3Zoom) {
+                    return;
+                }
+                // @TODO: how to calculate the correct next position? Math.max(1, transform[2]) is a workaround.
+                const position = {
+                    x: transform[0] - event.sourceEvent.movementX * viewScaleRef.current * Math.max(1, transform[2]),
+                    y: transform[1] - event.sourceEvent.movementY * viewScaleRef.current * Math.max(1, transform[2]),
+                };
+                const nextTransform = zoomIdentity.translate(position.x, position.y).scale(transform[2]);
+                d3Zoom.transform(d3Selection, nextTransform);
+            };
+            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);
+            };
+        }
+    }, [pannable, zoomable]);
+    const onSvgClick = onClick
+        ? (event) => {
+            const rfCoord = pointer(event);
+            onClick(event, { x: rfCoord[0], y: rfCoord[1] });
+        }
+        : undefined;
+    const onSvgNodeClick = onNodeClick
+        ? (event, nodeId) => {
+            const node = store.getState().nodeInternals.get(nodeId);
+            onNodeClick(event, node);
+        }
+        : undefined;
+    return (jsx(Panel, { position: position, style: style, className: cc(['react-flow__minimap', className]), children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [jsx("title", { id: labelledBy, children: "React Flow mini map" }), nodes.map((node) => {
+                    return (jsx(MiniMapNode$1, { x: node.positionAbsolute?.x ?? 0, y: node.positionAbsolute?.y ?? 0, width: node.width, height: node.height, style: node.style, className: nodeClassNameFunc(node), color: nodeColorFunc(node), borderRadius: nodeBorderRadius, strokeColor: nodeStrokeColorFunc(node), strokeWidth: nodeStrokeWidth, shapeRendering: shapeRendering, onClick: onSvgNodeClick, id: node.id }, node.id));
                 }), jsx("path", { className: "react-flow__minimap-mask", d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
@@ -58,0 +114,0 @@ M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fill: maskColor, fillRule: "evenodd" })] }) }));

dist/esm/MiniMap.d.ts

 /// <reference types="react" />
 import type { MiniMapProps } from './types';
-declare function MiniMap({ style, className, nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, maskColor, position, }: MiniMapProps): JSX.Element;
+declare function MiniMap({ style, className, nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, maskColor, position, onClick, onNodeClick, pannable, zoomable, }: MiniMapProps): JSX.Element;
 declare namespace MiniMap {
@@ -5,0 +5,0 @@ var displayName: string;

dist/esm/MiniMapNode.d.ts

@@ -1,3 +0,4 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
 interface MiniMapNodeProps {
+    id: string;
     x: number;
@@ -14,5 +15,6 @@ y: number;
     style?: CSSProperties;
+    onClick?: (event: MouseEvent, id: string) => void;
 }
 declare const _default: import("react").MemoExoticComponent<{
-    ({ x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, }: MiniMapNodeProps): JSX.Element;
+    ({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, onClick, }: MiniMapNodeProps): JSX.Element;
     displayName: string;
@@ -19,0 +21,0 @@ }>;

dist/esm/types.d.ts

@@ -1,5 +0,5 @@
-import type { HTMLAttributes } from 'react';
-import type { Node, PanelPosition } from '@reactflow/core';
+import type { HTMLAttributes, MouseEvent } from 'react';
+import type { Node, PanelPosition, XYPosition } from '@reactflow/core';
 export declare type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
-export declare type MiniMapProps<NodeData = any> = HTMLAttributes<SVGSVGElement> & {
+export declare type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
     nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
@@ -12,3 +12,7 @@ nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
     position?: PanelPosition;
+    onClick?: (event: MouseEvent, position: XYPosition) => void;
+    onNodeClick?: (event: MouseEvent, node: Node<NodeData>) => void;
+    pannable?: boolean;
+    zoomable?: boolean;
 };
 //# sourceMappingURL=types.d.ts.map

dist/umd/MiniMap.d.ts

 /// <reference types="react" />
 import type { MiniMapProps } from './types';
-declare function MiniMap({ style, className, nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, maskColor, position, }: MiniMapProps): JSX.Element;
+declare function MiniMap({ style, className, nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, maskColor, position, onClick, onNodeClick, pannable, zoomable, }: MiniMapProps): JSX.Element;
 declare namespace MiniMap {
@@ -5,0 +5,0 @@ var displayName: string;

dist/umd/MiniMapNode.d.ts

@@ -1,3 +0,4 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
 interface MiniMapNodeProps {
+    id: string;
     x: number;
@@ -14,5 +15,6 @@ y: number;
     style?: CSSProperties;
+    onClick?: (event: MouseEvent, id: string) => void;
 }
 declare const _default: import("react").MemoExoticComponent<{
-    ({ x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, }: MiniMapNodeProps): JSX.Element;
+    ({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, onClick, }: MiniMapNodeProps): JSX.Element;
     displayName: string;
@@ -19,0 +21,0 @@ }>;

dist/umd/types.d.ts

@@ -1,5 +0,5 @@
-import type { HTMLAttributes } from 'react';
-import type { Node, PanelPosition } from '@reactflow/core';
+import type { HTMLAttributes, MouseEvent } from 'react';
+import type { Node, PanelPosition, XYPosition } from '@reactflow/core';
 export declare type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
-export declare type MiniMapProps<NodeData = any> = HTMLAttributes<SVGSVGElement> & {
+export declare type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, 'onClick'> & {
     nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
@@ -12,3 +12,7 @@ nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
     position?: PanelPosition;
+    onClick?: (event: MouseEvent, position: XYPosition) => void;
+    onNodeClick?: (event: MouseEvent, node: Node<NodeData>) => void;
+    pannable?: boolean;
+    zoomable?: boolean;
 };
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@reactflow/minimap",
-  "version": "11.0.3",
+  "version": "11.1.0",
   "description": "Minimap component for React Flow.",
@@ -34,4 +34,8 @@ "keywords": [
     "@babel/runtime": "^7.18.9",
-    "@reactflow/core": "11.1.2",
+    "@reactflow/core": "11.2.0",
+    "@types/d3-selection": "^3.0.3",
+    "@types/d3-zoom": "^3.0.1",
     "classcat": "^5.0.3",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
     "zustand": "^4.1.1"
@@ -38,0 +42,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

148529

increased by4.81%

Lines of code

722

increased by12.11%

Worsened metrics

Dependency count

10

increased by66.67%

Dependency changes

• + Added@types/d3-selection@^3.0.3

• + Added@types/d3-zoom@^3.0.1

• + Addedd3-selection@^3.0.0

• + Addedd3-zoom@^3.0.0

• + Added@reactflow/core@11.2.0(transitive)

• - Removed@reactflow/core@11.1.2(transitive)

• Updated@reactflow/core@11.2.0