This is similar to tools like figma, where the scroll wheel pans
the view and scroll is only done if the control key is pressed.
New bindings:
scroll wheel: pan y
shift + scroll wheel: pan x
ctrl + scroll wheel: zoom
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.
Makes debugging issues in conversion from screen space
to diagram space easier.
Only adding english translations as I do not speak the
other languages.
During testing I accidentally managed to submit `NaN` as a pan
coordinate. This had the unfortunate side effect of bricking the
editor.
Given the serverity of an accidental `NaN` and that `NaN`s are not
impossible considering the amount of math involved in mouse move
operations, this commit introduces a simple validation step.
The new validation step should additionally be able to unstuck
anyone who have happened into this state by accident already.
This is basically a migration from mouse events to
[pointer events](
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
).
The `PointerEvent` interface inherits all of the `MouseEvent`
properties, meaning that existing code can essentially be left
as-is. The only major change is making sure we only respond to the
"primary" pointer.
Known issues include:
* stylus hover is not detected
* touchscreens do not have a concept of hover, making it difficult
to e.g. resize areas
* no touch gesture support, e.g. "pinch-to-zoom"
