图示

DiagramMinimap 缩略图

在一个比窗口更大的东西里，你现在在哪。

来自@misoto22/design/diagrams

什么时候用它

和 DiagramCanvas 搭配。视口矩形是从画布自己的 view 推出来的，从不另存一份——一张跟它的疆域对不上的地图，比没有地图更糟。

示例

default

在一个比窗口更大的东西里，你现在在哪。

同时是两样东西，而且两样都必须有：整张图形的一个缩影，以及一个矩形，标出框此刻正盖在它的哪一部分上。光有缩影回答的是「那里有什么」；矩形回答的是「那我在哪」——后者才是一个刚平移过两次的读者真正的问题。

矩形是推导出来的，从不另存。它的位置来自画布自己的 view——就是画布正在用来做变换的那三个数——除以地图的缩放比。另存一份「视口在哪」，正是一张缩略图开始和它所映照的东西对不上的方式；而一张对不上的地图，比没有地图更糟。

点击是重新居中，不是跳转。onSeek 报出的是内容坐标系里的一个点，那正是画布 centerOn 接受的东西。缩略图自己不移动任何东西：它对视图没有权柄，它只说读者指了哪儿。

DiagramMinimap props
属性	类型	默认值	说明
content必填	`{ width: number; height: number }`		整张图形，按它以 CSS 像素计的自然尺寸。
frame必填	`{ width: number; height: number }`		正在透过它看这张图形的那个框，以 CSS 像素计。
view必填	`CanvasView`		那个框此刻坐在哪——来自 `DiagramCanvas` 的 `onViewChange`。
children	`ReactNode`		图形的一个缩影。通常就是同一张图，再渲染一遍。
className	`string`		—
label	`string`	`'Diagram overview'`	—
onSeek	`(x: number, y: number) => void`		读者选中一个点时，带着内容坐标系里的那个点被调用。
width	`number`	`200`	地图有多宽，以 CSS 像素计。高度按宽高比跟随。