tldraw 3.16.0-canary.654b4007a087 → 3.16.0-canary.65a1804c722b

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 (93) hide show
  1. package/dist-cjs/index.d.ts +22 -2
  2. package/dist-cjs/index.js +5 -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/ui/TldrawUi.js +13 -12
  13. package/dist-cjs/lib/ui/TldrawUi.js.map +2 -2
  14. package/dist-cjs/lib/ui/assetUrls.js +13 -10
  15. package/dist-cjs/lib/ui/assetUrls.js.map +2 -2
  16. package/dist-cjs/lib/ui/components/{FollowingIndicator.js → DefaultFollowingIndicator.js} +6 -6
  17. package/dist-cjs/lib/ui/components/DefaultFollowingIndicator.js.map +7 -0
  18. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js +6 -6
  19. package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.js.map +1 -1
  20. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js +1 -1
  21. package/dist-cjs/lib/ui/components/StylePanel/DropdownPicker.js.map +2 -2
  22. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js +31 -37
  23. package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map +2 -2
  24. package/dist-cjs/lib/ui/context/actions.js +16 -2
  25. package/dist-cjs/lib/ui/context/actions.js.map +2 -2
  26. package/dist-cjs/lib/ui/context/components.js +2 -0
  27. package/dist-cjs/lib/ui/context/components.js.map +2 -2
  28. package/dist-cjs/lib/ui/context/events.js.map +1 -1
  29. package/dist-cjs/lib/ui/hooks/useTranslation/TLUiTranslationKey.js.map +1 -1
  30. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js +1 -0
  31. package/dist-cjs/lib/ui/hooks/useTranslation/defaultTranslation.js.map +2 -2
  32. package/dist-cjs/lib/ui/kbd-utils.js +9 -3
  33. package/dist-cjs/lib/ui/kbd-utils.js.map +2 -2
  34. package/dist-cjs/lib/ui/version.js +3 -3
  35. package/dist-cjs/lib/ui/version.js.map +1 -1
  36. package/dist-esm/index.d.mts +22 -2
  37. package/dist-esm/index.mjs +7 -2
  38. package/dist-esm/index.mjs.map +2 -2
  39. package/dist-esm/lib/Tldraw.mjs +14 -4
  40. package/dist-esm/lib/Tldraw.mjs.map +2 -2
  41. package/dist-esm/lib/defaultExternalContentHandlers.mjs +5 -4
  42. package/dist-esm/lib/defaultExternalContentHandlers.mjs.map +2 -2
  43. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs +6 -0
  44. package/dist-esm/lib/shapes/frame/FrameShapeUtil.mjs.map +2 -2
  45. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs +3 -0
  46. package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.map +2 -2
  47. package/dist-esm/lib/ui/TldrawUi.mjs +13 -12
  48. package/dist-esm/lib/ui/TldrawUi.mjs.map +2 -2
  49. package/dist-esm/lib/ui/assetUrls.mjs +13 -10
  50. package/dist-esm/lib/ui/assetUrls.mjs.map +2 -2
  51. package/dist-esm/lib/ui/components/{FollowingIndicator.mjs → DefaultFollowingIndicator.mjs} +3 -3
  52. package/dist-esm/lib/ui/components/DefaultFollowingIndicator.mjs.map +7 -0
  53. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs +6 -6
  54. package/dist-esm/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.mjs.map +1 -1
  55. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs +1 -1
  56. package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map +2 -2
  57. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs +31 -37
  58. package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map +2 -2
  59. package/dist-esm/lib/ui/context/actions.mjs +16 -2
  60. package/dist-esm/lib/ui/context/actions.mjs.map +2 -2
  61. package/dist-esm/lib/ui/context/components.mjs +2 -0
  62. package/dist-esm/lib/ui/context/components.mjs.map +2 -2
  63. package/dist-esm/lib/ui/context/events.mjs.map +1 -1
  64. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs +1 -0
  65. package/dist-esm/lib/ui/hooks/useTranslation/defaultTranslation.mjs.map +2 -2
  66. package/dist-esm/lib/ui/kbd-utils.mjs +9 -3
  67. package/dist-esm/lib/ui/kbd-utils.mjs.map +2 -2
  68. package/dist-esm/lib/ui/version.mjs +3 -3
  69. package/dist-esm/lib/ui/version.mjs.map +1 -1
  70. package/package.json +5 -4
  71. package/src/index.ts +3 -1
  72. package/src/lib/Tldraw.tsx +15 -2
  73. package/src/lib/defaultExternalContentHandlers.ts +12 -4
  74. package/src/lib/shapes/frame/FrameShapeUtil.tsx +8 -0
  75. package/src/lib/shapes/image/ImageShapeUtil.tsx +3 -0
  76. package/src/lib/ui/TldrawUi.tsx +16 -10
  77. package/src/lib/ui/assetUrls.ts +13 -10
  78. package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx} +2 -1
  79. package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx +6 -6
  80. package/src/lib/ui/components/StylePanel/DropdownPicker.tsx +1 -1
  81. package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx +20 -22
  82. package/src/lib/ui/context/actions.tsx +16 -2
  83. package/src/lib/ui/context/components.tsx +3 -0
  84. package/src/lib/ui/context/events.tsx +1 -1
  85. package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts +1 -0
  86. package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts +1 -0
  87. package/src/lib/ui/kbd-utils.ts +10 -3
  88. package/src/lib/ui/version.ts +3 -3
  89. package/src/lib/ui.css +3 -0
  90. package/src/test/custom-clipping.test.ts +436 -0
  91. package/tldraw.css +11 -0
  92. package/dist-cjs/lib/ui/components/FollowingIndicator.js.map +0 -7
  93. 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
- }