mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-27 00:21:03 +00:00
Move out responsibilities to project-map
This commit is contained in:
parent
5a8206750e
commit
8de7e58dec
src/app
@ -38,6 +38,7 @@ import { GraphDataManager } from './managers/graph-data-manager';
|
||||
import { SelectionUpdateListener } from './listeners/selection-update-listener';
|
||||
import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from './datasources/map-datasource';
|
||||
import { SelectionListener } from './listeners/selection-listener';
|
||||
import { LinksEventSource } from './events/links-event-source';
|
||||
|
||||
|
||||
@NgModule({
|
||||
@ -67,6 +68,7 @@ import { SelectionListener } from './listeners/selection-listener';
|
||||
SelectionListener,
|
||||
DrawingsEventSource,
|
||||
NodesEventSource,
|
||||
LinksEventSource,
|
||||
DrawingToMapDrawingConverter,
|
||||
LabelToMapLabelConverter,
|
||||
LinkToMapLinkConverter,
|
||||
|
@ -7,6 +7,7 @@ import { NodeClicked } from '../../events/nodes';
|
||||
import { NodeWidget } from '../../widgets/node';
|
||||
import { MapNode } from '../../models/map/map-node';
|
||||
import { MapPort } from '../../models/map/map-port';
|
||||
import { LinksEventSource } from '../../events/links-event-source';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -17,13 +18,14 @@ import { MapPort } from '../../models/map/map-port';
|
||||
export class DrawLinkToolComponent implements OnInit, OnDestroy {
|
||||
@ViewChild(NodeSelectInterfaceComponent) nodeSelectInterfaceMenu: NodeSelectInterfaceComponent;
|
||||
|
||||
@Output('linkCreated') linkCreated = new EventEmitter<MapLinkCreated>();
|
||||
// @Output('linkCreated') linkCreated = new EventEmitter<MapLinkCreated>();
|
||||
|
||||
private onNodeClicked: Subscription;
|
||||
|
||||
constructor(
|
||||
private drawingLineTool: DrawingLineWidget,
|
||||
private nodeWidget: NodeWidget
|
||||
private nodeWidget: NodeWidget,
|
||||
private linksEventSource: LinksEventSource
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
@ -48,7 +50,7 @@ export class DrawLinkToolComponent implements OnInit, OnDestroy {
|
||||
const port: MapPort = event.port;
|
||||
if (this.drawingLineTool.isDrawing()) {
|
||||
const data = this.drawingLineTool.stop();
|
||||
this.linkCreated.emit(new MapLinkCreated(data['node'], data['port'], node, port));
|
||||
this.linksEventSource.created.emit(new MapLinkCreated(data['node'], data['port'], node, port));
|
||||
} else {
|
||||
this.drawingLineTool.start(node.x + node.width / 2., node.y + node.height / 2., {
|
||||
'node': node,
|
||||
|
@ -7,4 +7,4 @@
|
||||
</filter>
|
||||
</svg>
|
||||
|
||||
<app-draw-link-tool *ngIf="drawLinkTool" (linkCreated)="linkCreated($event)"></app-draw-link-tool>
|
||||
<app-draw-link-tool *ngIf="drawLinkTool"></app-draw-link-tool>
|
Before (image error) Size: 271 B After (image error) Size: 235 B |
@ -12,21 +12,14 @@ import { InterfaceLabelWidget } from '../../widgets/interface-label';
|
||||
import { SelectionTool } from '../../tools/selection-tool';
|
||||
import { MovingTool } from '../../tools/moving-tool';
|
||||
import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
|
||||
import { LinkCreated } from '../../events/links';
|
||||
import { CanvasSizeDetector } from '../../helpers/canvas-size-detector';
|
||||
import { MapListeners } from '../../listeners/map-listeners';
|
||||
import { DraggedDataEvent } from '../../events/event-source';
|
||||
import { NodesEventSource } from '../../events/nodes-event-source';
|
||||
import { DrawingsEventSource } from '../../events/drawings-event-source';
|
||||
import { DrawingsWidget } from '../../widgets/drawings';
|
||||
import { Node } from '../../models/node';
|
||||
import { Link } from '../../../models/link';
|
||||
import { Drawing } from '../../models/drawing';
|
||||
import { Symbol } from '../../../models/symbol';
|
||||
import { MapNodeToNodeConverter } from '../../converters/map/map-node-to-node-converter';
|
||||
import { MapPortToPortConverter } from '../../converters/map/map-port-to-port-converter';
|
||||
import { GraphDataManager } from '../../managers/graph-data-manager';
|
||||
import { MapDrawingToDrawingConverter } from '../../converters/map/map-drawing-to-drawing-converter';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -43,16 +36,10 @@ 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() onLinkCreated = new EventEmitter<LinkCreated>();
|
||||
|
||||
private parentNativeElement: any;
|
||||
private svg: Selection<SVGSVGElement, any, null, undefined>;
|
||||
|
||||
private onChangesDetected: Subscription;
|
||||
private nodeDraggedSub: Subscription;
|
||||
private drawingDraggedSub: Subscription;
|
||||
|
||||
protected settings = {
|
||||
'show_interface_labels': true
|
||||
@ -64,9 +51,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
|
||||
private mapChangeDetectorRef: MapChangeDetectorRef,
|
||||
private canvasSizeDetector: CanvasSizeDetector,
|
||||
private mapListeners: MapListeners,
|
||||
private mapNodeToNode: MapNodeToNodeConverter,
|
||||
private mapPortToPort: MapPortToPortConverter,
|
||||
private mapDrawingToDrawing: MapDrawingToDrawingConverter,
|
||||
protected element: ElementRef,
|
||||
protected nodesWidget: NodesWidget,
|
||||
protected drawingsWidget: DrawingsWidget,
|
||||
@ -74,8 +58,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
|
||||
protected selectionToolWidget: SelectionTool,
|
||||
protected movingToolWidget: MovingTool,
|
||||
public graphLayout: GraphLayout,
|
||||
private nodesEventSource: NodesEventSource,
|
||||
private drawingsEventSource: DrawingsEventSource,
|
||||
) {
|
||||
this.parentNativeElement = element.nativeElement;
|
||||
}
|
||||
@ -136,14 +118,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
|
||||
}
|
||||
});
|
||||
|
||||
this.nodeDraggedSub = this.nodesEventSource.dragged.subscribe((evt) => {
|
||||
this.nodeDragged.emit(new DraggedDataEvent<Node>(this.mapNodeToNode.convert(evt.datum), evt.dx, evt.dy));
|
||||
});
|
||||
|
||||
this.drawingDraggedSub = this.drawingsEventSource.dragged.subscribe((evt) => {
|
||||
this.drawingDragged.emit(new DraggedDataEvent<Drawing>(this.mapDrawingToDrawing.convert(evt.datum), evt.dx, evt.dy));
|
||||
});
|
||||
|
||||
this.mapListeners.onInit(this.svg);
|
||||
}
|
||||
|
||||
@ -151,8 +125,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
|
||||
this.graphLayout.disconnect(this.svg);
|
||||
this.onChangesDetected.unsubscribe();
|
||||
this.mapListeners.onDestroy();
|
||||
this.nodeDraggedSub.unsubscribe();
|
||||
this.drawingDraggedSub.unsubscribe();
|
||||
}
|
||||
|
||||
public createGraph(domElement: HTMLElement) {
|
||||
@ -167,17 +139,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
|
||||
return this.canvasSizeDetector.getOptimalSize(this.width, this.height);
|
||||
}
|
||||
|
||||
protected linkCreated(evt) {
|
||||
const linkCreated = new LinkCreated(
|
||||
this.mapNodeToNode.convert(evt.sourceNode),
|
||||
this.mapPortToPort.convert(evt.sourcePort),
|
||||
this.mapNodeToNode.convert(evt.targetNode),
|
||||
this.mapPortToPort.convert(evt.targetPort)
|
||||
);
|
||||
|
||||
this.onLinkCreated.emit(linkCreated);
|
||||
}
|
||||
|
||||
private changeLayout() {
|
||||
if (this.parentNativeElement != null) {
|
||||
this.context.size = this.getSize();
|
||||
|
8
src/app/cartography/events/links-event-source.ts
Normal file
8
src/app/cartography/events/links-event-source.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { Injectable, EventEmitter } from "@angular/core";
|
||||
import { MapLinkCreated } from "./links";
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class LinksEventSource {
|
||||
public created = new EventEmitter<MapLinkCreated>();
|
||||
}
|
@ -1,17 +1,15 @@
|
||||
import { Port } from "../../models/port";
|
||||
import { Node } from "../models/node";
|
||||
import { MapNode } from "../models/map/map-node";
|
||||
import { MapPort } from "../models/map/map-port";
|
||||
|
||||
|
||||
export class LinkCreated {
|
||||
constructor(
|
||||
public sourceNode: Node,
|
||||
public sourcePort: Port,
|
||||
public targetNode: Node,
|
||||
public targetPort: Port
|
||||
) {}
|
||||
}
|
||||
// export class LinkCreated {
|
||||
// constructor(
|
||||
// public sourceNode: Node,
|
||||
// public sourcePort: Port,
|
||||
// public targetNode: Node,
|
||||
// public targetPort: Port
|
||||
// ) {}
|
||||
// }
|
||||
|
||||
export class MapLinkCreated {
|
||||
constructor(
|
||||
|
@ -11,9 +11,6 @@
|
||||
[moving-tool]="tools.moving"
|
||||
[draw-link-tool]="tools.draw_link"
|
||||
[readonly]="inReadOnlyMode"
|
||||
(nodeDragged)="onNodeDragged($event)"
|
||||
(drawingDragged)="onDrawingDragged($event)"
|
||||
(onLinkCreated)="onLinkCreated($event)"
|
||||
></app-map>
|
||||
<div class="project-toolbar">
|
||||
<mat-toolbar color="primary" class="project-toolbar">
|
||||
|
@ -26,11 +26,17 @@ import { DrawingsDataSource } from "../../cartography/datasources/drawings-datas
|
||||
import { ProgressService } from "../../common/progress/progress.service";
|
||||
import { MapChangeDetectorRef } from '../../cartography/services/map-change-detector-ref';
|
||||
import { NodeContextMenu } from '../../cartography/events/nodes';
|
||||
import { LinkCreated } from '../../cartography/events/links';
|
||||
import { MapLinkCreated } from '../../cartography/events/links';
|
||||
import { NodeWidget } from '../../cartography/widgets/node';
|
||||
import { DraggedDataEvent } from '../../cartography/events/event-source';
|
||||
import { DrawingService } from '../../services/drawing.service';
|
||||
import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-node-to-node-converter';
|
||||
import { NodesEventSource } from '../../cartography/events/nodes-event-source';
|
||||
import { DrawingsEventSource } from '../../cartography/events/drawings-event-source';
|
||||
import { MapNode } from '../../cartography/models/map/map-node';
|
||||
import { LinksEventSource } from '../../cartography/events/links-event-source';
|
||||
import { MapDrawing } from '../../cartography/models/map/map-drawing';
|
||||
import { MapPortToPortConverter } from '../../cartography/converters/map/map-port-to-port-converter';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -77,9 +83,13 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
private mapChangeDetectorRef: MapChangeDetectorRef,
|
||||
private nodeWidget: NodeWidget,
|
||||
private mapNodeToNode: MapNodeToNodeConverter,
|
||||
protected nodesDataSource: NodesDataSource,
|
||||
protected linksDataSource: LinksDataSource,
|
||||
protected drawingsDataSource: DrawingsDataSource,
|
||||
private mapPortToPort: MapPortToPortConverter,
|
||||
private nodesDataSource: NodesDataSource,
|
||||
private linksDataSource: LinksDataSource,
|
||||
private drawingsDataSource: DrawingsDataSource,
|
||||
private nodesEventSource: NodesEventSource,
|
||||
private drawingsEventSource: DrawingsEventSource,
|
||||
private linksEventSource: LinksEventSource
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
@ -145,6 +155,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
this.mapChangeDetectorRef.detectChanges();
|
||||
})
|
||||
);
|
||||
|
||||
this.subscriptions.push(
|
||||
this.nodesEventSource.dragged.subscribe((evt) => this.onNodeDragged(evt))
|
||||
);
|
||||
|
||||
this.subscriptions.push(
|
||||
this.drawingsEventSource.dragged.subscribe((evt) => this.onDrawingDragged(evt))
|
||||
);
|
||||
|
||||
this.subscriptions.push(
|
||||
this.linksEventSource.created.subscribe((evt) => this.onLinkCreated(evt))
|
||||
);
|
||||
}
|
||||
|
||||
onProjectLoad(project: Project) {
|
||||
@ -211,8 +233,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
onNodeDragged(draggedEvent: DraggedDataEvent<Node>) {
|
||||
const node = this.nodesDataSource.get(draggedEvent.datum.node_id);
|
||||
private onNodeDragged(draggedEvent: DraggedDataEvent<MapNode>) {
|
||||
const node = this.nodesDataSource.get(draggedEvent.datum.id);
|
||||
node.x += draggedEvent.dx;
|
||||
node.y += draggedEvent.dy;
|
||||
|
||||
@ -223,8 +245,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
onDrawingDragged(draggedEvent: DraggedDataEvent<Drawing>) {
|
||||
const drawing = this.drawingsDataSource.get(draggedEvent.datum.drawing_id);
|
||||
private onDrawingDragged(draggedEvent: DraggedDataEvent<MapDrawing>) {
|
||||
const drawing = this.drawingsDataSource.get(draggedEvent.datum.id);
|
||||
drawing.x += draggedEvent.dx;
|
||||
drawing.y += draggedEvent.dy;
|
||||
|
||||
@ -235,6 +257,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
private onLinkCreated(linkCreated: MapLinkCreated) {
|
||||
const sourceNode = this.mapNodeToNode.convert(linkCreated.sourceNode);
|
||||
const sourcePort = this.mapPortToPort.convert(linkCreated.sourcePort);
|
||||
const targetNode = this.mapNodeToNode.convert(linkCreated.targetNode);
|
||||
const targetPort = this.mapPortToPort.convert(linkCreated.targetPort);
|
||||
|
||||
this.linkService
|
||||
.createLink(this.server, sourceNode, sourcePort, targetNode, targetPort)
|
||||
.subscribe(() => {
|
||||
this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => {
|
||||
this.linksDataSource.set(links);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public set readonly(value) {
|
||||
this.inReadOnlyMode = value;
|
||||
if (value) {
|
||||
@ -259,16 +296,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
this.tools.draw_link = !this.tools.draw_link;
|
||||
}
|
||||
|
||||
public onLinkCreated(linkCreated: LinkCreated) {
|
||||
this.linkService
|
||||
.createLink(this.server, linkCreated.sourceNode, linkCreated.sourcePort, linkCreated.targetNode, linkCreated.targetPort)
|
||||
.subscribe(() => {
|
||||
this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => {
|
||||
this.linksDataSource.set(links);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public toggleShowInterfaceLabels(enabled: boolean) {
|
||||
this.project.show_interface_labels = enabled;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user