ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-01 15:00:49 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix rotated node label border, Fixes: #237

Browse Source
This commit is contained in:
ziajka 2019-01-02 14:36:33 +01:00
parent b156622c67
commit 81562b5d80
2 changed files with 1257 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/cartography/widgets/label.ts
View File

@ -39,7 +39,7 @@ export class LabelWidget implements Widget {
const label_enter = label_view.enter() const label_enter = label_view.enter()
.append<SVGGElement>('g') .append<SVGGElement>('g')
.attr('class', 'label_container') .attr('class', 'label_container')
.attr('label_id', (l: MapLabel) => l.id) .attr('label_id', (label: MapLabel) => label.id)
const merge = label_view.merge(label_enter); const merge = label_view.merge(label_enter);
@ -56,8 +56,6 @@ export class LabelWidget implements Widget {
private drawLabel(view: SVGSelection) { private drawLabel(view: SVGSelection) {
const self = this;
const label_body = view.selectAll<SVGGElement, MapLabel>("g.label_body") const label_body = view.selectAll<SVGGElement, MapLabel>("g.label_body")
.data((label) => [label]); .data((label) => [label]);
@ -78,17 +76,17 @@ export class LabelWidget implements Widget {
label_body_merge label_body_merge
.select<SVGTextElement>('text.label') .select<SVGTextElement>('text.label')
.attr('label_id', (l: MapLabel) => l.id) .attr('label_id', (label: MapLabel) => label.id)
.attr('style', (l: MapLabel) => { .attr('style', (label: MapLabel) => {
let styles = this.cssFixer.fix(l.style); let styles = this.cssFixer.fix(label.style);
styles = this.fontFixer.fixStyles(styles); styles = this.fontFixer.fixStyles(styles);
return styles; return styles;
}) })
.text((l: MapLabel) => l.text) .text((label: MapLabel) => label.text)
.attr('x', (l: MapLabel) => l.x) .attr('x', (label: MapLabel) => label.x)
.attr('y', (l: MapLabel) => l.y) .attr('y', (label: MapLabel) => label.y)
.attr('transform', (l: MapLabel) => { .attr('transform', (label: MapLabel) => {
return `rotate(${l.rotation}, ${l.x}, ${l.y})`; return `rotate(${label.rotation}, ${label.x}, ${label.y})`;
}) })
label_body_merge label_body_merge
@ -98,9 +96,9 @@ export class LabelWidget implements Widget {
.attr('stroke-dasharray', '3,3') .attr('stroke-dasharray', '3,3')
.attr('stroke-width', '0.5') .attr('stroke-width', '0.5')
.attr('fill', 'none') .attr('fill', 'none')
.each(function (this: SVGRectElement, l: MapLabel) { .each(function (this: SVGRectElement, label: MapLabel) {
const current = select(this); const current = select(this);
const textLabel = label_body_merge.select<SVGTextElement>(`text[label_id="${l.id}"]`); const textLabel = label_body_merge.select<SVGTextElement>(`text[label_id="${label.id}"]`);
const bbox = textLabel.node().getBBox(); const bbox = textLabel.node().getBBox();
const border = 2; const border = 2;
@ -108,7 +106,7 @@ export class LabelWidget implements Widget {
current.attr('height', bbox.height + border * 2); current.attr('height', bbox.height + border * 2);
current.attr('x', bbox.x - border); current.attr('x', bbox.x - border);
current.attr('y', bbox.y - border); current.attr('y', bbox.y - border);
current.attr('transform', `rotate(${l.rotation}, ${bbox.x - border}, ${bbox.y - border})`); current.attr('transform', `rotate(${label.rotation}, ${label.x}, ${label.y})`);
}); });
} }

1245
yarn.lock
View File

File diff suppressed because it is too large Load Diff