Am I using the .delete() method correctly?

Web
1

So, I am trying to delete a label widget from my render window after clicking a button, so I have the following code:

          document.getElementById('btnDel').addEventListener('click', () => {
            let widgets = Array.from(widgetManager.getWidgets())
            for (let index = 0; index < widgets.length; index++) {
              console.log(widgets[i])
              widgets[i].delete()
            }
          });

This sounds good to me, until after clicking the button which triggers the event I get the following error:

Cannot read properties of undefined (reading ‘length’)
TypeError: Cannot read properties of undefined (reading ‘length’)
at publicAPI.updateRepresentationForRender (http://localhost:3002/static/js/bundle.js:45221:47)
at updateWidgetForRender (http://localhost:3002/static/js/bundle.js:46661:7)
at Array.forEach ()
at renderPickingBuffer (http://localhost:3002/static/js/bundle.js:46665:19)
at captureBuffers (http://localhost:3002/static/js/bundle.js:46676:5)
at publicAPI.getSelectedDataForXY (http://localhost:3002/static/js/bundle.js:46802:15)
at updateSelection (http://localhost:3002/static/js/bundle.js:46601:25)
at handleEvent (http://localhost:3002/static/js/bundle.js:46657:13)
at Object. (http://localhost:3002/static/js/bundle.js:46719:7)
at Object.invoke [as invokeMouseMove] (http://localhost:3002/static/js/bundle.js:49446:33)

Is there something I’m missing here? I would appreciate some help, thank you!

2

The delete() method just destroys the object.
You can think if it as a destructor.
So calling delete on an object that it still in use will create the kind of error that you see.

1 Like
3

Thanks! Then, what would be the best way to remove the labels from the view and then delete them from the render window or renderer so they don’t use resources from my browsers?

I am asking since I am getting severe performance issues in my browser after generating multiple labels, and despite being able to remove them from the view those labels seem to be using resources, and the only way I managed to stop the issue so far is by refreshing the window.

4

Deleting should free resources but you have to make sure that no other object will use a label after its deletion. You can look at the stack trace to understand what object uses your widget after its deletion and remove it from this object.

Also did you try recording the performance of your application to see what is causing this performance hit ?

5

I already found the solution, did the following:

           document.getElementById('btnDel').addEventListener('click', () => {


              handle.reset()
              widgetManager.removeWidget(handle);
              svgCleanupCallbacks.get(handle);
              svgCleanupCallbacks.delete(handle);
              handleTextProps.delete(handle);
                       
            renderWindow.render();
          });

This seems to work so far, thanks for the help!

6

Also, in case you get some error while implementing this solution, remember to check if the handle exists in the first place. Not doing this might lead to crashes after a few uses of the event:

          document.getElementById('btnDel').addEventListener('click', () => {
            if (handle) {
                handle.reset()
                widgetManager.removeWidget(handle);
                svgCleanupCallbacks.get(handle);
                svgCleanupCallbacks.delete(handle);
                handleTextProps.delete(handle);
                handle = null; // Aquí se establece a null después de eliminarlo
            }
            setIsModalOpen(false);
        });