From b17fcd251b825ef11fbc64a109c169b4c0e2ee0c Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Tue, 22 Oct 2019 06:15:53 -0700 Subject: [PATCH 1/5] Ability to drag widgets added --- package.json | 1 + src/app/app.module.ts | 2 + .../log-console/log-console.component.html | 1 + .../topology-summary.component.html | 1 + yarn.lock | 73 +++++++++++++++++++ 5 files changed, 78 insertions(+) diff --git a/package.json b/package.json index 042550dd..05fa38fb 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "@angular/platform-browser": "^8.2.8", "@angular/platform-browser-dynamic": "^8.2.8", "@angular/router": "^8.2.8", + "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..10a87563 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -243,6 +243,7 @@ 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'; if (environment.production) { Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', { @@ -427,6 +428,7 @@ if (environment.production) { FileUploadModule, MatSidenavModule, ResizableModule, + DragAndDropModule, 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..1f50740b 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,4 +1,5 @@
=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" From 761e1a62ce1cd1799cd43bb0c49397b0627d20b3 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Tue, 22 Oct 2019 07:06:02 -0700 Subject: [PATCH 2/5] Another approach for topology summary widget --- src/app/app.module.ts | 2 ++ .../components/topology-summary/topology-summary.component.html | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 10a87563..7f99791d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -244,6 +244,7 @@ import { NavigationDialogComponent } from './components/projects/navigation-dial 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', { @@ -429,6 +430,7 @@ if (environment.production) { MatSidenavModule, ResizableModule, DragAndDropModule, + DragDropModule, MATERIAL_IMPORTS ], providers: [ diff --git a/src/app/components/topology-summary/topology-summary.component.html b/src/app/components/topology-summary/topology-summary.component.html index 002a3664..5564b009 100644 --- a/src/app/components/topology-summary/topology-summary.component.html +++ b/src/app/components/topology-summary/topology-summary.component.html @@ -1,5 +1,5 @@
Date: Mon, 28 Oct 2019 07:48:39 -0700 Subject: [PATCH 3/5] Dragging with resizing --- .../topology-summary.component.html | 8 ++++- .../topology-summary.component.ts | 33 +++++++++++++++++-- 2 files changed, 38 insertions(+), 3 deletions(-) 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 { From 3e8c21082bed8de890cec5d6f7c39747dcf3dbab Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Mon, 28 Oct 2019 08:09:59 -0700 Subject: [PATCH 4/5] Solution ready for topology summary widget --- .../topology-summary.component.html | 2 +- .../topology-summary.component.ts | 35 +++++++++++-------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/app/components/topology-summary/topology-summary.component.html b/src/app/components/topology-summary/topology-summary.component.html index dbc7d947..318fe499 100644 --- a/src/app/components/topology-summary/topology-summary.component.html +++ b/src/app/components/topology-summary/topology-summary.component.html @@ -3,7 +3,7 @@ (document:mousemove)="dragWidget($event)" (document:mouseup)="toggleDragging(false)">
-
Date: Tue, 29 Oct 2019 01:29:53 -0700 Subject: [PATCH 5/5] Dragging for console widget --- .../log-console/log-console.component.html | 8 ++++- .../log-console/log-console.component.ts | 36 +++++++++++++++++++ 2 files changed, 43 insertions(+), 1 deletion(-) 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 1f50740b..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,11 +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() {