tldraw 3.16.0-canary.aceca4c951a7 → 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 (184) hide show
  1. package/dist-cjs/index.d.ts +95 -2
  2. package/dist-cjs/index.js +9 -1
  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/frame/FrameShapeUtil.js +6 -0
  9. package/dist-cjs/lib/shapes/frame/FrameShapeUtil.js.map +2 -2
  10. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js +3 -0
  11. package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map +2 -2
  12. package/dist-cjs/lib/shapes/shared/ShapeFill.js +1 -1
  13. package/dist-cjs/lib/shapes/shared/ShapeFill.js.map +2 -2
  14. package/dist-cjs/lib/shapes/shared/freehand/svg.js.map +2 -2
  15. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js +25 -1
  16. package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js.map +2 -2
  17. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js +12 -0
  18. package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js.map +2 -2
  19. package/dist-cjs/lib/ui/TldrawUi.js +13 -12
  20. package/dist-cjs/lib/ui/TldrawUi.js.map +2 -2
  21. package/dist-cjs/lib/ui/assetUrls.js +13 -10
  22. package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
  23. package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
  24. package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
  25. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +6 -6
  26. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
  27. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js +1 -1
  28. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +2 -2
  29. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +52 -43
  30. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  31. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js +2 -1
  32. package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuItem.js.map +2 -2
  33. package/dist-cjs/lib/ui/context/actions.js +16 -2
  34. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  35. package/dist-cjs/lib/ui/context/components.js +2 -0
  36. package/dist-cjs/lib/ui/context/components.js.map +2 -2
  37. package/dist-cjs/lib/ui/context/events.js.map +1 -1
  38. package/dist-cjs/lib/ui/hooks/useTools.js +5 -5
  39. package/dist-cjs/lib/ui/hooks/useTools.js.map +2 -2
  40. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  41. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +1 -0
  42. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  43. package/dist-cjs/lib/ui/kbd-utils.js +9 -3
  44. package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
  45. package/dist-cjs/lib/ui/version.js +3 -3
  46. package/dist-cjs/lib/ui/version.js.map +1 -1
  47. package/dist-esm/index.d.mts +95 -2
  48. package/dist-esm/index.mjs +11 -2
  49. package/dist-esm/index.mjs.map +2 -2
  50. package/dist-esm/lib/Tldraw.mjs +14 -4
  51. package/dist-esm/lib/Tldraw.mjs.map +2 -2
  52. package/dist-esm/lib/defaultExternalContentHandlers.mjs +5 -4
  53. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  54. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +6 -0
  55. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  56. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +3 -0
  57. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
  58. package/dist-esm/lib/shapes/shared/ShapeFill.mjs +1 -1
  59. package/dist-esm/lib/shapes/shared/ShapeFill.mjs.map +2 -2
  60. package/dist-esm/lib/shapes/shared/freehand/svg.mjs.map +2 -2
  61. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs +26 -1
  62. package/dist-esm/lib/tools/EraserTool/childStates/Erasing.mjs.map +2 -2
  63. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs +13 -0
  64. package/dist-esm/lib/tools/EraserTool/childStates/Pointing.mjs.map +2 -2
  65. package/dist-esm/lib/ui/TldrawUi.mjs +13 -12
  66. package/dist-esm/lib/ui/TldrawUi.mjs.map +2 -2
  67. package/dist-esm/lib/ui/assetUrls.mjs +13 -10
  68. package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
  69. package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
  70. package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
  71. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +6 -6
  72. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
  73. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs +1 -1
  74. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +2 -2
  75. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +52 -43
  76. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  77. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs +2 -1
  78. package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuItem.mjs.map +2 -2
  79. package/dist-esm/lib/ui/context/actions.mjs +16 -2
  80. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  81. package/dist-esm/lib/ui/context/components.mjs +2 -0
  82. package/dist-esm/lib/ui/context/components.mjs.map +2 -2
  83. package/dist-esm/lib/ui/context/events.mjs.map +1 -1
  84. package/dist-esm/lib/ui/hooks/useTools.mjs +5 -5
  85. package/dist-esm/lib/ui/hooks/useTools.mjs.map +2 -2
  86. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +1 -0
  87. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  88. package/dist-esm/lib/ui/kbd-utils.mjs +9 -3
  89. package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
  90. package/dist-esm/lib/ui/version.mjs +3 -3
  91. package/dist-esm/lib/ui/version.mjs.map +1 -1
  92. package/package.json +11 -34
  93. package/src/index.ts +6 -1
  94. package/src/lib/Tldraw.tsx +15 -2
  95. package/src/lib/defaultExternalContentHandlers.ts +12 -4
  96. package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts +2 -1
  97. package/src/lib/shapes/arrow/ArrowShapeTool.test.ts +4 -3
  98. package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +7 -6
  99. package/src/lib/shapes/draw/DrawShapeTool.test.ts +0 -5
  100. package/src/lib/shapes/frame/FrameShapeUtil.tsx +8 -0
  101. package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -0
  102. package/src/lib/shapes/line/LineShapeUtil.test.tsx +4 -3
  103. package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap +2 -2
  104. package/src/lib/shapes/shared/ShapeFill.tsx +1 -1
  105. package/src/lib/shapes/shared/freehand/svg.ts +2 -0
  106. package/src/lib/shapes/text/TextShapeTool.test.ts +6 -5
  107. package/src/lib/tools/EraserTool/childStates/Erasing.ts +34 -1
  108. package/src/lib/tools/EraserTool/childStates/Pointing.ts +20 -0
  109. package/src/lib/ui/TldrawUi.tsx +16 -10
  110. package/src/lib/ui/assetUrls.ts +13 -10
  111. package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
  112. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +6 -6
  113. package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +1 -1
  114. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +48 -24
  115. package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx +3 -2
  116. package/src/lib/ui/context/actions.tsx +16 -2
  117. package/src/lib/ui/context/components.tsx +3 -0
  118. package/src/lib/ui/context/events.tsx +1 -1
  119. package/src/lib/ui/hooks/useTools.tsx +7 -5
  120. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +1 -0
  121. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +1 -0
  122. package/src/lib/ui/kbd-utils.ts +10 -3
  123. package/src/lib/ui/version.ts +3 -3
  124. package/src/lib/ui.css +3 -0
  125. package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap +5 -5
  126. package/src/lib/utils/tldr/__snapshots__/buildFromV1Document.test.ts.snap +4 -4
  127. package/src/test/A11y.test.tsx +3 -2
  128. package/src/test/ClickManager.test.ts +7 -6
  129. package/src/test/Editor.test.tsx +20 -19
  130. package/src/test/EraserTool.test.ts +184 -13
  131. package/src/test/HandTool.test.ts +10 -9
  132. package/src/test/HighlightShape.test.ts +2 -1
  133. package/src/test/SelectTool.test.ts +3 -2
  134. package/src/test/TLUserPreferences.test.ts +4 -3
  135. package/src/test/TestEditor.ts +13 -15
  136. package/src/test/TldrawEditor.test.tsx +11 -10
  137. package/src/test/ZoomTool.test.ts +7 -6
  138. package/src/test/__snapshots__/drawing.test.ts.snap +2 -2
  139. package/src/test/__snapshots__/groups.test.tsx.snap +6 -6
  140. package/src/test/__snapshots__/resizing.test.ts.snap +2 -2
  141. package/src/test/arrows-megabus.test.tsx +5 -4
  142. package/src/test/bindings.test.tsx +24 -37
  143. package/src/test/bookmark-shapes.test.ts +1 -8
  144. package/src/test/commands/__snapshots__/getSvgString.test.ts.snap +23 -7
  145. package/src/test/commands/__snapshots__/packShapes.test.ts.snap +8 -8
  146. package/src/test/commands/__snapshots__/zoomToFit.test.ts.snap +2 -2
  147. package/src/test/commands/alignShapes.test.tsx +25 -24
  148. package/src/test/commands/animationSpeed.test.ts +2 -1
  149. package/src/test/commands/centerOnPoint.test.ts +3 -2
  150. package/src/test/commands/clipboard.test.ts +3 -2
  151. package/src/test/commands/createShapes.test.ts +2 -1
  152. package/src/test/commands/deleteShapes.test.ts +2 -1
  153. package/src/test/commands/distributeShapes.test.tsx +11 -10
  154. package/src/test/commands/getSvgString.test.ts +2 -1
  155. package/src/test/commands/packShapes.test.ts +5 -4
  156. package/src/test/commands/resizeShape.test.ts +2 -1
  157. package/src/test/commands/rotateShapes.test.ts +7 -6
  158. package/src/test/commands/setCamera.test.ts +4 -3
  159. package/src/test/commands/setCurrentPage.test.ts +3 -2
  160. package/src/test/commands/stackShapes.test.ts +11 -10
  161. package/src/test/commands/stretch.test.tsx +13 -12
  162. package/src/test/createDeepLink.test.tsx +2 -1
  163. package/src/test/cropping.test.ts +3 -2
  164. package/src/test/custom-clipping.test.ts +436 -0
  165. package/src/test/drawing.test.ts +2 -1
  166. package/src/test/flipShapes.test.ts +4 -3
  167. package/src/test/frames.test.ts +25 -24
  168. package/src/test/getCulledShapes.test.tsx +3 -2
  169. package/src/test/groups.test.tsx +1 -1
  170. package/src/test/handleDeepLink.test.tsx +2 -1
  171. package/src/test/maxShapes.test.ts +3 -2
  172. package/src/test/modifiers.test.ts +5 -4
  173. package/src/test/navigation.test.ts +12 -11
  174. package/src/test/panning.test.ts +2 -1
  175. package/src/test/perf/perf.test.ts +2 -1
  176. package/src/test/registerDeepLinkListener.test.tsx +10 -9
  177. package/src/test/resizing.test.ts +39 -38
  178. package/src/test/select.test.tsx +4 -3
  179. package/src/test/selection-omnibus.test.ts +11 -10
  180. package/src/test/shapeutils.test.ts +4 -3
  181. package/src/test/translating.test.ts +9 -8
  182. package/tldraw.css +11 -0
  183. package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
  184. package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map +0 -7
package/tldraw.css CHANGED
@@ -33,6 +33,7 @@
33
33
  --tl-layer-watermark: 200;
34
34
  --tl-layer-canvas-shapes: 300;
35
35
  --tl-layer-canvas-overlays: 500;
36
+ --tl-layer-canvas-in-front: 600;
36
37
  --tl-layer-canvas-blocker: 10000;
37
38
 
38
39
  /* Canvas overlays z-index */
@@ -301,6 +302,13 @@ input,
301
302
  contain: strict;
302
303
  }
303
304
 
305
+ .tl-canvas__in-front {
306
+ position: absolute;
307
+ inset: 0;
308
+ pointer-events: none;
309
+ z-index: var(--tl-layer-canvas-in-front);
310
+ }
311
+
304
312
  .tl-shapes {
305
313
  position: relative;
306
314
  z-index: var(--tl-layer-canvas-shapes);
@@ -2830,6 +2838,9 @@ it from receiving any pointer events or affecting the cursor. */
2830
2838
  }
2831
2839
 
2832
2840
  @media (hover: hover) {
2841
+ .tlui-style-panel .tlui-button[aria-expanded='true'] {
2842
+ background: none;
2843
+ }
2833
2844
  .tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
2834
2845
  opacity: 1;
2835
2846
  background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/ui/components/FollowingIndicator.tsx"],
4
- "sourcesContent": ["import { useEditor, usePresence, useValue } from '@tldraw/editor'\n\nexport function FollowingIndicator() {\n\tconst editor = useEditor()\n\tconst followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [\n\t\teditor,\n\t])\n\tif (!followingUserId) return null\n\treturn <FollowingIndicatorInner userId={followingUserId} />\n}\n\nfunction FollowingIndicatorInner({ userId }: { userId: string }) {\n\tconst presence = usePresence(userId)\n\tif (!presence) return null\n\treturn <div className=\"tlui-following-indicator\" style={{ borderColor: presence.color }} />\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQQ;AARR,oBAAiD;AAE1C,SAAS,qBAAqB;AACpC,QAAM,aAAS,yBAAU;AACzB,QAAM,sBAAkB,wBAAS,UAAU,MAAM,OAAO,iBAAiB,EAAE,iBAAiB;AAAA,IAC3F;AAAA,EACD,CAAC;AACD,MAAI,CAAC,gBAAiB,QAAO;AAC7B,SAAO,4CAAC,2BAAwB,QAAQ,iBAAiB;AAC1D;AAEA,SAAS,wBAAwB,EAAE,OAAO,GAAuB;AAChE,QAAM,eAAW,2BAAY,MAAM;AACnC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,4CAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,aAAa,SAAS,MAAM,GAAG;AAC1F;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/ui/components/FollowingIndicator.tsx"],
4
- "sourcesContent": ["import { useEditor, usePresence, useValue } from '@tldraw/editor'\n\nexport function FollowingIndicator() {\n\tconst editor = useEditor()\n\tconst followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [\n\t\teditor,\n\t])\n\tif (!followingUserId) return null\n\treturn <FollowingIndicatorInner userId={followingUserId} />\n}\n\nfunction FollowingIndicatorInner({ userId }: { userId: string }) {\n\tconst presence = usePresence(userId)\n\tif (!presence) return null\n\treturn <div className=\"tlui-following-indicator\" style={{ borderColor: presence.color }} />\n}\n"],
5
- "mappings": "AAQQ;AARR,SAAS,WAAW,aAAa,gBAAgB;AAE1C,SAAS,qBAAqB;AACpC,QAAM,SAAS,UAAU;AACzB,QAAM,kBAAkB,SAAS,UAAU,MAAM,OAAO,iBAAiB,EAAE,iBAAiB;AAAA,IAC3F;AAAA,EACD,CAAC;AACD,MAAI,CAAC,gBAAiB,QAAO;AAC7B,SAAO,oBAAC,2BAAwB,QAAQ,iBAAiB;AAC1D;AAEA,SAAS,wBAAwB,EAAE,OAAO,GAAuB;AAChE,QAAM,WAAW,YAAY,MAAM;AACnC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,oBAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,aAAa,SAAS,MAAM,GAAG;AAC1F;",
6
- "names": []
7
- }