Merge pull request #121 from EnderRomantice/main

Feat: Added scaleprop to InfiniteMenu, allowing drag-and-drop scaling in the demo website.

src/constants/code/Components/infiniteMenuCode.ts

@@ -3,12 +3,15 @@ import { createCodeObject } from '@/types/code';
 
 export const infiniteMenu = createCodeObject(code, 'Components/InfiniteMenu', {
   usage: `<template>
-  <InfiniteMenu :items="menuItems" />
+  <InfiniteMenu :items="menuItems" :scale="scaleFactor" />
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import InfiniteMenu from "./InfiniteMenu.vue";
 
+const scaleFactor = ref<number>(3);
+
 const menuItems = [
   {
     image: 'https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?w=800&h=800&fit=crop',

src/content/Components/InfiniteMenu/InfiniteMenu.vue

@@ -11,6 +11,7 @@ type InfiniteMenuItem = {
 
 type InfiniteMenuProps = {
   items?: InfiniteMenuItem[];
+  scale?: number;
 };
 
 const DEFAULT_ITEMS: InfiniteMenuItem[] = [
@@ -22,7 +23,9 @@ const DEFAULT_ITEMS: InfiniteMenuItem[] = [
   }
 ];
 
-const props = defineProps<InfiniteMenuProps>();
+const props = withDefaults(defineProps<InfiniteMenuProps>(), {
+  scale: 1.0
+});
 
 // Refs
 const canvasRef = ref<HTMLCanvasElement>();
@@ -699,8 +702,11 @@ class InfiniteGridMenu {
     private items: InfiniteMenuItem[],
     private onActiveItemChange: (index: number) => void,
     private onMovementChange: (isMoving: boolean) => void,
-    private onInit?: (menu: InfiniteGridMenu) => void
+    private onInit?: (menu: InfiniteGridMenu) => void,
+    scale: number = 3.0
   ) {
+    this.scaleFactor = scale;
+    this.camera.position[2] = scale;
     this.init();
   }
 
@@ -1127,6 +1133,26 @@ watch(
   },
   { deep: true }
 );
+
+watch(
+  () => props.scale,
+  () => {
+    if (infiniteMenu && canvasRef.value) {
+      infiniteMenu.destroy();
+      infiniteMenu = new InfiniteGridMenu(
+        canvasRef.value,
+        resolvedItems.value,
+        handleActiveItem,
+        moving => {
+          isMoving.value = moving;
+        },
+        menu => menu.run(),
+
+        props.scale
+      );
+    }
+  }
+);
 </script>
 
 <template>

src/demo/Components/InfiniteMenuDemo.vue

@@ -2,9 +2,11 @@
   <TabbedLayout>
     <template #preview>
       <div class="demo-container h-[500px] overflow-hidden">
-        <InfiniteMenu :items="demoItems" />
+        <InfiniteMenu :items="demoItems" :scale="scaleFactor" />
       </div>
-
+      <Customize>
+        <PreviewSlider title="Scale" v-model="scaleFactor" :min="1" :max="10" :step="1" />
+      </Customize>
       <PropTable :data="propData" />
       <Dependencies :dependency-list="['gl-matrix']" />
     </template>
@@ -27,6 +29,9 @@ import PropTable from '../../components/common/PropTable.vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import { infiniteMenu } from '../../constants/code/Components/infiniteMenuCode';
 import InfiniteMenu from '../../content/Components/InfiniteMenu/InfiniteMenu.vue';
+import { ref } from 'vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import Customize from '../../components/common/Customize.vue';
 
 const demoItems = [
   {
@@ -55,12 +60,20 @@ const demoItems = [
   }
 ];
 
+const scaleFactor = ref<number>(3);
+
 const propData = [
   {
     name: 'items',
     type: 'InfiniteMenuItem[]',
     default: '[{...}]',
     description: 'Array of menu items with image, title, description, and link properties.'
+  },
+  {
+    name: 'scale',
+    type: 'number',
+    default: '3',
+    description: 'scale camera position'
   }
 ];
 </script>