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

Fix for #515

Browse Source
This commit is contained in:
Piotr Pekala 2019-10-01 06:14:35 -07:00
parent 4d5ac71f0b
commit 45653036f9
6 changed files with 64 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/cartography/cartography.module.ts
View File

@ -58,6 +58,8 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
import { MovingEventSource } from './events/moving-event-source';
import { MovingCanvasDirective } from './directives/moving-canvas.directive';
import { ZoomingCanvasDirective } from './directives/zooming-canvas.directive';
import { EthernetLinkWidget } from './widgets/links/ethernet-link';
import { SerialLinkWidget } from './widgets/links/serial-link';
@NgModule({
imports: [CommonModule, MatMenuModule, MatIconModule],
@ -117,6 +119,8 @@ import { ZoomingCanvasDirective } from './directives/zooming-canvas.directive';
MapSettingsManager,
FontBBoxCalculator,
StylesToFontConverter,
EthernetLinkWidget,
SerialLinkWidget,
...D3_MAP_IMPORTS
],
exports: [D3MapComponent, ExperimentalMapComponent]

11
src/app/cartography/widgets/link.ts
View File

@ -20,7 +20,9 @@ export class LinkWidget implements Widget {
private multiLinkCalculatorHelper: MultiLinkCalculatorHelper,
private interfaceLabelWidget: InterfaceLabelWidget,
private interfaceStatusWidget: InterfaceStatusWidget,
private selectionManager: SelectionManager
private selectionManager: SelectionManager,
private ethernetLinkWidget: EthernetLinkWidget,
private serialLinkWidget: SerialLinkWidget
) {}
public draw(view: SVGSelection) {
@ -88,11 +90,8 @@ export class LinkWidget implements Widget {
.attr('height', '48px')
.attr("xlink:href", "assets/resources/images/filter.svg");
const serial_link_widget = new SerialLinkWidget();
serial_link_widget.draw(link_body_merge);
const ethernet_link_widget = new EthernetLinkWidget();
ethernet_link_widget.draw(link_body_merge);
this.serialLinkWidget.draw(link_body_merge);
this.ethernetLinkWidget.draw(link_body_merge);
link_body_merge
.select<SVGPathElement>('path')

25
src/app/cartography/widgets/links/ethernet-link.ts
View File

@ -1,14 +1,19 @@
import { path } from 'd3-path';
import { EventEmitter, Injectable } from '@angular/core';
import { Widget } from '../widget';
import { SVGSelection } from '../../models/types';
import { MapLink } from '../../models/map/map-link';
import { LinkContextMenu } from '../../events/event-source';
class EthernetLinkPath {
constructor(public source: [number, number], public target: [number, number]) {}
}
export class EthernetLinkWidget implements Widget {
@Injectable() export class EthernetLinkWidget implements Widget {
public onContextMenu = new EventEmitter<LinkContextMenu>();
constructor() {}
private linktoEthernetLink(link: MapLink) {
return new EthernetLinkPath(
[link.source.x + link.source.width / 2, link.source.y + link.source.height / 2],
@ -27,9 +32,21 @@ export class EthernetLinkWidget implements Widget {
const link_enter = link
.enter()
.append<SVGPathElement>('path')
.attr('class', 'ethernet_link');
.attr('class', 'ethernet_link')
.on('contextmenu', (datum) => {
let link: MapLink = datum as unknown as MapLink;
const evt = event;
this.onContextMenu.emit(new LinkContextMenu(evt, link));
});
link_enter.attr('stroke', '#000').attr('stroke-width', '2');
link_enter
.attr('stroke', '#000')
.attr('stroke-width', '2')
.on('contextmenu', (datum) => {
let link: MapLink = datum as unknown as MapLink;
const evt = event;
this.onContextMenu.emit(new LinkContextMenu(evt, link));
});
const link_merge = link.merge(link_enter);

15
src/app/cartography/widgets/links/serial-link.ts
View File

@ -3,6 +3,8 @@ import { path } from 'd3-path';
import { Widget } from '../widget';
import { SVGSelection } from '../../models/types';
import { MapLink } from '../../models/map/map-link';
import { Injectable, EventEmitter } from '@angular/core';
import { LinkContextMenu } from '../../events/event-source';
class SerialLinkPath {
constructor(
@ -13,7 +15,11 @@ class SerialLinkPath {
) {}
}
export class SerialLinkWidget implements Widget {
@Injectable() export class SerialLinkWidget implements Widget {
public onContextMenu = new EventEmitter<LinkContextMenu>();
constructor() {}
private linkToSerialLink(link: MapLink) {
const source = {
x: link.source.x + link.source.width / 2,
@ -55,7 +61,12 @@ export class SerialLinkWidget implements Widget {
const link_enter = link
.enter()
.append<SVGPathElement>('path')
.attr('class', 'serial_link');
.attr('class', 'serial_link')
.on('contextmenu', (datum) => {
let link: MapLink = datum as unknown as MapLink;
const evt = event;
this.onContextMenu.emit(new LinkContextMenu(evt, link));
});
link_enter
.attr('stroke', '#B22222')

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

@ -54,6 +54,8 @@ import { MockedToasterService } from '../../services/toaster.service.spec';
import { ToasterService } from '../../services/toaster.service';
import { MockedActivatedRoute } from '../snapshots/list-of-snapshots/list-of-snaphshots.component.spec';
import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from '../../cartography/datasources/map-datasource';
import { EthernetLinkWidget } from '../../cartography/widgets/links/ethernet-link';
import { SerialLinkWidget } from '../../cartography/widgets/links/serial-link';
export class MockedProgressService {
public activate() {}
@ -265,6 +267,8 @@ describe('ProjectMapComponent', () => {
{ provide: MapChangeDetectorRef },
{ provide: NodeWidget },
{ provide: LinkWidget },
{ provide: EthernetLinkWidget },
{ provide: SerialLinkWidget },
{ provide: DrawingsWidget },
{ provide: LabelWidget },
{ provide: InterfaceLabelWidget },

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

@ -59,6 +59,8 @@ import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save
import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
import { MapSettingsService } from '../../services/mapsettings.service';
import { EditProjectDialogComponent } from '../projects/edit-project-dialog/edit-project-dialog.component';
import { EthernetLinkWidget } from '../../cartography/widgets/links/ethernet-link';
import { SerialLinkWidget } from '../../cartography/widgets/links/serial-link';
@Component({
@ -133,7 +135,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
private mapLinksDataSource: MapLinksDataSource,
private mapDrawingsDataSource: MapDrawingsDataSource,
private mapSymbolsDataSource: MapSymbolsDataSource,
private mapSettingsService: MapSettingsService
private mapSettingsService: MapSettingsService,
private ethernetLinkWidget: EthernetLinkWidget,
private serialLinkWidget: SerialLinkWidget
) {}
ngOnInit() {
@ -303,6 +307,16 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.pageY, eventLink.event.pageX);
});
const onEthernetLinkContextMenu = this.ethernetLinkWidget.onContextMenu.subscribe((eventLink: LinkContextMenu) => {
const link = this.mapLinkToLink.convert(eventLink.link);
this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.pageY, eventLink.event.pageX);
});
const onSerialLinkContextMenu = this.serialLinkWidget.onContextMenu.subscribe((eventLink: LinkContextMenu) => {
const link = this.mapLinkToLink.convert(eventLink.link);
this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.pageY, eventLink.event.pageX);
});
const onNodeContextMenu = this.nodeWidget.onContextMenu.subscribe((eventNode: NodeContextMenu) => {
const node = this.mapNodeToNode.convert(eventNode.node);
this.contextMenu.openMenuForNode(node, eventNode.event.pageY, eventNode.event.pageX);
@ -350,6 +364,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
});
this.subscriptions.push(onLinkContextMenu);
this.subscriptions.push(onEthernetLinkContextMenu);
this.subscriptions.push(onSerialLinkContextMenu);
this.subscriptions.push(onNodeContextMenu);
this.subscriptions.push(onDrawingContextMenu);
this.subscriptions.push(onContextMenu);