/***
|''Name''|GraphPlugin|
|''Description''|Display dot graphs|
|''Version''|0.12.1|
|''Status''|beta|
|''License''|[[BSD open source license]] from [[IDEIA|http://www.ideia.fr]]|
|''~CoreVersion''|2.4.0|
|''Keywords''|visualization, graph, diagram, forcedirected, animated|
!Usage
Draw a graph
{{{
<<graph dimX dimY nolinks backlinks strict tags:tags anim:timing filter:tags start:tiddlers plot:tiddler>>
}}}
Options
* ''nolinks''  : do not follow forward links and tags
* ''nogroups'' : do not treat "tag" links as group links
* ''backlinks'' : follow reverse links
* ''strict'' : exclude all node not tagged with "tags" (otherwise direct links are included)
* ''notags'' : ignore tag links
* ''fields'' : read from fields instead of slices
* ''anim'':animate graph for some time
* ''tags'' : choose tiddlers with specified tags
* ''filter'' : exclude those tiddler with specified tags
* ''start'' : check also from these tiddler (+ thier direct links)
* ''plot'' : use the text of this tiddler to draw a graph from the text and not the tiddlers node, annot, link, type in an array. '->' for direct link, '<-' for backlinks and ':>' or ':<' for tag/group link.
Change node properties with slices
* ''color'' : graph.fillStyle, graph.strokeStyle, 
* ''position'' : graph.X, graph.Y, graph.repulse
* ''display'': graph.title, graph.subTitle, graph.ignore
* ''life'' : graph.endLife, graph.startLife
In GraphConfig, you can configure style for links by combining
* ''link type'': direct, titled, bracket, back, tag
* ''display'' : fillStyle, strokeStyle, lineWidth, margin, rounded
!!History
|15.01.09| 0.1.0|Initial release, draw graph with anotated nodes from tiddler|
|16.01.09| 0.2.0|Add animation (the 3 parameter is the number of steps calculated)|
|19.01.09| 0.3.0|Added ability to move nodes, graph dynamically updated|
|22.01.09| 0.4.0|Support of multiple tags and filter also|
|22.01.09| 0.5.0|Can set color for node and links, depending of it's type|
|23.01.09| 0.6.0|Annotated links can be overiden by a tiddler|
|23.01.09| 0.6.1|Fix a bug : now start can have multiple tiddlers|
|23.01.09| 0.7.0|Now a new slice graph.subtitle|
|28.01.09| 0.8.0|Add preliminary time support in graph : graph.endLife|
|02.02.09| 0.8.1|Add "strict" filter for some graph displaying unwanted nodes|
|03.02.09| 0.8.2|Add graph.ignore to filter some individual links in graph|
|04.02.09| 0.8.3|Initial position of node is not 0 any more, so that no more random graphs|
|04.02.09| 0.9.0|Option to read from slices or from fields|
|05.02.09| 0.9.1|Add : graph.startLife|
|05.02.09| 0.9.2|Add : graph.repulse : so that nodes can be more isolated (useful for anotated links|
|13.02.09| 0.9.3|Links can be individually colored in their tiddler if it exist, rather than in GraphConfig|
|20.02.09| 0.10.0|Add : rounded rectangle + collapsible text for links|
|13.04.09| 0.11.0|Add direct graph plotting from table syntax|
|13.04.09| 0.12.0|Add group node support (eq tag link = group link)|
|13.04.09| 0.12.0|Add 'dot' syntax to direct graph (it means that it can read plain text to draw graphs|
!Known BUGS
* In some cases when every node in the graph have exactly the same tags, it can create a NaN anomaly. To bypass it, just change some tags.
* the new functionnalité collapsible links is not yet compatible with "full links" ... full links are links described in a tiddler
!Code
***/
//{{{
if(!version.extensions.GraphPlugin) {
version.extensions.GraphPlugin = {installed:true};

config.macros.graph = {};

config.macros.graph.handler = function(place,macroName,params,wikifier,paramString,tiddler)
{
	var box = createTiddlyElement(place,"div",null,"graphBox",'');
	box.title = "Graph";
	box.id = "graphBox";
	box.style.position = "relative";
	var canvas = document.createElement("canvas");
	canvas.width = params[0];
	canvas.height = params[1];
	box.appendChild(canvas);
	var ctx = canvas.getContext("2d");
	var timer = document.createElement("div");
	box.appendChild(timer);

	var parameters = paramString.parseParams("noname",null,true);
	var includeTags = parameters[0]["tags"]?parameters[0]["tags"][0].split(","):[];
	var startTiddlers = parameters[0]["start"]?parameters[0]["start"][0].split(","):[];
	var plotTiddlers = parameters[0]["plot"]?parameters[0]["plot"][0].split(","):[];
	var excludeTags = parameters[0]["filter"]?parameters[0]["filter"][0].split(","):[];
	var anim = parameters[0]["anim"]?parseInt(parameters[0]["anim"][0]):0;
	var results = [];
	if (parameters[0]["start"]) {
		for (var k=0; k<startTiddlers.length; k++)
			results.push( store.getTiddler(startTiddlers[k]) );
	} else store.forEachTiddler(function(title,tiddler) {
		if (tiddler.tags.containsAny(includeTags) 
		 && !tiddler.tags.containsAny(excludeTags))
			results.push(tiddler);
		});

var g = new Graph(box);
g.useSlice = parameters[0]["noname"].indexOf("fields") == -1;
g.useGroup = parameters[0]["noname"].indexOf("nogroups") == -1;
var strict = parameters[0]["noname"].indexOf("strict") != -1;
var waitingList = [];
var time=0;

	if (parameters[0]["plot"]) {
		for (var k=0; k<plotTiddlers.length; k++)
			plotTiddler( store.getTiddler(plotTiddlers[k]) );
	}

for (var i=0; i<results.length; i++)
{
	if (!g.getValue(results[i].title, "graph.startLife"))
		g.addNode(results[i].title); 
	else
		waitingList.push(results[i]);
}
relink();

function plotGetTableLine(line) {
     params = line.split('|');
     node = params[1];
     if (!node) return;
     annot = params[2];
     link = params[3];
     linktype = params[4]?params[4]:"plot";
     if (link)
       g.addEdge(node, link,{type:linktype, text:annot?annot:""})
     else
       g.addNode(node, annot); 
}

function plotGetWikiLinks(node, line, mode) {
        // mode = 0 : direct link, mode = 1 : backlink, mode = 2, group link
	node = node.replace(/ /g,'').replace(/^\*/g, '').replace(/\'/g, '').replace(/\[/g,'').replace(/\]/g,'');
	var tiddlerLinkRegExp = config.textPrimitives.tiddlerForcedLinkRegExp;
        t=1;
function addInternalLink(link, annot) {
               switch (mode) {
                       case '->' : g.addEdge(node, link,{type:"plot", text:annot}); break;
                       case '<-' : g.addEdge(link, node,{type:"plot", text:annot}); break;
                       case ':>' : g.addEdge(node, link,{type:"tag", text:annot}); break;
                       case ':<' : g.addEdge(link, node,{type:"tag", text:annot}); break;
              }
}

	//tiddlerLinkRegExp.lastIndex = 0;
	var formatMatch = tiddlerLinkRegExp.exec(line);
	while(formatMatch) {
		//var lastIndex = tiddlerLinkRegExp.lastIndex;
		if(formatMatch[2-t] && !config.formatterHelpers.isExternalLink(formatMatch[3-t])) // titledBrackettedLink
                        addInternalLink(formatMatch[3-t], formatMatch[2-t], node, mode)
		else if(formatMatch[4-t] && formatMatch[4-t] != this.title) // brackettedLink
			addInternalLink(formatMatch[4-t], "", node, mode);
		//tiddlerLinkRegExp.lastIndex = lastIndex;
		formatMatch = tiddlerLinkRegExp.exec(line);
	}

}

function plotTiddler(tiddler) {
  var lines = new Array();   
  lines = tiddler.text.split("\n");
  for (var i=0; i < lines.length; i++) {
    var line = lines[i]; 
    if (line == "") continue;
    if (line[0] == "|") plotGetTableLine(line);
    var n = line.indexOf("->");
    if (n != -1) plotGetWikiLinks(line.slice(0, n), line.slice(n+2), '->');
    n = line.indexOf("<-");
    if (n != -1) plotGetWikiLinks(line.slice(0, n), line.slice(n+2), '<-');
    n = line.indexOf(":>");
    if (n != -1) plotGetWikiLinks(line.slice(0, n), line.slice(n+2), ':>');
    n = line.indexOf(":<");
    if (n != -1) plotGetWikiLinks(line.slice(0, n), line.slice(n+2), ':<');
  }
}

function relink() {
	for (var i=0; i<results.length; i++)
	{
		if (!g.getValue(results[i].title, "graph.startLife"))
			addLinks(results[i]); 
	}
}

function tiddlerIndexOf(a, t) {
	for (var i=0; i<a.length; i++)
		if (a[i].title == t) return i;
	return -1;
}

function addLivingEdge(ta, tb, info) {
	if (!g.getValue(tb, "graph.startLife") )
		g.addEdge(ta, tb, info);
	else if (time >= g.getValue(tb, "graph.startLife" ))
		g.addEdge(ta, tb, info);
}

function addLinks(ta) {
	var ignoreList = g.getValue(ta.title, "graph.ignore");
	ignoreList = ignoreList ? ignoreList.readBracketedList():[];

	if (parameters[0]["noname"].indexOf("notags") == -1) {
		for (var j=0; j<results.length; j++)  {
			var tb = results[j];
			if (ignoreList.contains(tb.title)) continue;
			if ( ta.tags.contains(tb.title) ) 
			addLivingEdge(ta.title, tb.title, {type:"tag", text:""});
		}
	}
	if (parameters[0]["noname"].indexOf("backlinks") != -1) {
		var references = store.getReferringTiddlers(ta.title);
		for(var r=0; r<references.length; r++) {
			if(references[r].title != ta.title
			 && !references[r].tags.contains("excludeLists")
			 && (tiddlerIndexOf(results, references[r].title) != -1 || !strict) 
			 && (!ignoreList.contains(references[r].title)) )
				addLivingEdge(ta.title, references[r].title, {type:"back", text:""});
		}
	}
	if (parameters[0]["noname"].indexOf("nolinks") == -1) {
		var links = ta.annotatedLinks();
		for (var r=0; r<links.length; r++) {
			if ( (tiddlerIndexOf(results, links[r].link) != -1 || !strict)
			 && !ignoreList.contains(links[r].link))
				addLivingEdge(ta.title, links[r].link, links[r].info);
		}
	}

}

var layouter = new Graph.Layout.Spring(g);
layouter.prepare();
var renderer = new Graph.Renderer.Basic(canvas, g);
var interval = 0; 
if (anim != 0)
	interval = setInterval(animate, 250);
else
{
	layouter.layout();
	renderer.draw();
}

function animate()
{
	timer.innerHTML = "time :"+time;
	if (isdrag) {
		elementToMove.style.left = newElementX + 'px';
		elementToMove.style.top  = newElementY + 'px';
		layouter.reverse(renderer.factorX, renderer.factorY);
	}
	for (var i=waitingList.length-1; i>=0; i--) {
		var current = waitingList[i];
		if (time >= g.getValue(current.title, "graph.startLife")) {
			g.addNode(current.title);
			relink();
			layouter.layoutPrepareLastNode();
			waitingList.splice(i,1);
		}
	}
	g.animate(time);
	layouter.step();
	renderer.draw();
	time++;
	if (time==anim || time > 500) clearInterval(interval);
}


var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;					// this flag indicates that the mouse movement is actually a drag.
var mouseStartX, mouseStartY;		// mouse position when drag starts
var elementStartX, elementStartY;	// element position when drag starts
var newElementX, newElementY;
var elementToMove;
var bounds = new Array(4);

function movemouse(e)
{
	if (isdrag)
	{
		var currentMouseX = nn6 ? e.clientX : event.clientX;
		var currentMouseY = nn6 ? e.clientY : event.clientY;
		newElementX = elementStartX + currentMouseX - mouseStartX;
		newElementY = elementStartY + currentMouseY - mouseStartY;

		/*/ check bounds
		// note: the "-1" and "+1" is to avoid borders overlap
		if(newElementX < bounds[0])
			newElementX = bounds[0] + 1;
		if(newElementX + elementToMove.offsetWidth > bounds[2])
			newElementX = bounds[2] - elementToMove.offsetWidth - 1;
		if(newElementY < bounds[1])
			newElementY = bounds[1] + 1;
		if(newElementY + elementToMove.offsetHeight > bounds[3])
			newElementY = bounds[3] - elementToMove.offsetHeight - 1;*/
		
		// move element
		elementToMove.style.left = newElementX + 'px';
		elementToMove.style.top  = newElementY + 'px';
	
		elementToMove.style.right = null;
		elementToMove.style.bottom = null;

		layouter.reverse(renderer.factorX, renderer.factorY);
		
		return false;
	}
}

function startDrag(e) 
{	
	var eventSource = nn6 ? e.target : event.srcElement;
	if(eventSource.tagName == 'HTML')
		return;

	while (eventSource != document.body && !hasClass(eventSource, "draggable"))
	{  	
		eventSource = nn6 ? eventSource.parentNode : eventSource.parentElement;
	}

	// if a draggable element was found, calculate its actual position
	if (hasClass(eventSource, "draggable"))
	{
                time = 0;
		isdrag = true;
		elementToMove = eventSource;

		// set absolute positioning on the element		
		//elementToMove.style.position = "absolute";
				
		// calculate start point
		elementStartX = elementToMove.offsetLeft;
		elementStartY = elementToMove.offsetTop;
		
		// calculate mouse start point
		mouseStartX = nn6 ? e.clientX : event.clientX;
		mouseStartY = nn6 ? e.clientY : event.clientY;
		
		/*/ calculate bounds as left, top, width, height of the parent element
		if(getStyle(elementToMove.parentNode, "position") == 'absolute')
		{
			bounds[0] = 0;
			bounds[1] = 0;
		}
		else
		{
			bounds[0] = calculateOffsetLeft(elementToMove.parentNode);
			bounds[1] = calculateOffsetTop(elementToMove.parentNode);
		}
		bounds[2] = bounds[0] + elementToMove.parentNode.offsetWidth;
		bounds[3] = bounds[1] + elementToMove.parentNode.offsetHeight;*/
		
		document.onmousemove = movemouse;
		interval = setInterval(animate, 50);
				
		return false;
	}
}

function stopDrag(e)
{
	isdrag=false; 
	elementToMove = null;
	document.onmousemove = null;
	clearInterval(interval);
	animate(); // one last time to refresh correctly last mouse pos
}

document.onmousedown = startDrag;
document.onmouseup = stopDrag;


function hasClass(element, className)
{
	if(!element || !element.className)
		return false;
		
	var classes = element.className.split(' ');
	var i;
	for(i = 0; i < classes.length; i++)
		if(classes[i] == className)
			return true;
	return false;
}

function getStyle(node, styleProp)
{
	// if not an element
	if( node.nodeType != 1)
		return;
		
	var value;
	if (node.currentStyle)
	{
		// ie case
		styleProp = replaceDashWithCamelNotation(styleProp);
		value = node.currentStyle[styleProp];
	}
	else if (window.getComputedStyle)
	{
		// mozilla case
		value = document.defaultView.getComputedStyle(node, null).getPropertyValue(styleProp);
	}
	
	return value;
}

function replaceDashWithCamelNotation(value)
{
	var pos = value.indexOf('-');
	while(pos > 0 && value.length > pos + 1)
	{
		value = value.substring(0, pos) + value.substring(pos + 1, pos + 2).toUpperCase() + value.substring(pos + 2);
		pos = value.indexOf('-');
	}
	return value;
}

/*
 * This function calculates the absolute 'top' value for a html node
 */
function calculateOffsetTop(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) 
			curtop += obj.offsetTop
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

/*
 * This function calculates the absolute 'left' value for a html node
 */
function calculateOffsetLeft(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		curleft = obj.offsetLeft
		while (obj = obj.offsetParent) 
		{
			curleft += obj.offsetLeft;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}



}
}


//}}}
bag
plugins_public
created
Sat, 13 Feb 2010 13:52:05 GMT
creator
dirkjan
modified
Sat, 13 Feb 2010 13:52:05 GMT
modifier
dirkjan
tags
graph
creator
dirkjan