diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 962c7e1e..28df5878 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -67,6 +67,7 @@ import { CreateSnapshotDialogComponent } from './components/snapshots/create-sna import { SnapshotsComponent } from './components/snapshots/snapshots.component'; import { SnapshotMenuItemComponent } from './components/snapshots/snapshot-menu-item/snapshot-menu-item.component'; import { MATERIAL_IMPORTS } from './material.imports'; +import { DrawingService } from './services/drawing.service'; if (environment.production) { @@ -131,6 +132,7 @@ if (environment.production) { ApplianceService, NodeService, LinkService, + DrawingService, IndexedDbService, HttpServer, SnapshotService, diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index 0161de52..43173aa4 100644 --- a/src/app/cartography/cartography.module.ts +++ b/src/app/cartography/cartography.module.ts @@ -16,7 +16,11 @@ import { MapChangeDetectorRef } from './services/map-change-detector-ref'; import { Context } from './models/context'; import { D3_MAP_IMPORTS } from './d3-map.imports'; import { CanvasSizeDetector } from './helpers/canvas-size-detector'; -import { MapListener } from './listeners/map-listener'; +import { MapListeners } from './listeners/map-listeners'; +import { DrawingsDraggableListener } from './listeners/drawings-draggable-listener'; +import { NodesDraggableListener } from './listeners/nodes-draggable-listener'; +import { DrawingsEventSource } from './events/drawings-event-source'; +import { NodesEventSource } from './events/nodes-event-source'; @NgModule({ @@ -40,7 +44,11 @@ import { MapListener } from './listeners/map-listener'; MapChangeDetectorRef, CanvasSizeDetector, Context, - MapListener, + MapListeners, + DrawingsDraggableListener, + NodesDraggableListener, + DrawingsEventSource, + NodesEventSource, ...D3_MAP_IMPORTS ], exports: [ MapComponent ] diff --git a/src/app/cartography/components/map/map.component.ts b/src/app/cartography/components/map/map.component.ts index e120afcb..9bc1a6f2 100644 --- a/src/app/cartography/components/map/map.component.ts +++ b/src/app/cartography/components/map/map.component.ts @@ -20,9 +20,11 @@ import { MapChangeDetectorRef } from '../../services/map-change-detector-ref'; import { NodeDragging, NodeDragged, NodeClicked } from '../../events/nodes'; import { LinkCreated } from '../../events/links'; import { CanvasSizeDetector } from '../../helpers/canvas-size-detector'; -import { SelectionManager } from '../../managers/selection-manager'; import { NodeWidget } from '../../widgets/node'; -import { MapListener } from '../../listeners/map-listener'; +import { MapListeners } from '../../listeners/map-listeners'; +import { DraggedDataEvent } from '../../events/event-source'; +import { NodesEventSource } from '../../events/nodes-event-source'; +import { DrawingsEventSource } from '../../events/drawings-event-source'; @Component({ @@ -39,16 +41,13 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { @Input() width = 1500; @Input() height = 600; - @Output() onNodeDragged = new EventEmitter(); + @Output() nodeDragged: EventEmitter>; + @Output() drawingDragged: EventEmitter>; @Output() onLinkCreated = new EventEmitter(); private parentNativeElement: any; private svg: Selection; - private onNodeDraggingSubscription: Subscription; - private onNodeClickedSubscription: Subscription; - private onNodeDraggedSubscription: Subscription; - private onChangesDetected: Subscription; protected settings = { @@ -59,8 +58,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { private context: Context, private mapChangeDetectorRef: MapChangeDetectorRef, private canvasSizeDetector: CanvasSizeDetector, - private mapListener: MapListener, - private selectionManager: SelectionManager, + private mapListeners: MapListeners, protected element: ElementRef, protected nodesWidget: NodesWidget, protected nodeWidget: NodeWidget, @@ -68,9 +66,13 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { protected interfaceLabelWidget: InterfaceLabelWidget, protected selectionToolWidget: SelectionTool, protected movingToolWidget: MovingTool, - public graphLayout: GraphLayout + public graphLayout: GraphLayout, + nodesEventSource: NodesEventSource, + drawingsEventSource: DrawingsEventSource, ) { this.parentNativeElement = element.nativeElement; + this.nodeDragged = nodesEventSource.dragged; + this.drawingDragged = drawingsEventSource.dragged; } @Input('show-interface-labels') @@ -118,67 +120,25 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { } } - ngOnDestroy() { - this.graphLayout.disconnect(this.svg); - this.onNodeDraggingSubscription.unsubscribe(); - this.onNodeClickedSubscription.unsubscribe(); - this.onNodeDraggedSubscription.unsubscribe(); - this.onChangesDetected.unsubscribe(); - this.mapListener.onDestroy(); - } - ngOnInit() { if (this.parentNativeElement !== null) { this.createGraph(this.parentNativeElement); } this.context.size = this.getSize(); - this.onNodeDraggingSubscription = this.nodeWidget.onNodeDragging.subscribe((eventNode: NodeDragging) => { - let nodes = this.selectionManager.getSelectedNodes(); - - if (nodes.filter((n: Node) => n.node_id === eventNode.node.node_id).length === 0) { - this.selectionManager.setSelectedNodes([eventNode.node]); - nodes = this.selectionManager.getSelectedNodes(); - } - - nodes.forEach((node: Node) => { - node.x += eventNode.event.dx; - node.y += eventNode.event.dy; - - this.nodesWidget.redrawNode(this.svg, node); - const links = this.links.filter((link) => link.target.node_id === node.node_id || link.source.node_id === node.node_id); - links.forEach((link) => { - this.linksWidget.redrawLink(this.svg, link); - }); - }); - - }); - - this.onNodeDraggedSubscription = this.nodeWidget.onNodeDragged.subscribe((eventNode: NodeDragged) => { - let nodes = this.selectionManager.getSelectedNodes(); - - if (nodes.filter((n: Node) => n.node_id === eventNode.node.node_id).length === 0) { - this.selectionManager.setSelectedNodes([eventNode.node]); - nodes = this.selectionManager.getSelectedNodes(); - } - - nodes.forEach((node) => { - this.onNodeDragged.emit(new NodeDragged(eventNode.event, node)); - }); - - }); - - this.onNodeClickedSubscription = this.nodeWidget.onNodeClicked.subscribe((nodeClickedEvent: NodeClicked) => { - this.selectionManager.setSelectedNodes([nodeClickedEvent.node]); - }); - this.onChangesDetected = this.mapChangeDetectorRef.changesDetected.subscribe(() => { if (this.mapChangeDetectorRef.hasBeenDrawn) { this.reload(); } }); - this.mapListener.onInit(this.svg); + this.mapListeners.onInit(this.svg); + } + + ngOnDestroy() { + this.graphLayout.disconnect(this.svg); + this.onChangesDetected.unsubscribe(); + this.mapListeners.onDestroy(); } public createGraph(domElement: HTMLElement) { diff --git a/src/app/cartography/events/draggable.ts b/src/app/cartography/events/draggable.ts index 3cefb1ee..e121b8e4 100644 --- a/src/app/cartography/events/draggable.ts +++ b/src/app/cartography/events/draggable.ts @@ -3,6 +3,8 @@ import { drag, DraggedElementBaseType } from "d3-drag"; import { event } from "d3-selection"; class DraggableEvent { + public x: number; + public y: number; public dx: number; public dy: number; } @@ -46,18 +48,24 @@ export class Draggable { const evt = new DraggableStart(datum); evt.dx = event.dx; evt.dy = event.dy; + evt.x = event.x; + evt.y = event.y; this.start.emit(evt); }) .on('drag', (datum: Datum) => { const evt = new DraggableDrag(datum); evt.dx = event.dx; evt.dy = event.dy; + evt.x = event.x; + evt.y = event.y; this.drag.emit(evt); }) .on('end', (datum: Datum) => { const evt = new DraggableEnd(datum); evt.dx = event.dx; evt.dy = event.dy; + evt.x = event.x; + evt.y = event.y; this.end.emit(evt); }); } diff --git a/src/app/cartography/events/drawings-event-source.ts b/src/app/cartography/events/drawings-event-source.ts new file mode 100644 index 00000000..a24f2b6b --- /dev/null +++ b/src/app/cartography/events/drawings-event-source.ts @@ -0,0 +1,9 @@ +import { Injectable, EventEmitter } from "@angular/core"; +import { Drawing } from "../models/drawing"; +import { DraggedDataEvent } from "./event-source"; + + +@Injectable() +export class DrawingsEventSource { + public dragged = new EventEmitter>(); +} \ No newline at end of file diff --git a/src/app/cartography/events/event-source.ts b/src/app/cartography/events/event-source.ts new file mode 100644 index 00000000..26bc15df --- /dev/null +++ b/src/app/cartography/events/event-source.ts @@ -0,0 +1,9 @@ +export class DataEventSource { + constructor( + public datum: T + ) {} +} + + +// class CreatedDataEvent extends DataEventSource {} +export class DraggedDataEvent extends DataEventSource {} diff --git a/src/app/cartography/events/nodes-event-source.ts b/src/app/cartography/events/nodes-event-source.ts new file mode 100644 index 00000000..bd237506 --- /dev/null +++ b/src/app/cartography/events/nodes-event-source.ts @@ -0,0 +1,9 @@ +import { Injectable, EventEmitter } from "@angular/core"; +import { Node } from "../models/node"; +import { DraggedDataEvent } from "./event-source"; + + +@Injectable() +export class NodesEventSource { + public dragged = new EventEmitter>(); +} \ No newline at end of file diff --git a/src/app/cartography/listeners/drawings-draggable-listener.ts b/src/app/cartography/listeners/drawings-draggable-listener.ts new file mode 100644 index 00000000..420b840b --- /dev/null +++ b/src/app/cartography/listeners/drawings-draggable-listener.ts @@ -0,0 +1,55 @@ +import { Injectable } from "@angular/core"; +import { DrawingsWidget } from "../widgets/drawings"; +import { DraggableStart } from "../events/draggable"; +import { Drawing } from "../models/drawing"; +import { Subscription } from "rxjs"; +import { SelectionManager } from "../managers/selection-manager"; +import { DrawingsEventSource } from "../events/drawings-event-source"; +import { DraggedDataEvent } from "../events/event-source"; + + +@Injectable() +export class DrawingsDraggableListener { + private start: Subscription; + private drag: Subscription; + private end: Subscription; + + constructor( + private drawingsWidget: DrawingsWidget, + private selectionManager: SelectionManager, + private drawingsEventSource: DrawingsEventSource + ) { + } + + public onInit(svg: any) { + this.start = this.drawingsWidget.draggable.start.subscribe((evt: DraggableStart) => { + let drawings = this.selectionManager.getSelectedDrawings(); + if (drawings.filter((n: Drawing) => n.drawing_id === evt.datum.drawing_id).length === 0) { + this.selectionManager.setSelectedDrawings([evt.datum]); + drawings = this.selectionManager.getSelectedDrawings(); + } + }); + + this.drag = this.drawingsWidget.draggable.drag.subscribe((evt: DraggableStart) => { + let drawings = this.selectionManager.getSelectedDrawings(); + drawings.forEach((drawing: Drawing) => { + drawing.x += evt.dx; + drawing.y += evt.dy; + this.drawingsWidget.redrawDrawing(svg, drawing); + }); + }); + + this.end = this.drawingsWidget.draggable.end.subscribe((evt: DraggableStart) => { + let drawings = this.selectionManager.getSelectedDrawings(); + drawings.forEach((drawing: Drawing) => { + this.drawingsEventSource.dragged.emit(new DraggedDataEvent(drawing)); + }); + }); + } + + public onDestroy() { + this.start.unsubscribe(); + this.drag.unsubscribe(); + this.end.unsubscribe(); + } +} \ No newline at end of file diff --git a/src/app/cartography/listeners/map-listener.ts b/src/app/cartography/listeners/map-listener.ts index 61260ef7..50c7a2bb 100644 --- a/src/app/cartography/listeners/map-listener.ts +++ b/src/app/cartography/listeners/map-listener.ts @@ -1,53 +1,4 @@ -import { Injectable } from "@angular/core"; -import { DrawingsWidget } from "../widgets/drawings"; -import { DraggableStart } from "../events/draggable"; -import { Drawing } from "../models/drawing"; -import { Subscription } from "rxjs"; -import { SelectionManager } from "../managers/selection-manager"; - - -@Injectable() -export class MapListener { - private start: Subscription; - private drag: Subscription; - private end: Subscription; - - constructor( - private drawingsWidget: DrawingsWidget, - private selectionManager: SelectionManager - ) { - } - - public onInit(svg: any) { - this.start = this.drawingsWidget.draggable.start.subscribe((evt: DraggableStart) => { - let drawings = this.selectionManager.getSelectedDrawings(); - - if (drawings.filter((n: Drawing) => n.drawing_id === evt.datum.drawing_id).length === 0) { - this.selectionManager.setSelectedDrawings([evt.datum]); - drawings = this.selectionManager.getSelectedDrawings(); - } - }); - - this.drag = this.drawingsWidget.draggable.drag.subscribe((evt: DraggableStart) => { - let drawings = this.selectionManager.getSelectedDrawings(); - drawings.forEach((drawing: Drawing) => { - drawing.x += evt.dx; - drawing.y += evt.dy; - this.drawingsWidget.redrawDrawing(svg, drawing); - }); - }); - - this.end = this.drawingsWidget.draggable.end.subscribe((evt: DraggableStart) => { - let drawings = this.selectionManager.getSelectedDrawings(); - drawings.forEach((drawing: Drawing) => { - - }); - }); - } - - public onDestroy() { - this.start.unsubscribe(); - this.drag.unsubscribe(); - this.end.unsubscribe(); - } +export interface MapListener { + onInit(svg: any); + onDestroy(); } \ No newline at end of file diff --git a/src/app/cartography/listeners/map-listeners.ts b/src/app/cartography/listeners/map-listeners.ts new file mode 100644 index 00000000..1147fe8e --- /dev/null +++ b/src/app/cartography/listeners/map-listeners.ts @@ -0,0 +1,29 @@ +import { Injectable } from "@angular/core"; +import { MapListener } from "./map-listener"; +import { DrawingsDraggableListener } from "./drawings-draggable-listener"; +import { NodesDraggableListener } from "./nodes-draggable-listener"; + + +@Injectable() +export class MapListeners { + private listeners: MapListener[] = []; + constructor( + private drawingsDraggableListener: DrawingsDraggableListener, + private nodesDraggableListener: NodesDraggableListener + ) { + this.listeners.push(this.drawingsDraggableListener); + this.listeners.push(this.nodesDraggableListener); + } + + public onInit(svg: any) { + this.listeners.forEach((listener) => { + listener.onInit(svg); + }); + } + + public onDestroy() { + this.listeners.forEach((listener) => { + listener.onDestroy(); + }); + } +} \ No newline at end of file diff --git a/src/app/cartography/listeners/nodes-draggable-listener.ts b/src/app/cartography/listeners/nodes-draggable-listener.ts new file mode 100644 index 00000000..8c339976 --- /dev/null +++ b/src/app/cartography/listeners/nodes-draggable-listener.ts @@ -0,0 +1,64 @@ +import { Injectable } from "@angular/core"; +import { NodesWidget } from "../widgets/nodes"; +import { DraggableStart } from "../events/draggable"; +import { Node } from "../models/node"; +import { Subscription } from "rxjs"; +import { SelectionManager } from "../managers/selection-manager"; +import { LinksWidget } from "../widgets/links"; +import { GraphLayout } from "../widgets/graph-layout"; +import { NodesEventSource } from "../events/nodes-event-source"; +import { DraggedDataEvent } from "../events/event-source"; + + +@Injectable() +export class NodesDraggableListener { + private start: Subscription; + private drag: Subscription; + private end: Subscription; + + constructor( + private nodesWidget: NodesWidget, + private linksWidget: LinksWidget, + private selectionManager: SelectionManager, + private graphLayout: GraphLayout, + private nodesEventSource: NodesEventSource + ) { + } + + public onInit(svg: any) { + this.start = this.nodesWidget.draggable.start.subscribe((evt: DraggableStart) => { + let nodes = this.selectionManager.getSelectedNodes(); + if (nodes.filter((n: Node) => n.node_id === evt.datum.node_id).length === 0) { + this.selectionManager.setSelectedNodes([evt.datum]); + nodes = this.selectionManager.getSelectedNodes(); + } + }); + + this.drag = this.nodesWidget.draggable.drag.subscribe((evt: DraggableStart) => { + let nodes = this.selectionManager.getSelectedNodes(); + nodes.forEach((node: Node) => { + node.x += evt.dx; + node.y += evt.dy; + this.nodesWidget.redrawNode(svg, node); + + const links = this.graphLayout.getLinks().filter((link) => link.target.node_id === node.node_id || link.source.node_id === node.node_id); + links.forEach((link) => { + this.linksWidget.redrawLink(svg, link); + }); + }); + }); + + this.end = this.nodesWidget.draggable.end.subscribe((evt: DraggableStart) => { + let nodes = this.selectionManager.getSelectedNodes(); + nodes.forEach((node: Node) => { + this.nodesEventSource.dragged.emit(new DraggedDataEvent(node)); + }); + }); + } + + public onDestroy() { + this.start.unsubscribe(); + this.drag.unsubscribe(); + this.end.unsubscribe(); + } +} \ No newline at end of file diff --git a/src/app/cartography/widgets/graph-layout.ts b/src/app/cartography/widgets/graph-layout.ts index d0e75077..233311bb 100644 --- a/src/app/cartography/widgets/graph-layout.ts +++ b/src/app/cartography/widgets/graph-layout.ts @@ -36,6 +36,10 @@ export class GraphLayout implements Widget { this.links = links; } + public getLinks() { + return this.links; + } + public setDrawings(drawings: Drawing[]) { this.drawings = drawings; } diff --git a/src/app/cartography/widgets/node.ts b/src/app/cartography/widgets/node.ts index eed25b93..60e771b1 100644 --- a/src/app/cartography/widgets/node.ts +++ b/src/app/cartography/widgets/node.ts @@ -118,23 +118,5 @@ export class NodeWidget implements Widget { } return n.label.y + bbox.height - NodeWidget.NODE_LABEL_MARGIN; }); - - const callback = function (this: SVGGElement, n: Node) { - const e: D3DragEvent = event; - self.onNodeDragging.emit(new NodeDragging(e, n)); - }; - - const dragging = () => { - return drag() - .on('drag', callback) - .on('end', (n: Node) => { - const e: D3DragEvent = event; - self.onNodeDragged.emit(new NodeDragged(e, n)); - }); - }; - - if (this.draggingEnabled) { - node_body_merge.call(dragging()); - } } } diff --git a/src/app/cartography/widgets/nodes.ts b/src/app/cartography/widgets/nodes.ts index a8c78884..849e8902 100644 --- a/src/app/cartography/widgets/nodes.ts +++ b/src/app/cartography/widgets/nodes.ts @@ -5,12 +5,15 @@ import { Node } from "../models/node"; import { SVGSelection } from "../models/types"; import { Layer } from "../models/layer"; import { NodeWidget } from "./node"; +import { Draggable } from "../events/draggable"; @Injectable() export class NodesWidget implements Widget { static NODE_LABEL_MARGIN = 3; + public draggable = new Draggable(); + constructor( private nodeWidget: NodeWidget ) { @@ -44,6 +47,8 @@ export class NodesWidget implements Widget { node .exit() .remove(); + + this.draggable.call(merge); } private selectNode(view: SVGSelection, node: Node) { diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index 806473b6..7ff2ce48 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -10,7 +10,8 @@ [selection-tool]="tools.selection" [moving-tool]="tools.moving" [draw-link-tool]="tools.draw_link" - (onNodeDragged)="onNodeDragged($event)" + (nodeDragged)="onNodeDragged($event)" + (drawingDragged)="onDrawingDragged($event)" (onLinkCreated)="onLinkCreated($event)" >
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index b262ad92..e3873c93 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -30,6 +30,8 @@ import { MapChangeDetectorRef } from '../../cartography/services/map-change-dete import { NodeContextMenu, NodeDragged } from '../../cartography/events/nodes'; import { LinkCreated } from '../../cartography/events/links'; import { NodeWidget } from '../../cartography/widgets/node'; +import { DraggedDataEvent } from '../../cartography/events/event-source'; +import { DrawingService } from '../../services/drawing.service'; @Component({ @@ -70,6 +72,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private symbolService: SymbolService, private nodeService: NodeService, private linkService: LinkService, + private drawingService: DrawingService, private progressService: ProgressService, private projectWebServiceHandler: ProjectWebServiceHandler, private mapChangeDetectorRef: MapChangeDetectorRef, @@ -216,12 +219,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy { }); } - onNodeDragged(nodeEvent: NodeDragged) { - this.nodesDataSource.update(nodeEvent.node); + onNodeDragged(draggedEvent: DraggedDataEvent) { + this.nodesDataSource.update(draggedEvent.datum); this.nodeService - .updatePosition(this.server, nodeEvent.node, nodeEvent.node.x, nodeEvent.node.y) - .subscribe((n: Node) => { - this.nodesDataSource.update(n); + .updatePosition(this.server, draggedEvent.datum, draggedEvent.datum.x, draggedEvent.datum.y) + .subscribe((node: Node) => { + this.nodesDataSource.update(node); + }); + } + + onDrawingDragged(draggedEvent: DraggedDataEvent) { + this.drawingsDataSource.update(draggedEvent.datum); + this.drawingService + .updatePosition(this.server, draggedEvent.datum, draggedEvent.datum.x, draggedEvent.datum.y) + .subscribe((drawing: Drawing) => { + this.drawingsDataSource.update(drawing); }); } diff --git a/src/app/services/drawing.service.spec.ts b/src/app/services/drawing.service.spec.ts new file mode 100644 index 00000000..85a5c3f7 --- /dev/null +++ b/src/app/services/drawing.service.spec.ts @@ -0,0 +1,95 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { HttpClient } from '@angular/common/http'; +import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing'; +import { HttpServer } from './http-server.service'; +import { Server } from '../models/server'; +import { Drawing } from '../cartography/models/drawing'; +import { getTestServer } from './testing'; +import { DrawingService } from './drawing.service'; +import { AppTestingModule } from "../testing/app-testing/app-testing.module"; + + +describe('DrawingService', () => { + let httpClient: HttpClient; + let httpTestingController: HttpTestingController; + let httpServer: HttpServer; + let service: DrawingService; + let server: Server; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + HttpClientTestingModule, + AppTestingModule + ], + providers: [ + HttpServer, + DrawingService + ] + }); + + httpClient = TestBed.get(HttpClient); + httpTestingController = TestBed.get(HttpTestingController); + httpServer = TestBed.get(HttpServer); + service = TestBed.get(DrawingService); + server = getTestServer(); + }); + + afterEach(() => { + httpTestingController.verify(); + }); + + it('should be created', inject([DrawingService], (service: DrawingService) => { + expect(service).toBeTruthy(); + })); + + it('should updatePosition of drawing', inject([DrawingService], (service: DrawingService) => { + const drawing = new Drawing(); + drawing.project_id = "myproject"; + drawing.drawing_id = "id"; + + service.updatePosition(server, drawing, 10, 20).subscribe(); + + const req = httpTestingController.expectOne( + 'http://127.0.0.1:3080/v2/projects/myproject/drawings/id'); + expect(req.request.method).toEqual("PUT"); + expect(req.request.body).toEqual({ + 'x': 10, + 'y': 20 + }); + })); + + it('should update drawing', inject([DrawingService], (service: DrawingService) => { + const drawing = new Drawing(); + drawing.project_id = "myproject"; + drawing.drawing_id = "id"; + drawing.x = 10; + drawing.y = 20; + drawing.z = 30; + + service.update(server, drawing).subscribe(); + + const req = httpTestingController.expectOne( + 'http://127.0.0.1:3080/v2/projects/myproject/drawings/id'); + expect(req.request.method).toEqual("PUT"); + expect(req.request.body).toEqual({ + 'x': 10, + 'y': 20, + 'z': 30 + }); + })); + + it('should delete drawing', inject([DrawingService], (service: DrawingService) => { + const drawing = new Drawing(); + drawing.project_id = "myproject"; + drawing.drawing_id = "id"; + + service.delete(server, drawing).subscribe(); + + const req = httpTestingController.expectOne( + 'http://127.0.0.1:3080/v2/projects/myproject/drawings/id'); + expect(req.request.method).toEqual("DELETE"); + })); + +}); diff --git a/src/app/services/drawing.service.ts b/src/app/services/drawing.service.ts new file mode 100644 index 00000000..31ef46a7 --- /dev/null +++ b/src/app/services/drawing.service.ts @@ -0,0 +1,36 @@ +import { Injectable } from '@angular/core'; +import { Drawing } from '../cartography/models/drawing'; +import { Observable } from 'rxjs'; + +import 'rxjs/add/operator/map'; +import { Server } from "../models/server"; +import { HttpServer } from "./http-server.service"; + + +@Injectable() +export class DrawingService { + + constructor(private httpServer: HttpServer) { } + + updatePosition(server: Server, drawing: Drawing, x: number, y: number): Observable { + return this.httpServer + .put(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, { + 'x': x, + 'y': y + }); + } + + update(server: Server, drawing: Drawing): Observable { + return this.httpServer + .put(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, { + 'x': drawing.x, + 'y': drawing.y, + 'z': drawing.z + }); + } + + delete(server: Server, drawing: Drawing) { + return this.httpServer.delete(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`); + } + +}