Merge pull request #111 from fiskbil/main
Change cropper movement from accept/reject to clamping.
This commit is contained in:
commit
964795ceb5
@ -33,6 +33,39 @@ interface Props {
|
||||
minWidth: number
|
||||
}
|
||||
|
||||
const clamp = (
|
||||
newPos: number,
|
||||
newLength: number,
|
||||
oldPos: number,
|
||||
oldLength: number,
|
||||
minLength: number,
|
||||
maxLength: number
|
||||
) => {
|
||||
if (newPos !== oldPos && newLength === oldLength) {
|
||||
if (newPos < 0) {
|
||||
return [0, oldLength]
|
||||
}
|
||||
if (newPos + newLength > maxLength) {
|
||||
return [maxLength - oldLength, oldLength]
|
||||
}
|
||||
} else {
|
||||
if (newLength < minLength) {
|
||||
if (newPos === oldPos) {
|
||||
return [newPos, minLength]
|
||||
}
|
||||
return [newPos + newLength - minLength, minLength]
|
||||
}
|
||||
if (newPos < 0) {
|
||||
return [0, newPos + newLength]
|
||||
}
|
||||
if (newPos + newLength > maxLength) {
|
||||
return [newPos, maxLength - newPos]
|
||||
}
|
||||
}
|
||||
|
||||
return [newPos, newLength]
|
||||
}
|
||||
|
||||
const Croper = (props: Props) => {
|
||||
const { minHeight, minWidth, maxHeight, maxWidth, scale } = props
|
||||
const [x, setX] = useRecoilState(croperX)
|
||||
@ -63,18 +96,12 @@ const Croper = (props: Props) => {
|
||||
console.log('focus')
|
||||
}
|
||||
|
||||
const checkTopBottomLimit = (newY: number, newHeight: number) => {
|
||||
if (newY > 0 && newHeight > minHeight && newY + newHeight <= maxHeight) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
const clampLeftRight = (newX: number, newWidth: number) => {
|
||||
return clamp(newX, newWidth, x, width, minWidth, maxWidth)
|
||||
}
|
||||
|
||||
const checkLeftRightLimit = (newX: number, newWidth: number) => {
|
||||
if (newX > 0 && newWidth > minWidth && newX + newWidth <= maxWidth) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
const clampTopBottom = (newY: number, newHeight: number) => {
|
||||
return clamp(newY, newHeight, y, height, minHeight, maxHeight)
|
||||
}
|
||||
|
||||
const onPointerMove = (e: PointerEvent) => {
|
||||
@ -90,33 +117,31 @@ const Croper = (props: Props) => {
|
||||
const moveTop = () => {
|
||||
const newHeight = evData.initHeight - offsetY
|
||||
const newY = evData.initY + offsetY
|
||||
if (checkTopBottomLimit(newY, newHeight)) {
|
||||
setHeight(newHeight)
|
||||
setY(newY)
|
||||
}
|
||||
const [clampedY, clampedHeight] = clampTopBottom(newY, newHeight)
|
||||
setHeight(clampedHeight)
|
||||
setY(clampedY)
|
||||
}
|
||||
|
||||
const moveBottom = () => {
|
||||
const newHeight = evData.initHeight + offsetY
|
||||
if (checkTopBottomLimit(evData.initY, newHeight)) {
|
||||
setHeight(newHeight)
|
||||
}
|
||||
const [clampedY, clampedHeight] = clampTopBottom(evData.initY, newHeight)
|
||||
setHeight(clampedHeight)
|
||||
setY(clampedY)
|
||||
}
|
||||
|
||||
const moveLeft = () => {
|
||||
const newWidth = evData.initWidth - offsetX
|
||||
const newX = evData.initX + offsetX
|
||||
if (checkLeftRightLimit(newX, newWidth)) {
|
||||
setWidth(newWidth)
|
||||
setX(newX)
|
||||
}
|
||||
const [clampedX, clampedWidth] = clampLeftRight(newX, newWidth)
|
||||
setWidth(clampedWidth)
|
||||
setX(clampedX)
|
||||
}
|
||||
|
||||
const moveRight = () => {
|
||||
const newWidth = evData.initWidth + offsetX
|
||||
if (checkLeftRightLimit(evData.initX, newWidth)) {
|
||||
setWidth(newWidth)
|
||||
}
|
||||
const [clampedX, clampedWidth] = clampLeftRight(evData.initX, newWidth)
|
||||
setWidth(clampedWidth)
|
||||
setX(clampedX)
|
||||
}
|
||||
|
||||
if (isResizing) {
|
||||
@ -166,13 +191,12 @@ const Croper = (props: Props) => {
|
||||
if (isMoving) {
|
||||
const newX = evData.initX + offsetX
|
||||
const newY = evData.initY + offsetY
|
||||
if (
|
||||
checkLeftRightLimit(newX, evData.initWidth) &&
|
||||
checkTopBottomLimit(newY, evData.initHeight)
|
||||
) {
|
||||
setX(newX)
|
||||
setY(newY)
|
||||
}
|
||||
const [clampedX, clampedWidth] = clampLeftRight(newX, evData.initWidth)
|
||||
const [clampedY, clampedHeight] = clampTopBottom(newY, evData.initHeight)
|
||||
setWidth(clampedWidth)
|
||||
setHeight(clampedHeight)
|
||||
setX(clampedX)
|
||||
setY(clampedY)
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user