lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(canvas): implement true before-after split drag interaction
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-03-01 01:50:07 +08:00
parent 4480374b63
commit d0a214d309
1 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
components/canvas/nodes/ImageNode.tsx
View File

@ -350,6 +350,11 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
setCompareSplitPercent(clampedPercent);
}, []);
const startCompareDrag = useCallback((clientX: number) => {
setIsCompareDragging(true);
updateCompareSplitByClientX(clientX);
}, [updateCompareSplitByClientX]);
useEffect(() => {
if (!isCompareDragging) return;
@ -1562,64 +1567,69 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
isCompareDragging ? "cursor-col-resize" : "cursor-default"
)}
style={{ touchAction: "none" }}
data-canvas-no-drag="true"
onPointerDown={(event) => {
if (event.button !== 0) return;
event.preventDefault();
event.stopPropagation();
event.currentTarget.setPointerCapture(event.pointerId);
startCompareDrag(event.clientX);
}}
onPointerMove={(event) => {
if (!isCompareDragging) return;
event.preventDefault();
event.stopPropagation();
updateCompareSplitByClientX(event.clientX);
}}
onPointerUp={(event) => {
if (!isCompareDragging) return;
event.preventDefault();
event.stopPropagation();
setIsCompareDragging(false);
}}
onPointerCancel={() => {
setIsCompareDragging(false);
}}
>
<img
src={data.src}
alt={displayTitle}
className="h-full w-full object-contain"
src={compareSource}
alt={`${displayTitle}-原图`}
className="absolute inset-0 h-full w-full object-contain"
draggable={false}
/>
<div
className="pointer-events-none absolute inset-0 overflow-hidden"
style={{
clipPath: `inset(0 ${100 - compareSplitPercent}% 0 0)`,
clipPath: `inset(0 0 0 ${compareSplitPercent}%)`,
}}
>
<img
src={compareSource}
alt={`${displayTitle}-原图`}
src={data.src}
alt={displayTitle}
className="h-full w-full object-contain"
draggable={false}
/>
</div>
<div
className="pointer-events-none absolute inset-y-0 z-20 w-0.5 bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.5)]"
className="pointer-events-none absolute inset-y-0 z-30 w-[2px] bg-white/90 shadow-[0_0_0_1px_rgba(0,0,0,0.45),0_0_14px_rgba(255,255,255,0.55)]"
style={{ left: `${compareSplitPercent}%`, transform: "translateX(-50%)" }}
/>
<button
type="button"
className="absolute inset-y-0 z-30 w-8 -translate-x-1/2 cursor-col-resize bg-transparent"
style={{ left: `${compareSplitPercent}%` }}
className="absolute top-1/2 z-40 h-7 w-7 -translate-x-1/2 -translate-y-1/2 cursor-col-resize rounded-full border border-white/85 bg-black/70 text-white"
style={{ left: `${compareSplitPercent}%`, touchAction: "none" }}
data-canvas-no-drag="true"
onPointerDown={(event) => {
event.preventDefault();
event.stopPropagation();
event.currentTarget.setPointerCapture(event.pointerId);
setIsCompareDragging(true);
updateCompareSplitByClientX(event.clientX);
}}
onPointerMove={(event) => {
if (!isCompareDragging) return;
event.preventDefault();
event.stopPropagation();
updateCompareSplitByClientX(event.clientX);
}}
onPointerUp={(event) => {
event.preventDefault();
event.stopPropagation();
setIsCompareDragging(false);
}}
onPointerCancel={() => {
setIsCompareDragging(false);
startCompareDrag(event.clientX);
}}
title="拖动中线查看对比"
aria-label="拖动中线查看对比"
/>
<div
className="pointer-events-none absolute top-1/2 z-40 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/80 bg-black/70 px-2 py-1 text-[10px] text-white"
style={{ left: `${compareSplitPercent}%` }}
>
拖动
</div>
&lt;&gt;
</button>
<div className="pointer-events-none absolute left-2 top-2 rounded bg-black/55 px-1.5 py-0.5 text-[10px] text-white">
原图
</div>