ep-lib-ts 1.0.51 → 1.0.53

package/dist/{prism-CnGAWjP8.js → prism-CV0akvnc.js}

@@ -1,4 +1,4 @@
-import { ac as V, ad as W } from "./index-BZh3ZH_r.js";
+import { ac as V, ad as W } from "./index-BeTpNY6O.js";
 function ee(S, P) {
   for (var i = 0; i < P.length; i++) {
     const g = P[i];

package/dist/style.css

@@ -1 +1 @@
-.content[data-v-3a321611]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}pre{white-space:break-spaces}.tree-wrapper[data-v-633f0b83]{overflow:auto;border:1px solid #ddd}.tree-container[data-v-633f0b83]{width:100%;overflow-x:auto}@keyframes fade-e6b482bf{0%{opacity:0}to{opacity:1}}@keyframes scale-e6b482bf{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideY-e6b482bf{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.fade[data-v-e6b482bf]{animation:fade-e6b482bf 1s}.scale[data-v-e6b482bf]{animation:scale-e6b482bf 1s}.slideY[data-v-e6b482bf]{animation:slideY-e6b482bf 1s}.shape{height:var(--57a4c52c);width:var(--32b5e5ba)}.v-enter-active[data-v-7e484601],.v-leave-active[data-v-7e484601]{transition:opacity .5s ease}.v-enter-from[data-v-7e484601],.v-leave-to[data-v-7e484601]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-1ad88e28]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}
+.content[data-v-3a321611]{max-height:0;overflow:hidden}.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;max-height:95%;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.custom_index{z-index:9999;position:absolute;right:12rem}pre{white-space:break-spaces}.tree-wrapper[data-v-633f0b83]{overflow:auto;border:1px solid #ddd}.tree-container[data-v-633f0b83]{width:100%;overflow-x:auto}@keyframes fade-d75b43b7{0%{opacity:0}to{opacity:1}}@keyframes scale-d75b43b7{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideY-d75b43b7{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.fade[data-v-d75b43b7]{animation:fade-d75b43b7 1s}.scale[data-v-d75b43b7]{animation:scale-d75b43b7 1s}.slideY[data-v-d75b43b7]{animation:slideY-d75b43b7 1s}.shape{height:var(--57a4c52c);width:var(--32b5e5ba)}.v-enter-active[data-v-7e484601],.v-leave-active[data-v-7e484601]{transition:opacity .5s ease}.v-enter-from[data-v-7e484601],.v-leave-to[data-v-7e484601]{opacity:0}.katex[data-v-a5d595cd]{font-size:1.6em}.content[data-v-1ad88e28]{max-height:0;overflow:hidden}.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.arrow-light-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:rgba(0,0,0,.2) transparent transparent transparent}.arrow-dark-top:before{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:black transparent transparent transparent}.arrow-light-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid #eee;border-left:7px solid transparent;border-bottom-color:#0003}.arrow-dark-bottom:before{content:"";position:absolute;display:inline-block;left:50%;bottom:100%;border-right:7px solid transparent;border-bottom:7px solid black;border-left:7px solid transparent;border-bottom-color:black transparent transparent transparent}.arrow-light-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid #eee;border-bottom:5px solid transparent;border-left-color:#0003}.arrow-dark-left:before{position:absolute;display:inline-block;left:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-left:5px solid black;border-bottom:5px solid transparent;border-left-color:black transparent transparent transparent}.arrow-light-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid #eee;border-bottom:5px solid transparent;border-right-color:#0003}.arrow-dark-right:before{position:absolute;display:inline-block;right:100%;top:50%;content:"";margin-right:0;border-top:5px solid transparent;border-right:5px solid black;border-bottom:5px solid transparent;border-right-color:black transparent transparent transparent}

package/dist/types/Component.d.ts

@@ -10,6 +10,7 @@ export interface ContentComponents {
 }
 export type NestedComponent = "EpSvg" | "EpImg" | "EpVideo" | "EpQuote";
 export interface NestedComponents {
+    uid?: string;
     type: NestedComponent;
     data: {
         [key: string]: any;

package/dist/types/Hierarchy.d.ts

@@ -7,6 +7,7 @@ export interface TreeNode {
     active?: boolean;
     text?: string;
     component?: NestedComponents;
+    cols?: boolean;
 }
 type TailwindShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
 type TailwindColor = 'main-color' | 'primary' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "1.0.51",
+  "version": "1.0.53",
   "files": [
     "dist",
     "src/components/"

package/src/components/basics/EpCard.vue

@@ -101,7 +101,7 @@ const hasContent = computed(() => {
 <template>
     <div :class="`${stylesCard} ${isLinkStyle}`">
         <img v-if="src" :src="src" :class="`w-full ${hasContent ? 'rounded-t-md':'rounded-md'}`" alt="header card">
-        <div v-if="!src && svg" class="w-full rounded-t-md">
+        <div v-if="!src && svg" class="w-full rounded-t-md dark:text-white">
             <EpSvg :content="svg"/>
         </div>
         
@@ -112,7 +112,7 @@ const hasContent = computed(() => {
                         <h4 :class="`text-xs dark:text-white ${subTitleText}`">{{ subtitle }}</h4>
                     </div>
                     <div v-if="icon">
-                        <EpIcon :icon-path="icon"></EpIcon>
+                        <EpIcon :icon-path="icon" extra-class="dark:text-white"></EpIcon>
                     </div>
                 </div> 
                 <slot name="card-header"></slot>

package/src/components/educationals/EpBranchingScenario.vue

@@ -13,19 +13,11 @@ import { mdiArrowLeft } from "@mdi/js";
 import TextMedia from "../tools/TextMedia.vue";
 
 
-// Defining the props
-
-interface Option {
-    name: string;
-    question: string;
-    media?:NestedComponents;
-    options?: Option[];
-}
-
 interface Props {
     title: string;
     media?:NestedComponents;
     initialInstruction?: string | null;
+    initialTwoCols?:boolean;
     generalFeedback?: string;
     bgColor?: string;
     decisionTree: TreeNode
@@ -69,6 +61,18 @@ const start = () => {
   currentOption.value = props.decisionTree
 }
 
+const styleIntro = computed(() => {
+  const noInstruction = !props.initialInstruction;
+  const noMedia = !props.media;
+
+  if (noInstruction && noMedia) {
+    return 'pt-44';
+  }
+
+  return '';
+});
+
+
 
 
 // Return function
@@ -116,7 +120,6 @@ const nextSlide = (option:TreeNode) => {
 //helper function
 function convertOptionToTreeNode(option: TreeNode, path: TreeNode[]): TreeNode {
   const isActive = path.includes(option);
-
   return {
     name: option.name,
     text: option.text,
@@ -127,38 +130,20 @@ function convertOptionToTreeNode(option: TreeNode, path: TreeNode[]): TreeNode {
 }
 
 
-//styles computed
-
-const gridStyle = computed(()=>{
-    if(currentOption.value && 
-    currentOption.value.children && 
-    currentOption.value.children?.length <= 2) {
-      return 'grid-cols-2'
-    }
-    return 'grid-cols-3'
-})
-
-const currentLengthOptions = computed(()=> {
-    if(currentOption.value && currentOption.value.children){
-        return currentOption.value.children.length
-    }
-    return 0
-})
-
 
 </script>
 
 <template>
   <div>
     <div 
-      class="mx-auto w-2/3 bg-gray-200 dark:bg-slate-800 rounded-md p-4 flex flex-col"
+      class=" bg-gray-200 dark:bg-slate-800 rounded-md p-4 flex flex-col"
       :style="{ minHeight: '500px', backgroundColor: bgColor }"
     >
       <!-- <div v-for="item in path" :key="item.name">
         <span class="text-xs">{{ item.name }}</span>
       </div> -->
       <!-- Header (fixed at top of card) -->
-      <div>
+      <div class="mb-2">
         <h1 class="font-bold text-3xl text-center">{{ title }}</h1>
         <div v-if="currentOption" class="mt-2">
           <EpBtn 
@@ -174,38 +159,40 @@ const currentLengthOptions = computed(()=> {
       </div>
 
       <!-- Content Area -->
-      <div class="flex-grow flex items-center justify-center">
+      <div>
         <!-- Introductory Part -->
         <div 
           v-if="isIntroductoryPart" 
-          class="flex flex-col items-center justify-center space-y-6"
+          class="w-full flex flex-col space-y-6"
         >
           <TextMedia 
-            v-if="initialInstruction && media"
-            :text="initialInstruction"
+            :text="initialInstruction ?? ''"
             :media="media"
+            :cols="initialTwoCols"
           />
-          <EpBtn type="primary" rounded @click="start">{{labelStart}}</EpBtn>
+          <div :class="`justify-center flex ${styleIntro}`">
+            <EpBtn type="primary" rounded @click="start">{{labelStart}}</EpBtn>
+          </div>
         </div>
 
         <!-- Slides -->
         <template v-else-if="currentOption && !isIntroductoryPart">
-          <div class="flex flex-col items-center justify-center w-full">
-            <div :class="`flex flex-col items-center justify-center ${transitionAnimation}`">
-              <TextMedia
+          <div class="w-full">
+            <div :class="`${transitionAnimation} my-12`">
+              <TextMedia 
                 :text="currentOption.text ?? ''"
                 :media="currentOption.component"
+                :cols="currentOption.cols"
               />
 
               <div 
-                :class="`w-full my-4 mx-4 grid gap-4 ${gridStyle}`" 
-                :style="{ placeItems: currentLengthOptions <= 4 ? 'center' : 'initial' }"
+                :class="`w-full my-4 mx-4 flex flex-wrap gap-2 justify-center items-center`" 
                 >
                 <template v-for="(option, index) in currentOption.children" :key="`option-${index}`">
                     <EpBtn 
                         rounded
                         type="primary" 
-                        class="w-full max-w-xs text-center"
+                        class="flex-1 min-w-[120px] sm:min-w-[160px] max-w-xs"
                         @click="nextSlide(option)"
                     >
                         {{ option.name }}
@@ -223,7 +210,7 @@ const currentLengthOptions = computed(()=> {
                 <EpHierarchy :nodes="userPath"/>
             </template> -->
              <h3 class="text-xl text-center font-semibold">{{ labelFinish }}</h3>
-            <div class="flex gap-6 mt-3">
+            <div :class="`flex gap-6 mt-3 ${!generalFeedback ? 'w-3/6 mx-auto':''}`">
              <div class="w-full">  
                 <h3 class="font-semibold mb-3">{{ labelYourPath }}</h3>
                  <div class="overflow-auto p-2" :style="{height: '200px'}">
@@ -247,12 +234,12 @@ const currentLengthOptions = computed(()=> {
                     :color-path="props.colorPath" 
                     :color-rect="props.colorRect"
                     />
-                    <div class="flex justify-end">
+                    <div class="flex justify-end mt-4">
                         <EpBtn @click="showPath = false" type="error" outlined rounded>{{labelClose}}</EpBtn>
                     </div>
                 </EpModal>
              </div>
-             <div v-if="generalFeedback" class="flex flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto">
+             <div v-if="generalFeedback" class="flex w-full flex-col col-span-1 items-center px-4 border-l-2 border-gray-700 overflow-auto">
                 <div v-html="useRenderText(generalFeedback)"></div>
               </div>
             </div>

package/src/components/educationals/EpDocument.vue

@@ -76,7 +76,7 @@ const { src, hideIcon } = toRefs(props);
         </div>
         <div class="flex items-center justify-center px-7" v-else-if="!hideIcon">
           <div class="text-base dark:text-white'">
-            <EpIcon :size="60" :icon-path="renderIcon"></EpIcon>
+            <EpIcon :size="60" :icon-path="renderIcon" extra-class="dark:text-white"></EpIcon>
           </div>
         </div>
         <div :class="`py-6 flex-1 ${hideIcon?'px-6':'pr-2'}`">

package/src/components/forms/EpSwitch.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { toRefs,computed } from "vue";
-import { defineEmits } from 'vue'
 import { type SwitchColorVariant, ColorVariants} from "../../types/Switch";
 
 interface Props {

package/src/components/interactions/Ep360Image.vue

@@ -1,214 +1,184 @@
 <script setup lang="ts">
 // DO NOT DELETE. IMPORTANT FOR VIDEO NAVIGATION : this.el.object3D.getWorldPosition(position);
-import { ref, onMounted } from "vue";
-//import * as AFRAME from "aframe";
-import "aframe";
-import { Object3D, Quaternion, Vector3 } from "three";
+/*import { ref, onMounted } from "vue";
 import type { Pin, Scene } from "../../types/image360";
 
 interface Props {
-    scenes:Scene[];
-    id?: string;
+  scenes: Scene[];
+  id?: string;
 }
 
 const props = defineProps<Props>();
 
-
-
 const currentSceneIndex = ref(0);
 const hoveredPin = ref<Pin | null>(null);
 const clickedPin = ref<Pin | null>(null);
 
-const AFRAME = window.AFRAME;
+let AFRAME: any;
+let THREE: any;
 
+onMounted(async () => {
+  // Lazy load aframe and three.js
+  const aframeModule = await import('aframe');
+  AFRAME = window.AFRAME ?? aframeModule;
+  THREE = await import('three');
 
-if (!AFRAME.components["rotation-reader"]) {
-    AFRAME.registerComponent("rotation-reader", {
-        schema: {},
-        tick: createTickFunction(),
-    });
-}
+  await checkAndDeleteComponent("rotation-reader", 2000);
+  await registerRotationReaderComponent(2000);
+});
 
 function handleMarkerClick(pin: Pin, event: Event): void {
-    if (!pin) return;
-
-    if (pin?.event === "onClick" || !pin.event) {
-        if (pin.type == "descriptive") {
-            clickedPin.value = pin;
-            const target = event.target as HTMLElement;
-            target.setAttribute("material", "opacity: 0; transparent: true");
-            console.log("Marker clicked:", pin);
-        } else if (pin.type == "action") {
-            const nextSceneIndex = props.scenes.findIndex(
-                (scene) => scene.id === pin.scene
-            );
-            if (nextSceneIndex !== -1) {
-                currentSceneIndex.value = nextSceneIndex;
-            }
-            console.log(
-                "Action Pin Clicked. Scene switched to:",
-                currentSceneIndex.value
-            );
-        }
+  if (!pin) return;
+
+  if (pin?.event === "onClick" || !pin.event) {
+    if (pin.type === "descriptive") {
+      clickedPin.value = pin;
+      const target = event.target as HTMLElement;
+      target.setAttribute("material", "opacity: 0; transparent: true");
+    } else if (pin.type === "action") {
+      const nextSceneIndex = props.scenes.findIndex(scene => scene.id === pin.scene);
+      if (nextSceneIndex !== -1) {
+        currentSceneIndex.value = nextSceneIndex;
+      }
     }
+  }
 }
 
 function handleMouseEnter(pin: Pin | null, event: Event): void {
-    if (!pin) return;
+  if (!pin) return;
 
-    if (pin?.event === "onHover" || !pin?.event) {
-        hoveredPin.value = pin;
-        const target = event.target as HTMLElement;
-        target.setAttribute("material", "opacity: 0; transparent: true");
-        console.log("Marker hovered:", pin);
-    }
+  if (pin?.event === "onHover" || !pin?.event) {
+    hoveredPin.value = pin;
+    const target = event.target as HTMLElement;
+    target.setAttribute("material", "opacity: 0; transparent: true");
+  }
 }
 
 function handleMouseLeave(pin: Pin | null, event: Event): void {
-    if (!pin) return;
-
-    const relatedTarget = (event as MouseEvent).relatedTarget as HTMLElement;
-
-    if (pin?.event === "onHover" || !pin?.event) {
-        const target = event.target as HTMLElement;
-        
-        console.log("children:", target.children);
-
-        if (clickedPin.value == pin) {
-            target.setAttribute("material", "opacity: 1; transparent: true");
-        }
-        if (
-            !relatedTarget?.classList.contains("interactive-area") &&
-            hoveredPin.value?.id === pin?.id
-        ) {
-            hoveredPin.value = null;
-            console.log("Hover cleared:", pin);
-        }
+  if (!pin) return;
+
+  const relatedTarget = (event as MouseEvent).relatedTarget as HTMLElement;
+
+  if (pin?.event === "onHover" || !pin?.event) {
+    const target = event.target as HTMLElement;
+    if (clickedPin.value === pin) {
+      target.setAttribute("material", "opacity: 1; transparent: true");
     }
+    if (
+      !relatedTarget?.classList.contains("interactive-area") &&
+      hoveredPin.value?.id === pin?.id
+    ) {
+      hoveredPin.value = null;
+    }
+  }
 }
 
 function convertToPosition(x: number, y: number): string {
-    return `${x / 10} ${y / 10} -5`;
+  return `${x / 10} ${y / 10} -5`;
 }
 
-onMounted(() => {
-    (async () => {
-        await checkAndDeleteComponent("rotation-reader", 2000);
-    })();
-    (async () => {
-        await registerRotationReaderComponent(2000);
-    })();
-});
-
-async function checkAndDeleteComponent(
-    componentName: string,
-    delayMs: number = 1000
-) {
-    if (AFRAME.components[componentName]) {
-        await delay(delayMs);
-        delete AFRAME.components[componentName];
-    }
+async function checkAndDeleteComponent(componentName: string, delayMs = 1000) {
+  if (AFRAME?.components[componentName]) {
+    await delay(delayMs);
+    delete AFRAME.components[componentName];
+  }
 }
 
 function delay(ms: number): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-async function registerRotationReaderComponent(delayMs: number = 1000) {
-    await delay(delayMs);
-    if (AFRAME.components["rotation-reader"]) {
-        console.warn(
-            "Existing rotation-reader component found. Re-registering..."
-        );
-        delete AFRAME.components["rotation-reader"];
-    }
-
-    AFRAME.registerComponent("rotation-reader", {
-        schema: {},
-        tick: createTickFunction(),
-    });
+async function registerRotationReaderComponent(delayMs = 1000) {
+  await delay(delayMs);
+  if (AFRAME.components["rotation-reader"]) {
+    console.warn("Existing rotation-reader component found. Re-registering...");
+    delete AFRAME.components["rotation-reader"];
+  }
+
+  AFRAME.registerComponent("rotation-reader", {
+    schema: {},
+    tick: createTickFunction(),
+  });
 }
 
 function createTickFunction() {
-    const quaternion = new Quaternion();
-    const cameraPosition = new Vector3();
-    const objectPosition = new Vector3();
-
-    const referenceDistance = 5;
-    const initialScale = 0.8;
-
-    return function (this: {
-        el: { object3D: InstanceType<typeof Object3D>; sceneEl: any };
-    }) {
-        updateCameraQuaternion(this.el.object3D, quaternion);
-
-        const sceneEl = this.el.sceneEl;
-        //console.log("scene active", sceneEl.getAttribute("id"));
-        updatePinsRotation(quaternion, sceneEl);
-
-        this.el.object3D.getWorldPosition(cameraPosition);
-
-        sceneEl.querySelectorAll(".pin-marker").forEach((pinElement: any) => {
-            const pinObject = (pinElement as any).object3D;
-            if (pinObject) {
-                pinObject.getWorldPosition(objectPosition);
-                const distance = cameraPosition.distanceTo(objectPosition);
-                const scale = (distance * initialScale) / referenceDistance;
-                pinObject.scale.set(scale, scale, scale);
-            }
-        });
-
-        sceneEl.querySelectorAll(".frame").forEach((frameElement: any) => {
-            const frameObject = (frameElement as any).object3D;
-            if (frameObject) {
-                frameObject.getWorldPosition(objectPosition);
-                const distance = cameraPosition.distanceTo(objectPosition);
-                const scale = (distance * initialScale) / referenceDistance;
-                frameObject.scale.set(scale, scale, scale);
-            }
-        });
-    };
-}
+  const quaternion = new THREE.Quaternion();
+  const cameraPosition = new THREE.Vector3();
+  const objectPosition = new THREE.Vector3();
 
-function getPinOpacity(pinId: number): number {
-    return (hoveredPin.value && hoveredPin.value.id === pinId) ||
-        (clickedPin.value && clickedPin.value.id === pinId)
-        ? 0
-        : 1;
+  const referenceDistance = 5;
+  const initialScale = 0.8;
+
+  return function (this: {
+    el: { object3D: InstanceType<typeof THREE.Object3D>; sceneEl: any };
+  }) {
+    updateCameraQuaternion(this.el.object3D, quaternion);
+
+    const sceneEl = this.el.sceneEl;
+    updatePinsRotation(quaternion, sceneEl);
+
+    this.el.object3D.getWorldPosition(cameraPosition);
+
+    sceneEl.querySelectorAll(".pin-marker").forEach((pinElement: any) => {
+      const pinObject = pinElement.object3D;
+      if (pinObject) {
+        pinObject.getWorldPosition(objectPosition);
+        const distance = cameraPosition.distanceTo(objectPosition);
+        const scale = (distance * initialScale) / referenceDistance;
+        pinObject.scale.set(scale, scale, scale);
+      }
+    });
+
+    sceneEl.querySelectorAll(".frame").forEach((frameElement: any) => {
+      const frameObject = frameElement.object3D;
+      if (frameObject) {
+        frameObject.getWorldPosition(objectPosition);
+        const distance = cameraPosition.distanceTo(objectPosition);
+        const scale = (distance * initialScale) / referenceDistance;
+        frameObject.scale.set(scale, scale, scale);
+      }
+    });
+  };
 }
 
 function updateCameraQuaternion(
-    object3D: InstanceType<typeof Object3D>,
-    quaternion: InstanceType<typeof Quaternion>
+  object3D: InstanceType<typeof THREE.Object3D>,
+  quaternion: InstanceType<typeof THREE.Quaternion>
 ) {
-    object3D.getWorldQuaternion(quaternion);
+  object3D.getWorldQuaternion(quaternion);
 }
 
-function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>, sceneEl: any) {
-    sceneEl.querySelectorAll(".pin-marker").forEach((pinElement: any) => {
-        const pinObject = (pinElement as any).object3D;
-        if (pinObject) {
-            pinObject.setRotationFromQuaternion(quaternion);
-        }
-    });
-    sceneEl.querySelectorAll(".frame").forEach((pinElement: any) => {
-        const pinObject = (pinElement as any).object3D;
-        if (pinObject) {
-            pinObject.setRotationFromQuaternion(quaternion);
-        }
-    });
+function updatePinsRotation(quaternion: InstanceType<typeof THREE.Quaternion>, sceneEl: any) {
+  sceneEl.querySelectorAll(".pin-marker").forEach((pinElement: any) => {
+    const pinObject = pinElement.object3D;
+    if (pinObject) {
+      pinObject.setRotationFromQuaternion(quaternion);
+    }
+  });
+  sceneEl.querySelectorAll(".frame").forEach((pinElement: any) => {
+    const pinObject = pinElement.object3D;
+    if (pinObject) {
+      pinObject.setRotationFromQuaternion(quaternion);
+    }
+  });
 }
 
 function removeFrame() {
-    clickedPin.value = null;
+  clickedPin.value = null;
 }
 
-function getPinColor(pin: Pin): string {
-    return pin.color || "indigo";
+function getPinOpacity(pinId: number): number {
+  return (hoveredPin.value?.id === pinId || clickedPin.value?.id === pinId) ? 0 : 1;
 }
+
+function getPinColor(pin: Pin): string {
+  return pin.color || "indigo";
+}*/
 </script>
 
+
 <template>
+  <!--
     <div
         style="
             width: 800px;
@@ -261,7 +231,7 @@ function getPinColor(pin: Pin): string {
                     @mouseenter="(event: Event) => handleMouseEnter(pin, event)"
                 >
 
-                    <!-- Cercle intérieur -->
+                 
                     <a-circle
                         position="0 0 0.01"
                         color="#FFF" 
@@ -361,5 +331,8 @@ function getPinColor(pin: Pin): string {
                 </a-text>
             </a-entity>
         </a-scene>
+    </div>-->
+    <div>
+      La lib aframe et three.js à revoir
     </div>
 </template>