From d0a214d30916c6bdea333535e3536f195579ff40 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 1 Mar 2026 01:50:07 +0800
Subject: [PATCH] fix(canvas): implement true before-after split drag
 interaction

---
 components/canvas/nodes/ImageNode.tsx | 72 +++++++++++++++------------
 1 file changed, 41 insertions(+), 31 deletions(-)

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