Fixed arrow positioning

- if modifier is set to unbounded, content also needs to be aligned.

Author: wenli-cai

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

@@ -5,7 +5,6 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
@@ -26,11 +25,13 @@ public fun Arrow(
 ) {
   Box(
     modifier = Modifier
-      .size(20.dp)
-      .clickable { print("clicked") }
+      .clickable { println("arrow clicked") }
   ) {
-    Text("top left corner")
-    Canvas (modifier = Modifier.fillMaxSize()){
+    Canvas(
+      modifier = Modifier
+        .fillMaxSize()
+        .size(100.dp,100.dp)
+    ) {
       drawArrow(
         start = start,
         end = end,
@@ -41,24 +42,6 @@ public fun Arrow(
   }
 }
 
-// iterative
-// @Composable
-// public fun drawAllArrows(
-//   arrowLocations: List<Pair<NodePosition, NodePosition>>,
-// ) {
-//   Canvas(modifier = Modifier.fillMaxSize()) {
-//     arrowLocations.forEach { (start, end) ->
-//       drawArrow(
-//         start = start.position,
-//         end = end.position,
-//         color = Color.Black,
-//         strokeWidth = 2f
-//       )
-//     }
-//   }
-// }
-
-
 private fun DrawScope.drawArrow(
   start: Offset,
   end: Offset,

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

@@ -8,6 +8,7 @@ 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.geometry.Offset
 import androidx.compose.ui.graphics.graphicsLayer
@@ -28,7 +29,7 @@ public fun SandboxBackground(content: @Composable () -> Unit) {
 
   Box(
     modifier = Modifier
-      .wrapContentSize(unbounded = true) // this allows the content to be larger than the initial screen of the app
+      .wrapContentSize(unbounded = true, align = Alignment.TopStart) // this allows the content to be larger than the initial screen of the app
       .pointerInput(Unit) { // this allows for user's panning to view different parts of content
         awaitEachGesture {
           val event = awaitPointerEvent()

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

@@ -1,5 +1,6 @@
 package com.squareup.workflow1.traceviewer
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -47,13 +48,11 @@ public fun DrawWorkflowTree(root: WorkflowNode) {
   val nodeCount = remember { mutableStateOf(0) }
   val nodeMapSize = remember { mutableStateOf(0)}
   val readyToDraw = remember { mutableStateOf(false) }
-  // val allArrows = remember { mutableListOf<Pair<NodePosition, NodePosition>>() }
 
   drawTree(root, nodePositions, nodeCount, nodeMapSize)
 
   LaunchedEffect(nodeMapSize.value) {
     if (nodePositions.size == nodeCount.value) {
-      // aggregateArrows(root, nodePositions, allArrows)
       readyToDraw.value = true
     }
   }
@@ -75,7 +74,7 @@ private fun drawTree(
   nodeMapSize: MutableState<Int>
 ) {
   Column(
-    modifier = Modifier.padding(20.dp).border(1.dp, Color.Black),
+    modifier = Modifier.padding(10.dp),
     horizontalAlignment = Alignment.CenterHorizontally,
   ) {
     drawNode(node, nodePositions, nodeMapSize)
@@ -105,12 +104,10 @@ private fun drawNode(
   nodeMapSize: MutableState<Int>
 ) {
   val open = remember { mutableStateOf(false) }
-
   Box (
     modifier = Modifier
       .border(1.dp, Color.Black)
       .clickable { open.value = !open.value }
-      .padding(10.dp)
       .onGloballyPositioned {
         val coords = it.positionInRoot()
         nodePositions[node.id] = coords
@@ -146,45 +143,3 @@ private fun drawArrows(
     drawArrows(childNode, nodePositions)
   }
 }
-
-// iterative
-// @Composable
-// private fun drawArrows(
-//   arrowLocations: List<Pair<NodePosition, NodePosition>>,
-// ) {
-//   drawAllArrows(arrowLocations)
-// }
-
-//
-// /**
-//  * Recurively adds all the arrows from each parent node to its children
-//  *
-//  */
-// private fun aggregateArrows(
-//   node: WorkflowNode,
-//   nodePositions: MutableMap<String, Offset>,
-//   allArrows: MutableList<Pair<NodePosition, NodePosition>>
-// ){
-//   for (childNode in node.children) {
-//     val parent = NodePosition(
-//       id = node.id,
-//       position = nodePositions[node.id] ?: Offset.Zero
-//     )
-//     val child = NodePosition(
-//       id = childNode.id,
-//       position = nodePositions[childNode.id] ?: Offset.Zero
-//     )
-//     allArrows.add(Pair(parent, child))
-//
-//     aggregateArrows(childNode, nodePositions, allArrows)
-//   }
-// }
-//
-// /**
-//  * provides structure for each arrow to be drawn. Also allows more data to be stored if we planned
-//  * each arrow to be clickable and show more information about the data being passed
-//  */
-// public data class NodePosition(
-//   val id: String,
-//   val position: Offset
-// )