Dragging with resizing

src/app/components/topology-summary/topology-summary.component.html

@@ -1,12 +1,18 @@
+<div
+    *ngIf="isDraggingEnabled"
+    (document:mousemove)="dragWidget($event)"
+    (document:mouseup)="toggleDragging(false)">
+</div>
 <div 
-    cdkDrag
     class="summaryWrapper" 
+    (mousedown)="toggleDragging(true)"
     *ngIf="projectsStatistics" 
     [ngStyle]="style" 
     mwlResizable
     [validateResize]="validate"
     [resizeEdges]="{ right: true, left: true, bottom: true, top: true }"
     [enableGhostResize]="true"
+    (resizeStart)="toggleDragging(false)"
     (resizeEnd)="onResizeEnd($event)">
     <div class="summaryHeader">
         <button class="titleButton" [ngClass]="{ marked: isTopologyVisible }" (click)="toogleTopologyVisibility(true)" mat-button>Map topology</button>

src/app/components/topology-summary/topology-summary.component.ts

@@ -23,8 +23,8 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
 
     @Output() closeTopologySummary = new EventEmitter<boolean>();
 
-    public style: object = {};
-    public styleInside: object = { height: `180px` };
+    public style = { };
+    public styleInside = { height: `180px` };
     private subscriptions: Subscription[] = [];
     projectsStatistics: ProjectStatistics;
     nodes: Node[] = [];
@@ -38,6 +38,8 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
     computes: Compute[] = [];
     isTopologyVisible: boolean = true;
 
+    isDraggingEnabled: boolean = false;
+
     constructor(
         private nodesDataSource: NodesDataSource,
         private projectService: ProjectService,
@@ -64,6 +66,33 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
         this.computeService.getComputes(this.server).subscribe((computes) => {
             this.computes = computes;
         });
+
+        this.style = { top: '20px', right: '20px'};
+    }
+
+    toggleDragging(value: boolean) {
+        this.isDraggingEnabled = value;
+    }
+
+    dragWidget(event) {
+        let x: number = Number(event.movementX);
+        let y: number = Number(event.movementY);
+
+        let left: number = Number(this.style['left'].split('px')[0]);
+        let top: number = Number(this.style['top'].split('px')[0]);
+        let width: number = Number(this.style['width'].split('px')[0]);
+        let height: number = Number(this.style['height'].split('px')[0]);
+
+        top = top + y;
+        left = left + x;
+
+        this.style = {
+            position: 'fixed',
+            left: `${left}px`,
+            top: `${top}px`,
+            width: `${width}px`,
+            height: `${height}px`
+        };
     }
 
     validate(event: ResizeEvent): boolean {