sync height

MrWangJustToDo · Aug 19, 2024 · 84576c5 · 84576c5
1 parent 56e2fab
commit 84576c5
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 80 deletions.
diff --git a/packages/react/src/components/v2/DiffSplitHunkLineWrap_v2.tsx b/packages/react/src/components/v2/DiffSplitHunkLineWrap_v2.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { hunkLineNumberBGName, plainLineNumberColorName, hunkContentBGName, hunkContentColorName } from "../color";
 import { ExpandUp, ExpandDown, ExpandAll } from "../DiffExpand";
 import { useDiffViewContext, DiffModeEnum } from "../DiffViewContext";
+import { diffAsideWidthName } from "../tools";
 
 const DiffSplitHunkLineGitHub = ({
   index,
@@ -41,10 +42,13 @@ const DiffSplitHunkLineGitHub = ({
   return (
     <div data-line={`${lineNumber}-hunk`} data-state="hunk" className="diff-line diff-line-hunk flex">
       <div
-        className="diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]"
+        className="diff-line-hunk-action flex w-[1%] min-w-[40px] select-none flex-col items-center justify-center p-[1px]"
         style={{
           backgroundColor: `var(${hunkLineNumberBGName})`,
           color: `var(${plainLineNumberColorName})`,
+          width: `var(${diffAsideWidthName})`,
+          minWidth: `var(${diffAsideWidthName})`,
+          maxWidth: `var(${diffAsideWidthName})`,
         }}
       >
         {couldExpand ? (
@@ -100,17 +104,10 @@ const DiffSplitHunkLineGitHub = ({
         )}
       </div>
       <div
-        className="diff-line-hunk-content pr-[10px] align-middle"
-        style={{ backgroundColor: `var(${hunkContentBGName})` }}
+        className="diff-line-hunk-content flex w-full items-center px-[10px]"
+        style={{ backgroundColor: `var(${hunkContentBGName})`, color: `var(${hunkContentColorName})` }}
       >
-        <div
-          className="pl-[1.5em]"
-          style={{
-            color: `var(${hunkContentColorName})`,
-          }}
-        >
-          {currentHunk.splitInfo?.plainText || currentHunk.text}
-        </div>
+        {currentHunk.splitInfo?.plainText || currentHunk.text}
       </div>
     </div>
   );
@@ -152,16 +149,19 @@ const DiffSplitHunkLineGitLab = ({
   return (
     <div data-line={`${lineNumber}-hunk`} data-state="hunk" className="diff-line diff-line-hunk flex">
       <div
-        className="diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]"
+        className="diff-line-hunk-action flex w-[1%] min-w-[40px] select-none flex-col items-center justify-center p-[1px]"
         style={{
           backgroundColor: `var(${hunkLineNumberBGName})`,
           color: `var(${plainLineNumberColorName})`,
+          width: `var(${diffAsideWidthName})`,
+          minWidth: `var(${diffAsideWidthName})`,
+          maxWidth: `var(${diffAsideWidthName})`,
         }}
       >
         {couldExpand ? (
           isFirstLine ? (
             <button
-              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
               title="Expand Up"
               data-title="Expand Up"
               onClick={() => diffFile.onSplitHunkExpand("up", index)}
@@ -170,7 +170,7 @@ const DiffSplitHunkLineGitLab = ({
             </button>
           ) : isLastLine ? (
             <button
-              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
               title="Expand Down"
               data-title="Expand Down"
               onClick={() => diffFile.onSplitHunkExpand("down", index)}
@@ -179,7 +179,7 @@ const DiffSplitHunkLineGitLab = ({
             </button>
           ) : isExpandAll ? (
             <button
-              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
               title="Expand All"
               data-title="Expand All"
               onClick={() => diffFile.onSplitHunkExpand("all", index)}
@@ -189,15 +189,15 @@ const DiffSplitHunkLineGitLab = ({
           ) : (
             <>
               <button
-                className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
+                className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
                 title="Expand Down"
                 data-title="Expand Down"
                 onClick={() => diffFile.onSplitHunkExpand("down", index)}
               >
                 <ExpandDown className="fill-current" />
               </button>
               <button
-                className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
+                className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
                 title="Expand Up"
                 data-title="Expand Up"
                 onClick={() => diffFile.onSplitHunkExpand("up", index)}
@@ -211,30 +211,26 @@ const DiffSplitHunkLineGitLab = ({
         )}
       </div>
       <div
-        className="diff-line-hunk-content pr-[10px] align-middle"
-        style={{ backgroundColor: `var(${hunkContentBGName})` }}
+        className="diff-line-hunk-content flex w-full items-center px-[10px]"
+        style={{ backgroundColor: `var(${hunkContentBGName})`, color: `var(${hunkContentColorName})` }}
       >
-        <div
-          className="pl-[1.5em]"
-          style={{
-            color: `var(${hunkContentColorName})`,
-          }}
-        >
-          {currentHunk.splitInfo?.plainText || currentHunk.text}
-        </div>
+        {currentHunk.splitInfo?.plainText || currentHunk.text}
       </div>
-      <div className="diff-split-line w-[1px] bg-[rgb(222,222,222)]" />
+      <div className="diff-split-line w-[1px] flex-shrink-0 bg-[rgb(222,222,222)]" />
       <div
-        className="diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]"
+        className="diff-line-hunk-action flex w-[1%] min-w-[40px] select-none flex-col items-center justify-center p-[1px]"
         style={{
           backgroundColor: `var(${hunkLineNumberBGName})`,
           color: `var(${plainLineNumberColorName})`,
+          width: `var(${diffAsideWidthName})`,
+          minWidth: `var(${diffAsideWidthName})`,
+          maxWidth: `var(${diffAsideWidthName})`,
         }}
       >
         {couldExpand ? (
           isFirstLine ? (
             <button
-              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
               title="Expand Up"
               data-title="Expand Up"
               onClick={() => diffFile.onSplitHunkExpand("up", index)}
@@ -243,7 +239,7 @@ const DiffSplitHunkLineGitLab = ({
             </button>
           ) : isLastLine ? (
             <button
-              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
               title="Expand Down"
               data-title="Expand Down"
               onClick={() => diffFile.onSplitHunkExpand("down", index)}
@@ -252,7 +248,7 @@ const DiffSplitHunkLineGitLab = ({
             </button>
           ) : isExpandAll ? (
             <button
-              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px] hover:bg-blue-300"
               title="Expand All"
               data-title="Expand All"
               onClick={() => diffFile.onSplitHunkExpand("all", index)}
@@ -262,15 +258,15 @@ const DiffSplitHunkLineGitLab = ({
           ) : (
             <>
               <button
-                className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
+                className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
                 title="Expand Down"
                 data-title="Expand Down"
                 onClick={() => diffFile.onSplitHunkExpand("down", index)}
               >
                 <ExpandDown className="fill-current" />
               </button>
               <button
-                className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
+                className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px] hover:bg-blue-300"
                 title="Expand Up"
                 data-title="Expand Up"
                 onClick={() => diffFile.onSplitHunkExpand("up", index)}
@@ -284,17 +280,10 @@ const DiffSplitHunkLineGitLab = ({
         )}
       </div>
       <div
-        className="diff-line-hunk-content pr-[10px] align-middle"
-        style={{ backgroundColor: `var(${hunkContentBGName})` }}
+        className="diff-line-hunk-content flex w-full items-center px-[10px]"
+        style={{ backgroundColor: `var(${hunkContentBGName})`, color: `var(${hunkContentColorName})` }}
       >
-        <div
-          className="pl-[1.5em]"
-          style={{
-            color: `var(${hunkContentColorName})`,
-          }}
-        >
-          {currentHunk.splitInfo?.plainText || currentHunk.text}
-        </div>
+        {currentHunk.splitInfo?.plainText || currentHunk.text}
       </div>
     </div>
   );

diff --git a/packages/react/src/components/v2/DiffSplitLineNormal_v2.tsx b/packages/react/src/components/v2/DiffSplitLineNormal_v2.tsx
@@ -117,7 +117,9 @@ const _DiffSplitLine = ({
         <div
           className={`diff-line-${SplitSide[side]}-placeholder w-full select-none`}
           style={{ backgroundColor: `var(${emptyBGName})` }}
-        />
+        >
+          &ensp;
+        </div>
       )}
     </div>
   );

diff --git a/packages/react/src/components/v2/DiffSplitLineWrap_v2.tsx b/packages/react/src/components/v2/DiffSplitLineWrap_v2.tsx
@@ -7,6 +7,7 @@ import { DiffContent } from "../DiffContent";
 import { SplitSide } from "../DiffView";
 import { useDiffViewContext } from "../DiffViewContext";
 import { useDiffWidgetContext } from "../DiffWidgetContext";
+import { diffAsideWidthName } from "../tools";
 
 const _DiffSplitLine = ({ index, diffFile, lineNumber }: { index: number; diffFile: DiffFile; lineNumber: number }) => {
   const oldLine = diffFile.getSplitLeftLine(index);
@@ -55,13 +56,19 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }: { index: number; diffFi
   const newLineNumberBG = getLineNumberBG(newLineIsAdded, false, hasDiff);
 
   return (
-    <div data-line={lineNumber} data-state={hasDiff ? "diff" : "plain"} className="diff-line">
+    <div data-line={lineNumber} data-state={hasDiff ? "diff" : "plain"} className="diff-line flex">
       {hasOldLine ? (
         <>
           <div
-            className="diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top"
+            className="diff-line-old-num group relative flex w-[1%] min-w-[40px] select-none items-start px-[10px] text-right"
             data-side={SplitSide[SplitSide.old]}
-            style={{ backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` }}
+            style={{
+              backgroundColor: oldLineNumberBG,
+              color: `var(${plainLineNumberColorName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
           >
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
@@ -74,12 +81,16 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }: { index: number; diffFi
                 onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side })}
               />
             )}
-            <span data-line-num={oldLine.lineNumber} style={{ opacity: hasChange ? undefined : 0.5 }}>
+            <span
+              className="w-full"
+              data-line-num={oldLine.lineNumber}
+              style={{ opacity: hasChange ? undefined : 0.5 }}
+            >
               {oldLine.lineNumber}
             </span>
           </div>
           <div
-            className="diff-line-old-content group relative pr-[10px] align-top"
+            className="diff-line-old-content group relative flex w-[50%] items-center pr-[10px]"
             data-side={SplitSide[SplitSide.old]}
             style={{ backgroundColor: oldLineContentBG }}
           >
@@ -90,7 +101,7 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }: { index: number; diffFi
                 side={SplitSide.old}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
-                className="absolute right-[100%] z-[1] translate-x-[50%]"
+                className="absolute right-[100%] top-0 z-[1] translate-x-[50%]"
                 onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side })}
               />
             )}
@@ -105,21 +116,41 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }: { index: number; diffFi
           </div>
         </>
       ) : (
-        <div
-          className="diff-line-old-placeholder w-[50%] select-none"
-          data-side={SplitSide[SplitSide.old]}
-          style={{ backgroundColor: `var(${emptyBGName})` }}
-        >
-          <span>&ensp;</span>
-        </div>
+        <>
+          <div
+            className="diff-line-old-num-placeholder w-[1%] min-w-[40px] select-none px-[10px]"
+            data-side={SplitSide[SplitSide.old]}
+            style={{
+              backgroundColor: `var(${emptyBGName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
+          >
+            &ensp;
+          </div>
+          <div
+            className="diff-line-old-placeholder w-[50%] select-none pr-[10px]"
+            data-side={SplitSide[SplitSide.old]}
+            style={{ backgroundColor: `var(${emptyBGName})` }}
+          >
+            &ensp;
+          </div>
+        </>
       )}
-      <div className="diff-split-line w-[1px] bg-[rgb(222,222,222)]" />
+      <div className="diff-split-line w-[1px] flex-shrink-0 bg-[rgb(222,222,222)]" />
       {hasNewLine ? (
         <>
           <div
-            className="diff-line-new-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top"
+            className="diff-line-new-num group relative flex w-[1%] min-w-[40px] select-none items-start px-[10px] text-right"
             data-side={SplitSide[SplitSide.new]}
-            style={{ backgroundColor: newLineNumberBG, color: `var(${plainLineNumberColorName})` }}
+            style={{
+              backgroundColor: newLineNumberBG,
+              color: `var(${plainLineNumberColorName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
           >
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
@@ -132,12 +163,16 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }: { index: number; diffFi
                 onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side })}
               />
             )}
-            <span data-line-num={newLine.lineNumber} style={{ opacity: hasChange ? undefined : 0.5 }}>
+            <span
+              className="w-full"
+              data-line-num={newLine.lineNumber}
+              style={{ opacity: hasChange ? undefined : 0.5 }}
+            >
               {newLine.lineNumber}
             </span>
           </div>
           <div
-            className="diff-line-new-content group relative pr-[10px] align-top"
+            className="diff-line-new-content group relative flex w-[50%] items-center pr-[10px]"
             data-side={SplitSide[SplitSide.new]}
             style={{ backgroundColor: newLineContentBG }}
           >
@@ -148,7 +183,7 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }: { index: number; diffFi
                 side={SplitSide.new}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
-                className="absolute right-[100%] z-[1] translate-x-[50%]"
+                className="absolute right-[100%] top-0 z-[1] translate-x-[50%]"
                 onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber: lineNumber, side: side })}
               />
             )}
@@ -163,13 +198,27 @@ const _DiffSplitLine = ({ index, diffFile, lineNumber }: { index: number; diffFi
           </div>
         </>
       ) : (
-        <div
-          className="diff-line-new-placeholder w-[50%] select-none"
-          style={{ backgroundColor: `var(${emptyBGName})` }}
-          data-side={SplitSide[SplitSide.new]}
-        >
-          <span>&ensp;</span>
-        </div>
+        <>
+          <div
+            className="diff-line-new-num-placeholder w-[1%] min-w-[40px] select-none px-[10px]"
+            data-side={SplitSide[SplitSide.new]}
+            style={{
+              backgroundColor: `var(${emptyBGName})`,
+              width: `var(${diffAsideWidthName})`,
+              minWidth: `var(${diffAsideWidthName})`,
+              maxWidth: `var(${diffAsideWidthName})`,
+            }}
+          >
+            &ensp;
+          </div>
+          <div
+            className="diff-line-new-placeholder w-[50%] select-none pr-[10px]"
+            data-side={SplitSide[SplitSide.new]}
+            style={{ backgroundColor: `var(${emptyBGName})` }}
+          >
+            &ensp;
+          </div>
+        </>
       )}
     </div>
   );

diff --git a/packages/react/src/components/v2/DiffSplitViewNormal_v2.tsx b/packages/react/src/components/v2/DiffSplitViewNormal_v2.tsx
@@ -8,7 +8,7 @@ import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 import { useTextWidth } from "../../hooks/useTextWidth";
 import { SplitSide } from "../DiffView";
 import { useDiffViewContext } from "../DiffViewContext";
-import { removeAllSelection, syncScroll, diffFontSizeName } from "../tools";
+import { removeAllSelection, syncScroll, diffFontSizeName, diffAsideWidthName } from "../tools";
 
 import { DiffSplitViewLine } from "./DiffSplitViewLineNormal_v2";