outline droidra

slides/outlines.typ

@@ -225,7 +225,151 @@
   small_icon_size: 100pt,
   big_icon_size: 200pt,
 ) = context {
-  text(fill: red, size: 40pt)[TODO]
+  let arrow_width = small_icon_size / 10
+  let arrow_gap = small_icon_size / 5
+  let height = big_icon_size + small_icon_size /2 + arrow_gap
+  let width = 6.5 * small_icon_size + 2 * big_icon_size
+  let app1 = apk(
+    height: small_icon_size
+  )
+  let app2 = apk(
+    height: small_icon_size,
+    fill: blue
+  )
+  let app_size = measure(app1)
+  let app1_pos = (
+    0pt,
+    big_icon_size / 2 - app_size.height / 2
+  )
+  let analyser = analyse(
+    height: big_icon_size,
+  )
+  let analyser_size = measure(analyser)
+  let analyser_pos = (
+    app1_pos.at(0) + app_size.width * 2.5,
+    0pt
+  )
+  let rprt = report(
+    height: small_icon_size,
+  )
+  let rprt_size = measure(rprt)
+  let rprt_pos = (
+    analyser_pos.at(0) + analyser_size.width + rprt_size.width*1.5,
+    app1_pos.at(1),
+  )
+  let patcher = machinery(
+    height: big_icon_size,
+  )
+  let patcher_size = measure(patcher)
+  let patcher_pos = (
+    rprt_pos.at(0) + app_size.width * 2.5,
+    0pt
+  )
+  let app2_pos = (
+    patcher_pos.at(0) + patcher_size.width + rprt_size.width*1.5,
+    app1_pos.at(1),
+  )
+
+  box(
+    height: height,
+    width: width,
+    //stroke: black,
+    {
+      place(
+        left+top,
+        dx: app1_pos.at(0),
+        dy: app1_pos.at(1),
+        app1,
+      )
+      place(
+        left+top,
+        dx: app2_pos.at(0),
+        dy: app2_pos.at(1),
+        app2,
+      )
+      place(
+        left+top,
+        dx: analyser_pos.at(0),
+        dy: analyser_pos.at(1),
+        analyser,
+      )
+      place(
+        left+top,
+        dx: rprt_pos.at(0),
+        dy: rprt_pos.at(1),
+        rprt,
+      )
+      place(
+        left+top,
+        dx: patcher_pos.at(0),
+        dy: patcher_pos.at(1),
+        patcher,
+      )
+      arrow(
+        stroke: arrow_width + black,
+        (
+          app1_pos.at(0) + app_size.width + arrow_gap,
+          -height + app1_pos.at(1) + app_size.height / 2
+        ),
+        (
+          analyser_pos.at(0) - arrow_gap,
+          -height + analyser_pos.at(1) + big_icon_size / 2
+        ),
+      )
+      arrow(
+        stroke: arrow_width + black,
+        (
+          analyser_pos.at(0) + analyser_size.width + arrow_gap,
+          -height + analyser_pos.at(1) + big_icon_size / 2
+        ),
+        (
+          rprt_pos.at(0) - arrow_gap,
+          -height + rprt_pos.at(1) + rprt_size.height / 2
+        ),
+      )
+      arrow(
+        stroke: arrow_width + black,
+        (
+          rprt_pos.at(0) + rprt_size.width + arrow_gap,
+          -height + rprt_pos.at(1) + rprt_size.height / 2
+        ),
+        (
+          patcher_pos.at(0) - arrow_gap,
+          -height + patcher_pos.at(1) + big_icon_size / 2
+        )
+      )
+      arrow(
+        stroke: arrow_width + black,
+        (
+          patcher_pos.at(0) + patcher_size.width + arrow_gap,
+          -height + patcher_pos.at(1) + big_icon_size / 2
+        ),
+        (
+          app2_pos.at(0) - arrow_gap,
+          -height + app2_pos.at(1) + app_size.height / 2
+        ),
+      )
+      arrow(
+        stroke: arrow_width + black,
+        (
+          app1_pos.at(0) + app_size.width / 2,
+          -height + app1_pos.at(1) + app_size.height  + arrow_gap, 
+        ),
+        (
+          app1_pos.at(0) + app_size.width / 2,
+          -arrow_gap/2,
+        ),
+        (
+          patcher_pos.at(0) + patcher_size.width / 2,
+          -arrow_gap/2,
+        ),
+        (
+          patcher_pos.at(0) + patcher_size.width / 2,
+          -height + patcher_pos.at(1)  + patcher_size.height + arrow_gap, 
+        ),
+      )
+    }
+  )
 }
 
 #let theseus-outline(