From 3f3aaea9f244c49b5ee2ce040b7f281f4e404338 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Fri, 6 Sep 2024 15:20:48 +0300 Subject: [PATCH] close btn --- front/src/components/Promo/index.vue | 6 ++--- front/src/components/Promo/load_models.vue | 26 ++++++++++------------ front/src/index.d.ts | 1 + front/src/stores/promo_sidebar.ts | 18 ++++++++++++--- 4 files changed, 31 insertions(+), 20 deletions(-) diff --git a/front/src/components/Promo/index.vue b/front/src/components/Promo/index.vue index b9d94d0..5226ea3 100644 --- a/front/src/components/Promo/index.vue +++ b/front/src/components/Promo/index.vue @@ -95,9 +95,9 @@ const nextClickableId = () => { -
+
- +
@@ -112,7 +112,7 @@ const nextClickableId = () => {
- +
diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue index 6d3d894..6204572 100644 --- a/front/src/components/Promo/load_models.vue +++ b/front/src/components/Promo/load_models.vue @@ -4,10 +4,10 @@ import { Box3, Color, Group, Mesh, MeshStandardMaterial, Vector2, Vector3, - Quaternion, Euler, SRGBColorSpace + Quaternion, SRGBColorSpace } from 'three'; -import { useTresContext, useSeek, useLoop, TresControl } from '@tresjs/core'; +import { useTresContext, useSeek, useLoop } from '@tresjs/core'; // @ts-ignore import { useGLTF, useGLTFExporter } from '@tresjs/cientos' @@ -23,7 +23,6 @@ import { useTimer } from '../../stores/timer'; import { useRawData } from '../../stores/raw_data'; import { useTimerHome } from '../../stores/timer_home'; import { useItem } from '../../stores/item'; -import { degToRad } from 'three/src/math/MathUtils.js'; const props = defineProps(['source', 'loaded_pan', 'push']) @@ -36,20 +35,15 @@ const targetDistance = reactive({ max: 10, min: 0 }) let sidebar_clickable = [] as PromoScene[] let sidebar_visible = [] as PromoScene[] -const COUNT = 50 +const COUNT = 30 type smooth = { value: Vector3 | Quaternion | undefined, count: number } const smooth_target = reactive({}) as smooth const smooth_move = reactive({}) as smooth -const smooth_rotate = reactive({}) as smooth const temp_smooth_target = reactive({}) as smooth const temp_smooth_move = reactive({}) as smooth -const temp_smooth_rotate = reactive({}) as smooth - -const point_1 = ref(new Vector3()) -const point_2 = ref(new Vector3()) const sidebar = usePromoSidebar(); const sidebar_scene = usePromoScene(); @@ -256,13 +250,13 @@ watch(() => props.source, () => { } }, { deep: true }) -watch(() => sidebar.is_open, () => { - if (sidebar.is_open == false) { +watch(() => sidebar.is_btn_open, () => { + if (sidebar.is_btn_open == false) { gotoCenterAndDistance(); } }) -watch(() => sidebar.is_open && sidebar.id_clickable, () => { - if (sidebar.is_open && sidebar.id_clickable) { +watch(() => sidebar.is_btn_open && sidebar.id_clickable, () => { + if (sidebar.is_btn_open && sidebar.id_clickable) { const clickable = useClickable() const target = clickable.list.find(el => el.id == sidebar.id_clickable) if (!target) return @@ -287,8 +281,12 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => { const { onBeforeRender } = useLoop() onBeforeRender(() => { + const cameraDistance = (camera.value?.position as Vector3).distanceTo((controls.value as any).target) + if (cameraDistance <= raw_dataStore.data.min_distance && sidebar.is_btn_open == false) { + // sidebar.is_btn_open = true + } clickable_refs.value.map(el => { - el.value[0].visible = (camera.value?.position as Vector3).distanceTo((controls.value as any).target) < raw_dataStore.data.min_distance ? false : true; + el.value[0].visible = cameraDistance < raw_dataStore.data.min_distance ? false : true; if (el.value[0] && el.value[0].children) { el.value[0].children[0].lookAt(camera.value?.position); el.value[0].children[0].rotateX(90 * (Math.PI / 180)); diff --git a/front/src/index.d.ts b/front/src/index.d.ts index 36279dc..c41c859 100644 --- a/front/src/index.d.ts +++ b/front/src/index.d.ts @@ -62,6 +62,7 @@ interface PromoSidebar extends PromoSidebarData { id_clickable?: number loading: boolean is_open: boolean + is_btn_open: boolean accordions: string[] } interface PromoScene { diff --git a/front/src/stores/promo_sidebar.ts b/front/src/stores/promo_sidebar.ts index 8c0e486..49e8bc3 100644 --- a/front/src/stores/promo_sidebar.ts +++ b/front/src/stores/promo_sidebar.ts @@ -10,6 +10,7 @@ export const usePromoSidebar = defineStore('promo_sidebar', { target: undefined, loading: true, is_open: false, + is_btn_open: false, accordions: [], } as PromoSidebar }, @@ -31,7 +32,10 @@ export const usePromoSidebar = defineStore('promo_sidebar', { this.setData(sidebar_data) } - this.is_open = true + if (!this.is_btn_open) { + this.is_btn_open = true + this.is_open = true + } this.loading = true }, setData(data: PromoSidebarData) { @@ -39,10 +43,18 @@ export const usePromoSidebar = defineStore('promo_sidebar', { }, close() { if (this.is_open) { - this.$reset() - this.is_open = false + // this.id_clickable = undefined; + // this.target = undefined; + // this.loading = true; + this.is_open = false; + this.accordions = [] } }, + closeBtn() { + this.$reset; + this.is_open = false; + this.is_btn_open = false; + }, toggleAccordion(name: string, newState = null) { if (name == 'obj' && this.accordions.includes('clickable')) this.toggleAccordion('clickable') if (name == 'clickable' && this.accordions.includes('obj')) this.toggleAccordion('obj')