ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-30 01:38:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1389 from GNS3/bugfix/1383

Browse Source 
Resolve missing border style options dash dot dot and invisible for l…
This commit is contained in:
Jeremy Grossmann 2022-08-29 19:28:24 +02:00 committed by GitHub
commit e6e7122e33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
View File

@ -14,11 +14,11 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
let elem = ``;
if (mapDrawing.element instanceof RectElement) {
elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`;
elem = `${mapDrawing.element.stroke_dasharray == '' ? `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\"/>` :`<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`}`;
} else if (mapDrawing.element instanceof EllipseElement) {
elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`;
elem = `${mapDrawing.element.stroke_dasharray == '' ? `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\"/>` :`<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`}`;
} else if (mapDrawing.element instanceof LineElement) {
elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray}\" />`;
elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" stroke-dasharray=\"${mapDrawing.element.stroke_dasharray ?? 'none'}\" />`;
} else if (mapDrawing.element instanceof TextElement) {
elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${mapDrawing.element.font_family}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${mapDrawing.element.text}</text>`;
} else return '';

10
src/app/cartography/helpers/qt-dasharray-fixer.ts
View File

@ -7,16 +7,18 @@ import { Injectable } from '@angular/core';
@Injectable()
export class QtDasharrayFixer {
static MAPPING = {
'25, 25': '10, 2',
'5, 25': '4, 2',
'5, 25, 25': '5, 5, 1, 5',
'25, 25, 5, 25, 5': '5, 2, 5, 2, 5',
'25, 25': '10, 2', // Dash
'5, 25': '4, 2', // Dot
'5, 25, 25': '12, 3, 5, 3', // Dash Dot
'25, 25, 5, 25, 5': '12, 3, 5, 3, 5, 3', // Dash Dot Dot
};
public fix(dasharray: string): string {
if(dasharray || dasharray == '' ){
if (dasharray in QtDasharrayFixer.MAPPING) {
return QtDasharrayFixer.MAPPING[dasharray];
}
return dasharray;
}
}
}

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

@ -21,7 +21,7 @@ export class LinkStyleEditorDialogComponent implements OnInit {
project: Project;
link: Link;
formGroup: FormGroup;
borderTypes = ["Solid", "Dash", "Dot", "Dash Dot"];
borderTypes = ["Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"];
constructor(
public dialogRef: MatDialogRef<LinkStyleEditorDialogComponent>,
@ -71,8 +71,8 @@ export class LinkStyleEditorDialogComponent implements OnInit {
this.linkService.updateLinkStyle(this.controller, this.link).subscribe((link) => {
this.linksDataSource.update(link);
this.linksEventSource.edited.next(this.linkToMapLink.convert(link));
location.reload()
// we add this code/line for reload the entire page because single graph/link style is not updated automatically.
location.reload()
// we add this code/line for reload the entire page because single graph/link style is not updated automatically.
// this.toasterService.success("Link updated");
this.dialogRef.close();
});

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

@ -37,7 +37,7 @@
</form>
</div>
<div mat-dialog-actions>
<div mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()" color="accent">Cancel</button>
<button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>

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

@ -4,12 +4,13 @@ import { MatDialogRef } from '@angular/material/dialog';
import { DrawingToMapDrawingConverter } from '../../../../cartography/converters/map/drawing-to-map-drawing-converter';
import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map/map-drawing-to-svg-converter';
import { DrawingsDataSource } from '../../../../cartography/datasources/drawings-datasource';
import { QtDasharrayFixer } from '../../../../cartography/helpers/qt-dasharray-fixer';
import { Drawing } from '../../../../cartography/models/drawing';
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 { Controller } from '../../../../models/controller';
import { Project } from '../../../../models/project';
import{ Controller } from '../../../../models/controller';
import { DrawingService } from '../../../../services/drawing.service';
import { ToasterService } from '../../../../services/toaster.service';
import { NonNegativeValidator } from '../../../../validators/non-negative-validator';
@ -21,16 +22,18 @@ import { RotationValidator } from '../../../../validators/rotation-validator';
styleUrls: ['./style-editor.component.scss'],
})
export class StyleEditorDialogComponent implements OnInit {
controller:Controller ;
controller: Controller;
project: Project;
drawing: Drawing;
element: ElementData;
formGroup: FormGroup;
borderTypes = [
{value:"none",name:"Solid"},
{value:"5",name:"Dash"},
{value:"15",name:"Dot"},
{value:"5 15",name:"Dash Dot"}
borderTypes = [
{ qt: 'none', value: 'none', name: 'Solid' },
{ qt: '10, 2', value: '25, 25', name: 'Dash' },
{ qt: '4, 2', value: '5, 25', name: 'Dot' },
{ qt: '12, 3, 5, 3', value: '5, 25, 25', name: 'Dash Dot' },
{ qt: '12, 3, 5, 3, 5, 3', value: '25, 25, 5, 25, 5', name: 'Dash Dot Dot' },
{ qt: '', value: '', name: 'No border' },
];
constructor(
@ -42,7 +45,8 @@ export class StyleEditorDialogComponent implements OnInit {
private formBuilder: FormBuilder,
private toasterService: ToasterService,
private nonNegativeValidator: NonNegativeValidator,
private rotationValidator: RotationValidator
private rotationValidator: RotationValidator,
private qtDasharrayFixer: QtDasharrayFixer
) {
this.formGroup = this.formBuilder.group({
borderWidth: new FormControl('', [Validators.required, nonNegativeValidator.get]),
@ -51,15 +55,17 @@ export class StyleEditorDialogComponent implements OnInit {
}
ngOnInit() {
let dasharray_find_value;
this.element = new ElementData();
if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
this.element.fill = this.drawing.element.fill;
this.element.stroke = this.drawing.element.stroke;
this.element.stroke_dasharray = this.drawing.element.stroke_dasharray ?? 'none'
console.log(this.drawing.element.stroke_dasharray, this.drawing.element.stroke_width)
this.element.stroke_dasharray = (this.drawing.element.stroke_dasharray == undefined && this.drawing.element.stroke_width == undefined ) ? '': this.drawing.element.stroke_dasharray ?? 'none' ;
this.element.stroke_width = this.drawing.element.stroke_width;
} else if (this.drawing.element instanceof LineElement) {
this.element.stroke = this.drawing.element.stroke;
this.element.stroke_dasharray = this.drawing.element.stroke_dasharray ?? 'none';
this.element.stroke_dasharray = (this.drawing.element.stroke_dasharray == undefined && this.drawing.element.stroke_width == undefined ) ? '': this.drawing.element.stroke_dasharray ?? 'none' ;
this.element.stroke_width = this.drawing.element.stroke_width;
}
@ -74,22 +80,34 @@ export class StyleEditorDialogComponent implements OnInit {
onYesClick() {
if (this.formGroup.valid) {
this.element.stroke_width = this.formGroup.get('borderWidth').value;
if (this.element.stroke_dasharray == '') {
this.element.stroke_width = 0;
} else {
this.element.stroke_width =
this.formGroup.get('borderWidth').value === 0 ? 2 : 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 = this.element.stroke ?? "#000000";
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) {
if (this.element.stroke_dasharray != '') {
this.drawing.element.stroke = this.element.stroke ?? "#000000";
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray === '' ? 'none' : this.element.stroke_dasharray;
this.drawing.element.stroke_width = this.element.stroke_width === 0 ? 2 : this.element.stroke_width;
} else {
this.toasterService.warning(`No border style line element not supported`);
}
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;
this.drawing.element.stroke_width = this.element.stroke_width === 0 ? 2 : 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.controller, this.drawing).subscribe((controllerDrawing: Drawing) => {