Add line number option

Author: pomber

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

@@ -1,20 +1,19 @@
 import React from "react"
 import { useDimensions, Dimensions } from "./use-dimensions"
 import { IRawTheme } from "vscode-textmate"
-import { DEFAULT_THEME } from "./themes"
 import {
   FullTween,
   Code,
   map,
   FocusString,
+  getCodeColors,
 } from "@code-hike/utils"
 import {
   useStepParser,
   CodeAnnotation,
   CodeShift,
 } from "./partial-step-parser"
 import { SmoothLines } from "./smooth-lines"
-import { getThemeDefaultColors } from "./themes"
 
 type HTMLProps = React.DetailedHTMLProps<
   React.HTMLAttributes<HTMLPreElement>,
@@ -40,6 +39,7 @@ export type CodeConfig = {
   maxZoom?: number
   horizontalCenter?: boolean
   theme: IRawTheme
+  lineNumbers?: boolean
 }
 
 function useCodeShift({
@@ -74,6 +74,7 @@ export function CodeTween({
     stepInfo.code,
     map(tween, tween => tween.focus),
     config.minColumns || DEFAULT_MIN_COLUMNS,
+    config.lineNumbers || false,
     [config.parentHeight]
   )
   // return (
@@ -122,8 +123,7 @@ function AfterDimensions({
     minZoom = 1,
     maxZoom = 1,
     horizontalCenter = false,
-
-    theme = (DEFAULT_THEME as unknown) as IRawTheme,
+    theme,
   },
   dimensions,
   stepInfo,
@@ -136,8 +136,7 @@ function AfterDimensions({
   progress: number
   htmlProps: HTMLProps
 }) {
-  const { bg, fg } = getThemeDefaultColors(theme)
-
+  const { bg, fg } = getCodeColors(theme)
   return (
     <Wrapper
       htmlProps={htmlProps}
@@ -151,6 +150,7 @@ function AfterDimensions({
         minZoom={minZoom}
         maxZoom={maxZoom}
         center={horizontalCenter}
+        theme={theme}
       />
     </Wrapper>
   )

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

@@ -52,7 +52,9 @@ export function SmoothContainer({
     progress
   )
 
-  const leftPad = 16
+  const lineNumberPad =
+    (dimensions?.lineNumberWidth || 0) * zoom
+  const leftPad = 16 + lineNumberPad
 
   const width = Math.max(
     focusWidth + leftPad,
@@ -221,6 +223,7 @@ function getContentProps({
     (extremes[1] - extremes[0] + 3) * lineHeight
   const zoom = Math.max(
     Math.min(
+      // TODO consider line number width
       (containerWidth - 16 * 2) / lineWidth,
       containerHeight / originalFocusHeight,
       maxZoom

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

@@ -6,7 +6,13 @@ import {
 } from "./partial-step-parser"
 import { SmoothContainer } from "./smooth-container"
 import { tween } from "./tween"
-import { FullTween, map, Tween } from "@code-hike/utils"
+import {
+  FullTween,
+  Tween,
+  getColor,
+  ColorName,
+  EditorTheme,
+} from "@code-hike/utils"
 
 type SmoothLinesProps = {
   progress: number
@@ -15,6 +21,7 @@ type SmoothLinesProps = {
   maxZoom?: number
   center?: boolean
   codeStep: CodeShift
+  theme: EditorTheme
 }
 
 export function SmoothLines(props: SmoothLinesProps) {
@@ -26,7 +33,11 @@ export function SmoothLines(props: SmoothLinesProps) {
           focusWidth={focusWidth}
           lineHeight={props.dimensions!.lineHeight}
           progress={props.progress}
+          theme={props.theme}
           startX={startX}
+          lineNumberWidth={
+            props.dimensions!.lineNumberWidth
+          }
         />
       )}
     </SmoothContainer>
@@ -39,12 +50,16 @@ function Lines({
   focusWidth,
   lineHeight,
   startX,
+  theme,
+  lineNumberWidth,
 }: {
   codeStep: CodeShift
   focusWidth: number
   lineHeight: number
   progress: number
   startX: number
+  lineNumberWidth: number
+  theme: EditorTheme
 }) {
   const groups =
     progress < 0.5
@@ -63,6 +78,8 @@ function Lines({
               lineHeight={lineHeight}
               startX={startX}
               key={i}
+              theme={theme}
+              lineNumberWidth={lineNumberWidth}
             />
           )
         }
@@ -99,6 +116,8 @@ function Lines({
               lineHeight={lineHeight}
               startY={startY}
               startX={startX}
+              theme={theme}
+              lineNumberWidth={lineNumberWidth}
             />
           </Component>
         )
@@ -116,13 +135,17 @@ function LineGroup({
   t,
   startX,
   startY = 0,
+  theme,
+  lineNumberWidth,
 }: {
   lines: CodeLine[]
   focusWidth: number
   lineHeight: number
   t: number
   startX: number
   startY?: number
+  theme: EditorTheme
+  lineNumberWidth: number
 }) {
   return (
     <>
@@ -134,18 +157,34 @@ function LineGroup({
 
         return (
           <React.Fragment key={key}>
-            {/* <span
-              style={{
-                top: 0,
-                left: 0,
-                transform: `translate(${
-                  dx * focusWidth
-                }px, ${(dy - startY) * lineHeight}px)`,
-                position: "absolute",
-              }}
-            >
-              13
-            </span> */}
+            {lineNumberWidth ? (
+              <span
+                style={{
+                  top: 0,
+                  left: 0,
+                  transform: `translate(${
+                    dx * focusWidth
+                  }px, ${(dy - startY) * lineHeight}px)`,
+                  position: "absolute",
+                  userSelect: "none",
+                  width: lineNumberWidth,
+                  textAlign: "right",
+                  display: "inline-block",
+                  boxSizing: "border-box",
+                  paddingRight: "1ch",
+                  opacity,
+                  fontVariantNumeric: "tabular-nums",
+                  color: getColor(
+                    theme,
+                    ColorName.LineNumberForeground
+                  ),
+                }}
+              >
+                {t < 0.5
+                  ? line.lineNumber.prev
+                  : line.lineNumber.next}
+              </span>
+            ) : undefined}
             <LineContainer
               dx={startX + dx * focusWidth}
               dy={(dy - startY) * lineHeight}

packages/smooth-code/src/themes.ts

@@ -13,6 +13,7 @@ type Dimensions = {
   lineWidth: [number, number]
   lineHeight: number
   colWidth: number
+  lineNumberWidth: number
 } | null
 
 const useLayoutEffect =
@@ -36,6 +37,7 @@ function useDimensions(
   code: Tween<string>,
   focus: Tween<FocusString>,
   minColumns: number,
+  lineNumbers: boolean,
   deps: React.DependencyList
 ): { element: React.ReactNode; dimensions: Dimensions } {
   const [
@@ -63,6 +65,8 @@ function useDimensions(
       .trim()
       .split(newlineRe)
 
+    const lineCount = lines.length
+
     const element = (
       <code style={{ display: "block" }}>
         <br />
@@ -75,6 +79,14 @@ function useDimensions(
             }
             key={i}
           >
+            <span
+              style={{
+                display: "inline-block",
+                width: lineNumbers ? "auto" : 0,
+              }}
+            >
+              {lineCount}0
+            </span>
             <div style={{ display: "inline-block" }}>
               <span>{line}</span>
             </div>
@@ -100,16 +112,20 @@ function useDimensions(
       const codeElement = pll?.parentElement!
 
       // TODO is it clientWidth or clientRect?
+      const lineContentDiv = pll?.querySelector(
+        ":scope > div"
+      ) as HTMLElement
+
+      const lineNumberSpan = pll?.querySelector(
+        ":scope > span"
+      ) as HTMLElement
+      const lnw = getWidthWithoutPadding(lineNumberSpan)
 
-      const plw = getWidthWithoutPadding(
-        pll?.firstElementChild as HTMLElement
-      )
+      const plw = getWidthWithoutPadding(lineContentDiv)
       const colWidth = plw / prevLongestLine.length || 1
       const nlw = nextLongestLine.length * colWidth
       const lineHeight =
-        getHeightWithoutPadding(
-          pll?.firstElementChild as HTMLElement
-        ) ?? 20
+        getHeightWithoutPadding(lineContentDiv) ?? 20
 
       const d: Dimensions = {
         containerWidth: getWidthWithoutPadding(
@@ -134,6 +150,7 @@ function useDimensions(
         ],
         lineHeight,
         colWidth,
+        lineNumberWidth: lnw,
         deps: allDeps,
       }
       setDimensions(d)

packages/smooth-code/src/use-dimensions.tsx

@@ -218,8 +218,6 @@ function TestTransition({
     return "Loading..."
   }
 
-  console.log(files)
-
   const [
     prevNorthTabs,
     nextNorthTabs,