How to use css-box-model - 10 common examples

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 },

it('should update the frame scroll and the subject', () => {
  const scrollSize: ScrollSize = {
    scrollHeight: 500,
    scrollWidth: 100,
  };
  const customClient: BoxModel = createBox({
    borderBox: {
      // 500 px high
      top: 0,
      left: 0,
      bottom: scrollSize.scrollHeight,
      right: scrollSize.scrollWidth,
    },
  });
  const customPage: BoxModel = customClient;
  const frameClient: BoxModel = createBox({
    borderBox: {
      // only viewing top 100px
      bottom: 100,
      // unchanged
      top: 0,
      right: scrollSize.scrollWidth,
      left: 0,
    },
  });
  const framePage: BoxModel = frameClient;
  const originalFrameScroll: Position = { x: 0, y: 0 };
  const droppable: DroppableDimension = getDroppable({
    descriptor,
    client: customClient,
    page: customPage,
    direction: 'vertical',

it('should not clip the frame if requested not to', () => {
      const expandedClient: BoxModel = createBox({
        borderBox: expandBySpacing(frameClient.borderBox, ten),
        margin,
        padding,
        border,
      });
      const expandedPage: BoxModel = withScroll(expandedClient, windowScroll);
      const bigClient: BoxModel = createBox({
        borderBox: expandedClient.borderBox,
        margin,
        padding,
        border,
      });

      const droppable: DroppableDimension = getWithClient(bigClient, {
        shouldClipSubject: false,
      });

      // Not clipped
      expect(droppable.subject.active).toEqual(expandedPage.marginBox);
      invariant(droppable.frame);
      expect(droppable.frame.shouldClipSubject).toBe(false);
    });

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({

export default (preset: Object) => {
  const scrollableScrollSize = {
    scrollWidth: 800,
    scrollHeight: 800,
  };
  const frameClient: BoxModel = createBox({
    borderBox: {
      top: 0,
      left: 0,
      right: 600,
      bottom: 600,
    },
  });

  const scrollable: DroppableDimension = getDroppableDimension({
    // stealing the home descriptor
    descriptor: preset.home.descriptor,
    direction: preset.home.axis.direction,
    borderBox: {
      top: 0,
      left: 0,
      // bigger than the frame

describe('frame clipping', () => {
    const frameClient: BoxModel = createBox({
      // bigger on every side by 10px
      borderBox: expandBySpacing(client.borderBox, ten),
      margin,
      border,
      padding,
    });
    const framePage: BoxModel = withScroll(frameClient, windowScroll);

    type Options = {|
      shouldClipSubject: boolean,
    |};

    const defaultOptions: Options = { shouldClipSubject: true };

    const getWithClient = (
      customClient: BoxModel,

const increased: ScrollSize = {
    scrollHeight: scrollable.scrollSize.scrollHeight + increase.y,
    scrollWidth: scrollable.scrollSize.scrollWidth + increase.x,
  };
  const client: BoxModel = adjustBox(scrollableHome.client, increase);
  const withIncreased: DroppableDimension = getDroppable({
    descriptor: scrollableHome.descriptor,
    isEnabled: scrollableHome.isEnabled,
    direction: scrollableHome.axis.direction,
    isCombineEnabled: scrollableHome.isCombineEnabled,
    isFixedOnPage: scrollableHome.isFixedOnPage,
    client,
    page: withScroll(client, preset.windowScroll),
    closest: {
      client: scrollable.frameClient,
      page: withScroll(scrollable.frameClient, preset.windowScroll),
      scrollSize: increased,
      scroll: scrollable.scroll.initial,
      shouldClipSubject: scrollable.shouldClipSubject,
    },
  });

  const published: Published = {
    ...empty,
    removals: [preset.inHome2.descriptor.id],
    modified: [withIncreased],
  };

  // $FlowFixMe - wrong type
  const original: CollectingState = addDroppable(
    // $FlowFixMe - wrong type
    state.collecting(),

// add scroll space on the main axis
  const scrollSize: ScrollSize = {
    scrollWidth: borderBox.width + horizontalGrowth,
    scrollHeight: borderBox.height + verticalGrowth,
  };

  const newClient: BoxModel = createBox({
    borderBox: newBorderBox,
    border: droppable.client.border,
    padding: droppable.client.padding,
    margin: droppable.client.margin,
  });

  // eslint-disable-next-line no-use-before-define
  const preset = getPreset();
  const newPage: BoxModel = withScroll(newClient, preset.windowScroll);

  return getDroppable({
    descriptor: droppable.descriptor,
    isEnabled: droppable.isEnabled,
    direction: axis.direction,
    client: newClient,
    page: newPage,
    isCombineEnabled: droppable.isCombineEnabled,
    isFixedOnPage: droppable.isFixedOnPage,
    closest: {
      // using old dimensions for frame
      client: droppable.client,
      page: droppable.page,
      scrollSize,
      scroll: origin,
      shouldClipSubject: true,

describe('frame clipping', () => {
    const frameClient: BoxModel = createBox({
      // bigger on every side by 10px
      borderBox: expandBySpacing(client.borderBox, ten),
      margin,
      border,
      padding,
    });
    const framePage: BoxModel = withScroll(frameClient, windowScroll);

    type Options = {|
      shouldClipSubject: boolean,
    |};

    const defaultOptions: Options = { shouldClipSubject: true };

    const getWithClient = (
      customClient: BoxModel,
      options?: Options = defaultOptions,
    ): DroppableDimension =>
      getDroppableDimension({
        descriptor,
        isEnabled: true,
        client: customClient,
        page: withScroll(customClient, windowScroll),

destination: foreign,
          }),
        ).toBe(false);
        // going further - ensure it is not partially visible
        expect(
          isPartiallyVisible({
            target: inForeign.page.borderBox,
            viewport: scrolled.frame,
            withDroppableDisplacement: true,
            destination: foreign,
          }),
        ).toBe(false);

        // checking that if displaced then inForeign would be visible
        // using raw .displacedBy as we are scolling on
        const displaced: BoxModel = offset(
          inForeign.client,
          getDisplacedBy(axis, inHome.displaceBy).point,
        );
        expect(
          isPartiallyVisible({
            target: displaced.borderBox,
            viewport: scrolled.frame,
            withDroppableDisplacement: true,
            destination: foreign,
          }),
        ).toBe(true);
      });