From dd039ff6506fce2ffc26675c5627c8c0da40fb03 Mon Sep 17 00:00:00 2001 From: Alex Reardon Date: Fri, 7 Jun 2019 08:59:33 +1000 Subject: [PATCH 1/3] fixing incorrect visibility detection for horizontal lists --- src/state/get-displacement.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/state/get-displacement.js b/src/state/get-displacement.js index cbe3a83dc9..41d86daf07 100644 --- a/src/state/get-displacement.js +++ b/src/state/get-displacement.js @@ -65,10 +65,12 @@ const getTarget = (draggable: DraggableDimension, onLift: OnLift): Rect => { // To keep things simple we just expand the whole area for this check // The worst case is some minor redundant offscreen movements const expandBy: Spacing = { + // pull backwards into viewport top: onLift.displacedBy.point.y, - right: onLift.displacedBy.point.x, + right: 0, bottom: 0, - left: 0, + // pull backwards into viewport + left: onLift.displacedBy.point.x, }; return getRect(expand(marginBox, expandBy)); }; From 80182d43920148e258b76f607d7ac4b8c6343495 Mon Sep 17 00:00:00 2001 From: Alex Reardon Date: Fri, 7 Jun 2019 16:24:45 +1000 Subject: [PATCH 2/3] adding overscanning test --- src/state/get-displacement.js | 2 + .../started-displaced.spec.js | 1 - .../visibility-overscanning.spec.js | 120 ++++++++++++++++++ 3 files changed, 122 insertions(+), 1 deletion(-) create mode 100644 test/unit/state/get-displacement/visibility-overscanning.spec.js diff --git a/src/state/get-displacement.js b/src/state/get-displacement.js index 41d86daf07..5c18921f01 100644 --- a/src/state/get-displacement.js +++ b/src/state/get-displacement.js @@ -58,6 +58,7 @@ const getTarget = (draggable: DraggableDimension, onLift: OnLift): Rect => { return marginBox; } + // ## Visibility overscanning // We are expanding rather than offsetting the marginBox. // In some cases we want // - the target based on the starting position (such as when dropping outside of any list) @@ -72,6 +73,7 @@ const getTarget = (draggable: DraggableDimension, onLift: OnLift): Rect => { // pull backwards into viewport left: onLift.displacedBy.point.x, }; + return getRect(expand(marginBox, expandBy)); }; diff --git a/test/unit/state/get-displacement/started-displaced.spec.js b/test/unit/state/get-displacement/started-displaced.spec.js index 941e946804..cbd7f6db16 100644 --- a/test/unit/state/get-displacement/started-displaced.spec.js +++ b/test/unit/state/get-displacement/started-displaced.spec.js @@ -57,7 +57,6 @@ const dragging: DraggableDimension = getDraggableDimension({ type: home.descriptor.type, index: 0, }, - // i borderBox: { top: 0, left: 0, diff --git a/test/unit/state/get-displacement/visibility-overscanning.spec.js b/test/unit/state/get-displacement/visibility-overscanning.spec.js new file mode 100644 index 0000000000..925226f9f9 --- /dev/null +++ b/test/unit/state/get-displacement/visibility-overscanning.spec.js @@ -0,0 +1,120 @@ +// @flow +import { getRect, type Rect, type Spacing, type Position } from 'css-box-model'; +import type { + DragImpact, + Displacement, + DraggableDimension, + DroppableDimension, + Viewport, + DraggableDimensionMap, + Axis, +} from '../../../../src/types'; +import getDisplacement from '../../../../src/state/get-displacement'; +import { + getDroppableDimension, + getDraggableDimension, +} from '../../../utils/dimension'; +import { toDraggableMap } from '../../../../src/state/dimension-structures'; +import getHomeOnLift from '../../../../src/state/get-home-on-lift'; +import { createViewport } from '../../../utils/viewport'; +import { origin, patch } from '../../../../src/state/position'; +import { vertical, horizontal } from '../../../../src/state/axis'; +import getNotVisibleDisplacement from '../../../utils/get-displacement/get-not-visible-displacement'; +import { offsetByPosition } from '../../../../src/state/spacing'; +import getNotAnimatedDisplacement from '../../../utils/get-displacement/get-not-animated-displacement'; + +[vertical, horizontal].forEach((axis: Axis) => { + it(`should overscan visibility on axis ${axis.direction}`, () => { + const visibleArea: Rect = getRect({ + top: 0, + right: 200, + left: 0, + bottom: 200, + }); + const visibleSizeOnAxis: Position = patch( + axis.line, + visibleArea[axis.size], + ); + + const viewport: Viewport = createViewport({ + frame: visibleArea, + scroll: origin, + scrollHeight: visibleArea.height, + scrollWidth: visibleArea.width, + }); + + const home: DroppableDimension = getDroppableDimension({ + descriptor: { + id: 'drop', + type: 'TYPE', + }, + direction: axis.direction, + borderBox: { + top: 0, + left: 0, + // massive + right: 10000, + bottom: 10000, + }, + }); + + const fillVisibleArea: DraggableDimension = getDraggableDimension({ + descriptor: { + id: 'item-0', + droppableId: home.descriptor.id, + type: home.descriptor.type, + index: 0, + }, + borderBox: visibleArea, + }); + + const notVisible1: DraggableDimension = getDraggableDimension({ + descriptor: { + id: 'not-visible-1', + droppableId: home.descriptor.id, + type: home.descriptor.type, + index: 1, + }, + // totally not visible initially + // but will be within overscan of dragging item size + borderBox: offsetByPosition( + offsetByPosition(visibleArea, visibleSizeOnAxis), + patch(axis.line, 1), + ), + }); + + const notVisible2: DraggableDimension = getDraggableDimension({ + descriptor: { + id: 'not-visible-2', + droppableId: home.descriptor.id, + type: home.descriptor.type, + index: 1, + }, + // totally not visible initially + // not within overscan of dragging item size + borderBox: offsetByPosition( + notVisible1.client.borderBox, + visibleSizeOnAxis, + ), + }); + + const draggables: DraggableDimensionMap = toDraggableMap([ + fillVisibleArea, + notVisible1, + notVisible2, + ]); + + const { impact: homeImpact } = getHomeOnLift({ + draggable: fillVisibleArea, + home, + draggables, + viewport, + }); + + const expected: Displacement[] = [ + getNotAnimatedDisplacement(notVisible1), + getNotVisibleDisplacement(notVisible2), + ]; + expect(homeImpact.movement.displaced).toEqual(expected); + }); +}); From d9ff10cbc7cfec805e260163b30b491e4f5e1cf9 Mon Sep 17 00:00:00 2001 From: Alex Reardon Date: Fri, 7 Jun 2019 16:30:49 +1000 Subject: [PATCH 3/3] fixing linting --- .../state/get-displacement/visibility-overscanning.spec.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/unit/state/get-displacement/visibility-overscanning.spec.js b/test/unit/state/get-displacement/visibility-overscanning.spec.js index 925226f9f9..6bc337cbae 100644 --- a/test/unit/state/get-displacement/visibility-overscanning.spec.js +++ b/test/unit/state/get-displacement/visibility-overscanning.spec.js @@ -1,7 +1,6 @@ // @flow -import { getRect, type Rect, type Spacing, type Position } from 'css-box-model'; +import { getRect, type Rect, type Position } from 'css-box-model'; import type { - DragImpact, Displacement, DraggableDimension, DroppableDimension, @@ -9,7 +8,6 @@ import type { DraggableDimensionMap, Axis, } from '../../../../src/types'; -import getDisplacement from '../../../../src/state/get-displacement'; import { getDroppableDimension, getDraggableDimension,