Skip to content

Commit

Permalink
Add alternative name
Browse files Browse the repository at this point in the history
  • Loading branch information
@magicsunday
magicsunday committed Sep 8, 2023
1 parent 98b0aa3 commit 3c0eb3c
Show file tree
Hide file tree
Showing 17 changed files with 283 additions and 288 deletions.
2 changes: 2 additions & 0 deletions resources/css/svg.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@

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

.webtrees-descendants-chart-container svg .wt-chart-box-name:hover:not(.wt-chart-box-name-alt) {
Expand Down
2 changes: 1 addition & 1 deletion resources/js/descendants-chart.min.js
View file

Large diffs are not rendered by default.

10 changes: 9 additions & 1 deletion resources/js/modules/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default class Chart
// .attr("width", viewBoxWidth)
// .attr("height", viewBoxHeight);

// Set view box attribute
// Set view box attribute
this._svg.get()
.attr("viewBox", [
viewBoxLeft,
Expand Down Expand Up @@ -135,6 +135,14 @@ export default class Chart

this.bindClickEventListener();
this.updateViewBox();

// const width = 1296;
// const height = (this._hierarchy.root.descendants().length + 1) * this._configuration.orientation.nodeWidth;
//
// console.log('viewBox', [-this._configuration.orientation.nodeWidth / 2, -this._configuration.orientation.nodeWidth * 3 / 2, width, height]);
//
// this._svg.get()
// .attr("viewBox", [-this._configuration.orientation.nodeWidth / 2, -this._configuration.orientation.nodeWidth * 3 / 2, width, height])
}

/**
Expand Down
76 changes: 25 additions & 51 deletions resources/js/modules/chart/box/image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

import OrientationLeftRight from "../orientation/orientation-leftRight";
import OrientationRightLeft from "../orientation/orientation-rightLeft";
import {LAYOUT_HORIZONTAL_NODE_HEIGHT} from "../../constants.js";

/**
* The person image box container.
Expand All @@ -25,18 +26,27 @@ export default class Image
*/
constructor(orientation, cornerRadius)
{
this._orientation = orientation;
this._cornerRadius = cornerRadius;
this._imagePadding = 5;
this._imageRadius = Math.min(40, (orientation.boxHeight / 2) - this._imagePadding);
this._orientation = orientation;
this._cornerRadius = cornerRadius;
this._imagePaddingX = 5;
this._imagePaddingY = 10;

if ((this._orientation instanceof OrientationLeftRight)
|| (this._orientation instanceof OrientationRightLeft)
) {
this._imagePaddingX = 5;
this._imagePaddingY = 5;
}

this._imageRadius = (LAYOUT_HORIZONTAL_NODE_HEIGHT - (this._imagePaddingX * 2)) / 2;

// Calculate values
this._x = this.calculateX();
this._y = this.calculateY();
this._width = this.calculateImageWidth();
this._height = this.calculateImageHeight();
this._rx = this.calculateCornerRadius();
this._ry = this.calculateCornerRadius();
this._rx = this._cornerRadius - this._imagePaddingX; //this.calculateCornerRadius();
this._ry = this._cornerRadius - this._imagePaddingX; //this.calculateCornerRadius();
}

/**
Expand All @@ -46,7 +56,13 @@ export default class Image
*/
calculateX()
{
return -(this._orientation.boxWidth / 2) + this._imagePadding;
if ((this._orientation instanceof OrientationLeftRight)
|| (this._orientation instanceof OrientationRightLeft)
) {
return -((this._orientation.boxWidth / 2) - this._imagePaddingX);
}

return -((this._orientation.boxWidth / 2) - this._imageRadius + this._imagePaddingX);
}

/**
Expand All @@ -56,13 +72,7 @@ export default class Image
*/
calculateY()
{
if ((this._orientation instanceof OrientationLeftRight)
|| (this._orientation instanceof OrientationRightLeft)
) {
return -this._imageRadius;
}

return -(this._orientation.boxHeight / 2) + this._imagePadding;
return -(this._orientation.boxHeight / 2) + this._imagePaddingY;
}

/**
Expand All @@ -72,13 +82,7 @@ export default class Image
*/
calculateImageWidth()
{
if ((this._orientation instanceof OrientationLeftRight)
|| (this._orientation instanceof OrientationRightLeft)
) {
return this._imageRadius * 2;
}

return this._orientation.boxWidth - (this._imagePadding * 2);
return this._imageRadius * 2;
}

/**
Expand All @@ -101,36 +105,6 @@ export default class Image
return this._cornerRadius - this._imagePadding;
}

/**
* Returns the amount of image padding.
*
* @returns {Number}
*/
get imagePadding()
{
return this._imagePadding;
}

/**
* Returns the radius of the image.
*
* @returns {Number}
*/
get imageRadius()
{
return this._imageRadius;
}

/**
* Sets the radius of the image.
*
* @param {Number} value The new radius
*/
set imageRadius(value)
{
this._imageRadius = value;
}

/**
* Returns the X-coordinate of the center of the image.
*
Expand Down
24 changes: 16 additions & 8 deletions resources/js/modules/chart/box/text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,17 @@ export default class Text
*/
constructor(orientation, image = null)
{
this._orientation = orientation;
this._image = image;
this._textPadding = 15;
this._orientation = orientation;
this._image = image;
this._textPaddingX = 5;
this._textPaddingY = 15;

if ((this._orientation instanceof OrientationLeftRight)
|| (this._orientation instanceof OrientationRightLeft)
) {
this._textPaddingX = 15;
this._textPaddingY = 15;
}

// Calculate values
this._x = this.calculateX();
Expand All @@ -42,7 +50,7 @@ export default class Text
*/
calculateX()
{
const xStart = -(this._orientation.boxWidth / 2) + this._textPadding;
const xStart = -(this._orientation.boxWidth / 2) + this._textPaddingX;

if (!this._image) {
return xStart;
Expand All @@ -62,14 +70,14 @@ export default class Text
if ((this._orientation instanceof OrientationLeftRight)
|| (this._orientation instanceof OrientationRightLeft)
) {
return -this._textPadding;
return -this._textPaddingY;
}

if (!this._image) {
return -(this._orientation.boxHeight / 2) + (this._textPadding * 2);
return -(this._orientation.boxHeight / 2) + (this._textPaddingY * 2);
}

return this._image.y + this._image.height + (this._textPadding * 2);
return this._image.y + this._image.height + (this._textPaddingY * 2);
}

/**
Expand All @@ -80,7 +88,7 @@ export default class Text
calculateWidth()
{
// Width of box minus the right/left padding
const defaultWidth = this._orientation.boxWidth - (this._textPadding * 2);
const defaultWidth = this._orientation.boxWidth - (this._textPaddingX * 2);

if (!this._image) {
return defaultWidth;
Expand Down
43 changes: 33 additions & 10 deletions resources/js/modules/chart/hierarchy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
*/

import * as d3 from "../d3";
import OrientationLeftRight from "./orientation/orientation-leftRight.js";
import OrientationRightLeft from "./orientation/orientation-rightLeft.js";

/**
* This class handles the hierarchical data.
Expand Down Expand Up @@ -39,38 +41,59 @@ export default class Hierarchy
let root = d3.hierarchy(data);

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

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

// // TODO Calculate height of SVG
// if ((this._configuration.orientation instanceof OrientationLeftRight)
// || (this._configuration.orientation instanceof OrientationRightLeft)
// ) {
// let x0 = Infinity;
// let x1 = -x0;
//
// root.each(d => {
// if (d.x > x1) x1 = d.x;
// if (d.x < x0) x0 = d.x;
// });
// }
//
// // const height = x1 - x0 + this._configuration.orientation.nodeHeight * 2;
// // console.log(height);

// Normalize node coordinates (swap values for left/right layout)
root.each((node) => {
this._configuration.orientation.norm(node);
});
}

/**
* Returns the separation value.
*
* @param {Individual} left
* @param {Individual} right
* @param {Node} left
* @param {Node} right
*
* @return {Number}
*/
separation(left, right)
{
// The left child has spouses (1 or more), add some space between the nodes
if (typeof left.data.spouses !== "undefined") {
return 0.75;
if (Object.hasOwn(left.data, 'spouses')) {
return 1.25;
}

// The right side is a spouse that is linked back to the actual child, so add some space
if (typeof right.data.spouse !== "undefined") {
return 0.75;
if (Object.hasOwn(right.data, 'spouse')) {
return 1.25;
}

// Single siblings and cousins should be close
// to each other if parents are the same
return left.parent === right.parent ? 0.5 : 1.0;
return left.parent === right.parent ? 1.0 : 2.0;
}

/**
Expand Down
9 changes: 7 additions & 2 deletions resources/js/modules/chart/orientation/orientation-bottomTop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,17 @@ export default class OrientationBottomTop extends Orientation

get nodeWidth()
{
return (this._boxWidth * 2) + this._yOffset;
return this._boxWidth + this._xOffset;
}

get nodeHeight()
{
return this._boxHeight + this._yOffset;
}

norm(d)
{
d.y = this.direction() * d.depth * (this._boxHeight + this._yOffset);
d.y *= this.direction();
}

elbow(link)
Expand Down
12 changes: 8 additions & 4 deletions resources/js/modules/chart/orientation/orientation-leftRight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default class OrientationLeftRight extends Orientation
super(boxWidth, boxHeight);

this._xOffset = 40;
this._yOffset = 40;
this._yOffset = 20;
}

direction()
Expand All @@ -38,14 +38,18 @@ export default class OrientationLeftRight extends Orientation

get nodeWidth()
{
return (this._boxHeight * 2) + this._xOffset;
return this._boxHeight + this._yOffset;
}

get nodeHeight()
{
return this._boxWidth + this._xOffset;
}

norm(d)
{
// Swap x and y values
d.y = d.x;
d.x = this.direction() * d.depth * (this._boxWidth + this._xOffset);
[d.x, d.y] = [d.y * this.direction(), d.x];
}

elbow(link)
Expand Down
12 changes: 8 additions & 4 deletions resources/js/modules/chart/orientation/orientation-rightLeft.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default class OrientationRightLeft extends Orientation
super(boxWidth, boxHeight);

this._xOffset = 40;
this._yOffset = 40;
this._yOffset = 20;
}

direction()
Expand All @@ -38,14 +38,18 @@ export default class OrientationRightLeft extends Orientation

get nodeWidth()
{
return (this._boxHeight * 2) + this._xOffset;
return this._boxHeight + this._yOffset;
}

get nodeHeight()
{
return this._boxWidth + this._xOffset;
}

norm(d)
{
// Swap x and y values
d.y = d.x;
d.x = this.direction() * d.depth * (this._boxWidth + this._xOffset);
[d.x, d.y] = [d.y * this.direction(), d.x];
}

elbow(link)
Expand Down
9 changes: 7 additions & 2 deletions resources/js/modules/chart/orientation/orientation-topBottom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,17 @@ export default class OrientationTopBottom extends Orientation

get nodeWidth()
{
return (this._boxWidth * 2) + this._yOffset;
return this._boxWidth + this._xOffset;
}

get nodeHeight()
{
return this._boxHeight + this._yOffset;
}

norm(d)
{
d.y = this.direction() * d.depth * (this._boxHeight + this._yOffset);
d.y *= this.direction();
}

elbow(link)
Expand Down
Loading

0 comments on commit 3c0eb3c

Please sign in to comment.