ep-lib-ts 1.0.55 → 1.0.57

package/src/components/interactions/Ep360Image.vue

@@ -1,338 +0,0 @@
-<script setup lang="ts">
-// DO NOT DELETE. IMPORTANT FOR VIDEO NAVIGATION : this.el.object3D.getWorldPosition(position);
-/*import { ref, onMounted } from "vue";
-import type { Pin, Scene } from "../../types/image360";
-
-interface Props {
-  scenes: Scene[];
-  id?: string;
-}
-
-const props = defineProps<Props>();
-
-const currentSceneIndex = ref(0);
-const hoveredPin = ref<Pin | null>(null);
-const clickedPin = ref<Pin | null>(null);
-
-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');
-
-  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");
-    } 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?.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;
-    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`;
-}
-
-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));
-}
-
-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 THREE.Quaternion();
-  const cameraPosition = new THREE.Vector3();
-  const objectPosition = new THREE.Vector3();
-
-  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 THREE.Object3D>,
-  quaternion: InstanceType<typeof THREE.Quaternion>
-) {
-  object3D.getWorldQuaternion(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;
-}
-
-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;
-            height: 600px;
-            overflow: hidden;
-            position: relative;
-            margin: auto;
-        "
-    >
-        <a-scene :id="id" embedded>
-            <a-assets>
-                <img
-                    v-for="scene in props.scenes"
-                    :key="scene.id"
-                    :id="`image${scene.id}`"
-                    :src="scene.skyImage"
-                    crossorigin="anonymous"
-                />
-            </a-assets>
-            <a-entity camera look-controls id="rig" rotation-reader>
-                <a-cursor
-                    id="cursor"
-                    cursor="rayOrigin: mouse"
-                    raycaster="objects: none"
-                    geometry="primitive: ring; radiusInner: 0; radiusOuter: 0"
-                    material="opacity: 0; transparent: true"
-                ></a-cursor>
-            </a-entity>
-
-            <a-sky
-                :src="`#image${props.scenes[currentSceneIndex].id}`"
-                radius="100"
-            ></a-sky>
-
-            <a-entity
-                v-for="pin in props.scenes[currentSceneIndex].pins"
-                :key="pin.id"
-                :position="convertToPosition(pin.x, pin.y)"
-                cursor="rayOrigin: mouse"
-            >
-                <a-circle
-                    class="pin-marker"
-                    :color="getPinColor(pin)"
-                    radius="0.15"
-                    shader="flat"
-                    :material="`opacity: ${getPinOpacity(
-                        pin.id
-                    )}; transparent: true;`"
-                    @click="(event: Event) => handleMarkerClick(pin, event)"
-                    @mouseenter="(event: Event) => handleMouseEnter(pin, event)"
-                >
-
-                 
-                    <a-circle
-                        position="0 0 0.01"
-                        color="#FFF" 
-                        radius="0.05" 
-                        material="opacity: 0;"
-                    ></a-circle>
-
-                </a-circle>
-            </a-entity>
-
-            <a-entity
-                v-if="hoveredPin"
-                :position="convertToPosition(hoveredPin.x, hoveredPin.y)"
-                class="frame interactive-area"
-                cursor="rayOrigin: mouse"
-                @mouseleave="(event: Event) => handleMouseLeave(hoveredPin, event)"
-            >
-                <a-plane
-                    color="white"
-                    :opacity="1"
-                    width="4"
-                    height="1.5"
-                    material="shader: standard; side: double;"
-                    position="0 0 0"
-                    geometry="primitive: plane; height: 1.5; width: 4;"
-                >
-                </a-plane>
-
-                <a-text
-                    :value="hoveredPin.title"
-                    color="#2c3e50"
-                    font="dejavu"
-                    align="center"
-                    width="3.8"
-                    position="0 0.3 0.01"
-                >
-                </a-text>
-
-                <a-text
-                    :value="hoveredPin.description"
-                    color="#34495e"
-                    font="dejavu"
-                    align="center"
-                    width="3.5"
-                    position="0 -0.3 0.01"
-                >
-                </a-text>
-            </a-entity>
-
-            <a-entity
-                v-if="clickedPin"
-                :position="convertToPosition(clickedPin.x, clickedPin.y)"
-                class="frame interactive-area"
-                cursor="rayOrigin: mouse"
-            >
-                <a-plane
-                    color="white"
-                    :opacity="1"
-                    width="4"
-                    height="1.5"
-                    material="shader: standard; side: double;"
-                    position="0 0 0"
-                    geometry="primitive: plane; height: 1.5; width: 4;"
-                >
-                </a-plane>
-
-                <a-plane
-                    class="close-frame"
-                    color="red"
-                    width="0.4"
-                    height="0.4"
-                    position="1.8 0.55 0.01"
-                    material="shader: flat; side: double; transparent: true;"
-                    geometry="primitive: plane; height: 0.4; width: 0.4;"
-                    @click="removeFrame"
-                >
-                </a-plane>
-
-                <a-text
-                    :value="clickedPin.title"
-                    color="#2c3e50"
-                    font="dejavu"
-                    align="center"
-                    width="3.8"
-                    position="0 0.3 0.01"
-                >
-                </a-text>
-
-                <a-text
-                    :value="clickedPin.description"
-                    color="#34495e"
-                    font="dejavu"
-                    align="center"
-                    width="3.5"
-                    position="0 -0.3 0.01"
-                >
-                </a-text>
-            </a-entity>
-        </a-scene>
-    </div>-->
-    <div>
-      La lib aframe et three.js à revoir
-    </div>
-</template>

package/src/components/interactions/Ep360Video.vue

@@ -1,356 +0,0 @@
-<script setup lang="ts">
-/*
-import { ref, onMounted } from "vue";
-// import * as AFRAME from "aframe";
-
-import { Object3D, Quaternion, Vector3 } from "three";
-import type { Pin, Scene } from "../../types/video360";
-
-interface Props {
-    scenes:Scene[];
-}
-
-const props = defineProps<Props>();
-
-const currentSceneIndex = ref(0);
-const hoveredPin = ref<Pin | null>(null);
-const clickedPin = ref<Pin | null>(null);
-const isPlaying = ref(false);
-
-const AFRAME = window.AFRAME;
-
-if (!AFRAME.components["rotation-reader"]) {
-    AFRAME.registerComponent("rotation-reader", {
-        schema: {},
-        tick: createTickFunction(),
-    });
-}
-
-function handleMarkerClick(pin: Pin, event: Event): void {
-    if (!pin) return;
-
-    if (pin?.event === "onClick") {
-        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
-            );
-        }
-    }
-}
-
-function handleMouseEnter(pin: Pin | null, event: Event): void {
-    if (!pin) return;
-    if (pin.event === "onHover" || !pin.event) {
-        hoveredPin.value = pin;
-        console.log("Marker hovered:", pin);
-    }
-}
-
-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) {
-        if (
-            !relatedTarget?.classList.contains("interactive-area") &&
-            hoveredPin.value?.id === pin.id
-        ) {
-            hoveredPin.value = null;
-            console.log("Hover cleared:", pin);
-        }
-    }
-}
-
-function convertToPosition(x: number, y: number): string {
-    return `${x / 10} ${y / 10} -5`;
-}
-
-function removeFrame() {
-    clickedPin.value = null;
-}
-
-function getPinColor(pin: Pin): string {
-    return pin.color || "indigo";
-}
-
-function getPinOpacity(pinId: number): number {
-    return (hoveredPin.value && hoveredPin.value.id === pinId) ||
-        (clickedPin.value && clickedPin.value.id === pinId)
-        ? 0
-        : 1;
-}
-
-function toggleVideo() {
-    isPlaying.value = !isPlaying.value;
-    const videoElements = document.querySelectorAll<HTMLVideoElement>(".video");
-    videoElements.forEach((video) => {
-        isPlaying.value ? video.play() : video.pause();
-    });
-}
-
-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];
-    }
-}
-
-function delay(ms: number): Promise<void> {
-    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 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);
-        updatePinsRotation(quaternion);
-
-        this.el.object3D.getWorldPosition(cameraPosition);
-
-        document.querySelectorAll(".pin-marker").forEach((pinElement) => {
-            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);
-            }
-        });
-
-        document.querySelectorAll(".frame").forEach((frameElement) => {
-            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);
-            }
-        });
-    };
-}
-
-function updateCameraQuaternion(
-    object3D: InstanceType<typeof Object3D>,
-    quaternion: InstanceType<typeof Quaternion>
-) {
-    object3D.getWorldQuaternion(quaternion);
-}
-
-function updatePinsRotation(quaternion: InstanceType<typeof Quaternion>) {
-    
-    document.querySelectorAll(".pin-marker").forEach((pinElement) => {
-        const pinObject = (pinElement as any).object3D;
-        if (pinObject) {
-            pinObject.setRotationFromQuaternion(quaternion);
-        }
-    });
-
-    document.querySelectorAll(".frame").forEach((frameElement) => {
-        const frameObject = (frameElement as any).object3D;
-        if (frameObject) {
-            frameObject.setRotationFromQuaternion(quaternion);
-        }
-    });
-}*/
-</script>
-
-<template>
-  <!--
-    <div style="width: 1200px; height: 800px; position: relative; margin: auto">
-        <button @click="toggleVideo()">
-            {{ isPlaying ? "Pause" : "Play" }}
-        </button>
-
-        <a-scene embedded>
-            <a-assets>
-                <video
-                    v-for="scene in props.scenes"
-                    :id="`video${scene.id}`"
-                    :src="scene.skyVideo"
-                    muted
-                    class="video"
-                    playsinline
-                    loop
-                    crossorigin="anonymous"
-                ></video>
-            </a-assets>
-
-           
-            <a-entity camera look-controls id="rig" rotation-reader>
-                <a-cursor
-                    id="cursor"
-                    cursor="rayOrigin: mouse"
-                    raycaster="objects: none"
-                    geometry="primitive: ring; radiusInner: 0; radiusOuter: 0"
-                    material="opacity: 0; transparent: true"
-                ></a-cursor>
-            </a-entity>
-
-            
-            <a-videosphere
-                v-for="scene in props.scenes"
-                :key="scene.id"
-                :src="`#video${props.scenes[currentSceneIndex].id}`"
-            ></a-videosphere>
-
-            
-            <a-entity
-                v-for="pin in props.scenes[currentSceneIndex].pins"
-                :key="pin.id"
-                :position="convertToPosition(pin.x, pin.y)"
-                cursor="rayOrigin: mouse"
-            >
-                <a-circle
-                    class="pin-marker"
-                    :color="getPinColor(pin)"
-                    radius="0.15"
-                    shader="flat"
-                    :material="`opacity: ${getPinOpacity(
-                        pin.id
-                    )}; transparent: true`"
-                    @click="(event: Event) => handleMarkerClick(pin, event)"
-                    @mouseenter="(event: Event) => handleMouseEnter(pin, event)"
-                    @mouseleave="(event: Event) => handleMouseLeave(pin, event)"
-                >
-                    
-                    <a-circle
-                        position="0 0 0.01"
-                        color="#FFF" 
-                        radius="0.05" 
-                        material="opacity: 0;"
-                    ></a-circle>
-                    
-                </a-circle>
-            </a-entity>
-
-            
-            <a-entity
-                v-if="hoveredPin"
-                :position="convertToPosition(hoveredPin.x, hoveredPin.y)"
-                class="frame interactive-area"
-                cursor="rayOrigin: mouse"
-                @mouseleave="(event: Event) => handleMouseLeave(hoveredPin, event)"
-            >
-                <a-plane
-                    color="white"
-                    :opacity="1"
-                    width="4"
-                    height="1.5"
-                    material="shader: standard; side: double;"
-                    position="0 0 0"
-                    geometry="primitive: plane; height: 1.5; width: 4;"
-                ></a-plane>
-
-                <a-text
-                    :value="hoveredPin.title"
-                    color="#2c3e50"
-                    font="dejavu"
-                    align="center"
-                    width="3.8"
-                    position="0 0.3 0.01"
-                ></a-text>
-                <a-text
-                    :value="hoveredPin.description"
-                    color="#34495e"
-                    font="dejavu"
-                    align="center"
-                    width="3.5"
-                    position="0 -0.3 0.01"
-                ></a-text>
-            </a-entity>
-
-           
-            <a-entity
-                v-if="clickedPin"
-                :position="convertToPosition(clickedPin.x, clickedPin.y)"
-                class="frame interactive-area"
-                cursor="rayOrigin: mouse"
-            >
-                <a-plane
-                    color="white"
-                    :opacity="1"
-                    width="4"
-                    height="1.5"
-                    material="shader: standard; side: double;"
-                    position="0 0 0"
-                    geometry="primitive: plane; height: 1.5; width: 4;"
-                ></a-plane>
-
-                <a-plane
-                    class="close-frame"
-                    color="red"
-                    width="0.4"
-                    height="0.4"
-                    position="1.8 0.55 0.01"
-                    material="shader: flat; side: double; transparent: true;"
-                    geometry="primitive: plane; height: 0.4; width: 0.4;"
-                    @click="removeFrame"
-                ></a-plane>
-
-                <a-text
-                    :value="clickedPin.title"
-                    color="#2c3e50"
-                    font="dejavu"
-                    align="center"
-                    width="3.8"
-                    position="0 0.3 0.01"
-                ></a-text>
-                <a-text
-                    :value="clickedPin.description"
-                    color="#34495e"
-                    font="dejavu"
-                    align="center"
-                    width="3.5"
-                    position="0 -0.3 0.01"
-                ></a-text>
-            </a-entity>
-        </a-scene>
-    </div>-->
-    <div>
-      La lib aframe et three.js à revoir
-    </div>
-</template>