Snap to grid for nodes applied

src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.ts

@@ -7,6 +7,7 @@ import { DraggedDataEvent } from '../../../cartography/events/event-source';
 import { MapDrawing } from '../../../cartography/models/map/map-drawing';
 import { Drawing } from '../../../cartography/models/drawing';
 import { DrawingsEventSource } from '../../../cartography/events/drawings-event-source';
+import { Project } from '../../../models/project';
 
 @Component({
   selector: 'app-drawing-dragged',
@@ -15,6 +16,7 @@ import { DrawingsEventSource } from '../../../cartography/events/drawings-event-
 })
 export class DrawingDraggedComponent implements OnInit, OnDestroy {
   @Input() server: Server;
+  @Input() project: Project;
   private drawingDragged: Subscription;
 
   constructor(
@@ -33,7 +35,7 @@ export class DrawingDraggedComponent implements OnInit, OnDestroy {
     drawing.y += draggedEvent.dy;
 
     this.drawingService
-      .updatePosition(this.server, drawing, drawing.x, drawing.y)
+      .updatePosition(this.server, this.project, drawing, drawing.x, drawing.y)
       .subscribe((serverDrawing: Drawing) => {
         this.drawingsDataSource.update(serverDrawing);
       });

src/app/components/drawings-listeners/node-dragged/node-dragged.component.ts

@@ -7,6 +7,7 @@ import { Server } from '../../../models/server';
 import { NodesEventSource } from '../../../cartography/events/nodes-event-source';
 import { MapNode } from '../../../cartography/models/map/map-node';
 import { Subscription } from 'rxjs';
+import { Project } from '../../../models/project';
 
 @Component({
   selector: 'app-node-dragged',
@@ -15,6 +16,7 @@ import { Subscription } from 'rxjs';
 })
 export class NodeDraggedComponent implements OnInit, OnDestroy {
   @Input() server: Server;
+  @Input() project: Project
   private nodeDragged: Subscription;
 
   constructor(
@@ -32,7 +34,7 @@ export class NodeDraggedComponent implements OnInit, OnDestroy {
     node.x += draggedEvent.dx;
     node.y += draggedEvent.dy;
 
-    this.nodeService.updatePosition(this.server, node, node.x, node.y).subscribe((serverNode: Node) => {
+    this.nodeService.updatePosition(this.server, this.project, node, node.x, node.y).subscribe((serverNode: Node) => {
       this.nodesDataSource.update(serverNode);
     });
   }

src/app/components/project-map/project-map.component.html

@@ -158,11 +158,11 @@
 <app-project-map-shortcuts *ngIf="project" [project]="project" [server]="server"></app-project-map-shortcuts>
 <app-draw-link-tool [links]="links" *ngIf="tools.draw_link"></app-draw-link-tool>
 
-<app-drawing-dragged [server]="server"></app-drawing-dragged>
+<app-drawing-dragged [server]="server" [project]="project"></app-drawing-dragged>
 <app-drawing-resized [server]="server"></app-drawing-resized>
 <app-interface-label-dragged [server]="server"></app-interface-label-dragged>
 <app-link-created [server]="server" [project]="project"></app-link-created>
-<app-node-dragged [server]="server"></app-node-dragged>
+<app-node-dragged [server]="server" [project]="project"></app-node-dragged>
 <app-node-label-dragged [server]="server"></app-node-label-dragged>
 <app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
 <app-text-edited [server]="server"></app-text-edited>

src/app/services/drawing.service.ts

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 import 'rxjs/add/operator/map';
 import { Server } from '../models/server';
 import { HttpServer } from './http-server.service';
+import { Project } from '../models/project';
 
 @Injectable()
 export class DrawingService {
@@ -29,10 +30,17 @@ export class DrawingService {
     });
   }
 
-  updatePosition(server: Server, drawing: Drawing, x: number, y: number): Observable<Drawing> {
+  updatePosition(server: Server, project: Project, drawing: Drawing, x: number, y: number): Observable<Drawing> {
+    let xPosition: number = Math.round(x);
+    let yPosition: number = Math.round(y);
+
+    if (project.snap_to_grid) {
+
+    }
+
     return this.httpServer.put<Drawing>(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, {
-      x: Math.round(x),
+      x: xPosition,
-      y: Math.round(y)
+      y: yPosition
     });
   }
 

src/app/services/node.service.ts

@@ -53,10 +53,21 @@ export class NodeService {
     });
   }
 
-  updatePosition(server: Server, node: Node, x: number, y: number): Observable<Node> {
+  updatePosition(server: Server, project: Project, node: Node, x: number, y: number): Observable<Node> {
+    let xPosition: number = Math.round(x);
+    let yPosition: number = Math.round(y);
+
+    if (project.snap_to_grid) {
+      xPosition = Math.round(xPosition / project.grid_size) * project.grid_size;
+      yPosition = Math.round(yPosition / project.grid_size) * project.grid_size;
+
+      xPosition = Math.round(xPosition - node.width/2);
+      yPosition = Math.round(yPosition - node.height/2);
+    }
+
     return this.httpServer.put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
-      x: Math.round(x),
+      x: xPosition,
-      y: Math.round(y)
+      y: yPosition
     });
   }