Infinite pannable, zoomable canvas for building node-based editors, whiteboards, and diagrams with custom node content, per-node and canvas context menus, Bezier connections, gestures, dynamic nodes, pin-to-front.
A Compose Multiplatform infinite canvas library for building node-based editors, whiteboards, and diagram tools.
pinToFront keeps nodes above others, fixed prevents dragging (both toggleable at runtime)implementation("io.github.xingray:compose-infinite-canvas-core:0.2.0")
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)
Gradle will automatically resolve the correct platform artifact. No need to specify them manually.
compose-infinite-canvas/
├── compose-infinite-canvas-core/ # Library module (publishable)
│ └── src/commonMain/
│ └── io.github.xingray.compose.infinitecanvas/
│ ├── CanvasNode.kt # Node definition
│ ├── CanvasNodeState.kt # Node mutable state
│ ├── 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 the library
./gradlew :compose-infinite-canvas-core:build
# Run the demo app (Desktop)
./gradlew :sample:run
The 0.2.0 release is a breaking API change:
This project is open source. See the repository for license details.
一个基于 Compose Multiplatform 的无限画布库，可用于构建节点编辑器、白板和图表工具。
implementation("io.github.xingray:compose-infinite-canvas-core:0.2.0")
在 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，无需手动指定。
# 构建库
./gradlew :compose-infinite-canvas-core:build
# 运行示例应用（桌面端）
./gradlew :sample:run
0.2.0 是破坏性 API 变更：
| Platform | Artifact |
|---|
| Android | compose-infinite-canvas-core-android |
| JVM (Desktop) | compose-infinite-canvas-core-jvm |
| iOS Arm64 | compose-infinite-canvas-core-iosarm64 |
| iOS Simulator | compose-infinite-canvas-core-iossimulatorarm64 |
| macOS Arm64 | compose-infinite-canvas-core-macosarm64 |
| macOS X64 | compose-infinite-canvas-core-macosx64 |
| JS (Browser) | compose-infinite-canvas-core-js |
| WASM (Browser) | compose-infinite-canvas-core-wasmjs |
import io.github.xingray.compose.infinitecanvas.*
fun MyCanvas() {
val canvasState = rememberInfiniteCanvasState()
val node1 = rememberCanvasNodeState(x = 100f, y = 100f)
val node2 = rememberCanvasNodeState(x = 450f, y = 100f)
val nodes = remember(node1, node2) {
listOf(
CanvasNode(
id = "note-1",
modifier = Modifier.width(220.dp),
state = node1,
content = {
Column(Modifier.padding(14.dp)) {
Text("Hello", fontWeight = FontWeight.Bold)
Text("This is a card on the infinite canvas.")
}
},
menu = { onDismiss ->
// your custom right-click menu
},
),
CanvasNode(
id = "note-2",
modifier = Modifier.width(220.dp),
state = node2,
content = {
Column(Modifier.padding(14.dp)) {
Text("World", fontWeight = FontWeight.Bold)
Text("Connect me to the other card!")
}
},
),
)
}
InfiniteCanvas(
modifier = Modifier.fillMaxSize(),
state = canvasState,
nodes = nodes,
menu = { onDismiss ->
// canvas-level right-click menu
},
)
}
| API | Description |
|---|
InfiniteCanvas(state, nodes, menu) | Main canvas composable |
CanvasNode(id, modifier, state, content, menu) | Node with custom content and menu |
CanvasNodeState(x, y, fixed, pinToFront) | Mutable node position and behavior |
InfiniteCanvasState | Canvas viewport, selection, connections |
InfiniteCanvasConfig | Visual config (grid, background, controls) |
rememberInfiniteCanvasState() | Remember canvas state |
rememberCanvasNodeState(x, y, fixed, pinToFront) | Remember node state |
| 0.1.x | 0.2.0 |
|---|
CanvasViewModel | InfiniteCanvasState / rememberInfiniteCanvasState() |
CardElement(title, content) | CanvasNode(content = { ... }) |
CanvasElement sealed class | Removed |
InfiniteCanvas(viewModel) | InfiniteCanvas(state, nodes, menu) |
| Fixed context menus | Custom per-node and canvas menus |
Artifact: compose-infinite-canvas | Artifact: compose-infinite-canvas-core |
pinToFront 置顶显示，fixed 禁止拖拽（均可运行时切换）| 平台 | Artifact |
|---|
| Android | compose-infinite-canvas-core-android |
| JVM (桌面端) | compose-infinite-canvas-core-jvm |
| iOS Arm64 | compose-infinite-canvas-core-iosarm64 |
| iOS Simulator | compose-infinite-canvas-core-iossimulatorarm64 |
| macOS Arm64 | compose-infinite-canvas-core-macosarm64 |
| macOS X64 | compose-infinite-canvas-core-macosx64 |
| JS (浏览器) | compose-infinite-canvas-core-js |
| WASM (浏览器) | compose-infinite-canvas-core-wasmjs |
import io.github.xingray.compose.infinitecanvas.*
fun MyCanvas() {
val canvasState = rememberInfiniteCanvasState()
val node1 = rememberCanvasNodeState(x = 100f, y = 100f)
val node2 = rememberCanvasNodeState(x = 450f, y = 100f)
val nodes = remember(node1, node2) {
listOf(
CanvasNode(
id = "note-1",
modifier = Modifier.width(220.dp),
state = node1,
content = {
Column(Modifier.padding(14.dp)) {
Text("你好", fontWeight = FontWeight.Bold)
Text("这是无限画布上的一张卡片。")
}
},
menu = { onDismiss ->
// 自定义右键菜单
},
),
CanvasNode(
id = "note-2",
modifier = Modifier.width(220.dp),
state = node2,
content = {
Column(Modifier.padding(14.dp)) {
Text("世界", fontWeight = FontWeight.Bold)
Text("把我和另一张卡片连接起来！")
}
},
),
)
}
InfiniteCanvas(
modifier = Modifier.fillMaxSize(),
state = canvasState,
nodes = nodes,
menu = { onDismiss ->
// 画布级右键菜单
},
)
}
| API | 说明 |
|---|
InfiniteCanvas(state, nodes, menu) | 主画布组件 |
CanvasNode(id, modifier, state, content, menu) | 自定义内容和菜单的节点 |
CanvasNodeState(x, y, fixed, pinToFront) | 节点位置和行为的可变状态 |
InfiniteCanvasState | 画布视口、选择、连接线状态 |
InfiniteCanvasConfig | 外观配置（网格、背景、控件） |
rememberInfiniteCanvasState() | 记住画布状态 |
rememberCanvasNodeState(x, y, fixed, pinToFront) | 记住节点状态 |
| 0.1.x | 0.2.0 |
|---|
CanvasViewModel | InfiniteCanvasState / rememberInfiniteCanvasState() |
CardElement(title, content) | CanvasNode(content = { ... }) |
CanvasElement sealed class | 已移除 |
InfiniteCanvas(viewModel) | InfiniteCanvas(state, nodes, menu) |
| 固定的右键菜单 | 自定义节点级和画布级菜单 |
Artifact: compose-infinite-canvas | Artifact: compose-infinite-canvas-core |
Surfaced from shared tags and platforms — no rankings paid for.