Accept arbitrary query selector to find the anchor elements

Author: whitphx

components/FancyArrow.vue

@@ -4,8 +4,10 @@ import { useElementPosition, type SnapPosition } from "./use-element-position";
 import { useRoughArrow } from "./use-rough-arrow";
 
 const props = defineProps<{
-  id1?: string;
-  id2?: string;
+  q1?: string;
+  q2?: string;
+  id1?: string; // Deprecated
+  id2?: string; // Deprecated
   pos1?: SnapPosition;
   pos2?: SnapPosition;
   x1?: number | string;
@@ -29,21 +31,22 @@ const slideContainer = computed(() => {
 
 const svgContainer = ref<SVGSVGElement>();
 
-const point1 = props.id1
-  ? useElementPosition(
-      slideContainer,
-      svgContainer,
-      `#${props.id1}`,
-      props.pos1,
-    )
+const query1 = computed(() => {
+  if (props.q1) return props.q1;
+  if (props.id1) return `#${props.id1}`;
+  return undefined;
+});
+const query2 = computed(() => {
+  if (props.q2) return props.q2;
+  if (props.id2) return `#${props.id2}`;
+  return undefined;
+});
+
+const point1 = query1.value
+  ? useElementPosition(slideContainer, svgContainer, query1.value, props.pos1)
   : ref({ x: Number(props.x1 ?? 0), y: Number(props.y1 ?? 0) });
-const point2 = props.id2
-  ? useElementPosition(
-      slideContainer,
-      svgContainer,
-      `#${props.id2}`,
-      props.pos2,
-    )
+const point2 = query2.value
+  ? useElementPosition(slideContainer, svgContainer, query2.value, props.pos2)
   : ref({ x: Number(props.x2 ?? 0), y: Number(props.y2 ?? 0) });
 
 const { arcSvg, textPosition } = useRoughArrow({