Suppression d'un seul marqueur sélectionné

[NinaP48]

Bonjour, j'aimerais savoir s'il est possible de supprimer un seul marqueur préalablement sélectionné.
J'ai tenté de l'implémenter cependant, cela supprime l'intégralité de mes marqueurs.
J'en profite pour demander également si quelqu'un arrive à trouver dans mon code qui empêche l'enregistrement des nouvelles données du marqueur en cliquant sur "Sauvegarder".
Pour précisions, j'essaye de faire en sorte que lorsque je sélectionne un marqueur, je puisse le supprimer ou modifier ses données.

Voici mon code Javascript :

function updateMarkerInfo(marker) {
// Créer un formulaire
let form = document.createElement('form');

// Ajouter un champ pour le nom
let nameLabel = document.createElement('label');
nameLabel.textContent = 'Nom : ';
let nameInput = document.createElement('input');
nameInput.type = 'text';
nameInput.value = marker.label;
nameLabel.appendChild(nameInput);
form.appendChild(nameLabel);

// Ajouter un champ pour la couleur
let colorLabel = document.createElement('label');
colorLabel.textContent = 'Couleur : ';
let colorInput = document.createElement('input');
colorInput.type = 'color';
colorInput.value = marker.color;
colorLabel.appendChild(colorInput);
form.appendChild(colorLabel);

// Ajouter un champ pour la position
let positionLabel = document.createElement('label');
positionLabel.textContent = 'Position : ';
let positionInput = document.createElement('select');
let positions = ['top', 'bottom'];
positions.forEach(function(position) {
let option = document.createElement('option');
option.value = position;
option.text = position;
positionInput.add(option);
});
positionInput.value = marker.position;
positionLabel.appendChild(positionInput);
form.appendChild(positionLabel);

// Ajouter un bouton de validation
let submitButton = document.createElement('button');
submitButton.textContent = 'Valider';
form.appendChild(submitButton);

// Ajouter un gestionnaire d'événement pour la soumission du formulaire
form.addEventListener('submit', function(event) {
event.preventDefault();
// Mettre à jour les informations du marqueur
marker.label = nameInput.value;
marker.color = colorInput.value;
marker.position = positionInput.value;
// Masquer le formulaire
form.style.display = 'none';
});

// Ajouter un bouton de suppression
let deleteButton = document.createElement('button');
deleteButton.textContent = 'Supprimer';
form.appendChild(deleteButton);

// Gestionnaire d'évènement pour la suppression du marqueur sélectionné
deleteButton.addEventListener('click', function() {
event.preventDefault();
wavesurfer.clearMarkers(marker);
})

// Afficher le formulaire
document.body.appendChild(form);
}

wavesurfer.on('marker-click', function(marker) {
updateMarkerInfo(marker);
});

[prakharpbuf]

Je sais comment supprimer un marqueur cliqué en utilisant l'événement 'marqueur-clic' sur l'objet surfeur.
Je vois que vous avez utilisé cet événement ici pour appeler updateMarkerInfo(marker) afin que vous connaissiez déjà cet événement. Maintenant, pour supprimer le marqueur, vous devrez trouver l'index de ce marqueur cliqué dans le tableau wavesurfer.markers.markers. Vous pouvez trouver cet index en faisant correspondre l'étiquette, l'heure ou une combinaison des deux.
Une fois que vous êtes en mesure de trouver l'index de ce marqueur, vous pouvez appeler wavesurfer.markers.remove(index) pour supprimer ce marqueur.

Voici un exemple de code qui trouve l'index du marqueur en faisant correspondre la propriété time et le supprime :

            wavesurfer.on('marker-click', (m) => {
                const idx = wavesurfer.markers.markers.findIndex(_m => _m.time === m.time);
                wavesurfer.markers.remove(idx);
            })

One way I know how we can remove a clicked marker is by using the 'marker-click' event on the wavesurfer object.
I see that you have used this event here to call updateMarkerInfo(marker) so you already know about this event. Now, to delete the marker, you will have to find the index of this clicked marker in the wavesurfer.markers.markers array. You can find this index by matching the label, time, or a combination of both.
Once you are able to find this marker's index, you can call wavesurfer.markers.remove(index) to remove that marker.

Here is a sample code that finds the marker index by matching the time property and deletes it:

            wavesurfer.on('marker-click', (m) => {
                const idx = wavesurfer.markers.markers.findIndex(_m => _m.time === m.time);
                wavesurfer.markers.remove(idx);
            })

[prakharpbuf]

Pour mettre à jour les informations d'un marqueur, je pense que vous allez devoir supprimer le marqueur sélectionné en utilisant la méthode mentionnée ci-dessus, puis ajouter un nouveau marqueur avec de nouvelles propriétés et anciennes (pour ne pas perdre d'anciennes propriétés)

Voici un exemple de code :

    form.addEventListener('submit', function(event) {
        event.preventDefault();
        const markerCopy = {...marker}
        deleteMarker(marker);
        wavesurfer.addMarker({...markerCopy /* old properties*/, label: nameInput.value, color: colorInput.value, position: positionInput.value /* new properties */})
        form.style.display = 'none';
    });

For updating a marker's info, I think that you are going to have to delete the selected marker using the method mentioned above and then add a new marker with new properties and old (to not lose any old properties)

Here's some sample code:

    form.addEventListener('submit', function(event) {
        event.preventDefault();
        const markerCopy = {...marker}
        deleteMarker(marker);
        wavesurfer.addMarker({...markerCopy /* old properties*/, label: nameInput.value, color: colorInput.value, position: positionInput.value /* new properties */})
        form.style.display = 'none';
    });

[NinaP48]

Parfait, merci la suppression d'un seul marqueur fonctionne à présent. Cependant, je ne comprends pas bien ce qu'il faudrait mettre à la place des '...' pour la modification du marqueur. Je comprends toutefois l'intérêt de créer une copie pour supprimer le marqueur initial et le recréer

[prakharpbuf]

Vous n'avez rien à mettre à la place du...

C'est l'opérateur de propagation en JavaScript. Je recommande de lire à ce sujet, c'est utile.

You don't have to put anything in place of the ...

It is the spread operator in JavaScript. I recommend reading about it, it's useful.

[NinaP48]

oh, je ne savais pas, c'est intéressant comme concept.
En tout cas ça fonctionne, c'est fantastique !

[prakharpbuf]

I think wavesurfer should provide a method to remove the marker in the marker object itself so that we can directly do:

            wavesurfer.on('marker-click', (m) => {
                m.remove()
            })

What do you think? @katspaugh
I can try creating a PR to add that feature.

[katspaugh]

Sure, makes sense!