[EPIC] Rework the application in React Flow

EPIC

There is a library called React Flow that might solve all sorts of problems (#9, xyflow/react-flow-docs#10, canvas turning blank when left alone for long time, being dependent on font sizes, blurry text). I already played around with React Flow in - http://localhost:8080/internal/demo/react-flow-3 and it looked promising.

Here is the list of ordered tasks needed to be done in order to switch to React Flow:

[x] Replace the canvas rendering with ReactFlow, remove FSM, create a nice looking table component (maybe something inspired from DrawSQL), implement loading schema from samples, create/delete/modify table commands should still work, implement PNG export.
[x] Implement dragging to work with command pattern, replace the minimap, remove fontSize zoom, undo/redo on table movement must work with different zoom levels, implement table creation, replace third table column with SVG for PK and FK and add on on hover title.
[x] Implement rendering connections between tables. Implement connection creation/deletion. Connections should be between PK and FK fields. Closest sides should be picked for rendering connections, so if a table on the right that is connected to a table in the middle, gets moved to the left its connection point changes to the right side.

Tasks individually:

[x] Replace the canvas rendering with ReactFlow
[x] Remove FSM. It is used to change the SPA pages outside React components via Manager.changeScene, Pages should be changeable inside React components. Manager.ts class should no longer be needed.
[x] Create a nice looking table component (maybe something inspired from DrawSQL)
[x] Implement loading schema from samples,
[x] create/delete/modify table commands should still work,
[x] Implement PNG export
[x] Implement dragging to work with command pattern
[x] Replace the minimap
[x] Remove fontSize zoom
[x] undo/redo on table movement must work with different zoom levels
[x] Implement table creation
[x] Replace third table column with SVG for PK and FK and add on on hover title for FK that says the FK table name
[x] Implement rendering connections between tables. Connections should be between PK and FK fields. Closest sides should be picked for rendering connections, so if a table on the right that is connected to a table in the middle, gets moved to the left its connection point changes to the right side
[x] Implement connection creation/deletion

oskar-anderson / HedgehogDBD

[EPIC] Rework the application in React Flow #11

EPIC