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

dev #84

Merged
ksenia_mikhailova merged 141 commits from dev into main 2024-10-03 15:30:24 +03:00
Conversation 0 Commits 141 Files Changed 62 +78 -65
6 changed files with 78 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c9e0d489d1 - Show all commits

25
assets/main.scss
View File

@ -182,6 +182,10 @@ a[href^="#"] {
.container {
@apply gap-4 items-stretch;
>* {
@apply relative;
}
}
}
@ -306,6 +310,10 @@ button {
&-row {
@apply flex flex-row flex-wrap gap-2;
&_picker {
@apply grid grid-cols-2 justify-center items-center;
}
}
&-item {
@ -316,7 +324,7 @@ button {
}
.icon {
@apply hover:text-primary cursor-pointer transition-colors text-2xl;
@apply hover:text-primary cursor-pointer transition-colors text-xl;
&.disabled {
@apply text-neutral pointer-events-none cursor-not-allowed;
@ -352,6 +360,7 @@ button {
input {
@apply flex-grow;
}
span {
@apply min-w-16;
}
@ -383,7 +392,7 @@ button {
@apply flex items-center justify-between;
>div {
@apply h-10 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center px-4;
@apply h-10 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center px-2;
span {
@apply grow text-left;
@ -393,7 +402,7 @@ button {
}
&-button {
@apply min-w-10 shrink-0 h-full;
@apply min-w-6 shrink-0 h-full;
}
&-selected {
@ -401,7 +410,11 @@ button {
}
&-changer {
@apply flex gap-3 mt-4 max-h-36 overflow-auto;
@apply gap-3 mt-4 max-h-36 overflow-auto order-10 hidden;
&_open {
@apply flex flex-wrap col-span-2;
}
}
&-list {
@ -445,9 +458,11 @@ button {
}
}
}
.calc{
.calc {
@apply max-h-[800px] relative h-full;
}
.calc_table {
@apply flex flex-col gap-2 self-end;

84
components/calc/values.vue
View File

@ -169,12 +169,12 @@ const calc_table = computed(() => {
},
{
name:
`Ламели, RAL ${lamelle_color.value}, ${getColorNameFromRal(lamelle_color.value)?.toLowerCase()}`,
`Ламели`,
value: section_count.value * lamelles_count.value,
extra: 1 * lamelles_count.value
},
{
name: `Столбы, RAL ${pillar_color.value}, ${getColorNameFromRal(pillar_color.value)?.toLowerCase()}`,
name: `Столбы`,
value: !form_state.remove_pillar ? section_count.value + ~~(!!form_state.extra_section) + 1 : `—`,
extra: `—`
},
@ -183,40 +183,29 @@ const calc_table = computed(() => {
</script>
<template>
<div class="form">
<div class="form-group">
<div class="form-row">
<div class="form-item form-item_color">
<label for="lamelle_color">Цвет ламелей</label>
<DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :color="lamelle_color"
:goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.75, 0)"
:goto_cam="new Vector3(0.75, 0.75, 0.75)" />
</div>
<div class="form-row form-row_picker">
<label for="lamelle_color">Цвет ламелей</label>
<DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :color="lamelle_color"
:goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.75, 0)"
:goto_cam="new Vector3(0.75, 0.75, 0.75)" />
<label for="pillar_color">Цвет столба</label>
<DropdownPicker type="color" :cb="setPillarColor" name="pillar_color" :color="pillar_color"
:goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(-1, -1, 1)" />
</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" :color="pillar_color"
:goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(-1, -1, 1)" />
</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"
:pattern="getPattern(pillar_pattern)" :disabled="remove_pillar"
:goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(1, 2, -1)" />
</div>
</div>
<div class="form-row">
<div class="form-item form-item_color">
<label for="pillar_topper">Вершина</label>
<DropdownPicker type="topper" :cb="setPillarTopper" name="pillar_topper"
:pattern="getTopper(pillar_topper)" :disabled="remove_pillar"
:goto_target="new Vector3(fence_section * -0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(-1, 2, 1)" />
</div>
<div class="form-row form-row_picker">
<label for="pillar_pattern">Узор столба</label>
<DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
:pattern="getPattern(pillar_pattern)" :disabled="remove_pillar"
:goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(1, 2, -1)" />
<label for="pillar_topper">Колпак столба</label>
<DropdownPicker type="topper" :cb="setPillarTopper" name="pillar_topper"
:pattern="getTopper(pillar_topper)" :disabled="remove_pillar"
:goto_target="new Vector3(fence_section * -0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(-1, 2, 1)" />
</div>
</div>
<div class="form-group">
@ -271,22 +260,21 @@ const calc_table = computed(() => {
</div>
</div>
</div>
<div class="form-group">
<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">
<div class="grid grid-cols-4 relative">
<template v-for="item in calc_table">
<div class="col-span-3 calc_table-maincell">
{{ item.name }}
</div>
<div class="col-span-1 calc_table-maincell">{{ item.value }}</div>
</template>
</div>
<button @click.prevent="toggleModal">Рассчитать</button>
<template v-if="(form_state.total_length * 1000) >= parametric.length.min">
<div class="grid calc_table w-full">
<div class="grid grid-cols-4 relative">
<template v-for="item in calc_table">
<div class="col-span-3 calc_table-maincell">
{{ item.name }}
</div>
<div class="col-span-1 calc_table-maincell">{{ item.value }}</div>
</template>
</div>
</template>
</div>
<button @click.prevent="toggleModal">Рассчитать</button>
</div>
</template>
</div>
</div>
</template>

17
components/dropdown/picker.vue
View File

@ -62,15 +62,14 @@ watch(open_calc, () => {
</div>
</template>
</div>
<div class="picker-changer flex flex-wrap" v-if="is_open">
<template v-if="props.type == 'color'">
<DropdownColor :cb="onClick" />
</template>
<template v-else>
<DropdownList :cb="onClick" :patterns="props.type" />
</template>
</div>
</div>
<div class="picker-changer" :class="[{ 'picker-changer_open': is_open }]">
<template v-if="props.type == 'color'">
<DropdownColor :cb="onClick" />
</template>
<template v-else>
<DropdownList :cb="onClick" :patterns="props.type" />
</template>
</div>
</template>
<style scoped>

14
components/model/env.vue
View File

@ -3,10 +3,13 @@ import {
PCFSoftShadowMap,
CineonToneMapping,
PMREMGenerator,
Vector3,
} from 'three';
import { GainMapLoader, } from '@monogrid/gainmap-js'
import { useLoop } from '@tresjs/core';
const { scene, renderer, camera } = useTresContext()
const {onBeforeRender} = useLoop()
renderer.value.toneMapping = CineonToneMapping
renderer.value.toneMappingExposure = 1
@ -30,7 +33,16 @@ onMounted(async () => {
scene.value.environment = newEnvMap
scene.value.environmentIntensity = 1
scene.value.environmentRotation.z = 0.25
result.renderTarget.texture.dispose();
})
onBeforeRender(()=>{
if(camera.value) {
const cameraDirection = new Vector3()
camera.value.getWorldDirection(cameraDirection);
const angle = Math.atan2(cameraDirection.z, cameraDirection.x);
scene.value.environmentRotation.z = angle + 0.25
}
})
</script>
<template></template>

1
components/model/fence.vue
View File

@ -132,7 +132,6 @@ watch(lamelles_count, setBraceCount)
const pillar = ref<Mesh[]>([])
const setPillar = () => {
console.log(props.models.pillar_top)
const top = props.models.pillar_top.children[0];
top.position.setComponent(1, lSize * lamelles_count.value + lamelles_count.value * 0.0001 * scale_koef);

2
composables/useCalc.ts
View File

@ -23,7 +23,7 @@ export const use_section_count = () => useState('section_count', () => n)
export const use_extra_section = () => useState('extra_section', () => 0)
export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001)
export const use_min_length = () => useState('min_length', () => 700)
export const use_max_size = () => useState<number>('max_size', () => 3)
export const use_max_size = () => useState<number>('max_size', () => 1)
export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)
export const use_goto_camera = () => useState<Vector3 | undefined>('gotocam', () => undefined)