Connecting arrows for block elements

Description

Small js library (12kb) (github) designed to help connect block elements by arrows on your web page. May be used for informational, demonstration purposes, for construction of graphs or diagrams. Arrows plotting going on canvas located on a common parent.

Using

Example 1

Methods

Method	Parameters	Description
`$cArrows(commonParentID, [options])`	commonParentID (string) – common parent for all interconnected blocks options (object) (optional) – common settings for all drawn arrows;	Initializes 'canvas', for subsequent drawing arrows; Returned value: module instance for drawing arrows (this);
`.updateOptions(newOptions)`	newOptions – a new instance of the settings	Sets a new settings for drawing arrows; Returned value: this;
`.arrow(from, to, [options])`	from (string) – draw arrows from elements selector; to (string) – draw arrows to elements selector; options (object) (optional) – options for currently arrows;	Draws an arrow (arrows) from-to blocks selectors. Returned value: this; * each arrow is placed in the internal storage.
`.arrows(arrowArray)`	arrowArray – array of arrows {from, to, [options]} [];	Draws arrows from an array similar to .arrow(); Returned value: this;
`.clear()`		Clears canvas painted by arrows; Returned value: this;
`.draw()`		Paints arrows on canvas (were previously placed in the internal storage arrow() method); Returned value: this;
`.redraw()`		Redraws the arrows on canvas, (like clear().draw()); Returned value: this;

Settings

options = {[base], [arrow], [render]}

Parameter	Type	Default value	Description
base	object	—	Basic module settings container
`base.canvasZIndex`	int	-10	z-index of creating canvas
`base.alertErrors`	bool	true	Needs to show error messages.
`base.putToContainer`	bool	true	Put metadata of created arrows in internal storage (needs to redraw: redraw(), draw() methods).
`base.canvasClass`	string	—	Set Class of created canvas element.
`base.canvasId`	string	—	Set Id of created canvas element.

arrow	object	—	Settings of arrows type and view.
`arrow.connectionType`	string	'rectangleAuto'	Connection type, of the following values: 'rectangleAuto' - from the edge of rectangle (block), the angle is calculated automatically; 'center' - from the center of the block; 'ellipseAuto' - from the edge of the ellipse (circle), the angle is calculated automatically; 'side' - from the side, you must specify the next parameters `arrow.sideFrom`, `arrow.sideTo`, available values: `'top', 'right', 'bottom', 'left'`; 'rectangleAngle' - from the side of the rectangle specified in degrees (0-360), angle specified in the additional fields `arrow.angleFrom`, `arrow.angleTo`; 'ellipseAngle' - from the side of the ellipse specified in degrees (0-360), angle specified in the additional fields `arrow.angleFrom`, `arrow.angleTo`;
`arrow.arrowType`	string	'arrow'	Specifies the type of arrows: 'line' - line; 'arrow' - arrow; 'double-headed' - double-headed arrow;
`arrow.arrowSize`	int	9	Arrow size in pixels;

render	CanvasContext	—	Сanvas drawing settings, is standard canvas context propertys:
`render.lineWidth`	int	2	Line width;
`render.strokeStyle`	color	'#2D6CA2'	Arrow color;
`render.*`	—	—	Other possible values are defined in canvas context: shadowColor shadowBlur shadowOffsetX shadowOffsetY lineJoin all propertys

Connection types

Example 2

rectangleAuto

center

ellipseAuto

side: 'right'

rectangleAngle: 0

ellipseAngle: 45

rectangleAuto

center

ellipseAuto

side: 'left'

rectangleAngle: 180

ellipseAngle: 225

Example 3

CEO
Vladimir Evstegneev

COO
Ruslan Dobrolubov

Sales

Stepan Fedotov

Konstantin Shishkin

Finances

Mariya Nikolaeva

Elena Abashina

Munira Abdinazarova

Mikhail Soloviev

Tasya Hlebnikova

Logistic

Leonid Voroncov

License: GNU GPL

Download GitHub Donate