@helpdice/draggable 0.0.0-stage → 0.0.1

package/src/state/registry/registry-types.ts

@@ -0,0 +1,106 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  Id,
+  DraggableId,
+  DraggableDescriptor,
+  DraggableOptions,
+  DraggableDimension,
+  DroppableId,
+  ScrollOptions,
+  DroppableDescriptor,
+  DroppableDimension,
+  TypeId,
+} from '../../types';
+
+export type GetDraggableDimensionFn = (
+  windowScroll: Position,
+) => DraggableDimension;
+
+// Exact
+export type DraggableEntry = {
+  uniqueId: Id,
+  descriptor: DraggableDescriptor,
+  options: DraggableOptions,
+  getDimension: GetDraggableDimensionFn,
+};
+
+// Exact
+export type DraggableAPI = {
+  register: (entry: DraggableEntry) => void,
+  update: (entry: DraggableEntry, last: DraggableEntry) => void,
+  unregister: (entry: DraggableEntry) => void,
+  exists: (id: DraggableId) => boolean,
+  getById: (id: DraggableId) => DraggableEntry,
+  findById: (id: DraggableId) => DraggableEntry | null,
+  getAllByType: (type: TypeId) => DraggableEntry[],
+};
+
+export type GetDroppableDimensionFn = (
+  windowScroll: Position,
+  options: ScrollOptions,
+) => DroppableDimension;
+
+// Exact
+export type RecollectDroppableOptions = {
+  withoutPlaceholder: boolean,
+};
+
+// Exact
+export type DroppableCallbacks = {
+  // a drag is starting
+  getDimensionAndWatchScroll: GetDroppableDimensionFn,
+  getScrollWhileDragging: () => Position,
+  // scroll a droppable
+  scroll: (change: Position) => void,
+  // If the Droppable is listening for scroll events - it needs to stop!
+  // Can be called on droppables that have not been asked to watch scroll
+  dragStopped: () => void,
+};
+
+// Exact
+export type DroppableEntry = {
+  uniqueId: Id,
+  descriptor: DroppableDescriptor,
+  callbacks: DroppableCallbacks,
+};
+
+export type DraggableEntryMap = {
+  [id: DraggableId]: DraggableEntry,
+};
+
+export type DroppableEntryMap = {
+  [id: DroppableId]: DroppableEntry,
+};
+
+// Exact
+export type DroppableAPI = {
+  register: (entry: DroppableEntry) => void,
+  unregister: (entry: DroppableEntry) => void,
+  exists: (id: DraggableId) => boolean,
+  getById: (id: DroppableId) => DroppableEntry,
+  findById: (id: DroppableId) => DroppableEntry | null,
+  getAllByType: (type: TypeId) => DroppableEntry[],
+};
+
+// Exact
+export type RegistryEvent =
+  | {
+      type: 'ADDITION',
+      value: DraggableEntry,
+    }
+  | {
+      type: 'REMOVAL',
+      value: DraggableEntry,
+    };
+
+export type Subscriber = (event: RegistryEvent) => void;
+export type Unsubscribe = () => void;
+
+// Exact
+export type Registry = {
+  draggable: DraggableAPI,
+  droppable: DroppableAPI,
+  subscribe: (cb: Subscriber) => Unsubscribe,
+  clean: () => void,
+};

package/src/state/registry/use-registry.ts

@@ -0,0 +1,20 @@
+// @flow
+import { useEffect } from "react";
+import { useMemo } from "@helpdice/memoizer";
+import type { Registry } from "./registry-types";
+import createRegistry from "./create-registry";
+
+export default function useRegistry(): Registry {
+  const registry: Registry = useMemo(createRegistry, []);
+
+  useEffect(() => {
+    return function unmount() {
+      // clean up the registry to avoid any leaks
+      // doing it after an animation frame so that other things unmounting
+      // can continue to interact with the registry
+      requestAnimationFrame(registry.clean);
+    };
+  }, [registry]);
+
+  return registry;
+}

package/src/state/remove-draggable-from-list.ts

@@ -0,0 +1,13 @@
+// @flow
+import memoizeOne from 'memoize-one';
+import type { DraggableDimension } from '../types';
+
+export default memoizeOne(
+  (
+    remove: DraggableDimension,
+    list: DraggableDimension[],
+  ): DraggableDimension[] =>
+    list.filter(
+      (item: DraggableDimension) => item.descriptor.id !== remove.descriptor.id,
+    ),
+);

package/src/state/scroll-viewport.ts

@@ -0,0 +1,34 @@
+// @flow
+import { getRect, type Rect } from 'css-box-model';
+import type { Position } from 'css-box-model';
+import { subtract, negate } from './position';
+import type { Viewport } from '../types';
+
+export default (viewport: Viewport, newScroll: Position): Viewport => {
+  const diff: Position = subtract(newScroll, viewport.scroll.initial);
+  const displacement: Position = negate(diff);
+
+  // We need to update the frame so that it is always a live value
+  // The top / left of the frame should always match the newScroll position
+  const frame: Rect = getRect({
+    top: newScroll.y,
+    bottom: newScroll.y + viewport.frame.height,
+    left: newScroll.x,
+    right: newScroll.x + viewport.frame.width,
+  });
+
+  const updated: Viewport = {
+    frame,
+    scroll: {
+      initial: viewport.scroll.initial,
+      max: viewport.scroll.max,
+      current: newScroll,
+      diff: {
+        value: diff,
+        displacement,
+      },
+    },
+  };
+
+  return updated;
+};

package/src/state/spacing.ts

@@ -0,0 +1,45 @@
+// @flow
+import type { Spacing, Position } from 'css-box-model';
+
+// TODO add test
+export const isEqual = (first: Spacing, second: Spacing): boolean =>
+  first.top === second.top &&
+  first.right === second.right &&
+  first.bottom === second.bottom &&
+  first.left === second.left;
+
+export const offsetByPosition = (
+  spacing: Spacing,
+  point: Position,
+): Spacing => ({
+  top: spacing.top + point.y,
+  left: spacing.left + point.x,
+  bottom: spacing.bottom + point.y,
+  right: spacing.right + point.x,
+});
+
+export const expandByPosition = (
+  spacing: Spacing,
+  position: Position,
+): Spacing => ({
+  // pulling back to increase size
+  top: spacing.top - position.y,
+  left: spacing.left - position.x,
+  // pushing forward to increase size
+  right: spacing.right + position.x,
+  bottom: spacing.bottom + position.y,
+});
+
+export const getCorners = (spacing: Spacing): Position[] => [
+  { x: spacing.left, y: spacing.top },
+  { x: spacing.right, y: spacing.top },
+  { x: spacing.left, y: spacing.bottom },
+  { x: spacing.right, y: spacing.bottom },
+];
+
+export const noSpacing: Spacing = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};

package/src/state/store-types.ts

@@ -0,0 +1,19 @@
+// @flow
+// This file exists to avoid a circular dependency between types.js and action-creators.js
+import type {
+  Store as ReduxStore,
+  Dispatch as ReduxDispatch,
+  Middleware as ReduxMiddleware,
+  MiddlewareAPI as ReduxMiddlewareAPI,
+} from 'redux';
+import type { Action as ActionCreators } from './action-creators';
+import type { State as ReduxState } from '../types';
+
+export type Action = ActionCreators;
+export type State = ReduxState;
+export type Dispatch = ReduxDispatch<Action>;
+export type LazyDispatch = ReduxDispatch<Action>;
+export type Store = ReduxStore<State, Action, Dispatch>;
+export type Middleware = ReduxMiddleware<State, Action, Dispatch>;
+export type MiddlewareStore = ReduxMiddlewareAPI<Dispatch, State>;
+// export type MiddlewareStore = ReduxMiddlewareAPI<ReduxDispatch, S>;

package/src/state/update-displacement-visibility/recompute.ts

@@ -0,0 +1,55 @@
+// @flow
+import type {
+  DraggableDimension,
+  DroppableDimension,
+  DraggableDimensionMap,
+  DragImpact,
+  Viewport,
+  DraggableId,
+  DisplacementGroups,
+} from '../../types';
+import getDisplacementGroups from '../get-displacement-groups';
+
+// Exact
+type RecomputeArgs = {
+  impact: DragImpact,
+  draggables: DraggableDimensionMap,
+  destination: DroppableDimension,
+  viewport: Viewport,
+  forceShouldAnimate?: boolean,
+};
+
+function getDraggables(
+  ids: DraggableId[],
+  draggables: DraggableDimensionMap,
+): DraggableDimension[] {
+  return ids.map((id: DraggableId): DraggableDimension => draggables[id]);
+}
+
+export default ({
+  impact,
+  viewport,
+  draggables,
+  destination,
+  forceShouldAnimate,
+}: RecomputeArgs): DragImpact => {
+  const last: DisplacementGroups = impact.displaced;
+  const afterDragging: DraggableDimension[] = getDraggables(
+    last.all,
+    draggables,
+  );
+
+  const displaced: DisplacementGroups = getDisplacementGroups({
+    afterDragging,
+    destination,
+    displacedBy: impact.displacedBy,
+    viewport: viewport.frame,
+    forceShouldAnimate,
+    last,
+  });
+
+  return {
+    ...impact,
+    displaced,
+  };
+};

package/src/state/update-displacement-visibility/speculatively-increase.ts

@@ -0,0 +1,112 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DraggableId,
+  DroppableDimension,
+  DraggableDimension,
+  DraggableDimensionMap,
+  DragImpact,
+  Displacement,
+  DisplacementGroups,
+  DraggableIdMap,
+  DisplacementMap,
+  Viewport,
+} from '../../types';
+import scrollViewport from '../scroll-viewport';
+import scrollDroppable from '../droppable/scroll-droppable';
+import { add } from '../position';
+import getDisplacementGroups from '../get-displacement-groups';
+
+// Exact
+type SpeculativeArgs = {
+  impact: DragImpact,
+  destination: DroppableDimension,
+  viewport: Viewport,
+  draggables: DraggableDimensionMap,
+  maxScrollChange: Position,
+};
+
+function getDraggables(
+  ids: DraggableId[],
+  draggables: DraggableDimensionMap,
+): DraggableDimension[] {
+  return ids.map((id: DraggableId): DraggableDimension => draggables[id]);
+}
+
+function tryGetVisible(
+  id: DraggableId,
+  groups: DisplacementGroups[],
+): Displacement | null {
+  for (let i = 0; i < groups.length; i++) {
+    const displacement: Displacement | null = groups[i].visible[id];
+    if (displacement) {
+      return displacement;
+    }
+  }
+  return null;
+}
+
+export default ({
+  impact,
+  viewport,
+  destination,
+  draggables,
+  maxScrollChange,
+}: SpeculativeArgs): DragImpact => {
+  const scrolledViewport: Viewport = scrollViewport(
+    viewport,
+    add(viewport.scroll.current, maxScrollChange),
+  );
+  const scrolledDroppable: DroppableDimension = destination.frame
+    ? scrollDroppable(
+        destination,
+        add(destination.frame.scroll.current, maxScrollChange),
+      )
+    : destination;
+
+  const last: DisplacementGroups = impact.displaced;
+  const withViewportScroll: DisplacementGroups = getDisplacementGroups({
+    afterDragging: getDraggables(last.all, draggables),
+    destination,
+    displacedBy: impact.displacedBy,
+    viewport: scrolledViewport.frame,
+    last,
+    // we want the addition to be animated
+    forceShouldAnimate: false,
+  });
+  const withDroppableScroll: DisplacementGroups = getDisplacementGroups({
+    afterDragging: getDraggables(last.all, draggables),
+    destination: scrolledDroppable,
+    displacedBy: impact.displacedBy,
+    viewport: viewport.frame,
+    last,
+    // we want the addition to be animated
+    forceShouldAnimate: false,
+  });
+
+  const invisible: DraggableIdMap = {};
+  const visible: DisplacementMap = {};
+  const groups: DisplacementGroups[] = [
+    // this will populate the previous entries with the correct animation values
+    last,
+    withViewportScroll,
+    withDroppableScroll,
+  ];
+
+  last.all.forEach((id: DraggableId) => {
+    const displacement: Displacement | null = tryGetVisible(id, groups);
+
+    if (displacement) {
+      visible[id] = displacement;
+      return;
+    }
+    invisible[id] = true;
+  });
+
+  const newImpact: DragImpact = {
+    ...impact,
+    displaced: { all: last.all, invisible, visible },
+  };
+
+  return newImpact;
+};

package/src/state/visibility/is-partially-visible-through-frame.ts

@@ -0,0 +1,60 @@
+// @flow
+import { type Spacing } from 'css-box-model';
+import isWithin from '../is-within';
+
+export default (frame: Spacing) => {
+  const isWithinVertical = isWithin(frame.top, frame.bottom);
+  const isWithinHorizontal = isWithin(frame.left, frame.right);
+
+  return (subject: Spacing) => {
+    // situations where target is visible:
+    // 1. is completely contained within frame
+    // 2. is partially visible on both axis within frame
+    // 3. is bigger than frame on both axis
+    // 4. is bigger than frame on one axis and is partially visible on the other
+
+    // completely contained
+    const isContained: boolean =
+      isWithinVertical(subject.top) &&
+      isWithinVertical(subject.bottom) &&
+      isWithinHorizontal(subject.left) &&
+      isWithinHorizontal(subject.right);
+
+    if (isContained) {
+      return true;
+    }
+
+    const isPartiallyVisibleVertically: boolean =
+      isWithinVertical(subject.top) || isWithinVertical(subject.bottom);
+    const isPartiallyVisibleHorizontally: boolean =
+      isWithinHorizontal(subject.left) || isWithinHorizontal(subject.right);
+
+    // partially visible on both axis
+    const isPartiallyContained: boolean =
+      isPartiallyVisibleVertically && isPartiallyVisibleHorizontally;
+
+    if (isPartiallyContained) {
+      return true;
+    }
+
+    const isBiggerVertically: boolean =
+      subject.top < frame.top && subject.bottom > frame.bottom;
+    const isBiggerHorizontally: boolean =
+      subject.left < frame.left && subject.right > frame.right;
+
+    // is bigger than frame on both axis
+    const isTargetBiggerThanFrame: boolean =
+      isBiggerVertically && isBiggerHorizontally;
+
+    if (isTargetBiggerThanFrame) {
+      return true;
+    }
+
+    // is bigger on one axis, and partially visible on another
+    const isTargetBiggerOnOneAxis: boolean =
+      (isBiggerVertically && isPartiallyVisibleHorizontally) ||
+      (isBiggerHorizontally && isPartiallyVisibleVertically);
+
+    return isTargetBiggerOnOneAxis;
+  };
+};

package/src/state/visibility/is-position-in-frame.ts

@@ -0,0 +1,12 @@
+// @flow
+import { type Position, type Spacing } from 'css-box-model';
+import isWithin from '../is-within';
+
+export default function isPositionInFrame(frame: Spacing) {
+  const isWithinVertical = isWithin(frame.top, frame.bottom);
+  const isWithinHorizontal = isWithin(frame.left, frame.right);
+
+  return function run(point: Position) {
+    return isWithinVertical(point.y) && isWithinHorizontal(point.x);
+  };
+}

package/src/state/visibility/is-totally-visible-through-frame-on-axis.ts

@@ -0,0 +1,19 @@
+// @flow
+import { type Spacing } from 'css-box-model';
+import type { Axis } from '../../types';
+import isWithin from '../is-within';
+import { vertical } from '../axis';
+
+export default (axis: Axis) => (frame: Spacing) => {
+  const isWithinVertical = isWithin(frame.top, frame.bottom);
+  const isWithinHorizontal = isWithin(frame.left, frame.right);
+
+  return (subject: Spacing) => {
+    if (axis === vertical) {
+      return isWithinVertical(subject.top) && isWithinVertical(subject.bottom);
+    }
+    return (
+      isWithinHorizontal(subject.left) && isWithinHorizontal(subject.right)
+    );
+  };
+};

package/src/state/visibility/is-totally-visible-through-frame.ts

@@ -0,0 +1,18 @@
+// @flow
+import { type Spacing } from 'css-box-model';
+import isWithin from '../is-within';
+
+export default (frame: Spacing) => {
+  const isWithinVertical = isWithin(frame.top, frame.bottom);
+  const isWithinHorizontal = isWithin(frame.left, frame.right);
+
+  return (subject: Spacing) => {
+    const isContained: boolean =
+      isWithinVertical(subject.top) &&
+      isWithinVertical(subject.bottom) &&
+      isWithinHorizontal(subject.left) &&
+      isWithinHorizontal(subject.right);
+
+    return isContained;
+  };
+};

package/src/state/visibility/is-visible.ts

@@ -0,0 +1,102 @@
+// @flow
+import { type Position, type Spacing, type Rect } from 'css-box-model';
+import type { DroppableDimension } from '../../types';
+import isPartiallyVisibleThroughFrame from './is-partially-visible-through-frame';
+import isTotallyVisibleThroughFrame from './is-totally-visible-through-frame';
+import isTotallyVisibleThroughFrameOnAxis from './is-totally-visible-through-frame-on-axis';
+import { offsetByPosition } from '../spacing';
+import { origin } from '../position';
+
+// Exact
+export type Args = {
+  target: Spacing,
+  destination: DroppableDimension,
+  viewport: Rect,
+  withDroppableDisplacement: boolean,
+  shouldCheckDroppable?: boolean,
+  shouldCheckViewport?: boolean,
+};
+
+type IsVisibleThroughFrameFn = (
+  frame: Spacing,
+) => (subject: Spacing) => boolean;
+
+type InternalArgs = Args & {
+  isVisibleThroughFrameFn: IsVisibleThroughFrameFn,
+};
+
+const getDroppableDisplaced = (
+  target: Spacing,
+  destination: DroppableDimension,
+): Spacing => {
+  const displacement: Position = destination.frame
+    ? destination.frame.scroll.diff.displacement
+    : origin;
+
+  return offsetByPosition(target, displacement);
+};
+
+const isVisibleInDroppable = (
+  target: Spacing,
+  destination: DroppableDimension,
+  isVisibleThroughFrameFn: IsVisibleThroughFrameFn,
+): boolean => {
+  // destination subject is totally hidden by frame
+  // this should never happen - but just guarding against it
+  if (!destination.subject.active) {
+    return false;
+  }
+
+  // When considering if the target is visible in the droppable we need
+  // to consider the change in scroll of the droppable. We need to
+  // adjust for the scroll as the clipped viewport takes into account
+  // the scroll of the droppable.
+
+  return isVisibleThroughFrameFn(destination.subject.active)(target);
+};
+
+const isVisibleInViewport = (
+  target: Spacing,
+  viewport: Rect,
+  isVisibleThroughFrameFn: IsVisibleThroughFrameFn,
+): boolean => isVisibleThroughFrameFn(viewport)(target);
+
+const isVisible = ({
+  target: toBeDisplaced,
+  destination,
+  viewport,
+  withDroppableDisplacement,
+  isVisibleThroughFrameFn,
+}: InternalArgs): boolean => {
+  const displacedTarget: Spacing = withDroppableDisplacement
+    ? getDroppableDisplaced(toBeDisplaced, destination)
+    : toBeDisplaced;
+
+  return (
+    isVisibleInDroppable(
+      displacedTarget,
+      destination,
+      isVisibleThroughFrameFn,
+    ) && isVisibleInViewport(displacedTarget, viewport, isVisibleThroughFrameFn)
+  );
+};
+
+export const isPartiallyVisible = (args: Args): boolean =>
+  isVisible({
+    ...args,
+    isVisibleThroughFrameFn: isPartiallyVisibleThroughFrame,
+  });
+
+export const isTotallyVisible = (args: Args): boolean =>
+  isVisible({
+    ...args,
+    isVisibleThroughFrameFn: isTotallyVisibleThroughFrame,
+  });
+
+export const isTotallyVisibleOnAxis = (args: Args): boolean =>
+  isVisible({
+    ...args,
+    isVisibleThroughFrameFn: isTotallyVisibleThroughFrameOnAxis(
+      args.destination.axis,
+    ),
+  });

package/src/state/with-scroll-change/with-all-displacement.ts

@@ -0,0 +1,15 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type { DroppableDimension, Viewport } from '../../types';
+import withDroppableDisplacement from './with-droppable-displacement';
+import withViewportDisplacement from './with-viewport-displacement';
+
+export default (
+  page: Position,
+  droppable: DroppableDimension,
+  viewport: Viewport,
+): Position =>
+  withDroppableDisplacement(
+    droppable,
+    withViewportDisplacement(viewport, page),
+  );

package/src/state/with-scroll-change/with-droppable-displacement.ts

@@ -0,0 +1,13 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { add } from '../position';
+import type { Scrollable, DroppableDimension } from '../../types';
+
+export default (droppable: DroppableDimension, point: Position): Position => {
+  const frame: Scrollable | null = droppable.frame;
+  if (!frame) {
+    return point;
+  }
+
+  return add(point, frame.scroll.diff.displacement);
+};

package/src/state/with-scroll-change/with-droppable-scroll.ts

@@ -0,0 +1,13 @@
+// @flow
+import { type Rect } from 'css-box-model';
+import type { Scrollable, DroppableDimension } from '../../types';
+import { offsetRectByPosition } from '../rect';
+
+export default (droppable: DroppableDimension, area: Rect): Rect => {
+  const frame: Scrollable | null = droppable.frame;
+  if (!frame) {
+    return area;
+  }
+
+  return offsetRectByPosition(area, frame.scroll.diff.value);
+};

package/src/state/with-scroll-change/with-viewport-displacement.ts

@@ -0,0 +1,7 @@
+// @flow
+import { type Position } from 'css-box-model';
+import type { Viewport } from '../../types';
+import { add } from '../position';
+
+export default (viewport: Viewport, point: Position): Position =>
+  add(viewport.scroll.diff.displacement, point);