Merge pull request #49 from ysgk/fix-slide-view

Fix a mix-up between before and after images in the slide view
reg-viz · Apr 12, 2024 · 7649320 · 7649320
2 parents a1f2a4b + af68b69
commit 7649320
Showing 1 changed file with 24 additions and 24 deletions.
diff --git a/src/components/Viewer/internal/ComparisonView/Slide.tsx b/src/components/Viewer/internal/ComparisonView/Slide.tsx
@@ -48,11 +48,11 @@ const View = styled.div`
 
 const Before = styled(View)`
   z-index: 0;
-  transform: translate(0, 0);
 `;
 
 const After = styled(View)`
   z-index: 1;
+  transform: translate(0, 0);
 `;
 
 const Handle = styled.span`
@@ -182,38 +182,38 @@ export const Slide: React.FC<Props> = ({
           onChange={handleChange}
         />
 
+        <Before
+          style={{
+            width: image.before.width,
+            height: image.before.height,
+          }}
+        >
+          <Image
+            ref={image.before.ref}
+            src={before}
+            onLoad={image.before.handleLoad}
+          />
+          <Markers variant="before" matching={matching} />
+        </Before>
+
         <Frame style={{ width: `${value}%` }}>
-          <Before
+          <After
             style={{
               top: 0,
-              left: canvas.width / 2 - image.before.width / 2,
-              width: image.before.width,
-              height: image.before.height,
+              left: canvas.width / 2 - image.after.width / 2,
+              width: image.after.width,
+              height: image.after.height,
             }}
           >
             <Image
-              ref={image.before.ref}
-              src={before}
-              onLoad={image.before.handleLoad}
+              ref={image.after.ref}
+              src={after}
+              onLoad={image.after.handleLoad}
             />
-            <Markers variant="before" matching={matching} />
-          </Before>
+            <Markers variant="after" matching={matching} />
+          </After>
         </Frame>
 
-        <After
-          style={{
-            width: image.after.width,
-            height: image.after.height,
-          }}
-        >
-          <Image
-            ref={image.after.ref}
-            src={after}
-            onLoad={image.after.handleLoad}
-          />
-          <Markers variant="after" matching={matching} />
-        </After>
-
         <Handle style={{ left: `${value}%` }}>
           <HandleBar />
         </Handle>