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

refactor(background): move background to own package, replace example import

Browse Source
This commit is contained in:
Christopher Möller
2022-07-21 13:25:04 +02:00
parent 229c156d79
commit 272d0dfcb4
29 changed files with 384 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/background/package.json Normal file
View File

@@ -0,0 +1,15 @@
{
"name": "@react-flow/background",
"version": "11.0.0",
"description": "A background component for React Flow",
"main": "dist/react-flow-background.cjs.js",
"module": "dist/react-flow-background.esm.js",
"license": "MIT",
"dependencies": {
"@react-flow/core": "11.0.0"
},
"peerDependencies": {
"classcat": "^5.0.3",
"react": "^18.1.0"
}
}

24
packages/core/src/additional-components/Background/index.tsx → packages/background/src/Background.tsx
View File

@@ -1,9 +1,9 @@
import React, { memo, FC, useEffect, useState, useRef } from 'react';
import cc from 'classcat';
import { useStore, ReactFlowState } from '@react-flow/core';
import { useStore } from '../../store';
import { BackgroundProps, BackgroundVariant } from './types';
import { createGridLinesPath, createGridDotsPath } from './utils';
import { BackgroundVariant, ReactFlowState, BackgroundProps } from '../../types';
const defaultColors = {
[BackgroundVariant.Dots]: '#81818a',
@@ -37,11 +37,17 @@ const Background: FC<BackgroundProps> = ({
const isLines = variant === BackgroundVariant.Lines;
const bgColor = color ? color : defaultColors[variant];
const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size * tScale, bgColor);
const path = isLines
? createGridLinesPath(scaledGap, size, bgColor)
: createGridDotsPath(size * tScale, bgColor);
return (
<svg
className={cc(['react-flow__background', 'react-flow__container', className])}
className={cc([
'react-flow__background',
'react-flow__container',
className,
])}
style={{
...style,
width: '100%',
@@ -57,11 +63,17 @@ const Background: FC<BackgroundProps> = ({
y={yOffset}
width={scaledGap}
height={scaledGap}
patternUnits="userSpaceOnUse"
patternUnits='userSpaceOnUse'
>
{path}
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
<rect
x='0'
y='0'
width='100%'
height='100%'
fill={`url(#${patternId})`}
/>
</>
)}
</svg>

2
packages/background/src/index.tsx Normal file
View File

@@ -0,0 +1,2 @@
export { default as Background, default } from './Background';
export * from './types';

13
packages/background/src/types.ts Normal file
View File

@@ -0,0 +1,13 @@
import { HTMLAttributes } from 'react';
export enum BackgroundVariant {
Lines = 'lines',
Dots = 'dots',
}
export interface BackgroundProps extends HTMLAttributes<SVGElement> {
variant?: BackgroundVariant;
gap?: number;
color?: string;
size?: number;
}

0
packages/core/src/additional-components/Background/utils.tsx → packages/background/src/utils.tsx
View File

1
packages/core/package.json
View File

@@ -29,6 +29,7 @@
"nocss"
],
"devDependencies": {
"@types/d3": "^7.4.0",
"@types/react": "^18.0.15"
}
}

53
packages/core/src/additional-components/MiniMap/MiniMapNode.tsx
View File

@@ -1,53 +0,0 @@
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);

2
packages/core/src/additional-components/index.ts
View File

@@ -1,7 +1,5 @@
// These components are not used by React Flow directly
// They can be added as children of a React Flow component
export { default as MiniMap } from './MiniMap';
export { default as Controls, ControlButton } from './Controls';
export { default as Background } from './Background';
export { default as ReactFlowProvider } from './ReactFlowProvider';

19
packages/core/src/types/component-props.ts
View File

@@ -28,7 +28,6 @@ import {
AttributionPosition,
DefaultEdgeOptions,
FitViewOptions,
BackgroundVariant,
OnNodesDelete,
OnEdgesDelete,
OnNodesChange,
@@ -136,17 +135,6 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
export type ReactFlowRefType = HTMLDivElement;
export type GetMiniMapNodeAttribute<NodeData = any> = (node: Node<NodeData>) => string;
export interface MiniMapProps<NodeData = any> extends HTMLAttributes<SVGSVGElement> {
nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
nodeBorderRadius?: number;
nodeStrokeWidth?: number;
maskColor?: string;
}
export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
showZoom?: boolean;
showFitView?: boolean;
@@ -159,10 +147,3 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
}
export interface ControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
export interface BackgroundProps extends HTMLAttributes<SVGElement> {
variant?: BackgroundVariant;
gap?: number;
color?: string;
size?: number;
}

5
packages/core/src/types/general.ts
View File

@@ -81,11 +81,6 @@ export type OnConnectStop = (event: MouseEvent) => void;
export type OnConnectEnd = (event: MouseEvent) => void;
export enum BackgroundVariant {
Lines = 'lines',
Dots = 'dots',
}
export type Viewport = {
x: number;
y: number;

89
packages/core/src/additional-components/MiniMap/index.tsx → packages/minimap/src/MiniMap.tsx
View File

@@ -1,13 +1,17 @@
import React, { memo } from 'react';
import cc from 'classcat';
import shallow from 'zustand/shallow';
import {
useStore,
getRectOfNodes,
Box,
ReactFlowState,
Rect,
} from '@react-flow/core';
import MiniMapNode from './MiniMapNode';
import { useStore } from '../../store';
import { getRectOfNodes } from '../../utils/graph';
import { getBoundsofRects } from '../../utils';
import { MiniMapProps, GetMiniMapNodeAttribute, ReactFlowState } from '../../types';
import MiniMapDrag from './MiniMapDrag';
import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
declare const window: any;
@@ -15,16 +19,38 @@ const defaultWidth = 200;
const defaultHeight = 150;
const selector = (s: ReactFlowState) => ({
viewBBox: {
x: -s.transform[0] / s.transform[2],
y: -s.transform[1] / s.transform[2],
width: s.width / s.transform[2],
height: s.height / s.transform[2],
},
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);
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,
@@ -36,13 +62,25 @@ const MiniMap = ({
nodeStrokeWidth = 2,
maskColor = 'rgb(240, 242, 243, 0.7)',
}: MiniMapProps) => {
const { viewBBox, nodes } = useStore(selector, shallow);
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 boundingRect = nodes.length > 0 ? getBoundsofRects(getRectOfNodes(nodes), viewBBox) : viewBBox;
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);
@@ -53,7 +91,10 @@ const MiniMap = ({
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';
const shapeRendering =
typeof window === 'undefined' || !!window.chrome
? 'crispEdges'
: 'geometricPrecision';
return (
<svg
@@ -83,12 +124,22 @@ const MiniMap = ({
/>
);
})}
<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${viewBBox.x},${viewBBox.y}h${viewBBox.width}v${viewBBox.height}h${-viewBBox.width}z`}
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"
fillRule='evenodd'
/>
</svg>
);

153
packages/minimap/src/index.tsx
View File

@@ -1,151 +1,2 @@
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/core';
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);
export * from './types';
export { default as MiniMap, default } from './MiniMap';

16
packages/minimap/src/types.ts Normal file
View File

@@ -0,0 +1,16 @@
import { HTMLAttributes } from 'react';
import { Node } from '@react-flow/core';
export type GetMiniMapNodeAttribute<NodeData = any> = (
node: Node<NodeData>
) => string;
export interface MiniMapProps<NodeData = any>
extends HTMLAttributes<SVGSVGElement> {
nodeColor?: string | GetMiniMapNodeAttribute<NodeData>;
nodeStrokeColor?: string | GetMiniMapNodeAttribute<NodeData>;
nodeClassName?: string | GetMiniMapNodeAttribute<NodeData>;
nodeBorderRadius?: number;
nodeStrokeWidth?: number;
maskColor?: string;
}