Feature/auto snap (#137)

* Auto-snap to prev/next element

* Add changeset

Author: whitphx

.changeset/common-shrimps-tan.md

@@ -0,0 +1,5 @@
+---
+"slidev-addon-fancy-arrow": minor
+---
+
+Auto-snap to prev/next element if no snap target or absolute position is specified

components/FancyArrow.vue

@@ -62,11 +62,19 @@ const point1: Ref<AbsolutePosition | undefined> = useEndpointResolution(
   slideContainer,
   svgContainer,
   endpoint1,
+  {
+    self: root,
+    direction: "prev",
+  },
 );
 const point2: Ref<AbsolutePosition | undefined> = useEndpointResolution(
   slideContainer,
   svgContainer,
   endpoint2,
+  {
+    self: root,
+    direction: "next",
+  },
 );
 
 const { arcSvg, textPosition } = useRoughArrow({

components/parse-option.ts

@@ -73,8 +73,12 @@ export function compileArrowEndpointProps(
     };
   }
 
-  return {
-    x: Number(props.x ?? 0),
-    y: Number(props.y ?? 0),
-  };
+  if (props.x != undefined || props.y != undefined) {
+    return {
+      x: Number(props.x ?? 0),
+      y: Number(props.y ?? 0),
+    };
+  }
+
+  return undefined;
 }

components/use-element-position.ts

@@ -24,13 +24,35 @@ export function useEndpointResolution(
   slideContainerRef: Ref<Element | undefined>,
   rootElementRef: Ref<SVGSVGElement | undefined>,
   endpointRef: Ref<AbsolutePosition | SnapTarget | undefined>,
+  fallbackOption: {
+    self: Ref<HTMLElement | undefined>;
+    direction: "next" | "prev";
+  },
 ): Ref<AbsolutePosition | undefined> {
   const { $scale } = useSlideContext();
   const isSlideActive = useIsSlideActive();
 
   const snappedElementInfo = computed(() => {
     const endpoint = endpointRef.value;
-    if (endpoint == null || !("query" in endpoint)) {
+    if (endpoint == null) {
+      // If endpoint is undefined, we try to use the next or previous element
+      // as fallback snap target.
+      const selfElem = fallbackOption.self.value;
+      if (!selfElem) {
+        return undefined;
+      }
+      const element =
+        fallbackOption.direction === "next"
+          ? selfElem.nextElementSibling
+          : selfElem.previousElementSibling;
+      return {
+        element,
+        snapPosition: undefined,
+      };
+    }
+    if (!("query" in endpoint)) {
+      // endpoint is AbsolutePosition
+      // so we don't need to resolve the element.
       return undefined;
     }
     const element =

slides.md

@@ -295,6 +295,28 @@ Use `pos1` and `pos2` to specify the anchor point on the snapped elements.
 
 ---
 
+# Auto-snap
+
+<div>
+If no snap target or absolute position is specified, the arrow will automatically snap to the next or previous element in the slide.
+</div>
+
+<div p-8 flex justify-center>Prev</div>
+
+<FancyArrow />
+
+<div p-8 flex justify-center>Next</div>
+
+```html
+<div p-8 flex justify-center>Prev</div>
+
+<FancyArrow />
+
+<div p-8 flex justify-center>Next</div>
+```
+
+---
+
 # Appearance
 
 <div grid="~ cols-3 gap-4" mt-6 h-100>