Add scrollbars

packages/mini-editor/src/code.tsx

@@ -16,6 +16,8 @@ type CodeProps = {
   language: string
   parentHeight?: number
   minColumns: number
+  minZoom: number
+  maxZoom: number
 }
 
 export function Code({
@@ -27,6 +29,8 @@ export function Code({
   language,
   parentHeight,
   minColumns,
+  minZoom,
+  maxZoom,
 }: CodeProps) {
   const {
     prevLines,
@@ -53,17 +57,7 @@ export function Code({
     <pre
       ref={ref}
       className={`language-${language}`}
-      style={{
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        right: 16,
-        left: 16,
-        padding: 0,
-        margin: 0,
-        overflow: "hidden",
-        opacity: dimensions ? 1 : 0,
-      }}
+      style={{ opacity: dimensions ? 1 : 0 }}
     >
       <code>
         {dimensions ? (
@@ -85,7 +79,8 @@ export function Code({
             }
             prevFocus={prevFocusIndexes}
             nextFocus={nextFocusIndexes}
-            maxZoom={1}
+            minZoom={minZoom}
+            maxZoom={maxZoom}
           />
         ) : (
           <>

packages/mini-editor/src/index.scss

@@ -43,11 +43,22 @@
   height: 100%;
   color: #cccccc;
   font-size: 15px;
-  padding: 5px 10px;
+  // padding: 5px 10px;
   line-height: 1.1rem;
   box-sizing: border-box;
 }
 
+.ch-editor-body pre {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0 16px;
+  margin: 0;
+  overflow: auto;
+}
+
 .ch-editor-body code {
   line-height: 20px;
 }

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

@@ -31,6 +31,8 @@ export type MiniEditorProps = {
   steps?: MiniEditorStep[]
   height?: number
   minColumns?: number
+  minZoom?: number
+  maxZoom?: number
   button?: React.ReactNode
   classes?: Classes
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>
@@ -46,6 +48,8 @@ function MiniEditor(props: MiniEditorProps) {
     steps: ogSteps,
     tabs: ogTabs,
     minColumns = 50,
+    minZoom = 0.2,
+    maxZoom = 1,
     height,
     ...rest
   } = props
@@ -101,6 +105,8 @@ function MiniEditor(props: MiniEditorProps) {
           steps={contentSteps}
           parentHeight={height}
           minColumns={minColumns}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
         />
       )}
     </EditorFrame>
@@ -155,6 +161,8 @@ type ContentProps = {
   steps: ContentStep[]
   parentHeight?: number
   minColumns: number
+  minZoom: number
+  maxZoom: number
 }
 
 function EditorContent({
@@ -163,6 +171,8 @@ function EditorContent({
   steps,
   parentHeight,
   minColumns,
+  minZoom,
+  maxZoom,
 }: ContentProps) {
   const fwdTransitions = useForwardTransitions(steps)
   const bwdTransitions = useBackwardTransitions(steps)
@@ -188,6 +198,8 @@ function EditorContent({
       progress={progress - transitionIndex + 1}
       parentHeight={parentHeight}
       minColumns={minColumns}
+      minZoom={minZoom}
+      maxZoom={maxZoom}
     />
   )
 }

packages/mini-editor/src/use-dimensions.tsx

@@ -31,8 +31,6 @@ function useDimensions<T extends HTMLElement>(
 
   useLayoutEffect(() => {
     if (ref.current) {
-      const rect = ref.current.getBoundingClientRect()
-
       const pll = ref.current.querySelector(
         ".prev-longest-line"
       )
@@ -50,8 +48,8 @@ function useDimensions<T extends HTMLElement>(
         ? plw! / (pll.textContent?.length || 1)
         : nlw! / (nll!.textContent?.length || 1)
       setDimensions({
-        width: rect.width,
-        height: rect.height,
+        width: getWidthWithoutPadding(ref.current),
+        height: getHeightWithoutPadding(ref.current),
         lineWidths: [
           plw || nlw || DEFAULT_WIDTH,
           nlw || plw || DEFAULT_WIDTH,
@@ -73,6 +71,23 @@ function useDimensions<T extends HTMLElement>(
   }
 }
 
+function getWidthWithoutPadding(element: HTMLElement) {
+  const computedStyle = getComputedStyle(element)
+  return (
+    element.clientWidth -
+    parseFloat(computedStyle.paddingLeft) -
+    parseFloat(computedStyle.paddingRight)
+  )
+}
+function getHeightWithoutPadding(element: HTMLElement) {
+  const computedStyle = getComputedStyle(element)
+  return (
+    element.clientHeight -
+    parseFloat(computedStyle.paddingTop) -
+    parseFloat(computedStyle.paddingBottom)
+  )
+}
+
 function depsChanged(
   oldDeps: React.DependencyList,
   newDeps: React.DependencyList

packages/smooth-lines/src/index.tsx

@@ -35,41 +35,51 @@ function SmoothLines({
   prevFocus,
   nextFocus,
   center,
-  minZoom = 0, // TODO use minZoom
+  minZoom = 0,
   maxZoom = 1.2,
 }: Props) {
   const lines = useLineTransitions(prevLines, nextLines)
 
-  const focusWidth = Array.isArray(lineWidth)
-    ? tweenProp(lineWidth[0], lineWidth[1], progress)
-    : lineWidth
-
   const prevFocusKeys = prevFocus.map(
     index => prevLines[index]?.key
   )
   const nextFocusKeys = nextFocus.map(
     index => nextLines[index]?.key
   )
 
-  const [prevZoom, prevDX, prevDY] = getContentProps({
+  const [
+    prevZoom,
+    prevDX,
+    prevDY,
+    prevContentHeight,
+    prevContentWidth,
+  ] = getContentProps({
     containerWidth,
     containerHeight,
     lineWidth: Array.isArray(lineWidth)
       ? lineWidth[0]
       : lineWidth,
     lineHeight,
+    minZoom,
     maxZoom,
     horizontalCenter: !!center,
     focusLineIndexList: prevFocus,
     originalContentHeight: prevLines.length * lineHeight,
   })
-  const [nextZoom, nextDX, nextDY] = getContentProps({
+  const [
+    nextZoom,
+    nextDX,
+    nextDY,
+    nextContentHeight,
+    nextContentWidth,
+  ] = getContentProps({
     containerWidth,
     containerHeight,
     lineWidth: Array.isArray(lineWidth)
       ? lineWidth[1]
       : lineWidth,
     lineHeight,
+    minZoom,
     maxZoom,
     horizontalCenter: !!center,
     focusLineIndexList: nextFocus,
@@ -79,13 +89,29 @@ function SmoothLines({
   const zoom = tweenProp(prevZoom, nextZoom, progress)
   const dx = tweenProp(prevDX, nextDX, progress)
   const dy = tweenProp(prevDY, nextDY, progress)
+  const focusHeight = tweenProp(
+    prevContentHeight,
+    nextContentHeight,
+    progress
+  )
+  const focusWidth = tweenProp(
+    prevContentWidth,
+    nextContentWidth,
+    progress
+  )
 
   return (
     <Container
       width={containerWidth}
       height={containerHeight}
     >
-      <Content dx={dx} dy={dy} scale={zoom}>
+      <Content
+        dx={dx}
+        dy={dy}
+        scale={zoom}
+        height={Math.max(focusHeight, containerHeight)}
+        width={Math.max(focusWidth, containerWidth)}
+      >
         <Lines
           lines={lines}
           prevFocusKeys={prevFocusKeys}
@@ -104,6 +130,7 @@ function getContentProps({
   containerHeight,
   lineWidth,
   lineHeight,
+  minZoom,
   maxZoom,
   focusLineIndexList,
   originalContentHeight,
@@ -113,6 +140,7 @@ function getContentProps({
   containerHeight: number
   lineWidth: number
   lineHeight: number
+  minZoom: number
   maxZoom: number
   focusLineIndexList: number[]
   originalContentHeight: number
@@ -124,32 +152,45 @@ function getContentProps({
   ]
   const originalFocusHeight =
     (extremes[1] - extremes[0] + 3) * lineHeight
-  const zoom = Math.min(
-    containerWidth / lineWidth,
-    containerHeight / originalFocusHeight,
-    maxZoom
+  const zoom = Math.max(
+    Math.min(
+      containerWidth / lineWidth,
+      containerHeight / originalFocusHeight,
+      maxZoom
+    ),
+    minZoom
   )
 
   const contentHeight = originalContentHeight * zoom
 
   const focusStart = (extremes[0] - 1) * lineHeight * zoom
   const focusEnd = (extremes[1] + 2) * lineHeight * zoom
   const focusCenter = (focusEnd + focusStart) / 2
+  const focusHeight = focusEnd - focusStart
 
   const dy =
     containerHeight > contentHeight
       ? (containerHeight - contentHeight) / 2
       : clamp(
           containerHeight / 2 - focusCenter,
-          containerHeight - contentHeight,
+          Math.max(
+            containerHeight - contentHeight,
+            -focusStart // to ensure first focus line is shown when focus is bigger than container
+          ),
           0
         )
 
   const dx = horizontalCenter
     ? containerWidth / 2 - (lineWidth * zoom) / 2
     : 0
 
-  return [zoom, dx, dy] as const
+  return [
+    zoom,
+    dx,
+    dy,
+    focusHeight,
+    lineWidth * zoom,
+  ] as const
 }
 
 function Container({
@@ -167,6 +208,7 @@ function Container({
         width,
         height,
         position: "relative",
+        // overflow: "auto",
       }}
     >
       {children}
@@ -178,11 +220,15 @@ function Content({
   dx,
   dy,
   scale,
+  height,
+  width,
   children,
 }: {
   dx: number
   dy: number
   scale: number
+  height: number
+  width: number
   children: React.ReactNode
 }) {
   return (
@@ -191,10 +237,23 @@ function Content({
         position: "absolute",
         top: 0,
         left: 0,
-        transform: `translateX(${dx}px) translateY(${dy}px) scale(${scale})`,
+        transformOrigin: "top left",
+        width: width,
+        height: height,
+        overflow: "hidden",
       }}
     >
-      {children}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          transform: `translateX(${dx}px) translateY(${dy}px) scale(${scale})`,
+          transformOrigin: "top left",
+        }}
+      >
+        {children}
+      </div>
     </div>
   )
 }

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

@@ -69,6 +69,7 @@ console.log(1)`
           progress={progress}
           backward={backward}
           minColumns={10}
+          minZoom={1}
         />
       )}
     </WithProgress>
@@ -127,6 +128,7 @@ console.log(8)`
           steps={steps}
           progress={progress}
           backward={backward}
+          minZoom={0.8}
         />
       )}
     </WithProgress>