This package has been deprecated

Author message:

See @lincle/react-shared

@lincle/base

lincle: A reactive React node and edge generator

lincle generates a reactive graph.

Please see the various testing demos for examples.

If you require an interactive diagram, checkout @lincle/interactive.

Installation & Setup

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

npm install react react-dom @lincle/base

Also include the provided styles file. For example:

import '@lincle/base/dist/main.min.css';

Simple Example

The following example will generate this diagram:

CodeSandbox

/* styles.css */

.App {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.node {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	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-oval {
	border-radius: 50%;
}

import React, { FunctionComponent, ReactElement } from "react";
import { Edge, Edges, Graph, Node, Nodes } from "@lincle/base";
import "@lincle/base/dist/main.min.css";
import "./styles.css";

const App: FunctionComponent = (): ReactElement => {
  return (
    <div className="App">
      <Graph id="SimpleDiagram" key="1" nodeHeight={50} nodeWidth={50}>
        <Nodes>
          <Node id={1} key={1} x={50} y={50}>
            <div className="node">Node 1</div>
          </Node>
          <Node
            height={100}
            id={2}
            key={2}
            shape="oval"
            width={200}
            x={100}
            y={150}
          >
            <div className="node node-oval">Node 2</div>
          </Node>
          <Node id={3} key={3} shape="oval" x={150} y={350}>
            <div className="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>
    </div>
  );
};

export default App;

Component API's

* bolded parameters are required

<Graph>

Parameters	Type	Default	Description
id	string | number		The unique ID of the graph
edgeFrequency	number	16	Frequency of edge updates during node movements (in ms)
grid	false | [number, number]	[16, 16]	The background grid space; false to disable.
line	"curve" | "direct" | "step"	"step"	The default curve for the edges
nodeFrequency	number	500	Frequency of node movements reported (in ms, aside from edges)
nodeHeight	number	50	The default height for nodes (in px)
nodeWidth	number	50	The default width for nodes (in px)
shape	"oval" | "rectangle"	"rectangle"	The default shape for nodes

<Nodes>

Parameters	Type	Default	Description
none

<Node>

Parameters	Type	Default	Description
id	string | number		The unique ID of the node
x	number	0	The initial x coordinate of the node
y	number	0	The initial y coordinate of the node
	The following override the defaults provided by <Graph />
height	number	50	The node height
shape	'oval' | 'rectangle'	rectangle	The shape of the node
width	number	50	The node width

<Edges>

Parameters	Type	Default	Description
dash	boolean | undefined	undefined	Whether dash should be enabled. Defaults to hover only.

<Edge>

Parameters	Type	Default	Description
id	string | number		The unique ID for the edge
dash	boolean | undefined	undefined	Whether dash should be enabled. Defaults to hover only.
line	'curve' | 'direct' | 'step'	direct	The line shape (overrides default) and not applicable if custom path generator is used.
markerEnd	string		Passed to the default path generated <path> SVG
markerStart	string		Passed to the default path generated <path> SVG
path	path function - see below		Use to generate a custom path component.
sourceId	string | number		ID for the source node
targetId	string | number		ID for the target node

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/base 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>

Parameters	Type	Default	Description
children	SVG	<circle>	The repeated SVG
scale	number	1	Scales the grid
xOffset	number	0	Translates the grid left/right
yOffset	number	0	Translates the grid up/down

Contexts

<Context>'s can be taken advantage of to extend the functionality of @lincle/base:

Context	Provides	Description
<GraphContext>	{diagramId: ReactText, nodePosition: NodePositions, edgeSubscriber: EdgeSubscriber, defaultSettings: DefaultSettings}	Provides the current diagramId and default settings along with classes to subscribe to <Node> and <Edge> events.
<GridContext>	[number, number]	Provides the current grid dimensions.