colors

components/calcValues.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { ralClassicPallette } from '@/components/ral'
+import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral'
+import type { ralTypes } from '@/components/ral'
 
 const lamelles_count = useState('lamelles_count', () => 8)
 const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
-const pillar_color = useState('pillar_color', () => '1001')
+const pillar_color = useState<ralTypes>('pillar_color', () => '1001')
-const lamelle_color = useState('lamelle_color', () => '1002')
+const lamelle_color = useState<ralTypes>('lamelle_color', () => '1002')
 const section_count = useState('section_count', () => 1)
-const extra_section = useState('section_count', () => 0)
+const extra_section = useState('extra_section', () => 0)
 
 const parametric = {
     length: {
@@ -91,10 +92,10 @@ const changeParametres = () => {
     }
 }
 
-const setLamelleColor = (color: string) => {
+const setLamelleColor = (color: ralTypes) => {
     lamelle_color.value = color
 }
-const setPillarColor = (color: string) => {
+const setPillarColor = (color: ralTypes) => {
     pillar_color.value = color
 }
 const increment = (field: keyof typeof form_state, value: number) => {
@@ -160,7 +161,7 @@ const toggleModal = () => {
                 <div class="form-row">
                     <div class="form-item">
                         <label for="lamelle_color">Цвет ламелей</label>
-                        <input id="lamelle_color" type="text" v-model="ralClassicPallette[lamelle_color].name" disabled />
+                        <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" disabled />
                         <template v-for="item in predefLamelleColors">
                             <ColorPicker :color="item" :cb="setLamelleColor" :open="false"
                                 :active="lamelle_color == item" />
@@ -169,7 +170,7 @@ const toggleModal = () => {
                     </div>
                     <div class="form-item">
                         <label for="pillar_color">Цвет столба</label>
-                        <input id="pillar_color" type="text" v-model="ralClassicPallette[pillar_color].name" disabled />
+                        <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" disabled />
                         <template v-for="item in predefPillarColors">
                             <ColorPicker :color="item" :cb="setPillarColor" :open="false"
                                 :active="pillar_color == item" />

components/colorPicker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ralClassicPallette } from '@/components/ral'
+import { ralClassicPallette, getColorHexFromRal } from '@/components/ral'
 
 const props = defineProps(['color', 'cb', 'open', 'active'])
 const open = props.open ?? true
@@ -31,7 +31,7 @@ onUnmounted(() => {
     <div>
         <div class="color_picker" ref="picker">
             <div class="color_picker-selected" @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"
-                :style="[{ backgroundColor: ralClassicPallette[props.color] ? ralClassicPallette[props.color].hex : '' }]"
+                :style="[{ backgroundColor: getColorHexFromRal(props.color) ?? '' }]"
                 :class="[{ 'color_picker-selected__active': active }]"></div>
             <div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker">
                 <template v-for="col in ralClassicPallette">

components/model/fence.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ralClassicPallette } from '@/components/ral'
+import { getColorHexFromRal } from '@/components/ral'
+import type { ralTypes } from '@/components/ral'
+
 const props = defineProps(['index', 'models'])
 
 const lamelles_count = useState<number>('lamelles_count')
 const fence_section = useState<number>('fence_section')
-const pillar_color = useState('pillar_color')
+const pillar_color = useState<ralTypes>('pillar_color')
-const lamelle_color = useState('lamelle_color')
+const lamelle_color = useState<ralTypes>('lamelle_color')
 
 const lSize = 0.115
 const bSize = 0.0235
@@ -41,43 +43,43 @@ watch(fence_section, () => {
     <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`">
         <TresGroup name="pillar_one" v-if="show_pillar_one" :position-x="pillar_one_pos" :position-z="0">
             <TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
-                <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
+                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
             </TresGroup>
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)">
-                    <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
+                    <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
                 </TresGroup>
             </template>
             <TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
-                <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
+                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
             </TresGroup>
         </TresGroup>
 
         <TresGroup name="pillar_two" v-if="show_pillar_two" :position-x="pillar_two_pos" :position-z="0">
             <TresGroup :position-y="(lSize * -0.5)" :scale="[-1, 0.5, 1]">
-                <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
+                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
             </TresGroup>
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]">
-                    <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
+                    <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
                 </TresGroup>
             </template>
             <TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
-                <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
+                <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
             </TresGroup>
         </TresGroup>
 
         <TresGroup name="lamelles">
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position="[pillar_size * 0.5, (lSize * i), 0.02]" :scale-x="fence_section * 10">
-                    <ModelItem :model="props.models.lamelle" :color="ralClassicPallette[lamelle_color].hex" />
+                    <ModelItem :model="props.models.lamelle" :color="getColorHexFromRal(lamelle_color)" />
                 </TresGroup>
             </template>
         </TresGroup>
         <TresGroup name="lamelles_fastening_one">
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)" :position-x="pillar_one_pos">
-                    <ModelItem :model="props.models.fastening" :color="ralClassicPallette[pillar_color].hex" />
+                    <ModelItem :model="props.models.fastening" :color="getColorHexFromRal(pillar_color)" />
                 </TresGroup>
             </template>
         </TresGroup>
@@ -85,13 +87,13 @@ watch(fence_section, () => {
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]" :position-x="pillar_two_pos">
                     <ModelItem :model="props.models.fastening" :remove-pos="true"
-                        :color="ralClassicPallette[pillar_color].hex" />
+                        :color="getColorHexFromRal(pillar_color)" />
                 </TresGroup>
             </template>
         </TresGroup>
         <TresGroup name="top_section" :scale-x="fence_section * 10"
             :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
-            <ModelItem :model="props.models.top" :color="ralClassicPallette[pillar_color].hex" />
+            <ModelItem :model="props.models.top" :color="getColorHexFromRal(pillar_color)" />
         </TresGroup>
     </TresGroup>
 </template>

components/ral.ts

@@ -1290,3 +1290,22 @@ export const ralClassicPallette = {
         "groupId": "ral_classic_9"
     }
 }
+export type ralTypes = keyof typeof ralClassicPallette
+export const getColorHexFromRal = (col: keyof typeof ralClassicPallette) => {
+    if (col in ralClassicPallette) {
+        return ralClassicPallette[col].hex
+    } else {
+        return null
+        throw new Error('no color')
+        return 'pink'
+    }
+}
+export const getColorNameFromRal = (col: keyof typeof ralClassicPallette) => {
+    if (col in ralClassicPallette) {
+        return ralClassicPallette[col].name
+    } else {
+        return null
+        throw new Error('no color')
+        return 'pink'
+    }
+}