dragonroll/frontend/app/components/viewer/content/NoteContainer.vue

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import Note from './Note.vue';
import { emitter } from '~/services/Emitter';

let noteData = ref([]);

const noteContainer = ref(null);

function calculateContainerWidth(){
    let dom = noteContainer.value;
    if (!dom) {
        return;
    }

    dom.style.width = noteData.value.length * 701 + "px";
    
    setTimeout(() => {
        for(let i = 0; i < dom.children.length; i++){
            let child = dom.children[i];
            child.style.left = (40 * i) + "px";
            child.style.right = (40 * (dom.children.length - i) - 700) + "px";
            child.style.zIndex = i + 1;
        }
    }, 0);
}

function pushNote(note){
    noteData.value = noteData.value.filter((currentNote) => {
        return currentNote.key !== note.key;
    });
    noteData.value.push(note);
    calculateContainerWidth();
}

function handlePushNote(note) {
    pushNote(note);
}

function handleDeleteNote(key) {
    noteData.value = noteData.value.filter((note) => {
        return note.key !== key;
    });
    calculateContainerWidth();
}

// Moure aixo
onMounted(() => {
    emitter.on("push-note", handlePushNote);
    emitter.on("delete-note", handleDeleteNote);
});

onUnmounted(() => {
    emitter.off("push-note", handlePushNote);
    emitter.off("delete-note", handleDeleteNote);
});

</script>

<template>
<div class="note-scrolling-container" id="note-scrolling-container">
    <div class="note-container" ref="noteContainer" >
        <Note v-for="element in noteData" :key="element.key" :text="element.text" :title="element.title" :noteKey="element.key"></Note>
    </div>
</div>
</template>

<style scoped>
.note-scrolling-container {
    overflow-x: auto;
    width: 100%;
    height: 100%;
    overflow-y: none;
}

.note-container {
    display: flex;
    height: 100%;
    margin: 0;
    background-color: var(--color-background);
}
</style>

<style>
</style>