mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

colors

This commit is contained in:
Kseninia Mikhaylova 2024-06-13 10:36:36 +03:00
parent 9ff0b1e259
commit 12f7048806
4 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/calcValues.vue
View File

@ -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 lamelle_color = useState('lamelle_color', () => '1002')
const pillar_color = useState<ralTypes>('pillar_color', () => '1001')
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" />

4
components/colorPicker.vue
View File

@ -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">

28
components/model/fence.vue
View File

@ -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 lamelle_color = useState('lamelle_color')
const pillar_color = useState<ralTypes>('pillar_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>

19
components/ral.ts
View File

@ -1289,4 +1289,23 @@ export const ralClassicPallette = {
"hex": "#7E8182",
"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'
}
}