feat: minimap toggle
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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])
|
||||||
|
|||||||
Reference in New Issue
Block a user