@tldraw/editor 3.16.0-canary.acb40a76700b → 3.16.0-canary.b33662a7aefb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/dist-cjs/index.d.ts +49 -0
  2. package/dist-cjs/index.js +1 -1
  3. package/dist-cjs/lib/TldrawEditor.js +5 -1
  4. package/dist-cjs/lib/TldrawEditor.js.map +2 -2
  5. package/dist-cjs/lib/components/Shape.js +7 -10
  6. package/dist-cjs/lib/components/Shape.js.map +2 -2
  7. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +4 -23
  8. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +2 -2
  9. package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js +1 -1
  10. package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js.map +2 -2
  11. package/dist-cjs/lib/config/TLUserPreferences.js +1 -1
  12. package/dist-cjs/lib/config/TLUserPreferences.js.map +2 -2
  13. package/dist-cjs/lib/editor/Editor.js +38 -11
  14. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  15. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +1 -1
  16. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +2 -2
  17. package/dist-cjs/lib/editor/shapes/ShapeUtil.js +13 -0
  18. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  19. package/dist-cjs/lib/exports/getSvgJsx.js +34 -14
  20. package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
  21. package/dist-cjs/lib/hooks/useCanvasEvents.js +7 -5
  22. package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
  23. package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js +4 -1
  24. package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js.map +2 -2
  25. package/dist-cjs/lib/options.js +6 -0
  26. package/dist-cjs/lib/options.js.map +2 -2
  27. package/dist-cjs/lib/primitives/Box.js +3 -0
  28. package/dist-cjs/lib/primitives/Box.js.map +2 -2
  29. package/dist-cjs/version.js +3 -3
  30. package/dist-cjs/version.js.map +1 -1
  31. package/dist-esm/index.d.mts +49 -0
  32. package/dist-esm/index.mjs +1 -1
  33. package/dist-esm/lib/TldrawEditor.mjs +5 -1
  34. package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
  35. package/dist-esm/lib/components/Shape.mjs +7 -10
  36. package/dist-esm/lib/components/Shape.mjs.map +2 -2
  37. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +4 -23
  38. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
  39. package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs +1 -1
  40. package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs.map +2 -2
  41. package/dist-esm/lib/config/TLUserPreferences.mjs +1 -1
  42. package/dist-esm/lib/config/TLUserPreferences.mjs.map +2 -2
  43. package/dist-esm/lib/editor/Editor.mjs +38 -11
  44. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  45. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +1 -1
  46. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +2 -2
  47. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +13 -0
  48. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  49. package/dist-esm/lib/exports/getSvgJsx.mjs +34 -14
  50. package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
  51. package/dist-esm/lib/hooks/useCanvasEvents.mjs +7 -5
  52. package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
  53. package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs +4 -1
  54. package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs.map +2 -2
  55. package/dist-esm/lib/options.mjs +6 -0
  56. package/dist-esm/lib/options.mjs.map +2 -2
  57. package/dist-esm/lib/primitives/Box.mjs +4 -1
  58. package/dist-esm/lib/primitives/Box.mjs.map +2 -2
  59. package/dist-esm/version.mjs +3 -3
  60. package/dist-esm/version.mjs.map +1 -1
  61. package/editor.css +8 -0
  62. package/package.json +14 -37
  63. package/src/lib/TldrawEditor.tsx +6 -1
  64. package/src/lib/components/Shape.tsx +6 -12
  65. package/src/lib/components/default-components/DefaultCanvas.tsx +5 -22
  66. package/src/lib/components/default-components/DefaultErrorFallback.tsx +1 -1
  67. package/src/lib/config/TLUserPreferences.ts +1 -1
  68. package/src/lib/editor/Editor.test.ts +12 -11
  69. package/src/lib/editor/Editor.ts +48 -22
  70. package/src/lib/editor/managers/ClickManager/ClickManager.test.ts +15 -14
  71. package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.test.ts +16 -15
  72. package/src/lib/editor/managers/FocusManager/FocusManager.test.ts +49 -48
  73. package/src/lib/editor/managers/FontManager/FontManager.test.ts +24 -23
  74. package/src/lib/editor/managers/HistoryManager/HistoryManager.test.ts +7 -6
  75. package/src/lib/editor/managers/ScribbleManager/ScribbleManager.test.ts +12 -11
  76. package/src/lib/editor/managers/SnapManager/SnapManager.test.ts +57 -50
  77. package/src/lib/editor/managers/TextManager/TextManager.test.ts +51 -26
  78. package/src/lib/editor/managers/TickManager/TickManager.test.ts +14 -13
  79. package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts +21 -26
  80. package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts +1 -1
  81. package/src/lib/editor/shapes/ShapeUtil.ts +35 -0
  82. package/src/lib/exports/getSvgJsx.test.ts +868 -0
  83. package/src/lib/exports/getSvgJsx.tsx +76 -19
  84. package/src/lib/hooks/useCanvasEvents.ts +6 -6
  85. package/src/lib/hooks/usePassThroughWheelEvents.ts +6 -1
  86. package/src/lib/license/LicenseManager.test.ts +3 -1
  87. package/src/lib/license/Watermark.test.tsx +2 -1
  88. package/src/lib/options.ts +6 -0
  89. package/src/lib/primitives/Box.test.ts +126 -0
  90. package/src/lib/primitives/Box.ts +10 -1
  91. package/src/lib/utils/sync/LocalIndexedDb.test.ts +2 -1
  92. package/src/lib/utils/sync/TLLocalSyncClient.test.ts +15 -15
  93. package/src/version.ts +3 -3
  94. package/dist-cjs/lib/utils/nearestMultiple.js +0 -34
  95. package/dist-cjs/lib/utils/nearestMultiple.js.map +0 -7
  96. package/dist-esm/lib/utils/nearestMultiple.mjs +0 -14
  97. package/dist-esm/lib/utils/nearestMultiple.mjs.map +0 -7
  98. package/src/lib/utils/nearestMultiple.ts +0 -13
@@ -57,33 +57,21 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
57
57
  .filter(({ id }) => shapeIdsToInclude.has(id))
58
58
 
59
59
  // --- Common bounding box of all shapes
60
+ const singleFrameShapeId =
61
+ ids.length === 1 && editor.isShapeOfType<TLFrameShape>(editor.getShape(ids[0])!, 'frame')
62
+ ? ids[0]
63
+ : null
64
+
60
65
  let bbox: null | Box = null
61
66
  if (opts.bounds) {
62
- bbox = opts.bounds
67
+ bbox = opts.bounds.clone().expandBy(padding)
63
68
  } else {
64
- for (const { id } of renderingShapes) {
65
- const maskedPageBounds = editor.getShapeMaskedPageBounds(id)
66
- if (!maskedPageBounds) continue
67
- if (bbox) {
68
- bbox.union(maskedPageBounds)
69
- } else {
70
- bbox = maskedPageBounds.clone()
71
- }
72
- }
69
+ bbox = getExportDefaultBounds(editor, renderingShapes, padding, singleFrameShapeId)
73
70
  }
74
71
 
75
72
  // no unmasked shapes to export
76
73
  if (!bbox) return
77
74
 
78
- const singleFrameShapeId =
79
- ids.length === 1 && editor.isShapeOfType<TLFrameShape>(editor.getShape(ids[0])!, 'frame')
80
- ? ids[0]
81
- : null
82
- if (!singleFrameShapeId) {
83
- // Expand by an extra 32 pixels
84
- bbox.expandBy(padding)
85
- }
86
-
87
75
  // We want the svg image to be BIGGER THAN USUAL to account for image quality
88
76
  const w = bbox.width * scale
89
77
  const h = bbox.height * scale
@@ -120,6 +108,75 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
120
108
  return { jsx: svg, width: w, height: h, exportDelay }
121
109
  }
122
110
 
111
+ /**
112
+ * Calculates the default bounds for an SVG export. This function handles:
113
+ * 1. Computing masked page bounds for each shape
114
+ * 2. Container logic: if a shape is marked as an export bounds container and it
115
+ * contains all other shapes, use its bounds and skip padding
116
+ * 3. Otherwise, create a union of all shape bounds and apply padding
117
+ *
118
+ * The container logic is useful for cases like annotating on an image - if the image
119
+ * contains all annotations, we want to export exactly the image bounds without extra padding.
120
+ *
121
+ * @param editor - The editor instance
122
+ * @param renderingShapes - The shapes to include in the export
123
+ * @param padding - Padding to add around the bounds (only applied if no container bounds)
124
+ * @param singleFrameShapeId - If exporting a single frame, this is its ID (skips padding)
125
+ * @returns The calculated bounds box, or null if no shapes to export
126
+ */
127
+ export function getExportDefaultBounds(
128
+ editor: Editor,
129
+ renderingShapes: TLRenderingShape[],
130
+ padding: number,
131
+ singleFrameShapeId: TLShapeId | null
132
+ ) {
133
+ let isBoundedByContainer = false
134
+ let bbox: null | Box = null
135
+
136
+ for (const { id } of renderingShapes) {
137
+ const maskedPageBounds = editor.getShapeMaskedPageBounds(id)
138
+ if (!maskedPageBounds) continue
139
+
140
+ // Check if this shape is an export bounds container (e.g., an image being annotated)
141
+ const shape = editor.getShape(id)!
142
+ const isContainer = editor.getShapeUtil(shape).isExportBoundsContainer(shape)
143
+
144
+ if (bbox) {
145
+ // Container logic: if this is a container and it contains all shapes processed so far,
146
+ // use the container's bounds instead of the union. This prevents extra padding around
147
+ // things like annotated images.
148
+ if (isContainer && Box.ContainsApproximately(maskedPageBounds, bbox)) {
149
+ isBoundedByContainer = true
150
+ bbox = maskedPageBounds.clone()
151
+ } else {
152
+ // If we were previously bounded by a container but this shape extends outside it,
153
+ // we're no longer bounded by a container
154
+ if (isBoundedByContainer && !Box.ContainsApproximately(bbox, maskedPageBounds)) {
155
+ isBoundedByContainer = false
156
+ }
157
+ // Expand the bounding box to include this shape
158
+ bbox.union(maskedPageBounds)
159
+ }
160
+ } else {
161
+ // First shape sets the initial bounds
162
+ isBoundedByContainer = isContainer
163
+ bbox = maskedPageBounds.clone()
164
+ }
165
+ }
166
+
167
+ // No unmasked shapes to export
168
+ if (!bbox) return null
169
+
170
+ // Only apply padding if:
171
+ // - Not exporting a single frame (frames have their own padding rules)
172
+ // - Not bounded by a container (containers define their own bounds precisely)
173
+ if (!singleFrameShapeId && !isBoundedByContainer) {
174
+ bbox.expandBy(padding)
175
+ }
176
+
177
+ return bbox
178
+ }
179
+
123
180
  function SvgExport({
124
181
  editor,
125
182
  preserveAspectRatio,
@@ -79,15 +79,15 @@ export function useCanvasEvents() {
79
79
  // check that e.target is an HTMLElement
80
80
  if (!(e.target instanceof HTMLElement)) return
81
81
 
82
+ const editingShapeId = editor.getEditingShape()?.id
82
83
  if (
84
+ // if the target is not inside the editing shape
85
+ !(editingShapeId && e.target.closest(`[data-shape-id="${editingShapeId}"]`)) &&
86
+ // and the target is not an clickable element
83
87
  e.target.tagName !== 'A' &&
88
+ // or a TextArea.tsx ?
84
89
  e.target.tagName !== 'TEXTAREA' &&
85
- !e.target.isContentEditable &&
86
- // When in EditingShape state, we are actually clicking on a 'DIV'
87
- // not A/TEXTAREA/contenteditable element yet. So, to preserve cursor position
88
- // for edit mode on mobile we need to not preventDefault.
89
- // TODO: Find out if we still need this preventDefault in general though.
90
- !(editor.getEditingShape() && e.target.className.includes('tl-text-content'))
90
+ !e.target.isContentEditable
91
91
  ) {
92
92
  preventDefault(e)
93
93
  }
@@ -1,14 +1,19 @@
1
1
  import { RefObject, useEffect } from 'react'
2
2
  import { preventDefault } from '../utils/dom'
3
3
  import { useContainer } from './useContainer'
4
+ import { useMaybeEditor } from './useEditor'
4
5
 
5
6
  /** @public */
6
7
  export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
7
8
  if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
8
9
  const container = useContainer()
10
+ const editor = useMaybeEditor()
9
11
 
10
12
  useEffect(() => {
11
13
  function onWheel(e: WheelEvent) {
14
+ // Only pass through wheel events if the editor is focused
15
+ if (!editor?.getInstanceState().isFocused) return
16
+
12
17
  if ((e as any).isSpecialRedispatchedEvent) return
13
18
 
14
19
  // if the element is scrollable, don't redispatch the event
@@ -32,5 +37,5 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
32
37
  return () => {
33
38
  elm.removeEventListener('wheel', onWheel)
34
39
  }
35
- }, [container, ref])
40
+ }, [container, editor, ref])
36
41
  }
@@ -1,4 +1,5 @@
1
1
  import crypto from 'crypto'
2
+ import { vi } from 'vitest'
2
3
  import { publishDates } from '../../version'
3
4
  import { str2ab } from '../utils/licensing'
4
5
  import {
@@ -9,8 +10,9 @@ import {
9
10
  ValidLicenseKeyResult,
10
11
  } from './LicenseManager'
11
12
 
12
- jest.mock('../../version', () => {
13
+ vi.mock('../../version', () => {
13
14
  return {
15
+ version: '3.15.1',
14
16
  publishDates: {
15
17
  major: '2024-06-28T10:56:07.893Z',
16
18
  minor: '2024-07-02T16:49:50.397Z',
@@ -1,10 +1,11 @@
1
1
  import { act, render, waitFor } from '@testing-library/react'
2
+ import { vi } from 'vitest'
2
3
  import { TldrawEditor } from '../TldrawEditor'
3
4
  import { LicenseManager } from './LicenseManager'
4
5
 
5
6
  let mockLicenseState = 'unlicensed'
6
7
 
7
- jest.mock('./useLicenseManagerState', () => ({
8
+ vi.mock('./useLicenseManagerState', () => ({
8
9
  useLicenseManagerState: () => mockLicenseState,
9
10
  }))
10
11
 
@@ -27,6 +27,8 @@ export interface TldrawOptions {
27
27
  readonly multiClickDurationMs: number
28
28
  readonly coarseDragDistanceSquared: number
29
29
  readonly dragDistanceSquared: number
30
+ readonly uiDragDistanceSquared: number
31
+ readonly uiCoarseDragDistanceSquared: number
30
32
  readonly defaultSvgPadding: number
31
33
  readonly cameraSlideFriction: number
32
34
  readonly gridSteps: readonly {
@@ -98,6 +100,10 @@ export const defaultTldrawOptions = {
98
100
  multiClickDurationMs: 200,
99
101
  coarseDragDistanceSquared: 36, // 6 squared
100
102
  dragDistanceSquared: 16, // 4 squared
103
+ uiDragDistanceSquared: 16, // 4 squared
104
+ // it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger
105
+ // threshold than usual here to try and prevent accidental drags.
106
+ uiCoarseDragDistanceSquared: 625, // 25 squared
101
107
  defaultSvgPadding: 32,
102
108
  cameraSlideFriction: 0.09,
103
109
  gridSteps: [
@@ -510,6 +510,132 @@ describe('Box', () => {
510
510
  })
511
511
  })
512
512
 
513
+ describe('Box.ContainsApproximately', () => {
514
+ it('returns true when first box exactly contains second', () => {
515
+ const boxA = new Box(0, 0, 100, 100)
516
+ const boxB = new Box(10, 10, 50, 50)
517
+ expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
518
+ })
519
+
520
+ it('returns false when first box clearly does not contain second', () => {
521
+ const boxA = new Box(0, 0, 50, 50)
522
+ const boxB = new Box(10, 10, 100, 100)
523
+ expect(Box.ContainsApproximately(boxA, boxB)).toBe(false)
524
+ })
525
+
526
+ it('returns true when containment is within default precision tolerance', () => {
527
+ // Box B extends very slightly outside A (within floating-point precision)
528
+ const boxA = new Box(0, 0, 100, 100)
529
+ const boxB = new Box(10, 10, 80, 80)
530
+ // Move B's max edges just slightly outside A's bounds
531
+ boxB.w = 90.000000000001 // maxX = 100.000000000001 (slightly beyond 100)
532
+ boxB.h = 90.000000000001 // maxY = 100.000000000001 (slightly beyond 100)
533
+
534
+ expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
535
+ expect(Box.Contains(boxA, boxB)).toBe(false) // strict contains would fail
536
+ })
537
+
538
+ it('returns false when containment exceeds default precision tolerance', () => {
539
+ const boxA = new Box(0, 0, 100, 100)
540
+ const boxB = new Box(10, 10, 80, 80)
541
+ // Move B's max edges clearly outside A's bounds
542
+ boxB.w = 95 // maxX = 105 (clearly beyond 100)
543
+ boxB.h = 95 // maxY = 105 (clearly beyond 100)
544
+
545
+ expect(Box.ContainsApproximately(boxA, boxB)).toBe(false)
546
+ })
547
+
548
+ it('respects custom precision parameter', () => {
549
+ const boxA = new Box(0, 0, 100, 100)
550
+ const boxB = new Box(10, 10, 85, 85) // maxX=95, maxY=95
551
+
552
+ // With loose precision (10), should contain (95 is within 100-10=90 tolerance)
553
+ expect(Box.ContainsApproximately(boxA, boxB, 10)).toBe(true)
554
+
555
+ // With tight precision (4), should still contain (95 is within 100-4=96)
556
+ expect(Box.ContainsApproximately(boxA, boxB, 4)).toBe(true)
557
+
558
+ // Since 95 < 100, the precision parameter doesn't affect containment here
559
+ expect(Box.ContainsApproximately(boxA, boxB, 4.9)).toBe(true)
560
+ })
561
+
562
+ it('handles negative coordinates correctly', () => {
563
+ const boxA = new Box(-50, -50, 100, 100) // bounds: (-50,-50) to (50,50)
564
+ const boxB = new Box(-40, -40, 79.999999999, 79.999999999) // bounds: (-40,-40) to (39.999999999, 39.999999999)
565
+
566
+ expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
567
+ })
568
+
569
+ it('handles edge case where boxes are identical', () => {
570
+ const boxA = new Box(10, 20, 100, 200)
571
+ const boxB = new Box(10, 20, 100, 200)
572
+
573
+ expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
574
+ })
575
+
576
+ it('handles edge case where inner box touches outer box edges', () => {
577
+ const boxA = new Box(0, 0, 100, 100)
578
+ const boxB = new Box(0, 0, 100, 100) // exactly the same
579
+
580
+ expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
581
+
582
+ // Slightly smaller inner box
583
+ const boxC = new Box(0.000001, 0.000001, 99.999998, 99.999998)
584
+ expect(Box.ContainsApproximately(boxA, boxC)).toBe(true)
585
+ })
586
+
587
+ it('handles floating-point precision issues in real-world scenarios', () => {
588
+ // Simulate common floating-point arithmetic issues
589
+ const containerBox = new Box(0, 0, 100, 100)
590
+
591
+ // Box that should be contained but has floating-point errors
592
+ const innerBox = new Box(10, 10, 80, 80)
593
+ // Simulate floating-point arithmetic that results in tiny overruns
594
+ innerBox.w = 90.00000000000001 // maxX = 100.00000000000001 (tiny overrun)
595
+ innerBox.h = 90.00000000000001 // maxY = 100.00000000000001 (tiny overrun)
596
+
597
+ expect(Box.ContainsApproximately(containerBox, innerBox)).toBe(true)
598
+ expect(Box.Contains(containerBox, innerBox)).toBe(false) // strict contains fails due to precision
599
+ })
600
+
601
+ it('fails when any edge exceeds tolerance', () => {
602
+ const boxA = new Box(10, 10, 100, 100) // bounds: (10,10) to (110,110)
603
+
604
+ // Test each edge exceeding tolerance
605
+ const testCases = [
606
+ { name: 'left edge', box: new Box(5, 20, 80, 80) }, // minX too small
607
+ { name: 'top edge', box: new Box(20, 5, 80, 80) }, // minY too small
608
+ { name: 'right edge', box: new Box(20, 20, 95, 80) }, // maxX too large (20+95=115 > 110)
609
+ { name: 'bottom edge', box: new Box(20, 20, 80, 95) }, // maxY too large (20+95=115 > 110)
610
+ ]
611
+
612
+ testCases.forEach(({ box }) => {
613
+ expect(Box.ContainsApproximately(boxA, box, 1)).toBe(false) // tight precision
614
+ })
615
+ })
616
+
617
+ it('works with zero-sized dimensions', () => {
618
+ const boxA = new Box(0, 0, 100, 100)
619
+ const boxB = new Box(50, 50, 0, 0) // zero-sized box (point)
620
+
621
+ expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
622
+ })
623
+
624
+ it('handles precision parameter edge cases', () => {
625
+ const boxA = new Box(0, 0, 100, 100)
626
+ const boxB = new Box(10, 10, 91, 91) // maxX=101, maxY=101 (clearly outside)
627
+
628
+ // Zero precision should work like strict Contains
629
+ expect(Box.ContainsApproximately(boxA, boxB, 0)).toBe(false)
630
+
631
+ // Small precision should still fail (101 > 100)
632
+ expect(Box.ContainsApproximately(boxA, boxB, 0.5)).toBe(false)
633
+
634
+ // Sufficient precision should succeed (101 <= 100 + 2)
635
+ expect(Box.ContainsApproximately(boxA, boxB, 2)).toBe(true)
636
+ })
637
+ })
638
+
513
639
  describe('Box.Includes', () => {
514
640
  it('returns true when boxes collide or contain', () => {
515
641
  const boxA = new Box(0, 0, 50, 50)
@@ -1,6 +1,6 @@
1
1
  import { BoxModel } from '@tldraw/tlschema'
2
2
  import { Vec, VecLike } from './Vec'
3
- import { PI, PI2, toPrecision } from './utils'
3
+ import { approximatelyLte, PI, PI2, toPrecision } from './utils'
4
4
 
5
5
  /** @public */
6
6
  export type BoxLike = BoxModel | Box
@@ -417,6 +417,15 @@ export class Box {
417
417
  return A.minX < B.minX && A.minY < B.minY && A.maxY > B.maxY && A.maxX > B.maxX
418
418
  }
419
419
 
420
+ static ContainsApproximately(A: Box, B: Box, precision?: number) {
421
+ return (
422
+ approximatelyLte(A.minX, B.minX, precision) &&
423
+ approximatelyLte(A.minY, B.minY, precision) &&
424
+ approximatelyLte(B.maxX, A.maxX, precision) &&
425
+ approximatelyLte(B.maxY, A.maxY, precision)
426
+ )
427
+ }
428
+
420
429
  static Includes(A: Box, B: Box) {
421
430
  return Box.Collides(A, B) || Box.Contains(A, B)
422
431
  }
@@ -1,12 +1,13 @@
1
1
  import { createTLSchema } from '@tldraw/tlschema'
2
2
  import { openDB } from 'idb'
3
+ import { vi } from 'vitest'
3
4
  import { hardReset } from './hardReset'
4
5
  import { getAllIndexDbNames, LocalIndexedDb } from './LocalIndexedDb'
5
6
 
6
7
  const schema = createTLSchema({ shapes: {}, bindings: {} })
7
8
  describe('LocalIndexedDb', () => {
8
9
  beforeEach(() => {
9
- jest.useRealTimers()
10
+ vi.useRealTimers()
10
11
  })
11
12
  afterEach(async () => {
12
13
  await hardReset({ shouldReload: false })
@@ -1,6 +1,6 @@
1
1
  import { PageRecordType } from '@tldraw/tlschema'
2
2
  import { IndexKey, promiseWithResolve } from '@tldraw/utils'
3
- import { afterEach } from 'node:test'
3
+ import { Mock, vi } from 'vitest'
4
4
  import { createTLStore } from '../../config/createTLStore'
5
5
  import { TLLocalSyncClient } from './TLLocalSyncClient'
6
6
  import { hardReset } from './hardReset'
@@ -10,20 +10,20 @@ class BroadcastChannelMock {
10
10
  constructor(_name: string) {
11
11
  // noop
12
12
  }
13
- postMessage = jest.fn((_msg: any) => {
13
+ postMessage = vi.fn((_msg: any) => {
14
14
  // noop
15
15
  })
16
- close = jest.fn(() => {
16
+ close = vi.fn(() => {
17
17
  // noop
18
18
  })
19
19
  }
20
20
 
21
21
  function testClient(channel = new BroadcastChannelMock('test')) {
22
22
  const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
23
- const onLoad = jest.fn(() => {
23
+ const onLoad = vi.fn(() => {
24
24
  return
25
25
  })
26
- const onLoadError = jest.fn(() => {
26
+ const onLoadError = vi.fn(() => {
27
27
  return
28
28
  })
29
29
  const client = new TLLocalSyncClient(
@@ -36,26 +36,26 @@ function testClient(channel = new BroadcastChannelMock('test')) {
36
36
  channel
37
37
  )
38
38
 
39
- client.db.storeSnapshot = jest.fn(() => Promise.resolve())
40
- client.db.storeChanges = jest.fn(() => Promise.resolve())
39
+ client.db.storeSnapshot = vi.fn(() => Promise.resolve())
40
+ client.db.storeChanges = vi.fn(() => Promise.resolve())
41
41
 
42
42
  return {
43
- client: client as { db: { storeSnapshot: jest.Mock; storeChanges: jest.Mock } } & typeof client,
43
+ client: client as { db: { storeSnapshot: Mock; storeChanges: Mock } } & typeof client,
44
44
  store,
45
45
  onLoad,
46
46
  onLoadError,
47
47
  channel,
48
48
  tick: async () => {
49
- jest.advanceTimersByTime(500)
49
+ vi.advanceTimersByTime(500)
50
50
  await Promise.resolve()
51
51
  await client.db.pending()
52
- jest.advanceTimersByTime(500)
52
+ vi.advanceTimersByTime(500)
53
53
  await Promise.resolve()
54
54
  },
55
55
  }
56
56
  }
57
57
 
58
- const reloadMock = jest.fn()
58
+ const reloadMock = vi.fn()
59
59
 
60
60
  beforeAll(() => {
61
61
  Object.defineProperty(window, 'location', {
@@ -65,14 +65,14 @@ beforeAll(() => {
65
65
  })
66
66
 
67
67
  beforeEach(() => {
68
- jest.clearAllMocks()
68
+ vi.clearAllMocks()
69
69
  })
70
70
 
71
71
  afterEach(async () => {
72
72
  await hardReset({ shouldReload: false })
73
73
  })
74
74
 
75
- jest.useFakeTimers()
75
+ vi.useFakeTimers()
76
76
 
77
77
  test('the client connects on instantiation, announcing its schema', async () => {
78
78
  const { channel, tick } = testClient()
@@ -86,7 +86,7 @@ test('the client connects on instantiation, announcing its schema', async () =>
86
86
  test('when a client receives an announce with a newer schema version it reloads itself', async () => {
87
87
  const { client, channel, onLoadError, tick } = testClient()
88
88
  await tick()
89
- jest.advanceTimersByTime(10000)
89
+ vi.advanceTimersByTime(10000)
90
90
  expect(reloadMock).not.toHaveBeenCalled()
91
91
  channel.onmessage?.({
92
92
  data: {
@@ -104,7 +104,7 @@ test('when a client receives an announce with a newer schema version it reloads
104
104
  test('when a client receives an announce with a newer schema version shortly after loading it does not reload but instead reports a loadError', async () => {
105
105
  const { client, channel, onLoadError, tick } = testClient()
106
106
  await tick()
107
- jest.advanceTimersByTime(1000)
107
+ vi.advanceTimersByTime(1000)
108
108
  expect(reloadMock).not.toHaveBeenCalled()
109
109
  channel.onmessage?.({
110
110
  data: {
package/src/version.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  // This file is automatically generated by internal/scripts/refresh-assets.ts.
2
2
  // Do not edit manually. Or do, I'm a comment, not a cop.
3
3
 
4
- export const version = '3.16.0-canary.acb40a76700b'
4
+ export const version = '3.16.0-canary.b33662a7aefb'
5
5
  export const publishDates = {
6
6
  major: '2024-09-13T14:36:29.063Z',
7
- minor: '2025-08-14T14:04:21.487Z',
8
- patch: '2025-08-14T14:04:21.487Z',
7
+ minor: '2025-08-28T11:52:40.857Z',
8
+ patch: '2025-08-28T11:52:40.857Z',
9
9
  }
@@ -1,34 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
- var nearestMultiple_exports = {};
20
- __export(nearestMultiple_exports, {
21
- nearestMultiple: () => nearestMultiple
22
- });
23
- module.exports = __toCommonJS(nearestMultiple_exports);
24
- function gcd(a, b) {
25
- return b === 0 ? a : gcd(b, a % b);
26
- }
27
- function nearestMultiple(float) {
28
- const decimal = float.toString().split(".")[1];
29
- if (!decimal) return 1;
30
- const denominator = Math.pow(10, decimal.length);
31
- const numerator = parseInt(decimal, 10);
32
- return denominator / gcd(numerator, denominator);
33
- }
34
- //# sourceMappingURL=nearestMultiple.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/lib/utils/nearestMultiple.ts"],
4
- "sourcesContent": ["// Euclidean algorithm to find the GCD\nfunction gcd(a: number, b: number): number {\n\treturn b === 0 ? a : gcd(b, a % b)\n}\n\n// Returns the lowest value that the given number can be multiplied by to reach an integer\nexport function nearestMultiple(float: number) {\n\tconst decimal = float.toString().split('.')[1]\n\tif (!decimal) return 1\n\tconst denominator = Math.pow(10, decimal.length)\n\tconst numerator = parseInt(decimal, 10)\n\treturn denominator / gcd(numerator, denominator)\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,SAAS,IAAI,GAAW,GAAmB;AAC1C,SAAO,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,CAAC;AAClC;AAGO,SAAS,gBAAgB,OAAe;AAC9C,QAAM,UAAU,MAAM,SAAS,EAAE,MAAM,GAAG,EAAE,CAAC;AAC7C,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,cAAc,KAAK,IAAI,IAAI,QAAQ,MAAM;AAC/C,QAAM,YAAY,SAAS,SAAS,EAAE;AACtC,SAAO,cAAc,IAAI,WAAW,WAAW;AAChD;",
6
- "names": []
7
- }
@@ -1,14 +0,0 @@
1
- function gcd(a, b) {
2
- return b === 0 ? a : gcd(b, a % b);
3
- }
4
- function nearestMultiple(float) {
5
- const decimal = float.toString().split(".")[1];
6
- if (!decimal) return 1;
7
- const denominator = Math.pow(10, decimal.length);
8
- const numerator = parseInt(decimal, 10);
9
- return denominator / gcd(numerator, denominator);
10
- }
11
- export {
12
- nearestMultiple
13
- };
14
- //# sourceMappingURL=nearestMultiple.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/lib/utils/nearestMultiple.ts"],
4
- "sourcesContent": ["// Euclidean algorithm to find the GCD\nfunction gcd(a: number, b: number): number {\n\treturn b === 0 ? a : gcd(b, a % b)\n}\n\n// Returns the lowest value that the given number can be multiplied by to reach an integer\nexport function nearestMultiple(float: number) {\n\tconst decimal = float.toString().split('.')[1]\n\tif (!decimal) return 1\n\tconst denominator = Math.pow(10, decimal.length)\n\tconst numerator = parseInt(decimal, 10)\n\treturn denominator / gcd(numerator, denominator)\n}\n"],
5
- "mappings": "AACA,SAAS,IAAI,GAAW,GAAmB;AAC1C,SAAO,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,CAAC;AAClC;AAGO,SAAS,gBAAgB,OAAe;AAC9C,QAAM,UAAU,MAAM,SAAS,EAAE,MAAM,GAAG,EAAE,CAAC;AAC7C,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,cAAc,KAAK,IAAI,IAAI,QAAQ,MAAM;AAC/C,QAAM,YAAY,SAAS,SAAS,EAAE;AACtC,SAAO,cAAc,IAAI,WAAW,WAAW;AAChD;",
6
- "names": []
7
- }
@@ -1,13 +0,0 @@
1
- // Euclidean algorithm to find the GCD
2
- function gcd(a: number, b: number): number {
3
- return b === 0 ? a : gcd(b, a % b)
4
- }
5
-
6
- // Returns the lowest value that the given number can be multiplied by to reach an integer
7
- export function nearestMultiple(float: number) {
8
- const decimal = float.toString().split('.')[1]
9
- if (!decimal) return 1
10
- const denominator = Math.pow(10, decimal.length)
11
- const numerator = parseInt(decimal, 10)
12
- return denominator / gcd(numerator, denominator)
13
- }