Add arrowHeadSize prop

.changeset/few-bars-greet.md

@@ -0,0 +1,5 @@
+---
+"slidev-addon-fancy-arrow": minor
+---
+
+arrowHeadSize prop

components/FancyArrow.vue

@@ -18,6 +18,7 @@ const props = defineProps<{
   twoWay?: boolean;
   arc?: number | string;
   arrowHeadType?: "line" | "polygon";
+  arrowHeadSize?: number | string;
 }>();
 
 const point1 = props.id1
@@ -35,6 +36,7 @@ const roughSvg = useRoughArrow({
   twoWay: props.twoWay ?? false,
   centerPositionParam: Number(props.arc ?? 0),
   arrowHeadType: props.arrowHeadType ?? "line",
+  arrowHeadSize: props.arrowHeadSize ? Number(props.arrowHeadSize) : null,
 });
 </script>
 

components/use-rough-arrow.ts

@@ -45,6 +45,7 @@ export function useRoughArrow(props: {
   color: string;
   width: number;
   arrowHeadType: "line" | "polygon";
+  arrowHeadSize: number | null;
   twoWay: boolean;
   centerPositionParam: number;
 }) {
@@ -54,6 +55,7 @@ export function useRoughArrow(props: {
     color,
     width,
     arrowHeadType,
+    arrowHeadSize,
     twoWay,
     centerPositionParam,
   } = props;
@@ -178,11 +180,15 @@ export function useRoughArrow(props: {
     };
   });
 
-  const arrowSize = computed(() => {
+  const computedArrowHeadSize = computed(() => {
     if (line.value == null) {
       return 0;
     }
 
+    if (arrowHeadSize != null) {
+      return arrowHeadSize;
+    }
+
     // The arrow size is proportional to the line length.
     // The constant factor is chosen so that the arrow size is 30 when the line length is 200.
     return (30 * Math.log(line.value.lineLength)) / Math.log(200);
@@ -191,15 +197,15 @@ export function useRoughArrow(props: {
   const arrowHead1 = computed(() =>
     createArrowHeadSvg(
       rc.value as RoughSVG,
-      arrowSize.value,
+      computedArrowHeadSize.value,
       arrowHeadType,
       options,
     ),
   );
   const arrowHead2 = computed(() =>
     createArrowHeadSvg(
       rc.value as RoughSVG,
-      arrowSize.value,
+      computedArrowHeadSize.value,
       arrowHeadType,
       options,
     ),

slides.md

@@ -27,7 +27,7 @@
 
 <FancyArrow id1="block1" pos1="bottom" id2="block2" pos2="top" color="red" width="3" twoWay />
 
-<FancyArrow id1="block1" pos1="bottomright" id2="block2" pos2="topright" color="red" width="3" twoWay arc="0.5" arrowHeadType="polygon" />
+<FancyArrow id1="block1" pos1="bottomright" id2="block2" pos2="topright" color="red" width="3" twoWay arc="0.5" arrowHeadType="polygon" arrowHeadSize="30" />
 
 ---