From 112a375d485d6a17910c8c0e9a668b2b9e970759 Mon Sep 17 00:00:00 2001 From: Moritz Krause Date: Fri, 7 Feb 2020 05:14:40 +0100 Subject: [PATCH 1/2] feat(#65): add custom renderer for marriages --- src/builder.js | 75 ++++++++++++++++++++++++++++++++++++++------------ src/dtree.js | 18 +++++++++--- 2 files changed, 72 insertions(+), 21 deletions(-) diff --git a/src/builder.js b/src/builder.js index 9037046..1991f74 100644 --- 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 += '
` + } + static _debug(msg) { if (TreeBuilder.DEBUG_LEVEL > 0)  { console.log(msg); diff --git a/src/dtree.js b/src/dtree.js index 951eb77..d59ae27 100644 --- 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; From b4111d6b21ec0f8bb3dbb8004c68af14cee260fa Mon Sep 17 00:00:00 2001 From: Moritz Krause Date: Fri, 7 Feb 2020 05:35:45 +0100 Subject: [PATCH 2/2] feat(#65): add custom click event for marriage nodes --- src/builder.js | 12 ++++++++++-- src/dtree.js | 2 ++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/builder.js b/src/builder.js index 1991f74..5860654 100644 --- a/src/builder.js +++ b/src/builder.js @@ -157,14 +157,22 @@ class TreeBuilder { if (d.data.hidden) { return; } - opts.callbacks.nodeClick(d.data.name, d.data.extra, d.data.id); + if (d.data.isMarriage) { + opts.callbacks.marriageClick(d.data.extra, d.data.id) + } else { + opts.callbacks.nodeClick(d.data.name, d.data.extra, d.data.id) + } }) .on('contextmenu', function(d)  { if (d.data.hidden) { return; } d3.event.preventDefault(); - opts.callbacks.nodeRightClick(d.data.name, d.data.extra, d.data.id); + if (d.data.isMarriage) { + opts.callbacks.marriageRightClick(d.data.extra, d.data.id) + } else { + opts.callbacks.nodeRightClick(d.data.name, d.data.extra, d.data.id) + } }); } diff --git a/src/dtree.js b/src/dtree.js index d59ae27..4883e3f 100644 --- a/src/dtree.js +++ b/src/dtree.js @@ -15,6 +15,8 @@ const dTree = { callbacks: { nodeClick: function(name, extra, id) {}, nodeRightClick: function(name, extra, id) {}, + marriageClick: function(extra, id) {}, + marriageRightClick: function(extra, id) {}, nodeHeightSeperation: function(nodeWidth, nodeMaxHeight) { return TreeBuilder._nodeHeightSeperation(nodeWidth, nodeMaxHeight); },