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

Merge branch 'master' into Widget-dragging

Browse Source
This commit is contained in:
Piotr Pekala 2019-10-23 04:33:50 -07:00
commit 9a6bcad71c
9 changed files with 147 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
package.json
View File

@ -38,17 +38,17 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^8.2.8",
"@angular/cdk": "^8.2.1",
"@angular/common": "^8.2.8",
"@angular/compiler": "^8.2.8",
"@angular/core": "^8.2.8",
"@angular/forms": "^8.2.8",
"@angular/animations": "^8.2.11",
"@angular/cdk": "^8.2.3",
"@angular/common": "^8.2.11",
"@angular/compiler": "^8.2.11",
"@angular/core": "^8.2.11",
"@angular/forms": "^8.2.11",
"@angular/http": "^7.2.15",
"@angular/material": "^8.2.1",
"@angular/platform-browser": "^8.2.8",
"@angular/platform-browser-dynamic": "^8.2.8",
"@angular/router": "^8.2.8",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "^8.2.11",
"@angular/platform-browser-dynamic": "^8.2.11",
"@angular/router": "^8.2.11",
"angular-draggable-droppable": "^4.3.8",
"angular-persistence": "^1.0.1",
"angular-resizable-element": "^3.2.6",
@ -57,8 +57,8 @@
"angular2-indexeddb": "^1.2.3",
"bootstrap": "4.3.1",
"command-exists": "^1.2.8",
"core-js": "^3.2.1",
"css-tree": "^1.0.0-alpha.34",
"core-js": "^3.3.2",
"css-tree": "^1.0.0-alpha.36",
"d3-ng2-service": "^2.1.0",
"file-saver": "^2.0.2",
"hammerjs": "^2.0.8",
@ -72,50 +72,50 @@
"rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3",
"save-svg-as-png": "^1.4.14",
"svg-crowbar": "^0.2.3",
"svg-crowbar": "^0.2.4",
"tree-kill": "^1.2.1",
"typeface-roboto": "^0.0.75",
"xterm": "^4.0.0",
"yargs": "^13.3.0",
"zone.js": "^0.9.1"
"xterm": "^4.1.0",
"yargs": "^14.2.0",
"zone.js": "^0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.801.3",
"@angular/cli": "^8.3.6",
"@angular/compiler-cli": "^8.2.8",
"@angular/language-service": "^8.2.8",
"@sentry/cli": "^1.47.2",
"@angular-devkit/build-angular": "^0.803.10",
"@angular/cli": "^8.3.10",
"@angular/compiler-cli": "^8.2.11",
"@angular/language-service": "^8.2.11",
"@sentry/cli": "^1.48.0",
"@sentry/electron": "^0.17.4",
"@types/jasmine": "^3.3.16",
"@types/jasminewd2": "^2.0.7",
"@types/node": "^12.6.9",
"@types/jasmine": "^3.4.4",
"@types/jasminewd2": "^2.0.8",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"electron": "5.0.8",
"electron-builder": "21.1.5",
"jasmine-core": "~3.4.0",
"electron": "6.0.12",
"electron-builder": "21.2.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"jquery": "^3.4.1",
"karma": "~4.2.0",
"karma-chrome-launcher": "~3.0.0",
"karma": "~4.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"license-checker": "^25.0.1",
"node-sass": "^4.12.0",
"popper.js": "^1.15.0",
"popper.js": "^1.16.0",
"prettier": "^1.18.2",
"protractor": "~5.4.2",
"replace": "^1.1.1",
"ts-mockito": "^2.5.0",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"ts-node": "~8.4.1",
"tslint": "~5.20.0",
"tslint-config-prettier": "^1.18.0",
"typescript": ">=3.4.0 <3.5.0"
"typescript": ">=3.4.0 <3.6.0"
},
"greenkeeper": {
"ignore": [
"typescript"
]
}
}
}

4
src/app/cartography/components/d3-map/d3-map.component.ts
View File

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

41
src/app/cartography/widgets/drawing.ts
View File

@ -12,6 +12,8 @@ import { MapDrawing } from '../models/map/map-drawing';
import { SelectionManager } from '../managers/selection-manager';
import { LineElement } from '../models/drawings/line-element';
import { EllipseElement } from '../models/drawings/ellipse-element';
import { RectElement } from '../models/drawings/rect-element';
import { MapSettingsService } from '../../services/mapsettings.service';
@Injectable()
export class DrawingWidget implements Widget {
@ -23,7 +25,8 @@ export class DrawingWidget implements Widget {
private rectDrawingWidget: RectDrawingWidget,
private lineDrawingWidget: LineDrawingWidget,
private ellipseDrawingWidget: EllipseDrawingWidget,
private selectionManager: SelectionManager
private selectionManager: SelectionManager,
private mapSettingsService: MapSettingsService
) {
this.drawingWidgets = [
this.textDrawingWidget,
@ -50,6 +53,42 @@ export class DrawingWidget implements Widget {
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
.select<SVGAElement>('line.top')
.attr('stroke', 'transparent')

38
src/app/cartography/widgets/node.ts
View File

@ -10,6 +10,7 @@ import { SelectionManager } from '../managers/selection-manager';
import { LabelWidget } from './label';
import { NodesEventSource } from '../events/nodes-event-source';
import { ClickedDataEvent } from '../events/event-source';
import { MapSettingsService } from '../../services/mapsettings.service';
@Injectable()
export class NodeWidget implements Widget {
@ -20,7 +21,8 @@ export class NodeWidget implements Widget {
private graphDataManager: GraphDataManager,
private selectionManager: SelectionManager,
private labelWidget: LabelWidget,
private nodesEventSource: NodesEventSource
private nodesEventSource: NodesEventSource,
private mapSettingsService: MapSettingsService
) {}
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));
});
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
node_body_merge
.select<SVGImageElement>('image')

2
src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.html
View File

@ -1,4 +1,4 @@
<button mat-menu-item (click)="editStyle()">
<button mat-menu-item *ngIf="!isImageDrawing" (click)="editStyle()">
<mat-icon>style</mat-icon>
<span>Edit style</span>
</button>

10
src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
View File

@ -1,22 +1,26 @@
import { Component, OnInit, Input } from '@angular/core';
import { Component, Input, OnChanges } from '@angular/core';
import { Drawing } from '../../../../../cartography/models/drawing';
import { Server } from '../../../../../models/server';
import { MatDialog } from '@angular/material';
import { Project } from '../../../../../models/project';
import { StyleEditorDialogComponent } from '../../../drawings-editors/style-editor/style-editor.component';
import { ImageElement } from '../../../../../cartography/models/drawings/image-element';
@Component({
selector: 'app-edit-style-action',
templateUrl: './edit-style-action.component.html'
})
export class EditStyleActionComponent implements OnInit {
export class EditStyleActionComponent implements OnChanges {
@Input() server: Server;
@Input() project: Project;
@Input() drawing: Drawing;
isImageDrawing: boolean = false;
constructor(private dialog: MatDialog) {}
ngOnInit() {}
ngOnChanges() {
this.isImageDrawing = this.drawing.element instanceof ImageElement;
}
editStyle() {
const dialogRef = this.dialog.open(StyleEditorDialogComponent, {

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

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

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

@ -83,6 +83,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
public isTopologySummaryVisible: boolean = true;
public isInterfaceLabelVisible: boolean = false;
public notificationsVisibility: boolean = false;
public layersVisibility: boolean = false;
tools = {
selection: true,
@ -238,6 +239,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}));
this.notificationsVisibility = localStorage.getItem('notificationsVisibility') === 'true' ? true : false;
this.layersVisibility = localStorage.getItem('layersVisibility') === 'true' ? true : false;
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) {
if (this.notificationsVisibility) {
if (msg.type === 'error') this.toasterService.error(msg.message);

9
src/app/services/mapsettings.service.ts
View File

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