Skip to content

Commit a0dca55

Browse files
HenryHengZJHenryHengZJ
authored
Feature/Grid On Off (#5296)
Added background toggle functionality across multiple components (AgentflowCanvas, MarketplaceCanvas, Canvas) with new icons for enabling/disabling background.
1 parent a38d37f commit a0dca55

File tree

5 files changed

+52
-10
lines changed

5 files changed

+52
-10
lines changed

‎packages/ui/src/views/account/index.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ const AccountSettings = () => {
7272
const [isLoading, setLoading] = useState(true)
7373
const [profileName, setProfileName] = useState('')
7474
const [email, setEmail] = useState('')
75-
const [migrateEmail, setMigrateEmail] = useState('')
7675
const [newPassword, setNewPassword] = useState('')
7776
const [confirmPassword, setConfirmPassword] = useState('')
7877
const [usage, setUsage] = useState(null)
@@ -125,7 +124,6 @@ const AccountSettings = () => {
125124
if (getUserByIdApi.data) {
126125
setProfileName(getUserByIdApi.data?.name || '')
127126
setEmail(getUserByIdApi.data?.email || '')
128-
setMigrateEmail(getUserByIdApi.data?.email || '')
129127
}
130128
} catch (e) {
131129
console.error(e)

‎packages/ui/src/views/agentflowsv2/Canvas.jsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import useApi from '@/hooks/useApi'
4242
import useConfirm from '@/hooks/useConfirm'
4343

4444
// icons
45-
import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
45+
import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
4646

4747
// utils
4848
import {
@@ -101,6 +101,7 @@ const AgentflowCanvas = () => {
101101
const [editNodeDialogOpen, setEditNodeDialogOpen] = useState(false)
102102
const [editNodeDialogProps, setEditNodeDialogProps] = useState({})
103103
const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
104+
const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
104105

105106
const reactFlowWrapper = useRef(null)
106107

@@ -742,6 +743,16 @@ const AgentflowCanvas = () => {
742743
>
743744
{isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
744745
</button>
746+
<button
747+
className='react-flow__controls-button react-flow__controls-interactive'
748+
onClick={() => {
749+
setIsBackgroundEnabled(!isBackgroundEnabled)
750+
}}
751+
title='toggle background'
752+
aria-label='toggle background'
753+
>
754+
{isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
755+
</button>
745756
</Controls>
746757
<MiniMap
747758
nodeStrokeWidth={3}
@@ -752,7 +763,7 @@ const AgentflowCanvas = () => {
752763
backgroundColor: customization.isDarkMode ? theme.palette.background.default : '#fff'
753764
}}
754765
/>
755-
<Background color='#aaa' gap={16} />
766+
{isBackgroundEnabled && <Background color='#aaa' gap={16} />}
756767
<AddNodes
757768
isAgentCanvas={true}
758769
isAgentflowv2={true}

‎packages/ui/src/views/agentflowsv2/MarketplaceCanvas.jsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import EditNodeDialog from '@/views/agentflowsv2/EditNodeDialog'
2020
import { flowContext } from '@/store/context/ReactFlowContext'
2121

2222
// icons
23-
import { IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
23+
import { IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
2424

2525
const nodeTypes = { agentFlow: AgentFlowNode, stickyNote: StickyNote, iteration: IterationNode }
2626
const edgeTypes = { agentFlow: AgentFlowEdge }
@@ -42,6 +42,7 @@ const MarketplaceCanvasV2 = () => {
4242
const [editNodeDialogOpen, setEditNodeDialogOpen] = useState(false)
4343
const [editNodeDialogProps, setEditNodeDialogProps] = useState({})
4444
const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
45+
const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
4546

4647
const reactFlowWrapper = useRef(null)
4748
const { setReactFlowInstance } = useContext(flowContext)
@@ -136,8 +137,18 @@ const MarketplaceCanvasV2 = () => {
136137
>
137138
{isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
138139
</button>
140+
<button
141+
className='react-flow__controls-button react-flow__controls-interactive'
142+
onClick={() => {
143+
setIsBackgroundEnabled(!isBackgroundEnabled)
144+
}}
145+
title='toggle background'
146+
aria-label='toggle background'
147+
>
148+
{isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
149+
</button>
139150
</Controls>
140-
<Background color='#aaa' gap={16} />
151+
{isBackgroundEnabled && <Background color='#aaa' gap={16} />}
141152
<EditNodeDialog
142153
show={editNodeDialogOpen}
143154
dialogProps={editNodeDialogProps}

‎packages/ui/src/views/canvas/index.jsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import useConfirm from '@/hooks/useConfirm'
3838
import { useAuth } from '@/hooks/useAuth'
3939

4040
// icons
41-
import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
41+
import { IconX, IconRefreshAlert, IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
4242

4343
// utils
4444
import {
@@ -98,6 +98,7 @@ const Canvas = () => {
9898
const [isUpsertButtonEnabled, setIsUpsertButtonEnabled] = useState(false)
9999
const [isSyncNodesButtonEnabled, setIsSyncNodesButtonEnabled] = useState(false)
100100
const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
101+
const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
101102

102103
const reactFlowWrapper = useRef(null)
103104

@@ -621,8 +622,18 @@ const Canvas = () => {
621622
>
622623
{isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
623624
</button>
625+
<button
626+
className='react-flow__controls-button react-flow__controls-interactive'
627+
onClick={() => {
628+
setIsBackgroundEnabled(!isBackgroundEnabled)
629+
}}
630+
title='toggle background'
631+
aria-label='toggle background'
632+
>
633+
{isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
634+
</button>
624635
</Controls>
625-
<Background color='#aaa' gap={16} />
636+
{isBackgroundEnabled && <Background color='#aaa' gap={16} />}
626637
<AddNodes isAgentCanvas={isAgentCanvas} nodesData={getNodesApi.data} node={selectedNode} />
627638
{isSyncNodesButtonEnabled && (
628639
<Fab

‎packages/ui/src/views/marketplaces/MarketplaceCanvas.jsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import MarketplaceCanvasHeader from './MarketplaceCanvasHeader'
1616
import StickyNote from '../canvas/StickyNote'
1717

1818
// icons
19-
import { IconMagnetFilled, IconMagnetOff } from '@tabler/icons-react'
19+
import { IconMagnetFilled, IconMagnetOff, IconArtboard, IconArtboardOff } from '@tabler/icons-react'
2020

2121
const nodeTypes = { customNode: MarketplaceCanvasNode, stickyNote: StickyNote }
2222
const edgeTypes = { buttonedge: '' }
@@ -36,6 +36,7 @@ const MarketplaceCanvas = () => {
3636
const [nodes, setNodes, onNodesChange] = useNodesState()
3737
const [edges, setEdges, onEdgesChange] = useEdgesState()
3838
const [isSnappingEnabled, setIsSnappingEnabled] = useState(false)
39+
const [isBackgroundEnabled, setIsBackgroundEnabled] = useState(true)
3940

4041
const reactFlowWrapper = useRef(null)
4142

@@ -114,8 +115,18 @@ const MarketplaceCanvas = () => {
114115
>
115116
{isSnappingEnabled ? <IconMagnetFilled /> : <IconMagnetOff />}
116117
</button>
118+
<button
119+
className='react-flow__controls-button react-flow__controls-interactive'
120+
onClick={() => {
121+
setIsBackgroundEnabled(!isBackgroundEnabled)
122+
}}
123+
title='toggle background'
124+
aria-label='toggle background'
125+
>
126+
{isBackgroundEnabled ? <IconArtboard /> : <IconArtboardOff />}
127+
</button>
117128
</Controls>
118-
<Background color='#aaa' gap={16} />
129+
{isBackgroundEnabled && <Background color='#aaa' gap={16} />}
119130
</ReactFlow>
120131
</div>
121132
</div>

0 commit comments

Comments
 (0)