assets/main.scss

@@ -181,7 +181,7 @@ a[href^="#"] {
         // @apply;
 
         .container {
-            @apply gap-4;
+            @apply gap-4 items-start;
         }
     }
 
@@ -354,6 +354,9 @@ button {
     &_open {
         @apply flex-wrap;
     }
+    &_disabled {
+        @apply pointer-events-none opacity-50;
+    }
 
     &-input {
         @apply flex items-center justify-between;

components/calc/values.vue

@@ -183,6 +183,45 @@ const calc_table = computed(() => {
 </script>
 <template>
     <div class="form">
+        <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_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.text="getColorNameFromRal(lamelle_color)"
+                        class="select-none" readonly :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_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
+                    }" />
+                </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" :disabled="remove_pillar"
+                    :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)})`
+                    }" />
+                </DropdownPicker>
+            </div>
+        </div>
         <div class="form-row">
             <div class="form-item w-full">
                 <label for="length">Длина ламельного блока, мм</label>
@@ -227,44 +266,6 @@ const calc_table = computed(() => {
                 <label for="remove_pillar">Без столбов</label>
             </div>
         </div>
-        <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_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
-                    }" />
-                </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_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
-                    }" />
-                </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_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)})`
-                    }" />
-                </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">

components/dropdown/picker.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getColorHexFromRal } from '@/components/ral'
 
-const props = defineProps(['color', 'cb', 'name', 'type', 'goto_cam', 'goto_target'])
+const props = defineProps(['color', 'cb', 'name', 'type', 'disabled', 'goto_cam', 'goto_target'])
 
 const goto_cam = use_goto_camera()
 const goto_target = use_goto_target()
@@ -34,7 +34,10 @@ watch(open_calc, () => {
 })
 </script>
 <template>
-    <div class="picker" :class="[{ 'picker_open': is_open }]" ref="picker">
+    <div class="picker" :class="[{
+        'picker_open': is_open,
+        'picker_disabled': props.disabled,
+    }]" ref="picker">
         <div class="picker-input">
             <template v-if="$slots.default">
                 <div @click="toggleOpen(!is_open)">

components/model/recolor.vue

@@ -8,6 +8,7 @@ const pillar_color = use_pillar_color()
 const pillar_pattern = use_pattern()
 const lamelle_color = use_lamelle_color()
 const lamelle_count = use_lamelles_count()
+const remove_pillar = use_remove_pillar()
 
 const { top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle } = props.models
 const { scene } = useTresContext()
@@ -53,7 +54,7 @@ recolorPillarPattern();
 
 watch(lamelle_color, recolorLamelles)
 watch(pillar_color, recolorPillar)
-watch([pillar_pattern, lamelle_count], recolorPillarPattern)
+watch([pillar_color, pillar_pattern, lamelle_count, remove_pillar], recolorPillarPattern)
 </script>
 <template>
 </template>