Compose Infinite Canvas
A Compose Multiplatform infinite canvas library for building node-based editors, whiteboards, and diagram tools.
中文文档

Features
- Infinite Canvas — Pan and zoom with no boundaries
- Custom Node Content — Each node renders any Composable content you define
- Custom Context Menus — Per-node and canvas-level right-click menus
- Connections — Bezier curve connections between node anchor points
- Node Pinning —
pinToFront keeps nodes above others, fixed prevents dragging (both toggleable at runtime)
- Dynamic Nodes — Add and remove nodes at runtime
- Gestures — Full gesture support:
- Click to select, drag to move nodes
- Drag from anchor to create connections
- Click connection to delete
- Box select (drag on empty area)
- Ctrl+Scroll to zoom, Scroll to pan
- Pinch to zoom on touch devices
- Spacebar for temporary pan mode
- Multiplatform — Android, iOS, Desktop (JVM), Web (JS/WASM)
Installation

Gradle (Kotlin DSL)
implementation("io.github.xingray:compose-infinite-canvas-core:0.2.0")
Gradle Version Catalog
In gradle/libs.versions.toml:
[versions]
composeInfiniteCanvasCore = "0.2.0"
[libraries]
compose-infinite-canvas-core = { module = "io.github.xingray:compose-infinite-canvas-core", version.ref = "composeInfiniteCanvasCore" }
Then in your module's build.gradle.kts:
implementation(libs.compose.infinite.canvas.core)
Supported Platforms
Gradle will automatically resolve the correct platform artifact. No need to specify them manually.
Usage
Key APIs
Project Structure
compose-infinite-canvas/
├── compose-infinite-canvas-core/
│ └── src/commonMain/
│ └── io.github.xingray.compose.infinitecanvas/
│ ├── CanvasNode.kt
│ ├── CanvasNodeState.kt
│ ├── InfiniteCanvas.kt
│ ├── InfiniteCanvasState.kt
│ ├── InfiniteCanvasConfig.kt
│ ├── Connection.kt
│ ├── ViewportState.kt
│ ├── MenuPositionUtils.kt
│ ├── connection/
│ │ └── ConnectionRenderer.kt
│ ├── element/
│ │ └── CardElementView.kt
│ └── gesture/
│ └── CanvasGestureHandler.kt
├── sample/
└── sample-android/
Build from Source
./gradlew :compose-infinite-canvas-core:build
./gradlew :sample:run
Migration from 0.1.x
The 0.2.0 release is a breaking API change:
License
This project is open source. See the repository for license details.
中文文档
一个基于 Compose Multiplatform 的无限画布库,可用于构建节点编辑器、白板和图表工具。

功能特性
安装

Gradle (Kotlin DSL)
implementation("io.github.xingray:compose-infinite-canvas-core:0.2.0")
Gradle Version Catalog
在 gradle/libs.versions.toml 中添加:
[versions]
composeInfiniteCanvasCore = "0.2.0"
[libraries]
compose-infinite-canvas-core = { module = "io.github.xingray:compose-infinite-canvas-core", version.ref = "composeInfiniteCanvasCore" }
然后在模块的 build.gradle.kts 中引用:
implementation(libs.compose.infinite.canvas.core)
支持的平台
Gradle 会自动解析对应平台的 artifact,无需手动指定。
使用示例
核心 API
从源码构建
./gradlew :compose-infinite-canvas-core:build
./gradlew :sample:run
从 0.1.x 迁移
0.2.0 是破坏性 API 变更: