Merge pull request #464 from rgoupil/develop
Expose getConnectedEdge + Set className of minimap node
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import React, { memo, CSSProperties } from 'react';
|
import React, { memo, CSSProperties } from 'react';
|
||||||
|
import cc from 'classcat';
|
||||||
|
|
||||||
interface MiniMapNodeProps {
|
interface MiniMapNodeProps {
|
||||||
x: number;
|
x: number;
|
||||||
@@ -6,17 +7,18 @@ interface MiniMapNodeProps {
|
|||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
color: string;
|
color: string;
|
||||||
|
className: string;
|
||||||
borderRadius: number;
|
borderRadius: number;
|
||||||
style?: CSSProperties;
|
style?: CSSProperties;
|
||||||
}
|
}
|
||||||
|
|
||||||
const MiniMapNode = ({ x, y, width, height, style, color, borderRadius }: MiniMapNodeProps) => {
|
const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadius }: MiniMapNodeProps) => {
|
||||||
const { background, backgroundColor } = style || {};
|
const { background, backgroundColor } = style || {};
|
||||||
const fill = (color || background || backgroundColor) as string;
|
const fill = (color || background || backgroundColor) as string;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<rect
|
<rect
|
||||||
className="react-flow__minimap-node"
|
className={cc(['react-flow__minimap-node', className])}
|
||||||
x={x}
|
x={x}
|
||||||
y={y}
|
y={y}
|
||||||
rx={borderRadius}
|
rx={borderRadius}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ type StringFunc = (node: Node) => string;
|
|||||||
|
|
||||||
interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
|
interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
|
||||||
nodeColor?: string | StringFunc;
|
nodeColor?: string | StringFunc;
|
||||||
|
nodeClassName?: string | StringFunc;
|
||||||
nodeBorderRadius?: number;
|
nodeBorderRadius?: number;
|
||||||
maskColor?: string;
|
maskColor?: string;
|
||||||
}
|
}
|
||||||
@@ -23,6 +24,7 @@ const MiniMap = ({
|
|||||||
style = { backgroundColor: '#f8f8f8' },
|
style = { backgroundColor: '#f8f8f8' },
|
||||||
className,
|
className,
|
||||||
nodeColor = '#ddd',
|
nodeColor = '#ddd',
|
||||||
|
nodeClassName = '',
|
||||||
nodeBorderRadius = 5,
|
nodeBorderRadius = 5,
|
||||||
maskColor = 'rgba(10, 10, 10, .25)',
|
maskColor = 'rgba(10, 10, 10, .25)',
|
||||||
}: MiniMapProps) => {
|
}: MiniMapProps) => {
|
||||||
@@ -35,6 +37,7 @@ const MiniMap = ({
|
|||||||
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 nodeClassNameFunc = (nodeClassName instanceof Function ? nodeClassName : () => nodeClassName) 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 = {
|
||||||
@@ -73,6 +76,7 @@ const MiniMap = ({
|
|||||||
width={node.__rf.width}
|
width={node.__rf.width}
|
||||||
height={node.__rf.height}
|
height={node.__rf.height}
|
||||||
style={node.style}
|
style={node.style}
|
||||||
|
className={nodeClassNameFunc(node)}
|
||||||
color={nodeColorFunc(node)}
|
color={nodeColorFunc(node)}
|
||||||
borderRadius={nodeBorderRadius}
|
borderRadius={nodeBorderRadius}
|
||||||
/>
|
/>
|
||||||
|
|||||||
+1
-1
@@ -8,7 +8,7 @@ export { getBezierPath } from './components/Edges/BezierEdge';
|
|||||||
export { getSmoothStepPath } from './components/Edges/SmoothStepEdge';
|
export { getSmoothStepPath } from './components/Edges/SmoothStepEdge';
|
||||||
export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils';
|
export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils';
|
||||||
|
|
||||||
export { isNode, isEdge, removeElements, addEdge, getOutgoers } from './utils/graph';
|
export { isNode, isEdge, removeElements, addEdge, getOutgoers, getConnectedEdges } from './utils/graph';
|
||||||
|
|
||||||
export * from './additional-components';
|
export * from './additional-components';
|
||||||
export * from './types';
|
export * from './types';
|
||||||
|
|||||||
Reference in New Issue
Block a user