fix(ui): board drop targets

We just changed all buttons to use `onPointerUp` events to fix Apple Pencil behaviour. This, plus the specific DOM layout of boards, resulted in the `onPointerUp` being triggered on a board before the drop triggered. The app saw this as selecting the board, which then reset the gallery selection to the first image in the board. By the time you drop, the gallery selection had reset. DOM layout slightly altered to work around this.
invoke-ai · Oct 5, 2024 · 01bbd32 · 01bbd32
1 parent 0e2761d
commit 01bbd32
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 77 deletions.
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
@@ -1,5 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Flex, Icon, Image, Text, Tooltip } from '@invoke-ai/ui-library';
+import { Box, Flex, Icon, Image, Text, Tooltip } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDroppable from 'common/components/IAIDroppable';
@@ -55,38 +55,38 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
   );
 
   return (
-    <BoardContextMenu board={board}>
-      {(ref) => (
-        <Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll p={2}>
-          <Flex
-            position="relative"
-            ref={ref}
-            onPointerUp={onPointerUp}
-            w="full"
-            alignItems="center"
-            borderRadius="base"
-            cursor="pointer"
-            py={1}
-            ps={1}
-            pe={4}
-            gap={4}
-            bg={isSelected ? 'base.850' : undefined}
-            _hover={_hover}
-            h={12}
-          >
-            <CoverImage board={board} />
-            <Flex w="full">
-              <BoardEditableTitle board={board} isSelected={isSelected} />
+    <Box position="relative" w="full" h={12}>
+      <BoardContextMenu board={board}>
+        {(ref) => (
+          <Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll p={2}>
+            <Flex
+              ref={ref}
+              onPointerUp={onPointerUp}
+              alignItems="center"
+              borderRadius="base"
+              cursor="pointer"
+              py={1}
+              ps={1}
+              pe={4}
+              gap={4}
+              bg={isSelected ? 'base.850' : undefined}
+              _hover={_hover}
+              w="full"
+              h="full"
+            >
+              <CoverImage board={board} />
+              <Flex w="full">
+                <BoardEditableTitle board={board} isSelected={isSelected} />
+              </Flex>
+              {autoAddBoardId === board.board_id && <AutoAddBadge />}
+              {board.archived && <Icon as={PiArchiveBold} fill="base.300" />}
+              <Text variant="subtext">{board.image_count}</Text>
             </Flex>
-            {autoAddBoardId === board.board_id && <AutoAddBadge />}
-            {board.archived && <Icon as={PiArchiveBold} fill="base.300" />}
-            <Text variant="subtext">{board.image_count}</Text>
-
-            <IAIDroppable data={droppableData} dropLabel={t('gallery.move')} />
-          </Flex>
-        </Tooltip>
-      )}
-    </BoardContextMenu>
+          </Tooltip>
+        )}
+      </BoardContextMenu>
+      <IAIDroppable data={droppableData} dropLabel={t('gallery.move')} />
+    </Box>
   );
 };
 

diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
@@ -1,5 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library';
+import { Box, Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDroppable from 'common/components/IAIDroppable';
 import type { RemoveFromBoardDropData } from 'features/dnd/types';
@@ -58,51 +58,52 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
   }
 
   return (
-    <NoBoardBoardContextMenu>
-      {(ref) => (
-        <Tooltip label={<BoardTooltip board={null} />} openDelay={1000} placement="left" closeOnScroll>
-          <Flex
-            position="relative"
-            ref={ref}
-            onPointerUp={handleSelectBoard}
-            w="full"
-            alignItems="center"
-            borderRadius="base"
-            cursor="pointer"
-            py={1}
-            ps={1}
-            pe={4}
-            gap={4}
-            bg={isSelected ? 'base.850' : undefined}
-            _hover={_hover}
-            h={12}
-          >
-            <Flex w="10" justifyContent="space-around">
-              {/* iconified from public/assets/images/invoke-symbol-wht-lrg.svg */}
-              <Icon boxSize={8} opacity={1} stroke="base.500" viewBox="0 0 66 66" fill="none">
-                <path
-                  d="M43.9137 16H63.1211V3H3.12109V16H22.3285L43.9137 50H63.1211V63H3.12109V50H22.3285"
-                  strokeWidth="5"
-                />
-              </Icon>
-            </Flex>
-
-            <Text
-              fontSize="sm"
-              color={isSelected ? 'base.100' : 'base.300'}
-              fontWeight="semibold"
-              noOfLines={1}
-              flexGrow={1}
+    <Box position="relative" w="full" h={12}>
+      <NoBoardBoardContextMenu>
+        {(ref) => (
+          <Tooltip label={<BoardTooltip board={null} />} openDelay={1000} placement="left" closeOnScroll>
+            <Flex
+              ref={ref}
+              onPointerUp={handleSelectBoard}
+              w="full"
+              h="full"
+              alignItems="center"
+              borderRadius="base"
+              cursor="pointer"
+              py={1}
+              ps={1}
+              pe={4}
+              gap={4}
+              bg={isSelected ? 'base.850' : undefined}
+              _hover={_hover}
             >
-              {boardName}
-            </Text>
-            {autoAddBoardId === 'none' && <AutoAddBadge />}
-            <Text variant="subtext">{imagesTotal}</Text>
-            <IAIDroppable data={droppableData} dropLabel={t('gallery.move')} />
-          </Flex>
-        </Tooltip>
-      )}
-    </NoBoardBoardContextMenu>
+              <Flex w="10" justifyContent="space-around">
+                {/* iconified from public/assets/images/invoke-symbol-wht-lrg.svg */}
+                <Icon boxSize={8} opacity={1} stroke="base.500" viewBox="0 0 66 66" fill="none">
+                  <path
+                    d="M43.9137 16H63.1211V3H3.12109V16H22.3285L43.9137 50H63.1211V63H3.12109V50H22.3285"
+                    strokeWidth="5"
+                  />
+                </Icon>
+              </Flex>
+
+              <Text
+                fontSize="sm"
+                color={isSelected ? 'base.100' : 'base.300'}
+                fontWeight="semibold"
+                noOfLines={1}
+                flexGrow={1}
+              >
+                {boardName}
+              </Text>
+              {autoAddBoardId === 'none' && <AutoAddBadge />}
+              <Text variant="subtext">{imagesTotal}</Text>
+            </Flex>
+          </Tooltip>
+        )}
+      </NoBoardBoardContextMenu>
+      <IAIDroppable data={droppableData} dropLabel={t('gallery.move')} />
+    </Box>
   );
 });