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

Update from master

Browse Source
This commit is contained in:
Piotr Pekala 2019-06-12 02:45:42 -07:00
commit 7f0fb3ac80
9 changed files with 178 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.module.ts
View File

@ -184,6 +184,8 @@ import { AdbutlerComponent } from './components/adbutler/adbutler.component';
import { ConsoleService } from './services/settings/console.service';
import { DefaultConsoleService } from './services/settings/default-console.service';
import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
import { NonNegativeValidator } from './validators/non-negative-validator';
import { RotationValidator } from './validators/rotation-validator';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -374,7 +376,9 @@ if (environment.production) {
ServerManagementService,
ConsoleService,
DefaultConsoleService,
NodeCreatedLabelStylesFixer
NodeCreatedLabelStylesFixer,
NonNegativeValidator,
RotationValidator
],
entryComponents: [
AddServerDialogComponent,

34
src/app/components/project-map/drawings-editors/style-editor/style-editor.component.html
View File

@ -1,25 +1,27 @@
<h1 mat-dialog-title>Style editor</h1>
<div class="modal-form-container">
<mat-form-field>
<input matInput placeholder="Fill color" type="color" [(ngModel)]="element.fill">
</mat-form-field>
<form [formGroup]="formGroup">
<mat-form-field class="form-field">
<input matInput [ngModelOptions]="{standalone: true}" placeholder="Fill color" type="color" [(ngModel)]="element.fill">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Fill color" type="color" [(ngModel)]="element.stroke">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput [ngModelOptions]="{standalone: true}" placeholder="Fill color" type="color" [(ngModel)]="element.stroke">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Border width" type="text" [(ngModel)]="element.stroke_width">
</mat-form-field>
<mat-form-field *ngIf="element.stroke_dasharray">
<input matInput placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="borderWidth" placeholder="Border width" type="number">
</mat-form-field>
<mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
<input matInput [ngModelOptions]="{standalone: true}" placeholder="Border style" type="text" [(ngModel)]="element.stroke_dasharray">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="rotation" placeholder="Rotation" type="number">
</mat-form-field>
</form>
</div>
<div mat-dialog-actions>

4
src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss
View File

@ -47,3 +47,7 @@ input[type="color"]::-webkit-color-swatch {
.modal-form-container > * {
width: 100%;
}
.form-field {
width: 100%;
}

73
src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Injectable } from '@angular/core';
import { Server } from '../../../../models/server';
import { Project } from '../../../../models/project';
import { Drawing } from '../../../../cartography/models/drawing';
@ -10,6 +10,10 @@ import { DrawingsDataSource } from '../../../../cartography/datasources/drawings
import { EllipseElement } from '../../../../cartography/models/drawings/ellipse-element';
import { LineElement } from '../../../../cartography/models/drawings/line-element';
import { RectElement } from '../../../../cartography/models/drawings/rect-element';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { ToasterService } from '../../../../services/toaster.service';
import { NonNegativeValidator } from '../../../../validators/non-negative-validator';
import { RotationValidator } from '../../../../validators/rotation-validator';
@Component({
selector: 'app-style-editor',
@ -21,19 +25,27 @@ export class StyleEditorDialogComponent implements OnInit {
project: Project;
drawing: Drawing;
element: ElementData;
rotation: string;
formGroup: FormGroup;
constructor(
public dialogRef: MatDialogRef<StyleEditorDialogComponent>,
private drawingToMapDrawingConverter: DrawingToMapDrawingConverter,
private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
private drawingService: DrawingService,
private drawingsDataSource: DrawingsDataSource
) {}
private drawingsDataSource: DrawingsDataSource,
private formBuilder: FormBuilder,
private toasterService: ToasterService,
private nonNegativeValidator: NonNegativeValidator,
private rotationValidator: RotationValidator
) {
this.formGroup = this.formBuilder.group({
borderWidth: new FormControl('', [Validators.required, nonNegativeValidator.get]),
rotation: new FormControl('', [Validators.required, rotationValidator.get])
});
}
ngOnInit() {
this.element = new ElementData();
this.rotation = this.drawing.rotation.toString();
if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
this.element.fill = this.drawing.element.fill;
@ -45,6 +57,10 @@ export class StyleEditorDialogComponent implements OnInit {
this.element.stroke_dasharray = this.drawing.element.stroke_dasharray;
this.element.stroke_width = this.drawing.element.stroke_width;
}
if (this.element.stroke_width === undefined) this.element.stroke_width = 0;
this.formGroup.controls['borderWidth'].setValue(this.element.stroke_width);
this.formGroup.controls['rotation'].setValue(this.drawing.rotation);
}
onNoClick() {
@ -52,27 +68,34 @@ export class StyleEditorDialogComponent implements OnInit {
}
onYesClick() {
this.drawing.rotation = +this.rotation;
if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
this.drawing.element.fill = this.element.fill;
this.drawing.element.stroke = this.element.stroke;
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
this.drawing.element.stroke_width = this.element.stroke_width;
} else if (this.drawing.element instanceof LineElement) {
this.drawing.element.stroke = this.element.stroke;
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
this.drawing.element.stroke_width = this.element.stroke_width;
if (this.formGroup.valid) {
this.element.stroke_width = this.formGroup.get('borderWidth').value;
this.drawing.rotation = this.formGroup.get('rotation').value;
if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
this.drawing.element.fill = this.element.fill;
this.drawing.element.stroke = this.element.stroke;
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
this.drawing.element.stroke_width = this.element.stroke_width;
} else if (this.drawing.element instanceof LineElement) {
this.drawing.element.stroke = this.element.stroke;
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
this.drawing.element.stroke_width = this.element.stroke_width;
}
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.dialogRef.close();
});
} else {
this.toasterService.error(`Entered data is incorrect`);
}
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.dialogRef.close();
});
}
}

10
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
View File

@ -1,13 +1,15 @@
<h1 mat-dialog-title>Text editor</h1>
<div class="modal-form-container">
<mat-form-field>
<mat-form-field class="form-field">
<input matInput placeholder="Fill color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
</mat-form-field>
<form [formGroup]="formGroup">
<mat-form-field class="form-field">
<input formControlName="rotation" matInput placeholder="Rotation" type="text">
</mat-form-field>
</form>
<textarea #textArea id="textArea" class="text" [(ngModel)]="element.text" [readonly]="!isTextEditable"></textarea>
</div>

4
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss
View File

@ -52,3 +52,7 @@ input[type="color"]::-webkit-color-swatch {
.modal-form-container > * {
width: 100%;
}
.form-field {
width: 100%;
}

105
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
View File

@ -16,6 +16,9 @@ import { Link } from '../../../../models/link';
import { LinkNode } from '../../../../models/link-node';
import { LinkService } from '../../../../services/link.service';
import { LinksDataSource } from '../../../../cartography/datasources/links-datasource';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { ToasterService } from '../../../../services/toaster.service';
import { RotationValidator } from '../../../../validators/rotation-validator';
@Component({
selector: 'app-text-editor',
@ -35,6 +38,7 @@ export class TextEditorDialogComponent implements OnInit {
element: TextElement;
rotation: string;
isTextEditable: boolean;
formGroup: FormGroup;
constructor(
private dialogRef: MatDialogRef<TextEditorDialogComponent>,
@ -46,10 +50,17 @@ export class TextEditorDialogComponent implements OnInit {
private nodeService: NodeService,
private nodesDataSource: NodesDataSource,
private linkService: LinkService,
private linksDataSource: LinksDataSource
private linksDataSource: LinksDataSource,
private formBuilder: FormBuilder,
private toasterService: ToasterService,
private rotationValidator: RotationValidator
) {}
ngOnInit() {
this.formGroup = this.formBuilder.group({
rotation: new FormControl('', [Validators.required, this.rotationValidator.get])
});
if (this.drawing) {
this.isTextEditable = true;
this.rotation = this.drawing.rotation.toString();
@ -65,6 +76,7 @@ export class TextEditorDialogComponent implements OnInit {
this.element = this.getTextElementFromLabel();
}
this.formGroup.controls['rotation'].setValue(this.rotation);
this.renderer.setStyle(this.textArea.nativeElement, 'color', this.element.fill);
this.renderer.setStyle(this.textArea.nativeElement, 'font-family', this.element.font_family);
this.renderer.setStyle(this.textArea.nativeElement, 'font-size', `${this.element.font_size}pt`);
@ -72,13 +84,23 @@ export class TextEditorDialogComponent implements OnInit {
}
getTextElementFromLabel(): TextElement{
var styleProperties: StyleProperty[] = [];
var textElement = new TextElement();
textElement.text = this.label.text;
textElement.font_family = this.label.style.split(";")[0].split(" ")[1];
textElement.font_size = +this.label.style.split(";")[1].split(" ")[1];
textElement.font_weight = this.label.style.split(";")[2].split(" ")[1];
textElement.fill = this.label.style.split(";")[3].split(" ")[1];
textElement.fill_opacity = +this.label.style.split(";")[4].split(" ")[1];
for (var property of this.label.style.split(";")){
styleProperties.push({
property: property.split(": ")[0],
value: property.split(": ")[1]
});
}
textElement.text = this.label.text ? this.label.text : '';
textElement.font_family = styleProperties.find(p => p.property === 'font-family') ? styleProperties.find(p => p.property === 'font-family').value : 'TypeWriter';
textElement.font_size = styleProperties.find(p => p.property === 'font-size') ? +styleProperties.find(p => p.property === 'font-family').value : 10.0;
textElement.font_weight = styleProperties.find(p => p.property === 'font-weight') ? styleProperties.find(p => p.property === 'font-weight').value : 'normal';
textElement.fill = styleProperties.find(p => p.property === 'fill') ? styleProperties.find(p => p.property === 'fill').value : '#000000';
textElement.fill_opacity = styleProperties.find(p => p.property === 'fill-opacity') ? +styleProperties.find(p => p.property === 'fill-opacity').value : 1.0;
return textElement;
}
@ -91,36 +113,42 @@ export class TextEditorDialogComponent implements OnInit {
}
onYesClick() {
if (this.drawing) {
this.drawing.rotation = +this.rotation;
this.drawing.element = this.element;
if (this.formGroup.valid) {
this.rotation = this.formGroup.get('rotation').value;
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.dialogRef.close();
});
} else if (this.label && this.node) {
this.node.label.style = this.getStyleFromTextElement();
this.node.label.rotation = +this.rotation;
this.nodeService.updateLabel(this.server, this.node, this.node.label).subscribe((node: Node) => {
this.nodesDataSource.update(node);
this.dialogRef.close();
});
} else if (this.linkNode && this.link) {
this.label.style = this.getStyleFromTextElement();
this.label.rotation = +this.rotation;
this.label.text = this.element.text;
this.linkService.updateLink(this.server, this.link).subscribe((link: Link) => {
this.linksDataSource.update(link);
this.dialogRef.close();
});
if (this.drawing) {
this.drawing.rotation = +this.rotation;
this.drawing.element = this.element;
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.dialogRef.close();
});
} else if (this.label && this.node) {
this.node.label.style = this.getStyleFromTextElement();
this.node.label.rotation = +this.rotation;
this.nodeService.updateLabel(this.server, this.node, this.node.label).subscribe((node: Node) => {
this.nodesDataSource.update(node);
this.dialogRef.close();
});
} else if (this.linkNode && this.link) {
this.label.style = this.getStyleFromTextElement();
this.label.rotation = +this.rotation;
this.label.text = this.element.text;
this.linkService.updateLink(this.server, this.link).subscribe((link: Link) => {
this.linksDataSource.update(link);
this.dialogRef.close();
});
}
} else {
this.toasterService.error(`Entered data is incorrect`);
}
}
@ -128,3 +156,8 @@ export class TextEditorDialogComponent implements OnInit {
this.renderer.setStyle(this.textArea.nativeElement, 'color', changedColor);
}
}
export interface StyleProperty {
property: string;
value: string;
}

12
src/app/validators/non-negative-validator.ts Normal file
View File

@ -0,0 +1,12 @@
import { Injectable } from '@angular/core';
@Injectable()
export class NonNegativeValidator {
get(control) {
if (+control.value>=0) {
return null;
}
return { negativeValue: true };
}
}

12
src/app/validators/rotation-validator.ts Normal file
View File

@ -0,0 +1,12 @@
import { Injectable } from '@angular/core';
@Injectable()
export class RotationValidator {
get(control) {
if (+control.value>-360 && +control.value<=360) {
return null;
}
return { negativeValue: true };
}
}