Merge pull request #603 from FlowiseAI/feature/UI-Node-Delete

Feature/UI-Node-Delete

packages/ui/src/store/actions.js

@@ -11,6 +11,8 @@ export const SET_DARKMODE = '@customization/SET_DARKMODE'
 export const SET_DIRTY = '@canvas/SET_DIRTY'
 export const REMOVE_DIRTY = '@canvas/REMOVE_DIRTY'
 export const SET_CHATFLOW = '@canvas/SET_CHATFLOW'
+export const SHOW_CANVAS_DIALOG = '@canvas/SHOW_CANVAS_DIALOG'
+export const HIDE_CANVAS_DIALOG = '@canvas/HIDE_CANVAS_DIALOG'
 
 // action - notifier reducer
 export const ENQUEUE_SNACKBAR = 'ENQUEUE_SNACKBAR'

packages/ui/src/store/reducers/canvasReducer.js

@@ -3,7 +3,8 @@ import * as actionTypes from '../actions'
 
 export const initialState = {
     isDirty: false,
-    chatflow: null
+    chatflow: null,
+    canvasDialogShow: false
 }
 
 // ==============================|| CANVAS REDUCER ||============================== //
@@ -25,6 +26,16 @@ const canvasReducer = (state = initialState, action) => {
                 ...state,
                 chatflow: action.chatflow
             }
+        case actionTypes.SHOW_CANVAS_DIALOG:
+            return {
+                ...state,
+                canvasDialogShow: true
+            }
+        case actionTypes.HIDE_CANVAS_DIALOG:
+            return {
+                ...state,
+                canvasDialogShow: false
+            }
         default:
             return state
     }

packages/ui/src/ui-component/dialog/AdditionalParamsDialog.js

@@ -1,12 +1,15 @@
 import { createPortal } from 'react-dom'
+import { useDispatch } from 'react-redux'
 import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Dialog, DialogContent } from '@mui/material'
 import PerfectScrollbar from 'react-perfect-scrollbar'
 import NodeInputHandler from 'views/canvas/NodeInputHandler'
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
 
 const AdditionalParamsDialog = ({ show, dialogProps, onCancel }) => {
     const portalElement = document.getElementById('portal')
+    const dispatch = useDispatch()
 
     const [inputParams, setInputParams] = useState([])
     const [data, setData] = useState({})
@@ -21,6 +24,11 @@ const AdditionalParamsDialog = ({ show, dialogProps, onCancel }) => {
         }
     }, [dialogProps])
 
+    useEffect(() => {
+        if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
+        else dispatch({ type: HIDE_CANVAS_DIALOG })
+    }, [show, dispatch])
+
     const component = show ? (
         <Dialog
             onClose={onCancel}

packages/ui/src/ui-component/dialog/ExpandTextDialog.js

@@ -1,6 +1,6 @@
 import { createPortal } from 'react-dom'
 import { useState, useEffect } from 'react'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Button, Dialog, DialogActions, DialogContent, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
@@ -8,6 +8,7 @@ import PerfectScrollbar from 'react-perfect-scrollbar'
 import { StyledButton } from 'ui-component/button/StyledButton'
 import { DarkCodeEditor } from 'ui-component/editor/DarkCodeEditor'
 import { LightCodeEditor } from 'ui-component/editor/LightCodeEditor'
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
 
 import './ExpandTextDialog.css'
 
@@ -15,6 +16,7 @@ const ExpandTextDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
     const portalElement = document.getElementById('portal')
 
     const theme = useTheme()
+    const dispatch = useDispatch()
     const customization = useSelector((state) => state.customization)
     const languageType = 'json'
 
@@ -31,6 +33,11 @@ const ExpandTextDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
         }
     }, [dialogProps])
 
+    useEffect(() => {
+        if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
+        else dispatch({ type: HIDE_CANVAS_DIALOG })
+    }, [show, dispatch])
+
     const component = show ? (
         <Dialog open={show} fullWidth maxWidth='md' aria-labelledby='alert-dialog-title' aria-describedby='alert-dialog-description'>
             <DialogContent>

packages/ui/src/ui-component/dialog/FormatPromptValuesDialog.js

@@ -1,13 +1,21 @@
+import { useEffect } from 'react'
 import { createPortal } from 'react-dom'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Dialog, DialogContent, DialogTitle } from '@mui/material'
 import PerfectScrollbar from 'react-perfect-scrollbar'
 import { JsonEditorInput } from 'ui-component/json/JsonEditor'
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
 
 const FormatPromptValuesDialog = ({ show, dialogProps, onChange, onCancel }) => {
     const portalElement = document.getElementById('portal')
     const customization = useSelector((state) => state.customization)
+    const dispatch = useDispatch()
+
+    useEffect(() => {
+        if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
+        else dispatch({ type: HIDE_CANVAS_DIALOG })
+    }, [show, dispatch])
 
     const component = show ? (
         <Dialog

packages/ui/src/views/canvas/index.js

@@ -503,6 +503,7 @@ const Canvas = () => {
                                 onConnect={onConnect}
                                 onInit={setReactFlowInstance}
                                 fitView
+                                deleteKeyCode={canvas.canvasDialogShow ? null : ['Backspace', 'Delete']}
                                 minZoom={0.1}
                             >
                                 <Controls