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

To help you get started, we’ve selected a few css-box-model examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github atlassian / react-beautiful-dnd / src / state / get-displacement.js View on Github external
return marginBox;
  }

  // We are expanding rather than offsetting the marginBox.
  // In some cases we want
  // - the target based on the starting position (such as when dropping outside of any list)
  // - the target based on the items position without starting displacement (such as when moving inside a list)
  // To keep things simple we just expand the whole area for this check
  // The worst case is some minor redundant offscreen movements
  const expandBy: Spacing = {
    top: onLift.displacedBy.point.y,
    right: onLift.displacedBy.point.x,
    bottom: 0,
    left: 0,
  };
  return getRect(expand(marginBox, expandBy));
};
github atlassian / react-beautiful-dnd / src / state / get-displacement-groups.js View on Github external
// We are expanding rather than offsetting the marginBox.
  // In some cases we want
  // - the target based on the starting position (such as when dropping outside of any list)
  // - the target based on the items position without starting displacement (such as when moving inside a list)
  // To keep things simple we just expand the whole area for this check
  // The worst case is some minor redundant offscreen movements
  const expandBy: Spacing = {
    // pull backwards into viewport
    top: displacedBy.point.y,
    right: 0,
    bottom: 0,
    // pull backwards into viewport
    left: displacedBy.point.x,
  };

  return getRect(expand(marginBox, expandBy));
}
github atlassian / react-beautiful-dnd / src / view / use-droppable-dimension-publisher / get-dimension.js View on Github external
// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
  const top: number = base.paddingBox.top - closestScrollable.scrollTop;
  const left: number = base.paddingBox.left - closestScrollable.scrollLeft;
  const bottom: number = top + closestScrollable.scrollHeight;
  const right: number = left + closestScrollable.scrollWidth;

  // unclipped padding box
  const paddingBox: Spacing = {
    top,
    right,
    bottom,
    left,
  };

  // Creating the borderBox by adding the borders to the paddingBox
  const borderBox: Spacing = expand(paddingBox, base.border);

  // We are not accounting for scrollbars
  // Adjusting for scrollbars is hard because:
  // - they are different between browsers
  // - scrollbars can be activated and removed during a drag
  // We instead account for this slightly in our auto scroller

  const client: BoxModel = createBox({
    borderBox,
    margin: base.margin,
    border: base.border,
    padding: base.padding,
  });
  return client;
};

css-box-model

Get accurate and well named css box model information about an Element 📦

MIT
Latest version published 4 years ago

Package Health Score

67 / 100
Full package analysis