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

This commit is contained in:
psychedelicious
2023-04-30 23:39:42 +10:00
parent 779671753d
commit fecb77e344
6 changed files with 194 additions and 163 deletions

View File

@ -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}`

View File

@ -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;

View File

@ -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;
}