Parcourir la 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 il y a 8 mois
Parent
commit
551bae07a7
1 fichiers modifiés avec 26 ajouts et 3 suppressions
  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(
       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<AppProps, AppState> {
         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<AppProps, AppState> {
             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<AppProps, AppState> {
 
         this.setState({
           isCropping: transformHandleType && transformHandleType !== "rotation",
+          snapLines,
         });
       }