@helpdice/draggable 0.0.0-stage → 0.0.2

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

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

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

@@ -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.ts

@@ -0,0 +1,76 @@
+// @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';
+
+// will replace -0 and replace with +0
+const clean = apply((value: number) => (value === 0 ? 0 : value));
+
+type Args = {
+  dragStartTime: number,
+  container: Rect,
+  subject: Rect,
+  center: Position,
+  shouldUseTimeDampening: boolean,
+};
+
+export default ({
+  dragStartTime,
+  container,
+  subject,
+  center,
+  shouldUseTimeDampening,
+}: Args): Position | null => {
+  // 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,
+  };
+
+  // 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({
+    container,
+    distanceToEdges,
+    dragStartTime,
+    axis: vertical,
+    shouldUseTimeDampening,
+  });
+  const x: number = getScrollOnAxis({
+    container,
+    distanceToEdges,
+    dragStartTime,
+    axis: horizontal,
+    shouldUseTimeDampening,
+  });
+
+  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 | null | undefined = adjustForSizeLimits({
+    container,
+    subject,
+    proposedScroll: required,
+  });
+
+  if (!limited) {
+    return null;
+  }
+
+  return isEqual(limited, origin) ? null : limited;
+};

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

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

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

@@ -0,0 +1,91 @@
+// @flow
+import rafSchd from 'raf-schd';
+import { type Position } from 'css-box-model';
+import type { DraggingState, DroppableId } from '../../../types';
+import scroll from './scroll';
+import { invariant } from '../../../invariant';
+import * as timings from '../../../debug/timings';
+
+export type PublicArgs = {
+  scrollWindow: (change: Position) => void,
+  scrollDroppable: (id: DroppableId, change: Position) => void,
+};
+
+export type FluidScroller = {
+  scroll: (state: DraggingState) => void,
+  start: (state: DraggingState) => void,
+  stop: () => void,
+};
+
+type WhileDragging = {
+  dragStartTime: number,
+  shouldUseTimeDampening: boolean,
+};
+
+export default ({
+  scrollWindow,
+  scrollDroppable,
+}: PublicArgs): FluidScroller => {
+  const scheduleWindowScroll = rafSchd(scrollWindow);
+  const scheduleDroppableScroll = rafSchd(scrollDroppable);
+  let dragging: WhileDragging | null = null;
+
+  const tryScroll = (state: DraggingState): void => {
+    invariant(dragging, 'Cannot fluid scroll if not dragging');
+
+    const { shouldUseTimeDampening, dragStartTime } = dragging!; // not null
+
+    scroll({
+      state,
+      scrollWindow: scheduleWindowScroll,
+      scrollDroppable: scheduleDroppableScroll,
+      dragStartTime,
+      shouldUseTimeDampening,
+    });
+  };
+
+  const start = (state: DraggingState) => {
+    timings.start('starting fluid scroller');
+    invariant(!dragging, 'Cannot start auto scrolling when already started');
+    const dragStartTime: number = Date.now();
+
+    let wasScrollNeeded: boolean = false;
+    const fakeScrollCallback = () => {
+      wasScrollNeeded = true;
+    };
+    scroll({
+      state,
+      dragStartTime: 0,
+      shouldUseTimeDampening: false,
+      scrollWindow: fakeScrollCallback,
+      scrollDroppable: fakeScrollCallback,
+    });
+
+    dragging = {
+      dragStartTime,
+      shouldUseTimeDampening: wasScrollNeeded,
+    };
+    timings.finish('starting fluid scroller');
+
+    // we know an auto scroll is needed - let's do it!
+    if (wasScrollNeeded) {
+      tryScroll(state);
+    }
+  };
+
+  const stop = () => {
+    // can be called defensively
+    if (!dragging) {
+      return;
+    }
+    scheduleWindowScroll.cancel();
+    scheduleDroppableScroll.cancel();
+    dragging = null;
+  };
+
+  return {
+    start,
+    stop,
+    scroll: tryScroll,
+  };
+};

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

@@ -0,0 +1,72 @@
+// @flow
+import { type Position, type Rect } from 'css-box-model';
+import type {
+  DraggingState,
+  DroppableId,
+  DraggableDimension,
+  DroppableDimension,
+  Viewport,
+} from '../../../types';
+import getBestScrollableDroppable from './get-best-scrollable-droppable';
+import whatIsDraggedOver from '../../droppable/what-is-dragged-over';
+import getWindowScrollChange from './get-window-scroll-change';
+import getDroppableScrollChange from './get-droppable-scroll-change';
+
+type Args = {
+  state: DraggingState,
+  dragStartTime: number,
+  shouldUseTimeDampening: boolean,
+  scrollWindow: (scroll: Position) => void,
+  scrollDroppable: (id: DroppableId, scroll: Position) => void,
+};
+
+export default ({
+  state,
+  dragStartTime,
+  shouldUseTimeDampening,
+  scrollWindow,
+  scrollDroppable,
+}: Args): void => {
+  const center: Position = state.current.page.borderBoxCenter;
+  const draggable: DraggableDimension =
+    state.dimensions.draggables[state.critical.draggable.id];
+  const subject: Rect = draggable.page.marginBox;
+  // 1. Can we scroll the viewport?
+  if (state.isWindowScrollAllowed) {
+    const viewport: Viewport = state.viewport;
+    const change: Position | null = getWindowScrollChange({
+      dragStartTime,
+      viewport,
+      subject,
+      center,
+      shouldUseTimeDampening,
+    });
+
+    if (change) {
+      scrollWindow(change);
+      return;
+    }
+  }
+
+  const droppable: DroppableDimension | null | undefined = getBestScrollableDroppable({
+    center,
+    destination: whatIsDraggedOver(state.impact),
+    droppables: state.dimensions.droppables,
+  });
+
+  if (!droppable) {
+    return;
+  }
+
+  const change: Position | null = getDroppableScrollChange({
+    dragStartTime,
+    droppable,
+    subject,
+    center,
+    shouldUseTimeDampening,
+  });
+
+  if (change) {
+    scrollDroppable(droppable.descriptor.id, change);
+  }
+};

package/src/state/auto-scroller/index.ts

@@ -0,0 +1,56 @@
+// @flow
+import { type Position } from 'css-box-model';
+import createFluidScroller, { type FluidScroller } from './fluid-scroller';
+import createJumpScroller, { type JumpScroller } from './jump-scroller';
+import type { AutoScroller } from './auto-scroller-types';
+import type { DroppableId, State } from '../../types';
+import type { MoveArgs } from '../action-creators';
+
+export type Args = {
+  scrollWindow: (offset: Position) => void,
+  scrollDroppable: (id: DroppableId, change: Position) => void,
+  move: (args: MoveArgs) => unknown,
+};
+
+export default ({
+  scrollDroppable,
+  scrollWindow,
+  move,
+}: Args): AutoScroller => {
+  const fluidScroller: FluidScroller = createFluidScroller({
+    scrollWindow,
+    scrollDroppable,
+  });
+
+  const jumpScroll: JumpScroller = createJumpScroller({
+    move,
+    scrollWindow,
+    scrollDroppable,
+  });
+
+  const scroll = (state: State) => {
+    // Only allowing auto scrolling in the DRAGGING phase
+    if (state.phase !== 'DRAGGING') {
+      return;
+    }
+
+    if (state.movementMode === 'FLUID') {
+      fluidScroller.scroll(state);
+      return;
+    }
+
+    if (!state.scrollJumpRequest) {
+      return;
+    }
+
+    jumpScroll(state);
+  };
+
+  const scroller: AutoScroller = {
+    scroll,
+    start: fluidScroller.start,
+    stop: fluidScroller.stop,
+  };
+
+  return scroller;
+};

package/src/state/auto-scroller/jump-scroller.ts

@@ -0,0 +1,140 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { invariant } from '../../invariant';
+import { add, subtract } from '../position';
+import {
+  canScrollWindow,
+  canScrollDroppable,
+  getWindowOverlap,
+  getDroppableOverlap,
+} from './can-scroll';
+import whatIsDraggedOver from '../droppable/what-is-dragged-over';
+import { type MoveArgs } from '../action-creators';
+import type {
+  DroppableDimension,
+  Viewport,
+  DraggingState,
+  DroppableId,
+} from '../../types';
+
+type Args = {
+  scrollDroppable: (id: DroppableId, change: Position) => void,
+  scrollWindow: (offset: Position) => void,
+  move: (args: MoveArgs) => unknown,
+};
+
+export type JumpScroller = (state: DraggingState) => void;
+
+type Remainder = Position;
+
+export default ({
+  move,
+  scrollDroppable,
+  scrollWindow,
+}: Args): JumpScroller => {
+  const moveByOffset = (state: DraggingState, offset: Position) => {
+    const client: Position = add(state.current.client.selection, offset);
+    move({ client });
+  };
+
+  const scrollDroppableAsMuchAsItCan = (
+    droppable: DroppableDimension,
+    change: Position,
+  ): Remainder | null => {
+    // Droppable cannot absorb any of the scroll
+    if (!canScrollDroppable(droppable, change)) {
+      return change;
+    }
+
+    // Position | null
+    const overlap: Position | null = getDroppableOverlap(droppable, change);
+
+    // Droppable can absorb the entire change
+    if (!overlap) {
+      scrollDroppable(droppable.descriptor.id, change);
+      return null;
+    }
+
+    // Droppable can only absorb a part of the change
+    const whatTheDroppableCanScroll: Position = subtract(change, overlap);
+    scrollDroppable(droppable.descriptor.id, whatTheDroppableCanScroll);
+
+    const remainder: Position = subtract(change, whatTheDroppableCanScroll);
+    return remainder;
+  };
+
+  const scrollWindowAsMuchAsItCan = (
+    isWindowScrollAllowed: boolean,
+    viewport: Viewport,
+    change: Position,
+  ): Position | null => {
+    if (!isWindowScrollAllowed) {
+      return change;
+    }
+
+    if (!canScrollWindow(viewport, change)) {
+      // window cannot absorb any of the scroll
+      return change;
+    }
+
+    const overlap: Position | null = getWindowOverlap(viewport, change);
+
+    // window can absorb entire scroll
+    if (!overlap) {
+      scrollWindow(change);
+      return null;
+    }
+
+    // window can only absorb a part of the scroll
+    const whatTheWindowCanScroll: Position = subtract(change, overlap);
+    scrollWindow(whatTheWindowCanScroll);
+
+    const remainder: Position = subtract(change, whatTheWindowCanScroll);
+    return remainder;
+  };
+
+  const jumpScroller: JumpScroller = (state: DraggingState) => {
+    const request: Position | null = state.scrollJumpRequest;
+
+    if (!request) {
+      return;
+    }
+
+    const destination: DroppableId | null = whatIsDraggedOver(state.impact);
+    invariant(
+      destination,
+      'Cannot perform a jump scroll when there is no destination',
+    );
+
+    // 1. We scroll the droppable first if we can to avoid the draggable
+    // leaving the list
+
+    const droppableRemainder: Position | null = scrollDroppableAsMuchAsItCan(
+      state.dimensions.droppables[destination],
+      request,
+    );
+
+    // droppable absorbed the entire scroll
+    if (!droppableRemainder) {
+      return;
+    }
+
+    const viewport: Viewport = state.viewport;
+    const windowRemainder: Position | null = scrollWindowAsMuchAsItCan(
+      state.isWindowScrollAllowed,
+      viewport,
+      droppableRemainder,
+    );
+
+    // window could absorb all the droppable remainder
+    if (!windowRemainder) {
+      return;
+    }
+
+    // The entire scroll could not be absorbed by the droppable and window
+    // so we manually move whatever is left
+    moveByOffset(state, windowRemainder);
+  };
+
+  return jumpScroller;
+};

package/src/state/axis.ts

@@ -0,0 +1,26 @@
+// @flow
+import type { HorizontalAxis, VerticalAxis } from '../types';
+
+export const vertical: VerticalAxis = {
+  direction: 'vertical',
+  line: 'y',
+  crossAxisLine: 'x',
+  start: 'top',
+  end: 'bottom',
+  size: 'height',
+  crossAxisStart: 'left',
+  crossAxisEnd: 'right',
+  crossAxisSize: 'width',
+};
+
+export const horizontal: HorizontalAxis = {
+  direction: 'horizontal',
+  line: 'x',
+  crossAxisLine: 'y',
+  start: 'left',
+  end: 'right',
+  size: 'width',
+  crossAxisStart: 'top',
+  crossAxisEnd: 'bottom',
+  crossAxisSize: 'height',
+};

package/src/state/calculate-drag-impact/calculate-reorder-impact.ts

@@ -0,0 +1,138 @@
+// @flow
+import type {
+  DraggableDimension,
+  DroppableDimension,
+  DragImpact,
+  DisplacementGroups,
+  Viewport,
+  DisplacedBy,
+} from '../../types';
+import removeDraggableFromList from '../remove-draggable-from-list';
+import isHomeOf from '../droppable/is-home-of';
+import { emptyGroups } from '../no-impact';
+import { find } from '../../native-with-fallback';
+import getDisplacementGroups from '../get-displacement-groups';
+
+// Exact
+type Args = {
+  draggable: DraggableDimension,
+  insideDestination: DraggableDimension[],
+  destination: DroppableDimension,
+  viewport: Viewport,
+  displacedBy: DisplacedBy,
+  last: DisplacementGroups,
+  index: number | null,
+  forceShouldAnimate?: boolean,
+};
+
+function getIndexOfLastItem(
+  draggables: DraggableDimension[],
+  options: { inHomeList: boolean }, // Exact
+): number {
+  if (!draggables.length) {
+    return 0;
+  }
+
+  const indexOfLastItem: number =
+    draggables[draggables.length - 1].descriptor.index;
+
+  // When in a foreign list there will be an additional one item in the list
+  return options.inHomeList ? indexOfLastItem : indexOfLastItem + 1;
+}
+
+// Exact
+type GoAtEndArgs = {
+  insideDestination: DraggableDimension[],
+  inHomeList: boolean,
+  displacedBy: DisplacedBy,
+  destination: DroppableDimension,
+};
+
+function goAtEnd({
+  insideDestination,
+  inHomeList,
+  displacedBy,
+  destination,
+}: GoAtEndArgs): DragImpact {
+  const newIndex: number = getIndexOfLastItem(insideDestination, {
+    inHomeList,
+  });
+
+  return {
+    displaced: emptyGroups,
+    displacedBy,
+    at: {
+      type: 'REORDER',
+      destination: {
+        droppableId: destination.descriptor.id,
+        index: newIndex,
+      },
+    },
+  };
+}
+
+export default function calculateReorderImpact({
+  draggable,
+  insideDestination,
+  destination,
+  viewport,
+  displacedBy,
+  last,
+  index,
+  forceShouldAnimate,
+}: Args): DragImpact {
+  const inHomeList: boolean = isHomeOf(draggable, destination);
+
+  // Go into last spot of list
+  if (index == null) {
+    return goAtEnd({
+      insideDestination,
+      inHomeList,
+      displacedBy,
+      destination,
+    });
+  }
+
+  // this might be the dragging item
+  const match: DraggableDimension | null | undefined = find(
+    insideDestination,
+    (item: DraggableDimension) => item.descriptor.index === index,
+  );
+
+  if (!match) {
+    return goAtEnd({
+      insideDestination,
+      inHomeList,
+      displacedBy,
+      destination,
+    });
+  }
+  const withoutDragging: DraggableDimension[] = removeDraggableFromList(
+    draggable,
+    insideDestination,
+  );
+
+  const sliceFrom: number = insideDestination.indexOf(match);
+  const impacted: DraggableDimension[] = withoutDragging.slice(sliceFrom);
+
+  const displaced: DisplacementGroups = getDisplacementGroups({
+    afterDragging: impacted,
+    destination,
+    displacedBy,
+    last,
+    viewport: viewport.frame,
+    forceShouldAnimate,
+  });
+
+  return {
+    displaced,
+    displacedBy,
+    at: {
+      type: 'REORDER',
+      destination: {
+        droppableId: destination.descriptor.id,
+        index,
+      },
+    },
+  };
+}