From 955fef35aaba479fe891babca82e358d739c1ee6 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 23 Aug 2023 22:16:00 +1000 Subject: [PATCH] chore(ui): remove cruft related to old canvas scaling method --- .../canvas/components/IAICanvasResizer.tsx | 91 ----------- .../IAICanvasToolbar/IAICanvasToolbar.tsx | 2 - .../canvas/store/canvasPersistDenylist.ts | 6 +- .../src/features/canvas/store/canvasSlice.ts | 154 ------------------ .../src/features/canvas/store/canvasTypes.ts | 3 - .../canvas/store/thunks/requestCanvasScale.ts | 16 -- .../SingleSelectionMenuItems.tsx | 8 +- .../ui/components/FloatingGalleryButton.tsx | 4 - .../FloatingParametersPanelButtons.tsx | 4 - .../src/features/ui/components/InvokeTabs.tsx | 12 -- .../tabs/ImageToImage/ImageToImageTab.tsx | 6 - .../UnifiedCanvasResetCanvas.tsx | 6 +- .../UnifiedCanvas/UnifiedCanvasContent.tsx | 33 +--- 13 files changed, 5 insertions(+), 340 deletions(-) delete mode 100644 invokeai/frontend/web/src/features/canvas/components/IAICanvasResizer.tsx delete mode 100644 invokeai/frontend/web/src/features/canvas/store/thunks/requestCanvasScale.ts diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasResizer.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasResizer.tsx deleted file mode 100644 index e0d8776d8c..0000000000 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasResizer.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { Flex, Spinner } from '@chakra-ui/react'; -import { createSelector } from '@reduxjs/toolkit'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { - canvasSelector, - initialCanvasImageSelector, -} from 'features/canvas/store/canvasSelectors'; -import { - resizeAndScaleCanvas, - resizeCanvas, - setCanvasContainerDimensions, - setDoesCanvasNeedScaling, -} from 'features/canvas/store/canvasSlice'; -import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; -import { memo, useLayoutEffect, useRef } from 'react'; - -const canvasResizerSelector = createSelector( - canvasSelector, - initialCanvasImageSelector, - activeTabNameSelector, - (canvas, initialCanvasImage, activeTabName) => { - const { doesCanvasNeedScaling, isCanvasInitialized } = canvas; - return { - doesCanvasNeedScaling, - activeTabName, - initialCanvasImage, - isCanvasInitialized, - }; - } -); - -const IAICanvasResizer = () => { - const dispatch = useAppDispatch(); - const { - doesCanvasNeedScaling, - activeTabName, - initialCanvasImage, - isCanvasInitialized, - } = useAppSelector(canvasResizerSelector); - - const ref = useRef(null); - - useLayoutEffect(() => { - window.setTimeout(() => { - if (!ref.current) { - return; - } - - const { clientWidth, clientHeight } = ref.current; - - dispatch( - setCanvasContainerDimensions({ - width: clientWidth, - height: clientHeight, - }) - ); - - if (!isCanvasInitialized) { - dispatch(resizeAndScaleCanvas()); - } else { - dispatch(resizeCanvas()); - } - - dispatch(setDoesCanvasNeedScaling(false)); - }, 0); - }, [ - dispatch, - initialCanvasImage, - doesCanvasNeedScaling, - activeTabName, - isCanvasInitialized, - ]); - - return ( - - - - ); -}; - -export default memo(IAICanvasResizer); diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx index 175fba8b4e..49ce63d25f 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx @@ -18,7 +18,6 @@ import { import { resetCanvas, resetCanvasView, - resizeAndScaleCanvas, setIsMaskEnabled, setLayer, setTool, @@ -183,7 +182,6 @@ const IAICanvasToolbar = () => { const handleResetCanvas = () => { dispatch(resetCanvas()); - dispatch(resizeAndScaleCanvas()); }; const handleMergeVisible = () => { diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasPersistDenylist.ts b/invokeai/frontend/web/src/features/canvas/store/canvasPersistDenylist.ts index dc0df55ad0..1990f28516 100644 --- a/invokeai/frontend/web/src/features/canvas/store/canvasPersistDenylist.ts +++ b/invokeai/frontend/web/src/features/canvas/store/canvasPersistDenylist.ts @@ -3,8 +3,4 @@ import { CanvasState } from './canvasTypes'; /** * Canvas slice persist denylist */ -export const canvasPersistDenylist: (keyof CanvasState)[] = [ - 'cursorPosition', - 'isCanvasInitialized', - 'doesCanvasNeedScaling', -]; +export const canvasPersistDenylist: (keyof CanvasState)[] = ['cursorPosition']; diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts index a05e1e27de..ca26a0567f 100644 --- a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts +++ b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts @@ -5,10 +5,6 @@ import { roundToMultiple, } from 'common/util/roundDownToMultiple'; import { setAspectRatio } from 'features/parameters/store/generationSlice'; -import { - setActiveTab, - setShouldUseCanvasBetaLayout, -} from 'features/ui/store/uiSlice'; import { IRect, Vector2d } from 'konva/lib/types'; import { clamp, cloneDeep } from 'lodash-es'; import { RgbaColor } from 'react-colorful'; @@ -50,12 +46,9 @@ export const initialCanvasState: CanvasState = { boundingBoxScaleMethod: 'none', brushColor: { r: 90, g: 90, b: 255, a: 1 }, brushSize: 50, - canvasContainerDimensions: { width: 0, height: 0 }, colorPickerColor: { r: 90, g: 90, b: 255, a: 1 }, cursorPosition: null, - doesCanvasNeedScaling: false, futureLayerStates: [], - isCanvasInitialized: false, isDrawing: false, isMaskEnabled: true, isMouseOverBoundingBox: false, @@ -208,7 +201,6 @@ export const canvasSlice = createSlice({ }; state.futureLayerStates = []; - state.isCanvasInitialized = false; const newScale = calculateScale( stageDimensions.width, stageDimensions.height, @@ -228,7 +220,6 @@ export const canvasSlice = createSlice({ ); state.stageScale = newScale; state.stageCoordinates = newCoordinates; - state.doesCanvasNeedScaling = true; }, setBoundingBoxDimensions: (state, action: PayloadAction) => { const newDimensions = roundDimensionsTo64(action.payload); @@ -258,9 +249,6 @@ export const canvasSlice = createSlice({ setBoundingBoxPreviewFill: (state, action: PayloadAction) => { state.boundingBoxPreviewFill = action.payload; }, - setDoesCanvasNeedScaling: (state, action: PayloadAction) => { - state.doesCanvasNeedScaling = action.payload; - }, setStageScale: (state, action: PayloadAction) => { state.stageScale = action.payload; }, @@ -493,136 +481,6 @@ export const canvasSlice = createSlice({ state.layerState = initialLayerState; state.futureLayerStates = []; }, - setCanvasContainerDimensions: ( - state, - action: PayloadAction - ) => { - state.canvasContainerDimensions = action.payload; - }, - resizeAndScaleCanvas: (state) => { - const { width: containerWidth, height: containerHeight } = - state.canvasContainerDimensions; - - const initialCanvasImage = - state.layerState.objects.find(isCanvasBaseImage); - - const newStageDimensions = { - width: Math.floor(containerWidth), - height: Math.floor(containerHeight), - }; - - if (!initialCanvasImage) { - const newScale = calculateScale( - newStageDimensions.width, - newStageDimensions.height, - 512, - 512, - STAGE_PADDING_PERCENTAGE - ); - - const newCoordinates = calculateCoordinates( - newStageDimensions.width, - newStageDimensions.height, - 0, - 0, - 512, - 512, - newScale - ); - - const newBoundingBoxDimensions = { width: 512, height: 512 }; - - state.stageScale = newScale; - state.stageCoordinates = newCoordinates; - state.stageDimensions = newStageDimensions; - state.boundingBoxCoordinates = { x: 0, y: 0 }; - state.boundingBoxDimensions = newBoundingBoxDimensions; - - if (state.boundingBoxScaleMethod === 'auto') { - const scaledDimensions = getScaledBoundingBoxDimensions( - newBoundingBoxDimensions - ); - state.scaledBoundingBoxDimensions = scaledDimensions; - } - - return; - } - - const { width: imageWidth, height: imageHeight } = initialCanvasImage; - - const padding = 0.95; - - const newScale = calculateScale( - containerWidth, - containerHeight, - imageWidth, - imageHeight, - padding - ); - - const newCoordinates = calculateCoordinates( - newStageDimensions.width, - newStageDimensions.height, - 0, - 0, - imageWidth, - imageHeight, - newScale - ); - - state.minimumStageScale = newScale; - state.stageScale = newScale; - state.stageCoordinates = floorCoordinates(newCoordinates); - state.stageDimensions = newStageDimensions; - - state.isCanvasInitialized = true; - }, - resizeCanvas: (state) => { - const { width: containerWidth, height: containerHeight } = - state.canvasContainerDimensions; - - const newStageDimensions = { - width: Math.floor(containerWidth), - height: Math.floor(containerHeight), - }; - - state.stageDimensions = newStageDimensions; - - if (!state.layerState.objects.find(isCanvasBaseImage)) { - const newScale = calculateScale( - newStageDimensions.width, - newStageDimensions.height, - 512, - 512, - STAGE_PADDING_PERCENTAGE - ); - - const newCoordinates = calculateCoordinates( - newStageDimensions.width, - newStageDimensions.height, - 0, - 0, - 512, - 512, - newScale - ); - - const newBoundingBoxDimensions = { width: 512, height: 512 }; - - state.stageScale = newScale; - - state.stageCoordinates = newCoordinates; - state.boundingBoxCoordinates = { x: 0, y: 0 }; - state.boundingBoxDimensions = newBoundingBoxDimensions; - - if (state.boundingBoxScaleMethod === 'auto') { - const scaledDimensions = getScaledBoundingBoxDimensions( - newBoundingBoxDimensions - ); - state.scaledBoundingBoxDimensions = scaledDimensions; - } - } - }, canvasResized: ( state, action: PayloadAction<{ width: number; height: number }> @@ -923,14 +781,6 @@ export const canvasSlice = createSlice({ state.layerState.stagingArea = initialLayerState.stagingArea; } }); - - builder.addCase(setShouldUseCanvasBetaLayout, (state) => { - state.doesCanvasNeedScaling = true; - }); - - builder.addCase(setActiveTab, (state) => { - state.doesCanvasNeedScaling = true; - }); builder.addCase(setAspectRatio, (state, action) => { const ratio = action.payload; if (ratio) { @@ -962,8 +812,6 @@ export const { resetCanvas, resetCanvasInteractionState, resetCanvasView, - resizeAndScaleCanvas, - resizeCanvas, setBoundingBoxCoordinates, setBoundingBoxDimensions, setBoundingBoxPreviewFill, @@ -971,10 +819,8 @@ export const { flipBoundingBoxAxes, setBrushColor, setBrushSize, - setCanvasContainerDimensions, setColorPickerColor, setCursorPosition, - setDoesCanvasNeedScaling, setInitialCanvasImage, setIsDrawing, setIsMaskEnabled, diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts index f2ba90b050..1b4eca329d 100644 --- a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts +++ b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts @@ -126,12 +126,9 @@ export interface CanvasState { boundingBoxScaleMethod: BoundingBoxScale; brushColor: RgbaColor; brushSize: number; - canvasContainerDimensions: Dimensions; colorPickerColor: RgbaColor; cursorPosition: Vector2d | null; - doesCanvasNeedScaling: boolean; futureLayerStates: CanvasLayerState[]; - isCanvasInitialized: boolean; isDrawing: boolean; isMaskEnabled: boolean; isMouseOverBoundingBox: boolean; diff --git a/invokeai/frontend/web/src/features/canvas/store/thunks/requestCanvasScale.ts b/invokeai/frontend/web/src/features/canvas/store/thunks/requestCanvasScale.ts deleted file mode 100644 index f16c92651a..0000000000 --- a/invokeai/frontend/web/src/features/canvas/store/thunks/requestCanvasScale.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { AppDispatch, AppGetState } from 'app/store/store'; -import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; -import { debounce } from 'lodash-es'; -import { setDoesCanvasNeedScaling } from '../canvasSlice'; - -const debouncedCanvasScale = debounce((dispatch: AppDispatch) => { - dispatch(setDoesCanvasNeedScaling(true)); -}, 300); - -export const requestCanvasRescale = - () => (dispatch: AppDispatch, getState: AppGetState) => { - const activeTabName = activeTabNameSelector(getState()); - if (activeTabName === 'unifiedCanvas') { - debouncedCanvasScale(dispatch); - } - }; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx index 3a793d2775..e57c8b9797 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx @@ -2,10 +2,7 @@ import { MenuItem } from '@chakra-ui/react'; import { skipToken } from '@reduxjs/toolkit/dist/query'; import { useAppToaster } from 'app/components/Toaster'; import { useAppDispatch } from 'app/store/storeHooks'; -import { - resizeAndScaleCanvas, - setInitialCanvasImage, -} from 'features/canvas/store/canvasSlice'; +import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice'; import { imagesToChangeSelected, isModalOpenChanged, @@ -29,6 +26,7 @@ import { FaShare, FaTrash, } from 'react-icons/fa'; +import { MdStar, MdStarBorder } from 'react-icons/md'; import { useGetImageMetadataQuery, useStarImagesMutation, @@ -37,7 +35,6 @@ import { import { ImageDTO } from 'services/api/types'; import { useDebounce } from 'use-debounce'; import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions'; -import { MdStar, MdStarBorder } from 'react-icons/md'; type SingleSelectionMenuItemsProps = { imageDTO: ImageDTO; @@ -110,7 +107,6 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { const handleSendToCanvas = useCallback(() => { dispatch(sentImageToCanvas()); dispatch(setInitialCanvasImage(imageDTO)); - dispatch(resizeAndScaleCanvas()); dispatch(setActiveTab('unifiedCanvas')); toaster({ diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx index 47f7666b4f..7af1a4d674 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx @@ -1,8 +1,6 @@ import { Flex } from '@chakra-ui/layout'; import { Portal } from '@chakra-ui/portal'; -import { useAppDispatch } from 'app/store/storeHooks'; import IAIIconButton from 'common/components/IAIIconButton'; -import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; import { RefObject, memo } from 'react'; import { useTranslation } from 'react-i18next'; import { MdPhotoLibrary } from 'react-icons/md'; @@ -18,11 +16,9 @@ const FloatingGalleryButton = ({ galleryPanelRef, }: Props) => { const { t } = useTranslation(); - const dispatch = useAppDispatch(); const handleShowGallery = () => { galleryPanelRef.current?.expand(); - dispatch(requestCanvasRescale()); }; if (!isGalleryCollapsed) { diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx index e2870708fd..aa24896591 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx @@ -1,7 +1,5 @@ import { ChakraProps, Flex, Portal } from '@chakra-ui/react'; -import { useAppDispatch } from 'app/store/storeHooks'; import IAIIconButton from 'common/components/IAIIconButton'; -import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton'; import InvokeButton from 'features/parameters/components/ProcessButtons/InvokeButton'; import { RefObject, memo } from 'react'; @@ -26,11 +24,9 @@ const FloatingSidePanelButtons = ({ sidePanelRef, }: Props) => { const { t } = useTranslation(); - const dispatch = useAppDispatch(); const handleShowSidePanel = () => { sidePanelRef.current?.expand(); - dispatch(requestCanvasRescale()); }; if (!isSidePanelCollapsed) { diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx index 6f800855dd..0f5a8d92ff 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx @@ -13,7 +13,6 @@ import { createSelector } from '@reduxjs/toolkit'; import AuxiliaryProgressIndicator from 'app/components/AuxiliaryProgressIndicator'; import { stateSelector } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent'; import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup'; import { InvokeTabName, tabMap } from 'features/ui/store/tabMap'; @@ -108,12 +107,6 @@ const InvokeTabs = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const handleResizeGallery = useCallback(() => { - if (activeTabName === 'unifiedCanvas') { - dispatch(requestCanvasRescale()); - } - }, [dispatch, activeTabName]); - const handleClickTab = useCallback((e: MouseEvent) => { if (e.target instanceof HTMLElement) { e.target.blur(); @@ -189,7 +182,6 @@ const InvokeTabs = () => { collapseSidePanel(); collapseGalleryPanel(); } - dispatch(requestCanvasRescale()); }, [dispatch, isGalleryPanelCollapsed, isSidePanelCollapsed] ); @@ -198,7 +190,6 @@ const InvokeTabs = () => { ['t', 'o'], () => { toggleSidePanel(); - dispatch(requestCanvasRescale()); }, [dispatch] ); @@ -207,7 +198,6 @@ const InvokeTabs = () => { 'g', () => { toggleGalleryPanel(); - dispatch(requestCanvasRescale()); }, [dispatch] ); @@ -253,7 +243,6 @@ const InvokeTabs = () => { ref={sidePanelRef} defaultSize={sidePanelMinSize} minSize={sidePanelMinSize} - onResize={handleResizeGallery} onCollapse={setIsSidePanelCollapsed} collapsible > @@ -290,7 +279,6 @@ const InvokeTabs = () => { id="gallery" ref={galleryPanelRef} order={2} - onResize={handleResizeGallery} defaultSize={galleryPanelMinSize} minSize={galleryPanelMinSize} onCollapse={setIsGalleryPanelCollapsed} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx index 63c9c494c4..8744fc2e0c 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx @@ -1,6 +1,4 @@ import { Box } from '@chakra-ui/react'; -import { useAppDispatch } from 'app/store/storeHooks'; -import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; import InitialImageDisplay from 'features/parameters/components/Parameters/ImageToImage/InitialImageDisplay'; import { usePanelStorage } from 'features/ui/hooks/usePanelStorage'; import { memo, useCallback, useRef } from 'react'; @@ -13,7 +11,6 @@ import ResizeHandle from '../ResizeHandle'; import TextToImageTabMain from '../TextToImage/TextToImageTabMain'; const ImageToImageTab = () => { - const dispatch = useAppDispatch(); const panelGroupRef = useRef(null); const handleDoubleClickHandle = useCallback(() => { @@ -50,9 +47,6 @@ const ImageToImageTab = () => { order={1} defaultSize={50} minSize={25} - onResize={() => { - dispatch(requestCanvasRescale()); - }} > diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasResetCanvas.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasResetCanvas.tsx index e8eeed7acc..85396c87be 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasResetCanvas.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasResetCanvas.tsx @@ -1,10 +1,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIIconButton from 'common/components/IAIIconButton'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; -import { - resetCanvas, - resizeAndScaleCanvas, -} from 'features/canvas/store/canvasSlice'; +import { resetCanvas } from 'features/canvas/store/canvasSlice'; import { useTranslation } from 'react-i18next'; import { FaTrash } from 'react-icons/fa'; @@ -15,7 +12,6 @@ export default function UnifiedCanvasResetCanvas() { const handleResetCanvas = () => { dispatch(resetCanvas()); - dispatch(resizeAndScaleCanvas()); }; return ( { - const { doesCanvasNeedScaling } = canvas; - return { - doesCanvasNeedScaling, - }; - }, - defaultSelectorOptions -); +import { memo } from 'react'; const droppableData: CanvasInitialImageDropData = { id: 'canvas-intial-image', @@ -29,10 +13,6 @@ const droppableData: CanvasInitialImageDropData = { }; const UnifiedCanvasContent = () => { - const dispatch = useAppDispatch(); - - const { doesCanvasNeedScaling } = useAppSelector(selector); - const { isOver, setNodeRef: setDroppableRef, @@ -42,16 +22,6 @@ const UnifiedCanvasContent = () => { data: droppableData, }); - useLayoutEffect(() => { - const resizeCallback = () => { - dispatch(requestCanvasRescale()); - }; - - window.addEventListener('resize', resizeCallback); - - return () => window.removeEventListener('resize', resizeCallback); - }, [dispatch]); - return ( { > - {/* {doesCanvasNeedScaling ? : } */} {isValidDrop(droppableData, active) && ( )}