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

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

Browse Source 
As user i can change styles of drawings, Fixes: #260
This commit is contained in:
ziajka 2019-01-15 10:07:27 +01:00 committed by GitHub
commit a9f2021d0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 365 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/app.module.ts
View File

@ -85,6 +85,9 @@ import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/
import { ToolsService } from './services/tools.service';
import { TextAddedComponent } from './components/drawings-listeners/text-added/text-added.component';
import { DrawingAddedComponent } from './components/drawings-listeners/drawing-added/drawing-added.component';
import { StyleEditorDialogComponent } from './components/project-map/drawings-editors/style-editor/style-editor.component';
import { EditTextActionComponent } from './components/project-map/context-menu/actions/edit-text-action/edit-text-action.component';
import { TextEditorDialogComponent } from './components/project-map/drawings-editors/text-editor/text-editor.component';
if (environment.production) {
@ -122,6 +125,7 @@ if (environment.production) {
MoveLayerDownActionComponent,
MoveLayerUpActionComponent,
EditStyleActionComponent,
EditTextActionComponent,
ProjectMapShortcutsComponent,
SettingsComponent,
LocalServerComponent,
@ -137,7 +141,9 @@ if (environment.production) {
NodeLabelDraggedComponent,
DrawingDraggedComponent,
LinkCreatedComponent,
InterfaceLabelDraggedComponent
InterfaceLabelDraggedComponent,
StyleEditorDialogComponent,
TextEditorDialogComponent
],
imports: [
BrowserModule,
@ -192,7 +198,9 @@ if (environment.production) {
TemplateListDialogComponent,
AddBlankProjectDialogComponent,
ImportProjectDialogComponent,
ConfirmationDialogComponent
ConfirmationDialogComponent,
StyleEditorDialogComponent,
TextEditorDialogComponent
],
bootstrap: [ AppComponent ]
})

13
src/app/cartography/components/text-editor/text-editor.component.ts
View File

@ -92,6 +92,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
this.leftPosition = x.toString() + 'px';
this.topPosition = y.toString() + 'px';
this.temporaryTextElement.nativeElement.innerText = elem.text;
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', elem.fill);
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', elem.font_family);
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', `${elem.font_size}pt`);
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', elem.font_weight);
let listener = () => {
let innerText = this.temporaryTextElement.nativeElement.innerText;
@ -105,6 +110,7 @@ export class TextEditorComponent implements OnInit, OnDestroy {
this.temporaryTextElement.nativeElement.innerText = '';
this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener);
this.clearStyle();
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none');
};
this.textListener = listener;
@ -116,4 +122,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
ngOnDestroy(){
this.textAddingSubscription.unsubscribe();
}
clearStyle(){
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', '#000000');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', 'Noto Sans');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', '11pt');
this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', 'bold');
}
}

1
src/app/cartography/converters/map/map-drawing-to-drawing-converter.ts
View File

@ -19,6 +19,7 @@ export class MapDrawingToDrawingConverter implements Converter<MapDrawing, Drawi
drawing.x = mapDrawing.x;
drawing.y = mapDrawing.y;
drawing.z = mapDrawing.z;
drawing.element = mapDrawing.element;
return drawing;
}
}

2
src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
View File

@ -15,7 +15,7 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
convert(mapDrawing: MapDrawing) {
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}\" />`;
} else if (mapDrawing.element instanceof EllipseElement) {

19
src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
View File

@ -1,8 +1,9 @@
import { Component, OnInit, Input } from "@angular/core";
import { Drawing } from '../../../../../cartography/models/drawing';
import { Server } from '../../../../../models/server';
import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
import { DrawingService } from '../../../../../services/drawing.service';
import { MatDialog } from '@angular/material';
import { Project } from '../../../../../models/project';
import { StyleEditorDialogComponent } from '../../../drawings-editors/style-editor/style-editor.component';
@Component({
@ -11,14 +12,22 @@ import { DrawingService } from '../../../../../services/drawing.service';
})
export class EditStyleActionComponent implements OnInit {
@Input() server: Server;
@Input() project: Project;
@Input() drawing: Drawing;
constructor(
private drawingsDataSource: DrawingsDataSource,
private drawingService: DrawingService
private dialog: MatDialog
) {}
ngOnInit() {}
editStyle(){}
editStyle() {
const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
width: '450px',
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
instance.project = this.project;
instance.drawing = this.drawing;
}
}

4
src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.html Normal file
View File

@ -0,0 +1,4 @@
<button mat-menu-item (click)="editText()">
<mat-icon>text_format</mat-icon>
<span>Edit text</span>
</button>

0
src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.spec.ts Normal file
View File

33
src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts Normal file
View File

@ -0,0 +1,33 @@
import { Component, OnInit, Input } from '@angular/core';
import { Server } from '../../../../../models/server';
import { Project } from '../../../../../models/project';
import { Drawing } from '../../../../../cartography/models/drawing';
import { MatDialog } from '@angular/material';
import { TextEditorDialogComponent } from '../../../drawings-editors/text-editor/text-editor.component';
@Component({
selector: 'app-edit-text-action',
templateUrl: './edit-text-action.component.html'
})
export class EditTextActionComponent implements OnInit {
@Input() server: Server;
@Input() project: Project;
@Input() drawing: Drawing;
constructor(
private dialog: MatDialog
) {}
ngOnInit() {}
editText() {
const dialogRef = this.dialog.open(TextEditorDialogComponent, {
width: '450px',
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
instance.project = this.project;
instance.drawing = this.drawing;
}
}

3
src/app/components/project-map/context-menu/context-menu.component.html
View File

@ -3,7 +3,8 @@
<mat-menu #contextMenu="matMenu" class="context-menu-items">
<app-start-node-action *ngIf="hasNodeCapabilities" [server]="server" [node]="node"></app-start-node-action>
<app-stop-node-action *ngIf="hasNodeCapabilities" [server]="server" [node]="node"></app-stop-node-action>
<app-edit-style-action *ngIf="hasDrawingCapabilities" [server]="server" [drawing]="drawing"></app-edit-style-action>
<app-edit-style-action *ngIf="hasDrawingCapabilities && !isTextElement" [server]="server" [project]="project" [drawing]="drawing"></app-edit-style-action>
<app-edit-text-action *ngIf="hasDrawingCapabilities && isTextElement" [server]="server" [project]="project" [drawing]="drawing"></app-edit-text-action>
<app-move-layer-up-action *ngIf="!projectService.isReadOnly(project)" [server]="server" [node]="node" [drawing]="drawing"></app-move-layer-up-action>
<app-move-layer-down-action *ngIf="!projectService.isReadOnly(project)" [server]="server" [node]="node" [drawing]="drawing"></app-move-layer-down-action>
</mat-menu>

59
src/app/components/project-map/context-menu/context-menu.component.spec.ts
View File

@ -1,14 +1,30 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContextMenuComponent } from './context-menu.component';
import { BrowserModule } from '@angular/platform-browser';
import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
import { ProjectService } from '../../../services/project.service';
import { MockedProjectService } from '../../projects/add-blank-project-dialog/add-blank-project-dialog.component.spec';
import { MatMenuModule, MatMenuTrigger } from '@angular/material';
import { Drawing } from '../../../cartography/models/drawing';
import { RectElement } from '../../../cartography/models/drawings/rect-element';
import { TextElement } from '../../../cartography/models/drawings/text-element';
describe('NodeContextMenuComponent', () => {
describe('ContextMenuComponent', () => {
let component: ContextMenuComponent;
let fixture: ComponentFixture<ContextMenuComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ContextMenuComponent ]
imports: [
MatMenuModule,
BrowserModule
],
providers: [
{ provide: ChangeDetectorRef },
{ provide: ProjectService, useClass: MockedProjectService }
],
declarations: [ ContextMenuComponent ],
schemas: [ NO_ERRORS_SCHEMA ]
})
.compileComponents();
}));
@ -19,7 +35,38 @@ describe('NodeContextMenuComponent', () => {
fixture.detectChanges();
});
// it('should create', () => {
// expect(component).toBeTruthy();
// });
it('should create', () => {
expect(component).toBeTruthy();
});
it('should reset capabilities while opening menu for node', () => {
component.contextMenu = { openMenu(){} } as MatMenuTrigger;
var spy = spyOn<any>(component, "resetCapabilities");
component.openMenuForNode(null, 0, 0);
expect(spy.calls.any()).toBeTruthy();
});
it('should reset capabilities while opening menu for drawing', () => {
component.contextMenu = { openMenu(){} } as MatMenuTrigger;
let drawing = {} as Drawing;
drawing.element = new RectElement();
var spy = spyOn<any>(component, "resetCapabilities");
spyOn(component, 'setPosition').and.callFake(() => {});
component.openMenuForDrawing(drawing, 0, 0);
expect(spy.calls.any()).toBeTruthy();
});
it('should set correct flag while drawing is text element', () => {
component.contextMenu = { openMenu(){} } as MatMenuTrigger;
let drawing = {} as Drawing;
drawing.element = new TextElement();
var spy = spyOn<any>(component, "resetCapabilities");
spyOn(component, 'setPosition').and.callFake(() => {});
component.openMenuForDrawing(drawing, 0, 0);
expect(spy.calls.any()).toBeTruthy();
});
});

4
src/app/components/project-map/context-menu/context-menu.component.ts
View File

@ -6,6 +6,7 @@ import { Server } from "../../../models/server";
import { Project } from "../../../models/project";
import { ProjectService } from "../../../services/project.service";
import { Drawing } from '../../../cartography/models/drawing';
import { TextElement } from '../../../cartography/models/drawings/text-element';
@Component({
@ -25,6 +26,7 @@ export class ContextMenuComponent implements OnInit {
drawing: Drawing;
private hasNodeCapabilities: boolean = false;
private hasDrawingCapabilities: boolean = false;
private isTextElement: boolean = false;
constructor(
private sanitizer: DomSanitizer,
@ -54,6 +56,7 @@ export class ContextMenuComponent implements OnInit {
public openMenuForDrawing(drawing: Drawing, top: number, left: number) {
this.resetCapabilities();
this.hasDrawingCapabilities = true;
this.isTextElement = drawing.element instanceof TextElement;
this.drawing = drawing;
this.setPosition(top, left);
@ -66,5 +69,6 @@ export class ContextMenuComponent implements OnInit {
this.drawing = null;
this.hasDrawingCapabilities = false;
this.hasNodeCapabilities = false;
this.isTextElement = false;
}
}

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

@ -0,0 +1,25 @@
<h1 mat-dialog-title>Style editor</h1>
<span *ngIf="drawing.element.fill" class="item">
<div class="item-name">Fill color: </div>
<input class="input-color" type='color' [(ngModel)]="drawing.element.fill"/>
</span>
<span class="item">
<div class="item-name">Border color: </div>
<input class="input-color" type='color' [(ngModel)]="drawing.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"/>
</span>
<span *ngIf="drawing.element.stroke_dasharray" class="item">
<div class="item-name">Border style: </div>
<input class="item-value" matInput type="text" [(ngModel)]="drawing.element.stroke_dasharray"/>
</span>
<span class="item">
<div class="item-name">Rotation: </div>
<input class="item-value" matInput type="text" [(ngModel)]="rotation"/>
</span>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()" color="accent">Cancel</button>
<button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>

29
src/app/components/project-map/drawings-editors/style-editor/style-editor.component.scss Normal file
View File

@ -0,0 +1,29 @@
.item {
display: flex;
height: 25px;
font-size:10pt;
margin-bottom: 10px;
}
.item-name {
width: 30%;
}
.item-value {
width: 70%;
margin: 3px;
margin-right: 4px;
margin-left: 4px;
}
.input-color {
padding: 0px;
border-width: 0px;
width: 70%;
background-color: transparent;
outline: none;
}
input:focus {
outline: none;
}

0
src/app/components/project-map/drawings-editors/style-editor/style-editor.component.spec.ts Normal file
View File

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

@ -0,0 +1,52 @@
import { Component, OnInit } from "@angular/core";
import { Server } from '../../../../models/server';
import { Project } from '../../../../models/project';
import { Drawing } from '../../../../cartography/models/drawing';
import { MatDialogRef } from '@angular/material';
import { DrawingToMapDrawingConverter } from '../../../../cartography/converters/map/drawing-to-map-drawing-converter';
import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map/map-drawing-to-svg-converter';
import { DrawingService } from '../../../../services/drawing.service';
import { DrawingsDataSource } from '../../../../cartography/datasources/drawings-datasource';
@Component({
selector: 'app-style-editor',
templateUrl: './style-editor.component.html',
styleUrls: ['./style-editor.component.scss']
})
export class StyleEditorDialogComponent implements OnInit {
server: Server;
project: Project;
drawing: Drawing;
rotation: string;
constructor(
public dialogRef: MatDialogRef<StyleEditorDialogComponent>,
private drawingToMapDrawingConverter: DrawingToMapDrawingConverter,
private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
private drawingService: DrawingService,
private drawingsDataSource: DrawingsDataSource
){}
ngOnInit() {
this.rotation = this.drawing.rotation.toString();
}
onNoClick() {
this.dialogRef.close();
}
onYesClick() {
this.drawing.rotation = +this.rotation;
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService
.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.dialogRef.close();
});
}
}

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

@ -0,0 +1,17 @@
<h1 mat-dialog-title>Text editor</h1>
<span *ngIf="drawing.element.fill" class="item">
<div class="item-name">Fill color:</div>
<input class="input-color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="drawing.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>
</span>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()" color="accent">Cancel</button>
<button mat-button (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>

33
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.scss Normal file
View File

@ -0,0 +1,33 @@
.item {
display: flex;
height: 25px;
font-size:10pt;
margin-bottom: 10px;
}
.item-name {
width: 30%;
}
.item-value {
width: 70%;
margin-top: 3px;
margin-bottom: 3px;
}
.input-color {
padding: 0px;
border-width: 0px;
width: 70%;
background-color: transparent;
outline: none;
}
input:focus {
outline: none;
}
.text {
width: 100%;
height: 150px;
}

0
src/app/components/project-map/drawings-editors/text-editor/text-editor.component.spec.ts Normal file
View File

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

@ -0,0 +1,66 @@
import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from "@angular/core";
import { Project } from '../../../../models/project';
import { Drawing } from '../../../../cartography/models/drawing';
import { Server } from '../../../../models/server';
import { MatDialogRef } from '@angular/material';
import { DrawingToMapDrawingConverter } from '../../../../cartography/converters/map/drawing-to-map-drawing-converter';
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 { TextElement } from '../../../../cartography/models/drawings/text-element';
@Component({
selector: 'app-text-editor',
templateUrl: './text-editor.component.html',
styleUrls: ['./text-editor.component.scss']
})
export class TextEditorDialogComponent implements OnInit {
@ViewChild('textArea') textArea : ElementRef;
server: Server;
project: Project;
drawing: Drawing;
rotation: string;
constructor(
private dialogRef: MatDialogRef<TextEditorDialogComponent>,
private drawingToMapDrawingConverter: DrawingToMapDrawingConverter,
private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
private drawingService: DrawingService,
private drawingsDataSource: DrawingsDataSource,
private renderer: Renderer2
){}
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);
}
onNoClick() {
this.dialogRef.close();
}
onYesClick() {
this.drawing.rotation = +this.rotation;
let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing);
mapDrawing.element = this.drawing.element;
this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService
.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.update(serverDrawing);
this.dialogRef.close();
});
}
changeTextColor(changedColor) {
this.renderer.setStyle(this.textArea.nativeElement, 'color', changedColor);
}
}

5
src/app/components/project-map/project-map.component.ts
View File

@ -313,10 +313,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}
public showMenu() {
setTimeout(() => {
this.drawTools.visibility = true;
},
200);
this.drawTools.visibility = true;
}
public ngOnDestroy() {

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

@ -117,6 +117,8 @@ describe('DrawingService', () => {
drawing.x = 10;
drawing.y = 20;
drawing.z = 30;
drawing.rotation = 0;
drawing.svg = '<svg></svg>';
service.update(server, drawing).subscribe();
@ -126,7 +128,9 @@ describe('DrawingService', () => {
expect(req.request.body).toEqual({
'x': 10,
'y': 20,
'z': 30
'z': 30,
'rotation': 0,
'svg': '<svg></svg>'
});
}));

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

@ -52,6 +52,8 @@ export class DrawingService {
update(server: Server, drawing: Drawing): Observable<Drawing> {
return this.httpServer
.put<Drawing>(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, {
'svg': drawing.svg,
'rotation': drawing.rotation,
'x': Math.round(drawing.x),
'y': Math.round(drawing.y),
'z': drawing.z