ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-20 05:27:56 +00:00
Code Issues Actions 3 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() height = 600;
@Output() nodeDragged = new EventEmitter<DraggedDataEvent<Node[]>>();
@Output() drawingDragged = new EventEmitter<DraggedDataEvent<Drawing[]>>();
@Output() nodeDragged = new EventEmitter<DraggedDataEvent<Node>>();
@Output() drawingDragged = new EventEmitter<DraggedDataEvent<Drawing>>();
@Output() onLinkCreated = new EventEmitter<LinkCreated>();
private parentNativeElement: any;
@ -144,13 +144,11 @@ 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, evt.dx, evt.dy));
this.nodeDragged.emit(new DraggedDataEvent<Node>(this.mapNodeToNode.convert(evt.datum), 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, evt.dx, evt.dy));
this.drawingDragged.emit(new DraggedDataEvent<Drawing>(this.mapDrawingToDrawing.convert(evt.datum), evt.dx, evt.dy));
});
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);
} else {
this.data.push(item);
console.log("Item added");
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.x = event.x;
evt.y = event.y;
console.log(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()
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()
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.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);
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);
this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode[]>(updatedNodes, evt.dx, evt.dy));
this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing[]>(updatedDrawings, evt.dx, evt.dy));
selected.filter((item) => item instanceof MapDrawing).forEach((item: MapDrawing) => {
this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(item, 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[]) {
console.log("set all nodes");
const mapNodes = nodes.map((n) => this.nodeToMapNode.convert(n));
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 { LinksDataSource } from "../../cartography/datasources/links-datasource";
import { ProjectWebServiceHandler } from "../../handlers/project-web-service-handler";
import { SelectionManager } from "../../cartography/managers/selection-manager";
import { DrawingsDataSource } from "../../cartography/datasources/drawings-datasource";
import { ProgressService } from "../../common/progress/progress.service";
import { MapChangeDetectorRef } from '../../cartography/services/map-change-detector-ref';
@ -136,7 +135,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.subscriptions.push(
this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
this.nodes = nodes;
console.log("update nodes");
this.mapChangeDetectorRef.detectChanges();
})
);
@ -213,33 +211,28 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
});
}
onNodeDragged(draggedEvent: DraggedDataEvent<Node[]>) {
draggedEvent.datum.forEach((n: Node) => {
const node = this.nodesDataSource.get(n.node_id);
node.x += draggedEvent.dx;
node.y += draggedEvent.dy;
onNodeDragged(draggedEvent: DraggedDataEvent<Node>) {
const node = this.nodesDataSource.get(draggedEvent.datum.node_id);
node.x += draggedEvent.dx;
node.y += draggedEvent.dy;
this.nodeService
.updatePosition(this.server, node, node.x, node.y)
.subscribe((serverNode: Node) => {
this.nodesDataSource.update(serverNode);
});
});
this.nodeService
.updatePosition(this.server, node, node.x, node.y)
.subscribe((serverNode: Node) => {
this.nodesDataSource.update(serverNode);
});
}
onDrawingDragged(draggedEvent: DraggedDataEvent<Drawing[]>) {
draggedEvent.datum.forEach((d: Drawing) => {
onDrawingDragged(draggedEvent: DraggedDataEvent<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);
drawing.x += draggedEvent.dx;
drawing.y += draggedEvent.dy;
this.drawingService
.updatePosition(this.server, drawing, drawing.x, drawing.y)
.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) {