alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(minimap): add offsetScale and selected class name

Browse Source
This commit is contained in:
moklick
2023-08-14 16:22:36 +02:00
parent 182c53113c
commit f150c87997
4 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/additional-components/MiniMap/MiniMap.tsx
+3 -2
View File
@@ -58,7 +58,8 @@ function MiniMap({
zoomable = false, zoomable = false,
ariaLabel = 'React Flow mini map', ariaLabel = 'React Flow mini map',
inversePan, inversePan,
zoomStep, zoomStep = 10,
offsetScale = 5,
}: MiniMapProps) { }: MiniMapProps) {
const store = useStoreApi(); const store = useStoreApi();
const svg = useRef<SVGSVGElement>(null); const svg = useRef<SVGSVGElement>(null);
@@ -70,7 +71,7 @@ function MiniMap({
const viewScale = Math.max(scaledWidth, scaledHeight); const viewScale = Math.max(scaledWidth, scaledHeight);
const viewWidth = viewScale * elementWidth; const viewWidth = viewScale * elementWidth;
const viewHeight = viewScale * elementHeight; const viewHeight = viewScale * elementHeight;
const offset = 5 * viewScale; const offset = offsetScale * viewScale;
const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset; const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset; const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
const width = viewWidth + offset * 2; const width = viewWidth + offset * 2;
packages/react/src/additional-components/MiniMap/MiniMapNode.tsx
+2 -1
View File
@@ -16,6 +16,7 @@ function MiniMapNode({
className, className,
borderRadius, borderRadius,
shapeRendering, shapeRendering,
selected,
onClick, onClick,
}: MiniMapNodeProps) { }: MiniMapNodeProps) {
const { background, backgroundColor } = style || {}; const { background, backgroundColor } = style || {};
@@ -23,7 +24,7 @@ function MiniMapNode({
return ( return (
<rect <rect
className={cc(['react-flow__minimap-node', className])} className={cc(['react-flow__minimap-node', { selected }, className])}
x={x} x={x}
y={y} y={y}
rx={borderRadius} rx={borderRadius}
packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx
+1
View File
@@ -47,6 +47,7 @@ function MiniMapNodes({
width={node.width!} width={node.width!}
height={node.height!} height={node.height!}
style={node.style} style={node.style}
selected={!!node.selected}
className={nodeClassNameFunc(node)} className={nodeClassNameFunc(node)}
color={nodeColorFunc(node)} color={nodeColorFunc(node)}
borderRadius={nodeBorderRadius} borderRadius={nodeBorderRadius}
packages/react/src/additional-components/MiniMap/types.ts
+2
View File
@@ -24,6 +24,7 @@ export type MiniMapProps<NodeData = any> = Omit<HTMLAttributes<SVGSVGElement>, '
ariaLabel?: string | null; ariaLabel?: string | null;
inversePan?: boolean; inversePan?: boolean;
zoomStep?: number; zoomStep?: number;
offsetScale?: number;
}; };
export type MiniMapNodes = Pick< export type MiniMapNodes = Pick<
@@ -46,5 +47,6 @@ export type MiniMapNodeProps = {
strokeColor: string; strokeColor: string;
strokeWidth: number; strokeWidth: number;
style?: CSSProperties; style?: CSSProperties;
selected: boolean;
onClick?: (event: MouseEvent, id: string) => void; onClick?: (event: MouseEvent, id: string) => void;
}; };