ep-lib-ts 1.0.52 → 1.0.54

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>

package/src/components/interactions/Ep360Video.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+/*
 import { ref, onMounted } from "vue";
 // import * as AFRAME from "aframe";
-import "aframe";
+
 import { Object3D, Quaternion, Vector3 } from "three";
 import type { Pin, Scene } from "../../types/video360";
 
@@ -194,10 +195,11 @@ function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
             frameObject.setRotationFromQuaternion(quaternion);
         }
     });
-}
+}*/
 </script>
 
 <template>
+  <!--
     <div style="width: 1200px; height: 800px; position: relative; margin: auto">
         <button @click="toggleVideo()">
             {{ isPlaying ? "Pause" : "Play" }}
@@ -217,7 +219,7 @@ function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
                 ></video>
             </a-assets>
 
-            <!-- CAMERA -->
+           
             <a-entity camera look-controls id="rig" rotation-reader>
                 <a-cursor
                     id="cursor"
@@ -228,14 +230,14 @@ function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
                 ></a-cursor>
             </a-entity>
 
-            <!-- VIDEO SPHERE (CURRENT SCENE) -->
+            
             <a-videosphere
                 v-for="scene in props.scenes"
                 :key="scene.id"
                 :src="`#video${props.scenes[currentSceneIndex].id}`"
             ></a-videosphere>
 
-            <!-- PINS -->
+            
             <a-entity
                 v-for="pin in props.scenes[currentSceneIndex].pins"
                 :key="pin.id"
@@ -254,7 +256,7 @@ function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
                     @mouseenter="(event: Event) => handleMouseEnter(pin, event)"
                     @mouseleave="(event: Event) => handleMouseLeave(pin, event)"
                 >
-                    <!-- Cercle intérieur -->
+                    
                     <a-circle
                         position="0 0 0.01"
                         color="#FFF" 
@@ -265,7 +267,7 @@ function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
                 </a-circle>
             </a-entity>
 
-            <!-- HOVERED PINS INFO BOX -->
+            
             <a-entity
                 v-if="hoveredPin"
                 :position="convertToPosition(hoveredPin.x, hoveredPin.y)"
@@ -301,7 +303,7 @@ function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
                 ></a-text>
             </a-entity>
 
-            <!-- CLICKED PINS DIALOG BOX -->
+           
             <a-entity
                 v-if="clickedPin"
                 :position="convertToPosition(clickedPin.x, clickedPin.y)"
@@ -347,5 +349,8 @@ function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
                 ></a-text>
             </a-entity>
         </a-scene>
+    </div>-->
+    <div>
+      La lib aframe et three.js à revoir
     </div>
 </template>

package/src/components/interactions/EpSvgShow.vue

@@ -31,27 +31,38 @@ const animationType = computed(() => {
 
 const showScene = (scene: string) => {
   if (!svgContainer.value) return;
-  const currentScene = svgContainer.value.querySelector(`[data-scene="${scene}"]`)
-  if(!currentScene) return;
-  if(!props.multiple){
-    hideScenes()
+
+  const currentScene = svgContainer.value.querySelector(`[data-scene="${scene}"]`);
+  if (!currentScene) return;
+
+  const isVisible = !currentScene.classList.contains('hidden');
+
+  if (isVisible) {
+    // Toggle OFF (hide the scene)
+    currentScene.classList.add('hidden');
+    currentScene.classList.remove(animationType.value);
+
+    const sceneElements = svgContainer.value.getElementsByClassName(`scene-${scene}`);
+    Array.from(sceneElements).forEach((s) => {
+      s.classList.add('hidden');
+      s.classList.remove(animationType.value);
+    });
+  } else {
+    // Toggle ON (show scene)
+    if (!props.multiple) hideScenes();
+
+    currentScene.classList.remove('hidden');
+    currentScene.classList.add(animationType.value);
+
+    const sceneElements = svgContainer.value.getElementsByClassName(`scene-${scene}`);
+    Array.from(sceneElements).forEach((s) => {
+      s.classList.remove('hidden');
+      s.classList.add(animationType.value);
+    });
   }
-  currentScene.classList.remove('hidden', animationType.value)
-  currentScene.classList.add(animationType.value)
-//   const scenes = svgContainer.value.getElementsByClassName('scene');
-//   Array.from(scenes).forEach((s) => {
-//     if (s.classList.contains(`scene-${scene}`)) {
-//       s.classList.remove('hidden', animationType.value);
-//       s.classList.add(animationType.value);
-//     } else {
-//       if (!props.multiple && !s.classList.contains('hidden')) {
-//         s.classList.add('hidden');
-//         s.classList.remove(animationType.value);
-//       }
-//     }
-//   });
 };
 
+
 const hideScenes = () => {
 if (!svgContainer.value) return;
 const scenes = svgContainer.value.querySelectorAll('[data-scene]');

package/dist/BgAudio-B0h7VdWq.js

@@ -1,4 +0,0 @@
-import { a8 as f } from "./index-CxWafW_X.js";
-export {
-  f as default
-};

package/dist/Details-DZKLvF9v.js

@@ -1,4 +0,0 @@
-import { a9 as f } from "./index-CxWafW_X.js";
-export {
-  f as default
-};

package/dist/DisplayBox-DDLKnmKJ.js

@@ -1,4 +0,0 @@
-import { aa as f } from "./index-CxWafW_X.js";
-export {
-  f as default
-};