Skip to content

Commit

Permalink
Minor adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@magicsunday
magicsunday committed Mar 25, 2024
1 parent c73c401 commit f09975e
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 54 deletions.
2 changes: 1 addition & 1 deletion resources/js/descendants-chart.min.js
View file

Large diffs are not rendered by default.

114 changes: 61 additions & 53 deletions resources/js/modules/lib/tree/name.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,15 +69,16 @@ export default class Name
.enter();

enter
.each(function (d) {
.each(function (datum) {
const element = d3.select(this);
const nameGroups = that.createNamesData(d);
const nameGroups = that.createNamesData(datum);
const availableWidth = that.getAvailableWidth(datum);

nameGroups.forEach((nameGroup, index) => {
const text = element.append("text")
.attr("class", "wt-chart-box-name")
.attr("direction", datum => datum.isRtl ? "rtl" : "ltr")
.attr("text-anchor", "middle")
.attr("direction", d => d.isRtl ? "rtl" : "ltr")
.attr("alignment-baseline", "central")
.attr("y", that._text.y - 5 + (index * 20));

Expand All @@ -86,7 +87,7 @@ export default class Name
that.truncateNamesData(
text,
nameGroup,
d.withImage
availableWidth
)
);
});
Expand All @@ -95,19 +96,23 @@ export default class Name
// Add alternative name if present
if (this._svg._configuration.showAlternativeName) {
enter
.filter(d => d.data.data.alternativeName !== "")
.filter(datum => datum.data.data.alternativeName !== "")
.call((g) => {
const text = g.append("text")
.classed("wt-chart-box-name-alt", true)
.attr("class", "wt-chart-box-name")
.attr("direction", datum => datum.isAltRtl ? "rtl" : "ltr")
.attr("text-anchor", "middle")
.attr("direction", d => d.isAltRtl ? "rtl" : "ltr")
.attr("alignment-baseline", "central")
.attr("y", this._text.y + 40)
.classed("wt-chart-box-name-alt", true);
.attr("y", this._text.y + 40);

this.addNameElements(
text,
datum => this.createAlternativeNamesData(text, datum)
datum => this.truncateNamesData(
text,
this.createAlternativeNamesData(datum),
this.getAvailableWidth(datum)
)
);
});
}
Expand All @@ -129,19 +134,19 @@ export default class Name
.call((g) => {
const text = g.append("text")
.attr("class", "wt-chart-box-name")
.attr("text-anchor", (d) => {
if (d.isRtl && this._orientation.isDocumentRtl) {
.attr("direction", datum => datum.isRtl ? "rtl" : "ltr")
.attr("text-anchor", (datum) => {
if (datum.isRtl && this._orientation.isDocumentRtl) {
return "start";
}

if (d.isRtl || this._orientation.isDocumentRtl) {
if (datum.isRtl || this._orientation.isDocumentRtl) {
return "end";
}

return "start";
})
.attr("direction", d => d.isRtl ? "rtl" : "ltr")
.attr("x", d => this.textX(d))
.attr("x", datum => this.textX(datum))
.attr("y", this._text.y - 10);

this.addNameElements(
Expand All @@ -157,7 +162,7 @@ export default class Name
...nameGroups[0],
...nameGroups[1],
],
datum.withImage
this.getAvailableWidth(datum)
)
}
);
Expand All @@ -169,32 +174,61 @@ export default class Name
.filter(datum => datum.data.data.alternativeName !== "")
.call((g) => {
const text = g.append("text")
.classed("wt-chart-box-name-alt", true)
.attr("class", "wt-chart-box-name")
.attr("text-anchor", (d) => {
if (d.isAltRtl && this._orientation.isDocumentRtl) {
.attr("direction", datum => datum.isAltRtl ? "rtl" : "ltr")
.attr("text-anchor", (datum) => {
if (datum.isAltRtl && this._orientation.isDocumentRtl) {
return "start";
}

if (d.isAltRtl || this._orientation.isDocumentRtl) {
if (datum.isAltRtl || this._orientation.isDocumentRtl) {
return "end";
}

return "start";
})
.attr("direction", d => d.isAltRtl ? "rtl" : "ltr")
.attr("x", d => this.textX(d))
.attr("y", this._text.y + 8)
.classed("wt-chart-box-name-alt", true);
.attr("x", datum => this.textX(datum))
.attr("y", this._text.y + 8);

this.addNameElements(
text,
datum => this.createAlternativeNamesData(text, datum)
datum => this.truncateNamesData(
text,
this.createAlternativeNamesData(datum),
this.getAvailableWidth(datum)
)
);
});
}
}
}

/**
* Returns the total available width that the text can occupy.
*
* @param {NameElementData} datum
*
* @return {Number}
*
* @private
*/
getAvailableWidth(datum)
{
// The total available width that the text can occupy
let availableWidth = this._text.width;

if (datum.withImage) {
if ((this._orientation instanceof OrientationLeftRight)
|| (this._orientation instanceof OrientationRightLeft)
) {
availableWidth -= this._image.width;
}
}

return availableWidth;
}

/**
* Creates a single <tspan> element for each single name and append it to the
* parent element. The "tspan" element containing the preferred name gets an
Expand Down Expand Up @@ -292,42 +326,30 @@ export default class Name
*
* @param {Object} parent
* @param {LabelElementData[]} names
* @param {Boolean} withImage
* @param {Number} availableWidth
*
* @return {LabelElementData[]}
*
* @private
*/
truncateNamesData(parent, names, withImage)
truncateNamesData(parent, names, availableWidth)
{
const fontSize = parent.style("font-size");
const fontWeight = parent.style("font-weight");

// The total available width that the text can occupy
let availableWidth = this._text.width;

if (withImage) {
if ((this._orientation instanceof OrientationLeftRight)
|| (this._orientation instanceof OrientationRightLeft)
) {
availableWidth -= this._image.width;
}
}

return this.truncateNames(names, fontSize, fontWeight, availableWidth);
}

/**
* Creates the data array for the alternative name.
*
* @param {Object} parent
* @param {NameElementData} datum
*
* @return {LabelElementData[]}
*
* @private
*/
createAlternativeNamesData(parent, datum)
createAlternativeNamesData(datum)
{
let words = datum.data.data.alternativeName.split(/\s+/);

Expand All @@ -346,21 +368,7 @@ export default class Name
})
);

const fontSize = parent.style("font-size");
const fontWeight = parent.style("font-weight");

// The total available width that the text can occupy
let availableWidth = this._text.width;

if (datum.withImage) {
if ((this._orientation instanceof OrientationLeftRight)
|| (this._orientation instanceof OrientationRightLeft)
) {
availableWidth -= this._image.width;
}
}

return this.truncateNames(names, fontSize, fontWeight, availableWidth);
return names;
}

/**
Expand Down

0 comments on commit f09975e

Please sign in to comment.