Region Ghosts

[studio4evr]

My regions will start leaving behind a "ghost" region - a uninteractable region where the region was previously before it was edited. Has anyone else seen this problem?

[katspaugh]

Are you using React? Make sure you're properly destroying previous instances of the plugin if so.

[studio4evr]

no, vanilla js

[katspaugh]

Then a code snippet would help...

[studio4evr]

(whoops, see below)

[studio4evr]

Sure - it might be handy for you to have a play with it here Lyric Punch Editor<https://www.lyricpunch.com/open_sample_editor> and you can check out editor.js in the inspector. If you drag a region over other regions, it seems to trigger this ghosting of regions. It was working fine, not sure what happened? Maybe something in an update? Lyric Punch Editor<https://www.lyricpunch.com/open_sample_editor> Download Edited Transcription *Lyric Punch Editor is Experimental* The Editor view is a mere preview - Export Rules! www.lyricpunch.com

…

________________________________ From: katspaugh ***@***.***> Sent: 14 January 2025 16:36 To: katspaugh/wavesurfer.js ***@***.***> Cc: studio4evr ***@***.***>; Author ***@***.***> Subject: Re: [katspaugh/wavesurfer.js] Region Ghosts (Discussion #3998) Then a code snippet would help... — Reply to this email directly, view it on GitHub<#3998 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BAWOPKQBZVNHZG4RTMFFIED2KU4IJAVCNFSM6AAAAABVFIJIS2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCOBTGM3TANA>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[katspaugh]

It's a big file so I only checked it briefly. I noticed you're calling drawAllWordsAsRegions() in three places, including on each region-created event. And then inside that function you're creating regions for each word all over again.

[studio4evr]

thanks for checking! i looked at that and managed to change a few things and that fixed the ghosting of the regions - however, i'm now having a problem with drag select - i'm calling the function that should deactivate the drag selection once it creates a region, but the selected area remains on the timeline. You can see it happen if you select "+Lyric" and create a region, then move that region (here https://www.lyricpunch.com/open_sample_editor) - you'll see the drag select region remains underneath. i made it a bright red colour to make sure that it is actually the drag select region. the code for activating and deactivating the region is here:

function toggleRegionCreationMode() {
            regionCreationEnabled = !regionCreationEnabled; // Toggle the mode state

            document.getElementById('createRegionButton').textContent = regionCreationEnabled ? "Cancel" : "Add Lyric";

            var waveformContainer = document.getElementById('waveform');
            if (regionCreationEnabled) {
                console.log("Region creation enabled");
                disableDragSelection = wsRegions.enableDragSelection({
                    color: 'rgba(221, 0, 0, 0.92)'
                });
            } else {
                console.log("Region creation disabled, trying to get rid of selection area...");

                disableDragSelection();
                cancelCreateLine();  

            }           
        }

[studio4evr]

another notable thing is that if i use wsRegions.clearRegions() - the red selection area remains on the timeline.

[studio4evr]

I've done a lot of digging, and I gave my drag select region an ID - "selectionArea" - I can see that a region with this ID is created after I've created all my own regions, and it is not being created by my code and I can't use region.remove() to get rid of the region after its created.

toggling the drag select:

function toggleRegionCreationMode() {
            regionCreationEnabled = !regionCreationEnabled;
            document.getElementById('createRegionButton').textContent = regionCreationEnabled ? "Cancel" : "Add Lyric";
            var waveformContainer = document.getElementById('waveform');
            if (regionCreationEnabled) {
                console.log("Region creation enabled");
                disableDragSelection = wsRegions.enableDragSelection(
                    {
                    id: 'selectionArea',
                    color: 'rgba(221, 0, 0, 0.92)'
                    },
                    5
                );
            } else {
                console.log("Region creation disabled, trying to get rid of selection area...");
            disableDragSelection();
            cancelCreateLine();  
            }           
        }

troubleshooting the region id:

wsRegions.on('region-created', (region) => {
    console.log('Region created with ID:', region.id);
    if (region.id === "selectionArea"){

        
        disableDragSelection();
        const regionParams = {
            channelIdx: region.channelIdx,
            color: region.color,
            content: region.content,
            contentEditable: region.contentEditable,
            drag: region.drag,
            end: region.end,
            id: region.id,
            maxLength: region.maxLength,
            minLength: region.minLength,
            resize: region.resize,
            resizeEnd: region.resizeEnd,
            resizeStart: region.resizeStart,
            start: region.start
          };
          console.log(regionParams);
          region.remove();
    }
  });

[katspaugh]

Perhaps try debugging it, or ask ChatGTP/Cursor.ai.