图示
DiagramCanvas 图画布
一个能让比它更大的画在里面平移和缩放的框。
来自@misoto22/design/diagrams
什么时候用它
任何超尺寸的图形——一张 SVG、一张图片、一张折不下来的表。它不知道什么是节点，这正是它能复用的原因。
示例
default
4 elements and 3 relationships.
- Browser (external)
- CloudFront (cloud) — CDN
- API (backend) — FastAPI
- Postgres (database)
- Browser → CloudFront: HTTPS
- CloudFront → API
- API → Postgres: SQL
Drag to pan. Plus and minus zoom, zero resets, the arrow keys pan.
说明
一个能让比它更大的画在里面移动的框。
拖拽平移，用控件或者 ⌘/Ctrl 加滚轮缩放，按一个键复位。就这些——它刻意是一个视口而不是一个图编辑器：这里没有任何东西知道什么是节点，所以它对任何超尺寸的图形都成立，一张 SVG、一张图片、一张折不下来的表都行。
这里有三个不那么显然的决定。
不带修饰键的滚轮滚的是页面，不是图。一个把滚轮吞掉的画布是个滚动陷阱：读者一路往下刷文章，撞上这张图，页面就毫无理由地不动了。缩放需要修饰键——那本来也是各处平台通用的缩放手势，而且触控板的捏合发的就是它。
变换加在包裹层上，不加在内容上。子元素保留自己的坐标空间，所以里面的图仍然可以被测量、被导出、被任何遍历它的东西读取。直接缩放子元素会让它内部每一次 getBoundingClientRect 都成为谎言。
键盘优先，这个框本身是真正的 Tab 停靠点。+ / - / 0 和方向键移动视图；框会接收焦点，这些键才按得下去。一个只回应拖拽的画布，是一个有一半读者操作不了的画布。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | — | |
| className | string | — | |
| controls | boolean | true | 隐藏内置的缩放控件，给自带一套控件的调用方用。 |
| height | string | '24rem' | 框有多高。CSS 接受的任何写法都行。 |
| label | string | 'Diagram canvas' | 给这个区域命名，供辅助技术使用。 |
| onViewChange | (view: CanvasView) => void | 每次视图变化都会被告知，供缩略图或百分比读数使用。 | |
| ref | Ref<DiagramCanvasHandle> | — |
键盘操作
| 按键 | 作用 |
|---|---|
| += | 以框的中心为原点放大。 |
| - | 缩小。 |
| 0 | 同时把缩放和偏移复位。 |
| ←→↑↓ | 平移。按住 Shift 每次走得更远。 |
无障碍
- 这个框本身是真正的 Tab 停靠点，键盘控制才按得下去。
- 不带修饰键的滚轮滚的是页面。缩放需要平台修饰键，所以这个画布永远不会变成文章中间的滚动陷阱。