ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-18 23:36:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Dragging for console widget

Browse Source
This commit is contained in:
Piotr Pekala 2019-10-29 01:29:53 -07:00
parent 3e8c21082b
commit 50b28596ae
2 changed files with 43 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,17 @@
<div
*ngIf="isDraggingEnabled"
(document:mousemove)="dragWidget($event)"
(document:mouseup)="toggleDragging(false)">
</div>
<div
mwlDraggable
class="consoleWrapper"
(mousedown)="toggleDragging(true)"
[ngStyle]="style"
mwlResizable
[validateResize]="validate"
[resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
[enableGhostResize]="true"
(resizeStart)="toggleDragging(false)"
(resizeEnd)="onResizeEnd($event)">
<div class="consoleHeader">
<div class="consoleFiltering">

36
src/app/components/project-map/log-console/log-console.component.ts
View File

@ -48,6 +48,8 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
public style: object = {};
public styleInside: object = { height: `120px` };
isDraggingEnabled: boolean = false;
constructor(
private projectWebServiceHandler: ProjectWebServiceHandler,
private nodeService: NodeService,
@ -112,6 +114,40 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
message: message
});
});
this.style = { bottom: '20px', left: '20px', width: '600px', height: '180px'};
}
toggleDragging(value: boolean) {
this.isDraggingEnabled = value;
}
dragWidget(event) {
let x: number = Number(event.movementX);
let y: number = Number(event.movementY);
let width: number = Number(this.style['width'].split('px')[0]);
let height: number = Number(this.style['height'].split('px')[0]);
let left: number = Number(this.style['left'].split('px')[0]) + x;
if (this.style['top']) {
let top: number = Number(this.style['top'].split('px')[0]) + y;
this.style = {
position: 'fixed',
left: `${left}px`,
top: `${top}px`,
width: `${width}px`,
height: `${height}px`
};
} else {
let bottom: number = Number(this.style['bottom'].split('px')[0]) - y;
this.style = {
position: 'fixed',
left: `${left}px`,
bottom: `${bottom}px`,
width: `${width}px`,
height: `${height}px`
};
}
}
ngAfterViewInit() {