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

Improve multiline text position

Browse Source
This commit is contained in:
ziajka 2018-11-26 09:54:44 +01:00
parent bd2fdd318e
commit 204eae98c4
5 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.html
View File

@ -9,6 +9,6 @@
*ngFor="let line of lines; index as i"
xml:space="preserve"
x="0"
[attr.dy]="i == 0 ? '0em' : '1.2em'"
[attr.dy]="i == 0 ? '0em' : '1.4em'"
>{{line}}</svg:tspan>
</svg:text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 344 B

After

Width:  |  Height:  |  Size: 344 B

2
src/app/cartography/widgets/drawings/text-drawing.spec.ts
View File

@ -67,7 +67,7 @@ describe('TextDrawingWidget', () => {
expect(drew.nodes()[1].innerHTML).toEqual('IS TEXT');
expect(drew.nodes()[1].getAttribute('x')).toEqual('0');
expect(drew.nodes()[1].getAttribute('dy')).toEqual('1.2em');
expect(drew.nodes()[1].getAttribute('dy')).toEqual('1.4em');
});
it('should draw whitespaces', () => {

2
src/app/cartography/widgets/drawings/text-drawing.ts
View File

@ -64,7 +64,7 @@ export class TextDrawingWidget implements DrawingShapeWidget {
.text((line) => line)
.attr('xml:space', 'preserve')
.attr('x', 0)
.attr("dy", (line, i) => i === 0 ? '0em' : '1.2em');
.attr("dy", (line, i) => i === 0 ? '0em' : '1.4em');
lines
.exit()

59
src/app/cartography/widgets/interface-label.ts
View File

@ -28,6 +28,7 @@ export class InterfaceLabelWidget {
const labels = selection
.selectAll<SVGGElement, InterfaceLabel>('g.interface_label_container')
.data((l: MapLink) => {
console.log( l.nodes[0].label);
const sourceInterface = new InterfaceLabel(
l.id,
'source',
@ -60,14 +61,15 @@ export class InterfaceLabelWidget {
.classed('interface_label_container', true);
// create surrounding rect
enter
.append<SVGRectElement>('rect')
.attr('class', 'interface_label_border');
// enter
// .append<SVGRectElement>('rect')
// .attr('class', 'interface_label_border');
// create label
enter
.append<SVGTextElement>('text')
.attr('class', 'interface_label noselect');
.attr('class', 'interface_label noselect')
.attr('interface_label_id', (i: InterfaceLabel) => `${i.direction}-${i.link_id}`)
const merge = labels
.merge(enter);
@ -76,9 +78,14 @@ export class InterfaceLabelWidget {
.attr('width', 100)
.attr('height', 100)
.attr('transform', function(this: SVGGElement, l: InterfaceLabel) {
const bbox = this.getBBox();
const x = l.x;
const y = l.y + bbox.height;
const textLabel = merge.select<SVGTextElement>(`text[interface_label_id="${l.direction}-${l.link_id}"]`);
const bbox = textLabel.node().getBBox();
console.log(bbox);
const x = l.x ;
const y = l.y + bbox.height; //-17
// const x = l.x;
// const y = l.y + bbox.height;
return `translate(${x}, ${y}) rotate(${l.rotation}, ${x}, ${y})`;
})
.classed('selected', (l: InterfaceLabel) => false);
@ -91,30 +98,30 @@ export class InterfaceLabelWidget {
let styles = this.cssFixer.fix(l.style);
styles = this.fontFixer.fixStyles(styles);
return styles;
})
.attr('x', -InterfaceLabelWidget.SURROUNDING_TEXT_BORDER)
.attr('y', -InterfaceLabelWidget.SURROUNDING_TEXT_BORDER);
});
// .attr('x', -InterfaceLabelWidget.SURROUNDING_TEXT_BORDER)
// .attr('y', -InterfaceLabelWidget.SURROUNDING_TEXT_BORDER);
// update surrounding rect
merge
.select<SVGRectElement>('rect.interface_label_border')
.attr('visibility', (l: InterfaceLabel) => false ? 'visible' : 'hidden')
.attr('stroke-dasharray', '3,3')
.attr('stroke-width', '0.5')
.each(function (this: SVGRectElement, l: InterfaceLabel) {
const current = select(this);
const parent = select(this.parentElement);
const text = parent.select<SVGTextElement>('text');
const bbox = text.node().getBBox();
// merge
// .select<SVGRectElement>('rect.interface_label_border')
// .attr('visibility', (l: InterfaceLabel) => false ? 'visible' : 'hidden')
// .attr('stroke-dasharray', '3,3')
// .attr('stroke-width', '0.5')
// .each(function (this: SVGRectElement, l: InterfaceLabel) {
// const current = select(this);
// const parent = select(this.parentElement);
// const text = parent.select<SVGTextElement>('text');
// const bbox = text.node().getBBox();
const border = InterfaceLabelWidget.SURROUNDING_TEXT_BORDER;
// const border = InterfaceLabelWidget.SURROUNDING_TEXT_BORDER;
current.attr('width', bbox.width + border * 2);
current.attr('height', bbox.height + border);
current.attr('x', - border);
current.attr('y', - bbox.height);
});
// current.attr('width', bbox.width + border * 2);
// current.attr('height', bbox.height + border);
// current.attr('x', - border);
// current.attr('y', - bbox.height);
// });
labels
.exit()

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

@ -96,7 +96,7 @@ export class LabelWidget implements Widget {
// bbox = this.getBBox();
// return - n.height / 2. - bbox.height ;
// }
return l.y + bbox.height - LabelWidget.NODE_LABEL_MARGIN;
return l.y + bbox.height - LabelWidget.NODE_LABEL_MARGIN - bbox.height*0.14;
})
.attr('transform', (l: MapLabel) => {
return `rotate(${l.rotation}, ${l.x}, ${l.y})`;