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

Merge pull request #420 from GNS3/Correct-interface-label-positioning-during-adding-the-line-between-nodes

Browse Source 
Correct interface label positioning during adding the line between nodes #409
This commit is contained in:
ziajka 2019-06-28 08:57:31 +02:00 committed by GitHub
commit 4bbd78114d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/components/drawings-listeners/link-created/link-created.component.ts
View File

@ -35,12 +35,48 @@ export class LinkCreatedComponent implements OnInit, OnDestroy {
}
onLinkCreated(linkCreated: MapLinkCreated) {
const xLength = Math.abs(linkCreated.sourceNode.x - linkCreated.targetNode.x);
const yLength = Math.abs(linkCreated.sourceNode.y - linkCreated.targetNode.y);
const zLength = Math.sqrt(Math.pow(xLength, 2) + Math.pow(yLength, 2));
//from law of sines
const sinY = yLength/zLength;
const x = (45 / zLength) * xLength;
const y = (45 / zLength) * yLength;
let xLabelSourceNode = 0;
let yLabelSourceNode = 0;
let xLabelTargetNode = 0;
let yLabelTargetNode = 0;
if ((linkCreated.sourceNode.x <= linkCreated.targetNode.x) && (linkCreated.sourceNode.y <= linkCreated.targetNode.y)) {
xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) + Math.round(x) + 5;
yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) + Math.round(y) + 5;
xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) - Math.round(y) + 5 - Math.round(20 * sinY);
} else if ((linkCreated.sourceNode.x > linkCreated.targetNode.x) && (linkCreated.sourceNode.y < linkCreated.targetNode.y)) {
xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) + Math.round(y) + 5 - Math.round(20 * sinY);
xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) + Math.round(x) + 5;
yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) - Math.round(y) - 5;
} else if ((linkCreated.sourceNode.x < linkCreated.targetNode.x) && (linkCreated.sourceNode.y > linkCreated.targetNode.y)) {
xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) + Math.round(x) + 5 - Math.round(20 * sinY);
yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) - Math.round(y) - 5 - Math.round(20 * sinY);
xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) - Math.round(x) - 5;
yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) + Math.round(y) + 5;
} else if ((linkCreated.sourceNode.x >= linkCreated.targetNode.x) && (linkCreated.sourceNode.y >= linkCreated.targetNode.y)) {
xLabelSourceNode = Math.floor(linkCreated.sourceNode.width/2) - Math.round(x) - 5 - Math.round(20 * sinY);
yLabelSourceNode = Math.floor(linkCreated.sourceNode.height/2) - Math.round(y) + 5 - Math.round(20 * sinY);
xLabelTargetNode = Math.floor(linkCreated.targetNode.width/2) + Math.round(x) + 5;
yLabelTargetNode = Math.floor(linkCreated.targetNode.height/2) + Math.round(y) + 5;
}
const sourceNode = this.mapNodeToNode.convert(linkCreated.sourceNode);
const sourcePort = this.mapPortToPort.convert(linkCreated.sourcePort);
const targetNode = this.mapNodeToNode.convert(linkCreated.targetNode);
const targetPort = this.mapPortToPort.convert(linkCreated.targetPort);
this.linkService.createLink(this.server, sourceNode, sourcePort, targetNode, targetPort).subscribe(() => {
this.linkService.createLink(this.server, sourceNode, sourcePort, targetNode, targetPort, xLabelSourceNode, yLabelSourceNode, xLabelTargetNode, yLabelTargetNode).subscribe(() => {
this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => {
this.linksDataSource.set(links);
});

20
src/app/services/link.service.spec.ts
View File

@ -52,7 +52,7 @@ describe('LinkService', () => {
targetPort.port_number = 3;
targetPort.adapter_number = 4;
service.createLink(server, sourceNode, sourcePort, targetNode, targetPort).subscribe();
service.createLink(server, sourceNode, sourcePort, targetNode, targetPort, 0, 0, 10, 10).subscribe();
const req = httpTestingController.expectOne('http://127.0.0.1:3080/v2/projects/myproject/links');
expect(req.request.method).toEqual('POST');
@ -61,12 +61,26 @@ describe('LinkService', () => {
{
node_id: 'sourceid',
port_number: 1,
adapter_number: 2
adapter_number: 2,
label: {
rotation: 0,
style: "font-size: 10; font-style: Verdana",
text: sourcePort.short_name,
x: 0,
y: 0
}
},
{
node_id: 'targetid',
port_number: 3,
adapter_number: 4
adapter_number: 4,
label: {
rotation: 0,
style: "font-size: 10; font-style: Verdana",
text: sourcePort.short_name,
x: 10,
y: 10
}
}
]
});

21
src/app/services/link.service.ts
View File

@ -14,18 +14,33 @@ import { CapturingSettings } from '../models/capturingSettings';
export class LinkService {
constructor(private httpServer: HttpServer) {}
createLink(server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port) {
createLink(server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port,
xLabelSourceNode: number, yLabelSourceNode: number, xLabelTargetNode: number, yLabelTargetNode: number) {
return this.httpServer.post(server, `/projects/${source_node.project_id}/links`, {
nodes: [
{
node_id: source_node.node_id,
port_number: source_port.port_number,
adapter_number: source_port.adapter_number
adapter_number: source_port.adapter_number,
label: {
rotation: 0,
style: "font-size: 10; font-style: Verdana",
text: source_port.short_name,
x: xLabelSourceNode,
y: yLabelSourceNode
}
},
{
node_id: target_node.node_id,
port_number: target_port.port_number,
adapter_number: target_port.adapter_number
adapter_number: target_port.adapter_number,
label: {
rotation: 0,
style: "font-size: 10; font-style: Verdana",
text: target_port.short_name,
x: xLabelTargetNode,
y: yLabelTargetNode
}
}
]
});