Bug: Interface freezes after any repositioning

[relliv]

Description

UI freezes when I drag a node for a while.

I created the test project here.
https://stackblitz.com/edit/stackblitz-starters-ykgm76ue?file=src%2Fmain.ts

Steps to Reproduce

1. Select and move any node
2. Try an interaction (pan/zoom or drag the board)

Expected Result

After repositioning, the library calculates and re-draws entire connection lines, causing UI freeze effects. I watch dom and SVG path data, it's re-rendering with any reposition action.

Actual Result

Zero lag or hacky solution. I think this problem is a huge issue for UX. In this case it should update only related connections, not all.

Environment Details

Similar to the provided stackblitz example.

Screenshots or Videos

Kayit.2025-01-15.041143.mp4

Additional Context

Thanks!

[relliv]

Another example

bug.mp4

[siarheihuzarevich]

Hello. It’s very difficult to help you with anything, since everything works for me without any freezes

2025-01-15.16.03.29.mov

[relliv]

Hi. @siarheihuzarevich, thank you for your quick response. It's happening when I add more than 15-20 connections. If you check my stackblitz demo you can see the same issue.

[siarheihuzarevich]

OK. I'll try to figure out your problem

[siarheihuzarevich]

I looked at your example from stackblitz and also added a lot of nodes and connections to DB-Management example and everything works fine.

Below I show a video of an example specially created for the test. It has 31 connections that are recalculated simultaneously and everything works fine

2025-01-15.23.10.28.mov

[relliv]

I looked at your example from stackblitz and also added a lot of nodes and connections to DB-Management example and everything works fine.

Below I show a video of an example specially created for the test. It has 31 connections that are recalculated simultaneously and everything works fine

2025-01-15.23.10.28.mov

Can you drag another node after dragging the first node?

[siarheihuzarevich]

I looked at your example from stackblitz and also added a lot of nodes and connections to DB-Management example and everything works fine.

Below I show a video of an example specially created for the test. It has 31 connections that are recalculated simultaneously and everything works fine

2025-01-15.23.10.28.mov

Can you drag another node after dragging the first node?

Yes, and all work fine.

[siarheihuzarevich]

Hi!
I’ve carefully reviewed your Stackblitz example again, and I also tested the scenario by adding more than 15-20 connections in both your example and the DB-Management example from the library. Even with 31 connections recalculating simultaneously, I couldn’t reproduce the UI freeze on my end.

There is, of course, the possibility that my computer’s performance is higher, which allows the recalculations to happen quickly. That said, I can assure you that the library’s calculations are as optimized as I could make them at this stage. When a node is moved, only the necessary recalculations are performed, and no redundant updates are triggered. Before and after the movement, the system also performs only the required operations.

However, I acknowledge that these calculations might still be heavy because they involve numerous vector addition and subtraction operations. The only way to significantly improve performance further would be to move some of this code to WebAssembly. This is something I’ve already planned, but implementing it will take a couple of months, as it’s not a quick task.

In the meantime, could you confirm:
1. Browser Version: Ensure you’re using the latest version of your browser.
2. Device Performance: Provide details about your CPU and RAM to understand the environment better.
3. Reproduction Steps: Let me know if there are any additional specific steps or configurations I might be missing in my tests.

[relliv]

Hi. I use M1 MacBook Pro 16 GB and desktop setup system (ryzen 5900x processor) 32 GB. Also my firefox profiler output: https://share.firefox.dev/3WhPo2z (recorded with 222 nodes and 222 edges)

There is no problem while dragging nodes but after dragend or a similar event, it is trying to calculate all paths again (I guess).

[relliv]

And some logs from onPointerUp event:

f-flow/projects/f-flow/src/f-draggable/f-draggable.directive.ts

Lines 158 to 177 in fa3327f

	public override onPointerUp(event: IPointerEvent): void {
	this.plugins.forEach((x) => x.onPointerUp?.(event));
	this._fMediator.send<void>(new ReassignConnectionFinalizeRequest(event));
	this._fMediator.send<void>(new CreateConnectionFinalizeRequest(event));
	this._fMediator.send<void>(new NodeResizeFinalizeRequest(event));
	this._fMediator.send<void>(new NodeMoveFinalizeRequest(event));
	this._fMediator.send<void>(new NodeDragToParentFinalizeRequest(event));
	this._fMediator.send<void>(new CanvasMoveFinalizeRequest(event));
	this._fMediator.send<void>(new ExternalItemFinalizeRequest(event));
	this._fMediator.send<void>(new EndDragSequenceRequest());
	}

My timer logs:

dnd-end-events-preview.mp4

[siarheihuzarevich]

@relliv Hello!

Thank you for providing the profiler output and your detailed environment setup. It’s clear that your systems are powerful, which rules out performance limitations on the hardware side.

I’ve made some optimizations in version 17.0.7, which you can try — it might improve the performance slightly. However, I want to mention that I have never tested the library specifically for Firefox. During development, I primarily focus on Safari and Chrome, as these are my main target browsers.

If you continue experiencing issues, I would recommend checking the performance in one of these browsers to see if the behavior differs. Please let me know how it goes with the new version and whether the optimizations make a difference!

Looking forward to your feedback!

[siarheihuzarevich]

@relliv also you can check this stress test https://flow.foblex.com/examples/stress-test-with-connections

[relliv]

@siarheihuzarevich Hi again. I'm getting this error with v17.0.7

I'm sorry, I had to update @foblex/2d too.

X [ERROR] No matching export in "node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]__rx_au7zdmvc6wlcok5kyhhrmnjsem/node_modules/@foblex/2d/fesm2015/foblex-2d.js" for import "findClosestAlignment"
    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]__7yr752orykhiy7gyprdlhpshvy/node_modules/@foblex/flow/fesm2022/foblex-flow.mjs:3:177:
      3 │ ... adjustRectToMinSize, findClosestAlignment, setRectToViewBox } f...
        ╵                          ~~~~~~~~~~~~~~~~~~~~
C:\Users\e9396\OneDrive\Desktop\gh\nn\ngeen-platform\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:1472
  let error = new Error(text);
              ^
Error: Build failed with 1 error:
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]__7yr752orykhiy7gyprdlhpshvy/node_modules/@foblex/flow/fesm2022/foblex-flow.mjs:3:177: ERROR: No matching export in "node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]__rx_au7zdmvc6wlcok5kyhhrmnjsem/node_modules/@foblex/2d/fesm2015/foblex-2d.js" for import "findClosestAlignment"
    at failureErrorWithLog (C:\Users\e9396\OneDrive\Desktop\gh\nn\ngeen-platform\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:1472:15)
    at C:\Users\e9396\OneDrive\Desktop\gh\nn\ngeen-platform\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:945:25
    at C:\Users\e9396\OneDrive\Desktop\gh\nn\ngeen-platform\node_modules\.pnpm\e[email protected]\node_modules\esbuild\lib\main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}
Node.js v21.7.3

[siarheihuzarevich]

Yes. You need to update all dependencies of flow

[relliv]

I'm not sure but I don't see any improvement. I'm testing with Opera, Brave, Edge, and Firefox. Still, there is a 1-1.5 second delay/freeze after DND with 25 nodes and 25 random edges, except Firefox. Chromium-based browsers are still laggy.

BTW, the new stress test is working fine with all browsers. I'll keep investigating this issue.

Many many thanks :)

[siarheihuzarevich]

I also recommend disabling one plugin at a time, such as line alignment, minimap, connection text, to see how they affect performance.

[siarheihuzarevich]

@relliv I updated the version to 17.0.8. Please update as I have made onPointerUp much faster