Skip to content

Commit

Permalink
Introduce WebDragAndDropManager (#1726)
Browse files Browse the repository at this point in the history
  • Loading branch information
Schahen authored Dec 13, 2024
1 parent 8f64a28 commit 9627567
Show file tree
Hide file tree
Showing 4 changed files with 400 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,199 @@

package androidx.compose.mpp.demo.components

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.draganddrop.dragAndDropSource
import androidx.compose.foundation.draganddrop.dragAndDropTarget
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.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draganddrop.DragAndDropEvent
import androidx.compose.ui.draganddrop.DragAndDropTarget
import androidx.compose.ui.draganddrop.DragAndDropTransferData
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.drawText
import androidx.compose.ui.text.rememberTextMeasurer
import androidx.compose.ui.unit.dp

@Composable
actual fun DragAndDropExample() {
Text("No drag and drop in web target yet")
val exportedText = "Hello, DnD!"
Row(
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxSize()
) {
val textMeasurer = rememberTextMeasurer()

Column(modifier = Modifier.height(300.dp), verticalArrangement = Arrangement.SpaceEvenly) {
Box(
Modifier
.width(100.dp)
.height(100.dp)
.background(Color.LightGray)
.dragAndDropSource(
drawDragDecoration = {
drawRect(
color = Color.LightGray,
topLeft = Offset(x = 0f, y = 0f),
size = Size(size.width, size.height)
)
drawRect(
color = Color(255f, 0f, 0f, 0.5f),
topLeft = Offset(x = 50f, y = 50f),
size = Size(size.width / 2, size.height / 2)
)
drawRect(
color = Color(0f, 255f, 0f, 0.5f),
topLeft = Offset(x = 70f, y = 70f),
size = Size(size.width / 2, size.height / 2)
)
drawRect(
color = Color(0f, 0f, 255f, 0.5f),
topLeft = Offset(x = 90f, y = 90f),
size = Size(size.width / 2, size.height / 2)
)


val textLayoutResult = textMeasurer.measure(
text = AnnotatedString(exportedText),
layoutDirection = layoutDirection,
density = this
)
drawText(
textLayoutResult = textLayoutResult,
topLeft = Offset(
x = (size.width - textLayoutResult.size.width) / 2,
y = (size.height - textLayoutResult.size.height) / 2,
)
)
}
) { offset ->
DragAndDropTransferData()
}
) {
Text("Drag Me", Modifier.align(Alignment.Center))
}

Box(
Modifier
.width(100.dp)
.height(100.dp)
.background(Color.LightGray)
.dragAndDropSource(
drawDragDecoration = {
drawRect(
color = Color.Magenta,
topLeft = Offset(x = 0f, y = 0f),
size = Size(size.width, size.height)
)
drawRect(
color = Color(0f, 0f, 255f, 0.5f),
topLeft = Offset(x = 50f, y = 50f),
size = Size(size.width / 2, size.height / 2)
)
drawRect(
color = Color(0f, 255f, 0f, 0.5f),
topLeft = Offset(x = 70f, y = 70f),
size = Size(size.width / 2, size.height / 2)
)
drawRect(
color = Color(255f, 0f, 0f, 0.5f),
topLeft = Offset(x = 90f, y = 90f),
size = Size(size.width / 2, size.height / 2)
)


val textLayoutResult = textMeasurer.measure(
text = AnnotatedString(exportedText),
layoutDirection = layoutDirection,
density = this
)
drawText(
textLayoutResult = textLayoutResult,
topLeft = Offset(
x = (size.width - textLayoutResult.size.width) / 2,
y = (size.height - textLayoutResult.size.height) / 2,
)
)
}
) { offset ->
DragAndDropTransferData()
}
) {
Text("Nope, Drag Me!!!", Modifier.align(Alignment.Center))
}

}

var showTargetBorder by remember { mutableStateOf(false) }
var showHovered by remember { mutableStateOf(false) }
var dragCounter by remember { mutableStateOf(0) }
var targetText by remember { mutableStateOf("Drop Here") }

val dragAndDropTarget = remember {
object: DragAndDropTarget {
override fun onStarted(event: DragAndDropEvent) {
showTargetBorder = true
}

override fun onEnded(event: DragAndDropEvent) {
showTargetBorder = false
}

override fun onMoved(event: DragAndDropEvent) {
}

override fun onEntered(event: DragAndDropEvent) {
showHovered = true
}

override fun onExited(event: DragAndDropEvent) {
showHovered = false
}

override fun onDrop(event: DragAndDropEvent): Boolean {
showHovered = false
dragCounter++
return true
}
}
}

Box(
Modifier
.size(200.dp)
.background(if (showHovered) Color.Magenta else Color.LightGray, shape = CircleShape)
.border(border = BorderStroke(3.dp, if (showTargetBorder) Color.Black else Color.Transparent), shape = CircleShape)
.clip(CircleShape)
.dragAndDropTarget(
shouldStartDragAndDrop = { true },
target = dragAndDropTarget
),
contentAlignment = Alignment.Center
) {
Text(targetText + " [" + dragCounter + "]", Modifier.align(Alignment.Center))
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ import androidx.compose.ui.geometry.Offset
/**
* A representation of an event sent by the platform during a drag and drop operation.
*/
actual class DragAndDropEvent
actual class DragAndDropEvent internal constructor(internal val offset: Offset)

/**
* Returns the position of this [DragAndDropEvent] relative to the root Compose View in the
* layout hierarchy.
*/
internal actual val DragAndDropEvent.positionInRoot: Offset
get() = TODO("Not yet implemented")
get() = offset

/**
* Definition for a type representing transferable data. It could be a remote URI,
Expand Down
Loading

0 comments on commit 9627567

Please sign in to comment.