diff --git a/.changeset/few-bars-greet.md b/.changeset/few-bars-greet.md
new file mode 100644
index 0000000..4dad173
--- /dev/null
+++ b/.changeset/few-bars-greet.md
@@ -0,0 +1,5 @@
+---
+"slidev-addon-fancy-arrow": minor
+---
+
+arrowHeadSize prop
diff --git a/components/FancyArrow.vue b/components/FancyArrow.vue
index e73a0c2..cf4f62e 100644
--- a/components/FancyArrow.vue
+++ b/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,
});
diff --git a/components/use-rough-arrow.ts b/components/use-rough-arrow.ts
index 8425ff4..bff9ebc 100644
--- a/components/use-rough-arrow.ts
+++ b/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,7 +197,7 @@ export function useRoughArrow(props: {
const arrowHead1 = computed(() =>
createArrowHeadSvg(
rc.value as RoughSVG,
- arrowSize.value,
+ computedArrowHeadSize.value,
arrowHeadType,
options,
),
@@ -199,7 +205,7 @@ export function useRoughArrow(props: {
const arrowHead2 = computed(() =>
createArrowHeadSvg(
rc.value as RoughSVG,
- arrowSize.value,
+ computedArrowHeadSize.value,
arrowHeadType,
options,
),
diff --git a/slides.md b/slides.md
index 38c3a6a..476e12c 100644
--- a/slides.md
+++ b/slides.md
@@ -27,7 +27,7 @@
-
+
---