Make app window snap to the specific node when it is being searched.

Author: wenli-cai

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/App.kt

@@ -16,8 +16,8 @@ import androidx.compose.runtime.snapshots.SnapshotStateMap
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
-import com.squareup.workflow1.traceviewer.TraceMode.File
-import com.squareup.workflow1.traceviewer.TraceMode.Live
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.unit.IntSize
 import com.squareup.workflow1.traceviewer.model.Node
 import com.squareup.workflow1.traceviewer.model.NodeUpdate
 import com.squareup.workflow1.traceviewer.ui.ColorLegend
@@ -39,6 +39,7 @@ import io.github.vinceglb.filekit.PlatformFile
 internal fun App(
   modifier: Modifier = Modifier
 ) {
+  var appWindowSize by remember { mutableStateOf(IntSize(0,0)) }
   var selectedNode by remember { mutableStateOf<NodeUpdate?>(null) }
   var frameSize by remember { mutableIntStateOf(0) }
   var rawRenderPass by remember { mutableStateOf("") }
@@ -60,7 +61,9 @@ internal fun App(
   }
 
   Box(
-    modifier = modifier
+    modifier = modifier.onGloballyPositioned {
+      appWindowSize = it.size
+    }
   ) {
     fun resetStates() {
       selectedTraceFile = null
@@ -115,8 +118,11 @@ internal fun App(
         SearchBox(
           nodes = nodeLocations[frameInd].keys.toList(),
           onSearch = { name ->
+            sandboxState.scale = 1f
             val node = nodeLocations[frameInd].keys.firstOrNull { it.name == name }
-            sandboxState.offset = nodeLocations[frameInd][node] ?: sandboxState.offset
+            val newX = sandboxState.offset.x - nodeLocations[frameInd][node]!!.x + appWindowSize.width / 2
+            val newY = sandboxState.offset.y - nodeLocations[frameInd][node]!!.y + appWindowSize.height / 2
+            sandboxState.offset = Offset(x = newX, y = newY)
           },
           modifier = Modifier.align(Alignment.CenterHorizontally)
         )
@@ -126,16 +132,16 @@ internal fun App(
     TraceModeToggleSwitch(
       onToggle = {
         resetStates()
-        traceMode = if (traceMode is Live) {
+        traceMode = if (traceMode is TraceMode.Live) {
           frameIndex = 0
-          File(null)
+          TraceMode.File(null)
         } else {
           /*
           We set the frame to -1 here since we always increment it during Live mode as the list of
           frames get populated, so we avoid off by one when indexing into the frames.
            */
           frameIndex = -1
-          Live()
+          TraceMode.Live()
         }
       },
       traceMode = traceMode,
@@ -148,7 +154,7 @@ internal fun App(
         resetOnFileSelect = {
           resetStates()
           selectedTraceFile = it
-          traceMode = File(it)
+          traceMode = TraceMode.File(it)
         },
         modifier = Modifier.align(Alignment.BottomStart)
       )
@@ -158,7 +164,7 @@ internal fun App(
       if ((traceMode as TraceMode.Live).device == null) {
         DisplayDevices(
           onDeviceSelect = { selectedDevice ->
-            traceMode = Live(selectedDevice)
+            traceMode = TraceMode.Live(selectedDevice)
           },
           devices = listDevices(),
           modifier = Modifier.align(Alignment.Center)

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/ui/WorkflowTree.kt

@@ -23,7 +23,7 @@ import androidx.compose.ui.input.pointer.PointerEventType
 import androidx.compose.ui.input.pointer.isSecondaryPressed
 import androidx.compose.ui.input.pointer.onPointerEvent
 import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.layout.positionInParent
+import androidx.compose.ui.layout.positionInRoot
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.squareup.workflow1.traceviewer.model.Node
@@ -305,8 +305,12 @@ private fun DrawNode(
       }
       .padding(16.dp)
       .onGloballyPositioned { coords ->
-        val offset = coords.positionInParent()
-        storeNodeLocation(node, offset)
+        val offsetToTopLeft = coords.positionInRoot()
+        val offsetToCenter = Offset(
+          x = offsetToTopLeft.x + coords.size.width / 2,
+          y = offsetToTopLeft.y + coords.size.height / 2
+        )
+        storeNodeLocation(node, offsetToCenter)
       }
   ) {
     Column(horizontalAlignment = Alignment.CenterHorizontally) {

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/ui/control/SearchBox.kt

@@ -10,6 +10,7 @@ import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.DockedSearchBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ListItem
+import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.SearchBarColors
 import androidx.compose.material3.SearchBarDefaults
 import androidx.compose.runtime.Composable
@@ -70,7 +71,11 @@ internal fun SearchBox(
             .clickable {
               onSearch(node.name)
               expanded = false
-            }
+            },
+          colors = ListItemDefaults.colors(
+            containerColor = Color.White,
+            headlineColor = Color.Black
+          )
         )
       }
     }