ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-25 05:19:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Drag nodes and drawings at the same time

Browse Source
This commit is contained in:
ziajka 2018-11-14 14:51:27 +01:00
parent 332303da4c
commit 71ae1f374f
8 changed files with 30 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/cartography/components/map/map.component.ts
View File

@ -46,8 +46,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
@Input() width = 1500; @Input() width = 1500;
@Input() height = 600; @Input() height = 600;
@Output() nodeDragged = new EventEmitter<DraggedDataEvent<Node[]>>(); @Output() nodeDragged = new EventEmitter<DraggedDataEvent<Node>>();
@Output() drawingDragged = new EventEmitter<DraggedDataEvent<Drawing[]>>(); @Output() drawingDragged = new EventEmitter<DraggedDataEvent<Drawing>>();
@Output() onLinkCreated = new EventEmitter<LinkCreated>(); @Output() onLinkCreated = new EventEmitter<LinkCreated>();
private parentNativeElement: any; private parentNativeElement: any;
@ -144,13 +144,11 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
}); });
this.nodeDraggedSub = this.nodesEventSource.dragged.subscribe((evt) => { this.nodeDraggedSub = this.nodesEventSource.dragged.subscribe((evt) => {
const converted = evt.datum.map((e) => this.mapNodeToNode.convert(e)); this.nodeDragged.emit(new DraggedDataEvent<Node>(this.mapNodeToNode.convert(evt.datum), evt.dx, evt.dy));
this.nodeDragged.emit(new DraggedDataEvent<Node[]>(converted, evt.dx, evt.dy));
}); });
this.drawingDraggedSub = this.drawingsEventSource.dragged.subscribe((evt) => { this.drawingDraggedSub = this.drawingsEventSource.dragged.subscribe((evt) => {
const converted = evt.datum.map((e) => this.mapDrawingToDrawing.convert(e)); this.drawingDragged.emit(new DraggedDataEvent<Drawing>(this.mapDrawingToDrawing.convert(evt.datum), evt.dx, evt.dy));
this.drawingDragged.emit(new DraggedDataEvent<Drawing[]>(converted, evt.dx, evt.dy));
}); });
this.selectionChanged = this.selectionManager.subscribe(this.selectionToolWidget.rectangleSelected); this.selectionChanged = this.selectionManager.subscribe(this.selectionToolWidget.rectangleSelected);

1
src/app/cartography/datasources/datasource.ts
View File

@ -15,7 +15,6 @@ export abstract class DataSource<T> {
this.update(item); this.update(item);
} else { } else {
this.data.push(item); this.data.push(item);
console.log("Item added");
this.dataChange.next(this.data); this.dataChange.next(this.data);
} }
} }

1
src/app/cartography/events/draggable.ts
View File

@ -68,7 +68,6 @@ export class Draggable<GElement extends DraggedElementBaseType, Datum> {
evt.dy = event.y - startEvt.y; evt.dy = event.y - startEvt.y;
evt.x = event.x; evt.x = event.x;
evt.y = event.y; evt.y = event.y;
console.log(evt);
this.end.emit(evt); this.end.emit(evt);
}); });
} }

2
src/app/cartography/events/drawings-event-source.ts
View File

@ -5,5 +5,5 @@ import { MapDrawing } from "../models/map/map-drawing";
@Injectable() @Injectable()
export class DrawingsEventSource { export class DrawingsEventSource {
public dragged = new EventEmitter<DraggedDataEvent<MapDrawing[]>>(); public dragged = new EventEmitter<DraggedDataEvent<MapDrawing>>();
} }

2
src/app/cartography/events/nodes-event-source.ts
View File

@ -5,5 +5,5 @@ import { MapNode } from "../models/map/map-node";
@Injectable() @Injectable()
export class NodesEventSource { export class NodesEventSource {
public dragged = new EventEmitter<DraggedDataEvent<MapNode[]>>(); public dragged = new EventEmitter<DraggedDataEvent<MapNode>>();
} }

12
src/app/cartography/listeners/nodes-draggable-listener.ts
View File

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

2
src/app/cartography/managers/graph-data-manager.ts
View File

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

43
src/app/components/project-map/project-map.component.ts
View File

@ -22,7 +22,6 @@ import { LinkService } from "../../services/link.service";
import { NodesDataSource } from "../../cartography/datasources/nodes-datasource"; import { NodesDataSource } from "../../cartography/datasources/nodes-datasource";
import { LinksDataSource } from "../../cartography/datasources/links-datasource"; import { LinksDataSource } from "../../cartography/datasources/links-datasource";
import { ProjectWebServiceHandler } from "../../handlers/project-web-service-handler"; import { ProjectWebServiceHandler } from "../../handlers/project-web-service-handler";
import { SelectionManager } from "../../cartography/managers/selection-manager";
import { DrawingsDataSource } from "../../cartography/datasources/drawings-datasource"; import { DrawingsDataSource } from "../../cartography/datasources/drawings-datasource";
import { ProgressService } from "../../common/progress/progress.service"; import { ProgressService } from "../../common/progress/progress.service";
import { MapChangeDetectorRef } from '../../cartography/services/map-change-detector-ref'; import { MapChangeDetectorRef } from '../../cartography/services/map-change-detector-ref';
@ -136,7 +135,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.subscriptions.push( this.subscriptions.push(
this.nodesDataSource.changes.subscribe((nodes: Node[]) => { this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
this.nodes = nodes; this.nodes = nodes;
console.log("update nodes");
this.mapChangeDetectorRef.detectChanges(); this.mapChangeDetectorRef.detectChanges();
}) })
); );
@ -213,33 +211,28 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}); });
} }
onNodeDragged(draggedEvent: DraggedDataEvent<Node[]>) { onNodeDragged(draggedEvent: DraggedDataEvent<Node>) {
draggedEvent.datum.forEach((n: Node) => { const node = this.nodesDataSource.get(draggedEvent.datum.node_id);
const node = this.nodesDataSource.get(n.node_id); node.x += draggedEvent.dx;
node.x += draggedEvent.dx; node.y += draggedEvent.dy;
node.y += draggedEvent.dy;
this.nodeService this.nodeService
.updatePosition(this.server, node, node.x, node.y) .updatePosition(this.server, node, node.x, node.y)
.subscribe((serverNode: Node) => { .subscribe((serverNode: Node) => {
this.nodesDataSource.update(serverNode); this.nodesDataSource.update(serverNode);
}); });
});
} }
onDrawingDragged(draggedEvent: DraggedDataEvent<Drawing[]>) { onDrawingDragged(draggedEvent: DraggedDataEvent<Drawing>) {
draggedEvent.datum.forEach((d: Drawing) => { const drawing = this.drawingsDataSource.get(draggedEvent.datum.drawing_id);
drawing.x += draggedEvent.dx;
drawing.y += draggedEvent.dy;
const drawing = this.drawingsDataSource.get(d.drawing_id); this.drawingService
drawing.x += draggedEvent.dx; .updatePosition(this.server, drawing, drawing.x, drawing.y)
drawing.y += draggedEvent.dy; .subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.drawingService });
.updatePosition(this.server, drawing, drawing.x, drawing.y)
.subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
});
});
} }
public set readonly(value) { public set readonly(value) {