rename updateHoveredId, add hitLocked option

packages/editor/api-report.md

@@ -753,6 +753,7 @@ export class Editor extends EventEmitter<TLEventMap> {
         hitFrameInside?: boolean | undefined;
         hitInside?: boolean | undefined;
         hitLabels?: boolean | undefined;
+        hitLocked?: boolean | undefined;
         margin?: number | undefined;
         renderingOnly?: boolean | undefined;
     }): TLShape | undefined;

packages/editor/api/api.json

@@ -12551,7 +12551,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": ") => boolean) | undefined;\n        hitFrameInside?: boolean | undefined;\n        hitInside?: boolean | undefined;\n        hitLabels?: boolean | undefined;\n        margin?: number | undefined;\n        renderingOnly?: boolean | undefined;\n    }"
+                  "text": ") => boolean) | undefined;\n        hitFrameInside?: boolean | undefined;\n        hitInside?: boolean | undefined;\n        hitLabels?: boolean | undefined;\n        hitLocked?: boolean | undefined;\n        margin?: number | undefined;\n        renderingOnly?: boolean | undefined;\n    }"
                 },
                 {
                   "kind": "Content",

packages/editor/src/lib/editor/Editor.ts

@@ -4308,6 +4308,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			renderingOnly?: boolean
 			margin?: number
 			hitInside?: boolean
+			hitLocked?: boolean
 			// TODO: we probably need to rename this, we don't quite _always_
 			// respect this esp. in the part below that does "Check labels first"
 			hitLabels?: boolean
@@ -4320,6 +4321,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const {
 			filter,
 			margin = 0,
+			hitLocked = false,
 			hitLabels = false,
 			hitInside = false,
 			hitFrameInside = false,
@@ -4336,7 +4338,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				? this.getCurrentPageRenderingShapesSorted()
 				: this.getCurrentPageShapesSorted()
 		).filter((shape) => {
-			if (this.isShapeOfType(shape, 'group')) return false
+			if ((shape.isLocked && !hitLocked) || this.isShapeOfType(shape, 'group')) return false
 			const pageMask = this.getShapeMask(shape)
 			if (pageMask && !pointInPolygon(point, pageMask)) return false
 			if (filter) return filter(shape)

packages/tldraw/src/lib/shapes/text/toolStates/Idle.ts

@@ -1,5 +1,5 @@
 import { StateNode, TLEventHandlers } from '@tldraw/editor'
-import { updateHoveredId } from '../../../tools/selection-logic/updateHoveredId'
+import { updateHoveredShapeId } from '../../../tools/selection-logic/updateHoveredId'
 
 export class Idle extends StateNode {
 	static override id = 'idle'
@@ -8,7 +8,7 @@ export class Idle extends StateNode {
 		switch (info.target) {
 			case 'shape':
 			case 'canvas': {
-				updateHoveredId(this.editor)
+				updateHoveredShapeId(this.editor)
 			}
 		}
 	}

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

@@ -1,7 +1,7 @@
 import { StateNode, TLEventHandlers, TLFrameShape, TLShape, TLTextShape } from '@tldraw/editor'
 import { getTextLabels } from '../../../utils/shapes/shapes'
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
-import { updateHoveredId } from '../../selection-logic/updateHoveredId'
+import { updateHoveredShapeId } from '../../selection-logic/updateHoveredId'
 
 export class EditingShape extends StateNode {
 	static override id = 'editing_shape'
@@ -12,7 +12,7 @@ export class EditingShape extends StateNode {
 		const editingShape = this.editor.getEditingShape()
 		if (!editingShape) throw Error('Entered editing state without an editing shape')
 		this.hitShapeForPointerUp = null
-		updateHoveredId(this.editor)
+		updateHoveredShapeId(this.editor)
 		this.editor.select(editingShape)
 	}
 
@@ -44,7 +44,7 @@ export class EditingShape extends StateNode {
 		switch (info.target) {
 			case 'shape':
 			case 'canvas': {
-				updateHoveredId(this.editor)
+				updateHoveredShapeId(this.editor)
 				return
 			}
 		}
@@ -145,7 +145,7 @@ export class EditingShape extends StateNode {
 		this.editor.select(hitShape.id)
 
 		this.editor.setEditingShape(hitShape.id)
-		updateHoveredId(this.editor)
+		updateHoveredShapeId(this.editor)
 	}
 
 	override onComplete: TLEventHandlers['onComplete'] = (info) => {

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

@@ -19,7 +19,7 @@ import {
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
 import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
-import { updateHoveredId } from '../../selection-logic/updateHoveredId'
+import { updateHoveredShapeId } from '../../selection-logic/updateHoveredId'
 import { kickoutOccludedShapes, startEditingShapeWithLabel } from '../selectHelpers'
 
 const SKIPPED_KEYS_FOR_AUTO_EDITING = [
@@ -38,7 +38,7 @@ export class Idle extends StateNode {
 
 	override onEnter = () => {
 		this.parent.setCurrentToolIdMask(undefined)
-		updateHoveredId(this.editor)
+		updateHoveredShapeId(this.editor)
 		this.editor.updateInstanceState(
 			{ cursor: { type: 'default', rotation: 0 } },
 			{ ephemeral: true }
@@ -46,7 +46,7 @@ export class Idle extends StateNode {
 	}
 
 	override onPointerMove: TLEventHandlers['onPointerMove'] = () => {
-		updateHoveredId(this.editor)
+		updateHoveredShapeId(this.editor)
 	}
 
 	override onPointerDown: TLEventHandlers['onPointerDown'] = (info) => {
@@ -359,6 +359,7 @@ export class Idle extends StateNode {
 								margin: HIT_TEST_MARGIN / this.editor.getZoomLevel(),
 								hitInside: false,
 								hitLabels: true,
+								hitLocked: true,
 								hitFrameInside: false,
 								renderingOnly: true,
 							})

packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts

@@ -1,6 +1,6 @@
 import { Editor, HIT_TEST_MARGIN, TLShape, throttle } from '@tldraw/editor'
 
-function _updateHoveredId(editor: Editor) {
+function _updateHoveredShapeId(editor: Editor) {
 	// todo: consider replacing `get hoveredShapeId` with this; it would mean keeping hoveredShapeId in memory rather than in the store and possibly re-computing it more often than necessary
 	const hitShape = editor.getShapeAtPoint(editor.inputs.currentPagePoint, {
 		hitInside: false,
@@ -31,5 +31,5 @@ function _updateHoveredId(editor: Editor) {
 	return editor.setHoveredShape(shapeToHover.id)
 }
 
-export const updateHoveredId =
-	process.env.NODE_ENV === 'test' ? _updateHoveredId : throttle(_updateHoveredId, 32)
+export const updateHoveredShapeId =
+	process.env.NODE_ENV === 'test' ? _updateHoveredShapeId : throttle(_updateHoveredShapeId, 32)