@helpdice/draggable 0.0.0-stage → 0.0.1

package/src/state/get-drag-impact/index.ts

@@ -0,0 +1,94 @@
+// @flow
+import { type Position, type Rect } from 'css-box-model';
+import type {
+  DroppableId,
+  DraggableDimension,
+  DroppableDimension,
+  DraggableDimensionMap,
+  DroppableDimensionMap,
+  DragImpact,
+  Viewport,
+  LiftEffect,
+} from '../../types';
+import getDroppableOver from '../get-droppable-over';
+import getDraggablesInsideDroppable from '../get-draggables-inside-droppable';
+import withDroppableScroll from '../with-scroll-change/with-droppable-scroll';
+import getReorderImpact from './get-reorder-impact';
+import getCombineImpact from './get-combine-impact';
+import noImpact from '../no-impact';
+import { offsetRectByPosition } from '../rect';
+
+// Exact
+type Args = {
+  pageOffset: Position,
+  draggable: DraggableDimension,
+  // all dimensions in system
+  draggables: DraggableDimensionMap,
+  droppables: DroppableDimensionMap,
+  previousImpact: DragImpact,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+};
+
+export default ({
+  pageOffset,
+  draggable,
+  draggables,
+  droppables,
+  previousImpact,
+  viewport,
+  afterCritical,
+}: Args): DragImpact => {
+  const pageBorderBox: Rect = offsetRectByPosition(
+    draggable.page.borderBox,
+    pageOffset,
+  );
+
+  const destinationId: DroppableId | null = getDroppableOver({
+    pageBorderBox,
+    draggable,
+    droppables,
+  });
+
+  // not dragging over anything
+
+  if (!destinationId) {
+    // A big design decision was made here to collapse the home list
+    // when not over any list. This yielded the most consistently beautiful experience.
+    return noImpact;
+  }
+
+  const destination: DroppableDimension = droppables[destinationId];
+  const insideDestination: DraggableDimension[] = getDraggablesInsideDroppable(
+    destination.descriptor.id,
+    draggables,
+  );
+
+  // Where the element actually is now.
+  // Need to take into account the change of scroll in the droppable
+  const pageBorderBoxWithDroppableScroll: Rect = withDroppableScroll(
+    destination,
+    pageBorderBox,
+  );
+
+  // checking combine first so we combine before any reordering
+  return (
+    getCombineImpact({
+      pageBorderBoxWithDroppableScroll,
+      draggable,
+      previousImpact,
+      destination,
+      insideDestination,
+      afterCritical,
+    }) ||
+    getReorderImpact({
+      pageBorderBoxWithDroppableScroll,
+      draggable,
+      destination,
+      insideDestination,
+      last: previousImpact.displaced,
+      viewport,
+      afterCritical,
+    })
+  );
+};

package/src/state/get-draggables-inside-droppable.ts

@@ -0,0 +1,31 @@
+// @flow
+import memoizeOne from 'memoize-one';
+import { toDraggableList } from './dimension-structures';
+import type {
+  DraggableDimension,
+  DroppableId,
+  DraggableDimensionMap,
+} from '../types';
+
+export default memoizeOne(
+  (
+    // using droppableId to avoid cache busted when we
+    // update the droppable (such as when it scrolls)
+    droppableId: DroppableId,
+    draggables: DraggableDimensionMap,
+  ): DraggableDimension[] => {
+    const result = toDraggableList(draggables)
+      .filter(
+        (draggable: DraggableDimension): boolean =>
+          droppableId === draggable.descriptor.droppableId,
+      )
+      // Dimensions are not guarenteed to be ordered in the same order as keys
+      // So we need to sort them so they are in the correct order
+      .sort(
+        (a: DraggableDimension, b: DraggableDimension): number =>
+          a.descriptor.index - b.descriptor.index,
+      );
+
+    return result;
+  },
+);

package/src/state/get-droppable-over.ts

@@ -0,0 +1,161 @@
+// @flow
+import { type Position, type Rect } from 'css-box-model';
+import type {
+  DroppableDimension,
+  DroppableDimensionMap,
+  DroppableId,
+  DraggableDimension,
+  Axis,
+} from '../types';
+import { toDroppableList } from './dimension-structures';
+import isPositionInFrame from './visibility/is-position-in-frame';
+import { distance, patch } from './position';
+import isWithin from './is-within';
+
+// https://stackoverflow.com/questions/306316/determine-if-two-rectangles-overlap-each-other
+// https://silentmatt.com/rectangle-intersection/
+function getHasOverlap(first: Rect, second: Rect): boolean {
+  return (
+    first.left < second.right &&
+    first.right > second.left &&
+    first.top < second.bottom &&
+    first.bottom > second.top
+  );
+}
+
+// Exact
+type Args = {
+  pageBorderBox: Rect,
+  draggable: DraggableDimension,
+  droppables: DroppableDimensionMap,
+};
+
+// Exact
+type WithDistance = {
+  distance: number,
+  id: DroppableId,
+};
+
+// Exact
+type GetFurthestArgs = {
+  pageBorderBox: Rect,
+  draggable: DraggableDimension,
+  candidates: DroppableDimension[],
+};
+
+function getFurthestAway({
+  pageBorderBox,
+  draggable,
+  candidates,
+}: GetFurthestArgs): DroppableId | null {
+  // We are not comparing the center of the home list with the target list as it would
+  // give preference to giant lists
+
+  // We are measuring the distance from where the draggable started
+  // to where it is *hitting* the candidate
+  // Note: The hit point might technically not be in the bounds of the candidate
+
+  const startCenter: Position = draggable.page.borderBox.center;
+  const sorted: WithDistance[] = candidates
+    .map((candidate: DroppableDimension): WithDistance => {
+      const axis: Axis = candidate.axis;
+      const target: Position = patch(
+        candidate.axis.line,
+        // use the current center of the dragging item on the main axis
+        pageBorderBox.center[axis.line],
+        // use the center of the list on the cross axis
+        candidate.page.borderBox.center[axis.crossAxisLine],
+      );
+
+      return {
+        id: candidate.descriptor.id,
+        distance: distance(startCenter, target),
+      };
+    })
+    // largest value will be first
+    .sort((a: WithDistance, b: WithDistance) => b.distance - a.distance);
+
+  // just being safe
+  return sorted[0] ? sorted[0].id : null;
+}
+
+export default function getDroppableOver({
+  pageBorderBox,
+  draggable,
+  droppables,
+}: Args): DroppableId | null {
+  // We know at this point that some overlap has to exist
+  const candidates: DroppableDimension[] = toDroppableList(droppables).filter(
+    (item: DroppableDimension): boolean => {
+      // Cannot be a candidate when disabled
+      if (!item.isEnabled) {
+        return false;
+      }
+
+      // Cannot be a candidate when there is no visible area
+      const active: Rect | null = item.subject.active;
+      if (!active) {
+        return false;
+      }
+
+      // Cannot be a candidate when dragging item is not over the droppable at all
+      if (!getHasOverlap(pageBorderBox, active)) {
+        return false;
+      }
+
+      // 1. Candidate if the center position is over a droppable
+      if (isPositionInFrame(active)(pageBorderBox.center)) {
+        return true;
+      }
+
+      // 2. Candidate if an edge is over the cross axis half way point
+      // 3. Candidate if dragging item is totally over droppable on cross axis
+
+      const axis: Axis = item.axis;
+      const childCenter: number = active.center[axis.crossAxisLine];
+      const crossAxisStart: number = pageBorderBox[axis.crossAxisStart];
+      const crossAxisEnd: number = pageBorderBox[axis.crossAxisEnd];
+
+      const isContained = isWithin(
+        active[axis.crossAxisStart],
+        active[axis.crossAxisEnd],
+      );
+
+      const isStartContained: boolean = isContained(crossAxisStart);
+      const isEndContained: boolean = isContained(crossAxisEnd);
+
+      // Dragging item is totally covering the active area
+      if (!isStartContained && !isEndContained) {
+        return true;
+      }
+
+      /**
+       * edges must go beyond the center line in order to avoid
+       * cases were both conditions are satisfied.
+       */
+      if (isStartContained) {
+        return crossAxisStart < childCenter;
+      }
+
+      return crossAxisEnd > childCenter;
+    },
+  );
+
+  if (!candidates.length) {
+    return null;
+  }
+
+  // Only one candidate - use that!
+  if (candidates.length === 1) {
+    return candidates[0].descriptor.id;
+  }
+
+  // Multiple options returned
+  // Should only occur with really large items
+  // Going to use fallback: distance from home
+  return getFurthestAway({
+    pageBorderBox,
+    draggable,
+    candidates,
+  });
+}

package/src/state/get-frame.ts

@@ -0,0 +1,10 @@
+// @flow
+import { invariant } from '../invariant';
+
+import type { DroppableDimension, Scrollable } from '../types';
+
+export default (droppable: DroppableDimension): Scrollable => {
+  const frame: Scrollable | null = droppable.frame;
+  invariant(frame, 'Expected Droppable to have a frame');
+  return frame;
+};

package/src/state/get-home-location.ts

@@ -0,0 +1,7 @@
+// @flow
+import type { DraggableDescriptor, DraggableLocation } from '../types';
+
+export default (descriptor: DraggableDescriptor): DraggableLocation => ({
+  index: descriptor.index,
+  droppableId: descriptor.droppableId,
+});

package/src/state/get-impact-location.ts

@@ -0,0 +1,16 @@
+// @flow
+import type { DragImpact, DraggableLocation, Combine } from '../types';
+
+export function tryGetDestination(impact: DragImpact): DraggableLocation | null {
+  if (impact.at && impact.at.type === 'REORDER') {
+    return impact.at.destination;
+  }
+  return null;
+}
+
+export function tryGetCombine(impact: DragImpact): Combine | null {
+  if (impact.at && impact.at.type === 'COMBINE') {
+    return impact.at.combine;
+  }
+  return null;
+}

package/src/state/get-is-displaced.ts

@@ -0,0 +1,12 @@
+// @flow
+import type { DisplacementGroups, DraggableId } from '../types';
+
+// Exact
+type Args = {
+  displaced: DisplacementGroups,
+  id: DraggableId,
+};
+
+export default function getIsDisplaced({ displaced, id }: Args): boolean {
+  return Boolean(displaced.visible[id] || displaced.invisible[id]);
+}

package/src/state/get-lift-effect.ts

@@ -0,0 +1,84 @@
+// @flow
+import { invariant } from '../invariant';
+import getHomeLocation from './get-home-location';
+import type {
+  DraggableDimension,
+  DroppableDimension,
+  DraggableDimensionMap,
+  DragImpact,
+  DisplacedBy,
+  Viewport,
+  DraggableIdMap,
+  DisplacementGroups,
+  LiftEffect,
+} from '../types';
+import getDraggablesInsideDroppable from './get-draggables-inside-droppable';
+import getDisplacedBy from './get-displaced-by';
+import getDisplacementGroups from './get-displacement-groups';
+
+// Exact
+type Args = {
+  draggable: DraggableDimension,
+  home: DroppableDimension,
+  draggables: DraggableDimensionMap,
+  viewport: Viewport,
+};
+
+// Exact
+type Result = {
+  afterCritical: LiftEffect,
+  impact: DragImpact,
+};
+
+export default ({ draggable, home, draggables, viewport }: Args): Result => {
+  const displacedBy: DisplacedBy = getDisplacedBy(
+    home.axis,
+    draggable.displaceBy,
+  );
+
+  const insideHome: DraggableDimension[] = getDraggablesInsideDroppable(
+    home.descriptor.id,
+    draggables,
+  );
+
+  // in a list that does not start at 0 the descriptor.index might be different from the index in the list
+  // eg a list could be: [2,3,4]. A descriptor.index of '2' would actually be in index '0' of the list
+  const rawIndex: number = insideHome.indexOf(draggable);
+  invariant(rawIndex !== -1, 'Expected draggable to be inside home list');
+
+  const afterDragging: DraggableDimension[] = insideHome.slice(rawIndex + 1);
+  const effected: DraggableIdMap = afterDragging.reduce(
+    (previous: DraggableIdMap, item: DraggableDimension): DraggableIdMap => {
+      previous[item.descriptor.id] = true;
+      return previous;
+    },
+    {},
+  );
+  const afterCritical: LiftEffect = {
+    inVirtualList: home.descriptor.mode === 'virtual',
+    displacedBy,
+    effected,
+  };
+
+  const displaced: DisplacementGroups = getDisplacementGroups({
+    afterDragging,
+    destination: home,
+    displacedBy,
+    last: null,
+    viewport: viewport.frame,
+    // originally we do not want any animation as we want
+    // everything to be fixed in the same position that
+    // it started in
+    forceShouldAnimate: false,
+  });
+
+  const impact: DragImpact = {
+    displaced,
+    displacedBy,
+    at: {
+      type: 'REORDER',
+      destination: getHomeLocation(draggable.descriptor),
+    },
+  };
+  return { impact, afterCritical };
+};

package/src/state/get-max-scroll.ts

@@ -0,0 +1,32 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { subtract } from './position';
+
+// Exact
+type Args = {
+  scrollHeight: number,
+  scrollWidth: number,
+  height: number,
+  width: number,
+};
+
+export default ({
+  scrollHeight,
+  scrollWidth,
+  height,
+  width,
+}: Args): Position => {
+  const maxScroll: Position = subtract(
+    // full size
+    { x: scrollWidth, y: scrollHeight },
+    // viewport size
+    { x: width, y: height },
+  );
+
+  const adjustedMaxScroll: Position = {
+    x: Math.max(0, maxScroll.x),
+    y: Math.max(0, maxScroll.y),
+  };
+
+  return adjustedMaxScroll;
+};

package/src/state/is-movement-allowed.ts

@@ -0,0 +1,13 @@
+// @flow
+import type { CollectingState, DraggingState, State } from '../types';
+
+export default function isMovementAllowed(
+  state: State,
+): state is DraggingState | CollectingState {
+  return state.phase === 'DRAGGING' || state.phase === 'COLLECTING';
+}
+
+// Using function declaration as arrow function does not play well with the %checks syntax
+// export default function isMovementAllowed(state: State): boolean %checks {
+//   return state.phase === 'DRAGGING' || state.phase === 'COLLECTING';
+// }

package/src/state/is-within.ts

@@ -0,0 +1,9 @@
+// @flow
+
+// is a value between two other values
+
+export default (
+  lowerBound: number,
+  upperBound: number,
+): ((arg: number) => boolean) => (value: number): boolean =>
+  lowerBound <= value && value <= upperBound;

package/src/state/middleware/auto-scroll.ts

@@ -0,0 +1,38 @@
+// @flow
+import { invariant } from '../../invariant';
+import type { AutoScroller } from '../auto-scroller/auto-scroller-types';
+import type { Action, Dispatch, MiddlewareStore } from '../store-types';
+import type { State } from '../../types';
+
+const shouldStop = (action: Action): boolean =>
+  action.type === 'DROP_COMPLETE' ||
+  action.type === 'DROP_ANIMATE' ||
+  action.type === 'FLUSH';
+
+export default (autoScroller: AutoScroller) => (store: MiddlewareStore) => (
+  next: Dispatch,
+) => (action: Action): any => {
+  if (shouldStop(action)) {
+    autoScroller.stop();
+    next(action);
+    return;
+  }
+
+  if (action.type === 'INITIAL_PUBLISH') {
+    // letting the action go first to hydrate the state
+    next(action);
+    const state: State = store.getState();
+    invariant(
+      state.phase === 'DRAGGING',
+      'Expected phase to be DRAGGING after INITIAL_PUBLISH',
+    );
+    autoScroller.start(state);
+    return;
+  }
+
+  // auto scroll happens in response to state changes
+  // releasing all actions to the reducer first
+  next(action);
+
+  autoScroller.scroll(store.getState());
+};

package/src/state/middleware/dimension-marshal-stopper.ts

@@ -0,0 +1,20 @@
+// @flow
+import type { Action, Dispatch } from '../store-types';
+import type { DimensionMarshal } from '../dimension-marshal/dimension-marshal-types';
+
+export default (marshal: DimensionMarshal) => () => (next: Dispatch) => (
+  action: Action,
+): any => {
+  // Not stopping a collection on a 'DROP' as we want a collection to continue
+  if (
+    // drag is finished
+    action.type === 'DROP_COMPLETE' ||
+    action.type === 'FLUSH' ||
+    // no longer accepting changes once the drop has started
+    action.type === 'DROP_ANIMATE'
+  ) {
+    marshal.stopPublishing();
+  }
+
+  next(action);
+};

package/src/state/middleware/drop/drop-animation-finish-middleware.ts

@@ -0,0 +1,21 @@
+// @flow
+import { invariant } from '../../../invariant';
+import { completeDrop } from '../../action-creators';
+import type { State } from '../../../types';
+import type { MiddlewareStore, Action, Dispatch } from '../../store-types';
+
+export default (store: MiddlewareStore) => (next: Dispatch) => (
+  action: Action,
+): any => {
+  if (action.type !== 'DROP_ANIMATION_FINISHED') {
+    next(action);
+    return;
+  }
+
+  const state: State = store.getState();
+  invariant(
+    state.phase === 'DROP_ANIMATING',
+    'Cannot finish a drop animating when no drop is occurring',
+  );
+  store.dispatch(completeDrop({ completed: state.completed }));
+};

package/src/state/middleware/drop/drop-animation-flush-on-scroll-middleware.ts

@@ -0,0 +1,63 @@
+// @flow
+import { dropAnimationFinished } from '../../action-creators';
+import type { AnimationFrameID, State } from '../../../types';
+import type { MiddlewareStore, Action, Dispatch } from '../../store-types';
+import type { EventBinding } from '../../../view/event-bindings/event-types';
+import bindEvents from '../../../view/event-bindings/bind-events';
+
+export default (store: MiddlewareStore) => {
+  let unbind: (() => void) | null;
+  let frameId: AnimationFrameID | null= null;
+
+  function clear() {
+    if (frameId) {
+      cancelAnimationFrame(frameId);
+      frameId = null;
+    }
+
+    if (unbind) {
+      unbind();
+      unbind = null;
+    }
+  }
+
+  return (next: Dispatch) => (action: Action): any => {
+    if (
+      action.type === 'FLUSH' ||
+      action.type === 'DROP_COMPLETE' ||
+      action.type === 'DROP_ANIMATION_FINISHED'
+    ) {
+      clear();
+    }
+
+    next(action);
+
+    if (action.type !== 'DROP_ANIMATE') {
+      return;
+    }
+
+    const binding: EventBinding = {
+      eventName: 'scroll',
+      // capture: true will catch all scroll events, event from scroll containers
+      // once: just in case, we only want to ever fire one
+      options: { capture: true, passive: false, once: true },
+      fn: function flushDropAnimation() {
+        const state: State = store.getState();
+        if (state.phase === 'DROP_ANIMATING') {
+          store.dispatch(dropAnimationFinished());
+        }
+      },
+    };
+
+    // The browser can batch a few scroll events in a single frame
+    // including the one that ended the drag.
+    // Binding after a requestAnimationFrame ensures that any scrolls caused
+    // by the auto scroller are finished
+    // TODO: why is a second window scroll being fired?
+    // It leads to funny drop positions :(
+    frameId = requestAnimationFrame(() => {
+      frameId = null;
+      unbind = bindEvents(window, [binding], {});
+    });
+  };
+};