Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

[Stepping] aligns line every time #5138

@jasonLaster

Description

@jasonLaster

When we refactored scrolling last month, we removed a check that used to ensure that we'd only scroll if the line were not visible. We should bring that back because now it's very jump 🏃

STR:

  1. go to todomvc
  2. add a breakpoint in todoview.js#33
  3. add a todo in the app
  4. start stepping

notice how it always scrolls!

GIST

diff --git a/src/utils/editor/index.js b/src/utils/editor/index.js
index 661b01b..9e2d5d8 100644
--- a/src/utils/editor/index.js
+++ b/src/utils/editor/index.js
@@ -91,7 +91,26 @@ export function scrollToColumn(codeMirror: any, line: number, column: number) {
   const centeredX = Math.max(left - scroller.offsetWidth / 2, 0);
   const centeredY = Math.max(top - scroller.offsetHeight / 2, 0);
 
-  codeMirror.scrollTo(centeredX, centeredY);
+  if (!isVisible(codeMirror, line, column)) {
+    // we probably also want to check to see if the column is visible
+    codeMirror.scrollTo(centeredX, centeredY);
+  }
+}
+
+// this approach comes from alignLine
+// we could also check the top / left we have above or some other strategy...
+function isVisible(codeMirror, line, column) {
+  const editorClientRect = codeMirror.getWrapperElement().getBoundingClientRect();
+
+  const from = codeMirror.lineAtHeight(editorClientRect.top, "page");
+  const to = codeMirror.lineAtHeight(
+    editorClientRect.height + editorClientRect.top,
+    "page"
+  );
+
+  const isLineVisible = line >= to && line <= from;
+  const isColumnVisible = false;
+  return isLineVisible && isColumnVisible;
 }
 
 export function toSourceLocation(

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions