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

Node dragged unified way

Browse Source
This commit is contained in:
ziajka 2018-11-05 12:10:51 +01:00
parent 58f0954c08
commit 48dcfcbf1c
4 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/cartography/components/map/map.component.html
View File

@ -1,2 +1,4 @@
<svg class="map" preserveAspectRatio="none"> <svg
</svg> class="map"
preserveAspectRatio="none"
></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 B

After

Width:  |  Height:  |  Size: 60 B

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

@ -1,5 +1,5 @@
import { import {
Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChange, EventEmitter Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChange, EventEmitter, Output
} from '@angular/core'; } from '@angular/core';
import { D3, D3Service } from 'd3-ng2-service'; import { D3, D3Service } from 'd3-ng2-service';
import { Selection } from 'd3-selection'; import { Selection } from 'd3-selection';
@ -11,7 +11,7 @@ import { Context } from "../../models/context";
import { Size } from "../../models/size"; import { Size } from "../../models/size";
import { Drawing } from "../../models/drawing"; import { Drawing } from "../../models/drawing";
import { Symbol } from '../../../models/symbol'; import { Symbol } from '../../../models/symbol';
import { NodeEvent } from '../../widgets/nodes'; import { NodeEvent, NodesWidget } from '../../widgets/nodes';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
@ -29,6 +29,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
@Input() width = 1500; @Input() width = 1500;
@Input() height = 600; @Input() height = 600;
@Output() onNodeDragged: EventEmitter<NodeEvent>;
private d3: D3; private d3: D3;
private parentNativeElement: any; private parentNativeElement: any;
private svg: Selection<SVGSVGElement, any, null, undefined>; private svg: Selection<SVGSVGElement, any, null, undefined>;
@ -36,8 +38,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
private onNodeDraggingSubscription: Subscription; private onNodeDraggingSubscription: Subscription;
// public graphLayout: GraphLayout;
protected settings = { protected settings = {
'show_interface_labels': true 'show_interface_labels': true
}; };
@ -45,10 +45,12 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
constructor( constructor(
protected element: ElementRef, protected element: ElementRef,
protected d3Service: D3Service, protected d3Service: D3Service,
protected nodesWidget: NodesWidget,
public graphLayout: GraphLayout public graphLayout: GraphLayout
) { ) {
this.d3 = d3Service.getD3(); this.d3 = d3Service.getD3();
this.parentNativeElement = element.nativeElement; this.parentNativeElement = element.nativeElement;
this.onNodeDragged = nodesWidget.onNodeDragged;
} }
@Input('show-interface-labels') @Input('show-interface-labels')

1
src/app/components/project-map/project-map.component.html
View File

@ -7,6 +7,7 @@
[width]="project.scene_width" [width]="project.scene_width"
[height]="project.scene_height" [height]="project.scene_height"
[show-interface-labels]="project.show_interface_labels" [show-interface-labels]="project.show_interface_labels"
(onNodeDragged)="onNodeDragged($event)"
></app-map> ></app-map>
<div class="project-toolbar"> <div class="project-toolbar">

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

@ -212,17 +212,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.subscriptions.push(onNodeClicked); this.subscriptions.push(onNodeClicked);
const onNodeDragged = this.mapChild.graphLayout.getNodesWidget().onNodeDragged.subscribe((eventNode: NodeEvent) => {
this.nodesDataSource.update(eventNode.node);
this.nodeService
.updatePosition(this.server, eventNode.node, eventNode.node.x, eventNode.node.y)
.subscribe((n: Node) => {
this.nodesDataSource.update(n);
});
});
this.subscriptions.push(onNodeDragged);
this.subscriptions.push( this.subscriptions.push(
this.selectionManager.subscribe( this.selectionManager.subscribe(
this.mapChild.graphLayout.getSelectionTool().rectangleSelected) this.mapChild.graphLayout.getSelectionTool().rectangleSelected)
@ -246,6 +235,15 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}); });
} }
onNodeDragged(nodeEvent: NodeEvent) {
this.nodesDataSource.update(nodeEvent.node);
this.nodeService
.updatePosition(this.server, nodeEvent.node, nodeEvent.node.x, nodeEvent.node.y)
.subscribe((n: Node) => {
this.nodesDataSource.update(n);
});
}
public toggleDrawLineMode() { public toggleDrawLineMode() {
this.drawLineMode = !this.drawLineMode; this.drawLineMode = !this.drawLineMode;
if (!this.drawLineMode) { if (!this.drawLineMode) {