From 1c067ffa2b1c56c367cc0b462e3d6e8b050f5b14 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Sat, 4 Nov 2023 12:09:15 +0100
Subject: [PATCH] feat: add vector 2 support

---
 playground/src/pages/folders.vue | 13 +++++++------
 playground/src/pages/index.vue   |  2 +-
 src/components/VectorControl.vue |  4 ++--
 src/utils/is.ts                  |  4 ++--
 src/utils/normalize.ts           |  7 ++++++-
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/playground/src/pages/folders.vue b/playground/src/pages/folders.vue
index 2f8a4b0..66d0504 100644
--- a/playground/src/pages/folders.vue
+++ b/playground/src/pages/folders.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping, Vector3 } from 'three'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping, Vector3, Vector2 } from 'three'
 
 import { OrbitControls, Sphere } from '@tresjs/cientos'
 
@@ -17,12 +17,13 @@ const gl = {
 }
 
 const { position } = useControls('camera', {
-  position: new Vector3(3, 3, 3),
+  position: new Vector3(3, 2, 3),
+  /*  delay: new Vector2(1.5, 3.5), */
 })
 
-const { position: lightPosition } = useControls('light', {
+/* const { position: lightPosition } = useControls('light', {
   position: new Vector3(3, 3, 3),
-})
+}) */
 </script>
 
 <template>
@@ -36,10 +37,10 @@ const { position: lightPosition } = useControls('light', {
     <Sphere>
       <TresMeshToonMaterial />
     </Sphere>
-    <TresDirectionalLight
+    <!-- <TresDirectionalLight
       :args="[0xffffff, 1]"
       :position-x="lightPosition.x"
-    />
+    /> -->
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>
\ No newline at end of file
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index f7a6574..60c7ec2 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Vector3 } from 'three'
+import { Vector3, Vector2 } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 
diff --git a/src/components/VectorControl.vue b/src/components/VectorControl.vue
index 32ef5ba..898fbce 100644
--- a/src/components/VectorControl.vue
+++ b/src/components/VectorControl.vue
@@ -115,8 +115,8 @@ watch(mouse.x, (newValue) => {
       <div
         v-for="(_subcontrol, $index) in vector"
         :key="label + $index"
-        class="flex items-center w-1/3 bg-gray-100 rounded"
-        :class="{ 'w-2/5': focused === $index }" 
+        class="flex items-center bg-gray-100 rounded"
+        :class="{ 'w-2/5': focused === $index, 'w-1/3': isVector3(control.value), 'w-1/2': isVector2(control.value) }" 
       >
         <span
           v-if="labels[$index] && isVector"
diff --git a/src/utils/is.ts b/src/utils/is.ts
index 66279a7..940d0b4 100644
--- a/src/utils/is.ts
+++ b/src/utils/is.ts
@@ -1,5 +1,5 @@
-export function isVector2(obj: { x: number; y: number; z: number }) {
-  return obj && typeof obj.x === 'number' && typeof obj.y === 'number' && typeof obj.z === 'undefined'
+export function isVector2(obj: { x: number; y: number }) {
+  return obj && typeof obj.x === 'number' && typeof obj.y === 'number'
 }
 
 export function isVector3(obj: { x: number; y: number; z: number }) {
diff --git a/src/utils/normalize.ts b/src/utils/normalize.ts
index 55fb84a..024a7ec 100644
--- a/src/utils/normalize.ts
+++ b/src/utils/normalize.ts
@@ -1,6 +1,7 @@
-import { isVector3 } from '.'
+import { isVector2, isVector3 } from '.'
 
 export interface Vector3Prop { x: number; y: number; z: number }
+export interface Vector2Prop { x: number; y: number }
 export type SizeFlexibleParams =
   | number[]
   | {
@@ -29,6 +30,10 @@ export function normalizeVectorFlexibleParam(value: VectorFlexibleParams): Array
     const { x, y, z } = value as Vector3Prop
     return [x, y, z]
   }
+  if (isVector2(value as Vector2Prop)) {
+    const { x, y } = value as Vector2Prop
+    return [x, y]
+  }
   return value as Array<number>
 }