Browse Source

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
Ryan Di 8 months ago
parent
commit
551bae07a7
1 changed files with 26 additions and 3 deletions
  1. 26 3
      packages/excalidraw/components/App.tsx

+ 26 - 3
packages/excalidraw/components/App.tsx

@@ -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,
-            y,
+            x + snapOffset.x,
+            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,
         });
         });
       }
       }