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.
103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
import { createContext, useState } from "react";
|
|
import { Action, ObjectType, defaultBlue } from "../data/constants";
|
|
import useUndoRedo from "../hooks/useUndoRedo";
|
|
import useTransform from "../hooks/useTransform";
|
|
import useSelect from "../hooks/useSelect";
|
|
import { Toast } from "@douyinfe/semi-ui";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export const AreasContext = createContext(null);
|
|
|
|
export default function AreasContextProvider({ children }) {
|
|
const { t } = useTranslation();
|
|
const [areas, setAreas] = useState([]);
|
|
const { transform } = useTransform();
|
|
const { selectedElement, setSelectedElement } = useSelect();
|
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
|
|
|
const addArea = (data, addToHistory = true) => {
|
|
if (data) {
|
|
setAreas((prev) => {
|
|
const temp = prev.slice();
|
|
temp.splice(data.id, 0, data);
|
|
return temp.map((t, i) => ({ ...t, id: i }));
|
|
});
|
|
} else {
|
|
const width = 200;
|
|
const height = 200;
|
|
setAreas((prev) => [
|
|
...prev,
|
|
{
|
|
id: prev.length,
|
|
name: `area_${prev.length}`,
|
|
x: transform.pan.x - width / 2,
|
|
y: transform.pan.y - height / 2,
|
|
width,
|
|
height,
|
|
color: defaultBlue,
|
|
},
|
|
]);
|
|
}
|
|
if (addToHistory) {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.ADD,
|
|
element: ObjectType.AREA,
|
|
message: t("add_area"),
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}
|
|
};
|
|
|
|
const deleteArea = (id, addToHistory = true) => {
|
|
if (addToHistory) {
|
|
Toast.success(t("area_deleted"));
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.DELETE,
|
|
element: ObjectType.AREA,
|
|
data: areas[id],
|
|
message: t("delete_area", areas[id].name),
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}
|
|
setAreas((prev) =>
|
|
prev.filter((e) => e.id !== id).map((e, i) => ({ ...e, id: i })),
|
|
);
|
|
if (id === selectedElement.id) {
|
|
setSelectedElement((prev) => ({
|
|
...prev,
|
|
element: ObjectType.NONE,
|
|
id: -1,
|
|
open: false,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const updateArea = (id, values) => {
|
|
setAreas((prev) =>
|
|
prev.map((t) => {
|
|
if (t.id === id) {
|
|
return {
|
|
...t,
|
|
...values,
|
|
};
|
|
}
|
|
return t;
|
|
}),
|
|
);
|
|
};
|
|
|
|
return (
|
|
<AreasContext.Provider
|
|
value={{ areas, setAreas, updateArea, addArea, deleteArea }}
|
|
>
|
|
{children}
|
|
</AreasContext.Provider>
|
|
);
|
|
}
|