From 535ecdf0aafc0eee635bddbf3b2f3ddc38cc63cb Mon Sep 17 00:00:00 2001 From: ulferts Date: Thu, 24 Oct 2019 09:57:13 +0200 Subject: [PATCH 1/3] allow d&d to bottom of grid --- app/assets/stylesheets/content/_grid.sass | 3 +++ .../app/modules/grids/grid/area.service.ts | 9 ++++--- .../grids/grid/drag-and-drop.service.ts | 24 ++++++++++++------- .../modules/grids/grid/grid.component.html | 3 ++- 4 files changed, 25 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/content/_grid.sass b/app/assets/stylesheets/content/_grid.sass index baafc0daa0..8fb06a828c 100644 --- a/app/assets/stylesheets/content/_grid.sass +++ b/app/assets/stylesheets/content/_grid.sass @@ -87,6 +87,9 @@ body.widget-grid-layout &.-resize-target z-index: 1000 + &.-drop-only + display: none + .grid--resizer position: absolute height: 20px diff --git a/frontend/src/app/modules/grids/grid/area.service.ts b/frontend/src/app/modules/grids/grid/area.service.ts index ccfc9d3130..9d0ff4b90a 100644 --- a/frontend/src/app/modules/grids/grid/area.service.ts +++ b/frontend/src/app/modules/grids/grid/area.service.ts @@ -7,10 +7,8 @@ import {GridResource} from "core-app/modules/hal/resources/grid-resource"; import {GridWidgetResource} from "core-app/modules/hal/resources/grid-widget-resource"; import {SchemaResource} from "core-app/modules/hal/resources/schema-resource"; import {WidgetChangeset} from "core-app/modules/grids/widgets/widget-changeset"; -import * as moment from 'moment'; import {NotificationsService} from "core-app/modules/common/notifications/notifications.service"; import {I18nService} from "core-app/modules/common/i18n/i18n.service"; -import {GridDragAndDropService} from "core-app/modules/grids/grid/drag-and-drop.service"; import { BehaviorSubject } from 'rxjs'; @Injectable() @@ -90,12 +88,12 @@ export class GridAreaService { } public rebuildAndPersist() { - this.buildAreas(false); this.persist(); + this.buildAreas(false); } public persist() { - this.resource.rowCount = this.numRows; + this.resource.rowCount = this.numRows = (this.widgetAreas.map(area => area.endRow).sort().pop() || 2) - 1; this.resource.columnCount = this.numColumns; this.writeAreaChangesToWidgets(); @@ -176,7 +174,8 @@ export class GridAreaService { private buildGridAreas() { let cells:GridArea[] = []; - for (let row = 1; row <= this.numRows; row++) { + // the one extra row is added in case the user wants to drag a widget to the very bottom + for (let row = 1; row <= this.numRows + 1; row++) { cells.push(...this.buildGridAreasRow(row)); } diff --git a/frontend/src/app/modules/grids/grid/drag-and-drop.service.ts b/frontend/src/app/modules/grids/grid/drag-and-drop.service.ts index becc9ef07b..186d905025 100644 --- a/frontend/src/app/modules/grids/grid/drag-and-drop.service.ts +++ b/frontend/src/app/modules/grids/grid/drag-and-drop.service.ts @@ -1,11 +1,10 @@ -import {Injectable, OnDestroy, OnInit} from '@angular/core'; +import {Injectable, OnDestroy} from '@angular/core'; import {GridWidgetArea} from "core-app/modules/grids/areas/grid-widget-area"; -import {CdkDragDrop} from '@angular/cdk/drag-drop'; import {GridArea} from "core-app/modules/grids/areas/grid-area"; import {GridAreaService} from "core-app/modules/grids/grid/area.service"; import {GridMoveService} from "core-app/modules/grids/grid/move.service"; -import { Subscription, interval } from 'rxjs'; -import { switchMap, filter, throttle, distinctUntilChanged } from 'rxjs/operators'; +import { Subscription } from 'rxjs'; +import { filter, distinctUntilChanged, throttleTime } from 'rxjs/operators'; @Injectable() export class GridDragAndDropService implements OnDestroy { @@ -30,8 +29,8 @@ export class GridDragAndDropService implements OnDestroy { .$mousedOverArea .pipe( distinctUntilChanged(), - filter((area) => this.currentlyDragging && !!area && !this.layout.isGap(area)), - throttle(val => interval(10)) + filter((area) => this.currentlyDragging && !!area && !this.layout.isGap(area) && (this.placeholderArea!.startRow !== area.startRow || this.placeholderArea!.startColumn !== area.startColumn)), + throttleTime(10) ).subscribe(area => { this.updateArea(area!); @@ -60,6 +59,10 @@ export class GridDragAndDropService implements OnDestroy { return !!this.draggedArea; } + public isDropOnlyArea(area:GridArea) { + return !this.currentlyDragging && area.endRow === this.layout.numRows + 2; + } + public isDragged(area:GridWidgetArea) { return this.currentlyDragging && this.draggedArea!.guid === area.guid; } @@ -73,10 +76,10 @@ export class GridDragAndDropService implements OnDestroy { } public start(area:GridWidgetArea) { - this.draggedArea = area; this.placeholderArea = new GridWidgetArea(area.widget); // TODO find an angular way to do this that ideally does not require passing the element from the grid component this.draggedHeight = (document as any).getElementById(area.guid).offsetHeight - 2; // border width * 2 + this.draggedArea = area; } public abort() { @@ -109,7 +112,12 @@ export class GridDragAndDropService implements OnDestroy { private copyPositionButRestrict(source:GridArea, sink:GridWidgetArea) { sink.startRow = source.startRow; - if (source.startRow + sink.widget.height > this.layout.numRows + 1) { + + // The first condition is aimed at the case when the user drags an element to the very last row + // which is not reflected by the numRows. + if (source.startRow === this.layout.numRows + 1) { + sink.endRow = this.layout.numRows + 2; + } else if (source.startRow + sink.widget.height > this.layout.numRows + 1) { sink.endRow = this.layout.numRows + 1; } else { sink.endRow = source.startRow + sink.widget.height; diff --git a/frontend/src/app/modules/grids/grid/grid.component.html b/frontend/src/app/modules/grids/grid/grid.component.html index f22a917b63..ce79099e34 100644 --- a/frontend/src/app/modules/grids/grid/grid.component.html +++ b/frontend/src/app/modules/grids/grid/grid.component.html @@ -19,7 +19,7 @@
+ (cdkDragDropped)="drag.drop()"> Date: Thu, 24 Oct 2019 12:26:45 +0200 Subject: [PATCH 2/3] use cdkPlaceholder but hidden to avoid scroll jumping --- app/assets/stylesheets/content/_grid.sass | 3 +++ frontend/src/app/modules/grids/grid/grid.component.html | 1 - 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/content/_grid.sass b/app/assets/stylesheets/content/_grid.sass index 8fb06a828c..e74cef993d 100644 --- a/app/assets/stylesheets/content/_grid.sass +++ b/app/assets/stylesheets/content/_grid.sass @@ -138,6 +138,9 @@ body.widget-grid-layout border-radius: 3px margin: 0 + &.cdk-drag-placeholder + visibility: hidden + .grid--widget-content height: 100% overflow-x: auto diff --git a/frontend/src/app/modules/grids/grid/grid.component.html b/frontend/src/app/modules/grids/grid/grid.component.html index ce79099e34..4d429f7873 100644 --- a/frontend/src/app/modules/grids/grid/grid.component.html +++ b/frontend/src/app/modules/grids/grid/grid.component.html @@ -27,7 +27,6 @@ icon-drag-handle" cdkDragHandle> -
From 46a59ba049551baf9c19aa08114bb997f68a50b4 Mon Sep 17 00:00:00 2001 From: ulferts Date: Thu, 24 Oct 2019 15:29:29 +0200 Subject: [PATCH 3/3] throttle first to allow reactivating an area passed very fast --- frontend/src/app/modules/grids/grid/drag-and-drop.service.ts | 3 ++- frontend/src/app/modules/grids/grid/grid.component.html | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/modules/grids/grid/drag-and-drop.service.ts b/frontend/src/app/modules/grids/grid/drag-and-drop.service.ts index 186d905025..db2ccbd3ac 100644 --- a/frontend/src/app/modules/grids/grid/drag-and-drop.service.ts +++ b/frontend/src/app/modules/grids/grid/drag-and-drop.service.ts @@ -28,9 +28,10 @@ export class GridDragAndDropService implements OnDestroy { .layout .$mousedOverArea .pipe( + // avoid flickering of widgets as the grid gets resized by the placeholder movement + throttleTime(10), distinctUntilChanged(), filter((area) => this.currentlyDragging && !!area && !this.layout.isGap(area) && (this.placeholderArea!.startRow !== area.startRow || this.placeholderArea!.startColumn !== area.startColumn)), - throttleTime(10) ).subscribe(area => { this.updateArea(area!); diff --git a/frontend/src/app/modules/grids/grid/grid.component.html b/frontend/src/app/modules/grids/grid/grid.component.html index 4d429f7873..28960764f4 100644 --- a/frontend/src/app/modules/grids/grid/grid.component.html +++ b/frontend/src/app/modules/grids/grid/grid.component.html @@ -82,7 +82,7 @@ (mouseover)="layout.setMousedOverArea(gap)">
+ (click)="add.widget(gap)">