graph babay

app/components/GraphNode.vue

@@ -1,40 +1,62 @@
 <script setup lang="ts">
-import {motion, type MotionValue} from "motion-v";
+import {motion, frame} from "motion-v";
+
+function getRandomArbitrary(min: number, max: number): number {
+    return Math.random() * (max - min) + min;
+}
 
 const {
-    x,
-    y,
     name,
     img = undefined,
     color = 'bg-white',
-    hOffset = undefined,
-    vOffset = undefined,
+    textTop = false,
+    moveFactor = undefined
 } = defineProps<{
-    x: MotionValue<number>,
-    y: MotionValue<number>,
     name: string,
     img?: string,
     color?: string,
-    hOffset?: string,
-    vOffset?: string,
+    textTop?: boolean,
+    moveFactor?: number
 }>()
 
 const isHoveringParent = ref(false)
-
 const roundedDivClass = `rounded-full w-full h-full absolute ${color}`
 
-const hOffsetValue = hOffset === undefined ? '' : hOffset
-const vOffsetValue = vOffset === undefined ? '' : vOffset
-const computedClass = `w-20 h-20 absolute avatar ${hOffsetValue} ${vOffsetValue}`
+const moveFactorValue = moveFactor ? moveFactor : getRandomArbitrary(8.0, 30.0)
+
+const spring = {damping: 5, stiffness: 50, restDelta: 0.001}
+
+const elementRef = useTemplateRef('elementRef')
+const xPoint = useMotionValue(0)
+const yPoint = useMotionValue(0)
+const x = useSpring(xPoint, spring)
+const y = useSpring(yPoint, spring)
+const handlePointerMove = ({clientX, clientY}: { clientX: number; clientY: number }) => {
+    const element = elementRef.value?.$el
+    if (!element) return
+    frame.read(() => {
+        xPoint.set((clientX - element.offsetLeft - element.offsetWidth / 2)/moveFactorValue)
+        yPoint.set((clientY - element.offsetTop - element.offsetHeight / 2)/moveFactorValue)
+    })
+}
+
+onMounted(() => {
+    window.addEventListener("pointermove", handlePointerMove)
+})
+
+onUnmounted(() => {
+    window.removeEventListener("pointermove", handlePointerMove)
+})
+
 
 </script>
 
 <template>
     <motion.div
         ref="elementRef"
-        :class="computedClass"
+        class="w-30 h-30 avatar absolute"
         :style="{ x, y }"
-        :while-hover="{ scale: 3 }"
+        :while-hover="{ scale: 2 }"
         @hover-start="event => {isHoveringParent=true}"
         @hover-end="event => {isHoveringParent=false}">
 
@@ -44,6 +66,7 @@ const computedClass = `w-20 h-20 absolute avatar ${hOffsetValue} ${vOffsetValue}
         <div v-else :class="roundedDivClass"/>
 
         <motion.p
+            v-if="textTop"
             v-show="isHoveringParent"
             class="-top-8 absolute text-xs"
             :initial="{ opacity: 0 }"
@@ -51,6 +74,16 @@ const computedClass = `w-20 h-20 absolute avatar ${hOffsetValue} ${vOffsetValue}
             :exit="{ opacity: 0 }">
             {{ name }}
         </motion.p>
+
+        <motion.p
+            v-else
+            v-show="isHoveringParent"
+            class="-bottom-8 absolute text-xs"
+            :initial="{ opacity: 0 }"
+            :animate="{ opacity: 1 }"
+            :exit="{ opacity: 0 }">
+            {{ name }}
+        </motion.p>
     </motion.div>
 </template>