@tldraw/editor 4.6.0-next.fecc64eee134 → 5.0.0

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 (324) hide show
  1. package/dist-cjs/index.d.ts +493 -170
  2. package/dist-cjs/index.js +14 -23
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/TldrawEditor.js +3 -0
  5. package/dist-cjs/lib/TldrawEditor.js.map +2 -2
  6. package/dist-cjs/lib/components/MenuClickCapture.js +93 -47
  7. package/dist-cjs/lib/components/MenuClickCapture.js.map +2 -2
  8. package/dist-cjs/lib/components/default-components/CanvasOverlays.js +180 -0
  9. package/dist-cjs/lib/components/default-components/CanvasOverlays.js.map +7 -0
  10. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +46 -248
  11. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +3 -3
  12. package/dist-cjs/lib/editor/Editor.js +142 -33
  13. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  14. package/dist-cjs/lib/editor/assets/AssetUtil.js +1 -0
  15. package/dist-cjs/lib/editor/assets/AssetUtil.js.map +1 -1
  16. package/dist-cjs/lib/editor/bindings/BindingUtil.js +1 -0
  17. package/dist-cjs/lib/editor/bindings/BindingUtil.js.map +1 -1
  18. package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js +1 -0
  19. package/dist-cjs/lib/editor/managers/ClickManager/ClickManager.js.map +1 -1
  20. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js +98 -0
  21. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js.map +7 -0
  22. package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js +1 -0
  23. package/dist-cjs/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.js.map +1 -1
  24. package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js +1 -0
  25. package/dist-cjs/lib/editor/managers/FocusManager/FocusManager.js.map +1 -1
  26. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js +2 -0
  27. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js.map +1 -1
  28. package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js +2 -0
  29. package/dist-cjs/lib/editor/managers/HistoryManager/HistoryManager.js.map +1 -1
  30. package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js +12 -0
  31. package/dist-cjs/lib/editor/managers/InputsManager/InputsManager.js.map +2 -2
  32. package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js +1 -0
  33. package/dist-cjs/lib/editor/managers/ScribbleManager/ScribbleManager.js.map +1 -1
  34. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js +1 -0
  35. package/dist-cjs/lib/editor/managers/SnapManager/BoundsSnaps.js.map +1 -1
  36. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +1 -0
  37. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +1 -1
  38. package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js +2 -1
  39. package/dist-cjs/lib/editor/managers/SnapManager/SnapManager.js.map +2 -2
  40. package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js +1 -0
  41. package/dist-cjs/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.js.map +1 -1
  42. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +1 -0
  43. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +1 -1
  44. package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js +1 -0
  45. package/dist-cjs/lib/editor/managers/ThemeManager/ThemeManager.js.map +1 -1
  46. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +14 -0
  47. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +2 -2
  48. package/dist-cjs/lib/editor/managers/TickManager/TickManager.js +1 -0
  49. package/dist-cjs/lib/editor/managers/TickManager/TickManager.js.map +1 -1
  50. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +2 -0
  51. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +1 -1
  52. package/dist-cjs/lib/editor/overlays/OverlayManager.js +154 -0
  53. package/dist-cjs/lib/editor/overlays/OverlayManager.js.map +7 -0
  54. package/dist-cjs/lib/editor/overlays/OverlayUtil.js +92 -0
  55. package/dist-cjs/lib/editor/overlays/OverlayUtil.js.map +7 -0
  56. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js +161 -0
  57. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map +7 -0
  58. package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js +39 -0
  59. package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js.map +7 -0
  60. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js +79 -0
  61. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +7 -0
  62. package/dist-cjs/lib/editor/shapes/ShapeUtil.js +36 -23
  63. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  64. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +32 -2
  65. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
  66. package/dist-cjs/lib/editor/tools/StateNode.js +1 -0
  67. package/dist-cjs/lib/editor/tools/StateNode.js.map +1 -1
  68. package/dist-cjs/lib/editor/types/event-types.js.map +2 -2
  69. package/dist-cjs/lib/exports/ExportDelay.js +1 -0
  70. package/dist-cjs/lib/exports/ExportDelay.js.map +1 -1
  71. package/dist-cjs/lib/exports/StyleEmbedder.js +1 -0
  72. package/dist-cjs/lib/exports/StyleEmbedder.js.map +1 -1
  73. package/dist-cjs/lib/exports/fetchCache.js +1 -1
  74. package/dist-cjs/lib/exports/fetchCache.js.map +2 -2
  75. package/dist-cjs/lib/exports/getSvgJsx.js +2 -1
  76. package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
  77. package/dist-cjs/lib/hooks/EditorComponentsContext.js.map +2 -2
  78. package/dist-cjs/lib/hooks/useCanvasEvents.js +25 -4
  79. package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
  80. package/dist-cjs/lib/hooks/useEditorComponents.js +0 -28
  81. package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
  82. package/dist-cjs/lib/hooks/usePeerIds.js +1 -36
  83. package/dist-cjs/lib/hooks/usePeerIds.js.map +2 -2
  84. package/dist-cjs/lib/hooks/useShapeCulling.js +2 -1
  85. package/dist-cjs/lib/hooks/useShapeCulling.js.map +2 -2
  86. package/dist-cjs/lib/options.js +1 -0
  87. package/dist-cjs/lib/options.js.map +2 -2
  88. package/dist-cjs/lib/primitives/Vec.js +3 -0
  89. package/dist-cjs/lib/primitives/Vec.js.map +1 -1
  90. package/dist-cjs/lib/primitives/geometry/Circle2d.js +1 -0
  91. package/dist-cjs/lib/primitives/geometry/Circle2d.js.map +1 -1
  92. package/dist-cjs/lib/primitives/geometry/Ellipse2d.js +1 -0
  93. package/dist-cjs/lib/primitives/geometry/Ellipse2d.js.map +1 -1
  94. package/dist-cjs/lib/primitives/geometry/Geometry2d.js +2 -0
  95. package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +1 -1
  96. package/dist-cjs/lib/primitives/geometry/Stadium2d.js +1 -0
  97. package/dist-cjs/lib/primitives/geometry/Stadium2d.js.map +1 -1
  98. package/dist-cjs/lib/utils/EditorAtom.js +2 -0
  99. package/dist-cjs/lib/utils/EditorAtom.js.map +1 -1
  100. package/dist-cjs/lib/utils/reparenting.js +20 -7
  101. package/dist-cjs/lib/utils/reparenting.js.map +2 -2
  102. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +5 -0
  103. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
  104. package/dist-cjs/version.js +4 -4
  105. package/dist-cjs/version.js.map +1 -1
  106. package/dist-esm/index.d.mts +493 -170
  107. package/dist-esm/index.mjs +21 -41
  108. package/dist-esm/index.mjs.map +2 -2
  109. package/dist-esm/lib/TldrawEditor.mjs +3 -0
  110. package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
  111. package/dist-esm/lib/components/MenuClickCapture.mjs +94 -48
  112. package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
  113. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs +160 -0
  114. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs.map +7 -0
  115. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +47 -249
  116. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +3 -3
  117. package/dist-esm/lib/editor/Editor.mjs +143 -35
  118. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  119. package/dist-esm/lib/editor/assets/AssetUtil.mjs +1 -0
  120. package/dist-esm/lib/editor/assets/AssetUtil.mjs.map +1 -1
  121. package/dist-esm/lib/editor/bindings/BindingUtil.mjs +1 -0
  122. package/dist-esm/lib/editor/bindings/BindingUtil.mjs.map +1 -1
  123. package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs +1 -0
  124. package/dist-esm/lib/editor/managers/ClickManager/ClickManager.mjs.map +1 -1
  125. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs +83 -0
  126. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs.map +7 -0
  127. package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs +1 -0
  128. package/dist-esm/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.mjs.map +1 -1
  129. package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs +1 -0
  130. package/dist-esm/lib/editor/managers/FocusManager/FocusManager.mjs.map +1 -1
  131. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs +2 -0
  132. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs.map +1 -1
  133. package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs +2 -0
  134. package/dist-esm/lib/editor/managers/HistoryManager/HistoryManager.mjs.map +1 -1
  135. package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs +12 -0
  136. package/dist-esm/lib/editor/managers/InputsManager/InputsManager.mjs.map +2 -2
  137. package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs +1 -0
  138. package/dist-esm/lib/editor/managers/ScribbleManager/ScribbleManager.mjs.map +1 -1
  139. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs +1 -0
  140. package/dist-esm/lib/editor/managers/SnapManager/BoundsSnaps.mjs.map +1 -1
  141. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +1 -0
  142. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +1 -1
  143. package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs +2 -1
  144. package/dist-esm/lib/editor/managers/SnapManager/SnapManager.mjs.map +2 -2
  145. package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs +1 -0
  146. package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs.map +1 -1
  147. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +1 -0
  148. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +1 -1
  149. package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs +1 -0
  150. package/dist-esm/lib/editor/managers/ThemeManager/ThemeManager.mjs.map +1 -1
  151. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +14 -0
  152. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +2 -2
  153. package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs +1 -0
  154. package/dist-esm/lib/editor/managers/TickManager/TickManager.mjs.map +1 -1
  155. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +2 -0
  156. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +1 -1
  157. package/dist-esm/lib/editor/overlays/OverlayManager.mjs +136 -0
  158. package/dist-esm/lib/editor/overlays/OverlayManager.mjs.map +7 -0
  159. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs +72 -0
  160. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs.map +7 -0
  161. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs +141 -0
  162. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs.map +7 -0
  163. package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs +19 -0
  164. package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs.map +7 -0
  165. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs +59 -0
  166. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +7 -0
  167. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +36 -23
  168. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  169. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +32 -2
  170. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
  171. package/dist-esm/lib/editor/tools/StateNode.mjs +1 -0
  172. package/dist-esm/lib/editor/tools/StateNode.mjs.map +1 -1
  173. package/dist-esm/lib/editor/types/event-types.mjs.map +2 -2
  174. package/dist-esm/lib/exports/ExportDelay.mjs +1 -0
  175. package/dist-esm/lib/exports/ExportDelay.mjs.map +1 -1
  176. package/dist-esm/lib/exports/StyleEmbedder.mjs +1 -0
  177. package/dist-esm/lib/exports/StyleEmbedder.mjs.map +1 -1
  178. package/dist-esm/lib/exports/fetchCache.mjs +2 -2
  179. package/dist-esm/lib/exports/fetchCache.mjs.map +2 -2
  180. package/dist-esm/lib/exports/getSvgJsx.mjs +2 -1
  181. package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
  182. package/dist-esm/lib/hooks/EditorComponentsContext.mjs.map +2 -2
  183. package/dist-esm/lib/hooks/useCanvasEvents.mjs +25 -4
  184. package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
  185. package/dist-esm/lib/hooks/useEditorComponents.mjs +0 -28
  186. package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
  187. package/dist-esm/lib/hooks/usePeerIds.mjs +2 -40
  188. package/dist-esm/lib/hooks/usePeerIds.mjs.map +2 -2
  189. package/dist-esm/lib/hooks/useShapeCulling.mjs +2 -1
  190. package/dist-esm/lib/hooks/useShapeCulling.mjs.map +2 -2
  191. package/dist-esm/lib/options.mjs +1 -0
  192. package/dist-esm/lib/options.mjs.map +2 -2
  193. package/dist-esm/lib/primitives/Vec.mjs +3 -0
  194. package/dist-esm/lib/primitives/Vec.mjs.map +1 -1
  195. package/dist-esm/lib/primitives/geometry/Circle2d.mjs +1 -0
  196. package/dist-esm/lib/primitives/geometry/Circle2d.mjs.map +1 -1
  197. package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs +1 -0
  198. package/dist-esm/lib/primitives/geometry/Ellipse2d.mjs.map +1 -1
  199. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +2 -0
  200. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +1 -1
  201. package/dist-esm/lib/primitives/geometry/Stadium2d.mjs +1 -0
  202. package/dist-esm/lib/primitives/geometry/Stadium2d.mjs.map +1 -1
  203. package/dist-esm/lib/utils/EditorAtom.mjs +2 -0
  204. package/dist-esm/lib/utils/EditorAtom.mjs.map +1 -1
  205. package/dist-esm/lib/utils/reparenting.mjs +20 -7
  206. package/dist-esm/lib/utils/reparenting.mjs.map +2 -2
  207. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +5 -0
  208. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
  209. package/dist-esm/version.mjs +4 -4
  210. package/dist-esm/version.mjs.map +1 -1
  211. package/editor.css +4 -243
  212. package/package.json +7 -7
  213. package/src/index.ts +18 -39
  214. package/src/lib/TldrawEditor.tsx +9 -0
  215. package/src/lib/components/MenuClickCapture.tsx +124 -64
  216. package/src/lib/components/default-components/CanvasOverlays.tsx +208 -0
  217. package/src/lib/components/default-components/DefaultCanvas.tsx +51 -322
  218. package/src/lib/editor/Editor.test.ts +3 -1
  219. package/src/lib/editor/Editor.ts +167 -38
  220. package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts +98 -0
  221. package/src/lib/editor/managers/InputsManager/InputsManager.ts +12 -0
  222. package/src/lib/editor/managers/SnapManager/SnapManager.test.ts +13 -2
  223. package/src/lib/editor/managers/SnapManager/SnapManager.ts +1 -1
  224. package/src/lib/editor/managers/ThemeManager/defaultThemes.ts +14 -0
  225. package/src/lib/editor/overlays/OverlayManager.ts +183 -0
  226. package/src/lib/editor/overlays/OverlayUtil.ts +143 -0
  227. package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts +216 -0
  228. package/src/lib/editor/overlays/getOverlayDisplayValues.ts +51 -0
  229. package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +128 -0
  230. package/src/lib/editor/shapes/ShapeUtil.ts +45 -26
  231. package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +40 -3
  232. package/src/lib/editor/types/event-types.ts +2 -0
  233. package/src/lib/exports/fetchCache.ts +2 -4
  234. package/src/lib/exports/getSvgJsx.test.ts +3 -1
  235. package/src/lib/exports/getSvgJsx.tsx +2 -1
  236. package/src/lib/hooks/EditorComponentsContext.tsx +0 -27
  237. package/src/lib/hooks/useCanvasEvents.ts +45 -3
  238. package/src/lib/hooks/useEditorComponents.tsx +0 -28
  239. package/src/lib/hooks/usePeerIds.ts +6 -55
  240. package/src/lib/hooks/useShapeCulling.tsx +3 -1
  241. package/src/lib/options.ts +7 -0
  242. package/src/lib/utils/reparenting.ts +22 -9
  243. package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -0
  244. package/src/version.ts +4 -4
  245. package/dist-cjs/lib/components/GeometryDebuggingView.js +0 -115
  246. package/dist-cjs/lib/components/GeometryDebuggingView.js.map +0 -7
  247. package/dist-cjs/lib/components/LiveCollaborators.js +0 -151
  248. package/dist-cjs/lib/components/LiveCollaborators.js.map +0 -7
  249. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +0 -227
  250. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map +0 -7
  251. package/dist-cjs/lib/components/default-components/DefaultBrush.js +0 -38
  252. package/dist-cjs/lib/components/default-components/DefaultBrush.js.map +0 -7
  253. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +0 -71
  254. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +0 -7
  255. package/dist-cjs/lib/components/default-components/DefaultCursor.js +0 -59
  256. package/dist-cjs/lib/components/default-components/DefaultCursor.js.map +0 -7
  257. package/dist-cjs/lib/components/default-components/DefaultHandle.js +0 -56
  258. package/dist-cjs/lib/components/default-components/DefaultHandle.js.map +0 -7
  259. package/dist-cjs/lib/components/default-components/DefaultHandles.js +0 -28
  260. package/dist-cjs/lib/components/default-components/DefaultHandles.js.map +0 -7
  261. package/dist-cjs/lib/components/default-components/DefaultScribble.js +0 -51
  262. package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +0 -7
  263. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js +0 -69
  264. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js.map +0 -7
  265. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +0 -107
  266. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +0 -7
  267. package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js +0 -28
  268. package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js.map +0 -7
  269. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js +0 -101
  270. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js.map +0 -7
  271. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +0 -170
  272. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js.map +0 -7
  273. package/dist-cjs/lib/hooks/useHandleEvents.js +0 -100
  274. package/dist-cjs/lib/hooks/useHandleEvents.js.map +0 -7
  275. package/dist-cjs/lib/hooks/useSelectionEvents.js +0 -98
  276. package/dist-cjs/lib/hooks/useSelectionEvents.js.map +0 -7
  277. package/dist-esm/lib/components/GeometryDebuggingView.mjs +0 -95
  278. package/dist-esm/lib/components/GeometryDebuggingView.mjs.map +0 -7
  279. package/dist-esm/lib/components/LiveCollaborators.mjs +0 -134
  280. package/dist-esm/lib/components/LiveCollaborators.mjs.map +0 -7
  281. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +0 -207
  282. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs.map +0 -7
  283. package/dist-esm/lib/components/default-components/DefaultBrush.mjs +0 -18
  284. package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map +0 -7
  285. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +0 -41
  286. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +0 -7
  287. package/dist-esm/lib/components/default-components/DefaultCursor.mjs +0 -29
  288. package/dist-esm/lib/components/default-components/DefaultCursor.mjs.map +0 -7
  289. package/dist-esm/lib/components/default-components/DefaultHandle.mjs +0 -26
  290. package/dist-esm/lib/components/default-components/DefaultHandle.mjs.map +0 -7
  291. package/dist-esm/lib/components/default-components/DefaultHandles.mjs +0 -8
  292. package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +0 -7
  293. package/dist-esm/lib/components/default-components/DefaultScribble.mjs +0 -21
  294. package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +0 -7
  295. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs +0 -39
  296. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs.map +0 -7
  297. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +0 -77
  298. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +0 -7
  299. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs +0 -8
  300. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map +0 -7
  301. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs +0 -81
  302. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs.map +0 -7
  303. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs +0 -142
  304. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs.map +0 -7
  305. package/dist-esm/lib/hooks/useHandleEvents.mjs +0 -70
  306. package/dist-esm/lib/hooks/useHandleEvents.mjs.map +0 -7
  307. package/dist-esm/lib/hooks/useSelectionEvents.mjs +0 -78
  308. package/dist-esm/lib/hooks/useSelectionEvents.mjs.map +0 -7
  309. package/src/lib/components/GeometryDebuggingView.tsx +0 -108
  310. package/src/lib/components/LiveCollaborators.tsx +0 -174
  311. package/src/lib/components/default-components/CanvasShapeIndicators.tsx +0 -289
  312. package/src/lib/components/default-components/DefaultBrush.tsx +0 -35
  313. package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +0 -52
  314. package/src/lib/components/default-components/DefaultCursor.tsx +0 -59
  315. package/src/lib/components/default-components/DefaultHandle.tsx +0 -42
  316. package/src/lib/components/default-components/DefaultHandles.tsx +0 -15
  317. package/src/lib/components/default-components/DefaultScribble.tsx +0 -31
  318. package/src/lib/components/default-components/DefaultSelectionForeground.tsx +0 -50
  319. package/src/lib/components/default-components/DefaultShapeIndicator.tsx +0 -104
  320. package/src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx +0 -9
  321. package/src/lib/components/default-components/DefaultShapeIndicators.tsx +0 -116
  322. package/src/lib/components/default-components/DefaultSnapIndictor.tsx +0 -174
  323. package/src/lib/hooks/useHandleEvents.ts +0 -88
  324. package/src/lib/hooks/useSelectionEvents.ts +0 -97
@@ -1,7 +1,7 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
2
  import { react } from "@tldraw/state";
3
3
  import { useQuickReactor, useValue } from "@tldraw/state-react";
4
- import { dedupe, modulate, objectMapValues } from "@tldraw/utils";
4
+ import { modulate, objectMapValues } from "@tldraw/utils";
5
5
  import classNames from "classnames";
6
6
  import { Fragment as Fragment2, useEffect, useRef, useState } from "react";
7
7
  import { tlenv } from "../../globals/environment.mjs";
@@ -13,32 +13,41 @@ import { useDocumentEvents } from "../../hooks/useDocumentEvents.mjs";
13
13
  import { useEditor } from "../../hooks/useEditor.mjs";
14
14
  import { useFixSafariDoubleTapZoomPencilEvents } from "../../hooks/useFixSafariDoubleTapZoomPencilEvents.mjs";
15
15
  import { useGestureEvents } from "../../hooks/useGestureEvents.mjs";
16
- import { useHandleEvents } from "../../hooks/useHandleEvents.mjs";
17
- import { useSharedSafeId } from "../../hooks/useSafeId.mjs";
18
16
  import { useScreenBounds } from "../../hooks/useScreenBounds.mjs";
19
17
  import { ShapeCullingProvider, useShapeCulling } from "../../hooks/useShapeCulling.mjs";
20
- import { Mat } from "../../primitives/Mat.mjs";
21
18
  import { toDomPrecision } from "../../primitives/utils.mjs";
22
- import { Vec } from "../../primitives/Vec.mjs";
23
19
  import { debugFlags } from "../../utils/debug-flags.mjs";
24
20
  import { setStyleProperty } from "../../utils/dom.mjs";
25
- import { GeometryDebuggingView } from "../GeometryDebuggingView.mjs";
26
- import { LiveCollaborators } from "../LiveCollaborators.mjs";
27
21
  import { MenuClickCapture } from "../MenuClickCapture.mjs";
28
22
  import { Shape } from "../Shape.mjs";
29
- import { CanvasShapeIndicators } from "./CanvasShapeIndicators.mjs";
23
+ import { CanvasOverlays } from "./CanvasOverlays.mjs";
30
24
  function DefaultCanvas({ className }) {
31
25
  const editor = useEditor();
32
- const { SelectionBackground, Background, SvgDefs, ShapeIndicators } = useEditorComponents();
26
+ const { SelectionBackground, Background, SvgDefs } = useEditorComponents();
33
27
  const rCanvas = useRef(null);
34
28
  const rHtmlLayer = useRef(null);
35
- const rHtmlLayer2 = useRef(null);
36
29
  const container = useContainer();
37
30
  useScreenBounds(rCanvas);
38
31
  useDocumentEvents();
39
32
  useCoarsePointer();
40
33
  useGestureEvents(rCanvas);
41
34
  useFixSafariDoubleTapZoomPencilEvents(rCanvas);
35
+ useQuickReactor(
36
+ "update canvas state data attributes",
37
+ () => {
38
+ const canvas = rCanvas.current;
39
+ if (!canvas) return;
40
+ canvas.setAttribute(
41
+ "data-iseditinganything",
42
+ editor.getEditingShapeId() === null ? "false" : "true"
43
+ );
44
+ canvas.setAttribute(
45
+ "data-isselectinganything",
46
+ editor.getSelectedShapeIds().length === 0 ? "false" : "true"
47
+ );
48
+ },
49
+ [editor]
50
+ );
42
51
  const rMemoizedStuff = useRef({ lodDisableTextOutline: false, allowTextOutline: true });
43
52
  useQuickReactor(
44
53
  "position layers",
@@ -61,7 +70,6 @@ function DefaultCanvas({ className }) {
61
70
  x + offset
62
71
  )}px,${toDomPrecision(y + offset)}px)`;
63
72
  setStyleProperty(rHtmlLayer.current, "transform", transform);
64
- setStyleProperty(rHtmlLayer2.current, "transform", transform);
65
73
  },
66
74
  [editor, container]
67
75
  );
@@ -83,217 +91,63 @@ function DefaultCanvas({ className }) {
83
91
  [editor]
84
92
  );
85
93
  const hideShapes = useValue("debug_shapes", () => debugFlags.hideShapes.get(), [debugFlags]);
86
- const debugGeometry = useValue("debug_geometry", () => debugFlags.debugGeometry.get(), [
87
- debugFlags
88
- ]);
89
- const isEditingAnything = useValue(
90
- "isEditingAnything",
91
- () => editor.getEditingShapeId() !== null,
92
- [editor]
93
- );
94
- const isSelectingAnything = useValue(
95
- "isSelectingAnything",
96
- () => !!editor.getSelectedShapeIds().length,
97
- [editor]
98
- );
94
+ const isGridMode = useValue("isGridMode", () => editor.getInstanceState().isGridMode, [editor]);
95
+ const { Grid } = useEditorComponents();
99
96
  return /* @__PURE__ */ jsxs(Fragment, { children: [
100
97
  /* @__PURE__ */ jsxs(
101
98
  "div",
102
99
  {
103
100
  ref: rCanvas,
104
101
  draggable: false,
105
- "data-iseditinganything": isEditingAnything,
106
- "data-isselectinganything": isSelectingAnything,
107
102
  className: classNames("tl-canvas", className),
108
103
  "data-testid": "canvas",
109
104
  ...events,
110
105
  children: [
111
106
  /* @__PURE__ */ jsx("svg", { className: "tl-svg-context", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("defs", { children: [
112
107
  shapeSvgDefs,
113
- /* @__PURE__ */ jsx(CursorDef, {}),
114
- /* @__PURE__ */ jsx(CollaboratorHintDef, {}),
115
108
  SvgDefs && /* @__PURE__ */ jsx(SvgDefs, {})
116
109
  ] }) }),
117
110
  Background && /* @__PURE__ */ jsx("div", { className: "tl-background__wrapper", children: /* @__PURE__ */ jsx(Background, {}) }),
118
- /* @__PURE__ */ jsx(GridWrapper, {}),
111
+ isGridMode && Grid && /* @__PURE__ */ jsx(GridWrapper, {}),
119
112
  /* @__PURE__ */ jsxs("div", { ref: rHtmlLayer, className: "tl-html-layer tl-shapes", draggable: false, children: [
120
113
  /* @__PURE__ */ jsx(OnTheCanvasWrapper, {}),
121
114
  SelectionBackground && /* @__PURE__ */ jsx(SelectionBackgroundWrapper, {}),
122
- hideShapes ? null : /* @__PURE__ */ jsx(ShapesLayer, {})
123
- ] }),
124
- /* @__PURE__ */ jsxs("div", { className: "tl-overlays", children: [
125
- /* @__PURE__ */ jsx(CanvasShapeIndicators, {}),
126
- /* @__PURE__ */ jsxs("div", { ref: rHtmlLayer2, className: "tl-html-layer", children: [
127
- debugGeometry ? /* @__PURE__ */ jsx(GeometryDebuggingView, {}) : null,
128
- /* @__PURE__ */ jsx(BrushWrapper, {}),
129
- /* @__PURE__ */ jsx(ScribbleWrapper, {}),
130
- /* @__PURE__ */ jsx(ZoomBrushWrapper, {}),
131
- ShapeIndicators && /* @__PURE__ */ jsx(ShapeIndicators, {}),
132
- /* @__PURE__ */ jsx(HintedShapeIndicator, {}),
133
- /* @__PURE__ */ jsx(SnapIndicatorWrapper, {}),
134
- /* @__PURE__ */ jsx(SelectionForegroundWrapper, {}),
135
- /* @__PURE__ */ jsx(HandlesWrapper, {}),
136
- /* @__PURE__ */ jsx(OverlaysWrapper, {}),
137
- /* @__PURE__ */ jsx(LiveCollaborators, {})
138
- ] })
115
+ hideShapes ? null : /* @__PURE__ */ jsx(ShapesLayer, { canvasRef: rCanvas })
139
116
  ] }),
117
+ /* @__PURE__ */ jsx(CanvasOverlays, {}),
140
118
  /* @__PURE__ */ jsx(MovingCameraHitTestBlocker, {})
141
119
  ]
142
120
  }
143
121
  ),
144
- /* @__PURE__ */ jsx(
145
- "div",
146
- {
147
- className: "tl-canvas__in-front",
148
- onPointerDown: editor.markEventAsHandled,
149
- onPointerUp: editor.markEventAsHandled,
150
- onTouchStart: editor.markEventAsHandled,
151
- onTouchEnd: editor.markEventAsHandled,
152
- children: /* @__PURE__ */ jsx(InFrontOfTheCanvasWrapper, {})
153
- }
154
- ),
122
+ /* @__PURE__ */ jsx(InFrontOfTheCanvasWrapper, {}),
155
123
  /* @__PURE__ */ jsx(MenuClickCapture, {})
156
124
  ] });
157
125
  }
158
126
  function InFrontOfTheCanvasWrapper() {
127
+ const editor = useEditor();
159
128
  const { InFrontOfTheCanvas } = useEditorComponents();
160
129
  if (!InFrontOfTheCanvas) return null;
161
- return /* @__PURE__ */ jsx(InFrontOfTheCanvas, {});
130
+ return /* @__PURE__ */ jsx(
131
+ "div",
132
+ {
133
+ className: "tl-canvas__in-front",
134
+ onPointerDown: editor.markEventAsHandled,
135
+ onPointerUp: editor.markEventAsHandled,
136
+ onTouchStart: editor.markEventAsHandled,
137
+ onTouchEnd: editor.markEventAsHandled,
138
+ children: /* @__PURE__ */ jsx(InFrontOfTheCanvas, {})
139
+ }
140
+ );
162
141
  }
163
142
  function GridWrapper() {
164
143
  const editor = useEditor();
165
144
  const gridSize = useValue("gridSize", () => editor.getDocumentSettings().gridSize, [editor]);
166
145
  const { x, y, z } = useValue("camera", () => editor.getCamera(), [editor]);
167
- const isGridMode = useValue("isGridMode", () => editor.getInstanceState().isGridMode, [editor]);
168
146
  const { Grid } = useEditorComponents();
169
- if (!(Grid && isGridMode)) return null;
147
+ if (!Grid) return null;
170
148
  return /* @__PURE__ */ jsx(Grid, { x, y, z, size: gridSize });
171
149
  }
172
- function ScribbleWrapper() {
173
- const editor = useEditor();
174
- const scribbles = useValue("scribbles", () => editor.getInstanceState().scribbles, [editor]);
175
- const zoomLevel = useValue("zoomLevel", () => editor.getEfficientZoomLevel(), [editor]);
176
- const { Scribble } = useEditorComponents();
177
- if (!(Scribble && scribbles.length)) return null;
178
- return scribbles.map((scribble) => /* @__PURE__ */ jsx(Scribble, { className: "tl-user-scribble", scribble, zoom: zoomLevel }, scribble.id));
179
- }
180
- function BrushWrapper() {
181
- const editor = useEditor();
182
- const brush = useValue("brush", () => editor.getInstanceState().brush, [editor]);
183
- const { Brush } = useEditorComponents();
184
- if (!(Brush && brush)) return null;
185
- return /* @__PURE__ */ jsx(Brush, { className: "tl-user-brush", brush });
186
- }
187
- function ZoomBrushWrapper() {
188
- const editor = useEditor();
189
- const zoomBrush = useValue("zoomBrush", () => editor.getInstanceState().zoomBrush, [editor]);
190
- const { ZoomBrush } = useEditorComponents();
191
- if (!(ZoomBrush && zoomBrush)) return null;
192
- return /* @__PURE__ */ jsx(ZoomBrush, { className: "tl-user-brush tl-zoom-brush", brush: zoomBrush });
193
- }
194
- function SnapIndicatorWrapper() {
195
- const editor = useEditor();
196
- const lines = useValue("snapLines", () => editor.snaps.getIndicators(), [editor]);
197
- const zoomLevel = useValue("zoomLevel", () => editor.getEfficientZoomLevel(), [editor]);
198
- const { SnapIndicator } = useEditorComponents();
199
- if (!(SnapIndicator && lines.length > 0)) return null;
200
- return lines.map((line) => /* @__PURE__ */ jsx(SnapIndicator, { className: "tl-user-snapline", line, zoom: zoomLevel }, line.id));
201
- }
202
- function HandlesWrapper() {
203
- const editor = useEditor();
204
- const shapeIdWithHandles = useValue(
205
- "handles shapeIdWithHandles",
206
- () => {
207
- const { isReadonly, isChangingStyle } = editor.getInstanceState();
208
- if (isReadonly || isChangingStyle) return false;
209
- const onlySelectedShape = editor.getOnlySelectedShape();
210
- if (!onlySelectedShape) return false;
211
- const handles = editor.getShapeHandles(onlySelectedShape);
212
- if (!handles) return false;
213
- return onlySelectedShape.id;
214
- },
215
- [editor]
216
- );
217
- if (!shapeIdWithHandles) return null;
218
- return /* @__PURE__ */ jsx(HandlesWrapperInner, { shapeId: shapeIdWithHandles });
219
- }
220
- function HandlesWrapperInner({ shapeId }) {
221
- const editor = useEditor();
222
- const { Handles } = useEditorComponents();
223
- const zoomLevel = useValue("zoomLevel", () => editor.getEfficientZoomLevel(), [editor]);
224
- const isCoarse = useValue("coarse pointer", () => editor.getInstanceState().isCoarsePointer, [
225
- editor
226
- ]);
227
- const transform = useValue("handles transform", () => editor.getShapePageTransform(shapeId), [
228
- editor,
229
- shapeId
230
- ]);
231
- const handles = useValue(
232
- "handles",
233
- () => {
234
- const handles2 = editor.getShapeHandles(shapeId);
235
- if (!handles2) return null;
236
- const minDistBetweenVirtualHandlesAndRegularHandles = (isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoomLevel * 2;
237
- return handles2.filter(
238
- (handle) => (
239
- // if the handle isn't a virtual handle, we'll display it
240
- (// but for virtual handles, we'll only display them if they're far enough away from vertex handles
241
- handle.type !== "virtual" || !handles2.some(
242
- (h) => (
243
- // skip the handle we're checking against
244
- (// and check that their distance isn't below the minimum distance
245
- h !== handle && // only check against vertex handles
246
- h.type === "vertex" && Vec.Dist(handle, h) < minDistBetweenVirtualHandlesAndRegularHandles)
247
- )
248
- ))
249
- )
250
- ).sort((a) => a.type === "vertex" ? 1 : -1);
251
- },
252
- [editor, zoomLevel, isCoarse, shapeId]
253
- );
254
- const isHidden = useValue("isHidden", () => editor.isShapeHidden(shapeId), [editor, shapeId]);
255
- if (!Handles || !handles || !transform || isHidden) {
256
- return null;
257
- }
258
- return /* @__PURE__ */ jsx(Handles, { children: /* @__PURE__ */ jsx("g", { transform: Mat.toCssString(transform), children: handles.map((handle) => {
259
- return /* @__PURE__ */ jsx(
260
- HandleWrapper,
261
- {
262
- shapeId,
263
- handle,
264
- zoom: zoomLevel,
265
- isCoarse
266
- },
267
- handle.id
268
- );
269
- }) }) });
270
- }
271
- function HandleWrapper({
272
- shapeId,
273
- handle,
274
- zoom,
275
- isCoarse
276
- }) {
277
- const events = useHandleEvents(shapeId, handle.id);
278
- const { Handle } = useEditorComponents();
279
- if (!Handle) return null;
280
- return /* @__PURE__ */ jsx(
281
- "g",
282
- {
283
- role: "button",
284
- "aria-label": handle.label || "handle",
285
- transform: `translate(${handle.x}, ${handle.y})`,
286
- ...events,
287
- children: /* @__PURE__ */ jsx(Handle, { shapeId, handle, zoom, isCoarse })
288
- }
289
- );
290
- }
291
- function OverlaysWrapper() {
292
- const { Overlays } = useEditorComponents();
293
- if (!Overlays) return null;
294
- return /* @__PURE__ */ jsx("div", { className: "tl-custom-overlays tl-overlays__item", children: /* @__PURE__ */ jsx(Overlays, {}) });
295
- }
296
- function ShapesLayer() {
150
+ function ShapesLayer({ canvasRef }) {
297
151
  const editor = useEditor();
298
152
  const debugSvg = useValue("debug svg", () => debugFlags.debugSvg.get(), [debugFlags]);
299
153
  const renderingShapes = useValue("rendering shapes", () => editor.getRenderingShapes(), [editor]);
@@ -305,10 +159,10 @@ function ShapesLayer() {
305
159
  ] }, result.id + "_fragment") : /* @__PURE__ */ jsx(Shape, { ...result }, result.id + "_shape")
306
160
  ),
307
161
  /* @__PURE__ */ jsx(CullingController, {}),
308
- tlenv.isSafari && /* @__PURE__ */ jsx(ReflowIfNeeded, {})
162
+ tlenv.isSafari && /* @__PURE__ */ jsx(ReflowIfNeeded, { canvasRef })
309
163
  ] });
310
164
  }
311
- function ReflowIfNeeded() {
165
+ function ReflowIfNeeded({ canvasRef }) {
312
166
  const editor = useEditor();
313
167
  const culledShapesRef = useRef(/* @__PURE__ */ new Set());
314
168
  useQuickReactor(
@@ -317,11 +171,11 @@ function ReflowIfNeeded() {
317
171
  const culledShapes = editor.getCulledShapes();
318
172
  if (culledShapesRef.current === culledShapes) return;
319
173
  culledShapesRef.current = culledShapes;
320
- const canvas = editor.getContainerDocument().getElementsByClassName("tl-canvas");
321
- if (canvas.length === 0) return;
322
- const _height = canvas[0].offsetHeight;
174
+ const canvas = canvasRef.current;
175
+ if (!canvas) return;
176
+ const _height = canvas.offsetHeight;
323
177
  },
324
- [editor]
178
+ [editor, canvasRef]
325
179
  );
326
180
  return null;
327
181
  }
@@ -338,45 +192,6 @@ function CullingController() {
338
192
  );
339
193
  return null;
340
194
  }
341
- function HintedShapeIndicator() {
342
- const editor = useEditor();
343
- const { ShapeIndicator } = useEditorComponents();
344
- const ids = useValue(
345
- "hinting shape ids without canvas indicator",
346
- () => {
347
- return dedupe(editor.getHintingShapeIds()).filter((id) => {
348
- const shape = editor.getShape(id);
349
- if (!shape) return false;
350
- const util = editor.getShapeUtil(shape);
351
- return util.useLegacyIndicator();
352
- });
353
- },
354
- [editor]
355
- );
356
- if (!ids.length) return null;
357
- if (!ShapeIndicator) return null;
358
- return ids.map((id) => /* @__PURE__ */ jsx(ShapeIndicator, { className: "tl-user-indicator__hint", shapeId: id }, id + "_hinting"));
359
- }
360
- function CursorDef() {
361
- return /* @__PURE__ */ jsxs("g", { id: useSharedSafeId("cursor"), children: [
362
- /* @__PURE__ */ jsxs("g", { fill: "rgba(0,0,0,.2)", transform: "translate(-11,-11)", children: [
363
- /* @__PURE__ */ jsx("path", { d: "m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" }),
364
- /* @__PURE__ */ jsx("path", { d: "m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" })
365
- ] }),
366
- /* @__PURE__ */ jsxs("g", { fill: "white", transform: "translate(-12,-12)", children: [
367
- /* @__PURE__ */ jsx("path", { d: "m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" }),
368
- /* @__PURE__ */ jsx("path", { d: "m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" })
369
- ] }),
370
- /* @__PURE__ */ jsxs("g", { fill: "currentColor", transform: "translate(-12,-12)", children: [
371
- /* @__PURE__ */ jsx("path", { d: "m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z" }),
372
- /* @__PURE__ */ jsx("path", { d: "m13 10.814v11.188l2.969-2.866.428-.139h4.768z" })
373
- ] })
374
- ] });
375
- }
376
- function CollaboratorHintDef() {
377
- const cursorHintId = useSharedSafeId("cursor_hint");
378
- return /* @__PURE__ */ jsx("path", { id: cursorHintId, fill: "currentColor", d: "M -2,-5 2,0 -2,5 Z" });
379
- }
380
195
  function DebugSvgCopy({ id, mode }) {
381
196
  const editor = useEditor();
382
197
  const [image, setImage] = useState(null);
@@ -394,7 +209,8 @@ function DebugSvgCopy({ id, mode }) {
394
209
  const unsubscribe = react("shape to svg", async () => {
395
210
  const renderId = Math.random();
396
211
  latest = renderId;
397
- const isSingleFrame = editor.isShapeOfType(id, "frame");
212
+ const shape = editor.getShape(id);
213
+ const isSingleFrame = !!shape && editor.isShapeFrameLike(shape);
398
214
  const padding = isSingleFrame ? 0 : 10;
399
215
  let bounds = editor.getShapePageBounds(id);
400
216
  if (!bounds) return;
@@ -448,24 +264,6 @@ function DebugSvgCopy({ id, mode }) {
448
264
  }
449
265
  );
450
266
  }
451
- function SelectionForegroundWrapper() {
452
- const editor = useEditor();
453
- const selectionRotation = useValue(
454
- "selection rotation",
455
- function getSelectionRotation() {
456
- return editor.getSelectionRotation();
457
- },
458
- [editor]
459
- );
460
- const selectionBounds = useValue(
461
- "selection bounds",
462
- () => editor.getSelectionRotatedPageBounds(),
463
- [editor]
464
- );
465
- const { SelectionForeground } = useEditorComponents();
466
- if (!selectionBounds || !SelectionForeground) return null;
467
- return /* @__PURE__ */ jsx(SelectionForeground, { bounds: selectionBounds, rotation: selectionRotation });
468
- }
469
267
  function SelectionBackgroundWrapper() {
470
268
  const editor = useEditor();
471
269
  const selectionRotation = useValue("selection rotation", () => editor.getSelectionRotation(), [
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/lib/components/default-components/DefaultCanvas.tsx"],
4
- "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useValue } from '@tldraw/state-react'\nimport { TLHandle, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe, modulate, objectMapValues } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { Fragment, JSX, useEffect, useRef, useState } from 'react'\nimport { tlenv } from '../../globals/environment'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useCanvasEvents } from '../../hooks/useCanvasEvents'\nimport { useCoarsePointer } from '../../hooks/useCoarsePointer'\nimport { useContainer } from '../../hooks/useContainer'\nimport { useDocumentEvents } from '../../hooks/useDocumentEvents'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'\nimport { useGestureEvents } from '../../hooks/useGestureEvents'\nimport { useHandleEvents } from '../../hooks/useHandleEvents'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useScreenBounds } from '../../hooks/useScreenBounds'\nimport { ShapeCullingProvider, useShapeCulling } from '../../hooks/useShapeCulling'\nimport { Box } from '../../primitives/Box'\nimport { Mat } from '../../primitives/Mat'\nimport { toDomPrecision } from '../../primitives/utils'\nimport { Vec } from '../../primitives/Vec'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { setStyleProperty } from '../../utils/dom'\nimport { GeometryDebuggingView } from '../GeometryDebuggingView'\nimport { LiveCollaborators } from '../LiveCollaborators'\nimport { MenuClickCapture } from '../MenuClickCapture'\nimport { Shape } from '../Shape'\nimport { CanvasShapeIndicators } from './CanvasShapeIndicators'\n\n/** @public */\nexport interface TLCanvasComponentProps {\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultCanvas({ className }: TLCanvasComponentProps) {\n\tconst editor = useEditor()\n\n\tconst { SelectionBackground, Background, SvgDefs, ShapeIndicators } = useEditorComponents()\n\n\tconst rCanvas = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer2 = useRef<HTMLDivElement>(null)\n\tconst container = useContainer()\n\n\tuseScreenBounds(rCanvas)\n\tuseDocumentEvents()\n\tuseCoarsePointer()\n\n\tuseGestureEvents(rCanvas)\n\tuseFixSafariDoubleTapZoomPencilEvents(rCanvas)\n\n\tconst rMemoizedStuff = useRef({ lodDisableTextOutline: false, allowTextOutline: true })\n\n\tuseQuickReactor(\n\t\t'position layers',\n\t\tfunction positionLayersWhenCameraMoves() {\n\t\t\tconst { x, y, z } = editor.getCamera()\n\n\t\t\t// This should only run once on first load\n\t\t\tif (rMemoizedStuff.current.allowTextOutline && tlenv.isSafari) {\n\t\t\t\tcontainer.style.setProperty('--tl-text-outline', 'none')\n\t\t\t\trMemoizedStuff.current.allowTextOutline = false\n\t\t\t}\n\n\t\t\t// And this should only run if we're not in Safari;\n\t\t\t// If we're below the lod distance for text shadows, turn them off\n\t\t\tif (\n\t\t\t\trMemoizedStuff.current.allowTextOutline &&\n\t\t\t\tz < editor.options.textShadowLod !== rMemoizedStuff.current.lodDisableTextOutline\n\t\t\t) {\n\t\t\t\tconst lodDisableTextOutline = z < editor.options.textShadowLod\n\t\t\t\tcontainer.style.setProperty(\n\t\t\t\t\t'--tl-text-outline',\n\t\t\t\t\tlodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`\n\t\t\t\t)\n\t\t\t\trMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline\n\t\t\t}\n\n\t\t\t// Because the html container has a width/height of 1px, we\n\t\t\t// need to create a small offset when zoomed to ensure that\n\t\t\t// the html container and svg container are lined up exactly.\n\t\t\tconst offset =\n\t\t\t\tz >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)\n\n\t\t\tconst transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(\n\t\t\t\tx + offset\n\t\t\t)}px,${toDomPrecision(y + offset)}px)`\n\n\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', transform)\n\t\t\tsetStyleProperty(rHtmlLayer2.current, 'transform', transform)\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tconst events = useCanvasEvents()\n\n\tconst shapeSvgDefs = useValue(\n\t\t'shapeSvgDefs',\n\t\t() => {\n\t\t\tconst shapeSvgDefsByKey = new Map<string, JSX.Element>()\n\t\t\tfor (const util of objectMapValues(editor.shapeUtils)) {\n\t\t\t\tif (!util) return\n\t\t\t\tconst defs = util.getCanvasSvgDefs()\n\t\t\t\tfor (const { key, component: Component } of defs) {\n\t\t\t\t\tif (shapeSvgDefsByKey.has(key)) continue\n\t\t\t\t\tshapeSvgDefsByKey.set(key, <Component key={key} />)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn [...shapeSvgDefsByKey.values()]\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])\n\tconst debugGeometry = useValue('debug_geometry', () => debugFlags.debugGeometry.get(), [\n\t\tdebugFlags,\n\t])\n\tconst isEditingAnything = useValue(\n\t\t'isEditingAnything',\n\t\t() => editor.getEditingShapeId() !== null,\n\t\t[editor]\n\t)\n\tconst isSelectingAnything = useValue(\n\t\t'isSelectingAnything',\n\t\t() => !!editor.getSelectedShapeIds().length,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={rCanvas}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-iseditinganything={isEditingAnything}\n\t\t\t\tdata-isselectinganything={isSelectingAnything}\n\t\t\t\tclassName={classNames('tl-canvas', className)}\n\t\t\t\tdata-testid=\"canvas\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<svg className=\"tl-svg-context\" aria-hidden=\"true\">\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t{shapeSvgDefs}\n\t\t\t\t\t\t<CursorDef />\n\t\t\t\t\t\t<CollaboratorHintDef />\n\t\t\t\t\t\t{SvgDefs && <SvgDefs />}\n\t\t\t\t\t</defs>\n\t\t\t\t</svg>\n\t\t\t\t{Background && (\n\t\t\t\t\t<div className=\"tl-background__wrapper\">\n\t\t\t\t\t\t<Background />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<GridWrapper />\n\t\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer tl-shapes\" draggable={false}>\n\t\t\t\t\t<OnTheCanvasWrapper />\n\t\t\t\t\t{SelectionBackground && <SelectionBackgroundWrapper />}\n\t\t\t\t\t{hideShapes ? null : <ShapesLayer />}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"tl-overlays\">\n\t\t\t\t\t<CanvasShapeIndicators />\n\t\t\t\t\t<div ref={rHtmlLayer2} className=\"tl-html-layer\">\n\t\t\t\t\t\t{debugGeometry ? <GeometryDebuggingView /> : null}\n\t\t\t\t\t\t<BrushWrapper />\n\t\t\t\t\t\t<ScribbleWrapper />\n\t\t\t\t\t\t<ZoomBrushWrapper />\n\t\t\t\t\t\t{ShapeIndicators && <ShapeIndicators />}\n\t\t\t\t\t\t<HintedShapeIndicator />\n\t\t\t\t\t\t<SnapIndicatorWrapper />\n\t\t\t\t\t\t<SelectionForegroundWrapper />\n\t\t\t\t\t\t<HandlesWrapper />\n\t\t\t\t\t\t<OverlaysWrapper />\n\t\t\t\t\t\t<LiveCollaborators />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<MovingCameraHitTestBlocker />\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"tl-canvas__in-front\"\n\t\t\t\tonPointerDown={editor.markEventAsHandled}\n\t\t\t\tonPointerUp={editor.markEventAsHandled}\n\t\t\t\tonTouchStart={editor.markEventAsHandled}\n\t\t\t\tonTouchEnd={editor.markEventAsHandled}\n\t\t\t>\n\t\t\t\t<InFrontOfTheCanvasWrapper />\n\t\t\t</div>\n\t\t\t<MenuClickCapture />\n\t\t</>\n\t)\n}\n\nfunction InFrontOfTheCanvasWrapper() {\n\tconst { InFrontOfTheCanvas } = useEditorComponents()\n\tif (!InFrontOfTheCanvas) return null\n\treturn <InFrontOfTheCanvas />\n}\n\nfunction GridWrapper() {\n\tconst editor = useEditor()\n\tconst gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])\n\tconst { x, y, z } = useValue('camera', () => editor.getCamera(), [editor])\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\tconst { Grid } = useEditorComponents()\n\n\tif (!(Grid && isGridMode)) return null\n\n\treturn <Grid x={x} y={y} z={z} size={gridSize} />\n}\n\nfunction ScribbleWrapper() {\n\tconst editor = useEditor()\n\tconst scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\tconst { Scribble } = useEditorComponents()\n\n\tif (!(Scribble && scribbles.length)) return null\n\n\treturn scribbles.map((scribble) => (\n\t\t<Scribble key={scribble.id} className=\"tl-user-scribble\" scribble={scribble} zoom={zoomLevel} />\n\t))\n}\n\nfunction BrushWrapper() {\n\tconst editor = useEditor()\n\tconst brush = useValue('brush', () => editor.getInstanceState().brush, [editor])\n\tconst { Brush } = useEditorComponents()\n\n\tif (!(Brush && brush)) return null\n\n\treturn <Brush className=\"tl-user-brush\" brush={brush} />\n}\n\nfunction ZoomBrushWrapper() {\n\tconst editor = useEditor()\n\tconst zoomBrush = useValue('zoomBrush', () => editor.getInstanceState().zoomBrush, [editor])\n\tconst { ZoomBrush } = useEditorComponents()\n\n\tif (!(ZoomBrush && zoomBrush)) return null\n\n\treturn <ZoomBrush className=\"tl-user-brush tl-zoom-brush\" brush={zoomBrush} />\n}\n\nfunction SnapIndicatorWrapper() {\n\tconst editor = useEditor()\n\tconst lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\tconst { SnapIndicator } = useEditorComponents()\n\n\tif (!(SnapIndicator && lines.length > 0)) return null\n\n\treturn lines.map((line) => (\n\t\t<SnapIndicator key={line.id} className=\"tl-user-snapline\" line={line} zoom={zoomLevel} />\n\t))\n}\n\nfunction HandlesWrapper() {\n\tconst editor = useEditor()\n\n\t// We don't want this to update every time the shape changes\n\tconst shapeIdWithHandles = useValue(\n\t\t'handles shapeIdWithHandles',\n\t\t() => {\n\t\t\tconst { isReadonly, isChangingStyle } = editor.getInstanceState()\n\t\t\tif (isReadonly || isChangingStyle) return false\n\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\n\t\t\t// slightly redundant but saves us from updating the handles every time the shape changes\n\t\t\tconst handles = editor.getShapeHandles(onlySelectedShape)\n\t\t\tif (!handles) return false\n\n\t\t\treturn onlySelectedShape.id\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!shapeIdWithHandles) return null\n\n\treturn <HandlesWrapperInner shapeId={shapeIdWithHandles} />\n}\n\nfunction HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {\n\tconst editor = useEditor()\n\tconst { Handles } = useEditorComponents()\n\n\tconst zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])\n\n\tconst isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [\n\t\teditor,\n\t])\n\n\tconst transform = useValue('handles transform', () => editor.getShapePageTransform(shapeId), [\n\t\teditor,\n\t\tshapeId,\n\t])\n\n\tconst handles = useValue(\n\t\t'handles',\n\t\t() => {\n\t\t\tconst handles = editor.getShapeHandles(shapeId)\n\t\t\tif (!handles) return null\n\n\t\t\tconst minDistBetweenVirtualHandlesAndRegularHandles =\n\t\t\t\t((isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoomLevel) *\n\t\t\t\t2\n\n\t\t\treturn (\n\t\t\t\thandles\n\t\t\t\t\t.filter(\n\t\t\t\t\t\t(handle) =>\n\t\t\t\t\t\t\t// if the handle isn't a virtual handle, we'll display it\n\t\t\t\t\t\t\thandle.type !== 'virtual' ||\n\t\t\t\t\t\t\t// but for virtual handles, we'll only display them if they're far enough away from vertex handles\n\t\t\t\t\t\t\t!handles.some(\n\t\t\t\t\t\t\t\t(h) =>\n\t\t\t\t\t\t\t\t\t// skip the handle we're checking against\n\t\t\t\t\t\t\t\t\th !== handle &&\n\t\t\t\t\t\t\t\t\t// only check against vertex handles\n\t\t\t\t\t\t\t\t\th.type === 'vertex' &&\n\t\t\t\t\t\t\t\t\t// and check that their distance isn't below the minimum distance\n\t\t\t\t\t\t\t\t\tVec.Dist(handle, h) < minDistBetweenVirtualHandlesAndRegularHandles\n\t\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t\t// We want vertex handles in front of all other handles\n\t\t\t\t\t.sort((a) => (a.type === 'vertex' ? 1 : -1))\n\t\t\t)\n\t\t},\n\t\t[editor, zoomLevel, isCoarse, shapeId]\n\t)\n\n\tconst isHidden = useValue('isHidden', () => editor.isShapeHidden(shapeId), [editor, shapeId])\n\n\tif (!Handles || !handles || !transform || isHidden) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<Handles>\n\t\t\t<g transform={Mat.toCssString(transform)}>\n\t\t\t\t{handles.map((handle) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<HandleWrapper\n\t\t\t\t\t\t\tkey={handle.id}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\thandle={handle}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\tisCoarse={isCoarse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</g>\n\t\t</Handles>\n\t)\n}\n\nfunction HandleWrapper({\n\tshapeId,\n\thandle,\n\tzoom,\n\tisCoarse,\n}: {\n\tshapeId: TLShapeId\n\thandle: TLHandle\n\tzoom: number\n\tisCoarse: boolean\n}) {\n\tconst events = useHandleEvents(shapeId, handle.id)\n\tconst { Handle } = useEditorComponents()\n\n\tif (!Handle) return null\n\n\treturn (\n\t\t<g\n\t\t\trole=\"button\"\n\t\t\t// TODO(mime): handle.label needs to be required in the future.\n\t\t\taria-label={handle.label || 'handle'}\n\t\t\ttransform={`translate(${handle.x}, ${handle.y})`}\n\t\t\t{...events}\n\t\t>\n\t\t\t<Handle shapeId={shapeId} handle={handle} zoom={zoom} isCoarse={isCoarse} />\n\t\t</g>\n\t)\n}\n\nfunction OverlaysWrapper() {\n\tconst { Overlays } = useEditorComponents()\n\tif (!Overlays) return null\n\treturn (\n\t\t<div className=\"tl-custom-overlays tl-overlays__item\">\n\t\t\t<Overlays />\n\t\t</div>\n\t)\n}\n\nfunction ShapesLayer() {\n\tconst editor = useEditor()\n\tconst debugSvg = useValue('debug svg', () => debugFlags.debugSvg.get(), [debugFlags])\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn (\n\t\t<ShapeCullingProvider>\n\t\t\t{renderingShapes.map((result) =>\n\t\t\t\tdebugSvg ? (\n\t\t\t\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t\t\t\t<Shape {...result} />\n\t\t\t\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t\t\t\t</Fragment>\n\t\t\t\t) : (\n\t\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t\t)\n\t\t\t)}\n\t\t\t<CullingController />\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded />}\n\t\t</ShapeCullingProvider>\n\t)\n}\nfunction ReflowIfNeeded() {\n\tconst editor = useEditor()\n\tconst culledShapesRef = useRef<Set<TLShapeId>>(new Set())\n\tuseQuickReactor(\n\t\t'reflow for culled shapes',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tif (culledShapesRef.current === culledShapes) return\n\n\t\t\tculledShapesRef.current = culledShapes\n\t\t\tconst canvas = editor.getContainerDocument().getElementsByClassName('tl-canvas')\n\t\t\tif (canvas.length === 0) return\n\t\t\t// This causes a reflow\n\t\t\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n\t\t\tconst _height = (canvas[0] as HTMLDivElement).offsetHeight\n\t\t},\n\t\t[editor]\n\t)\n\treturn null\n}\n\n/**\n * Centralized culling controller that updates shape container visibility.\n * This single reactor replaces per-shape subscriptions for O(1) instead of O(N) subscriptions.\n */\nfunction CullingController() {\n\tconst editor = useEditor()\n\tconst { updateCulling } = useShapeCulling()\n\n\tuseQuickReactor(\n\t\t'update shape culling',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tupdateCulling(culledShapes)\n\t\t},\n\t\t[editor, updateCulling]\n\t)\n\n\treturn null\n}\n\nfunction HintedShapeIndicator() {\n\tconst editor = useEditor()\n\tconst { ShapeIndicator } = useEditorComponents()\n\n\tconst ids = useValue(\n\t\t'hinting shape ids without canvas indicator',\n\t\t() => {\n\t\t\t// Filter to only shapes that use legacy SVG indicators\n\t\t\treturn dedupe(editor.getHintingShapeIds()).filter((id) => {\n\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\tif (!shape) return false\n\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\treturn util.useLegacyIndicator()\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!ids.length) return null\n\tif (!ShapeIndicator) return null\n\n\treturn ids.map((id) => (\n\t\t<ShapeIndicator className=\"tl-user-indicator__hint\" shapeId={id} key={id + '_hinting'} />\n\t))\n}\n\nfunction CursorDef() {\n\treturn (\n\t\t<g id={useSharedSafeId('cursor')}>\n\t\t\t<g fill=\"rgba(0,0,0,.2)\" transform=\"translate(-11,-11)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"white\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z\" />\n\t\t\t\t<path d=\"m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z\" />\n\t\t\t</g>\n\t\t\t<g fill=\"currentColor\" transform=\"translate(-12,-12)\">\n\t\t\t\t<path d=\"m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z\" />\n\t\t\t\t<path d=\"m13 10.814v11.188l2.969-2.866.428-.139h4.768z\" />\n\t\t\t</g>\n\t\t</g>\n\t)\n}\n\nfunction CollaboratorHintDef() {\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\treturn <path id={cursorHintId} fill=\"currentColor\" d=\"M -2,-5 2,0 -2,5 Z\" />\n}\n\nfunction DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {\n\tconst editor = useEditor()\n\n\tconst [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)\n\n\tconst isInRoot = useValue(\n\t\t'is in root',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\treturn shape?.parentId === editor.getCurrentPageId()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tif (!isInRoot) return\n\n\t\tlet latest = null\n\t\tconst unsubscribe = react('shape to svg', async () => {\n\t\t\tconst renderId = Math.random()\n\t\t\tlatest = renderId\n\n\t\t\tconst isSingleFrame = editor.isShapeOfType(id, 'frame')\n\t\t\tconst padding = isSingleFrame ? 0 : 10\n\t\t\tlet bounds = editor.getShapePageBounds(id)\n\t\t\tif (!bounds) return\n\t\t\tbounds = bounds.clone().expandBy(padding)\n\n\t\t\tconst result = await editor.getSvgString([id], { padding })\n\n\t\t\tif (latest !== renderId || !result) return\n\n\t\t\tconst svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`\n\t\t\tsetImage({ src: svgDataUrl, bounds })\n\t\t})\n\n\t\treturn () => {\n\t\t\tlatest = null\n\t\t\tunsubscribe()\n\t\t}\n\t}, [editor, id, isInRoot])\n\n\tif (!isInRoot || !image) return null\n\n\tif (mode === 'iframe') {\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tsrc={image.src}\n\t\t\t\twidth={image.bounds.width}\n\t\t\t\theight={image.bounds.height}\n\t\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tborder: 'none',\n\t\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\t\toutline: '1px solid black',\n\t\t\t\t\tmaxWidth: 'none',\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\twidth={image.bounds.width}\n\t\t\theight={image.bounds.height}\n\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\toutline: '1px solid black',\n\t\t\t\tmaxWidth: 'none',\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction SelectionForegroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue(\n\t\t'selection rotation',\n\t\tfunction getSelectionRotation() {\n\t\t\treturn editor.getSelectionRotation()\n\t\t},\n\t\t[editor]\n\t)\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionForeground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionForeground) return null\n\treturn <SelectionForeground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction SelectionBackgroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [\n\t\teditor,\n\t])\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionBackground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionBackground) return null\n\treturn <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction OnTheCanvasWrapper() {\n\tconst { OnTheCanvas } = useEditorComponents()\n\tif (!OnTheCanvas) return null\n\treturn <OnTheCanvas />\n}\n\nfunction MovingCameraHitTestBlocker() {\n\tconst editor = useEditor()\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tl-hit-test-blocker', {\n\t\t\t\t'tl-hit-test-blocker__hidden': cameraState === 'idle',\n\t\t\t})}\n\t\t/>\n\t)\n}\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "handles"]
4
+ "sourcesContent": ["import { react } from '@tldraw/state'\nimport { useQuickReactor, useValue } from '@tldraw/state-react'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { modulate, objectMapValues } from '@tldraw/utils'\nimport classNames from 'classnames'\nimport { Fragment, JSX, useEffect, useRef, useState } from 'react'\nimport { tlenv } from '../../globals/environment'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useCanvasEvents } from '../../hooks/useCanvasEvents'\nimport { useCoarsePointer } from '../../hooks/useCoarsePointer'\nimport { useContainer } from '../../hooks/useContainer'\nimport { useDocumentEvents } from '../../hooks/useDocumentEvents'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'\nimport { useGestureEvents } from '../../hooks/useGestureEvents'\nimport { useScreenBounds } from '../../hooks/useScreenBounds'\nimport { ShapeCullingProvider, useShapeCulling } from '../../hooks/useShapeCulling'\nimport { Box } from '../../primitives/Box'\nimport { toDomPrecision } from '../../primitives/utils'\nimport { debugFlags } from '../../utils/debug-flags'\nimport { setStyleProperty } from '../../utils/dom'\nimport { MenuClickCapture } from '../MenuClickCapture'\nimport { Shape } from '../Shape'\nimport { CanvasOverlays } from './CanvasOverlays'\n\n/** @public */\nexport interface TLCanvasComponentProps {\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultCanvas({ className }: TLCanvasComponentProps) {\n\tconst editor = useEditor()\n\n\tconst { SelectionBackground, Background, SvgDefs } = useEditorComponents()\n\n\tconst rCanvas = useRef<HTMLDivElement>(null)\n\tconst rHtmlLayer = useRef<HTMLDivElement>(null)\n\tconst container = useContainer()\n\n\tuseScreenBounds(rCanvas)\n\tuseDocumentEvents()\n\tuseCoarsePointer()\n\n\tuseGestureEvents(rCanvas)\n\tuseFixSafariDoubleTapZoomPencilEvents(rCanvas)\n\n\tuseQuickReactor(\n\t\t'update canvas state data attributes',\n\t\t() => {\n\t\t\tconst canvas = rCanvas.current\n\t\t\tif (!canvas) return\n\n\t\t\tcanvas.setAttribute(\n\t\t\t\t'data-iseditinganything',\n\t\t\t\teditor.getEditingShapeId() === null ? 'false' : 'true'\n\t\t\t)\n\t\t\tcanvas.setAttribute(\n\t\t\t\t'data-isselectinganything',\n\t\t\t\teditor.getSelectedShapeIds().length === 0 ? 'false' : 'true'\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst rMemoizedStuff = useRef({ lodDisableTextOutline: false, allowTextOutline: true })\n\n\tuseQuickReactor(\n\t\t'position layers',\n\t\tfunction positionLayersWhenCameraMoves() {\n\t\t\tconst { x, y, z } = editor.getCamera()\n\n\t\t\t// This should only run once on first load\n\t\t\tif (rMemoizedStuff.current.allowTextOutline && tlenv.isSafari) {\n\t\t\t\tcontainer.style.setProperty('--tl-text-outline', 'none')\n\t\t\t\trMemoizedStuff.current.allowTextOutline = false\n\t\t\t}\n\n\t\t\t// And this should only run if we're not in Safari;\n\t\t\t// If we're below the lod distance for text shadows, turn them off\n\t\t\tif (\n\t\t\t\trMemoizedStuff.current.allowTextOutline &&\n\t\t\t\tz < editor.options.textShadowLod !== rMemoizedStuff.current.lodDisableTextOutline\n\t\t\t) {\n\t\t\t\tconst lodDisableTextOutline = z < editor.options.textShadowLod\n\t\t\t\tcontainer.style.setProperty(\n\t\t\t\t\t'--tl-text-outline',\n\t\t\t\t\tlodDisableTextOutline ? 'none' : `var(--tl-text-outline-reference)`\n\t\t\t\t)\n\t\t\t\trMemoizedStuff.current.lodDisableTextOutline = lodDisableTextOutline\n\t\t\t}\n\n\t\t\t// Because the html container has a width/height of 1px, we\n\t\t\t// need to create a small offset when zoomed to ensure that\n\t\t\t// the html container and svg container are lined up exactly.\n\t\t\tconst offset =\n\t\t\t\tz >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)\n\n\t\t\tconst transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(\n\t\t\t\tx + offset\n\t\t\t)}px,${toDomPrecision(y + offset)}px)`\n\n\t\t\tsetStyleProperty(rHtmlLayer.current, 'transform', transform)\n\t\t},\n\t\t[editor, container]\n\t)\n\n\tconst events = useCanvasEvents()\n\n\tconst shapeSvgDefs = useValue(\n\t\t'shapeSvgDefs',\n\t\t() => {\n\t\t\tconst shapeSvgDefsByKey = new Map<string, JSX.Element>()\n\t\t\tfor (const util of objectMapValues(editor.shapeUtils)) {\n\t\t\t\tif (!util) return\n\t\t\t\tconst defs = util.getCanvasSvgDefs()\n\t\t\t\tfor (const { key, component: Component } of defs) {\n\t\t\t\t\tif (shapeSvgDefsByKey.has(key)) continue\n\t\t\t\t\tshapeSvgDefsByKey.set(key, <Component key={key} />)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn [...shapeSvgDefsByKey.values()]\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])\n\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\tconst { Grid } = useEditorComponents()\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={rCanvas}\n\t\t\t\tdraggable={false}\n\t\t\t\tclassName={classNames('tl-canvas', className)}\n\t\t\t\tdata-testid=\"canvas\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<svg className=\"tl-svg-context\" aria-hidden=\"true\">\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t{shapeSvgDefs}\n\t\t\t\t\t\t{SvgDefs && <SvgDefs />}\n\t\t\t\t\t</defs>\n\t\t\t\t</svg>\n\t\t\t\t{Background && (\n\t\t\t\t\t<div className=\"tl-background__wrapper\">\n\t\t\t\t\t\t<Background />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{isGridMode && Grid && <GridWrapper />}\n\t\t\t\t<div ref={rHtmlLayer} className=\"tl-html-layer tl-shapes\" draggable={false}>\n\t\t\t\t\t<OnTheCanvasWrapper />\n\t\t\t\t\t{SelectionBackground && <SelectionBackgroundWrapper />}\n\t\t\t\t\t{hideShapes ? null : <ShapesLayer canvasRef={rCanvas} />}\n\t\t\t\t</div>\n\t\t\t\t<CanvasOverlays />\n\t\t\t\t<MovingCameraHitTestBlocker />\n\t\t\t</div>\n\t\t\t<InFrontOfTheCanvasWrapper />\n\t\t\t<MenuClickCapture />\n\t\t</>\n\t)\n}\n\nfunction InFrontOfTheCanvasWrapper() {\n\tconst editor = useEditor()\n\tconst { InFrontOfTheCanvas } = useEditorComponents()\n\tif (!InFrontOfTheCanvas) return null\n\treturn (\n\t\t<div\n\t\t\tclassName=\"tl-canvas__in-front\"\n\t\t\tonPointerDown={editor.markEventAsHandled}\n\t\t\tonPointerUp={editor.markEventAsHandled}\n\t\t\tonTouchStart={editor.markEventAsHandled}\n\t\t\tonTouchEnd={editor.markEventAsHandled}\n\t\t>\n\t\t\t<InFrontOfTheCanvas />\n\t\t</div>\n\t)\n}\n\nfunction GridWrapper() {\n\tconst editor = useEditor()\n\tconst gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])\n\tconst { x, y, z } = useValue('camera', () => editor.getCamera(), [editor])\n\tconst { Grid } = useEditorComponents()\n\n\tif (!Grid) return null\n\n\treturn <Grid x={x} y={y} z={z} size={gridSize} />\n}\n\nfunction ShapesLayer({ canvasRef }: { canvasRef: { readonly current: HTMLDivElement | null } }) {\n\tconst editor = useEditor()\n\tconst debugSvg = useValue('debug svg', () => debugFlags.debugSvg.get(), [debugFlags])\n\tconst renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])\n\n\treturn (\n\t\t<ShapeCullingProvider>\n\t\t\t{renderingShapes.map((result) =>\n\t\t\t\tdebugSvg ? (\n\t\t\t\t\t<Fragment key={result.id + '_fragment'}>\n\t\t\t\t\t\t<Shape {...result} />\n\t\t\t\t\t\t<DebugSvgCopy id={result.id} mode=\"iframe\" />\n\t\t\t\t\t</Fragment>\n\t\t\t\t) : (\n\t\t\t\t\t<Shape key={result.id + '_shape'} {...result} />\n\t\t\t\t)\n\t\t\t)}\n\t\t\t<CullingController />\n\t\t\t{tlenv.isSafari && <ReflowIfNeeded canvasRef={canvasRef} />}\n\t\t</ShapeCullingProvider>\n\t)\n}\nfunction ReflowIfNeeded({ canvasRef }: { canvasRef: { readonly current: HTMLDivElement | null } }) {\n\tconst editor = useEditor()\n\tconst culledShapesRef = useRef<Set<TLShapeId>>(new Set())\n\tuseQuickReactor(\n\t\t'reflow for culled shapes',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tif (culledShapesRef.current === culledShapes) return\n\n\t\t\tculledShapesRef.current = culledShapes\n\t\t\tconst canvas = canvasRef.current\n\t\t\tif (!canvas) return\n\t\t\t// This causes a reflow\n\t\t\t// https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n\t\t\tconst _height = canvas.offsetHeight\n\t\t},\n\t\t[editor, canvasRef]\n\t)\n\treturn null\n}\n\n/**\n * Centralized culling controller that updates shape container visibility.\n * This single reactor replaces per-shape subscriptions for O(1) instead of O(N) subscriptions.\n */\nfunction CullingController() {\n\tconst editor = useEditor()\n\tconst { updateCulling } = useShapeCulling()\n\n\tuseQuickReactor(\n\t\t'update shape culling',\n\t\t() => {\n\t\t\tconst culledShapes = editor.getCulledShapes()\n\t\t\tupdateCulling(culledShapes)\n\t\t},\n\t\t[editor, updateCulling]\n\t)\n\n\treturn null\n}\n\nfunction DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {\n\tconst editor = useEditor()\n\n\tconst [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)\n\n\tconst isInRoot = useValue(\n\t\t'is in root',\n\t\t() => {\n\t\t\tconst shape = editor.getShape(id)\n\t\t\treturn shape?.parentId === editor.getCurrentPageId()\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tuseEffect(() => {\n\t\tif (!isInRoot) return\n\n\t\tlet latest = null\n\t\tconst unsubscribe = react('shape to svg', async () => {\n\t\t\tconst renderId = Math.random()\n\t\t\tlatest = renderId\n\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tconst isSingleFrame = !!shape && editor.isShapeFrameLike(shape)\n\t\t\tconst padding = isSingleFrame ? 0 : 10\n\t\t\tlet bounds = editor.getShapePageBounds(id)\n\t\t\tif (!bounds) return\n\t\t\tbounds = bounds.clone().expandBy(padding)\n\n\t\t\tconst result = await editor.getSvgString([id], { padding })\n\n\t\t\tif (latest !== renderId || !result) return\n\n\t\t\tconst svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`\n\t\t\tsetImage({ src: svgDataUrl, bounds })\n\t\t})\n\n\t\treturn () => {\n\t\t\tlatest = null\n\t\t\tunsubscribe()\n\t\t}\n\t}, [editor, id, isInRoot])\n\n\tif (!isInRoot || !image) return null\n\n\tif (mode === 'iframe') {\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tsrc={image.src}\n\t\t\t\twidth={image.bounds.width}\n\t\t\t\theight={image.bounds.height}\n\t\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tleft: 0,\n\t\t\t\t\tborder: 'none',\n\t\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\t\toutline: '1px solid black',\n\t\t\t\t\tmaxWidth: 'none',\n\t\t\t\t}}\n\t\t\t/>\n\t\t)\n\t}\n\treturn (\n\t\t<img\n\t\t\tsrc={image.src}\n\t\t\twidth={image.bounds.width}\n\t\t\theight={image.bounds.height}\n\t\t\treferrerPolicy=\"no-referrer\"\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\ttransform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,\n\t\t\t\toutline: '1px solid black',\n\t\t\t\tmaxWidth: 'none',\n\t\t\t}}\n\t\t/>\n\t)\n}\n\nfunction SelectionBackgroundWrapper() {\n\tconst editor = useEditor()\n\tconst selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [\n\t\teditor,\n\t])\n\tconst selectionBounds = useValue(\n\t\t'selection bounds',\n\t\t() => editor.getSelectionRotatedPageBounds(),\n\t\t[editor]\n\t)\n\tconst { SelectionBackground } = useEditorComponents()\n\tif (!selectionBounds || !SelectionBackground) return null\n\treturn <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />\n}\n\nfunction OnTheCanvasWrapper() {\n\tconst { OnTheCanvas } = useEditorComponents()\n\tif (!OnTheCanvas) return null\n\treturn <OnTheCanvas />\n}\n\nfunction MovingCameraHitTestBlocker() {\n\tconst editor = useEditor()\n\tconst cameraState = useValue('camera state', () => editor.getCameraState(), [editor])\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames('tl-hit-test-blocker', {\n\t\t\t\t'tl-hit-test-blocker__hidden': cameraState === 'idle',\n\t\t\t})}\n\t\t/>\n\t)\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment"]
7
7
  }