rect.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module utils/dom/rect
  7. */
  8. import global from './global';
  9. import isRange from './isrange';
  10. import isElement from '../lib/lodash/isElement';
  11. import getBorderWidths from './getborderwidths';
  12. /**
  13. * A helper class representing a `ClientRect` object, e.g. value returned by
  14. * the native `object.getBoundingClientRect()` method. Provides a set of methods
  15. * to manipulate the rect and compare it against other rect instances.
  16. */
  17. export default class Rect {
  18. /**
  19. * Creates an instance of rect.
  20. *
  21. * // Rect of an HTMLElement.
  22. * const rectA = new Rect( document.body );
  23. *
  24. * // Rect of a DOM Range.
  25. * const rectB = new Rect( document.getSelection().getRangeAt( 0 ) );
  26. *
  27. * // Rect of a window (web browser viewport).
  28. * const rectC = new Rect( window );
  29. *
  30. * // Rect out of an object.
  31. * const rectD = new Rect( { top: 0, right: 10, bottom: 10, left: 0, width: 10, height: 10 } );
  32. *
  33. * // Rect out of another Rect instance.
  34. * const rectE = new Rect( rectD );
  35. *
  36. * // Rect out of a ClientRect.
  37. * const rectF = new Rect( document.body.getClientRects().item( 0 ) );
  38. *
  39. * **Note**: By default a rect of an HTML element includes its CSS borders and scrollbars (if any)
  40. * ant the rect of a `window` includes scrollbars too. Use {@link #excludeScrollbarsAndBorders}
  41. * to get the inner part of the rect.
  42. *
  43. * @param {HTMLElement|Range|Window|ClientRect|module:utils/dom/rect~Rect|Object} source A source object to create the rect.
  44. */
  45. constructor( source ) {
  46. /**
  47. * The object this rect is for.
  48. *
  49. * @protected
  50. * @readonly
  51. * @member {HTMLElement|Range|ClientRect|module:utils/dom/rect~Rect|Object} #_source
  52. */
  53. Object.defineProperty( this, '_source', {
  54. // If the source is a Rect instance, copy it's #_source.
  55. value: source._source || source,
  56. writable: true,
  57. enumerable: false
  58. } );
  59. if ( isElement( source ) ) {
  60. copyRectProperties( this, source.getBoundingClientRect() );
  61. } else if ( isRange( source ) ) {
  62. copyRectProperties( this, Rect.getDomRangeRects( source )[ 0 ] );
  63. } else if ( source === global.window ) {
  64. const { innerWidth, innerHeight } = global.window;
  65. copyRectProperties( this, {
  66. top: 0,
  67. right: innerWidth,
  68. bottom: innerHeight,
  69. left: 0,
  70. width: innerWidth,
  71. height: innerHeight
  72. } );
  73. } else {
  74. copyRectProperties( this, source );
  75. }
  76. /**
  77. * The "top" value of the rect.
  78. *
  79. * @readonly
  80. * @member {Number} #top
  81. */
  82. /**
  83. * The "right" value of the rect.
  84. *
  85. * @readonly
  86. * @member {Number} #right
  87. */
  88. /**
  89. * The "bottom" value of the rect.
  90. *
  91. * @readonly
  92. * @member {Number} #bottom
  93. */
  94. /**
  95. * The "left" value of the rect.
  96. *
  97. * @readonly
  98. * @member {Number} #left
  99. */
  100. /**
  101. * The "width" value of the rect.
  102. *
  103. * @readonly
  104. * @member {Number} #width
  105. */
  106. /**
  107. * The "height" value of the rect.
  108. *
  109. * @readonly
  110. * @member {Number} #height
  111. */
  112. }
  113. /**
  114. * Returns a clone of the rect.
  115. *
  116. * @returns {module:utils/dom/rect~Rect} A cloned rect.
  117. */
  118. clone() {
  119. return new Rect( this );
  120. }
  121. /**
  122. * Moves the rect so that its upper–left corner lands in desired `[ x, y ]` location.
  123. *
  124. * @param {Number} x Desired horizontal location.
  125. * @param {Number} y Desired vertical location.
  126. * @returns {module:utils/dom/rect~Rect} A rect which has been moved.
  127. */
  128. moveTo( x, y ) {
  129. this.top = y;
  130. this.right = x + this.width;
  131. this.bottom = y + this.height;
  132. this.left = x;
  133. return this;
  134. }
  135. /**
  136. * Moves the rect in–place by a dedicated offset.
  137. *
  138. * @param {Number} x A horizontal offset.
  139. * @param {Number} y A vertical offset
  140. * @returns {module:utils/dom/rect~Rect} A rect which has been moved.
  141. */
  142. moveBy( x, y ) {
  143. this.top += y;
  144. this.right += x;
  145. this.left += x;
  146. this.bottom += y;
  147. return this;
  148. }
  149. /**
  150. * Returns a new rect a a result of intersection with another rect.
  151. *
  152. * @param {module:utils/dom/rect~Rect} anotherRect
  153. * @returns {module:utils/dom/rect~Rect}
  154. */
  155. getIntersection( anotherRect ) {
  156. const rect = {
  157. top: Math.max( this.top, anotherRect.top ),
  158. right: Math.min( this.right, anotherRect.right ),
  159. bottom: Math.min( this.bottom, anotherRect.bottom ),
  160. left: Math.max( this.left, anotherRect.left )
  161. };
  162. rect.width = rect.right - rect.left;
  163. rect.height = rect.bottom - rect.top;
  164. if ( rect.width < 0 || rect.height < 0 ) {
  165. return null;
  166. } else {
  167. return new Rect( rect );
  168. }
  169. }
  170. /**
  171. * Returns the area of intersection with another rect.
  172. *
  173. * @param {module:utils/dom/rect~Rect} anotherRect [description]
  174. * @returns {Number} Area of intersection.
  175. */
  176. getIntersectionArea( anotherRect ) {
  177. const rect = this.getIntersection( anotherRect );
  178. if ( rect ) {
  179. return rect.getArea();
  180. } else {
  181. return 0;
  182. }
  183. }
  184. /**
  185. * Returns the area of the rect.
  186. *
  187. * @returns {Number}
  188. */
  189. getArea() {
  190. return this.width * this.height;
  191. }
  192. /**
  193. * Returns a new rect, a part of the original rect, which is actually visible to the user,
  194. * e.g. an original rect cropped by parent element rects which have `overflow` set in CSS
  195. * other than `"visible"`.
  196. *
  197. * If there's no such visible rect, which is when the rect is limited by one or many of
  198. * the ancestors, `null` is returned.
  199. *
  200. * @returns {module:utils/dom/rect~Rect|null} A visible rect instance or `null`, if there's none.
  201. */
  202. getVisible() {
  203. const source = this._source;
  204. let visibleRect = this.clone();
  205. // There's no ancestor to crop <body> with the overflow.
  206. if ( source != global.document.body ) {
  207. let parent = source.parentNode || source.commonAncestorContainer;
  208. // Check the ancestors all the way up to the <body>.
  209. while ( parent && parent != global.document.body ) {
  210. const parentRect = new Rect( parent );
  211. const intersectionRect = visibleRect.getIntersection( parentRect );
  212. if ( intersectionRect ) {
  213. if ( intersectionRect.getArea() < visibleRect.getArea() ) {
  214. // Reduce the visible rect to the intersection.
  215. visibleRect = intersectionRect;
  216. }
  217. } else {
  218. // There's no intersection, the rect is completely invisible.
  219. return null;
  220. }
  221. parent = parent.parentNode;
  222. }
  223. }
  224. return visibleRect;
  225. }
  226. /**
  227. * Checks if all property values ({@link #top}, {@link #left}, {@link #right},
  228. * {@link #bottom}, {@link #width} and {@link #height}) are the equal in both rect
  229. * instances.
  230. *
  231. * @param {module:utils/dom/rect~Rect} rect A rect instance to compare with.
  232. * @returns {Boolean} `true` when Rects are equal. `false` otherwise.
  233. */
  234. isEqual( anotherRect ) {
  235. for ( const prop of rectProperties ) {
  236. if ( this[ prop ] !== anotherRect[ prop ] ) {
  237. return false;
  238. }
  239. }
  240. return true;
  241. }
  242. /**
  243. * Checks whether a rect fully contains another rect instance.
  244. *
  245. * @param {module:utils/dom/rect~Rect} anotherRect
  246. * @returns {Boolean} `true` if contains, `false` otherwise.
  247. */
  248. contains( anotherRect ) {
  249. const intersectRect = this.getIntersection( anotherRect );
  250. return !!( intersectRect && intersectRect.isEqual( anotherRect ) );
  251. }
  252. /**
  253. * Excludes scrollbars and CSS borders from the rect.
  254. *
  255. * * Borders are removed when {@link #_source} is an HTML element.
  256. * * Scrollbars are excluded from HTML elements and the `window`.
  257. *
  258. * @returns {module:utils/dom/rect~Rect} A rect which has been updated.
  259. */
  260. excludeScrollbarsAndBorders() {
  261. const source = this._source;
  262. let scrollBarWidth, scrollBarHeight;
  263. if ( source === global.window ) {
  264. scrollBarWidth = global.window.innerWidth - global.document.documentElement.clientWidth;
  265. scrollBarHeight = global.window.innerHeight - global.document.documentElement.clientHeight;
  266. } else {
  267. const borderWidths = getBorderWidths( this._source );
  268. scrollBarWidth = source.offsetWidth - source.clientWidth;
  269. scrollBarHeight = source.offsetHeight - source.clientHeight;
  270. this.moveBy( borderWidths.left, borderWidths.top );
  271. }
  272. // Assuming LTR scrollbars. TODO: RTL.
  273. this.width -= scrollBarWidth;
  274. this.right -= scrollBarWidth;
  275. this.height -= scrollBarHeight;
  276. this.bottom -= scrollBarHeight;
  277. return this;
  278. }
  279. /**
  280. * Returns an array of rects of the given native DOM Range.
  281. *
  282. * @param {Range} range A native DOM range.
  283. * @returns {Array.<module:utils/dom/rect~Rect>} DOM Range rects.
  284. */
  285. static getDomRangeRects( range ) {
  286. const rects = [];
  287. // Safari does not iterate over ClientRectList using for...of loop.
  288. const clientRects = Array.from( range.getClientRects() );
  289. if ( clientRects.length ) {
  290. for ( const rect of clientRects ) {
  291. rects.push( new Rect( rect ) );
  292. }
  293. }
  294. // If there's no client rects for the Range, use parent container's bounding rect
  295. // instead and adjust rect's width to simulate the actual geometry of such range.
  296. // https://github.com/ckeditor/ckeditor5-utils/issues/153
  297. else {
  298. const startContainerRect = new Rect( range.startContainer.getBoundingClientRect() );
  299. startContainerRect.right = startContainerRect.left;
  300. startContainerRect.width = 0;
  301. rects.push( startContainerRect );
  302. }
  303. return rects;
  304. }
  305. }
  306. const rectProperties = [ 'top', 'right', 'bottom', 'left', 'width', 'height' ];
  307. // Acquires all the rect properties from the passed source.
  308. //
  309. // @private
  310. // @param {module:utils/dom/rect~Rect} rect
  311. // @param {ClientRect|module:utils/dom/rect~Rect|Object} source
  312. function copyRectProperties( rect, source ) {
  313. for ( const p of rectProperties ) {
  314. rect[ p ] = source[ p ];
  315. }
  316. }