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

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);
      });

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

const scrolled: DroppableDimension = scrollDroppable(
    scrollableHome,
    newScroll,
  );
  // validation
  expect(getFrame(scrolled).scroll.current).toEqual(scrollChange);
  // dimensions
  const added: DraggableDimension = getDraggableDimension({
    descriptor: {
      index: 0,
      id: 'added',
      droppableId: preset.home.descriptor.id,
      type: preset.home.descriptor.type,
    },
    // when collected this dimension would have been displaced by the scroll
    borderBox: offset(preset.inHome1.client, scrollDisplacement).borderBox,
    windowScroll: preset.windowScroll,
  });
  const unshifted: DraggableDimension = getDraggableDimension({
    descriptor: added.descriptor,
    // unshifted
    borderBox: preset.inHome1.client.borderBox,
    windowScroll: preset.windowScroll,
  });
  const published: Published = {
    ...empty,
    additions: [added],
    modified: [scrolled],
  };
  const original: CollectingState = state.collecting(
    preset.inHome1.descriptor.id,
  );

const closestAfter: DraggableDimension =
      draggables[displaced[0].draggableId];
    // want to go before where it would be with the displacement

    // target is displaced and is already in it's starting position
    if (didStartDisplaced(closestAfter.descriptor.id, onLift)) {
      return goBefore({
        axis,
        moveRelativeTo: closestAfter.page,
        isMoving: draggablePage,
      });
    }

    // target has been displaced during the drag and it is not in its starting position
    // we need to account for the displacement
    const withDisplacement: BoxModel = offset(
      closestAfter.page,
      displacedBy.point,
    );

    return goBefore({
      axis,
      moveRelativeTo: withDisplacement,
      isMoving: draggablePage,
    });
  }

  // Nothing in list is displaced, we should go after the last item

  const last: DraggableDimension =
    insideDestination[insideDestination.length - 1];

// Nothing in list is displaced, we should go after the last item

  const last: DraggableDimension =
    insideDestination[insideDestination.length - 1];

  // we can just go into our original position if the last item
  // is the dragging item
  if (last.descriptor.id === draggable.descriptor.id) {
    return draggablePage.borderBox.center;
  }

  if (didStartDisplaced(last.descriptor.id, onLift)) {
    // if the item started displaced and it is no longer displaced then
    // we need to go after it it's non-displaced position

    const page: BoxModel = offset(last.page, negate(onLift.displacedBy.point));
    return goAfter({
      axis,
      moveRelativeTo: page,
      isMoving: draggablePage,
    });
  }

  // item is in its resting spot. we can go straight after it
  return goAfter({
    axis,
    moveRelativeTo: last.page,
    isMoving: draggablePage,
  });
};

index: preset.inHome4.descriptor.index,
              droppableId: preset.inHome4.descriptor.id,
            },
          },
        };
        const result: Position = getPageBorderBoxCenter({
          impact,
          afterCritical,
          draggable: preset.inHome1,
          draggables: preset.draggables,
          droppable: preset.home,
        });

        const expected: Position = goAfter({
          axis,
          moveRelativeTo: offset(
            preset.inHome4.page,
            negate(displacedBy.point),
          ),
          isMoving: preset.inHome1.page,
        });
        expect(result).toEqual(expected);
      });
    });

export const shift = ({
  draggable,
  change,
  newIndex,
}: ShiftArgs): DraggableDimension => {
  const client: BoxModel = offset(draggable.client, change);
  const page: BoxModel = withScroll(client, preset.windowScroll);

  const moved: DraggableDimension = {
    ...draggable,
    descriptor: {
      ...draggable.descriptor,
      index: newIndex,
    },
    placeholder: {
      ...draggable.placeholder,
      client,
    },
    client,
    page,
  };

withAdditions.forEach((item: DraggableDimension) => {
      if (additionMap[item.descriptor.id]) {
        return;
      }

      const shift: Shift = toShift[item.descriptor.id];
      if (!shift) {
        return;
      }

      const client: BoxModel = offsetBox(item.client, shift.offset);
      const page: BoxModel = withScroll(client, initialWindowScroll);
      const index: number = item.descriptor.index + shift.indexChange;

      const moved: DraggableDimension = {
        ...item,
        descriptor: {
          ...item.descriptor,
          index,
        },
        placeholder: {
          ...item.placeholder,
          client,
        },
        client,
        page,
      };

export default ({
  draggable,
  offset,
  initialWindowScroll,
}: Args): DraggableDimension => {
  const client: BoxModel = offsetBox(draggable.client, offset);
  const page: BoxModel = withScroll(client, initialWindowScroll);

  const moved: DraggableDimension = {
    ...draggable,
    placeholder: {
      ...draggable.placeholder,
      client,
    },
    client,
    page,
  };

  return moved;
};

(draggable: DraggableDimension): DraggableDimension => {
      const droppableId: DroppableId = draggable.descriptor.droppableId;
      const modified: DroppableDimension = modifiedMap[droppableId];
      const closest: ?Scrollable = modified.viewport.closestScrollable;

      invariant(closest);

      const droppableScrollChange: Position = closest.scroll.diff.value;

      const totalChange: Position = add(
        windowScrollChange,
        droppableScrollChange,
      );
      const client: BoxModel = offset(draggable.client, totalChange);
      const page: BoxModel = withScroll(client, viewport.scroll.initial);

      const moved: DraggableDimension = {
        ...draggable,
        placeholder: {
          ...draggable.placeholder,
          client,
        },
        client,
        page,
      };

      return moved;
    },
  );