Refactor: CSS handling (#2344)
* refactor(css): only load base styles, add css task, cleanup exports * style(base): add edge label bg * refactor(css): use css-utils * feat(core): add Panel component * refactor(background): cleanup * refactor(css-handling): cleanup
This commit is contained in:
Moritz Klack
@@ -4,16 +4,18 @@ import shallow from 'zustand/shallow';
|
||||
import {
|
||||
useStore,
|
||||
getRectOfNodes,
|
||||
Box,
|
||||
ReactFlowState,
|
||||
Rect,
|
||||
Panel,
|
||||
getBoundsOfRects,
|
||||
} from '@react-flow/core';
|
||||
import { injectStyle } from '@react-flow/css-utils';
|
||||
|
||||
import MiniMapNode from './MiniMapNode';
|
||||
import MiniMapDrag from './MiniMapDrag';
|
||||
import { MiniMapProps, GetMiniMapNodeAttribute } from './types';
|
||||
import baseStyle from './style';
|
||||
|
||||
import './style.css';
|
||||
injectStyle(baseStyle);
|
||||
|
||||
declare const window: any;
|
||||
|
||||
@@ -30,30 +32,6 @@ const selector = (s: ReactFlowState) => ({
|
||||
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 ARIA_LABEL_KEY = 'react-flow__minimap-desc';
|
||||
|
||||
function MiniMap({
|
||||
@@ -65,6 +43,7 @@ function MiniMap({
|
||||
nodeBorderRadius = 5,
|
||||
nodeStrokeWidth = 2,
|
||||
maskColor = 'rgb(240, 242, 243, 0.7)',
|
||||
position = 'bottom-right',
|
||||
}: MiniMapProps) {
|
||||
const minimapId = useId();
|
||||
const {
|
||||
@@ -85,7 +64,7 @@ function MiniMap({
|
||||
height: containerHeight / transform[2],
|
||||
};
|
||||
const boundingRect =
|
||||
nodes.length > 0 ? getBoundsofRects(getRectOfNodes(nodes), viewBB) : viewBB;
|
||||
nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB;
|
||||
const scaledWidth = boundingRect.width / elementWidth;
|
||||
const scaledHeight = boundingRect.height / elementHeight;
|
||||
const viewScale = Math.max(scaledWidth, scaledHeight);
|
||||
@@ -103,54 +82,52 @@ function MiniMap({
|
||||
const labelledBy = `${ARIA_LABEL_KEY}-${minimapId}`;
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={elementWidth}
|
||||
height={elementHeight}
|
||||
viewBox={`${x} ${y} ${width} ${height}`}
|
||||
<Panel
|
||||
position={position}
|
||||
style={style}
|
||||
className={cc(['react-flow__minimap', className])}
|
||||
role="img"
|
||||
aria-labelledby={labelledBy}
|
||||
>
|
||||
<title id={labelledBy}>React Flow mini map</title>
|
||||
{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
|
||||
<svg
|
||||
width={elementWidth}
|
||||
height={elementHeight}
|
||||
viewBox={`${x} ${y} ${width} ${height}`}
|
||||
role="img"
|
||||
aria-labelledby={labelledBy}
|
||||
>
|
||||
<title id={labelledBy}>React Flow mini map</title>
|
||||
{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}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<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>
|
||||
viewBB.height
|
||||
}h${-viewBB.width}z`}
|
||||
fill={maskColor}
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { drag, D3DragEvent, SubjectPosition } from 'd3-drag';
|
||||
import { select } from 'd3-selection';
|
||||
import { useReactFlow } from '@react-flow/core';
|
||||
|
||||
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;
|
||||
@@ -1,2 +1,2 @@
|
||||
export * from './types';
|
||||
export { default as MiniMap, default } from './MiniMap';
|
||||
export { default as MiniMap } from './MiniMap';
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
.react-flow__minimap {
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
bottom: 20px;
|
||||
right: 15px;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
const style = `
|
||||
.react-flow__minimap {
|
||||
background-color: #fff;
|
||||
}`;
|
||||
|
||||
export default style;
|
||||
@@ -1,5 +1,5 @@
|
||||
import { HTMLAttributes } from 'react';
|
||||
import { Node } from '@react-flow/core';
|
||||
import { Node, PanelPosition } from '@react-flow/core';
|
||||
|
||||
export type GetMiniMapNodeAttribute<NodeData = any> = (
|
||||
node: Node<NodeData>
|
||||
@@ -13,4 +13,5 @@ export interface MiniMapProps<NodeData = any>
|
||||
nodeBorderRadius?: number;
|
||||
nodeStrokeWidth?: number;
|
||||
maskColor?: string;
|
||||
position?: PanelPosition;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user