[fix] Rotated crop handle (#3093)

This PR fixes a bug where local rotation was used in cropping handles
rather than absolute rotation.
![Kapture 2024-03-10 at 18 21
51](https://github.com/tldraw/tldraw/assets/23072548/71ee5e46-59de-4c1d-8f54-27052677c0f7)



### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Crop an image
2. Place the image into a rotated parent
3. Crop the image
4. Rotate the image
5. Crop the image

The handles should be accurately rotated in all cases.

### Release Notes

- Fixed a bug that could cause rotated cropping images to have
incorrectly rotated handles.

packages/tldraw/src/lib/tools/SelectTool/childStates/Cropping.ts

@@ -67,7 +67,7 @@ export class Cropping extends StateNode {
 		this.editor.updateInstanceState({
 			cursor: {
 				type: cursorType,
-				rotation: selectedShape.rotation,
+				rotation: this.editor.getSelectionRotation(),
 			},
 		})
 	}

packages/tldraw/src/lib/tools/SelectTool/childStates/PointingCropHandle.ts

@@ -1,4 +1,4 @@
-import { StateNode, TLEventHandlers, TLPointerEventInfo, TLShape } from '@tldraw/editor'
+import { StateNode, TLEventHandlers, TLPointerEventInfo } from '@tldraw/editor'
 import { CursorTypeMap } from './PointingResizeHandle'
 
 type TLPointingCropHandleInfo = TLPointerEventInfo & {
@@ -12,23 +12,19 @@ export class PointingCropHandle extends StateNode {
 
 	private info = {} as TLPointingCropHandleInfo
 
-	private updateCursor(shape: TLShape) {
-		const cursorType = CursorTypeMap[this.info.handle!]
-		this.editor.updateInstanceState({
-			cursor: {
-				type: cursorType,
-				rotation: shape.rotation,
-			},
-		})
-	}
-
 	override onEnter = (info: TLPointingCropHandleInfo) => {
 		this.info = info
 		this.parent.setCurrentToolIdMask(info.onInteractionEnd)
 		const selectedShape = this.editor.getSelectedShapes()[0]
 		if (!selectedShape) return
 
-		this.updateCursor(selectedShape)
+		const cursorType = CursorTypeMap[this.info.handle!]
+		this.editor.updateInstanceState({
+			cursor: {
+				type: cursorType,
+				rotation: this.editor.getSelectionRotation(),
+			},
+		})
 		this.editor.setCroppingShape(selectedShape.id)
 	}
 

packages/tldraw/src/lib/tools/SelectTool/childStates/PointingResizeHandle.ts

@@ -35,7 +35,10 @@ export class PointingResizeHandle extends StateNode {
 		const selected = this.editor.getSelectedShapes()
 		const cursorType = CursorTypeMap[this.info.handle!]
 		this.editor.updateInstanceState({
-			cursor: { type: cursorType, rotation: selected.length === 1 ? selected[0].rotation : 0 },
+			cursor: {
+				type: cursorType,
+				rotation: selected.length === 1 ? this.editor.getSelectionRotation() : 0,
+			},
 		})
 	}
 

packages/tldraw/src/lib/tools/SelectTool/childStates/PointingRotateHandle.ts

@@ -11,11 +11,10 @@ export class PointingRotateHandle extends StateNode {
 	private info = {} as PointingRotateHandleInfo
 
 	private updateCursor() {
-		const selectionRotation = this.editor.getSelectionRotation()
 		this.editor.updateInstanceState({
 			cursor: {
 				type: CursorTypeMap[this.info.handle as RotateCorner],
-				rotation: selectionRotation,
+				rotation: this.editor.getSelectionRotation(),
 			},
 		})
 	}