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

refactor(minimap): use memo

Browse Source
This commit is contained in:
moklick
2020-07-27 12:35:40 +02:00
parent f26323a1e8
commit 8d0e8c63fb
2 changed files with 77 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/MiniMap/MiniMapNode.tsx
+9 -12
View File
@@ -1,20 +1,17 @@
import React from 'react'; import React, { memo, CSSProperties } from 'react';
import { Node } from '../../types';
interface MiniMapNodeProps { interface MiniMapNodeProps {
node: Node; x: number;
y: number;
width: number;
height: number;
color: string; color: string;
borderRadius: number; borderRadius: number;
style?: CSSProperties;
} }
const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => { const MiniMapNode = memo(({ x, y, width, height, style, color, borderRadius }: MiniMapNodeProps) => {
const { const { background, backgroundColor } = style || {};
position: { x, y },
width,
height,
} = node.__rf;
const { background, backgroundColor } = node.style || {};
const fill = (color || background || backgroundColor) as string; const fill = (color || background || backgroundColor) as string;
return ( return (
@@ -29,7 +26,7 @@ const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
fill={fill} fill={fill}
/> />
); );
}; });
MiniMapNode.displayName = 'MiniMapNode'; MiniMapNode.displayName = 'MiniMapNode';
src/additional-components/MiniMap/index.tsx
+68 -57
View File
@@ -1,4 +1,4 @@
import React from 'react'; import React, { memo } from 'react';
import cc from 'classcat'; import cc from 'classcat';
import { useStoreState } from '../../store/hooks'; import { useStoreState } from '../../store/hooks';
@@ -19,65 +19,76 @@ interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
const defaultWidth = 200; const defaultWidth = 200;
const defaultHeight = 150; const defaultHeight = 150;
const MiniMap = ({ const MiniMap = memo(
style = { backgroundColor: '#f8f8f8' }, ({
className, style = { backgroundColor: '#f8f8f8' },
nodeColor = '#ddd', className,
nodeBorderRadius = 5, nodeColor = '#ddd',
maskColor = 'rgba(10, 10, 10, .25)', nodeBorderRadius = 5,
}: MiniMapProps) => { maskColor = 'rgba(10, 10, 10, .25)',
const containerWidth = useStoreState((s) => s.width); }: MiniMapProps) => {
const containerHeight = useStoreState((s) => s.height); const containerWidth = useStoreState((s) => s.width);
const [tX, tY, tScale] = useStoreState((s) => s.transform); const containerHeight = useStoreState((s) => s.height);
const nodes = useStoreState((s) => s.nodes); const [tX, tY, tScale] = useStoreState((s) => s.transform);
const nodes = useStoreState((s) => s.nodes);
const mapClasses = cc(['react-flow__minimap', className]); const mapClasses = cc(['react-flow__minimap', className]);
const elementWidth = (style.width || defaultWidth)! as number; const elementWidth = (style.width || defaultWidth)! as number;
const elementHeight = (style.height || defaultHeight)! as number; const elementHeight = (style.height || defaultHeight)! as number;
const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc; const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
const hasNodes = nodes && nodes.length; const hasNodes = nodes && nodes.length;
const bb = getRectOfNodes(nodes); const bb = getRectOfNodes(nodes);
const viewBB: Rect = { const viewBB: Rect = {
x: -tX / tScale, x: -tX / tScale,
y: -tY / tScale, y: -tY / tScale,
width: containerWidth / tScale, width: containerWidth / tScale,
height: containerHeight / tScale, height: containerHeight / tScale,
}; };
const boundingRect = hasNodes ? getBoundsofRects(bb, viewBB) : viewBB; const boundingRect = hasNodes ? getBoundsofRects(bb, viewBB) : viewBB;
const scaledWidth = boundingRect.width / elementWidth; const scaledWidth = boundingRect.width / elementWidth;
const scaledHeight = boundingRect.height / elementHeight; const scaledHeight = boundingRect.height / elementHeight;
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 = 5 * 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;
const height = viewHeight + offset * 2; const height = viewHeight + offset * 2;
return ( return (
<svg <svg
width={elementWidth} width={elementWidth}
height={elementHeight} height={elementHeight}
viewBox={`${x} ${y} ${width} ${height}`} viewBox={`${x} ${y} ${width} ${height}`}
style={style} style={style}
className={mapClasses} className={mapClasses}
> >
{nodes {nodes
.filter((node) => !node.isHidden) .filter((node) => !node.isHidden)
.map((node) => ( .map((node) => (
<MiniMapNode key={node.id} node={node} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} /> <MiniMapNode
))} key={node.id}
<path x={node.__rf.position.x}
className="react-flow__minimap-mask" y={node.__rf.position.y}
d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z width={node.__rf.width}
height={node.__rf.height}
style={node.style}
color={nodeColorFunc(node)}
borderRadius={nodeBorderRadius}
/>
))}
<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`} M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
fill={maskColor} fill={maskColor}
fillRule="evenodd" fillRule="evenodd"
/> />
</svg> </svg>
); );
}; }
);
MiniMap.displayName = 'MiniMap'; MiniMap.displayName = 'MiniMap';