Roughjs rough style props (#8)

* Add roughness, bowing, and seed props

* Remove bowing prop

* Update slides.md

* Add changeset

Author: whitphx

.changeset/common-sites-hope.md

@@ -0,0 +1,5 @@
+---
+"slidev-addon-fancy-arrow": minor
+---
+
+Add roughness and seed props

components/FancyArrow.vue

@@ -19,6 +19,8 @@ const props = defineProps<{
   arc?: number | string;
   arrowHeadType?: "line" | "polygon";
   arrowHeadSize?: number | string;
+  roughness?: number | string;
+  seed?: number | string;
 }>();
 
 const point1 = props.id1
@@ -37,6 +39,8 @@ const roughSvg = useRoughArrow({
   centerPositionParam: Number(props.arc ?? 0),
   arrowHeadType: props.arrowHeadType ?? "line",
   arrowHeadSize: props.arrowHeadSize ? Number(props.arrowHeadSize) : null,
+  roughness: props.roughness ? Number(props.roughness) : undefined,
+  seed: props.seed ? Number(props.seed) : undefined,
 });
 </script>
 

components/use-rough-arrow.ts

@@ -46,6 +46,8 @@ export function useRoughArrow(props: {
   width: number;
   arrowHeadType: "line" | "polygon";
   arrowHeadSize: number | null;
+  roughness?: number;
+  seed?: number;
   twoWay: boolean;
   centerPositionParam: number;
 }) {
@@ -56,17 +58,20 @@ export function useRoughArrow(props: {
     width,
     arrowHeadType,
     arrowHeadSize,
+    roughness,
+    seed,
     twoWay,
     centerPositionParam,
   } = props;
-
   const options = {
     stroke: color,
     strokeWidth: width,
     fill: color,
     fillStyle: "solid",
-  };
-
+    // We don't support the `bowing` param because it's not so effective for arc.
+    ...(roughness !== undefined && { roughness }),
+    ...(seed !== undefined && { seed }),
+  } as const;
   const svg = ref<SVGSVGElement>(
     document.createElementNS("http://www.w3.org/2000/svg", "svg"),
   );

slides.md

@@ -1,7 +1,15 @@
 ---
+mdc: true
+---
 
 # Fancy Arrow
 
+## Slidev addon for drawing arrows with <span v-mark.red id="fancy-styles">fancy styles</span>,
+
+<span v-click id="rough-js">powered by [Rough.js](https://roughjs.com).</span>
+
+<FancyArrow v-after id1="rough-js" pos1="bottomright" id2="fancy-styles" pos2="bottomleft" color="red" width="2" arc="-0.3" seed="1" roughness="2" />
+
 ---
 
 # Demo