question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dragging from top corners cause y coordinate to rapidly go negative

See original GitHub issue

According to React DevTools, the y coordinate ended up set to -752.3333333…. Usually both top corners cause this, but when I was taking this screen recording, that was the first time it didn’t (for the first one, top left). The bottom corners have not exhibited this behaviour at all.

react-crop-bug-top-corner-drag

React: v16.13.1 React Crop: v8.6.2 (can’t use 8.6.3 because it causes #355 but without a border set)

const [crop, setCrop] = useState({ aspect: 3 / 2 });
const PHOTO_MIN_HEIGHT = 1080;
const PHOTO_MIN_WIDTH = 1029;
const photoSrc = {
  file,
  url: URL.createObjectURL(file),
};

//

<ReactCrop
  crop={crop}
  minHeight={PHOTO_MIN_HEIGHT}
  minWidth={PHOTO_MIN_WIDTH}
  onChange={setCrop}
  onImageLoaded={(imageElm) => imgRef.current = imageElm}
  src={photoSrc.url}
/>

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
DominicTobiascommented, Jun 6, 2020

Hah damn, thanks for checking, will investigate. Probably the issue was already there.

1reaction
jacob-fueledcommented, Jun 5, 2020

It does not (seem to) occur when the minHeight and minWidth props are removed.

However, the source image height and width appear to be red herrings. When I use a photo that is larger than those minimums, the issue still occurs (when the mins are set).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Representing objects with negative coordintaes in JavaFX
On Mouse Up, record the screen coordinate when the mouse was released after a drag, name it dragEndPoint. Subtract dragStartPoint's coordinates ...
Read more >
Adjust corner radius and smoothing – Figma Help Center
These refer to the top-left corner of the layer's bounds. Open the Design panel in the right sidebar. Use the X and Y...
Read more >
A Quick Guide to Diagnosing 10 Common Steering Issues
Possible Cause #1: Friction or too little clearance in the steering gear, steering linkage or ball joints. Possible Cause #2: Low or uneven...
Read more >
Understanding Offsets in Flutter - LogRocket Blog
Offset direction · On the x-axis, positive values move from point of origin to the right, while negative values move from point of...
Read more >
Chapter 5: Aerodynamics of Flight - FAA
Drag —a rearward, retarding force caused by disruption ... This is induced drag. In order to create a greater negative pressure on the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found