Show error when clicking on image before mask (#8547)

This commit is contained in:
Nicolas Mowen 2023-11-09 05:42:19 -07:00 committed by GitHub
parent fa96ec64e4
commit 1b57f8c7e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -353,6 +353,7 @@ ${Object.keys(objectMaskPoints)
snap={snap} snap={snap}
width={width} width={width}
height={height} height={height}
setError={setError}
/> />
</div> </div>
<div className="max-w-xs"> <div className="max-w-xs">
@ -434,7 +435,7 @@ function boundedSize(value, maxValue, snap) {
return newValue; return newValue;
} }
function EditableMask({ onChange, points, scale, snap, width, height }) { function EditableMask({ onChange, points, scale, snap, width, height, setError }) {
const boundingRef = useRef(null); const boundingRef = useRef(null);
const handleMovePoint = useCallback( const handleMovePoint = useCallback(
@ -455,6 +456,11 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
// Add a new point between the closest two other points // Add a new point between the closest two other points
const handleAddPoint = useCallback( const handleAddPoint = useCallback(
(event) => { (event) => {
if (!points) {
setError('You must choose an item to edit or add a new item before adding a point.');
return
}
const { offsetX, offsetY } = event; const { offsetX, offsetY } = event;
const scaledX = boundedSize((offsetX - MaskInset) / scale, width, snap); const scaledX = boundedSize((offsetX - MaskInset) / scale, width, snap);
const scaledY = boundedSize((offsetY - MaskInset) / scale, height, snap); const scaledY = boundedSize((offsetY - MaskInset) / scale, height, snap);
@ -474,7 +480,7 @@ function EditableMask({ onChange, points, scale, snap, width, height }) {
newPoints.splice(index, 0, newPoint); newPoints.splice(index, 0, newPoint);
onChange(newPoints); onChange(newPoints);
}, },
[height, width, scale, points, onChange, snap] [height, width, scale, points, onChange, snap, setError]
); );
const handleRemovePoint = useCallback( const handleRemovePoint = useCallback(