@lincle/minimap v0.3.9

@lincle/minimap generates an interactive reactive, minimap of a @lincle/interactive graph/diagram.

Installation & Setup

Install @lincle/minimap and the peer dependencies react, react-dom, and @lincle/interactive:

npm install react react-dom @lincle/interactive @lincle/minimap

Also include the provided styles file. For example:

import '@lincle/interactive/dist/main.min.css';
import '@lincle/minimap/dist/main.min.css';

Simple Example

The following example will generate this diagram:

CodeSandbox

.node {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	cursor: grab;
	border: 1px solid black;
	background-color: white;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.node:active {
	cursor: grabbing;
}

.node-oval {
	border-radius: 50%;
}

Note: <GraphContexts /> must wrap <Graph /> and <MiniMap /> in order to share context. <GraphContexts /> and <Graph /> share the same API and only <GraphContexts /> will require props.

<GraphContexts
	id='MiniMap'
	nodeHeight={50}
	nodeWidth={50}
	onEdgeDrop={handleEdgeDrop}
>
	<Graph>
		<Nodes>
			<Node
				id={1}
				key={1}
				x={50}
				y={50}
			>
				<div styleName='node'>
					Node 1
				</div>
			</Node>
			<Node
				height={100}
				id={2}
				key={2}
				line='direct'
				shape='oval'
				width={200}
				x={100}
				y={150}
			>
				<div styleName='node node-oval'>
					Node 2
				</div>
			</Node>
			<Node
				id={3}
				key={3}
				line='curve'
				shape='oval'
				x={150}
				y={350}
			>
				<div styleName='node node-oval'>
					Node 3
				</div>
			</Node>
		</Nodes>
		<Edges>
			<Edge
				id={1}
				key={1}
				sourceId={1}
				targetId={2}
			>
				<circle
					fill='white'
					r='3'
					stroke='black'
					strokeWidth={2}
				>
					<title>
						Bridge
					</title>
				</circle>
			</Edge>
			<Edge
				id={2}
				key={2}
				line='direct'
				sourceId={2}
				targetId={3}
			/>
		</Edges>
	</Graph>
	<MiniMap />
</GraphContexts>

Custom <MiniMap /> nodes can also be generated via the node function prop:

import {
	MiniMap,
	MiniMapNode
} from '@lincle/minimap';

const mapNode = (
	{
		height,
		shape,
		width,
		x,
		// eslint-disable-next-line id-length
		y
	}: Dimensions
) => {
	return (
		<MiniMapNode
			height={height}
			shape={shape}
			width={width}
			x={x}
			y={y}
		/>
	);
}

(
	<MiniMap
		node={mapNode}
	/>
)

Component API's

* bolded parameters are required

<MiniMap>

<MiniMapNode>

You may want to use a custom node generating function along with the given node component:

<MiniMapPlain>

You may also want to nest the map in other components or have more control over the styling. MiniMapPlain will require you to give the dimensions of the graph:

Node function

Instead of using the @lincle/minimap provided node, you may opt to generate your own node component:

(
	dimensions: {
    height: number;
    id: ReactText;
    width: number;
    shape: Shape;
    x: number;
    y: number;
	}
) => Component<SVG type>