From 2a90f4f59e25c8cc824a5916a2dc5df1e2b301c5 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 4 Oct 2024 13:13:22 +1000 Subject: [PATCH] fix(ui): Apple Pencil requires onPointerUp instead of onClick With `onClick`, elements w/ a tooltip require a double-tap. --- .../app/components/AppErrorBoundaryFallback.tsx | 4 ++-- .../components/ColorPicker/RgbColorPicker.tsx | 4 ++-- .../components/ColorPicker/RgbaColorPicker.tsx | 4 ++-- .../web/src/common/components/IAIDndImage.tsx | 6 +++--- .../web/src/common/components/IAIDndImageIcon.tsx | 8 ++++---- .../InformationalPopover/InformationalPopover.tsx | 8 ++++---- .../components/CanvasAddEntityButtons.tsx | 12 ++++++------ .../CanvasAlerts/CanvasAlertsSendingTo.tsx | 8 ++++---- .../CanvasContextMenuGlobalMenuItems.tsx | 12 ++++++------ .../CanvasContextMenuItemsCropCanvasToBbox.tsx | 2 +- .../EntityListGlobalActionBarAddLayerMenu.tsx | 12 ++++++------ ...yListSelectedEntityActionBarDuplicateButton.tsx | 4 ++-- ...tityListSelectedEntityActionBarFilterButton.tsx | 2 +- ...stSelectedEntityActionBarSaveToAssetsButton.tsx | 4 ++-- ...yListSelectedEntityActionBarTransformButton.tsx | 2 +- .../controlLayers/components/CanvasRightPanel.tsx | 4 ++-- .../ControlLayer/ControlLayerControlAdapter.tsx | 4 ++-- ...ControlLayerMenuItemsConvertControlToRaster.tsx | 2 +- .../ControlLayerMenuItemsTransparencyEffect.tsx | 2 +- .../controlLayers/components/Filters/Filter.tsx | 8 ++++---- .../components/IPAdapter/IPAdapterImagePreview.tsx | 2 +- .../components/IPAdapter/IPAdapterSettings.tsx | 2 +- .../RasterLayerMenuItemsConvertRasterToControl.tsx | 4 ++-- .../RegionalGuidanceAddPromptsIPAdapterButtons.tsx | 6 +++--- .../RegionalGuidanceDeletePromptButton.tsx | 2 +- .../RegionalGuidanceIPAdapterSettings.tsx | 4 ++-- ...onalGuidanceMenuItemsAddPromptsAndIPAdapter.tsx | 6 +++--- .../RegionalGuidanceMenuItemsAutoNegative.tsx | 4 ++-- .../Settings/CanvasSettingsClearCachesButton.tsx | 2 +- .../Settings/CanvasSettingsClearHistoryButton.tsx | 4 ++-- .../Settings/CanvasSettingsLogDebugInfo.tsx | 4 ++-- .../CanvasSettingsRecalculateRectsButton.tsx | 4 ++-- .../StagingArea/StagingAreaToolbarAcceptButton.tsx | 2 +- .../StagingAreaToolbarDiscardAllButton.tsx | 2 +- .../StagingAreaToolbarDiscardSelectedButton.tsx | 2 +- .../StagingArea/StagingAreaToolbarNextButton.tsx | 2 +- .../StagingArea/StagingAreaToolbarPrevButton.tsx | 2 +- ...agingAreaToolbarSaveSelectedToGalleryButton.tsx | 2 +- .../StagingAreaToolbarToggleShowResultsButton.tsx | 2 +- .../components/Tool/ToolBboxButton.tsx | 2 +- .../components/Tool/ToolBrushButton.tsx | 2 +- .../components/Tool/ToolColorPickerButton.tsx | 2 +- .../components/Tool/ToolEraserButton.tsx | 2 +- .../components/Tool/ToolMoveButton.tsx | 2 +- .../components/Tool/ToolRectButton.tsx | 2 +- .../components/Tool/ToolViewButton.tsx | 2 +- .../Toolbar/CanvasToolbarFitBboxToLayersButton.tsx | 4 ++-- .../components/Toolbar/CanvasToolbarRedoButton.tsx | 4 ++-- .../Toolbar/CanvasToolbarResetCanvasButton.tsx | 4 ++-- .../Toolbar/CanvasToolbarResetViewButton.tsx | 2 +- .../Toolbar/CanvasToolbarSaveToGalleryButton.tsx | 2 +- .../components/Toolbar/CanvasToolbarScale.tsx | 8 ++++---- .../components/Toolbar/CanvasToolbarUndoButton.tsx | 4 ++-- .../components/Transform/Transform.tsx | 8 ++++---- .../common/CanvasEntityAddOfTypeButton.tsx | 4 ++-- .../components/common/CanvasEntityContainer.tsx | 4 ++-- .../components/common/CanvasEntityDeleteButton.tsx | 4 ++-- .../common/CanvasEntityEnabledToggle.tsx | 4 ++-- .../components/common/CanvasEntityGroupList.tsx | 2 +- ...anvasEntityIsBookmarkedForQuickSwitchToggle.tsx | 4 ++-- .../common/CanvasEntityIsLockedToggle.tsx | 4 ++-- .../common/CanvasEntityMenuItemsArrange.tsx | 8 ++++---- .../CanvasEntityMenuItemsCopyToClipboard.tsx | 4 ++-- .../common/CanvasEntityMenuItemsCropToBbox.tsx | 4 ++-- .../common/CanvasEntityMenuItemsDelete.tsx | 2 +- .../common/CanvasEntityMenuItemsDuplicate.tsx | 4 ++-- .../common/CanvasEntityMenuItemsFilter.tsx | 2 +- .../common/CanvasEntityMenuItemsSave.tsx | 4 ++-- .../common/CanvasEntityMenuItemsTransform.tsx | 2 +- .../common/CanvasEntityMergeVisibleButton.tsx | 4 ++-- .../common/CanvasEntityTypeIsHiddenToggle.tsx | 4 ++-- .../components/DeleteImageButton.tsx | 6 +++--- .../components/ShowDynamicPromptsPreviewButton.tsx | 2 +- .../gallery/components/Boards/BoardContextMenu.tsx | 10 +++++----- .../Boards/BoardsList/AddBoardButton.tsx | 2 +- .../components/Boards/BoardsList/BoardsList.tsx | 2 +- .../components/Boards/BoardsList/BoardsSearch.tsx | 2 +- .../components/Boards/BoardsList/GalleryBoard.tsx | 6 +++--- .../components/Boards/BoardsList/NoBoardBoard.tsx | 2 +- .../gallery/components/Boards/DeleteBoardModal.tsx | 6 +++--- .../components/Boards/NoBoardBoardContextMenu.tsx | 4 ++-- .../src/features/gallery/components/Gallery.tsx | 6 +++--- .../gallery/components/GalleryPanelContent.tsx | 4 ++-- .../ImageContextMenu/ImageMenuItemChangeBoard.tsx | 4 ++-- .../ImageContextMenu/ImageMenuItemCopy.tsx | 4 ++-- .../ImageContextMenu/ImageMenuItemDelete.tsx | 4 ++-- .../ImageContextMenu/ImageMenuItemDownload.tsx | 4 ++-- .../ImageContextMenu/ImageMenuItemLoadWorkflow.tsx | 4 ++-- .../ImageMenuItemMetadataRecallActions.tsx | 10 +++++----- .../ImageMenuItemNewCanvasFromImage.tsx | 2 +- .../ImageMenuItemNewLayerFromImage.tsx | 2 +- .../ImageContextMenu/ImageMenuItemOpenInNewTab.tsx | 4 ++-- .../ImageContextMenu/ImageMenuItemOpenInViewer.tsx | 4 ++-- .../ImageMenuItemSelectForCompare.tsx | 4 ++-- .../ImageMenuItemSendToUpscale.tsx | 2 +- .../ImageContextMenu/ImageMenuItemStarUnstar.tsx | 4 ++-- .../MultipleSelectionMenuItems.tsx | 10 +++++----- .../gallery/components/ImageGrid/GalleryImage.tsx | 12 ++++++------ .../components/ImageGrid/GalleryPagination.tsx | 10 +++++----- .../gallery/components/ImageGrid/GallerySearch.tsx | 2 +- .../ImageGrid/GallerySelectionCountTag.tsx | 2 +- .../gallery/components/ImageGrid/JumpTo.tsx | 10 +++++----- .../components/ImageMetadataViewer/DataViewer.tsx | 6 +++--- .../components/ImageViewer/CompareToolbar.tsx | 12 ++++++------ .../components/ImageViewer/CurrentImageButtons.tsx | 14 +++++++------- .../ImageViewer/ToggleMetadataViewerButton.tsx | 2 +- .../ImageViewer/ToggleProgressButton.tsx | 4 ++-- .../gallery/components/NextPrevImageButtons.tsx | 8 ++++---- .../web/src/features/lora/components/LoRACard.tsx | 2 +- .../metadata/components/MetadataItemView.tsx | 2 +- .../modelManagerV2/hooks/useStarterModelsToast.tsx | 4 ++-- .../HuggingFaceFolder/HuggingFaceForm.tsx | 2 +- .../HuggingFaceFolder/HuggingFaceResultItem.tsx | 4 ++-- .../HuggingFaceFolder/HuggingFaceResults.tsx | 6 +++--- .../subpanels/AddModelPanel/InstallModelForm.tsx | 2 +- .../ModelInstallQueue/ModelInstallQueue.tsx | 2 +- .../ModelInstallQueue/ModelInstallQueueItem.tsx | 2 +- .../AddModelPanel/ScanFolder/ScanFolderForm.tsx | 2 +- .../ScanFolder/ScanFolderResultItem.tsx | 2 +- .../AddModelPanel/ScanFolder/ScanFolderResults.tsx | 4 ++-- .../StarterModels/StartModelsResultItem.tsx | 4 ++-- .../StarterModels/StarterModelsResults.tsx | 2 +- .../modelManagerV2/subpanels/InstallModels.tsx | 4 ++-- .../modelManagerV2/subpanels/ModelManager.tsx | 2 +- .../subpanels/ModelManagerPanel/ModelListItem.tsx | 6 +++--- .../ModelManagerPanel/ModelListNavigation.tsx | 2 +- .../ModelManagerPanel/ModelTypeFilter.tsx | 4 ++-- .../ControlNetOrT2IAdapterDefaultSettings.tsx | 2 +- .../ModelPanel/Fields/ModelImageUpload.tsx | 2 +- .../MainModelDefaultSettings.tsx | 2 +- .../subpanels/ModelPanel/ModelConvertButton.tsx | 2 +- .../subpanels/ModelPanel/ModelEdit.tsx | 4 ++-- .../subpanels/ModelPanel/ModelEditButton.tsx | 2 +- .../subpanels/ModelPanel/TriggerPhrases.tsx | 4 ++-- .../nodes/Invocation/fields/EditableFieldTitle.tsx | 8 ++++---- .../Invocation/fields/FieldLinearViewToggle.tsx | 4 ++-- .../nodes/Invocation/fields/LinearViewField.tsx | 4 ++-- .../fields/inputs/ImageFieldInputComponent.tsx | 2 +- .../flow/nodes/common/NodeCollapseButton.tsx | 2 +- .../components/flow/nodes/common/NodeTitle.tsx | 6 +++--- .../components/flow/nodes/common/NodeWrapper.tsx | 2 +- .../panels/BottomLeftPanel/ViewportControls.tsx | 10 +++++----- .../flow/panels/TopPanel/AddNodeButton.tsx | 2 +- .../flow/panels/TopPanel/ClearFlowButton.tsx | 4 ++-- .../flow/panels/TopPanel/SaveWorkflowButton.tsx | 2 +- .../flow/panels/TopPanel/UpdateNodesButton.tsx | 2 +- .../panels/TopRightPanel/ReloadSchemaButton.tsx | 2 +- .../nodes/components/sidePanel/ModeToggle.tsx | 8 ++++---- .../components/sidePanel/viewMode/EmptyState.tsx | 4 ++-- .../sidePanel/viewMode/WorkflowField.tsx | 2 +- .../components/Bbox/BboxLockAspectRatioButton.tsx | 4 ++-- .../components/Bbox/BboxSetOptimalSizeButton.tsx | 4 ++-- .../components/Bbox/BboxSwapDimensionsButton.tsx | 4 ++-- .../MainModel/NavigateToModelManagerButton.tsx | 2 +- .../MainModel/UseDefaultSettingsButton.tsx | 2 +- .../PostProcessing/PostProcessingPopover.tsx | 6 +++--- .../components/Prompts/ViewModePrompt.tsx | 2 +- .../components/Seed/ParamSeedShuffle.tsx | 2 +- .../src/features/prompt/AddPromptTriggerButton.tsx | 2 +- .../components/ClearInvocationCacheButton.tsx | 2 +- .../features/queue/components/ClearQueueButton.tsx | 2 +- .../queue/components/ClearQueueIconButton.tsx | 2 +- .../queue/components/InvokeQueueBackButton.tsx | 2 +- .../queue/components/PauseProcessorButton.tsx | 2 +- .../features/queue/components/PruneQueueButton.tsx | 2 +- .../queue/components/QueueActionsMenuButton.tsx | 14 +++++++------- .../components/QueueList/QueueItemComponent.tsx | 4 ++-- .../queue/components/QueueList/QueueItemDetail.tsx | 4 ++-- .../queue/components/ResumeProcessorButton.tsx | 2 +- .../src/features/queue/components/SendToToggle.tsx | 4 ++-- .../components/ToggleInvocationCacheButton.tsx | 4 ++-- .../queue/components/common/QueueButton.tsx | 8 ++++---- .../components/SDXLPrompts/SDXLConcatButton.tsx | 2 +- .../SDXLRefiner/ParamSDXLRefinerModelSelect.tsx | 2 +- .../UpscaleInitialImage.tsx | 2 +- .../UpscaleSettingsAccordion/UpscaleWarning.tsx | 2 +- .../stylePresets/components/ActiveStylePreset.tsx | 6 +++--- .../components/StylePresetCreateButton.tsx | 2 +- .../components/StylePresetExportButton.tsx | 2 +- .../components/StylePresetForm/StylePresetForm.tsx | 2 +- .../StylePresetForm/StylePresetImageField.tsx | 2 +- .../StylePresetForm/StylePresetPromptField.tsx | 2 +- .../stylePresets/components/StylePresetList.tsx | 2 +- .../components/StylePresetListItem.tsx | 8 ++++---- .../components/StylePresetMenuTrigger.tsx | 2 +- .../stylePresets/components/StylePresetSearch.tsx | 2 +- .../system/components/AboutModal/AboutModal.tsx | 4 ++-- .../components/HotkeysModal/HotkeysModal.tsx | 4 ++-- .../SettingsDeveloperLogNamespaces.tsx | 4 ++-- .../components/SettingsModal/SettingsModal.tsx | 6 +++--- .../src/features/toast/ErrorToastDescription.tsx | 2 +- .../ui/components/FloatingGalleryButton.tsx | 2 +- .../components/FloatingParametersPanelButtons.tsx | 8 ++++---- .../web/src/features/ui/components/TabButton.tsx | 4 ++-- .../LoadWorkflowFromGraphModal.tsx | 4 ++-- .../components/NewWorkflowButton.tsx | 4 ++-- .../NewWorkflowConfirmationAlertDialog.tsx | 6 +++--- .../SaveWorkflowAsDialog/SaveWorkflowAsDialog.tsx | 4 ++-- .../components/WorkflowLibraryButton.tsx | 2 +- .../components/WorkflowLibraryList.tsx | 4 ++-- .../components/WorkflowLibraryListItem.tsx | 4 ++-- .../DownloadWorkflowMenuItem.tsx | 2 +- .../LoadWorkflowFromGraphMenuItem.tsx | 2 +- .../WorkflowLibraryMenu/NewWorkflowMenuItem.tsx | 4 ++-- .../WorkflowLibraryMenu/SaveWorkflowAsMenuItem.tsx | 2 +- .../WorkflowLibraryMenu/SaveWorkflowMenuItem.tsx | 2 +- .../WorkflowLibraryMenu/SettingsMenuItem.tsx | 2 +- .../components/WorkflowLibraryPagination.tsx | 10 +++++----- 208 files changed, 412 insertions(+), 412 deletions(-) diff --git a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx index b20a8148e2..3ec5e364d3 100644 --- a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx +++ b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx @@ -65,10 +65,10 @@ const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => { - - diff --git a/invokeai/frontend/web/src/common/components/ColorPicker/RgbColorPicker.tsx b/invokeai/frontend/web/src/common/components/ColorPicker/RgbColorPicker.tsx index 1361039b75..dd8d86462d 100644 --- a/invokeai/frontend/web/src/common/components/ColorPicker/RgbColorPicker.tsx +++ b/invokeai/frontend/web/src/common/components/ColorPicker/RgbColorPicker.tsx @@ -98,8 +98,8 @@ const RgbColorPicker = (props: Props) => { export default memo(RgbColorPicker); const ColorSwatch = ({ color, onChange }: { color: RgbColor; onChange: (color: RgbColor) => void }) => { - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { onChange(color); }, [color, onChange]); - return ; + return ; }; diff --git a/invokeai/frontend/web/src/common/components/ColorPicker/RgbaColorPicker.tsx b/invokeai/frontend/web/src/common/components/ColorPicker/RgbaColorPicker.tsx index fb3b1da2a0..a83831f5a9 100644 --- a/invokeai/frontend/web/src/common/components/ColorPicker/RgbaColorPicker.tsx +++ b/invokeai/frontend/web/src/common/components/ColorPicker/RgbaColorPicker.tsx @@ -109,8 +109,8 @@ const RgbaColorPicker = (props: Props) => { export default memo(RgbaColorPicker); const ColorSwatch = ({ color, onChange }: { color: RgbaColor; onChange: (color: RgbaColor) => void }) => { - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { onChange(color); }, [color, onChange]); - return ; + return ; }; diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx index f4b85736c5..6522a6b9a5 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx @@ -55,7 +55,7 @@ type IAIDndImageProps = FlexProps & { imageDTO: ImageDTO | undefined; onError?: (event: SyntheticEvent) => void; onLoad?: (event: SyntheticEvent) => void; - onClick?: (event: MouseEvent) => void; + onPointerUp?: (event: MouseEvent) => void; withMetadataOverlay?: boolean; isDragDisabled?: boolean; isDropDisabled?: boolean; @@ -82,7 +82,7 @@ const IAIDndImage = (props: IAIDndImageProps) => { const { imageDTO, onError, - onClick, + onPointerUp, withMetadataOverlay = false, isDropDisabled = false, isDragDisabled = false, @@ -228,7 +228,7 @@ const IAIDndImage = (props: IAIDndImageProps) => { )} diff --git a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx index 8c24c2be55..42814fc904 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx @@ -16,17 +16,17 @@ const sx: SystemStyleObject = { }, }; -type Props = Omit & { - onClick: (event: MouseEvent) => void; +type Props = Omit & { + onPointerUp: (event: MouseEvent) => void; tooltip: string; }; const IAIDndImageIcon = (props: Props) => { - const { onClick, tooltip, icon, ...rest } = props; + const { onPointerUp, tooltip, icon, ...rest } = props; return ( { [feature, t] ); - const onClickLearnMore = useCallback(() => { + const onPointerUpLearnMore = useCallback(() => { if (!data?.href) { return; } window.open(data.href); }, [data?.href]); - const onClickDontShowMeThese = useCallback(() => { + const onPointerUpDontShowMeThese = useCallback(() => { dispatch(setShouldEnableInformationalPopovers(false)); toast({ title: t('settings.informationalPopoversDisabled'), @@ -135,13 +135,13 @@ const Content = ({ data, feature, hideDisable }: ContentProps) => { {!hideDisable && ( - )} {data?.href && ( - )} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx index 861ff3636f..7cccf3433a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx @@ -33,7 +33,7 @@ export const CanvasAddEntityButtons = memo(() => { variant="ghost" justifyContent="flex-start" leftIcon={} - onClick={addGlobalReferenceImage} + onPointerUp={addGlobalReferenceImage} isDisabled={isFLUX} > {t('controlLayers.globalReferenceImage')} @@ -46,7 +46,7 @@ export const CanvasAddEntityButtons = memo(() => { variant="ghost" justifyContent="flex-start" leftIcon={} - onClick={addInpaintMask} + onPointerUp={addInpaintMask} > {t('controlLayers.inpaintMask')} @@ -55,7 +55,7 @@ export const CanvasAddEntityButtons = memo(() => { variant="ghost" justifyContent="flex-start" leftIcon={} - onClick={addRegionalGuidance} + onPointerUp={addRegionalGuidance} isDisabled={isFLUX} > {t('controlLayers.regionalGuidance')} @@ -65,7 +65,7 @@ export const CanvasAddEntityButtons = memo(() => { variant="ghost" justifyContent="flex-start" leftIcon={} - onClick={addRegionalReferenceImage} + onPointerUp={addRegionalReferenceImage} isDisabled={isFLUX} > {t('controlLayers.regionalReferenceImage')} @@ -79,7 +79,7 @@ export const CanvasAddEntityButtons = memo(() => { variant="ghost" justifyContent="flex-start" leftIcon={} - onClick={addControlLayer} + onPointerUp={addControlLayer} isDisabled={isFLUX} > {t('controlLayers.controlLayer')} @@ -89,7 +89,7 @@ export const CanvasAddEntityButtons = memo(() => { variant="ghost" justifyContent="flex-start" leftIcon={} - onClick={addRasterLayer} + onPointerUp={addRasterLayer} > {t('controlLayers.rasterLayer')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx index 67df7ee3a1..7291e8f847 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx @@ -17,12 +17,12 @@ import { Trans, useTranslation } from 'react-i18next'; const ActivateImageViewerButton = (props: PropsWithChildren) => { const imageViewer = useImageViewer(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { imageViewer.open(); selectCanvasRightPanelGalleryTab(); }, [imageViewer]); return ( - ); @@ -58,13 +58,13 @@ export const CanvasAlertsSendingToGallery = () => { const ActivateCanvasButton = (props: PropsWithChildren) => { const dispatch = useAppDispatch(); const imageViewer = useImageViewer(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(setActiveTab('canvas')); selectCanvasRightPanelLayersTab(); imageViewer.close(); }, [dispatch, imageViewer]); return ( - ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems.tsx index c66257320c..1280b886f2 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuGlobalMenuItems.tsx @@ -30,24 +30,24 @@ export const CanvasContextMenuGlobalMenuItems = memo(() => { - } isDisabled={isBusy} onClick={saveCanvasToGallery}> + } isDisabled={isBusy} onPointerUp={saveCanvasToGallery}> {t('controlLayers.canvasContextMenu.saveCanvasToGallery')} - } isDisabled={isBusy} onClick={saveBboxToGallery}> + } isDisabled={isBusy} onPointerUp={saveBboxToGallery}> {t('controlLayers.canvasContextMenu.saveBboxToGallery')} - } isDisabled={isBusy} onClick={newGlobalReferenceImageFromBbox}> + } isDisabled={isBusy} onPointerUp={newGlobalReferenceImageFromBbox}> {t('controlLayers.canvasContextMenu.newGlobalReferenceImage')} - } isDisabled={isBusy} onClick={newRegionalReferenceImageFromBbox}> + } isDisabled={isBusy} onPointerUp={newRegionalReferenceImageFromBbox}> {t('controlLayers.canvasContextMenu.newRegionalReferenceImage')} - } isDisabled={isBusy} onClick={newControlLayerFromBbox}> + } isDisabled={isBusy} onPointerUp={newControlLayerFromBbox}> {t('controlLayers.canvasContextMenu.newControlLayer')} - } isDisabled={isBusy} onClick={newRasterLayerFromBbox}> + } isDisabled={isBusy} onPointerUp={newRasterLayerFromBbox}> {t('controlLayers.canvasContextMenu.newRasterLayer')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuItemsCropCanvasToBbox.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuItemsCropCanvasToBbox.tsx index 5f034ed797..e8bbd39a6b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuItemsCropCanvasToBbox.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuItemsCropCanvasToBbox.tsx @@ -17,7 +17,7 @@ export const CanvasContextMenuItemsCropCanvasToBbox = memo(() => { }, [canvasManager]); return ( - } isDisabled={isBusy} onClick={cropCanvasToBbox}> + } isDisabled={isBusy} onPointerUp={cropCanvasToBbox}> {t('controlLayers.canvasContextMenu.cropCanvasToBbox')} ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx index a98773e7f4..091f29a08a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx @@ -40,26 +40,26 @@ export const EntityListGlobalActionBarAddLayerMenu = memo(() => { /> - } onClick={addGlobalReferenceImage} isDisabled={isFLUX}> + } onPointerUp={addGlobalReferenceImage} isDisabled={isFLUX}> {t('controlLayers.globalReferenceImage')} - } onClick={addInpaintMask}> + } onPointerUp={addInpaintMask}> {t('controlLayers.inpaintMask')} - } onClick={addRegionalGuidance} isDisabled={isFLUX}> + } onPointerUp={addRegionalGuidance} isDisabled={isFLUX}> {t('controlLayers.regionalGuidance')} - } onClick={addRegionalReferenceImage} isDisabled={isFLUX}> + } onPointerUp={addRegionalReferenceImage} isDisabled={isFLUX}> {t('controlLayers.regionalReferenceImage')} - } onClick={addControlLayer} isDisabled={isFLUX}> + } onPointerUp={addControlLayer} isDisabled={isFLUX}> {t('controlLayers.controlLayer')} - } onClick={addRasterLayer}> + } onPointerUp={addRasterLayer}> {t('controlLayers.rasterLayer')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx index 977d027b99..a9368ba7d8 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx @@ -12,7 +12,7 @@ export const EntityListSelectedEntityActionBarDuplicateButton = memo(() => { const dispatch = useAppDispatch(); const isBusy = useCanvasIsBusy(); const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { if (!selectedEntityIdentifier) { return; } @@ -21,7 +21,7 @@ export const EntityListSelectedEntityActionBarDuplicateButton = memo(() => { return ( { return ( { const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier); const adapter = useEntityAdapterSafe(selectedEntityIdentifier); const saveLayerToAssets = useSaveLayerToAssets(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { saveLayerToAssets(adapter); }, [saveLayerToAssets, adapter]); @@ -29,7 +29,7 @@ export const EntityListSelectedEntityActionBarSaveToAssetsButton = memo(() => { return ( { return ( { const { t } = useTranslation(); const tabIndex = useStore($canvasRightPanelTabIndex); const imageViewer = useImageViewer(); - const onClickViewerToggleButton = useCallback(() => { + const onPointerUpViewerToggleButton = useCallback(() => { if ($canvasRightPanelTabIndex.get() !== 1) { $canvasRightPanelTabIndex.set(1); } @@ -38,7 +38,7 @@ export const CanvasRightPanel = memo(() => { - diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx index 4d324f6599..f2a06d55a3 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerControlAdapter.tsx @@ -84,7 +84,7 @@ export const ControlLayerControlAdapter = memo(() => { { icon={} /> { }, [dispatch, entityIdentifier]); return ( - } isDisabled={!isInteractable}> + } isDisabled={!isInteractable}> {t('controlLayers.convertToRasterLayer')} ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerMenuItemsTransparencyEffect.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerMenuItemsTransparencyEffect.tsx index 2875774d75..3e25988c15 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerMenuItemsTransparencyEffect.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerMenuItemsTransparencyEffect.tsx @@ -28,7 +28,7 @@ export const ControlLayerMenuItemsTransparencyEffect = memo(() => { }, [dispatch, entityIdentifier]); return ( - } isDisabled={!isInteractable}> + } isDisabled={!isInteractable}> {withTransparencyEffect ? t('controlLayers.disableTransparencyEffect') : t('controlLayers.enableTransparencyEffect')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx index 484fdfd9e9..a1bde92693 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Filters/Filter.tsx @@ -109,7 +109,7 @@ const FilterContent = memo( - diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton.tsx index 2fc7483756..182382082f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton.tsx @@ -15,7 +15,7 @@ export const RegionalGuidanceDeletePromptButton = memo(({ onDelete }: Props) => variant="link" aria-label={t('controlLayers.deletePrompt')} icon={} - onClick={onDelete} + onPointerUp={onDelete} flexGrow={0} size="sm" p={0} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettings.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettings.tsx index e6c6f292a3..f946d0c2de 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettings.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettings.tsx @@ -120,7 +120,7 @@ export const RegionalGuidanceIPAdapterSettings = memo(({ referenceImageId }: Pro icon={} tooltip={t('controlLayers.deleteReferenceImage')} aria-label={t('controlLayers.deleteReferenceImage')} - onClick={onDeleteIPAdapter} + onPointerUp={onDeleteIPAdapter} colorScheme="error" /> @@ -135,7 +135,7 @@ export const RegionalGuidanceIPAdapterSettings = memo(({ referenceImageId }: Pro /> { return ( <> - + {t('controlLayers.addPositivePrompt')} - + {t('controlLayers.addNegativePrompt')} - + {t('controlLayers.addReferenceImage')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAutoNegative.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAutoNegative.tsx index 0cd3480fd9..0fd54f0b14 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAutoNegative.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAutoNegative.tsx @@ -17,12 +17,12 @@ export const RegionalGuidanceMenuItemsAutoNegative = memo(() => { [entityIdentifier] ); const autoNegative = useAppSelector(selectAutoNegative); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(rgAutoNegativeToggled({ entityIdentifier })); }, [dispatch, entityIdentifier]); return ( - } onClick={onClick}> + } onPointerUp={onPointerUp}> {autoNegative ? t('controlLayers.disableAutoNegative') : t('controlLayers.enableAutoNegative')} ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsClearCachesButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsClearCachesButton.tsx index a3fd6c7317..ba47fcc577 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsClearCachesButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsClearCachesButton.tsx @@ -10,7 +10,7 @@ export const CanvasSettingsClearCachesButton = memo(() => { canvasManager.cache.clearAll(); }, [canvasManager]); return ( - ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsClearHistoryButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsClearHistoryButton.tsx index 2e11898986..5ade75d3a2 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsClearHistoryButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsClearHistoryButton.tsx @@ -7,11 +7,11 @@ import { useTranslation } from 'react-i18next'; export const CanvasSettingsClearHistoryButton = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(canvasClearHistory()); }, [dispatch]); return ( - ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo.tsx index 01323b2fa3..feb77f293e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsLogDebugInfo.tsx @@ -6,11 +6,11 @@ import { useTranslation } from 'react-i18next'; export const CanvasSettingsLogDebugInfoButton = memo(() => { const { t } = useTranslation(); const canvasManager = useCanvasManager(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { canvasManager.logDebugInfo(); }, [canvasManager]); return ( - ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton.tsx index 2eee581392..a3175aaf4d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton.tsx @@ -6,14 +6,14 @@ import { useTranslation } from 'react-i18next'; export const CanvasSettingsRecalculateRectsButton = memo(() => { const { t } = useTranslation(); const canvasManager = useCanvasManager(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { for (const adapter of canvasManager.getAllAdapters()) { adapter.transformer.requestRectCalculation(); } }, [canvasManager]); return ( - ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx index 7d01422854..e8e60dbf4b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx @@ -60,7 +60,7 @@ export const StagingAreaToolbarAcceptButton = memo(() => { tooltip={`${t('common.accept')} (Enter)`} aria-label={`${t('common.accept')} (Enter)`} icon={} - onClick={acceptSelected} + onPointerUp={acceptSelected} colorScheme="invokeBlue" isDisabled={!selectedImage} /> diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx index ee038c075e..2813f6c0e8 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx @@ -18,7 +18,7 @@ export const StagingAreaToolbarDiscardAllButton = memo(() => { tooltip={`${t('controlLayers.stagingArea.discardAll')} (Esc)`} aria-label={t('controlLayers.stagingArea.discardAll')} icon={} - onClick={discardAll} + onPointerUp={discardAll} colorScheme="error" fontSize={16} /> diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx index 4616f75282..4b13bc4c9e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx @@ -35,7 +35,7 @@ export const StagingAreaToolbarDiscardSelectedButton = memo(() => { tooltip={t('controlLayers.stagingArea.discard')} aria-label={t('controlLayers.stagingArea.discard')} icon={} - onClick={discardSelected} + onPointerUp={discardSelected} colorScheme="invokeBlue" fontSize={16} isDisabled={!selectedImage} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarNextButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarNextButton.tsx index 3809601a62..ca0239e7ae 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarNextButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarNextButton.tsx @@ -40,7 +40,7 @@ export const StagingAreaToolbarNextButton = memo(() => { tooltip={`${t('controlLayers.stagingArea.next')} (Right)`} aria-label={`${t('controlLayers.stagingArea.next')} (Right)`} icon={} - onClick={selectNext} + onPointerUp={selectNext} colorScheme="invokeBlue" isDisabled={imageCount <= 1 || !shouldShowStagedImage} /> diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton.tsx index 3d064abc2f..066a158cfc 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton.tsx @@ -40,7 +40,7 @@ export const StagingAreaToolbarPrevButton = memo(() => { tooltip={`${t('controlLayers.stagingArea.previous')} (Left)`} aria-label={`${t('controlLayers.stagingArea.previous')} (Left)`} icon={} - onClick={selectPrev} + onPointerUp={selectPrev} colorScheme="invokeBlue" isDisabled={imageCount <= 1 || !shouldShowStagedImage} /> diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx index 5a88f1dd5a..3ee0697ab5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx @@ -40,7 +40,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => { tooltip={t('controlLayers.stagingArea.saveToGallery')} aria-label={t('controlLayers.stagingArea.saveToGallery')} icon={} - onClick={saveSelectedImageToGallery} + onPointerUp={saveSelectedImageToGallery} colorScheme="invokeBlue" isDisabled={!selectedImage || !selectedImage.imageDTO.is_intermediate} /> diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarToggleShowResultsButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarToggleShowResultsButton.tsx index ce1b3227fd..bb1e1e5ab5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarToggleShowResultsButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarToggleShowResultsButton.tsx @@ -29,7 +29,7 @@ export const StagingAreaToolbarToggleShowResultsButton = memo(() => { } data-alert={!shouldShowStagedImage} icon={shouldShowStagedImage ? : } - onClick={toggleShowResults} + onPointerUp={toggleShowResults} colorScheme="invokeBlue" /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx index 4796092faf..2a4d8f8d8f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBboxButton.tsx @@ -27,7 +27,7 @@ export const ToolBboxButton = memo(() => { icon={} colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="solid" - onClick={selectBbox} + onPointerUp={selectBbox} /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx index d9afdb18f5..3e2824ee10 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushButton.tsx @@ -27,7 +27,7 @@ export const ToolBrushButton = memo(() => { icon={} colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="solid" - onClick={selectBrush} + onPointerUp={selectBrush} /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolColorPickerButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolColorPickerButton.tsx index 1f48b2ee72..40f70efc3d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolColorPickerButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolColorPickerButton.tsx @@ -27,7 +27,7 @@ export const ToolColorPickerButton = memo(() => { icon={} colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="solid" - onClick={selectColorPicker} + onPointerUp={selectColorPicker} /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx index 8257523367..4e1994e14c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserButton.tsx @@ -27,7 +27,7 @@ export const ToolEraserButton = memo(() => { icon={} colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="solid" - onClick={selectEraser} + onPointerUp={selectEraser} /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx index 63cbbbce8f..d7d8a465f3 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolMoveButton.tsx @@ -27,7 +27,7 @@ export const ToolMoveButton = memo(() => { icon={} colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="solid" - onClick={selectMove} + onPointerUp={selectMove} /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx index 6e9251c1ef..2ed56a160b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolRectButton.tsx @@ -27,7 +27,7 @@ export const ToolRectButton = memo(() => { icon={} colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="solid" - onClick={selectRect} + onPointerUp={selectRect} /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx index f58e66b91c..8b54515678 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolViewButton.tsx @@ -27,7 +27,7 @@ export const ToolViewButton = memo(() => { icon={} colorScheme={isSelected ? 'invokeBlue' : 'base'} variant="solid" - onClick={selectView} + onPointerUp={selectView} /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx index 2ac69f260e..b641c6a41e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton.tsx @@ -9,13 +9,13 @@ export const CanvasToolbarFitBboxToLayersButton = memo(() => { const { t } = useTranslation(); const canvasManager = useCanvasManager(); const isBusy = useCanvasIsBusy(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { canvasManager.bbox.fitToLayers(); }, [canvasManager.bbox]); return ( { const dispatch = useAppDispatch(); const isBusy = useCanvasIsBusy(); const mayRedo = useAppSelector(selectCanvasMayRedo); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(canvasRedo()); }, [dispatch]); @@ -20,7 +20,7 @@ export const CanvasToolbarRedoButton = memo(() => { } variant="link" alignSelf="stretch" diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx index 5eb7bc603e..754057d3b6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx @@ -10,7 +10,7 @@ export const CanvasToolbarResetCanvasButton = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const canvasManager = useCanvasManager(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(canvasReset()); canvasManager.stage.fitLayersToStage(); }, [canvasManager.stage, dispatch]); @@ -18,7 +18,7 @@ export const CanvasToolbarResetCanvasButton = memo(() => { } variant="link" diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx index 88aae8a2ba..849524232d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton.tsx @@ -60,7 +60,7 @@ export const CanvasToolbarResetViewButton = memo(() => { } variant="link" alignSelf="stretch" diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton.tsx index 58dcfc0f1c..54302cd744 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton.tsx @@ -16,7 +16,7 @@ export const CanvasToolbarSaveToGalleryButton = memo(() => { } aria-label={shift ? t('controlLayers.saveBboxToGallery') : t('controlLayers.saveCanvasToGallery')} tooltip={shift ? t('controlLayers.saveBboxToGallery') : t('controlLayers.saveCanvasToGallery')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx index 7c002f5b4f..7bd1472236 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarScale.tsx @@ -174,7 +174,7 @@ const SCALE_SNAPS = [0.1, 0.15, 0.2, 0.25, 0.5, 0.75, 1, 1.5, 2, 2.5, 5, 7.5, 10 const ZoomOutButton = () => { const canvasManager = useCanvasManager(); const scale = useStore(computed(canvasManager.stage.$stageAttrs, (attrs) => attrs.scale)); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { const nextScale = SCALE_SNAPS.slice() .reverse() @@ -184,7 +184,7 @@ const ZoomOutButton = () => { return ( } aria-label="Zoom out" variant="link" @@ -197,14 +197,14 @@ const ZoomOutButton = () => { const ZoomInButton = () => { const canvasManager = useCanvasManager(); const scale = useStore(computed(canvasManager.stage.$stageAttrs, (attrs) => attrs.scale)); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { const nextScale = SCALE_SNAPS.find((snap) => snap > scale) ?? canvasManager.stage.config.MAX_SCALE; canvasManager.stage.setScale(Math.min(nextScale, canvasManager.stage.config.MAX_SCALE)); }, [canvasManager.stage, scale]); return ( } aria-label="Zoom out" variant="link" diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarUndoButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarUndoButton.tsx index 7a884013f0..a420dec8db 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarUndoButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarUndoButton.tsx @@ -12,7 +12,7 @@ export const CanvasToolbarUndoButton = memo(() => { const dispatch = useAppDispatch(); const isBusy = useCanvasIsBusy(); const mayUndo = useAppSelector(selectCanvasMayUndo); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(canvasUndo()); }, [dispatch]); @@ -20,7 +20,7 @@ export const CanvasToolbarUndoButton = memo(() => { } variant="link" alignSelf="stretch" diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Transform/Transform.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Transform/Transform.tsx index 8bcbf4620c..1887d3e1a5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Transform/Transform.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Transform/Transform.tsx @@ -68,7 +68,7 @@ const TransformContent = memo(({ adapter }: { adapter: CanvasEntityAdapter }) => - - diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardBoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardBoardContextMenu.tsx index 2f130430a4..8c9b2ce62a 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardBoardContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardBoardContextMenu.tsx @@ -38,12 +38,12 @@ const NoBoardBoardContextMenu = ({ children }: Props) => { {!autoAssignBoardOnClick && ( - } isDisabled={isSelectedForAutoAdd} onClick={handleSetAutoAdd}> + } isDisabled={isSelectedForAutoAdd} onPointerUp={handleSetAutoAdd}> {isSelectedForAutoAdd ? t('boards.selectedForAutoAdd') : t('boards.menuItemAutoAdd')} )} {isBulkDownloadEnabled && ( - } onClickCapture={handleBulkDownload}> + } onPointerUpCapture={handleBulkDownload}> {t('boards.downloadBoard')} )} diff --git a/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx b/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx index 0ef57047ed..2419615727 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Gallery.tsx @@ -74,17 +74,17 @@ export const Gallery = () => { {boardName} - + {t('parameters.images')} - + {t('gallery.assets')} } diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx index bd29d1f174..1f5bf604fc 100644 --- a/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx @@ -56,7 +56,7 @@ const GalleryPanelContent = () => { ); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx index bb2fe8ff29..468463b81e 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GallerySearch.tsx @@ -54,7 +54,7 @@ export const GallerySearch = ({ searchTerm, onChangeSearchTerm, onResetSearchTer {!isPending && searchTerm.length && ( {selection.length} {t('common.selected')} - + ); }); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/JumpTo.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/JumpTo.tsx index 72f4bba4e8..fdf143c1c6 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/JumpTo.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/JumpTo.tsx @@ -35,7 +35,7 @@ export const JumpTo = () => { setNewPage(v - 1); }, []); - const onClickGo = useCallback(() => { + const onPointerUpGo = useCallback(() => { goToPage(newPage); onClose(); }, [newPage, goToPage, onClose]); @@ -43,10 +43,10 @@ export const JumpTo = () => { useHotkeys( 'enter', () => { - onClickGo(); + onPointerUpGo(); }, { enabled: isOpen, enableOnFormTags: ['input'] }, - [isOpen, onClickGo] + [isOpen, onPointerUpGo] ); useHotkeys( @@ -66,7 +66,7 @@ export const JumpTo = () => { return ( - @@ -86,7 +86,7 @@ export const JumpTo = () => { onChange={onChangeJumpTo} /> - diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx index 2cbf93b899..38b22fe345 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx @@ -56,7 +56,7 @@ const DataViewer = (props: Props) => { icon={} variant="ghost" opacity={0.7} - onClick={handleDownload} + onPointerUp={handleDownload} /> )} @@ -67,7 +67,7 @@ const DataViewer = (props: Props) => { icon={} variant="ghost" opacity={0.7} - onClick={handleCopy} + onPointerUp={handleCopy} /> )} @@ -105,7 +105,7 @@ const ExtraCopyAction = ({ label, data, getData }: ExtraCopyActionProps) => { icon={} variant="ghost" opacity={0.7} - onClick={handleCopy} + onPointerUp={handleCopy} /> ); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx index 5a6d326a52..dba14d786a 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx @@ -67,13 +67,13 @@ export const CompareToolbar = memo(() => { icon={} aria-label={`${t('gallery.swapImages')} (C)`} tooltip={`${t('gallery.swapImages')} (C)`} - onClick={swapImages} + onPointerUp={swapImages} /> {comparisonMode !== 'side-by-side' && ( } @@ -85,21 +85,21 @@ export const CompareToolbar = memo(() => { diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx index c8c6e3f1ee..e0cf5001e4 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx @@ -65,34 +65,34 @@ const CurrentImageButtonsContent = memo(({ imageDTO }: { imageDTO: ImageDTO }) = tooltip={`${t('nodes.loadWorkflow')} (W)`} aria-label={`${t('nodes.loadWorkflow')} (W)`} isDisabled={!imageActions.hasWorkflow || !hasTemplates} - onClick={imageActions.loadWorkflow} + onPointerUp={imageActions.loadWorkflow} /> } tooltip={`${t('parameters.remixImage')} (R)`} aria-label={`${t('parameters.remixImage')} (R)`} isDisabled={!imageActions.hasMetadata} - onClick={imageActions.remix} + onPointerUp={imageActions.remix} /> } tooltip={`${t('parameters.usePrompt')} (P)`} aria-label={`${t('parameters.usePrompt')} (P)`} isDisabled={!imageActions.hasPrompts} - onClick={imageActions.recallPrompts} + onPointerUp={imageActions.recallPrompts} /> } tooltip={`${t('parameters.useSeed')} (S)`} aria-label={`${t('parameters.useSeed')} (S)`} isDisabled={!imageActions.hasSeed} - onClick={imageActions.recallSeed} + onPointerUp={imageActions.recallSeed} /> } tooltip={`${t('parameters.useSize')} (D)`} aria-label={`${t('parameters.useSize')} (D)`} - onClick={imageActions.recallSize} + onPointerUp={imageActions.recallSize} isDisabled={isStaging} /> @@ -111,7 +111,7 @@ const CurrentImageButtonsContent = memo(({ imageDTO }: { imageDTO: ImageDTO }) = )} - + ); diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx index e728a87caf..0624272cea 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx @@ -36,7 +36,7 @@ export const ToggleMetadataViewerButton = memo(() => { icon={} tooltip={`${t('parameters.info')} (I)`} aria-label={`${t('parameters.info')} (I)`} - onClick={toggleMetadataViewer} + onPointerUp={toggleMetadataViewer} isDisabled={!imageDTO} variant="outline" colorScheme={shouldShowImageDetails ? 'invokeBlue' : 'base'} diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx index de3967f945..757a99779e 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx @@ -11,7 +11,7 @@ export const ToggleProgressButton = memo(() => { const shouldShowProgressInViewer = useAppSelector(selectShouldShowProgressInViewer); const { t } = useTranslation(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(setShouldShowProgressInViewer(!shouldShowProgressInViewer)); }, [dispatch, shouldShowProgressInViewer]); @@ -20,7 +20,7 @@ export const ToggleProgressButton = memo(() => { aria-label={t('settings.displayInProgress')} tooltip={t('settings.displayInProgress')} icon={} - onClick={onClick} + onPointerUp={onPointerUp} variant="outline" colorScheme={shouldShowProgressInViewer ? 'invokeBlue' : 'base'} data-testid="toggle-show-progress-button" diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx index 573fae141c..fd6534293e 100644 --- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx @@ -24,7 +24,7 @@ const NextPrevImageButtons = ({ inset = 8 }: { inset?: ChakraProps['insetInlineS return false; }, [isOnFirstImageOfView, isPrevEnabled]); - const onClickLeftArrow = useCallback(() => { + const onPointerUpLeftArrow = useCallback(() => { if (isOnFirstImageOfView) { if (isPrevEnabled && !isFetching) { goPrev('arrow'); @@ -44,7 +44,7 @@ const NextPrevImageButtons = ({ inset = 8 }: { inset?: ChakraProps['insetInlineS return false; }, [isNextEnabled, isOnLastImageOfView]); - const onClickRightArrow = useCallback(() => { + const onPointerUpRightArrow = useCallback(() => { if (isOnLastImageOfView) { if (isNextEnabled && !isFetching) { goNext('arrow'); @@ -64,7 +64,7 @@ const NextPrevImageButtons = ({ inset = 8 }: { inset?: ChakraProps['insetInlineS aria-label={t('accessibility.previousImage')} icon={} variant="unstyled" - onClick={onClickLeftArrow} + onPointerUp={onPointerUpLeftArrow} isDisabled={isFetching} color="base.100" pointerEvents="auto" @@ -79,7 +79,7 @@ const NextPrevImageButtons = ({ inset = 8 }: { inset?: ChakraProps['insetInlineS aria-label={t('accessibility.nextImage')} icon={} variant="unstyled" - onClick={onClickRightArrow} + onPointerUp={onPointerUpRightArrow} isDisabled={isFetching} color="base.100" pointerEvents="auto" diff --git a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx index 28c0ea8198..d0c44ff4b1 100644 --- a/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx +++ b/invokeai/frontend/web/src/features/lora/components/LoRACard.tsx @@ -56,7 +56,7 @@ export const LoRACard = memo((props: LoRACardProps) => { aria-label="Remove LoRA" variant="ghost" size="sm" - onClick={handleRemoveLora} + onPointerUp={handleRemoveLora} icon={} /> diff --git a/invokeai/frontend/web/src/features/metadata/components/MetadataItemView.tsx b/invokeai/frontend/web/src/features/metadata/components/MetadataItemView.tsx index 233e427798..53a38f1898 100644 --- a/invokeai/frontend/web/src/features/metadata/components/MetadataItemView.tsx +++ b/invokeai/frontend/web/src/features/metadata/components/MetadataItemView.tsx @@ -14,7 +14,7 @@ export const MetadataItemView = memo( ({ label, onRecall, isDisabled, renderedValue, direction = 'row' }: MetadataItemViewProps) => { return ( - {onRecall && } + {onRecall && } {label}: diff --git a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx b/invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx index 101394f85a..a698564935 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx @@ -43,7 +43,7 @@ const ToastDescription = () => { const dispatch = useAppDispatch(); const toast = useToast(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(setActiveTab('models')); $installModelsTab.set(3); toast.close(TOAST_ID); @@ -52,7 +52,7 @@ const ToastDescription = () => { return ( {t('modelManager.noModelsInstalledDesc1')}{' '} - diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx index 905063f900..17e84851f9 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx @@ -51,7 +51,7 @@ export const HuggingFaceForm = memo(() => { onChange={handleSetHuggingFaceRepo} /> @@ -74,7 +74,7 @@ export const HuggingFaceResults = memo(({ results }: HuggingFaceResultsProps) => variant="link" aria-label={t('boards.clearSearch')} icon={} - onClick={clearSearch} + onPointerUp={clearSearch} /> )} diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx index 64eb725e5e..21931ff651 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx @@ -48,7 +48,7 @@ export const InstallModelForm = memo(() => { @@ -96,7 +96,7 @@ export const ScanModelsResults = memo(({ results }: ScanModelResultsProps) => { variant="link" aria-label={t('boards.clearSearch')} icon={} - onClick={clearSearch} + onPointerUp={clearSearch} flexShrink={0} /> diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StartModelsResultItem.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StartModelsResultItem.tsx index 81913f3e8e..a1969de716 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StartModelsResultItem.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StartModelsResultItem.tsx @@ -38,7 +38,7 @@ export const StarterModelsResultItem = memo(({ result, modelList }: Props) => { }, [result]); const [installModel] = useInstallModel(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { for (const { config, source } of allSources) { if (modelList.some((mc) => config.base === mc.base && config.name === mc.name && config.type === mc.type)) { continue; @@ -61,7 +61,7 @@ export const StarterModelsResultItem = memo(({ result, modelList }: Props) => { {result.is_installed ? ( {t('common.installed')} ) : ( - } onClick={onClick} size="sm" /> + } onPointerUp={onPointerUp} size="sm" /> )} diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsResults.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsResults.tsx index c443171060..25c89445c4 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsResults.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StarterModelsResults.tsx @@ -63,7 +63,7 @@ export const StarterModelsResults = memo(({ results, modelList }: StarterModelsR variant="link" aria-label={t('boards.clearSearch')} icon={} - onClick={clearSearch} + onPointerUp={clearSearch} flexShrink={0} /> diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx index 754dab8c78..812cb4ebca 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/InstallModels.tsx @@ -20,7 +20,7 @@ export const InstallModels = memo(() => { $installModelsTab.set(index); }, []); - const onClickLearnMore = useCallback(() => { + const onPointerUpLearnMore = useCallback(() => { window.open('https://support.invoke.ai/support/solutions/articles/151000170961-supported-models'); }, []); @@ -28,7 +28,7 @@ export const InstallModels = memo(() => { {t('modelManager.addModel')} - diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx index a07cb8c10b..c082af32b3 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx @@ -19,7 +19,7 @@ export const ModelManager = memo(() => { {t('common.modelManager')} - diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx index 60e4964b6d..8958df5a17 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx @@ -43,7 +43,7 @@ const ModelListItem = ({ model }: ModelListItemProps) => { dispatch(setSelectedModelKey(model.key)); }, [model.key, dispatch]); - const onClickDeleteButton = useCallback( + const onPointerUpDeleteButton = useCallback( (e: MouseEvent) => { e.stopPropagation(); onOpen(); @@ -83,7 +83,7 @@ const ModelListItem = ({ model }: ModelListItemProps) => { alignItems="center" gap={2} cursor="pointer" - onClick={handleSelectModel} + onPointerUp={handleSelectModel} > @@ -110,7 +110,7 @@ const ModelListItem = ({ model }: ModelListItemProps) => { } aria-label={t('modelManager.deleteConfig')} colorScheme="error" diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListNavigation.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListNavigation.tsx index c0a85216a9..d4459b94b0 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListNavigation.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListNavigation.tsx @@ -42,7 +42,7 @@ export const ModelListNavigation = memo(() => { variant="link" aria-label={t('boards.clearSearch')} icon={} - onClick={clearSearch} + onPointerUp={clearSearch} /> )} diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx index f395c70d0e..4814d077ec 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx @@ -46,12 +46,12 @@ export const ModelTypeFilter = memo(() => { {filteredModelType ? MODEL_TYPE_LABELS[filteredModelType] : t('modelManager.allModels')} - {t('modelManager.allModels')} + {t('modelManager.allModels')} {objectKeys(MODEL_TYPE_LABELS).map((option) => ( {MODEL_TYPE_LABELS[option]} diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/ControlNetOrT2IAdapterDefaultSettings.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/ControlNetOrT2IAdapterDefaultSettings.tsx index 25005e76c9..314a8c1939 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/ControlNetOrT2IAdapterDefaultSettings.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/ControlNetOrT2IAdapterDefaultSettings.tsx @@ -71,7 +71,7 @@ export const ControlNetOrT2IAdapterDefaultSettings = memo(({ modelConfig }: Prop leftIcon={} colorScheme="invokeYellow" isDisabled={!formState.isDirty} - onClick={handleSubmit(onSubmit)} + onPointerUp={handleSubmit(onSubmit)} isLoading={isLoadingUpdateModel} > {t('common.save')} diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx index 292835a7b7..80827ef58c 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx @@ -94,7 +94,7 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => { position="absolute" insetInlineEnd={0} insetBlockStart={0} - onClick={handleResetImage} + onPointerUp={handleResetImage} aria-label={t('modelManager.deleteModelImage')} tooltip={t('modelManager.deleteModelImage')} icon={} diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings.tsx index 714d2a6b2a..a33496a955 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings.tsx @@ -116,7 +116,7 @@ export const MainModelDefaultSettings = memo(({ modelConfig }: Props) => { leftIcon={} colorScheme="invokeYellow" isDisabled={!formState.isDirty} - onClick={handleSubmit(onSubmit)} + onPointerUp={handleSubmit(onSubmit)} isLoading={isLoadingUpdateModel} > {t('common.save')} diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton.tsx index 14119374d4..55d65f1c0f 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton.tsx @@ -52,7 +52,7 @@ export const ModelConvertButton = memo(({ modelConfig }: ModelConvertProps) => { return ( <> ); diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/TriggerPhrases.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/TriggerPhrases.tsx index 3f5133dedf..421556f851 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/TriggerPhrases.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/TriggerPhrases.tsx @@ -85,7 +85,7 @@ export const TriggerPhrases = memo(({ modelConfig }: Props) => { diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/ModeToggle.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/ModeToggle.tsx index d1af8e7a74..72ae6b2e90 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/ModeToggle.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/ModeToggle.tsx @@ -10,11 +10,11 @@ export const ModeToggle = () => { const mode = useAppSelector(selectWorkflowMode); const { t } = useTranslation(); - const onClickEdit = useCallback(() => { + const onPointerUpEdit = useCallback(() => { dispatch(workflowModeChanged('edit')); }, [dispatch]); - const onClickView = useCallback(() => { + const onPointerUpView = useCallback(() => { dispatch(workflowModeChanged('view')); }, [dispatch]); @@ -24,7 +24,7 @@ export const ModeToggle = () => { } colorScheme="invokeBlue" /> @@ -33,7 +33,7 @@ export const ModeToggle = () => { } colorScheme="invokeBlue" /> diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/EmptyState.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/EmptyState.tsx index 322e7014ca..664ebbd545 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/EmptyState.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/EmptyState.tsx @@ -9,7 +9,7 @@ export const EmptyState = () => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(workflowModeChanged('edit')); }, [dispatch]); @@ -46,7 +46,7 @@ export const EmptyState = () => { {t('nodes.noFieldsViewMode')} - diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx index 482de6693e..bda5827636 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/viewMode/WorkflowField.tsx @@ -32,7 +32,7 @@ const WorkflowFieldInternal = ({ nodeId, fieldName }: Props) => { tooltip={t('nodes.resetToDefaultValue')} variant="ghost" size="sm" - onClick={onReset} + onPointerUp={onReset} icon={} /> )} diff --git a/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxLockAspectRatioButton.tsx b/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxLockAspectRatioButton.tsx index c8ea636242..64238f017e 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxLockAspectRatioButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxLockAspectRatioButton.tsx @@ -15,7 +15,7 @@ export const BboxLockAspectRatioButton = memo(() => { const dispatch = useAppDispatch(); const isLocked = useAppSelector(selectAspectRatioIsLocked); const isStaging = useAppSelector(selectIsStaging); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(bboxAspectRatioLockToggled()); }, [dispatch]); @@ -23,7 +23,7 @@ export const BboxLockAspectRatioButton = memo(() => { : } diff --git a/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSetOptimalSizeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSetOptimalSizeButton.tsx index b01fd78a5f..799634ad84 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSetOptimalSizeButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSetOptimalSizeButton.tsx @@ -27,7 +27,7 @@ export const BboxSetOptimalSizeButton = memo(() => { () => getIsSizeTooLarge(width, height, optimalDimension), [height, width, optimalDimension] ); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(bboxSizeOptimized()); }, [dispatch]); const tooltip = useMemo(() => { @@ -44,7 +44,7 @@ export const BboxSetOptimalSizeButton = memo(() => { } diff --git a/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSwapDimensionsButton.tsx b/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSwapDimensionsButton.tsx index a516cd27a9..e76775286c 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSwapDimensionsButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Bbox/BboxSwapDimensionsButton.tsx @@ -10,14 +10,14 @@ export const BboxSwapDimensionsButton = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const isStaging = useAppSelector(selectIsStaging); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(bboxDimensionsSwapped()); }, [dispatch]); return ( } diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/NavigateToModelManagerButton.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/NavigateToModelManagerButton.tsx index cd29a8035b..cd01891b42 100644 --- a/invokeai/frontend/web/src/features/parameters/components/MainModel/NavigateToModelManagerButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/NavigateToModelManagerButton.tsx @@ -25,7 +25,7 @@ export const NavigateToModelManagerButton = memo((props: Omit} tooltip={`${t('common.goTo')} ${t('ui.tabs.modelsTab')}`} aria-label={`${t('common.goTo')} ${t('ui.tabs.modelsTab')}`} - onClick={handleClick} + onPointerUp={handleClick} size="sm" variant="ghost" {...props} diff --git a/invokeai/frontend/web/src/features/parameters/components/MainModel/UseDefaultSettingsButton.tsx b/invokeai/frontend/web/src/features/parameters/components/MainModel/UseDefaultSettingsButton.tsx index 739ae445fe..3e1f99a846 100644 --- a/invokeai/frontend/web/src/features/parameters/components/MainModel/UseDefaultSettingsButton.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/MainModel/UseDefaultSettingsButton.tsx @@ -21,7 +21,7 @@ export const UseDefaultSettingsButton = () => { tooltip={t('modelManager.useDefaultSettings')} aria-label={t('modelManager.useDefaultSettings')} isDisabled={!model} - onClick={handleClickDefaultSettings} + onPointerUp={handleClickDefaultSettings} size="sm" variant="ghost" /> diff --git a/invokeai/frontend/web/src/features/parameters/components/PostProcessing/PostProcessingPopover.tsx b/invokeai/frontend/web/src/features/parameters/components/PostProcessing/PostProcessingPopover.tsx index 2b8b335994..5d70f9d4b3 100644 --- a/invokeai/frontend/web/src/features/parameters/components/PostProcessing/PostProcessingPopover.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/PostProcessing/PostProcessingPopover.tsx @@ -44,7 +44,7 @@ export const PostProcessingPopover = memo((props: Props) => { } aria-label={t('parameters.postProcessing')} /> @@ -54,7 +54,7 @@ export const PostProcessingPopover = memo((props: Props) => { {!postProcessingModel && } - @@ -81,7 +81,7 @@ const MissingModelWarning = () => { i18nKey="upscaling.postProcessingMissingModelWarning" components={{ LinkComponent: ( - ); diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx index 297eb313e4..cb7a325563 100644 --- a/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueButton.tsx @@ -20,7 +20,7 @@ const ClearQueueButton = (props: Props) => { tooltip={t('queue.clearTooltip')} leftIcon={} colorScheme="error" - onClick={clearQueue.openDialog} + onPointerUp={clearQueue.openDialog} data-testid={t('queue.clear')} {...props} > diff --git a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx index 9d9ccc0b49..12a2e18de4 100644 --- a/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/ClearQueueIconButton.tsx @@ -24,7 +24,7 @@ export const ClearQueueIconButton = memo((_) => { tooltip={shift ? t('queue.clearTooltip') : t('queue.cancelTooltip')} icon={shift ? : } colorScheme="error" - onClick={shift ? clearQueue.openDialog : cancelCurrentQueueItem.cancelQueueItem} + onPointerUp={shift ? clearQueue.openDialog : cancelCurrentQueueItem.cancelQueueItem} data-testid={shift ? t('queue.clear') : t('queue.cancel')} /> ); diff --git a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx index 54b076bee9..83b4e7524f 100644 --- a/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/InvokeQueueBackButton.tsx @@ -20,7 +20,7 @@ export const InvokeButton = memo(() => { ); } return ( - ); diff --git a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx index 786708faf1..4441043368 100644 --- a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx +++ b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx @@ -7,7 +7,7 @@ type Props = { label: string; tooltip: ReactNode; icon?: ReactElement; - onClick?: () => void; + onPointerUp?: () => void; isDisabled?: boolean; colorScheme: ThemeTypings['colorSchemes']; asIconButton?: boolean; @@ -20,7 +20,7 @@ const QueueButton = ({ label, tooltip, icon, - onClick, + onPointerUp, isDisabled, colorScheme, asIconButton, @@ -34,7 +34,7 @@ const QueueButton = ({ aria-label={label} tooltip={tooltip} icon={icon} - onClick={onClick} + onPointerUp={onPointerUp} isDisabled={isDisabled} colorScheme={colorScheme} isLoading={isLoading} @@ -49,7 +49,7 @@ const QueueButton = ({ aria-label={label} tooltip={tooltip} leftIcon={icon} - onClick={onClick} + onPointerUp={onPointerUp} isDisabled={isDisabled} colorScheme={colorScheme} isLoading={isLoading} diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx index 79a23e3717..ccda764b42 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLPrompts/SDXLConcatButton.tsx @@ -24,7 +24,7 @@ export const SDXLConcatButton = memo(() => { : } variant="promptOverlay" fontSize={12} diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx index 75b00624a6..3591c8c133 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLRefiner/ParamSDXLRefinerModelSelect.tsx @@ -56,7 +56,7 @@ const ParamSDXLRefinerModelSelect = () => { variant="ghost" icon={} aria-label={t('common.reset')} - onClick={onReset} + onPointerUp={onReset} isDisabled={!value} /> diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleInitialImage.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleInitialImage.tsx index b4bacc1ad0..6fd16eae11 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleInitialImage.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleInitialImage.tsx @@ -44,7 +44,7 @@ export const UpscaleInitialImage = () => { <> } tooltip={t('common.reset')} /> diff --git a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx index 757fc27b67..d3e7ec82f4 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/components/UpscaleSettingsAccordion/UpscaleWarning.tsx @@ -79,7 +79,7 @@ export const UpscaleWarning = () => { i18nKey="upscaling.missingModelsWarning" components={{ LinkComponent: ( - {Boolean(config?.shouldShowResetWebUiText) && ( diff --git a/invokeai/frontend/web/src/features/toast/ErrorToastDescription.tsx b/invokeai/frontend/web/src/features/toast/ErrorToastDescription.tsx index 26baf9c739..ba869f19d7 100644 --- a/invokeai/frontend/web/src/features/toast/ErrorToastDescription.tsx +++ b/invokeai/frontend/web/src/features/toast/ErrorToastDescription.tsx @@ -50,7 +50,7 @@ export default function ErrorToastDescription({ errorType, errorMessage, session size="sm" aria-label="Copy" icon={} - onClick={onCopy.bind(null, sessionId)} + onPointerUp={onCopy.bind(null, sessionId)} variant="ghost" sx={sx} /> diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx index 20c38b2d55..894a7c47c5 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx @@ -16,7 +16,7 @@ const FloatingGalleryButton = (props: Props) => { } h={48} /> diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx index 1ec9559bad..6e32901b2d 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx @@ -57,7 +57,7 @@ const FloatingSidePanelButtons = (props: Props) => { } flexGrow={1} /> @@ -65,7 +65,7 @@ const FloatingSidePanelButtons = (props: Props) => { { isLoading={cancelCurrent.isLoading} aria-label={t('queue.cancelTooltip')} icon={} - onClick={cancelCurrent.cancelQueueItem} + onPointerUp={cancelCurrent.cancelQueueItem} colorScheme="error" flexGrow={1} /> @@ -92,7 +92,7 @@ const FloatingSidePanelButtons = (props: Props) => { aria-label={t('queue.clearTooltip')} icon={} colorScheme="error" - onClick={clearQueue.openDialog} + onPointerUp={clearQueue.openDialog} data-testid={t('queue.clear')} flexGrow={1} /> diff --git a/invokeai/frontend/web/src/features/ui/components/TabButton.tsx b/invokeai/frontend/web/src/features/ui/components/TabButton.tsx index d59f51f3ed..8c815f3d44 100644 --- a/invokeai/frontend/web/src/features/ui/components/TabButton.tsx +++ b/invokeai/frontend/web/src/features/ui/components/TabButton.tsx @@ -9,7 +9,7 @@ export const TabButton = memo( forwardRef(({ tab, icon, label }: { tab: TabName; icon: ReactElement; label: string }, ref) => { const dispatch = useAppDispatch(); const activeTabName = useAppSelector(selectActiveTab); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { dispatch(setActiveTab(tab)); }, [dispatch, tab]); @@ -18,7 +18,7 @@ export const TabButton = memo( { - @@ -77,7 +77,7 @@ export const LoadWorkflowFromGraphModal = () => { - diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowButton.tsx index c1211f9e2b..ec8035a82f 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowButton.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowButton.tsx @@ -8,12 +8,12 @@ export const NewWorkflowButton = memo(() => { const { t } = useTranslation(); const renderButton = useCallback( - (onClick: () => void) => ( + (onPointerUp: () => void) => ( } - onClick={onClick} + onPointerUp={onPointerUp} pointerEvents="auto" /> ), diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog.tsx index c0b5fee85b..b434da4927 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog.tsx @@ -7,7 +7,7 @@ import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; type Props = { - renderButton: (onClick: () => void) => JSX.Element; + renderButton: (onPointerUp: () => void) => JSX.Element; }; export const NewWorkflowConfirmationAlertDialog = memo((props: Props) => { @@ -29,7 +29,7 @@ export const NewWorkflowConfirmationAlertDialog = memo((props: Props) => { onClose(); }, [dispatch, onClose, t]); - const onClick = useCallback(() => { + const onPointerUp = useCallback(() => { if (!isTouched) { handleNewWorkflow(); return; @@ -39,7 +39,7 @@ export const NewWorkflowConfirmationAlertDialog = memo((props: Props) => { return ( <> - {props.renderButton(onClick)} + {props.renderButton(onPointerUp)} { - - diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx index dcc347f905..18f28c619f 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryButton.tsx @@ -17,7 +17,7 @@ const WorkflowLibraryButton = () => { aria-label={t('workflows.workflowLibrary')} tooltip={t('workflows.workflowLibrary')} icon={} - onClick={workflowLibraryModal.setTrue} + onPointerUp={workflowLibraryModal.setTrue} pointerEvents="auto" /> diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx index cae78b82a2..1a65d9a083 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx @@ -161,7 +161,7 @@ const WorkflowLibraryList = () => {