diff --git a/src/app/components/topology-summary/topology-summary.component.html b/src/app/components/topology-summary/topology-summary.component.html index 5564b009..dbc7d947 100644 --- a/src/app/components/topology-summary/topology-summary.component.html +++ b/src/app/components/topology-summary/topology-summary.component.html @@ -1,12 +1,18 @@ +
+
diff --git a/src/app/components/topology-summary/topology-summary.component.ts b/src/app/components/topology-summary/topology-summary.component.ts index f1e129e1..0d795c5b 100644 --- a/src/app/components/topology-summary/topology-summary.component.ts +++ b/src/app/components/topology-summary/topology-summary.component.ts @@ -23,8 +23,8 @@ export class TopologySummaryComponent implements OnInit, OnDestroy { @Output() closeTopologySummary = new EventEmitter(); - 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 {