tldraw 4.3.0-canary.9c474ef3fad5 → 4.3.0-canary.a2419250444e

package/src/test/__snapshots__/resizing.test.ts.snap

@@ -16,20 +16,11 @@ exports[`When resizing a shape with children > Resizes a rotated draw shape > dr
     "isComplete": false,
     "isPen": false,
     "scale": 1,
+    "scaleX": 1.1,
+    "scaleY": 1.1,
     "segments": [
       {
-        "points": [
-          {
-            "x": 0,
-            "y": 0,
-            "z": 0.5,
-          },
-          {
-            "x": 110,
-            "y": 110,
-            "z": 0.5,
-          },
-        ],
+        "points": "AAAAAAA4QFZAVgA4",
         "type": "free",
       },
     ],

package/src/test/arrows-megabus.test.tsx

@@ -33,7 +33,7 @@ it('requires a move to begin drawing', () => {
 	editor.pointerDown()
 	editor.pointerMove(2, 0)
 
-	expect(editor.inputs.isDragging).toBe(false)
+	expect(editor.inputs.getIsDragging()).toBe(false)
 })
 
 describe('Making an arrow on the page', () => {

package/src/test/commands/__snapshots__/getSvgString.test.ts.snap

@@ -16,7 +16,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
   >
     <defs>
       <mask
-        id="_export_4_rb_"
+        id="_export_4_r_b_"
       >
         <rect
           fill="white"
@@ -51,14 +51,14 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
       </mask>
       <pattern
         height="8"
-        id="_export_4_ra__hash_pattern_light_0"
+        id="_export_4_r_a__hash_pattern_light_0"
         patternUnits="userSpaceOnUse"
         width="8"
       >
         <rect
           fill="#fcfffe"
           height="8"
-          mask="url(#_export_4_rb_)"
+          mask="url(#_export_4_r_b_)"
           width="8"
           x="0"
           y="0"
@@ -127,7 +127,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"
-        fill="url(#_export_4_ra__hash_pattern_light_0)"
+        fill="url(#_export_4_r_a__hash_pattern_light_0)"
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"
@@ -156,7 +156,7 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
   >
     <defs>
       <mask
-        id="_export_2_r5_"
+        id="_export_2_r_5_"
       >
         <rect
           fill="white"
@@ -191,14 +191,14 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
       </mask>
       <pattern
         height="8"
-        id="_export_2_r4__hash_pattern_light_0"
+        id="_export_2_r_4__hash_pattern_light_0"
         patternUnits="userSpaceOnUse"
         width="8"
       >
         <rect
           fill="#fcfffe"
           height="8"
-          mask="url(#_export_2_r5_)"
+          mask="url(#_export_2_r_5_)"
           width="8"
           x="0"
           y="0"
@@ -267,7 +267,7 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"
-        fill="url(#_export_2_r4__hash_pattern_light_0)"
+        fill="url(#_export_2_r_4__hash_pattern_light_0)"
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"

package/src/test/commands/setCamera.test.ts

@@ -13,6 +13,8 @@ beforeEach(() => {
 	})
 	editor.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
 	editor.user.updateUserPreferences({ inputMode: null })
+	editor._transformPointerDownSpy.mockRestore()
+	editor._transformPointerUpSpy.mockRestore()
 })
 
 const wheelEvent = {
@@ -255,8 +257,8 @@ describe('CameraOptions.panSpeed', () => {
 
 	it('Does not affect hand tool panning', () => {
 		editor.setCameraOptions({ ...DEFAULT_CAMERA_OPTIONS, panSpeed: 2 })
-		editor.setCurrentTool('hand').pointerDown(0, 0).pointerMove(5, 10).forceTick()
-		expect(editor.getCamera()).toMatchObject({ x: 5, y: 10, z: 1 })
+		editor.setCurrentTool('hand').pointerDown(0, 0).pointerMove(50, 50)
+		expect(editor.getCamera()).toMatchObject({ x: 50, y: 50, z: 1 })
 	})
 
 	it('Does not affect spacebar panning (2x)', () => {
@@ -288,12 +290,12 @@ describe('CameraOptions.panSpeed', () => {
 			.createShape({ id: shapeId, type: 'geo', x: 10, y: 10 })
 			.select(shapeId)
 		const shape = editor.getSelectedShapes()[0]
-		editor.selectNone()
 		// Move shape far beyond bounds to trigger edge scrolling at maximum speed
 		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
-		editor.pointerDown(shape.x, shape.y).pointerMove(-5000, -5000)
-		// At maximum speed and a zoom level of 1, the camera should move by 40px per tick if the screen
-		// is wider than 1000 pixels, or by 40 * 0.612px if it is smaller.
+		// pointerMove calls forceTick() internally, so we don't need an extra forceTick() call
+		editor.pointerDown(shape.x, shape.y, shapeId).forceTick().pointerMove(-5000, -5000)
+		// At maximum speed and a zoom level of 1, the camera should move by 25px per tick if the screen
+		// is wider than 1000 pixels, or by 25 * 0.612px if it is smaller.
 		const newX = viewportScreenBounds.w < 1000 ? 25 * 0.612 : 25
 		const newY = viewportScreenBounds.h < 1000 ? 25 * 0.612 : 25
 		expect(editor.getCamera()).toMatchObject({ x: newX, y: newY, z: 1 })
@@ -557,11 +559,11 @@ describe('When constraints are free', () => {
 
 	it('zooms onto mouse position', () => {
 		editor.pointerMove(100, 100)
-		expect(editor.inputs.currentPagePoint).toMatchObject({ x: 100, y: 100 })
-		editor.zoomIn(editor.inputs.currentScreenPoint, { immediate: true })
-		expect(editor.inputs.currentPagePoint).toMatchObject({ x: 100, y: 100 })
-		editor.zoomOut(editor.inputs.currentScreenPoint, { immediate: true })
-		expect(editor.inputs.currentPagePoint).toMatchObject({ x: 100, y: 100 })
+		expect(editor.inputs.getCurrentPagePoint()).toMatchObject({ x: 100, y: 100 })
+		editor.zoomIn(editor.inputs.getCurrentScreenPoint(), { immediate: true })
+		expect(editor.inputs.getCurrentPagePoint()).toMatchObject({ x: 100, y: 100 })
+		editor.zoomOut(editor.inputs.getCurrentScreenPoint(), { immediate: true })
+		expect(editor.inputs.getCurrentPagePoint()).toMatchObject({ x: 100, y: 100 })
 	})
 })
 

package/src/test/commands/stackShapes.test.ts

@@ -62,28 +62,54 @@ describe('distributeShapes command', () => {
 
 	describe('when stacking horizontally', () => {
 		it('stacks the shapes based on the editors adjacentShapeMargin', () => {
-			editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
-			// @ts-expect-error
-			editor.options.adjacentShapeMargin = 1
-			editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal')
+			// Create a new editor with custom adjacentShapeMargin option
+			const customEditor = new TestEditor({ options: { adjacentShapeMargin: 1 } })
+			customEditor.createShapes([
+				{
+					id: ids.boxA,
+					type: 'geo',
+					x: 0,
+					y: 0,
+				},
+				{
+					id: ids.boxB,
+					type: 'geo',
+					x: 100,
+					y: 100,
+				},
+				{
+					id: ids.boxC,
+					type: 'geo',
+					x: 400,
+					y: 400,
+				},
+				{
+					id: ids.boxD,
+					type: 'geo',
+					x: 700,
+					y: 700,
+				},
+			])
+			customEditor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
+			customEditor.stackShapes(customEditor.getSelectedShapeIds(), 'horizontal')
 			vi.advanceTimersByTime(1000)
 			// 200 distance gap between c and d
-			editor.expectShapeToMatch({
+			customEditor.expectShapeToMatch({
 				id: ids.boxA,
 				x: 0,
 				y: 0,
 			})
-			editor.expectShapeToMatch({
+			customEditor.expectShapeToMatch({
 				id: ids.boxB,
 				x: 101,
 				y: 100,
 			})
-			editor.expectShapeToMatch({
+			customEditor.expectShapeToMatch({
 				id: ids.boxC,
 				x: 202,
 				y: 400,
 			})
-			editor.expectShapeToMatch({
+			customEditor.expectShapeToMatch({
 				id: ids.boxD,
 				x: 303,
 				y: 700,

package/src/test/commands/zoomToBounds.test.ts

@@ -24,10 +24,16 @@ describe('When zooming to bounds', () => {
 			h: 1000,
 		})
 
+		const padding = editor.options.zoomToFitPadding
+
 		editor.zoomToBounds(new Box(200, 300, 300, 300))
-		expect(editor.getCamera().z).toCloselyMatchObject((1000 - 128) / 300)
-		expect(editor.getViewportPageBounds().width).toCloselyMatchObject(1000 / ((1000 - 128) / 300))
-		expect(editor.getViewportPageBounds().height).toCloselyMatchObject(1000 / ((1000 - 128) / 300))
+		expect(editor.getCamera().z).toCloselyMatchObject((1000 - padding) / 300)
+		expect(editor.getViewportPageBounds().width).toCloselyMatchObject(
+			1000 / ((1000 - padding) / 300)
+		)
+		expect(editor.getViewportPageBounds().height).toCloselyMatchObject(
+			1000 / ((1000 - padding) / 300)
+		)
 	})
 })
 
@@ -55,3 +61,13 @@ it('is ignored by undo/redo', () => {
 	editor.undo()
 	expect(editor.getViewportPageCenter().toJson()).toCloselyMatchObject({ x: 350, y: 450 })
 })
+
+it('respects custom zoomToFitPadding option', () => {
+	const customPadding = 64
+	editor = new TestEditor({ options: { zoomToFitPadding: customPadding } })
+	editor.setScreenBounds({ x: 0, y: 0, w: 1000, h: 1000 })
+	editor.setCamera({ x: 0, y: 0, z: 1 })
+
+	editor.zoomToBounds(new Box(200, 300, 300, 300))
+	expect(editor.getCamera().z).toCloselyMatchObject((1000 - customPadding) / 300)
+})

package/src/test/commands/zoomToSelection.test.ts

@@ -13,17 +13,28 @@ beforeEach(() => {
 	editor.createShapes(createDefaultShapes())
 })
 
-it('zooms to selection bounds', () => {
+it('zooms to 100% when not already at 100%', () => {
+	editor.zoomIn() // zoom to something other than 100%
 	editor.setSelectedShapes([ids.box1, ids.box2])
 	editor.zoomToSelection()
-	editor.expectCameraToBe(354.64, 139.29, 1)
+	expect(editor.getZoomLevel()).toBeCloseTo(1)
+})
+
+it('zooms to fit selection when already at 100%', () => {
+	// Editor starts at 100%, so first call zooms to fit
+	editor.setSelectedShapes([ids.box1, ids.box2])
+	editor.zoomToSelection()
+	// Should now be zoomed to fit the selection bounds (greater than 100% for small selection)
+	expect(editor.getZoomLevel()).toBeGreaterThan(1)
 })
 
 it('does not zoom past max', () => {
 	editor.updateShapes([{ id: ids.box1, type: 'geo', props: { w: 1, h: 1 } }])
 	editor.select(ids.box1)
 	editor.zoomToSelection()
-	expect(editor.getZoomLevel()).toBe(1) // double check again when we're zooming in hard
+	// When at 100%, zooms to fit but respects camera max zoom
+	const { zoomSteps } = editor.getCameraOptions()
+	expect(editor.getZoomLevel()).toBe(zoomSteps[zoomSteps.length - 1])
 })
 
 it('does not zoom past min', () => {

package/src/test/custom-clipping.test.ts

@@ -31,6 +31,9 @@ export type CircleClipShape = TLShape<typeof CIRCLE_CLIP_TYPE>
 
 export const isClippingEnabled$ = atom('isClippingEnabled', true)
 
+// The stroke width used when rendering the circle
+const STROKE_WIDTH = 2
+
 export class CircleClipShapeUtil extends BaseBoxShapeUtil<CircleClipShape> {
 	static override type = CIRCLE_CLIP_TYPE
 	static override props: RecordProps<CircleClipShape> = {
@@ -64,17 +67,20 @@ export class CircleClipShapeUtil extends BaseBoxShapeUtil<CircleClipShape> {
 	}
 
 	override getClipPath(shape: CircleClipShape): Vec[] | undefined {
-		// Generate a polygon approximation of the circle
+		// Generate a polygon approximation of the circle.
+		// We inset the clip path by half the stroke width so that children are
+		// clipped to the inner edge of the stroke, not the center line.
 		const centerX = shape.props.w / 2
 		const centerY = shape.props.h / 2
-		const radius = Math.min(shape.props.w, shape.props.h) / 2
+		const outerRadius = Math.min(shape.props.w, shape.props.h) / 2
+		const clipRadius = outerRadius - STROKE_WIDTH / 2
 		const segments = 48 // More segments = smoother circle
 
 		const points: Vec[] = []
 		for (let i = 0; i < segments; i++) {
 			const angle = (i / segments) * Math.PI * 2
-			const x = centerX + Math.cos(angle) * radius
-			const y = centerY + Math.sin(angle) * radius
+			const x = centerX + Math.cos(angle) * clipRadius
+			const y = centerY + Math.sin(angle) * clipRadius
 			points.push(new Vec(x, y))
 		}
 
@@ -112,7 +118,7 @@ export class CircleClipShapeTool extends StateNode {
 
 	override onPointerDown(info: Parameters<TLEventHandlers['onPointerDown']>[0]) {
 		if (info.target === 'canvas') {
-			const { originPagePoint } = this.editor.inputs
+			const originPagePoint = this.editor.inputs.getOriginPagePoint()
 
 			this.editor.createShape({
 				type: CIRCLE_CLIP_TYPE,
@@ -233,13 +239,14 @@ describe('CircleClipShapeUtil', () => {
 
 			// Should be a polygon approximation of a circle
 			// Check that points are roughly in a circle pattern
-			const centerX = 100 // shape.x
-			const centerY = 100 // shape.y
-			const radius = 100 // min(w, h) / 2
+			// The clip path is inset by half the stroke width (STROKE_WIDTH / 2 = 1)
+			const centerX = 100 // shape.props.w / 2
+			const centerY = 100 // shape.props.h / 2
+			const clipRadius = 99 // min(w, h) / 2 - STROKE_WIDTH / 2 = 100 - 1
 
 			clipPath.forEach((point) => {
 				const distance = Math.sqrt(Math.pow(point.x - centerX, 2) + Math.pow(point.y - centerY, 2))
-				expect(distance).toBeCloseTo(radius, 0)
+				expect(distance).toBeCloseTo(clipRadius, 0)
 			})
 		})
 	})

package/src/test/drawing.test.ts

@@ -1,7 +1,8 @@
 import { TLDrawShape, TLHighlightShape, last } from '@tldraw/editor'
 import { vi } from 'vitest'
-import { TestEditor } from './TestEditor'
 import { TEST_DRAW_SHAPE_SCREEN_POINTS } from './drawing.data'
+import { base64ToPoints } from './test-jsx'
+import { TestEditor } from './TestEditor'
 
 vi.useFakeTimers()
 
@@ -77,7 +78,7 @@ for (const toolType of ['draw', 'highlight'] as const) {
 			const segment = shape.props.segments[0]
 			expect(segment.type).toBe('straight')
 
-			const points = segment.points
+			const points = base64ToPoints(segment.points)
 			expect(points.length).toBe(2)
 		})
 
@@ -176,8 +177,9 @@ for (const toolType of ['draw', 'highlight'] as const) {
 
 			const shape = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment = shape.props.segments[0]
-			expect(segment.points[1].x).toBeCloseTo(snappedX)
-			expect(segment.points[1].y).toBeCloseTo(snappedY)
+			const points = base64ToPoints(segment.points)
+			expect(points[1].x).toBeCloseTo(snappedX)
+			expect(points[1].y).toBeCloseTo(snappedY)
 		})
 
 		it('Doesnt snap to 15 degree angle when cmd is held', () => {
@@ -190,8 +192,9 @@ for (const toolType of ['draw', 'highlight'] as const) {
 
 			const shape = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment = shape.props.segments[0]
-			expect(segment.points[1].x).toBeCloseTo(x)
-			expect(segment.points[1].y).toBeCloseTo(y)
+			const points = base64ToPoints(segment.points)
+			expect(points[1].x).toBeCloseTo(x)
+			expect(points[1].y).toBeCloseTo(y)
 		})
 
 		it('Snaps to start or end of straight segments in self when shift + cmd is held', () => {
@@ -209,13 +212,15 @@ for (const toolType of ['draw', 'highlight'] as const) {
 
 			const shape1 = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment1 = last(shape1.props.segments)!
-			const point1 = last(segment1.points)!
+			const points1 = base64ToPoints(segment1.points)
+			const point1 = last(points1)!
 			expect(point1.x).toBe(1)
 
 			editor.keyDown('Meta')
 			const shape2 = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment2 = last(shape2.props.segments)!
-			const point2 = last(segment2.points)!
+			const points2 = base64ToPoints(segment2.points)
+			const point2 = last(points2)!
 			expect(point2.x).toBe(0)
 		})
 
@@ -234,13 +239,15 @@ for (const toolType of ['draw', 'highlight'] as const) {
 
 			const shape1 = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment1 = last(shape1.props.segments)!
-			const point1 = last(segment1.points)!
+			const points1 = base64ToPoints(segment1.points)
+			const point1 = last(points1)!
 			expect(point1.x).toBe(1)
 
 			editor.keyDown('Meta')
 			const shape2 = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment2 = last(shape2.props.segments)!
-			const point2 = last(segment2.points)!
+			const points2 = base64ToPoints(segment2.points)
+			const point2 = last(points2)!
 			expect(point2.x).toBe(0)
 		})
 

package/src/test/flipShapes.test.ts

@@ -637,3 +637,36 @@ it('Updates the image shape flip properties when flipped', () => {
 	editor.flipShapes(editor.getSelectedShapeIds(), 'vertical')
 	expect(editor.getLastCreatedShape<TLImageShape>().props.flipY).toBe(true)
 })
+
+it('Restores flipped shape positions when shape is rotated', () => {
+	editor.selectAll().rotateSelection(PI / 2.5)
+	const before = editor.getSelectedShapes()
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	const after = editor.getSelectedShapes()
+	expect(after.length).toBe(before.length)
+	for (let i = 0; i < before.length; i++) {
+		expect(after[i]).toCloselyMatchObject(before[i])
+	}
+})
+
+it('Restores flipped shape positions with draw shapes when shape is rotated', () => {
+	editor
+		.cancel()
+		.setCurrentTool('draw')
+		.pointerDown(0, 0)
+		.pointerMove(-100, -100)
+		.pointerMove(0, -100)
+		.pointerMove(100, 100)
+		.pointerUp()
+
+	editor.selectAll().rotateSelection(PI / 2.5)
+	const before = editor.getSelectedShapes()
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	const after = editor.getSelectedShapes()
+	expect(after.length).toBe(before.length)
+	for (let i = 0; i < before.length; i++) {
+		expect(after[i]).toCloselyMatchObject(before[i])
+	}
+})

package/src/test/frames.test.ts

@@ -10,6 +10,7 @@ import {
 } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { getArrowBindings } from '../lib/shapes/arrow/shared'
+import { FrameShapeUtil } from '../lib/shapes/frame/FrameShapeUtil'
 import { DEFAULT_FRAME_PADDING, fitFrameToContent, removeFrame } from '../lib/utils/frames/frames'
 import { TestEditor } from './TestEditor'
 
@@ -639,9 +640,13 @@ describe('frame shapes', () => {
 
 		editor.setCurrentTool('select')
 
+		// Not with enter key
 		editor.keyDown('Enter')
 		editor.keyUp('Enter')
+		expect(editor.getCurrentPageState().editingShapeId).toBe(null)
 
+		// Just with header click (tests against header's geometry)
+		editor.click(105, 95)
 		expect(editor.getCurrentPageState().editingShapeId).toBe(frameId)
 	})
 
@@ -850,6 +855,93 @@ describe('frame shapes', () => {
 		expect(editor.getSortedChildIdsForParent(insideFrameId)).toStrictEqual([rectAId, rectBId])
 		expect(editor.getSortedChildIdsForParent(outsideFrameId)).toStrictEqual([insideFrameId])
 	})
+
+	describe('resizeChildren configuration option', () => {
+		it('has default canResizeChildren behavior as false', () => {
+			const frameUtil = editor.getShapeUtil<TLFrameShape>('frame') as FrameShapeUtil
+			expect(frameUtil.options.resizeChildren).toBe(false)
+			expect(frameUtil.canResizeChildren()).toBe(false)
+		})
+
+		it('can be configured to allow resizing children', () => {
+			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({ resizeChildren: true })
+			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
+			expect(configuredFrameUtil.options.resizeChildren).toBe(true)
+			expect(configuredFrameUtil.canResizeChildren()).toBe(true)
+		})
+
+		it('can be configured to disallow resizing children', () => {
+			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({ resizeChildren: false })
+			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
+			expect(configuredFrameUtil.options.resizeChildren).toBe(false)
+			expect(configuredFrameUtil.canResizeChildren()).toBe(false)
+		})
+
+		it('maintains other options when configuring resizeChildren', () => {
+			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({
+				resizeChildren: true,
+				showColors: true,
+			})
+			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
+			expect(configuredFrameUtil.options.resizeChildren).toBe(true)
+			expect(configuredFrameUtil.options.showColors).toBe(true)
+		})
+
+		it('resizes children when configured with resizeChildren: true', () => {
+			// Create a frame with a child shape using a configured frame util
+			editor.setCurrentTool('frame')
+			editor.pointerDown(100, 100).pointerMove(200, 200).pointerUp(200, 200)
+
+			const frameId = editor.getOnlySelectedShape()!.id
+
+			// Add a child shape
+			editor.setCurrentTool('geo')
+			editor.pointerDown(125, 125).pointerMove(175, 175).pointerUp(175, 175)
+
+			const childId = editor.getOnlySelectedShape()!.id
+
+			// Get initial bounds
+			const initialChildBounds = editor.getShapePageBounds(childId)!
+
+			// Create a new editor with configured frame util that allows resizing children
+			const configuredEditor = new TestEditor({
+				shapeUtils: [FrameShapeUtil.configure({ resizeChildren: true })],
+			})
+
+			// Create the same frame and child in the new editor
+			configuredEditor.createShapes([
+				{ id: frameId, type: 'frame', x: 100, y: 100, props: { w: 100, h: 100 } },
+				{
+					id: childId,
+					type: 'geo',
+					parentId: frameId,
+					x: 125,
+					y: 125,
+					props: { w: 50, h: 50 },
+				},
+			])
+
+			// Resize the frame to half size
+			configuredEditor.select(frameId)
+			configuredEditor.resizeSelection({ scaleX: 0.5, scaleY: 0.5 }, 'bottom_right')
+
+			// Verify the frame was resized
+			const resizedFrameBounds = configuredEditor.getShapePageBounds(frameId)!
+			expect(resizedFrameBounds).toCloselyMatchObject({
+				x: 100,
+				y: 100,
+				w: 50,
+				h: 50,
+			})
+
+			// Verify the child was also resized
+			const resizedChildBounds = configuredEditor.getShapePageBounds(childId)!
+			expect(resizedChildBounds.w).toBeCloseTo(initialChildBounds.w * 0.5)
+			expect(resizedChildBounds.h).toBeCloseTo(initialChildBounds.h * 0.5)
+
+			configuredEditor.dispose()
+		})
+	})
 })
 
 test('arrows bound to a shape within a group within a frame are reparented if the group is moved outside of the frame', () => {

package/src/test/groups.test.tsx

@@ -1560,7 +1560,7 @@ describe('erasing', () => {
 		// move to group B
 		editor.pointerMove(65, 5)
 
-		expect(editor.getErasingShapeIds().length).toBe(2)
+		expect(editor.getErasingShapeIds().length).toBe(3)
 	})
 })
 

package/src/test/modifiers.test.ts

@@ -13,25 +13,25 @@ it('Shift Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { shiftKey: true })
 	editor.pointerMove(100, 100, { shiftKey: false })
-	expect(editor.inputs.shiftKey).toBe(true)
+	expect(editor.inputs.getShiftKey()).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.shiftKey).toBe(false)
+	expect(editor.inputs.getShiftKey()).toBe(false)
 })
 
 it('Alt Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { altKey: true })
 	editor.pointerMove(100, 100, { altKey: false })
-	expect(editor.inputs.altKey).toBe(true)
+	expect(editor.inputs.getAltKey()).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.altKey).toBe(false)
+	expect(editor.inputs.getAltKey()).toBe(false)
 })
 
 it('Ctrl Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { ctrlKey: true })
 	editor.pointerMove(100, 100, { ctrlKey: false })
-	expect(editor.inputs.ctrlKey).toBe(true)
+	expect(editor.inputs.getCtrlKey()).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.ctrlKey).toBe(false)
+	expect(editor.inputs.getCtrlKey()).toBe(false)
 })

package/src/test/resizing.test.ts

@@ -20,6 +20,7 @@ import { NoteShapeUtil } from '../lib/shapes/note/NoteShapeUtil'
 import { TestEditor } from './TestEditor'
 import { getSnapLines } from './getSnapLines'
 import { roundedBox } from './roundedBox'
+import { createDrawSegments } from './test-jsx'
 
 vi.useFakeTimers()
 
@@ -904,15 +905,12 @@ describe('When resizing a shape with children', () => {
 					x: 100,
 					y: 100,
 					props: {
-						segments: [
-							{
-								type: 'free',
-								points: [
-									{ x: 0, y: 0, z: 0.5 },
-									{ x: 100, y: 100, z: 0.5 },
-								],
-							},
-						],
+						segments: createDrawSegments([
+							[
+								{ x: 0, y: 0, z: 0.5 },
+								{ x: 100, y: 100, z: 0.5 },
+							],
+						]),
 					},
 				},
 			])