waTeim/bug.html

## bug.html
<!DOCTYPE html>
<html>
  <head>
    <title>reapply group example </title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <script src="javascripts/d3.v3.js"></script>
    <script src="javascripts/cola.v3.min.js"></script>
    <h1>Reapply Group Example</h1>
    <script>

    var color = d3.scale.category20();
    var margin = {top: 20, right: 120, bottom: 20, left: 120};
    var width = 1000 - margin.right - margin.left;
    var height = 600 - margin.top - margin.bottom;

    var svg = d3.select("body").append("svg")
     .attr("width", width)
     .attr("height", height);

    var cola = cola.d3adaptor()
     .linkDistance(80)
     .avoidOverlaps(true)
     .handleDisconnected(false)
     .size([width, height]);

    function groupUpdate(G)
    {
      var group = svg.selectAll(".group").data(G.graph.groups).enter();

      if(group != null)
        group
          .append("rect")
          .attr("rx", 8).attr("ry", 8)
          .attr("class", "group")
          .style("fill", function (d, i) { return color(i); });
    }

    function linkUpdate(G)
    {
      link = svg.selectAll(".link")
        .data(G.graph.links)
        .enter().append("line")
        .attr("class", "link");
    }

    function nodeUpdate(G,pad)
    {
      var node = svg.selectAll(".node")
        .data(G.graph.nodes)
        .enter().append("rect")
        .attr("class", "node")
        .attr("width", function (d) { return d.width - 2 * pad; })
        .attr("height", function (d) { return d.height - 2 * pad; })
        .attr("x", 5).attr("y", 5)
        .style("fill", function (d) { return color(G.graph.groups.length); })
        .call(cola.drag)
        .on('mouseup', function (d)
        {
          d.fixed = 0;
          if(G.shiftDown)
          {
            console.log(G.graph.groups[0].leaves);

            // uncomment for woraround to bug
            G.graph.groups[0].leaves = [0];

            cola
              .nodes(G.graph.nodes)
              .links(G.graph.links)
              .groups(G.graph.groups)
              .constraints(G.graph.constraints)
              .start(10,10,10);

              console.log("Groups:",G.graph.groups);

              groupUpdate(G);
              linkUpdate(G);
              nodeUpdate(G,pad);
              labelUpdate(G);
          }
          else cola.alpha(1); // fire it off again to satify gridify
        });

      node.append("title").text(function (d) { return d.name; });
    }

    function labelUpdate(G)
    {
      svg.selectAll(".label")
        .data(G.graph.nodes)
        .enter().append("text")
        .attr("class", "label")
        .text(function (d) { return d.name; })
        .call(cola.drag);
    }

    function colaUpdate(pad)
    {
      cola.on("tick", function ()
      {
        svg.selectAll(".link")
          .attr("x1", function (d) { return d.source.x; })
          .attr("y1", function (d) { return d.source.y; })
          .attr("x2", function (d) { return d.target.x; })
          .attr("y2", function (d) { return d.target.y; });

        svg.selectAll(".node")
          .attr("x", function (d) { return d.x - d.width / 2 + pad; })
          .attr("y", function (d) { return d.y - d.height / 2 + pad; });

        svg.selectAll(".group")
          .attr("x", function (d) { return d.bounds.x; })
          .attr("y", function (d) { return d.bounds.y; })
          .attr("width", function (d) { return d.bounds.width(); })
          .attr("height", function (d) { return d.bounds.height(); });

        svg.selectAll(".label")
          .attr("x", function (d) { return d.x; })
          .attr("y", function (d)
          {
            var h = this.getBBox().height;
            return d.y + h + 20;
          });
      });
    }

    var G = {};
    var graph = {};
    var pad = 20;

    graph.nodes = [
      { "name":"a","width":60,"height":40 },
      { "name":"b","width":60,"height":40 },
      { "name":"c","width":60,"height":40 }
    ];

    graph.links =  [
      { "source":0, "target":1 },
      { "source":0, "target":2 }
    ];

    graph.groups = [ { leaves:[0] } ];
    graph.constraints = [];
    graph.nodes.forEach(function (v) { v.width = v.height = 120; })
    graph.groups.forEach(function (g) { g.padding = 0.01; });
    G.graph = graph;

    cola
      .nodes(graph.nodes)
      .links(graph.links)
      .groups(graph.groups)
      .constraints(graph.constraints)
      .start(50,50,50,50);

    groupUpdate(G);
    linkUpdate(G);
    nodeUpdate(G,pad);
    labelUpdate(G);
    colaUpdate(pad);

    d3.select("body").on("keydown",function()
    {
       if(d3.event.keyIdentifier == 'Shift') G.shiftDown = true;
    });

    d3.select("body").on("keyup",function()
    {
       if(d3.event.keyIdentifier == 'Shift') G.shiftDown = false;
    });
    </script>
  </body>
</html
	<!DOCTYPE html>
	<html>
	<head>
	<title>reapply group example </title>
	<link rel='stylesheet' href='/stylesheets/style.css' />
	</head>
	<body>
	<script src="javascripts/d3.v3.js"></script>
	<script src="javascripts/cola.v3.min.js"></script>
	<h1>Reapply Group Example</h1>
	<script>

	var color = d3.scale.category20();
	var margin = {top: 20, right: 120, bottom: 20, left: 120};
	var width = 1000 - margin.right - margin.left;
	var height = 600 - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var cola = cola.d3adaptor()
	.linkDistance(80)
	.avoidOverlaps(true)
	.handleDisconnected(false)
	.size([width, height]);

	function groupUpdate(G)
	{
	var group = svg.selectAll(".group").data(G.graph.groups).enter();

	if(group != null)
	group
	.append("rect")
	.attr("rx", 8).attr("ry", 8)
	.attr("class", "group")
	.style("fill", function (d, i) { return color(i); });
	}

	function linkUpdate(G)
	{
	link = svg.selectAll(".link")
	.data(G.graph.links)
	.enter().append("line")
	.attr("class", "link");
	}

	function nodeUpdate(G,pad)
	{
	var node = svg.selectAll(".node")
	.data(G.graph.nodes)
	.enter().append("rect")
	.attr("class", "node")
	.attr("width", function (d) { return d.width - 2 * pad; })
	.attr("height", function (d) { return d.height - 2 * pad; })
	.attr("x", 5).attr("y", 5)
	.style("fill", function (d) { return color(G.graph.groups.length); })
	.call(cola.drag)
	.on('mouseup', function (d)
	{
	d.fixed = 0;
	if(G.shiftDown)
	{
	console.log(G.graph.groups[0].leaves);

	// uncomment for woraround to bug
	G.graph.groups[0].leaves = [0];

	cola
	.nodes(G.graph.nodes)
	.links(G.graph.links)
	.groups(G.graph.groups)
	.constraints(G.graph.constraints)
	.start(10,10,10);

	console.log("Groups:",G.graph.groups);

	groupUpdate(G);
	linkUpdate(G);
	nodeUpdate(G,pad);
	labelUpdate(G);
	}
	else cola.alpha(1); // fire it off again to satify gridify
	});

	node.append("title").text(function (d) { return d.name; });
	}

	function labelUpdate(G)
	{
	svg.selectAll(".label")
	.data(G.graph.nodes)
	.enter().append("text")
	.attr("class", "label")
	.text(function (d) { return d.name; })
	.call(cola.drag);
	}

	function colaUpdate(pad)
	{
	cola.on("tick", function ()
	{
	svg.selectAll(".link")
	.attr("x1", function (d) { return d.source.x; })
	.attr("y1", function (d) { return d.source.y; })
	.attr("x2", function (d) { return d.target.x; })
	.attr("y2", function (d) { return d.target.y; });

	svg.selectAll(".node")
	.attr("x", function (d) { return d.x - d.width / 2 + pad; })
	.attr("y", function (d) { return d.y - d.height / 2 + pad; });

	svg.selectAll(".group")
	.attr("x", function (d) { return d.bounds.x; })
	.attr("y", function (d) { return d.bounds.y; })
	.attr("width", function (d) { return d.bounds.width(); })
	.attr("height", function (d) { return d.bounds.height(); });

	svg.selectAll(".label")
	.attr("x", function (d) { return d.x; })
	.attr("y", function (d)
	{
	var h = this.getBBox().height;
	return d.y + h + 20;
	});
	});
	}

	var G = {};
	var graph = {};
	var pad = 20;

	graph.nodes = [
	{ "name":"a","width":60,"height":40 },
	{ "name":"b","width":60,"height":40 },
	{ "name":"c","width":60,"height":40 }
	];

	graph.links = [
	{ "source":0, "target":1 },
	{ "source":0, "target":2 }
	];

	graph.groups = [ { leaves:[0] } ];
	graph.constraints = [];
	graph.nodes.forEach(function (v) { v.width = v.height = 120; })
	graph.groups.forEach(function (g) { g.padding = 0.01; });
	G.graph = graph;

	cola
	.nodes(graph.nodes)
	.links(graph.links)
	.groups(graph.groups)
	.constraints(graph.constraints)
	.start(50,50,50,50);

	groupUpdate(G);
	linkUpdate(G);
	nodeUpdate(G,pad);
	labelUpdate(G);
	colaUpdate(pad);

	d3.select("body").on("keydown",function()
	{
	if(d3.event.keyIdentifier == 'Shift') G.shiftDown = true;
	});

	d3.select("body").on("keyup",function()
	{
	if(d3.event.keyIdentifier == 'Shift') G.shiftDown = false;
	});
	</script>
	</body>
	</html