From 84576c5be91c7a02ac24ed7e35c850dae5f74522 Mon Sep 17 00:00:00 2001 From: MrWangJustToDo <2711470541@qq.com> Date: Mon, 19 Aug 2024 19:58:17 +0800 Subject: [PATCH] sync height --- .../v2/DiffSplitHunkLineWrap_v2.tsx | 77 ++++++------- .../components/v2/DiffSplitLineNormal_v2.tsx | 4 +- .../components/v2/DiffSplitLineWrap_v2.tsx | 101 +++++++++++++----- .../components/v2/DiffSplitViewNormal_v2.tsx | 2 +- .../components/v2/DiffSplitViewWrap_v2.tsx | 2 +- .../v2/DiffSplitWidgetLineWrap_v2.tsx | 2 +- packages/vue/src/hooks/useSyncHeight.ts | 18 ++-- 7 files changed, 126 insertions(+), 80 deletions(-) diff --git a/packages/react/src/components/v2/DiffSplitHunkLineWrap_v2.tsx b/packages/react/src/components/v2/DiffSplitHunkLineWrap_v2.tsx index 8cc99a4..ff5053b 100644 --- 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 (
{couldExpand ? ( @@ -100,17 +104,10 @@ const DiffSplitHunkLineGitHub = ({ )}
-
- {currentHunk.splitInfo?.plainText || currentHunk.text} -
+ {currentHunk.splitInfo?.plainText || currentHunk.text}
); @@ -152,16 +149,19 @@ const DiffSplitHunkLineGitLab = ({ return (
{couldExpand ? ( isFirstLine ? ( ) : isLastLine ? ( ) : isExpandAll ? (
-
- {currentHunk.splitInfo?.plainText || currentHunk.text} -
+ {currentHunk.splitInfo?.plainText || currentHunk.text}
-
+
{couldExpand ? ( isFirstLine ? ( ) : isLastLine ? ( ) : isExpandAll ? (
-
- {currentHunk.splitInfo?.plainText || currentHunk.text} -
+ {currentHunk.splitInfo?.plainText || currentHunk.text}
); diff --git a/packages/react/src/components/v2/DiffSplitLineNormal_v2.tsx b/packages/react/src/components/v2/DiffSplitLineNormal_v2.tsx index 1d2c4aa..3e3c3f2 100644 --- a/packages/react/src/components/v2/DiffSplitLineNormal_v2.tsx +++ b/packages/react/src/components/v2/DiffSplitLineNormal_v2.tsx @@ -117,7 +117,9 @@ const _DiffSplitLine = ({
+ > +   +
)}
); diff --git a/packages/react/src/components/v2/DiffSplitLineWrap_v2.tsx b/packages/react/src/components/v2/DiffSplitLineWrap_v2.tsx index 68a1b70..ba66a5d 100644 --- 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 ( -
+
{hasOldLine ? ( <>
{hasDiff && enableAddWidget && ( setWidget({ lineNumber: lineNumber, side: side })} /> )} - + {oldLine.lineNumber}
@@ -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
) : ( -
-   -
+ <> +
+   +
+
+   +
+ )} -
+
{hasNewLine ? ( <>
{hasDiff && enableAddWidget && ( setWidget({ lineNumber: lineNumber, side: side })} /> )} - + {newLine.lineNumber}
@@ -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
) : ( -
-   -
+ <> +
+   +
+
+   +
+ )}
); diff --git a/packages/react/src/components/v2/DiffSplitViewNormal_v2.tsx b/packages/react/src/components/v2/DiffSplitViewNormal_v2.tsx index fe016db..e0ad4a4 100644 --- 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"; diff --git a/packages/react/src/components/v2/DiffSplitViewWrap_v2.tsx b/packages/react/src/components/v2/DiffSplitViewWrap_v2.tsx index 8c673f7..18d9057 100644 --- a/packages/react/src/components/v2/DiffSplitViewWrap_v2.tsx +++ b/packages/react/src/components/v2/DiffSplitViewWrap_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 { createDiffSplitConfigStore, removeAllSelection, diffFontSizeName } from "../tools"; +import { createDiffSplitConfigStore, removeAllSelection, diffFontSizeName, diffAsideWidthName } from "../tools"; import { DiffSplitViewLine } from "./DiffSplitViewLineWrap_v2"; diff --git a/packages/react/src/components/v2/DiffSplitWidgetLineWrap_v2.tsx b/packages/react/src/components/v2/DiffSplitWidgetLineWrap_v2.tsx index f8be149..6698c02 100644 --- a/packages/react/src/components/v2/DiffSplitWidgetLineWrap_v2.tsx +++ b/packages/react/src/components/v2/DiffSplitWidgetLineWrap_v2.tsx @@ -55,7 +55,7 @@ const _DiffSplitWidgetLine = ({  
)} -
+
{newLineWidget ? (
diff --git a/packages/vue/src/hooks/useSyncHeight.ts b/packages/vue/src/hooks/useSyncHeight.ts index c53ea09..e40f5d5 100644 --- a/packages/vue/src/hooks/useSyncHeight.ts +++ b/packages/vue/src/hooks/useSyncHeight.ts @@ -29,6 +29,10 @@ export const useSyncHeight = ({ const ele1 = elements[0] as HTMLElement; const ele2 = elements[1] as HTMLElement; + const target = ele1.getAttribute("data-side") === side.value ? ele1 : ele2; + + const synced = ele1.getAttribute("data-side") !== side.value ? ele1 : ele2; + const cb = () => { ele1.style.height = "auto"; ele2.style.height = "auto"; @@ -36,8 +40,7 @@ export const useSyncHeight = ({ const rect2 = ele2.getBoundingClientRect(); if (rect1.height !== rect2.height) { const maxHeight = Math.max(rect1.height, rect2.height); - ele1.style.height = maxHeight + "px"; - ele2.style.height = maxHeight + "px"; + synced.style.height = maxHeight + "px"; ele1.setAttribute("data-sync-height", String(maxHeight)); ele2.setAttribute("data-sync-height", String(maxHeight)); } else { @@ -46,15 +49,18 @@ export const useSyncHeight = ({ } }; - const observer = new ResizeObserver(cb); - cb(); - const target = ele1.getAttribute("data-side") === side.value ? ele1 : ele2; + const observer = new ResizeObserver(cb); observer.observe(target); - onCancel(() => observer.disconnect()); + target.setAttribute("data-observe", "height"); + + onCancel(() => { + observer.disconnect(); + target?.removeAttribute("data-observe"); + }); } } };