ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-19 21:17:51 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add corner radius setting to style editor

Browse Source
This commit is contained in:
grossmj 2023-08-01 19:44:04 +10:00
parent cefbc3c9be
commit df6248d641
7 changed files with 45 additions and 4 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

@ -14,7 +14,7 @@ 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}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" />`;
} 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}\" />`;
} else if (mapDrawing.element instanceof LineElement) {

2
src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts
View File

@ -13,6 +13,8 @@ export class RectangleElementFactory implements DrawingElementFactory {
rectElement.stroke_width = 2;
rectElement.width = 200;
rectElement.height = 100;
rectElement.rx = 0;
rectElement.ry = 0;
return rectElement;
}
}

6
src/app/cartography/helpers/svg-to-drawing-converter/rect-converter.spec.ts
View File

@ -17,6 +17,8 @@ describe('RectConverter', () => {
element.setAttribute('width', '100px');
element.setAttribute('height', '200px');
element.setAttribute('rx', '0');
element.setAttribute('ry', '0');
const drawing = rectConverter.convert(element);
expect(drawing.fill).toEqual('#ffffff');
@ -25,6 +27,8 @@ describe('RectConverter', () => {
expect(drawing.stroke_dasharray).toEqual('5,25,25');
expect(drawing.width).toEqual(100);
expect(drawing.height).toEqual(200);
expect(drawing.rx).toEqual(0);
expect(drawing.ry).toEqual(0);
});
it('should parse with no attributes', () => {
@ -37,5 +41,7 @@ describe('RectConverter', () => {
expect(drawing.stroke_dasharray).toBeUndefined();
expect(drawing.width).toBeUndefined();
expect(drawing.height).toBeUndefined();
expect(drawing.rx).toBeUndefined();
expect(drawing.ry).toBeUndefined();
});
});

4
src/app/cartography/widgets/drawings/rect-drawing.spec.ts
View File

@ -28,6 +28,8 @@ describe('RectDrawingWidget', () => {
rect.stroke_dasharray = '5,25,25';
rect.width = 100;
rect.height = 200;
rect.rx = 0;
rect.ry = 0;
drawing.element = rect;
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
@ -46,5 +48,7 @@ describe('RectDrawingWidget', () => {
expect(rect_element.getAttribute('stroke-dasharray')).toEqual('5,25,25');
expect(rect_element.getAttribute('width')).toEqual('100');
expect(rect_element.getAttribute('height')).toEqual('200');
expect(rect_element.getAttribute('rx')).toEqual('0');
expect(rect_element.getAttribute('ry')).toEqual('0');
});
});

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

@ -2,7 +2,7 @@
<div class="modal-form-container">
<form [formGroup]="formGroup">
<mat-form-field class="form-field">
<mat-form-field class="form-field" *ngIf="element.fill !== undefined">
<input
matInput
[ngModelOptions]="{ standalone: true }"
@ -23,7 +23,13 @@
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="borderWidth" placeholder="Border width" type="number" />
<input
matInput formControlName="borderWidth"
placeholder="Border width"
type="number"
min="0"
max="100"
/>
</mat-form-field>
<mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
@ -36,6 +42,18 @@
/>
</mat-form-field>
<mat-form-field class="form-field" *ngIf="element.rx !== undefined">
<input
matInput
[ngModelOptions]="{ standalone: true }"
placeholder="Corner radius"
type="number"
min="0"
max="100"
[(ngModel)]="element.rx"
/>
</mat-form-field>
<mat-form-field class="form-field">
<input matInput formControlName="rotation" placeholder="Rotation" type="number" />
</mat-form-field>

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

@ -58,6 +58,10 @@ export class StyleEditorDialogComponent implements OnInit {
this.element.stroke_width = this.drawing.element.stroke_width;
}
if (this.drawing.element instanceof RectElement) {
this.element.rx = this.drawing.element.rx;
}
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);
@ -83,6 +87,11 @@ export class StyleEditorDialogComponent implements OnInit {
this.drawing.element.stroke_width = this.element.stroke_width;
}
if (this.drawing.element instanceof RectElement) {
this.drawing.element.rx = this.element.rx;
this.drawing.element.ry = this.element.rx;
}
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
@ -103,4 +112,6 @@ export class ElementData {
stroke: string;
stroke_width: number;
stroke_dasharray: string;
rx: number;
ry: number;
}

2
src/app/services/drawing.service.spec.ts
View File

@ -149,7 +149,7 @@ describe('DrawingService', () => {
drawing.z = 1;
drawing.rotation = 0;
drawing.svg =
'<svg height="100" width="200"><rect fill="#ffffff" fill-opacity="1.0" height="100" stroke="#000000" stroke-width="2" width="200" /></svg>';
'<svg height="100" width="200"><rect fill="#ffffff" fill-opacity="1.0" height="100" stroke="#000000" stroke-width="2" width="200" rx="0" ry="0" /></svg>';
service.duplicate(server, drawing.project_id, drawing).subscribe();