feat: Revers Slider behavior on Slide (#70)

reg-viz · Dec 8, 2024 · a44a5bd · a44a5bd
1 parent d4b04f2
commit a44a5bd
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 24 deletions.
diff --git a/src/components/Slider/Slider.css.ts b/src/components/Slider/Slider.css.ts
@@ -4,7 +4,6 @@ import { tokens } from '../../styles/variables.css';
 const barStyles = {
   position: 'absolute',
   top: '50%',
-  left: 0,
   marginTop: -2,
   height: 4,
   borderRadius: 2,

diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -9,6 +9,7 @@ export type Props = {
   value?: number;
   defaultValue?: number;
   onChange?: (value: number) => void;
+  reverse?: boolean;
 };
 
 export const Slider = ({ onChange, ...rest }: Props) => (

diff --git a/src/components/Viewer/internal/ComparisonView/ComparisonView.tsx b/src/components/Viewer/internal/ComparisonView/ComparisonView.tsx
@@ -146,6 +146,7 @@ export const ComparisonView = ({
                         step={1}
                         value={slideValue}
                         onChange={handleSlideChange}
+                        reverse={true}
                       />
                     </span>
                     <span className={typography.subTitle3}>After</span>

diff --git a/src/components/Viewer/internal/ComparisonView/Slide.css.ts b/src/components/Viewer/internal/ComparisonView/Slide.css.ts
@@ -40,14 +40,14 @@ const view = style({
   transform: 'translate(-50%, 0)',
 });
 
-export const before = style([
+export const after = style([
   view,
   {
     zIndex: 0,
   },
 ]);
 
-export const after = style([
+export const before = style([
   view,
   {
     zIndex: 1,
@@ -59,8 +59,6 @@ export const handle = style({
   position: 'absolute',
   top: 0,
   bottom: 0,
-  marginLeft: -22,
-  width: 44,
   zIndex: 5,
   cursor: 'ew-resize',
 });

diff --git a/src/components/Viewer/internal/ComparisonView/Slide.tsx b/src/components/Viewer/internal/ComparisonView/Slide.tsx
@@ -20,7 +20,7 @@ export const Slide = ({ before, after, value, matching, onChange }: Props) => {
   const rangeRef = useRef<HTMLInputElement>(null);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(parseInt(e.target.value, 10));
+    onChange(100 - parseInt(e.target.value, 10));
   };
 
   useEffect(() => {
@@ -33,7 +33,7 @@ export const Slide = ({ before, after, value, matching, onChange }: Props) => {
       const { left } = inner.getBoundingClientRect();
       const x = Math.min(Math.max(0, pageX - left), image.width);
 
-      onChange((x / image.width) * 100);
+      onChange(100 - (x / image.width) * 100);
     };
 
     const handleMousedown = (e: MouseEvent | TouchEvent) => {
@@ -89,40 +89,40 @@ export const Slide = ({ before, after, value, matching, onChange }: Props) => {
         />
 
         <div
-          className={styles.before}
+          className={styles.after}
           style={{
-            width: image.before.width,
-            height: image.before.height,
+            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} />
+          <Markers variant="after" matching={matching} />
         </div>
 
-        <div className={styles.frame} style={{ width: `${value}%` }}>
+        <div className={styles.frame} style={{ width: `${100 - value}%` }}>
           <div
-            className={styles.after}
+            className={styles.before}
             style={{
               top: 0,
-              left: canvas.width / 2 - image.after.width / 2,
-              width: image.after.width,
-              height: image.after.height,
+              left: canvas.width / 2 - image.before.width / 2,
+              width: image.before.width,
+              height: image.before.height,
             }}
           >
             <Image
-              ref={image.after.ref}
-              src={after}
-              onLoad={image.after.handleLoad}
+              ref={image.before.ref}
+              src={before}
+              onLoad={image.before.handleLoad}
             />
-            <Markers variant="after" matching={matching} />
+            <Markers variant="before" matching={matching} />
           </div>
         </div>
 
-        <span className={styles.handle} style={{ left: `${value}%` }}>
+        <span className={styles.handle} style={{ right: `${value}%` }}>
           <span className={styles.handleBar} />
         </span>
       </div>