Skip to content

Commit 2568d7e

Browse files
waleedlatif1emir-karabeg
waleedlatif1
authored and
emir-karabeg
committed
added util for fit to zoom that accounts for sidebar, terminal, and panel
1 parent de65646 commit 2568d7e

File tree

2 files changed

+2
-79
lines changed

2 files changed

+2
-79
lines changed

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx‎

Lines changed: 0 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,19 @@
11
'use client'
22

33
import { useRef, useState } from 'react'
4-
<<<<<<< HEAD
54
import { createLogger } from '@sim/logger'
65
import { useReactFlow } from 'reactflow'
76
import {
87
Button,
98
ChevronDown,
10-
=======
11-
import { useReactFlow } from 'reactflow'
12-
import {
13-
Button,
14-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
159
Cursor,
1610
Expand,
1711
Hand,
1812
Popover,
1913
PopoverAnchor,
2014
PopoverContent,
2115
PopoverItem,
22-
<<<<<<< HEAD
2316
PopoverTrigger,
24-
=======
25-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
2617
Redo,
2718
Tooltip,
2819
Undo,
@@ -31,27 +22,19 @@ import {
3122
} from '@/components/emcn'
3223
import { useSession } from '@/lib/auth/auth-client'
3324
import { useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
34-
<<<<<<< HEAD
3525
import { useCanvasViewport } from '@/hooks/use-canvas-viewport'
36-
=======
37-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
3826
import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
3927
import { useCanvasModeStore } from '@/stores/canvas-mode'
4028
import { useGeneralStore } from '@/stores/settings/general'
4129
import { useUndoRedoStore } from '@/stores/undo-redo'
4230
import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
4331

44-
<<<<<<< HEAD
4532
const logger = createLogger('ActionBar')
4633

4734
export function ActionBar() {
4835
const reactFlowInstance = useReactFlow()
4936
const { zoomIn, zoomOut } = reactFlowInstance
5037
const { fitViewToBounds } = useCanvasViewport(reactFlowInstance)
51-
=======
52-
export function ActionBar() {
53-
const { zoomIn, zoomOut, fitView } = useReactFlow()
54-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
5538
const { mode, setMode } = useCanvasModeStore()
5639
const { undo, redo } = useCollaborativeWorkflow()
5740
const showActionBar = useGeneralStore((s) => s.showActionBar)
@@ -67,10 +50,7 @@ export function ActionBar() {
6750
const canRedo = stack.redo.length > 0
6851

6952
const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null)
70-
<<<<<<< HEAD
7153
const [isCanvasModeOpen, setIsCanvasModeOpen] = useState(false)
72-
=======
73-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
7454
const menuRef = useRef<HTMLDivElement>(null)
7555

7656
const handleContextMenu = (e: React.MouseEvent) => {
@@ -79,18 +59,13 @@ export function ActionBar() {
7959
}
8060

8161
const handleHide = async () => {
82-
<<<<<<< HEAD
8362
try {
8463
await updateSetting.mutateAsync({ key: 'showActionBar', value: false })
8564
} catch (error) {
8665
logger.error('Failed to hide action bar', error)
8766
} finally {
8867
setContextMenu(null)
8968
}
90-
=======
91-
setContextMenu(null)
92-
await updateSetting.mutateAsync({ key: 'showActionBar', value: false })
93-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
9469
}
9570

9671
if (!showActionBar) {
@@ -100,7 +75,6 @@ export function ActionBar() {
10075
return (
10176
<>
10277
<div
103-
<<<<<<< HEAD
10478
className='-translate-x-1/2 fixed bottom-[calc(var(--terminal-height)+16px)] left-[calc((100vw+var(--sidebar-width)-var(--panel-width))/2)] z-10 flex h-[36px] items-center gap-[2px] rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] p-[4px] shadow-sm transition-[left,bottom] duration-100 ease-out'
10579
onContextMenu={handleContextMenu}
10680
>
@@ -146,48 +120,14 @@ export function ActionBar() {
146120
</PopoverItem>
147121
</PopoverContent>
148122
</Popover>
149-
=======
150-
className='fixed bottom-[calc(var(--terminal-height)+12px)] left-[calc(var(--sidebar-width)+12px)] z-10 flex h-[36px] items-center gap-[2px] rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] p-[4px] shadow-sm transition-[left,bottom] duration-100 ease-out'
151-
onContextMenu={handleContextMenu}
152-
>
153-
<Tooltip.Root>
154-
<Tooltip.Trigger asChild>
155-
<Button
156-
variant={mode === 'hand' ? 'secondary' : 'ghost'}
157-
className='h-[28px] w-[28px] p-0'
158-
onClick={() => setMode('hand')}
159-
>
160-
<Hand className='h-[16px] w-[16px]' />
161-
</Button>
162-
</Tooltip.Trigger>
163-
<Tooltip.Content side='top'>Hand tool</Tooltip.Content>
164-
</Tooltip.Root>
165-
166-
<Tooltip.Root>
167-
<Tooltip.Trigger asChild>
168-
<Button
169-
variant={mode === 'cursor' ? 'secondary' : 'ghost'}
170-
className='h-[28px] w-[28px] p-0'
171-
onClick={() => setMode('cursor')}
172-
>
173-
<Cursor className='h-[16px] w-[16px]' />
174-
</Button>
175-
</Tooltip.Trigger>
176-
<Tooltip.Content side='top'>Move</Tooltip.Content>
177-
</Tooltip.Root>
178-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
179123

180124
<div className='mx-[4px] h-[20px] w-[1px] bg-[var(--border)]' />
181125

182126
<Tooltip.Root>
183127
<Tooltip.Trigger asChild>
184128
<Button
185129
variant='ghost'
186-
<<<<<<< HEAD
187130
className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
188-
=======
189-
className='h-[28px] w-[28px] p-0'
190-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
191131
onClick={undo}
192132
disabled={!canUndo}
193133
>
@@ -203,11 +143,7 @@ export function ActionBar() {
203143
<Tooltip.Trigger asChild>
204144
<Button
205145
variant='ghost'
206-
<<<<<<< HEAD
207146
className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
208-
=======
209-
className='h-[28px] w-[28px] p-0'
210-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
211147
onClick={redo}
212148
disabled={!canRedo}
213149
>
@@ -223,15 +159,11 @@ export function ActionBar() {
223159

224160
<Tooltip.Root>
225161
<Tooltip.Trigger asChild>
226-
<<<<<<< HEAD
227162
<Button
228163
variant='ghost'
229164
className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
230165
onClick={() => zoomOut()}
231166
>
232-
=======
233-
<Button variant='ghost' className='h-[28px] w-[28px] p-0' onClick={() => zoomOut()}>
234-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
235167
<ZoomOut className='h-[16px] w-[16px]' />
236168
</Button>
237169
</Tooltip.Trigger>
@@ -240,15 +172,11 @@ export function ActionBar() {
240172

241173
<Tooltip.Root>
242174
<Tooltip.Trigger asChild>
243-
<<<<<<< HEAD
244175
<Button
245176
variant='ghost'
246177
className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
247178
onClick={() => zoomIn()}
248179
>
249-
=======
250-
<Button variant='ghost' className='h-[28px] w-[28px] p-0' onClick={() => zoomIn()}>
251-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
252180
<ZoomIn className='h-[16px] w-[16px]' />
253181
</Button>
254182
</Tooltip.Trigger>
@@ -259,13 +187,8 @@ export function ActionBar() {
259187
<Tooltip.Trigger asChild>
260188
<Button
261189
variant='ghost'
262-
<<<<<<< HEAD
263190
className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
264191
onClick={() => fitViewToBounds({ padding: 0.1, duration: 300 })}
265-
=======
266-
className='h-[28px] w-[28px] p-0'
267-
onClick={() => fitView({ padding: 0.3, duration: 300 })}
268-
>>>>>>> 72ae3be5c (feat(workflow-controls): added action bar for picker/hand/undo/redo/zoom workflow controls, added general setting to disable)
269192
>
270193
<Expand className='h-[16px] w-[16px]' />
271194
</Button>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3334,9 +3334,9 @@ const WorkflowContent = React.memo(() => {
33343334
edgeTypes={edgeTypes}
33353335
onDrop={effectivePermissions.canEdit ? onDrop : undefined}
33363336
onDragOver={effectivePermissions.canEdit ? onDragOver : undefined}
3337-
onInit={(instance) => {
3337+
onInit={() => {
33383338
requestAnimationFrame(() => {
3339-
instance.fitView(reactFlowFitViewOptions)
3339+
fitViewToBounds({ padding: 0.1, maxZoom: 1.0 })
33403340
setIsCanvasReady(true)
33413341
})
33423342
}}

0 commit comments

Comments
 (0)