Update NoteShapeUtil.tsx

packages/tldraw/api-report.md

@@ -9,6 +9,7 @@
 import { ArrayOfValidator } from '@tldraw/editor';
 import { BaseBoxShapeTool } from '@tldraw/editor';
 import { BaseBoxShapeUtil } from '@tldraw/editor';
+import { BoundsSnapGeometry } from '@tldraw/editor';
 import { BoundsSnapPoint } from '@tldraw/editor';
 import { Box } from '@tldraw/editor';
 import { Circle2d } from '@tldraw/editor';
@@ -1088,6 +1089,8 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     // (undocumented)
     component(shape: TLNoteShape): JSX_2.Element;
     // (undocumented)
+    getBoundsSnapGeometry(shape: TLNoteShape): BoundsSnapGeometry;
+    // (undocumented)
     getDefaultProps(): TLNoteShape['props'];
     // (undocumented)
     getGeometry(shape: TLNoteShape): Rectangle2d;

packages/tldraw/api/api.json

@@ -12888,6 +12888,56 @@
               "isAbstract": false,
               "name": "component"
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "tldraw!NoteShapeUtil#getBoundsSnapGeometry:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "getBoundsSnapGeometry(shape: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "TLNoteShape",
+                  "canonicalReference": "@tldraw/tlschema!TLNoteShape:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "BoundsSnapGeometry",
+                  "canonicalReference": "@tldraw/editor!BoundsSnapGeometry:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "shape",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "getBoundsSnapGeometry"
+            },
             {
               "kind": "Method",
               "canonicalReference": "tldraw!NoteShapeUtil#getDefaultProps:member(1)",

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

@@ -1,4 +1,5 @@
 import {
+	BoundsSnapGeometry,
 	DefaultFontFamilies,
 	Editor,
 	Rectangle2d,
@@ -6,6 +7,7 @@ import {
 	SvgExportContext,
 	TLNoteShape,
 	TLOnEditEndHandler,
+	Vec,
 	getDefaultColorTheme,
 	noteShapeMigrations,
 	noteShapeProps,
@@ -19,6 +21,7 @@ import { getFontDefForExport } from '../shared/defaultStyleDefs'
 import { getTextLabelSvgElement } from '../shared/getTextLabelSvgElement'
 
 const NOTE_SIZE = 200
+const NOTE_MARGIN = 10
 
 /** @public */
 export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
@@ -52,6 +55,23 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 		return new Rectangle2d({ width: NOTE_SIZE, height, isFilled: true })
 	}
 
+	override getBoundsSnapGeometry(shape: TLNoteShape): BoundsSnapGeometry {
+		const height = this.getHeight(shape)
+		return {
+			points: [
+				// new Vec(0, 0),
+				// new Vec(NOTE_SIZE, 0),
+				// new Vec(NOTE_SIZE, height),
+				// new Vec(0, height),
+				new Vec(-NOTE_MARGIN, -NOTE_MARGIN),
+				new Vec(NOTE_SIZE + NOTE_MARGIN, -NOTE_MARGIN),
+				new Vec(NOTE_SIZE + NOTE_MARGIN, height + NOTE_MARGIN),
+				new Vec(-NOTE_MARGIN, height + NOTE_MARGIN),
+				new Vec(NOTE_SIZE / 2, height / 2),
+			],
+		}
+	}
+
 	component(shape: TLNoteShape) {
 		const {
 			id,