From e92f29aa5abe62e452c6f1153df8964db650be3e Mon Sep 17 00:00:00 2001 From: basokant Date: Wed, 19 Apr 2023 01:10:00 -0400 Subject: [PATCH] fix ref and chall having different aspect ratios styling and behaviour, and match slider and image widths responsively --- src/components/diff/ImageDiff.tsx | 65 ++++++++++++++++++------------- src/style/ImageDiffStyle.ts | 41 +++++++++---------- 2 files changed, 58 insertions(+), 48 deletions(-) diff --git a/src/components/diff/ImageDiff.tsx b/src/components/diff/ImageDiff.tsx index 5e5f16821..f4206f533 100644 --- 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, @@ -249,12 +253,11 @@ const Swipe = ({ reference, challenger }: ImageDiffViewProps) => { } }; - const handleLoad = (event: React.SyntheticEvent) => { - 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 (
@@ -267,25 +270,27 @@ const Swipe = ({ reference, challenger }: ImageDiffViewProps) => {
Reference Challenger
@@ -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, @@ -305,12 +313,13 @@ const OnionSkin = ({ reference, challenger }: ImageDiffViewProps) => { } }; - const handleLoad = (event: React.SyntheticEvent) => { - 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 (
@@ -324,14 +333,14 @@ const OnionSkin = ({ reference, challenger }: ImageDiffViewProps) => { src={`data:image/png;base64,${reference}`} alt="Reference" className={`${onionSkinImage} ${onionSkinReferenceImage}`} - onLoad={handleLoad} + ref={referenceImageRef} /> Challenger
diff --git a/src/style/ImageDiffStyle.ts b/src/style/ImageDiffStyle.ts index 196f3defa..54c8e2c42 100644 --- 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,21 +135,15 @@ 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)' }); @@ -154,14 +151,15 @@ 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({