fix: rewrite coordinate management

After some initial smaller fixes, it turned out that I had broken
the red line used when linking fields. Fixing this was not trivial
as I found myself battling a lot of small bugs relating to scale
and translation in the existing code. This was made extra difficult
as a lot of coordinates were calculated when necessary in
Canvas.jsx.

This commit attempts to simplify the coordinate management in a few
different ways:
* There are now two distinct coordinate systems in use, typically
  referred to as "spaces". Screen space and diagram space.
* Diagram space is no longer measured in pixels (though the
  dimension-less measure used instead still maps to pixels at 100%
  zoom).
* The canvas now exposes helper methods for transforming between
  spaces.
* Zoom and translation is now managed via the svg viewBox property.
  * This makes moving items in diagram space much easier as the
    coordinates remain constant regardless of zoom level.
* The canvas now wraps the current mouse position in a context
  object, making mouse movement much easier to work with.
* The transform.pan property now refers to the center of the screen.

A new feature in this commit is that scroll wheel zoom is now based
on the current cursor location, making the diagram more convenient
to move around in.

I have tried to focus on Canvas.jsx and avoid changes that might be
desctructive on existing save files. I also believe more refactors
and abstractions could be introduced based on these changes to make
the diagram even easier to work with. However, I deem that out of
scope for now.
This commit is contained in:
Felix Zedén Yverås
2024-07-01 00:53:53 +02:00
parent 32c82168fe
commit e4e22dee20
11 changed files with 437 additions and 203 deletions

View File

@@ -19,6 +19,7 @@
"@uiw/react-codemirror": "^4.21.25",
"@vercel/analytics": "^1.2.2",
"axios": "^1.6.2",
"classnames": "^2.5.1",
"dexie": "^3.2.4",
"dexie-react-hooks": "^1.1.7",
"file-saver": "^2.0.5",
@@ -35,7 +36,8 @@
"react-hotkeys-hook": "^4.4.1",
"react-i18next": "^14.1.1",
"react-router-dom": "^6.21.0",
"url": "^0.11.1"
"url": "^0.11.1",
"usehooks-ts": "^3.1.0"
},
"devDependencies": {
"@types/react": "^18.2.43",