Merge pull request #535 from GNS3/Support-for-layers

Support for layers
This commit is contained in:
piotrpekala7 2019-10-23 13:22:38 +02:00 committed by GitHub
commit 6880c993ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 105 additions and 3 deletions

View File

@ -153,6 +153,10 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
}); });
} }
public applyMapSettingsChanges() {
this.redraw();
}
public createGraph(domElement: HTMLElement) { public createGraph(domElement: HTMLElement) {
const rootElement = select(domElement); const rootElement = select(domElement);
this.svg = rootElement.select<SVGSVGElement>('svg'); this.svg = rootElement.select<SVGSVGElement>('svg');

View File

@ -12,6 +12,8 @@ import { MapDrawing } from '../models/map/map-drawing';
import { SelectionManager } from '../managers/selection-manager'; import { SelectionManager } from '../managers/selection-manager';
import { LineElement } from '../models/drawings/line-element'; import { LineElement } from '../models/drawings/line-element';
import { EllipseElement } from '../models/drawings/ellipse-element'; import { EllipseElement } from '../models/drawings/ellipse-element';
import { RectElement } from '../models/drawings/rect-element';
import { MapSettingsService } from '../../services/mapsettings.service';
@Injectable() @Injectable()
export class DrawingWidget implements Widget { export class DrawingWidget implements Widget {
@ -23,7 +25,8 @@ export class DrawingWidget implements Widget {
private rectDrawingWidget: RectDrawingWidget, private rectDrawingWidget: RectDrawingWidget,
private lineDrawingWidget: LineDrawingWidget, private lineDrawingWidget: LineDrawingWidget,
private ellipseDrawingWidget: EllipseDrawingWidget, private ellipseDrawingWidget: EllipseDrawingWidget,
private selectionManager: SelectionManager private selectionManager: SelectionManager,
private mapSettingsService: MapSettingsService
) { ) {
this.drawingWidgets = [ this.drawingWidgets = [
this.textDrawingWidget, this.textDrawingWidget,
@ -50,6 +53,42 @@ export class DrawingWidget implements Widget {
widget.draw(drawing_body_merge); widget.draw(drawing_body_merge);
}); });
drawing_body_merge.select('.layer_label_wrapper').remove();
if (this.mapSettingsService.isLayerNumberVisible) {
drawing_body_merge
.filter(n => ((n.element instanceof RectElement) || (n.element instanceof EllipseElement)))
.append<SVGRectElement>('rect')
.attr('class', 'layer_label_wrapper')
.attr('width', '26')
.attr('height', '26')
.attr('x', n => n.element ? n.element.width/2 - 13 : 0)
.attr('y', n => n.element ? n.element.height/2 - 13 : 0)
.attr('fill', 'red');
}
drawing_body_merge.select('.layer_label').remove();
if (this.mapSettingsService.isLayerNumberVisible) {
drawing_body_merge
.filter(n => ((n.element instanceof RectElement) || (n.element instanceof EllipseElement)))
.append<SVGTextElement>('text')
.attr('class', 'layer_label')
.text((elem) => elem.z)
.attr('x', function(n) {
if(n.z >= 100 ) return n.element ? n.element.width/2 - 13 : 0
else if(n.z >= 10 ) return n.element ? n.element.width/2 - 9 : 0
else return n.element.width/2 - 5
})
.attr('y', n => n.element ? n.element.height/2 + 5 : 0)
.attr('style', () => {
const styles: string[] = [];
styles.push(`font-family: "Noto Sans"`);
styles.push(`font-size: 11pt`);
styles.push(`font-weight: bold`);
return styles.join('; ');
})
.attr('fill', `#ffffff`);
}
drawing_body_merge drawing_body_merge
.select<SVGAElement>('line.top') .select<SVGAElement>('line.top')
.attr('stroke', 'transparent') .attr('stroke', 'transparent')

View File

@ -10,6 +10,7 @@ import { SelectionManager } from '../managers/selection-manager';
import { LabelWidget } from './label'; import { LabelWidget } from './label';
import { NodesEventSource } from '../events/nodes-event-source'; import { NodesEventSource } from '../events/nodes-event-source';
import { ClickedDataEvent } from '../events/event-source'; import { ClickedDataEvent } from '../events/event-source';
import { MapSettingsService } from '../../services/mapsettings.service';
@Injectable() @Injectable()
export class NodeWidget implements Widget { export class NodeWidget implements Widget {
@ -20,7 +21,8 @@ export class NodeWidget implements Widget {
private graphDataManager: GraphDataManager, private graphDataManager: GraphDataManager,
private selectionManager: SelectionManager, private selectionManager: SelectionManager,
private labelWidget: LabelWidget, private labelWidget: LabelWidget,
private nodesEventSource: NodesEventSource private nodesEventSource: NodesEventSource,
private mapSettingsService: MapSettingsService
) {} ) {}
public draw(view: SVGSelection) { public draw(view: SVGSelection) {
@ -42,6 +44,40 @@ export class NodeWidget implements Widget {
this.nodesEventSource.clicked.emit(new ClickedDataEvent<MapNode>(node, event.pageX, event.pageY)); this.nodesEventSource.clicked.emit(new ClickedDataEvent<MapNode>(node, event.pageX, event.pageY));
}); });
node_body_merge.select('.layer_label_wrapper').remove();
if (this.mapSettingsService.isLayerNumberVisible) {
node_body_merge
.append<SVGRectElement>('rect')
.attr('class', 'layer_label_wrapper')
.attr('width', '26')
.attr('height', '26')
.attr('x', (n: MapNode) => n.width/2 - 13)
.attr('y', (n: MapNode) => n.height/2 - 13)
.attr('fill', 'red');
}
node_body_merge.select('.layer_label').remove();
if (this.mapSettingsService.isLayerNumberVisible) {
node_body_merge
.append<SVGTextElement>('text')
.attr('class', 'layer_label')
.text((n: MapNode) => { return n.z})
.attr('x', function(n: MapNode) {
if(n.z >= 100 ) return n.width/2 - 13
else if(n.z >= 10 ) return n.width/2 - 9
else return n.width/2 - 5
})
.attr('y', (n: MapNode) => n.height/2 + 5)
.attr('style', () => {
const styles: string[] = [];
styles.push(`font-family: "Noto Sans"`);
styles.push(`font-size: 11pt`);
styles.push(`font-weight: bold`);
return styles.join('; ');
})
.attr('fill', `#ffffff`);
}
// update image of node // update image of node
node_body_merge node_body_merge
.select<SVGImageElement>('image') .select<SVGImageElement>('image')

View File

@ -90,6 +90,9 @@
<mat-checkbox [ngModel]="notificationsVisibility" (change)="toggleNotifications($event.checked)"> <mat-checkbox [ngModel]="notificationsVisibility" (change)="toggleNotifications($event.checked)">
Show notifications Show notifications
</mat-checkbox> </mat-checkbox>
<mat-checkbox [ngModel]="layersVisibility" (change)="toggleLayers($event.checked)">
Show layers
</mat-checkbox>
</div> </div>
</mat-menu> </mat-menu>

View File

@ -83,6 +83,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
public isTopologySummaryVisible: boolean = false; public isTopologySummaryVisible: boolean = false;
public isInterfaceLabelVisible: boolean = false; public isInterfaceLabelVisible: boolean = false;
public notificationsVisibility: boolean = false; public notificationsVisibility: boolean = false;
public layersVisibility: boolean = false;
tools = { tools = {
selection: true, selection: true,
@ -238,6 +239,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
})); }));
this.notificationsVisibility = localStorage.getItem('notificationsVisibility') === 'true' ? true : false; this.notificationsVisibility = localStorage.getItem('notificationsVisibility') === 'true' ? true : false;
this.layersVisibility = localStorage.getItem('layersVisibility') === 'true' ? true : false;
this.addKeyboardListeners(); this.addKeyboardListeners();
} }
@ -479,6 +481,17 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
} }
} }
public toggleLayers(visible: boolean) {
this.layersVisibility = visible;
this.mapSettingsService.toggleLayers(visible);
if (this.layersVisibility) {
localStorage.setItem('layersVisibility', 'true');
} else {
localStorage.removeItem('layersVisibility')
}
this.mapChild.applyMapSettingsChanges();
}
private showMessage(msg) { private showMessage(msg) {
if (this.notificationsVisibility) { if (this.notificationsVisibility) {
if (msg.type === 'error') this.toasterService.error(msg.message); if (msg.type === 'error') this.toasterService.error(msg.message);

View File

@ -6,9 +6,12 @@ export class MapSettingsService {
public isMapLocked = new Subject<boolean>(); public isMapLocked = new Subject<boolean>();
public isTopologySummaryVisible: boolean = false; public isTopologySummaryVisible: boolean = false;
public isLogConsoleVisible: boolean = false; public isLogConsoleVisible: boolean = false;
public isLayerNumberVisible: boolean = false;
public interfaceLabels: Map<string, boolean> = new Map<string, boolean>(); public interfaceLabels: Map<string, boolean> = new Map<string, boolean>();
constructor() {} constructor() {
this.isLayerNumberVisible = localStorage.getItem('layersVisibility') === 'true' ? true : false;
}
changeMapLockValue(value: boolean) { changeMapLockValue(value: boolean) {
this.isMapLocked.next(value); this.isMapLocked.next(value);
@ -22,6 +25,10 @@ export class MapSettingsService {
this.isLogConsoleVisible = value; this.isLogConsoleVisible = value;
} }
toggleLayers(value: boolean) {
this.isLayerNumberVisible = value;
}
toggleShowInterfaceLabels(projectId: string, value: boolean) { toggleShowInterfaceLabels(projectId: string, value: boolean) {
this.interfaceLabels.set(projectId, value); this.interfaceLabels.set(projectId, value);
} }