From c9e0d489d18c42517bdeabcbaaa567588bdeb8ae Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 30 Sep 2024 11:47:56 +0300
Subject: [PATCH] color size

---
 assets/main.scss               | 25 ++++++++--
 components/calc/values.vue     | 84 +++++++++++++++-------------------
 components/dropdown/picker.vue | 17 ++++---
 components/model/env.vue       | 14 +++++-
 components/model/fence.vue     |  1 -
 composables/useCalc.ts         |  2 +-
 6 files changed, 78 insertions(+), 65 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index deb8dd6..8f101c0 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -182,6 +182,10 @@ a[href^="#"] {
 
         .container {
             @apply gap-4 items-stretch;
+
+            >* {
+                @apply relative;
+            }
         }
     }
 
@@ -306,6 +310,10 @@ button {
 
     &-row {
         @apply flex flex-row flex-wrap gap-2;
+
+        &_picker {
+            @apply grid grid-cols-2 justify-center items-center;
+        }
     }
 
     &-item {
@@ -316,7 +324,7 @@ button {
         }
 
         .icon {
-            @apply hover:text-primary cursor-pointer transition-colors text-2xl;
+            @apply hover:text-primary cursor-pointer transition-colors text-xl;
 
             &.disabled {
                 @apply text-neutral pointer-events-none cursor-not-allowed;
@@ -352,6 +360,7 @@ button {
                 input {
                     @apply flex-grow;
                 }
+
                 span {
                     @apply min-w-16;
                 }
@@ -383,7 +392,7 @@ button {
         @apply flex items-center justify-between;
 
         >div {
-            @apply h-10 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center px-4;
+            @apply h-10 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center px-2;
 
             span {
                 @apply grow text-left;
@@ -393,7 +402,7 @@ button {
     }
 
     &-button {
-        @apply min-w-10 shrink-0 h-full;
+        @apply min-w-6 shrink-0 h-full;
     }
 
     &-selected {
@@ -401,7 +410,11 @@ button {
     }
 
     &-changer {
-        @apply flex gap-3 mt-4 max-h-36 overflow-auto;
+        @apply gap-3 mt-4 max-h-36 overflow-auto order-10 hidden;
+
+        &_open {
+            @apply flex flex-wrap col-span-2;
+        }
     }
 
     &-list {
@@ -445,9 +458,11 @@ button {
         }
     }
 }
-.calc{
+
+.calc {
     @apply max-h-[800px] relative h-full;
 }
+
 .calc_table {
     @apply flex flex-col gap-2 self-end;
 
diff --git a/components/calc/values.vue b/components/calc/values.vue
index 2c0e39d..6fe5f6c 100644
--- a/components/calc/values.vue
+++ b/components/calc/values.vue
@@ -169,12 +169,12 @@ const calc_table = computed(() => {
         },
         {
             name:
-                `Ламели, RAL ${lamelle_color.value}, ${getColorNameFromRal(lamelle_color.value)?.toLowerCase()}`,
+                `Ламели`,
             value: section_count.value * lamelles_count.value,
             extra: 1 * lamelles_count.value
         },
         {
-            name: `Столбы, RAL ${pillar_color.value}, ${getColorNameFromRal(pillar_color.value)?.toLowerCase()}`,
+            name: `Столбы`,
             value: !form_state.remove_pillar ? section_count.value + ~~(!!form_state.extra_section) + 1 : `—`,
             extra: `—`
         },
@@ -183,40 +183,29 @@ const calc_table = computed(() => {
 </script>
 <template>
     <div class="form">
+
         <div class="form-group">
-            <div class="form-row">
-                <div class="form-item form-item_color">
-                    <label for="lamelle_color">Цвет ламелей</label>
-                    <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :color="lamelle_color"
-                        :goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.75, 0)"
-                        :goto_cam="new Vector3(0.75, 0.75, 0.75)" />
-                </div>
+            <div class="form-row form-row_picker">
+                <label for="lamelle_color">Цвет ламелей</label>
+                <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :color="lamelle_color"
+                    :goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.75, 0)"
+                    :goto_cam="new Vector3(0.75, 0.75, 0.75)" />
+                <label for="pillar_color">Цвет столба</label>
+                <DropdownPicker type="color" :cb="setPillarColor" name="pillar_color" :color="pillar_color"
+                    :goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
+                    :goto_cam="new Vector3(-1, -1, 1)" />
             </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" :color="pillar_color"
-                        :goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
-                        :goto_cam="new Vector3(-1, -1, 1)" />
-                </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"
-                        :pattern="getPattern(pillar_pattern)" :disabled="remove_pillar"
-                        :goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
-                        :goto_cam="new Vector3(1, 2, -1)" />
-                </div>
-            </div>
-            <div class="form-row">
-                <div class="form-item form-item_color">
-                    <label for="pillar_topper">Вершина</label>
-                    <DropdownPicker type="topper" :cb="setPillarTopper" name="pillar_topper"
-                        :pattern="getTopper(pillar_topper)" :disabled="remove_pillar"
-                        :goto_target="new Vector3(fence_section * -0.5, lamelles_count * lamelle_height, 0)"
-                        :goto_cam="new Vector3(-1, 2, 1)" />
-                </div>
+            <div class="form-row form-row_picker">
+                <label for="pillar_pattern">Узор столба</label>
+                <DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
+                    :pattern="getPattern(pillar_pattern)" :disabled="remove_pillar"
+                    :goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
+                    :goto_cam="new Vector3(1, 2, -1)" />
+                <label for="pillar_topper">Колпак столба</label>
+                <DropdownPicker type="topper" :cb="setPillarTopper" name="pillar_topper"
+                    :pattern="getTopper(pillar_topper)" :disabled="remove_pillar"
+                    :goto_target="new Vector3(fence_section * -0.5, lamelles_count * lamelle_height, 0)"
+                    :goto_cam="new Vector3(-1, 2, 1)" />
             </div>
         </div>
         <div class="form-group">
@@ -271,22 +260,21 @@ const calc_table = computed(() => {
                 </div>
             </div>
         </div>
+
         <div class="form-group">
-            <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>
+            <template v-if="(form_state.total_length * 1000) >= parametric.length.min">
+                <div class="grid calc_table w-full">
+                    <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>
-                </template>
-            </div>
+                    <button @click.prevent="toggleModal">Рассчитать</button>
+                </div>
+            </template>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/components/dropdown/picker.vue b/components/dropdown/picker.vue
index 5702aa0..4e0a8a6 100644
--- a/components/dropdown/picker.vue
+++ b/components/dropdown/picker.vue
@@ -62,15 +62,14 @@ watch(open_calc, () => {
                 </div>
             </template>
         </div>
-
-        <div class="picker-changer flex flex-wrap" v-if="is_open">
-            <template v-if="props.type == 'color'">
-                <DropdownColor :cb="onClick" />
-            </template>
-            <template v-else>
-                <DropdownList :cb="onClick" :patterns="props.type" />
-            </template>
-        </div>
+    </div>
+    <div class="picker-changer" :class="[{ 'picker-changer_open': is_open }]">
+        <template v-if="props.type == 'color'">
+            <DropdownColor :cb="onClick" />
+        </template>
+        <template v-else>
+            <DropdownList :cb="onClick" :patterns="props.type" />
+        </template>
     </div>
 </template>
 <style scoped>
diff --git a/components/model/env.vue b/components/model/env.vue
index 5ec2c78..521b3af 100644
--- a/components/model/env.vue
+++ b/components/model/env.vue
@@ -3,10 +3,13 @@ import {
     PCFSoftShadowMap,
     CineonToneMapping,
     PMREMGenerator,
+    Vector3,
 } from 'three';
 import { GainMapLoader, } from '@monogrid/gainmap-js'
-
+import { useLoop } from '@tresjs/core';
 const { scene, renderer, camera } = useTresContext()
+const {onBeforeRender} = useLoop()
+
 renderer.value.toneMapping = CineonToneMapping
 renderer.value.toneMappingExposure = 1
 
@@ -30,7 +33,16 @@ onMounted(async () => {
 
     scene.value.environment = newEnvMap
     scene.value.environmentIntensity = 1
+    scene.value.environmentRotation.z = 0.25
     result.renderTarget.texture.dispose();
 })
+onBeforeRender(()=>{
+    if(camera.value) {
+        const cameraDirection = new Vector3()
+        camera.value.getWorldDirection(cameraDirection);
+        const angle = Math.atan2(cameraDirection.z, cameraDirection.x);
+        scene.value.environmentRotation.z = angle + 0.25
+    }
+})
 </script>
 <template></template>
\ No newline at end of file
diff --git a/components/model/fence.vue b/components/model/fence.vue
index a270ab9..a929ec6 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -132,7 +132,6 @@ watch(lamelles_count, setBraceCount)
 
 const pillar = ref<Mesh[]>([])
 const setPillar = () => {
-    console.log(props.models.pillar_top)
     const top = props.models.pillar_top.children[0];
     top.position.setComponent(1, lSize * lamelles_count.value + lamelles_count.value * 0.0001 * scale_koef);
 
diff --git a/composables/useCalc.ts b/composables/useCalc.ts
index d5390b2..e86f6e3 100644
--- a/composables/useCalc.ts
+++ b/composables/useCalc.ts
@@ -23,7 +23,7 @@ export const use_section_count = () => useState('section_count', () => n)
 export const use_extra_section = () => useState('extra_section', () => 0)
 export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001)
 export const use_min_length = () => useState('min_length', () => 700)
-export const use_max_size = () => useState<number>('max_size', () => 3)
+export const use_max_size = () => useState<number>('max_size', () => 1)
 export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)
 
 export const use_goto_camera = () => useState<Vector3 | undefined>('gotocam', () => undefined)