feat: graph lines and more customization available for nodes

app/components/GraphNode.vue

@@ -1,27 +1,34 @@
 <script setup lang="ts">
 import {motion, frame} from "motion-v";
-
-function getRandomArbitrary(min: number, max: number): number {
-    return Math.random() * (max - min) + min;
-}
-
 const {
     name,
     img = undefined,
     color = 'bg-white',
     textTop = false,
-    moveFactor = undefined
+    moveFactor = undefined,
+    scaleFactor = 2,
+    initialWidth = undefined,
+    initialHeight = undefined,
 } = defineProps<{
     name: string,
     img?: string,
     color?: string,
     textTop?: boolean,
-    moveFactor?: number
+    moveFactor?: number,
+    scaleFactor?: number,
+    initialWidth?: string,
+    initialHeight?: string,
 }>()
 
+const emit = defineEmits(['positionChanged'])
+
 const isHoveringParent = ref(false)
 const roundedDivClass = `rounded-full w-full h-full absolute ${color}`
 
+function getRandomArbitrary(min: number, max: number): number {
+    return Math.random() * (max - min) + min;
+}
+
 const moveFactorValue = moveFactor ? moveFactor : getRandomArbitrary(8.0, 30.0)
 
 const spring = {damping: 5, stiffness: 50, restDelta: 0.001}
@@ -40,6 +47,16 @@ const handlePointerMove = ({clientX, clientY}: { clientX: number; clientY: numbe
     })
 }
 
+useRafFn(() => {
+    const element = elementRef.value?.$el
+    if (!element)
+        return
+    emit(
+        'positionChanged',
+        x.get() + element.offsetLeft + element.offsetWidth/2,
+        y.get() + element.offsetTop + element.offsetHeight/2,)
+})
+
 onMounted(() => {
     window.addEventListener("pointermove", handlePointerMove)
 })
@@ -48,19 +65,20 @@ onUnmounted(() => {
     window.removeEventListener("pointermove", handlePointerMove)
 })
 
+const baseElementClass = ref(`${initialWidth ? initialWidth : 'w-30'} ${initialHeight ? initialHeight : 'h-30'} avatar absolute`)
 
 </script>
 
 <template>
     <motion.div
         ref="elementRef"
-        class="w-30 h-30 avatar absolute"
+        :class="baseElementClass"
         :style="{ x, y }"
-        :while-hover="{ scale: 2 }"
+        :while-hover="{ scale: scaleFactor }"
         @hover-start="event => {isHoveringParent=true}"
         @hover-end="event => {isHoveringParent=false}">
 
-        <div v-if="img !== undefined" class="mask mask-squircle w-24">
+        <div v-if="img !== undefined" class="mask mask-squircle w-full">
             <NuxtImg :src="img"/>
         </div>
         <div v-else :class="roundedDivClass"/>