@tldraw/editor 3.9.0-canary.c8a14268052e → 3.9.0-canary.d799df28e99e

package/src/lib/exports/getSvgAsImage.ts

@@ -16,7 +16,7 @@ export async function getSvgAsImage(
 ) {
 	const { type, width, height, quality = 1, pixelRatio = 2 } = options
 
-	let [clampedWidth, clampedHeight] = await clampToBrowserMaxCanvasSize(
+	let [clampedWidth, clampedHeight] = clampToBrowserMaxCanvasSize(
 		width * pixelRatio,
 		height * pixelRatio
 	)

package/src/lib/globals/environment.ts

@@ -11,6 +11,7 @@ const tlenv = {
 	isAndroid: false,
 	isWebview: false,
 	isDarwin: false,
+	hasCanvasSupport: false,
 }
 
 if (typeof window !== 'undefined' && 'navigator' in window) {
@@ -20,6 +21,8 @@ if (typeof window !== 'undefined' && 'navigator' in window) {
 	tlenv.isFirefox = /firefox/i.test(navigator.userAgent)
 	tlenv.isAndroid = /android/i.test(navigator.userAgent)
 	tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1
+	tlenv.hasCanvasSupport =
+		typeof window !== 'undefined' && 'Promise' in window && 'HTMLCanvasElement' in window
 }
 
 export { tlenv }

package/src/lib/license/LicenseManager.test.ts

@@ -56,19 +56,22 @@ describe('LicenseManager', () => {
 	})
 
 	it('Signals that it is development mode when appropriate', async () => {
-		// @ts-ignore
-		delete window.location
-		// @ts-ignore
-		window.location = new URL('http://localhost:3000')
-
-		const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey, 'development')
-		const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
-		const result = await testEnvLicenseManager.getLicenseFromKey(licenseKey)
-		expect(result).toMatchObject({
-			isLicenseParseable: true,
-			isDomainValid: false,
-			isDevelopment: true,
-		})
+		const schemes = ['http', 'https']
+		for (const scheme of schemes) {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL(`${scheme}://localhost:3000`)
+
+			const testEnvLicenseManager = new LicenseManager('', keyPair.publicKey, 'development')
+			const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+			const result = await testEnvLicenseManager.getLicenseFromKey(licenseKey)
+			expect(result).toMatchObject({
+				isLicenseParseable: true,
+				isDomainValid: false,
+				isDevelopment: true,
+			})
+		}
 	})
 
 	it('Cleanses out valid keys that accidentally have zero-width characters or newlines', async () => {

package/src/lib/license/LicenseManager.ts

@@ -110,8 +110,8 @@ export class LicenseManager {
 		if (testEnvironment === 'development') return true
 		if (testEnvironment === 'production') return false
 
-		// If we are using https we assume it's a production env and a development one otherwise
-		return window.location.protocol !== 'https:'
+		// If we are using https on a non-localhost domain we assume it's a production env and a development one otherwise
+		return window.location.protocol !== 'https:' || window.location.hostname === 'localhost'
 	}
 
 	private async extractLicenseKey(licenseKey: string): Promise<LicenseInfo> {

package/src/lib/utils/browserCanvasMaxSize.ts

@@ -1,5 +1,3 @@
-import canvasSize from 'canvas-size'
-
 /** @internal */
 export interface CanvasMaxSize {
 	maxWidth: number
@@ -7,33 +5,135 @@ export interface CanvasMaxSize {
 	maxArea: number
 }
 
-let maxSizePromise: Promise<CanvasMaxSize> | null = null
+// Cache this, only want to do this once per browser session
+let maxCanvasSizes: CanvasMaxSize | null = null
 
-function getBrowserCanvasMaxSize() {
-	if (!maxSizePromise) {
-		maxSizePromise = calculateBrowserCanvasMaxSize()
+function getBrowserCanvasMaxSize(): CanvasMaxSize {
+	if (!maxCanvasSizes) {
+		maxCanvasSizes = {
+			maxWidth: getCanvasSize('width'), // test very wide but 1 pixel tall canvases
+			maxHeight: getCanvasSize('height'), // test very tall but 1 pixel wide canvases
+			maxArea: getCanvasSize('area'), // test square canvases
+		}
 	}
-
-	return maxSizePromise
+	return maxCanvasSizes
 }
 
-async function calculateBrowserCanvasMaxSize(): Promise<CanvasMaxSize> {
-	const maxWidth = await canvasSize.maxWidth({ usePromise: true })
-	const maxHeight = await canvasSize.maxHeight({ usePromise: true })
-	const maxArea = await canvasSize.maxArea({ usePromise: true })
-	return {
-		maxWidth: maxWidth.width,
-		maxHeight: maxHeight.height,
-		maxArea: maxArea.width * maxArea.height,
-	}
-}
+// Extracted from https://github.com/jhildenbiddle/canvas-size
+// MIT License: https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE
+// Copyright (c) John Hildenbiddle
 
-// https://github.com/jhildenbiddle/canvas-size?tab=readme-ov-file#test-results
 const MAX_SAFE_CANVAS_DIMENSION = 8192
 const MAX_SAFE_CANVAS_AREA = 4096 * 4096
 
+const TEST_SIZES = {
+	area: [
+		// Chrome 70 (Mac, Win)
+		// Chrome 68 (Android 4.4)
+		// Edge 17 (Win)
+		// Safari 7-12 (Mac)
+		16384,
+		// Chrome 68 (Android 7.1-9)
+		14188,
+		// Chrome 68 (Android 5)
+		11402,
+		// Firefox 63 (Mac, Win)
+		11180,
+		// Chrome 68 (Android 6)
+		10836,
+		// IE 9-11 (Win)
+		8192,
+		// IE Mobile (Windows Phone 8.x)
+		// Safari (iOS 9 - 12)
+		4096,
+	],
+	height: [
+		// Safari 7-12 (Mac)
+		// Safari (iOS 9-12)
+		8388607,
+		// Chrome 83 (Mac, Win)
+		65535,
+		// Chrome 70 (Mac, Win)
+		// Chrome 68 (Android 4.4-9)
+		// Firefox 63 (Mac, Win)
+		32767,
+		// Edge 17 (Win)
+		// IE11 (Win)
+		16384,
+		// IE 9-10 (Win)
+		8192,
+		// IE Mobile (Windows Phone 8.x)
+		4096,
+	],
+	width: [
+		// Safari 7-12 (Mac)
+		// Safari (iOS 9-12)
+		4194303,
+		// Chrome 83 (Mac, Win)
+		65535,
+		// Chrome 70 (Mac, Win)
+		// Chrome 68 (Android 4.4-9)
+		// Firefox 63 (Mac, Win)
+		32767,
+		// Edge 17 (Win)
+		// IE11 (Win)
+		16384,
+		// IE 9-10 (Win)
+		8192,
+		// IE Mobile (Windows Phone 8.x)
+		4096,
+	],
+} as const
+
+/**
+ * Tests ability to read pixel data from canvas elements of various dimensions
+ * by decreasing canvas height and/or width until a test succeeds.
+ */
+export function getCanvasSize(dimension: 'width' | 'height' | 'area') {
+	const cropCvs = document.createElement('canvas')
+	cropCvs.width = 1
+	cropCvs.height = 1
+	const cropCtx = cropCvs.getContext('2d')!
+
+	for (const size of TEST_SIZES[dimension]) {
+		const w = dimension === 'height' ? 1 : size
+		const h = dimension === 'width' ? 1 : size
+
+		const testCvs = document.createElement('canvas')
+		testCvs.width = w
+		testCvs.height = h
+		const testCtx = testCvs.getContext('2d')!
+
+		testCtx.fillRect(w - 1, h - 1, 1, 1)
+		cropCtx.drawImage(testCvs, w - 1, h - 1, 1, 1, 0, 0, 1, 1)
+
+		const isTestPassed = cropCtx.getImageData(0, 0, 1, 1).data[3] !== 0
+		// release memory
+		testCvs.width = 0
+		testCvs.height = 0
+
+		if (isTestPassed) {
+			// release memory
+			cropCvs.width = 0
+			cropCvs.height = 0
+
+			if (dimension === 'area') {
+				return size * size
+			} else {
+				return size
+			}
+		}
+	}
+
+	// didn't find a good size, release memory and error
+	cropCvs.width = 0
+	cropCvs.height = 0
+
+	throw Error('Failed to determine maximum canvas dimension')
+}
+
 /** @internal */
-export async function clampToBrowserMaxCanvasSize(width: number, height: number) {
+export function clampToBrowserMaxCanvasSize(width: number, height: number) {
 	if (
 		width <= MAX_SAFE_CANVAS_DIMENSION &&
 		height <= MAX_SAFE_CANVAS_DIMENSION &&
@@ -42,7 +142,7 @@ export async function clampToBrowserMaxCanvasSize(width: number, height: number)
 		return [width, height]
 	}
 
-	const { maxWidth, maxHeight, maxArea } = await getBrowserCanvasMaxSize()
+	const { maxWidth, maxHeight, maxArea } = getBrowserCanvasMaxSize()
 	const aspectRatio = width / height
 
 	if (width > maxWidth) {

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.9.0-canary.c8a14268052e'
+export const version = '3.9.0-canary.d799df28e99e'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-02-25T08:53:06.392Z',
-	patch: '2025-02-25T08:53:06.392Z',
+	minor: '2025-02-25T14:25:18.875Z',
+	patch: '2025-02-25T14:25:18.875Z',
 }