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

Introduce WebDragAndDropManager #1726

Merged
merged 4 commits into from
Dec 13, 2024
Merged

Introduce WebDragAndDropManager #1726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b7d7fa4
Introduce WebDragAndDropManager
Schahen Dec 11, 2024
f5c22ca
Change afterr PR code review
Schahen Dec 13, 2024
1da9cf4
Remove obsolete import
Schahen Dec 13, 2024
277d761
Make DragAndDropEvent::offset internal
Schahen Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 190 additions & 1 deletion ...pp/demo/src/webMain/kotlin/androidx/compose/mpp/demo/components/DragAndDropExample.web.kt
View file
Open in desktop
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))
}
}
}
4 changes: 2 additions & 2 deletions compose/ui/ui/src/jsWasmMain/kotlin/androidx/compose/ui/draganddrop/DragAndDrop.jsWasm.kt
View file
Open in desktop
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