JetBrains / compose-multiplatform

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
https://jetbrains.com/lp/compose-multiplatform
Apache License 2.0
15.96k stars 1.16k forks source link

custom frame resize issue, app is working with some rendering issues #1432

Closed michaelsd28 closed 2 years ago

michaelsd28 commented 2 years ago

I am trying to make an app with a custom frame and my app is having resizing issues and the cursor is not changing when resizing

I also get this error on the console Failed to create DirectX12 device. i have a RTX 2060 Super

ezgif com-gif-maker

this is my code

image

Rsedaikin commented 2 years ago

@michaelsd28 Have you set the transparency property in Window to true? Are you using 'WindowDraggableArea' as your custom window title bar in this example? Does it have modifier fillMaxSize() - expanded to fill entire window?

michaelsd28 commented 2 years ago

@michaelsd28 Have you set the transparency property in Window to true? Are you using 'WindowDraggableArea' as your custom window title bar in this example? Does it have modifier fillMaxSize() - expanded to fill entire window?

this the code i have ` fun main() = application { // window state val windowState = rememberWindowState(isMinimized = false) Window( onCloseRequest = ::exitApplication, undecorated = true, resizable = true, transparent = true, state = windowState, ) { WindowDraggableArea( Modifier.fillMaxWidth() .padding( 3.dp, ), ) { Column { TopBar().titleBar("Notepad", windowState) Body().TextArea() } } } }

` this a picture of the same code image

igordmn commented 2 years ago

The minimal reproducer:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.window.WindowDraggableArea
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.singleWindowApplication

fun main() = singleWindowApplication(
    undecorated = true,
) {
    WindowDraggableArea {
        Box(Modifier.fillMaxWidth().height(30.dp).background(Color.Red))
    }
}

https://user-images.githubusercontent.com/5963351/143045174-1ed0ae41-919f-43a6-9fe6-f949e8f932c1.mp4

@Rsedaikin , I believe this is because we don't consume events in UndecoratedWindowResizer.

The part of the fix would be:

Index: compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/awt/ComposeLayer.desktop.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/awt/ComposeLayer.desktop.kt b/compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/awt/ComposeLayer.desktop.kt
--- a/compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/awt/ComposeLayer.desktop.kt  (revision fb8d17e307f98832259e59f7a76abd9f616a1666)
+++ b/compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/awt/ComposeLayer.desktop.kt  (date 1637678402119)
@@ -280,18 +280,22 @@

     private fun onMouseEvent(event: MouseEvent) {
         lastMouseEvent = event
-        events.post {
-            catchExceptions {
-                scene.onMouseEvent(density, event)
+        if (!event.isConsumed) {
+            events.post {
+                catchExceptions {
+                    scene.onMouseEvent(density, event)
+                }
             }
         }
     }

     private fun onMouseWheelEvent(event: MouseWheelEvent) {
         lastMouseEvent = event
-        events.post {
-            catchExceptions {
-                scene.onMouseWheelEvent(density, event)
+        if (!event.isConsumed) {
+            events.post {
+                catchExceptions {
+                    scene.onMouseWheelEvent(density, event)
+                }
             }
         }
     }
Index: compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/window/UndecoratedWindowResizer.desktop.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/window/UndecoratedWindowResizer.desktop.kt b/compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/window/UndecoratedWindowResizer.desktop.kt
--- a/compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/window/UndecoratedWindowResizer.desktop.kt   (revision fb8d17e307f98832259e59f7a76abd9f616a1666)
+++ b/compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/window/UndecoratedWindowResizer.desktop.kt   (date 1637678402122)
@@ -71,6 +71,7 @@
         val point = event.getPoint()
         sides = getSides(point)
         fun setCursor(cursorType: Int) {
+            event.consume()
             layer.scene.component.desiredCursor = Cursor(cursorType)
         }
         when (sides) {

But we should make sure that these listeners:

layer.component.addMouseListener(mouseListener)
layer.component.addMouseMotionListener(motionListener)

are triggered before

_component.addMouseMotionListener(object : MouseMotionAdapter() {

That probably would also fix this issue

igordmn commented 2 years ago

We should probably also replace this

layer.scene.component.desiredCursor

by

window.setCursor

again. because desiredCursor won't be triggered after that. cc @prepor

michaelsd28 commented 2 years ago

We should probably also replace this

layer.scene.component.desiredCursor

by

window.setCursor

again. because desiredCursor won't be triggered after that. cc @prepor

The pointer issue was fixed by upgrading to the rc3 version

igordmn commented 2 years ago

Fixed in 1.0.0-rc5

okushnikov commented 2 months ago

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.