tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/src/lib/ui/components/primitives/layout.tsx

@@ -1,107 +0,0 @@
-import classNames from 'classnames'
-import { Slot } from 'radix-ui'
-import { HTMLAttributes, ReactNode, createContext, forwardRef, useContext } from 'react'
-
-/** @public */
-export interface TldrawUiOrientationContext {
-	orientation: 'horizontal' | 'vertical'
-	tooltipSide: 'top' | 'right' | 'bottom' | 'left'
-}
-
-const TldrawUiOrientationContext = createContext<TldrawUiOrientationContext>({
-	orientation: 'horizontal',
-	tooltipSide: 'bottom',
-})
-
-/** @public */
-export interface TldrawUiOrientationProviderProps {
-	children: ReactNode
-	orientation: 'horizontal' | 'vertical'
-	tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
-}
-/** @public @react */
-export function TldrawUiOrientationProvider({
-	children,
-	orientation,
-	tooltipSide,
-}: TldrawUiOrientationProviderProps) {
-	const prevContext = useTldrawUiOrientation()
-	// generally, we want tooltip side to cascade down through the layout - apart from when the
-	// orientation changes. If the tooltip side is "bottom", and then I include some vertical layout
-	// elements, keeping the tooltip side as bottom will cause the tooltip to overlap elements
-	// stacked on top of each other. In the absence of a tooltip side, we pick a default side based
-	// on the orientation whenever the orientation changes.
-	const tooltipSideToUse =
-		tooltipSide ??
-		(orientation === prevContext.orientation
-			? prevContext.tooltipSide
-			: orientation === 'horizontal'
-				? 'bottom'
-				: 'right')
-
-	return (
-		<TldrawUiOrientationContext.Provider value={{ orientation, tooltipSide: tooltipSideToUse }}>
-			{children}
-		</TldrawUiOrientationContext.Provider>
-	)
-}
-
-/** @public */
-export function useTldrawUiOrientation() {
-	return useContext(TldrawUiOrientationContext)
-}
-
-/** @public */
-export interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
-	children: ReactNode
-	tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
-	asChild?: boolean
-}
-
-/**
- * A row, usually of UI controls like buttons, select dropdown, checkboxes, etc.
- *
- * @public @react
- */
-export const TldrawUiRow = forwardRef<HTMLDivElement, TLUiLayoutProps>(
-	({ asChild, className, tooltipSide, ...props }, ref) => {
-		const Component = asChild ? Slot.Root : 'div'
-		return (
-			<TldrawUiOrientationProvider orientation="horizontal" tooltipSide={tooltipSide}>
-				<Component ref={ref} className={classNames('tlui-row', className)} {...props} />
-			</TldrawUiOrientationProvider>
-		)
-	}
-)
-
-/**
- * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
- *
- * @public @react
- */
-export const TldrawUiColumn = forwardRef<HTMLDivElement, TLUiLayoutProps>(
-	({ asChild, className, tooltipSide, ...props }, ref) => {
-		const Component = asChild ? Slot.Root : 'div'
-		return (
-			<TldrawUiOrientationProvider orientation="vertical" tooltipSide={tooltipSide}>
-				<Component ref={ref} className={classNames('tlui-column', className)} {...props} />
-			</TldrawUiOrientationProvider>
-		)
-	}
-)
-
-/**
- * A tight grid 4 elements wide, usually of UI controls like buttons, select dropdown, checkboxes,
- * etc.
- *
- * @public @react */
-export const TldrawUiGrid = forwardRef<HTMLDivElement, TLUiLayoutProps>(
-	({ asChild, className, tooltipSide, ...props }, ref) => {
-		const Component = asChild ? Slot.Root : 'div'
-		return (
-			<TldrawUiOrientationProvider orientation="horizontal" tooltipSide={tooltipSide}>
-				<Component ref={ref} className={classNames('tlui-grid', className)} {...props} />
-			</TldrawUiOrientationProvider>
-		)
-	}
-)

package/src/test/inner-outer-margin.test.ts

@@ -1,315 +0,0 @@
-import { TLArrowShape, createShapeId } from '@tldraw/editor'
-import { getArrowBindings } from '../lib/shapes/arrow/shared'
-import { TestEditor } from './TestEditor'
-
-let editor: TestEditor
-
-const ids = {
-	solidShape: createShapeId('solidShape'),
-	hollowShape: createShapeId('hollowShape'),
-	arrow: createShapeId('arrow'),
-}
-
-const _arrow = () => editor.getOnlySelectedShape() as TLArrowShape
-
-beforeEach(() => {
-	editor = new TestEditor()
-})
-
-describe('Inner/Outer Margin Shape Detection', () => {
-	describe('getShapeAtPoint with inner/outer margins', () => {
-		beforeEach(() => {
-			// Create a solid filled shape
-			editor.createShape({
-				id: ids.solidShape,
-				type: 'geo',
-				x: 100,
-				y: 100,
-				props: {
-					w: 100,
-					h: 100,
-					fill: 'solid',
-				},
-			})
-
-			// Create a hollow shape on top (same position, smaller size)
-			editor.createShape({
-				id: ids.hollowShape,
-				type: 'geo',
-				x: 125,
-				y: 125,
-				props: {
-					w: 50,
-					h: 50,
-					// No fill property - defaults to 'none' (hollow)
-				},
-			})
-		})
-
-		it('should support inner/outer margin options', () => {
-			// Test that the new margin options are accepted
-			const point = { x: 150, y: 150 }
-
-			// Test with array margin [innerMargin, outerMargin]
-			const arrayMarginHit = editor.getShapeAtPoint(point, {
-				hitInside: true,
-				margin: [8, 4],
-			})
-			expect(arrayMarginHit).toBeDefined()
-
-			// Test with insideMargin option
-			const insideMarginHit = editor.getShapeAtPoint(point, {
-				hitInside: true,
-			})
-			expect(insideMarginHit).toBeDefined()
-
-			// Test with single number margin (should use same for both)
-			const singleMarginHit = editor.getShapeAtPoint(point, {
-				hitInside: true,
-				margin: 8,
-			})
-			expect(singleMarginHit).toBeDefined()
-		})
-
-		it('should respect hitInside option for hollow shapes', () => {
-			const point = { x: 150, y: 150 }
-
-			// Without hitInside, should not hit hollow shape
-			const noHitInsideHit = editor.getShapeAtPoint(point, {
-				margin: [8, 0],
-			})
-			expect(noHitInsideHit?.id).toBe(ids.solidShape)
-
-			// With hitInside, should be able to hit hollow shape
-			const withHitInsideHit = editor.getShapeAtPoint(point, {
-				hitInside: true,
-				margin: [8, 0],
-			})
-			expect(withHitInsideHit).toBeDefined()
-		})
-
-		it('should handle edge cases correctly', () => {
-			// Test point exactly on the edge of hollow shape
-			const edgePoint = { x: 125, y: 150 }
-
-			const edgeHit = editor.getShapeAtPoint(edgePoint, {
-				hitInside: true,
-				margin: [8, 8],
-			})
-			expect(edgeHit).toBeDefined()
-		})
-	})
-
-	describe('Arrow binding with inner/outer margins', () => {
-		beforeEach(() => {
-			// Create a solid filled shape
-			editor.createShape({
-				id: ids.solidShape,
-				type: 'geo',
-				x: 100,
-				y: 100,
-				props: {
-					w: 100,
-					h: 100,
-					fill: 'solid',
-				},
-			})
-
-			// Create a hollow shape on top (same position, smaller size)
-			editor.createShape({
-				id: ids.hollowShape,
-				type: 'geo',
-				x: 125,
-				y: 125,
-				props: {
-					w: 50,
-					h: 50,
-					// No fill property - defaults to 'none' (hollow)
-				},
-			})
-		})
-
-		it('should create arrow bindings with inner/outer margin support', () => {
-			editor.setCurrentTool('arrow')
-
-			// Start arrow outside both shapes
-			editor.pointerDown(50, 150)
-
-			// Move to center of hollow shape (which overlaps solid shape)
-			editor.pointerMove(150, 150)
-			editor.pointerUp()
-
-			const createdArrow = editor
-				.getCurrentPageShapes()
-				.find((s) => s.type === 'arrow') as TLArrowShape
-			expect(createdArrow).toBeDefined()
-
-			const arrowBindings = getArrowBindings(editor, createdArrow)
-			expect(arrowBindings.end).toBeDefined()
-			// The binding should be to one of the shapes
-			expect([ids.solidShape, ids.hollowShape]).toContain(arrowBindings.end?.toId)
-		})
-
-		it('should bind to solid shape when no hollow shape is present', () => {
-			// Remove the hollow shape
-			editor.deleteShape(ids.hollowShape)
-
-			editor.setCurrentTool('arrow')
-
-			// Start arrow outside shape
-			editor.pointerDown(50, 150)
-
-			// Move to center of solid shape
-			editor.pointerMove(150, 150)
-			editor.pointerUp()
-
-			const createdArrow = editor
-				.getCurrentPageShapes()
-				.find((s) => s.type === 'arrow') as TLArrowShape
-			expect(createdArrow).toBeDefined()
-
-			const arrowBindings = getArrowBindings(editor, createdArrow)
-			expect(arrowBindings.end).toBeDefined()
-			expect(arrowBindings.end?.toId).toBe(ids.solidShape)
-		})
-	})
-
-	describe('Complex overlapping scenarios', () => {
-		it('should handle multiple overlapping shapes correctly', () => {
-			// Create multiple shapes with different fill states
-			editor.createShape({
-				id: ids.solidShape,
-				type: 'geo',
-				x: 100,
-				y: 100,
-				props: {
-					w: 100,
-					h: 100,
-					fill: 'solid',
-				},
-			})
-
-			editor.createShape({
-				id: ids.hollowShape,
-				type: 'geo',
-				x: 125,
-				y: 125,
-				props: {
-					w: 50,
-					h: 50,
-					// No fill property - defaults to 'none' (hollow)
-				},
-			})
-
-			// Create another hollow shape
-			const hollowShape2 = createShapeId('hollowShape2')
-			editor.createShape({
-				id: hollowShape2,
-				type: 'geo',
-				x: 140,
-				y: 140,
-				props: {
-					w: 30,
-					h: 30,
-					// No fill property - defaults to 'none' (hollow)
-				},
-			})
-
-			// Test point in the innermost hollow shape
-			const point = { x: 155, y: 155 }
-
-			const hit = editor.getShapeAtPoint(point, {
-				hitInside: true,
-				margin: [8, 8],
-			})
-			expect(hit).toBeDefined()
-			// Should hit one of the shapes
-			expect([ids.solidShape, ids.hollowShape, hollowShape2]).toContain(hit?.id)
-		})
-
-		it('should handle shapes with different geometries', () => {
-			// Create a solid rectangle
-			editor.createShape({
-				id: ids.solidShape,
-				type: 'geo',
-				x: 100,
-				y: 100,
-				props: {
-					w: 100,
-					h: 100,
-					fill: 'solid',
-				},
-			})
-
-			// Create a hollow circle on top
-			editor.createShape({
-				id: ids.hollowShape,
-				type: 'geo',
-				x: 125,
-				y: 125,
-				props: {
-					w: 50,
-					h: 50,
-					geo: 'ellipse',
-					// No fill property - defaults to 'none' (hollow)
-				},
-			})
-
-			// Test point inside the circle
-			const point = { x: 150, y: 150 }
-
-			const hit = editor.getShapeAtPoint(point, {
-				hitInside: true,
-				margin: [8, 8],
-			})
-			expect(hit).toBeDefined()
-			// Should hit one of the shapes
-			expect([ids.solidShape, ids.hollowShape]).toContain(hit?.id)
-		})
-	})
-
-	describe('Regression tests for the original bug', () => {
-		it('should support binding to hollow shapes when overlapping solid shapes', () => {
-			// This test verifies that the infrastructure exists for the bug fix
-			// Create a solid shape
-			editor.createShape({
-				id: ids.solidShape,
-				type: 'geo',
-				x: 100,
-				y: 100,
-				props: {
-					w: 100,
-					h: 100,
-					fill: 'solid',
-				},
-			})
-
-			// Create a hollow shape on top
-			editor.createShape({
-				id: ids.hollowShape,
-				type: 'geo',
-				x: 125,
-				y: 125,
-				props: {
-					w: 50,
-					h: 50,
-					// No fill property - defaults to 'none' (hollow)
-				},
-			})
-
-			// Test that we can detect both shapes
-			const point = { x: 150, y: 150 }
-
-			// Should be able to hit the solid shape without hitInside
-			const solidHit = editor.getShapeAtPoint(point)
-			expect(solidHit?.id).toBe(ids.solidShape)
-
-			// Should be able to hit the hollow shape with hitInside and inner margin
-			const hollowHit = editor.getShapeAtPoint(point, {
-				hitInside: true,
-				margin: [8, 0],
-			})
-			expect(hollowHit).toBeDefined()
-		})
-	})
-})