update scroll-into-view-if-needed and do not scroll body (#2804) (#2805)

scalableminds · Jun 27, 2018 · e9449e7 · e9449e7
1 parent f844866
commit e9449e7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/app/assets/javascripts/oxalis/view/right-menu/comment_tab/comment.js b/app/assets/javascripts/oxalis/view/right-menu/comment_tab/comment.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import { scrollIntoViewIfNeeded } from "scroll-into-view-if-needed";
+import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
 import classNames from "classnames";
 import Store from "oxalis/store";
 import { setActiveNodeAction } from "oxalis/model/actions/skeletontracing_actions";
@@ -25,7 +25,11 @@ class Comment extends React.PureComponent<Props> {
   ensureVisible() {
     if (this.props.isActive) {
       // use polyfill as so far only chrome supports this functionality
-      scrollIntoViewIfNeeded(this.comment, { centerIfNeeded: true });
+      scrollIntoViewIfNeeded(this.comment, {
+        block: "center",
+        scrollMode: "if-needed",
+        boundary: document.body,
+      });
     }
   }
 

diff --git a/app/assets/javascripts/oxalis/view/right-menu/comment_tab/tree_comment_list.js b/app/assets/javascripts/oxalis/view/right-menu/comment_tab/tree_comment_list.js
@@ -9,7 +9,7 @@ import classNames from "classnames";
 import Comment from "oxalis/view/right-menu/comment_tab/comment";
 import Utils from "libs/utils";
 import { enforceSkeletonTracing } from "oxalis/model/accessors/skeletontracing_accessor";
-import { scrollIntoViewIfNeeded } from "scroll-into-view-if-needed";
+import scrollIntoViewIfNeeded from "scroll-into-view-if-needed";
 import type { OxalisState, TreeType, SkeletonTracingType, CommentType } from "oxalis/store";
 
 type OwnProps = {
@@ -47,7 +47,11 @@ class TreeCommentList extends React.PureComponent<TreeCommentListProps, State> {
       this.props.tree.treeId === this.props.skeletonTracing.activeTreeId &&
       !this.activeNodeHasComment()
     ) {
-      scrollIntoViewIfNeeded(this.treeDomElement, { centerIfNeeded: true });
+      scrollIntoViewIfNeeded(this.treeDomElement, {
+        block: "center",
+        scrollMode: "if-needed",
+        boundary: document.body,
+      });
     }
   }
 

diff --git a/package.json b/package.json
@@ -133,7 +133,7 @@
     "react-virtualized": "^9.18.5",
     "redux": "^3.6.0",
     "redux-saga": "^0.14.3",
-    "scroll-into-view-if-needed": "1.4.1",
+    "scroll-into-view-if-needed": "2.2.8",
     "shelljs": "^0.8.2",
     "stats.js": "^1.0.0",
     "three": "^0.87.0",

diff --git a/yarn.lock b/yarn.lock
@@ -9069,9 +9069,9 @@ scoped-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
 
-scroll-into-view-if-needed@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-1.4.1.tgz#763580091fb8e0bd4dc2d68b475d755f66574a0e"
+scroll-into-view-if-needed@2.2.8:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.8.tgz#c22ffbddce5c8a31949ab3e01c27a6c29ba7b979"
 
 semver-compare@^1.0.0:
   version "1.0.0"