js-mindmap PlugIn

js-mindmap PlugIn

Hey Guys,

I stumbled upon this mindmap-PlugIn for jquery by Kenneth Kufluk:  http://code.google.com/p/js-mindmap/
Since it is published under the MIT/GPL-License, I figured it is okay for me to make additional modifications. I already tried to contact the author of the script, but without access. Maybe I can get in touch with him at some point to share my modifications with him.

So far I'm on my own which brings me to my specific problem. I'm trying to add additional nodes to the starting-point mindmap. So far, you can see the root-node and any sub-node that is connected to it. From these sub-nodes additional lines are derived that indicate more deeper-leveled sub-nodes (these can be made visible by clicking on one the sub-nodes on the second level).

I would like to add a parameter that specifies how deep / how many levels are show in the initial mindmap instead of just two levels. I don't expect any of you to rewrite the code for me, as I am the one who wants to modify the script. But at this point I'm having a hard time figuring out how to even add those third-level nodes to the end of the thin lines.

Maybe some of you could take a look at the script and get me started. In return, of course, I will publish my modification here and give it to the developer.

Thanks in advance
Tim

------------------------------
js-mindmap.0.3.js
  1. // js-mindmap
  2. // (c) Kenneth Kufluk 2008/09 http://kenneth.kufluk.com/
  3. // ported to jQuery plugin by Mike Trpcic http://www.mtrpcic.net/
  4. // GPLv3 http://www.gnu.org/licenses/gpl.html

  6. // TODO:
  7. // Area restriction
  8. // Exploration (showProgressive)
  9. // Hidden children should not be bounded
  10. // Layout children in circles
  11. // Children of a node should not be able to push a sister of that node - but they should be able to feel its effect
  12. // x - Multiple Parents
  13. // Add/Edit nodes
  14. // When activity stops, stop the loop (for performance)
  15. // Resize event


  18. (function($){

  20.     $.fn.mindmap = function(options) {
  21.         // Define default settings.
  22.         var options = $.extend({
  23.             attract: 7,
  24.             repulse: 1,
  25.             damping: 0.66,
  26.             timeperiod: 3,
  27.             wallrepulse: 0.1,
  28.             mapArea: {
  29.                 x:-1,
  30.                 y:-1
  31.             },
  32.             canvasError: 'alert',
  33.             minSpeed: 0.05,
  34.             maxForce: 0.1,
  35.             showSublines: true,
  36.             updateIterationCount: 20,
  37.             showProgressive: true
  38.         },options);
  39.     
  40.         // Define all Node related functions.
  41.         function Node(obj, index, el, parent, active){
  42.             this.obj = obj;
  43.          this.el = $(el);
  44.          this.el.mindMapObj = this;
  45.             if (active) {
  46.                 obj.activeNode = this;
  47.                 $(this.el).addClass('active');
  48.             }
  49.             this.parent = parent;
  50.             this.el.addClass('node');
  51.             this.index = index;
  52.             this.visible = true;
  53.             this.hasLayout = true;
  54.             this.x = Math.random()+(options.mapArea.x/2);
  55.             this.y = Math.random()+(options.mapArea.y/2);
  56.          this.el.css('left', this.x + "px");
  57.          this.el.css('top', this.y + "px");
  58.             this.dx = 0;
  59.             this.dy = 0;
  60.             this.count = 0;
  61.             
  62.             this.el.draggable();
  63.             this.el.css('position','absolute');        
  64.     
  65.             if (this.el.children()[0]) {
  66.                 if (this.el.children()[0].tagName == 'A') this.el.href = this.el.children().href;
  67.             }
  69.             var thisnode = this;
  70.             this.el.click(function(){
  71.  //               console.log(obj.activeNode);
  72.                  location.href=this.el.children()[0].tagName;

  74.                 if (obj.activeNode) obj.activeNode.el.removeClass('active');
  75.                 obj.activeNode = thisnode;
  76.                 obj.activeNode.el.addClass('active');
  77.                 return false;
  78.             });
  79.     
  80.             this.el.dblclick(function(){
  81.                 location.href=this.el.children()[0].tagName;
  82.                 return false;
  83.             });
  84.         }
  85.     
  86.         //TODO: Write this method!
  87.         Node.prototype.layOutChildren = function(){
  88.         //show my child nodes in an equally spaced group around myself, instead of placing them randomly
  89.         }
  90.     
  91.         Node.prototype.getForceVector = function(){
  92.             var fx = 0;
  93.             var fy = 0;
  94.             
  95.             var nodes = this.obj.nodes;
  96.             var lines = this.obj.lines;

  98.             for (var i = 0; i < nodes.length; i++) {
  99.                 if (i == this.index) continue;
  100.                 if ((options.showSublines && !nodes[i].hasLayout) || (!options.showSublines && !nodes[i].visible)) continue;
  101.                 // Repulsive force (coulomb's law)
  102.                 var x1 = (nodes[i].x - this.x);
  103.                 var y1 = (nodes[i].y - this.y);
  104.                 //adjust for variable node size
  105.     // var nodewidths = (($(nodes[i]).width() + $(this.el).width())/2);
  106.                 var xsign = x1 / Math.abs(x1);
  107.                 var ysign = y1 / Math.abs(y1);
  108.                 var dist = Math.sqrt((x1 * x1) + (y1 * y1));
  109.                 var theta = Math.atan(y1 / x1);
  110.                 if (x1 == 0) {
  111.                     theta = Math.PI / 2;
  112.                     xsign = 0;
  113.                 }
  114.                 // force is based on radial distance
  115.                 var myrepulse = options.repulse;
  116.                 if (this.parent==nodes[i]) myrepulse=myrepulse*10;  //parents stand further away
  117.                 var f = (myrepulse * 500) / (dist * dist);
  118.                 if (Math.abs(dist) < 500) {
  119.                     fx += -f * Math.cos(theta) * xsign;
  120.                     fy += -f * Math.sin(theta) * xsign;
  121.                 }
  122.             }
  123.             // add repulsive force of the "walls"
  124.             //left wall
  125.             var xdist = this.x + $(this.el).width();
  126.             var f = (options.wallrepulse * 500) / (xdist * xdist);
  127.             fx += Math.min(2, f);
  128.             //right wall
  129.             var rightdist = (options.mapArea.x - xdist);
  130.             var f = -(options.wallrepulse * 500) / (rightdist * rightdist);
  131.             fx += Math.max(-2, f);
  132.             //top wall
  133.             var f = (options.wallrepulse * 500) / (this.y * this.y);
  134.             fy += Math.min(2, f);
  135.             //botttom wall
  136.             var bottomdist = (options.mapArea.y - this.y);
  137.             var f = -(options.wallrepulse * 500) / (bottomdist * bottomdist);
  138.             fy += Math.max(-2, f);
  139.     
  140.             // for each line, of which I'm a part, add an attractive force.
  141.             for (var i = 0; i < lines.length; i++) {
  142.                 var otherend = null;
  143.                 if (lines[i].start.index == this.index) {
  144.                     otherend = lines[i].end;
  145.                 } else if (lines[i].end.index == this.index) {
  146.                     otherend = lines[i].start;
  147.                 } else continue;
  148.                 // Attractive force (hooke's law)
  149.                 var x1 = (otherend.x - this.x);
  150.                 var y1 = (otherend.y - this.y);
  151.                 var dist = Math.sqrt((x1 * x1) + (y1 * y1));
  152.                 var xsign = x1 / Math.abs(x1);
  153.                 var theta = Math.atan(y1 / x1);
  154.                 if (x1==0) {
  155.                     theta = Math.PI / 2;
  156.                     xsign = 0;
  157.                 }
  158.                 // force is based on radial distance
  159.                 var f = (options.attract * dist) / 10000;
  160.                 if (Math.abs(dist) > 0) {
  161.                     fx += f * Math.cos(theta) * xsign;
  162.                     fy += f * Math.sin(theta) * xsign;
  163.                 }
  164.             }
  165.     
  166.             // if I'm active, attract me to the centre of the area
  167.             if (this.obj.activeNode === this) {
  168.                 // Attractive force (hooke's law)
  169.                 var otherend = options.mapArea;
  170.                 var x1 = ((otherend.x / 2) - 100 - this.x);
  171.                 var y1 = ((otherend.y / 2) - this.y);
  172.                 var dist = Math.sqrt((x1 * x1) + (y1 * y1));
  173.                 var xsign = x1 / Math.abs(x1);
  174.                 var theta = Math.atan(y1 / x1);
  175.                 if (x1 == 0) {
  176.                     theta = Math.PI / 2;
  177.                     xsign = 0;
  178.                 }
  179.                 // force is based on radial distance
  180.                 var f = (0.1 * options.attract*dist) / 10000;
  181.                 if (Math.abs(dist) > 0) {
  182.                     fx += f * Math.cos(theta) * xsign;
  183.                     fy += f * Math.sin(theta) * xsign;
  184.                 }
  185.             }
  186.     
  187.             if (Math.abs(fx) > options.maxForce) fx = options.maxForce * (fx / Math.abs(fx));
  188.             if (Math.abs(fy) > options.maxForce) fy = options.maxForce * (fy / Math.abs(fy));
  189.             return {
  190.                 x: fx,
  191.                 y: fy
  192.             };
  193.         }
  194.     
  195.         Node.prototype.getSpeedVector = function(){
  196.             return {
  197.                 x:this.dx,
  198.                 y:this.dy
  199.             };
  200.         }
  201.     
  202.         Node.prototype.updatePosition = function(){
  203.             if ($(this.el).hasClass("ui-draggable-dragging")) {
  204.          this.x = parseInt(this.el.css('left')) + ($(this.el).width() / 2);
  205.          this.y = parseInt(this.el.css('top')) + ($(this.el).height() / 2);
  206.          this.dx = 0;
  207.          this.dy = 0;
  208.          return;
  209.          }
  210.             
  211.             
  212.             //apply accelerations
  213.             var forces = this.getForceVector();
  214.             // console.log(forces.x);
  215.             this.dx += forces.x * options.timeperiod;
  216.             this.dy += forces.y * options.timeperiod;
  217.     
  218.             //TODO: CAP THE FORCES
  219.     
  220.             // this.el.childNodes[0].innerHTML = parseInt(this.dx)+' '+parseInt(this.dy);
  221.             this.dx = this.dx * options.damping;
  222.             this.dy = this.dy * options.damping;
  223.     
  224.             //ADD MINIMUM SPEEDS
  225.             if (Math.abs(this.dx) < options.minSpeed) this.dx = 0;
  226.             if (Math.abs(this.dy) < options.minSpeed) this.dy = 0;
  227.             //apply velocity vector
  228.             this.x += this.dx * options.timeperiod;
  229.             this.y += this.dy * options.timeperiod;
  230.             this.x = Math.min(options.mapArea.x,Math.max(1,this.x));
  231.             this.y = Math.min(options.mapArea.y,Math.max(1,this.y));
  232.             //only update the display after the thousanth iteration, so it's not too wild at the start
  233.             this.count++;
  234.             // if (this.count<updateDisplayAfterNthIteration) return;
  235.             // display
  236.          var showx = this.x - ($(this.el).width() / 2);
  237.          var showy = this.y - ($(this.el).height() / 2);
  238.          this.el.css('left', showx + "px");
  239.          this.el.css('top', showy + "px");
  240.         }
  241.     
  242.         // Define all Line related functions.
  243.         function Line(obj, index, startNode, finNode){
  244.             this.obj = obj;

  246.             this.index = index;
  247.             this.start = startNode;
  248.             this.colour = "blue";
  249.             this.size = "thick";
  250.             this.end = finNode;
  251.             this.count = 0;
  252.         }
  253.     
  254.         Line.prototype.updatePosition = function(){
  255.             if (options.showSublines && (!this.start.hasLayout || !this.end.hasLayout)) return;
  256.             if (!options.showSublines && (!this.start.visible || !this.end.visible)) return;
  257.             if (this.start.visible && this.end.visible) this.size = "thick";
  258.             else this.size = "thin";
  259.             if (this.obj.activeNode.parent == this.start || this.obj.activeNode.parent == this.end) this.colour = "red";
  260.             else this.colour = "blue";
  261.             switch (this.colour) {
  262.                 case "red":
  263.                     this.obj.ctx.strokeStyle = "rgb(100, 0, 0)";
  264.                     break;
  265.                 case "blue":
  266.                     this.obj.ctx.strokeStyle = "rgba(0, 0, 100, 0.2)";
  267.                     break;
  268.             }
  269.             switch (this.size) {
  270.                 case "thick":
  271.                     this.obj.ctx.lineWidth = "3";
  272.                     break;
  273.                 case "thin":
  274.                     this.obj.ctx.lineWidth = "1";
  275.                     break;
  276.             }
  277.             this.obj.ctx.beginPath();
  278.             this.obj.ctx.moveTo(this.start.x, this.start.y);
  279.             this.obj.ctx.quadraticCurveTo(((this.start.x + this.end.x) / 1.8),((this.start.y + this.end.y) / 2.4), this.end.x, this.end.y);
  280.             this.obj.ctx.lineTo(this.end.x, this.end.y);
  281.             this.obj.ctx.stroke();
  282.             this.obj.ctx.closePath();
  283.         }
  284.     
  285.         // Main Running Loop
  286.         var Loop = function (obj){
  287.             var nodes = obj.nodes;
  288.             var lines = obj.lines;
  289.             var canvas = $('canvas', obj).get(0);
  290.             if (typeof G_vmlCanvasManager != 'undefined') canvas=G_vmlCanvasManager.initElement(canvas);
  291.             obj.ctx = canvas.getContext("2d");


  294.             obj.ctx.clearRect(0, 0, options.mapArea.x, options.mapArea.y);
  295.             //update node positions
  296.             for (var i = 0; i < nodes.length; i++) {
  297.                 //TODO: replace this temporary idea
  298.                 var childActive = false;
  299.                 var currentNode = obj.activeNode;
  300.                 while (currentNode.parent && (currentNode = currentNode.parent)) {
  301.                     if (currentNode == nodes[i]) childActive = true;
  302.                 }
  303.                 if (childActive || obj.activeNode == nodes[i] || obj.activeNode == nodes[i].parent) {
  304.                     nodes[i].visible = true;
  305.                     nodes[i].hasLayout = true;
  306.                 } else {
  307.                     nodes[i].visible = false;
  308.                     if (nodes[i].parent && nodes[i].parent.parent && nodes[i].parent.parent == obj.activeNode) {
  309.                         nodes[i].hasLayout = true;
  310.                     } else {
  311.                         nodes[i].hasLayout = false;
  312.                     }
  313.                     if (!options.showProgressive) {
  314.                         nodes[i].visible = true;
  315.                         nodes[i].hasLayout = true;
  316.                     }
  317.                 }
  318.                 if (nodes[i].visible) {
  319.                     nodes[i].el.show();
  320.                 } else {
  321.                     nodes[i].el.hide();
  322.                 }
  323.                 if ((options.showSublines && !nodes[i].hasLayout) || (!options.showSublines && !nodes[i].visible)) continue;
  324.                 nodes[i].updatePosition();
  325.             }
  326.             //display lines
  327.             for (var i = 0; i < lines.length; i++) {
  328.                 lines[i].updatePosition();
  329.             }
  330.             
  331.         }
  332.     
  333.         // This Helper adds the UL into the mindmap
  334.         function addList(obj, ul, parent){
  335.             var nodes = obj.nodes;
  336.             var lines = obj.lines;
  337.             
  338.             // For each LI in this list
  339.             $('>li', ul).each(function(index) {

  341.                 // Add as a new Node
  342.                 var nodeno = nodes.length;
  343.                 nodes[nodeno] = new Node(obj, nodeno, this, parent);
  344. //                console.log(this);
  345.                 this.mindmapNode = nodes[nodeno];
  346.                 
  347.                 // Add subtrees
  348.                 $('>ul', this).each(function(index) {
  349.                     addList(obj, this, nodes[nodeno]);
  353.                 });
  354.                 
  355.                 // Add Relationship between Nodes (draw a line)
  356.                 if (parent != null) {
  357.                     var lineno = lines.length;
  358.                     lines[lineno] = new Line(obj, lineno, nodes[nodeno], parent);
  359.                 }
  360.             });
  361.         }
  362.     
  363.         
  364.         return this.each(function() {

  366.             var nodes = this.nodes = new Array();
  367.             var lines = this.lines = new Array();
  368.             this.activeNode = null;
  369.         
  370.             if (typeof window.CanvasRenderingContext2D == 'undefined' && typeof G_vmlCanvasManager == 'undefined') {
  371.                 if (options.canvasError === "alert"){
  372.                     alert("ExCanvas was not properly loaded.");
  373.                 } else if (options.canvasError === "console"){
  374.                     console.log("ExCanvas was not properly loaded.");
  375.                 } else {
  376.                     options.canvasError();
  377.                 }
  378.             } else {
  379.                 //CANVAS
  380.                 if (options.mapArea.x==-1) {
  381.                     options.mapArea.x = $(window).width();
  382.                 }
  383.                 if (options.mapArea.y==-1) {
  384.                     options.mapArea.y = $(window).height();
  385.                 }
  386.                 //create element
  387.                 this.canvas = $('<canvas width="'+options.mapArea.x+'" height="'+options.mapArea.y+'" style="position:absolute;left:0;top:0;"></canvas>');
  388.                 //add to document
  389.                 $(this).append(this.canvas);
  390.                 
  391.                 //NODES
  392.                 // create root node
  393.                 var myroot = $("a", this).get(0);
  394.                 var nodeno = nodes.length;
  395.                 nodes[nodeno] = new Node(this, nodeno, myroot, null, true);
  396.     
  397.                 // build the tree
  398.                 var myul = $("ul", this).get(0);
  399.                 addList(this, myul, nodes[nodeno]);

  401.                 // Flatten LIs
  402.                 $('li', myul).each(function(index) {
  403.                     // Move each LI to the root of the UL
  404.                     // We do this because of the cascading positioning of LIs
  405.                     // If I put an LI at (10, 10), all child UL>LIs will also be offset
  406.                     // so we move everything into the root UL
  407.                     $(myul).append(this);

  411.                 });

  413.                 // Add additional lines described by rel="id id id"
  414.                 var obj = this;
  415.                 $('li>a[rel]',myul).each(function() {
  416.                     var rel = $(this).attr('rel');
  417.                     var currentNode = $(this).parent()[0].mindmapNode;
  418.                     $.each(rel.split(' '), function(index) {
  419. //                        console.log(this);
  420.                         var parentNode = $('#'+this).parent()[0].mindmapNode;
  421.                         var lineno = lines.length;
  422.                         lines[lineno] = new Line(obj, lineno, currentNode, parentNode);
  423.                         
  424.                     });
  425.                 });


  428.                 
  429.                 //LOOP
  430.                 // Run the update loop on this object
  431.                 var loopCaller = (function(obj) {
  432.                     return function(){
  433.                         Loop(obj);
  434.                     };
  435.                 })(this);
  436.                 //setTimeout(loopCaller, 1);
  437.                 setInterval(loopCaller, 1);
  438.     
  439.                 // Finally add a class to the object, so that styles can be applied
  440.                 $(this).addClass('js-mindmap-active');
  441.     
  442.             }
  443.         });
  444.     };
  445. })(jQuery);