add rangeMode

MrWangJustToDo · MrWangJustToDo · commit 0d8bb3a014e1 · 2026-03-03T01:22:06.000+08:00
diff --git a/README.md b/README.md
@@ -138,6 +138,41 @@ setEnableFastDiffTemplate(true);
 |---------|----------|
 | ![default](https://raw.githubusercontent.com/MrWangJustToDo/git-diff-view/main/default.png) | ![fastdiff](https://raw.githubusercontent.com/MrWangJustToDo/git-diff-view/main/enableFastDiffTemplate.png) |
 
+### Range Mode
+
+Display only a portion of the diff by specifying a line number range. This is useful when you want to focus on a specific section of a large diff.
+
+```tsx
+import { DiffFile, SplitSide } from "@git-diff-view/core";
+
+// Create the full diff instance
+const diffFile = new DiffFile(/* ... */);
+diffFile.init();
+diffFile.buildSplitDiffLines();
+
+// Generate a new instance containing only lines 10-50 (based on new file line numbers)
+const rangeDiffFile = diffFile.generateInstanceFromLineNumberRange(10, 50);
+
+// Or specify which side's line numbers to use
+const rangeDiffFileOld = diffFile.generateInstanceFromLineNumberRange(10, 50, SplitSide.old);
+const rangeDiffFileNew = diffFile.generateInstanceFromLineNumberRange(10, 50, SplitSide.new);
+
+<DiffView diffFile={rangeDiffFile} />
+```
+
+**API: `generateInstanceFromLineNumberRange(start, end, side?)`**
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `start` | `number` | - | Start line number (must be less than `end`) |
+| `end` | `number` | - | End line number |
+| `side` | `SplitSide` | `SplitSide.new` | Which file's line numbers to use (`SplitSide.old` or `SplitSide.new`) |
+
+This method creates a new `DiffFile` instance containing only the diff lines within the specified range, making it ideal for:
+- Displaying relevant portions of large diffs
+- Creating focused code review experiences
+- Building paginated diff views
+
 ### Template Mode
 
 Optimized rendering mode enabled by default for better performance. [Learn more](https://github.com/MrWangJustToDo/git-diff-view/blob/main/packages/core/src/parse/template.ts)
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
@@ -204,6 +204,14 @@ export declare class DiffFile {
 		isFullMerge: boolean;
 	};
 	mergeBundle: (data: ReturnType<DiffFile["getBundle"]>, notifyUpdate?: boolean) => void;
+	/**
+	 *
+	 * @param start start lineNumber
+	 * @param end end lineNumber
+	 * @param side range side
+	 * @returns a new instance can only show the content from start to end
+	 */
+	generateInstanceFromLineNumberRange: (start: number, end: number, side?: SplitSide) => DiffFile;
 	_getHighlighterName: () => string;
 	_getHighlighterType: () => string;
 	_getIsPureDiffRender: () => boolean;
diff --git a/packages/core/src/diff-file.ts b/packages/core/src/diff-file.ts
@@ -1682,14 +1682,80 @@ export class DiffFile {
     }
 
     if (__DEV__ && !data.hasInitRaw) {
-      console.error("[@git-diff-view/core] Invalid bundle data. Try calling the 'initRaw' function before merge / getBundle.");
+      console.error(
+        "[@git-diff-view/core] Invalid bundle data. Try calling the 'initRaw' function before merge / getBundle."
+      );
     }
 
     if (notifyUpdate) {
       this.notifyAll();
     }
   };
 
+  /**
+   * 
+   * @param start start lineNumber
+   * @param end end lineNumber
+   * @param side range side
+   * @returns a new instance can only show the content from start to end
+   */
+  generateInstanceFromLineNumberRange = (start: number, end: number, side = SplitSide.new) => {
+    if (start >= end) {
+      if (__DEV__) {
+        console.warn(`[@git-diff-view/core] The end line must gt start line`);
+      }
+
+      return this;
+    }
+
+    const splitStart = this.getSplitLineIndexByLineNumber(start, side);
+
+    const splitEnd = this.getSplitLineIndexByLineNumber(end, side);
+
+    const unifiedStart = this.getUnifiedLineIndexByLineNumber(start, side);
+
+    const unifiedEnd = this.getUnifiedLineIndexByLineNumber(end, side);
+
+    const l: Array<SplitLineItem> = [];
+    const r: Array<SplitLineItem> = [];
+    const u: Array<UnifiedLineItem> = [];
+
+    for (let i = splitStart; i <= splitEnd; i++) {
+      const _l = this.getSplitLeftLine(i);
+      const _r = this.getSplitRightLine(i);
+
+      if (_l.value || _r.value) {
+        l.push({ ..._l, isHidden: false });
+        r.push({ ..._r, isHidden: false });
+      }
+    }
+
+    for (let i = unifiedStart; i <= unifiedEnd; i++) {
+      const _u = this.getUnifiedLine(i);
+
+      if (_u.value) {
+        u.push({ ..._u, isHidden: false });
+      }
+    }
+
+    const contextDiffFile = DiffFile.createInstance(
+      {},
+      {
+        ...this.getBundle(),
+        composeByDiff: true,
+        splitHunkLines: {},
+        splitLeftLines: l,
+        splitRightLines: r,
+        splitLineLength: l.length,
+        unifiedHunkLines: {},
+        unifiedLines: u,
+        unifiedLineLength: u.length,
+      }
+    );
+
+    return contextDiffFile;
+  };
+
   _getHighlighterName = () => this.#highlighterName || "";
 
   _getHighlighterType = () => this.#highlighterType || "";
diff --git a/packages/file/index.d.ts b/packages/file/index.d.ts
@@ -202,6 +202,14 @@ export declare class DiffFile {
 		isFullMerge: boolean;
 	};
 	mergeBundle: (data: ReturnType<DiffFile["getBundle"]>, notifyUpdate?: boolean) => void;
+	/**
+	 *
+	 * @param start start lineNumber
+	 * @param end end lineNumber
+	 * @param side range side
+	 * @returns a new instance can only show the content from start to end
+	 */
+	generateInstanceFromLineNumberRange: (start: number, end: number, side?: SplitSide) => DiffFile;
 	_getHighlighterName: () => string;
 	_getHighlighterType: () => string;
 	_getIsPureDiffRender: () => boolean;
diff --git a/packages/react/index.d.ts b/packages/react/index.d.ts
@@ -202,6 +202,14 @@ export declare class DiffFile {
 		isFullMerge: boolean;
 	};
 	mergeBundle: (data: ReturnType<DiffFile["getBundle"]>, notifyUpdate?: boolean) => void;
+	/**
+	 *
+	 * @param start start lineNumber
+	 * @param end end lineNumber
+	 * @param side range side
+	 * @returns a new instance can only show the content from start to end
+	 */
+	generateInstanceFromLineNumberRange: (start: number, end: number, side?: SplitSide) => DiffFile;
 	_getHighlighterName: () => string;
 	_getHighlighterType: () => string;
 	_getIsPureDiffRender: () => boolean;
diff --git a/packages/solid/index.d.ts b/packages/solid/index.d.ts
@@ -202,6 +202,14 @@ export declare class DiffFile {
 		isFullMerge: boolean;
 	};
 	mergeBundle: (data: ReturnType<DiffFile["getBundle"]>, notifyUpdate?: boolean) => void;
+	/**
+	 *
+	 * @param start start lineNumber
+	 * @param end end lineNumber
+	 * @param side range side
+	 * @returns a new instance can only show the content from start to end
+	 */
+	generateInstanceFromLineNumberRange: (start: number, end: number, side?: SplitSide) => DiffFile;
 	_getHighlighterName: () => string;
 	_getHighlighterType: () => string;
 	_getIsPureDiffRender: () => boolean;
diff --git a/packages/vue/index.d.ts b/packages/vue/index.d.ts
@@ -202,6 +202,14 @@ export declare class DiffFile {
 		isFullMerge: boolean;
 	};
 	mergeBundle: (data: ReturnType<DiffFile["getBundle"]>, notifyUpdate?: boolean) => void;
+	/**
+	 *
+	 * @param start start lineNumber
+	 * @param end end lineNumber
+	 * @param side range side
+	 * @returns a new instance can only show the content from start to end
+	 */
+	generateInstanceFromLineNumberRange: (start: number, end: number, side?: SplitSide) => DiffFile;
 	_getHighlighterName: () => string;
 	_getHighlighterType: () => string;
 	_getIsPureDiffRender: () => boolean;
diff --git a/ui/react-example/src/views/PlayGround/PlayGroundFileDiff.tsx b/ui/react-example/src/views/PlayGround/PlayGroundFileDiff.tsx
@@ -6,7 +6,7 @@ import {
   getMaxLengthToIgnoreLineDiff,
   changeMaxLengthToIgnoreLineDiff,
 } from "@git-diff-view/react";
-import { useMantineColorScheme, Code, Button, Switch, NumberInput, Tooltip } from "@mantine/core";
+import { useMantineColorScheme, Code, Button, Switch, NumberInput, Tooltip, Divider, Collapse } from "@mantine/core";
 import { useCallbackRef } from "@mantine/hooks";
 import { debounce } from "lodash";
 import { useState, useCallback, useEffect, useMemo } from "react";
@@ -48,6 +48,14 @@ export const PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
 
   const [ignoreWhiteSpace, setIgnoreWhiteSpace] = useState(false);
 
+  const [rangeDiffInstance, setRangeDiffInstance] = useState<DiffFile>();
+
+  const [rangeMode, setRangeMode] = useState(false);
+
+  const [start, setStart] = useState(0);
+
+  const [end, setEnd] = useState(0);
+
   const [fastDiffTemplate, setFastDiffTemplate] = useState(getEnableFastDiffTemplate());
 
   const [file1, setFile1] = useState(initialState.file1);
@@ -71,6 +79,10 @@ export const PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
 
   const setDiffInstanceCb = useCallback(
     debounce((lang1, lang2, file1, file2, ignoreWhiteSpace) => {
+      setRangeMode(false);
+      setStart(0);
+      setEnd(0);
+      setRangeDiffInstance(undefined);
       if (!file1 && !file2) {
         setDiffInstance(undefined);
         return;
@@ -103,6 +115,12 @@ export const PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
     reloadDiffInstance();
   }, [fastDiffTemplate]);
 
+  useEffect(() => {
+    if (diffInstance && start && end) {
+      setRangeDiffInstance(diffInstance.generateInstanceFromLineNumberRange(start, end));
+    }
+  }, [diffInstance, start, end]);
+
   const handleShare = useCallback(async () => {
     try {
       const success = await copyToClipboard(window.location.href);
@@ -121,11 +139,32 @@ export const PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
 
   return (
     <div className="m-auto mb-[1em] mt-[1em] w-[90%]">
+      <div className="flex items-center gap-x-6">
+        <Button onClick={onClick}>Go to `Git diff` mode</Button>
+        <Tooltip
+          label={
+            shareStatus === "copied"
+              ? "Copied!"
+              : shareStatus === "error"
+                ? "Failed to copy"
+                : "Copy share URL to clipboard"
+          }
+        >
+          <Button
+            variant={shareStatus === "copied" ? "filled" : "outline"}
+            color={shareStatus === "error" ? "red" : shareStatus === "copied" ? "green" : undefined}
+            onClick={handleShare}
+          >
+            {shareStatus === "copied" ? "Copied!" : shareStatus === "error" ? "Error" : "Share"}
+          </Button>
+        </Tooltip>
+      </div>
+      <Divider className="my-2" />
       <h2 className="flex flex-wrap gap-x-8 gap-y-4 text-[24px]">
         <span>
-          <Code className="text-[24px]">File diff</Code> mode
+          <Code className="text-[24px] font-medium">File diff</Code> mode
         </span>
-        <div className="inline-flex gap-x-2 text-[14px]">
+        {/* <div className="inline-flex gap-x-2 text-[14px]">
           <Button onClick={onClick}>Go to `Git diff` mode</Button>
           <Tooltip
             label={
@@ -144,7 +183,7 @@ export const PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
               {shareStatus === "copied" ? "Copied!" : shareStatus === "error" ? "Error" : "Share"}
             </Button>
           </Tooltip>
-        </div>
+        </div> */}
         <div className="inline-flex items-center gap-x-4">
           <Switch
             checked={ignoreWhiteSpace}
@@ -156,6 +195,11 @@ export const PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
             onChange={(e) => setFastDiffTemplate(e.target.checked)}
             label="Fast Diff Template (better line diff)"
           />
+          <Switch
+            checked={rangeMode}
+            onChange={(e) => setRangeMode(e.target.checked)}
+            label="RangeMode (show part of diff)"
+          />
           <Tooltip label="Ignore line diff when line length over this value">
             <NumberInput
               value={getMaxLengthToIgnoreLineDiff()}
@@ -169,6 +213,28 @@ export const PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
           </Tooltip>
         </div>
       </h2>
+      <Collapse in={rangeMode}>
+        <div className="flex items-center gap-x-6 py-2">
+          <NumberInput
+            value={start}
+            min={0}
+            label="Range Start"
+            max={diffInstance?.splitLineLength}
+            onChange={(n) => {
+              setStart(Number(n));
+            }}
+          />
+          <NumberInput
+            value={end}
+            min={0}
+            label="Range End"
+            max={diffInstance?.splitLineLength}
+            onChange={(n) => {
+              setEnd(Number(n));
+            }}
+          />
+        </div>
+      </Collapse>
       <div className="mt-[10px] flex gap-x-[10px]">
         <div className="flex w-[50%] flex-col gap-y-[10px]">
           <span className="border-color border-b p-[3px]">Lang: </span>
@@ -195,10 +261,10 @@ export const PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
         </div>
       </div>
 
-      {diffInstance ? (
+      {(rangeMode ? rangeDiffInstance : diffInstance) ? (
         <DiffView<string>
           className="border-color mt-[10px] overflow-hidden rounded-[4px] border"
-          diffFile={diffInstance}
+          diffFile={(rangeMode ? rangeDiffInstance : diffInstance)!}
           diffViewFontSize={13}
           diffViewTheme={colorScheme === "dark" ? "dark" : "light"}
           diffViewHighlight={true}
diff --git a/ui/react-example/src/views/PlayGround/PlayGroundGitDiff.tsx b/ui/react-example/src/views/PlayGround/PlayGroundGitDiff.tsx
