feat: Add custom html renderers and wrapping #16 #5 #3

README.md

@@ -50,7 +50,13 @@ The options object has the following default values:
   height: 600,
   callbacks: {
     nodeClick: function(name, extra, id) {},
-    text: function(name, extra, id) {return name;}
+    nodeRenderer: function(name, x, y, height, width, extra, id, nodeClass, textClass, textRenderer) {
+      return TreeBuilder._nodeRenderer(name, x, y, height, width, extra,
+        id,nodeClass, textClass, textRenderer);
+    },
+    textRenderer: function(name, extra, textClass) {
+      return TreeBuilder._textRenderer(name, extra, textClass);
+    }
   },
   margin: {
     top: 0,
@@ -78,8 +84,9 @@ The following CSS sets some good defaults:
     stroke: black;
 }
 .node {
-    stroke: black;
-    fill: lightblue;
+    background-color: lightblue;
+    border-style: solid;
+    border-width: 1px;
 }
 .nodeText{
     font: 10px sans-serif;

src/builder.js

@@ -90,15 +90,7 @@ class TreeBuilder {
       .attr('d', this._siblingLine);
 
     // Create the node rectangles.
-    nodes.append('rect')
-      .attr('class', function(d) {
-        return d.class ? d.class : opts.styles.nodes;
-      })
-      .attr('width', nodeSize[0] / 2)
-      .attr('height', nodeSize[1] / 3)
-      .attr('id', function(d) {
-        return d.id;
-      })
+    nodes.append('foreignObject')
       .attr('display', function(d) {
         if (d.hidden) {
           return 'none';
@@ -112,25 +104,31 @@ class TreeBuilder {
       .attr('y', function(d) {
         return d.y - nodeSize[1] / 6;
       })
-      .on('click', function(d) {
-        opts.callbacks.nodeClick(d.name, d.extra, d.id);
-      });
-
-    // Create the node text label.
-    nodes.append('text')
-      .text(function(d) {
-        return opts.callbacks.text(d.name, d.extra, d.id);
-      })
-      .attr('class', function(d) {
-        return d.textClass ? d.textClass : opts.styles.text;
-      })
-      .attr('x', function(d) {
-        return d.x - nodeSize[0] / 4 + 5;
+      .attr('width', nodeSize[0] / 2)
+      .attr('height', nodeSize[1] / 3)
+      .attr('id', function(d) {
+        return d.id;
       })
-      .attr('y', function(d) {
-        return d.y + 4;
+      .html(function(d) {
+        if (d.hidden) {
+          return null;
+        }
+        return opts.callbacks.nodeRenderer(
+          d.name,
+          d.x,
+          d.y,
+          nodeSize[0] / 2,
+          nodeSize[1] / 3,
+          d.extra,
+          d.id,
+          d.class ? d.class : opts.styles.nodes,
+          d.textClass ? d.textClass : opts.styles.text,
+          opts.callbacks.textRenderer);
       })
       .on('click', function(d) {
+        if (d.hidden) {
+          return;
+        }
         opts.callbacks.nodeClick(d.name, d.extra, d.id);
       });
   }
@@ -226,14 +224,40 @@ class TreeBuilder {
   }
 
   _calculateNodeSize() {
+
+    // Not used at the moment
     var longest = '';
     _.forEach(this.allNodes, function(n) {
       if (n.name.length > longest.length) {
         longest = n.name;
       }
     });
 
-    return [longest.length * 10 + 10, longest.length * 5];
+    return [200, 100];
+  }
+
+  static _nodeRenderer(name, x, y, height, width, extra, id, nodeClass, textClass, textRenderer) {
+
+    var node = '';
+    node += '<div ';
+    node += 'style="height:' + '100%' + ';width:' + '100%' + ';" ';
+    node += 'class="' + nodeClass + '" ';
+    node += 'id="node' + id + '">\n';
+    node += textRenderer(name, extra, textClass);
+    node += '</div>';
+
+    return node;
+  }
+
+  static _textRenderer(name, extra, textClass) {
+    var node = '';
+    node += '<p ';
+    node += 'style="vertical-align: middle;" ';
+    node += 'align="center" ';
+    node += 'class="' + textClass + '">\n';
+    node += name;
+    node += '</p>\n';
+    return node;
   }
 
 }

src/dtree.js

@@ -12,7 +12,13 @@ const dTree = {
       height: 600,
       callbacks: {
         nodeClick: function(name, extra, id) {},
-        text: function(name, extra, id) {return name;}
+        nodeRenderer: function(name, x, y, height, width, extra, id, nodeClass, textClass, textRenderer) {
+          return TreeBuilder._nodeRenderer(name, x, y, height, width, extra,
+            id,nodeClass, textClass, textRenderer);
+        },
+        textRenderer: function(name, extra, textClass) {
+          return TreeBuilder._textRenderer(name, extra, textClass);
+        }
       },
       margin: {
         top: 0,

test/demo/index.html

@@ -13,26 +13,24 @@
 	    fill: none;
 	    stroke: black;
 	}
-	.border {
-	    fill: none;
-	    shape-rendering: crispEdges;
-	    stroke: #aaa;
-	}
 	.man {
-	    stroke: black;
-	    fill: lightblue;
+	    background-color: lightblue;
+			border-style: solid;
+			border-width: 1px;
 	}
 	.woman {
-		stroke: black;
-		fill: pink;
+			background-color: pink;
+			border-style: solid;
+			border-width: 1px;
 	}
 	.emphasis{
-		font-style: italic;
+			font-style: italic;
 	}
 
 </style>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
 <script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3plus/1.8.0/d3plus.min.js"></script>
 <script src="dTree.js"></script>
 <body>
 		<h1>Demo</h1>