tldraw 3.16.0-canary.ed8bd30c0f28 → 3.16.0-canary.efdec30fc411

package/src/lib/ui.css

@@ -97,7 +97,7 @@
 	opacity: 1;
 }
 
-.tlui-button[aria-expanded='true'][data-direction='left']::after {
+.tlui-button[aria-expanded='true'][data-direction='left'] {
 	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	opacity: 1;
 }
@@ -161,12 +161,6 @@
 	}
 }
 
-/* Panel button */
-
-.tlui-button__panel {
-	position: relative;
-}
-
 /* Menu button */
 
 .tlui-button__menu {
@@ -207,7 +201,7 @@
 
 /* Tool lock button */
 
-.tlui-toolbar__lock-button {
+.tlui-main-toolbar__lock-button {
 	position: absolute;
 	top: 4px;
 	right: 0px;
@@ -218,7 +212,7 @@
 	border-radius: var(--radius-2);
 }
 
-.tlui-toolbar__lock-button::after {
+.tlui-main-toolbar__lock-button::after {
 	top: 4px;
 	left: 8px;
 	inset: 4px;
@@ -230,16 +224,6 @@
 	position: relative;
 	height: 48px;
 	width: 48px;
-	margin-left: -2px;
-	margin-right: -2px;
-}
-
-.tlui-button__tool:nth-of-type(1) {
-	margin-left: 0px;
-}
-
-.tlui-button__tool:nth-last-of-type(1) {
-	margin-right: 0px;
 }
 
 .tlui-button__tool::after {
@@ -270,47 +254,30 @@
 	width: 16px;
 }
 
-/* Button Row */
+/* Row layout */
 
-.tlui-buttons__horizontal {
+.tlui-row {
 	display: flex;
 	flex-direction: row;
+	padding: 0 2px;
 }
-.tlui-buttons__horizontal > * {
+.tlui-row > * {
 	margin-left: -2px;
 	margin-right: -2px;
 }
-.tlui-buttons__horizontal > *:nth-child(1) {
-	margin-left: 0px;
-}
-.tlui-buttons__horizontal > *:nth-last-child(1) {
-	margin-right: 0px;
-}
 
-/* Button Grid */
+/* Grid layout */
 
-.tlui-buttons__grid {
+.tlui-grid {
 	display: grid;
-	grid-template-columns: repeat(4, auto);
+	grid-template-columns: repeat(4, 1fr);
 	grid-auto-flow: row;
 	overflow: hidden;
+	padding: 2px;
 }
-.tlui-buttons__grid > .tlui-button {
+.tlui-grid > * {
 	margin: -2px;
 }
-.tlui-buttons__grid > .tlui-button:nth-of-type(4n),
-.tlui-buttons__vertical-align > .tlui-button:nth-of-type(3n) {
-	margin-right: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) {
-	margin-left: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) {
-	margin-top: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) {
-	margin-bottom: 0px;
-}
 
 /* Zoom button */
 
@@ -1000,6 +967,12 @@
 	max-width: 148px;
 }
 
+.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
+	border-radius: 10px;
+	outline: 2px solid var(--color-text);
+	outline-offset: -5px;
+}
+
 .tlui-style-panel::-webkit-scrollbar {
 	display: none;
 }
@@ -1027,12 +1000,8 @@
 	border-bottom: 1px solid var(--color-divider);
 }
 
-.tlui-style-panel__row {
-	display: flex;
-}
-/* Only really used for the alignment picker */
-.tlui-style-panel__row__extra-button {
-	margin-left: -2px;
+.tlui-style-panel__dropdown-picker:only-child {
+	width: 100%;
 }
 
 .tlui-style-panel__double-select-picker {
@@ -1064,6 +1033,26 @@
 	}
 }
 
+/* Accessibility subheadings */
+
+.tlui-style-panel__section .tlui-style-panel__subheading,
+.tlui-style-panel__section__common .tlui-style-panel__subheading,
+.tlui-style-panel__subheading + .tlui-slider__container {
+	margin: 0;
+	padding: var(--space-2) var(--space-3) 0px var(--space-4);
+	font-size: 12px;
+	font-weight: inherit;
+	line-height: inherit;
+}
+
+.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
+	padding-top: var(--space-3);
+}
+
+.tlui-style-panel__subheading + .tlui-slider__container {
+	padding-top: 0px;
+}
+
 /* --------------------- Bottom --------------------- */
 
 .tlui-layout__bottom {
@@ -1128,7 +1117,7 @@
 /* --------------------- Toolbar -------------------- */
 
 /* Wide container */
-.tlui-toolbar {
+.tlui-main-toolbar {
 	grid-column: 1 / span 3;
 	grid-row: 1;
 	display: flex;
@@ -1139,7 +1128,7 @@
 }
 
 /* Centered Content */
-.tlui-toolbar__inner {
+.tlui-main-toolbar__inner {
 	position: relative;
 	width: fit-content;
 	display: flex;
@@ -1147,12 +1136,12 @@
 	align-items: flex-end;
 }
 
-.tlui-toolbar__left {
+.tlui-main-toolbar__left {
 	width: fit-content;
 }
 
 /* Row of controls + lock button */
-.tlui-toolbar__extras {
+.tlui-main-toolbar__extras {
 	position: relative;
 	z-index: var(--layer-above);
 	width: 100%;
@@ -1161,11 +1150,11 @@
 	height: 48px;
 }
 
-.tlui-toolbar__extras:empty {
+.tlui-main-toolbar__extras:empty {
 	display: none;
 }
 
-.tlui-toolbar__extras__controls {
+.tlui-main-toolbar__extras__controls {
 	display: flex;
 	position: relative;
 	flex-direction: row;
@@ -1180,7 +1169,7 @@
 	width: fit-content;
 }
 
-.tlui-toolbar__tools {
+.tlui-main-toolbar__tools {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -1191,35 +1180,57 @@
 	background: var(--color-panel);
 	box-shadow: var(--shadow-2);
 }
-.tlui-toolbar__tools__list {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
 
-.tlui-toolbar__overflow {
+.tlui-main-toolbar__overflow {
 	width: 40px;
+	margin-left: 2px;
 }
 
-.tlui-layout__mobile .tlui-toolbar__overflow {
+.tlui-layout__mobile .tlui-main-toolbar__overflow {
 	width: 32px;
 	padding: 0px;
 }
 
-.tlui-toolbar *[data-state='open']::after {
+.tlui-main-toolbar *[data-state='open']::after {
 	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	opacity: 1;
 }
 
 @media (hover: hover) {
-	.tlui-toolbar *[data-state='open']:not(:hover)::after {
+	.tlui-main-toolbar *[data-state='open']:not(:hover)::after {
 		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 		opacity: 1;
 	}
 }
 
-.tlui-layout__mobile .tlui-toolbar {
-	transition: transform 0.15s ease-out 0.05s;
+/* ------------------- Tooltip -------------------- */
+
+.tlui-tooltip {
+	font-size: 12px;
+	padding: 2px 8px;
+	border-radius: 4px;
+	background-color: var(--color-tooltip);
+	box-shadow: none;
+	color: var(--color-text-shadow);
+	max-width: 400px;
+	width: fit-content;
+	text-align: center;
+	pointer-events: none;
+	will-change: transform, opacity;
+	z-index: 2;
+}
+
+.tlui-tooltip__arrow {
+	fill: var(--color-tooltip);
+	will-change: opacity;
+}
+
+[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
+	z-index: var(--layer-toasts) !important;
+}
+
+[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
+	transition: all 0.1s ease-out;
 }
 
 /* ------------------- Debug panel ------------------ */

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

@@ -288,11 +288,13 @@ describe('When shapes are overlapping', () => {
 		editor.pointerDown(0, 50) // over nothing
 		editor.pointerMove(125, 50) // over box1 only
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(175, 50) // box2 is higher but box1 is filled?
+		editor.pointerMove(175, 50) // box2 is higher but box1 is filled, but we're on the edge ofd box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(175, 70) // box2 is higher but box1 is filled, and we're inside of box2
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(225, 50) // box3 is higher
+		editor.pointerMove(225, 70) // box3 is higher
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(275, 50) // box4 is higher but box 3 is filled
+		editor.pointerMove(275, 70) // box4 is higher but box 3 is filled
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 	})
 
@@ -304,14 +306,18 @@ describe('When shapes are overlapping', () => {
 		])
 		editor.setCurrentTool('arrow')
 		editor.pointerDown(0, 50)
-		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2
+		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2, but we're on the edge of box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(175, 70) // box1 is smaller even though it's behind box2
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(150, 90) // box3 is smaller and at the front
+		editor.pointerMove(150, 90) // box3 is smaller and at the front but we're on the edge of box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(160, 90) // box3 is smaller and at the front and we're in box1 and box 3 and box 2
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 		editor.sendToBack([ids.box3])
 		editor.pointerMove(149, 90) // box3 is smaller, even when at the back
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(175, 50)
+		editor.pointerMove(175, 60) // inside of box1 and box 2, but box 1 is smaller
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
 	})
 })

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

@@ -0,0 +1,315 @@
+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()
+		})
+	})
+})