@tldraw/editor 3.9.0-canary.6beea33123dd → 3.9.0-canary.6f51d9267136

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -36,7 +36,7 @@ export interface TLShapeUtilConstructor<
  *
  * @public
  */
-export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLShape> {
+export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLUnknownShape> {
 	/** The type of shape referenced by the `fromId` of the binding. */
 	fromShapeType: string
 	/** The type of shape referenced by the `toId` of the binding. */
@@ -45,6 +45,27 @@ export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLShape>
 	bindingType: string
 }
 
+/**
+ * Options passed to {@link ShapeUtil.canBeLaidOut}.
+ *
+ * @public
+ */
+export interface TLShapeUtilCanBeLaidOutOpts {
+	/** The type of action causing the layout. */
+	type?: 'align' | 'distribute' | 'pack' | 'stack' | 'flip' | 'stretch'
+	/** The other shapes being laid out */
+	shapes?: TLShape[]
+}
+
+/** Additional options for the {@link ShapeUtil.getGeometry} method.
+ *
+ * @public
+ */
+export interface TLGeometryOpts {
+	/** The context in which the geometry is being requested. */
+	context?: string
+}
+
 /** @public */
 export interface TLShapeUtilCanvasSvgDef {
 	key: string
@@ -128,9 +149,10 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * Get the shape's geometry.
 	 *
 	 * @param shape - The shape.
+	 * @param opts - Additional options for the request.
 	 * @public
 	 */
-	abstract getGeometry(shape: Shape): Geometry2d
+	abstract getGeometry(shape: Shape, opts?: TLGeometryOpts): Geometry2d
 
 	/**
 	 * Get a JSX element for the shape (as an HTML element).
@@ -151,6 +173,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	/**
 	 * Whether the shape can be snapped to by another shape.
 	 *
+	 * @param shape - The shape.
 	 * @public
 	 */
 	canSnap(_shape: Shape): boolean {
@@ -171,7 +194,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canBind(_opts: TLShapeUtilCanBindOpts<Shape>): boolean {
+	canBind(_opts: TLShapeUtilCanBindOpts): boolean {
 		return true
 	}
 
@@ -212,11 +235,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	}
 
 	/**
-	 * Whether the shape participates in stacking, aligning, and distributing.
+	 * Whether the shape can participate in layout functions such as alignment or distribution.
+	 *
+	 * @param shape - The shape.
+	 * @param info - Additional context information: the type of action causing the layout and the
+	 * @public
 	 *
 	 * @public
 	 */
-	canBeLaidOut(_shape: Shape): boolean {
+	canBeLaidOut(_shape: Shape, _info: TLShapeUtilCanBeLaidOutOpts): boolean {
 		return true
 	}
 

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/exports/getSvgJsx.tsx

@@ -205,6 +205,7 @@ function SvgExport({
 		;(async () => {
 			const shapeDefs: Record<string, { pending: false; element: ReactElement }> = {}
 
+			// Then render everything. The shapes with assets should all hit the cache
 			const unorderedShapeElementPromises = renderingShapes.map(
 				async ({ id, opacity, index, backgroundIndex }) => {
 					// Don't render the frame if we're only exporting a single frame and it's children

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.6beea33123dd'
+export const version = '3.9.0-canary.6f51d9267136'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-02-25T08:23:37.972Z',
-	patch: '2025-02-25T08:23:37.972Z',
+	minor: '2025-02-27T14:15:31.085Z',
+	patch: '2025-02-27T14:15:31.085Z',
 }