From e870d5ee92df4ec60f225a140c4e7fe042f987d6 Mon Sep 17 00:00:00 2001
From: aarizona <ar.ariz.arizona@gmail.com>
Date: Tue, 24 Sep 2024 21:11:24 +0300
Subject: [PATCH] camera movve part

---
 components/calc/values.vue     | 17 +++++++++++++----
 components/dropdown/picker.vue | 13 +++++++------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/components/calc/values.vue b/components/calc/values.vue
index 02ac212..d9a8f6b 100644
--- a/components/calc/values.vue
+++ b/components/calc/values.vue
@@ -18,6 +18,7 @@ const extra_section = use_extra_section()
 const total_length = use_total_length()
 const min_length = use_min_length()
 const goto_cam = use_goto_camera()
+const open_calc = use_open_calc()
 
 if (!pillar_color.value) {
     const r = Math.floor(Math.random() * predefPillarColors.length)
@@ -182,6 +183,12 @@ const calc_table = computed(() => {
         },
     ]
 })
+
+watch(open_calc, () => {
+    if (Object.keys(open_calc.value).length == 0) {
+        goto_cam.value = new Vector3(1, 1, 1)
+    }
+})
 </script>
 <template>
     <div class="container relative py-4">
@@ -231,7 +238,8 @@ const calc_table = computed(() => {
             <div class="form-row">
                 <div class="form-item form-item_color">
                     <label for="lamelle_color">Цвет ламелей</label>
-                    <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color">
+                    <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color"
+                        :goto_cam="new Vector3(1, 1, 1)">
                         <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{
                             backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
                             color: lamelle_text
@@ -240,7 +248,8 @@ const calc_table = computed(() => {
                 </div>
                 <div class="form-item form-item_color">
                     <label for="pillar_color">Цвет столба</label>
-                    <DropdownPicker type="color" :cb="setPillarColor" name="pillar_color">
+                    <DropdownPicker type="color" :cb="setPillarColor" name="pillar_color"
+                        :goto_cam="new Vector3(-1, -1, -1)">
                         <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{
                             backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent',
                             color: pillar_text
@@ -249,13 +258,13 @@ const calc_table = computed(() => {
                 </div>
                 <div class="form-item form-item_color">
                     <label for="pillar_pattern">Узор столба</label>
-                    <DropdownPicker type="pattern" :cb="setPillarPattern">
+                    <DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
+                        :goto_cam="new Vector3(-1, 1, -1)">
                         <input id="pillar_pattern" type="text" :value="pillar_pattern" :style="{
                             backgroundImage: `url(${getFilename(pillar_pattern)})`
                         }" />
                     </DropdownPicker>
                 </div>
-                {{ goto_cam }}
             </div>
         </div>
         <template v-if="(form_state.total_length * 1000) >= parametric.length.min">
diff --git a/components/dropdown/picker.vue b/components/dropdown/picker.vue
index 998f3d7..424d611 100644
--- a/components/dropdown/picker.vue
+++ b/components/dropdown/picker.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ralClassicPallette, getColorHexFromRal } from '@/components/ral'
+import { getColorHexFromRal } from '@/components/ral'
+import { Vector3 } from 'three';
 
-const props = defineProps(['color', 'cb', 'name', 'type'])
+const props = defineProps(['color', 'cb', 'name', 'type', 'goto_cam'])
 
 const goto_cam = use_goto_camera()
 const open_calc = use_open_calc()
@@ -12,10 +13,9 @@ const is_open = ref<boolean>(open_calc.value.includes(props.name))
 const toggleOpen = (value: boolean = !is_open) => {
     is_open.value = value
     if (value == true) open_calc.value = [props.name]
-    else if (value == false) open_calc.value.splice(open_calc.value.indexOf(props.name), 1)
+    else if (value == false && open_calc.value.includes(props.name)) open_calc.value = []
 
-    if (value == true) goto_cam.value = undefined
-    else if (value == false) goto_cam.value = undefined
+    if (value == true && props.goto_cam) goto_cam.value = props.goto_cam
 }
 
 const onClick = (color: string) => {
@@ -36,6 +36,7 @@ onMounted(() => {
 onUnmounted(() => {
     document.removeEventListener('click', clickOutside)
 })
+
 watch(open_calc, () => {
     if (open_calc.value.includes(props.name) && is_open.value !== true) {
         is_open.value = true
@@ -59,7 +60,7 @@ watch(open_calc, () => {
         <div class="picker-changer flex flex-wrap" v-if="is_open">
             <template v-if="props.type == 'color'">
                 <DropdownColorPicker :color="props.color" :cb="onClick" />
-            </template> 
+            </template>
             <template v-else-if="props.type == 'pattern'">
                 <DropdownList :color="props.color" :cb="onClick" />
             </template>