@planningcenter/react-beautiful-dnd 13.2.0

package/src/state/auto-scroller/fluid-scroller/get-scroll/buffer-thresholds/calc-axis-scroll-conditions.js

@@ -0,0 +1,68 @@
+// @flow
+import type { Position, Rect, Spacing } from 'css-box-model';
+import type {
+  Axis,
+  AxisScrollConditions,
+  ScrollDetails,
+  DistanceThresholds,
+} from '../../../../../types';
+
+type Args = {|
+  axis: Axis,
+  center: Position,
+  centerInitial: Position,
+  container: Rect,
+  containerScroll: ScrollDetails,
+  distanceToEdges: Spacing,
+  bufferMinScroll: number,
+  thresholds: DistanceThresholds,
+  windowScrollOffset: Position,
+|};
+
+export default ({
+  axis,
+  bufferMinScroll,
+  center,
+  centerInitial,
+  container,
+  containerScroll,
+  distanceToEdges,
+  thresholds,
+  windowScrollOffset,
+}: Args): AxisScrollConditions => {
+  const distanceInsideThresholdEnd =
+    distanceToEdges[axis.end] < thresholds.startScrollingFrom;
+
+  const centerInsideThresholdEnd =
+    center[axis.line] >
+    container[axis.size] -
+      thresholds.startScrollingFrom +
+      windowScrollOffset[axis.line];
+
+  const inThresholdEnd = centerInsideThresholdEnd || distanceInsideThresholdEnd;
+
+  const inThresholdStart =
+    center[axis.line] <
+    thresholds.startScrollingFrom + windowScrollOffset[axis.line];
+
+  const draggedTowardsStart =
+    center[axis.line] < centerInitial[axis.line] - bufferMinScroll;
+
+  const draggedTowardsEnd =
+    center[axis.line] > centerInitial[axis.line] + bufferMinScroll;
+
+  const scrolledTowardsStart =
+    containerScroll.initial[axis.line] > containerScroll.current[axis.line];
+
+  const scrolledTowardsEnd =
+    containerScroll.initial[axis.line] < containerScroll.current[axis.line];
+
+  return {
+    inThresholdStart,
+    inThresholdEnd,
+    draggedTowardsStart,
+    draggedTowardsEnd,
+    scrolledTowardsStart,
+    scrolledTowardsEnd,
+  };
+};

package/src/state/auto-scroller/fluid-scroller/get-scroll/buffer-thresholds/get-scroll-conditions.js

@@ -0,0 +1,56 @@
+// @flow
+import type { Position, Rect, Spacing } from 'css-box-model';
+import type {
+  ScrollConditions,
+  ScrollDetails,
+  DistanceThresholds,
+} from '../../../../../types';
+import { horizontal, vertical } from '../../../../axis';
+import calcAxisScrollConditions from './calc-axis-scroll-conditions';
+
+type Args = {|
+  bufferMinScroll: number,
+  center: Position,
+  centerInitial: Position,
+  container: Rect,
+  containerScroll: ScrollDetails,
+  distanceToEdges: Spacing,
+  thresholdsHorizontal: DistanceThresholds,
+  thresholdsVertical: DistanceThresholds,
+  windowScrollOffset: Position,
+|};
+
+export default ({
+  bufferMinScroll,
+  center,
+  centerInitial,
+  container,
+  containerScroll,
+  distanceToEdges,
+  thresholdsHorizontal,
+  thresholdsVertical,
+  windowScrollOffset,
+}: Args): ScrollConditions => ({
+  xAxis: calcAxisScrollConditions({
+    axis: horizontal,
+    bufferMinScroll,
+    center,
+    centerInitial,
+    container,
+    containerScroll,
+    distanceToEdges,
+    thresholds: thresholdsHorizontal,
+    windowScrollOffset,
+  }),
+  yAxis: calcAxisScrollConditions({
+    axis: vertical,
+    bufferMinScroll,
+    center,
+    centerInitial,
+    container,
+    containerScroll,
+    distanceToEdges,
+    thresholds: thresholdsVertical,
+    windowScrollOffset,
+  }),
+});

package/src/state/auto-scroller/fluid-scroller/get-scroll/buffer-thresholds/index.js

@@ -0,0 +1,66 @@
+// @flow
+import type { Position, Rect, Spacing } from 'css-box-model';
+import type { DistanceThresholds, ScrollDetails } from '../../../../../types';
+import getScrollConditions from './get-scroll-conditions';
+
+const BUFFER_MIN_SCROLL_DEFAULT = 24;
+
+type Args = {|
+  center: Position,
+  centerInitial: Position,
+  container: Rect,
+  containerScroll: ScrollDetails,
+  distanceToEdges: Spacing,
+  bufferMinScroll?: number,
+  scroll: Position,
+  thresholdsHorizontal: DistanceThresholds,
+  thresholdsVertical: DistanceThresholds,
+  windowScrollOffset: Position,
+|};
+
+export default ({
+  bufferMinScroll = BUFFER_MIN_SCROLL_DEFAULT,
+  center,
+  centerInitial,
+  container,
+  containerScroll,
+  distanceToEdges,
+  scroll,
+  thresholdsHorizontal,
+  thresholdsVertical,
+  windowScrollOffset,
+}: Args): Position => {
+  const { xAxis, yAxis } = getScrollConditions({
+    bufferMinScroll,
+    center,
+    centerInitial,
+    container,
+    containerScroll,
+    distanceToEdges,
+    thresholdsHorizontal,
+    thresholdsVertical,
+    windowScrollOffset,
+  });
+
+  if (xAxis.inThresholdStart) {
+    if (!xAxis.draggedTowardsStart && !xAxis.scrolledTowardsEnd) {
+      scroll.x = 0;
+    }
+  } else if (xAxis.inThresholdEnd) {
+    if (!xAxis.draggedTowardsEnd && !xAxis.scrolledTowardsStart) {
+      scroll.x = 0;
+    }
+  }
+
+  if (yAxis.inThresholdStart) {
+    if (!yAxis.draggedTowardsStart && !yAxis.scrolledTowardsEnd) {
+      scroll.y = 0;
+    }
+  } else if (yAxis.inThresholdEnd) {
+    if (!yAxis.draggedTowardsEnd && !yAxis.scrolledTowardsStart) {
+      scroll.y = 0;
+    }
+  }
+
+  return scroll;
+};

package/src/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/dampen-value-by-time.js

@@ -0,0 +1,48 @@
+// @flow
+import getPercentage from '../../get-percentage';
+import config from '../../config';
+import minScroll from './min-scroll';
+import type { FluidScrollerConfigOverride } from '../../../../../types';
+
+const defaultAccelerateAt: number = config.durationDampening.accelerateAt;
+const defaultStopAt: number = config.durationDampening.stopDampeningAt;
+
+export default (
+  proposedScroll: number,
+  dragStartTime: number,
+  configOverride?: FluidScrollerConfigOverride,
+): number => {
+  const accelerateAt: number =
+    configOverride?.durationDampening?.accelerateAt || defaultAccelerateAt;
+  const stopAt: number =
+    configOverride?.durationDampening?.stopDampeningAt || defaultStopAt;
+  const ease: Function = configOverride?.ease || config.ease;
+
+  const startOfRange: number = dragStartTime;
+  const endOfRange: number = stopAt;
+  const now: number = Date.now();
+  const runTime: number = now - startOfRange;
+
+  // we have finished the time dampening period
+  if (runTime >= stopAt) {
+    return proposedScroll;
+  }
+
+  // Up to this point we know there is a proposed scroll
+  // but we have not reached our accelerate point
+  // Return the minimum amount of scroll
+  if (runTime < accelerateAt) {
+    return minScroll;
+  }
+
+  const betweenAccelerateAtAndStopAtPercentage: number = getPercentage({
+    startOfRange: accelerateAt,
+    endOfRange,
+    current: runTime,
+  });
+
+  const scroll: number =
+    proposedScroll * ease(betweenAccelerateAtAndStopAtPercentage);
+
+  return Math.ceil(scroll);
+};

package/src/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/get-distance-thresholds.js

@@ -0,0 +1,31 @@
+// @flow
+import type { Rect } from 'css-box-model';
+import config from '../../config';
+import type {
+  Axis,
+  DistanceThresholds,
+  FluidScrollerConfigOverride,
+} from '../../../../../types';
+
+// converts the percentages in the config (or override) into actual pixel values
+export default (
+  container: Rect,
+  axis: Axis,
+  configOverride?: FluidScrollerConfigOverride,
+): DistanceThresholds => {
+  const startFromPercentage =
+    configOverride?.startFromPercentage || config.startFromPercentage;
+
+  const maxScrollAtPercentage =
+    configOverride?.maxScrollAtPercentage || config.maxScrollAtPercentage;
+
+  const startScrollingFrom: number = container[axis.size] * startFromPercentage;
+  const maxScrollValueAt: number = container[axis.size] * maxScrollAtPercentage;
+
+  const thresholds: DistanceThresholds = {
+    startScrollingFrom,
+    maxScrollValueAt,
+  };
+
+  return thresholds;
+};

package/src/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/get-value-from-distance.js

@@ -0,0 +1,67 @@
+// @flow
+import type {
+  DistanceThresholds,
+  FluidScrollerConfigOverride,
+} from '../../../../../types';
+import getPercentage from '../../get-percentage';
+import config from '../../config';
+import minScroll from './min-scroll';
+
+export default (
+  distanceToEdge: number,
+  thresholds: DistanceThresholds,
+  configOverride?: FluidScrollerConfigOverride,
+): number => {
+  /*
+  // This function only looks at the distance to one edge
+  // Example: looking at bottom edge
+  |----------------------------------|
+  |                                  |
+  |                                  |
+  |                                  |
+  |                                  |
+  |                                  | => no scroll in this range
+  |                                  |
+  |                                  |
+  |  startScrollingFrom (eg 100px)   |
+  |                                  |
+  |                                  | => increased scroll value the closer to maxScrollValueAt
+  |  maxScrollValueAt (eg 10px)      |
+  |                                  | => max scroll value in this range
+  |----------------------------------|
+  */
+
+  // too far away to auto scroll
+  if (distanceToEdge > thresholds.startScrollingFrom) {
+    return 0;
+  }
+
+  const maxSpeed = configOverride?.maxPixelScroll || config.maxPixelScroll;
+
+  // use max speed when on or over boundary
+  if (distanceToEdge <= thresholds.maxScrollValueAt) {
+    return maxSpeed;
+  }
+
+  // when just going on the boundary return the minimum integer
+  if (distanceToEdge === thresholds.startScrollingFrom) {
+    return minScroll;
+  }
+
+  // to get the % past startScrollingFrom we will calculate
+  // the % the value is from maxScrollValueAt and then invert it
+  const percentageFromMaxScrollValueAt: number = getPercentage({
+    startOfRange: thresholds.maxScrollValueAt,
+    endOfRange: thresholds.startScrollingFrom,
+    current: distanceToEdge,
+  });
+
+  const percentageFromStartScrollingFrom: number =
+    1 - percentageFromMaxScrollValueAt;
+
+  const scroll: number =
+    maxSpeed * config.ease(percentageFromStartScrollingFrom);
+
+  // scroll will always be a positive integer
+  return Math.ceil(scroll);
+};

package/src/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/get-value.js

@@ -0,0 +1,51 @@
+// @flow
+import type {
+  DistanceThresholds,
+  FluidScrollerConfigOverride,
+} from '../../../../../types';
+import getValueFromDistance from './get-value-from-distance';
+import dampenValueByTime from './dampen-value-by-time';
+import minScroll from './min-scroll';
+
+type Args = {|
+  configOverride?: FluidScrollerConfigOverride,
+  distanceToEdge: number,
+  dragStartTime: number,
+  shouldUseTimeDampening: boolean,
+  thresholds: DistanceThresholds,
+|};
+
+export default ({
+  configOverride,
+  distanceToEdge,
+  dragStartTime,
+  shouldUseTimeDampening,
+  thresholds,
+}: Args): number => {
+  const scroll: number = getValueFromDistance(
+    distanceToEdge,
+    thresholds,
+    configOverride,
+  );
+
+  // not enough distance to trigger a minimum scroll
+  // we can bail here
+  if (scroll === 0) {
+    return 0;
+  }
+
+  // Dampen an auto scroll speed based on duration of drag
+
+  if (!shouldUseTimeDampening) {
+    return scroll;
+  }
+
+  // Once we know an auto scroll should occur based on distance,
+  // we must let at least 1px through to trigger a scroll event an
+  // another auto scroll call
+
+  return Math.max(
+    dampenValueByTime(scroll, dragStartTime, configOverride),
+    minScroll,
+  );
+};

package/src/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/index.js

@@ -0,0 +1,50 @@
+// @flow
+import type { Spacing } from 'css-box-model';
+import type {
+  Axis,
+  DistanceThresholds,
+  FluidScrollerConfigOverride,
+} from '../../../../../types';
+import getValue from './get-value';
+
+type GetOnAxisArgs = {|
+  axis: Axis,
+  configOverride?: FluidScrollerConfigOverride,
+  distanceToEdges: Spacing,
+  dragStartTime: number,
+  shouldUseTimeDampening: boolean,
+  thresholds: DistanceThresholds,
+|};
+
+export default ({
+  axis,
+  configOverride,
+  distanceToEdges,
+  dragStartTime,
+  shouldUseTimeDampening,
+  thresholds,
+}: GetOnAxisArgs): number => {
+  const isCloserToEnd: boolean =
+    distanceToEdges[axis.end] < distanceToEdges[axis.start];
+
+  if (isCloserToEnd) {
+    return getValue({
+      configOverride,
+      distanceToEdge: distanceToEdges[axis.end],
+      dragStartTime,
+      shouldUseTimeDampening,
+      thresholds,
+    });
+  }
+
+  return (
+    -1 *
+    getValue({
+      configOverride,
+      distanceToEdge: distanceToEdges[axis.start],
+      dragStartTime,
+      shouldUseTimeDampening,
+      thresholds,
+    })
+  );
+};

package/src/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/min-scroll.js

@@ -0,0 +1,4 @@
+// @flow
+
+// A scroll event will only be triggered when there is a value of at least 1px change
+export default 1;

package/src/state/auto-scroller/fluid-scroller/get-scroll/index.js

@@ -0,0 +1,139 @@
+// @flow
+import type { Position, Rect, Spacing } from 'css-box-model';
+import { apply, isEqual, origin } from '../../../position';
+import getScrollOnAxis from './get-scroll-on-axis';
+import adjustForSizeLimits from './adjust-for-size-limits';
+import { horizontal, vertical } from '../../../axis';
+import bufferThresholds from './buffer-thresholds';
+import getDistanceThresholds from './get-scroll-on-axis/get-distance-thresholds';
+import type {
+  DistanceThresholds,
+  FluidScrollerOptions,
+  ScrollDetails,
+} from '../../../../types';
+
+// will replace -0 and replace with +0
+const clean = apply((value: number) => (value === 0 ? 0 : value));
+
+type Args = {|
+  dragStartTime: number,
+  container: Rect,
+  containerScroll: ScrollDetails,
+  subject: Rect,
+  center: Position,
+  centerInitial: Position,
+  shouldUseTimeDampening: boolean,
+  fluidScrollerOptions?: FluidScrollerOptions,
+  windowScrollOffset?: Position,
+|};
+
+export default ({
+  dragStartTime,
+  container,
+  containerScroll,
+  subject,
+  center,
+  centerInitial,
+  shouldUseTimeDampening,
+  fluidScrollerOptions,
+  windowScrollOffset = origin,
+}: Args): ?Position => {
+  // get distance to each edge
+  const distanceToEdges: Spacing = {
+    top: center.y - container.top,
+    right: container.right - center.x,
+    bottom: container.bottom - center.y,
+    left: center.x - container.left,
+  };
+
+  const thresholdsVertical: DistanceThresholds = getDistanceThresholds(
+    container,
+    vertical,
+    fluidScrollerOptions?.configOverride,
+  );
+
+  const thresholdsHorizontal: DistanceThresholds = getDistanceThresholds(
+    container,
+    horizontal,
+    fluidScrollerOptions?.configOverride,
+  );
+
+  // 1. Figure out which x,y values are the best target
+  // 2. Can the container scroll in that direction at all?
+  // If no for both directions, then return null
+  // 3. Is the center close enough to a edge to start a drag?
+  // 4. Based on the distance, calculate the speed at which a scroll should occur
+  // The lower distance value the faster the scroll should be.
+  // Maximum speed value should be hit before the distance is 0
+  // Negative values to not continue to increase the speed
+  const y: number = getScrollOnAxis({
+    axis: vertical,
+    configOverride: fluidScrollerOptions?.configOverride,
+    distanceToEdges,
+    dragStartTime,
+    shouldUseTimeDampening,
+    thresholds: thresholdsVertical,
+  });
+  const x: number = getScrollOnAxis({
+    axis: horizontal,
+    configOverride: fluidScrollerOptions?.configOverride,
+    distanceToEdges,
+    dragStartTime,
+    shouldUseTimeDampening,
+    thresholds: thresholdsHorizontal,
+  });
+  const required: Position = clean({ x, y });
+
+  // nothing required
+  if (isEqual(required, origin)) {
+    return null;
+  }
+
+  // need to not scroll in a direction that we are too big to scroll in
+  const limited: ?Position = adjustForSizeLimits({
+    container,
+    subject,
+    proposedScroll: required,
+  });
+
+  if (!limited) {
+    return null;
+  }
+
+  let scroll: Position = limited;
+
+  if (fluidScrollerOptions) {
+    if (fluidScrollerOptions.bufferThresholds) {
+      // if the draggable originates inside a scroll threshold
+      // don't autoscroll in that threshold's direction until dragged in that direction
+      scroll = bufferThresholds({
+        bufferMinScroll: fluidScrollerOptions?.bufferMinScroll,
+        center,
+        centerInitial,
+        container,
+        containerScroll,
+        distanceToEdges,
+        scroll,
+        thresholdsHorizontal,
+        thresholdsVertical,
+        windowScrollOffset,
+      });
+    }
+    if (fluidScrollerOptions.thruGetScroll) {
+      // apply consumer injected scroll behavior
+      scroll = fluidScrollerOptions.thruGetScroll({
+        center,
+        centerInitial,
+        container,
+        containerScroll,
+        distanceToEdges,
+        scroll,
+        thresholdsHorizontal,
+        thresholdsVertical,
+        windowScrollOffset,
+      });
+    }
+  }
+
+  return isEqual(scroll, origin) ? null : scroll;
+};

package/src/state/auto-scroller/fluid-scroller/get-window-scroll-change.js

@@ -0,0 +1,43 @@
+// @flow
+import type { Position, Rect } from 'css-box-model';
+import type { FluidScrollerOptions, Viewport } from '../../../types';
+import getScroll from './get-scroll';
+import { canScrollWindow } from '../can-scroll';
+
+type Args = {|
+  viewport: Viewport,
+  subject: Rect,
+  center: Position,
+  centerInitial: Position,
+  dragStartTime: number,
+  shouldUseTimeDampening: boolean,
+  fluidScrollerOptions?: FluidScrollerOptions,
+|};
+
+export default ({
+  viewport,
+  subject,
+  center,
+  centerInitial,
+  dragStartTime,
+  shouldUseTimeDampening,
+  fluidScrollerOptions,
+}: Args): ?Position => {
+  const windowScrollOffset: Position = {
+    x: viewport.scroll.current.x,
+    y: viewport.scroll.current.y,
+  };
+  const scroll: ?Position = getScroll({
+    dragStartTime,
+    container: viewport.frame,
+    containerScroll: viewport.scroll,
+    subject,
+    center,
+    centerInitial,
+    shouldUseTimeDampening,
+    fluidScrollerOptions,
+    windowScrollOffset,
+  });
+
+  return scroll && canScrollWindow(viewport, scroll) ? scroll : null;
+};