feat(#65): add custom renderer for marriages

ErikGartner · Feb 7, 2020 · 112a375 · 112a375
1 parent a0736a8
commit 112a375
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 21 deletions.
diff --git a/src/builder.js b/src/builder.js
@@ -10,12 +10,24 @@ class TreeBuilder {
     // flatten nodes
     this.allNodes = this._flatten(this.root);
 
-    // Calculate node size
-    let visibleNodes = _.filter(this.allNodes, function(n) {
-      return !n.hidden;
-    });
-    this.nodeSize = opts.callbacks.nodeSize(visibleNodes,
-      opts.nodeWidth, opts.callbacks.textRenderer);
+    // calculate node sizes
+    this.nodeSize = opts.callbacks.nodeSize(
+      // filter hidden and marriage nodes
+      _.filter(
+        this.allNodes,
+        node => !(node.hidden || _.get(node, 'data.isMarriage'))
+      ),
+      opts.nodeWidth,
+      opts.callbacks.textRenderer
+    )
+    this.marriageSize = opts.callbacks.marriageSize(
+      // filter hidden and non marriage nodes
+      _.filter(
+        this.allNodes,
+        node => !node.hidden && _.get(node, 'data.isMarriage')
+      ),
+      this.opts.marriageNodeSize
+    )
   }
 
   create() {
@@ -64,6 +76,7 @@ class TreeBuilder {
     let opts = this.opts;
     let allNodes = this.allNodes;
     let nodeSize = this.nodeSize;
+    let marriageSize = this.marriageSize;
 
     let treenodes = this.tree(source);
     let links = treenodes.links();
@@ -115,17 +128,30 @@ class TreeBuilder {
         return d.id;
       })
       .html(function(d) {
-        return opts.callbacks.nodeRenderer(
-          d.data.name,
-          d.x,
-          d.y,
-          nodeSize[0],
-          nodeSize[1],
-          d.data.extra,
-          d.data.id,
-          d.data.class,
-          d.data.textClass,
-          opts.callbacks.textRenderer);
+        if (d.data.isMarriage) {
+          return opts.callbacks.marriageRenderer(
+            d.x,
+            d.y,
+            marriageSize[0],
+            marriageSize[1],
+            d.data.extra,
+            d.data.id,
+            d.data.class
+          )
+        } else {
+          return opts.callbacks.nodeRenderer(
+            d.data.name,
+            d.x,
+            d.y,
+            nodeSize[0],
+            nodeSize[1],
+            d.data.extra,
+            d.data.id,
+            d.data.class,
+            d.data.textClass,
+            opts.callbacks.textRenderer
+          )
+        }
       })
       .on('click', function(d)  {
         if (d.data.hidden) {
@@ -291,6 +317,17 @@ class TreeBuilder {
     return [width, maxHeight];
   }
 
+  static _marriageSize (nodes, size) {
+    _.map(nodes, function (n) {
+      if (!n.data.hidden) {
+        n.cHeight = size
+        n.cWidth = size
+      }
+    })
+
+    return [size, size]
+  }
+
   static _nodeRenderer(name, x, y, height, width, extra, id, nodeClass, textClass, textRenderer) {
     let node = '';
     node += '<div ';
@@ -312,6 +349,10 @@ class TreeBuilder {
     return node;
   }
 
+  static _marriageRenderer (x, y, height, width, extra, id, nodeClass) {
+    return `<div style="height:100%" class="${nodeClass}" id="node${id}"></div>`
+  }
+
   static _debug(msg) {
     if (TreeBuilder.DEBUG_LEVEL > 0)  {
       console.log(msg);

diff --git a/src/dtree.js b/src/dtree.js
@@ -11,6 +11,7 @@ const dTree = {
       debug: false,
       width: 600,
       height: 600,
+      hideMarriageNodes: true,
       callbacks: {
         nodeClick: function(name, extra, id) {},
         nodeRightClick: function(name, extra, id) {},
@@ -28,6 +29,12 @@ const dTree = {
         textRenderer: function(name, extra, textClass) {
           return TreeBuilder._textRenderer(name, extra, textClass);
         },
+        marriageRenderer: function (x, y, height, width, extra, id, nodeClass) {
+          return TreeBuilder._marriageRenderer(x, y, height, width, extra, id, nodeClass)
+        },
+        marriageSize: function (nodes, size) {
+          return TreeBuilder._marriageSize(nodes, size)
+        },
       },
       margin: {
         top: 0,
@@ -36,8 +43,10 @@ const dTree = {
         left: 0
       },
       nodeWidth: 100,
+      marriageNodeSize: 10,
       styles: {
         node: 'node',
+        marriageNode: 'marriageNode',
         linage: 'linage',
         marriage: 'marriage',
         text: 'nodeText'
@@ -108,15 +117,16 @@ const dTree = {
 
       // go through marriage
       _.forEach(person.marriages, function(marriage, index) {
-
         var m = {
           name: '',
           id: id++,
-          hidden: true,
+          hidden: opts.hideMarriageNodes,
           noParent: true,
           children: [],
-          extra: marriage.extra
-        };
+          isMarriage: true,
+          extra: marriage.extra,
+          class: marriage.class ? marriage.class : opts.styles.marriageNode
+        }
 
         var sp = marriage.spouse;