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.
35 lines
814 B
JavaScript
35 lines
814 B
JavaScript
import { createContext, useState } from "react";
|
|
import { tableWidth } from "../data/constants";
|
|
|
|
export const SettingsContext = createContext({
|
|
strictMode: false,
|
|
showFieldSummary: true,
|
|
showGrid: true,
|
|
mode: "light",
|
|
autosave: true,
|
|
panning: true,
|
|
showCardinality: true,
|
|
tableWidth: tableWidth,
|
|
showDebugCoordinates: false,
|
|
});
|
|
|
|
export default function SettingsContextProvider({ children }) {
|
|
const [settings, setSettings] = useState({
|
|
strictMode: false,
|
|
showFieldSummary: true,
|
|
showGrid: true,
|
|
mode: "light",
|
|
autosave: true,
|
|
panning: true,
|
|
showCardinality: true,
|
|
tableWidth: tableWidth,
|
|
showDebugCoordinates: false,
|
|
});
|
|
|
|
return (
|
|
<SettingsContext.Provider value={{ settings, setSettings }}>
|
|
{children}
|
|
</SettingsContext.Provider>
|
|
);
|
|
}
|