Merge pull request #61 from code-hike/fix-line-jumps

Fix line jumps
code-hike · Apr 8, 2021 · 8e3a417 · 8e3a417
2 parents ab7dc6a + e6f2135
commit 8e3a417
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 19 deletions.
diff --git a/packages/mini-editor/src/code.tsx b/packages/mini-editor/src/code.tsx
@@ -59,7 +59,10 @@ export function Code({
     <pre
       ref={ref}
       className={`language-${language}`}
-      style={{ opacity: dimensions ? 1 : 0 }}
+      style={{
+        opacity: dimensions ? 1 : 0,
+        overflow: dimensions ? undefined : "hidden", // avoid scrollbars when measuring
+      }}
     >
       <code>
         {dimensions ? (

diff --git a/packages/smooth-lines/src/index.tsx b/packages/smooth-lines/src/index.tsx
@@ -38,7 +38,10 @@ function SmoothLines({
   minZoom = 0,
   maxZoom = 1.2,
 }: Props) {
-  const lines = useLineTransitions(prevLines, nextLines)
+  const { lines, verticalInterval } = useLineTransitions(
+    prevLines,
+    nextLines
+  )
 
   const prevFocusKeys = prevFocus.map(
     index => prevLines[index]?.key
@@ -88,7 +91,13 @@ function SmoothLines({
 
   const zoom = tweenProp(prevZoom, nextZoom, progress)
   const dx = tweenProp(prevDX, nextDX, progress)
-  const dy = tweenProp(prevDY, nextDY, progress)
+  const dy = tweenProp(
+    prevDY,
+    nextDY,
+    progress,
+    verticalInterval
+  )
+
   const focusHeight = tweenProp(
     prevContentHeight,
     nextContentHeight,
@@ -264,12 +273,13 @@ function Content({
 function tweenProp(
   start: number,
   end: number,
-  progress: number
+  progress: number,
+  interval: [number, number] = [0, 1]
 ) {
   return tween(
     {
       fixed: false,
-      interval: [0, 1],
+      interval,
       extremes: [start, end],
       ease: easing.easeInOutCubic,
     },

diff --git a/packages/smooth-lines/src/line-transitions.ts b/packages/smooth-lines/src/line-transitions.ts
@@ -80,9 +80,15 @@ function getLineTransitions(
   const enterCount = enterIndex
   const exitCount = exitIndex
 
-  return linesData.map(lineData =>
-    getLineTransition(lineData, enterCount, exitCount)
-  )
+  return {
+    lines: linesData.map(lineData =>
+      getLineTransition(lineData, enterCount, exitCount)
+    ),
+    verticalInterval: verticalInterval(
+      enterCount,
+      exitCount
+    ),
+  }
 }
 
 function getLineTransition(
@@ -153,6 +159,7 @@ function getLineTransition(
       fixed: false,
       extremes: [prevIndex, nextIndex],
       interval: [startY, endY],
+      ease: easing.easeInOutCubic,
     },
     tweenX: { fixed: true, value: 0 },
   }
@@ -165,7 +172,7 @@ function sortUniqueConcat(a: number[], b: number[]) {
 function verticalInterval(
   enterCount: number,
   exitCount: number
-) {
+): [number, number] {
   if (enterCount <= 0 && exitCount <= 0) return [0, 1]
   if (enterCount <= 0 && exitCount >= 1) return [0.33, 1]
   if (enterCount >= 1 && exitCount <= 0) return [0, 0.67]

diff --git a/packages/storybook/src/mini-editor-hike.story.js b/packages/storybook/src/mini-editor-hike.story.js
@@ -349,6 +349,7 @@ export const x = () => {
           {...xprops}
           progress={progress}
           backward={backward}
+          minColumns={50}
         />
       )}
     </WithProgress>
@@ -358,20 +359,70 @@ export const x = () => {
 const xprops = {
   steps: [
     {
-      code:
-        "<html>\n  <body>\n    <style>\n      h1 {\n        border: 4px solid black;\n        padding: 20px 7px;\n        margin: 0;\n      }\n    </style>\n    <h1>Lorem ipsum dolor sit amet</h1>\n  </body>\n</html>\n",
+      code: `const app = <h1 style={{ color: 'blue' }}>Hello World</h1>
+
+ReactDOM.render(app, document.getElementById('root'))`,
+      focus: "1",
     },
     {
-      code:
-        "<html>\n  <body>\n    <style>\n      h1 {\n        border: 4px solid black;\n        padding: 20px 7px;\n        margin: 0;\n        filter: blur(3px);\n      }\n    </style>\n    <h1>Lorem ipsum dolor sit amet</h1>\n  </body>\n</html>\n",
-      focus: "4,8,9",
+      code: `function MyComponent() {
+  return (
+    <div>
+      <button>Hello</button>
+      <button>Hello</button>
+      <button>Hello</button>
+      <button>Hello</button>
+      <button>Hello</button>
+    </div>
+  )
+}
+
+const app = <h1 style={{ color: 'blue' }}>Hello World</h1>
+
+ReactDOM.render(app, document.getElementById('root'))`,
+      focus: "1:7",
     },
     {
-      code:
-        "<html>\n  <body>\n    <style>\n      h1 {\n        border: 4px solid black;\n        padding: 20px 7px;\n        margin: 0;\n        filter: drop-shadow(\n          2px 2px 2px blue\n        );\n      }\n    </style>\n    <h1>Lorem ipsum dolor sit amet</h1>\n  </body>\n</html>\n",
-      focus: "4,8:11",
+      code: `function MyComponent() {
+  return (
+    <div>
+      <button>Hello</button>
+      <button>Hello</button>
+      <button>Hello</button>
+      <button>Hello</button>
+      <button>Hello</button>
+    </div>
+  )
+}
+
+const app = <h1 style={{ color: 'blue' }}>Hello World</h1>
+
+ReactDOM.render(app, document.getElementById('root'))`,
+      focus: "1:7",
+    },
+    {
+      code: `function MyComponent() {
+  return (
+    <div>
+      <button>Bye</button>
+      <button>Bye</button>
+      <button>Bye</button>
+    </div>
+  )
+}
+
+const app = <h1 style={{ color: 'blue' }}>Hello World</h1>
+
+ReactDOM.render(app, document.getElementById('root'))`,
+      focus: "7",
+    },
+    {
+      code: `const app = <h1 style={{ color: 'blue' }}>Hello World</h1>
+
+ReactDOM.render(app, document.getElementById('root'))`,
+      focus: "1",
     },
   ],
-  lang: "html",
-  file: "index.html",
+  lang: "jsx",
+  file: "index.js",
 }