From 01d49a7321b5a37415198e29f8c901e7a400cc01 Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Mon, 20 Apr 2020 15:21:34 +0200 Subject: [PATCH 1/5] Initial implementation of drag & drop to add new node --- .../template/template.component.html | 44 ++++++++++++++- .../template/template.component.scss | 41 ++++++++++++++ .../components/template/template.component.ts | 55 ++++++++++++++++++- 3 files changed, 136 insertions(+), 4 deletions(-) diff --git a/src/app/components/template/template.component.html b/src/app/components/template/template.component.html index a5b2a19b..081810cb 100644 --- a/src/app/components/template/template.component.html +++ b/src/app/components/template/template.component.html @@ -1 +1,43 @@ - + + + + + + + + + + + + {{type}} + + + + +
+ + + + + + + {{template.name}} + + + +
+ diff --git a/src/app/components/template/template.component.scss b/src/app/components/template/template.component.scss index e69de29b..2f2aa2ab 100644 --- a/src/app/components/template/template.component.scss +++ b/src/app/components/template/template.component.scss @@ -0,0 +1,41 @@ +// ::ng-deep .menu { +// scrollbar-color: darkgrey #263238!important; +// scrollbar-width: thin!important; +// } + +.menu { + height: 200px; + overflow-y: scroll; + scrollbar-color: darkgrey #263238; + scrollbar-width: thin; +} + +::-webkit-scrollbar { + width: 0.5em; +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); +} + +::-webkit-scrollbar-thumb { + background-color: darkgrey; + outline: 1px solid #263238; +} + +.form-field { + width: 90%; + margin-left: 5%; + margin-right: 5%; +} + +.image { + width: 65px; + height: 65px; + filter: invert(0); + --webkit-filter: invert(0)!important; +} + +.templateIcon { + height: 80px!important; +} diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts index 3814b1a2..2e152e1e 100644 --- a/src/app/components/template/template.component.ts +++ b/src/app/components/template/template.component.ts @@ -5,6 +5,8 @@ import { TemplateListDialogComponent, NodeAddedEvent } from './template-list-dia import { Server } from '../../models/server'; import { Template } from '../../models/template'; import { Project } from '../../models/project'; +import { TemplateService } from '../../services/template.service'; +import { MapScaleService } from '../../services/mapScale.service'; @Component({ selector: 'app-template', @@ -16,11 +18,54 @@ export class TemplateComponent implements OnInit { @Input() project: Project; @Output() onNodeCreation = new EventEmitter(); - constructor(private dialog: MatDialog) {} + templates: Template[] = []; + filteredTemplates: Template[] = []; + searchText: string = ''; + templateTypes: string[] = ['all', 'cloud', 'ethernet_hub', 'ethernet_switch', 'docker', 'dynamips', 'vpcs', 'traceng', 'virtualbox', 'vmware', 'iou', 'qemu']; + selectedType: string; - ngOnInit() {} + constructor( + private dialog: MatDialog, + private templateService: TemplateService, + private scaleService: MapScaleService + ) {} - listTemplatesModal() { + ngOnInit() { + this.templateService.list(this.server).subscribe((listOfTemplates: Template[]) => { + this.filteredTemplates = listOfTemplates; + this.templates = listOfTemplates; + }); + } + + filterTemplates(event) { + let temporaryTemplates = this.templates.filter(item => { + return item.name.toLowerCase().includes(this.searchText.toLowerCase()); + }); + + if (this.selectedType === 'all') { + this.filteredTemplates = temporaryTemplates; + } else { + this.filteredTemplates = temporaryTemplates.filter(t => t.template_type === this.selectedType); + } + } + + dragEnd(ev, template) { + console.log('Element was dragged', ev); + console.log('Template', template); + console.log((event as MouseEvent).clientX, (event as MouseEvent).clientY); + + let scale = this.scaleService.getScale(); + let nodeAddedEvent: NodeAddedEvent = { + template: template, + server: 'local', + numberOfNodes: 1, + x: ((event as MouseEvent).clientX - this.project.scene_width/2 + window.scrollX) * scale, //template.width + y: ((event as MouseEvent).clientY - this.project.scene_height/2 + window.scrollY) * scale + }; + this.onNodeCreation.emit(nodeAddedEvent); + } + + openDialog() { const dialogRef = this.dialog.open(TemplateListDialogComponent, { width: '600px', data: { @@ -37,4 +82,8 @@ export class TemplateComponent implements OnInit { } }); } + + getImageSourceForTemplate(template: Template) { + return `http://${this.server.host}:${this.server.port}/v2${template.symbol.substring(1)}/raw`; + } } From 9594e397e5d20323a47e693934c027c03a08b733 Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Thu, 30 Apr 2020 15:16:01 +0200 Subject: [PATCH 2/5] Updating drop mechanism --- .../template/template.component.html | 2 +- .../components/template/template.component.ts | 18 ++++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/app/components/template/template.component.html b/src/app/components/template/template.component.html index 081810cb..1d11e02e 100644 --- a/src/app/components/template/template.component.html +++ b/src/app/components/template/template.component.html @@ -32,7 +32,7 @@ - + {{template.name}} diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts index 2e152e1e..66395a86 100644 --- a/src/app/components/template/template.component.ts +++ b/src/app/components/template/template.component.ts @@ -24,6 +24,9 @@ export class TemplateComponent implements OnInit { templateTypes: string[] = ['all', 'cloud', 'ethernet_hub', 'ethernet_switch', 'docker', 'dynamips', 'vpcs', 'traceng', 'virtualbox', 'vmware', 'iou', 'qemu']; selectedType: string; + movementX: number; + movementY: number; + constructor( private dialog: MatDialog, private templateService: TemplateService, @@ -49,18 +52,21 @@ export class TemplateComponent implements OnInit { } } - dragEnd(ev, template) { - console.log('Element was dragged', ev); - console.log('Template', template); - console.log((event as MouseEvent).clientX, (event as MouseEvent).clientY); + dragStart(ev) { + let elemRect = (event.target as HTMLElement).getBoundingClientRect(); + this.movementY = elemRect.top - (event as MouseEvent).clientY; + this.movementX = elemRect.left - (event as MouseEvent).clientX; + } + + dragEnd(ev, template) { let scale = this.scaleService.getScale(); let nodeAddedEvent: NodeAddedEvent = { template: template, server: 'local', numberOfNodes: 1, - x: ((event as MouseEvent).clientX - this.project.scene_width/2 + window.scrollX) * scale, //template.width - y: ((event as MouseEvent).clientY - this.project.scene_height/2 + window.scrollY) * scale + x: ((event as MouseEvent).clientX - this.project.scene_width/2 + window.scrollX + this.movementX) * scale, //template.width + y: ((event as MouseEvent).clientY - this.project.scene_height/2 + window.scrollY + this.movementY) * scale }; this.onNodeCreation.emit(nodeAddedEvent); } From 6b6ac2f3122b32fee53e852a69c9f1af80d18e92 Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Mon, 4 May 2020 12:35:44 +0200 Subject: [PATCH 3/5] Calculating node position updated --- .../components/template/template.component.ts | 35 +++++++++++++------ src/app/services/symbol.service.ts | 4 +++ 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts index 66395a86..4c30e384 100644 --- a/src/app/components/template/template.component.ts +++ b/src/app/components/template/template.component.ts @@ -7,6 +7,7 @@ import { Template } from '../../models/template'; import { Project } from '../../models/project'; import { TemplateService } from '../../services/template.service'; import { MapScaleService } from '../../services/mapScale.service'; +import { SymbolService } from '../../services/symbol.service'; @Component({ selector: 'app-template', @@ -27,10 +28,14 @@ export class TemplateComponent implements OnInit { movementX: number; movementY: number; + startX: number; + startY: number; + constructor( private dialog: MatDialog, private templateService: TemplateService, - private scaleService: MapScaleService + private scaleService: MapScaleService, + private symbolService: SymbolService ) {} ngOnInit() { @@ -38,6 +43,7 @@ export class TemplateComponent implements OnInit { this.filteredTemplates = listOfTemplates; this.templates = listOfTemplates; }); + this.symbolService.list(this.server); } filterTemplates(event) { @@ -55,20 +61,27 @@ export class TemplateComponent implements OnInit { dragStart(ev) { let elemRect = (event.target as HTMLElement).getBoundingClientRect(); + this.startX = (event as MouseEvent).clientX; + this.startY = (event as MouseEvent).clientY; + this.movementY = elemRect.top - (event as MouseEvent).clientY; this.movementX = elemRect.left - (event as MouseEvent).clientX; } - dragEnd(ev, template) { - let scale = this.scaleService.getScale(); - let nodeAddedEvent: NodeAddedEvent = { - template: template, - server: 'local', - numberOfNodes: 1, - x: ((event as MouseEvent).clientX - this.project.scene_width/2 + window.scrollX + this.movementX) * scale, //template.width - y: ((event as MouseEvent).clientY - this.project.scene_height/2 + window.scrollY + this.movementY) * scale - }; - this.onNodeCreation.emit(nodeAddedEvent); + dragEnd(ev, template: Template) { + this.symbolService.raw(this.server, template.symbol.substring(1)).subscribe((symbolSvg: string) => { + let width = +symbolSvg.split("width=\"")[1].split("\"")[0]; + let scale = this.scaleService.getScale(); + + let nodeAddedEvent: NodeAddedEvent = { + template: template, + server: 'local', + numberOfNodes: 1, + x: this.startX + ev.x - this.project.scene_width/2 - (width/2) + window.scrollX , + y: this.startY + ev.y - this.project.scene_height/2 + window.scrollY + }; + this.onNodeCreation.emit(nodeAddedEvent); + }); } openDialog() { diff --git a/src/app/services/symbol.service.ts b/src/app/services/symbol.service.ts index cba041d0..b5476d6b 100644 --- a/src/app/services/symbol.service.ts +++ b/src/app/services/symbol.service.ts @@ -19,6 +19,10 @@ export class SymbolService { return this.symbols.getValue().find((symbol: Symbol) => symbol.symbol_id === symbol_id); } + getByFilename(symbol_filename: string) { + return this.symbols.getValue().find((symbol: Symbol) => symbol.filename === symbol_filename); + } + add(server: Server, symbolName: string, symbol: string) { this.cache = null; return this.httpServer.post(server, `/symbols/${symbolName}/raw`, symbol) From fe51a1797dde7b8c55eecf13725bda137b372d65 Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Mon, 4 May 2020 16:36:14 +0200 Subject: [PATCH 4/5] List restyled --- .../project-map/project-map.component.ts | 1 + .../template/template.component.html | 34 +++++++++++++++---- .../template/template.component.scss | 28 +++++++++++---- .../components/template/template.component.ts | 2 +- 4 files changed, 50 insertions(+), 15 deletions(-) diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 61a62f9f..493f365f 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -180,6 +180,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { }), mergeMap((project: Project) => { this.project = project; + this.projectService.open(this.server, this.project.project_id); this.title.setTitle(this.project.name); if (this.mapSettingsService.interfaceLabels.has(project.project_id)) { diff --git a/src/app/components/template/template.component.html b/src/app/components/template/template.component.html index 1d11e02e..da726c73 100644 --- a/src/app/components/template/template.component.html +++ b/src/app/components/template/template.component.html @@ -29,15 +29,35 @@
- - - - - +
+ + + +
+ +
+
{{templates[i].name}}
+ + +
+ +
+
{{templates[i+1].name}}
+ + +
+ +
+
{{templates[i+2].name}}
+ + +
+ +
+
{{templates[i+3].name}}
 - {{template.name}} - +
diff --git a/src/app/components/template/template.component.scss b/src/app/components/template/template.component.scss index 2f2aa2ab..575bc404 100644 --- a/src/app/components/template/template.component.scss +++ b/src/app/components/template/template.component.scss @@ -1,10 +1,10 @@ -// ::ng-deep .menu { -// scrollbar-color: darkgrey #263238!important; -// scrollbar-width: thin!important; -// } +::ng-deep .mat-menu-panel { + max-width: 400px; + max-height: 400px; +} .menu { - height: 200px; + width: 100%; overflow-y: scroll; scrollbar-color: darkgrey #263238; scrollbar-width: thin; @@ -36,6 +36,20 @@ --webkit-filter: invert(0)!important; } -.templateIcon { - height: 80px!important; +.templateList { + width: 100%; +} + +.templateRow { + display: flex; + margin-bottom: 10px; +} + +.templateText { + text-overflow: ellipsis; +} + +.templateIcon { + width: 80px!important; + padding: 10px; } diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts index 4c30e384..c5426586 100644 --- a/src/app/components/template/template.component.ts +++ b/src/app/components/template/template.component.ts @@ -70,7 +70,7 @@ export class TemplateComponent implements OnInit { dragEnd(ev, template: Template) { this.symbolService.raw(this.server, template.symbol.substring(1)).subscribe((symbolSvg: string) => { - let width = +symbolSvg.split("width=\"")[1].split("\"")[0]; + let width = +symbolSvg.split("width=\"")[1].split("\"")[0] ? +symbolSvg.split("width=\"")[1].split("\"")[0] : 0; let scale = this.scaleService.getScale(); let nodeAddedEvent: NodeAddedEvent = { From 9b482837d842339c5faea273347a06e91ee5954b Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Mon, 4 May 2020 18:05:39 +0200 Subject: [PATCH 5/5] Menu height extended --- src/app/components/template/template.component.scss | 2 +- src/app/components/template/template.component.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/template/template.component.scss b/src/app/components/template/template.component.scss index 575bc404..78753b14 100644 --- a/src/app/components/template/template.component.scss +++ b/src/app/components/template/template.component.scss @@ -1,6 +1,6 @@ ::ng-deep .mat-menu-panel { max-width: 400px; - max-height: 400px; + max-height: 500px; } .menu { diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts index c5426586..cd8d29dd 100644 --- a/src/app/components/template/template.component.ts +++ b/src/app/components/template/template.component.ts @@ -77,8 +77,8 @@ export class TemplateComponent implements OnInit { template: template, server: 'local', numberOfNodes: 1, - x: this.startX + ev.x - this.project.scene_width/2 - (width/2) + window.scrollX , - y: this.startY + ev.y - this.project.scene_height/2 + window.scrollY + x: (this.startX + ev.x - this.project.scene_width/2 - (width/2)) * scale + window.scrollX , + y: (this.startY + ev.y - this.project.scene_height/2) * scale + window.scrollY }; this.onNodeCreation.emit(nodeAddedEvent); });