e4e22dee20
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.
47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
import { createContext, useCallback, useState } from "react";
|
|
|
|
export const TransformContext = createContext(null);
|
|
|
|
export default function TransformContextProvider({ children }) {
|
|
const [transform, setTransformInternal] = useState({
|
|
zoom: 1,
|
|
pan: { x: 0, y: 0 },
|
|
});
|
|
|
|
/**
|
|
* @type {typeof DrawDB.TransformContext["setTransform"]}
|
|
*/
|
|
const setTransform = useCallback(
|
|
(actionOrValue) => {
|
|
const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
|
|
const findFirstNumber = (...values) =>
|
|
values.find((value) => typeof value === "number" && !isNaN(value));
|
|
|
|
setTransformInternal((prev) => {
|
|
if (typeof actionOrValue === "function") {
|
|
actionOrValue = actionOrValue(prev);
|
|
}
|
|
|
|
return {
|
|
zoom: clamp(
|
|
findFirstNumber(actionOrValue.zoom, prev.zoom, 1),
|
|
0.02,
|
|
5,
|
|
),
|
|
pan: {
|
|
x: findFirstNumber(actionOrValue.pan?.x, prev.pan?.x, 0),
|
|
y: findFirstNumber(actionOrValue.pan?.y, prev.pan?.y, 0),
|
|
},
|
|
};
|
|
});
|
|
},
|
|
[setTransformInternal],
|
|
);
|
|
|
|
return (
|
|
<TransformContext.Provider value={{ transform, setTransform }}>
|
|
{children}
|
|
</TransformContext.Provider>
|
|
);
|
|
}
|