ral colors
This commit is contained in:
parent
88136b6150
commit
9ff0b1e259
|
|
@ -1,8 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { ralClassicPallette } 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', () => '#828282')
|
||||
const lamelle_color = useState('lamelle_color', () => '#C2B078')
|
||||
const pillar_color = useState('pillar_color', () => '1001')
|
||||
const lamelle_color = useState('lamelle_color', () => '1002')
|
||||
const section_count = useState('section_count', () => 1)
|
||||
const extra_section = useState('section_count', () => 0)
|
||||
|
||||
|
|
@ -113,8 +115,8 @@ const autoSectionWidth = () => {
|
|||
auto_section_width.value = !auto_section_width.value
|
||||
}
|
||||
|
||||
const predefLamelleColors = ['#474B4E', '#705335', '#FDF4E3', '#2F4538']
|
||||
const predefPillarColors = ['#474B4E', '#6A5D4D', '#F4F4F4', '#2F4538']
|
||||
const predefLamelleColors = ['1000', '1001', '1002', '1003']
|
||||
const predefPillarColors = ['1011', '1012', '1013', '1014']
|
||||
|
||||
watch(form_state, changeParametres, { deep: true })
|
||||
watch(form_state, changeParametres, { deep: true })
|
||||
|
|
@ -158,7 +160,7 @@ const toggleModal = () => {
|
|||
<div class="form-row">
|
||||
<div class="form-item">
|
||||
<label for="lamelle_color">Цвет ламелей</label>
|
||||
<input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
|
||||
<input id="lamelle_color" type="text" v-model="ralClassicPallette[lamelle_color].name" disabled />
|
||||
<template v-for="item in predefLamelleColors">
|
||||
<ColorPicker :color="item" :cb="setLamelleColor" :open="false"
|
||||
:active="lamelle_color == item" />
|
||||
|
|
@ -167,7 +169,7 @@ const toggleModal = () => {
|
|||
</div>
|
||||
<div class="form-item">
|
||||
<label for="pillar_color">Цвет столба</label>
|
||||
<input id="pillar_color" type="text" v-model="pillar_color" disabled />
|
||||
<input id="pillar_color" type="text" v-model="ralClassicPallette[pillar_color].name" disabled />
|
||||
<template v-for="item in predefPillarColors">
|
||||
<ColorPicker :color="item" :cb="setPillarColor" :open="false"
|
||||
:active="pillar_color == item" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import converter from 'ral-hex-converter'
|
||||
import { ralClassicPallette } from '@/components/ral'
|
||||
|
||||
const props = defineProps(['color', 'cb', 'open', 'active'])
|
||||
const open = props.open ?? true
|
||||
|
|
@ -30,13 +30,13 @@ onUnmounted(() => {
|
|||
<template>
|
||||
<div>
|
||||
<div class="color_picker" ref="picker">
|
||||
<div class="color_picker-selected" :style="[{ backgroundColor: props.color }]"
|
||||
@click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"
|
||||
<div class="color_picker-selected" @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"
|
||||
:style="[{ backgroundColor: ralClassicPallette[props.color] ? ralClassicPallette[props.color].hex : '' }]"
|
||||
:class="[{ 'color_picker-selected__active': active }]"></div>
|
||||
<div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker">
|
||||
<template v-for="col in converter.hex">
|
||||
<div class="color size-5" :class="[{ 'outline outline-primary': props.color == col }]"
|
||||
:style="[{ backgroundColor: col }]" @click="onClick(col)">
|
||||
<template v-for="col in ralClassicPallette">
|
||||
<div class="color size-5" :class="[{ 'outline outline-primary': props.color == col.hex }]"
|
||||
:style="[{ backgroundColor: col.hex }]" @click="onClick(col.code)">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ralClassicPallette } from '@/components/ral'
|
||||
const props = defineProps(['index', 'models'])
|
||||
|
||||
const lamelles_count = useState<number>('lamelles_count')
|
||||
|
|
@ -40,56 +41,57 @@ 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="pillar_color" />
|
||||
<ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
|
||||
</TresGroup>
|
||||
<template v-for="(n, i) in lamelles_count">
|
||||
<TresGroup :position-y="(lSize * i)">
|
||||
<ModelItem :model="props.models.fence" :color="pillar_color" />
|
||||
<ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
|
||||
</TresGroup>
|
||||
</template>
|
||||
<TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
|
||||
<ModelItem :model="props.models.fence" :color="pillar_color" />
|
||||
<ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
|
||||
</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="pillar_color" />
|
||||
<ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
|
||||
</TresGroup>
|
||||
<template v-for="(n, i) in lamelles_count">
|
||||
<TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]">
|
||||
<ModelItem :model="props.models.fence" :color="pillar_color" />
|
||||
<ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
|
||||
</TresGroup>
|
||||
</template>
|
||||
<TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
|
||||
<ModelItem :model="props.models.fence" :color="pillar_color" />
|
||||
<ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
|
||||
</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="lamelle_color" />
|
||||
<ModelItem :model="props.models.lamelle" :color="ralClassicPallette[lamelle_color].hex" />
|
||||
</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="pillar_color" />
|
||||
<ModelItem :model="props.models.fastening" :color="ralClassicPallette[pillar_color].hex" />
|
||||
</TresGroup>
|
||||
</template>
|
||||
</TresGroup>
|
||||
<TresGroup name="lamelles_fastening_two">
|
||||
<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="pillar_color" />
|
||||
<ModelItem :model="props.models.fastening" :remove-pos="true"
|
||||
:color="ralClassicPallette[pillar_color].hex" />
|
||||
</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="pillar_color" />
|
||||
<ModelItem :model="props.models.top" :color="ralClassicPallette[pillar_color].hex" />
|
||||
</TresGroup>
|
||||
</TresGroup>
|
||||
</template>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue