From 04efb0a7d1d04fe5f6d059892b349b81753376a7 Mon Sep 17 00:00:00 2001
From: EnderRomantice <enderromantic@gmail.com>
Date: Tue, 23 Dec 2025 15:47:19 +0800
Subject: [PATCH] feat: Add scale props in demo

---
 .../Components/InfiniteMenu/InfiniteMenu.vue  | 26 ++++++++++++++++---
 src/demo/Components/InfiniteMenuDemo.vue      | 17 ++++++++++--
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/content/Components/InfiniteMenu/InfiniteMenu.vue b/src/content/Components/InfiniteMenu/InfiniteMenu.vue
index 4da586c..574b392 100644
--- a/src/content/Components/InfiniteMenu/InfiniteMenu.vue
+++ b/src/content/Components/InfiniteMenu/InfiniteMenu.vue
@@ -660,7 +660,7 @@ class InfiniteGridMenu {
     far: 40,
     fov: Math.PI / 4,
     aspect: 1,
-    position: vec3.fromValues(0, 0, props.scale),
+    position: vec3.fromValues(0, 0, 3),
     up: vec3.fromValues(0, 1, 0),
     matrices: {
       view: mat4.create(),
@@ -703,10 +703,10 @@ class InfiniteGridMenu {
     private onActiveItemChange: (index: number) => void,
     private onMovementChange: (isMoving: boolean) => void,
     private onInit?: (menu: InfiniteGridMenu) => void,
-    scale: number = 1.0
+    scale: number = 3.0
   ) {
     this.scaleFactor = scale;
-    this.camera.position[2] = 3 * scale;
+    this.camera.position[2] = scale;
     this.init();
   }
 
@@ -1133,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>
diff --git a/src/demo/Components/InfiniteMenuDemo.vue b/src/demo/Components/InfiniteMenuDemo.vue
index f67d9f9..44d421a 100644
--- a/src/demo/Components/InfiniteMenuDemo.vue
+++ b/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>