function flowchart_visualization()
{
  this.texth = 18;
  this.spread = 10;
  this.dirty = false;
  this.snap = true;
  this.portkeys = {east:true, north:true, south:true, west:true};
  this.reset();
}
/**********************************************************************************************************************
  Data Structure of flowchart_visualization
 **********************************************************************************************************************
  Key                           Type          Meaning
    .dirty                      Boolean       True if the edge graph needs to be recalculated
    .portkeys                   Object        Keys in this are available port names.
    .snap                       Boolean       True if nodes should be snapped to the nearest vertex position
    .spread                     Integer       Distance between vertices in edge graph
    .texth                      Integer       Font size in pixels
    .x                          Float         x position of the camera
    .y                          Float         y position of the camera

    .outputCanvas               HTMLElement   The canvas to render on          
    .outputContext              --            2d canvas context
    
    .nodes[ID]
      .type                     String        Node type: 'terminal', 'io', 'decision', 'process'
      .text                     String        Text to be drawn in this node
      .x                        Float         x coordinate of the center of this node
      .y                        Float         y coordinate of the center of this node
      .highlight                Boolean       True if this node should be drawn in a different color
 **********************************************************************************************************************
  Notes:
  Functions beginning with _ underscore are for internal use.
  
  Essentially this visualization allows easy specification of various types of nodes ('terminal', 'decision', etc)
  and arrows linking between them. Currently, each node has 4 ports, where an arrow can enter or leave that node.
  The ports are centered on the north, south, east, and west bounds of the node. The visualization allows multiple
  arrows to enter a port, but only one arrow may exit a port.
  
  var fvis = new flowchart_visualization();
  fvis.setCanvas(canvas_element);
  
  fvis.terminal('START', 'start', 0, 0);  // Create a terminal at (0, 0) with ID 'START' and the text 'start' written inside
  fvis.process('STEP1', 'step 1', 0, 100);
  fvis.terminal('END', 'end', 100, 100);
  
  fvis.arrow('START', 'south', 'STEP1', 'north');  // Create an arrow from the south port of START to the north port of STEP1
  fvis.arrow('STEP1', 'east', 'END', 'west');
  
  fvis.render();
  
  The output will be something like:
  
   ( start )
       |
       V
   | step 1 | -> ( end )
  
  
  Note that nodes require coordinates to be specified, but arrows do not. Paths for arrows are dynamically generated
  when the visualization renders. 
  
  Performance notes:
  Arrow pathfinding can be an expensive process if there are many arrows defined. A grid form graph is created spanning
  the region around all of the nodes in the visualization. This is used to find paths between node ports for arrows to follow.
  
  The .spread variable determines the distance between possible vertices in the edge graph when calculating arrow paths. A higher value
  for spread will improve performance, but may not look as good, or may not provide enough vertices for all of the arrows to find a path.

  If the .snap variable is set to true, it prevents arrows having diagonal edges by forcing nodes to be at x,y coordinates that are in line
  with the grid created by the arrow pathfinding graph. If set to false, the nodes will not be moved, but arrows may appear with diagonal edges.
  
  The .dirty variable should be set to true after any action that would cause an arrow to move. Arrow paths are cached after the first render
  call. Setting this variable informs the visualization that it needs to recalculate arrow paths on the next render call.  
 ***********************************************************************************************************************/
Data Structure of flowchart_visualization
Key                           Type          Meaning
.dirty                      Boolean       True if the edge graph needs to be recalculated
.portkeys                   Object        Keys in this are available port names.
.snap                       Boolean       True if nodes should be snapped to the nearest vertex position
.spread                     Integer       Distance between vertices in edge graph
.texth                      Integer       Font size in pixels
.x                          Float         x position of the camera
.y                          Float         y position of the camera

.outputCanvas               HTMLElement   The canvas to render on
.outputContext              --            2d canvas context



Functions beginning with _ underscore are for internal use.

Essentially this visualization allows easy specification of various types of nodes ('terminal', 'decision', etc)
and arrows linking between them. Currently, each node has 4 ports, where an arrow can enter or leave that node.
The ports are centered on the north, south, east, and west bounds of the node. The visualization allows multiple
arrows to enter a port, but only one arrow may exit a port.









The output will be something like.



Note that nodes require coordinates to be specified, but arrows do not. Paths for arrows are dynamically generated
when the visualization renders.

Performance notes:
Arrow pathfinding can be an expensive process if there are many arrows defined. A grid form graph is created spanning
the region around all of the nodes in the visualization. This is used to find paths between node ports for arrows to follow.

The .spread variable determines the distance between possible vertices in the edge graph when calculating arrow paths. A higher value
for spread will improve performance, but may not look as good, or may not provide enough vertices for all of the arrows to find a path.

If the .snap variable is set to true, it prevents arrows having diagonal edges by forcing nodes to be at x,y coordinates that are in line
with the grid created by the arrow pathfinding graph. If set to false, the nodes will not be moved, but arrows may appear with diagonal edges.

The .dirty variable should be set to true after any action that would cause an arrow to move. Arrow paths are cached after the first render
call. Setting this variable informs the visualization that it needs to recalculate arrow paths on the next render call.
Data Structure of flowchart_visualization Key Type Meaning . dirty Boolean True if the edge graph needs to be recalculated . portkeys Object Keys in this are available port names . . snap Boolean True if nodes should be snapped to the nearest vertex position . spread Integer Distance between vertices in edge graph . texth Integer Font size in pixels . x Float x position of the camera . y Float y position of the camera . outputCanvas HTMLElement The canvas to render on . outputContext -- 2d canvas context Functions beginning with _ underscore are for internal use . Essentially this visualization allows easy specification of various types of nodes ( ' terminal ' ' decision ' etc ) and arrows linking between them . Currently each node has 4 ports where an arrow can enter or leave that node . The ports are centered on the north south east and west bounds of the node . The visualization allows multiple arrows to enter a port but only one arrow may exit a port . The output will be something like . Note that nodes require coordinates to be specified but arrows do not . Paths for arrows are dynamically generated when the visualization renders . Performance notes : Arrow pathfinding can be an expensive process if there are many arrows defined . A grid form graph is created spanning the region around all of the nodes in the visualization . This is used to find paths between node ports for arrows to follow . The . spread variable determines the distance between possible vertices in the edge graph when calculating arrow paths . A higher value for spread will improve performance but may not look as good or may not provide enough vertices for all of the arrows to find a path . If the . snap variable is set to true it prevents arrows having diagonal edges by forcing nodes to be at x y coordinates that are in line with the grid created by the arrow pathfinding graph . If set to false the nodes will not be moved but arrows may appear with diagonal edges . The . dirty variable should be set to true after any action that would cause an arrow to move . Arrow paths are cached after the first render call . Setting this variable informs the visualization that it needs to recalculate arrow paths on the next render call .
function flowchart_visualization()
{
  this.texth = 18;
  this.spread = 10;
  this.dirty = false;
  this.snap = true;
  this.portkeys = {east:true, north:true, south:true, west:true};
  this.reset();
}
function flowchart_visualization ( ) { this . texth = 18 ; this . spread = 10 ; this . dirty = false ; this . snap = true ; this . portkeys = { east : true , north : true , south : true , west : true } ; this . reset ( ) ; }
Data Structure of flowchart_visualization
Key                           Type          Meaning
.dirty                      Boolean       True if the edge graph needs to be recalculated
.portkeys                   Object        Keys in this are available port names.
Data Structure of flowchart_visualization Key Type Meaning . dirty Boolean True if the edge graph needs to be recalculated . portkeys Object Keys in this are available port names .