in src/canvastools/ts/CanvasTools/Region/Rect/TagsElement.ts [53:177]
public redraw(rebuildTags: boolean = false) {
// If there are tags assigned
if (this.tags) {
window.requestAnimationFrame(() => {
if (this.tags.primary !== undefined && this.tags.primary !== null) {
// Update primary tag rect
this.primaryTagRect.attr({
height: this.height,
width: this.width,
x: this.x,
y: this.y,
});
// 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,
});
}
} else {
this.primaryTagRect.attr({
height: this.height,
width: this.width,
x: this.x,
y: this.y,
});
this.primaryTagTextBG.attr({
height: 0,
width: 0,
});
this.primaryTagText.attr({
visibility: "hidden",
x: this.x + 5,
y: this.y + this.textBox.height,
});
}
// Clear secondary tags -> redraw from scratch
if (rebuildTags) {
this.secondaryTags.forEach((tag) => {
tag.remove();
});
this.secondaryTags = [];
}
// Recreate secondary tags
if (this.tags.secondary && this.tags.secondary.length > 0) {
const s = 6;
const cx = this.x + 0.5 * this.boundRect.width;
const cy = this.y - s - 5;
const length = this.tags.secondary.length;
for (let i = 0; i < length; i++) {
const stag = this.tags.secondary[i];
const x = cx + (2 * i - length + 1) * s - s / 2;
if (rebuildTags) {
const tagel = this.paper.rect(x, cy, s, s);
tagel.addClass("secondaryTagStyle");
tagel.addClass(`secondaryTag-${stag.name}`);
this.secondaryTagsNode.add(tagel);
this.secondaryTags.push(tagel);
} else {
const tagel = this.secondaryTags[i];
tagel.attr({
x,
y: cy,
});
}
}
}
});
} else {
window.requestAnimationFrame(() => {
this.primaryTagRect.attr({
height: this.height,
width: this.width,
x: this.x,
y: this.y,
});
// Remove primary tag
this.primaryTagText.node.innerHTML = "";
this.primaryTagTextBG.attr({
height: 0,
width: 0,
});
// Clear secondary tags
this.secondaryTags.forEach((tag) => {
tag.remove();
});
this.secondaryTags = [];
});
}
}