From 204eae98c4e4436ed1d28c7bb33c6eae4de3a330 Mon Sep 17 00:00:00 2001 From: ziajka Date: Mon, 26 Nov 2018 09:54:44 +0100 Subject: [PATCH] Improve multiline text position --- .../drawing/drawings/text/text.component.html | 2 +- .../widgets/drawings/text-drawing.spec.ts | 2 +- .../widgets/drawings/text-drawing.ts | 2 +- .../cartography/widgets/interface-label.ts | 59 +++++++++++-------- src/app/cartography/widgets/label.ts | 2 +- 5 files changed, 37 insertions(+), 30 deletions(-) diff --git a/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.html b/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.html index ad6d71c2..a9f62c84 100644 --- a/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.html +++ b/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.html @@ -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}} \ No newline at end of file diff --git a/src/app/cartography/widgets/drawings/text-drawing.spec.ts b/src/app/cartography/widgets/drawings/text-drawing.spec.ts index 1d75f237..c99a87e2 100644 --- a/src/app/cartography/widgets/drawings/text-drawing.spec.ts +++ b/src/app/cartography/widgets/drawings/text-drawing.spec.ts @@ -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', () => { diff --git a/src/app/cartography/widgets/drawings/text-drawing.ts b/src/app/cartography/widgets/drawings/text-drawing.ts index 49f79cf7..7db42cc2 100644 --- a/src/app/cartography/widgets/drawings/text-drawing.ts +++ b/src/app/cartography/widgets/drawings/text-drawing.ts @@ -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() diff --git a/src/app/cartography/widgets/interface-label.ts b/src/app/cartography/widgets/interface-label.ts index d719583d..60d276db 100644 --- a/src/app/cartography/widgets/interface-label.ts +++ b/src/app/cartography/widgets/interface-label.ts @@ -28,6 +28,7 @@ export class InterfaceLabelWidget { const labels = selection .selectAll('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('rect') - .attr('class', 'interface_label_border'); + // enter + // .append('rect') + // .attr('class', 'interface_label_border'); // create label enter .append('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(`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('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('text'); - const bbox = text.node().getBBox(); + // merge + // .select('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('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() diff --git a/src/app/cartography/widgets/label.ts b/src/app/cartography/widgets/label.ts index 2a016963..7e5ee6d7 100644 --- a/src/app/cartography/widgets/label.ts +++ b/src/app/cartography/widgets/label.ts @@ -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})`;