assets/main.scss

@@ -178,18 +178,10 @@ a[href^="#"] {
     }
 
     &_calc {
-        @apply py-0 relative;
+        // @apply;
 
-        >.container:first-child {
-            @apply relative min-h-[650px] justify-between;
-
-            >* {
-                @apply z-10
-            }
-        }
-
-        &-canvas {
-            @apply absolute top-0 bottom-0;
+        .container {
+            @apply gap-4;
         }
     }
 
@@ -373,6 +365,7 @@ button {
 
     &-item {
         @apply w-10 h-10;
+
         &--empty {
             @apply block bg-slate-300;
         }

components/calc/models.vue

@@ -34,7 +34,6 @@ watch(fence_section, () => {
 })
 </script>
 <template>
-    <div class="container min-w-full siteblock_calc-canvas">
     <ClientOnly fallback-tag="div">
         <template #fallback>
             <div class="fallback">
@@ -56,5 +55,4 @@ watch(fence_section, () => {
             </TresGroup>
         </TresCanvas>
     </ClientOnly>
-    </div>
 </template>

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 goto_target = use_goto_target()
 const open_calc = use_open_calc()
 
 if (!pillar_color.value) {
@@ -186,27 +187,30 @@ const calc_table = computed(() => {
 
 watch(open_calc, () => {
     if (Object.keys(open_calc.value).length == 0) {
-        goto_cam.value = new Vector3(1, 1, 1)
+        goto_cam.value = new Vector3(0, 0, 0)
+        goto_target.value = new Vector3(0, 0, 0)
     }
 })
 </script>
 <template>
-    <div class="container relative py-4">
-        <div class="col-span-3">
+    <div class="form">
         <div class="form-row">
             <div class="form-item w-full">
                 <label for="length">Длина ламельного блока, мм</label>
                 <input :value.input="`${form_state.length.toFixed(0)} мм`" disabled class="w-full" />
-                    <input id="length" type="range" class="xl:w-full" v-bind="parametric.length"
-                        v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" />
+                <input id="length" type="range" class="xl:w-full" v-bind="parametric.length" v-model="form_state.length"
+                    :disabled="form_state.auto_length" :ref="form_refs.length" />
             </div>
+        </div>
+        <div class="form-row">
             <div class="form-item w-full">
                 <label for="height">Высота забора, мм</label>
                 <input :value="`${form_state.height} мм`" class="w-full" disabled />
-                    <input id="height" type="range" class="xl:w-full" v-bind="parametric.height"
-                        v-model="form_state.height" :ref="form_refs.height" />
+                <input id="height" type="range" class="xl:w-full" v-bind="parametric.height" v-model="form_state.height"
+                    :ref="form_refs.height" />
             </div>
-
+        </div>
+        <div class="form-row">
             <div class="form-item">
                 <label for="total_length">Общая длина забора, м</label>
                 <input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600"
@@ -218,6 +222,8 @@ watch(open_calc, () => {
                     размер, чтобы продолжить.
                 </p>
             </div>
+        </div>
+        <div class="form-row">
             <div class="form-item form-item_checkbox">
                 <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
                 <label for="auto_length">Автоматический подбор секции</label>
@@ -225,48 +231,49 @@ watch(open_calc, () => {
             <p v-if="!form_state.auto_length" class="text-ioprim text-sm">
                 Рекомендуем вам включить автоподбор длины секции
             </p>
-
+        </div>
+        <div class="form-row">
             <div class="form-item form-item_checkbox">
                 <input id="remove_pillar" type="checkbox" v-model="form_state.remove_pillar" />
                 <label for="remove_pillar">Без столбов</label>
             </div>
-
-
         </div>
-        </div>
-        <div class="col-span-3 col-start-10">
         <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)">
+                <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :goto_cam="new Vector3(1, 1, 1)"
+                    :goto_target="new Vector3(1, 1, 1)">
                     <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{
                         backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
                         color: lamelle_text
                     }" />
                 </DropdownPicker>
             </div>
+        </div>
+        <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(-1, -1, -1)">
+                <DropdownPicker type="color" :cb="setPillarColor" name="pillar_color" :goto_cam="new Vector3(2, 1, 1)"
+                    :goto_target="new Vector3(1, 1, 1)">
                     <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{
                         backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent',
                         color: pillar_text
                     }" />
                 </DropdownPicker>
             </div>
+        </div>
+        <div class="form-row">
             <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, 1, -1)">
+                    :goto_cam="new Vector3(-1, 0, 0)" :goto_target="new Vector3(1, 1, 1)">
                     <input id="pillar_pattern" type="text" :value="pillar_pattern" :style="{
                         backgroundImage: `url(${getFilename(pillar_pattern)})`
                     }" />
                 </DropdownPicker>
             </div>
         </div>
-        </div>
+        <div class="form-row">
             <template v-if="(form_state.total_length * 1000) >= parametric.length.min">
                 <div class="col-span-12 xl:col-span-6 xl:col-start-4 grid calc_table">
                     <div class="grid grid-cols-4 relative">
@@ -281,13 +288,13 @@ watch(open_calc, () => {
                 </div>
             </template>
         </div>
+    </div>
 </template>
 <style lang="scss" scoped>
 #pillar_pattern {
-    background-clip: content-box;
-    background-size: contain;
-
     &[style*='url("/'] {
+        background-size: contain;
+        background-clip: content-box;
         color: transparent;
     }
 }

components/dropdown/picker.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { getColorHexFromRal } from '@/components/ral'
-import { Vector3 } from 'three';
 
-const props = defineProps(['color', 'cb', 'name', 'type', 'goto_cam'])
+const props = defineProps(['color', 'cb', 'name', 'type', 'goto_cam', 'goto_target'])
 
 const goto_cam = use_goto_camera()
+const goto_target = use_goto_target()
 const open_calc = use_open_calc()
 
 const picker = ref()
@@ -16,6 +16,7 @@ const toggleOpen = (value: boolean = !is_open) => {
     else if (value == false && open_calc.value.includes(props.name)) open_calc.value = []
 
     if (value == true && props.goto_cam) goto_cam.value = props.goto_cam
+    if (value == true && props.goto_target) goto_target.value = props.goto_target
 }
 
 const onClick = (color: string) => {
@@ -26,7 +27,7 @@ const onClick = (color: string) => {
 
 const clickOutside = (e: Event) => {
     if (!picker.value.contains(e.target)) {
-        toggleOpen(false)
+        // toggleOpen(false)
     }
 }
 

components/model/camera.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useLoop } from '@tresjs/core';
 import { Vector3 } from 'three';
 
 const { controls, camera } = useTresContext();
 const goto_camera = use_goto_camera();
+const goto_target = use_goto_target();
 
 const COUNT = 30
 type smooth = {
@@ -18,10 +18,16 @@ const set_moveto = (obj: smooth, value: smooth["value"]) => {
     obj.count = COUNT
 }
 
-watch(goto_camera, () => {
-    smooth_target.value = goto_camera.value
+watch(goto_target, () => {
+    console.log(goto_target.value)
+    smooth_target.value = goto_target.value
     smooth_target.count = COUNT
 })
+watch(goto_camera, () => {
+    console.log(goto_camera.value)
+    smooth_move.value = goto_camera.value
+    smooth_move.count = COUNT
+})
 
 const koef = (1 / COUNT) * 3
 const { onBeforeLoop } = useRenderLoop()

composables/useCalc.ts

@@ -23,4 +23,5 @@ export const use_max_size = () => useState<number>('max_size', () => 20)
 export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)
 
 export const use_goto_camera = () => useState<Vector3 | undefined>('gotocam', () => undefined)
+export const use_goto_target = () => useState<Vector3 | undefined>('gotocontrols', () => undefined)
 export const use_open_calc = () => useState<string[]>('open_calc', () => [])

pages/calc.vue

@@ -1,8 +1,14 @@
 <template>
     <div class="siteblock siteblock_calc bg-white">
-        <CalcValues />
+        <div class="container">
+            <div class="col-span-9 h-full relative">
                 <Suspense>
                     <LazyCalcModels />
                 </Suspense>
             </div>
+            <div class="col-span-3">
+                <CalcValues />
+            </div>
+        </div>
+    </div>
 </template>