stickies: try finding empty spot with only one handle

packages/tldraw/api-report.md

@@ -1087,7 +1087,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     // (undocumented)
     component(shape: TLNoteShape): JSX_2.Element;
     // (undocumented)
-    duplicateShape(shape: TLNoteShape, direction: 'down' | 'left' | 'right' | 'up'): void;
+    duplicateShape(shape: TLNoteShape): void;
     // (undocumented)
     getDefaultProps(): TLNoteShape['props'];
     // (undocumented)
@@ -1161,7 +1161,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
     // (undocumented)
     onHandlePointerUp(info: {
         shape: TLNoteShape;
-        handleId: 'down' | 'left' | 'right' | 'up';
+        handleId: 'create';
     }): void;
     // (undocumented)
     static props: {

packages/tldraw/api/api.json

@@ -12893,14 +12893,6 @@
                   "text": "TLNoteShape",
                   "canonicalReference": "@tldraw/tlschema!TLNoteShape:type"
                 },
-                {
-                  "kind": "Content",
-                  "text": ", direction: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "'down' | 'left' | 'right' | 'up'"
-                },
                 {
                   "kind": "Content",
                   "text": "): "
@@ -12916,8 +12908,8 @@
               ],
               "isStatic": false,
               "returnTypeTokenRange": {
-                "startIndex": 5,
-                "endIndex": 6
+                "startIndex": 3,
+                "endIndex": 4
               },
               "releaseTag": "Public",
               "isProtected": false,
@@ -12930,14 +12922,6 @@
                     "endIndex": 2
                   },
                   "isOptional": false
-                },
-                {
-                  "parameterName": "direction",
-                  "parameterTypeTokenRange": {
-                    "startIndex": 3,
-                    "endIndex": 4
-                  },
-                  "isOptional": false
                 }
               ],
               "isOptional": false,
@@ -13567,7 +13551,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": ";\n        handleId: 'down' | 'left' | 'right' | 'up';\n    }"
+                  "text": ";\n        handleId: 'create';\n    }"
                 },
                 {
                   "kind": "Content",

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

@@ -44,12 +44,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 			verticalAlign: 'middle',
 			growY: 0,
 			url: '',
-			buttons: [
-				{ x: 0.5, y: -0.1 },
-				{ x: 1.1, y: 0.5 },
-				{ x: 0.5, y: 1.1 },
-				{ x: -0.1, y: 0.5 },
-			],
+			buttons: [{ x: 0.5, y: 0.5 }],
 		}
 	}
 
@@ -63,9 +58,9 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 	}
 	override getHandles(shape: TLNoteShape): TLHandle[] {
 		const { buttons } = shape.props
-		const directionArr = ['up', 'right', 'down', 'left']
-		return buttons.map((button, i) => ({
-			id: directionArr[i],
+		// const directionArr = ['up', 'right', 'down', 'left']
+		return buttons.map((button) => ({
+			id: 'create',
 			type: 'vertex',
 			index: ZERO_INDEX_KEY,
 			x: button.x * NOTE_SIZE,
@@ -204,20 +199,20 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 			])
 		}
 	}
-	onHandlePointerUp(info: { shape: TLNoteShape; handleId: 'up' | 'down' | 'left' | 'right' }) {
-		this.duplicateShape(info.shape, info.handleId)
+	onHandlePointerUp(info: { shape: TLNoteShape; handleId: 'create' }) {
+		this.duplicateShape(info.shape)
 	}
-	duplicateShape(shape: TLNoteShape, direction: 'up' | 'down' | 'left' | 'right') {
+	duplicateShape(shape: TLNoteShape) {
 		// give the shape a bit of padding to make the arrows look better
 		const distance = NOTE_SIZE + 100
 		const centerOffset = NOTE_SIZE / 2
 		let count = 0
 		let emptySpot = {} as VecLike
 		const positions = {
-			up: [] as VecLike[],
+			right: [] as VecLike[],
 			down: [] as VecLike[],
 			left: [] as VecLike[],
-			right: [] as VecLike[],
+			up: [] as VecLike[],
 		}
 		const LAYERS = 7
 		const rotationRadians = this.editor.getShapePageTransform(shape).rotation()
@@ -281,14 +276,17 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 		const manhattanDistance = (a: VecLike, b: VecLike) => Math.abs(a.x - b.x) + Math.abs(a.y - b.y)
 
 		// Sort the positions in each direction based on their Manhattan distance to the shape's origin
+		let allPositions: VecLike[] = []
 		Object.keys(positions).forEach((direction) => {
-			positions[direction as 'up' | 'down' | 'left' | 'right'].sort(
-				(a: VecLike, b: VecLike) => manhattanDistance(a, shape) - manhattanDistance(b, shape)
-			)
+			allPositions = allPositions.concat(positions[direction as 'up' | 'down' | 'left' | 'right'])
 		})
 
-		while (count < positions[direction].length) {
-			const position = positions[direction][count]
+		allPositions = allPositions.sort(
+			(a: VecLike, b: VecLike) => manhattanDistance(a, shape) - manhattanDistance(b, shape)
+		)
+
+		while (count < allPositions.length) {
+			const position = allPositions[count]
 			/* A better version of this is to draw a box where you want the shape to go 
 			and hit test for any shapes that may be inside the box, similar to the logic 
 			in the select tool. For now, we're just checking a single point */