JSDoc: Class: Graph

Constructor

new Graph(container, oopt)

Parameters:

Name Type Attributes Description

container object DOM container for the widget.

o

object

Options.

Properties

Name	Type	Attributes	Default	Description
`minXVal`	number	<optional>	0	Minimum X value.
`minYVal`	number	<optional>	0	Minimum Y value.
`maxXVal`	number	<optional>	100	Maximum X value.
`maxYVal`	number	<optional>	100	Maximum Y value.
`maxNumVertices`	number	<optional>	-1	Maximum number of vertices.
`quantizeX`	number	<optional>	0.1	X-quantization ("grid") value.
`quantizeY`	number	<optional>	0.1	Y-quantization ("grid") value.
`xDecimalPrecision`	number	<optional>	1	Number of decimal places for output of the X values.
`yDecimalPrecision`	number	<optional>	1	Number of decimal places for output of the Y values.
`isEditable`	boolean	<optional>	true	Is the graph editable?
`vertexColor`	string	<optional>	"#f40"	Color of vertex points.
`lineColor`	string	<optional>	"#484848"	Color of lines connecting the vertices.
`backgroundColor`	string	<optional>	"#fff"	Background color.
`lineWidth`	number	<optional>	2	Width of the connecting lines.
`vertexRadius`	number	<optional>	4	Radius of the vertex points.
`mouseSensitivity`	number	<optional>	1.2	Mouse sensitivity (how much moving the mouse affects the interaction).

Implements:

Widget

Source:

graph.js, line 11

Methods

(private) _addSvgLine()

Adds an SVG line connecting two vertices.

Source:

graph.js, line 582

(private) _addSvgVertex()

Adds a new SVG vertex representation.

Source:

graph.js, line 565

(private) _calcVertexPos()

Calculates the x and y for a vertex in the graph according to its state value.

Source:

graph.js, line 756

(private) _calcVertexState()

Calculates the x and y for a vertex state based on position on the graph. (inverse of _calcVertexPos).

Source:

graph.js, line 771

(private) _deleteVertex(targetVtx)

Deletes a vertex.

Parameters:

Name	Type	Description
`targetVtx`	SVGElement	Vertex to Delete

Source:

graph.js, line 545

(private) _initHandlers()

Initializes mouse and touch event handlers.

Source:

graph.js, line 323

(private) _initOptions()

Initializes the options.

Source:

graph.js, line 218

(private) _initState()

Initializes state.

Source:

graph.js, line 277

(private) _initStateConstraints()

Initializes state constraints.

Source:

graph.js, line 249

(private) _initSvgEls()

Initializes the svg elements.

Source:

graph.js, line 300

(private) _moveLine(targetLine, dPos, vtxPos0) → {object}

Moves a line.

Parameters:

Name Type Description

targetLine SVGElement The target line

dPos

object

Properties

Name	Type	Description
`x`	number
`y`	number

vtxPos0

object

Original position (before moving) of the two vertices immediately to the left and right of the line being moved in the form { vtx1: {x, y}, vtx2: {x, y}, boundaryBL: {x, y}, boundaryTR: {x, y} } If null, will be calculated from the corresponding svg element.

Properties

Name Type Attributes Description

vtx1

obect

Properties

Name	Type	Attributes	Description
`x`	number	<optional>
`y`	number	<optional>

vtx2

obect

Properties

Name	Type	Attributes	Description
`x`	number	<optional>
`y`	number	<optional>

Source:

graph.js, line 638

Returns:

Original position of the two vertices affected by the line move in the form { vtx1: {x, y}, vtx2: {x, y}, boundaryBL: {x, y}, boundaryTR: {x, y} }.

Type: object

(private) _moveVertex(targetVtx, newPos)

Moves a vertex.

Parameters:

Name Type Description

targetVtx SVGElement The target vertex

newPos

Object

The new position

Properties

Name	Type	Description
`x`	number
`y`	number

Source:

graph.js, line 731

(private) _removeSvgLine()

Removes an SVG line connecting two vertices.

Source:

graph.js, line 608

(private) _removeSvgVertex()

Removes an SVG vertex.

Source:

graph.js, line 592

(private) _update()

Updates (redraws) component based on state.

Source:

graph.js, line 453

(private) _xPxToVal()

Converts on-screen x distance to scaled x state-value.

Source:

graph.js, line 785

(private) _yPxToVal()

Converts on-screen y distance to scaled y state-value.

Source:

graph.js, line 794

addFixedVertex(…vtx)

Adds a vertex with fixed x and y coordinates.

Parameters:

Name Type Attributes Description

vtx

object

Vertex coordinates in format {x, y}

Properties

Name	Type	Description
`x`	number	X coordinate of the vertex.
`y`	number	Y coordinate of the vertex.

Source:

graph.js, line 175

addFixedXVertex(…vtx)

Adds a vertex with fixed y coordinate.

Parameters:

Name Type Attributes Description

vtx

object

Vertex coordinates in format {x, y}

Properties

Name	Type	Description
`x`	number	X coordinate of the vertex.
`y`	number	Y coordinate of the vertex.

Source:

graph.js, line 188

addFixedYVertex(…vtx)

Adds a vertex with fixed y coordinate.

Parameters:

Name Type Attributes Description

vtx

object

Vertex coordinates in format {x, y}

Properties

Name	Type	Description
`x`	number	X coordinate of the vertex.
`y`	number	Y coordinate of the vertex.

Source:

graph.js, line 202

addVertex(…vtx)

Adds new vertices to the state. Each vertex is represented as x and y values, as well as optional boolean flags specifying whether the x, y, or both values should be fixed (unchangeble). The x and y values may also take the strings "min", "max" to specify that the coordinates should be tied to the minimum or maximum possible x or y values for the graph.

Parameters:

Name Type Attributes Description

vtx

object

Object representing the new vertex to add.

Properties

Name	Type	Attributes	Default	Description
`x`	number	<optional>	minXVal	X coordinate for the new vertex.
`y`	number	<optional>	minYVal	Y coordinate for the new vertex.
`isXFixed`	boolean	<optional>	false	Is the X coordinate fixed (unable to move)?
`isYFixed`	boolean	<optional>	false	Is the Y coordinate fixed (unable to move)?

Source:

graph.js, line 126

getNumVertices() → {number}

Returns the number of vertices set on this graph.

Source:

graph.js, line 109

Returns:

- Number of vertices.

Type: number

getVal()

Returns the state as an array of [x, y] pairs.

Source:

graph.js, line 57

setInternalVal(vertexArray)

Sets the state as an array of [x, y] vertex pairs. Same as setVal(), but will not trigger observer callback methods.

Parameters:

Name	Type	Description
`vertexArray`	array	An array of [x, y] points

Source:

graph.js, line 67

setOptions()

Sets the options.

Source:

graph.js, line 47

setVal(vertexArray)

Sets the state as an array of [x, y] vertex pairs. Same as setInternalVal(), but will trigger observer callback methods.

Parameters:

Name	Type	Description
`vertexArray`	array	An array of [x, y] points.

Source:

graph.js, line 79

setVertexVal(val, idx) → {number}

Sets the value of a particular vertex, selected by its index. Note: will not trigger observer notifications.

Parameters:

Name	Type	Description
`val`	number	Value to set.
`idx`	number	Index of the vertex to set the value for.

Source:

graph.js, line 93

Returns:

- Index of the vertex that has been set, or -1 if no such vertex exists.

Type: number