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 @@ - + ---