stickies: snap to grid experiment

packages/editor/api-report.md

@@ -1602,6 +1602,8 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
     canSnap: TLShapeUtilFlag<Shape>;
     canUnmount: TLShapeUtilFlag<Shape>;
     abstract component(shape: Shape): any;
+    // @internal
+    doesAutoSnap: TLShapeUtilFlag<Shape>;
     // (undocumented)
     editor: Editor;
     // @internal (undocumented)

packages/editor/src/lib/editor/shapes/ShapeUtil.ts

@@ -131,6 +131,13 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	canCrop: TLShapeUtilFlag<Shape> = () => false
 
+	/**
+	 * Whether the shape auto-snaps when translated or resized.
+	 *
+	 * @internal
+	 */
+	doesAutoSnap: TLShapeUtilFlag<Shape> = () => false
+
 	/**
 	 * Does this shape provide a background for its children? If this is true,
 	 * then any children with a `renderBackground` method will have their

packages/tldraw/api-report.md

@@ -1028,6 +1028,8 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     // (undocumented)
     component(shape: TLNoteShape): JSX_2.Element;
     // (undocumented)
+    doesAutoSnap: () => boolean;
+    // (undocumented)
     getDefaultProps(): TLNoteShape['props'];
     // (undocumented)
     getGeometry(shape: TLNoteShape): Rectangle2d;

packages/tldraw/api/api.json

@@ -12239,6 +12239,36 @@
               "isAbstract": false,
               "name": "component"
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "tldraw!NoteShapeUtil#doesAutoSnap:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "doesAutoSnap: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "() => boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "doesAutoSnap",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Method",
               "canonicalReference": "tldraw!NoteShapeUtil#getDefaultProps:member(1)",

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

@@ -27,6 +27,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 	static override migrations = noteShapeMigrations
 
 	override canEdit = () => true
+	override doesAutoSnap = () => true
 	override hideResizeHandles = () => true
 	override hideSelectionBoundsFg = () => true
 

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

@@ -234,7 +234,14 @@ export class Resizing extends StateNode {
 
 		this.editor.snaps.clearIndicators()
 
-		const shouldSnap = this.editor.user.getIsSnapMode() ? !ctrlKey : ctrlKey
+		const onlySelectedShape = this.editor.getOnlySelectedShape()
+		const shouldSnap =
+			this.editor.user.getIsSnapMode() ||
+			(onlySelectedShape && this.editor.getShapeUtil(onlySelectedShape))?.doesAutoSnap(
+				onlySelectedShape
+			)
+				? !ctrlKey
+				: ctrlKey
 
 		if (shouldSnap && selectionRotation % HALF_PI === 0) {
 			const { nudge } = this.editor.snaps.shapeBounds.snapResizeShapes({

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

@@ -398,10 +398,13 @@ export function moveShapesToPoint({
 
 	// Provisional snapping
 	editor.snaps.clearIndicators()
+	const onlySelectedShape = editor.getOnlySelectedShape()
 
 	const shouldSnap =
-		(editor.user.getIsSnapMode() ? !inputs.ctrlKey : inputs.ctrlKey) &&
+		(editor.user.getIsSnapMode() ||
-		editor.inputs.pointerVelocity.len() < 0.5 // ...and if the user is not dragging fast
+		(onlySelectedShape && editor.getShapeUtil(onlySelectedShape))?.doesAutoSnap(onlySelectedShape)
+			? !inputs.ctrlKey
+			: inputs.ctrlKey) && editor.inputs.pointerVelocity.len() < 0.5 // ...and if the user is not dragging fast
 
 	if (shouldSnap) {
 		const { nudge } = editor.snaps.shapeBounds.snapTranslateShapes({