From 3f31a2c8a0de25f40a9a340f7cd98bf7074f8c0d Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 30 Sep 2024 09:53:47 +0300
Subject: [PATCH] topper

---
 assets/main.scss                              |   2 +-
 components/calc/values.vue                    |  35 ++++++++++--------
 components/dropdown/list.vue                  |  24 +++++++++---
 components/dropdown/picker.vue                |  10 ++---
 components/model/fence.vue                    |   1 +
 components/model/parametric.vue               |   8 +++-
 components/pattern.ts                         |  15 ++++++--
 components/topper.ts                          |  25 +++++++++++++
 composables/useCalc.ts                        |   8 +++-
 .../models_one/pillar/{ => topper}/decor1.glb | Bin
 .../models_one/pillar/{ => topper}/decor2.glb | Bin
 public/models_one/pillar/topper/decor3.glb    | Bin 0 -> 22676 bytes
 public/models_one/pillar/{ => topper}/top.glb | Bin
 public/topper/icon_stolb_verh_1.svg           |   3 ++
 public/topper/icon_stolb_verh_2.svg           |   3 ++
 public/topper/icon_stolb_verh_3.svg           |   3 ++
 utils/material.ts                             |   2 +-
 17 files changed, 102 insertions(+), 37 deletions(-)
 create mode 100644 components/topper.ts
 rename public/models_one/pillar/{ => topper}/decor1.glb (100%)
 rename public/models_one/pillar/{ => topper}/decor2.glb (100%)
 create mode 100644 public/models_one/pillar/topper/decor3.glb
 rename public/models_one/pillar/{ => topper}/top.glb (100%)
 create mode 100644 public/topper/icon_stolb_verh_1.svg
 create mode 100644 public/topper/icon_stolb_verh_2.svg
 create mode 100644 public/topper/icon_stolb_verh_3.svg

diff --git a/assets/main.scss b/assets/main.scss
index 4657e46..deb8dd6 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -386,7 +386,7 @@ button {
             @apply h-10 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center px-4;
 
             span {
-                @apply grow text-center;
+                @apply grow text-left;
             }
         }
 
diff --git a/components/calc/values.vue b/components/calc/values.vue
index be90612..c997d3b 100644
--- a/components/calc/values.vue
+++ b/components/calc/values.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral'
+import { Vector3 } from 'three';
+import { getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
 
 import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc';
-import { getFilename, type patternTypes } from '../pattern';
-import { Vector3 } from 'three';
+import { getName as getPattern, type patternIds } from '../pattern';
+import { getName as getTopper, type toppersIds } from '../topper';
 
 const lamelle_height = use_lamelle_height()
 const lamelles_count = use_lamelles_count()
@@ -12,6 +13,7 @@ const fence_section = use_fence_section()
 const remove_pillar = use_remove_pillar()
 const pillar_color = use_pillar_color()
 const pillar_pattern = use_pattern()
+const pillar_topper = use_topper()
 const lamelle_color = use_lamelle_color()
 const section_count = use_section_count()
 const extra_section = use_extra_section()
@@ -139,8 +141,11 @@ const setLamelleColor = (color: ralTypes) => {
 const setPillarColor = (color: ralTypes) => {
     pillar_color.value = color
 }
-const setPillarPattern = (pattern: patternTypes) => {
-    pillar_pattern.value = pattern
+const setPillarPattern = (id: patternIds) => {
+    pillar_pattern.value = id
+}
+const setPillarTopper = (id: toppersIds) => {
+    pillar_topper.value = id
 }
 watch(() => form_state, changeParametres, { deep: true })
 
@@ -199,11 +204,18 @@ const calc_table = computed(() => {
                 <div class="form-item form-item_color">
                     <label for="pillar_pattern">Узор столба</label>
                     <DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
-                        :pattern="pillar_pattern" :disabled="remove_pillar"
+                        :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" />
+                </div>
+            </div>
         </div>
         <div class="form-group">
             <div class="form-row">
@@ -275,13 +287,4 @@ const calc_table = computed(() => {
             </div>
         </div>
     </div>
-</template>
-<style lang="scss" scoped>
-#pillar_pattern {
-    &[style*='url("/'] {
-        background-size: contain;
-        background-clip: content-box;
-        color: transparent;
-    }
-}
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/components/dropdown/list.vue b/components/dropdown/list.vue
index bbbc43f..29c65f1 100644
--- a/components/dropdown/list.vue
+++ b/components/dropdown/list.vue
@@ -1,12 +1,24 @@
 <script setup lang="ts">
-import { getFilename, patterns } from '../pattern';
+import { getFilename as getPattern, patterns } from '../pattern';
+import { getFilename as getTopper, toppers } from '../topper';
 
-const props = defineProps([ 'cb']);
+const props = defineProps(['cb', 'patterns']);
+
+const p = {
+    list: undefined,
+    func: undefined
+}
+if (props.patterns == 'pattern') {
+    p.list = patterns;
+    p.func = getPattern
+} else if (props.patterns == 'topper') {
+    p.list = toppers
+    p.func = getTopper
+}
 </script>
 <template>
-    <template v-for="item in patterns">
-        <NuxtImg :src="getFilename(item.name)" class="picker-item" @click="props.cb(item.name)"
-            v-if="item.filename" />
-        <span class="picker-item picker-item--empty" @click="props.cb(item.name)" v-else />
+    <template v-for="item in p.list">
+        <NuxtImg :src="p.func(item.id)" class="picker-item" @click="props.cb(item.id)" v-if="item.filename" />
+        <span class="picker-item picker-item--empty" @click="props.cb(item.id)" v-else />
     </template>
 </template>
\ No newline at end of file
diff --git a/components/dropdown/picker.vue b/components/dropdown/picker.vue
index 670eacf..5702aa0 100644
--- a/components/dropdown/picker.vue
+++ b/components/dropdown/picker.vue
@@ -46,10 +46,10 @@ watch(open_calc, () => {
                     <span>
                         {{ getColorNameFromRal(props.color) }}
                     </span>
-                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'" />
+                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
                 </div>
             </template>
-            <template v-if="props.type == 'pattern'">
+            <template v-else>
                 <div @click="toggleOpen(!is_open)" :style="getFilename(props.pattern) ? [{
                     backgroundImage: `url(${getFilename(props.pattern)})`,
                     backgroundSize: 'contain',
@@ -58,7 +58,7 @@ watch(open_calc, () => {
                     <span>
                         {{ props.pattern }}
                     </span>
-                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'" />
+                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
                 </div>
             </template>
         </div>
@@ -67,8 +67,8 @@ watch(open_calc, () => {
             <template v-if="props.type == 'color'">
                 <DropdownColor :cb="onClick" />
             </template>
-            <template v-else-if="props.type == 'pattern'">
-                <DropdownList :cb="onClick" />
+            <template v-else>
+                <DropdownList :cb="onClick" :patterns="props.type" />
             </template>
         </div>
     </div>
diff --git a/components/model/fence.vue b/components/model/fence.vue
index b05d4e4..e83c744 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -13,6 +13,7 @@ const remove_pillar = use_remove_pillar()
 
 const pillar_color = use_pillar_color()
 const pillar_pattern = use_pattern()
+const pillar_topper = use_topper()
 const lamelle_color = use_lamelle_color()
 
 const lSize = lamelle_height.value
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 354784b..76254eb 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -3,20 +3,24 @@ import { Vector3 } from 'three';
 //@ts-ignore
 import { useGLTF, } from '@tresjs/cientos'
 import type { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
+import { getModel } from '../topper';
 
 const section_count = use_section_count()
 const extra_section = use_extra_section()
 const lamelles_count = use_lamelles_count()
 const lamelle_height = use_lamelle_height()
 const fence_section = use_fence_section()
+
+const pillar_topper = use_topper()
+
 const open_calc = use_open_calc()
 const goto_cam = use_goto_camera()
 const goto_target = use_goto_target()
 
-const { scene, controls, camera } = useTresContext()
+const { scene, controls } = useTresContext()
 const { seek, seekAll } = useSeek()
 
-const { scene: model_pillar_top } = await useGLTF('/models_one/pillar/decor1.glb')
+const { scene: model_pillar_top } = await useGLTF(getModel(pillar_topper.value))
 const { scene: model_pillar_center } = await useGLTF('/models_one/pillar/center.glb')
 const { scene: model_pillar_bottom } = await useGLTF('/models_one/pillar/bottom.glb')
 const { scene: model_pillar_inner } = await useGLTF('/models_one/pillar/inner.glb')
diff --git a/components/pattern.ts b/components/pattern.ts
index 43974c7..2c51bba 100644
--- a/components/pattern.ts
+++ b/components/pattern.ts
@@ -2,11 +2,18 @@ export const patterns = [
     { name: 'Без узора', },
     { name: 'Узор 1', filename: 'tile1.png' },
     { name: 'А это узор 2', filename: 'tile2.jpg' },
-]
-export const getFilename = (name: patternTypes) => {
-    const el = patterns.find(el => el.name == name)
+].map((el, i) => Object.assign(el, { id: i }))
+
+export const getName = (id: patternIds) => {
+    const el = patterns.find(el => el.id == id)
+    if (!el) return undefined
+    return el.name
+}
+
+export const getFilename = (id: patternIds) => {
+    const el = patterns.find(el => el.id == id)
     if (!el || !el.filename) return undefined
     return `/pattern/${el?.filename}`
 }
 
-export type patternTypes = typeof patterns[number]['name']
\ No newline at end of file
+export type patternIds = typeof patterns[number]['id']
\ No newline at end of file
diff --git a/components/topper.ts b/components/topper.ts
new file mode 100644
index 0000000..69fef66
--- /dev/null
+++ b/components/topper.ts
@@ -0,0 +1,25 @@
+export const toppers = [
+    { name: 'Ровный', filename: 'icon_stolb_verh_1.svg', model: 'top' },
+    { name: 'Вершина 1', filename: 'icon_stolb_verh_2.svg', model: 'decor1' },
+    { name: 'Вершина 2', filename: 'icon_stolb_verh_3.svg', model: 'decor2' },
+    { name: 'Вершина 3', filename: 'icon_stolb_verh_3.svg', model: 'decor3' },
+].map((el, i) => Object.assign(el, { id: i }))
+
+export const getFilename = (id: toppersIds) => {
+    const el = toppers.find(el => el.id == id)
+    if (!el || !el.filename) return undefined
+    return `/topper/${el?.filename}`
+}
+
+export const getName = (id: toppersIds) => {
+    const el = toppers.find(el => el.id == id)
+    if (!el || !el.filename) return undefined
+    return el.name
+}
+export const getModel = (id: toppersIds) => {
+    const el = toppers.find(el => el.id == id)
+    if (!el || !el.filename) return undefined
+    return `/models_one/pillar/topper/${el?.model}.glb`
+}
+
+export type toppersIds = typeof toppers[number]['id']
\ No newline at end of file
diff --git a/composables/useCalc.ts b/composables/useCalc.ts
index a045c5e..d5390b2 100644
--- a/composables/useCalc.ts
+++ b/composables/useCalc.ts
@@ -1,6 +1,7 @@
 import type { ralTypes } from '@/components/ral'
 import { Vector3 } from 'three'
-import { type patternTypes } from '~/components/pattern'
+import { type patternIds } from '~/components/pattern'
+import { type toppersIds } from '~/components/topper'
 
 export const predefPillarColors = ['3004', '7043', '6028', '5013', '8016', '1020', '3005', '4009']
 export const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '1012', '3007', '4007']
@@ -11,10 +12,13 @@ const min = 1370
 export const use_lamelle_height = () => useState<number>('lamelle_height', () => 0.115)
 export const use_lamelles_count = () => useState('lamelles_count', () => 14)
 export const use_fence_section = () => useState<number>('fence_section', () => min * 0.001)
+
 export const use_remove_pillar = () => useState<boolean>('remove_pillar', () => false)
 export const use_pillar_color = () => useState<ralTypes>('pillar_color')
 export const use_lamelle_color = () => useState<ralTypes>('lamelle_color')
-export const use_pattern = () => useState<patternTypes>('pattern', () => 'Без узора')
+export const use_pattern = () => useState<patternIds>('pattern', () => 0)
+export const use_topper = () => useState<toppersIds>('topper', () => 0)
+
 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)
diff --git a/public/models_one/pillar/decor1.glb b/public/models_one/pillar/topper/decor1.glb
similarity index 100%
rename from public/models_one/pillar/decor1.glb
rename to public/models_one/pillar/topper/decor1.glb
diff --git a/public/models_one/pillar/decor2.glb b/public/models_one/pillar/topper/decor2.glb
similarity index 100%
rename from public/models_one/pillar/decor2.glb
rename to public/models_one/pillar/topper/decor2.glb
diff --git a/public/models_one/pillar/topper/decor3.glb b/public/models_one/pillar/topper/decor3.glb
new file mode 100644
index 0000000000000000000000000000000000000000..065b960d39acc89a3f02dc4f239db61067a5368a
GIT binary patch
literal 22676
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
DGU2XS

literal 0
HcmV?d00001

diff --git a/public/models_one/pillar/top.glb b/public/models_one/pillar/topper/top.glb
similarity index 100%
rename from public/models_one/pillar/top.glb
rename to public/models_one/pillar/topper/top.glb
diff --git a/public/topper/icon_stolb_verh_1.svg b/public/topper/icon_stolb_verh_1.svg
new file mode 100644
index 0000000..38eb476
--- /dev/null
+++ b/public/topper/icon_stolb_verh_1.svg
@@ -0,0 +1,3 @@
+<svg width="147" height="129" viewBox="0 0 147 129" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.092 0.0210266L73.148 0L126.204 0.0210266L129.064 3.06403L128.838 14.843L146.236 22.519L146.296 37.488L140.375 47.003L132.706 47.026V128.971L73.148 128.983L13.59 128.971V47.026L5.92099 47.003L0 37.488L0.0599976 22.519L17.458 14.843L17.232 3.06403L20.092 0.0210266Z" fill="black"/>
+</svg>
diff --git a/public/topper/icon_stolb_verh_2.svg b/public/topper/icon_stolb_verh_2.svg
new file mode 100644
index 0000000..a07e8f9
--- /dev/null
+++ b/public/topper/icon_stolb_verh_2.svg
@@ -0,0 +1,3 @@
+<svg width="117" height="135" viewBox="0 0 117 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.541 134.891H60.328H64.115H67.902H103.205H116.867V38.407H103.205L67.81 3.65302L64.454 1.259L60.508 0H56.359L52.413 1.259L49.057 3.65302L13.662 38.407H0V134.891H13.662H48.965H52.752H56.541Z" fill="black"/>
+</svg>
diff --git a/public/topper/icon_stolb_verh_3.svg b/public/topper/icon_stolb_verh_3.svg
new file mode 100644
index 0000000..df48c07
--- /dev/null
+++ b/public/topper/icon_stolb_verh_3.svg
@@ -0,0 +1,3 @@
+<svg width="117" height="130" viewBox="0 0 117 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.868 129.438V0H0V129.438H116.868Z" fill="black"/>
+</svg>
diff --git a/utils/material.ts b/utils/material.ts
index 133bfa6..e8c072b 100644
--- a/utils/material.ts
+++ b/utils/material.ts
@@ -21,7 +21,7 @@ const noiseTexturePromise = useLoader(TextureLoader, '/texture/images.jpeg')
 const loaded_patterns: { [key: string]: any } = {}
 for (let index = 0; index < patterns.length; index++) {
     const element = patterns[index];
-    const filename = getFilename(element.name)
+    const filename = getFilename(element.id)
     if (filename) {
         loaded_patterns[filename] = useLoader(TextureLoader, filename)
     }