fix(GraphPlayground): skip editor updates for multi-block selections

[180107072]

Problem

freezes when selecting 10 000 blocks

Why it happens

findBlockPositionsMonaco performs document search for each block

Solution

skip editor updates when updating multiple blocks editor highlighting only works for single selections

[180107072]

I hereby agree to the terms of the CLA available at: https://yandex.ru/legal/cla/?lang=ru.

[gravity-ui-bot]

Preview is ready.

[draedful]

Hi, thanks for your contribution. I have looked at your suggestion and have some ideas. The fact is that when dragging blocks the updateBlocks() method is called on each block individually, so the current change doesn't affect the mass drag of blocks - the events are triggered for each block separately.

graph/src/stories/Playground/GraphPlayground.tsx

Line 162 in 89fe422

editorRef?.current.updateBlocks([block]);

Therefore, to solve this problem, you need to accumulate the blocks currently in the drag state, but the event block-changed is not suitable because of the granularity of changes.

graph.addEventListener('block-changed', () => { // listen for changes to one block only
  // do something with the block
});

Instead, I

Instead of using events, I would suggest using the DragService state to calculate the list of dragged blocks. Here's an example:

const lastDraggedBlocks = React.useRef<Array<TBlock>>([]);
useEffect(() => { // run this effect every time the graph changes
  graph.dragService.state.subscribe(value => {
   // at the end of a drag, update blocks in editor
   if (!value?.isDragging) { // if no longer dragging
     if (lastDraggedBlocks.current) { // check if we have any blocks
       editorRef?.updateBlocks(...lastDragged); // update editor with blocks
       lastDragged.current = []; // clear list
     }
   } else { // during drag
     const blocks = value?.components?.filter(c => c instanceof TBlock); // get blocks from drag
     lastDragged?.current = blocks?.map(b => b?.connectedState?.value); // add to list
     // if only one block, update editor
     if(blocks?.length === 1){
       const state = blocks?.[0]?.connectedState.value; // get state of block
       editor?.updateBlocks?.([state]) // update editor
       editor.scrollTo?.(state?.id) // scroll to block
     } 
   }
 });
}, [graph])

In this approach, it is easier to calculate the blocks in the drag state and correctly process the editor updates.