@helpdice/draggable 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,103 @@
+// @flow
+import { type BoxModel, type Position } from 'css-box-model';
+import type {
+  Axis,
+  DroppableDimension,
+  DroppableDescriptor,
+  Scrollable,
+  DroppableSubject,
+  ScrollSize,
+} from '../../types';
+import { vertical, horizontal } from '../axis';
+import { origin } from '../position';
+import getMaxScroll from '../get-max-scroll';
+import getSubject from './util/get-subject';
+
+// Exact
+export type Closest = {
+  client: BoxModel,
+  page: BoxModel,
+  scroll: Position,
+  scrollSize: ScrollSize,
+  shouldClipSubject: boolean,
+};
+
+// Exact
+type Args = {
+  descriptor: DroppableDescriptor,
+  isEnabled: boolean,
+  isCombineEnabled: boolean,
+  isFixedOnPage: boolean,
+  direction: 'vertical' | 'horizontal',
+  client: BoxModel,
+  // is null when in a fixed container
+  page: BoxModel,
+  closest?: Closest | null,
+};
+
+export default ({
+  descriptor,
+  isEnabled,
+  isCombineEnabled,
+  isFixedOnPage,
+  direction,
+  client,
+  page,
+  closest,
+}: Args): DroppableDimension => {
+  const frame: Scrollable | null = (() => {
+    if (!closest) {
+      return null;
+    }
+
+    const { scrollSize, client: frameClient } = closest;
+
+    // scrollHeight and scrollWidth are based on the padding box
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
+    const maxScroll: Position = getMaxScroll({
+      scrollHeight: scrollSize.scrollHeight,
+      scrollWidth: scrollSize.scrollWidth,
+      height: frameClient.paddingBox.height,
+      width: frameClient.paddingBox.width,
+    });
+
+    return {
+      pageMarginBox: closest.page.marginBox,
+      frameClient,
+      scrollSize,
+      shouldClipSubject: closest.shouldClipSubject,
+      scroll: {
+        initial: closest.scroll,
+        current: closest.scroll,
+        max: maxScroll,
+        diff: {
+          value: origin,
+          displacement: origin,
+        },
+      },
+    };
+  })();
+
+  const axis: Axis = direction === 'vertical' ? vertical : horizontal;
+
+  const subject: DroppableSubject = getSubject({
+    page,
+    withPlaceholder: null,
+    axis,
+    frame,
+  });
+
+  const dimension: DroppableDimension = {
+    descriptor,
+    isCombineEnabled,
+    isFixedOnPage,
+    axis,
+    isEnabled,
+    client,
+    page,
+    frame,
+    subject,
+  };
+
+  return dimension;
+};

package/src/state/droppable/is-home-of.ts

@@ -0,0 +1,7 @@
+// @flow
+import type { DraggableDimension, DroppableDimension } from '../../types';
+
+export default (
+  draggable: DraggableDimension,
+  destination: DroppableDimension,
+): boolean => draggable.descriptor.droppableId === destination.descriptor.id;

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

@@ -0,0 +1,53 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { invariant } from '../../invariant';
+import type {
+  DroppableDimension,
+  Scrollable,
+  DroppableSubject,
+} from '../../types';
+import { negate, subtract } from '../position';
+import getSubject from './util/get-subject';
+
+export default (
+  droppable: DroppableDimension,
+  newScroll: Position,
+): DroppableDimension => {
+  invariant(droppable.frame);
+  const scrollable: Scrollable = droppable.frame;
+
+  const scrollDiff: Position = subtract(newScroll, scrollable.scroll.initial);
+  // a positive scroll difference leads to a negative displacement
+  // (scrolling down pulls an item upwards)
+  const scrollDisplacement: Position = negate(scrollDiff);
+
+  // Sometimes it is possible to scroll beyond the max point.
+  // This can occur when scrolling a foreign list that now has a placeholder.
+
+  const frame: Scrollable = {
+    ...scrollable,
+    scroll: {
+      initial: scrollable.scroll.initial,
+      current: newScroll,
+      diff: {
+        value: scrollDiff,
+        displacement: scrollDisplacement,
+      },
+      // TODO: rename 'softMax?'
+      max: scrollable.scroll.max,
+    },
+  };
+
+  const subject: DroppableSubject = getSubject({
+    page: droppable.subject.page,
+    withPlaceholder: droppable.subject.withPlaceholder,
+    axis: droppable.axis,
+    frame,
+  });
+  const result: DroppableDimension = {
+    ...droppable,
+    frame,
+    subject,
+  };
+  return result;
+};

package/src/state/droppable/should-use-placeholder.ts

@@ -0,0 +1,7 @@
+// @flow
+import type { DraggableDescriptor, DragImpact } from '../../types';
+import whatIsDraggedOver from './what-is-dragged-over';
+
+// use placeholder if dragged over
+export default (descriptor: DraggableDescriptor, impact: DragImpact): boolean =>
+  whatIsDraggedOver(impact) === descriptor.droppableId;

package/src/state/droppable/util/clip.ts

@@ -0,0 +1,17 @@
+// @flow
+import { getRect, type Rect, type Spacing } from 'css-box-model';
+
+export default (frame: Spacing, subject: Spacing): Rect | null => {
+  const result: Rect = getRect({
+    top: Math.max(subject.top, frame.top),
+    right: Math.min(subject.right, frame.right),
+    bottom: Math.min(subject.bottom, frame.bottom),
+    left: Math.max(subject.left, frame.left),
+  });
+
+  if (result.width <= 0 || result.height <= 0) {
+    return null;
+  }
+
+  return result;
+};

package/src/state/droppable/util/get-subject.ts

@@ -0,0 +1,63 @@
+// @flow
+import { getRect, type Rect, type Spacing, type BoxModel } from 'css-box-model';
+import type {
+  Axis,
+  Scrollable,
+  DroppableSubject,
+  PlaceholderInSubject,
+} from '../../../types';
+import executeClip from './clip';
+import { offsetByPosition } from '../../spacing';
+
+const scroll = (target: Spacing, frame: Scrollable | null): Spacing => {
+  if (!frame) {
+    return target;
+  }
+
+  return offsetByPosition(target, frame.scroll.diff.displacement);
+};
+
+const increase = (
+  target: Spacing,
+  axis: Axis,
+  withPlaceholder: PlaceholderInSubject | null,
+): Spacing => {
+  if (withPlaceholder && withPlaceholder.increasedBy) {
+    return {
+      ...target,
+      [axis.end]: target[axis.end] + withPlaceholder.increasedBy[axis.line],
+    };
+  }
+  return target;
+};
+
+const clip = (target: Spacing, frame: Scrollable | null): Rect | null => {
+  if (frame && frame.shouldClipSubject) {
+    return executeClip(frame.pageMarginBox, target);
+  }
+  return getRect(target);
+};
+
+type Args = {
+  page: BoxModel,
+  withPlaceholder: PlaceholderInSubject | null,
+  axis: Axis,
+  frame: Scrollable | null,
+};
+
+export default ({
+  page,
+  withPlaceholder,
+  axis,
+  frame,
+}: Args): DroppableSubject => {
+  const scrolled: Spacing = scroll(page.marginBox, frame);
+  const increased: Spacing = increase(scrolled, axis, withPlaceholder);
+  const clipped: Rect | null = clip(increased, frame);
+
+  return {
+    page,
+    withPlaceholder,
+    active: clipped,
+  };
+};

package/src/state/droppable/what-is-dragged-over-from-result.ts

@@ -0,0 +1,16 @@
+// @flow
+import type { DroppableId, DropResult } from '../../types';
+
+export default (result: DropResult): DroppableId | null => {
+  const { combine, destination } = result;
+
+  if (destination) {
+    return destination.droppableId;
+  }
+
+  if (combine) {
+    return combine.droppableId;
+  }
+
+  return null;
+};

package/src/state/droppable/what-is-dragged-over.ts

@@ -0,0 +1,16 @@
+// @flow
+import type { ImpactLocation, DroppableId, DragImpact } from '../../types';
+
+export default (impact: DragImpact): DroppableId | null => {
+  const at: ImpactLocation | null = impact.at;
+
+  if (!at) {
+    return null;
+  }
+
+  if (at.type === 'REORDER') {
+    return at.destination.droppableId;
+  }
+
+  return at.combine.droppableId;
+};

package/src/state/droppable/with-placeholder.ts

@@ -0,0 +1,174 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { invariant } from '../../invariant';
+import type {
+  Axis,
+  DroppableDimension,
+  DraggableDimension,
+  DraggableDimensionMap,
+  Scrollable,
+  DroppableSubject,
+  PlaceholderInSubject,
+} from '../../types';
+import getDraggablesInsideDroppable from '../get-draggables-inside-droppable';
+import { add, patch } from '../position';
+import getSubject from './util/get-subject';
+import isHomeOf from './is-home-of';
+import getDisplacedBy from '../get-displaced-by';
+
+const getRequiredGrowthForPlaceholder = (
+  droppable: DroppableDimension,
+  placeholderSize: Position,
+  draggables: DraggableDimensionMap,
+): Position | null => {
+  const axis: Axis = droppable.axis;
+
+  // A virtual list will most likely not contain all of the Draggables
+  // so counting them does not help.
+  if (droppable.descriptor.mode === 'virtual') {
+    return patch(axis.line, placeholderSize[axis.line]);
+  }
+
+  // TODO: consider margin collapsing?
+  // Using contentBox as that is where the Draggables will sit
+  const availableSpace: number = droppable.subject.page.contentBox[axis.size];
+  const insideDroppable: DraggableDimension[] = getDraggablesInsideDroppable(
+    droppable.descriptor.id,
+    draggables,
+  );
+  const spaceUsed: number = insideDroppable.reduce(
+    (sum: number, dimension: DraggableDimension): number =>
+      sum + dimension.client.marginBox[axis.size],
+    0,
+  );
+  const requiredSpace: number = spaceUsed + placeholderSize[axis.line];
+  const needsToGrowBy: number = requiredSpace - availableSpace;
+
+  // nothing to do here
+  if (needsToGrowBy <= 0) {
+    return null;
+  }
+
+  return patch(axis.line, needsToGrowBy);
+};
+
+const withMaxScroll = (frame: Scrollable, max: Position): Scrollable => ({
+  ...frame,
+  scroll: {
+    ...frame.scroll,
+    max,
+  },
+});
+
+export const addPlaceholder = (
+  droppable: DroppableDimension,
+  draggable: DraggableDimension,
+  draggables: DraggableDimensionMap,
+): DroppableDimension => {
+  const frame: Scrollable | null = droppable.frame;
+
+  invariant(
+    !isHomeOf(draggable, droppable),
+    'Should not add placeholder space to home list',
+  );
+
+  invariant(
+    !droppable.subject.withPlaceholder,
+    'Cannot add placeholder size to a subject when it already has one',
+  );
+
+  const placeholderSize: Position = getDisplacedBy(
+    droppable.axis,
+    draggable.displaceBy,
+  ).point;
+
+  const requiredGrowth: Position | null = getRequiredGrowthForPlaceholder(
+    droppable,
+    placeholderSize,
+    draggables,
+  );
+
+  const added: PlaceholderInSubject = {
+    placeholderSize,
+    increasedBy: requiredGrowth,
+    oldFrameMaxScroll: droppable.frame ? droppable.frame.scroll.max : null,
+  };
+
+  if (!frame) {
+    const subject: DroppableSubject = getSubject({
+      page: droppable.subject.page,
+      withPlaceholder: added,
+      axis: droppable.axis,
+      frame: droppable.frame,
+    });
+    return {
+      ...droppable,
+      subject,
+    };
+  }
+
+  const maxScroll: Position = requiredGrowth
+    ? add(frame.scroll.max, requiredGrowth)
+    : frame.scroll.max;
+
+  const newFrame: Scrollable = withMaxScroll(frame, maxScroll);
+
+  const subject: DroppableSubject = getSubject({
+    page: droppable.subject.page,
+    withPlaceholder: added,
+    axis: droppable.axis,
+    frame: newFrame,
+  });
+  return {
+    ...droppable,
+    subject,
+    frame: newFrame,
+  };
+};
+
+export const removePlaceholder = (
+  droppable: DroppableDimension,
+): DroppableDimension => {
+  const added: PlaceholderInSubject | null = droppable.subject.withPlaceholder;
+  invariant(
+    added,
+    'Cannot remove placeholder form subject when there was none',
+  );
+
+  const frame: Scrollable | null = droppable.frame;
+
+  if (!frame) {
+    const subject: DroppableSubject = getSubject({
+      page: droppable.subject.page,
+      axis: droppable.axis,
+      frame: null,
+      // cleared
+      withPlaceholder: null,
+    });
+    return {
+      ...droppable,
+      subject,
+    };
+  }
+
+  const oldMaxScroll: Position | null = added.oldFrameMaxScroll;
+  invariant(
+    oldMaxScroll,
+    'Expected droppable with frame to have old max frame scroll when removing placeholder',
+  );
+
+  const newFrame: Scrollable = withMaxScroll(frame, oldMaxScroll);
+
+  const subject: DroppableSubject = getSubject({
+    page: droppable.subject.page,
+    axis: droppable.axis,
+    frame: newFrame,
+    // cleared
+    withPlaceholder: null,
+  });
+  return {
+    ...droppable,
+    subject,
+    frame: newFrame,
+  };
+};

package/src/state/get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center.ts

@@ -0,0 +1,30 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type { Viewport, DraggableDimension } from '../../../types';
+import { add, subtract } from '../../position';
+import withViewportDisplacement from '../../with-scroll-change/with-viewport-displacement';
+
+// Exact
+type Args = {
+  pageBorderBoxCenter: Position,
+  draggable: DraggableDimension,
+  viewport: Viewport,
+};
+
+export default ({
+  pageBorderBoxCenter,
+  draggable,
+  viewport,
+}: Args): Position => {
+  const withoutPageScrollChange: Position = withViewportDisplacement(
+    viewport,
+    pageBorderBoxCenter,
+  );
+
+  const offset: Position = subtract(
+    withoutPageScrollChange,
+    draggable.page.borderBox.center,
+  );
+
+  return add(draggable.client.borderBox.center, offset);
+};

package/src/state/get-center-from-impact/get-client-border-box-center/index.ts

@@ -0,0 +1,45 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DroppableDimension,
+  Viewport,
+  DragImpact,
+  DraggableDimension,
+  DraggableDimensionMap,
+  LiftEffect,
+} from '../../../types';
+import getPageBorderBoxCenterFromImpact from '../get-page-border-box-center';
+import getClientFromPageBorderBoxCenter from './get-client-from-page-border-box-center';
+
+// Exact
+type Args = {
+  impact: DragImpact,
+  draggable: DraggableDimension,
+  droppable: DroppableDimension,
+  draggables: DraggableDimensionMap,
+  viewport: Viewport,
+  afterCritical: LiftEffect,
+};
+
+export default ({
+  impact,
+  draggable,
+  droppable,
+  draggables,
+  viewport,
+  afterCritical,
+}: Args): Position => {
+  const pageBorderBoxCenter: Position = getPageBorderBoxCenterFromImpact({
+    impact,
+    draggable,
+    draggables,
+    droppable,
+    afterCritical,
+  });
+
+  return getClientFromPageBorderBoxCenter({
+    pageBorderBoxCenter,
+    draggable,
+    viewport,
+  });
+};

package/src/state/get-center-from-impact/get-page-border-box-center/index.ts

@@ -0,0 +1,71 @@
+// @flow
+import type { Position } from 'css-box-model';
+import type {
+  DragImpact,
+  DraggableDimension,
+  DroppableDimension,
+  DraggableDimensionMap,
+  ImpactLocation,
+  LiftEffect,
+} from '../../../types';
+import whenCombining from './when-combining';
+import whenReordering from './when-reordering';
+import withDroppableDisplacement from '../../with-scroll-change/with-droppable-displacement';
+
+// Exact
+type Args = {
+  impact: DragImpact,
+  afterCritical: LiftEffect,
+  draggable: DraggableDimension,
+  droppable: DroppableDimension | null,
+  draggables: DraggableDimensionMap,
+};
+
+const getResultWithoutDroppableDisplacement = ({
+  impact,
+  draggable,
+  droppable,
+  draggables,
+  afterCritical,
+}: Args): Position => {
+  const original: Position = draggable.page.borderBox.center;
+  const at: ImpactLocation | null = impact.at;
+
+  if (!droppable) {
+    return original;
+  }
+
+  if (!at) {
+    return original;
+  }
+
+  if (at.type === 'REORDER') {
+    return whenReordering({
+      impact,
+      draggable,
+      draggables,
+      droppable,
+      afterCritical,
+    });
+  }
+
+  return whenCombining({
+    impact,
+    draggables,
+    afterCritical,
+  });
+};
+
+export default (args: Args): Position => {
+  const withoutDisplacement: Position = getResultWithoutDroppableDisplacement(
+    args,
+  );
+
+  const droppable: DroppableDimension | null = args.droppable;
+
+  const withDisplacement: Position = droppable
+    ? withDroppableDisplacement(droppable, withoutDisplacement)
+    : withoutDisplacement;
+
+  return withDisplacement;
+};

package/src/state/get-center-from-impact/get-page-border-box-center/when-combining.ts

@@ -0,0 +1,40 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { invariant } from '../../../invariant';
+import type {
+  DraggableDimensionMap,
+  DraggableId,
+  Combine,
+  LiftEffect,
+  DragImpact,
+} from '../../../types';
+import { add } from '../../position';
+import getCombinedItemDisplacement from '../../get-combined-item-displacement';
+import { tryGetCombine } from '../../get-impact-location';
+
+// Exact
+type Args = {
+  impact: DragImpact,
+  // all draggables in the system
+  draggables: DraggableDimensionMap,
+  afterCritical: LiftEffect,
+};
+
+// Returns the client offset required to move an item from its
+// original client position to its final resting position
+export default ({ afterCritical, impact, draggables }: Args): Position => {
+  const combine: Combine | null = tryGetCombine(impact);
+  invariant(combine);
+
+  const combineWith: DraggableId = combine.draggableId;
+  const center: Position = draggables[combineWith].page.borderBox.center;
+
+  const displaceBy: Position = getCombinedItemDisplacement({
+    displaced: impact.displaced,
+    afterCritical,
+    combineWith,
+    displacedBy: impact.displacedBy,
+  });
+
+  return add(center, displaceBy);
+};