Fix/arrow content on straight arrow

.changeset/witty-seals-punch.md

@@ -0,0 +1,5 @@
+---
+"slidev-addon-fancy-arrow": patch
+---
+
+Fix to display the contents on straight arrows

components/use-rough-arrow.ts

@@ -107,6 +107,10 @@ export function useRoughArrow(props: {
         angle1: angle,
         angle2: angle,
         lineLength: Math.hypot(point2.x - point1.x, point2.y - point1.y),
+        arcMid: {
+          x: (point1.x + point2.x) / 2,
+          y: (point1.y + point2.y) / 2,
+        },
       };
     }
 

slides.md

@@ -261,6 +261,49 @@ Use `pos1` and `pos2` to specify the anchor point on the snapped elements.
 
 </div>
 
+---
+
+# Content on the arrow
+
+<FancyArrow x1="100" y1="100" x2="200" y2="200" >
+    Hello
+</FancyArrow>
+
+<FancyArrow x1="200" y1="100" x2="300" y2="200" arc="0.3">
+    Ahoy
+</FancyArrow>
+
+<FancyArrow x1="300" y1="100" x2="400" y2="200" arc="0.3">
+    <span text-4xl text-red>Hello</span>
+</FancyArrow>
+
+<FancyArrow x1="400" y1="100" x2="500" y2="200" arc="0.3">
+    <span text-nowrap>Slidev logo</span>
+    <img src="https://sli.dev/logo.svg" w-10 m-auto/>
+</FancyArrow>
+
+<div mt-40>
+
+```html
+<FancyArrow x1="100" y1="100" x2="200" y2="200" >
+    Hello
+</FancyArrow>
+
+<FancyArrow x1="200" y1="100" x2="300" y2="200" arc="0.3">
+    Ahoy
+</FancyArrow>
+
+<FancyArrow x1="300" y1="100" x2="400" y2="200" arc="0.3">
+    <span text-4xl text-red>Hello</span>
+</FancyArrow>
+
+<FancyArrow x1="400" y1="100" x2="500" y2="200" arc="0.3">
+    <span text-nowrap>Slidev logo</span>
+    <img src="https://sli.dev/logo.svg" w-10 m-auto/>
+</FancyArrow>
+```
+
+</div>
 
 ---