ep-lib-ts 1.0.36 → 1.0.39

package/src/components/educationals/EpBranchingScenario.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+
+import { ref, computed } from "vue";
+import { useRenderText } from '../../composables/useRenderText';
+import EpIcon from '../../components/basics/EpIcon.vue';
+import { mdiArrowLeft } from "@mdi/js";
+
+
+// Defining the props
+
+interface Option {
+    name: string;
+    question: string;
+    imgSrc?: string;
+    options?: Option[];
+}
+
+interface Props {
+    scenarioTitle: string;
+    initialInstruction?: string | null;
+    bgColor?: string;
+    decisionTree: {
+        rootQuestion: string;
+        imgSrc?: string;
+        options: Option[];
+    };
+    transitionAnimation?: "fade" | "scale" | "slideY";
+}
+
+
+const props = withDefaults(defineProps<Props>(), {
+    initialInstruction: null,
+    transitionAnimation: "fade"
+});
+
+
+// The necessary references to keep track of the evolution
+
+const itinerary = ref<number[]>([]);
+
+const currentSlide = ref(0);
+const currentOption = ref<null | any>(null);
+
+
+// Manage the introductory part
+const isIntroductoryPart = ref(true);
+
+// Get the option from the itinerary
+const getOptionFromItinerary = (itinerary: number[]) => {
+    let option: any = props.decisionTree;
+    if (itinerary.length > 0) {
+        for (let i = 0; i < itinerary.length; i++) {
+            option = option.options[itinerary[i]];
+        }
+    }
+
+
+    return (option !== props.decisionTree)? option : null;
+};
+
+
+
+// Return function
+
+const goToPrevious = () => {
+    if(notTheEnd.value){
+        if(itinerary.value.length === 0) {
+            isIntroductoryPart.value = true;
+        }
+
+        itinerary.value.pop();
+        currentOption.value = getOptionFromItinerary(itinerary.value);
+        currentSlide.value = itinerary.value.length;
+    }
+};
+
+// Verifying if we are at the end
+const notTheEnd = computed(() => {
+    return currentSlide.value === 0 || (currentOption.value && currentOption.value.options && currentOption.value.options.length > 0);
+});
+
+
+
+// Restart function
+const restart = () => {
+    currentSlide.value = 0;
+    currentOption.value = null;
+    itinerary.value = [];
+    isIntroductoryPart.value = true;
+};
+
+
+
+// Function to get the choices made based on the itinerary
+const getChoices = (itinerary: number[]) => {
+    let choices: any[] = [{question: props.decisionTree.rootQuestion, choice: props.decisionTree.options[itinerary[0]].name}];
+    let option: any = props.decisionTree.options[itinerary[0]];
+    if (itinerary.length > 1) {
+        for (let i = 1; i < itinerary.length; i++) {
+            let question: string = option.question;
+            option = option.options[itinerary[i]];
+            choices.push({question, choice: option.name});
+        }
+    }
+
+    return choices;
+};
+
+
+
+</script>
+
+<template>
+    <div>
+
+        <!-- The introductory part -->
+        <div v-if="isIntroductoryPart" class="m-4 mx-auto w-2/3 bg-gray-200 dark:bg-slate-800 rounded-md flex flex-col items-center justify-around p-4 fade"  :style="{ minHeight: '500px', backgroundColor: bgColor }">
+            <h1 class="font-bold text-3xl">{{ scenarioTitle }}</h1>
+            <div class="text-center min-w-max m-3 flex flex-col items-center gap-3" v-if="initialInstruction" v-html="useRenderText(initialInstruction)"></div>
+            <button class="rounded bg-blue-500 text-white py-2 px-4 min-w-28 my-3" @click="isIntroductoryPart = false">Commencer</button>
+        </div>
+
+
+        <div class="m-4 mx-auto w-2/3 rounded-md flex flex-col p-4 bg-gray-200 dark:bg-slate-800" :style="{ minHeight: '500px', backgroundColor: bgColor }" v-else>
+            <!-- Return button -->
+            <div><button :class="`rounded bg-blue-500 text-white py-2 px-4 m-2 ${transitionAnimation}`" v-if="notTheEnd" @click="goToPrevious">
+                <EpIcon :icon-path="mdiArrowLeft" size="25"></EpIcon>
+            </button></div>
+
+            <!-- First question -->
+            <div :class="`flex-grow flex flex-col items-center justify-around ${transitionAnimation}`" v-if="currentSlide === 0">
+                <div class="text-center min-w-max m-3 flex flex-col items-center gap-3" v-html="useRenderText(decisionTree.rootQuestion)"></div>
+                <img v-if="decisionTree.imgSrc" :src="decisionTree.imgSrc" class="rounded" width="200" />
+                <div :class="`w-full justify-items-center mx-4 grid ${(decisionTree.options.length <= 2)? 'grid-cols-2' : 'grid-cols-3'}`">
+                    <button :class="`rounded bg-blue-500 text-white py-2 px-4 min-w-28 max-w-40 my-3 ${(index === (decisionTree.options.length - 1) && (index % 3) === 0)? `col-span-3`: 'col-span-1'}`" v-for="(option, index) in decisionTree.options" :key="index" @click="itinerary.push(index); currentSlide++; currentOption = option">{{ option.name }}</button>
+                </div>
+            </div>
+
+            <!-- The rest of the scenario including the end-->
+            <div class="flex-grow flex" v-else>
+
+                <!-- The current slide -->
+                <div :key="currentOption.question" :class="`flex-grow flex flex-col items-center justify-around ${transitionAnimation}`" v-if="notTheEnd">
+                    <div class="text-center min-w-max m-3 flex flex-col items-center gap-3" v-html="useRenderText(currentOption.question)"></div>
+                    <img v-if="currentOption.imgSrc" :src="currentOption.imgSrc" class="rounded" width="200" />
+                    <div :class="`w-full justify-items-center mx-4 grid ${(currentOption.options.length <= 2)? 'grid-cols-2' : 'grid-cols-3'}`">
+                        <button :class="`rounded bg-blue-500 text-white py-2 px-4 min-w-28 max-w-40 my-3 ${(index === (currentOption.options.length - 1) && (index % 3) === 0)? `col-span-3`: 'col-span-1'}`" v-for="(option, index) in currentOption.options" :key="index" @click="itinerary.push(index); currentSlide++; currentOption = option">{{ option.name }}</button>
+                    </div>
+                </div>
+
+                <!-- End of the scenario -->
+                <div :class="`flex-grow flex flex-col items-center ${transitionAnimation}`" v-else>
+                    <div class="flex-grow flex flex-col items-center">
+                        <h1 class="my-2 font-bold text-3xl">Vous avez terminé le scénario!</h1>
+                        <p>Voici votre parcours</p>
+                        <div class="flex flex-col relative w-full gap-4 px-5 py-5 items-start overflow-auto border-l-4 border-gray-700" style="max-width: 600px; height: 300px;">
+                            <div v-for="(question, index) in getChoices(itinerary)" :key="index" class="path-item rounded bg-blue-500 text-white py-2 px-4 flex flex-col items-center">
+                                <u>{{ question.question }}</u>
+                                <p>{{ question.choice }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <button class='rounded bg-blue-500 text-white py-2 px-4 min-w-28 my-3 col-span-1' @click="restart">Recommencer</button>
+                </div> 
+
+            </div>
+
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+@keyframes fade {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+    
+}
+
+@keyframes scale {
+    0% {
+        transform: scale(0.5);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@keyframes slideY {
+    0% {
+        transform: translateY(-100%);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Transition animation */
+.fade{
+    animation: fade 1s;
+}
+
+.scale{
+    animation: scale 1s;
+}
+
+.slideY{
+    animation: slideY 1s;
+}
+
+
+
+
+
+/* Path item styling */
+.path-item {
+    position: relative;
+}
+
+.path-item::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    width: 60px;
+    height: 4px;
+    background-color: rgb(55, 65, 81);
+}
+
+</style>
+

package/src/components/educationals/EpCodeblock.vue

@@ -6,7 +6,7 @@
   import { computed} from "vue";
   import { ref } from "vue"; 
 
-  type Langue = "javascript"|"css"|"html"|"php"|"json"|"typescript";
+  type Langue = "javascript"|"css"|"html"|"php"|"json"|"typescript"|"python"|"xml";
 
   interface Props {
     code?: string;  

package/src/components/educationals/EpEdu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { toRefs, computed, useSlots } from "vue";
+import { toRefs, computed, useSlots, SetupContext } from "vue";
 //types with capital letter, object styles in lowercase
 import { type MediaVariants, mediaVariants } from "../../types/Medias";
 import { type MandateLevel } from "../../types/MandateLevel";
@@ -26,11 +26,11 @@ const props = withDefaults(defineProps<Props>(), {
   type: "base",
   hideIcon: false,
   flat: false,
-  labelIntentions:""
+  labelIntentions: "",
 });
 
 //get slots
-const slots = useSlots();
+const slots: SetupContext["slots"] = useSlots();
 
 const hasIntentions = computed(() => {
   return slots.intentions ? true : false;
@@ -93,7 +93,7 @@ const { title, hideIcon } = toRefs(props);
           class="font-semibold mb-2 text-sm uppercase tracking-wide text-gray-500 dark:text-white"
         >
           {{ labelIntentions }}
-        </h4> 
+        </h4>
         <slot name="intentions"></slot>
         <EpDivider />
       </div>

package/src/components/interactions/Ep360Image.vue

@@ -0,0 +1,344 @@
+<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 { Object3D, Quaternion, Vector3 } from "three";
+import type { Pin, Scene } from "../../types/image360";
+
+interface Props {
+    scenes:Scene[];
+}
+
+const props = defineProps<Props>();
+
+
+
+const currentSceneIndex = ref(0);
+const hoveredPin = ref<Pin | null>(null);
+const clickedPin = ref<Pin | null>(null);
+
+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" || !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
+            );
+        }
+    }
+}
+
+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");
+        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) {
+        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;
+            console.log("Hover cleared:", pin);
+        }
+    }
+}
+
+function convertToPosition(x: number, y: number): string {
+    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];
+    }
+}
+
+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 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);
+        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 getPinOpacity(pinId: number): number {
+    return (hoveredPin.value && hoveredPin.value.id === pinId) ||
+        (clickedPin.value && clickedPin.value.id === pinId)
+        ? 0
+        : 1;
+}
+
+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((pinElement) => {
+        const pinObject = (pinElement as any).object3D;
+        if (pinObject) {
+            pinObject.setRotationFromQuaternion(quaternion);
+        }
+    });
+}
+
+function removeFrame() {
+    clickedPin.value = null;
+}
+
+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 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.25"
+                    shader="flat"
+                    :material="`opacity: ${getPinOpacity(
+                        pin.id
+                    )}; transparent: true`"
+                    @click="(event: Event) => handleMarkerClick(pin, event)"
+                    @mouseenter="(event: Event) => handleMouseEnter(pin, event)"
+                ></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>
+</template>