From 4480374b63920aa01652a7b393aed8fa8eac014c Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 1 Mar 2026 01:45:34 +0800
Subject: [PATCH] fix(canvas): make compare divider always visible and
 draggable

---
 components/canvas/nodes/ImageNode.tsx | 36 ++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index bd9c16fa4..dce455f47 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -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>