fix ref and chall having different aspect ratios styling and behaviou…

…r, and match slider and image widths responsively
jupyterlab · Apr 19, 2023 · e92f29a · e92f29a
1 parent fd42cd6
commit e92f29a
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 48 deletions.
diff --git a/src/components/diff/ImageDiff.tsx b/src/components/diff/ImageDiff.tsx
@@ -4,7 +4,7 @@ import { Panel } from '@lumino/widgets';
 import { ReactWidget } from '@jupyterlab/apputils';
 
 import * as React from 'react';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useLayoutEffect } from 'react';
 import { Slider as MUISlider, withStyles } from '@material-ui/core';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
@@ -40,7 +40,8 @@ import {
   tabClass,
   tabIndicatorClass,
   tabsClass,
-  twoUpView
+  twoUpView,
+  swipeImage
 } from '../../style/ImageDiffStyle';
 import { filesize } from 'filesize';
 
@@ -238,7 +239,10 @@ const Slider = ({ value, onChange, width, reversed }: SliderProps) => {
 
 const Swipe = ({ reference, challenger }: ImageDiffViewProps) => {
   const [sliderValue, setSliderValue] = useState(50);
-  const [sliderWidth, setSliderWidth] = useState(300);
+  const [sliderWidth, setSliderWidth] = useState(0);
+
+  const referenceImageRef = useRef(null);
+  const challengerImageRef = useRef(null);
 
   const handleSliderChange = (
     event: React.ChangeEvent<unknown>,
@@ -249,12 +253,11 @@ const Swipe = ({ reference, challenger }: ImageDiffViewProps) => {
     }
   };
 
-  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
-    const width = event.currentTarget.clientWidth;
-    if (width > sliderWidth) {
-      setSliderWidth(width);
-    }
-  };
+  useLayoutEffect(() => {
+    const refWidth = referenceImageRef.current.offsetWidth;
+    const challWidth = challengerImageRef.current.offsetWidth;
+    setSliderWidth(Math.max(refWidth, challWidth));
+  }, []);
 
   return (
     <div className={swipeContainer}>
@@ -267,25 +270,27 @@ const Swipe = ({ reference, challenger }: ImageDiffViewProps) => {
       <div className={swipeBackground}>
         <img
           src={`data:image/png;base64,${reference}`}
-          className={swipeReferenceImage}
+          className={`${swipeImage} ${swipeReferenceImage}`}
           style={{
-            clipPath: `polygon(0 0, ${sliderValue - 0.25}% 0, ${
-              sliderValue - 0.25
-            }% 100%, 0% 100%)`
+            clipPath: `polygon(0 0, ${sliderValue - 0.1}% 0, ${
+              sliderValue - 0.1
+            }% 100%, 0% 100%)`,
+            width: sliderWidth ? `${sliderWidth - 10}px` : ''
           }}
           alt="Reference"
-          onLoad={handleLoad}
+          ref={referenceImageRef}
         />
         <img
           src={`data:image/png;base64,${challenger}`}
-          className={swipeChallengerImage}
+          className={`${swipeImage} ${swipeChallengerImage}`}
           style={{
-            clipPath: `polygon(${sliderValue + 0.25}% 0, 100% 0, 100% 100%, ${
-              sliderValue + 0.25
-            }% 100%)`
+            clipPath: `polygon(${sliderValue + 0.1}% 0, 100% 0, 100% 100%, ${
+              sliderValue + 0.1
+            }% 100%)`,
+            width: sliderWidth ? `${sliderWidth - 10}px` : ''
           }}
           alt="Challenger"
-          onLoad={handleLoad}
+          ref={challengerImageRef}
         />
       </div>
     </div>
@@ -294,7 +299,10 @@ const Swipe = ({ reference, challenger }: ImageDiffViewProps) => {
 
 const OnionSkin = ({ reference, challenger }: ImageDiffViewProps) => {
   const [sliderValue, setSliderValue] = useState(50);
-  const [sliderWidth, setSliderWidth] = useState(300);
+  const [sliderWidth, setSliderWidth] = useState(0);
+
+  const referenceImageRef = useRef(null);
+  const challengerImageRef = useRef(null);
 
   const handleSliderChange = (
     event: React.ChangeEvent<unknown>,
@@ -305,12 +313,13 @@ const OnionSkin = ({ reference, challenger }: ImageDiffViewProps) => {
     }
   };
 
-  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
-    const width = event.currentTarget.clientWidth;
-    if (width > sliderWidth) {
-      setSliderWidth(width);
-    }
-  };
+  useLayoutEffect(() => {
+    const refWidth = referenceImageRef.current.offsetWidth;
+    const challWidth = challengerImageRef.current.offsetWidth;
+    console.log(refWidth, challWidth);
+
+    setSliderWidth(Math.max(refWidth, challWidth));
+  }, []);
 
   return (
     <div className={onionSkinContainer}>
@@ -324,14 +333,14 @@ const OnionSkin = ({ reference, challenger }: ImageDiffViewProps) => {
           src={`data:image/png;base64,${reference}`}
           alt="Reference"
           className={`${onionSkinImage} ${onionSkinReferenceImage}`}
-          onLoad={handleLoad}
+          ref={referenceImageRef}
         />
         <img
           src={`data:image/png;base64,${challenger}`}
           alt="Challenger"
           className={`${onionSkinImage} ${onionSkinChallengerImage}`}
           style={{ opacity: sliderValue / 100 }}
-          onLoad={handleLoad}
+          ref={challengerImageRef}
         />
       </div>
     </div>

diff --git a/src/style/ImageDiffStyle.ts b/src/style/ImageDiffStyle.ts
@@ -63,7 +63,8 @@ export const twoUpView = style({
   alignItems: 'center',
   justifyContent: 'space-evenly',
   gap: '5px',
-  padding: '0px 8px!important'
+  padding: '0px 8px!important',
+  overflow: 'scroll'
 });
 
 export const imageCol = style({
@@ -79,14 +80,14 @@ export const referenceImageClass = style({
   width: 'auto',
   maxHeight: '500px',
   border: '5px solid var(--jp-diff-deleted-color0)',
-  overflow: 'scroll'
+  maxWidth: '400px'
 });
 
 export const challengerImageClass = style({
   width: 'auto',
   maxHeight: '500px',
   border: '5px solid var(--jp-diff-added-color0)',
-  overflow: 'scroll'
+  maxWidth: '400px'
 });
 
 export const slider = style({
@@ -110,7 +111,9 @@ export const swipeContainer = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  flexDirection: 'column'
+  flexDirection: 'column',
+  overflowX: 'scroll',
+  padding: '0px 40px'
 });
 
 export const swipeBackground = style({
@@ -122,7 +125,7 @@ export const swipeBackground = style({
   justifyContent: 'center'
 });
 
-export const swipeReferenceImage = style({
+export const swipeImage = style({
   position: 'absolute',
   top: 0,
   bottom: 0,
@@ -132,36 +135,31 @@ export const swipeReferenceImage = style({
   margin: 'auto',
   height: '500px',
   width: 'auto',
-  objectFit: 'cover',
+  maxWidth: '800px',
+  objectFit: 'scale-down'
+});
+
+export const swipeReferenceImage = style({
   border: '5px solid var(--jp-diff-deleted-color0)'
 });
 
 export const swipeChallengerImage = style({
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  opacity: 1,
-  margin: 'auto',
-  height: '500px',
-  width: 'auto',
-  objectFit: 'cover',
   border: '5px solid var(--jp-diff-added-color0)'
 });
 
 export const onionSkinContainer = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  flexDirection: 'column'
+  flexDirection: 'column',
+  overflow: 'scroll',
+  padding: '0px 10px'
 });
 
 export const onionSkinImageContainer = style({
   position: 'relative',
   height: '510px',
-  width: '100%',
-  objectFit: 'cover'
+  width: '100%'
 });
 
 export const onionSkinImage = style({
@@ -172,7 +170,10 @@ export const onionSkinImage = style({
   bottom: 0,
   left: 0,
   right: 0,
-  margin: 'auto'
+  margin: 'auto',
+  maxWidth: '800px',
+  objectFit: 'scale-down',
+  backgroundColor: 'var(--jp-layout-color0)'
 });
 
 export const onionSkinReferenceImage = style({