ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-23 23:02:22 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge pull request #267 from GNS3/As-user-I-can-change-styles-of-drawings

Browse Source 
Style & text editor - build fixing
This commit is contained in:
ziajka 2019-01-15 10:52:21 +01:00 committed by GitHub
commit fd8fbf3919
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,19 @@
<h1 mat-dialog-title>Style editor</h1>
<span *ngIf="drawing.element.fill" class="item">
<span *ngIf="element.fill" class="item">
<div class="item-name">Fill color: </div>
<input class="input-color" type='color' [(ngModel)]="drawing.element.fill"/>
<input class="input-color" type='color' [(ngModel)]="element.fill"/>
</span>
<span class="item">
<div class="item-name">Border color: </div>
<input class="input-color" type='color' [(ngModel)]="drawing.element.stroke"/>
<input class="input-color" type='color' [(ngModel)]="element.stroke"/>
</span>
<span class="item">
<div class="item-name">Border width: </div>
<input class="item-value" matInput type="text" [(ngModel)]="drawing.element.stroke_width"/>
<input class="item-value" matInput type="text" [(ngModel)]="element.stroke_width"/>
</span>
<span *ngIf="drawing.element.stroke_dasharray" class="item">
<span *ngIf="element.stroke_dasharray" class="item">
<div class="item-name">Border style: </div>
<input class="item-value" matInput type="text" [(ngModel)]="drawing.element.stroke_dasharray"/>
<input class="item-value" matInput type="text" [(ngModel)]="element.stroke_dasharray"/>
</span>
<span class="item">
<div class="item-name">Rotation: </div>

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

@ -7,6 +7,9 @@ import { DrawingToMapDrawingConverter } from '../../../../cartography/converters
import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map/map-drawing-to-svg-converter';
import { DrawingService } from '../../../../services/drawing.service';
import { DrawingsDataSource } from '../../../../cartography/datasources/drawings-datasource';
import { EllipseElement } from '../../../../cartography/models/drawings/ellipse-element';
import { LineElement } from '../../../../cartography/models/drawings/line-element';
import { RectElement } from '../../../../cartography/models/drawings/rect-element';
@Component({
@ -18,6 +21,7 @@ export class StyleEditorDialogComponent implements OnInit {
server: Server;
project: Project;
drawing: Drawing;
element: ElementData;
rotation: string;
constructor(
@ -29,7 +33,19 @@ export class StyleEditorDialogComponent implements OnInit {
){}
ngOnInit() {
this.element = new ElementData();
this.rotation = this.drawing.rotation.toString();
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_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_width = this.drawing.element.stroke_width
}
}
onNoClick() {
@ -38,6 +54,17 @@ export class StyleEditorDialogComponent implements OnInit {
onYesClick() {
this.drawing.rotation = +this.rotation;
if (this.drawing.element instanceof RectElement || this.drawing.element instanceof EllipseElement) {
this.drawing.element.fill = this.element.fill;
this.drawing.element.stroke = this.element.stroke;
this.drawing.element.stroke_dasharray = this.element.stroke_dasharray;
this.drawing.element.stroke_width = this.element.stroke_width;
} else if (this.drawing.element instanceof LineElement) {
this.drawing.element.stroke = this.element.stroke;
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;
@ -50,3 +77,10 @@ export class StyleEditorDialogComponent implements OnInit {
});
}
}
export class ElementData {
fill: string;
stroke: string;
stroke_width: number;
stroke_dasharray: string;
}

6
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html
View File

@ -1,14 +1,14 @@
<h1 mat-dialog-title>Text editor</h1>
<span *ngIf="drawing.element.fill" class="item">
<span *ngIf="element.fill" class="item">
<div class="item-name">Fill color:</div>
<input class="input-color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="drawing.element.fill"/>
<input class="input-color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill"/>
</span>
<span class="item">
<div class="item-name">Rotation:</div>
<input class="item-value" matInput type="text" [(ngModel)]="rotation"/>
</span>
<span>
<textarea #textArea id="textArea" class="text" [(ngModel)]="drawing.element.text">
<textarea #textArea id="textArea" class="text" [(ngModel)]="element.text">
</textarea>
</span>
<div mat-dialog-actions>

13
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
View File

@ -21,6 +21,7 @@ export class TextEditorDialogComponent implements OnInit {
server: Server;
project: Project;
drawing: Drawing;
element: TextElement;
rotation: string;
constructor(
@ -35,11 +36,11 @@ export class TextEditorDialogComponent implements OnInit {
ngOnInit() {
this.rotation = this.drawing.rotation.toString();
let textElement = this.drawing.element as TextElement;
this.renderer.setStyle(this.textArea.nativeElement, 'color', textElement.fill);
this.renderer.setStyle(this.textArea.nativeElement, 'font-family', textElement.font_family);
this.renderer.setStyle(this.textArea.nativeElement, 'font-size', `${textElement.font_size}pt`);
this.renderer.setStyle(this.textArea.nativeElement, 'font-weight', textElement.font_weight);
this.element = this.drawing.element as TextElement;
this.renderer.setStyle(this.textArea.nativeElement, 'color', this.element.fill);
this.renderer.setStyle(this.textArea.nativeElement, 'font-family', this.element.font_family);
this.renderer.setStyle(this.textArea.nativeElement, 'font-size', `${this.element.font_size}pt`);
this.renderer.setStyle(this.textArea.nativeElement, 'font-weight', this.element.font_weight);
}
onNoClick() {
@ -48,6 +49,8 @@ export class TextEditorDialogComponent implements OnInit {
onYesClick() {
this.drawing.rotation = +this.rotation;
this.drawing.element = this.element;
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;