mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-20 05:27:56 +00:00
Merge pull request #1457 from GNS3/rounded-rect
Support for rounded rectangles
This commit is contained in:
Jeremy Grossmann
GitHub
commit
997b8df598
@ -7,4 +7,6 @@
|
||||
[attr.stroke-dasharray]="stroke_dasharray"
|
||||
[attr.width]="rect.width"
|
||||
[attr.height]="rect.height"
|
||||
[attr.rx]="rect.rx"
|
||||
[attr.ry]="rect.ry"
|
||||
/>
|
||||
|
||||
|
Before Width: | Height: | Size: 278 B After Width: | Height: | Size: 322 B |
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -40,6 +40,16 @@ export class RectConverter implements SvgConverter {
|
||||
drawing.height = parseInt(height.value, 10);
|
||||
}
|
||||
|
||||
const rx = element.attributes.getNamedItem('rx');
|
||||
if (rx) {
|
||||
drawing.rx = parseInt(rx.value, 0);
|
||||
}
|
||||
|
||||
const ry = element.attributes.getNamedItem('ry');
|
||||
if (ry) {
|
||||
drawing.ry = parseInt(ry.value, 0);
|
||||
}
|
||||
|
||||
return drawing;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,4 +8,6 @@ export class RectElement implements DrawingElement {
|
||||
stroke: string;
|
||||
stroke_width: number;
|
||||
stroke_dasharray: string;
|
||||
rx: number;
|
||||
ry: number;
|
||||
}
|
||||
|
||||
@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
@ -33,7 +33,9 @@ export class RectDrawingWidget implements DrawingShapeWidget {
|
||||
.attr('stroke-width', (rect) => rect.stroke_width)
|
||||
.attr('stroke-dasharray', (rect) => this.qtDasharrayFixer.fix(rect.stroke_dasharray))
|
||||
.attr('width', (rect) => rect.width)
|
||||
.attr('height', (rect) => rect.height);
|
||||
.attr('height', (rect) => rect.height)
|
||||
.attr('rx', (rect) => rect.rx)
|
||||
.attr('ry', (rect) => rect.ry);
|
||||
|
||||
drawing.exit().remove();
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -58,6 +58,11 @@ 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;
|
||||
this.element.ry = this.drawing.element.ry;
|
||||
}
|
||||
|
||||
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 +88,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; // set ry with rx because we don't have ry in the form
|
||||
}
|
||||
|
||||
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
|
||||
mapDrawing.element = this.drawing.element;
|
||||
|
||||
@ -103,4 +113,6 @@ export class ElementData {
|
||||
stroke: string;
|
||||
stroke_width: number;
|
||||
stroke_dasharray: string;
|
||||
rx: number;
|
||||
ry: number;
|
||||
}
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user