ep-lib-ts 1.0.51 → 1.0.53

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/tools/Details.vue

@@ -28,6 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
             <TextMedia
              :text="title"
              :media="media"
+             text-left
             />
             <EpDivider/>
             <div class="flex justify-end">

package/src/components/tools/TextMedia.vue

@@ -7,6 +7,8 @@ import type { NestedComponents } from "../../types/Component";
 interface Props{
     media?:NestedComponents;
     text:string;
+    cols?:boolean;
+    textLeft?:boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,11 +22,19 @@ const currentRenderComponent = computed(() => {
 	return null;
 });
 
+const colsStyle = computed(()=> {
+    return props.cols ? 'flex items-center justify-center gap-1' : ''
+})
+
+const alignText = computed(()=>{
+    return props.textLeft ? '' : 'justify-center';
+})
+
 </script>
 
 <template>
-    <div class="flex items-center justify-center gap-1">
-        <div class="w-full" v-html="useRenderText(text)"></div>
+    <div :class="colsStyle">
+        <div :class="`w-full flex ${alignText}`" v-html="useRenderText(text)"></div>
         <div class="w-full" v-if="currentRenderComponent && media">
            <component 
             :is="currentRenderComponent" 

package/dist/BgAudio-CfOyhY60.js

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

package/dist/Details-C2ibtnG1.js

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

package/dist/DisplayBox-842AxmPD.js

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

package/dist/Ep360Image-DHK_IWTi.js

@@ -1,241 +0,0 @@
-import { defineComponent as T, ref as p, onMounted as $, createElementBlock as u, openBlock as d, createElementVNode as r, createCommentVNode as b, Fragment as _, renderList as j } from "vue";
-import { V as x, Q as q } from "./three.module-B-oqC8Xk.js";
-const V = { style: { width: "800px", height: "600px", overflow: "hidden", position: "relative", margin: "auto" } }, W = ["id"], H = ["id", "src"], L = ["src"], B = ["position"], N = ["color", "material", "onClick", "onMouseenter"], z = ["position"], G = ["value"], J = ["value"], K = ["position"], U = ["value"], X = ["value"], ee = /* @__PURE__ */ T({
-  __name: "Ep360Image",
-  props: {
-    scenes: {},
-    id: {}
-  },
-  setup(C) {
-    const v = C, f = p(0), a = p(null), i = p(null), s = window.AFRAME;
-    s.components["rotation-reader"] || s.registerComponent("rotation-reader", {
-      schema: {},
-      tick: w()
-    });
-    function A(e, t) {
-      if (e && ((e == null ? void 0 : e.event) === "onClick" || !e.event)) {
-        if (e.type == "descriptive")
-          i.value = e, t.target.setAttribute("material", "opacity: 0; transparent: true"), console.log("Marker clicked:", e);
-        else if (e.type == "action") {
-          const o = v.scenes.findIndex(
-            (n) => n.id === e.scene
-          );
-          o !== -1 && (f.value = o), console.log(
-            "Action Pin Clicked. Scene switched to:",
-            f.value
-          );
-        }
-      }
-    }
-    function P(e, t) {
-      e && ((e == null ? void 0 : e.event) === "onHover" || !(e != null && e.event)) && (a.value = e, t.target.setAttribute("material", "opacity: 0; transparent: true"), console.log("Marker hovered:", e));
-    }
-    function E(e, t) {
-      var n;
-      if (!e) return;
-      const o = t.relatedTarget;
-      if ((e == null ? void 0 : e.event) === "onHover" || !(e != null && e.event)) {
-        const m = t.target;
-        console.log("children:", m.children), i.value == e && m.setAttribute("material", "opacity: 1; transparent: true"), !(o != null && o.classList.contains("interactive-area")) && ((n = a.value) == null ? void 0 : n.id) === (e == null ? void 0 : e.id) && (a.value = null, console.log("Hover cleared:", e));
-      }
-    }
-    function g(e, t) {
-      return `${e / 10} ${t / 10} -5`;
-    }
-    $(() => {
-      (async () => await M("rotation-reader", 2e3))(), (async () => await F(2e3))();
-    });
-    async function M(e, t = 1e3) {
-      s.components[e] && (await k(t), delete s.components[e]);
-    }
-    function k(e) {
-      return new Promise((t) => setTimeout(t, e));
-    }
-    async function F(e = 1e3) {
-      await k(e), s.components["rotation-reader"] && (console.warn(
-        "Existing rotation-reader component found. Re-registering..."
-      ), delete s.components["rotation-reader"]), s.registerComponent("rotation-reader", {
-        schema: {},
-        tick: w()
-      });
-    }
-    function w() {
-      const e = new q(), t = new x(), o = new x(), n = 5, m = 0.8;
-      return function() {
-        D(this.el.object3D, e);
-        const h = this.el.sceneEl;
-        R(e, h), this.el.object3D.getWorldPosition(t), h.querySelectorAll(".pin-marker").forEach((y) => {
-          const c = y.object3D;
-          if (c) {
-            c.getWorldPosition(o);
-            const l = t.distanceTo(o) * m / n;
-            c.scale.set(l, l, l);
-          }
-        }), h.querySelectorAll(".frame").forEach((y) => {
-          const c = y.object3D;
-          if (c) {
-            c.getWorldPosition(o);
-            const l = t.distanceTo(o) * m / n;
-            c.scale.set(l, l, l);
-          }
-        });
-      };
-    }
-    function O(e) {
-      return a.value && a.value.id === e || i.value && i.value.id === e ? 0 : 1;
-    }
-    function D(e, t) {
-      e.getWorldQuaternion(t);
-    }
-    function R(e, t) {
-      t.querySelectorAll(".pin-marker").forEach((o) => {
-        const n = o.object3D;
-        n && n.setRotationFromQuaternion(e);
-      }), t.querySelectorAll(".frame").forEach((o) => {
-        const n = o.object3D;
-        n && n.setRotationFromQuaternion(e);
-      });
-    }
-    function S() {
-      i.value = null;
-    }
-    function Q(e) {
-      return e.color || "indigo";
-    }
-    return (e, t) => (d(), u("div", V, [
-      r("a-scene", {
-        id: e.id,
-        embedded: ""
-      }, [
-        r("a-assets", null, [
-          (d(!0), u(_, null, j(v.scenes, (o) => (d(), u("img", {
-            key: o.id,
-            id: `image${o.id}`,
-            src: o.skyImage,
-            crossorigin: "anonymous"
-          }, null, 8, H))), 128))
-        ]),
-        t[4] || (t[4] = r("a-entity", {
-          camera: "",
-          "look-controls": "",
-          id: "rig",
-          "rotation-reader": ""
-        }, [
-          r("a-cursor", {
-            id: "cursor",
-            cursor: "rayOrigin: mouse",
-            raycaster: "objects: none",
-            geometry: "primitive: ring; radiusInner: 0; radiusOuter: 0",
-            material: "opacity: 0; transparent: true"
-          })
-        ], -1)),
-        r("a-sky", {
-          src: `#image${v.scenes[f.value].id}`,
-          radius: "100"
-        }, null, 8, L),
-        (d(!0), u(_, null, j(v.scenes[f.value].pins, (o) => (d(), u("a-entity", {
-          key: o.id,
-          position: g(o.x, o.y),
-          cursor: "rayOrigin: mouse"
-        }, [
-          r("a-circle", {
-            class: "pin-marker",
-            color: Q(o),
-            radius: "0.15",
-            shader: "flat",
-            material: `opacity: ${O(
-              o.id
-            )}; transparent: true;`,
-            onClick: (n) => A(o, n),
-            onMouseenter: (n) => P(o, n)
-          }, t[1] || (t[1] = [
-            r("a-circle", {
-              position: "0 0 0.01",
-              color: "#FFF",
-              radius: "0.05",
-              material: "opacity: 0;"
-            }, null, -1)
-          ]), 40, N)
-        ], 8, B))), 128)),
-        a.value ? (d(), u("a-entity", {
-          key: 0,
-          position: g(a.value.x, a.value.y),
-          class: "frame interactive-area",
-          cursor: "rayOrigin: mouse",
-          onMouseleave: t[0] || (t[0] = (o) => E(a.value, o))
-        }, [
-          t[2] || (t[2] = r("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;"
-          }, null, -1)),
-          r("a-text", {
-            value: a.value.title,
-            color: "#2c3e50",
-            font: "dejavu",
-            align: "center",
-            width: "3.8",
-            position: "0 0.3 0.01"
-          }, null, 8, G),
-          r("a-text", {
-            value: a.value.description,
-            color: "#34495e",
-            font: "dejavu",
-            align: "center",
-            width: "3.5",
-            position: "0 -0.3 0.01"
-          }, null, 8, J)
-        ], 40, z)) : b("", !0),
-        i.value ? (d(), u("a-entity", {
-          key: 1,
-          position: g(i.value.x, i.value.y),
-          class: "frame interactive-area",
-          cursor: "rayOrigin: mouse"
-        }, [
-          t[3] || (t[3] = r("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;"
-          }, null, -1)),
-          r("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;",
-            onClick: S
-          }),
-          r("a-text", {
-            value: i.value.title,
-            color: "#2c3e50",
-            font: "dejavu",
-            align: "center",
-            width: "3.8",
-            position: "0 0.3 0.01"
-          }, null, 8, U),
-          r("a-text", {
-            value: i.value.description,
-            color: "#34495e",
-            font: "dejavu",
-            align: "center",
-            width: "3.5",
-            position: "0 -0.3 0.01"
-          }, null, 8, X)
-        ], 8, K)) : b("", !0)
-      ], 8, W)
-    ]));
-  }
-});
-export {
-  ee as default
-};

package/dist/Ep360Video-C4PekHTc.js

@@ -1,242 +0,0 @@
-import { defineComponent as q, ref as h, onMounted as T, createElementBlock as s, openBlock as l, createElementVNode as n, toDisplayString as W, createCommentVNode as x, Fragment as p, renderList as k } from "vue";
-import { V as P, Q as H } from "./three.module-B-oqC8Xk.js";
-const I = { style: { width: "1200px", height: "800px", position: "relative", margin: "auto" } }, L = { embedded: "" }, B = ["id", "src"], N = ["src"], z = ["position"], G = ["color", "material", "onClick", "onMouseenter", "onMouseleave"], J = ["position"], K = ["value"], U = ["value"], X = ["position"], Y = ["value"], Z = ["value"], oe = /* @__PURE__ */ q({
-  __name: "Ep360Video",
-  props: {
-    scenes: {}
-  },
-  setup(C) {
-    const v = C, m = h(0), r = h(null), a = h(null), f = h(!1), c = window.AFRAME;
-    c.components["rotation-reader"] || c.registerComponent("rotation-reader", {
-      schema: {},
-      tick: _()
-    });
-    function E(e, t) {
-      if (e && (e == null ? void 0 : e.event) === "onClick") {
-        if (e.type === "descriptive")
-          a.value = e, t.target.setAttribute("material", "opacity: 0; transparent: true"), console.log("Marker clicked:", e);
-        else if (e.type === "action") {
-          const o = v.scenes.findIndex(
-            (i) => i.id === e.scene
-          );
-          o !== -1 && (m.value = o), console.log(
-            "Action Pin Clicked. Scene switched to:",
-            m.value
-          );
-        }
-      }
-    }
-    function M(e, t) {
-      e && (e.event === "onHover" || !e.event) && (r.value = e, console.log("Marker hovered:", e));
-    }
-    function w(e, t) {
-      var i;
-      if (!e) return;
-      const o = t.relatedTarget;
-      (e.event === "onHover" || !(e != null && e.event)) && !(o != null && o.classList.contains("interactive-area")) && ((i = r.value) == null ? void 0 : i.id) === e.id && (r.value = null, console.log("Hover cleared:", e));
-    }
-    function g(e, t) {
-      return `${e / 10} ${t / 10} -5`;
-    }
-    function A() {
-      a.value = null;
-    }
-    function F(e) {
-      return e.color || "indigo";
-    }
-    function O(e) {
-      return r.value && r.value.id === e || a.value && a.value.id === e ? 0 : 1;
-    }
-    function S() {
-      f.value = !f.value, document.querySelectorAll(".video").forEach((t) => {
-        f.value ? t.play() : t.pause();
-      });
-    }
-    T(() => {
-      (async () => await D("rotation-reader", 2e3))(), (async () => await R(2e3))();
-    });
-    async function D(e, t = 1e3) {
-      c.components[e] && (await b(t), delete c.components[e]);
-    }
-    function b(e) {
-      return new Promise((t) => setTimeout(t, e));
-    }
-    async function R(e = 1e3) {
-      await b(e), c.components["rotation-reader"] && (console.warn("Existing rotation-reader found. Re-registering..."), delete c.components["rotation-reader"]), c.registerComponent("rotation-reader", {
-        schema: {},
-        tick: _()
-      });
-    }
-    function _() {
-      const e = new H(), t = new P(), o = new P(), i = 5, j = 0.8;
-      return function() {
-        V(this.el.object3D, e), Q(e), this.el.object3D.getWorldPosition(t), document.querySelectorAll(".pin-marker").forEach((y) => {
-          const u = y.object3D;
-          if (u) {
-            u.getWorldPosition(o);
-            const d = t.distanceTo(o) * j / i;
-            u.scale.set(d, d, d);
-          }
-        }), document.querySelectorAll(".frame").forEach((y) => {
-          const u = y.object3D;
-          if (u) {
-            u.getWorldPosition(o);
-            const d = t.distanceTo(o) * j / i;
-            u.scale.set(d, d, d);
-          }
-        });
-      };
-    }
-    function V(e, t) {
-      e.getWorldQuaternion(t);
-    }
-    function Q(e) {
-      document.querySelectorAll(".pin-marker").forEach((t) => {
-        const o = t.object3D;
-        o && o.setRotationFromQuaternion(e);
-      }), document.querySelectorAll(".frame").forEach((t) => {
-        const o = t.object3D;
-        o && o.setRotationFromQuaternion(e);
-      });
-    }
-    return (e, t) => (l(), s("div", I, [
-      n("button", {
-        onClick: t[0] || (t[0] = (o) => S())
-      }, W(f.value ? "Pause" : "Play"), 1),
-      n("a-scene", L, [
-        n("a-assets", null, [
-          (l(!0), s(p, null, k(v.scenes, (o) => (l(), s("video", {
-            id: `video${o.id}`,
-            src: o.skyVideo,
-            muted: "",
-            class: "video",
-            playsinline: "",
-            loop: "",
-            crossorigin: "anonymous"
-          }, null, 8, B))), 256))
-        ]),
-        t[5] || (t[5] = n("a-entity", {
-          camera: "",
-          "look-controls": "",
-          id: "rig",
-          "rotation-reader": ""
-        }, [
-          n("a-cursor", {
-            id: "cursor",
-            cursor: "rayOrigin: mouse",
-            raycaster: "objects: none",
-            geometry: "primitive: ring; radiusInner: 0; radiusOuter: 0",
-            material: "opacity: 0; transparent: true"
-          })
-        ], -1)),
-        (l(!0), s(p, null, k(v.scenes, (o) => (l(), s("a-videosphere", {
-          key: o.id,
-          src: `#video${v.scenes[m.value].id}`
-        }, null, 8, N))), 128)),
-        (l(!0), s(p, null, k(v.scenes[m.value].pins, (o) => (l(), s("a-entity", {
-          key: o.id,
-          position: g(o.x, o.y),
-          cursor: "rayOrigin: mouse"
-        }, [
-          n("a-circle", {
-            class: "pin-marker",
-            color: F(o),
-            radius: "0.15",
-            shader: "flat",
-            material: `opacity: ${O(
-              o.id
-            )}; transparent: true`,
-            onClick: (i) => E(o, i),
-            onMouseenter: (i) => M(o),
-            onMouseleave: (i) => w(o, i)
-          }, t[2] || (t[2] = [
-            n("a-circle", {
-              position: "0 0 0.01",
-              color: "#FFF",
-              radius: "0.05",
-              material: "opacity: 0;"
-            }, null, -1)
-          ]), 40, G)
-        ], 8, z))), 128)),
-        r.value ? (l(), s("a-entity", {
-          key: 0,
-          position: g(r.value.x, r.value.y),
-          class: "frame interactive-area",
-          cursor: "rayOrigin: mouse",
-          onMouseleave: t[1] || (t[1] = (o) => w(r.value, o))
-        }, [
-          t[3] || (t[3] = n("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;"
-          }, null, -1)),
-          n("a-text", {
-            value: r.value.title,
-            color: "#2c3e50",
-            font: "dejavu",
-            align: "center",
-            width: "3.8",
-            position: "0 0.3 0.01"
-          }, null, 8, K),
-          n("a-text", {
-            value: r.value.description,
-            color: "#34495e",
-            font: "dejavu",
-            align: "center",
-            width: "3.5",
-            position: "0 -0.3 0.01"
-          }, null, 8, U)
-        ], 40, J)) : x("", !0),
-        a.value ? (l(), s("a-entity", {
-          key: 1,
-          position: g(a.value.x, a.value.y),
-          class: "frame interactive-area",
-          cursor: "rayOrigin: mouse"
-        }, [
-          t[4] || (t[4] = n("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;"
-          }, null, -1)),
-          n("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;",
-            onClick: A
-          }),
-          n("a-text", {
-            value: a.value.title,
-            color: "#2c3e50",
-            font: "dejavu",
-            align: "center",
-            width: "3.8",
-            position: "0 0.3 0.01"
-          }, null, 8, Y),
-          n("a-text", {
-            value: a.value.description,
-            color: "#34495e",
-            font: "dejavu",
-            align: "center",
-            width: "3.5",
-            position: "0 -0.3 0.01"
-          }, null, 8, Z)
-        ], 8, X)) : x("", !0)
-      ])
-    ]));
-  }
-});
-export {
-  oe as default
-};

package/dist/EpAlert-D_1oS26j.js

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

package/dist/EpAudio-CkAmtlFP.js

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

package/dist/EpAvatar-C3aEQ8pb.js

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

package/dist/EpBadge-DTAqBHg0.js

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

package/dist/EpBarChart-B477k9Ot.js

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

package/dist/EpBtn-w2CaP7VV.js

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

package/dist/EpCard-BBn794w5.js

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

package/dist/EpCardLink-BXD2hNWN.js

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

package/dist/EpChip-D7yiZLYj.js

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

package/dist/EpCodeblock-Csmouv_q.js

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