Snap to grid for nodes applied

This commit is contained in:
Piotr Pekala 2019-10-24 07:34:01 -07:00
parent 2f1d6d80d5
commit 6b804fa525
5 changed files with 33 additions and 10 deletions

View File

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

View File

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

View File

@ -158,11 +158,11 @@
<app-project-map-shortcuts *ngIf="project" [project]="project" [server]="server"></app-project-map-shortcuts> <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-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-drawing-resized [server]="server"></app-drawing-resized>
<app-interface-label-dragged [server]="server"></app-interface-label-dragged> <app-interface-label-dragged [server]="server"></app-interface-label-dragged>
<app-link-created [server]="server" [project]="project"></app-link-created> <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-node-label-dragged [server]="server"></app-node-label-dragged>
<app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added> <app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
<app-text-edited [server]="server"></app-text-edited> <app-text-edited [server]="server"></app-text-edited>

View File

@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/map';
import { Server } from '../models/server'; import { Server } from '../models/server';
import { HttpServer } from './http-server.service'; import { HttpServer } from './http-server.service';
import { Project } from '../models/project';
@Injectable() @Injectable()
export class DrawingService { 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}`, { 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
}); });
} }

View File

@ -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}`, { 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
}); });
} }