ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-05 18:49:54 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Resolve Cannot set border style for any shapes in Web-UI GNS3 3.0.0 Alpha 1 issue

Browse Source
This commit is contained in:
Rajnikant Lodhi 2022-08-10 17:09:12 +05:30
parent c80ff95757
commit 8e197a8831
3 changed files with 16 additions and 17 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}\" />`;
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}\" />`;
} 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}\" />`;
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) {
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}\" />`;
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) {
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 '';

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

@ -25,15 +25,10 @@
<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 class="form-field">
<mat-select placeholder="Type" [ngModelOptions]="{ standalone: true }" [(ngModel)]="element.stroke_dasharray">
<mat-option *ngFor="let type of borderTypes" [value]="type.value"> {{ type.name }} </mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">

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

@ -26,6 +26,12 @@ export class StyleEditorDialogComponent implements OnInit {
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"}
];
constructor(
public dialogRef: MatDialogRef<StyleEditorDialogComponent>,
@ -46,15 +52,14 @@ export class StyleEditorDialogComponent implements OnInit {
ngOnInit() {
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;
this.element.stroke_dasharray = 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;
this.element.stroke_dasharray = this.drawing.element.stroke_dasharray ?? 'none';
this.element.stroke_width = this.drawing.element.stroke_width;
}
@ -82,10 +87,9 @@ export class StyleEditorDialogComponent implements OnInit {
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.controller, this.drawing).subscribe((controllerDrawing: Drawing) => {