mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-28 04:03:05 +00:00
Mohamed Boudra
50623965b4
* perf(app): make diff line wrapping responsive on large changes Wrapping eagerly shaped every expanded line before the viewport could paint. Estimate off-screen heights and measure rows as they enter the window, preserving the scroll anchor as geometry becomes exact. Add shared layout and browser benchmarks to track toggle latency and shaping cost. * fix(app): preserve wrapped diff anchors across bounded relayouts Resizing can move the viewed row outside the old materialization window. Keep its estimated wrap geometry available to anchor resolution, and measure the anchored row in the same layout pass so inaccurate estimates cannot discard the exact fragment or pixel offset.
1192 lines
42 KiB
TypeScript
1192 lines
42 KiB
TypeScript
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { ViewStyle } from "react-native";
|
|
import { DomOverlayScrollbar } from "@/components/ui/overlay-scrollbar/dom-overlay-scrollbar";
|
|
import {
|
|
ContextMenu,
|
|
ContextMenuContent,
|
|
ContextMenuItem,
|
|
ContextMenuSeparator,
|
|
ContextMenuTrigger,
|
|
} from "@/components/ui/context-menu";
|
|
import { useToast } from "@/contexts/toast-context";
|
|
import { useStableEvent } from "@/hooks/use-stable-event";
|
|
import { InlineReviewAddButton, InlineReviewThread } from "@/review";
|
|
import { copyToClipboard } from "@/utils/copy-to-clipboard";
|
|
import type { ReviewableDiffTarget } from "@/utils/diff-layout";
|
|
import { DocumentFileHeader } from "./document-file-header";
|
|
import {
|
|
diffInteractionWindowTop,
|
|
diffMaterializationWindow,
|
|
resolveVisibleFileSections,
|
|
} from "./header-layout";
|
|
import {
|
|
hitTestDiffDocument,
|
|
selectAllSource,
|
|
selectCellSource,
|
|
selectedSourceText,
|
|
} from "./hit-testing";
|
|
import { retainHorizontalOffsetMapForPaths } from "./horizontal-offsets";
|
|
import { HorizontalScroll } from "./horizontal-scroll.web";
|
|
import {
|
|
buildDiffDocumentModel,
|
|
captureScrollAnchor,
|
|
FILE_HEADER_HEIGHT,
|
|
resolveRelayoutScrollTop,
|
|
} from "./model";
|
|
import { paintWebFileHeader, paintWebViewport } from "./paint.web";
|
|
import { hasPointerDragStarted } from "./pointer-gesture";
|
|
import {
|
|
createMeasuredAdvances,
|
|
createAdditiveAdvances,
|
|
createChunkedWidthMeasurer,
|
|
requiresShaping,
|
|
} from "./text-measurement";
|
|
import { retainDiffViewport } from "./viewport";
|
|
import type {
|
|
DiffHit,
|
|
DiffFileSection,
|
|
DiffSelection,
|
|
DiffSurfaceProps,
|
|
DiffTypography,
|
|
TextMeasurer,
|
|
} from "./types";
|
|
import { useDiffDocumentWorkspaceCache } from "./workspace-cache";
|
|
|
|
const DEFAULT_MONO_STACK = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
|
|
const RESIZE_SETTLE_DELAY_MS = 120;
|
|
|
|
interface StickyHeaderCanvasSlot {
|
|
section: HTMLDivElement | null;
|
|
canvas: HTMLCanvasElement | null;
|
|
file: DiffFileSection | null;
|
|
active: boolean;
|
|
width: number;
|
|
ratio: number;
|
|
palette: DiffSurfaceProps["palette"] | null;
|
|
typography: DiffSurfaceProps["headerTypography"] | null;
|
|
}
|
|
|
|
function emptyStickyHeaderCanvasSlot(): StickyHeaderCanvasSlot {
|
|
return {
|
|
section: null,
|
|
canvas: null,
|
|
file: null,
|
|
active: false,
|
|
width: 0,
|
|
ratio: 0,
|
|
palette: null,
|
|
typography: null,
|
|
};
|
|
}
|
|
|
|
export function DiffSurface(props: DiffSurfaceProps) {
|
|
const { t } = useTranslation();
|
|
const toast = useToast();
|
|
const workspaceCache = useDiffDocumentWorkspaceCache();
|
|
const rootRef = useRef<HTMLDivElement>(null);
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
const stickyHeaderSlotsRef = useRef<[StickyHeaderCanvasSlot, StickyHeaderCanvasSlot]>([
|
|
emptyStickyHeaderCanvasSlot(),
|
|
emptyStickyHeaderCanvasSlot(),
|
|
]);
|
|
const canvasScratchRef = useRef<HTMLCanvasElement>(null);
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const modelRef = useRef<ReturnType<typeof buildDiffDocumentModel> | null>(null);
|
|
const previousModelRef = useRef<ReturnType<typeof buildDiffDocumentModel> | null>(null);
|
|
const consumedFocusRef = useRef<string | null>(null);
|
|
const scrollTopRef = useRef(0);
|
|
const horizontalOffsetsRef = useRef(new Map<string, number>());
|
|
const selectionRef = useRef<DiffSelection | null>(null);
|
|
const dragRef = useRef<{
|
|
anchor: DiffSelection["anchor"];
|
|
startX: number;
|
|
startY: number;
|
|
moved: boolean;
|
|
dismissSelectionOnClick: boolean;
|
|
} | null>(null);
|
|
const frameRef = useRef<number | null>(null);
|
|
const activeHeaderPathRef = useRef<string | null>(null);
|
|
const resizeSettleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const resizeReleaseFrameRef = useRef<number | null>(null);
|
|
const resizePointerActiveRef = useRef(false);
|
|
const pendingViewportRef = useRef({ width: 0, height: 0 });
|
|
const forcePaintRef = useRef(true);
|
|
const canvasWindowRef = useRef({ top: 0, height: 0 });
|
|
const [viewport, setViewport] = useState({ width: 0, height: 0 });
|
|
const [fileWindowTop, setFileWindowTop] = useState(0);
|
|
const [interactionFiles, setInteractionFiles] = useState<
|
|
ReturnType<typeof buildDiffDocumentModel>["files"]
|
|
>([]);
|
|
const [hasSelection, setHasSelection] = useState(false);
|
|
const [contextHit, setContextHit] = useState<Extract<DiffHit, { kind: "cell" }> | null>(null);
|
|
const [hoveredAffordance, setHoveredAffordance] = useState<{
|
|
hit: Extract<DiffHit, { kind: "cell" }>;
|
|
left: number;
|
|
top: number;
|
|
} | null>(null);
|
|
const hasHoveredAffordanceRef = useRef(false);
|
|
const family = props.displayPreferences.monoFontFamily.trim() || DEFAULT_MONO_STACK;
|
|
useLayoutEffect(() => {
|
|
const stats = (window as typeof window & { __PASEO_DIFF_REACT_STATS__?: { commits: number } })
|
|
.__PASEO_DIFF_REACT_STATS__;
|
|
if (stats) stats.commits += 1;
|
|
});
|
|
const desiredTypography = useMemo<DiffTypography>(
|
|
() => ({
|
|
family,
|
|
size: props.displayPreferences.codeFontSize,
|
|
lineHeight: Math.round(props.displayPreferences.codeFontSize * 1.5),
|
|
}),
|
|
[family, props.displayPreferences.codeFontSize],
|
|
);
|
|
const typographyResource = useMemo(
|
|
() =>
|
|
workspaceCache.typography({
|
|
typography: desiredTypography,
|
|
load: async () => {
|
|
await Promise.all([
|
|
document.fonts.load(`400 ${desiredTypography.size}px ${desiredTypography.family}`),
|
|
document.fonts.load(`600 ${desiredTypography.size}px ${desiredTypography.family}`),
|
|
document.fonts.load(
|
|
`400 ${props.headerTypography.size}px ${props.headerTypography.family}`,
|
|
),
|
|
document.fonts.load(
|
|
`400 ${props.headerTypography.statSize}px ${props.headerTypography.family}`,
|
|
),
|
|
]);
|
|
await document.fonts.ready;
|
|
},
|
|
createMeasurer: () => createWebTextMeasurer(desiredTypography),
|
|
}),
|
|
[desiredTypography, props.headerTypography, workspaceCache],
|
|
);
|
|
const [readyTypographyResource, setReadyTypographyResource] = useState<ReturnType<
|
|
typeof workspaceCache.typography
|
|
> | null>(() => (typographyResource.isReady() ? typographyResource : null));
|
|
const loadedTypography =
|
|
readyTypographyResource === typographyResource ? typographyResource.typography : null;
|
|
const measurement =
|
|
readyTypographyResource === typographyResource ? typographyResource.measureText : null;
|
|
const reviewActions = props.mode.kind === "working" ? props.mode.reviewActions : undefined;
|
|
const model = useMemo(() => {
|
|
if (!loadedTypography || !measurement) {
|
|
return emptyDiffDocumentModel({
|
|
layout: props.displayPreferences.layout,
|
|
wrapLines: props.displayPreferences.wrapLines,
|
|
viewportWidth: viewport.width,
|
|
lineHeight: desiredTypography.lineHeight,
|
|
});
|
|
}
|
|
const next = workspaceCache.buildModel({
|
|
files: props.files,
|
|
collapsedFilePaths: props.collapsedFilePaths,
|
|
layout: props.displayPreferences.layout,
|
|
wrapLines: props.displayPreferences.wrapLines,
|
|
viewportWidth: viewport.width,
|
|
typography: loadedTypography,
|
|
measureText: measurement,
|
|
palette: props.palette,
|
|
reviewActions,
|
|
labels: {
|
|
binary: t("workspace.git.diff.binaryFile"),
|
|
tooLarge: t("workspace.git.diff.tooLarge"),
|
|
},
|
|
materializationWindow: diffMaterializationWindow(fileWindowTop, viewport.height),
|
|
materializationAnchor: previousModelRef.current
|
|
? captureScrollAnchor(previousModelRef.current, scrollTopRef.current)
|
|
: null,
|
|
});
|
|
return next;
|
|
}, [
|
|
fileWindowTop,
|
|
measurement,
|
|
props.collapsedFilePaths,
|
|
props.displayPreferences.layout,
|
|
props.displayPreferences.wrapLines,
|
|
props.files,
|
|
props.palette,
|
|
reviewActions,
|
|
t,
|
|
desiredTypography.lineHeight,
|
|
loadedTypography,
|
|
viewport.width,
|
|
viewport.height,
|
|
workspaceCache,
|
|
]);
|
|
modelRef.current = model;
|
|
|
|
const paintStickyHeaderPool = useCallback(
|
|
(currentModel: ReturnType<typeof buildDiffDocumentModel>, scrollTop: number) => {
|
|
const stickyFile = resolveVisibleFileSections({
|
|
files: currentModel.files,
|
|
scrollTop,
|
|
viewportHeight: Math.max(1, viewport.height),
|
|
overscan: 0,
|
|
}).sticky?.file;
|
|
const pooledFiles = stickyFile
|
|
? [stickyFile, currentModel.files[stickyFile.fileIndex + 1]].filter(
|
|
(file): file is DiffFileSection => file !== undefined,
|
|
)
|
|
: [];
|
|
const ratio = window.devicePixelRatio || 1;
|
|
|
|
for (const [slotIndex, slot] of stickyHeaderSlotsRef.current.entries()) {
|
|
const file = pooledFiles.find((candidate) => candidate.fileIndex % 2 === slotIndex) ?? null;
|
|
const { section, canvas } = slot;
|
|
if (!section || !canvas) continue;
|
|
if (!file) {
|
|
section.style.display = "none";
|
|
slot.file = null;
|
|
continue;
|
|
}
|
|
|
|
section.style.display = "block";
|
|
section.style.top = `${file.top}px`;
|
|
section.style.height = `${file.bottom - file.top}px`;
|
|
section.dataset.diffStickyHeaderPath = file.path;
|
|
const active = activeHeaderPathRef.current === file.path;
|
|
const canReusePaint =
|
|
slot.file === file &&
|
|
slot.active === active &&
|
|
slot.width === viewport.width &&
|
|
slot.ratio === ratio &&
|
|
slot.palette === props.palette &&
|
|
slot.typography === props.headerTypography;
|
|
if (canReusePaint) continue;
|
|
|
|
const pixelWidth = Math.ceil(viewport.width * ratio);
|
|
const pixelHeight = Math.ceil(FILE_HEADER_HEIGHT * ratio);
|
|
if (canvas.width !== pixelWidth) canvas.width = pixelWidth;
|
|
if (canvas.height !== pixelHeight) canvas.height = pixelHeight;
|
|
canvas.style.width = `${viewport.width}px`;
|
|
canvas.style.height = `${FILE_HEADER_HEIGHT}px`;
|
|
const context = canvas.getContext("2d");
|
|
if (!context) continue;
|
|
context.setTransform(ratio, 0, 0, ratio, 0, 0);
|
|
context.clearRect(0, 0, viewport.width, FILE_HEADER_HEIGHT);
|
|
paintWebFileHeader({
|
|
context,
|
|
file,
|
|
palette: props.palette,
|
|
typography: props.headerTypography,
|
|
viewportWidth: viewport.width,
|
|
y: 0,
|
|
activePath: activeHeaderPathRef.current,
|
|
});
|
|
slot.file = file;
|
|
slot.active = active;
|
|
slot.width = viewport.width;
|
|
slot.ratio = ratio;
|
|
slot.palette = props.palette;
|
|
slot.typography = props.headerTypography;
|
|
}
|
|
},
|
|
[props.headerTypography, props.palette, viewport.height, viewport.width],
|
|
);
|
|
|
|
const paint = useCallback(() => {
|
|
frameRef.current = null;
|
|
const canvas = canvasRef.current;
|
|
const currentModel = modelRef.current;
|
|
if (!canvas || !currentModel || currentModel.viewportWidth <= 0 || viewport.height <= 0) return;
|
|
const desiredHeight = Math.min(
|
|
Math.max(currentModel.height, viewport.height),
|
|
viewport.height * 3,
|
|
);
|
|
const currentWindow = canvasWindowRef.current;
|
|
const viewportTop = scrollTopRef.current;
|
|
const viewportBottom = viewportTop + viewport.height;
|
|
const safeInset = viewport.height / 2;
|
|
const mustRecenter =
|
|
currentWindow.height !== desiredHeight ||
|
|
viewportTop < currentWindow.top + safeInset ||
|
|
viewportBottom > currentWindow.top + currentWindow.height - safeInset;
|
|
if (!forcePaintRef.current && !mustRecenter) return;
|
|
const forceFullPaint = forcePaintRef.current;
|
|
forcePaintRef.current = false;
|
|
const canvasHeight = desiredHeight;
|
|
const ratio = window.devicePixelRatio || 1;
|
|
const requestedCanvasTop = mustRecenter
|
|
? Math.min(
|
|
Math.max(0, viewportTop - viewport.height),
|
|
Math.max(0, currentModel.height - canvasHeight),
|
|
)
|
|
: currentWindow.top;
|
|
const canvasTop = Math.round(requestedCanvasTop * ratio) / ratio;
|
|
canvasWindowRef.current = { top: canvasTop, height: canvasHeight };
|
|
const pixelWidth = Math.ceil(currentModel.viewportWidth * ratio);
|
|
const pixelHeight = Math.ceil(canvasHeight * ratio);
|
|
const resized = canvas.width !== pixelWidth || canvas.height !== pixelHeight;
|
|
if (canvas.width !== pixelWidth) canvas.width = pixelWidth;
|
|
if (canvas.height !== pixelHeight) canvas.height = pixelHeight;
|
|
canvas.style.width = `${currentModel.viewportWidth}px`;
|
|
canvas.style.top = `${canvasTop}px`;
|
|
canvas.style.height = `${canvasHeight}px`;
|
|
const context = canvas.getContext("2d");
|
|
if (!context) return;
|
|
if (!measurement || !loadedTypography) return;
|
|
const { paintTop, paintHeight } = shiftCanvasPixels({
|
|
canvas,
|
|
scratch:
|
|
canvasScratchRef.current ?? (canvasScratchRef.current = document.createElement("canvas")),
|
|
context,
|
|
currentTop: currentWindow.top,
|
|
nextTop: canvasTop,
|
|
canvasHeight,
|
|
pixelWidth,
|
|
pixelHeight,
|
|
ratio,
|
|
canReuse: !forceFullPaint && !resized && currentWindow.height === canvasHeight,
|
|
});
|
|
paintWebViewport({
|
|
context,
|
|
model: currentModel,
|
|
palette: props.palette,
|
|
typography: loadedTypography,
|
|
headerTypography: props.headerTypography,
|
|
measureText: measurement,
|
|
scrollTop: canvasTop,
|
|
viewportWidth: currentModel.viewportWidth,
|
|
viewportHeight: canvasHeight,
|
|
horizontalOffsets: horizontalOffsetsRef.current,
|
|
selection: selectionRef.current,
|
|
activeHeaderPath: activeHeaderPathRef.current,
|
|
devicePixelRatio: ratio,
|
|
paintTop,
|
|
paintHeight,
|
|
});
|
|
}, [loadedTypography, measurement, props.headerTypography, props.palette, viewport.height]);
|
|
const schedulePaint = useCallback(
|
|
(force = true) => {
|
|
if (force) forcePaintRef.current = true;
|
|
if (frameRef.current === null) frameRef.current = requestAnimationFrame(paint);
|
|
},
|
|
[paint],
|
|
);
|
|
useLayoutEffect(() => {
|
|
const root = rootRef.current;
|
|
if (!root) return;
|
|
const commitPendingViewport = () =>
|
|
setViewport((current) => retainDiffViewport(current, pendingViewportRef.current));
|
|
const clearResizeSettleTimer = () => {
|
|
if (resizeSettleTimerRef.current === null) return;
|
|
clearTimeout(resizeSettleTimerRef.current);
|
|
resizeSettleTimerRef.current = null;
|
|
};
|
|
const handlePointerDown = () => {
|
|
resizePointerActiveRef.current = true;
|
|
clearResizeSettleTimer();
|
|
};
|
|
const handlePointerEnd = () => {
|
|
if (!resizePointerActiveRef.current) return;
|
|
resizePointerActiveRef.current = false;
|
|
if (resizeReleaseFrameRef.current !== null) {
|
|
cancelAnimationFrame(resizeReleaseFrameRef.current);
|
|
}
|
|
resizeReleaseFrameRef.current = requestAnimationFrame(() => {
|
|
resizeReleaseFrameRef.current = null;
|
|
commitPendingViewport();
|
|
});
|
|
};
|
|
const observer = new ResizeObserver(([entry]) => {
|
|
if (!entry) return;
|
|
const nextViewport = { width: entry.contentRect.width, height: entry.contentRect.height };
|
|
pendingViewportRef.current = nextViewport;
|
|
if (resizePointerActiveRef.current) return;
|
|
setViewport((currentViewport) =>
|
|
currentViewport.width > 0 && currentViewport.height > 0
|
|
? currentViewport
|
|
: retainDiffViewport(currentViewport, nextViewport),
|
|
);
|
|
clearResizeSettleTimer();
|
|
resizeSettleTimerRef.current = setTimeout(() => {
|
|
resizeSettleTimerRef.current = null;
|
|
commitPendingViewport();
|
|
}, RESIZE_SETTLE_DELAY_MS);
|
|
});
|
|
observer.observe(root);
|
|
window.addEventListener("pointerdown", handlePointerDown, { capture: true });
|
|
window.addEventListener("pointerup", handlePointerEnd, { capture: true });
|
|
window.addEventListener("pointercancel", handlePointerEnd, { capture: true });
|
|
return () => {
|
|
observer.disconnect();
|
|
clearResizeSettleTimer();
|
|
if (resizeReleaseFrameRef.current !== null)
|
|
cancelAnimationFrame(resizeReleaseFrameRef.current);
|
|
window.removeEventListener("pointerdown", handlePointerDown, { capture: true });
|
|
window.removeEventListener("pointerup", handlePointerEnd, { capture: true });
|
|
window.removeEventListener("pointercancel", handlePointerEnd, { capture: true });
|
|
};
|
|
}, []);
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
if (typographyResource.isReady()) {
|
|
setReadyTypographyResource(typographyResource);
|
|
return;
|
|
}
|
|
setReadyTypographyResource(null);
|
|
void typographyResource.load().then(() => {
|
|
if (!cancelled) setReadyTypographyResource(typographyResource);
|
|
return undefined;
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [typographyResource]);
|
|
useLayoutEffect(() => {
|
|
const previous = previousModelRef.current;
|
|
const scroll = scrollRef.current;
|
|
if (previous && scroll && previous !== model) {
|
|
const nextScrollTop = resolveRelayoutScrollTop(previous, model, scroll.scrollTop);
|
|
scrollTopRef.current = nextScrollTop;
|
|
scroll.scrollTop = nextScrollTop;
|
|
}
|
|
previousModelRef.current = model;
|
|
}, [model]);
|
|
useLayoutEffect(() => {
|
|
horizontalOffsetsRef.current = retainHorizontalOffsetMapForPaths(
|
|
horizontalOffsetsRef.current,
|
|
props.files.map((file) => file.path),
|
|
);
|
|
}, [props.files]);
|
|
const updateInteractionFiles = useCallback(
|
|
(scrollTop: number) => {
|
|
const windowTop = diffInteractionWindowTop(scrollTop, viewport.height);
|
|
setFileWindowTop((current) => (current === windowTop ? current : windowTop));
|
|
const next = resolveVisibleFileSections({
|
|
files: model.files,
|
|
scrollTop: windowTop,
|
|
viewportHeight: viewport.height,
|
|
overscan: viewport.height * 2,
|
|
}).files;
|
|
setInteractionFiles((current) =>
|
|
current.length === next.length && current[0] === next[0] && current.at(-1) === next.at(-1)
|
|
? current
|
|
: next,
|
|
);
|
|
},
|
|
[model.files, viewport.height],
|
|
);
|
|
useLayoutEffect(() => {
|
|
schedulePaint();
|
|
paintStickyHeaderPool(model, scrollTopRef.current);
|
|
updateInteractionFiles(scrollTopRef.current);
|
|
}, [model, paintStickyHeaderPool, schedulePaint, updateInteractionFiles]);
|
|
useEffect(
|
|
() => () => {
|
|
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
|
|
// Fast Refresh preserves refs while rerunning effects. Release ownership of the canceled
|
|
// request so the refreshed renderer can schedule its first paint.
|
|
frameRef.current = null;
|
|
},
|
|
[],
|
|
);
|
|
const mode = props.mode;
|
|
const collapsedFilePaths = props.collapsedFilePaths;
|
|
const onToggleFile = props.onToggleFile;
|
|
useEffect(() => {
|
|
if (mode.kind !== "working") return;
|
|
const focusPath = mode.focusPath;
|
|
if (!focusPath) return;
|
|
const requestKey = `${mode.focusRequestId ?? "initial"}:${focusPath}`;
|
|
if (consumedFocusRef.current === requestKey) return;
|
|
if (collapsedFilePaths.has(focusPath)) onToggleFile(focusPath);
|
|
const file = model.files.find((entry) => entry.path === focusPath);
|
|
if (file && scrollRef.current) {
|
|
scrollRef.current.scrollTop = file.top;
|
|
consumedFocusRef.current = requestKey;
|
|
}
|
|
}, [collapsedFilePaths, mode, model.files, onToggleFile]);
|
|
|
|
const handleVerticalScroll = useCallback(
|
|
(scrollElement: HTMLDivElement) => {
|
|
const scrollTop = scrollElement.scrollTop;
|
|
scrollTopRef.current = scrollTop;
|
|
const clearedActiveHeader = activeHeaderPathRef.current !== null;
|
|
if (clearedActiveHeader) {
|
|
activeHeaderPathRef.current = null;
|
|
schedulePaint();
|
|
}
|
|
updateInteractionFiles(scrollTop);
|
|
if (hasHoveredAffordanceRef.current) {
|
|
hasHoveredAffordanceRef.current = false;
|
|
setHoveredAffordance(null);
|
|
}
|
|
const currentModel = modelRef.current;
|
|
if (currentModel) paintStickyHeaderPool(currentModel, scrollTop);
|
|
const currentWindow = canvasWindowRef.current;
|
|
if (!currentModel || currentWindow.height === 0) {
|
|
schedulePaint(false);
|
|
return;
|
|
}
|
|
const viewportBottom = scrollTop + viewport.height;
|
|
const safeInset = viewport.height / 2;
|
|
const crossedSafeInset =
|
|
scrollTop < currentWindow.top + safeInset ||
|
|
viewportBottom > currentWindow.top + currentWindow.height - safeInset;
|
|
if (!crossedSafeInset) return;
|
|
const requestedTop = Math.min(
|
|
Math.max(0, scrollTop - viewport.height),
|
|
Math.max(0, currentModel.height - currentWindow.height),
|
|
);
|
|
const ratio = window.devicePixelRatio || 1;
|
|
const nextTop = Math.round(requestedTop * ratio) / ratio;
|
|
if (nextTop !== currentWindow.top) schedulePaint(false);
|
|
},
|
|
[paintStickyHeaderPool, schedulePaint, updateInteractionFiles, viewport.height],
|
|
);
|
|
useEffect(() => {
|
|
const scroll = scrollRef.current;
|
|
if (!scroll) return;
|
|
const onScroll = () => handleVerticalScroll(scroll);
|
|
scroll.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => scroll.removeEventListener("scroll", onScroll);
|
|
}, [handleVerticalScroll]);
|
|
const handleHorizontalScroll = useCallback(
|
|
(path: string, offset: number) => {
|
|
horizontalOffsetsRef.current.set(path, offset);
|
|
schedulePaint();
|
|
},
|
|
[schedulePaint],
|
|
);
|
|
const pointHitAt = useCallback((clientX: number, clientY: number) => {
|
|
const currentModel = modelRef.current;
|
|
const root = rootRef.current;
|
|
if (!currentModel || !root) return null;
|
|
const bounds = root.getBoundingClientRect();
|
|
const x = clientX - bounds.left;
|
|
const documentY = clientY - bounds.top + scrollTopRef.current;
|
|
const file = currentModel.files.find(
|
|
(entry) => entry.top <= documentY && documentY < entry.bottom,
|
|
);
|
|
return hitTestDiffDocument({
|
|
model: currentModel,
|
|
x,
|
|
documentY,
|
|
horizontalOffset: file ? (horizontalOffsetsRef.current.get(file.path) ?? 0) : 0,
|
|
});
|
|
}, []);
|
|
const pointHit = useCallback(
|
|
(event: React.PointerEvent<HTMLDivElement>) => pointHitAt(event.clientX, event.clientY),
|
|
[pointHitAt],
|
|
);
|
|
const setSelection = useStableEvent((selection: DiffSelection | null) => {
|
|
selectionRef.current = selection;
|
|
const currentModel = modelRef.current;
|
|
setHasSelection(
|
|
Boolean(selection && currentModel && selectedSourceText(currentModel, selection).length > 0),
|
|
);
|
|
schedulePaint();
|
|
});
|
|
// Source and code-layout changes invalidate selection coordinates. A new
|
|
// repaint callback (header typography, palette, viewport height) does not.
|
|
useEffect(() => {
|
|
dragRef.current = null;
|
|
setSelection(null);
|
|
}, [
|
|
props.collapsedFilePaths,
|
|
props.displayPreferences.layout,
|
|
props.files,
|
|
desiredTypography,
|
|
setSelection,
|
|
]);
|
|
const pointerDown = useCallback(
|
|
(event: React.PointerEvent<HTMLDivElement>) => {
|
|
if (event.button !== 0) return;
|
|
const target = event.target;
|
|
if (
|
|
target instanceof Element &&
|
|
target.closest(
|
|
'[data-diff-header="true"], [data-diff-review="true"], [role="menuitem"], button, input, textarea',
|
|
)
|
|
)
|
|
return;
|
|
const dismissSelectionOnClick = selectionRef.current !== null;
|
|
if (dismissSelectionOnClick) {
|
|
setSelection(null);
|
|
}
|
|
const hit = pointHit(event);
|
|
if (hit?.kind !== "cell") return;
|
|
dragRef.current = {
|
|
anchor: hit.position,
|
|
startX: event.clientX,
|
|
startY: event.clientY,
|
|
moved: false,
|
|
dismissSelectionOnClick,
|
|
};
|
|
setSelection({ anchor: hit.position, focus: hit.position });
|
|
event.currentTarget.focus();
|
|
event.currentTarget.setPointerCapture(event.pointerId);
|
|
},
|
|
[pointHit, setSelection],
|
|
);
|
|
const updateActiveHeader = useCallback(
|
|
(target: EventTarget | null) => {
|
|
const header =
|
|
target instanceof Element ? target.closest<HTMLElement>("[data-diff-header]") : null;
|
|
const activeHeaderPath = header?.dataset.diffHeaderPath ?? null;
|
|
if (activeHeaderPathRef.current === activeHeaderPath) return;
|
|
activeHeaderPathRef.current = activeHeaderPath;
|
|
const currentModel = modelRef.current;
|
|
if (currentModel) paintStickyHeaderPool(currentModel, scrollTopRef.current);
|
|
schedulePaint();
|
|
},
|
|
[paintStickyHeaderPool, schedulePaint],
|
|
);
|
|
const pointerMove = useCallback(
|
|
(event: React.PointerEvent<HTMLDivElement>) => {
|
|
updateActiveHeader(event.target);
|
|
const drag = dragRef.current;
|
|
if (drag) {
|
|
drag.moved = hasPointerDragStarted({
|
|
startX: drag.startX,
|
|
startY: drag.startY,
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
alreadyDragging: drag.moved,
|
|
});
|
|
}
|
|
const hit = pointHit(event);
|
|
if (hit?.kind === "cell") {
|
|
const row = modelRef.current?.rows[hit.position.rowIndex];
|
|
const file = modelRef.current?.files[hit.position.fileIndex];
|
|
const sideIndex =
|
|
row?.kind === "line" && row.cells.length === 2 && hit.position.side === "new" ? 1 : 0;
|
|
if (row && file) {
|
|
const columnWidth = viewport.width / (row.kind === "line" ? row.cells.length : 1);
|
|
const gutterBorder = sideIndex * columnWidth + file.gutterWidth;
|
|
const rootBounds = rootRef.current?.getBoundingClientRect();
|
|
const pointerX = rootBounds ? event.clientX - rootBounds.left : Number.NaN;
|
|
if (hit.target && Number.isFinite(pointerX)) {
|
|
hasHoveredAffordanceRef.current = true;
|
|
setHoveredAffordance({
|
|
hit,
|
|
left: gutterBorder - 12,
|
|
top: row.top - scrollTopRef.current + (modelRef.current!.lineHeight - 22) / 2,
|
|
});
|
|
} else {
|
|
hasHoveredAffordanceRef.current = false;
|
|
setHoveredAffordance(null);
|
|
}
|
|
}
|
|
} else {
|
|
hasHoveredAffordanceRef.current = false;
|
|
setHoveredAffordance(null);
|
|
}
|
|
if (!drag || hit?.kind !== "cell") return;
|
|
setSelection({ anchor: drag.anchor, focus: hit.position });
|
|
},
|
|
[pointHit, setSelection, updateActiveHeader, viewport.width],
|
|
);
|
|
const pointerUp = useCallback(
|
|
(event: React.PointerEvent<HTMLDivElement>) => {
|
|
const drag = dragRef.current;
|
|
const hit = pointHit(event);
|
|
dragRef.current = null;
|
|
if (event.currentTarget.hasPointerCapture(event.pointerId)) {
|
|
event.currentTarget.releasePointerCapture(event.pointerId);
|
|
}
|
|
const moved = drag
|
|
? hasPointerDragStarted({
|
|
startX: drag.startX,
|
|
startY: drag.startY,
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
alreadyDragging: drag.moved,
|
|
})
|
|
: false;
|
|
if (drag && !moved && drag.dismissSelectionOnClick) {
|
|
setSelection(null);
|
|
return;
|
|
}
|
|
if (
|
|
event.pointerType === "touch" &&
|
|
drag &&
|
|
!moved &&
|
|
hit?.kind === "cell" &&
|
|
hit.target &&
|
|
reviewActions
|
|
) {
|
|
setSelection(null);
|
|
reviewActions.onStartComment(hit.target);
|
|
}
|
|
},
|
|
[pointHit, reviewActions, setSelection],
|
|
);
|
|
const cancelPointer = useCallback(() => {
|
|
dragRef.current = null;
|
|
}, []);
|
|
const pointerLeave = useCallback(() => updateActiveHeader(null), [updateActiveHeader]);
|
|
const copy = useCallback(
|
|
(event: React.ClipboardEvent<HTMLDivElement>) => {
|
|
if (!selectionRef.current) return;
|
|
event.clipboardData.setData("text/plain", selectedSourceText(model, selectionRef.current));
|
|
event.preventDefault();
|
|
},
|
|
[model],
|
|
);
|
|
const prepareContextMenu = useCallback(
|
|
(event: React.MouseEvent<HTMLDivElement>) => {
|
|
const hit = pointHitAt(event.clientX, event.clientY);
|
|
setContextHit(hit?.kind === "cell" ? hit : null);
|
|
},
|
|
[pointHitAt],
|
|
);
|
|
const writeSourceText = useCallback(
|
|
(text: string) => {
|
|
void copyToClipboard(text)
|
|
.then(() => toast.copied(t("common.states.copied")))
|
|
.catch(() => toast.error(t("common.errors.unableToCopy")));
|
|
},
|
|
[t, toast],
|
|
);
|
|
const copySelectedSource = useCallback(() => {
|
|
const currentModel = modelRef.current;
|
|
const selection = selectionRef.current;
|
|
if (currentModel && selection) writeSourceText(selectedSourceText(currentModel, selection));
|
|
}, [writeSourceText]);
|
|
const copyContextLine = useCallback(() => {
|
|
const currentModel = modelRef.current;
|
|
if (!currentModel || !contextHit) return;
|
|
const selection = selectCellSource(currentModel, contextHit.position);
|
|
writeSourceText(selectedSourceText(currentModel, selection));
|
|
}, [contextHit, writeSourceText]);
|
|
const selectAll = useCallback(() => {
|
|
const currentModel = modelRef.current;
|
|
if (currentModel) {
|
|
setSelection(
|
|
selectAllSource(currentModel, contextHit?.position ?? selectionRef.current?.focus),
|
|
);
|
|
}
|
|
}, [contextHit?.position, setSelection]);
|
|
const keyDown = useCallback(
|
|
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
|
const target = event.target;
|
|
if (
|
|
target instanceof Element &&
|
|
target.closest('input, textarea, [contenteditable="true"]')
|
|
) {
|
|
return;
|
|
}
|
|
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "a") {
|
|
event.preventDefault();
|
|
selectAll();
|
|
return;
|
|
}
|
|
if (event.key === "Escape" && selectionRef.current) {
|
|
event.preventDefault();
|
|
setSelection(null);
|
|
}
|
|
},
|
|
[selectAll, setSelection],
|
|
);
|
|
const rootStyle = useMemo<React.CSSProperties>(
|
|
() => ({ ...ROOT_STYLE, background: props.palette.surface }),
|
|
[props.palette.surface],
|
|
);
|
|
const contentInsetBottom = props.contentInsetBottom ?? 0;
|
|
const contentStyle = useMemo<React.CSSProperties>(
|
|
() => ({
|
|
...CONTENT_STYLE,
|
|
height: Math.max(model.height, viewport.height) + contentInsetBottom,
|
|
}),
|
|
[contentInsetBottom, model.height, viewport.height],
|
|
);
|
|
const affordanceStyle = useMemo<ViewStyle>(
|
|
() => ({
|
|
...AFFORDANCE_STYLE,
|
|
left: hoveredAffordance?.left ?? 0,
|
|
top: hoveredAffordance?.top ?? 0,
|
|
}),
|
|
[hoveredAffordance?.left, hoveredAffordance?.top],
|
|
);
|
|
const addHoveredComment = useCallback(() => {
|
|
const target = hoveredAffordance?.hit.target;
|
|
if (target) reviewActions?.onStartComment(target);
|
|
}, [hoveredAffordance?.hit.target, reviewActions]);
|
|
const canvasStyle = useMemo<React.CSSProperties>(
|
|
() => ({
|
|
...CANVAS_STYLE,
|
|
fontFamily: (loadedTypography ?? desiredTypography).family,
|
|
fontSize: (loadedTypography ?? desiredTypography).size,
|
|
}),
|
|
[desiredTypography, loadedTypography],
|
|
);
|
|
|
|
const surface = (
|
|
<div data-testid="git-diff-canvas-root" ref={rootRef} style={rootStyle}>
|
|
<div
|
|
ref={scrollRef}
|
|
data-testid="git-diff-scroll"
|
|
data-overlay-scrollbar="true"
|
|
tabIndex={0}
|
|
onPointerDown={pointerDown}
|
|
onPointerMove={pointerMove}
|
|
onPointerUp={pointerUp}
|
|
onPointerCancel={cancelPointer}
|
|
onLostPointerCapture={cancelPointer}
|
|
onPointerLeave={pointerLeave}
|
|
onContextMenu={prepareContextMenu}
|
|
onCopy={copy}
|
|
onKeyDown={keyDown}
|
|
style={SCROLL_STYLE}
|
|
>
|
|
<div style={contentStyle} onMouseDown={preventDocumentMouseSelection}>
|
|
<canvas ref={canvasRef} data-testid="git-diff-canvas" style={canvasStyle} />
|
|
<StickyHeaderCanvasSlotView slotsRef={stickyHeaderSlotsRef} slotIndex={0} />
|
|
<StickyHeaderCanvasSlotView slotsRef={stickyHeaderSlotsRef} slotIndex={1} />
|
|
{interactionFiles.map((file) => (
|
|
<WebFileHeaderSection key={file.path} file={file}>
|
|
<DocumentFileHeader
|
|
file={file}
|
|
selectedPath={props.selectedPath}
|
|
mode={props.mode}
|
|
onToggleFile={props.onToggleFile}
|
|
onSelectPath={props.onSelectPath}
|
|
canvasRendered
|
|
/>
|
|
</WebFileHeaderSection>
|
|
))}
|
|
{interactionFiles
|
|
.filter((file) => !file.isCollapsed && !model.wrapLines)
|
|
.map((file) => (
|
|
<HorizontalScroll
|
|
key={file.path}
|
|
file={file}
|
|
initialOffset={horizontalOffsetsRef.current.get(file.path) ?? 0}
|
|
onScroll={handleHorizontalScroll}
|
|
/>
|
|
))}
|
|
{props.mode.kind === "working" && reviewActions
|
|
? model.rows.map((row) => {
|
|
if (row.kind !== "line" || row.reviewHeight === 0) return null;
|
|
const columnWidth = model.viewportWidth / row.cells.length;
|
|
return row.cells.map((cell, index) => {
|
|
if (!cell?.reviewTarget) return null;
|
|
const comments = reviewActions.commentsByTarget.get(cell.reviewTarget.key) ?? [];
|
|
const hasEditor =
|
|
reviewActions.editor?.target.filePath === cell.reviewTarget.filePath &&
|
|
reviewActions.editor.target.side === cell.reviewTarget.side &&
|
|
reviewActions.editor.target.lineNumber === cell.reviewTarget.lineNumber;
|
|
if (comments.length === 0 && !hasEditor) return null;
|
|
return (
|
|
<WebReviewThread
|
|
key={cell.reviewTarget.key}
|
|
target={cell.reviewTarget}
|
|
actions={reviewActions}
|
|
top={row.top + row.height - row.reviewHeight}
|
|
left={index * columnWidth}
|
|
width={columnWidth}
|
|
height={row.reviewHeight}
|
|
pinToViewport={!model.wrapLines}
|
|
/>
|
|
);
|
|
});
|
|
})
|
|
: null}
|
|
</div>
|
|
</div>
|
|
<DomOverlayScrollbar scrollContainerRef={scrollRef} onUserScrollUp={noop} />
|
|
{hoveredAffordance?.hit.target && reviewActions ? (
|
|
<InlineReviewAddButton onPress={addHoveredComment} style={affordanceStyle} />
|
|
) : null}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<ContextMenu>
|
|
<ContextMenuTrigger contextOnly style={CONTEXT_TRIGGER_STYLE}>
|
|
{surface}
|
|
</ContextMenuTrigger>
|
|
<ContextMenuContent align="start" minWidth={180} testID="diff-source-context-menu">
|
|
<ContextMenuItem
|
|
disabled={!hasSelection}
|
|
onSelect={copySelectedSource}
|
|
testID="diff-source-copy-selection"
|
|
>
|
|
{t("common.actions.copy")}
|
|
</ContextMenuItem>
|
|
<ContextMenuItem
|
|
disabled={!contextHit}
|
|
onSelect={copyContextLine}
|
|
testID="diff-source-copy-line"
|
|
>
|
|
{t("common.actions.copyLine")}
|
|
</ContextMenuItem>
|
|
<ContextMenuSeparator />
|
|
<ContextMenuItem onSelect={selectAll} testID="diff-source-select-all">
|
|
{t("common.actions.selectAll")}
|
|
</ContextMenuItem>
|
|
</ContextMenuContent>
|
|
</ContextMenu>
|
|
);
|
|
}
|
|
|
|
function StickyHeaderCanvasSlotView({
|
|
slotsRef,
|
|
slotIndex,
|
|
}: {
|
|
slotsRef: React.RefObject<[StickyHeaderCanvasSlot, StickyHeaderCanvasSlot]>;
|
|
slotIndex: 0 | 1;
|
|
}) {
|
|
const setSection = useCallback(
|
|
(section: HTMLDivElement | null) => {
|
|
slotsRef.current[slotIndex].section = section;
|
|
},
|
|
[slotIndex, slotsRef],
|
|
);
|
|
const setCanvas = useCallback(
|
|
(canvas: HTMLCanvasElement | null) => {
|
|
slotsRef.current[slotIndex].canvas = canvas;
|
|
},
|
|
[slotIndex, slotsRef],
|
|
);
|
|
return (
|
|
<div ref={setSection} style={STICKY_CANVAS_SECTION_STYLE}>
|
|
<canvas
|
|
ref={setCanvas}
|
|
data-testid={`git-diff-sticky-header-${slotIndex}`}
|
|
style={STICKY_CANVAS_STYLE}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function shiftCanvasPixels(input: {
|
|
canvas: HTMLCanvasElement;
|
|
scratch: HTMLCanvasElement;
|
|
context: CanvasRenderingContext2D;
|
|
currentTop: number;
|
|
nextTop: number;
|
|
canvasHeight: number;
|
|
pixelWidth: number;
|
|
pixelHeight: number;
|
|
ratio: number;
|
|
canReuse: boolean;
|
|
}): { paintTop: number; paintHeight: number } {
|
|
const delta = input.nextTop - input.currentTop;
|
|
if (!input.canReuse || delta === 0 || Math.abs(delta) >= input.canvasHeight) {
|
|
return { paintTop: 0, paintHeight: input.canvasHeight };
|
|
}
|
|
const deltaPixels = Math.round(Math.abs(delta) * input.ratio);
|
|
const overlapPixels = input.pixelHeight - deltaPixels;
|
|
if (input.scratch.width !== input.pixelWidth) input.scratch.width = input.pixelWidth;
|
|
if (input.scratch.height !== input.pixelHeight) input.scratch.height = input.pixelHeight;
|
|
const scratchContext = input.scratch.getContext("2d");
|
|
if (!scratchContext) return { paintTop: 0, paintHeight: input.canvasHeight };
|
|
scratchContext.setTransform(1, 0, 0, 1, 0, 0);
|
|
scratchContext.globalCompositeOperation = "copy";
|
|
scratchContext.drawImage(input.canvas, 0, 0);
|
|
input.context.setTransform(1, 0, 0, 1, 0, 0);
|
|
if (delta > 0) {
|
|
input.context.drawImage(
|
|
input.scratch,
|
|
0,
|
|
deltaPixels,
|
|
input.pixelWidth,
|
|
overlapPixels,
|
|
0,
|
|
0,
|
|
input.pixelWidth,
|
|
overlapPixels,
|
|
);
|
|
return { paintTop: input.canvasHeight - Math.abs(delta), paintHeight: Math.abs(delta) };
|
|
}
|
|
input.context.drawImage(
|
|
input.scratch,
|
|
0,
|
|
0,
|
|
input.pixelWidth,
|
|
overlapPixels,
|
|
0,
|
|
deltaPixels,
|
|
input.pixelWidth,
|
|
overlapPixels,
|
|
);
|
|
return { paintTop: 0, paintHeight: Math.abs(delta) };
|
|
}
|
|
|
|
function WebFileHeaderSection({
|
|
file,
|
|
children,
|
|
}: {
|
|
file: ReturnType<typeof buildDiffDocumentModel>["files"][number];
|
|
children: React.ReactNode;
|
|
}) {
|
|
const style = useMemo<React.CSSProperties>(
|
|
() => ({ ...FILE_SECTION_STYLE, top: file.top, height: file.bottom - file.top }),
|
|
[file.bottom, file.top],
|
|
);
|
|
return (
|
|
<div style={style} onContextMenu={stopContextMenuPropagation}>
|
|
<div
|
|
data-diff-header="true"
|
|
data-diff-header-path={file.path}
|
|
style={STICKY_HEADER_STYLE}
|
|
onMouseDown={preventDocumentMouseSelection}
|
|
>
|
|
{children}
|
|
</div>
|
|
<div data-testid={`diff-file-${file.fileIndex}-body`} style={BODY_MARKER_STYLE} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function preventDocumentMouseSelection(event: React.MouseEvent): void {
|
|
if (event.detail < 2) return;
|
|
const target = event.target;
|
|
if (target instanceof Element && target.closest('[data-diff-review="true"]')) return;
|
|
event.preventDefault();
|
|
window.getSelection()?.removeAllRanges();
|
|
}
|
|
|
|
function WebReviewThread({
|
|
target,
|
|
actions,
|
|
top,
|
|
left,
|
|
width,
|
|
height,
|
|
pinToViewport,
|
|
}: {
|
|
target: ReviewableDiffTarget;
|
|
actions: NonNullable<Extract<DiffSurfaceProps["mode"], { kind: "working" }>["reviewActions"]>;
|
|
top: number;
|
|
left: number;
|
|
width: number;
|
|
height: number;
|
|
pinToViewport: boolean;
|
|
}) {
|
|
const style = useMemo<React.CSSProperties>(
|
|
() => ({ ...REVIEW_STYLE, top, left, width, height }),
|
|
[height, left, top, width],
|
|
);
|
|
return (
|
|
<div style={style} data-diff-review="true" onContextMenu={stopContextMenuPropagation}>
|
|
<InlineReviewThread
|
|
reviewTarget={target}
|
|
reviewActions={actions}
|
|
height={height}
|
|
viewportWidth={width}
|
|
pinToViewport={pinToViewport}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function stopContextMenuPropagation(event: React.MouseEvent): void {
|
|
event.stopPropagation();
|
|
}
|
|
|
|
const ROOT_STYLE: React.CSSProperties = {
|
|
position: "relative",
|
|
flex: 1,
|
|
minHeight: 0,
|
|
overflow: "hidden",
|
|
};
|
|
const CONTEXT_TRIGGER_STYLE: ViewStyle = { flex: 1, minHeight: 0 };
|
|
const SCROLL_STYLE: React.CSSProperties = {
|
|
position: "absolute",
|
|
inset: 0,
|
|
zIndex: 2,
|
|
overflowY: "auto",
|
|
overflowX: "hidden",
|
|
scrollbarWidth: "none",
|
|
cursor: "text",
|
|
};
|
|
|
|
function noop(): void {}
|
|
const CONTENT_STYLE: React.CSSProperties = {
|
|
position: "relative",
|
|
width: "100%",
|
|
userSelect: "none",
|
|
};
|
|
const FILE_SECTION_STYLE: React.CSSProperties = {
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: 3,
|
|
pointerEvents: "none",
|
|
userSelect: "none",
|
|
};
|
|
const STICKY_CANVAS_SECTION_STYLE: React.CSSProperties = {
|
|
position: "absolute",
|
|
display: "none",
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: 2,
|
|
pointerEvents: "none",
|
|
};
|
|
const STICKY_CANVAS_STYLE: React.CSSProperties = {
|
|
position: "sticky",
|
|
top: 0,
|
|
display: "block",
|
|
pointerEvents: "none",
|
|
};
|
|
const STICKY_HEADER_STYLE: React.CSSProperties = {
|
|
position: "sticky",
|
|
top: 0,
|
|
pointerEvents: "auto",
|
|
userSelect: "none",
|
|
};
|
|
const BODY_MARKER_STYLE: React.CSSProperties = {
|
|
position: "absolute",
|
|
top: FILE_HEADER_HEIGHT,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
pointerEvents: "none",
|
|
};
|
|
const REVIEW_STYLE: React.CSSProperties = { position: "absolute", zIndex: 4, userSelect: "text" };
|
|
const CANVAS_STYLE: React.CSSProperties = {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
zIndex: 1,
|
|
pointerEvents: "none",
|
|
};
|
|
const AFFORDANCE_STYLE: ViewStyle = {
|
|
position: "absolute",
|
|
zIndex: 5,
|
|
};
|
|
|
|
function emptyDiffDocumentModel(input: {
|
|
layout: "unified" | "split";
|
|
wrapLines: boolean;
|
|
viewportWidth: number;
|
|
lineHeight: number;
|
|
}): ReturnType<typeof buildDiffDocumentModel> {
|
|
return {
|
|
files: [],
|
|
rows: [],
|
|
height: 0,
|
|
lineHeight: input.lineHeight,
|
|
layout: input.layout,
|
|
wrapLines: input.wrapLines,
|
|
viewportWidth: input.viewportWidth,
|
|
reviewGeometryKey: "",
|
|
};
|
|
}
|
|
|
|
function createWebTextMeasurer(typography: DiffTypography): TextMeasurer {
|
|
const canvas = document.createElement("canvas");
|
|
const context = canvas.getContext("2d");
|
|
if (!context) return { measure: () => 0 };
|
|
const measure = (text: string, weight: "regular" | "semibold" = "regular") => {
|
|
context.font = `${weight === "semibold" ? 600 : 400} ${typography.size}px ${typography.family}`;
|
|
return context.measureText(text).width;
|
|
};
|
|
// Canvas exposes no glyph coverage, so `requiresShaping` alone decides which
|
|
// runs a shaper has to see -- there is no `glyphIds` to fall back on.
|
|
const additive = createAdditiveAdvances(measure);
|
|
return {
|
|
measure,
|
|
measureAdvances: createMeasuredAdvances(measure),
|
|
measureWidth: createChunkedWidthMeasurer((graphemes) => {
|
|
const text = graphemes.join("");
|
|
return requiresShaping(text) ? measure(text) : (additive(graphemes).at(-1) ?? 0);
|
|
}),
|
|
};
|
|
}
|