diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f57f45f1..53c0ca2b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -47,6 +47,7 @@ import { StopNodeActionComponent } from './shared/node-context-menu/actions/stop import { ApplianceComponent } from './appliance/appliance.component'; import { ApplianceListDialogComponent } from './appliance/appliance-list-dialog/appliance-list-dialog.component'; import { NodeSelectInterfaceComponent } from './shared/node-select-interface/node-select-interface.component'; +import {LinkService} from "./shared/services/link.service"; @NgModule({ @@ -95,6 +96,7 @@ import { NodeSelectInterfaceComponent } from './shared/node-select-interface/nod ServerService, ApplianceService, NodeService, + LinkService, IndexedDbService, HttpServer, SnapshotService, diff --git a/src/app/cartography/shared/widgets/drawing-line.widget.ts b/src/app/cartography/shared/widgets/drawing-line.widget.ts index e5071b00..0904a219 100644 --- a/src/app/cartography/shared/widgets/drawing-line.widget.ts +++ b/src/app/cartography/shared/widgets/drawing-line.widget.ts @@ -7,11 +7,14 @@ import {event, mouse, select} from "d3-selection"; export class DrawingLineWidget { private drawingLine: DrawingLine = new DrawingLine(); private selection: SVGSelection; + private drawing = false; + private data = {}; - public start(x: number, y: number) { + public start(x: number, y: number, data: {}) { const self = this; - console.log("Start", x, y); + this.drawing = true; + this.data = data; this.drawingLine.start = new Point(x, y); this.drawingLine.end = new Point(x, y); @@ -27,12 +30,15 @@ export class DrawingLineWidget { this.draw(); } - public update(x: number, y: number) { - this.drawingLine.end = new Point(x, y); + public isDrawing() { + return this.drawing; } public stop() { - + this.drawing = false; + this.selection.on('mousemove', null); + this.draw(); + return this.data; } public connect(selection: SVGSelection) { @@ -44,10 +50,14 @@ export class DrawingLineWidget { } public draw() { - const link_data = [[ - [this.drawingLine.start.x, this.drawingLine.start.y], - [this.drawingLine.end.x, this.drawingLine.end.y] - ]]; + let link_data = []; + + if (this.drawing) { + link_data = [[ + [this.drawingLine.start.x, this.drawingLine.start.y], + [this.drawingLine.end.x, this.drawingLine.end.y] + ]]; + } const value_line = line(); @@ -66,6 +76,7 @@ export class DrawingLineWidget { .attr('d', value_line) .attr('stroke', '#000') .attr('stroke-width', '2'); - + + tool.exit().remove(); } } diff --git a/src/app/project-map/project-map.component.ts b/src/app/project-map/project-map.component.ts index 7dca5c5e..ffe4ea4d 100644 --- a/src/app/project-map/project-map.component.ts +++ b/src/app/project-map/project-map.component.ts @@ -32,6 +32,7 @@ import {NodeService} from "../shared/services/node.service"; import {Symbol} from "../shared/models/symbol"; import {NodeSelectInterfaceComponent} from "../shared/node-select-interface/node-select-interface.component"; import {Port} from "../shared/models/port"; +import {LinkService} from "../shared/services/link.service"; @Component({ @@ -65,6 +66,7 @@ export class ProjectMapComponent implements OnInit { private symbolService: SymbolService, private snapshotService: SnapshotService, private nodeService: NodeService, + private linkService: LinkService, private dialog: MatDialog, private progressDialogService: ProgressDialogService, private toastyService: ToastyService) { @@ -269,8 +271,27 @@ export class ProjectMapComponent implements OnInit { public onChooseInterface(event) { const node: Node = event.node; const port: Port = event.port; + const drawingLineTool = this.mapChild.graphLayout.getDrawingLineTool(); + if (drawingLineTool.isDrawing()) { + const data = drawingLineTool.stop(); + this.onLineCreation(data['node'], data['port'], node, port); + } else { + drawingLineTool.start(node.x + node.width / 2., node.y + node.height / 2., { + 'node': node, + 'port': port + }); + } + } - this.mapChild.graphLayout.getDrawingLineTool().start(node.x + node.width / 2., node.y + node.height / 2.); + public onLineCreation(source_node: Node, source_port: Port, target_node: Node, target_port: Port) { + this.linkService + .createLink(this.server, source_node, source_port, target_node, target_port) + .subscribe(() => { + this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => { + this.links = links; + this.mapChild.reload(); + }); + }); } } diff --git a/src/app/shared/services/link.service.spec.ts b/src/app/shared/services/link.service.spec.ts new file mode 100644 index 00000000..d680f341 --- /dev/null +++ b/src/app/shared/services/link.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { LinkService } from './link.service'; + +describe('LinkService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [LinkService] + }); + }); + + it('should be created', inject([LinkService], (service: LinkService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/shared/services/link.service.ts b/src/app/shared/services/link.service.ts new file mode 100644 index 00000000..7cb5cd0e --- /dev/null +++ b/src/app/shared/services/link.service.ts @@ -0,0 +1,37 @@ +import { Injectable } from '@angular/core'; +import { Node } from '../../cartography/shared/models/node.model'; +import { Observable } from 'rxjs/Observable'; + +import 'rxjs/add/operator/map'; +import { Server } from "../models/server"; +import { HttpServer } from "./http-server.service"; +import {Response} from "@angular/http"; +import {Port} from "../models/port"; + +@Injectable() +export class LinkService { + + + constructor(private httpServer: HttpServer) { } + + createLink( + server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port): Observable { + 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 + }, + { + node_id: target_node.node_id, + port_number: target_port.port_number, + adapter_number: target_port.adapter_number + } + ]}); + } + +}