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

Resolve missing border style options dash dot dot and invisible for links between devices

Browse Source
This commit is contained in:
Rajnikant Lodhi 2022-08-18 18:25:38 +05:30
parent 85f60fbc1c
commit f338a2e33d
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
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 = `<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) { } 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}\" />`;
} else if (mapDrawing.element instanceof TextElement) { } 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>`; 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 ''; } else return '';

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

@ -8,8 +8,8 @@ import { Drawing } from '../../../../cartography/models/drawing';
import { EllipseElement } from '../../../../cartography/models/drawings/ellipse-element'; import { EllipseElement } from '../../../../cartography/models/drawings/ellipse-element';
import { LineElement } from '../../../../cartography/models/drawings/line-element'; import { LineElement } from '../../../../cartography/models/drawings/line-element';
import { RectElement } from '../../../../cartography/models/drawings/rect-element'; import { RectElement } from '../../../../cartography/models/drawings/rect-element';
import { Controller } from '../../../../models/controller';
import { Project } from '../../../../models/project'; import { Project } from '../../../../models/project';
import{ Controller } from '../../../../models/controller';
import { DrawingService } from '../../../../services/drawing.service'; import { DrawingService } from '../../../../services/drawing.service';
import { ToasterService } from '../../../../services/toaster.service'; import { ToasterService } from '../../../../services/toaster.service';
import { NonNegativeValidator } from '../../../../validators/non-negative-validator'; import { NonNegativeValidator } from '../../../../validators/non-negative-validator';
@ -21,16 +21,18 @@ import { RotationValidator } from '../../../../validators/rotation-validator';
styleUrls: ['./style-editor.component.scss'], styleUrls: ['./style-editor.component.scss'],
}) })
export class StyleEditorDialogComponent implements OnInit { export class StyleEditorDialogComponent implements OnInit {
controller:Controller ; controller: Controller;
project: Project; project: Project;
drawing: Drawing; drawing: Drawing;
element: ElementData; element: ElementData;
formGroup: FormGroup; formGroup: FormGroup;
borderTypes = [ borderTypes = [
{value:"none",name:"Solid"}, { value: '', name: 'Invisible' },
{value:"5",name:"Dash"}, { value: 'none', name: 'Solid' },
{value:"15",name:"Dot"}, { value: '5', name: 'Dash' },
{value:"5 15",name:"Dash Dot"} { value: '15', name: 'Dot' },
{ value: '5 15', name: 'Dash Dot' },
{ value: '10 5 5', name: 'Dash Dot Dot' },
]; ];
constructor( constructor(
@ -55,7 +57,7 @@ export class StyleEditorDialogComponent implements OnInit {
if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) { if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
this.element.fill = this.drawing.element.fill; this.element.fill = this.drawing.element.fill;
this.element.stroke = this.drawing.element.stroke; 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 ?? 'none';
this.element.stroke_width = this.drawing.element.stroke_width; this.element.stroke_width = this.drawing.element.stroke_width;
} else if (this.drawing.element instanceof LineElement) { } else if (this.drawing.element instanceof LineElement) {
this.element.stroke = this.drawing.element.stroke; this.element.stroke = this.drawing.element.stroke;
@ -74,7 +76,11 @@ export class StyleEditorDialogComponent implements OnInit {
onYesClick() { onYesClick() {
if (this.formGroup.valid) { 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; this.drawing.rotation = this.formGroup.get('rotation').value;
if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) { if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
@ -84,12 +90,12 @@ export class StyleEditorDialogComponent implements OnInit {
this.drawing.element.stroke_width = this.element.stroke_width; this.drawing.element.stroke_width = this.element.stroke_width;
} else if (this.drawing.element instanceof LineElement) { } else if (this.drawing.element instanceof LineElement) {
this.drawing.element.stroke = this.element.stroke; this.drawing.element.stroke = this.element.stroke;
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray; this.drawing.element.stroke_dasharray = this.element.stroke_dasharray === '' ? 'none': 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); let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element; mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing); this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService.update(this.controller, this.drawing).subscribe((controllerDrawing: Drawing) => { this.drawingService.update(this.controller, this.drawing).subscribe((controllerDrawing: Drawing) => {