Distance from tip to base of arrowhead
var arrHeight = 0;
Distance from the left to the right sides of the arrow head
var arrWidth = 0;
Option name | Type | Description |
---|---|---|
flowviz | FlowViz | Static reference to the main FlowViz object |
Sets this module's static reference to the FlowViz object
module.exports.SetFvRef = function(flowviz) {
fv = flowviz;
};
Option name | Type | Description |
---|---|---|
width | number | |
height | number |
Static function for setting the display properties of arrow heads drawn on edges
module.exports.SetArrowProps = function(width, height) {
arrHeight = height;
arrWidth = width;
};
Option name | Type | Description |
---|---|---|
start | FlowNode | The node from which the edge starts |
end | FlowNode | The node to which the edge ends |
direction | number | Indicating the direction in which arrows should be drawn on this edge |
Defines the FlowEdge type. This encapsulates an edge between nodes in the FlowViz graph.
function FlowEdge(start, end, direction, startConnType, endConnType) {
this.id = "edge-" + id_count;
id_count += 1;
this.start = start;
this.end = end;
this.DataItems = fv.Config.GetEdgeDataObject(start, end);
this.direction = direction;
this.dirOffset = 0;
this.startConnectionType = null;
this.endConnectionType = null;
this.startOffset = this.start.type.GetEdgeOffset(this.startConnectionType);
this.endOffset = this.end.type.GetEdgeOffset(this.endConnectionType);
this.startPadding = this.start.type.GetEdgePadding(this.startConnectionType);
this.endPadding = this.end.type.GetEdgePadding(this.endConnectionType);
this._svgpath = "";
if(direction < module.exports.FORWARD || direction > module.exports.STD) {
throw new Error("Direction must be one of FlowEdge.{FORWARD, BACKWARD, STD}");
}
this.Update();
}
FlowEdge.prototype.getJSON = function() {
return {
"id": this.id,
"start-id": this.start.id,
"end-id": this.end.id
};
};
Updates the beginning and ending points of the this edge based on the start and end node locations. This should be
called anytime an edge is created or either of the connected nodes is moved.
FlowEdge.prototype.Update = function() {
// Find the end points of the edge
this.startPt = {x: this.start.x + this.startOffset.x, y: this.start.y + this.startOffset.y};
this.endPt = {x: this.end.x + this.endOffset.x, y: this.end.y + this.endOffset.y};
if(this.end.type.type !== NodeType.DUMMY) {
// Get unit vector
var dn = Math.sqrt(Math.pow(this.endPt.x - this.startPt.x, 2) + Math.pow(this.endPt.y - this.startPt.y, 2));
this.dx = ((this.end.x - this.start.x) / dn);
this.dy = ((this.end.y - this.start.y) / dn);
// Pad along unit vector direction
this.startPt.x += this.startPadding * this.dx;
this.startPt.y += this.startPadding * this.dy;
this.endPt.x -= this.endPadding * this.dx;
this.endPt.y -= this.endPadding * this.dy;
// Account for two edges between the same nodes
this.dirOffset = (this.direction === FlowEdge.STD) ? 0 : 12;
this.startPt.x += this.dy * this.dirOffset;
this.startPt.y -= this.dx * this.dirOffset;
this.endPt.x += this.dy * this.dirOffset;
this.endPt.y -= this.dx * this.dirOffset;
}
// Create the points array that will be returned from calls to getPath()
this.points = [];
this.points.push(this.startPt);
this.points.push(this.endPt);
};
FlowEdge.prototype.SetDataItem = function(key, value) {
if(this.DataItems.hasOwnProperty(key)) {
var item = this.DataItems[key];
// Basic validation
if(typeof value !== item.type) {
console.error("\"" + key + "\" can only be set with values of type \"" + item.type + "\"");
return false;
}
var old = item.value;
// Advanced validation
if(item.hasOwnProperty("validator")) {
var name = item.validator;
if (!fv.App.Validate(name, old, value)) {
var invalid = value + " is not a valid value for \"" + key + "\".";
var issue = " It violates validator \"" + name + "\"";
console.error(invalid + issue);
return false;
}
}
item.value = value;
fv.emit('edge-data-changed', this, item, old);
return true;
} else {
console.error("There is not a data item with the key \"" + key + "\"!");
return false;
}
};
FlowEdge.prototype.GetDataItemValue = function(key) {
if (this.DataItems.hasOwnProperty(key)) {
return this.DataItems[key].value;
}
return null;
};
Creates a list of points that constitute the path of the body of the edge.
FlowEdge.prototype.getPath = function() {
return this.points;
};
Returns the current SVG path information for this edge.
FlowEdge.prototype.getSvgPath = function() {
return this._svgpath;
};
Option name | Type | Description |
---|---|---|
path | string | SVG path string |
Sets the SVG path information for this edge.
FlowEdge.prototype.setSvgPath = function(path) {
this._svgpath = path;
};
Returns the path for drawing the arrow head at the front of the edge.
FlowEdge.prototype.getForwardTip = function() {
var insetX = this.endPt.x - arrHeight * this.dx;
var insetY = this.endPt.y - arrHeight * this.dy;
return [{
x: insetX + this.dy * arrWidth,
y: insetY - this.dx * arrWidth
}, {
x: this.endPt.x,
y: this.endPt.y
}, {
x: insetX - this.dy * arrWidth,
y: insetY + this.dx * arrWidth
}];
};