From 8628c345ac1298bffc9b7fbfbec64deedd1ed070 Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Tue, 6 Apr 2021 11:38:42 -0300
Subject: [PATCH] Add horizontal center prop

---
 packages/mini-editor/src/code.tsx                | 4 +++-
 packages/mini-editor/src/mini-editor-hike.tsx    | 6 ++++++
 packages/smooth-lines/src/index.tsx              | 5 ++++-
 packages/storybook/src/mini-editor-hike.story.js | 1 +
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/mini-editor/src/code.tsx b/packages/mini-editor/src/code.tsx
index 2cc787f9..832b2cbb 100644
--- a/packages/mini-editor/src/code.tsx
+++ b/packages/mini-editor/src/code.tsx
@@ -18,6 +18,7 @@ type CodeProps = {
   minColumns: number
   minZoom: number
   maxZoom: number
+  horizontalCenter: boolean
 }
 
 export function Code({
@@ -31,6 +32,7 @@ export function Code({
   minColumns,
   minZoom,
   maxZoom,
+  horizontalCenter,
 }: CodeProps) {
   const {
     prevLines,
@@ -62,7 +64,6 @@ export function Code({
       <code>
         {dimensions ? (
           <SmoothLines
-            center={false}
             progress={progress}
             containerWidth={dimensions.width}
             containerHeight={dimensions.height}
@@ -81,6 +82,7 @@ export function Code({
             nextFocus={nextFocusIndexes}
             minZoom={minZoom}
             maxZoom={maxZoom}
+            center={horizontalCenter}
           />
         ) : (
           <>
diff --git a/packages/mini-editor/src/mini-editor-hike.tsx b/packages/mini-editor/src/mini-editor-hike.tsx
index 6856bce1..7d069492 100644
--- a/packages/mini-editor/src/mini-editor-hike.tsx
+++ b/packages/mini-editor/src/mini-editor-hike.tsx
@@ -34,6 +34,7 @@ export type MiniEditorHikeProps = {
   minZoom?: number
   maxZoom?: number
   button?: React.ReactNode
+  horizontalCenter?: boolean
   classes?: Classes
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>
 
@@ -51,6 +52,7 @@ function MiniEditorHike(props: MiniEditorHikeProps) {
     minZoom = 0.2,
     maxZoom = 1,
     height,
+    horizontalCenter = false,
     ...rest
   } = props
   const { steps, files, stepsByFile } = useSteps(ogSteps, {
@@ -107,6 +109,7 @@ function MiniEditorHike(props: MiniEditorHikeProps) {
           minColumns={minColumns}
           minZoom={minZoom}
           maxZoom={maxZoom}
+          horizontalCenter={horizontalCenter}
         />
       )}
     </EditorFrame>
@@ -163,6 +166,7 @@ type ContentProps = {
   minColumns: number
   minZoom: number
   maxZoom: number
+  horizontalCenter: boolean
 }
 
 function EditorContent({
@@ -173,6 +177,7 @@ function EditorContent({
   minColumns,
   minZoom,
   maxZoom,
+  horizontalCenter,
 }: ContentProps) {
   const fwdTransitions = useForwardTransitions(steps)
   const bwdTransitions = useBackwardTransitions(steps)
@@ -200,6 +205,7 @@ function EditorContent({
       minColumns={minColumns}
       minZoom={minZoom}
       maxZoom={maxZoom}
+      horizontalCenter={horizontalCenter}
     />
   )
 }
diff --git a/packages/smooth-lines/src/index.tsx b/packages/smooth-lines/src/index.tsx
index f3e81414..da625956 100644
--- a/packages/smooth-lines/src/index.tsx
+++ b/packages/smooth-lines/src/index.tsx
@@ -181,7 +181,10 @@ function getContentProps({
         )
 
   const dx = horizontalCenter
-    ? containerWidth / 2 - (lineWidth * zoom) / 2
+    ? Math.max(
+        containerWidth / 2 - (lineWidth * zoom) / 2,
+        0
+      )
     : 0
 
   return [
diff --git a/packages/storybook/src/mini-editor-hike.story.js b/packages/storybook/src/mini-editor-hike.story.js
index 331e1536..de555971 100644
--- a/packages/storybook/src/mini-editor-hike.story.js
+++ b/packages/storybook/src/mini-editor-hike.story.js
@@ -70,6 +70,7 @@ console.log(1)`
           backward={backward}
           minColumns={10}
           minZoom={1}
+          horizontalCenter={true}
         />
       )}
     </WithProgress>