# region

> A helper to work with rectangular regions in the DOM

Latest version **2.1.2** (published 2015-02-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install region
pnpm add region
yarn add region
bun add region
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2015-02-06 |
| First published | 2014-09-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Radu Brehar |
| Maintainers | radubrehar |
| Keywords | region, dom, rectangle, size, area, intersection, element, html, coordinates |

## Links

- npm: https://www.npmjs.com/package/region
- Repository: https://github.com/radubrehar/region
- Issues: https://github.com/radubrehar/region/issues
- npm.io page: https://npm.io/package/region

## Dependencies (3)

- [hasown](https://npm.io/package/hasown.md) ~1.x.x
- [newify](https://npm.io/package/newify.md) ^1.1.9
- [object-assign](https://npm.io/package/object-assign.md) ^2.0.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 2.1.2 (latest) — 2015-02-06
- 2.1.1 — 2015-01-22
- 2.1.0 — 2015-01-07
- 2.0.1 — 2014-12-09
- 2.0.0 — 2014-11-20
- 1.2.1 — 2014-11-11
- 1.2.0 — 2014-11-10
- 1.1.5 — 2014-10-24
- 1.1.4 — 2014-10-23
- 1.1.3 — 2014-10-16
- 1.1.2 — 2014-10-16
- 1.1.1 — 2014-10-16
- 1.1.0 — 2014-10-15
- 1.0.0 — 2014-10-15
- 0.2.2 — 2014-10-06
- … 5 more at https://npm.io/package/region/versions

## README

region
======

A helper to work with rectangular regions in the DOM

## Install

```sh
$ npm install region --save
```

## Usage

```js
var Region = require('region')

var region = Region({
    top: 10,
    left: 10,
    width: 50,
    height: 60
})

region.getRight() == 60
region.getBottom() == 70
```

## API

### Instantiation

You can create a new Region by calling the function returned by ```require('region')```. You can call it as a constructor if you want.

```js
var Region = require('region')

new Region({
    top: 10,
    left: 10
    //either width,height
    //or right, bottom
    width: 10,
    height: 10
})
```

or

```js
var Region = require('region')
var r = Region({
    top: 10,
    left: 10,
    right: 20,
    bottom: 20
})
```

You can instantiate a ```Region``` from a DOM node, using Region.fromDOM (NOTE: uses dom.offsetWidth/Height/Left/Top for getting coordinates)

```js
var r = Region.fromDOM(document.body)
```

### Getters

 * get - returns an object with {top, left, bottom, right}
 * getWidth
 * getHeight
 * getLeft
 * getTop
 * getRight
 * getBottom
 * getPosition - returns an object with {left, top}
 * getSize - returns an object with {width, height}

### containsPoint(x,y) or containsPoint({x,y}) : Boolean

```js
var r = Region({
    top: 10,
    left: 10,
    width: 10,
    height: 10
})

r.containsPoint(15, 10) == true
r.containsPoint({x: 10, y: 10}) == true
```

### equals(r): Boolean

Returns true if this region equals the region (or the object) given as the first param
var r = Region({top: 10, left: 10, bottom: 20, right: 20 })

r.equals({top: 10, left: 10, bottom: 20, right: 20 }) == true

### equalsPosition({top, left}): Boolean
Returns true if this region has top, left equal to the given coordinates

### equalsSize({width, height}): Boolean

Returns true if this region has the same size as the given region or object

```js
var coords = { top: 10, left: 10, width: 100, height: 100 }
var r = Region(coords)
r.equalsSize(coords) == true
r.equalsSize(r.clone()) == true
```
### getIntersection(Region): Region/false

Returns the region resulted by intersecting this region with the given region. If no intersection, returns false

### clone: Region

Returns a new region instance with the same coordinates
```js
var r = new Region({left: 10, right: 10, width: 10, height: 20})
r.clone().equals(r)
```

## Tests

```sh
$ make
```

Watch mode

```sh
$ make test-w
```

## License

```
MIT
```

---
_Source: https://npm.io/package/region · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._