ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-08 02:54:16 +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-item *ngFor="let template of filteredTemplates" class="templateIcon">
<span>
<span mwlDraggable (dragEnd)="dragEnd($event, template)">
<span mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, template)">
<img class="image" [src]="getImageSourceForTemplate(template)"/>
</span>
{{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'];
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);
}