add core directory

src/core/UI/scrollView/useScrollView.ts

@@ -0,0 +1,56 @@
+import {ref, computed, onMounted} from "vue";
+export default function useScrollView({ targetId }: {targetId: string}) {
+    const scroll = ref(0);
+    let scrollTarget: HTMLElement | SVGElement | null;
+    const targetHeight = ref(0);
+    let topBound: number;
+
+    const clampedScroll = computed(() => {
+      if (targetHeight.value === 0) { return 0; }
+      topBound = -targetHeight.value + 450;
+      return Math.max(topBound, Math.min(scroll.value, 0)) as number;
+    })
+
+    const scrollView = computed(() => {
+      if (clampedScroll.value === 0) {
+        scroll.value = 0;
+      } else if (clampedScroll.value === topBound) {
+        scroll.value = topBound;
+      }
+      return `0 ${clampedScroll.value} 350 500`;
+    });
+
+    const getHeight = () => {
+      if (scrollTarget) {
+        return scrollTarget.getBoundingClientRect().height as number;
+      }
+    }
+
+    const handleScrollEvent = (verticalScroll: number) => {
+        if (scrollTarget) {
+          // only scroll if renderer height is greater than main window
+          const heightResult = getHeight();
+          if (heightResult) {
+            if (heightResult > 500) { 
+              targetHeight.value = heightResult;
+              scroll.value += verticalScroll;
+            }
+          }
+        }
+    }
+
+    onMounted(() => {
+      scrollTarget = document.getElementById(targetId);
+      if (scrollTarget) {
+        window.addEventListener("wheel", (e) => {
+          const verticalScroll = e.deltaY * 0.25;
+          handleScrollEvent(verticalScroll);
+        })
+      }
+    });
+
+    return {
+      scrollView
+    }
+
+}