Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kjirou/box-overlap
Check whether two boxes overlap
https://github.com/kjirou/box-overlap
calculation javascript nodejs rectangle
Last synced: 12 days ago
JSON representation
Check whether two boxes overlap
- Host: GitHub
- URL: https://github.com/kjirou/box-overlap
- Owner: kjirou
- License: mit
- Created: 2017-01-21T05:32:44.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-08-31T07:27:25.000Z (about 3 years ago)
- Last Synced: 2024-10-05T14:16:23.513Z (about 1 month ago)
- Topics: calculation, javascript, nodejs, rectangle
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/box-overlap
- Size: 5.86 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# box-overlap
[](https://badge.fury.io/js/box-overlap)
Check whether two boxes overlap
## Installation
```bash
npm install box-overlap
```
## Usage
```js
const { areBoxesOverlapping } = require('box-overlap');
// This value can also be expressed as `{ top: 1, left: 0, bottom: 4, right: 2 }`.
const a = { x: 0, y: 1, width: 2, height: 3 };
// 0 1 2
// +-+-+-+
// |F| | | 0
// +-+-+-+
// |T|a| | 1
// +-+-+-+
// |a|a| | 2
// +-+-+-+
// |a|a| | 3
// +-+-+-+
console.log(areBoxesOverlapping(a, { x: 0, y: 1, width: 1, height: 1 })); // -> true
console.log(areBoxesOverlapping(a, { x: 0, y: 0, width: 1, height: 1 })); // -> false
// 0 1 2
// +-+-+-+
// | | | | 0
// +-+-+-+
// |a|a| | 1
// +-+-+-+
// |a|a| | 2
// +-+-+-+
// |T|a| | 3
// +-+-+-+
// |F| | | 4
// +-+-+-+
console.log(areBoxesOverlapping(a, { x: 0, y: 3, width: 1, height: 1 })); // -> true
console.log(areBoxesOverlapping(a, { x: 0, y: 4, width: 1, height: 1 })); // -> false
// 1 0 1 2
// +-+-+-+-+
// | | | | | 0
// +-+-+-+-+
// |F|T|a| | 1
// +-+-+-+-+
// | |a|a| | 2
// +-+-+-+-+
// | |a|a| | 3
// +-+-+-+-+
console.log(areBoxesOverlapping(a, { x: 0, y: 1, width: 1, height: 1 })); // -> true
console.log(areBoxesOverlapping(a, { x: -1, y: 0, width: 1, height: 1 })); // -> false
// 0 1 2
// +-+-+-+
// | | | | 0
// +-+-+-+
// |a|T|F| 1
// +-+-+-+
// |a|a| | 2
// +-+-+-+
// |a|a| | 3
// +-+-+-+
console.log(areBoxesOverlapping(a, { x: 1, y: 1, width: 1, height: 1 })); // -> true
console.log(areBoxesOverlapping(a, { x: 2, y: 0, width: 1, height: 1 })); // -> false
```
## Use cases
- For coordinate calculation of 2D
- For results got in [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)