Fix transitions

Author: pomber

.gitpod.yml

@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run playground
+
+

package.json

@@ -19,7 +19,8 @@
   },
   "devDependencies": {
     "auto": "^10.18.7",
-    "lerna": "^4.0.0"
+    "lerna": "^4.0.0",
+    "prettier": "^2.5.1"
   },
   "repository": "code-hike/codehike",
   "author": "pomber <[email protected]>",

packages/mini-editor/src/editor-spring.tsx

@@ -60,28 +60,73 @@ function EditorSpring({
 function useStepSpring(
   step: EditorStep,
   springConfig: SpringConfig = defaultSpring
-) {
-  const [{ target, prev, next }, setState] = React.useState(
-    {
-      target: 0,
-      prev: step,
-      next: step,
-    }
-  )
+): { prev: EditorStep; next: EditorStep; t: number } {
+  const [{ target, steps, index }, setState] =
+    React.useState<StepSpringState>({
+      target: 2,
+      steps: [step, step, step],
+      index: 0,
+    })
 
   React.useEffect(() => {
-    if (next != step) {
-      setState(s => ({
-        target: s.target + 1,
-        prev: next,
-        next: step,
-      }))
+    const lastStep = steps[steps.length - 1]
+    if (lastStep != step) {
+      setState(s => updateStepSpring(s, step, progress))
     }
   }, [step])
 
   const [progress] = useSpring(target, springConfig)
 
-  const t = progress % 1
+  const trioProgress = progress - index
+
+  const result =
+    trioProgress <= 1
+      ? {
+          prev: steps[0],
+          next: steps[1],
+          t: trioProgress,
+        }
+      : {
+          prev: steps[1],
+          next: steps[2],
+          t: trioProgress - 1,
+        }
+
+  return result
+}
+
+type StepSpringState = {
+  target: number
+  steps: [EditorStep, EditorStep, EditorStep]
+  index: number
+}
 
-  return { prev, next, t: t || 1 }
+function updateStepSpring(
+  state: StepSpringState,
+  newStep: EditorStep,
+  progress: number
+): StepSpringState {
+  const { steps, target, index } = state
+  const stepsClone =
+    steps.slice() as StepSpringState["steps"]
+
+  const trioProgress = progress - index
+
+  if (trioProgress < 1) {
+    stepsClone[2] = newStep
+    return {
+      ...state,
+      steps: stepsClone,
+    }
+  } else {
+    stepsClone[0] = steps[1]
+    stepsClone[1] = steps[2]
+    stepsClone[2] = newStep
+    return {
+      ...state,
+      steps: stepsClone,
+      target: target + 1,
+      index: index + 1,
+    }
+  }
 }

packages/smooth-code/src/code-spring.tsx

@@ -44,23 +44,70 @@ function useStepSpring(
   step: CodeStep,
   springConfig: SpringConfig = defaultSpring
 ): { tween: FullTween<CodeStep>; t: number } {
-  const [{ target, tween }, setState] = React.useState({
-    target: 0,
-    tween: { prev: step, next: step },
-  })
+  const [{ target, steps, index }, setState] =
+    React.useState<StepSpringState>({
+      target: 2,
+      steps: [step, step, step],
+      index: 0,
+    })
 
   React.useEffect(() => {
-    if (tween.next != step) {
-      setState(s => ({
-        target: s.target + 1,
-        tween: { prev: tween.next, next: step },
-      }))
+    const lastStep = steps[steps.length - 1]
+    if (lastStep != step) {
+      setState(s => updateStepSpring(s, step, progress))
     }
   }, [step])
 
   const [progress] = useSpring(target, springConfig)
 
-  const t = progress % 1
+  const trioProgress = progress - index
 
-  return { tween, t: t || 1 }
+  const result =
+    trioProgress <= 1
+      ? {
+          tween: { prev: steps[0], next: steps[1] },
+          t: trioProgress,
+        }
+      : {
+          tween: { prev: steps[1], next: steps[2] },
+          t: trioProgress - 1,
+        }
+
+  return result
+}
+
+type StepSpringState = {
+  target: number
+  steps: [CodeStep, CodeStep, CodeStep]
+  index: number
+}
+
+function updateStepSpring(
+  state: StepSpringState,
+  newStep: CodeStep,
+  progress: number
+): StepSpringState {
+  const { steps, target, index } = state
+  const stepsClone =
+    steps.slice() as StepSpringState["steps"]
+
+  const trioProgress = progress - index
+
+  if (trioProgress < 1) {
+    stepsClone[2] = newStep
+    return {
+      ...state,
+      steps: stepsClone,
+    }
+  } else {
+    stepsClone[0] = steps[1]
+    stepsClone[1] = steps[2]
+    stepsClone[2] = newStep
+    return {
+      ...state,
+      steps: stepsClone,
+      target: target + 1,
+      index: index + 1,
+    }
+  }
 }

yarn.lock

@@ -15110,6 +15110,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+
 prettier@~2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"