The canvas spot re-renders the editor with even slight movement.

[Turzapodder]

Hi,

I am trying to implement margin and padding drag handlers similar to how they are done in GrapesJS Studio. I can achieve this functionality, but it comes with a trade-off. To align the spots with the selected component, I am using the editor.on('canvas:spot', () => {}) event. However, as I need to track the hover spots too, the editor gets re-rendered countless times as soon as I move the mouse even slightly.

Can anyone help me on how to use canvas spots in this context properly? I'm using React/Next.js for my project, and I'm encountering performance issues with this approach.
@artf your help will be so much appreciated.

  const spotsContainerRef = useRef(null);
  
  const handleComponentToggled = (component: any) => {
    editorRef.current?.Canvas.removeSpots({ type: 'drag-handlers' });
    
    if (component === editorRef.current?.getSelected()) {
      editorRef.current?.Canvas.addSpot({ type: 'drag-handlers', component });
    }
  };

  useEffect(() => {
    const handleCanvasSpot = () => {
      setSpots(editorRef.current?.Canvas.getSpots());
    };

    editorRef.current?.on('canvas:spot', handleCanvasSpot);

    editorRef.current?.on('component:toggled', handleComponentToggled);

    return () => {
      editorRef.current?.off('canvas:spot', handleCanvasSpot);
      editorRef.current?.off('component:toggled', handleComponentToggled);
    };
  }, []);
  
   <!-- logic for the drag handlers -->


   <div id='gjs'></div>
   <div ref={spotsContainerRef} className='canvas-spots'>
          {spots.filter((spot: any) => spot.type === 'drag-handlers')
            .map((spot: any) => (
              <div
                key={spot.id}
                className='drag-handler-spots'
                style={spot.getStyle()}
              >
                {handlers.map((handler, index) => {
                  const className = `drag-handler ${handler.prop} ${handler.dir} ${handler.styleKey}`;
                  return <div key={index} className={className}></div>;
                })}
              </div>
              ))}
    </div>