in src/canvastools/ts/CanvasTools/Region/Path/TagsElement.ts [73:144]
public redraw(rebuildTags: boolean = false) {
const pointsData = [];
this.regionData.points.forEach((p) => {
pointsData.push(p.x, p.y);
});
const size = TagsElement.DEFAULT_SECONDARY_TAG_SIZE;
const cx = this.x + this.width / 2;
const cy = this.y - size - 5;
window.requestAnimationFrame(() => {
this.primaryTagBoundRect.attr({
x: this.x,
y: this.y,
width: this.width,
height: this.height,
});
this.primaryTagPolygon.attr({
d: this.regionData.toPath(),
});
// Update primary tag text
if (rebuildTags) {
this.primaryTagText.node.innerHTML = (this.tags.primary !== null) ? this.tags.primary.name : "";
this.textBox = TagsComponent.getCachedBBox(this.primaryTagText);
}
const showTextLabel = (this.textBox.width + 10 <= this.width)
&& (this.textBox.height <= this.height);
if (showTextLabel) {
this.primaryTagTextBG.attr({
height: this.textBox.height + 5,
width: this.textBox.width + 10,
x: this.x + 1,
y: this.y + 1,
});
this.primaryTagText.attr({
visibility: "visible",
x: this.x + 5,
y: this.y + this.textBox.height,
});
} else {
this.primaryTagTextBG.attr({
height: Math.min(10, this.height),
width: Math.min(10, this.width),
x: this.x,
y: this.y,
});
this.primaryTagText.attr({
visibility: "hidden",
x: this.x + 5,
y: this.y + this.textBox.height,
});
}
// Secondary Tags
if (this.secondaryTags && this.secondaryTags.length > 0) {
const length = this.secondaryTags.length;
for (let i = 0; i < length; i++) {
const stag = this.secondaryTags[i];
const x = cx + (2 * i - length + 0.5) * size;
stag.attr({
x,
y: cy,
});
}
}
});
}