Stickies: Bring stickies to front when you move them (#3353)

When you start translating stickies, bring them to front.


https://github.com/tldraw/tldraw/assets/15892272/bdd1bc0c-8e94-435a-98ef-d09f9f93f4cb


### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add a brief release note for your PR here.

packages/tldraw/api-report.md

@@ -1179,6 +1179,8 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     // (undocumented)
     onEditEnd: TLOnEditEndHandler<TLNoteShape>;
     // (undocumented)
+    onTranslateStart: (shape: TLNoteShape) => void;
+    // (undocumented)
     static props: {
         color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">;
         size: EnumStyleProp<"l" | "m" | "s" | "xl">;

packages/tldraw/api/api.json

@@ -13618,6 +13618,45 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "tldraw!NoteShapeUtil#onTranslateStart:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "onTranslateStart: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "(shape: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "TLNoteShape",
+                  "canonicalReference": "@tldraw/tlschema!TLNoteShape:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ") => void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "onTranslateStart",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 4
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "tldraw!NoteShapeUtil.props:member",

packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -274,6 +274,10 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 		return getGrowY(this.editor, next, prev.props.growY)
 	}
 
+	override onTranslateStart = (shape: TLNoteShape) => {
+		this.editor.bringToFront([shape])
+	}
+
 	override onEditEnd: TLOnEditEndHandler<TLNoteShape> = (shape) => {
 		const {
 			id,

packages/tldraw/src/test/translating.test.ts

@@ -1,5 +1,6 @@
 import {
 	GapsSnapIndicator,
+	IndexKey,
 	PointsSnapIndicator,
 	SnapIndicator,
 	TLArrowShape,
@@ -2063,7 +2064,8 @@ describe('Note shape grid helper positions / pits', () => {
 			.pointerMove(pit.x - 4, pit.y - 4) // not exactly in the pit...
 
 		// B snaps the selection to the pit
-		editor.expectShapeToMatch({ ...shapeB, x: 220, y: 0 })
+		// (index is manually set because the sticky gets brought to front)
+		editor.expectShapeToMatch({ ...shapeB, x: 220, y: 0, index: 'a4' as IndexKey })
 		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 220, y: 0, w: 400, h: 200 })
 
 		editor.cancel()
@@ -2083,7 +2085,8 @@ describe('Note shape grid helper positions / pits', () => {
 
 		// Even though B is in the same place as it was when it snapped (while dragging over B),
 		// because our cursor is over C it won't fall into the pit—because it's not hovered
-		editor.expectShapeToMatch({ ...shapeB, x: 216, y: -4 })
+		// (index is manually set because the sticky gets brought to front)
+		editor.expectShapeToMatch({ ...shapeB, x: 216, y: -4, index: 'a4' as IndexKey })
 		expect(editor.getSelectionPageBounds()).toMatchObject({ x: 216, y: -4, w: 400, h: 200 })
 	})