rotate

components/calc/values.vue

@@ -17,9 +17,6 @@ const section_count = use_section_count()
 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 goto_target = use_goto_target()
-const open_calc = use_open_calc()
 
 if (!pillar_color.value) {
     const r = Math.floor(Math.random() * predefPillarColors.length)
@@ -139,7 +136,6 @@ const changeParametres = () => {
     goal('calc_fence', form_state)
 }
 
-
 const setLamelleColor = (color: ralTypes) => {
     lamelle_color.value = color;
     lamelle_text.value = contrastColor(color) ?? '#000'
@@ -184,13 +180,6 @@ const calc_table = computed(() => {
         },
     ]
 })
-
-watch(open_calc, () => {
-    if (Object.keys(open_calc.value).length == 0) {
-        goto_cam.value = new Vector3(0, 0, 0)
-        goto_target.value = new Vector3(0, 0, 0)
-    }
-})
 </script>
 <template>
     <div class="form">
@@ -241,8 +230,9 @@ watch(open_calc, () => {
         <div class="form-row">
             <div class="form-item form-item_color">
                 <label for="lamelle_color">Цвет ламелей</label>
-                <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :goto_cam="new Vector3(1, 1, 1)"
-                    :goto_target="new Vector3(1, 1, 1)">
+                <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color"
+                    :goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.5, 0)"
+                    :goto_cam="new Vector3(0.5, 0.5, 0.5)">
                     <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{
                         backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
                         color: lamelle_text
@@ -253,8 +243,9 @@ watch(open_calc, () => {
         <div class="form-row">
             <div class="form-item form-item_color">
                 <label for="pillar_color">Цвет столба</label>
-                <DropdownPicker type="color" :cb="setPillarColor" name="pillar_color" :goto_cam="new Vector3(2, 1, 1)"
-                    :goto_target="new Vector3(1, 1, 1)">
+                <DropdownPicker type="color" :cb="setPillarColor" name="pillar_color"
+                    :goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
+                    :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
@@ -266,7 +257,8 @@ watch(open_calc, () => {
             <div class="form-item form-item_color">
                 <label for="pillar_pattern">Узор столба</label>
                 <DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
-                    :goto_cam="new Vector3(-1, 0, 0)" :goto_target="new Vector3(1, 1, 1)">
+                    :goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
+                    :goto_cam="new Vector3(1, -1, -1)">
                     <input id="pillar_pattern" type="text" :value="pillar_pattern" :style="{
                         backgroundImage: `url(${getFilename(pillar_pattern)})`
                     }" />

components/model/parametric.vue

@@ -9,6 +9,9 @@ const extra_section = use_extra_section()
 const lamelles_count = use_lamelles_count()
 const lamelle_height = use_lamelle_height()
 const fence_section = use_fence_section()
+const open_calc = use_open_calc()
+const goto_cam = use_goto_camera()
+const goto_target = use_goto_target()
 
 const { scene, controls, camera } = useTresContext()
 const { seek, seekAll } = useSeek()
@@ -62,17 +65,26 @@ watch(() => [section_count.value, extra_section.value], () => {
         }
     });
 })
-const setTarget = () => {
+const setTarget = (smooth = false) => {
     let f = fence_section.value * lamelles_count.value * lamelle_height.value * 0.75
     if (f < 3) f = 3
-    console.log(f)
     const target = new Vector3(0, lamelles_count.value * lamelle_height.value * 0.5, 0);
-    (controls.value as OrbitControlsProps).target = target
-    camera.value?.position.set(f, f, f)
+    if (smooth) {
+        goto_target.value = target
+        goto_cam.value = new Vector3(f, f, f)
+    } else {
+        (controls.value as OrbitControlsProps).target = target
+        camera.value?.position.set(f, f, f)
+    }
 }
 setTarget()
-watch([lamelles_count, fence_section], setTarget)
+watch([lamelles_count, fence_section], () => setTarget(false))
 
+watch(open_calc, () => {
+    if (Object.keys(open_calc.value).length == 0) {
+        setTarget(true)
+    }
+})
 </script>
 <template>
     <TresGroup name="base">