feat(ui): dndkit --> rnd for draggable

2024-08-30 20:32:17 +00:00 · 2023-04-30 23:39:42 +10:00 · 2023-04-30 23:39:42 +10:00 · fecb77e344
commit fecb77e344
parent 779671753d
6 changed files with 194 additions and 163 deletions
--- a/invokeai/frontend/web/package.json
+++ b/invokeai/frontend/web/package.json
@ -61,8 +61,6 @@
    "@chakra-ui/styled-system": "^2.9.0",
    "@chakra-ui/theme-tools": "^2.0.16",
    "@dagrejs/graphlib": "^2.1.12",
-    "@dnd-kit/core": "^6.0.8",
-    "@dnd-kit/modifiers": "^6.0.1",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@fontsource/inter": "^4.5.15",
@ -90,6 +88,7 @@
    "react-konva": "^18.2.7",
    "react-konva-utils": "^1.0.4",
    "react-redux": "^8.0.5",
+    "react-rnd": "^10.4.1",
    "react-transition-group": "^4.4.5",
    "react-use": "^17.4.0",
    "react-zoom-pan-pinch": "^3.0.7",
--- a/invokeai/frontend/web/src/features/parameters/components/ProgressImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ProgressImagePreview.tsx
@ -1,25 +1,28 @@
-import { Box, Flex, Icon, Image, Text } from '@chakra-ui/react';
-import { useDraggable } from '@dnd-kit/core';
+import { Flex, Icon, Image, Text } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { memo, useCallback } from 'react';
-import { CSS } from '@dnd-kit/utilities';
-import { FaEye, FaImage, FaStopwatch } from 'react-icons/fa';
+import { FaImage, FaStopwatch } from 'react-icons/fa';
 import { uiSelector } from 'features/ui/store/uiSelectors';
-import { Resizable } from 're-resizable';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { CloseIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';
-import { shouldShowProgressImagesToggled } from 'features/ui/store/uiSlice';
+import {
+  floatingProgressImageMoved,
+  floatingProgressImageResized,
+  shouldShowProgressImagesToggled,
+} from 'features/ui/store/uiSlice';
+import { Rnd } from 'react-rnd';
+import { Rect } from 'features/ui/store/uiTypes';

 const selector = createSelector([systemSelector, uiSelector], (system, ui) => {
  const { progressImage } = system;
-  const { floatingProgressImageCoordinates, shouldShowProgressImages } = ui;
+  const { floatingProgressImageRect, shouldShowProgressImages } = ui;

  return {
    progressImage,
-    coords: floatingProgressImageCoordinates,
+    floatingProgressImageRect,
    shouldShowProgressImages,
  };
 });
@ -27,135 +30,137 @@ const selector = createSelector([systemSelector, uiSelector], (system, ui) => {
 const ProgressImagePreview = () => {
  const dispatch = useAppDispatch();

-  const { progressImage, coords, shouldShowProgressImages } =
+  const { progressImage, floatingProgressImageRect, shouldShowProgressImages } =
    useAppSelector(selector);

  const { t } = useTranslation();

-  const { attributes, listeners, setNodeRef, transform } = useDraggable({
-    id: 'progress-image',
-  });
-
  const toggleProgressImages = useCallback(() => {
    dispatch(shouldShowProgressImagesToggled());
  }, [dispatch]);

-  const transformStyles = transform
-    ? {
-        transform: CSS.Translate.toString(transform),
-      }
-    : {};
-
  return shouldShowProgressImages ? (
-    <Box
-      sx={{
-        position: 'absolute',
-        left: `${coords.x}px`,
-        top: `${coords.y}px`,
+    <Rnd
+      bounds="window"
+      minHeight={200}
+      minWidth={200}
+      size={{
+        width: floatingProgressImageRect.width,
+        height: floatingProgressImageRect.height,
+      }}
+      position={{
+        x: floatingProgressImageRect.x,
+        y: floatingProgressImageRect.y,
+      }}
+      onDragStop={(e, d) => {
+        dispatch(floatingProgressImageMoved({ x: d.x, y: d.y }));
+      }}
+      onResizeStop={(e, direction, ref, delta, position) => {
+        const newRect: Partial<Rect> = {};
+
+        console.log(ref.style.width, ref.style.height, position.x, position.y);
+
+        if (ref.style.width) {
+          newRect.width = ref.style.width;
+        }
+        if (ref.style.height) {
+          newRect.height = ref.style.height;
+        }
+        if (position.x) {
+          newRect.x = position.x;
+        }
+        if (position.x) {
+          newRect.y = position.y;
+        }
+
+        dispatch(floatingProgressImageResized(newRect));
      }}
    >
-      <Box ref={setNodeRef} sx={transformStyles}>
-        <Box
+      <Flex
+        sx={{
+          position: 'relative',
+          w: 'full',
+          h: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDir: 'column',
+          boxShadow: 'dark-lg',
+          bg: 'base.800',
+          borderRadius: 'base',
+        }}
+      >
+        <Flex
          sx={{
-            boxShadow: 'dark-lg',
            w: 'full',
-            h: 'full',
-            bg: 'base.800',
-            borderRadius: 'base',
+            alignItems: 'center',
+            justifyContent: 'center',
+            p: 1.5,
+            pl: 4,
+            pr: 3,
+            bg: 'base.700',
+            borderTopRadius: 'base',
          }}
        >
-          <Resizable
-            defaultSize={{ width: 300, height: 300 }}
-            minWidth={200}
-            minHeight={200}
+          <Flex
+            sx={{
+              flexGrow: 1,
+              userSelect: 'none',
+              cursor: 'move',
+            }}
          >
-            <Flex
+            <Text fontSize="sm" fontWeight={500}>
+              Progress Images
+            </Text>
+          </Flex>
+          <IAIIconButton
+            onClick={toggleProgressImages}
+            aria-label={t('ui.hideProgressImages')}
+            size="xs"
+            icon={<CloseIcon />}
+            variant="ghost"
+          />
+        </Flex>
+        {progressImage ? (
+          <Flex
+            sx={{
+              position: 'relative',
+              w: 'full',
+              h: 'full',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Image
+              draggable={false}
+              src={progressImage.dataURL}
+              width={progressImage.width}
+              height={progressImage.height}
              sx={{
-                position: 'relative',
-                w: 'full',
-                h: 'full',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexDir: 'column',
+                position: 'absolute',
+                objectFit: 'contain',
+                maxWidth: '100%',
+                maxHeight: '100%',
+                height: 'auto',
+                imageRendering: 'pixelated',
+                borderRadius: 'base',
+                p: 2,
              }}
-            >
-              <Flex
-                sx={{
-                  w: 'full',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  p: 1.5,
-                  pl: 4,
-                  pr: 3,
-                  bg: 'base.700',
-                  borderTopRadius: 'base',
-                }}
-              >
-                <Flex
-                  sx={{
-                    flexGrow: 1,
-                    userSelect: 'none',
-                    cursor: 'move',
-                  }}
-                  {...listeners}
-                  {...attributes}
-                >
-                  <Text fontSize="sm" fontWeight={500}>
-                    Progress Images
-                  </Text>
-                </Flex>
-                <IAIIconButton
-                  onClick={toggleProgressImages}
-                  aria-label={t('ui.hideProgressImages')}
-                  size="xs"
-                  icon={<CloseIcon />}
-                  variant="ghost"
-                />
-              </Flex>
-              {progressImage ? (
-                <Flex
-                  sx={{
-                    position: 'relative',
-                    w: 'full',
-                    h: 'full',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Image
-                    draggable={false}
-                    src={progressImage.dataURL}
-                    width={progressImage.width}
-                    height={progressImage.height}
-                    sx={{
-                      position: 'absolute',
-                      objectFit: 'contain',
-                      maxWidth: '100%',
-                      maxHeight: '100%',
-                      height: 'auto',
-                      imageRendering: 'pixelated',
-                      borderRadius: 'base',
-                      p: 2,
-                    }}
-                  />
-                </Flex>
-              ) : (
-                <Flex
-                  sx={{
-                    w: 'full',
-                    h: 'full',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Icon color="base.400" boxSize={32} as={FaImage}></Icon>
-                </Flex>
-              )}
-            </Flex>
-          </Resizable>
-        </Box>
-      </Box>
-    </Box>
+            />
+          </Flex>
+        ) : (
+          <Flex
+            sx={{
+              w: 'full',
+              h: 'full',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Icon color="base.400" boxSize={32} as={FaImage}></Icon>
+          </Flex>
+        )}
+      </Flex>
+    </Rnd>
  ) : (
    <IAIIconButton
      onClick={toggleProgressImages}
--- a/invokeai/frontend/web/src/features/ui/store/uiPersistDenylist.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiPersistDenylist.ts
@ -3,7 +3,7 @@ import { UIState } from './uiTypes';
 /**
 * UI slice persist denylist
 */
-const itemsToDenylist: (keyof UIState)[] = [];
+const itemsToDenylist: (keyof UIState)[] = ['floatingProgressImageRect'];

 export const uiDenylist = itemsToDenylist.map(
  (denylistItem) => `ui.${denylistItem}`
--- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
@ -2,8 +2,7 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { setActiveTabReducer } from './extraReducers';
 import { InvokeTabName, tabMap } from './tabMap';
-import { AddNewModelType, UIState } from './uiTypes';
-import { Coordinates } from '@dnd-kit/core/dist/types';
+import { AddNewModelType, Coordinates, Rect, UIState } from './uiTypes';

 const initialUIState: UIState = {
  activeTab: 0,
@ -22,7 +21,7 @@ const initialUIState: UIState = {
  openLinearAccordionItems: [],
  openGenerateAccordionItems: [],
  openUnifiedCanvasAccordionItems: [],
-  floatingProgressImageCoordinates: { x: 0, y: 0 },
+  floatingProgressImageRect: { x: 0, y: 0, width: 0, height: 0 },
  shouldShowProgressImages: false,
 };

@ -109,10 +108,19 @@ export const uiSlice = createSlice({
      }
    },
    floatingProgressImageMoved: (state, action: PayloadAction<Coordinates>) => {
-      const { x, y } = state.floatingProgressImageCoordinates;
-      const { x: _x, y: _y } = action.payload;
-
-      state.floatingProgressImageCoordinates = { x: x + _x, y: y + _y };
+      state.floatingProgressImageRect = {
+        ...state.floatingProgressImageRect,
+        ...action.payload,
+      };
+    },
+    floatingProgressImageResized: (
+      state,
+      action: PayloadAction<Partial<Rect>>
+    ) => {
+      state.floatingProgressImageRect = {
+        ...state.floatingProgressImageRect,
+        ...action.payload,
+      };
    },
    shouldShowProgressImagesToggled: (state) => {
      state.shouldShowProgressImages = !state.shouldShowProgressImages;
@ -141,6 +149,7 @@ export const {
  toggleGalleryPanel,
  openAccordionItemsChanged,
  floatingProgressImageMoved,
+  floatingProgressImageResized,
  shouldShowProgressImagesToggled,
 } = uiSlice.actions;

--- a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
@ -1,7 +1,17 @@
-import { Coordinates } from '@dnd-kit/core/dist/types';
-
 export type AddNewModelType = 'ckpt' | 'diffusers' | null;

+export type Coordinates = {
+  x: number;
+  y: number;
+};
+
+export type Dimensions = {
+  width: number | string;
+  height: number | string;
+};
+
+export type Rect = Coordinates & Dimensions;
+
 export interface UIState {
  activeTab: number;
  currentTheme: string;
@ -19,6 +29,6 @@ export interface UIState {
  openLinearAccordionItems: number[];
  openGenerateAccordionItems: number[];
  openUnifiedCanvasAccordionItems: number[];
-  floatingProgressImageCoordinates: Coordinates;
+  floatingProgressImageRect: Rect;
  shouldShowProgressImages: boolean;
 }
--- a/invokeai/frontend/web/yarn.lock
+++ b/invokeai/frontend/web/yarn.lock
@ -937,37 +937,6 @@
    gonzales-pe "^4.3.0"
    node-source-walk "^5.0.1"

-"@dnd-kit/accessibility@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/accessibility/-/accessibility-3.0.1.tgz#3ccbefdfca595b0a23a5dc57d3de96bc6935641c"
-  integrity sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==
-  dependencies:
-    tslib "^2.0.0"
-
-"@dnd-kit/core@^6.0.8":
-  version "6.0.8"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-6.0.8.tgz#040ae13fea9787ee078e5f0361f3b49b07f3f005"
-  integrity sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==
-  dependencies:
-    "@dnd-kit/accessibility" "^3.0.0"
-    "@dnd-kit/utilities" "^3.2.1"
-    tslib "^2.0.0"
-
-"@dnd-kit/modifiers@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/modifiers/-/modifiers-6.0.1.tgz#9e39b25fd6e323659604cc74488fe044d33188c8"
-  integrity sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==
-  dependencies:
-    "@dnd-kit/utilities" "^3.2.1"
-    tslib "^2.0.0"
-
-"@dnd-kit/utilities@^3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@dnd-kit/utilities/-/utilities-3.2.1.tgz#53f9e2016fd2506ec49e404c289392cfff30332a"
-  integrity sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==
-  dependencies:
-    tslib "^2.0.0"
-
 "@emotion/babel-plugin@^11.10.8":
  version "11.10.8"
  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.8.tgz#bae325c902937665d00684038fd5294223ef9e1d"
@ -2615,6 +2584,11 @@ clone@^1.0.2:
  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==

+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 code-block-writer@^12.0.0:
  version "12.0.0"
  resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-12.0.0.tgz#4dd58946eb4234105aff7f0035977b2afdc2a770"
@ -3556,6 +3530,11 @@ fast-loops@^1.1.3:
  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
  integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==

+fast-memoize@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
+  integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
+
 fast-printf@^1.6.9:
  version "1.6.9"
  resolved "https://registry.yarnpkg.com/fast-printf/-/fast-printf-1.6.9.tgz#212f56570d2dc8ccdd057ee93d50dd414d07d676"
@ -5424,6 +5403,13 @@ rc@1.2.8, rc@^1.2.7, rc@^1.2.8:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

+re-resizable@6.9.6:
+  version "6.9.6"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.6.tgz#b95d37e3821481b56ddfb1e12862940a791e827d"
+  integrity sha512-0xYKS5+Z0zk+vICQlcZW+g54CcJTTmHluA7JUUgvERDxnKAnytylcyPsA+BSFi759s5hPlHmBRegFrwXs2FuBQ==
+  dependencies:
+    fast-memoize "^2.5.1"
+
 re-resizable@^6.9.9:
  version "6.9.9"
  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.9.tgz#99e8b31c67a62115dc9c5394b7e55892265be216"
@ -5449,6 +5435,14 @@ react-dom@^18.2.0:
    loose-envify "^1.1.0"
    scheduler "^0.23.0"

+react-draggable@4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c"
+  integrity sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==
+  dependencies:
+    clsx "^1.1.1"
+    prop-types "^15.8.1"
+
 react-dropzone@^14.2.3:
  version "14.2.3"
  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
@ -5565,6 +5559,15 @@ react-remove-scroll@^2.5.5:
    use-callback-ref "^1.3.0"
    use-sidecar "^1.1.2"

+react-rnd@^10.4.1:
+  version "10.4.1"
+  resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.4.1.tgz#9e1c3f244895d7862ef03be98b2a620848c3fba1"
+  integrity sha512-0m887AjQZr6p2ADLNnipquqsDq4XJu/uqVqI3zuoGD19tRm6uB83HmZWydtkilNp5EWsOHbLGF4IjWMdd5du8Q==
+  dependencies:
+    re-resizable "6.9.6"
+    react-draggable "4.4.5"
+    tslib "2.3.1"
+
 react-style-singleton@^2.2.1:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@ -6432,6 +6435,11 @@ tsconfig-paths@^4.0.0:
    minimist "^1.2.6"
    strip-bom "^3.0.0"

+tslib@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
+
 tslib@2.4.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"