feat: minimap toggle

This commit is contained in:
2026-03-11 13:44:48 +01:00
parent 1cc6b98973
commit 95e1c13dcd
3 changed files with 24 additions and 8 deletions

View File

@@ -35,6 +35,8 @@ export type CanvasMenubarProps = {
canDuplicate?: boolean canDuplicate?: boolean
canCopy?: boolean canCopy?: boolean
onFitView?: () => void onFitView?: () => void
showMinimap?: boolean
onToggleMinimap?: (visible: boolean) => void
} }
const UNDO_KEYS = { key: 'z', shiftKey: false } const UNDO_KEYS = { key: 'z', shiftKey: false }
@@ -58,6 +60,8 @@ export function CanvasMenubar({
canDuplicate = false, canDuplicate = false,
canCopy = false, canCopy = false,
onFitView, onFitView,
showMinimap = true,
onToggleMinimap,
}: CanvasMenubarProps) { }: CanvasMenubarProps) {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
const { projectId } = useParams<{ projectId: string }>() const { projectId } = useParams<{ projectId: string }>()
@@ -253,6 +257,18 @@ export function CanvasMenubar({
</MenubarCheckboxItem> </MenubarCheckboxItem>
</MenubarSubContent> </MenubarSubContent>
</MenubarSub> </MenubarSub>
{onToggleMinimap != null && (
<>
<MenubarSeparator />
<MenubarCheckboxItem
checked={showMinimap}
onCheckedChange={(checked) => onToggleMinimap(checked)}
className="gap-2"
>
Minimap
</MenubarCheckboxItem>
</>
)}
</MenubarContent> </MenubarContent>
</MenubarMenu> </MenubarMenu>
</Menubar> </Menubar>

View File

@@ -190,6 +190,7 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
const [lastCreatedNodeId, setLastCreatedNodeId] = React.useState<string | null>(null) const [lastCreatedNodeId, setLastCreatedNodeId] = React.useState<string | null>(null)
const [isPanning, setIsPanning] = React.useState(false) const [isPanning, setIsPanning] = React.useState(false)
const [isSelecting, setIsSelecting] = React.useState(false) const [isSelecting, setIsSelecting] = React.useState(false)
const [showMinimap, setShowMinimap] = React.useState(true)
const [ariaAnnouncement, setAriaAnnouncement] = React.useState<string | null>(null) const [ariaAnnouncement, setAriaAnnouncement] = React.useState<string | null>(null)
const nodesRef = useRef(nodes) const nodesRef = useRef(nodes)
nodesRef.current = nodes nodesRef.current = nodes
@@ -569,6 +570,8 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
canDuplicate={selectedNodes.length > 0} canDuplicate={selectedNodes.length > 0}
canCopy={selectedNodes.length === 1} canCopy={selectedNodes.length === 1}
onFitView={() => flowActionsRef.current?.fitView?.()} onFitView={() => flowActionsRef.current?.fitView?.()}
showMinimap={showMinimap}
onToggleMinimap={setShowMinimap}
/> />
{apiTodosCount !== null && ( {apiTodosCount !== null && (
<div className="shrink-0 px-3 py-1 text-xs text-muted-foreground border-b border-border/50"> <div className="shrink-0 px-3 py-1 text-xs text-muted-foreground border-b border-border/50">
@@ -662,9 +665,11 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
<div role="group" aria-label="Canvas controls: zoom and fit view"> <div role="group" aria-label="Canvas controls: zoom and fit view">
<Controls /> <Controls />
</div> </div>
<div role="region" aria-label="Minimap: overview of the graph"> {showMinimap && (
<MiniMap /> <div role="region" aria-label="Minimap: overview of the graph">
</div> <MiniMap />
</div>
)}
</ReactFlow> </ReactFlow>
</ReactFlowProvider> </ReactFlowProvider>
</div> </div>

View File

@@ -13,11 +13,6 @@ function PlatformLayoutInner() {
const { recordProjectAccess } = usePlatform() const { recordProjectAccess } = usePlatform()
const [sidebarOpen, setSidebarOpen] = useState(true) const [sidebarOpen, setSidebarOpen] = useState(true)
useEffect(() => {
if (projectId) setSidebarOpen(false)
else setSidebarOpen(true)
}, [projectId])
useEffect(() => { useEffect(() => {
if (projectId) recordProjectAccess(projectId) if (projectId) recordProjectAccess(projectId)
}, [projectId, recordProjectAccess]) }, [projectId, recordProjectAccess])