feat(ui): wip slider implementations

2026-02-18 17:44:42 -05:00 · 2024-05-31 13:15:00 +10:00
parent cfb12615e1
commit c2eef93476
6 changed files with 431 additions and 2 deletions
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageSliderComparison.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageSliderComparison.tsx
@@ -0,0 +1,77 @@
+import { ImgComparisonSlider } from '@img-comparison-slider/react';
+import { Flex, Icon, Image, Text } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
+import { atom } from 'nanostores';
+import { memo } from 'react';
+import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
+import { useMeasure } from 'react-use';
+import type { ImageDTO } from 'services/api/types';
+
+const $compareWith = atom<ImageDTO | null>(null);
+
+export const ImageSliderComparison = memo(() => {
+  const [containerRef, containerDims] = useMeasure<HTMLDivElement>();
+  const lastSelectedImage = useAppSelector(selectLastSelectedImage);
+  const imageToCompare = useAppSelector((s) => s.gallery.selection[0]);
+  // const imageToCompare = useStore($imageToCompare);
+  const { imageA, imageB } = useAppSelector((s) => {
+    const images = s.gallery.selection.slice(-2);
+    return { imageA: images[0] ?? null, imageB: images[1] ?? null };
+  });
+
+  if (!imageA || !imageB) {
+    return (
+      <Flex w="full" h="full" maxW="full" maxH="full" alignItems="center" justifyContent="center" position="relative">
+        <Text>Select images to compare</Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex
+      ref={containerRef}
+      w="full"
+      h="full"
+      maxW="full"
+      maxH="full"
+      alignItems="center"
+      justifyContent="center"
+      position="relative"
+    >
+      <Flex top={0} right={0} bottom={0} left={0} position="absolute" alignItems="center" justifyContent="center">
+        <ImgComparisonSlider>
+          <Image
+            slot="first"
+            src={imageA.image_url}
+            alt={imageA.image_name}
+            w="full"
+            h="full"
+            maxW={containerDims.width}
+            maxH={containerDims.height}
+            backdropFilter="blur(20%)"
+            objectPosition="top left"
+            objectFit="contain"
+          />
+          <Image
+            slot="second"
+            src={imageB.image_url}
+            alt={imageB.image_name}
+            w="full"
+            h="full"
+            maxW={containerDims.width}
+            maxH={containerDims.height}
+            objectFit="contain"
+            objectPosition="top left"
+          />
+          <Flex slot="handle" gap={4}>
+            <Icon as={PiCaretLeftBold} />
+            <Icon as={PiCaretRightBold} />
+          </Flex>
+        </ImgComparisonSlider>
+      </Flex>
+    </Flex>
+  );
+});
+
+ImageSliderComparison.displayName = 'ImageSliderComparison';
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageSliderComparison2.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageSliderComparison2.tsx
@@ -0,0 +1,148 @@
+import { Box, Flex, Icon, Image } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import CurrentImagePreview from 'features/gallery/components/ImageViewer/CurrentImagePreview';
+import { memo, useCallback, useRef } from 'react';
+import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
+
+const INITIAL_POS = '50%';
+const HANDLE_WIDTH = 2;
+const HANDLE_WIDTH_PX = `${HANDLE_WIDTH}px`;
+const HANDLE_HITBOX = 20;
+const HANDLE_HITBOX_PX = `${HANDLE_HITBOX}px`;
+const HANDLE_LEFT_INITIAL_PX = `calc(${INITIAL_POS} - ${HANDLE_HITBOX / 2}px)`;
+const HANDLE_INNER_LEFT_INITIAL_PX = `${HANDLE_HITBOX / 2 - HANDLE_WIDTH / 2}px`;
+
+export const ImageSliderComparison = memo(() => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imageAContainerRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLDivElement>(null);
+
+  const updateHandlePos = useCallback((clientX: number) => {
+    if (!containerRef.current || !imageAContainerRef.current || !handleRef.current) {
+      return;
+    }
+    const { x, width } = containerRef.current.getBoundingClientRect();
+    const rawHandlePos = ((clientX - x) * 100) / width;
+    const handleWidthPct = (HANDLE_WIDTH * 100) / width;
+    const newHandlePos = Math.min(100 - handleWidthPct, Math.max(0, rawHandlePos));
+    imageAContainerRef.current.style.width = `${newHandlePos}%`;
+    handleRef.current.style.left = `calc(${newHandlePos}% - ${HANDLE_HITBOX / 2}px)`;
+  }, []);
+
+  const onMouseMove = useCallback(
+    (e: MouseEvent) => {
+      updateHandlePos(e.clientX);
+    },
+    [updateHandlePos]
+  );
+
+  const onMouseUp = useCallback(() => {
+    window.removeEventListener('mousemove', onMouseMove);
+  }, [onMouseMove]);
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      updateHandlePos(e.clientX);
+      window.addEventListener('mouseup', onMouseUp, { once: true });
+      window.addEventListener('mousemove', onMouseMove);
+    },
+    [onMouseMove, onMouseUp, updateHandlePos]
+  );
+
+  const { imageA, imageB } = useAppSelector((s) => {
+    const images = s.gallery.selection.slice(-2);
+    return { imageA: images[0] ?? null, imageB: images[1] ?? null };
+  });
+
+  if (imageA && !imageB) {
+    return <CurrentImagePreview />;
+  }
+
+  if (!imageA || !imageB) {
+    return null;
+  }
+
+  return (
+    <Flex
+      w="full"
+      h="full"
+      maxW="full"
+      maxH="full"
+      position="relative"
+      border="1px solid cyan"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Flex
+        ref={containerRef}
+        w={imageA.width}
+        h={imageA.height}
+        maxW="full"
+        maxH="full"
+        position="relative"
+        userSelect="none"
+        border="1px solid magenta"
+        objectFit="contain"
+        overflow="hidden"
+      >
+        <Image src={imageB.image_url} objectFit="contain" objectPosition="top left" />
+        <Flex
+          ref={imageAContainerRef}
+          w={INITIAL_POS}
+          h={imageA.height}
+          position="absolute"
+          overflow="hidden"
+          objectFit="contain"
+        >
+          <Image
+            src={imageA.image_url}
+            width={`${imageA.width}px`}
+            height={`${imageA.height}px`}
+            maxW="full"
+            maxH="full"
+            objectFit="none"
+            objectPosition="left"
+          />
+        </Flex>
+        <Flex
+          id="image-comparison-handle"
+          ref={handleRef}
+          position="absolute"
+          top={0}
+          bottom={0}
+          left={HANDLE_LEFT_INITIAL_PX}
+          w={HANDLE_HITBOX_PX}
+          tabIndex={-1}
+          cursor="ew-resize"
+          filter="drop-shadow(0px 0px 4px rgb(0, 0, 0))"
+        >
+          <Box
+            w={HANDLE_WIDTH_PX}
+            h="full"
+            bg="base.50"
+            shadow="dark-lg"
+            position="absolute"
+            top={0}
+            left={HANDLE_INNER_LEFT_INITIAL_PX}
+          />
+          <Flex gap={4} position="absolute" left="50%" top="50%" transform="translate(-50%, 0)">
+            <Icon as={PiCaretLeftBold} />
+            <Icon as={PiCaretRightBold} />
+          </Flex>
+        </Flex>
+      </Flex>
+      <Box
+        position="absolute"
+        top={0}
+        right={0}
+        bottom={0}
+        left={0}
+        id="image-comparison-overlay"
+        onMouseDown={onMouseDown}
+        userSelect="none"
+      />
+    </Flex>
+  );
+});
+
+ImageSliderComparison.displayName = 'ImageSliderComparison';
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageSliderComparison3.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageSliderComparison3.tsx
@@ -0,0 +1,162 @@
+import { Box, Flex, Icon } from '@invoke-ai/ui-library';
+import { useMeasure } from '@reactuses/core';
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
+import type { ImageDTO } from 'services/api/types';
+
+const INITIAL_POS = '50%';
+const HANDLE_WIDTH = 2;
+const HANDLE_WIDTH_PX = `${HANDLE_WIDTH}px`;
+const HANDLE_HITBOX = 20;
+const HANDLE_HITBOX_PX = `${HANDLE_HITBOX}px`;
+const HANDLE_LEFT_INITIAL_PX = `calc(${INITIAL_POS} - ${HANDLE_HITBOX / 2}px)`;
+const HANDLE_INNER_LEFT_INITIAL_PX = `${HANDLE_HITBOX / 2 - HANDLE_WIDTH / 2}px`;
+
+type Props = {
+  firstImage: ImageDTO;
+  secondImage: ImageDTO;
+};
+
+export const ImageSliderComparison = memo(({ firstImage, secondImage }: Props) => {
+  const secondImageContainerRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerSize] = useMeasure(containerRef);
+
+  const updateHandlePos = useCallback((clientX: number) => {
+    if (!secondImageContainerRef.current || !handleRef.current || !containerRef.current) {
+      return;
+    }
+    const { x, width } = containerRef.current.getBoundingClientRect();
+    const rawHandlePos = ((clientX - x) * 100) / width;
+    const handleWidthPct = (HANDLE_WIDTH * 100) / width;
+    const newHandlePos = Math.min(100 - handleWidthPct, Math.max(0, rawHandlePos));
+    secondImageContainerRef.current.style.width = `${newHandlePos}%`;
+    handleRef.current.style.left = `calc(${newHandlePos}% - ${HANDLE_HITBOX / 2}px)`;
+  }, []);
+
+  const onMouseMove = useCallback(
+    (e: MouseEvent) => {
+      updateHandlePos(e.clientX);
+    },
+    [updateHandlePos]
+  );
+
+  const onMouseUp = useCallback(() => {
+    window.removeEventListener('mousemove', onMouseMove);
+  }, [onMouseMove]);
+
+  const onMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      updateHandlePos(e.clientX);
+      window.addEventListener('mouseup', onMouseUp, { once: true });
+      window.addEventListener('mousemove', onMouseMove);
+    },
+    [onMouseMove, onMouseUp, updateHandlePos]
+  );
+
+  const fittedSize = useMemo(() => {
+    let width = containerSize.width;
+    let height = containerSize.height;
+    const aspectRatio = firstImage.width / firstImage.height;
+    if (firstImage.width > firstImage.height) {
+      width = firstImage.width;
+      height = width / aspectRatio;
+    } else {
+      height = firstImage.height;
+      width = height * aspectRatio;
+    }
+    return { width, height };
+  }, [containerSize.height, containerSize.width, firstImage.height, firstImage.width]);
+
+  console.log({ containerSize, fittedSize });
+
+  return (
+    <Flex w="full" h="full" maxW="full" maxH="full" position="relative" alignItems="center" justifyContent="center">
+      <Flex
+        id="image-comparison-container"
+        ref={containerRef}
+        w="full"
+        h="full"
+        maxW="full"
+        maxH="full"
+        position="relative"
+        border="1px solid cyan"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Box
+          position="relative"
+          id="image-comparison-first-image-container"
+          w={fittedSize.width}
+          h={fittedSize.height}
+          maxW="full"
+          maxH="full"
+          backgroundImage={`url(${secondImage.image_url})`}
+          backgroundSize="contain"
+          backgroundRepeat="no-repeat"
+          userSelect="none"
+          border="1px solid green"
+          overflow="hidden"
+        >
+          <Box
+            id="image-comparison-second-image-container"
+            ref={secondImageContainerRef}
+            backgroundImage={`url(${firstImage.image_url})`}
+            backgroundSize="auto"
+            backgroundPosition="top left"
+            backgroundRepeat="no-repeat"
+            w={INITIAL_POS}
+            h="full"
+            maxW="full"
+            maxH="full"
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+          />
+          <Flex
+            id="image-comparison-handle"
+            ref={handleRef}
+            position="absolute"
+            top={0}
+            bottom={0}
+            left={HANDLE_LEFT_INITIAL_PX}
+            w={HANDLE_HITBOX_PX}
+            tabIndex={-1}
+            cursor="ew-resize"
+            filter="drop-shadow(0px 0px 4px rgb(0, 0, 0))"
+          >
+            <Box
+              w={HANDLE_WIDTH_PX}
+              h="full"
+              bg="base.50"
+              shadow="dark-lg"
+              position="absolute"
+              top={0}
+              left={HANDLE_INNER_LEFT_INITIAL_PX}
+            />
+            <Flex gap={4} position="absolute" left="50%" top="50%" transform="translate(-50%, 0)">
+              <Icon as={PiCaretLeftBold} />
+              <Icon as={PiCaretRightBold} />
+            </Flex>
+          </Flex>
+          <Box
+            id="image-comparison-interaction-overlay"
+            position="absolute"
+            top={0}
+            right={0}
+            bottom={0}
+            left={0}
+            onMouseDown={onMouseDown}
+            userSelect="none"
+            bg="rgba(255,0,0,0.3)"
+          />
+        </Box>
+      </Flex>
+    </Flex>
+  );
+});
+
+ImageSliderComparison.displayName = 'ImageSliderComparison';
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
@@ -1,5 +1,7 @@
 import { Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
+import CurrentImagePreview from 'features/gallery/components/ImageViewer/CurrentImagePreview';
+import { ImageSliderComparison } from 'features/gallery/components/ImageViewer/ImageSliderComparison3';
 import { ToggleMetadataViewerButton } from 'features/gallery/components/ImageViewer/ToggleMetadataViewerButton';
 import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
@@ -9,7 +11,6 @@ import { memo, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

 import CurrentImageButtons from './CurrentImageButtons';
-import CurrentImagePreview from './CurrentImagePreview';
 import { ViewerToggleMenu } from './ViewerToggleMenu';

 const VIEWER_ENABLED_TABS: InvokeTabName[] = ['canvas', 'generation', 'workflows'];
@@ -28,6 +29,11 @@ export const ImageViewer = memo(() => {
  useHotkeys('z', onToggle, { enabled: isViewerEnabled }, [isViewerEnabled, onToggle]);
  useHotkeys('esc', onClose, { enabled: isViewerEnabled }, [isViewerEnabled, onClose]);

+  const { firstImage, secondImage } = useAppSelector((s) => {
+    const images = s.gallery.selection.slice(-2);
+    return { firstImage: images[0] ?? null, secondImage: images[0] ? images[1] ?? null : null };
+  });
+
  if (!shouldShowViewer) {
    return null;
  }
@@ -64,7 +70,8 @@ export const ImageViewer = memo(() => {
          </Flex>
        </Flex>
      </Flex>
-      <CurrentImagePreview />
+      {firstImage && !secondImage && <CurrentImagePreview />}
+      {firstImage && secondImage && <ImageSliderComparison firstImage={firstImage} secondImage={secondImage} />}
    </Flex>
  );
 });