@reactflow/minimap - npm Package Compare versions

Comparing version 11.3.8 to 11.4.0

dist/esm/index.js

@@ -37,3 +37,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';
-function MiniMap({ style, className, nodeStrokeColor = 'transparent', nodeColor = '#e2e2e2', nodeClassName = '', nodeBorderRadius = 5, nodeStrokeWidth = 2, 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', }) {
+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', }) {
     const store = useStoreApi();
@@ -116,5 +119,5 @@ const svg = useRef(null);
         : 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: [ariaLabel && jsx("title", { id: labelledBy, children: ariaLabel }), nodes.map((node) => {
+    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(MiniMapNode$1, { 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));
+                    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
@@ -121,0 +124,0 @@ 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" })] }) }));

dist/esm/MiniMap.d.ts

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

dist/esm/MiniMapNode.d.ts

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

dist/esm/types.d.ts

@@ -1,2 +0,2 @@
-import type { HTMLAttributes, MouseEvent } from 'react';
+import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
 import type { Node, PanelPosition, XYPosition } from '@reactflow/core';
@@ -10,2 +10,3 @@ export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
     nodeStrokeWidth?: number;
+    nodeComponent?: ComponentType<MiniMapNodeProps>;
     maskColor?: string;
@@ -21,2 +22,17 @@ maskStrokeColor?: string;
 };
+export interface MiniMapNodeProps {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: number;
+    className: string;
+    color: string;
+    shapeRendering: string;
+    strokeColor: string;
+    strokeWidth: number;
+    style?: CSSProperties;
+    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, maskColor, maskStrokeColor, maskStrokeWidth, position, onClick, onNodeClick, pannable, zoomable, ariaLabel, }: MiniMapProps): JSX.Element;
+declare function MiniMap({ style, className, nodeStrokeColor, nodeColor, nodeClassName, nodeBorderRadius, nodeStrokeWidth, nodeComponent: NodeComponent, maskColor, maskStrokeColor, maskStrokeWidth, position, onClick, onNodeClick, pannable, zoomable, ariaLabel, }: MiniMapProps): JSX.Element;
 declare namespace MiniMap {
@@ -5,0 +5,0 @@ var displayName: string;

dist/umd/MiniMapNode.d.ts

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

dist/umd/types.d.ts

@@ -1,2 +0,2 @@
-import type { HTMLAttributes, MouseEvent } from 'react';
+import type { ComponentType, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
 import type { Node, PanelPosition, XYPosition } from '@reactflow/core';
@@ -10,2 +10,3 @@ export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
     nodeStrokeWidth?: number;
+    nodeComponent?: ComponentType<MiniMapNodeProps>;
     maskColor?: string;
@@ -21,2 +22,17 @@ maskStrokeColor?: string;
 };
+export interface MiniMapNodeProps {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: number;
+    className: string;
+    color: string;
+    shapeRendering: string;
+    strokeColor: string;
+    strokeWidth: number;
+    style?: CSSProperties;
+    onClick?: (event: MouseEvent, id: string) => void;
+}
 //# sourceMappingURL=types.d.ts.map

package.json

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

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

152484

increased by0.74%

Lines of code

752

increased by1.21%

Dependency changes

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

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

• Updated@reactflow/core@11.6.0