Add overflow auto to focused lines

Author: pomber

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/smooth-lines.story.js

@@ -15,10 +15,23 @@ export default {
       },
       defaultValue: 150,
     },
+    minZoom: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 1,
+        step: 0.1,
+      },
+      defaultValue: 0.2,
+    },
   },
 }
 
-export const basic = ({ center, containerWidth }) => (
+export const basic = ({
+  center,
+  containerWidth,
+  minZoom,
+}) => (
   <WithProgress>
     {progress => (
       <div
@@ -38,6 +51,7 @@ export const basic = ({ center, containerWidth }) => (
           lineWidth={lineWidth}
           prevFocus={[1, 1]}
           nextFocus={[3, 11]}
+          minZoom={minZoom}
         />
       </div>
     )}
@@ -86,6 +100,7 @@ export const verticalCenter = ({
 export const dynamicLineWidth = ({
   center,
   containerWidth,
+  minZoom,
 }) => {
   const prevLines = [
     { element: <Line>One</Line>, key: 1 },
@@ -126,6 +141,7 @@ export const dynamicLineWidth = ({
             lineWidth={[lineWidth, lineWidth * 2]}
             prevFocus={[1, 1]}
             nextFocus={[2, 2]}
+            minZoom={minZoom}
           />
         </div>
       )}