diff --git a/package.json b/package.json index 18af0055..40e43a6f 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "@angular/platform-browser": "^8.2.11", "@angular/platform-browser-dynamic": "^8.2.11", "@angular/router": "^8.2.11", + "angular-draggable-droppable": "^4.3.8", "angular-persistence": "^1.0.1", "angular-resizable-element": "^3.2.6", "angular2-draggable": "^2.3.2", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 419f3aef..7f99791d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -243,6 +243,8 @@ import { LockActionComponent } from './components/project-map/context-menu/actio import { NavigationDialogComponent } from './components/projects/navigation-dialog/navigation-dialog.component'; import { ScreenshotDialogComponent } from './components/project-map/screenshot-dialog/screenshot-dialog.component'; import { ResizableModule } from 'angular-resizable-element'; +import { DragAndDropModule } from 'angular-draggable-droppable'; +import { DragDropModule } from '@angular/cdk/drag-drop'; if (environment.production) { Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', { @@ -427,6 +429,8 @@ if (environment.production) { FileUploadModule, MatSidenavModule, ResizableModule, + DragAndDropModule, + DragDropModule, MATERIAL_IMPORTS ], providers: [ diff --git a/src/app/components/project-map/log-console/log-console.component.html b/src/app/components/project-map/log-console/log-console.component.html index ac93623b..122310c1 100644 --- a/src/app/components/project-map/log-console/log-console.component.html +++ b/src/app/components/project-map/log-console/log-console.component.html @@ -1,10 +1,17 @@ +
+
diff --git a/src/app/components/project-map/log-console/log-console.component.ts b/src/app/components/project-map/log-console/log-console.component.ts index 01a54848..3d97ebe0 100644 --- a/src/app/components/project-map/log-console/log-console.component.ts +++ b/src/app/components/project-map/log-console/log-console.component.ts @@ -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() { diff --git a/src/app/components/topology-summary/topology-summary.component.html b/src/app/components/topology-summary/topology-summary.component.html index f93bbaab..318fe499 100644 --- a/src/app/components/topology-summary/topology-summary.component.html +++ b/src/app/components/topology-summary/topology-summary.component.html @@ -1,11 +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 54693da1..d1b65e1a 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, @@ -69,6 +71,40 @@ export class TopologySummaryComponent implements OnInit, OnDestroy { this.computeService.getComputes(this.server).subscribe((computes) => { this.computes = computes; }); + + this.style = { top: '20px', right: '20px', width: '300px', height: '400px'}; + } + + 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 top: number = Number(this.style['top'].split('px')[0]) + y; + if (this.style['left']) { + let left: number = Number(this.style['left'].split('px')[0]) + x; + this.style = { + position: 'fixed', + left: `${left}px`, + top: `${top}px`, + width: `${width}px`, + height: `${height}px` + }; + } else { + let right: number = Number(this.style['right'].split('px')[0]) - x; + this.style = { + position: 'fixed', + right: `${right}px`, + top: `${top}px`, + width: `${width}px`, + height: `${height}px` + }; + } } validate(event: ResizeEvent): boolean { diff --git a/src/app/services/mapsettings.service.ts b/src/app/services/mapsettings.service.ts index ca0f385b..171336af 100644 --- a/src/app/services/mapsettings.service.ts +++ b/src/app/services/mapsettings.service.ts @@ -4,8 +4,8 @@ import { Subject } from 'rxjs'; @Injectable() export class MapSettingsService { public isMapLocked = new Subject(); - public isTopologySummaryVisible: boolean = false; - public isLogConsoleVisible: boolean = false; + public isTopologySummaryVisible: boolean = true; + public isLogConsoleVisible: boolean = true; public isLayerNumberVisible: boolean = false; public interfaceLabels: Map = new Map(); public mapRenderedEmitter = new EventEmitter(); diff --git a/yarn.lock b/yarn.lock index 95488ec6..8d2224e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1061,6 +1061,14 @@ amdefine@>=0.0.4: resolved "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU= +angular-draggable-droppable@^4.3.8: + version "4.3.8" + resolved "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-4.3.8.tgz#fb13a358015478152bd066c7099dd00d3201981f" + integrity sha512-IIl3M+oXvaWPfLrbJdvdWcZLJb6/FqhImELNqBhbTlYMudyiJaLn1lUFYWz8xDti+b1eUoJpEPU3hliBYZmAvw== + dependencies: + dom-autoscroller "^2.3.4" + tslib "^1.9.0" + angular-persistence@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/angular-persistence/-/angular-persistence-1.0.1.tgz#79ffe7317f1f7aed88e69f07705f0ac32ccdb9da" @@ -1095,6 +1103,11 @@ angular2-indexeddb@^1.2.3: dependencies: "@angular/core" ">=4.3.1" +animation-frame-polyfill@^1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/animation-frame-polyfill/-/animation-frame-polyfill-1.0.1.tgz#5f5ad993a78794bd176acde5b6dce62867410c9d" + integrity sha1-X1rZk6eHlL0Xas3lttzmKGdBDJ0= + ansi-align@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb" @@ -1275,6 +1288,11 @@ array-flatten@^2.1.0: resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099" integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ== +array-from@^2.1.1: + version "2.1.1" + resolved "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195" + integrity sha1-z+nYwmYoudxa7MYqn12PHzUsEZU= + array-union@^1.0.1: version "1.0.2" resolved "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39" @@ -2502,6 +2520,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-point-cb@^1.0.0: + version "1.2.0" + resolved "https://registry.npmjs.org/create-point-cb/-/create-point-cb-1.2.0.tgz#1bce47fc4fc01855ee12138d676b0cb2a7cbce71" + integrity sha1-G85H/E/AGFXuEhONZ2sMsqfLznE= + dependencies: + type-func "^1.0.1" + cross-spawn@^3.0.0: version "3.0.1" resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982" @@ -3196,6 +3221,30 @@ dns-txt@^2.0.2: dependencies: buffer-indexof "^1.0.0" +dom-autoscroller@^2.3.4: + version "2.3.4" + resolved "https://registry.npmjs.org/dom-autoscroller/-/dom-autoscroller-2.3.4.tgz#1ed25cbde2bdf3bf3eb762937089b20ecef190bd" + integrity sha512-HcAdt/2Dq9x4CG6LWXc2x9Iq0MJPAu8fuzHncclq7byufqYEYVtx9sZ/dyzR+gdj4qwEC9p27Lw1G2HRRYX6jQ== + dependencies: + animation-frame-polyfill "^1.0.0" + create-point-cb "^1.0.0" + dom-mousemove-dispatcher "^1.0.1" + dom-plane "^1.0.1" + dom-set "^1.0.1" + type-func "^1.0.1" + +dom-mousemove-dispatcher@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/dom-mousemove-dispatcher/-/dom-mousemove-dispatcher-1.0.1.tgz#a24a6ddf93b27bb3694f72087546a57fc7e9140f" + integrity sha1-okpt35Oye7NpT3IIdUalf8fpFA8= + +dom-plane@^1.0.1: + version "1.0.2" + resolved "https://registry.npmjs.org/dom-plane/-/dom-plane-1.0.2.tgz#f8c85e697c587f147e8fc2fac1de078c1fe4172c" + integrity sha1-+MheaXxYfxR+j8L6wd4HjB/kFyw= + dependencies: + create-point-cb "^1.0.0" + dom-serialize@^2.2.0: version "2.2.1" resolved "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b" @@ -3206,6 +3255,15 @@ dom-serialize@^2.2.0: extend "^3.0.0" void-elements "^2.0.0" +dom-set@^1.0.1: + version "1.1.1" + resolved "https://registry.npmjs.org/dom-set/-/dom-set-1.1.1.tgz#5c2c610ee4839b520ed5f98ddbcbe314c0fa954a" + integrity sha1-XCxhDuSDm1IO1fmN28vjFMD6lUo= + dependencies: + array-from "^2.1.1" + is-array "^1.0.1" + iselement "^1.1.4" + domain-browser@^1.1.1: version "1.2.0" resolved "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda" @@ -4675,6 +4733,11 @@ is-accessor-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" +is-array@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/is-array/-/is-array-1.0.1.tgz#e9850cc2cc860c3bc0977e84ccf0dd464584279a" + integrity sha1-6YUMwsyGDDvAl36EzPDdRkWEJ5o= + is-arrayish@^0.2.1: version "0.2.1" resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" @@ -4964,6 +5027,11 @@ isbinaryfile@^4.0.2: resolved "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.2.tgz#bfc45642da645681c610cca831022e30af426488" integrity sha512-C3FSxJdNrEr2F4z6uFtNzECDM5hXk+46fxaa+cwBe5/XrWSmzdG8DDgyjfX6/NRdBB21q2JXuRAzPCUs+fclnQ== +iselement@^1.1.4: + version "1.1.4" + resolved "https://registry.npmjs.org/iselement/-/iselement-1.1.4.tgz#7e55b52a8ebca50a7e2e80e5b8d2840f32353146" + integrity sha1-flW1Ko68pQp+LoDluNKEDzI1MUY= + isexe@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" @@ -8584,6 +8652,11 @@ type-fest@^0.5.2: resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2" integrity sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw== +type-func@^1.0.1: + version "1.0.3" + resolved "https://registry.npmjs.org/type-func/-/type-func-1.0.3.tgz#ab184234ae80d8d50057cefeff3b2d97d08ae9b0" + integrity sha1-qxhCNK6A2NUAV87+/zstl9CK6bA= + type-is@~1.6.17, type-is@~1.6.18: version "1.6.18" resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"