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

Improved positions of interfaces

Browse Source
This commit is contained in:
ziajka 2018-04-16 16:50:50 +02:00
parent ad8a064879
commit 7415a915ed
3 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/cartography/shared/models/interface-label.ts
View File

@ -5,5 +5,6 @@ export class InterfaceLabel {
public text: string,
public style: string,
public rotation = 0,
public type: string
) {}
}

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

@ -2,6 +2,7 @@ import { SVGSelection } from "../models/types";
import { Link } from "../models/link";
import { InterfaceLabel } from "../models/interface-label";
import { CssFixer } from "../helpers/css-fixer";
import { select } from "d3-selection";
export class InterfaceLabelWidget {
@ -17,19 +18,21 @@ export class InterfaceLabelWidget {
.selectAll<SVGTextElement, InterfaceLabel>('text.interface_label')
.data((l: Link) => {
const sourceInterface = new InterfaceLabel(
Math.round(l.source.x + l.source.width + l.nodes[0].label.x),
Math.round(l.source.y + l.source.height + l.nodes[0].label.y),
Math.round( l.source.x + l.nodes[0].label.x),
Math.round(l.source.y + l.nodes[0].label.y),
l.nodes[0].label.text,
l.nodes[0].label.style,
l.nodes[0].label.rotation
l.nodes[0].label.rotation,
'source'
);
const targetInterface = new InterfaceLabel(
Math.round(l.target.x + l.target.width / 2. + l.nodes[1].label.x),
Math.round(l.target.y + l.target.height / 2. + l.nodes[1].label.y),
Math.round( l.target.x + l.nodes[1].label.x),
Math.round( l.target.y + l.nodes[1].label.y),
l.nodes[1].label.text,
l.nodes[1].label.style,
l.nodes[1].label.rotation
l.nodes[1].label.rotation,
'target'
);
return [sourceInterface, targetInterface];
@ -46,12 +49,32 @@ export class InterfaceLabelWidget {
merge
.text((l: InterfaceLabel) => l.text)
.attr('x', function(this: SVGTextElement, l: InterfaceLabel) {
/* @todo: in GUI probably it should be calculated based on the line; for now we keep it the same */
// const link = select(this.parentElement);
// const path = link.select<SVGPathElement>('path');
// let point;
// if (l.type === 'source') {
// point = path.node().getPointAtLength(40);
// } else {
// point = path.node().getPointAtLength(path.node().getTotalLength() - 40);
// }
// return point.x + l.x;
const bbox = this.getBBox();
return l.x;
})
.attr('y', function(this: SVGTextElement, l: InterfaceLabel) {
/* @todo: in GUI probably it should be calculated based on the line; for now we keep it the same */
// const link = select(this.parentElement);
// const path = link.select<SVGPathElement>('path');
// let point;
// if (l.type === 'source') {
// point = path.node().getPointAtLength(40);
// } else {
// point = path.node().getPointAtLength(path.node().getTotalLength() - 40);
// }
// return point.y + l.y;
const bbox = this.getBBox();
return l.y;
return l.y + bbox.height;
})
.attr('style', (l: InterfaceLabel) => this.cssFixer.fix(l.style))
.attr('transform', (l: InterfaceLabel) => `rotate(${l.rotation}, ${l.x}, ${l.y})`);

6
src/app/cartography/shared/widgets/links.ts
View File

@ -51,12 +51,12 @@ export class LinksWidget implements Widget {
const link_path = link_group.select<SVGPathElement>('path');
const start_point: SVGPoint = link_path.node().getPointAtLength(40);
const end_point: SVGPoint = link_path.node().getPointAtLength(link_path.node().getTotalLength() - 40);
const start_point: SVGPoint = link_path.node().getPointAtLength(45);
const end_point: SVGPoint = link_path.node().getPointAtLength(link_path.node().getTotalLength() - 45);
let statuses = [];
if (link_path.node().getTotalLength() > 2 * 40 + 10) {
if (link_path.node().getTotalLength() > 2 * 45 + 10) {
statuses = [
new LinkStatus(start_point.x, start_point.y, l.source.status),
new LinkStatus(end_point.x, end_point.y, l.target.status)