@reactflow/minimap - npm Package Compare versions

Comparing version 11.5.2 to 11.5.3

dist/esm/index.js

@@ -1,2 +0,2 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { memo, useRef, useEffect } from 'react';
@@ -7,3 +7,3 @@ import cc from 'classcat';
 import { select, pointer } from 'd3-selection';
-import { useStoreApi, useStore, Panel, getNodePositionWithOrigin, getBoundsOfRects, getRectOfNodes } from '@reactflow/core';
+import { useStore, getNodePositionWithOrigin, useStoreApi, Panel, getBoundsOfRects, getRectOfNodes } from '@reactflow/core';
 
@@ -18,2 +18,22 @@ const MiniMapNode = ({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, onClick, }) => {
 
+const selector$1 = (s) => s.nodeOrigin;
+const selectorNodes = (s) => s.getNodes().filter((node) => !node.hidden && node.width && node.height);
+const getAttrFunction = (func) => (func instanceof Function ? func : () => func);
+function MiniMapNodes({ nodeStrokeColor = 'transparent', nodeColor = '#e2e2e2', nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, 
+// We need to rename the prop to be `CapitalCase` so that JSX will render it as
+// a component properly.
+nodeComponent: NodeComponent = MiniMapNode$1, onClick, }) {
+    const nodes = useStore(selectorNodes, shallow);
+    const nodeOrigin = useStore(selector$1);
+    const nodeColorFunc = getAttrFunction(nodeColor);
+    const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
+    const nodeClassNameFunc = getAttrFunction(nodeClassName);
+    const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
+    return (jsx(Fragment, { children: nodes.map((node) => {
+            const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+            return (jsx(NodeComponent, { x: x, y: y, 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: onClick, id: node.id }, node.id));
+        }) }));
+}
+var MiniMapNodes$1 = memo(MiniMapNodes);
+
 const defaultWidth = 200;
@@ -30,23 +50,17 @@ const defaultHeight = 150;
     return {
-        nodes: nodes.filter((node) => !node.hidden && node.width && node.height),
         viewBB,
         boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes, s.nodeOrigin), viewBB) : viewBB,
         rfId: s.rfId,
-        nodeOrigin: s.nodeOrigin,
     };
 };
-const getAttrFunction = (func) => (func instanceof Function ? func : () => func);
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
 function MiniMap({ style, className, nodeStrokeColor = 'transparent', nodeColor = '#e2e2e2', nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, 
 // We need to rename the prop to be `CapitalCase` so that JSX will render it as
-// a component properly. 
-nodeComponent: NodeComponent = MiniMapNode$1, maskColor = 'rgb(240, 240, 240, 0.6)', maskStrokeColor = 'none', maskStrokeWidth = 1, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', inversePan = false, zoomStep = 10 }) {
+// a component properly.
+nodeComponent, maskColor = 'rgb(240, 240, 240, 0.6)', maskStrokeColor = 'none', maskStrokeWidth = 1, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel = 'React Flow mini map', inversePan = false, zoomStep = 10, }) {
     const store = useStoreApi();
     const svg = useRef(null);
-    const { boundingRect, viewBB, nodes, rfId, nodeOrigin } = useStore(selector, shallow);
+    const { boundingRect, viewBB, rfId } = useStore(selector, shallow);
     const elementWidth = style?.width ?? defaultWidth;
     const elementHeight = style?.height ?? defaultHeight;
-    const nodeColorFunc = getAttrFunction(nodeColor);
-    const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
-    const nodeClassNameFunc = getAttrFunction(nodeClassName);
     const scaledWidth = boundingRect.width / elementWidth;
@@ -62,3 +76,2 @@ const scaledHeight = boundingRect.height / elementHeight;
     const height = viewHeight + offset * 2;
-    const shapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
     const labelledBy = `${ARIA_LABEL_KEY}-${rfId}`;
@@ -123,6 +136,3 @@ const viewScaleRef = useRef(0);
         : undefined;
-    return (jsx(Panel, { position: position, style: style, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), nodes.map((node) => {
-                    const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
-                    return (jsx(NodeComponent, { x: x, y: y, 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
+    return (jsx(Panel, { position: position, style: style, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap", children: jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor, nodeBorderRadius: nodeBorderRadius, nodeClassName: nodeClassName, nodeStrokeWidth: nodeStrokeWidth, nodeComponent: nodeComponent }), 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
         M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fill: maskColor, fillRule: "evenodd", stroke: maskStrokeColor, strokeWidth: maskStrokeWidth, pointerEvents: "none" })] }) }));
@@ -129,0 +139,0 @@ }

dist/esm/MiniMap.d.ts

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

dist/esm/types.d.ts

@@ -23,3 +23,6 @@ import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
 };
-export interface MiniMapNodeProps {
+export type MiniMapNodes = Pick<MiniMapProps, 'nodeColor' | 'nodeStrokeColor' | 'nodeClassName' | 'nodeBorderRadius' | 'nodeStrokeWidth' | 'nodeComponent'> & {
+    onClick?: (event: MouseEvent, nodeId: string) => void;
+};
+export type MiniMapNodeProps = {
     id: string;
@@ -38,3 +41,3 @@ x: number;
     onClick?: (event: MouseEvent, id: string) => void;
-}
+};
 //# 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, nodeComponent: NodeComponent, maskColor, maskStrokeColor, maskStrokeWidth, position, onClick, onNodeClick, pannable, zoomable, ariaLabel, inversePan, zoomStep }: MiniMapProps): JSX.Element;
+declare function MiniMap({ style, className, nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, nodeComponent, maskColor, maskStrokeColor, maskStrokeWidth, position, onClick, onNodeClick, pannable, zoomable, ariaLabel, inversePan, zoomStep, }: MiniMapProps): JSX.Element;
 declare namespace MiniMap {
@@ -5,0 +5,0 @@ var displayName: string;

dist/umd/types.d.ts

@@ -23,3 +23,6 @@ import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
 };
-export interface MiniMapNodeProps {
+export type MiniMapNodes = Pick<MiniMapProps, 'nodeColor' | 'nodeStrokeColor' | 'nodeClassName' | 'nodeBorderRadius' | 'nodeStrokeWidth' | 'nodeComponent'> & {
+    onClick?: (event: MouseEvent, nodeId: string) => void;
+};
+export type MiniMapNodeProps = {
     id: string;
@@ -38,3 +41,3 @@ x: number;
     onClick?: (event: MouseEvent, id: string) => void;
-}
+};
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@reactflow/minimap",
-  "version": "11.5.2",
+  "version": "11.5.3",
   "description": "Minimap component for React Flow.",
@@ -33,3 +33,3 @@ "keywords": [
   "dependencies": {
-    "@reactflow/core": "11.7.2",
+    "@reactflow/core": "11.7.3",
     "@types/d3-selection": "^3.0.3",
@@ -36,0 +36,0 @@ "@types/d3-zoom": "^3.0.1",

No alert changes

Improved metrics

Total package byte prevSize

157862

increased by2.43%

Number of package files

26

increased by18.18%

Lines of code

791

increased by3.81%

Dependency changes

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

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

• Updated@reactflow/core@11.7.3