refactor(examples): switch examples from cra to nextjs
This commit is contained in:
Christopher Möller
@@ -1,7 +1,22 @@
|
||||
{
|
||||
"name": "@react-flow/minimap",
|
||||
"version": "11.0.0",
|
||||
"description": "A minimap component for usage with React Flow",
|
||||
"description": "A minimap component that shows the React Flow graph.",
|
||||
"main": "dist/react-flow-minimap.cjs.js",
|
||||
"license": "MIT"
|
||||
"module": "dist/react-flow-minimap.esm.js",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"classcat": "^5.0.3",
|
||||
"d3-drag": "^3.0.0",
|
||||
"d3-selection": "^3.0.0",
|
||||
"zustand": "^4.0.0-rc.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.1.0",
|
||||
"react-flow-renderer": "^10.3.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/d3-drag": "^3.0.1",
|
||||
"@types/d3-selection": "^3.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { drag, D3DragEvent, SubjectPosition } from 'd3-drag';
|
||||
import { select } from 'd3-selection';
|
||||
import { useReactFlow } from 'react-flow-renderer';
|
||||
|
||||
function MiniMapDrag({ x = 0, y = 0, width = 0, height = 0 }) {
|
||||
const dragRef = useRef<SVGRectElement>(null);
|
||||
const { getViewport, setViewport } = useReactFlow();
|
||||
|
||||
useEffect(() => {
|
||||
if (dragRef.current) {
|
||||
const onDrag = (
|
||||
evt: D3DragEvent<SVGRectElement, null, SubjectPosition>
|
||||
) => {
|
||||
const { x, y, zoom } = getViewport();
|
||||
setViewport({ x: x - evt.dx * zoom, y: y - evt.dy * zoom, zoom });
|
||||
};
|
||||
|
||||
const selection = select(dragRef.current as Element);
|
||||
const dragBehaviour = drag().on('drag', onDrag);
|
||||
|
||||
selection.call(dragBehaviour);
|
||||
|
||||
return () => {
|
||||
selection.on('.drag', null);
|
||||
};
|
||||
}
|
||||
}, [getViewport, setViewport]);
|
||||
|
||||
return (
|
||||
<rect
|
||||
ref={dragRef}
|
||||
fill='rgba(255, 0,0,.5)'
|
||||
x={x}
|
||||
y={y}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default MiniMapDrag;
|
||||
@@ -0,0 +1,53 @@
|
||||
import React, { memo, CSSProperties } from 'react';
|
||||
import cc from 'classcat';
|
||||
|
||||
interface MiniMapNodeProps {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
borderRadius: number;
|
||||
className: string;
|
||||
color: string;
|
||||
shapeRendering: string;
|
||||
strokeColor: string;
|
||||
strokeWidth: number;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
const MiniMapNode = ({
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
style,
|
||||
color,
|
||||
strokeColor,
|
||||
strokeWidth,
|
||||
className,
|
||||
borderRadius,
|
||||
shapeRendering,
|
||||
}: MiniMapNodeProps) => {
|
||||
const { background, backgroundColor } = style || {};
|
||||
const fill = (color || background || backgroundColor) as string;
|
||||
|
||||
return (
|
||||
<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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
MiniMapNode.displayName = 'MiniMapNode';
|
||||
|
||||
export default memo(MiniMapNode);
|
||||
@@ -1 +0,0 @@
|
||||
export default 'Minimap';
|
||||
@@ -0,0 +1,151 @@
|
||||
import React, { memo } from 'react';
|
||||
import cc from 'classcat';
|
||||
import shallow from 'zustand/shallow';
|
||||
import {
|
||||
useStore,
|
||||
getRectOfNodes,
|
||||
Box,
|
||||
MiniMapProps,
|
||||
GetMiniMapNodeAttribute,
|
||||
ReactFlowState,
|
||||
Rect,
|
||||
} from 'react-flow-renderer';
|
||||
|
||||
import MiniMapNode from './MiniMapNode';
|
||||
import MiniMapDrag from './MiniMapDrag';
|
||||
|
||||
declare const window: any;
|
||||
|
||||
const defaultWidth = 200;
|
||||
const defaultHeight = 150;
|
||||
|
||||
const selector = (s: ReactFlowState) => ({
|
||||
width: s.width,
|
||||
height: s.height,
|
||||
transform: s.transform,
|
||||
nodes: Array.from(s.nodeInternals.values()),
|
||||
});
|
||||
|
||||
const getAttrFunction = (func: any): GetMiniMapNodeAttribute =>
|
||||
func instanceof Function ? func : () => func;
|
||||
|
||||
export const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
|
||||
x: Math.min(box1.x, box2.x),
|
||||
y: Math.min(box1.y, box2.y),
|
||||
x2: Math.max(box1.x2, box2.x2),
|
||||
y2: Math.max(box1.y2, box2.y2),
|
||||
});
|
||||
|
||||
export const rectToBox = ({ x, y, width, height }: Rect): Box => ({
|
||||
x,
|
||||
y,
|
||||
x2: x + width,
|
||||
y2: y + height,
|
||||
});
|
||||
|
||||
export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
|
||||
x,
|
||||
y,
|
||||
width: x2 - x,
|
||||
height: y2 - y,
|
||||
});
|
||||
|
||||
export const getBoundsofRects = (rect1: Rect, rect2: Rect): Rect =>
|
||||
boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
|
||||
|
||||
const MiniMap = ({
|
||||
style,
|
||||
className,
|
||||
nodeStrokeColor = '#555',
|
||||
nodeColor = '#fff',
|
||||
nodeClassName = '',
|
||||
nodeBorderRadius = 5,
|
||||
nodeStrokeWidth = 2,
|
||||
maskColor = 'rgb(240, 242, 243, 0.7)',
|
||||
}: MiniMapProps) => {
|
||||
const {
|
||||
width: containerWidth,
|
||||
height: containerHeight,
|
||||
transform,
|
||||
nodes,
|
||||
} = useStore(selector, shallow);
|
||||
const elementWidth = (style?.width as number) ?? defaultWidth;
|
||||
const elementHeight = (style?.height as number) ?? defaultHeight;
|
||||
const nodeColorFunc = getAttrFunction(nodeColor);
|
||||
const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);
|
||||
const nodeClassNameFunc = getAttrFunction(nodeClassName);
|
||||
const viewBB: Rect = {
|
||||
x: -transform[0] / transform[2],
|
||||
y: -transform[1] / transform[2],
|
||||
width: containerWidth / transform[2],
|
||||
height: containerHeight / transform[2],
|
||||
};
|
||||
const boundingRect =
|
||||
nodes.length > 0 ? getBoundsofRects(getRectOfNodes(nodes), viewBB) : viewBB;
|
||||
const scaledWidth = boundingRect.width / elementWidth;
|
||||
const scaledHeight = boundingRect.height / elementHeight;
|
||||
const viewScale = Math.max(scaledWidth, scaledHeight);
|
||||
const viewWidth = viewScale * elementWidth;
|
||||
const viewHeight = viewScale * elementHeight;
|
||||
const offset = 5 * viewScale;
|
||||
const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
|
||||
const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
|
||||
const width = viewWidth + offset * 2;
|
||||
const height = viewHeight + offset * 2;
|
||||
const shapeRendering =
|
||||
typeof window === 'undefined' || !!window.chrome
|
||||
? 'crispEdges'
|
||||
: 'geometricPrecision';
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={elementWidth}
|
||||
height={elementHeight}
|
||||
viewBox={`${x} ${y} ${width} ${height}`}
|
||||
style={style}
|
||||
className={cc(['react-flow__minimap', className])}
|
||||
>
|
||||
{nodes
|
||||
.filter((node) => !node.hidden && node.width && node.height)
|
||||
.map((node) => {
|
||||
return (
|
||||
<MiniMapNode
|
||||
key={node.id}
|
||||
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}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<MiniMapDrag
|
||||
x={viewBB.x}
|
||||
y={viewBB.y}
|
||||
width={viewBB.width}
|
||||
height={viewBB.height}
|
||||
/>
|
||||
<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'
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
MiniMap.displayName = 'MiniMap';
|
||||
|
||||
export default memo(MiniMap);
|
||||
Reference in New Issue
Block a user