fix: validate transform data before storage
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 commit is contained in:
parent
cdecf7c633
commit
354ea47529
@ -139,8 +139,8 @@ export default function Canvas() {
|
|||||||
const rect = canvas.current.getBoundingClientRect();
|
const rect = canvas.current.getBoundingClientRect();
|
||||||
setLinkingLine({
|
setLinkingLine({
|
||||||
...linkingLine,
|
...linkingLine,
|
||||||
endX: (e.clientX - rect.left - transform.pan?.x) / transform.zoom,
|
endX: (e.clientX - rect.left - transform.pan.x) / transform.zoom,
|
||||||
endY: (e.clientY - rect.top - transform.pan?.y) / transform.zoom,
|
endY: (e.clientY - rect.top - transform.pan.y) / transform.zoom,
|
||||||
});
|
});
|
||||||
} else if (
|
} else if (
|
||||||
panning.isPanning &&
|
panning.isPanning &&
|
||||||
@ -154,7 +154,7 @@ export default function Canvas() {
|
|||||||
const dy = e.clientY - panning.dy;
|
const dy = e.clientY - panning.dy;
|
||||||
setTransform((prev) => ({
|
setTransform((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
pan: { x: prev.pan?.x + dx, y: prev.pan?.y + dy },
|
pan: { x: prev.pan.x + dx, y: prev.pan.y + dy },
|
||||||
}));
|
}));
|
||||||
setPanning((prev) => ({ ...prev, dx: e.clientX, dy: e.clientY }));
|
setPanning((prev) => ({ ...prev, dx: e.clientX, dy: e.clientY }));
|
||||||
} else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
|
} else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
|
||||||
@ -258,7 +258,7 @@ export default function Canvas() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const didPan = () =>
|
const didPan = () =>
|
||||||
!(transform.pan?.x === panning.x && transform.pan?.y === panning.y);
|
!(transform.pan.x === panning.x && transform.pan.y === panning.y);
|
||||||
|
|
||||||
const getMovedElementDetails = () => {
|
const getMovedElementDetails = () => {
|
||||||
switch (dragging.element) {
|
switch (dragging.element) {
|
||||||
@ -477,7 +477,7 @@ export default function Canvas() {
|
|||||||
)}
|
)}
|
||||||
<g
|
<g
|
||||||
style={{
|
style={{
|
||||||
transform: `translate(${transform.pan?.x}px, ${transform.pan?.y}px) scale(${transform.zoom})`,
|
transform: `translate(${transform.pan.x}px, ${transform.pan.y}px) scale(${transform.zoom})`,
|
||||||
transformOrigin: "top left",
|
transformOrigin: "top left",
|
||||||
}}
|
}}
|
||||||
id="diagram"
|
id="diagram"
|
||||||
|
@ -1,13 +1,42 @@
|
|||||||
import { createContext, useState } from "react";
|
import { createContext, useCallback, useState } from "react";
|
||||||
|
|
||||||
export const TransformContext = createContext(null);
|
export const TransformContext = createContext(null);
|
||||||
|
|
||||||
export default function TransformContextProvider({ children }) {
|
export default function TransformContextProvider({ children }) {
|
||||||
const [transform, setTransform] = useState({
|
const [transform, setTransformInternal] = useState({
|
||||||
zoom: 1,
|
zoom: 1,
|
||||||
pan: { x: 0, y: 0 },
|
pan: { x: 0, y: 0 },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {typeof setTransformInternal}
|
||||||
|
*/
|
||||||
|
const setTransform = useCallback(
|
||||||
|
(actionOrValue) => {
|
||||||
|
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 (
|
return (
|
||||||
<TransformContext.Provider value={{ transform, setTransform }}>
|
<TransformContext.Provider value={{ transform, setTransform }}>
|
||||||
{children}
|
{children}
|
||||||
|
Loading…
Reference in New Issue
Block a user