tldraw 3.16.0-next.282b7be564ae → 3.16.0-next.2f9d39693e4c

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 (291) hide show
  1. package/dist-cjs/index.d.ts +224 -102
  2. package/dist-cjs/index.js +33 -14
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/Tldraw.js +12 -2
  5. package/dist-cjs/lib/Tldraw.js.map +2 -2
  6. package/dist-cjs/lib/defaultExternalContentHandlers.js +5 -4
  7. package/dist-cjs/lib/defaultExternalContentHandlers.js.map +2 -2
  8. package/dist-cjs/lib/shapes/arrow/arrowLabel.js +6 -0
  9. package/dist-cjs/lib/shapes/arrow/arrowLabel.js.map +3 -3
  10. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js +6 -0
  11. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  12. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -0
  13. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +2 -2
  14. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js +1 -3
  15. package/dist-cjs/lib/shapes/shared/PlainTextLabel.js.map +2 -2
  16. package/dist-cjs/lib/shapes/shared/freehand/svg.js.map +2 -2
  17. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js +0 -2
  18. package/dist-cjs/lib/shapes/shared/useEditablePlainText.js.map +2 -2
  19. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js +0 -2
  20. package/dist-cjs/lib/shapes/shared/useImageOrVideoAsset.js.map +2 -2
  21. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js +25 -1
  22. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js.map +2 -2
  23. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js +12 -0
  24. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js.map +2 -2
  25. package/dist-cjs/lib/ui/TldrawUi.js +13 -12
  26. package/dist-cjs/lib/ui/TldrawUi.js.map +2 -2
  27. package/dist-cjs/lib/ui/assetUrls.js +13 -10
  28. package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
  29. package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
  30. package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
  31. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +6 -6
  32. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
  33. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js +9 -4
  34. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanel.js.map +2 -2
  35. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js +255 -316
  36. package/dist-cjs/lib/ui/components/StylePanel/DefaultStylePanelContent.js.map +2 -2
  37. package/dist-cjs/lib/ui/components/{primitives/TldrawUiButtonPicker.js → StylePanel/StylePanelButtonPicker.js} +52 -45
  38. package/dist-cjs/lib/ui/components/StylePanel/StylePanelButtonPicker.js.map +7 -0
  39. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js +68 -0
  40. package/dist-cjs/lib/ui/components/StylePanel/StylePanelContext.js.map +7 -0
  41. package/dist-cjs/lib/ui/components/StylePanel/{DoubleDropdownPicker.js → StylePanelDoubleDropdownPicker.js} +23 -22
  42. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.js.map +7 -0
  43. package/dist-cjs/lib/ui/components/StylePanel/{DropdownPicker.js → StylePanelDropdownPicker.js} +24 -21
  44. package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map +7 -0
  45. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js +28 -0
  46. package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js.map +7 -0
  47. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js +3 -2
  48. package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map +2 -2
  49. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js +38 -9
  50. package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map +2 -2
  51. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js +15 -3
  52. package/dist-cjs/lib/ui/components/Toolbar/DefaultVideoToolbarContent.js.map +2 -2
  53. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js +3 -3
  54. package/dist-cjs/lib/ui/components/Toolbar/LinkEditor.js.map +2 -2
  55. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js +10 -1
  56. package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js.map +2 -2
  57. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js +17 -4
  58. package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.map +2 -2
  59. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js +2 -0
  60. package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.map +2 -2
  61. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +37 -36
  62. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  63. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +2 -1
  64. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  65. package/dist-cjs/lib/ui/context/actions.js +23 -10
  66. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  67. package/dist-cjs/lib/ui/context/components.js +2 -0
  68. package/dist-cjs/lib/ui/context/components.js.map +2 -2
  69. package/dist-cjs/lib/ui/context/events.js.map +1 -1
  70. package/dist-cjs/lib/ui/hooks/useExportAs.js +3 -2
  71. package/dist-cjs/lib/ui/hooks/useExportAs.js.map +2 -2
  72. package/dist-cjs/lib/ui/hooks/useTools.js +1 -1
  73. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  74. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  75. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +2 -0
  76. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  77. package/dist-cjs/lib/ui/kbd-utils.js +9 -3
  78. package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
  79. package/dist-cjs/lib/ui/version.js +3 -3
  80. package/dist-cjs/lib/ui/version.js.map +1 -1
  81. package/dist-cjs/lib/utils/export/copyAs.js +1 -2
  82. package/dist-cjs/lib/utils/export/copyAs.js.map +2 -2
  83. package/dist-cjs/lib/utils/export/export.js +0 -20
  84. package/dist-cjs/lib/utils/export/export.js.map +2 -2
  85. package/dist-cjs/lib/utils/export/exportAs.js +1 -2
  86. package/dist-cjs/lib/utils/export/exportAs.js.map +2 -2
  87. package/dist-esm/index.d.mts +224 -102
  88. package/dist-esm/index.mjs +61 -29
  89. package/dist-esm/index.mjs.map +2 -2
  90. package/dist-esm/lib/Tldraw.mjs +14 -4
  91. package/dist-esm/lib/Tldraw.mjs.map +2 -2
  92. package/dist-esm/lib/defaultExternalContentHandlers.mjs +5 -4
  93. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  94. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs +6 -0
  95. package/dist-esm/lib/shapes/arrow/arrowLabel.mjs.map +3 -3
  96. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +6 -0
  97. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  98. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +3 -0
  99. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
  100. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs +1 -3
  101. package/dist-esm/lib/shapes/shared/PlainTextLabel.mjs.map +2 -2
  102. package/dist-esm/lib/shapes/shared/freehand/svg.mjs.map +2 -2
  103. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs +0 -2
  104. package/dist-esm/lib/shapes/shared/useEditablePlainText.mjs.map +2 -2
  105. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs +0 -2
  106. package/dist-esm/lib/shapes/shared/useImageOrVideoAsset.mjs.map +2 -2
  107. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs +26 -1
  108. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs.map +2 -2
  109. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs +13 -0
  110. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs.map +2 -2
  111. package/dist-esm/lib/ui/TldrawUi.mjs +13 -12
  112. package/dist-esm/lib/ui/TldrawUi.mjs.map +2 -2
  113. package/dist-esm/lib/ui/assetUrls.mjs +13 -10
  114. package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
  115. package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
  116. package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
  117. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +6 -6
  118. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
  119. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs +14 -5
  120. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanel.mjs.map +2 -2
  121. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs +257 -320
  122. package/dist-esm/lib/ui/components/StylePanel/DefaultStylePanelContent.mjs.map +2 -2
  123. package/dist-esm/lib/ui/components/{primitives/TldrawUiButtonPicker.mjs → StylePanel/StylePanelButtonPicker.mjs} +54 -43
  124. package/dist-esm/lib/ui/components/StylePanel/StylePanelButtonPicker.mjs.map +7 -0
  125. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs +48 -0
  126. package/dist-esm/lib/ui/components/StylePanel/StylePanelContext.mjs.map +7 -0
  127. package/dist-esm/lib/ui/components/StylePanel/{DoubleDropdownPicker.mjs → StylePanelDoubleDropdownPicker.mjs} +20 -19
  128. package/dist-esm/lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker.mjs.map +7 -0
  129. package/dist-esm/lib/ui/components/StylePanel/{DropdownPicker.mjs → StylePanelDropdownPicker.mjs} +21 -18
  130. package/dist-esm/lib/ui/components/StylePanel/StylePanelDropdownPicker.mjs.map +7 -0
  131. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs +8 -0
  132. package/dist-esm/lib/ui/components/StylePanel/StylePanelSubheading.mjs.map +7 -0
  133. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs +3 -2
  134. package/dist-esm/lib/ui/components/Toolbar/AltTextEditor.mjs.map +2 -2
  135. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs +38 -9
  136. package/dist-esm/lib/ui/components/Toolbar/DefaultImageToolbarContent.mjs.map +2 -2
  137. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs +15 -3
  138. package/dist-esm/lib/ui/components/Toolbar/DefaultVideoToolbarContent.mjs.map +2 -2
  139. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs +3 -3
  140. package/dist-esm/lib/ui/components/Toolbar/LinkEditor.mjs.map +2 -2
  141. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs +10 -1
  142. package/dist-esm/lib/ui/components/primitives/TldrawUiContextualToolbar.mjs.map +2 -2
  143. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs +17 -4
  144. package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map +2 -2
  145. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs +2 -0
  146. package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map +2 -2
  147. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +37 -36
  148. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  149. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +2 -1
  150. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  151. package/dist-esm/lib/ui/context/actions.mjs +23 -10
  152. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  153. package/dist-esm/lib/ui/context/components.mjs +2 -0
  154. package/dist-esm/lib/ui/context/components.mjs.map +2 -2
  155. package/dist-esm/lib/ui/context/events.mjs.map +1 -1
  156. package/dist-esm/lib/ui/hooks/useExportAs.mjs +3 -2
  157. package/dist-esm/lib/ui/hooks/useExportAs.mjs.map +2 -2
  158. package/dist-esm/lib/ui/hooks/useTools.mjs +1 -1
  159. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  160. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +2 -0
  161. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  162. package/dist-esm/lib/ui/kbd-utils.mjs +9 -3
  163. package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
  164. package/dist-esm/lib/ui/version.mjs +3 -3
  165. package/dist-esm/lib/ui/version.mjs.map +1 -1
  166. package/dist-esm/lib/utils/export/copyAs.mjs +1 -2
  167. package/dist-esm/lib/utils/export/copyAs.mjs.map +2 -2
  168. package/dist-esm/lib/utils/export/export.mjs +0 -20
  169. package/dist-esm/lib/utils/export/export.mjs.map +2 -2
  170. package/dist-esm/lib/utils/export/exportAs.mjs +1 -2
  171. package/dist-esm/lib/utils/export/exportAs.mjs.map +2 -2
  172. package/package.json +11 -34
  173. package/src/index.ts +44 -22
  174. package/src/lib/Tldraw.tsx +15 -2
  175. package/src/lib/defaultExternalContentHandlers.ts +12 -4
  176. package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +2 -1
  177. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +4 -3
  178. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +7 -6
  179. package/src/lib/shapes/arrow/arrowLabel.ts +8 -0
  180. package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
  181. package/src/lib/shapes/frame/FrameShapeUtil.tsx +8 -0
  182. package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -0
  183. package/src/lib/shapes/line/LineShapeUtil.test.tsx +4 -3
  184. package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap +2 -2
  185. package/src/lib/shapes/shared/PlainTextLabel.tsx +0 -6
  186. package/src/lib/shapes/shared/freehand/svg.ts +2 -0
  187. package/src/lib/shapes/shared/useEditablePlainText.ts +0 -6
  188. package/src/lib/shapes/shared/useImageOrVideoAsset.ts +0 -7
  189. package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
  190. package/src/lib/tools/EraserTool/childStates/Erasing.ts +34 -1
  191. package/src/lib/tools/EraserTool/childStates/Pointing.ts +20 -0
  192. package/src/lib/ui/TldrawUi.tsx +16 -10
  193. package/src/lib/ui/assetUrls.ts +13 -10
  194. package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
  195. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +6 -6
  196. package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx +27 -13
  197. package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx +260 -381
  198. package/src/lib/ui/components/{primitives/TldrawUiButtonPicker.tsx → StylePanel/StylePanelButtonPicker.tsx} +63 -50
  199. package/src/lib/ui/components/StylePanel/StylePanelContext.tsx +63 -0
  200. package/src/lib/ui/components/StylePanel/{DoubleDropdownPicker.tsx → StylePanelDoubleDropdownPicker.tsx} +28 -19
  201. package/src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx +119 -0
  202. package/src/lib/ui/components/StylePanel/StylePanelSubheading.tsx +9 -0
  203. package/src/lib/ui/components/Toolbar/AltTextEditor.tsx +4 -3
  204. package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx +32 -15
  205. package/src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.tsx +12 -4
  206. package/src/lib/ui/components/Toolbar/LinkEditor.tsx +5 -5
  207. package/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx +6 -1
  208. package/src/lib/ui/components/primitives/TldrawUiSlider.tsx +50 -30
  209. package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx +3 -0
  210. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +29 -21
  211. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +3 -2
  212. package/src/lib/ui/context/actions.tsx +23 -10
  213. package/src/lib/ui/context/components.tsx +3 -0
  214. package/src/lib/ui/context/events.tsx +1 -1
  215. package/src/lib/ui/hooks/useExportAs.ts +3 -2
  216. package/src/lib/ui/hooks/useTools.tsx +1 -1
  217. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +2 -0
  218. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +2 -0
  219. package/src/lib/ui/kbd-utils.ts +10 -3
  220. package/src/lib/ui/version.ts +3 -3
  221. package/src/lib/ui.css +19 -2
  222. package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +5 -5
  223. package/src/lib/utils/export/copyAs.ts +1 -24
  224. package/src/lib/utils/export/export.ts +0 -36
  225. package/src/lib/utils/export/exportAs.ts +1 -32
  226. package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +4 -4
  227. package/src/test/A11y.test.tsx +3 -2
  228. package/src/test/ClickManager.test.ts +7 -6
  229. package/src/test/Editor.test.tsx +20 -19
  230. package/src/test/EraserTool.test.ts +184 -13
  231. package/src/test/HandTool.test.ts +10 -9
  232. package/src/test/HighlightShape.test.ts +2 -1
  233. package/src/test/SelectTool.test.ts +3 -2
  234. package/src/test/TLUserPreferences.test.ts +4 -3
  235. package/src/test/TestEditor.ts +13 -15
  236. package/src/test/TldrawEditor.test.tsx +11 -10
  237. package/src/test/ZoomTool.test.ts +7 -6
  238. package/src/test/__snapshots__/drawing.test.ts.snap +2 -2
  239. package/src/test/__snapshots__/groups.test.tsx.snap +6 -6
  240. package/src/test/__snapshots__/resizing.test.ts.snap +2 -2
  241. package/src/test/arrows-megabus.test.tsx +5 -4
  242. package/src/test/bindings.test.tsx +24 -37
  243. package/src/test/bookmark-shapes.test.ts +1 -8
  244. package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +23 -7
  245. package/src/test/commands/__snapshots__/packShapes.test.ts.snap +8 -8
  246. package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap +2 -2
  247. package/src/test/commands/alignShapes.test.tsx +25 -24
  248. package/src/test/commands/animationSpeed.test.ts +2 -1
  249. package/src/test/commands/centerOnPoint.test.ts +3 -2
  250. package/src/test/commands/clipboard.test.ts +3 -2
  251. package/src/test/commands/createShapes.test.ts +2 -1
  252. package/src/test/commands/deleteShapes.test.ts +2 -1
  253. package/src/test/commands/distributeShapes.test.tsx +11 -10
  254. package/src/test/commands/getSvgString.test.ts +2 -1
  255. package/src/test/commands/packShapes.test.ts +5 -4
  256. package/src/test/commands/resizeShape.test.ts +2 -1
  257. package/src/test/commands/rotateShapes.test.ts +7 -6
  258. package/src/test/commands/setCamera.test.ts +4 -3
  259. package/src/test/commands/setCurrentPage.test.ts +3 -2
  260. package/src/test/commands/stackShapes.test.ts +11 -10
  261. package/src/test/commands/stretch.test.tsx +13 -12
  262. package/src/test/createDeepLink.test.tsx +2 -1
  263. package/src/test/cropping.test.ts +3 -2
  264. package/src/test/custom-clipping.test.ts +436 -0
  265. package/src/test/drawing.test.ts +2 -1
  266. package/src/test/flipShapes.test.ts +4 -3
  267. package/src/test/frames.test.ts +25 -24
  268. package/src/test/getCulledShapes.test.tsx +3 -2
  269. package/src/test/groups.test.tsx +1 -1
  270. package/src/test/handleDeepLink.test.tsx +2 -1
  271. package/src/test/maxShapes.test.ts +3 -2
  272. package/src/test/modifiers.test.ts +5 -4
  273. package/src/test/navigation.test.ts +12 -11
  274. package/src/test/panning.test.ts +2 -1
  275. package/src/test/perf/perf.test.ts +2 -1
  276. package/src/test/registerDeepLinkListener.test.tsx +10 -9
  277. package/src/test/resizing.test.ts +39 -38
  278. package/src/test/select.test.tsx +4 -3
  279. package/src/test/selection-omnibus.test.ts +11 -10
  280. package/src/test/shapeutils.test.ts +4 -3
  281. package/src/test/translating.test.ts +9 -8
  282. package/tldraw.css +27 -2
  283. package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
  284. package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map +0 -7
  285. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +0 -7
  286. package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map +0 -7
  287. package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
  288. package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.map +0 -7
  289. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +0 -7
  290. package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map +0 -7
  291. package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +0 -110
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "tldraw",
3
3
  "description": "A tiny little drawing editor.",
4
- "version": "3.16.0-next.282b7be564ae",
4
+ "version": "3.16.0-next.2f9d39693e4c",
5
5
  "author": {
6
6
  "name": "tldraw Inc.",
7
7
  "email": "hello@tldraw.com"
@@ -27,9 +27,9 @@
27
27
  ],
28
28
  "main": "dist-cjs/index.js",
29
29
  "scripts": {
30
- "test-ci": "lazy inherit",
31
- "test": "yarn run -T jest",
32
- "test-coverage": "lazy inherit",
30
+ "test-ci": "yarn run -T vitest run --passWithNoTests",
31
+ "test": "yarn run -T vitest --passWithNoTests",
32
+ "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
33
33
  "predev": "node ./scripts/copy-css-files.mjs",
34
34
  "dev": "chokidar '../{editor/editor,tldraw/src/lib/ui}.css' -c 'node ./scripts/copy-css-files.mjs'",
35
35
  "prebuild": "node ./scripts/copy-css-files.mjs",
@@ -38,7 +38,8 @@
38
38
  "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
39
39
  "postpack": "../../internal/scripts/postpack.sh",
40
40
  "pack-tarball": "yarn pack",
41
- "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
41
+ "lint": "yarn run -T tsx ../../internal/scripts/lint.ts",
42
+ "context": "yarn run -T tsx ../../internal/scripts/context.ts"
42
43
  },
43
44
  "files": [
44
45
  "tldraw.css",
@@ -54,13 +55,13 @@
54
55
  "@tiptap/pm": "^2.9.1",
55
56
  "@tiptap/react": "^2.9.1",
56
57
  "@tiptap/starter-kit": "^2.9.1",
57
- "@tldraw/editor": "3.16.0-next.282b7be564ae",
58
- "@tldraw/store": "3.16.0-next.282b7be564ae",
58
+ "@tldraw/editor": "3.16.0-next.2f9d39693e4c",
59
+ "@tldraw/store": "3.16.0-next.2f9d39693e4c",
59
60
  "classnames": "^2.5.1",
60
61
  "hotkeys-js": "^3.13.9",
61
62
  "idb": "^7.1.1",
62
63
  "lz-string": "^1.5.0",
63
- "radix-ui": "^1.3.4"
64
+ "radix-ui": "^1.4.2"
64
65
  },
65
66
  "peerDependencies": {
66
67
  "react": "^18.2.0 || ^19.0.0",
@@ -68,40 +69,16 @@
68
69
  },
69
70
  "devDependencies": {
70
71
  "@peculiar/webcrypto": "^1.5.0",
71
- "@testing-library/jest-dom": "^5.17.0",
72
72
  "@testing-library/react": "^15.0.7",
73
73
  "@types/classnames": "^2.3.4",
74
74
  "@types/lz-string": "^1.5.0",
75
75
  "@types/react": "^18.3.18",
76
76
  "chokidar-cli": "^3.0.0",
77
- "jest-canvas-mock": "^2.5.2",
78
- "jest-environment-jsdom": "^29.7.0",
79
77
  "lazyrepo": "0.0.0-alpha.27",
80
78
  "react": "^18.3.1",
81
79
  "react-dom": "^18.3.1",
82
- "resize-observer-polyfill": "^1.5.1"
83
- },
84
- "jest": {
85
- "preset": "../../internal/config/jest/node/jest-preset.js",
86
- "testEnvironment": "../../../packages/utils/patchedJestJsDom.js",
87
- "fakeTimers": {
88
- "enableGlobally": true
89
- },
90
- "testPathIgnorePatterns": [
91
- "^.+\\.*.css$"
92
- ],
93
- "moduleNameMapper": {
94
- "^~(.*)": "<rootDir>/src/$1",
95
- "\\.(css|less|scss|sass)$": "identity-obj-proxy"
96
- },
97
- "setupFiles": [
98
- "raf/polyfill",
99
- "jest-canvas-mock",
100
- "<rootDir>/setupTests.js"
101
- ],
102
- "setupFilesAfterEnv": [
103
- "../../internal/config/setupJest.ts"
104
- ]
80
+ "resize-observer-polyfill": "^1.5.1",
81
+ "vitest": "^3.2.4"
105
82
  },
106
83
  "module": "dist-esm/index.mjs",
107
84
  "source": "src/index.ts",
package/src/index.ts CHANGED
@@ -24,6 +24,7 @@ export { usePrefersReducedMotion } from './lib/shapes/shared/usePrefersReducedMo
24
24
  export { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from './lib/ui/components/A11y'
25
25
  export { AccessibilityMenu } from './lib/ui/components/AccessibilityMenu'
26
26
  export { ColorSchemeMenu } from './lib/ui/components/ColorSchemeMenu'
27
+ export { DefaultFollowingIndicator } from './lib/ui/components/DefaultFollowingIndicator'
27
28
  export { DefaultDialogs } from './lib/ui/components/Dialogs'
28
29
  export {
29
30
  TldrawUiColumn,
@@ -85,6 +86,7 @@ export {
85
86
  defaultHandleExternalUrlContent,
86
87
  getAssetInfo,
87
88
  getMediaAssetInfoPartial,
89
+ notifyIfFileNotAllowed,
88
90
  registerDefaultExternalContentHandlers,
89
91
  type TLDefaultExternalContentHandlerOpts,
90
92
  type TLExternalContentProps,
@@ -166,11 +168,10 @@ export {
166
168
  type TLDefaultFont,
167
169
  type TLDefaultFonts,
168
170
  } from './lib/shapes/shared/defaultFonts'
169
- export {
170
- PlainTextLabel,
171
- TextLabel,
172
- type PlainTextLabelProps,
173
- } from './lib/shapes/shared/PlainTextLabel'
171
+ export { getStrokePoints } from './lib/shapes/shared/freehand/getStrokePoints'
172
+ export { getSvgPathFromStrokePoints } from './lib/shapes/shared/freehand/svg'
173
+ export { type StrokeOptions, type StrokePoint } from './lib/shapes/shared/freehand/types'
174
+ export { PlainTextLabel, type PlainTextLabelProps } from './lib/shapes/shared/PlainTextLabel'
174
175
  export {
175
176
  RichTextLabel,
176
177
  RichTextSVG,
@@ -178,10 +179,9 @@ export {
178
179
  type RichTextSVGProps,
179
180
  } from './lib/shapes/shared/RichTextLabel'
180
181
  export { useDefaultColorTheme } from './lib/shapes/shared/useDefaultColorTheme'
181
- export { useEditablePlainText, useEditableText } from './lib/shapes/shared/useEditablePlainText'
182
+ export { useEditablePlainText } from './lib/shapes/shared/useEditablePlainText'
182
183
  export { useEditableRichText } from './lib/shapes/shared/useEditableRichText'
183
184
  export {
184
- useAsset,
185
185
  useImageOrVideoAsset,
186
186
  type UseImageOrVideoAssetOptions,
187
187
  } from './lib/shapes/shared/useImageOrVideoAsset'
@@ -360,10 +360,6 @@ export {
360
360
  TldrawUiMenuSubmenu,
361
361
  type TLUiMenuSubmenuProps,
362
362
  } from './lib/ui/components/primitives/menus/TldrawUiMenuSubmenu'
363
- export {
364
- TldrawUiButtonPicker,
365
- type TLUiButtonPickerProps,
366
- } from './lib/ui/components/primitives/TldrawUiButtonPicker'
367
363
  export {
368
364
  TldrawUiContextualToolbar,
369
365
  type TLUiContextualToolbarProps,
@@ -443,17 +439,44 @@ export {
443
439
  type TLUiStylePanelProps,
444
440
  } from './lib/ui/components/StylePanel/DefaultStylePanel'
445
441
  export {
446
- ArrowheadStylePickerSet,
447
- CommonStylePickerSet,
448
442
  DefaultStylePanelContent,
449
- GeoStylePickerSet,
450
- OpacitySlider,
451
- SplineStylePickerSet,
452
- TextStylePickerSet,
453
- type StylePickerSetProps,
454
- type ThemeStylePickerSetProps,
455
- type TLUiStylePanelContentProps,
443
+ StylePanelArrowheadPicker,
444
+ StylePanelArrowKindPicker,
445
+ StylePanelColorPicker,
446
+ StylePanelDashPicker,
447
+ StylePanelFillPicker,
448
+ StylePanelFontPicker,
449
+ StylePanelGeoShapePicker,
450
+ StylePanelLabelAlignPicker,
451
+ StylePanelOpacityPicker,
452
+ StylePanelSection,
453
+ StylePanelSizePicker,
454
+ StylePanelSplinePicker,
455
+ StylePanelTextAlignPicker,
456
+ type StylePanelSectionProps,
456
457
  } from './lib/ui/components/StylePanel/DefaultStylePanelContent'
458
+ export {
459
+ StylePanelButtonPicker,
460
+ type StylePanelButtonPickerProps,
461
+ } from './lib/ui/components/StylePanel/StylePanelButtonPicker'
462
+ export {
463
+ StylePanelContextProvider,
464
+ useStylePanelContext,
465
+ type StylePanelContext,
466
+ type StylePanelContextProviderProps,
467
+ } from './lib/ui/components/StylePanel/StylePanelContext'
468
+ export {
469
+ StylePanelDoubleDropdownPicker,
470
+ type StylePanelDoubleDropdownPickerProps,
471
+ } from './lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker'
472
+ export {
473
+ StylePanelDropdownPicker,
474
+ type StylePanelDropdownPickerProps,
475
+ } from './lib/ui/components/StylePanel/StylePanelDropdownPicker'
476
+ export {
477
+ StylePanelSubheading,
478
+ type StylePanelSubheadingProps,
479
+ } from './lib/ui/components/StylePanel/StylePanelSubheading'
457
480
  export {
458
481
  DefaultImageToolbar,
459
482
  type TLUiImageToolbarProps,
@@ -625,13 +648,12 @@ export {
625
648
  } from './lib/ui/hooks/useTranslation/useTranslation'
626
649
  export { type TLUiIconType } from './lib/ui/icon-types'
627
650
  export { useDefaultHelpers, type TLUiOverrideHelpers, type TLUiOverrides } from './lib/ui/overrides'
628
- export { TldrawUi, type TldrawUiProps } from './lib/ui/TldrawUi'
651
+ export { TldrawUi, TldrawUiInFrontOfTheCanvas, type TldrawUiProps } from './lib/ui/TldrawUi'
629
652
  export { containBoxSize, downsizeImage, type BoxWidthHeight } from './lib/utils/assets/assets'
630
653
  export { preloadFont, type TLTypeFace } from './lib/utils/assets/preload-font'
631
654
  export { getEmbedInfo, type TLEmbedResult } from './lib/utils/embeds/embeds'
632
655
  export { putExcalidrawContent } from './lib/utils/excalidraw/putExcalidrawContent'
633
656
  export { copyAs, type CopyAsOptions, type TLCopyType } from './lib/utils/export/copyAs'
634
- export { exportToBlob } from './lib/utils/export/export'
635
657
  export { downloadFile, exportAs, type ExportAsOptions } from './lib/utils/export/exportAs'
636
658
  export { fitFrameToContent, removeFrame } from './lib/utils/frames/frames'
637
659
  export {
@@ -33,7 +33,7 @@ import { registerDefaultSideEffects } from './defaultSideEffects'
33
33
  import { defaultTools } from './defaultTools'
34
34
  import { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'
35
35
  import { allDefaultFontFaces } from './shapes/shared/defaultFonts'
36
- import { TldrawUi, TldrawUiProps } from './ui/TldrawUi'
36
+ import { TldrawUi, TldrawUiInFrontOfTheCanvas, TldrawUiProps } from './ui/TldrawUi'
37
37
  import { TLUiAssetUrlOverrides, useDefaultUiAssetUrlsWithOverrides } from './ui/assetUrls'
38
38
  import { LoadingScreen } from './ui/components/LoadingScreen'
39
39
  import { Spinner } from './ui/components/Spinner'
@@ -118,6 +118,18 @@ export function Tldraw(props: TldrawProps) {
118
118
 
119
119
  const _components = useShallowObjectIdentity(components)
120
120
 
121
+ const CustomInFrontOfTheCanvas = components?.InFrontOfTheCanvas
122
+ const InFrontOfTheCanvas = useMemo(() => {
123
+ if (rest.hideUi) return CustomInFrontOfTheCanvas ?? null
124
+ if (!CustomInFrontOfTheCanvas) return TldrawUiInFrontOfTheCanvas
125
+
126
+ return () => (
127
+ <>
128
+ <TldrawUiInFrontOfTheCanvas />
129
+ <CustomInFrontOfTheCanvas />
130
+ </>
131
+ )
132
+ }, [rest.hideUi, CustomInFrontOfTheCanvas])
121
133
  const componentsWithDefault = useMemo(
122
134
  () => ({
123
135
  Scribble: TldrawScribble,
@@ -129,8 +141,9 @@ export function Tldraw(props: TldrawProps) {
129
141
  Spinner,
130
142
  LoadingScreen,
131
143
  ..._components,
144
+ InFrontOfTheCanvas,
132
145
  }),
133
- [_components]
146
+ [_components, InFrontOfTheCanvas]
134
147
  )
135
148
 
136
149
  const _shapeUtils = useShallowArrayIdentity(shapeUtils)
@@ -144,7 +144,7 @@ export async function defaultHandleExternalFileAsset(
144
144
  { file, assetId }: TLFileExternalAsset,
145
145
  options: TLDefaultExternalContentHandlerOpts
146
146
  ) {
147
- const isSuccess = runFileChecks(file, options)
147
+ const isSuccess = notifyIfFileNotAllowed(file, options)
148
148
  if (!isSuccess) assert(false, 'File checks failed')
149
149
 
150
150
  const assetInfo = await getAssetInfo(file, options, assetId)
@@ -161,7 +161,7 @@ export async function defaultHandleExternalFileReplaceContent(
161
161
  { file, shapeId, isImage }: TLFileReplaceExternalContent,
162
162
  options: TLDefaultExternalContentHandlerOpts
163
163
  ) {
164
- const isSuccess = runFileChecks(file, options)
164
+ const isSuccess = notifyIfFileNotAllowed(file, options)
165
165
  if (!isSuccess) assert(false, 'File checks failed')
166
166
 
167
167
  const shape = editor.getShape(shapeId)
@@ -399,7 +399,7 @@ export async function defaultHandleExternalFileContent(
399
399
  file: File
400
400
  }[] = []
401
401
  for (const file of files) {
402
- const isSuccess = runFileChecks(file, options)
402
+ const isSuccess = notifyIfFileNotAllowed(file, options)
403
403
  if (!isSuccess) continue
404
404
 
405
405
  const assetInfo = await getAssetInfo(file, options)
@@ -873,7 +873,15 @@ export function createEmptyBookmarkShape(
873
873
  return editor.getShape(partial.id) as TLBookmarkShape
874
874
  }
875
875
 
876
- function runFileChecks(file: File, options: TLDefaultExternalContentHandlerOpts) {
876
+ /**
877
+ * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
878
+ *
879
+ * @param file - The file to check
880
+ * @param options - The options for the external content handler
881
+ * @returns True if the file is allowed, false otherwise
882
+ * @public
883
+ */
884
+ export function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts) {
877
885
  const {
878
886
  acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,
879
887
  acceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,
@@ -1,4 +1,5 @@
1
1
  import { TLArrowShape, createShapeId } from '@tldraw/editor'
2
+ import { vi } from 'vitest'
2
3
  import { TestEditor } from '../../../test/TestEditor'
3
4
  import { ArrowShapeUtil } from './ArrowShapeUtil'
4
5
  import { updateArrowTargetState } from './arrowTargetState'
@@ -12,7 +13,7 @@ const ids = {
12
13
  arrow1: createShapeId('arrow1'),
13
14
  }
14
15
 
15
- jest.useFakeTimers()
16
+ vi.useFakeTimers()
16
17
 
17
18
  window.requestAnimationFrame = function requestAnimationFrame(cb) {
18
19
  return setTimeout(cb, 1000 / 60)
@@ -1,4 +1,5 @@
1
1
  import { IndexKey, TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
2
+ import { vi } from 'vitest'
2
3
  import { TestEditor } from '../../../test/TestEditor'
3
4
  import { getArrowTargetState } from './arrowTargetState'
4
5
  import { getArrowBindings } from './shared'
@@ -13,7 +14,7 @@ global.cancelAnimationFrame = function cancelAnimationFrame(id) {
13
14
  clearTimeout(id)
14
15
  }
15
16
 
16
- jest.useFakeTimers()
17
+ vi.useFakeTimers()
17
18
 
18
19
  const ids = {
19
20
  box1: createShapeId('box1'),
@@ -242,7 +243,7 @@ describe('When pointing an end shape', () => {
242
243
  },
243
244
  })
244
245
 
245
- jest.advanceTimersByTime(1000)
246
+ vi.advanceTimersByTime(1000)
246
247
 
247
248
  arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
248
249
 
@@ -306,7 +307,7 @@ describe('When pointing an end shape', () => {
306
307
  })
307
308
 
308
309
  // Give time for the velocity to die down
309
- jest.advanceTimersByTime(1000)
310
+ vi.advanceTimersByTime(1000)
310
311
 
311
312
  arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
312
313
 
@@ -1,4 +1,5 @@
1
1
  import { HALF_PI, TLArrowShape, TLShapeId, createShapeId, toRichText } from '@tldraw/editor'
2
+ import { vi } from 'vitest'
2
3
  import { TestEditor } from '../../../test/TestEditor'
3
4
  import { createOrUpdateArrowBinding, getArrowBindings } from './shared'
4
5
 
@@ -12,7 +13,7 @@ const ids = {
12
13
  arrow1: createShapeId('arrow1'),
13
14
  }
14
15
 
15
- jest.useFakeTimers()
16
+ vi.useFakeTimers()
16
17
 
17
18
  window.requestAnimationFrame = function requestAnimationFrame(cb) {
18
19
  return setTimeout(cb, 1000 / 60)
@@ -217,7 +218,7 @@ describe('Other cases when arrow are moved', () => {
217
218
  // When box one is not selected, unbinds box1 and keeps binding to box2
218
219
  editor.select(ids.arrow1, ids.box2, ids.box3)
219
220
  editor.alignShapes(editor.getSelectedShapeIds(), 'right')
220
- jest.advanceTimersByTime(1000)
221
+ vi.advanceTimersByTime(1000)
221
222
 
222
223
  expect(bindings()).toMatchObject({
223
224
  start: { toId: ids.box1, props: { isPrecise: false } },
@@ -227,7 +228,7 @@ describe('Other cases when arrow are moved', () => {
227
228
  // maintains bindings if they would still be over the same shape (but makes them precise), but unbinds others
228
229
  editor.select(ids.arrow1, ids.box3)
229
230
  editor.alignShapes(editor.getSelectedShapeIds(), 'top')
230
- jest.advanceTimersByTime(1000)
231
+ vi.advanceTimersByTime(1000)
231
232
 
232
233
  expect(bindings()).toMatchObject({
233
234
  start: { toId: ids.box1, props: { isPrecise: true } },
@@ -244,7 +245,7 @@ describe('Other cases when arrow are moved', () => {
244
245
  // When box one is not selected, unbinds box1 and keeps binding to box2
245
246
  editor.select(ids.arrow1, ids.box2, ids.box3)
246
247
  editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
247
- jest.advanceTimersByTime(1000)
248
+ vi.advanceTimersByTime(1000)
248
249
 
249
250
  expect(bindings()).toMatchObject({
250
251
  start: { toId: ids.box1, props: { isPrecise: false } },
@@ -254,7 +255,7 @@ describe('Other cases when arrow are moved', () => {
254
255
  // unbinds when only the arrow is selected (not its bound shapes) if the arrow itself has moved
255
256
  editor.select(ids.arrow1, ids.box3, ids.box4)
256
257
  editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
257
- jest.advanceTimersByTime(1000)
258
+ vi.advanceTimersByTime(1000)
258
259
 
259
260
  // The arrow didn't actually move
260
261
  expect(bindings()).toMatchObject({
@@ -265,7 +266,7 @@ describe('Other cases when arrow are moved', () => {
265
266
  // The arrow will not move because it is still bound to another shape
266
267
  editor.updateShapes([{ id: ids.box4, type: 'geo', y: -600 }])
267
268
  editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
268
- jest.advanceTimersByTime(1000)
269
+ vi.advanceTimersByTime(1000)
269
270
 
270
271
  expect(bindings()).toMatchObject({
271
272
  start: undefined,
@@ -227,6 +227,14 @@ interface ArrowheadInfo {
227
227
  hasEndArrowhead: boolean
228
228
  }
229
229
  export function getArrowLabelPosition(editor: Editor, shape: TLArrowShape) {
230
+ const isEditing = editor.getEditingShapeId() === shape.id
231
+ if (!isEditing && isEmptyRichText(shape.props.richText)) {
232
+ // Short-circuit for empty labels.
233
+ const bodyGeom = getArrowBodyGeometry(editor, shape)
234
+ const labelCenter = bodyGeom.interpolateAlongEdge(0.5)
235
+ return { box: Box.FromCenter(labelCenter, new Vec(0, 0)), debugGeom: [] }
236
+ }
237
+
230
238
  const debugGeom: Geometry2d[] = []
231
239
  const info = getArrowInfo(editor, shape)!
232
240
 
@@ -1,5 +1,4 @@
1
1
  import { TestEditor } from '../../../test/TestEditor'
2
- import { DrawShapeTool } from './DrawShapeTool'
3
2
 
4
3
  let editor: TestEditor
5
4
 
@@ -10,10 +9,6 @@ afterEach(() => {
10
9
  editor?.dispose()
11
10
  })
12
11
 
13
- describe(DrawShapeTool, () => {
14
- return
15
- })
16
-
17
12
  describe('When in the idle state', () => {
18
13
  it('Returns to select on cancel', () => {
19
14
  editor.setCurrentTool('draw')
@@ -100,6 +100,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
100
100
  return false
101
101
  }
102
102
 
103
+ override isExportBoundsContainer(): boolean {
104
+ return true
105
+ }
106
+
103
107
  override getDefaultProps(): TLFrameShape['props'] {
104
108
  return { w: 160 * 2, h: 90 * 2, name: '', color: 'black' }
105
109
  }
@@ -335,6 +339,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
335
339
  return true
336
340
  }
337
341
 
342
+ override getClipPath(shape: TLFrameShape) {
343
+ return this.editor.getShapeGeometry(shape.id).vertices
344
+ }
345
+
338
346
  override canReceiveNewChildrenOfType(shape: TLShape) {
339
347
  return !shape.isLocked
340
348
  }
@@ -57,6 +57,9 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
57
57
  override canCrop() {
58
58
  return true
59
59
  }
60
+ override isExportBoundsContainer(): boolean {
61
+ return true
62
+ }
60
63
 
61
64
  override getDefaultProps(): TLImageShape['props'] {
62
65
  return {
@@ -7,6 +7,7 @@ import {
7
7
  sortByIndex,
8
8
  structuredClone,
9
9
  } from '@tldraw/editor'
10
+ import { vi } from 'vitest'
10
11
  import { TestEditor } from '../../../test/TestEditor'
11
12
  import { TL } from '../../../test/test-jsx'
12
13
 
@@ -16,7 +17,7 @@ mockUniqueId(() => 'id' + nextId++)
16
17
  let editor: TestEditor
17
18
  const id = createShapeId('line1')
18
19
 
19
- jest.useFakeTimers()
20
+ vi.useFakeTimers()
20
21
 
21
22
  beforeEach(() => {
22
23
  editor = new TestEditor()
@@ -338,12 +339,12 @@ describe('Misc', () => {
338
339
 
339
340
  expect(editor.getShapePageBounds(box)!.maxX).not.toEqual(editor.getShapePageBounds(line)!.maxX)
340
341
  editor.alignShapes(editor.getSelectedShapeIds(), 'right')
341
- jest.advanceTimersByTime(1000)
342
+ vi.advanceTimersByTime(1000)
342
343
  expect(editor.getShapePageBounds(box)!.maxX).toEqual(editor.getShapePageBounds(line)!.maxX)
343
344
 
344
345
  expect(editor.getShapePageBounds(box)!.maxY).not.toEqual(editor.getShapePageBounds(line)!.maxY)
345
346
  editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
346
- jest.advanceTimersByTime(1000)
347
+ vi.advanceTimersByTime(1000)
347
348
  expect(editor.getShapePageBounds(box)!.maxY).toEqual(editor.getShapePageBounds(line)!.maxY)
348
349
  })
349
350
 
@@ -1,6 +1,6 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
- exports[`Misc resizes: line shape after resize 1`] = `
3
+ exports[`Misc > resizes > line shape after resize 1`] = `
4
4
  {
5
5
  "id": "shape:line1",
6
6
  "index": "a1",
@@ -130,9 +130,3 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
130
130
  </div>
131
131
  )
132
132
  })
133
-
134
- /**
135
- * @deprecated Use `PlainTextLabel` instead.
136
- * @public
137
- */
138
- export const TextLabel = PlainTextLabel
@@ -6,6 +6,8 @@ import { StrokePoint } from './types'
6
6
  *
7
7
  * @param points - The stroke points returned from perfect-freehand
8
8
  * @param closed - Whether the shape is closed
9
+ *
10
+ * @public
9
11
  */
10
12
  export function getSvgPathFromStrokePoints(points: StrokePoint[], closed = false): string {
11
13
  const len = points.length
@@ -167,9 +167,3 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
167
167
  isReadyForEditing,
168
168
  }
169
169
  }
170
-
171
- /**
172
- * @deprecated Use `useEditablePlainText` instead.
173
- * @public
174
- */
175
- export const useEditableText = useEditablePlainText
@@ -158,10 +158,3 @@ function resolveAssetUrl(
158
158
  callback(url)
159
159
  })
160
160
  }
161
-
162
- /**
163
- * @deprecated Use {@link useImageOrVideoAsset} instead.
164
- *
165
- * @public
166
- */
167
- export const useAsset = useImageOrVideoAsset
@@ -1,9 +1,10 @@
1
1
  import { DefaultTextAlignStyle, TLTextShape, toRichText } from '@tldraw/editor'
2
+ import { vi } from 'vitest'
2
3
  import { TestEditor } from '../../../test/TestEditor'
3
4
  import { TextShapeTool } from './TextShapeTool'
4
5
 
5
6
  let editor: TestEditor
6
- jest.useFakeTimers()
7
+ vi.useFakeTimers()
7
8
 
8
9
  beforeEach(() => {
9
10
  editor = new TestEditor()
@@ -115,7 +116,7 @@ describe('When in the pointing state', () => {
115
116
 
116
117
  // Go back to start and wait a little to satisfy the time requirement
117
118
  editor.pointerMove(0, 0)
118
- jest.advanceTimersByTime(200)
119
+ vi.advanceTimersByTime(200)
119
120
 
120
121
  // y axis doesn't matter
121
122
  editor.pointerMove(0, 100)
@@ -187,7 +188,7 @@ describe('When resizing', () => {
187
188
  it('bails on escape while resizing and returns to text.idle', () => {
188
189
  editor.setCurrentTool('text')
189
190
  editor.pointerDown(0, 0)
190
- jest.advanceTimersByTime(200)
191
+ vi.advanceTimersByTime(200)
191
192
  editor.pointerMove(100, 100)
192
193
  editor.expectToBeIn('select.resizing')
193
194
  editor.cancel()
@@ -198,7 +199,7 @@ describe('When resizing', () => {
198
199
  it('does not bails on interrupt while resizing', () => {
199
200
  editor.setCurrentTool('text')
200
201
  editor.pointerDown(0, 0)
201
- jest.advanceTimersByTime(200)
202
+ vi.advanceTimersByTime(200)
202
203
  editor.pointerMove(100, 100)
203
204
  editor.expectToBeIn('select.resizing')
204
205
  editor.interrupt()
@@ -210,7 +211,7 @@ describe('When resizing', () => {
210
211
  const x = 0
211
212
  const y = 0
212
213
  editor.pointerDown(x, y)
213
- jest.advanceTimersByTime(200)
214
+ vi.advanceTimersByTime(200)
214
215
  editor.pointerMove(x + 100, y + 100)
215
216
  expect(editor.getCurrentPageShapes()[0]).toMatchObject({
216
217
  x,