From 2f47086a575177d958f2ae123b354a9eafd33c9f Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 25 Sep 2024 12:41:05 +0300
Subject: [PATCH] block position

---
 assets/main.scss               |  19 ++--
 components/calc/models.vue     |  40 ++++----
 components/calc/values.vue     | 181 +++++++++++++++++----------------
 components/dropdown/picker.vue |   7 +-
 components/model/camera.vue    |  12 ++-
 composables/useCalc.ts         |   1 +
 pages/calc.vue                 |  14 ++-
 7 files changed, 143 insertions(+), 131 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index e376409..ebd55f0 100644
--- a/assets/main.scss
+++ b/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;
         }
     }
 
@@ -366,13 +358,14 @@ button {
     &-changer {
         @apply flex gap-0;
     }
-    
+
     &-list {
         @apply flex gap-4 w-full;
     }
-    
+
     &-item {
         @apply w-10 h-10;
+
         &--empty {
             @apply block bg-slate-300;
         }
diff --git a/components/calc/models.vue b/components/calc/models.vue
index 0013532..6b5e28c 100644
--- a/components/calc/models.vue
+++ b/components/calc/models.vue
@@ -34,27 +34,25 @@ watch(fence_section, () => {
 })
 </script>
 <template>
-    <div class="container min-w-full siteblock_calc-canvas">
-        <ClientOnly fallback-tag="div">
-            <template #fallback>
-                <div class="fallback">
-                    Загрузка 3D модели
-                </div>
-            </template>
-            <Loader />
-            <Stats />
-            <TresCanvas>
-                <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
-                <OrbitControls v-bind="controlsState" make-default />
+    <ClientOnly fallback-tag="div">
+        <template #fallback>
+            <div class="fallback">
+                Загрузка 3D модели
+            </div>
+        </template>
+        <Loader />
+        <Stats />
+        <TresCanvas>
+            <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
+            <OrbitControls v-bind="controlsState" make-default />
+            <Suspense>
+                <ModelCamera />
+            </Suspense>
+            <TresGroup :position-y="-0.5">
                 <Suspense>
-                    <ModelCamera />
+                    <ModelParametric />
                 </Suspense>
-                <TresGroup :position-y="-0.5">
-                    <Suspense>
-                        <ModelParametric />
-                    </Suspense>
-                </TresGroup>
-            </TresCanvas>
-        </ClientOnly>
-    </div>
+            </TresGroup>
+        </TresCanvas>
+    </ClientOnly>
 </template>
\ No newline at end of file
diff --git a/components/calc/values.vue b/components/calc/values.vue
index d9a8f6b..c0c36c7 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 goto_target = use_goto_target()
 const open_calc = use_open_calc()
 
 if (!pillar_color.value) {
@@ -186,108 +187,114 @@ 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-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" />
-                </div>
-                <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" />
-                </div>
-
-                <div class="form-item">
-                    <label for="total_length">Общая длина забора, м</label>
-                    <input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600"
-                        v-model="form_state.total_length" :ref="form_refs.total_length" class="w-full" />
-                </div>
-                <div class="form-item text-sm xl:text-base">
-                    <p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
-                        Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
-                        размер, чтобы продолжить.
-                    </p>
-                </div>
-                <div class="form-item form-item_checkbox">
-                    <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
-                    <label for="auto_length">Автоматический подбор секции</label>
-                </div>
-                <p v-if="!form_state.auto_length" class="text-ioprim text-sm">
-                    Рекомендуем вам включить автоподбор длины секции
+    <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" />
+            </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" />
+            </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"
+                    v-model="form_state.total_length" :ref="form_refs.total_length" class="w-full" />
+            </div>
+            <div class="form-item text-sm xl:text-base">
+                <p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
+                    Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
+                    размер, чтобы продолжить.
                 </p>
-
-                <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)">
-                        <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{
-                            backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
-                            color: lamelle_text
-                        }" />
-                    </DropdownPicker>
-                </div>
-                <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)">
-                        <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{
-                            backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent',
-                            color: pillar_text
-                        }" />
-                    </DropdownPicker>
-                </div>
-                <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)">
-                        <input id="pillar_pattern" type="text" :value="pillar_pattern" :style="{
-                            backgroundImage: `url(${getFilename(pillar_pattern)})`
-                        }" />
-                    </DropdownPicker>
-                </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>
+            </div>
+            <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>
-        <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">
-                    <template v-for="item in calc_table">
-                        <div class="col-span-3 calc_table-maincell">
-                            {{ item.name }}
-                        </div>
-                        <div class="col-span-1 calc_table-maincell">{{ item.value }}</div>
-                    </template>
-                </div>
-                <button @click.prevent="toggleModal">Рассчитать</button>
+        <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)">
+                    <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{
+                        backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
+                        color: lamelle_text
+                    }" />
+                </DropdownPicker>
             </div>
-        </template>
+        </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(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, 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 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">
+                        <template v-for="item in calc_table">
+                            <div class="col-span-3 calc_table-maincell">
+                                {{ item.name }}
+                            </div>
+                            <div class="col-span-1 calc_table-maincell">{{ item.value }}</div>
+                        </template>
+                    </div>
+                    <button @click.prevent="toggleModal">Рассчитать</button>
+                </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;
     }
 }
diff --git a/components/dropdown/picker.vue b/components/dropdown/picker.vue
index 424d611..d43bac0 100644
--- a/components/dropdown/picker.vue
+++ b/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)
     }
 }
 
diff --git a/components/model/camera.vue b/components/model/camera.vue
index 8a5c7c9..66c97c5 100644
--- a/components/model/camera.vue
+++ b/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()
diff --git a/composables/useCalc.ts b/composables/useCalc.ts
index a2aaa39..a2576dd 100644
--- a/composables/useCalc.ts
+++ b/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', () => [])
\ No newline at end of file
diff --git a/pages/calc.vue b/pages/calc.vue
index d7fa318..ddb4eac 100644
--- a/pages/calc.vue
+++ b/pages/calc.vue
@@ -1,8 +1,14 @@
 <template>
     <div class="siteblock siteblock_calc bg-white">
-        <CalcValues />
-        <Suspense>
-            <LazyCalcModels />
-        </Suspense>
+        <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>
\ No newline at end of file