Merge pull request #3105 from overleaf/ta-outline-go-to-pdf

[Outline] Go To PDF on Double-Click

GitOrigin-RevId: 0be4207eb26d0712814097b71906b3c9c37d4790

services/web/frontend/js/ide/editor/EditorManager.js

@@ -128,7 +128,8 @@ export default (EditorManager = (function() {
       return this.$scope.$broadcast(
         'editor:gotoLine',
         options.gotoLine,
-        options.gotoColumn
+        options.gotoColumn,
+        options.syncToPdf
       )
     }
 

services/web/frontend/js/ide/editor/directives/aceEditor/cursor-position/CursorPositionManager.js

@@ -30,13 +30,17 @@ export default (CursorPositionManager = class CursorPositionManager {
 
     this.$scope.$on('changeEditor', this.storePositionAndLine)
 
-    this.$scope.$on(`${this.$scope.name}:gotoLine`, (e, line, column) => {
-      if (line != null) {
-        return setTimeout(() => {
-          return this.adapter.gotoLine(line, column)
-        }, 10)
+    this.$scope.$on(
+      `${this.$scope.name}:gotoLine`,
+      (e, line, column, syncToPdf) => {
+        if (line != null) {
+          return setTimeout(() => {
+            this.adapter.gotoLine(line, column)
+            if (syncToPdf) this.onSyncToPdf()
+          }, 10)
+        }
       }
-    }) // Hack: Must happen after @gotoStoredPosition
+    ) // Hack: Must happen after @gotoStoredPosition
 
     this.$scope.$on(`${this.$scope.name}:gotoOffset`, (e, offset) => {
       if (offset != null) {

services/web/frontend/js/ide/outline/OutlineManager.js

@@ -94,9 +94,9 @@ class OutlineManager {
     this.broadcastChangeEvent()
   }
 
-  jumpToLine(line) {
+  jumpToLine(line, syncToPdf) {
     this.ignoreNextScroll = true
-    this.ide.editorManager.jumpToLine({ gotoLine: line })
+    this.ide.editorManager.jumpToLine({ gotoLine: line, syncToPdf })
   }
 
   broadcastChangeEvent() {

services/web/frontend/js/ide/outline/components/OutlineItem.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, createRef, useRef } from 'react'
 import PropTypes from 'prop-types'
+import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
 import classNames from 'classnames'
 import OutlineList from './OutlineList'
 
@@ -39,7 +40,11 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
   }
 
   function handleOutlineItemLinkClick() {
-    jumpToLine(outlineItem.line)
+    jumpToLine(outlineItem.line, false)
+  }
+
+  function handleOutlineItemLinkDoubleClick() {
+    jumpToLine(outlineItem.line, true)
   }
 
   useEffect(
@@ -50,7 +55,8 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
       isHighlightedRef.current = isNowHighlighted
 
       if (!wasHighlighted && isNowHighlighted) {
-        titleElementRef.current.scrollIntoView({
+        scrollIntoViewIfNeeded(titleElementRef.current, {
+          scrollMode: 'if-needed',
           block: 'center'
         })
       }
@@ -72,6 +78,7 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
         <button
           className={itemLinkClasses}
           onClick={handleOutlineItemLinkClick}
+          onDoubleClick={handleOutlineItemLinkDoubleClick}
           ref={titleElementRef}
         >
           {outlineItem.title}

services/web/frontend/js/ide/outline/controllers/OutlineController.js

@@ -17,8 +17,8 @@ App.controller('OutlineController', function($scope, ide, eventTracking) {
     })
   }
 
-  $scope.jumpToLine = lineNo => {
-    ide.outlineManager.jumpToLine(lineNo)
+  $scope.jumpToLine = (lineNo, syncToPdf) => {
+    ide.outlineManager.jumpToLine(lineNo, syncToPdf)
     eventTracking.sendMB('outline-jump-to-line')
   }
 

services/web/package-lock.json

@@ -7174,6 +7174,11 @@
         }
       }
     },
+    "compute-scroll-into-view": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.14.tgz",
+      "integrity": "sha512-mKDjINe3tc6hGelUMNDzuhorIUZ7kS7BwyY0r2wQd2HOH2tRuJykiC06iSEX8y1TuhNzvz4GcJnK16mM2J1NMQ=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -21733,6 +21738,14 @@
         }
       }
     },
+    "scroll-into-view-if-needed": {
+      "version": "2.2.25",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.25.tgz",
+      "integrity": "sha512-C8RKJPq9lK7eubwGpLbUkw3lklcG3Ndjmea2PyauzrA0i4DPlzAmVMGxaZrBFqCrVLfvJmP80IyHnv4jxvg1OQ==",
+      "requires": {
+        "compute-scroll-into-view": "^1.0.14"
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",

services/web/package.json

@@ -131,6 +131,7 @@
     "rolling-rate-limiter": "git+https://github.com/ShaneKilkelly/rolling-rate-limiter.git#master",
     "sanitize-html": "^1.27.1",
     "sanitizer": "0.1.1",
+    "scroll-into-view-if-needed": "^2.2.25",
     "settings-sharelatex": "^1.1.0",
     "temp": "^0.8.3",
     "underscore": "1.6.0",