Update nodes and drawings at the same time

src/app/cartography/components/map/map.component.ts

@@ -145,12 +145,12 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
 
     this.nodeDraggedSub = this.nodesEventSource.dragged.subscribe((evt) => {
       const converted = evt.datum.map((e) => this.mapNodeToNode.convert(e));
-      this.nodeDragged.emit(new DraggedDataEvent<Node[]>(converted));
+      this.nodeDragged.emit(new DraggedDataEvent<Node[]>(converted, evt.dx, evt.dy));
     });
 
     this.drawingDraggedSub = this.drawingsEventSource.dragged.subscribe((evt) => {
       const converted = evt.datum.map((e) => this.mapDrawingToDrawing.convert(e));
-      this.drawingDragged.emit(new DraggedDataEvent<Drawing[]>(converted));
+      this.drawingDragged.emit(new DraggedDataEvent<Drawing[]>(converted, evt.dx, evt.dy));
     });
 
     this.selectionChanged = this.selectionManager.subscribe(this.selectionToolWidget.rectangleSelected);

src/app/cartography/datasources/datasource.ts

@@ -38,13 +38,19 @@ export abstract class DataSource<T> {
     this.dataChange.next(this.data);
   }
 
+  public get(key: string | number) {
+    const index = this.data.findIndex((i: T) => this.getItemKey(i) === key);
+    if (index >= 0) {
+      return this.data[index];
+    }
+  }
+
   public update(item: T) {
     const index = this.findIndex(item);
     if (index >= 0) {
       const updated = Object.assign(this.data[index], item);
       this.data[index] = updated;
       this.dataChange.next(this.data);
-      console.log("Item updated");
       this.itemUpdated.next(updated);
     }
   }

src/app/cartography/events/draggable.ts

@@ -43,14 +43,16 @@ export class Draggable<GElement extends DraggedElementBaseType, Datum> {
   }
 
   private behaviour() {
+    let startEvt;
+
     return drag<GElement, Datum>()
       .on('start', (datum: Datum) => {
-        const evt = new DraggableStart<Datum>(datum);
+        startEvt = new DraggableStart<Datum>(datum);
-        evt.dx = event.dx;
+        startEvt.dx = event.dx;
-        evt.dy = event.dy;
+        startEvt.dy = event.dy;
-        evt.x = event.x;
+        startEvt.x = event.x;
-        evt.y = event.y;
+        startEvt.y = event.y;
-        this.start.emit(evt);
+        this.start.emit(startEvt);
       })
       .on('drag', (datum: Datum) => {
         const evt = new DraggableDrag<Datum>(datum);
@@ -62,10 +64,11 @@ export class Draggable<GElement extends DraggedElementBaseType, Datum> {
       })
       .on('end', (datum: Datum) => {
         const evt = new DraggableEnd<Datum>(datum);
-        evt.dx = event.dx;
+        evt.dx = event.x - startEvt.x;
-        evt.dy = event.dy;
+        evt.dy = event.y - startEvt.y;
         evt.x = event.x;
         evt.y = event.y;
+        console.log(evt);
         this.end.emit(evt);
       });
   }

src/app/cartography/events/event-source.ts

@@ -1,6 +1,8 @@
 export class DataEventSource<T> {
   constructor(
-    public datum: T
+    public datum: T,
+    public dx: number,
+    public dy: number
   ) {}
 }
 

src/app/cartography/listeners/nodes-draggable-listener.ts

@@ -86,13 +86,15 @@ export class NodesDraggableListener {
       this.nodesWidget.draggable.end,
       this.drawingsWidget.draggable.end
     ).subscribe((evt: DraggableEnd<any>) => {
+      console.log(evt);
       const selected = this.selectionManager.getSelected();
 
       const updatedNodes = selected.filter((item) => item instanceof MapNode).map((item: MapNode) => item);
-      this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode[]>(updatedNodes))
 
       const updatedDrawings = selected.filter((item) => item instanceof MapDrawing).map((item: MapDrawing) => item);
-      this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing[]>(updatedDrawings));
+
+      this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode[]>(updatedNodes, evt.dx, evt.dy));
+      this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing[]>(updatedDrawings, evt.dx, evt.dy));
     });
 
   }

src/app/cartography/managers/graph-data-manager.ts

@@ -27,6 +27,8 @@ export class GraphDataManager {
   ) {}
 
   public setNodes(nodes: Node[]) {
+    console.log("set all nodes");
+    
     const mapNodes = nodes.map((n) => this.nodeToMapNode.convert(n));
     this.mapNodesDataSource.set(mapNodes);
 

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

@@ -214,8 +214,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   onNodeDragged(draggedEvent: DraggedDataEvent<Node[]>) {
-    draggedEvent.datum.forEach((node: Node) => {
+    draggedEvent.datum.forEach((n: Node) => {
-      this.nodesDataSource.update(node);
+      const node = this.nodesDataSource.get(n.node_id);
+      node.x += draggedEvent.dx;
+      node.y += draggedEvent.dy;
+
       this.nodeService
         .updatePosition(this.server, node, node.x, node.y)
         .subscribe((serverNode: Node) => {
@@ -225,8 +228,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   onDrawingDragged(draggedEvent: DraggedDataEvent<Drawing[]>) {
-    draggedEvent.datum.forEach((drawing: Drawing) => {
+    draggedEvent.datum.forEach((d: Drawing) => {
-      this.drawingsDataSource.update(drawing);
+
+      const drawing = this.drawingsDataSource.get(d.drawing_id);
+      drawing.x += draggedEvent.dx;
+      drawing.y += draggedEvent.dy;
+
       this.drawingService
         .updatePosition(this.server, drawing, drawing.x, drawing.y)
         .subscribe((serverDrawing: Drawing) => {