diff --git a/src/app/cartography/components/map/map.component.ts b/src/app/cartography/components/map/map.component.ts index e9c95d06..63f88415 100644 --- a/src/app/cartography/components/map/map.component.ts +++ b/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(converted)); + this.nodeDragged.emit(new DraggedDataEvent(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(converted)); + this.drawingDragged.emit(new DraggedDataEvent(converted, evt.dx, evt.dy)); }); this.selectionChanged = this.selectionManager.subscribe(this.selectionToolWidget.rectangleSelected); diff --git a/src/app/cartography/datasources/datasource.ts b/src/app/cartography/datasources/datasource.ts index 0e5452ec..b6e31b10 100644 --- a/src/app/cartography/datasources/datasource.ts +++ b/src/app/cartography/datasources/datasource.ts @@ -38,13 +38,19 @@ export abstract class DataSource { 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); } } diff --git a/src/app/cartography/events/draggable.ts b/src/app/cartography/events/draggable.ts index e121b8e4..3c73e9a5 100644 --- a/src/app/cartography/events/draggable.ts +++ b/src/app/cartography/events/draggable.ts @@ -43,14 +43,16 @@ export class Draggable { } private behaviour() { + let startEvt; + return drag() .on('start', (datum: Datum) => { - 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); + startEvt = new DraggableStart(datum); + startEvt.dx = event.dx; + startEvt.dy = event.dy; + startEvt.x = event.x; + startEvt.y = event.y; + this.start.emit(startEvt); }) .on('drag', (datum: Datum) => { const evt = new DraggableDrag(datum); @@ -62,10 +64,11 @@ export class Draggable { }) .on('end', (datum: Datum) => { const evt = new DraggableEnd(datum); - evt.dx = event.dx; - evt.dy = event.dy; + evt.dx = event.x - startEvt.x; + evt.dy = event.y - startEvt.y; evt.x = event.x; evt.y = event.y; + console.log(evt); this.end.emit(evt); }); } diff --git a/src/app/cartography/events/event-source.ts b/src/app/cartography/events/event-source.ts index c7152406..c6a2368a 100644 --- a/src/app/cartography/events/event-source.ts +++ b/src/app/cartography/events/event-source.ts @@ -1,6 +1,8 @@ export class DataEventSource { constructor( - public datum: T + public datum: T, + public dx: number, + public dy: number ) {} } diff --git a/src/app/cartography/listeners/nodes-draggable-listener.ts b/src/app/cartography/listeners/nodes-draggable-listener.ts index 64b34cf4..490da6f3 100644 --- a/src/app/cartography/listeners/nodes-draggable-listener.ts +++ b/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) => { + 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(updatedNodes)) const updatedDrawings = selected.filter((item) => item instanceof MapDrawing).map((item: MapDrawing) => item); - this.drawingsEventSource.dragged.emit(new DraggedDataEvent(updatedDrawings)); + + this.nodesEventSource.dragged.emit(new DraggedDataEvent(updatedNodes, evt.dx, evt.dy)); + this.drawingsEventSource.dragged.emit(new DraggedDataEvent(updatedDrawings, evt.dx, evt.dy)); }); } diff --git a/src/app/cartography/managers/graph-data-manager.ts b/src/app/cartography/managers/graph-data-manager.ts index 7e6516d0..78ec4908 100644 --- a/src/app/cartography/managers/graph-data-manager.ts +++ b/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); diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 9aca9032..f590a620 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -214,8 +214,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy { } onNodeDragged(draggedEvent: DraggedDataEvent) { - draggedEvent.datum.forEach((node: Node) => { - this.nodesDataSource.update(node); + draggedEvent.datum.forEach((n: 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) { - draggedEvent.datum.forEach((drawing: Drawing) => { - this.drawingsDataSource.update(drawing); + draggedEvent.datum.forEach((d: 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) => {