@tldraw/editor 3.16.0-canary.c2c4563957ce → 3.16.0-canary.c360426d8b7a

package/src/lib/license/Watermark.tsx

@@ -3,7 +3,7 @@ import { memo, useRef } from 'react'
 import { useCanvasEvents } from '../hooks/useCanvasEvents'
 import { useEditor } from '../hooks/useEditor'
 import { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'
-import { preventDefault, stopEventPropagation } from '../utils/dom'
+import { markEventAsHandled, preventDefault } from '../utils/dom'
 import { runtime } from '../utils/runtime'
 import { watermarkDesktopSvg, watermarkMobileSvg } from '../watermarks'
 import { LicenseManager } from './LicenseManager'
@@ -28,12 +28,62 @@ export const Watermark = memo(function Watermark() {
 	return (
 		<>
 			<LicenseStyles />
-			<WatermarkInner src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC} />
+			<WatermarkInner
+				src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC}
+				isUnlicensed={licenseManagerState === 'unlicensed'}
+			/>
 		</>
 	)
 })
 
-const WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {
+const UnlicensedWatermark = memo(function UnlicensedWatermark({
+	isDebugMode,
+	isMobile,
+}: {
+	isDebugMode: boolean
+	isMobile: boolean
+}) {
+	const events = useCanvasEvents()
+	const ref = useRef<HTMLDivElement>(null)
+	usePassThroughWheelEvents(ref)
+
+	const url =
+		'https://tldraw.dev/pricing?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'
+
+	return (
+		<div
+			ref={ref}
+			className={LicenseManager.className}
+			data-debug={isDebugMode}
+			data-mobile={isMobile}
+			data-unlicensed={true}
+			data-testid="tl-watermark-unlicensed"
+			draggable={false}
+			{...events}
+		>
+			<button
+				draggable={false}
+				role="button"
+				onPointerDown={(e) => {
+					markEventAsHandled(e)
+					preventDefault(e)
+				}}
+				title="The tldraw SDK requires a license key to work in production. You can get a free 100-day trial license at tldraw.dev/pricing."
+				onClick={() => runtime.openWindow(url, '_blank')}
+			>
+				Get a license for production
+			</button>
+		</div>
+	)
+})
+
+const WatermarkInner = memo(function WatermarkInner({
+	src,
+	isUnlicensed,
+}: {
+	src: string
+	isUnlicensed: boolean
+}) {
 	const editor = useEditor()
 	const isDebugMode = useValue('debug mode', () => editor.getInstanceState().isDebugMode, [editor])
 	const isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [
@@ -47,12 +97,17 @@ const WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {
 	const maskCss = `url('${src}') center 100% / 100% no-repeat`
 	const url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'
 
+	if (isUnlicensed) {
+		return <UnlicensedWatermark isDebugMode={isDebugMode} isMobile={isMobile} />
+	}
+
 	return (
 		<div
 			ref={ref}
 			className={LicenseManager.className}
 			data-debug={isDebugMode}
 			data-mobile={isMobile}
+			data-testid="tl-watermark-licensed"
 			draggable={false}
 			{...events}
 		>
@@ -60,10 +115,10 @@ const WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {
 				draggable={false}
 				role="button"
 				onPointerDown={(e) => {
-					stopEventPropagation(e)
+					markEventAsHandled(e)
 					preventDefault(e)
 				}}
-				title="made with tldraw"
+				title="Build infinite canvas applications with the tldraw SDK. Learn more at https://tldraw.dev."
 				onClick={() => runtime.openWindow(url, '_blank')}
 				style={{ mask: maskCss, WebkitMask: maskCss }}
 			/>
@@ -75,7 +130,8 @@ const LicenseStyles = memo(function LicenseStyles() {
 	const editor = useEditor()
 	const className = LicenseManager.className
 
-	const CSS = `/* ------------------- SEE LICENSE -------------------
+	const CSS = `
+/* ------------------- SEE LICENSE -------------------
 The tldraw watermark is part of tldraw's license. It is shown for unlicensed
 or "licensed-with-watermark" users. By using this library, you agree to
 preserve the watermark's behavior, keeping it visible, unobscured, and
@@ -84,87 +140,105 @@ available to user-interaction.
 To remove the watermark, please purchase a license at tldraw.dev.
 */
 
-	.${className} {
-		position: absolute;
-		bottom: max(var(--tl-space-2), env(safe-area-inset-bottom));
-		right: max(var(--tl-space-2), env(safe-area-inset-right));
-		width: 96px;
-		height: 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: var(--tl-layer-watermark) !important;
-		background-color: color-mix(in srgb, var(--tl-color-background) 62%, transparent);
-		opacity: 1;
-		border-radius: 5px;
-		pointer-events: all;
-		padding: 2px;
-		box-sizing: content-box;
+.${className} {
+	position: absolute;
+	bottom: max(var(--tl-space-2), env(safe-area-inset-bottom));
+	right: max(var(--tl-space-2), env(safe-area-inset-right));
+	width: 96px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: var(--tl-layer-watermark) !important;
+	background-color: color-mix(in srgb, var(--tl-color-background) 62%, transparent);
+	opacity: 1;
+	border-radius: 5px;
+	pointer-events: all;
+	padding: 2px;
+	box-sizing: content-box;
+}
+
+.${className} > button {
+	position: absolute;
+	width: 96px;
+	height: 32px;
+	pointer-events: all;
+	cursor: inherit;
+	color: var(--tl-color-text);
+	opacity: .38;
+	border: 0;
+	padding: 0;
+	background-color: currentColor;
+}
+
+.${className}[data-debug='true'] {
+	bottom: max(46px, env(safe-area-inset-bottom));
+}
+
+.${className}[data-mobile='true'] {
+	border-radius: 4px 0px 0px 4px;
+	right: max(-2px, calc(env(safe-area-inset-right) - 2px));
+	width: 8px;
+	height: 48px;
+}
+
+.${className}[data-mobile='true'] > button {
+	width: 8px;
+	height: 32px;
+}
+
+.${className}[data-unlicensed='true'] > button {
+	font-size: 100px;
+	position: absolute;
+	pointer-events: all;
+	cursor: pointer;
+	color: var(--tl-color-text);
+	opacity: 0.8;
+	border: 0;
+	padding: 0;
+	background-color: transparent;
+	font-size: 11px;
+	font-weight: 600;
+	text-align: center;
+}
+
+.${className}[data-mobile='true'][data-unlicensed='true'] > button {
+	display: none;
+}
+
+@media (hover: hover) {
+	.${className}[data-licensed='false'] > button {
+		pointer-events: none;
 	}
 
-	.${className} > button {
-		position: absolute;
-		width: 96px;
-		height: 32px;
-		pointer-events: all;
-		cursor: inherit;
-		color: var(--tl-color-text);
-		opacity: .38;
-		border: 0;
-		padding: 0;
-		background-color: currentColor;
+	.${className}[data-licensed='false']:hover {
+		background-color: var(--tl-color-background);
+		transition: background-color 0.2s ease-in-out;
+		transition-delay: 0.32s;
 	}
 
-	.${className}[data-debug='true'] {
-		bottom: max(46px, env(safe-area-inset-bottom));
+	.${className}[data-licensed='false']:hover > button {
+		animation: ${className}_delayed_link 0.2s forwards ease-in-out;
+		animation-delay: 0.32s;
 	}
 
-	.${className}[data-mobile='true'] {
-		border-radius: 4px 0px 0px 4px;
-		right: max(-2px, calc(env(safe-area-inset-right) - 2px));
-		width: 8px;
-		height: 48px;
+	.${className}[data-licensed='false'] > button:focus-visible {
+		opacity: 1;
 	}
+}
 
-	.${className}[data-mobile='true'] > button {
-		width: 8px;
-		height: 32px;
+@keyframes ${className}_delayed_link {
+	0% {
+		cursor: inherit;
+		opacity: .38;
+		pointer-events: none;
 	}
-
-	@media (hover: hover) {
-		.${className} > button {
-			pointer-events: none;
-		}
-
-		.${className}:hover {
-			background-color: var(--tl-color-background);
-			transition: background-color 0.2s ease-in-out;
-			transition-delay: 0.32s;
-		}
-
-		.${className}:hover > button {
-			animation: ${className}_delayed_link 0.2s forwards ease-in-out;
-			animation-delay: 0.32s;
-		}
-
-		.${className} > button:focus-visible {
-			opacity: 1;
-		}
+	100% {
+		cursor: pointer;
+		opacity: 1;
+		pointer-events: all;
 	}
-
-
-	@keyframes ${className}_delayed_link {
-		0% {
-			cursor: inherit;
-			opacity: .38;
-			pointer-events: none;
-		}
-		100% {
-			cursor: pointer;
-			opacity: 1;
-			pointer-events: all;
-		}
-	}`
+}`
 
 	return <style nonce={editor.options.nonce}>{CSS}</style>
 })

package/src/lib/primitives/geometry/Geometry2d.test.ts

@@ -1,6 +1,7 @@
 import { Mat } from '../Mat'
 import { Vec, VecLike } from '../Vec'
 import { Geometry2dFilters } from './Geometry2d'
+import { Group2d } from './Group2d'
 import { Rectangle2d } from './Rectangle2d'
 
 describe('TransformedGeometry2d', () => {
@@ -36,6 +37,425 @@ describe('TransformedGeometry2d', () => {
 	})
 })
 
+describe('excludeFromShapeBounds', () => {
+	test('simple geometry with excludeFromShapeBounds flag', () => {
+		const rect = new Rectangle2d({
+			width: 100,
+			height: 50,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		// The bounds should still be calculated normally for simple geometry
+		const bounds = rect.bounds
+		expect(bounds.width).toBe(100)
+		expect(bounds.height).toBe(50)
+		expect(bounds.x).toBe(0)
+		expect(bounds.y).toBe(0)
+	})
+
+	test('group with excluded child geometry', () => {
+		const mainRect = new Rectangle2d({
+			width: 100,
+			height: 50,
+			isFilled: true,
+		})
+
+		const excludedRect = new Rectangle2d({
+			width: 200,
+			height: 100,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const group = new Group2d({
+			children: [mainRect, excludedRect],
+		})
+
+		// The bounds should only include the non-excluded rectangle
+		const bounds = group.bounds
+		expect(bounds.width).toBe(100) // Only the main rectangle width
+		expect(bounds.height).toBe(50) // Only the main rectangle height
+		expect(bounds.x).toBe(0)
+		expect(bounds.y).toBe(0)
+	})
+
+	test('group with multiple excluded children', () => {
+		const rect1 = new Rectangle2d({
+			width: 50,
+			height: 50,
+			isFilled: true,
+		})
+
+		const rect2 = new Rectangle2d({
+			width: 100,
+			height: 30,
+			isFilled: true,
+		})
+
+		const excludedRect1 = new Rectangle2d({
+			width: 200,
+			height: 200,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const excludedRect2 = new Rectangle2d({
+			width: 300,
+			height: 300,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const group = new Group2d({
+			children: [rect1, excludedRect1, rect2, excludedRect2],
+		})
+
+		// The bounds should include both non-excluded rectangles
+		const bounds = group.bounds
+		expect(bounds.width).toBe(100) // Width of rect2 (larger of the two)
+		expect(bounds.height).toBe(50) // Height of rect1 (larger of the two)
+		expect(bounds.x).toBe(0)
+		expect(bounds.y).toBe(0)
+	})
+
+	test('group with all children excluded', () => {
+		const excludedRect1 = new Rectangle2d({
+			width: 100,
+			height: 50,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const excludedRect2 = new Rectangle2d({
+			width: 200,
+			height: 100,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const group = new Group2d({
+			children: [excludedRect1, excludedRect2],
+		})
+
+		// The bounds should be empty when all children are excluded
+		const bounds = group.bounds
+		expect(bounds.width).toBe(0)
+		expect(bounds.height).toBe(0)
+		expect(bounds.x).toBe(0)
+		expect(bounds.y).toBe(0)
+	})
+
+	test('nested groups with excluded geometry', () => {
+		const innerRect = new Rectangle2d({
+			width: 50,
+			height: 50,
+			isFilled: true,
+		})
+
+		const excludedRect = new Rectangle2d({
+			width: 200,
+			height: 200,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const innerGroup = new Group2d({
+			children: [innerRect, excludedRect],
+		})
+
+		const outerRect = new Rectangle2d({
+			width: 100,
+			height: 30,
+			isFilled: true,
+		})
+
+		const outerGroup = new Group2d({
+			children: [innerGroup, outerRect],
+		})
+
+		// The bounds should include both the inner group (without excluded rect) and outer rect
+		const bounds = outerGroup.bounds
+		expect(bounds.width).toBe(100) // Width of outerRect (larger)
+		expect(bounds.height).toBe(50) // Height of innerRect (larger)
+		expect(bounds.x).toBe(0)
+		expect(bounds.y).toBe(0)
+	})
+
+	test('bounds calculation with transformed geometry', () => {
+		const rect = new Rectangle2d({
+			width: 50,
+			height: 50,
+			isFilled: true,
+		}).transform(Mat.Translate(100, 100))
+
+		const excludedRect = new Rectangle2d({
+			width: 200,
+			height: 200,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		}).transform(Mat.Translate(50, 50))
+
+		const group = new Group2d({
+			children: [rect, excludedRect],
+		})
+
+		// The bounds should only include the non-excluded rectangle
+		const bounds = group.bounds
+		// Verify that the excluded rectangle doesn't affect the bounds
+		// The bounds should be smaller than if the excluded rect was included
+		expect(bounds.width).toBeLessThan(200) // Should not include the excluded rect's width
+		expect(bounds.height).toBeLessThan(200) // Should not include the excluded rect's height
+		// The bounds should not be empty
+		expect(bounds.width).toBeGreaterThan(0)
+		expect(bounds.height).toBeGreaterThan(0)
+	})
+})
+
+describe('getBoundsVertices', () => {
+	test('basic geometry returns vertices when not excluded from bounds', () => {
+		const rect = new Rectangle2d({
+			width: 100,
+			height: 50,
+			isFilled: true,
+		})
+
+		const boundsVertices = rect.getBoundsVertices()
+		const vertices = rect.getVertices()
+
+		expect(boundsVertices).toEqual(vertices)
+		expect(boundsVertices.length).toBe(4)
+		expect(boundsVertices).toMatchObject([
+			{ x: 0, y: 0, z: 1 },
+			{ x: 100, y: 0, z: 1 },
+			{ x: 100, y: 50, z: 1 },
+			{ x: 0, y: 50, z: 1 },
+		])
+	})
+
+	test('geometry excluded from shape bounds returns empty array', () => {
+		const rect = new Rectangle2d({
+			width: 100,
+			height: 50,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const boundsVertices = rect.getBoundsVertices()
+		expect(boundsVertices).toEqual([])
+	})
+
+	test('cached boundsVertices property', () => {
+		const rect = new Rectangle2d({
+			width: 100,
+			height: 50,
+			isFilled: true,
+		})
+
+		// Access the cached property multiple times
+		const boundsVertices1 = rect.boundsVertices
+		const boundsVertices2 = rect.boundsVertices
+
+		// Should return the same reference (cached)
+		expect(boundsVertices1).toBe(boundsVertices2)
+		expect(boundsVertices1.length).toBe(4)
+	})
+})
+
+describe('TransformedGeometry2d getBoundsVertices', () => {
+	test('transforms bounds vertices correctly', () => {
+		const rect = new Rectangle2d({
+			width: 100,
+			height: 50,
+			isFilled: true,
+		})
+
+		const transformed = rect.transform(Mat.Translate(50, 100).scale(2, 2))
+		const boundsVertices = transformed.getBoundsVertices()
+
+		expect(boundsVertices).toMatchObject([
+			{ x: 50, y: 100, z: 1 },
+			{ x: 250, y: 100, z: 1 },
+			{ x: 250, y: 200, z: 1 },
+			{ x: 50, y: 200, z: 1 },
+		])
+	})
+
+	test('transforms empty bounds vertices for excluded geometry', () => {
+		const rect = new Rectangle2d({
+			width: 100,
+			height: 50,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const transformed = rect.transform(Mat.Translate(50, 100))
+		const boundsVertices = transformed.getBoundsVertices()
+
+		expect(boundsVertices).toEqual([])
+	})
+
+	test('nested transform preserves bounds vertices behavior', () => {
+		const rect = new Rectangle2d({
+			width: 100,
+			height: 50,
+			isFilled: true,
+		})
+
+		const transformed1 = rect.transform(Mat.Translate(10, 20))
+		const transformed2 = transformed1.transform(Mat.Scale(2, 2))
+		const boundsVertices = transformed2.getBoundsVertices()
+
+		expect(boundsVertices).toMatchObject([
+			{ x: 20, y: 40, z: 1 },
+			{ x: 220, y: 40, z: 1 },
+			{ x: 220, y: 140, z: 1 },
+			{ x: 20, y: 140, z: 1 },
+		])
+	})
+})
+
+describe('Group2d getBoundsVertices', () => {
+	test('flattens children bounds vertices', () => {
+		const rect1 = new Rectangle2d({
+			width: 50,
+			height: 50,
+			isFilled: true,
+		})
+
+		const rect2 = new Rectangle2d({
+			width: 30,
+			height: 30,
+			isFilled: true,
+		}).transform(Mat.Translate(60, 60))
+
+		const group = new Group2d({
+			children: [rect1, rect2],
+		})
+
+		const boundsVertices = group.getBoundsVertices()
+
+		// Should include all vertices from both rectangles
+		expect(boundsVertices.length).toBe(8) // 4 vertices from each rectangle
+
+		// Check that we have vertices from both rectangles
+		expect(boundsVertices).toEqual(
+			expect.arrayContaining([
+				expect.objectContaining({ x: 0, y: 0 }), // rect1 vertices
+				expect.objectContaining({ x: 50, y: 0 }),
+				expect.objectContaining({ x: 50, y: 50 }),
+				expect.objectContaining({ x: 0, y: 50 }),
+				expect.objectContaining({ x: 60, y: 60 }), // rect2 vertices
+				expect.objectContaining({ x: 90, y: 60 }),
+				expect.objectContaining({ x: 90, y: 90 }),
+				expect.objectContaining({ x: 60, y: 90 }),
+			])
+		)
+	})
+
+	test('excludes children marked as excluded from bounds', () => {
+		const rect1 = new Rectangle2d({
+			width: 50,
+			height: 50,
+			isFilled: true,
+		})
+
+		const rect2 = new Rectangle2d({
+			width: 100,
+			height: 100,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const group = new Group2d({
+			children: [rect1, rect2],
+		})
+
+		const boundsVertices = group.getBoundsVertices()
+
+		// Should only include vertices from rect1, not rect2
+		expect(boundsVertices.length).toBe(4) // Only rect1's 4 vertices
+		expect(boundsVertices).toMatchObject([
+			{ x: 0, y: 0, z: 1 },
+			{ x: 50, y: 0, z: 1 },
+			{ x: 50, y: 50, z: 1 },
+			{ x: 0, y: 50, z: 1 },
+		])
+	})
+
+	test('returns empty array when group itself is excluded from bounds', () => {
+		const rect1 = new Rectangle2d({
+			width: 50,
+			height: 50,
+			isFilled: true,
+		})
+
+		const rect2 = new Rectangle2d({
+			width: 30,
+			height: 30,
+			isFilled: true,
+		})
+
+		const group = new Group2d({
+			children: [rect1, rect2],
+			excludeFromShapeBounds: true,
+		})
+
+		const boundsVertices = group.getBoundsVertices()
+		expect(boundsVertices).toEqual([])
+	})
+
+	test('handles nested groups correctly', () => {
+		const rect1 = new Rectangle2d({
+			width: 50,
+			height: 50,
+			isFilled: true,
+		})
+
+		const rect2 = new Rectangle2d({
+			width: 30,
+			height: 30,
+			isFilled: true,
+		})
+
+		const innerGroup = new Group2d({
+			children: [rect2],
+		})
+
+		const outerGroup = new Group2d({
+			children: [rect1, innerGroup],
+		})
+
+		const boundsVertices = outerGroup.getBoundsVertices()
+
+		// Should include vertices from both rectangles
+		expect(boundsVertices.length).toBe(8) // 4 vertices from each rectangle
+	})
+
+	test('handles all children excluded from bounds', () => {
+		const rect1 = new Rectangle2d({
+			width: 50,
+			height: 50,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const rect2 = new Rectangle2d({
+			width: 30,
+			height: 30,
+			isFilled: true,
+			excludeFromShapeBounds: true,
+		})
+
+		const group = new Group2d({
+			children: [rect1, rect2],
+		})
+
+		const boundsVertices = group.getBoundsVertices()
+		expect(boundsVertices).toEqual([])
+	})
+})
+
 function expectApproxMatch(a: VecLike, b: VecLike) {
 	expect(a.x).toBeCloseTo(b.x, 0.0001)
 	expect(a.y).toBeCloseTo(b.y, 0.0001)