if (!canvas.getContext) {
return;
}
if (typeof config === "undefined") {
config = {
unitSize: 20,
lineWidth: 3,
nodeRadius: 4
};
}
var flows = [];
var graphList = [];
var ctx = canvas.getContext("2d");
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
var ratio = devicePixelRatio / backingStoreRatio;
var init = function () {
var maxWidth = 0;
var i;
var l = rawGraphList.length;
var row;
var midStr;
for (i = 0; i < l; i++) {
midStr = rawGraphList[i].replace(/\s+/g, " ").replace(/^\s+|\s+$/g, "");
maxWidth = Math.max(midStr.replace(/(\_|\s)/g, "").length, maxWidth);
row = midStr.split("");
graphList.unshift(row);
}
var width = maxWidth * config.unitSize;
var height = graphList.length * config.unitSize;
canvas.width = width * ratio;
canvas.height = height * ratio;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
ctx.lineWidth = config.lineWidth;
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.scale(ratio, ratio);
};
var genRandomStr = function () {
var chars = "0123456789ABCDEF";
var stringLength = 6;
var randomString = '', rnum, i;
for (i = 0; i < stringLength; i++) {
rnum = Math.floor(Math.random() * chars.length);
randomString += chars.substring(rnum, rnum + 1);
}
return randomString;
};
var findFlow = function (id) {
var i = flows.length;
while (i-- && flows[i].id !== id) {}
return i;
};
var findColomn = function (symbol, row) {
var i = row.length;
while (i-- && row[i] !== symbol) {}
return i;
};
var findBranchOut = function (row) {
if (!row) {
return -1
}
var i = row.length;
while (i-- &&
!(row[i - 1] && row[i] === "/" && row[i - 1] === "|") &&
!(row[i - 2] && row[i] === "_" && row[i - 2] === "|")) {}
return i;
}
var genNewFlow = function () {
var newId;
do {
newId = genRandomStr();
} while (findFlow(newId) !== -1);
return {id:newId, color:"#" + newId};
};
//draw method
var drawLineRight = function (x, y, color) {
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x, y + config.unitSize / 2);
ctx.lineTo(x + config.unitSize, y + config.unitSize / 2);
ctx.stroke();
};
var drawLineUp = function (x, y, color) {
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x, y + config.unitSize / 2);
ctx.lineTo(x, y - config.unitSize / 2);
ctx.stroke();
};
var drawNode = function (x, y, color) {
ctx.strokeStyle = color;
drawLineUp(x, y, color);
ctx.beginPath();
ctx.arc(x, y, config.nodeRadius, 0, Math.PI * 2, true);
ctx.fill();
};
var drawLineIn = function (x, y, color) {
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x + config.unitSize, y + config.unitSize / 2);
ctx.lineTo(x, y - config.unitSize / 2);
ctx.stroke();
};
var drawLineOut = function (x, y, color) {
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x, y + config.unitSize / 2);
ctx.lineTo(x + config.unitSize, y - config.unitSize / 2);
ctx.stroke();
};
var draw = function (graphList) {
var colomn, colomnIndex, prevColomn, condenseIndex;
var x, y;
var color;
var nodePos, outPos;
var tempFlow;
var prevRowLength = 0;
var flowSwapPos = -1;
var lastLinePos;
var i, k, l;
var condenseCurrentLength, condensePrevLength = 0, condenseNextLength = 0;
var inlineIntersect = false;
//initiate for first row
for (i = 0, l = graphList[0].length; i < l; i++) {
if (graphList[0][i] !== "_" && graphList[0][i] !== " ") {
flows.push(genNewFlow());
}
}
y = (canvas.height / ratio) - config.unitSize * 0.5;
//iterate
for (i = 0, l = graphList.length; i < l; i++) {
x = config.unitSize * 0.5;