@helpdice/draggable 0.0.0-stage → 0.0.1

package/src/state/move-in-direction/move-to-next-place/is-totally-visible-in-new-location.ts

@@ -0,0 +1,53 @@
+// @flow
+import { type Position, type Rect, type Spacing } from 'css-box-model';
+import { subtract } from '../../position';
+import { offsetByPosition } from '../../spacing';
+import {
+  isTotallyVisible,
+  isTotallyVisibleOnAxis,
+  type Args as IsVisibleArgs,
+} from '../../visibility/is-visible';
+import type { DraggableDimension, DroppableDimension } from '../../../types';
+
+// Exact
+type Args = {
+  draggable: DraggableDimension,
+  destination: DroppableDimension,
+  newPageBorderBoxCenter: Position,
+  viewport: Rect,
+  // only allowing a 'false' value. Being super clear
+  withDroppableDisplacement: false,
+  onlyOnMainAxis?: boolean,
+};
+
+export default ({
+  draggable,
+  destination,
+  newPageBorderBoxCenter,
+  viewport,
+  withDroppableDisplacement,
+  onlyOnMainAxis = false,
+}: Args): boolean => {
+  // What would the location of the Draggable be once the move is completed?
+  // We are not considering margins for this calculation.
+  // This is because a move might move a Draggable slightly outside of the bounds
+  // of a Droppable (which is okay)
+  const changeNeeded: Position = subtract(
+    newPageBorderBoxCenter,
+    draggable.page.borderBox.center,
+  );
+  const shifted: Spacing = offsetByPosition(
+    draggable.page.borderBox,
+    changeNeeded,
+  );
+
+  // Must be totally visible, not just partially visible.
+  const args: IsVisibleArgs = {
+    target: shifted,
+    destination,
+    withDroppableDisplacement,
+    viewport,
+  };
+
+  return onlyOnMainAxis ? isTotallyVisibleOnAxis(args) : isTotallyVisible(args);
+};

package/src/state/move-in-direction/move-to-next-place/move-to-next-combine/index.ts

@@ -0,0 +1,98 @@
+// @flow
+import { invariant } from '../../../../invariant';
+import type {
+  DraggableDimension,
+  DroppableDimension,
+  DragImpact,
+  CombineImpact,
+  DraggableLocation,
+  DraggableId,
+} from '../../../../types';
+import { tryGetDestination } from '../../../get-impact-location';
+import { findIndex } from '../../../../native-with-fallback';
+import removeDraggableFromList from '../../../remove-draggable-from-list';
+
+// Exact
+export type Args = {
+  isMovingForward: boolean,
+  draggable: DraggableDimension,
+  destination: DroppableDimension,
+  insideDestination: DraggableDimension[],
+  previousImpact: DragImpact,
+};
+
+export default ({
+  isMovingForward,
+  draggable,
+  destination,
+  insideDestination,
+  previousImpact,
+}: Args): DragImpact | null => {
+  if (!destination.isCombineEnabled) {
+    return null;
+  }
+
+  const location: DraggableLocation | null = tryGetDestination(previousImpact);
+
+  if (!location) {
+    return null;
+  }
+
+  function getImpact(target: DraggableId) {
+    const at: CombineImpact = {
+      type: 'COMBINE',
+      combine: {
+        draggableId: target,
+        droppableId: destination.descriptor.id,
+      },
+    };
+    return {
+      ...previousImpact,
+      at,
+    };
+  }
+
+  const all: DraggableId[] = previousImpact.displaced.all;
+  const closestId: DraggableId | null = all.length ? all[0] : null;
+
+  if (isMovingForward) {
+    return closestId ? getImpact(closestId) : null;
+  }
+
+  const withoutDraggable = removeDraggableFromList(
+    draggable,
+    insideDestination,
+  );
+
+  // Moving backwards
+
+  // if nothing is displaced - move backwards onto the last item
+  if (!closestId) {
+    if (!withoutDraggable.length) {
+      return null;
+    }
+    const last: DraggableDimension =
+      withoutDraggable[withoutDraggable.length - 1];
+    return getImpact(last.descriptor.id);
+  }
+
+  // We are moving from being between two displaced items
+  // backwards onto the first one
+
+  // need to find the first item before the closest
+  const indexOfClosest: number = findIndex(
+    withoutDraggable,
+    (d) => d.descriptor.id === closestId,
+  );
+  invariant(indexOfClosest !== -1, 'Could not find displaced item in set');
+
+  const proposedIndex: number = indexOfClosest - 1;
+
+  // There is no displaced item before
+  if (proposedIndex < 0) {
+    return null;
+  }
+
+  const before: DraggableDimension = withoutDraggable[proposedIndex];
+  return getImpact(before.descriptor.id);
+};

package/src/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine.ts

@@ -0,0 +1,53 @@
+// @flow
+import type {
+  DroppableDimension,
+  Combine,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DisplacementGroups,
+  DraggableId,
+  LiftEffect,
+} from '../../../../types';
+import didStartAfterCritical from '../../../did-start-after-critical';
+
+// Exact
+type Args = {
+  isMovingForward: boolean,
+  destination: DroppableDimension,
+  displaced: DisplacementGroups,
+  draggables: DraggableDimensionMap,
+  combine: Combine,
+  afterCritical: LiftEffect,
+};
+
+export default ({
+  isMovingForward,
+  destination,
+  draggables,
+  combine,
+  afterCritical,
+}: Args): number | null => {
+  if (!destination.isCombineEnabled) {
+    return null;
+  }
+  const combineId: DraggableId = combine.draggableId;
+  const combineWith: DraggableDimension = draggables[combineId];
+  const combineWithIndex: number = combineWith.descriptor.index;
+  const didCombineWithStartAfterCritical: boolean = didStartAfterCritical(
+    combineId,
+    afterCritical,
+  );
+
+  if (didCombineWithStartAfterCritical) {
+    if (isMovingForward) {
+      return combineWithIndex;
+    }
+    return combineWithIndex - 1;
+  }
+
+  if (isMovingForward) {
+    return combineWithIndex + 1;
+  }
+
+  return combineWithIndex;
+};

package/src/state/move-in-direction/move-to-next-place/move-to-next-index/from-reorder.ts

@@ -0,0 +1,44 @@
+// @flow
+import type { DraggableDimension, DraggableLocation } from '../../../../types';
+
+// Exact
+type Args = {
+  isMovingForward: boolean,
+  isInHomeList: boolean,
+  location: DraggableLocation,
+  insideDestination: DraggableDimension[],
+};
+
+export default ({
+  isMovingForward,
+  isInHomeList,
+  insideDestination,
+  location,
+}: Args): number | null => {
+  // cannot move in the list
+  if (!insideDestination.length) {
+    return null;
+  }
+
+  const currentIndex: number = location.index;
+  const proposedIndex: number = isMovingForward
+    ? currentIndex + 1
+    : currentIndex - 1;
+
+  // Accounting for lists that might not start with an index of 0
+  const firstIndex: number = insideDestination[0].descriptor.index;
+  const lastIndex: number =
+    insideDestination[insideDestination.length - 1].descriptor.index;
+
+  // When in foreign list we allow movement after the last item
+  const upperBound: number = isInHomeList ? lastIndex : lastIndex + 1;
+
+  if (proposedIndex < firstIndex) {
+    return null;
+  }
+  if (proposedIndex > upperBound) {
+    return null;
+  }
+
+  return proposedIndex;
+};

package/src/state/move-in-direction/move-to-next-place/move-to-next-index/index.ts

@@ -0,0 +1,87 @@
+// @flow
+import { invariant } from '../../../../invariant';
+import type {
+  DraggableDimension,
+  DroppableDimension,
+  DraggableDimensionMap,
+  DragImpact,
+  LiftEffect,
+  Viewport,
+  ImpactLocation,
+} from '../../../../types';
+import calculateReorderImpact from '../../../calculate-drag-impact/calculate-reorder-impact';
+import fromCombine from './from-combine';
+import fromReorder from './from-reorder';
+
+// Exact
+export type Args = {
+  isMovingForward: boolean,
+  isInHomeList: boolean,
+  draggable: DraggableDimension,
+  draggables: DraggableDimensionMap,
+  destination: DroppableDimension,
+  insideDestination: DraggableDimension[],
+  previousImpact: DragImpact,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+};
+
+export default ({
+  isMovingForward,
+  isInHomeList,
+  draggable,
+  draggables,
+  destination,
+  insideDestination,
+  previousImpact,
+  viewport,
+  afterCritical,
+}: Args): DragImpact | null => {
+  const wasAt: ImpactLocation | null = previousImpact.at;
+  invariant(wasAt, 'Cannot move in direction without previous impact location');
+
+  if (wasAt.type === 'REORDER') {
+    const newIndex: number | null = fromReorder({
+      isMovingForward,
+      isInHomeList,
+      location: wasAt.destination,
+      insideDestination,
+    });
+    // TODO: can we just pass new index on?
+    if (newIndex == null) {
+      return null;
+    }
+    return calculateReorderImpact({
+      draggable,
+      insideDestination,
+      destination,
+      viewport,
+      last: previousImpact.displaced,
+      displacedBy: previousImpact.displacedBy,
+      index: newIndex,
+    });
+  }
+
+  // COMBINE
+  const newIndex: number | null = fromCombine({
+    isMovingForward,
+    destination,
+    displaced: previousImpact.displaced,
+    draggables,
+    combine: wasAt.combine,
+    afterCritical,
+  });
+  if (newIndex == null) {
+    return null;
+  }
+
+  return calculateReorderImpact({
+    draggable,
+    insideDestination,
+    destination,
+    viewport,
+    last: previousImpact.displaced,
+    displacedBy: previousImpact.displacedBy,
+    index: newIndex,
+  });
+};

package/src/state/no-impact.ts

@@ -0,0 +1,33 @@
+// @flow
+import type {
+  DisplacementGroups,
+  DragImpact,
+  DisplacedBy,
+  LiftEffect,
+} from '../types';
+import { origin } from './position';
+
+export const noDisplacedBy: DisplacedBy = {
+  point: origin,
+  value: 0,
+};
+
+export const emptyGroups: DisplacementGroups = {
+  invisible: {},
+  visible: {},
+  all: [],
+};
+
+const noImpact: DragImpact = {
+  displaced: emptyGroups,
+  displacedBy: noDisplacedBy,
+  at: null,
+};
+
+export default noImpact;
+
+export const noAfterCritical: LiftEffect = {
+  inVirtualList: false,
+  effected: {},
+  displacedBy: noDisplacedBy,
+};

package/src/state/patch-dimension-map.ts

@@ -0,0 +1,11 @@
+// @flow
+import type { DimensionMap, DroppableDimension } from '../types';
+import patchDroppableMap from './patch-droppable-map';
+
+export default (
+  dimensions: DimensionMap,
+  updated: DroppableDimension,
+): DimensionMap => ({
+  draggables: dimensions.draggables,
+  droppables: patchDroppableMap(dimensions.droppables, updated),
+});

package/src/state/patch-droppable-map.ts

@@ -0,0 +1,10 @@
+// @flow
+import type { DroppableDimension, DroppableDimensionMap } from '../types';
+
+export default (
+  droppables: DroppableDimensionMap,
+  updated: DroppableDimension,
+): DroppableDimensionMap => ({
+  ...droppables,
+  [updated.descriptor.id]: updated,
+});

package/src/state/position.ts

@@ -0,0 +1,65 @@
+// @flow
+import { type Position } from 'css-box-model';
+
+export const origin: Position = { x: 0, y: 0 };
+
+export const add = (point1: Position, point2: Position): Position => ({
+  x: point1.x + point2.x,
+  y: point1.y + point2.y,
+});
+
+export const subtract = (point1: Position, point2: Position): Position => ({
+  x: point1.x - point2.x,
+  y: point1.y - point2.y,
+});
+
+export const isEqual = (point1: Position, point2: Position): boolean =>
+  point1.x === point2.x && point1.y === point2.y;
+
+export const negate = (point: Position): Position => ({
+  // if the value is already 0, do not return -0
+  x: point.x !== 0 ? -point.x : 0,
+  y: point.y !== 0 ? -point.y : 0,
+});
+
+// Allows you to build a position from values.
+// Really useful when working with the Axis type
+// patch('x', 5)    = { x: 5, y: 0 }
+// patch('y', 5, 1) = { x: 1, y: 5 }
+export const patch = (
+  line: 'x' | 'y',
+  value: number,
+  otherValue: number = 0,
+): Position => {
+  const result: Position = {
+    x: 0,
+    y: 0,
+  };
+  
+  // set the value of 'x', or 'y'
+  result[line] = value;
+
+  // set the value of the other line
+  result[line === 'x' ? 'y' : 'x'] = otherValue;
+  return result;
+};
+
+// Returns the distance between two points
+// https://www.mathsisfun.com/algebra/distance-2-points.html
+export const distance = (point1: Position, point2: Position): number =>
+  Math.sqrt(
+    Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2),
+  );
+
+// When given a list of points, it finds the smallest distance to any point
+export const closest = (target: Position, points: Position[]): number =>
+  Math.min(...points.map((point: Position) => distance(target, point)));
+
+// used to apply any function to both values of a point
+// eg: const floor = apply(Math.floor)(point);
+export const apply = (fn: (value: number) => number) => (
+  point: Position,
+): Position => ({
+  x: fn(point.x),
+  y: fn(point.y),
+});

package/src/state/post-reducer/when-moving/refresh-snap.ts

@@ -0,0 +1,68 @@
+// @flow
+import type { Position } from 'css-box-model';
+import { invariant } from '../../../invariant';
+import type {
+  DroppableDimension,
+  DraggableDimension,
+  StateWhenUpdatesAllowed,
+  DroppableId,
+  DimensionMap,
+  DragImpact,
+  Viewport,
+} from '../../../types';
+import whatIsDraggedOver from '../../droppable/what-is-dragged-over';
+import recomputeDisplacementVisibility from '../../update-displacement-visibility/recompute';
+import getClientBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center';
+import update from './update';
+
+// Exact
+type Args = {
+  state: StateWhenUpdatesAllowed,
+  dimensions?: DimensionMap,
+  viewport?: Viewport,
+};
+
+export default ({
+  state,
+  dimensions: forcedDimensions,
+  viewport: forcedViewport,
+}: // when a draggable is changing enabled state, sometimes it needs to force refresh an impact
+Args): StateWhenUpdatesAllowed => {
+  invariant(state.movementMode === 'SNAP');
+
+  const needsVisibilityCheck: DragImpact = state.impact;
+  const viewport: Viewport = forcedViewport || state.viewport;
+  const dimensions: DimensionMap = forcedDimensions || state.dimensions;
+  const { draggables, droppables } = dimensions;
+
+  const draggable: DraggableDimension = draggables[state.critical.draggable.id];
+  const isOver: DroppableId | null = whatIsDraggedOver(needsVisibilityCheck);
+  invariant(isOver, 'Must be over a destination in SNAP movement mode');
+  const destination: DroppableDimension = droppables[isOver];
+
+  const impact: DragImpact = recomputeDisplacementVisibility({
+    impact: needsVisibilityCheck,
+    viewport,
+    destination,
+    draggables,
+  });
+
+  const clientSelection: Position = getClientBorderBoxCenter({
+    impact,
+    draggable,
+    droppable: destination,
+    draggables,
+    viewport,
+    afterCritical: state.afterCritical,
+  });
+
+  return update({
+    // new
+    impact,
+    clientSelection,
+    // pass through
+    state,
+    dimensions,
+    viewport,
+  });
+};

package/src/state/post-reducer/when-moving/update.ts

@@ -0,0 +1,121 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DraggableDimension,
+  DraggingState,
+  ClientPositions,
+  PagePositions,
+  DragPositions,
+  DragImpact,
+  Viewport,
+  DimensionMap,
+  StateWhenUpdatesAllowed,
+  DroppableDimensionMap,
+} from '../../../types';
+import getDragImpact from '../../get-drag-impact';
+import { add, subtract } from '../../position';
+import recomputePlaceholders from '../../recompute-placeholders';
+
+// Exact
+type Args = {
+  state: StateWhenUpdatesAllowed,
+  clientSelection?: Position,
+  dimensions?: DimensionMap,
+  viewport?: Viewport,
+  // force a custom drag impact
+  impact?: DragImpact | null,
+  // provide a scroll jump request (optionally provided - and can be null)
+  scrollJumpRequest?: Position | null,
+};
+
+export default ({
+  state,
+  clientSelection: forcedClientSelection,
+  dimensions: forcedDimensions,
+  viewport: forcedViewport,
+  impact: forcedImpact,
+  scrollJumpRequest,
+}: Args): StateWhenUpdatesAllowed => {
+  // DRAGGING: can update position and impact
+  // COLLECTING: can update position but cannot update impact
+
+  const viewport: Viewport = forcedViewport || state.viewport;
+  const dimensions: DimensionMap = forcedDimensions || state.dimensions;
+  const clientSelection: Position =
+    forcedClientSelection || state.current.client.selection;
+
+  const offset: Position = subtract(
+    clientSelection,
+    state.initial.client.selection,
+  );
+
+  const client: ClientPositions = {
+    offset,
+    selection: clientSelection,
+    borderBoxCenter: add(state.initial.client.borderBoxCenter, offset),
+  };
+
+  const page: PagePositions = {
+    selection: add(client.selection, viewport.scroll.current),
+    borderBoxCenter: add(client.borderBoxCenter, viewport.scroll.current),
+    offset: add(client.offset, viewport.scroll.diff.value),
+  };
+
+  const current: DragPositions = {
+    client,
+    page,
+  };
+
+  // Not updating impact while bulk collecting
+  if (state.phase === 'COLLECTING') {
+    return {
+      // adding phase to appease flow (even though it will be overwritten by spread)
+      // phase: 'COLLECTING',
+      ...state,
+      dimensions,
+      viewport,
+      current,
+    };
+  }
+
+  const draggable: DraggableDimension =
+    dimensions.draggables[state.critical.draggable.id];
+
+  const newImpact: DragImpact =
+    forcedImpact ||
+    getDragImpact({
+      pageOffset: page.offset,
+      draggable,
+      draggables: dimensions.draggables,
+      droppables: dimensions.droppables,
+      previousImpact: state.impact,
+      viewport,
+      afterCritical: state.afterCritical,
+    });
+
+  const withUpdatedPlaceholders: DroppableDimensionMap = recomputePlaceholders({
+    draggable,
+    impact: newImpact,
+    previousImpact: state.impact,
+    draggables: dimensions.draggables,
+    droppables: dimensions.droppables,
+  });
+  // dragging!
+  const result: DraggingState = {
+    ...state,
+    current,
+    dimensions: {
+      draggables: dimensions.draggables,
+      droppables: withUpdatedPlaceholders,
+    },
+    impact: newImpact,
+    viewport,
+    scrollJumpRequest: scrollJumpRequest || null,
+    // client updates can be applied as a part of a jump scroll
+    // this can be to immediately reverse movement to allow for a nice animation
+    // into the final position
+    forceShouldAnimate: scrollJumpRequest ? false : null,
+  };
+
+  return result;
+};