How to use the css-box-model.getRect function in css-box-model

describe('is position in frame', () => {
  const frame: Rect = getRect({
    top: 0,
    left: 0,
    right: 100,
    bottom: 100,
  });

  it('should return true if inside the frame', () => {
    expect(isPositionInFrame(frame)(frame.center)).toBe(true);
  });

  it('should return true for all corners', () => {
    const corners: Position[] = [
      // top left
      { x: 0, y: 0 },
      // top right
      { x: 100, y: 0 },

DraggableDimension,
  DroppableDimension,
  DragImpact,
  DisplacedBy,
} from '../../../src/types';
import getDisplacementMap from '../../../src/state/get-displacement-map';
import { origin } from '../../../src/state/position';

const viewport: Rect = getRect({
  top: 0,
  right: 800,
  left: 0,
  bottom: 600,
});

const subject: Rect = getRect({
  top: 0,
  left: 0,
  right: 800,
  // much longer than viewport
  bottom: 2000,
});

const droppable: DroppableDimension = getDroppableDimension({
  descriptor: {
    id: 'drop',
    type: 'TYPE',
  },
  borderBox: subject,
});

const inViewport: DraggableDimension = getDraggableDimension({

const top: number = scroll.y;
  const left: number = scroll.x;

  // window.innerHeight: includes scrollbars (not what we want)
  // document.clientHeight gives us the correct value when using the html5 doctype
  const doc: HTMLElement = getDocumentElement();
  // Using these values as they do not consider scrollbars
  // padding box, without scrollbar
  const width: number = doc.clientWidth;
  const height: number = doc.clientHeight;

  // Computed
  const right: number = left + width;
  const bottom: number = top + height;

  const frame: Rect = getRect({
    top,
    left,
    right,
    bottom,
  });

  const viewport: Viewport = {
    frame,
    scroll: {
      initial: scroll,
      current: scroll,
      max: maxScroll,
      diff: {
        value: origin,
        displacement: origin,
      },

it(`should overscan visibility on axis ${axis.direction}`, () => {
    const visibleArea: Rect = getRect({
      top: 0,
      right: 200,
      left: 0,
      bottom: 200,
    });
    const visibleSizeOnAxis: Position = patch(
      axis.line,
      visibleArea[axis.size],
    );

    const viewport: Viewport = createViewport({
      frame: visibleArea,
      scroll: origin,
      scrollHeight: visibleArea.height,
      scrollWidth: visibleArea.width,
    });

import { isPartiallyVisible } from '../../../../src/state/visibility/is-visible';
import { createViewport } from '../../../utils/viewport';
import type {
  Viewport,
  Axis,
  DragImpact,
  DraggableDimension,
  DraggableDimensionMap,
  DroppableDimension,
  DraggableLocation,
} from '../../../../src/types';

const origin: Position = { x: 0, y: 0 };

const customViewport: Viewport = createViewport({
  frame: getRect({
    top: 0,
    left: 0,
    bottom: 1000,
    right: 1000,
  }),
  scroll: origin,
  scrollHeight: 1000,
  scrollWidth: 1000,
});

describe('move to next index', () => {
  beforeEach(() => {
    jest.spyOn(console, 'error').mockImplementation(() => {});
  });

  afterEach(() => {

describe('droppable', () => {
    const borderBox: Rect = getRect({
      top: 0,
      left: 0,
      right: 600,
      bottom: 600,
    });
    const frame: Rect = getRect({
      top: 0,
      left: 0,
      right: 100,
      bottom: 100,
    });

    const scrollable: DroppableDimension = getDroppableDimension({
      descriptor: {
        id: 'clipped',
        type: 'TYPE',

import type { DimensionMarshal, Callbacks as DimensionMarshalCallbacks } from '../../../src/state/dimension-marshal/dimension-marshal-types';
import type {
  Viewport,
  State,
  Store,
  DraggableDimension,
  DroppableDimension,
  DroppableId,
  InitialDragPositions,
  Hooks,
} from '../../../src/types';

const preset = getPreset();

const scrolledViewport: Viewport = createViewport({
  subject: getRect({
    top: 0,
    left: 0,
    right: 1000,
    bottom: 1000,
  }),
  scrollHeight: 2000,
  scrollWidth: 2000,
  scroll: preset.windowScroll,
});

const getDimensionMarshal = (store: Store): DimensionMarshal => {
  const callbacks: DimensionMarshalCallbacks = {
    cancel: () => {
      store.dispatch(clean());
    },
    publishDraggable: (dimension: DraggableDimension) => {

export const clip = (frame: Spacing, subject: Spacing): ?Rect => {
  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;
};