ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-03-23 12:05:15 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Adding drawings rewritten

Browse Source
This commit is contained in:
Piotr Pekala 2019-01-08 03:06:25 -08:00
parent fe9e322c1f
commit 32646889df
11 changed files with 91 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -74,7 +74,6 @@ import { ProjectNameValidator } from './components/projects/models/projectNameVa
import { MatSidenavModule } from '@angular/material';
import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component';
import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component';
import { AddDrawingComponent } from './components/project-map/add-drawing/add-drawing.component';
import { DrawingResizedComponent } from './components/drawings-listeners/drawing-resized/drawing-resized.component';
import { TextEditedComponent } from './components/drawings-listeners/text-edited/text-edited.component';
import { NodeDraggedComponent } from './components/drawings-listeners/node-dragged/node-dragged.component';
@ -84,6 +83,7 @@ import { LinkCreatedComponent } from './components/drawings-listeners/link-creat
import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component';
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';
if (environment.production) {
@ -127,7 +127,7 @@ if (environment.production) {
ServerDiscoveryComponent,
NodeSelectInterfaceComponent,
DrawLinkToolComponent,
AddDrawingComponent,
DrawingAddedComponent,
DrawingResizedComponent,
TextAddedComponent,
TextEditedComponent,

30
src/app/cartography/components/drawing-adding/drawing-adding.component.ts
View File

@ -1,9 +1,7 @@
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
import { Context } from '../../models/context';
import { DefaultDrawingsFactory } from '../../helpers/default-drawings-factory';
import { MapDrawingToSvgConverter } from '../../converters/map/map-drawing-to-svg-converter';
import { MapDrawing } from '../../models/map/map-drawing';
import { ToolsService } from '../../../services/tools.service';
import { DrawingsEventSource } from '../../events/drawings-event-source';
import { AddedDataEvent } from '../../events/event-source';
@Component({
@ -14,35 +12,25 @@ import { ToolsService } from '../../../services/tools.service';
export class DrawingAddingComponent implements OnInit, OnDestroy {
@Input('svg') svg: SVGSVGElement;
private readonly availableDrawings = ['rectangle', 'ellipse', 'line'];
private mapListener: Function;
constructor(
private toolsService: ToolsService,
private drawingsFactory: DefaultDrawingsFactory,
private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
private drawingsEventSource: DrawingsEventSource,
private context: Context
){}
ngOnInit(){
this.drawingsEventSource.selected.subscribe((evt) => {
evt === "" ? this.deactivate() : this.activate();
});
}
activate(selectedObject: string){
let mapDrawing: MapDrawing = this.drawingsFactory.getDrawingMock(selectedObject);
activate(){
let listener = (event: MouseEvent) => {
let x = event.clientX - this.context.getZeroZeroTransformationPoint().x;
let y = event.clientY - this.context.getZeroZeroTransformationPoint().y;
let svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
// this.drawingService
// .add(this.server, this.project.project_id, x, y, svg)
// .subscribe((serverDrawing: Drawing) => {
// this.drawingsDataSource.add(serverDrawing);
// this.drawingSaved.emit(true);
// });
this.drawingsEventSource.pointToAddSelected.emit(new AddedDataEvent(x, y));
this.deactivate();
};
@ -56,6 +44,6 @@ export class DrawingAddingComponent implements OnInit, OnDestroy {
}
ngOnDestroy(){
this.drawingsEventSource.selected.unsubscribe();
}
}

5
src/app/cartography/events/drawings-event-source.ts
View File

@ -1,5 +1,5 @@
import { Injectable, EventEmitter } from "@angular/core";
import { DraggedDataEvent, ResizedDataEvent, TextAddedDataEvent, TextEditedDataEvent } from "./event-source";
import { DraggedDataEvent, ResizedDataEvent, TextAddedDataEvent, TextEditedDataEvent, AddedDataEvent } from "./event-source";
import { MapDrawing } from "../models/map/map-drawing";
@ -7,7 +7,10 @@ import { MapDrawing } from "../models/map/map-drawing";
export class DrawingsEventSource {
public dragged = new EventEmitter<DraggedDataEvent<MapDrawing>>();
public resized = new EventEmitter<ResizedDataEvent<MapDrawing>>();
public selected = new EventEmitter<string>();
public pointToAddSelected = new EventEmitter<AddedDataEvent>();
public saved = new EventEmitter<any>();
public textAdded = new EventEmitter<TextAddedDataEvent>();
public textEdited = new EventEmitter<TextEditedDataEvent>();
public textSaved = new EventEmitter<any>();

7
src/app/cartography/events/event-source.ts
View File

@ -20,6 +20,13 @@ export class ResizedDataEvent<T> {
) {}
}
export class AddedDataEvent {
constructor(
public x: number,
public y: number
) {}
}
export class ClickedDataEvent<T> {
constructor(
public datum: T,

0
src/app/components/project-map/add-drawing/add-drawing.component.css → src/app/components/drawings-listeners/drawing-added/drawing-added.component.css
View File

0
src/app/components/project-map/add-drawing/add-drawing.component.html → src/app/components/drawings-listeners/drawing-added/drawing-added.component.html
View File

0
src/app/components/drawings-listeners/drawing-added/drawing-added.component.spec.ts Normal file
View File

65
src/app/components/drawings-listeners/drawing-added/drawing-added.component.ts Normal file
View File

@ -0,0 +1,65 @@
import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, SimpleChange } from "@angular/core";
import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource';
import { DrawingsEventSource } from '../../../cartography/events/drawings-event-source';
import { DefaultDrawingsFactory } from '../../../cartography/helpers/default-drawings-factory';
import { Server } from '../../../models/server';
import { Project } from '../../../models/project';
import { Subscription } from 'rxjs';
import { DrawingService } from '../../../services/drawing.service';
import { Context } from '../../../cartography/models/context';
import { Drawing } from '../../../cartography/models/drawing';
import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter';
import { AddedDataEvent } from '../../../cartography/events/event-source';
@Component({
selector: 'app-drawing-added',
templateUrl: './drawing-added.component.html',
styleUrls: ['./drawing-added.component.css']
})
export class DrawingAddedComponent implements OnInit, OnDestroy{
@Input() server: Server;
@Input() project: Project;
@Input() selectedDrawing: string;
@Output() drawingSaved = new EventEmitter<boolean>();
private pointToAddSelected: Subscription;
constructor(
private drawingService: DrawingService,
private drawingsDataSource: DrawingsDataSource,
private drawingsEventSource: DrawingsEventSource,
private drawingsFactory: DefaultDrawingsFactory,
private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
private context: Context
){}
ngOnInit(){
this.pointToAddSelected = this.drawingsEventSource.pointToAddSelected.subscribe((evt) => this.onDrawingSaved(evt));
}
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
if(changes['selectedDrawing'] && !changes['selectedDrawing'].isFirstChange()){
this.selectedDrawing = changes['selectedDrawing'].currentValue;
if(this.selectedDrawing!=="text"){
this.drawingsEventSource.selected.emit(this.selectedDrawing);
}
}
}
onDrawingSaved(evt: AddedDataEvent){
let drawing = this.drawingsFactory.getDrawingMock(this.selectedDrawing);
let svgText = this.mapDrawingToSvgConverter.convert(drawing);
this.drawingService
.add(this.server, this.project.project_id, evt.x, evt.y, svgText)
.subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.add(serverDrawing);
this.drawingSaved.emit(true);
});
}
ngOnDestroy(){
this.pointToAddSelected.unsubscribe();
}
}

37
src/app/components/project-map/add-drawing/add-drawing.component.spec.ts
View File

@ -1,37 +0,0 @@
import { AddDrawingComponent } from "./add-drawing.component";
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { DefaultDrawingsFactory } from '../../../cartography/helpers/default-drawings-factory';
import { DrawingService } from '../../../services/drawing.service';
import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource';
import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter';
import { Context } from '../../../cartography/models/context';
describe('AddDrawingComponent', () => {
let component: AddDrawingComponent;
let fixture: ComponentFixture<AddDrawingComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [
{ provide: DrawingService },
{ provide: DrawingsDataSource },
{ provide: DefaultDrawingsFactory },
{ provide: MapDrawingToSvgConverter },
{ provide: Context }
],
declarations: [
AddDrawingComponent
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddDrawingComponent);
component = fixture.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

65
src/app/components/project-map/add-drawing/add-drawing.component.ts
View File

@ -1,65 +0,0 @@
import { Component, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core";
import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource';
import { DrawingService } from '../../../services/drawing.service';
import { DefaultDrawingsFactory } from '../../../cartography/helpers/default-drawings-factory';
import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter';
import { Project } from '../../../models/project';
import { Server } from '../../../models/server';
import { MapDrawing } from '../../../cartography/models/map/map-drawing';
import { Drawing } from '../../../cartography/models/drawing';
import { Context } from '../../../cartography/models/context';
@Component({
selector: 'app-add-drawing',
templateUrl: './add-drawing.component.html',
styleUrls: ['./add-drawing.component.css']
})
export class AddDrawingComponent implements OnChanges {
@Input() project: Project;
@Input() server: Server;
@Input() selectedDrawing: string;
@Output() drawingSaved = new EventEmitter<boolean>();
private readonly availableDrawings = ['rectangle', 'ellipse', 'line'];
public drawListener: Function;
constructor(
private drawingService: DrawingService,
private drawingsDataSource: DrawingsDataSource,
private drawingsFactory: DefaultDrawingsFactory,
private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
private context: Context
){}
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
if(changes['selectedDrawing'] && !changes['selectedDrawing'].isFirstChange()){
if(this.availableDrawings.includes(changes['selectedDrawing'].currentValue)){
this.addDrawing(changes['selectedDrawing'].currentValue);
} else if (!(changes['selectedDrawing'].currentValue === "text")) {
document.getElementsByClassName('map')[0].removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
}
}
}
addDrawing(selectedObject: string){
let mapDrawing: MapDrawing = this.drawingsFactory.getDrawingMock(selectedObject);
let listener = (event: MouseEvent) => {
let x = event.clientX - this.context.getZeroZeroTransformationPoint().x;
let y = event.clientY - this.context.getZeroZeroTransformationPoint().y;
let svg = this.mapDrawingToSvgConverter.convert(mapDrawing);
this.drawingService
.add(this.server, this.project.project_id, x, y, svg)
.subscribe((serverDrawing: Drawing) => {
this.drawingsDataSource.add(serverDrawing);
this.drawingSaved.emit(true);
});
}
let map = document.getElementsByClassName('map')[0];
map.removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject);
this.drawListener = listener;
map.addEventListener('click', this.drawListener as EventListenerOrEventListenerObject, {once : true});
}
}

8
src/app/components/project-map/project-map.component.html
View File

@ -143,12 +143,12 @@
<app-draw-link-tool *ngIf="tools.draw_link"></app-draw-link-tool>
<app-add-drawing
<app-drawing-added
[server]="server"
[project]="project"
[selectedDrawing]="selectedDrawing"
(drawingSaved)="onDrawingSaved($event)">
</app-add-drawing>
</app-drawing-added>
<app-drawing-dragged [server]="server"></app-drawing-dragged>
<app-drawing-resized [server]="server"></app-drawing-resized>
<app-interface-label-dragged [server]="server"></app-interface-label-dragged>
@ -158,6 +158,6 @@
<app-text-added
[server]="server"
[project]="project"
(drawingSaved)="onDrawingSaved($event)"
></app-text-added>
(drawingSaved)="onDrawingSaved($event)">
</app-text-added>
<app-text-edited [server]="server"></app-text-edited>