Helpers are objects that contain rendering primitives (like rectangles, ellipses, etc), for plotting nodes and edges. Helpers also contain implementations of the contains method, a method returning a boolean indicating whether the mouse position is over the rendered shape.
Helpers are very useful when implementing new NodeTypes, since you can access them through this.nodeHelper and this.edgeHelper Graph.Plot properties, providing you with simple primitives and mouse-position check functions.
//implement a new node type
$jit.Viz.Plot.NodeTypes.implement({
'customNodeType': {
'render': function(node, canvas) {
this.nodeHelper.circle.render ...
},
'contains': function(node, pos) {
this.nodeHelper.circle.contains ...
}
}
});
//implement an edge type
$jit.Viz.Plot.EdgeTypes.implement({
'customNodeType': {
'render': function(node, canvas) {
this.edgeHelper.circle.render ...
},
//optional
'contains': function(node, pos) {
this.edgeHelper.circle.contains ...
}
}
});| Helpers.js | Helpers are objects that contain rendering primitives (like rectangles, ellipses, etc), for plotting nodes and edges. |
| NodeHelper | Contains rendering and other type of primitives for simple shapes. |
| NodeHelper. | |
| Functions | |
| render | Renders a circle into the canvas. |
| contains | Returns true if pos is contained in the area of the shape. |
| NodeHelper. | |
| Functions | |
| render | Renders an ellipse into the canvas. |
| contains | Returns true if pos is contained in the area of the shape. |
| NodeHelper. | |
| Functions | |
| render | Renders a square into the canvas. |
| contains | Returns true if pos is contained in the area of the shape. |
| NodeHelper. | |
| Functions | |
| render | Renders a rectangle into the canvas. |
| contains | Returns true if pos is contained in the area of the shape. |
| NodeHelper. | |
| Functions | |
| render | Renders a triangle into the canvas. |
| contains | Returns true if pos is contained in the area of the shape. |
| NodeHelper.star | |
| Functions | |
| render | Renders a star (concave decagon) into the canvas. |
| contains | Returns true if pos is contained in the area of the shape. |
| EdgeHelper | Contains rendering primitives for simple edge shapes. |
| EdgeHelper.line | |
| Functions | |
| render | Renders a line into the canvas. |
| contains | Returns true if pos is contained in the area of the shape. |
| EdgeHelper. | |
| Functions | |
| render | Renders an arrow into the canvas. |
| contains | Returns true if pos is contained in the area of the shape. |
| EdgeHelper. | |
| Functions | |
| render | Renders a hyperline into the canvas. |
| contains | Not Implemented |
'render': function( type, pos, radius, canvas )
Renders a circle into the canvas.
| type | (string) Possible options are ‘fill’ or ‘stroke’. |
| pos | (object) An x, y object with the position of the center of the circle. |
| radius | (number) The radius of the circle to be rendered. |
| canvas | (object) A Canvas instance. |
NodeHelper.circle.render('fill', { x: 10, y: 30 }, 30, viz.canvas);
'contains': function( npos, pos, radius )
Returns true if pos is contained in the area of the shape. Returns false otherwise.
| npos | (object) An x, y object with the Graph.Node position. |
| pos | (object) An x, y object with the position to check. |
| radius | (number) The radius of the rendered circle. |
NodeHelper.circle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30); //true
'render': function( type, pos, width, height, canvas )
Renders an ellipse into the canvas.
| type | (string) Possible options are ‘fill’ or ‘stroke’. |
| pos | (object) An x, y object with the position of the center of the ellipse. |
| width | (number) The width of the ellipse. |
| height | (number) The height of the ellipse. |
| canvas | (object) A Canvas instance. |
NodeHelper.ellipse.render('fill', { x: 10, y: 30 }, 30, 40, viz.canvas);
'contains': function( npos, pos, width, height )
Returns true if pos is contained in the area of the shape. Returns false otherwise.
| npos | (object) An x, y object with the Graph.Node position. |
| pos | (object) An x, y object with the position to check. |
| width | (number) The width of the rendered ellipse. |
| height | (number) The height of the rendered ellipse. |
NodeHelper.ellipse.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30, 40);
'render': function( type, pos, dim, canvas )
Renders a square into the canvas.
| type | (string) Possible options are ‘fill’ or ‘stroke’. |
| pos | (object) An x, y object with the position of the center of the square. |
| dim | (number) The radius (or half-diameter) of the square. |
| canvas | (object) A Canvas instance. |
NodeHelper.square.render('stroke', { x: 10, y: 30 }, 40, viz.canvas);
'contains': function( npos, pos, dim )
Returns true if pos is contained in the area of the shape. Returns false otherwise.
| npos | (object) An x, y object with the Graph.Node position. |
| pos | (object) An x, y object with the position to check. |
| dim | (number) The radius (or half-diameter) of the square. |
NodeHelper.square.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30);
'render': function( type, pos, width, height, canvas )
Renders a rectangle into the canvas.
| type | (string) Possible options are ‘fill’ or ‘stroke’. |
| pos | (object) An x, y object with the position of the center of the rectangle. |
| width | (number) The width of the rectangle. |
| height | (number) The height of the rectangle. |
| canvas | (object) A Canvas instance. |
NodeHelper.rectangle.render('fill', { x: 10, y: 30 }, 30, 40, viz.canvas);
'contains': function( npos, pos, width, height )
Returns true if pos is contained in the area of the shape. Returns false otherwise.
| npos | (object) An x, y object with the Graph.Node position. |
| pos | (object) An x, y object with the position to check. |
| width | (number) The width of the rendered rectangle. |
| height | (number) The height of the rendered rectangle. |
NodeHelper.rectangle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30, 40);
'render': function( type, pos, dim, canvas )
Renders a triangle into the canvas.
| type | (string) Possible options are ‘fill’ or ‘stroke’. |
| pos | (object) An x, y object with the position of the center of the triangle. |
| dim | (number) Half the base and half the height of the triangle. |
| canvas | (object) A Canvas instance. |
NodeHelper.triangle.render('stroke', { x: 10, y: 30 }, 40, viz.canvas);
'contains': function( npos, pos, dim )
Returns true if pos is contained in the area of the shape. Returns false otherwise.
| npos | (object) An x, y object with the Graph.Node position. |
| pos | (object) An x, y object with the position to check. |
| dim | (number) Half the base and half the height of the triangle. |
NodeHelper.triangle.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30);
'render': function( type, pos, dim, canvas )
Renders a star (concave decagon) into the canvas.
| type | (string) Possible options are ‘fill’ or ‘stroke’. |
| pos | (object) An x, y object with the position of the center of the star. |
| dim | (number) The length of a side of a concave decagon. |
| canvas | (object) A Canvas instance. |
NodeHelper.star.render('stroke', { x: 10, y: 30 }, 40, viz.canvas);
'contains': function( npos, pos, dim )
Returns true if pos is contained in the area of the shape. Returns false otherwise.
| npos | (object) An x, y object with the Graph.Node position. |
| pos | (object) An x, y object with the position to check. |
| dim | (number) The length of a side of a concave decagon. |
NodeHelper.star.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, 30);
'render': function( from, to, canvas )
Renders a line into the canvas.
| from | (object) An x, y object with the starting position of the line. |
| to | (object) An x, y object with the ending position of the line. |
| canvas | (object) A Canvas instance. |
EdgeHelper.line.render({ x: 10, y: 30 }, { x: 10, y: 50 }, viz.canvas);
'contains': function( posFrom, posTo, pos, epsilon )
Returns true if pos is contained in the area of the shape. Returns false otherwise.
| posFrom | (object) An x, y object with a Graph.Node position. |
| posTo | (object) An x, y object with a Graph.Node position. |
| pos | (object) An x, y object with the position to check. |
| epsilon | (number) The dimension of the shape. |
EdgeHelper.line.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30);
'render': function( from, to, dim, swap, canvas )
Renders an arrow into the canvas.
| from | (object) An x, y object with the starting position of the arrow. |
| to | (object) An x, y object with the ending position of the arrow. |
| dim | (number) The dimension of the arrow. |
| swap | (boolean) Whether to set the arrow pointing to the starting position or the ending position. |
| canvas | (object) A Canvas instance. |
EdgeHelper.arrow.render({ x: 10, y: 30 }, { x: 10, y: 50 }, 13, false, viz.canvas);
'contains': function( posFrom, posTo, pos, epsilon )
Returns true if pos is contained in the area of the shape. Returns false otherwise.
| posFrom | (object) An x, y object with a Graph.Node position. |
| posTo | (object) An x, y object with a Graph.Node position. |
| pos | (object) An x, y object with the position to check. |
| epsilon | (number) The dimension of the shape. |
EdgeHelper.arrow.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30);
'render': function( from, to, r, canvas )
Renders a hyperline into the canvas. A hyperline are the lines drawn for the Hypertree visualization.
| from | (object) An x, y object with the starting position of the hyperline. x and y must belong to [0, 1). |
| to | (object) An x, y object with the ending position of the hyperline. x and y must belong to [0, 1). |
| r | (number) The scaling factor. |
| canvas | (object) A Canvas instance. |
EdgeHelper.hyperline.render({ x: 10, y: 30 }, { x: 10, y: 50 }, 100, viz.canvas);Not Implemented
Returns true if pos is contained in the area of the shape. Returns false otherwise.
| posFrom | (object) An x, y object with a Graph.Node position. |
| posTo | (object) An x, y object with a Graph.Node position. |
| pos | (object) An x, y object with the position to check. |
| epsilon | (number) The dimension of the shape. |
EdgeHelper.hyperline.contains({ x: 10, y: 30 }, { x: 15, y: 35 }, { x: 15, y: 35 }, 30);Renders a circle into the canvas.
'render': function( type, pos, radius, canvas )
Returns true if pos is contained in the area of the shape.
'contains': function( npos, pos, radius )
Renders an ellipse into the canvas.
'render': function( type, pos, width, height, canvas )
Returns true if pos is contained in the area of the shape.
'contains': function( npos, pos, width, height )
Renders a square into the canvas.
'render': function( type, pos, dim, canvas )
Returns true if pos is contained in the area of the shape.
'contains': function( npos, pos, dim )
Renders a rectangle into the canvas.
'render': function( type, pos, width, height, canvas )
Returns true if pos is contained in the area of the shape.
'contains': function( npos, pos, width, height )
Renders a triangle into the canvas.
'render': function( type, pos, dim, canvas )
Returns true if pos is contained in the area of the shape.
'contains': function( npos, pos, dim )
Renders a star (concave decagon) into the canvas.
'render': function( type, pos, dim, canvas )
Returns true if pos is contained in the area of the shape.
'contains': function( npos, pos, dim )
Renders a line into the canvas.
'render': function( from, to, canvas )
Returns true if pos is contained in the area of the shape.
'contains': function( posFrom, posTo, pos, epsilon )
Renders an arrow into the canvas.
'render': function( from, to, dim, swap, canvas )
Returns true if pos is contained in the area of the shape.
'contains': function( posFrom, posTo, pos, epsilon )
Renders a hyperline into the canvas.
'render': function( from, to, r, canvas )