1 | region
|
2 | ======
|
3 |
|
4 | A helper to work with rectangular regions in the DOM
|
5 |
|
6 | ## Install
|
7 |
|
8 | ```sh
|
9 | $ npm install region --save
|
10 | ```
|
11 |
|
12 | ## Usage
|
13 |
|
14 | ```js
|
15 | var Region = require('region')
|
16 |
|
17 | var region = Region({
|
18 | top: 10,
|
19 | left: 10,
|
20 | width: 50,
|
21 | height: 60
|
22 | })
|
23 |
|
24 | region.getRight() == 60
|
25 | region.getBottom() == 70
|
26 | ```
|
27 |
|
28 | ## API
|
29 |
|
30 | ### Instantiation
|
31 |
|
32 | You can create a new Region by calling the function returned by ```require('region')```. You can call it as a constructor if you want.
|
33 |
|
34 | ```js
|
35 | var Region = require('region')
|
36 |
|
37 | new Region({
|
38 | top: 10,
|
39 | left: 10
|
40 | //either width,height
|
41 | //or right, bottom
|
42 | width: 10,
|
43 | height: 10
|
44 | })
|
45 | ```
|
46 |
|
47 | or
|
48 |
|
49 | ```js
|
50 | var Region = require('region')
|
51 | var r = Region({
|
52 | top: 10,
|
53 | left: 10,
|
54 | right: 20,
|
55 | bottom: 20
|
56 | })
|
57 | ```
|
58 |
|
59 | You can instantiate a ```Region``` from a DOM node, using Region.fromDOM (NOTE: uses dom.offsetWidth/Height/Left/Top for getting coordinates)
|
60 |
|
61 | ```js
|
62 | var r = Region.fromDOM(document.body)
|
63 | ```
|
64 |
|
65 | ### Getters
|
66 |
|
67 | * get - returns an object with {top, left, bottom, right}
|
68 | * getWidth
|
69 | * getHeight
|
70 | * getLeft
|
71 | * getTop
|
72 | * getRight
|
73 | * getBottom
|
74 | * getPosition - returns an object with {left, top}
|
75 | * getSize - returns an object with {width, height}
|
76 |
|
77 | ### containsPoint(x,y) or containsPoint({x,y}) : Boolean
|
78 |
|
79 | ```js
|
80 | var r = Region({
|
81 | top: 10,
|
82 | left: 10,
|
83 | width: 10,
|
84 | height: 10
|
85 | })
|
86 |
|
87 | r.containsPoint(15, 10) == true
|
88 | r.containsPoint({x: 10, y: 10}) == true
|
89 | ```
|
90 |
|
91 | ### equals(r): Boolean
|
92 |
|
93 | Returns true if this region equals the region (or the object) given as the first param
|
94 | var r = Region({top: 10, left: 10, bottom: 20, right: 20 })
|
95 |
|
96 | r.equals({top: 10, left: 10, bottom: 20, right: 20 }) == true
|
97 |
|
98 | ### equalsPosition({top, left}): Boolean
|
99 | Returns true if this region has top, left equal to the given coordinates
|
100 |
|
101 | ### equalsSize({width, height}): Boolean
|
102 |
|
103 | Returns true if this region has the same size as the given region or object
|
104 |
|
105 | ```js
|
106 | var coords = { top: 10, left: 10, width: 100, height: 100 }
|
107 | var r = Region(coords)
|
108 | r.equalsSize(coords) == true
|
109 | r.equalsSize(r.clone()) == true
|
110 | ```
|
111 | ### getIntersection(Region): Region/false
|
112 |
|
113 | Returns the region resulted by intersecting this region with the given region. If no intersection, returns false
|
114 |
|
115 | ### clone: Region
|
116 |
|
117 | Returns a new region instance with the same coordinates
|
118 | ```js
|
119 | var r = new Region({left: 10, right: 10, width: 10, height: 20})
|
120 | r.clone().equals(r)
|
121 | ```
|
122 |
|
123 | ## Tests
|
124 |
|
125 | ```sh
|
126 | $ make
|
127 | ```
|
128 |
|
129 | Watch mode
|
130 |
|
131 | ```sh
|
132 | $ make test-w
|
133 | ```
|
134 |
|
135 | ## License
|
136 |
|
137 | ```
|
138 | MIT
|
139 | ``` |
\ | No newline at end of file |