Skip to content

Commit 8e3a417

Browse files
pomberpomber
authored
Merge pull request #61 from code-hike/fix-line-jumps
Fix line jumps
2 parents ab7dc6a + e6f2135 commit 8e3a417

File tree

4 files changed

+90
-19
lines changed

4 files changed

+90
-19
lines changed

‎packages/mini-editor/src/code.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,10 @@ export function Code({
5959
<pre
6060
ref={ref}
6161
className={`language-${language}`}
62-
style={{ opacity: dimensions ? 1 : 0 }}
62+
style={{
63+
opacity: dimensions ? 1 : 0,
64+
overflow: dimensions ? undefined : "hidden", // avoid scrollbars when measuring
65+
}}
6366
>
6467
<code>
6568
{dimensions ? (

‎packages/smooth-lines/src/index.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,10 @@ function SmoothLines({
3838
minZoom = 0,
3939
maxZoom = 1.2,
4040
}: Props) {
41-
const lines = useLineTransitions(prevLines, nextLines)
41+
const { lines, verticalInterval } = useLineTransitions(
42+
prevLines,
43+
nextLines
44+
)
4245

4346
const prevFocusKeys = prevFocus.map(
4447
index => prevLines[index]?.key
@@ -88,7 +91,13 @@ function SmoothLines({
8891

8992
const zoom = tweenProp(prevZoom, nextZoom, progress)
9093
const dx = tweenProp(prevDX, nextDX, progress)
91-
const dy = tweenProp(prevDY, nextDY, progress)
94+
const dy = tweenProp(
95+
prevDY,
96+
nextDY,
97+
progress,
98+
verticalInterval
99+
)
100+
92101
const focusHeight = tweenProp(
93102
prevContentHeight,
94103
nextContentHeight,
@@ -264,12 +273,13 @@ function Content({
264273
function tweenProp(
265274
start: number,
266275
end: number,
267-
progress: number
276+
progress: number,
277+
interval: [number, number] = [0, 1]
268278
) {
269279
return tween(
270280
{
271281
fixed: false,
272-
interval: [0, 1],
282+
interval,
273283
extremes: [start, end],
274284
ease: easing.easeInOutCubic,
275285
},

‎packages/smooth-lines/src/line-transitions.ts

+11-4
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,15 @@ function getLineTransitions(
8080
const enterCount = enterIndex
8181
const exitCount = exitIndex
8282

83-
return linesData.map(lineData =>
84-
getLineTransition(lineData, enterCount, exitCount)
85-
)
83+
return {
84+
lines: linesData.map(lineData =>
85+
getLineTransition(lineData, enterCount, exitCount)
86+
),
87+
verticalInterval: verticalInterval(
88+
enterCount,
89+
exitCount
90+
),
91+
}
8692
}
8793

8894
function getLineTransition(
@@ -153,6 +159,7 @@ function getLineTransition(
153159
fixed: false,
154160
extremes: [prevIndex, nextIndex],
155161
interval: [startY, endY],
162+
ease: easing.easeInOutCubic,
156163
},
157164
tweenX: { fixed: true, value: 0 },
158165
}
@@ -165,7 +172,7 @@ function sortUniqueConcat(a: number[], b: number[]) {
165172
function verticalInterval(
166173
enterCount: number,
167174
exitCount: number
168-
) {
175+
): [number, number] {
169176
if (enterCount <= 0 && exitCount <= 0) return [0, 1]
170177
if (enterCount <= 0 && exitCount >= 1) return [0.33, 1]
171178
if (enterCount >= 1 && exitCount <= 0) return [0, 0.67]

‎packages/storybook/src/mini-editor-hike.story.js

+61-10
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,7 @@ export const x = () => {
349349
{...xprops}
350350
progress={progress}
351351
backward={backward}
352+
minColumns={50}
352353
/>
353354
)}
354355
</WithProgress>
@@ -358,20 +359,70 @@ export const x = () => {
358359
const xprops = {
359360
steps: [
360361
{
361-
code:
362-
"<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",
362+
code: `const app = <h1 style={{ color: 'blue' }}>Hello World</h1>
363+
364+
ReactDOM.render(app, document.getElementById('root'))`,
365+
focus: "1",
363366
},
364367
{
365-
code:
366-
"<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",
367-
focus: "4,8,9",
368+
code: `function MyComponent() {
369+
return (
370+
<div>
371+
<button>Hello</button>
372+
<button>Hello</button>
373+
<button>Hello</button>
374+
<button>Hello</button>
375+
<button>Hello</button>
376+
</div>
377+
)
378+
}
379+
380+
const app = <h1 style={{ color: 'blue' }}>Hello World</h1>
381+
382+
ReactDOM.render(app, document.getElementById('root'))`,
383+
focus: "1:7",
368384
},
369385
{
370-
code:
371-
"<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",
372-
focus: "4,8:11",
386+
code: `function MyComponent() {
387+
return (
388+
<div>
389+
<button>Hello</button>
390+
<button>Hello</button>
391+
<button>Hello</button>
392+
<button>Hello</button>
393+
<button>Hello</button>
394+
</div>
395+
)
396+
}
397+
398+
const app = <h1 style={{ color: 'blue' }}>Hello World</h1>
399+
400+
ReactDOM.render(app, document.getElementById('root'))`,
401+
focus: "1:7",
402+
},
403+
{
404+
code: `function MyComponent() {
405+
return (
406+
<div>
407+
<button>Bye</button>
408+
<button>Bye</button>
409+
<button>Bye</button>
410+
</div>
411+
)
412+
}
413+
414+
const app = <h1 style={{ color: 'blue' }}>Hello World</h1>
415+
416+
ReactDOM.render(app, document.getElementById('root'))`,
417+
focus: "7",
418+
},
419+
{
420+
code: `const app = <h1 style={{ color: 'blue' }}>Hello World</h1>
421+
422+
ReactDOM.render(app, document.getElementById('root'))`,
423+
focus: "1",
373424
},
374425
],
375-
lang: "html",
376-
file: "index.html",
426+
lang: "jsx",
427+
file: "index.js",
377428
}

0 commit comments

Comments
 (0)