feat: snap when cropping as well (#8831)

* crop with snap

* make crop snap work with cmd as well

* turn off grid with cmd as well in crop
This commit is contained in:
Ryan Di 2024-12-16 18:31:33 +08:00 committed by GitHub
parent 2af3221974
commit 551bae07a7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -10356,7 +10356,7 @@ class App extends React.Component<AppProps, AppState> {
const [x, y] = getGridPoint( const [x, y] = getGridPoint(
pointerCoords.x - pointerDownState.resize.offset.x, pointerCoords.x - pointerDownState.resize.offset.x,
pointerCoords.y - pointerDownState.resize.offset.y, pointerCoords.y - pointerDownState.resize.offset.y,
this.getEffectiveGridSize(), event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
); );
const croppingElement = this.scene const croppingElement = this.scene
@ -10382,6 +10382,28 @@ class App extends React.Component<AppProps, AppState> {
image && image &&
!(image instanceof Promise) !(image instanceof Promise)
) { ) {
const [gridX, gridY] = getGridPoint(
pointerCoords.x,
pointerCoords.y,
event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
);
const dragOffset = {
x: gridX - pointerDownState.originInGrid.x,
y: gridY - pointerDownState.originInGrid.y,
};
this.maybeCacheReferenceSnapPoints(event, [croppingElement]);
const { snapOffset, snapLines } = snapResizingElements(
[croppingElement],
[croppingAtStateStart],
this,
event,
dragOffset,
transformHandleType,
);
mutateElement( mutateElement(
croppingElement, croppingElement,
cropElement( cropElement(
@ -10389,8 +10411,8 @@ class App extends React.Component<AppProps, AppState> {
transformHandleType, transformHandleType,
image.naturalWidth, image.naturalWidth,
image.naturalHeight, image.naturalHeight,
x, x + snapOffset.x,
y, y + snapOffset.y,
event.shiftKey event.shiftKey
? croppingAtStateStart.width / croppingAtStateStart.height ? croppingAtStateStart.width / croppingAtStateStart.height
: undefined, : undefined,
@ -10410,6 +10432,7 @@ class App extends React.Component<AppProps, AppState> {
this.setState({ this.setState({
isCropping: transformHandleType && transformHandleType !== "rotation", isCropping: transformHandleType && transformHandleType !== "rotation",
snapLines,
}); });
} }