feat: minimap toggle
This commit is contained in:
@@ -35,6 +35,8 @@ export type CanvasMenubarProps = {
|
||||
canDuplicate?: boolean
|
||||
canCopy?: boolean
|
||||
onFitView?: () => void
|
||||
showMinimap?: boolean
|
||||
onToggleMinimap?: (visible: boolean) => void
|
||||
}
|
||||
|
||||
const UNDO_KEYS = { key: 'z', shiftKey: false }
|
||||
@@ -58,6 +60,8 @@ export function CanvasMenubar({
|
||||
canDuplicate = false,
|
||||
canCopy = false,
|
||||
onFitView,
|
||||
showMinimap = true,
|
||||
onToggleMinimap,
|
||||
}: CanvasMenubarProps) {
|
||||
const { theme, setTheme } = useTheme()
|
||||
const { projectId } = useParams<{ projectId: string }>()
|
||||
@@ -253,6 +257,18 @@ export function CanvasMenubar({
|
||||
</MenubarCheckboxItem>
|
||||
</MenubarSubContent>
|
||||
</MenubarSub>
|
||||
{onToggleMinimap != null && (
|
||||
<>
|
||||
<MenubarSeparator />
|
||||
<MenubarCheckboxItem
|
||||
checked={showMinimap}
|
||||
onCheckedChange={(checked) => onToggleMinimap(checked)}
|
||||
className="gap-2"
|
||||
>
|
||||
Minimap
|
||||
</MenubarCheckboxItem>
|
||||
</>
|
||||
)}
|
||||
</MenubarContent>
|
||||
</MenubarMenu>
|
||||
</Menubar>
|
||||
|
||||
@@ -190,6 +190,7 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
|
||||
const [lastCreatedNodeId, setLastCreatedNodeId] = React.useState<string | null>(null)
|
||||
const [isPanning, setIsPanning] = React.useState(false)
|
||||
const [isSelecting, setIsSelecting] = React.useState(false)
|
||||
const [showMinimap, setShowMinimap] = React.useState(true)
|
||||
const [ariaAnnouncement, setAriaAnnouncement] = React.useState<string | null>(null)
|
||||
const nodesRef = useRef(nodes)
|
||||
nodesRef.current = nodes
|
||||
@@ -569,6 +570,8 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
|
||||
canDuplicate={selectedNodes.length > 0}
|
||||
canCopy={selectedNodes.length === 1}
|
||||
onFitView={() => flowActionsRef.current?.fitView?.()}
|
||||
showMinimap={showMinimap}
|
||||
onToggleMinimap={setShowMinimap}
|
||||
/>
|
||||
{apiTodosCount !== null && (
|
||||
<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">
|
||||
<Controls />
|
||||
</div>
|
||||
{showMinimap && (
|
||||
<div role="region" aria-label="Minimap: overview of the graph">
|
||||
<MiniMap />
|
||||
</div>
|
||||
)}
|
||||
</ReactFlow>
|
||||
</ReactFlowProvider>
|
||||
</div>
|
||||
|
||||
@@ -13,11 +13,6 @@ function PlatformLayoutInner() {
|
||||
const { recordProjectAccess } = usePlatform()
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (projectId) setSidebarOpen(false)
|
||||
else setSidebarOpen(true)
|
||||
}, [projectId])
|
||||
|
||||
useEffect(() => {
|
||||
if (projectId) recordProjectAccess(projectId)
|
||||
}, [projectId, recordProjectAccess])
|
||||
|
||||
Reference in New Issue
Block a user