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

fix(canvas): make compare divider always visible and draggable
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:45:34 +08:00
parent 0933ec4ce9
commit 4480374b63
1 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1557,7 +1557,11 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
{isCompareMode && hasCompareSource ? (
<div
ref={compareFrameRef}
className="relative h-full w-full overflow-hidden bg-muted/30 select-none"
className={cn(
"relative h-full w-full overflow-hidden bg-muted/30 select-none",
isCompareDragging ? "cursor-col-resize" : "cursor-default"
)}
style={{ touchAction: "none" }}
>
<img
src={data.src}
@ -1579,23 +1583,43 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
/>
</div>
<div
className="absolute inset-y-0 z-20 w-0.5 bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.25)]"
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)]"
style={{ left: `${compareSplitPercent}%`, transform: "translateX(-50%)" }}
/>
<button
type="button"
className="absolute top-1/2 z-30 -translate-y-1/2 rounded-full border border-white/70 bg-black/65 px-2 py-1 text-[10px] text-white"
style={{ left: `${compareSplitPercent}%`, transform: "translate(-50%, -50%)" }}
className="absolute inset-y-0 z-30 w-8 -translate-x-1/2 cursor-col-resize bg-transparent"
style={{ left: `${compareSplitPercent}%` }}
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);
}}
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}%` }}
>
对比
</button>
拖动
</div>
<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>