mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-24 07:06:38 +00:00
Add corner radius setting to style editor
This commit is contained in:
parent
cefbc3c9be
commit
df6248d641
@ -14,7 +14,7 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
|
|||||||
let elem = ``;
|
let elem = ``;
|
||||||
|
|
||||||
if (mapDrawing.element instanceof RectElement) {
|
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) {
|
} 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}\" />`;
|
||||||
} else if (mapDrawing.element instanceof LineElement) {
|
} else if (mapDrawing.element instanceof LineElement) {
|
||||||
|
@ -13,6 +13,8 @@ export class RectangleElementFactory implements DrawingElementFactory {
|
|||||||
rectElement.stroke_width = 2;
|
rectElement.stroke_width = 2;
|
||||||
rectElement.width = 200;
|
rectElement.width = 200;
|
||||||
rectElement.height = 100;
|
rectElement.height = 100;
|
||||||
|
rectElement.rx = 0;
|
||||||
|
rectElement.ry = 0;
|
||||||
return rectElement;
|
return rectElement;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -17,6 +17,8 @@ describe('RectConverter', () => {
|
|||||||
|
|
||||||
element.setAttribute('width', '100px');
|
element.setAttribute('width', '100px');
|
||||||
element.setAttribute('height', '200px');
|
element.setAttribute('height', '200px');
|
||||||
|
element.setAttribute('rx', '0');
|
||||||
|
element.setAttribute('ry', '0');
|
||||||
|
|
||||||
const drawing = rectConverter.convert(element);
|
const drawing = rectConverter.convert(element);
|
||||||
expect(drawing.fill).toEqual('#ffffff');
|
expect(drawing.fill).toEqual('#ffffff');
|
||||||
@ -25,6 +27,8 @@ describe('RectConverter', () => {
|
|||||||
expect(drawing.stroke_dasharray).toEqual('5,25,25');
|
expect(drawing.stroke_dasharray).toEqual('5,25,25');
|
||||||
expect(drawing.width).toEqual(100);
|
expect(drawing.width).toEqual(100);
|
||||||
expect(drawing.height).toEqual(200);
|
expect(drawing.height).toEqual(200);
|
||||||
|
expect(drawing.rx).toEqual(0);
|
||||||
|
expect(drawing.ry).toEqual(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should parse with no attributes', () => {
|
it('should parse with no attributes', () => {
|
||||||
@ -37,5 +41,7 @@ describe('RectConverter', () => {
|
|||||||
expect(drawing.stroke_dasharray).toBeUndefined();
|
expect(drawing.stroke_dasharray).toBeUndefined();
|
||||||
expect(drawing.width).toBeUndefined();
|
expect(drawing.width).toBeUndefined();
|
||||||
expect(drawing.height).toBeUndefined();
|
expect(drawing.height).toBeUndefined();
|
||||||
|
expect(drawing.rx).toBeUndefined();
|
||||||
|
expect(drawing.ry).toBeUndefined();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -28,6 +28,8 @@ describe('RectDrawingWidget', () => {
|
|||||||
rect.stroke_dasharray = '5,25,25';
|
rect.stroke_dasharray = '5,25,25';
|
||||||
rect.width = 100;
|
rect.width = 100;
|
||||||
rect.height = 200;
|
rect.height = 200;
|
||||||
|
rect.rx = 0;
|
||||||
|
rect.ry = 0;
|
||||||
drawing.element = rect;
|
drawing.element = rect;
|
||||||
|
|
||||||
const drawings = svg.canvas.selectAll<SVGGElement, MapDrawing>('g.drawing').data([drawing]);
|
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('stroke-dasharray')).toEqual('5,25,25');
|
||||||
expect(rect_element.getAttribute('width')).toEqual('100');
|
expect(rect_element.getAttribute('width')).toEqual('100');
|
||||||
expect(rect_element.getAttribute('height')).toEqual('200');
|
expect(rect_element.getAttribute('height')).toEqual('200');
|
||||||
|
expect(rect_element.getAttribute('rx')).toEqual('0');
|
||||||
|
expect(rect_element.getAttribute('ry')).toEqual('0');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
<div class="modal-form-container">
|
<div class="modal-form-container">
|
||||||
<form [formGroup]="formGroup">
|
<form [formGroup]="formGroup">
|
||||||
<mat-form-field class="form-field">
|
<mat-form-field class="form-field" *ngIf="element.fill !== undefined">
|
||||||
<input
|
<input
|
||||||
matInput
|
matInput
|
||||||
[ngModelOptions]="{ standalone: true }"
|
[ngModelOptions]="{ standalone: true }"
|
||||||
@ -23,7 +23,13 @@
|
|||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<mat-form-field class="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>
|
||||||
|
|
||||||
<mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
|
<mat-form-field class="form-field" *ngIf="element.stroke_dasharray">
|
||||||
@ -36,6 +42,18 @@
|
|||||||
/>
|
/>
|
||||||
</mat-form-field>
|
</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">
|
<mat-form-field class="form-field">
|
||||||
<input matInput formControlName="rotation" placeholder="Rotation" type="number" />
|
<input matInput formControlName="rotation" placeholder="Rotation" type="number" />
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
@ -58,6 +58,10 @@ export class StyleEditorDialogComponent implements OnInit {
|
|||||||
this.element.stroke_width = this.drawing.element.stroke_width;
|
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;
|
if (this.element.stroke_width === undefined) this.element.stroke_width = 0;
|
||||||
this.formGroup.controls['borderWidth'].setValue(this.element.stroke_width);
|
this.formGroup.controls['borderWidth'].setValue(this.element.stroke_width);
|
||||||
this.formGroup.controls['rotation'].setValue(this.drawing.rotation);
|
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;
|
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);
|
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
|
||||||
mapDrawing.element = this.drawing.element;
|
mapDrawing.element = this.drawing.element;
|
||||||
|
|
||||||
@ -103,4 +112,6 @@ export class ElementData {
|
|||||||
stroke: string;
|
stroke: string;
|
||||||
stroke_width: number;
|
stroke_width: number;
|
||||||
stroke_dasharray: string;
|
stroke_dasharray: string;
|
||||||
|
rx: number;
|
||||||
|
ry: number;
|
||||||
}
|
}
|
||||||
|
@ -149,7 +149,7 @@ describe('DrawingService', () => {
|
|||||||
drawing.z = 1;
|
drawing.z = 1;
|
||||||
drawing.rotation = 0;
|
drawing.rotation = 0;
|
||||||
drawing.svg =
|
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();
|
service.duplicate(server, drawing.project_id, drawing).subscribe();
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user