Skip to content

Commit

Permalink
Rework tree creation code, consolidate with descendants chart
Browse files Browse the repository at this point in the history
  • Loading branch information
magicsunday committed Nov 25, 2023
1 parent 156f13c commit 144fd03
Show file tree
Hide file tree
Showing 62 changed files with 3,155 additions and 1,743 deletions.
2 changes: 1 addition & 1 deletion module.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* This file is part of the package magicsunday/webtrees-pedigree-chart.
*
* For the full copyright and license information, please read the
* LICENSE file that was distributed with this source code.
* LICENSE file distributed with this source code.
*/

declare(strict_types=1);
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
"watch": "rollup --watch --config rollup.config.js"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^15.2.1",
"@rollup/plugin-terser": "^0.4.3",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
"d3-fetch": "^3.0.1",
"d3-hierarchy": "^3.1.2",
"d3-path": "^3.1.0",
"d3-selection": "^3.0.0",
"d3-transition": "^3.0.1",
"d3-zoom": "^3.0.0",
"rollup": "^3.29.2"
"rollup": "^4.5.2"
}
}
7 changes: 7 additions & 0 deletions resources/css/pedigree-chart.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
/* Form */
.form-element-with-description {
padding-left: 1.5em;
}

.form-element-with-description .form-check {
padding-left: 0;
}

/* SVG */
.webtrees-pedigree-chart-container {
Expand Down
3 changes: 3 additions & 0 deletions resources/css/svg.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
fill: none;
stroke: rgb(175, 175, 175);
stroke-width: 1.5px;
stroke-linecap: butt;
/*shape-rendering: crispEdges;*/
}

Expand All @@ -59,6 +60,8 @@

.webtrees-pedigree-chart-container svg .wt-chart-box-name-alt {
fill: currentColor;
font-weight: 500;
font-size: 0.85em;
}

.webtrees-pedigree-chart-container svg .wt-chart-box-name:hover:not(.wt-chart-box-name-alt) {
Expand Down
32 changes: 0 additions & 32 deletions resources/js/modules/chart/elbow/horizontal.js

This file was deleted.

32 changes: 0 additions & 32 deletions resources/js/modules/chart/elbow/vertical.js

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
* This file is part of the package magicsunday/webtrees-pedigree-chart.
*
* For the full copyright and license information, please read the
* LICENSE file that was distributed with this source code.
* LICENSE file distributed with this source code.
*/

import {LAYOUT_LEFTRIGHT} from "./constants";
import OrientationCollection from "./chart/orientation-collection";
import OrientationCollection from "../lib/chart/orientation-collection";
import {LAYOUT_LEFTRIGHT} from "../lib/constants";

/**
* This class handles the configuration of the application.
Expand Down
84 changes: 84 additions & 0 deletions resources/js/modules/custom/data.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
/**
* This file is part of the package magicsunday/webtrees-pedigree-chart.
*
* For the full copyright and license information, please read the
* LICENSE file distributed with this source code.
*/

import {Node} from "../lib/d3";

/**
* This files defines the internal used structures of objects.
*
* @author Rico Sonntag <[email protected]>
* @license https://opensource.org/licenses/GPL-3.0 GNU General Public License v3.0
* @link https://github.com/magicsunday/webtrees-pedigree-chart/
*/

/**
* The plain person data.
*
* @typedef {Object} Data
* @property {Number} id The unique ID of the person
* @property {String} xref The unique identifier of the person
* @property {String} sex The sex of the person
* @property {String} birth The birthdate of the person
* @property {String} death The death date of the person
* @property {String} timespan The lifetime description
* @property {String} thumbnail The URL of the thumbnail image
* @property {String} name The full name of the individual
* @property {String} preferredName The preferred first name
* @property {String[]} firstNames The list of first names
* @property {String[]} lastNames The list of last names
* @property {String} alternativeName The alternative name of the individual
*/

/**
* A person object.
*
* @typedef {Object} Person
* @property {null|Data} data The data object of the individual
* @property {undefined|Object[]} parents The list of the parents of this individual
*/

/**
* An individual. Extends the D3 Node object.
*
* @typedef {Node} Individual
* @property {Person} data The individual data
* @property {Individual[]} children The children of the node
* @property {Number} x The X-coordinate of the node
* @property {Number} y The Y-coordinate of the node
*/

/**
* An X/Y coordinate.
*
* @typedef {Object} Coordinate
* @property {Number} x The X-coordinate
* @property {Number} y The Y-coordinate
*/

/**
* A link between two nodes.
*
* @typedef {Object} Link
* @property {Individual} source The source individual
* @property {Individual} target The target individual
*/

/**
* @typedef {Object} NameElementData
* @property {Data} data
* @property {Boolean} isRtl
* @property {Boolean} isAltRtl
* @property {Boolean} withImage
*/

/**
* @typedef {Object} LabelElementData
* @property {String} label
* @property {Boolean} isPreferred
* @property {Boolean} isLastName
* @property {Boolean} isNameRtl
*/
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
* This file is part of the package magicsunday/webtrees-pedigree-chart.
*
* For the full copyright and license information, please read the
* LICENSE file that was distributed with this source code.
* LICENSE file distributed with this source code.
*/

import * as d3 from "../d3";
import {SEX_FEMALE, SEX_MALE} from "../constants";
import * as d3 from "../lib/d3";
import {SEX_FEMALE, SEX_MALE} from "../lib/constants.js";

/**
* This class handles the hierarchical data.
Expand Down Expand Up @@ -41,52 +41,61 @@ export default class Hierarchy
const maxGenerations = getDepth(data);

// Construct root node from the hierarchical data
let root = d3.hierarchy(
this._root = d3.hierarchy(
data,
data => {
if (!this._configuration.showEmptyBoxes) {
return data.parents;
}

// Fill up the missing parents to the requested number of generations
if (!data.parents && (data.generation < maxGenerations)) {
// if (!data.parents && (data.generation < this._configuration.generations)) {
if (!data.parents && (data.data.generation < maxGenerations)) {
// if (!data.parents && (data.data.generation < this._configuration.generations)) {
data.parents = [
this.createEmptyNode(data.generation + 1, SEX_MALE),
this.createEmptyNode(data.generation + 1, SEX_FEMALE)
this.createEmptyNode(data.data.generation + 1, SEX_MALE),
this.createEmptyNode(data.data.generation + 1, SEX_FEMALE)
];
}

// Add missing parent record if we got only one
if (data.parents && (data.parents.length < 2)) {
if (data.parents[0].sex === SEX_MALE) {
data.parents.push(
this.createEmptyNode(data.generation + 1, SEX_FEMALE)
this.createEmptyNode(data.data.generation + 1, SEX_FEMALE)
);
} else {
data.parents.unshift(
this.createEmptyNode(data.generation + 1, SEX_MALE)
this.createEmptyNode(data.data.generation + 1, SEX_MALE)
);
}
}

return data.parents;
});

// Assign a unique ID to each node
this._root.ancestors().forEach((d, i) => {
d.id = i;
});

// Declares a tree layout and assigns the size
const treeLayout = d3.tree()
.nodeSize([this._configuration.orientation.nodeWidth, 0])
.separation(() => 0.5);
const tree = d3.tree()
.nodeSize([this._configuration.orientation.nodeWidth, this._configuration.orientation.nodeHeight])
.separation(() => 1.0);

// Map the root node data to the tree layout
this._nodes = tree(this._root);

// Map the node data to the tree layout
this._root = root;
this._nodes = treeLayout(root);
// Normalize node coordinates (swap values for left/right layout)
this._root.each((node) => {
this._configuration.orientation.norm(node);
});
}

/**
* Returns the nodes.
*
* @returns {Array}
* @returns {Individual[]}
*
* @public
*/
Expand All @@ -98,7 +107,7 @@ export default class Hierarchy
/**
* Returns the root note.
*
* @returns {Object}
* @returns {Individual}
*
* @public
*/
Expand All @@ -113,26 +122,29 @@ export default class Hierarchy
* @param {Number} generation Generation of the node
* @param {String} sex The sex of the individual
*
* @returns {Object}
* @returns {Data}
*
* @private
*/
createEmptyNode(generation, sex)
{
return {
id : 0,
xref : "",
url : "",
updateUrl : "",
generation : generation,
name : "",
firstNames : [],
lastNames : [],
preferredName : "",
alternativeNames : [],
isAltRtl : false,
sex : sex,
timespan : ""
data: {
id : 0,
xref : "",
url : "",
updateUrl : "",
generation : generation,
name : "",
isNameRtl : false,
firstNames : [],
lastNames : [],
preferredName : "",
alternativeName : "",
isAltRtl : false,
sex : "U", // sex
timespan : ""
}
};
}
}
Loading

0 comments on commit 144fd03

Please sign in to comment.