pillar color

assets/main.scss

@@ -121,7 +121,7 @@ label {
 }
 
 input {
-    @apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
+    @apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-neutral disabled:cursor-not-allowed;
 }
 
 button {
@@ -133,5 +133,8 @@ button {
 }
 
 .form {
-    @apply col-span-full flex gap-4
+    @apply col-span-full flex flex-col gap-4;
+    &-row {
+        @apply flex flex-row gap-4;
+    }
 }

components/calcValues.vue

@@ -21,19 +21,38 @@ const form_state = reactive({
     length: fence_section.value * 1000,
     height: lamelles_count.value * parametric.height.step
 })
+
 const changeParametres = () => {
     const lamelles = Math.floor(form_state.height / parametric.height.step)
     lamelles_count.value = lamelles
     fence_section.value = form_state.length * 0.001
+    for (const key in form_state) {
+        if (parametric.hasOwnProperty(key) && parametric[key].max) {
+            if (form_state[key] > parametric[key].max) {
+                form_state[key] = parametric[key].max
+            }
+        }
+        if (parametric.hasOwnProperty(key) && parametric[key].min) {
+            if (form_state[key] < parametric[key].min) {
+                form_state[key] = parametric[key].min
+            }
+        }
+    }
 }
+
 const setLamelleColor = (color: string) => {
     lamelle_color.value = color
 }
+const setPillarColor = (color: string) => {
+    pillar_color.value = color
+}
+
 watch(form_state, changeParametres, { deep: true })
 </script>
 <template>
     <div class="container">
         <form class="form">
+            <div class="form-row">
                 <div class="form-item">
                     <label for="length">Длина секции, мм</label>
                     <input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
@@ -42,6 +61,12 @@ watch(form_state, changeParametres, { deep: true })
                     <label for="height">Высота забора, мм</label>
                     <input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
                 </div>
+            </div>
+            <div class="form-row">
+                <div class="form-item">
+                    <label for="lamelle_color">Цвет ламелей</label>
+                    <input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
+                </div>
                 <div class="colors flex flex-wrap">
                     <template v-for="color in converter.hex">
                         <div class="color size-5" :class="[{ 'outline outline-primary': color == lamelle_color }]"
@@ -49,6 +74,20 @@ watch(form_state, changeParametres, { deep: true })
                         </div>
                     </template>
                 </div>
+            </div>
+            <div class="form-row">
+                <div class="form-item">
+                    <label for="pillar_color">Цвет столба</label>
+                    <input id="pillar_color" type="text" v-model="pillar_color" disabled />
+                </div>
+                <div class="colors flex flex-wrap">
+                    <template v-for="color in converter.hex">
+                        <div class="color size-5" :class="[{ 'outline outline-primary': color == pillar_color }]"
+                            :style="[{ backgroundColor: color }]" @click="setPillarColor(color)">
+                        </div>
+                    </template>
+                </div>
+            </div>
         </form>
     </div>
 </template>

components/model/parametric.vue

@@ -20,7 +20,7 @@ renderer.value.toneMapping = NeutralToneMapping
             <Environment files='/hdrmaps/skukuza_golf_4k.hdr' :background="true" />
         </Suspense>
         <Suspense>
-            <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3">
+            <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
                 <ModelItem model-url="/models_one/bottom.glb"
                     :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
                     :color="pillar_color" />