Use telephoto library for zooming

Author: japplin

gradle/libs.versions.toml

@@ -92,6 +92,7 @@ squareup-retrofit = "2.9.0"
 squareup-seismic = "1.0.3"
 squareup-workflow = "1.0.0"
 
+telephoto = "0.16.0"
 timber = "5.0.1"
 truth = "1.4.4"
 turbine = "1.0.0"
@@ -203,7 +204,7 @@ google-ksp = { module = "com.google.devtools.ksp:symbol-processing-gradle-plugin
 hamcrest = "org.hamcrest:hamcrest-core:2.2"
 
 java-diff-utils = { module = "io.github.java-diff-utils:java-diff-utils", version.ref = "java-diff-utils" }
-
+telephoto = { module = "me.saket.telephoto:zoomable", version.ref = "telephoto" }
 jetbrains-annotations = "org.jetbrains:annotations:24.0.1"
 
 junit = { module = "junit:junit", version.ref = "jUnit" }

workflow-trace-viewer/build.gradle.kts

@@ -1,4 +1,6 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 
 plugins {
   id("kotlin-multiplatform")
@@ -8,6 +10,8 @@ plugins {
 
 kotlin {
   jvm()
+  
+  jvmToolchain(11)
 
   sourceSets {
     jvmMain {
@@ -27,6 +31,10 @@ kotlin {
         implementation(libs.squareup.moshi.kotlin)
         implementation(libs.filekit.dialogs.compose)
         implementation(libs.java.diff.utils)
+        implementation(libs.telephoto)
+        
+        // Add explicit Skiko dependency for current platform
+        implementation("org.jetbrains.skiko:skiko-awt-runtime-macos-arm64:0.9.4")
       }
     }
     jvmTest {
@@ -62,3 +70,9 @@ compose {
 tasks.named<Test>("jvmTest") {
   useJUnitPlatform()
 }
+
+tasks.withType<KotlinCompile>().configureEach {
+  compilerOptions {
+    jvmTarget.set(JvmTarget.JVM_11)
+  }
+}

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

@@ -111,7 +111,6 @@ internal fun TraceViewerWindow(
         SearchBox(
           nodes = frameNodeLocations.keys.toList(),
           onSearch = { name ->
-            sandboxState.scale = 1f
             val node = frameNodeLocations.keys.first { it.name == name }
             val newX = (sandboxState.offset.x - frameNodeLocations.getValue(node).x
               + appWindowSize.width / 2)
@@ -144,7 +143,6 @@ internal fun TraceViewerWindow(
 
 internal class SandboxState {
   var offset by mutableStateOf(Offset.Zero)
-  var scale by mutableFloatStateOf(1f)
 
   fun reset() {
     offset = Offset.Zero

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

@@ -8,12 +8,14 @@ import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.PointerEventType
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.FixedScale
 import androidx.compose.ui.unit.IntSize
 import com.squareup.workflow1.traceviewer.SandboxState
+import me.saket.telephoto.zoomable.rememberZoomableState
+import me.saket.telephoto.zoomable.zoomable
 
 /**
  * This is the backdrop for the whole app. Since there can be hundreds of modules at a time, there
@@ -29,9 +31,12 @@ internal fun SandboxBackground(
   modifier: Modifier = Modifier,
   content: @Composable () -> Unit,
 ) {
+  val zoomableState = rememberZoomableState()
+
   Box(
     modifier
       .fillMaxSize()
+      .zoomable(state = zoomableState)
       .pointerInput(Unit) {
         // Panning capabilities: watches for drag gestures and applies the translation
         detectDragGestures { _, translation ->
@@ -45,28 +50,16 @@ internal fun SandboxBackground(
           val event = awaitPointerEvent()
           if (event.type == PointerEventType.Scroll) {
             val pointerInput = event.changes.first()
-            val pointerOffsetToCenter = Offset(
-              // For some reason using 1.5 made zooming more natural than 2
-              x = pointerInput.position.x - appWindowSize.width / (3 / 2),
-              y = pointerInput.position.y - appWindowSize.height / 2
-            )
-            val scrollDelta = pointerInput.scrollDelta.y
             // Applies zoom factor based on the actual delta change rather than just the act of scrolling
             // This helps to normalize mouse scrolling and touchpad scrolling, since touchpad will
             // fire a lot more scroll events.
-            val factor = 1f + (-scrollDelta * 0.1f)
-            val minWindowSize = 0.1f
+            val factor = 1f + (-pointerInput.scrollDelta.y * 0.1f)
+            val minWindowSize = 0.3f
             val maxWindowSize = 2f
-            val oldScale = sandboxState.scale
+            val oldScale = (zoomableState.contentScale as? FixedScale)?.value ?: 1.0f
             val newScale = (oldScale * factor).coerceIn(minWindowSize, maxWindowSize)
-            val scaleRatio = newScale / oldScale
-
-            val newOrigin = sandboxState.offset - pointerOffsetToCenter
-            val scaledView = newOrigin * scaleRatio
-            val resetViewOffset = scaledView + pointerOffsetToCenter
-            sandboxState.offset = resetViewOffset
-            sandboxState.scale = newScale
 
+            zoomableState.contentScale = FixedScale(newScale)
             event.changes.forEach { it.consume() }
           }
         }
@@ -78,8 +71,6 @@ internal fun SandboxBackground(
         .graphicsLayer {
           translationX = sandboxState.offset.x
           translationY = sandboxState.offset.y
-          scaleX = sandboxState.scale
-          scaleY = sandboxState.scale
         }
     ) {
       content()