add additonal snippets

Writerside/d.tree

@@ -7,4 +7,5 @@
                  start-page="docthor.md">
 
     <toc-element topic="docthor.md"/>
+    <toc-element topic="Snippets.md"/>
 </instance-profile>

Writerside/topics/Snippets.md

@@ -0,0 +1,36 @@
+# Snippets
+
+## Scale a Shape alongside ZoomImage
+
+
+```kotlin
+
+@Composable
+fun shapes(zoomableState: ZoomableState) {
+    Box(modifier = Modifier.fillMaxSize()) {
+        val scaleX = zoomableState.transform.scaleX
+        val scaleY = zoomableState.transform.scaleY
+        Box(
+            modifier = Modifier
+                .offset { IntOffset(
+                    ((zoomableState.transform.offset.x + (288 * scaleX)) ).toInt(),
+                    ((zoomableState.transform.offset.y + (697 * scaleY)) ).toInt()
+                ) }
+                .clip(RectangleShape)
+                .size(100.dp * scaleX)
+                .background(Color.Red)
+        )
+    }
+}
+```
+
+### Scale a Canvas alongside Zoomimage
+
+```kotlin
+drawRect(
+    Color.Blue,
+    topLeft = zoomableState.transform.offset + (Offset(288 * zoomableState.transform.scaleX,697 * zoomableState.transform.scaleY)),
+    size = Size( (793 - 288)* zoomableState.transform.scaleX, (741 - 697) * zoomableState.transform.scaleY),
+    style = Stroke(width = 5f)
+)
+```

apps/documentViewer/src/main/kotlin/de/itkl/documentViewer/DocumentViewer.kt

@@ -17,7 +17,9 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.graphics.drawscope.rotate
 import androidx.compose.ui.graphics.drawscope.scale
+import androidx.compose.ui.graphics.drawscope.withTransform
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.painter.BitmapPainter
 import androidx.compose.ui.graphics.painter.Painter
@@ -32,6 +34,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.WindowPlacement
 import androidx.compose.ui.window.WindowPosition
 import androidx.compose.ui.window.rememberWindowState
+import androidx.compose.ui.zIndex
 import com.github.panpf.zoomimage.ZoomImage
 import com.github.panpf.zoomimage.compose.ZoomState
 import com.github.panpf.zoomimage.compose.rememberZoomState
@@ -57,7 +60,6 @@ fun main() = auroraApplication {
         position = WindowPosition.Aligned(Alignment.Center),
         size = DpSize(1000. dp, 800.dp)
     )
-
     AuroraWindow(
         skin = marinerSkin(),
         title = "Document Viewer",
@@ -71,7 +73,6 @@ fun main() = auroraApplication {
 
 
 @Composable
-@Preview
 fun viewImage() {
     Column (
         modifier = Modifier.fillMaxSize().auroraBackground()
@@ -163,16 +164,16 @@ data class PointConverter(
 @Composable
 fun shapes(zoomableState: ZoomableState) {
     Box(modifier = Modifier.fillMaxSize()) {
-        val scale = zoomableState.transform.scaleX
+        val scaleX = zoomableState.transform.scaleX
+        val scaleY = zoomableState.transform.scaleY
         Box(
             modifier = Modifier
                 .offset { IntOffset(
-                    ((zoomableState.transform.offset.x + (288 * scale)) ).toInt(),
+                    ((zoomableState.transform.offset.x + (288 * scaleX)) ).toInt(),
-                    ((zoomableState.transform.offset.y + (697 * scale)) ).toInt()
+                    ((zoomableState.transform.offset.y + (697 * scaleY)) ).toInt()
                 ) }
-                .scale(zoomableState.transform.scaleX)
                 .clip(RectangleShape)
-                .size(100.dp)
+                .size(100.dp * scaleX)
                 .background(Color.Red)
         )
     }
@@ -210,6 +211,8 @@ fun canvas(zoomableState: ZoomableState) {
 //        288,
 //        741
 //        ],
+
+
             drawRect(
                 Color.Blue,
                 topLeft = zoomableState.transform.offset + (Offset(288 * zoomableState.transform.scaleX,697 * zoomableState.transform.scaleY)),