How to use react-digraph - 3 common examples

To help you get started, we’ve selected a few react-digraph examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github futpib / pagraphcontrol / components / graph / base.js View on Github external
}

		return this._super_handleDragStart(...args);
	}

	handleDragEnd(...args) {
		if (this.props.onNodeDragEnd) {
			this.props.onNodeDragEnd(...args);
		}

		this.oldSibling = null;
		return this._super_handleDragEnd(...args);
	}
}

EdgeBase.calculateOffset = function (nodeSize, source, target) {
	const arrowVector = math.matrix([ target.x - source.x, target.y - source.y ]);
	const offsetLength = Math.max(0, Math.min((0.75 * size), (math.norm(arrowVector) / 2) - 40));
	const offsetVector = math.dotMultiply(arrowVector, (offsetLength / math.norm(arrowVector)) || 0);

	return {
		xOff: offsetVector.get([ 0 ]),
		yOff: offsetVector.get([ 1 ]),
	};
};

class Edge extends EdgeBase {
	constructor(props) {
		super(props);

		Object.assign(this, {
			handleMouseDown: this.constructor.prototype.handleMouseDown.bind(this),
github futpib / pagraphcontrol / components / graph / base.js View on Github external
render() {
		const { data } = this.props;
		const id = `${data.source || ''}_${data.target}`;
		const className = GraphUtils.classNames('edge', {
			selected: this.props.isSelected,
		});

		return r.g({
			className: 'edge-container ' + (this.props.className || ''),
			'data-source': data.source,
			'data-target': data.target,
		}, [
			r.g({
				className,
			}, [
				r.path({
					className: 'edge-path',
					d: this.getPathDescription(data) || undefined,
				}),
			]),
github futpib / pagraphcontrol / components / graph / base.js View on Github external
return;
		}

		const idVar = edge.target ? `${edge.source}-${edge.target}` : 'custom';
		const id = `edge-${idVar}`;
		const element = this.getEdgeComponent(edge, nodeMoving);
		this.renderEdge(id, element, edge, nodeMoving);

		if (this.isEdgeSelected(edge)) {
			const container = document.querySelector(`#${id}-container`);
			container.parentNode.append(container);
		}
	}
}

GraphView.defaultProps = merge(GraphViewBase.defaultProps, {
	layoutEngineType: null,
});

class Node extends NodeBase {
	constructor(props) {
		super(props);

		Object.assign(this, {
			_super_handleDragStart: this.handleDragStart,
			handleDragStart: this.constructor.prototype.handleDragStart.bind(this),

			_super_handleDragEnd: this.handleDragEnd,
			handleDragEnd: this.constructor.prototype.handleDragEnd.bind(this),

			handleMouseDown: this.constructor.prototype.handleMouseDown.bind(this),
		});

react-digraph

directed graph react component

MIT
Latest version published 1 year ago

Package Health Score

60 / 100
Full package analysis