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

Updating drop mechanism

Browse Source
This commit is contained in:
piotrpekala7 2020-04-30 15:16:01 +02:00
parent 01d49a7321
commit 9594e397e5
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/template/template.component.html
View File

@ -32,7 +32,7 @@
<mat-list> <mat-list>
<mat-list-item *ngFor="let template of filteredTemplates" class="templateIcon"> <mat-list-item *ngFor="let template of filteredTemplates" class="templateIcon">
<span> <span>
<span mwlDraggable (dragEnd)="dragEnd($event, template)"> <span mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, template)">
<img class="image" [src]="getImageSourceForTemplate(template)"/> <img class="image" [src]="getImageSourceForTemplate(template)"/>
</span> </span>
{{template.name}} {{template.name}}

18
src/app/components/template/template.component.ts
View File

@ -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']; templateTypes: string[] = ['all', 'cloud', 'ethernet_hub', 'ethernet_switch', 'docker', 'dynamips', 'vpcs', 'traceng', 'virtualbox', 'vmware', 'iou', 'qemu'];
selectedType: string; selectedType: string;
movementX: number;
movementY: number;
constructor( constructor(
private dialog: MatDialog, private dialog: MatDialog,
private templateService: TemplateService, private templateService: TemplateService,
@ -49,18 +52,21 @@ export class TemplateComponent implements OnInit {
} }
} }
dragEnd(ev, template) { dragStart(ev) {
console.log('Element was dragged', ev); let elemRect = (event.target as HTMLElement).getBoundingClientRect();
console.log('Template', template);
console.log((event as MouseEvent).clientX, (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 scale = this.scaleService.getScale();
let nodeAddedEvent: NodeAddedEvent = { let nodeAddedEvent: NodeAddedEvent = {
template: template, template: template,
server: 'local', server: 'local',
numberOfNodes: 1, numberOfNodes: 1,
x: ((event as MouseEvent).clientX - this.project.scene_width/2 + window.scrollX) * scale, //template.width 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) * scale y: ((event as MouseEvent).clientY - this.project.scene_height/2 + window.scrollY + this.movementY) * scale
}; };
this.onNodeCreation.emit(nodeAddedEvent); this.onNodeCreation.emit(nodeAddedEvent);
} }