drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-12-22 03:00:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: validate transform data before storage

Browse Source 
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:
Felix Zedén Yverås
2024-06-26 21:41:31 +02:00
parent cdecf7c633
commit 354ea47529
2 changed files with 36 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/EditorCanvas/Canvas.jsx
View File

@@ -139,8 +139,8 @@ export default function Canvas() {
const rect = canvas.current.getBoundingClientRect();
setLinkingLine({
...linkingLine,
endX: (e.clientX - rect.left - transform.pan?.x) / transform.zoom,
endY: (e.clientY - rect.top - transform.pan?.y) / transform.zoom,
endX: (e.clientX - rect.left - transform.pan.x) / transform.zoom,
endY: (e.clientY - rect.top - transform.pan.y) / transform.zoom,
});
} else if (
panning.isPanning &&
@@ -154,7 +154,7 @@ export default function Canvas() {
const dy = e.clientY - panning.dy;
setTransform((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 }));
} else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
@@ -258,7 +258,7 @@ export default function Canvas() {
};
const didPan = () =>
!(transform.pan?.x === panning.x && transform.pan?.y === panning.y);
!(transform.pan.x === panning.x && transform.pan.y === panning.y);
const getMovedElementDetails = () => {
switch (dragging.element) {
@@ -477,7 +477,7 @@ export default function Canvas() {
)}
<g
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",
}}
id="diagram"