8
0

documentselection.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module engine/view/documentselection
  7. */
  8. import Selection from './selection';
  9. import mix from '@ckeditor/ckeditor5-utils/src/mix';
  10. import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
  11. /**
  12. * Class representing the document selection in the view.
  13. *
  14. * Its instance is available in {@link module:engine/view/document~Document#selection `Document#selection`}.
  15. *
  16. * It is similar to {@link module:engine/view/selection~Selection} but
  17. * it has a read-only API and can be modified only by the writer available in
  18. * the {@link module:engine/view/view~View#change `View#change()`} block
  19. * (so via {@link module:engine/view/downcastwriter~DowncastWriter#setSelection `DowncastWriter#setSelection()`}).
  20. */
  21. export default class DocumentSelection {
  22. /**
  23. * Creates new DocumentSelection instance.
  24. *
  25. * // Creates empty selection without ranges.
  26. * const selection = new DocumentSelection();
  27. *
  28. * // Creates selection at the given range.
  29. * const range = writer.createRange( start, end );
  30. * const selection = new DocumentSelection( range );
  31. *
  32. * // Creates selection at the given ranges
  33. * const ranges = [ writer.createRange( start1, end2 ), writer.createRange( start2, end2 ) ];
  34. * const selection = new DocumentSelection( ranges );
  35. *
  36. * // Creates selection from the other selection.
  37. * const otherSelection = writer.createSelection();
  38. * const selection = new DocumentSelection( otherSelection );
  39. *
  40. * // Creates selection at the given position.
  41. * const position = writer.createPositionAt( root, offset );
  42. * const selection = new DocumentSelection( position );
  43. *
  44. * // Creates collapsed selection at the position of given item and offset.
  45. * const paragraph = writer.createContainerElement( 'paragraph' );
  46. * const selection = new DocumentSelection( paragraph, offset );
  47. *
  48. * // Creates a range inside an {@link module:engine/view/element~Element element} which starts before the
  49. * // first child of that element and ends after the last child of that element.
  50. * const selection = new DocumentSelection( paragraph, 'in' );
  51. *
  52. * // Creates a range on an {@link module:engine/view/item~Item item} which starts before the item and ends
  53. * // just after the item.
  54. * const selection = new DocumentSelection( paragraph, 'on' );
  55. *
  56. * `Selection`'s constructor allow passing additional options (`backward`, `fake` and `label`) as the last argument.
  57. *
  58. * // Creates backward selection.
  59. * const selection = new DocumentSelection( range, { backward: true } );
  60. *
  61. * Fake selection does not render as browser native selection over selected elements and is hidden to the user.
  62. * This way, no native selection UI artifacts are displayed to the user and selection over elements can be
  63. * represented in other way, for example by applying proper CSS class.
  64. *
  65. * Additionally fake's selection label can be provided. It will be used to describe fake selection in DOM
  66. * (and be properly handled by screen readers).
  67. *
  68. * // Creates fake selection with label.
  69. * const selection = new DocumentSelection( range, { fake: true, label: 'foo' } );
  70. *
  71. * @param {module:engine/view/selection~Selectable} [selectable=null]
  72. * @param {Number|'before'|'end'|'after'|'on'|'in'} [placeOrOffset] Offset or place when selectable is an `Item`.
  73. * @param {Object} [options]
  74. * @param {Boolean} [options.backward] Sets this selection instance to be backward.
  75. * @param {Boolean} [options.fake] Sets this selection instance to be marked as `fake`.
  76. * @param {String} [options.label] Label for the fake selection.
  77. */
  78. constructor( selectable = null, placeOrOffset, options ) {
  79. /**
  80. * Selection is used internally (`DocumentSelection` is a proxy to that selection).
  81. *
  82. * @private
  83. * @member {module:engine/view/selection~Selection}
  84. */
  85. this._selection = new Selection();
  86. // Delegate change event to be fired on DocumentSelection instance.
  87. this._selection.delegate( 'change' ).to( this );
  88. // Set selection data.
  89. this._selection.setTo( selectable, placeOrOffset, options );
  90. }
  91. /**
  92. * Returns true if selection instance is marked as `fake`.
  93. *
  94. * @see #_setTo
  95. * @returns {Boolean}
  96. */
  97. get isFake() {
  98. return this._selection.isFake;
  99. }
  100. /**
  101. * Returns fake selection label.
  102. *
  103. * @see #_setTo
  104. * @returns {String}
  105. */
  106. get fakeSelectionLabel() {
  107. return this._selection.fakeSelectionLabel;
  108. }
  109. /**
  110. * Selection anchor. Anchor may be described as a position where the selection starts. Together with
  111. * {@link #focus focus} they define the direction of selection, which is important
  112. * when expanding/shrinking selection. Anchor is always the start or end of the most recent added range.
  113. * It may be a bit unintuitive when there are multiple ranges in selection.
  114. *
  115. * @see #focus
  116. * @type {module:engine/view/position~Position}
  117. */
  118. get anchor() {
  119. return this._selection.anchor;
  120. }
  121. /**
  122. * Selection focus. Focus is a position where the selection ends.
  123. *
  124. * @see #anchor
  125. * @type {module:engine/view/position~Position}
  126. */
  127. get focus() {
  128. return this._selection.focus;
  129. }
  130. /**
  131. * Returns whether the selection is collapsed. Selection is collapsed when there is exactly one range which is
  132. * collapsed.
  133. *
  134. * @type {Boolean}
  135. */
  136. get isCollapsed() {
  137. return this._selection.isCollapsed;
  138. }
  139. /**
  140. * Returns number of ranges in selection.
  141. *
  142. * @type {Number}
  143. */
  144. get rangeCount() {
  145. return this._selection.rangeCount;
  146. }
  147. /**
  148. * Specifies whether the {@link #focus} precedes {@link #anchor}.
  149. *
  150. * @type {Boolean}
  151. */
  152. get isBackward() {
  153. return this._selection.isBackward;
  154. }
  155. /**
  156. * {@link module:engine/view/editableelement~EditableElement EditableElement} instance that contains this selection, or `null`
  157. * if the selection is not inside an editable element.
  158. *
  159. * @type {module:engine/view/editableelement~EditableElement|null}
  160. */
  161. get editableElement() {
  162. return this._selection.editableElement;
  163. }
  164. /**
  165. * Used for the compatibility with the {@link module:engine/view/selection~Selection#isEqual} method.
  166. *
  167. * @protected
  168. */
  169. get _ranges() {
  170. return this._selection._ranges;
  171. }
  172. /**
  173. * Returns an iterable that contains copies of all ranges added to the selection.
  174. *
  175. * @returns {Iterable.<module:engine/view/range~Range>}
  176. */
  177. * getRanges() {
  178. yield* this._selection.getRanges();
  179. }
  180. /**
  181. * Returns copy of the first range in the selection. First range is the one which
  182. * {@link module:engine/view/range~Range#start start} position {@link module:engine/view/position~Position#isBefore is before} start
  183. * position of all other ranges (not to confuse with the first range added to the selection).
  184. * Returns `null` if no ranges are added to selection.
  185. *
  186. * @returns {module:engine/view/range~Range|null}
  187. */
  188. getFirstRange() {
  189. return this._selection.getFirstRange();
  190. }
  191. /**
  192. * Returns copy of the last range in the selection. Last range is the one which {@link module:engine/view/range~Range#end end}
  193. * position {@link module:engine/view/position~Position#isAfter is after} end position of all other ranges (not to confuse
  194. * with the last range added to the selection). Returns `null` if no ranges are added to selection.
  195. *
  196. * @returns {module:engine/view/range~Range|null}
  197. */
  198. getLastRange() {
  199. return this._selection.getLastRange();
  200. }
  201. /**
  202. * Returns copy of the first position in the selection. First position is the position that
  203. * {@link module:engine/view/position~Position#isBefore is before} any other position in the selection ranges.
  204. * Returns `null` if no ranges are added to selection.
  205. *
  206. * @returns {module:engine/view/position~Position|null}
  207. */
  208. getFirstPosition() {
  209. return this._selection.getFirstPosition();
  210. }
  211. /**
  212. * Returns copy of the last position in the selection. Last position is the position that
  213. * {@link module:engine/view/position~Position#isAfter is after} any other position in the selection ranges.
  214. * Returns `null` if no ranges are added to selection.
  215. *
  216. * @returns {module:engine/view/position~Position|null}
  217. */
  218. getLastPosition() {
  219. return this._selection.getLastPosition();
  220. }
  221. /**
  222. * Returns the selected element. {@link module:engine/view/element~Element Element} is considered as selected if there is only
  223. * one range in the selection, and that range contains exactly one element.
  224. * Returns `null` if there is no selected element.
  225. *
  226. * @returns {module:engine/view/element~Element|null}
  227. */
  228. getSelectedElement() {
  229. return this._selection.getSelectedElement();
  230. }
  231. /**
  232. * Checks whether, this selection is equal to given selection. Selections are equal if they have same directions,
  233. * same number of ranges and all ranges from one selection equal to a range from other selection.
  234. *
  235. * @param {module:engine/view/selection~Selection|module:engine/view/documentselection~DocumentSelection} otherSelection
  236. * Selection to compare with.
  237. * @returns {Boolean} `true` if selections are equal, `false` otherwise.
  238. */
  239. isEqual( otherSelection ) {
  240. return this._selection.isEqual( otherSelection );
  241. }
  242. /**
  243. * Checks whether this selection is similar to given selection. Selections are similar if they have same directions, same
  244. * number of ranges, and all {@link module:engine/view/range~Range#getTrimmed trimmed} ranges from one selection are
  245. * equal to any trimmed range from other selection.
  246. *
  247. * @param {module:engine/view/selection~Selection|module:engine/view/documentselection~DocumentSelection} otherSelection
  248. * Selection to compare with.
  249. * @returns {Boolean} `true` if selections are similar, `false` otherwise.
  250. */
  251. isSimilar( otherSelection ) {
  252. return this._selection.isSimilar( otherSelection );
  253. }
  254. /**
  255. * Checks whether object is of given type following the convention set by
  256. * {@link module:engine/view/node~Node#is `Node#is()`}.
  257. *
  258. * const selection = new DocumentSelection( ... );
  259. *
  260. * selection.is( 'selection' ); // true
  261. * selection.is( 'documentSelection' ); // true
  262. * selection.is( 'node' ); // false
  263. * selection.is( 'element' ); // false
  264. *
  265. * @param {String} type
  266. * @returns {Boolean}
  267. */
  268. is( type ) {
  269. return type == 'selection' || type == 'documentSelection';
  270. }
  271. /**
  272. * Sets this selection's ranges and direction to the specified location based on the given
  273. * {@link module:engine/view/selection~Selectable selectable}.
  274. *
  275. * // Sets selection to the given range.
  276. * const range = writer.createRange( start, end );
  277. * documentSelection._setTo( range );
  278. *
  279. * // Sets selection to given ranges.
  280. * const ranges = [ writer.createRange( start1, end2 ), writer.createRange( start2, end2 ) ];
  281. * documentSelection._setTo( range );
  282. *
  283. * // Sets selection to the other selection.
  284. * const otherSelection = writer.createSelection();
  285. * documentSelection._setTo( otherSelection );
  286. *
  287. * // Sets collapsed selection at the given position.
  288. * const position = writer.createPositionAt( root, offset );
  289. * documentSelection._setTo( position );
  290. *
  291. * // Sets collapsed selection at the position of given item and offset.
  292. * documentSelection._setTo( paragraph, offset );
  293. *
  294. * Creates a range inside an {@link module:engine/view/element~Element element} which starts before the first child of
  295. * that element and ends after the last child of that element.
  296. *
  297. * documentSelection._setTo( paragraph, 'in' );
  298. *
  299. * Creates a range on an {@link module:engine/view/item~Item item} which starts before the item and ends just after the item.
  300. *
  301. * documentSelection._setTo( paragraph, 'on' );
  302. *
  303. * // Clears selection. Removes all ranges.
  304. * documentSelection._setTo( null );
  305. *
  306. * `Selection#_setTo()` method allow passing additional options (`backward`, `fake` and `label`) as the last argument.
  307. *
  308. * // Sets selection as backward.
  309. * documentSelection._setTo( range, { backward: true } );
  310. *
  311. * Fake selection does not render as browser native selection over selected elements and is hidden to the user.
  312. * This way, no native selection UI artifacts are displayed to the user and selection over elements can be
  313. * represented in other way, for example by applying proper CSS class.
  314. *
  315. * Additionally fake's selection label can be provided. It will be used to des cribe fake selection in DOM
  316. * (and be properly handled by screen readers).
  317. *
  318. * // Creates fake selection with label.
  319. * documentSelection._setTo( range, { fake: true, label: 'foo' } );
  320. *
  321. * @protected
  322. * @fires change
  323. * @param {module:engine/view/selection~Selectable} selectable
  324. * @param {Number|'before'|'end'|'after'|'on'|'in'} [placeOrOffset] Sets place or offset of the selection.
  325. * @param {Object} [options]
  326. * @param {Boolean} [options.backward] Sets this selection instance to be backward.
  327. * @param {Boolean} [options.fake] Sets this selection instance to be marked as `fake`.
  328. * @param {String} [options.label] Label for the fake selection.
  329. */
  330. _setTo( selectable, placeOrOffset, options ) {
  331. this._selection.setTo( selectable, placeOrOffset, options );
  332. }
  333. /**
  334. * Moves {@link #focus} to the specified location.
  335. *
  336. * The location can be specified in the same form as {@link module:engine/view/view~View#createPositionAt view.createPositionAt()}
  337. * parameters.
  338. *
  339. * @protected
  340. * @fires change
  341. * @param {module:engine/view/item~Item|module:engine/view/position~Position} itemOrPosition
  342. * @param {Number|'end'|'before'|'after'} [offset] Offset or one of the flags. Used only when
  343. * first parameter is a {@link module:engine/view/item~Item view item}.
  344. */
  345. _setFocus( itemOrPosition, offset ) {
  346. this._selection.setFocus( itemOrPosition, offset );
  347. }
  348. /**
  349. * Fired whenever selection ranges are changed through {@link ~DocumentSelection Selection API}.
  350. *
  351. * @event change
  352. */
  353. }
  354. mix( DocumentSelection, EmitterMixin );