From 551bae07a755a60ccc8f952b3770c0b837ab27fe Mon Sep 17 00:00:00 2001 From: Ryan Di Date: Mon, 16 Dec 2024 18:31:33 +0800 Subject: [PATCH] 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 --- packages/excalidraw/components/App.tsx | 29 +++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 83bae5aba..d5e5578ca 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -10356,7 +10356,7 @@ class App extends React.Component { const [x, y] = getGridPoint( pointerCoords.x - pointerDownState.resize.offset.x, pointerCoords.y - pointerDownState.resize.offset.y, - this.getEffectiveGridSize(), + event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(), ); const croppingElement = this.scene @@ -10382,6 +10382,28 @@ class App extends React.Component { image && !(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( croppingElement, cropElement( @@ -10389,8 +10411,8 @@ class App extends React.Component { transformHandleType, image.naturalWidth, image.naturalHeight, - x, - y, + x + snapOffset.x, + y + snapOffset.y, event.shiftKey ? croppingAtStateStart.width / croppingAtStateStart.height : undefined, @@ -10410,6 +10432,7 @@ class App extends React.Component { this.setState({ isCropping: transformHandleType && transformHandleType !== "rotation", + snapLines, }); }