@lincle/interactive v0.3.9

@lincle/interactive generates a reactive, composable graph/diagram. @lincle/interactive is built on @lincle/base diagram generating capabilities adding interactive functionality.

Interactivity is provided by:

• react-map-interaction for panning and scaling
• react-draggable for moving of nodes and edges.

The nodes are moveable by default. To pull new edges, tap and hold the diagram or press and hold shift. To select nodes, press on a node for half a second or hold ctrl.

*Note: node selection relies on a callback function and is disabled if a callback is not provided.*

Please see the various testing demos for examples.

Installation & Setup

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

npm install react react-dom @lincle/interactive

Also include the provided styles file. For example:

import '@lincle/interactive/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%;
}

<Graph
	id='YetAnotherDiagram'
	key='1'
	nodeHeight={50}
	nodeWidth={50}
	onEdgeDrop={handleEdgeDrop}
>
	<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>

Component API's

* bolded parameters are required

<Graph>

<GraphContexts>

The primary purpose of <GraphContexts> is to include additional elements in the graph that will share access to the various <Context.Providers> - such as @lincle/minimap.

<Nodes>

<Node>

<Edges>

<Edge>

*Note: The child of <Edge /> is intended to be an element at the center of the path. The child will be inside an <SVG /> element and should be an SVG type or wrapped in a <foreignObject /> element. See examples for details.*

Path function

Instead of using the @lincle/interactive provided edges (curve, line, & step), you may opt to generate your own path component:

(
	source: {
		height: number,
		id: string | number,
		shape: 'oval' | 'rectangle',
		width: number,
		x: number,
		y: number
	},
	target: {
		height: number,
		id: string | number,
		shape: 'oval' | 'rectangle',
		width: number,
		x: number,
		y: number
	},
	children?: ReactNode
) => Component<SVG type>

<Grid>

Contexts

There are several <Context>'s used that can be taken advantage of to extend the functionality of lincle via their respective <Context.Provider>s':