@helpdice/draggable 0.0.0-stage → 0.0.1

package/src/state/auto-scroller/can-scroll.ts

@@ -0,0 +1,320 @@
+
+import type { Position } from 'css-box-model';
+import type {
+  DroppableDimension,
+  Viewport,
+  Scrollable,
+} from '../../types';
+
+import { add, apply, isEqual, origin } from '../position';
+
+type CanPartiallyScrollArgs = {
+  max: Position;
+  current: Position;
+  change: Position;
+};
+
+const smallestSigned = apply((value: number) => {
+  if (value === 0) {
+    return 0;
+  }
+  return value > 0 ? 1 : -1;
+});
+
+type GetRemainderArgs = {
+  current: Position;
+  max: Position;
+  change: Position;
+};
+
+// We need to figure out how much of the movement
+// cannot be done with a scroll
+export const getOverlap = (() => {
+  const getRemainder = (target: number, max: number): number => {
+    if (target < 0) {
+      return target;
+    }
+    if (target > max) {
+      return target - max;
+    }
+    return 0;
+  };
+
+  return ({ current, max, change }: GetRemainderArgs): Position | null => {
+    const targetScroll: Position = add(current, change);
+
+    const overlap: Position = {
+      x: getRemainder(targetScroll.x, max.x),
+      y: getRemainder(targetScroll.y, max.y),
+    };
+
+    if (isEqual(overlap, origin)) {
+      return null;
+    }
+
+    return overlap;
+  };
+})();
+
+export const canPartiallyScroll = ({
+  max: rawMax,
+  current,
+  change,
+}: CanPartiallyScrollArgs): boolean => {
+  const max: Position = {
+    x: Math.max(current.x, rawMax.x),
+    y: Math.max(current.y, rawMax.y),
+  };
+
+  const smallestChange: Position = smallestSigned(change);
+
+  const overlap: Position | null = getOverlap({
+    max,
+    current,
+    change: smallestChange,
+  });
+
+  if (!overlap) {
+    return true;
+  }
+
+  if (smallestChange.x !== 0 && overlap.x === 0) {
+    return true;
+  }
+
+  if (smallestChange.y !== 0 && overlap.y === 0) {
+    return true;
+  }
+
+  return false;
+};
+
+export const canScrollWindow = (
+  viewport: Viewport,
+  change: Position,
+): boolean =>
+  canPartiallyScroll({
+    current: viewport.scroll.current,
+    max: viewport.scroll.max,
+    change,
+  });
+
+export const getWindowOverlap = (
+  viewport: Viewport,
+  change: Position,
+): Position | null => {
+  if (!canScrollWindow(viewport, change)) {
+    return null;
+  }
+
+  const max: Position = viewport.scroll.max;
+  const current: Position = viewport.scroll.current;
+
+  return getOverlap({
+    current,
+    max,
+    change,
+  });
+};
+
+export const canScrollDroppable = (
+  droppable: DroppableDimension,
+  change: Position,
+): boolean => {
+
+  const frame: Scrollable | null = droppable.frame;
+
+  if (!frame) {
+    return false;
+  }
+
+  return canPartiallyScroll({
+    current: frame.scroll.current,
+    max: frame.scroll.max,
+    change,
+  });
+};
+
+export const getDroppableOverlap = (
+  droppable: DroppableDimension,
+  change: Position,
+): Position | null => {
+
+  const frame: Scrollable | null = droppable.frame;
+
+  if (!frame) {
+    return null;
+  }
+
+  if (!canScrollDroppable(droppable, change)) {
+    return null;
+  }
+
+  return getOverlap({
+    current: frame.scroll.current,
+    max: frame.scroll.max,
+    change,
+  });
+};
+
+
+// // @flow
+// import { type Position } from 'css-box-model';
+// import { add, apply, isEqual, origin } from '../position';
+// import type { DroppableDimension, Viewport, Scrollable } from '../../types';
+
+// type CanPartiallyScrollArgs = {|
+//   max: Position,
+//   current: Position,
+//   change: Position,
+// |};
+
+// const smallestSigned = apply((value: number) => {
+//   if (value === 0) {
+//     return 0;
+//   }
+//   return value > 0 ? 1 : -1;
+// });
+
+// type GetRemainderArgs = {|
+//   current: Position,
+//   max: Position,
+//   change: Position,
+// |};
+
+// // We need to figure out how much of the movement
+// // cannot be done with a scroll
+// export const getOverlap = (() => {
+//   const getRemainder = (target: number, max: number): number => {
+//     if (target < 0) {
+//       return target;
+//     }
+//     if (target > max) {
+//       return target - max;
+//     }
+//     return 0;
+//   };
+
+//   return ({ current, max, change }: GetRemainderArgs): ?Position => {
+//     const targetScroll: Position = add(current, change);
+
+//     const overlap: Position = {
+//       x: getRemainder(targetScroll.x, max.x),
+//       y: getRemainder(targetScroll.y, max.y),
+//     };
+
+//     if (isEqual(overlap, origin)) {
+//       return null;
+//     }
+
+//     return overlap;
+//   };
+// })();
+
+// export const canPartiallyScroll = ({
+//   max: rawMax,
+//   current,
+//   change,
+// }: CanPartiallyScrollArgs): boolean => {
+//   // It is possible for the max scroll to be greater than the current scroll
+//   // when there are scrollbars on the cross axis. We adjust for this by
+//   // increasing the max scroll point if needed
+//   // This will allow movements backwards even if the current scroll is greater than the max scroll
+//   const max: Position = {
+//     x: Math.max(current.x, rawMax.x),
+//     y: Math.max(current.y, rawMax.y),
+//   };
+
+//   // Only need to be able to move the smallest amount in the desired direction
+//   const smallestChange: Position = smallestSigned(change);
+
+//   const overlap: ?Position = getOverlap({
+//     max,
+//     current,
+//     change: smallestChange,
+//   });
+
+//   // no overlap at all - we can move there!
+//   if (!overlap) {
+//     return true;
+//   }
+
+//   // if there was an x value, but there is no x overlap - then we can scroll on the x!
+//   if (smallestChange.x !== 0 && overlap.x === 0) {
+//     return true;
+//   }
+
+//   // if there was an y value, but there is no y overlap - then we can scroll on the y!
+//   if (smallestChange.y !== 0 && overlap.y === 0) {
+//     return true;
+//   }
+
+//   return false;
+// };
+
+// export const canScrollWindow = (
+//   viewport: Viewport,
+//   change: Position,
+// ): boolean =>
+//   canPartiallyScroll({
+//     current: viewport.scroll.current,
+//     max: viewport.scroll.max,
+//     change,
+//   });
+
+// export const getWindowOverlap = (
+//   viewport: Viewport,
+//   change: Position,
+// ): ?Position => {
+//   if (!canScrollWindow(viewport, change)) {
+//     return null;
+//   }
+
+//   const max: Position = viewport.scroll.max;
+//   const current: Position = viewport.scroll.current;
+
+//   return getOverlap({
+//     current,
+//     max,
+//     change,
+//   });
+// };
+
+// export const canScrollDroppable = (
+//   droppable: DroppableDimension,
+//   change: Position,
+// ): boolean => {
+//   const frame: ?Scrollable = droppable.frame;
+
+//   // Cannot scroll when there is no scrollable
+//   if (!frame) {
+//     return false;
+//   }
+
+//   return canPartiallyScroll({
+//     current: frame.scroll.current,
+//     max: frame.scroll.max,
+//     change,
+//   });
+// };
+
+// export const getDroppableOverlap = (
+//   droppable: DroppableDimension,
+//   change: Position,
+// ): ?Position => {
+//   const frame: ?Scrollable = droppable.frame;
+
+//   if (!frame) {
+//     return null;
+//   }
+
+//   if (!canScrollDroppable(droppable, change)) {
+//     return null;
+//   }
+
+//   return getOverlap({
+//     current: frame.scroll.current,
+//     max: frame.scroll.max,
+//     change,
+//   });
+// };

package/src/state/auto-scroller/fluid-scroller/config.ts

@@ -0,0 +1,25 @@
+// @flow
+
+// Values used to control how the fluid auto scroll feels
+const config = {
+  // percentage distance from edge of container:
+  startFromPercentage: 0.25,
+  maxScrollAtPercentage: 0.05,
+  // pixels per frame
+  maxPixelScroll: 28,
+
+  // A function used to ease a percentage value
+  // A simple linear function would be: (percentage) => percentage;
+  // percentage is between 0 and 1
+  // result must be between 0 and 1
+  ease: (percentage: number): number => Math.pow(percentage, 2),
+
+  durationDampening: {
+    // ms: how long to dampen the speed of an auto scroll from the start of a drag
+    stopDampeningAt: 1200,
+    // ms: when to start accelerating the reduction of duration dampening
+    accelerateAt: 360,
+  },
+};
+
+export default config;

package/src/state/auto-scroller/fluid-scroller/did-start-in-scrollable-area.ts

@@ -0,0 +1 @@
+// @flow

package/src/state/auto-scroller/fluid-scroller/get-best-scrollable-droppable.ts

@@ -0,0 +1,77 @@
+// @flow
+import memoizeOne from 'memoize-one';
+import { type Position } from 'css-box-model';
+import type {
+  DroppableDimension,
+  DroppableDimensionMap,
+  DroppableId,
+} from '../../../types';
+import { invariant } from '../../../invariant';
+import isPositionInFrame from '../../visibility/is-position-in-frame';
+import { toDroppableList } from '../../dimension-structures';
+import { find } from '../../../native-with-fallback';
+
+const getScrollableDroppables = memoizeOne(
+  (droppables: DroppableDimensionMap): DroppableDimension[] =>
+    toDroppableList(droppables).filter(
+      (droppable: DroppableDimension): boolean => {
+        // exclude disabled droppables
+        if (!droppable.isEnabled) {
+          return false;
+        }
+
+        // only want droppables that are scrollable
+        if (!droppable.frame) {
+          return false;
+        }
+
+        return true;
+      },
+    ),
+);
+
+const getScrollableDroppableOver = (
+  target: Position,
+  droppables: DroppableDimensionMap,
+): DroppableDimension | undefined => {
+  const maybe: DroppableDimension | undefined = find(
+    getScrollableDroppables(droppables),
+    (droppable: DroppableDimension): boolean => {
+      invariant(droppable.frame, 'Invalid result');
+      return isPositionInFrame(droppable.frame.pageMarginBox)(target);
+    },
+  );
+
+  return maybe;
+};
+
+type Api = {
+  center: Position,
+  destination: DroppableId | null,
+  droppables: DroppableDimensionMap,
+};
+
+export default ({
+  center,
+  destination,
+  droppables,
+}: Api): DroppableDimension | null | undefined => {
+  // We need to scroll the best droppable frame we can so that the
+  // placeholder buffer logic works correctly
+
+  if (destination) {
+    const dimension: DroppableDimension = droppables[destination];
+    if (!dimension.frame) {
+      return null;
+    }
+    return dimension;
+  }
+
+  // 2. If we are not over a droppable - are we over a droppable frame?
+  const dimension: DroppableDimension | undefined = getScrollableDroppableOver(
+    center,
+    droppables,
+  );
+
+  return dimension;
+};

package/src/state/auto-scroller/fluid-scroller/get-droppable-scroll-change.ts

@@ -0,0 +1,39 @@
+// @flow
+import type { Position, Rect } from 'css-box-model';
+import type { Scrollable, DroppableDimension } from '../../../types';
+import getScroll from './get-scroll';
+import { canScrollDroppable } from '../can-scroll';
+
+type Args = {
+  droppable: DroppableDimension,
+  subject: Rect,
+  center: Position,
+  dragStartTime: number,
+  shouldUseTimeDampening: boolean,
+};
+
+export default ({
+  droppable,
+  subject,
+  center,
+  dragStartTime,
+  shouldUseTimeDampening,
+}: Args): Position | null => {
+  // We know this has a closestScrollable
+  const frame: Scrollable | null = droppable.frame;
+
+  // this should never happen - just being safe
+  if (!frame) {
+    return null;
+  }
+
+  const scroll: Position | null = getScroll({
+    dragStartTime,
+    container: frame.pageMarginBox,
+    subject,
+    center,
+    shouldUseTimeDampening,
+  });
+
+  return scroll && canScrollDroppable(droppable, scroll) ? scroll : null;
+};

package/src/state/auto-scroller/fluid-scroller/get-percentage.ts

@@ -0,0 +1,25 @@
+// @flow
+import { warning } from '../../../dev-warning';
+
+type Args = {
+  startOfRange: number,
+  endOfRange: number,
+  current: number,
+};
+
+export default ({ startOfRange, endOfRange, current }: Args): number => {
+  const range: number = endOfRange - startOfRange;
+
+  if (range === 0) {
+    warning(`
+      Detected distance range of 0 in the fluid auto scroller
+      This is unexpected and would cause a divide by 0 issue.
+      Not allowing an auto scroll
+    `);
+    return 0;
+  }
+
+  const currentInRange: number = current - startOfRange;
+  const percentage: number = currentInRange / range;
+  return percentage;
+};

package/src/state/auto-scroller/fluid-scroller/get-scroll/adjust-for-size-limits.ts

@@ -0,0 +1,30 @@
+// @flow
+import type { Rect, Position } from 'css-box-model';
+
+type Args = {
+  container: Rect,
+  subject: Rect,
+  proposedScroll: Position,
+};
+
+export default ({ container, subject, proposedScroll }: Args): Position | null | undefined => {
+  const isTooBigVertically: boolean = subject.height > container.height;
+  const isTooBigHorizontally: boolean = subject.width > container.width;
+
+  // not too big on any axis
+  if (!isTooBigHorizontally && !isTooBigVertically) {
+    return proposedScroll;
+  }
+
+  // too big on both axis
+  if (isTooBigHorizontally && isTooBigVertically) {
+    return null;
+  }
+
+  // Only too big on one axis
+  // Exclude the axis that we cannot scroll on
+  return {
+    x: isTooBigHorizontally ? 0 : proposedScroll.x,
+    y: isTooBigVertically ? 0 : proposedScroll.y,
+  };
+};

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

@@ -0,0 +1,37 @@
+// @flow
+import getPercentage from '../../get-percentage';
+import config from '../../config';
+import minScroll from './min-scroll';
+
+const accelerateAt: number = config.durationDampening.accelerateAt;
+const stopAt: number = config.durationDampening.stopDampeningAt;
+
+export default (proposedScroll: number, dragStartTime: number): number => {
+  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 * config.ease(betweenAccelerateAtAndStopAtPercentage);
+
+  return Math.ceil(scroll);
+};

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

@@ -0,0 +1,25 @@
+// @flow
+import type { Rect } from 'css-box-model';
+import config from '../../config';
+import type { Axis } from '../../../../../types';
+
+// all in pixels
+export type DistanceThresholds = {
+  startScrollingFrom: number
+  maxScrollValueAt: number
+};
+
+// converts the percentages in the config into actual pixel values
+export default (container: Rect, axis: Axis): DistanceThresholds => {
+  const startScrollingFrom: number =
+    container[axis.size] * config.startFromPercentage;
+  const maxScrollValueAt: number =
+    container[axis.size] * config.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.ts

@@ -0,0 +1,61 @@
+// @flow
+import { type DistanceThresholds } from './get-distance-thresholds';
+import getPercentage from '../../get-percentage';
+import config from '../../config';
+import minScroll from './min-scroll';
+
+export default (
+  distanceToEdge: number,
+  thresholds: DistanceThresholds,
+): 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;
+  }
+
+  // use max speed when on or over boundary
+  if (distanceToEdge <= thresholds.maxScrollValueAt) {
+    return config.maxPixelScroll;
+  }
+
+  // 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 =
+    config.maxPixelScroll * 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.ts

@@ -0,0 +1,39 @@
+// @flow
+import { type DistanceThresholds } from './get-distance-thresholds';
+import getValueFromDistance from './get-value-from-distance';
+import dampenValueByTime from './dampen-value-by-time';
+import minScroll from './min-scroll';
+
+type Args = {
+  distanceToEdge: number,
+  thresholds: DistanceThresholds,
+  dragStartTime: number,
+  shouldUseTimeDampening: boolean,
+};
+
+export default ({
+  distanceToEdge,
+  thresholds,
+  dragStartTime,
+  shouldUseTimeDampening,
+}: Args): number => {
+  const scroll: number = getValueFromDistance(distanceToEdge, thresholds);
+
+  // 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), minScroll);
+};