Rework tree creation code, consolidate with descendants chart

magicsunday · Nov 25, 2023 · 0f61ec9 · 0f61ec9
1 parent 156f13c
commit 0f61ec9
Show file tree

Hide file tree

Showing 62 changed files with 3,147 additions and 1,772 deletions.
diff --git a/module.php b/module.php
@@ -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);

diff --git a/package.json b/package.json
@@ -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"
     }
 }
diff --git a/resources/css/pedigree-chart.css b/resources/css/pedigree-chart.css
@@ -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 {

diff --git a/resources/css/svg.css b/resources/css/svg.css
@@ -40,6 +40,7 @@
     fill: none;
     stroke: rgb(175, 175, 175);
     stroke-width: 1.5px;
+    stroke-linecap: butt;
     /*shape-rendering: crispEdges;*/
 }
 
@@ -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) {

diff --git a/resources/js/modules/chart/elbow/horizontal.js b/resources/js/modules/chart/elbow/horizontal.js
diff --git a/resources/js/modules/chart/elbow/vertical.js b/resources/js/modules/chart/elbow/vertical.js
diff --git a/resources/js/modules/configuration.js → resources/js/modules/custom/configuration.js b/resources/js/modules/configuration.js → resources/js/modules/custom/configuration.js
@@ -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.

diff --git a/resources/js/modules/custom/data.js b/resources/js/modules/custom/data.js
@@ -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
+ */
diff --git a/resources/js/modules/chart/hierarchy.js → resources/js/modules/custom/hierarchy.js b/resources/js/modules/chart/hierarchy.js → resources/js/modules/custom/hierarchy.js
@@ -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.
@@ -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
      */
@@ -98,7 +107,7 @@ export default class Hierarchy
     /**
      * Returns the root note.
      *
-     * @returns {Object}
+     * @returns {Individual}
      *
      * @public
      */
@@ -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        : ""
+            }
         };
     }
 }