rect.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  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. const rectProperties = [ 'top', 'right', 'bottom', 'left', 'width', 'height' ];
  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 out of an object.
  28. * const rectC = new Rect( { top: 0, right: 10, bottom: 10, left: 0, width: 10, height: 10 } );
  29. *
  30. * // Rect out of another Rect instance.
  31. * const rectD = new Rect( rectC );
  32. *
  33. * // Rect out of a ClientRect.
  34. * const rectE = new Rect( document.body.getClientRects().item( 0 ) );
  35. *
  36. * @param {HTMLElement|Range|ClientRect|module:utils/dom/rect~Rect|Object} source A source object to create the rect.
  37. */
  38. constructor( source ) {
  39. /**
  40. * The object this rect is for.
  41. *
  42. * @protected
  43. * @readonly
  44. * @member {HTMLElement|Range|ClientRect|module:utils/dom/rect~Rect|Object} #_source
  45. */
  46. Object.defineProperty( this, '_source', {
  47. // source._source if already the Rect instance
  48. value: source._source || source,
  49. writable: false,
  50. enumerable: false
  51. } );
  52. // Acquires all the rect properties from the passed source.
  53. //
  54. // @private
  55. // @param {ClientRect|module:utils/dom/rect~Rect|Object} source}
  56. const setProperties = source => {
  57. rectProperties.forEach( p => this[ p ] = source[ p ] );
  58. };
  59. if ( isElement( source ) ) {
  60. setProperties( source.getBoundingClientRect() );
  61. } else if ( isRange( source ) ) {
  62. // Use getClientRects() when the range is collapsed
  63. // https://github.com/ckeditor/ckeditor5-utils/issues/153
  64. if ( source.collapsed ) {
  65. const rects = source.getClientRects();
  66. if ( rects.length ) {
  67. setProperties( rects[ 0 ] );
  68. }
  69. // If there's no client rects for the Range, use parent container's bounding
  70. // rect instead and adjust rect's width to simulate the actual geometry of such
  71. // range.
  72. // https://github.com/ckeditor/ckeditor5-utils/issues/153
  73. else {
  74. setProperties( source.startContainer.getBoundingClientRect() );
  75. this.width = 0;
  76. }
  77. } else {
  78. setProperties( source.getBoundingClientRect() );
  79. }
  80. } else {
  81. setProperties( source );
  82. }
  83. /**
  84. * The "top" value of the rect.
  85. *
  86. * @readonly
  87. * @member {Number} #top
  88. */
  89. /**
  90. * The "right" value of the rect.
  91. *
  92. * @readonly
  93. * @member {Number} #right
  94. */
  95. /**
  96. * The "bottom" value of the rect.
  97. *
  98. * @readonly
  99. * @member {Number} #bottom
  100. */
  101. /**
  102. * The "left" value of the rect.
  103. *
  104. * @readonly
  105. * @member {Number} #left
  106. */
  107. /**
  108. * The "width" value of the rect.
  109. *
  110. * @readonly
  111. * @member {Number} #width
  112. */
  113. /**
  114. * The "height" value of the rect.
  115. *
  116. * @readonly
  117. * @member {Number} #height
  118. */
  119. }
  120. /**
  121. * Returns a clone of the rect.
  122. *
  123. * @returns {module:utils/dom/rect~Rect} A cloned rect.
  124. */
  125. clone() {
  126. return new Rect( this );
  127. }
  128. /**
  129. * Moves the rect so that its upper–left corner lands in desired `[ x, y ]` location.
  130. *
  131. * @param {Number} x Desired horizontal location.
  132. * @param {Number} y Desired vertical location.
  133. * @returns {module:utils/dom/rect~Rect} A rect which has been moved.
  134. */
  135. moveTo( x, y ) {
  136. this.top = y;
  137. this.right = x + this.width;
  138. this.bottom = y + this.height;
  139. this.left = x;
  140. return this;
  141. }
  142. /**
  143. * Moves the rect in–place by a dedicated offset.
  144. *
  145. * @param {Number} x A horizontal offset.
  146. * @param {Number} y A vertical offset
  147. * @returns {module:utils/dom/rect~Rect} A rect which has been moved.
  148. */
  149. moveBy( x, y ) {
  150. this.top += y;
  151. this.right += x;
  152. this.left += x;
  153. this.bottom += y;
  154. return this;
  155. }
  156. /**
  157. * Returns a new rect a a result of intersection with another rect.
  158. *
  159. * @param {module:utils/dom/rect~Rect} anotherRect
  160. * @returns {module:utils/dom/rect~Rect}
  161. */
  162. getIntersection( anotherRect ) {
  163. const rect = {
  164. top: Math.max( this.top, anotherRect.top ),
  165. right: Math.min( this.right, anotherRect.right ),
  166. bottom: Math.min( this.bottom, anotherRect.bottom ),
  167. left: Math.max( this.left, anotherRect.left )
  168. };
  169. rect.width = rect.right - rect.left;
  170. rect.height = rect.bottom - rect.top;
  171. if ( rect.width < 0 || rect.height < 0 ) {
  172. return null;
  173. } else {
  174. return new Rect( rect );
  175. }
  176. }
  177. /**
  178. * Returns the area of intersection with another rect.
  179. *
  180. * @param {module:utils/dom/rect~Rect} anotherRect [description]
  181. * @returns {Number} Area of intersection.
  182. */
  183. getIntersectionArea( anotherRect ) {
  184. const rect = this.getIntersection( anotherRect );
  185. if ( rect ) {
  186. return rect.getArea();
  187. } else {
  188. return 0;
  189. }
  190. }
  191. /**
  192. * Returns the area of the rect.
  193. *
  194. * @returns {Number}
  195. */
  196. getArea() {
  197. return this.width * this.height;
  198. }
  199. /**
  200. * Returns a new rect, a part of the original rect, which is actually visible to the user,
  201. * e.g. an original rect cropped by parent element rects which have `overflow` set in CSS
  202. * other than `"visible"`.
  203. *
  204. * If there's no such visible rect, which is when the rect is limited by one or many of
  205. * the ancestors, `null` is returned.
  206. *
  207. * @returns {module:utils/dom/rect~Rect|null} A visible rect instance or `null`, if there's none.
  208. */
  209. getVisible() {
  210. const source = this._source;
  211. let visibleRect = this.clone();
  212. // There's no ancestor to crop <body> with the overflow.
  213. if ( source != global.document.body ) {
  214. let parent = source.parentNode || source.commonAncestorContainer;
  215. // Check the ancestors all the way up to the <body>.
  216. while ( parent && parent != global.document.body ) {
  217. const parentRect = new Rect( parent );
  218. const intersectionRect = visibleRect.getIntersection( parentRect );
  219. if ( intersectionRect ) {
  220. if ( intersectionRect.getArea() < visibleRect.getArea() ) {
  221. // Reduce the visible rect to the intersection.
  222. visibleRect = intersectionRect;
  223. }
  224. } else {
  225. // There's no intersection, the rect is completely invisible.
  226. return null;
  227. }
  228. parent = parent.parentNode;
  229. }
  230. }
  231. return visibleRect;
  232. }
  233. /**
  234. * Returns a rect of the web browser viewport.
  235. *
  236. * @returns {module:utils/dom/rect~Rect} A viewport rect.
  237. */
  238. static getViewportRect() {
  239. const { innerWidth, innerHeight } = global.window;
  240. return new Rect( {
  241. top: 0,
  242. right: innerWidth,
  243. bottom: innerHeight,
  244. left: 0,
  245. width: innerWidth,
  246. height: innerHeight
  247. } );
  248. }
  249. }