Fix reactivity on the absolute positions/snapped anchor props (#134)

* Fix reactivity on the absolute positions

* Fix reactivity

* Refactoring

* Add changeset

* Update components/use-element-position.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: whitphx

.changeset/stupid-parks-post.md

@@ -0,0 +1,5 @@
+---
+"slidev-addon-fancy-arrow": patch
+---
+
+Fix the props reactivity to work properly

components/FancyArrow.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref, computed, type Ref } from "vue";
 import { compileArrowEndpointProps } from "./parse-option";
-import { useElementPosition, type SnapPosition } from "./use-element-position";
+import {
+  useEndpointResolution,
+  type SnapPosition,
+} from "./use-element-position";
 import { useRoughArrow, type AbsolutePosition } from "./use-rough-arrow";
 
 const props = defineProps<{
@@ -34,7 +37,7 @@ const slideContainer = computed(() => {
 
 const svgContainer = ref<SVGSVGElement>();
 
-const from = computed(() =>
+const endpoint1 = computed(() =>
   compileArrowEndpointProps({
     shorthand: props.from,
     q: props.q1,
@@ -44,7 +47,7 @@ const from = computed(() =>
     y: props.y1,
   }),
 );
-const to = computed(() =>
+const endpoint2 = computed(() =>
   compileArrowEndpointProps({
     shorthand: props.to,
     q: props.q2,
@@ -55,24 +58,16 @@ const to = computed(() =>
   }),
 );
 
-const point1: Ref<AbsolutePosition | undefined> =
-  from.value && "query" in from.value
-    ? useElementPosition(
-        slideContainer,
-        svgContainer,
-        from.value.query,
-        from.value.snapPosition,
-      )
-    : ref(from.value);
-const point2: Ref<AbsolutePosition | undefined> =
-  to.value && "query" in to.value
-    ? useElementPosition(
-        slideContainer,
-        svgContainer,
-        to.value.query,
-        to.value.snapPosition,
-      )
-    : ref(to.value);
+const point1: Ref<AbsolutePosition | undefined> = useEndpointResolution(
+  slideContainer,
+  svgContainer,
+  endpoint1,
+);
+const point2: Ref<AbsolutePosition | undefined> = useEndpointResolution(
+  slideContainer,
+  svgContainer,
+  endpoint2,
+);
 
 const { arcSvg, textPosition } = useRoughArrow({
   point1,

components/use-element-position.ts

@@ -8,6 +8,7 @@ import {
 } from "vue";
 import { useSlideContext, useIsSlideActive } from "@slidev/client";
 import { AbsolutePosition } from "./use-rough-arrow";
+import { SnapTarget } from "./parse-option";
 
 export type SnapPosition =
   | "top"
@@ -19,43 +20,75 @@ export type SnapPosition =
   | "bottomleft"
   | "bottomright";
 
-export function useElementPosition(
-  slideContainer: Ref<Element | undefined>,
-  rootElement: Ref<SVGSVGElement | undefined>,
-  selector: string,
-  pos?: SnapPosition,
+export function useEndpointResolution(
+  slideContainerRef: Ref<Element | undefined>,
+  rootElementRef: Ref<SVGSVGElement | undefined>,
+  endpointRef: Ref<AbsolutePosition | SnapTarget | undefined>,
 ): Ref<AbsolutePosition | undefined> {
   const { $scale } = useSlideContext();
   const isSlideActive = useIsSlideActive();
 
-  const elem = computed(() => {
-    return slideContainer.value?.querySelector(selector) ?? null;
+  const snappedElementInfo = computed(() => {
+    const endpoint = endpointRef.value;
+    if (endpoint == null || !("query" in endpoint)) {
+      return undefined;
+    }
+    const element =
+      slideContainerRef.value?.querySelector(endpoint.query) ?? null;
+    return {
+      element,
+      snapPosition: endpoint.snapPosition,
+    };
   });
 
   const point = ref<AbsolutePosition | undefined>(undefined);
 
-  const update = () => {
-    if (!isSlideActive.value || !rootElement.value || !elem.value) {
+  // Sync endpointRef -> point in case where endpoint is AbsolutePosition
+  watch(
+    endpointRef,
+    (endpoint) => {
+      if (endpoint == null) {
+        point.value = undefined;
+        return;
+      } else if ("x" in endpoint) {
+        point.value = { x: endpoint.x, y: endpoint.y };
+        return;
+      }
+    },
+    { immediate: true },
+  );
+
+  // Sync snappedElementInfo -> point in case where endpoint is SnapTarget
+  const updateSnappedPosition = () => {
+    if (!snappedElementInfo.value) {
+      // This case means endpoint is AbsolutePosition
+      // so we don't need to update point in this method
+      // as it's done in the watch above.
+      return;
+    }
+
+    const { element, snapPosition } = snappedElementInfo.value;
+    if (!isSlideActive.value || !rootElementRef.value || !element) {
       point.value = undefined;
       return;
     }
 
-    const rect = elem.value.getBoundingClientRect();
-    const rootRect = rootElement.value.getBoundingClientRect();
+    const rect = element.getBoundingClientRect();
+    const rootRect = rootElementRef.value.getBoundingClientRect();
 
     let x = (rect.left - rootRect.left) / $scale.value;
     let y = (rect.top - rootRect.top) / $scale.value;
     const width = rect.width / $scale.value;
     const height = rect.height / $scale.value;
 
-    if (pos?.includes("right")) {
+    if (snapPosition?.includes("right")) {
       x += width;
-    } else if (!pos?.includes("left")) {
+    } else if (!snapPosition?.includes("left")) {
       x += width / 2;
     }
-    if (pos?.includes("bottom")) {
+    if (snapPosition?.includes("bottom")) {
       y += height;
-    } else if (!pos?.includes("top")) {
+    } else if (!snapPosition?.includes("top")) {
       y += height / 2;
     }
 
@@ -70,16 +103,16 @@ export function useElementPosition(
   watch(isSlideActive, () => {
     setTimeout(() => {
       // This `setTimeout` is important to ensure `update()` is called after the DOM elements in the slide are updated after `isSlideActive` is changed.
-      update();
+      updateSnappedPosition();
     });
   });
 
   watch(
-    elem,
+    snappedElementInfo,
     (newVal) => {
-      if (newVal) {
-        const observer = new MutationObserver(update);
-        observer.observe(newVal, { attributes: true });
+      if (newVal?.element) {
+        const observer = new MutationObserver(updateSnappedPosition);
+        observer.observe(newVal.element, { attributes: true });
 
         onWatcherCleanup(() => {
           observer.disconnect();
@@ -90,12 +123,12 @@ export function useElementPosition(
   );
 
   onMounted(() => {
-    update();
+    updateSnappedPosition();
 
     // Some type of position/size changes can't be observed by MutationObserver.
     // So we need to update the position/size periodically in the polling manner.
     const interval = setInterval(() => {
-      update();
+      updateSnappedPosition();
     }, 100);
 
     return () => clearInterval(interval);

slides.md

@@ -617,3 +617,14 @@ Use `pos1` and `pos2` to specify the anchor point on the snapped elements.
 <FancyArrow v-click="2" forward:delay-100 q1="[data-id=bar]" pos1="bottomright" q2="[data-id=baz]" pos2="topright" color="green" width="2" arc="0.3" seed="1" roughness="2" >
     <span text-green v-mark.green="2">Hola!</span>
 </FancyArrow>
+
+---
+clicks: 4
+---
+
+# Demo: dynamic positions
+
+<div absolute left="50%" top="50%" translate-x="-50%" translate-y="-50%" data-id="center-anchor"></div>
+<div absolute right-10 top="50%" translate-x="-50%" translate-y="-50%" data-id="right-anchor">Anchor</div>
+
+<FancyArrow q1="[data-id=center-anchor]" :x2="$clicks % 2 === 0 ? 100 : 900" :y2="$clicks / 2 < 1 ? 100 : 500" :q2="$clicks > 3 ? '[data-id=right-anchor]' : undefined" />