From 13b6be05e09af16bfa15bad454a370875945a53f Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Tue, 24 Sep 2024 16:16:38 +0300
Subject: [PATCH] pattern

---
 assets/main.scss             |  3 ++-
 components/dropdown/list.vue |  2 +-
 components/pattern.ts        | 10 ++++++----
 composables/useCalc.ts       |  2 +-
 utils/material.ts            | 37 +++++++++++++++++++-----------------
 5 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index 0319c38..8e73e53 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -349,7 +349,8 @@ button {
         &_color {
             @apply w-full;
 
-            .color_picker {
+            .color_picker,
+            .list_picker {
                 @apply ml-4;
             }
         }
diff --git a/components/dropdown/list.vue b/components/dropdown/list.vue
index c6ca050..5a06f48 100644
--- a/components/dropdown/list.vue
+++ b/components/dropdown/list.vue
@@ -34,7 +34,7 @@ onUnmounted(() => {
     <div class="list_picker" ref="picker">
         <div class="list_picker-selected" @click="open ? toggleOpen(!is_open) : onClick(props.color)"
             :class="[{ 'list_picker-selected__active': active }]">
-            pick
+            <NuxtImg :src="getFilename(patterns[1].name)" />
         </div>
         <div class="list_picker-changer" v-if="is_open">
             <div class="list_picker-list">
diff --git a/components/pattern.ts b/components/pattern.ts
index 6b6c070..e8b19ef 100644
--- a/components/pattern.ts
+++ b/components/pattern.ts
@@ -1,10 +1,12 @@
 export const patterns = [
-    { name: 'no pattern', },
-    { name: 'pattern1', filename: 'tile1.png' },
-    { name: 'pattern2', filename: 'tile1.png' },
+    { name: 'Без узора', },
+    { name: 'Узор 1', filename: 'tile1.png' },
+    { name: 'Еще раз узор 1', filename: 'tile1.png' },
 ]
 export const getFilename = (name: patternTypes) => {
-    return `/pattern/${patterns.find(el => el.name == name)?.filename}`
+    const el = patterns.find(el => el.name == name)
+    if (!el || !el.filename) return undefined
+    return `/pattern/${el?.filename}`
 }
 
 export type patternTypes = typeof patterns[number]['name']
\ No newline at end of file
diff --git a/composables/useCalc.ts b/composables/useCalc.ts
index 0af1e4c..22ef575 100644
--- a/composables/useCalc.ts
+++ b/composables/useCalc.ts
@@ -13,7 +13,7 @@ export const use_fence_section = () => useState<number>('fence_section', () => m
 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<patternTypes>('pattern', () => 'Без узора')
 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/utils/material.ts b/utils/material.ts
index cd9ce2d..9f68345 100644
--- a/utils/material.ts
+++ b/utils/material.ts
@@ -1,6 +1,6 @@
-import { Color, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, TextureLoader, Vector2 } from "three"
+import { Color, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, Texture, TextureLoader, Vector2 } from "three"
 import { useLoader, type TresLoader } from '@tresjs/core'
-import { getFilename, type patternTypes } from "~/components/pattern"
+import { getFilename, patterns, type patternTypes } from "~/components/pattern"
 
 const set_metaril_func = (scene: any, material: any) => {
     scene.children.forEach((el: any) => {
@@ -12,13 +12,15 @@ const set_metaril_func = (scene: any, material: any) => {
         set_metaril_func(el, material)
     })
 }
-// const texture = await useLoader(TextureLoader, '/fence_one/svg_tile1.svg');
-// const get_texture = async () => {
-//     const texture = await useLoader(TextureLoader, '/fence_one/tile1.png');
-//     return texture
-// }
-// const texture = await get_texture()
-// texture.wrapT = RepeatWrapping;
+
+const loaded_patterns: { [key: string]: any } = {}
+for (let index = 0; index < patterns.length; index++) {
+    const element = patterns[index];
+    const filename = getFilename(element.name)
+    if (filename) {
+        loaded_patterns[filename] = useLoader(TextureLoader, filename)
+    }
+}
 
 export const set_material = (scene: any, color: any, pattern: { pattern: patternTypes, count: number } | undefined = undefined) => {
     let c = color
@@ -35,14 +37,15 @@ export const set_material = (scene: any, color: any, pattern: { pattern: pattern
 
     if (pattern && pattern.pattern !== undefined) {
         const filename = getFilename(pattern.pattern)
-        const texture = useLoader(TextureLoader, filename)
-        texture.then(res => {
-            res.wrapT = RepeatWrapping;
-            res.repeat.set(1, pattern.count);
-            res.needsUpdate = true
-            // return res
-            material.alphaMap = res
-        })
+        if (filename) {
+            const texture = loaded_patterns[filename]
+            texture.then((res: Texture) => {
+                res.wrapT = RepeatWrapping;
+                res.repeat.set(1, pattern.count);
+                res.needsUpdate = true
+                material.alphaMap = res
+            })
+        }
     }
 
     set_metaril_func(scene, material)
-- 
2.40.1