Merge pull request #58 from code-hike/horizontal-center

Add horizontal center prop

Author: pomber

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}
           />
         ) : (
           <>

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}
     />
   )
 }

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 [

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

@@ -70,6 +70,7 @@ console.log(1)`
           backward={backward}
           minColumns={10}
           minZoom={1}
+          horizontalCenter={true}
         />
       )}
     </WithProgress>