Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve SplitPaneState #3974

Merged
merged 3 commits into from
Jun 17, 2024
Merged

Improve SplitPaneState #3974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efd929c
make SplitPaneState more configurable
Nov 25, 2023
ef1bc89
add Action panel to SplitPane demo
Nov 25, 2023
29593d8
fix SplitPaneState.positionPercentage setter
May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
114 changes: 80 additions & 34 deletions components/SplitPane/demo/src/jvmMain/kotlin/org/jetbrains/compose/splitpane/demo/Main.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,34 @@
package org.jetbrains.compose.splitpane.demo

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.input.pointer.PointerIcon
import androidx.compose.ui.input.pointer.pointerHoverIcon
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.singleWindowApplication
import org.jetbrains.compose.splitpane.*
import org.jetbrains.compose.splitpane.ExperimentalSplitPaneApi
import org.jetbrains.compose.splitpane.HorizontalSplitPane
import org.jetbrains.compose.splitpane.VerticalSplitPane
import org.jetbrains.compose.splitpane.rememberSplitPaneState
import java.awt.Cursor

private fun Modifier.cursorForHorizontalResize(): Modifier =
Expand All @@ -24,40 +41,69 @@ fun main() = singleWindowApplication(
MaterialTheme {
val splitterState = rememberSplitPaneState()
val hSplitterState = rememberSplitPaneState()
HorizontalSplitPane(
splitPaneState = splitterState
) {
first(20.dp) {
Box(Modifier.background(Color.Red).fillMaxSize())
}
second(50.dp) {
VerticalSplitPane(splitPaneState = hSplitterState) {
first(50.dp) {
Box(Modifier.background(Color.Blue).fillMaxSize())
}
second(20.dp) {
Box(Modifier.background(Color.Green).fillMaxSize())
}
var delta by remember { mutableStateOf("20") }
var percentage by remember { mutableStateOf("0.20") }
Row {
Column(verticalArrangement = Arrangement.spacedBy(10.dp), modifier = Modifier.padding(10.dp).width(180.dp)) {
Text("Action panel", fontWeight = FontWeight.Bold)
Button(onClick = { splitterState.moveEnabled = !splitterState.moveEnabled }) {
Text(if (splitterState.moveEnabled) "Freeze V" else "Unfreeze V")
}
Button(onClick = { hSplitterState.moveEnabled = !hSplitterState.moveEnabled }) {
Text(if (hSplitterState.moveEnabled) "Freeze H" else "Unfreeze H")
}
vdshb marked this conversation as resolved.
Show resolved Hide resolved

OutlinedTextField(value = delta, onValueChange = { delta = it }, label = { Text("Delta") })
Button(onClick = { delta.toFloatOrNull()?.let { splitterState.dispatchRawMovement(it) } }) {
Text("Add delta V")
}
Button(onClick = { delta.toFloatOrNull()?.let { hSplitterState.dispatchRawMovement(it) } }) {
Text("Add delta H")
}

OutlinedTextField(value = percentage, onValueChange = { percentage = it }, label = { Text("Fraction") })
Button(onClick = { percentage.toFloatOrNull()?.let { splitterState.positionPercentage = it } }) {
Text("Set fraction V")
}
Button(onClick = { percentage.toFloatOrNull()?.let { hSplitterState.positionPercentage = it } }) {
Text("Set fraction H")
}
}
splitter {
visiblePart {
Box(
Modifier
.width(1.dp)
.fillMaxHeight()
.background(MaterialTheme.colors.background)
)
HorizontalSplitPane(
splitPaneState = splitterState
) {
first(20.dp) {
Box(Modifier.background(Color.Red).fillMaxSize())
}
handle {
Box(
Modifier
.markAsHandle()
.cursorForHorizontalResize()
.background(SolidColor(Color.Gray), alpha = 0.50f)
.width(9.dp)
.fillMaxHeight()
)
second(50.dp) {
VerticalSplitPane(splitPaneState = hSplitterState) {
first(50.dp) {
Box(Modifier.background(Color.Blue).fillMaxSize())
}
second(20.dp) {
Box(Modifier.background(Color.Green).fillMaxSize())
}
}
}
splitter {
visiblePart {
Box(
Modifier
.width(1.dp)
.fillMaxHeight()
.background(MaterialTheme.colors.background)
)
}
handle {
Box(
Modifier
.markAsHandle()
.cursorForHorizontalResize()
.background(SolidColor(Color.Gray), alpha = 0.50f)
.width(9.dp)
.fillMaxHeight()
)
}
}
}
}
Expand Down
7 changes: 4 additions & 3 deletions ...SplitPane/library/src/commonMain/kotlin/org/jetbrains/compose/splitpane/SplitPaneState.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ class SplitPaneState(
) {

var moveEnabled by mutableStateOf(moveEnabled)
internal set

var positionPercentage by mutableStateOf(initialPositionPercentage)
internal set
private var _positionPercentage by mutableStateOf(initialPositionPercentage)
var positionPercentage: Float
get() = _positionPercentage
set(value) { _positionPercentage = value.coerceIn(0f, 1f) }

internal var minPosition: Float = 0f

Expand Down