scrolling.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. import { Pos } from "../line/pos.js"
  2. import { cursorCoords, displayHeight, displayWidth, estimateCoords, paddingTop, paddingVert, scrollGap, textHeight } from "../measurement/position_measurement.js"
  3. import { gecko, phantom } from "../util/browser.js"
  4. import { elt } from "../util/dom.js"
  5. import { signalDOMEvent } from "../util/event.js"
  6. import { startWorker } from "./highlight_worker.js"
  7. import { alignHorizontally } from "./line_numbers.js"
  8. import { updateDisplaySimple } from "./update_display.js"
  9. // SCROLLING THINGS INTO VIEW
  10. // If an editor sits on the top or bottom of the window, partially
  11. // scrolled out of view, this ensures that the cursor is visible.
  12. export function maybeScrollWindow(cm, rect) {
  13. if (signalDOMEvent(cm, "scrollCursorIntoView")) return
  14. let display = cm.display, box = display.sizer.getBoundingClientRect(), doScroll = null
  15. if (rect.top + box.top < 0) doScroll = true
  16. else if (rect.bottom + box.top > (window.innerHeight || document.documentElement.clientHeight)) doScroll = false
  17. if (doScroll != null && !phantom) {
  18. let scrollNode = elt("div", "\u200b", null, `position: absolute;
  19. top: ${rect.top - display.viewOffset - paddingTop(cm.display)}px;
  20. height: ${rect.bottom - rect.top + scrollGap(cm) + display.barHeight}px;
  21. left: ${rect.left}px; width: ${Math.max(2, rect.right - rect.left)}px;`)
  22. cm.display.lineSpace.appendChild(scrollNode)
  23. scrollNode.scrollIntoView(doScroll)
  24. cm.display.lineSpace.removeChild(scrollNode)
  25. }
  26. }
  27. // Scroll a given position into view (immediately), verifying that
  28. // it actually became visible (as line heights are accurately
  29. // measured, the position of something may 'drift' during drawing).
  30. export function scrollPosIntoView(cm, pos, end, margin) {
  31. if (margin == null) margin = 0
  32. let rect
  33. if (!cm.options.lineWrapping && pos == end) {
  34. // Set pos and end to the cursor positions around the character pos sticks to
  35. // If pos.sticky == "before", that is around pos.ch - 1, otherwise around pos.ch
  36. // If pos == Pos(_, 0, "before"), pos and end are unchanged
  37. pos = pos.ch ? Pos(pos.line, pos.sticky == "before" ? pos.ch - 1 : pos.ch, "after") : pos
  38. end = pos.sticky == "before" ? Pos(pos.line, pos.ch + 1, "before") : pos
  39. }
  40. for (let limit = 0; limit < 5; limit++) {
  41. let changed = false
  42. let coords = cursorCoords(cm, pos)
  43. let endCoords = !end || end == pos ? coords : cursorCoords(cm, end)
  44. rect = {left: Math.min(coords.left, endCoords.left),
  45. top: Math.min(coords.top, endCoords.top) - margin,
  46. right: Math.max(coords.left, endCoords.left),
  47. bottom: Math.max(coords.bottom, endCoords.bottom) + margin}
  48. let scrollPos = calculateScrollPos(cm, rect)
  49. let startTop = cm.doc.scrollTop, startLeft = cm.doc.scrollLeft
  50. if (scrollPos.scrollTop != null) {
  51. updateScrollTop(cm, scrollPos.scrollTop)
  52. if (Math.abs(cm.doc.scrollTop - startTop) > 1) changed = true
  53. }
  54. if (scrollPos.scrollLeft != null) {
  55. setScrollLeft(cm, scrollPos.scrollLeft)
  56. if (Math.abs(cm.doc.scrollLeft - startLeft) > 1) changed = true
  57. }
  58. if (!changed) break
  59. }
  60. return rect
  61. }
  62. // Scroll a given set of coordinates into view (immediately).
  63. export function scrollIntoView(cm, rect) {
  64. let scrollPos = calculateScrollPos(cm, rect)
  65. if (scrollPos.scrollTop != null) updateScrollTop(cm, scrollPos.scrollTop)
  66. if (scrollPos.scrollLeft != null) setScrollLeft(cm, scrollPos.scrollLeft)
  67. }
  68. // Calculate a new scroll position needed to scroll the given
  69. // rectangle into view. Returns an object with scrollTop and
  70. // scrollLeft properties. When these are undefined, the
  71. // vertical/horizontal position does not need to be adjusted.
  72. function calculateScrollPos(cm, rect) {
  73. let display = cm.display, snapMargin = textHeight(cm.display)
  74. if (rect.top < 0) rect.top = 0
  75. let screentop = cm.curOp && cm.curOp.scrollTop != null ? cm.curOp.scrollTop : display.scroller.scrollTop
  76. let screen = displayHeight(cm), result = {}
  77. if (rect.bottom - rect.top > screen) rect.bottom = rect.top + screen
  78. let docBottom = cm.doc.height + paddingVert(display)
  79. let atTop = rect.top < snapMargin, atBottom = rect.bottom > docBottom - snapMargin
  80. if (rect.top < screentop) {
  81. result.scrollTop = atTop ? 0 : rect.top
  82. } else if (rect.bottom > screentop + screen) {
  83. let newTop = Math.min(rect.top, (atBottom ? docBottom : rect.bottom) - screen)
  84. if (newTop != screentop) result.scrollTop = newTop
  85. }
  86. let screenleft = cm.curOp && cm.curOp.scrollLeft != null ? cm.curOp.scrollLeft : display.scroller.scrollLeft
  87. let screenw = displayWidth(cm) - (cm.options.fixedGutter ? display.gutters.offsetWidth : 0)
  88. let tooWide = rect.right - rect.left > screenw
  89. if (tooWide) rect.right = rect.left + screenw
  90. if (rect.left < 10)
  91. result.scrollLeft = 0
  92. else if (rect.left < screenleft)
  93. result.scrollLeft = Math.max(0, rect.left - (tooWide ? 0 : 10))
  94. else if (rect.right > screenw + screenleft - 3)
  95. result.scrollLeft = rect.right + (tooWide ? 0 : 10) - screenw
  96. return result
  97. }
  98. // Store a relative adjustment to the scroll position in the current
  99. // operation (to be applied when the operation finishes).
  100. export function addToScrollTop(cm, top) {
  101. if (top == null) return
  102. resolveScrollToPos(cm)
  103. cm.curOp.scrollTop = (cm.curOp.scrollTop == null ? cm.doc.scrollTop : cm.curOp.scrollTop) + top
  104. }
  105. // Make sure that at the end of the operation the current cursor is
  106. // shown.
  107. export function ensureCursorVisible(cm) {
  108. resolveScrollToPos(cm)
  109. let cur = cm.getCursor()
  110. cm.curOp.scrollToPos = {from: cur, to: cur, margin: cm.options.cursorScrollMargin}
  111. }
  112. export function scrollToCoords(cm, x, y) {
  113. if (x != null || y != null) resolveScrollToPos(cm)
  114. if (x != null) cm.curOp.scrollLeft = x
  115. if (y != null) cm.curOp.scrollTop = y
  116. }
  117. export function scrollToRange(cm, range) {
  118. resolveScrollToPos(cm)
  119. cm.curOp.scrollToPos = range
  120. }
  121. // When an operation has its scrollToPos property set, and another
  122. // scroll action is applied before the end of the operation, this
  123. // 'simulates' scrolling that position into view in a cheap way, so
  124. // that the effect of intermediate scroll commands is not ignored.
  125. function resolveScrollToPos(cm) {
  126. let range = cm.curOp.scrollToPos
  127. if (range) {
  128. cm.curOp.scrollToPos = null
  129. let from = estimateCoords(cm, range.from), to = estimateCoords(cm, range.to)
  130. scrollToCoordsRange(cm, from, to, range.margin)
  131. }
  132. }
  133. export function scrollToCoordsRange(cm, from, to, margin) {
  134. let sPos = calculateScrollPos(cm, {
  135. left: Math.min(from.left, to.left),
  136. top: Math.min(from.top, to.top) - margin,
  137. right: Math.max(from.right, to.right),
  138. bottom: Math.max(from.bottom, to.bottom) + margin
  139. })
  140. scrollToCoords(cm, sPos.scrollLeft, sPos.scrollTop)
  141. }
  142. // Sync the scrollable area and scrollbars, ensure the viewport
  143. // covers the visible area.
  144. export function updateScrollTop(cm, val) {
  145. if (Math.abs(cm.doc.scrollTop - val) < 2) return
  146. if (!gecko) updateDisplaySimple(cm, {top: val})
  147. setScrollTop(cm, val, true)
  148. if (gecko) updateDisplaySimple(cm)
  149. startWorker(cm, 100)
  150. }
  151. export function setScrollTop(cm, val, forceScroll) {
  152. val = Math.min(cm.display.scroller.scrollHeight - cm.display.scroller.clientHeight, val)
  153. if (cm.display.scroller.scrollTop == val && !forceScroll) return
  154. cm.doc.scrollTop = val
  155. cm.display.scrollbars.setScrollTop(val)
  156. if (cm.display.scroller.scrollTop != val) cm.display.scroller.scrollTop = val
  157. }
  158. // Sync scroller and scrollbar, ensure the gutter elements are
  159. // aligned.
  160. export function setScrollLeft(cm, val, isScroller, forceScroll) {
  161. val = Math.min(val, cm.display.scroller.scrollWidth - cm.display.scroller.clientWidth)
  162. if ((isScroller ? val == cm.doc.scrollLeft : Math.abs(cm.doc.scrollLeft - val) < 2) && !forceScroll) return
  163. cm.doc.scrollLeft = val
  164. alignHorizontally(cm)
  165. if (cm.display.scroller.scrollLeft != val) cm.display.scroller.scrollLeft = val
  166. cm.display.scrollbars.setScrollLeft(val)
  167. }