Sultan
/
Flowise
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added background toggle functionality across multiple components (AgentflowCanvas, MarketplaceCanvas, Canvas) with new icons for enabling/disabling background.

This commit is contained in:
Henry 2025-10-06 13:52:07 +01:00
parent a38d37f4b5
commit 46abfa26c2
5 changed files with 52 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/src/views/account/index.jsx
View File

@ -72,7 +72,6 @@ const AccountSettings = () => {
const [isLoading, setLoading] = useState(true)
const [profileName, setProfileName] = useState('')
const [email, setEmail] = useState('')
const [migrateEmail, setMigrateEmail] = useState('')
const [newPassword, setNewPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const [usage, setUsage] = useState(null)
@ -125,7 +124,6 @@ const AccountSettings = () => {
if (getUserByIdApi.data) {
setProfileName(getUserByIdApi.data?.name || '')
setEmail(getUserByIdApi.data?.email || '')
setMigrateEmail(getUserByIdApi.data?.email || '')
}
} catch (e) {
console.error(e)

15
packages/ui/src/views/agentflowsv2/Canvas.jsx
View File

@ -42,7 +42,7 @@ import useApi from '@/hooks/useApi'
import useConfirm from '@/hooks/useConfirm'
// icons
import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
// utils
import {
@ -101,6 +101,7 @@ const AgentflowCanvas = () => {
const [editNodeDialogOpen, setEditNodeDialogOpen] = useState(false)
const [editNodeDialogProps, setEditNodeDialogProps] = useState({})
const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
const reactFlowWrapper = useRef(null)
@ -742,6 +743,16 @@ const AgentflowCanvas = () => {
>
{isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
</button>
<button
className='react-flow__controls-button react-flow__controls-interactive'
onClick={() => {
setIsBackgroundEnabled(!isBackgroundEnabled)
}}
title='toggle background'
aria-label='toggle background'
>
{isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
</button>
</Controls>
<MiniMap
nodeStrokeWidth={3}
@ -752,7 +763,7 @@ const AgentflowCanvas = () => {
backgroundColor: customization.isDarkMode ? theme.palette.background.default : '#fff'
}}
/>
<Background color='#aaa' gap={16} />
{isBackgroundEnabled && <Background color='#aaa' gap={16} />}
<AddNodes
isAgentCanvas={true}
isAgentflowv2={true}

15
packages/ui/src/views/agentflowsv2/MarketplaceCanvas.jsx
View File

@ -20,7 +20,7 @@ import EditNodeDialog from '@/views/agentflowsv2/EditNodeDialog'
import { flowContext } from '@/store/context/ReactFlowContext'
// icons
import { IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
import { IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
const nodeTypes = { agentFlow: AgentFlowNode, stickyNote: StickyNote, iteration: IterationNode }
const edgeTypes = { agentFlow: AgentFlowEdge }
@ -42,6 +42,7 @@ const MarketplaceCanvasV2 = () => {
const [editNodeDialogOpen, setEditNodeDialogOpen] = useState(false)
const [editNodeDialogProps, setEditNodeDialogProps] = useState({})
const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
const reactFlowWrapper = useRef(null)
const { setReactFlowInstance } = useContext(flowContext)
@ -136,8 +137,18 @@ const MarketplaceCanvasV2 = () => {
>
{isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
</button>
<button
className='react-flow__controls-button react-flow__controls-interactive'
onClick={() => {
setIsBackgroundEnabled(!isBackgroundEnabled)
}}
title='toggle background'
aria-label='toggle background'
>
{isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
</button>
</Controls>
<Background color='#aaa' gap={16} />
{isBackgroundEnabled && <Background color='#aaa' gap={16} />}
<EditNodeDialog
show={editNodeDialogOpen}
dialogProps={editNodeDialogProps}

15
packages/ui/src/views/canvas/index.jsx
View File

@ -38,7 +38,7 @@ import useConfirm from '@/hooks/useConfirm'
import { useAuth } from '@/hooks/useAuth'
// icons
import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
// utils
import {
@ -98,6 +98,7 @@ const Canvas = () => {
const [isUpsertButtonEnabled, setIsUpsertButtonEnabled] = useState(false)
const [isSyncNodesButtonEnabled, setIsSyncNodesButtonEnabled] = useState(false)
const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
const reactFlowWrapper = useRef(null)
@ -621,8 +622,18 @@ const Canvas = () => {
>
{isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
</button>
<button
className='react-flow__controls-button react-flow__controls-interactive'
onClick={() => {
setIsBackgroundEnabled(!isBackgroundEnabled)
}}
title='toggle background'
aria-label='toggle background'
>
{isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
</button>
</Controls>
<Background color='#aaa' gap={16} />
{isBackgroundEnabled && <Background color='#aaa' gap={16} />}
<AddNodes isAgentCanvas={isAgentCanvas} nodesData={getNodesApi.data} node={selectedNode} />
{isSyncNodesButtonEnabled && (
<Fab

15
packages/ui/src/views/marketplaces/MarketplaceCanvas.jsx
View File

@ -16,7 +16,7 @@ import MarketplaceCanvasHeader from './MarketplaceCanvasHeader'
import StickyNote from '../canvas/StickyNote'
// icons
import { IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
import { IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
const nodeTypes = { customNode: MarketplaceCanvasNode, stickyNote: StickyNote }
const edgeTypes = { buttonedge: '' }
@ -36,6 +36,7 @@ const MarketplaceCanvas = () => {
const [nodes, setNodes, onNodesChange] = useNodesState()
const [edges, setEdges, onEdgesChange] = useEdgesState()
const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
const reactFlowWrapper = useRef(null)
@ -114,8 +115,18 @@ const MarketplaceCanvas = () => {
>
{isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
</button>
<button
className='react-flow__controls-button react-flow__controls-interactive'
onClick={() => {
setIsBackgroundEnabled(!isBackgroundEnabled)
}}
title='toggle background'
aria-label='toggle background'
>
{isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
</button>
</Controls>
<Background color='#aaa' gap={16} />
{isBackgroundEnabled && <Background color='#aaa' gap={16} />}
</ReactFlow>
</div>
</div>