Standard JavaScript interface for simulators

[Picuino]

I want to build another simulator (this time for control systems) and I’d like to use an interface similar to the one Falstad uses—with copy-paste functionality, cursor-hover highlighting, dragging nodes by clicking the mouse, etc.

My current pneumatic simulator has a rather basic interface, and I’d like to improve it without having to spend a huge amount of time on it.

Does anyone know of a JavaScript interface similar to Falstad that has already been developed and can be adapted for use with other simulators?
Or do I have to build it from scratch?

[mapalme]

I'm not 100 percent sure what you mean by similar to Falstad other than maybe just the look they have on there and the look you have on your other simulator? I will say that anything I've ever done in JavaScript or TypeScript for UIs I have always preferred React when possible and there are some open source libraries like this React Flow to help with some of the things you would be needing

https://github.com/xyflow/xyflow

Best of luck!

[Picuino]

I'm not familiar with React. I'm going to look into the library to see if it makes programming easier than building the interface from scratch on my own.

Thank you very much for the link.

[abeyer]

also https://github.com/xyflow/awesome-node-based-uis#javascript-libraries

[Picuino]

The problem with having so many libraries to choose from is that I don't have time to try them all out and decide which one is best suited for creating an interface similar to Falstad's (grid-based, with copy-paste-delete functionality, element highlighting on mouseover, dragging elements with the mouse, zoom in and out using the mouse, pan and center the diagram, etc.)

In any case, both Falstad's interface and mine are based on pixel-based canvas, not vector graphics using SVG.

[Picuino]

The AI recommends these libraries:
Konva.js / PixiJS
Fabric.js

Or doing it directly with native JavaScript. The advantage is that I learn more and don’t have to deal with all kinds of licenses. The downside is that it might take me longer (but considering that I have to learn the libraries from scratch, it won’t take much longer).

Given that there won't be many elements on the screen, I don't think performance will be a major issue.