@tldraw/editor 4.6.0-next.fe1474dc57d8 → 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 (207) hide show
  1. package/dist-cjs/index.d.ts +412 -179
  2. package/dist-cjs/index.js +12 -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/default-components/CanvasOverlays.js +180 -0
  7. package/dist-cjs/lib/components/default-components/CanvasOverlays.js.map +7 -0
  8. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +44 -249
  9. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +3 -3
  10. package/dist-cjs/lib/editor/Editor.js +78 -28
  11. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  12. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js +98 -0
  13. package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js.map +7 -0
  14. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js +14 -0
  15. package/dist-cjs/lib/editor/managers/ThemeManager/defaultThemes.js.map +2 -2
  16. package/dist-cjs/lib/editor/overlays/OverlayManager.js +154 -0
  17. package/dist-cjs/lib/editor/overlays/OverlayManager.js.map +7 -0
  18. package/dist-cjs/lib/editor/overlays/OverlayUtil.js +92 -0
  19. package/dist-cjs/lib/editor/overlays/OverlayUtil.js.map +7 -0
  20. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js +161 -0
  21. package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map +7 -0
  22. package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js +39 -0
  23. package/dist-cjs/lib/editor/overlays/getOverlayDisplayValues.js.map +7 -0
  24. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js +3 -0
  25. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +2 -2
  26. package/dist-cjs/lib/editor/shapes/ShapeUtil.js +25 -23
  27. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  28. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js +32 -2
  29. package/dist-cjs/lib/editor/shapes/group/GroupShapeUtil.js.map +2 -2
  30. package/dist-cjs/lib/editor/types/event-types.js.map +2 -2
  31. package/dist-cjs/lib/exports/fetchCache.js +1 -1
  32. package/dist-cjs/lib/exports/fetchCache.js.map +2 -2
  33. package/dist-cjs/lib/hooks/EditorComponentsContext.js.map +2 -2
  34. package/dist-cjs/lib/hooks/useCanvasEvents.js +3 -3
  35. package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
  36. package/dist-cjs/lib/hooks/useEditorComponents.js +0 -28
  37. package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
  38. package/dist-cjs/lib/hooks/usePeerIds.js +1 -36
  39. package/dist-cjs/lib/hooks/usePeerIds.js.map +2 -2
  40. package/dist-cjs/lib/hooks/useShapeCulling.js +2 -1
  41. package/dist-cjs/lib/hooks/useShapeCulling.js.map +2 -2
  42. package/dist-cjs/lib/options.js +0 -1
  43. package/dist-cjs/lib/options.js.map +2 -2
  44. package/dist-cjs/lib/utils/reparenting.js +20 -7
  45. package/dist-cjs/lib/utils/reparenting.js.map +2 -2
  46. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +3 -0
  47. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
  48. package/dist-cjs/version.js +4 -4
  49. package/dist-cjs/version.js.map +1 -1
  50. package/dist-esm/index.d.mts +412 -179
  51. package/dist-esm/index.mjs +19 -41
  52. package/dist-esm/index.mjs.map +2 -2
  53. package/dist-esm/lib/TldrawEditor.mjs +3 -0
  54. package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
  55. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs +160 -0
  56. package/dist-esm/lib/components/default-components/CanvasOverlays.mjs.map +7 -0
  57. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +45 -250
  58. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +3 -3
  59. package/dist-esm/lib/editor/Editor.mjs +78 -29
  60. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  61. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs +83 -0
  62. package/dist-esm/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.mjs.map +7 -0
  63. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs +14 -0
  64. package/dist-esm/lib/editor/managers/ThemeManager/defaultThemes.mjs.map +2 -2
  65. package/dist-esm/lib/editor/overlays/OverlayManager.mjs +136 -0
  66. package/dist-esm/lib/editor/overlays/OverlayManager.mjs.map +7 -0
  67. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs +72 -0
  68. package/dist-esm/lib/editor/overlays/OverlayUtil.mjs.map +7 -0
  69. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs +141 -0
  70. package/dist-esm/lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs.map +7 -0
  71. package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs +19 -0
  72. package/dist-esm/lib/editor/overlays/getOverlayDisplayValues.mjs.map +7 -0
  73. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs +3 -0
  74. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +2 -2
  75. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +25 -23
  76. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  77. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs +32 -2
  78. package/dist-esm/lib/editor/shapes/group/GroupShapeUtil.mjs.map +2 -2
  79. package/dist-esm/lib/editor/types/event-types.mjs.map +2 -2
  80. package/dist-esm/lib/exports/fetchCache.mjs +2 -2
  81. package/dist-esm/lib/exports/fetchCache.mjs.map +2 -2
  82. package/dist-esm/lib/hooks/EditorComponentsContext.mjs.map +2 -2
  83. package/dist-esm/lib/hooks/useCanvasEvents.mjs +3 -3
  84. package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
  85. package/dist-esm/lib/hooks/useEditorComponents.mjs +0 -28
  86. package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
  87. package/dist-esm/lib/hooks/usePeerIds.mjs +2 -40
  88. package/dist-esm/lib/hooks/usePeerIds.mjs.map +2 -2
  89. package/dist-esm/lib/hooks/useShapeCulling.mjs +2 -1
  90. package/dist-esm/lib/hooks/useShapeCulling.mjs.map +2 -2
  91. package/dist-esm/lib/options.mjs +0 -1
  92. package/dist-esm/lib/options.mjs.map +2 -2
  93. package/dist-esm/lib/utils/reparenting.mjs +20 -7
  94. package/dist-esm/lib/utils/reparenting.mjs.map +2 -2
  95. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +3 -0
  96. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
  97. package/dist-esm/version.mjs +4 -4
  98. package/dist-esm/version.mjs.map +1 -1
  99. package/editor.css +4 -239
  100. package/package.json +7 -7
  101. package/src/index.ts +17 -39
  102. package/src/lib/TldrawEditor.tsx +9 -0
  103. package/src/lib/components/default-components/CanvasOverlays.tsx +208 -0
  104. package/src/lib/components/default-components/DefaultCanvas.tsx +49 -324
  105. package/src/lib/editor/Editor.test.ts +3 -1
  106. package/src/lib/editor/Editor.ts +80 -24
  107. package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts +98 -0
  108. package/src/lib/editor/managers/ThemeManager/defaultThemes.ts +14 -0
  109. package/src/lib/editor/overlays/OverlayManager.ts +183 -0
  110. package/src/lib/editor/overlays/OverlayUtil.ts +143 -0
  111. package/src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts +216 -0
  112. package/src/lib/editor/overlays/getOverlayDisplayValues.ts +51 -0
  113. package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +9 -2
  114. package/src/lib/editor/shapes/ShapeUtil.ts +34 -26
  115. package/src/lib/editor/shapes/group/GroupShapeUtil.tsx +40 -3
  116. package/src/lib/editor/types/event-types.ts +2 -0
  117. package/src/lib/exports/fetchCache.ts +2 -4
  118. package/src/lib/exports/getSvgJsx.test.ts +3 -1
  119. package/src/lib/hooks/EditorComponentsContext.tsx +0 -27
  120. package/src/lib/hooks/useCanvasEvents.ts +13 -8
  121. package/src/lib/hooks/useEditorComponents.tsx +0 -28
  122. package/src/lib/hooks/usePeerIds.ts +6 -55
  123. package/src/lib/hooks/useShapeCulling.tsx +3 -1
  124. package/src/lib/options.ts +0 -7
  125. package/src/lib/utils/reparenting.ts +22 -9
  126. package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -0
  127. package/src/version.ts +4 -4
  128. package/dist-cjs/lib/components/GeometryDebuggingView.js +0 -115
  129. package/dist-cjs/lib/components/GeometryDebuggingView.js.map +0 -7
  130. package/dist-cjs/lib/components/LiveCollaborators.js +0 -152
  131. package/dist-cjs/lib/components/LiveCollaborators.js.map +0 -7
  132. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js +0 -234
  133. package/dist-cjs/lib/components/default-components/CanvasShapeIndicators.js.map +0 -7
  134. package/dist-cjs/lib/components/default-components/DefaultBrush.js +0 -38
  135. package/dist-cjs/lib/components/default-components/DefaultBrush.js.map +0 -7
  136. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +0 -71
  137. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +0 -7
  138. package/dist-cjs/lib/components/default-components/DefaultCursor.js +0 -59
  139. package/dist-cjs/lib/components/default-components/DefaultCursor.js.map +0 -7
  140. package/dist-cjs/lib/components/default-components/DefaultHandle.js +0 -56
  141. package/dist-cjs/lib/components/default-components/DefaultHandle.js.map +0 -7
  142. package/dist-cjs/lib/components/default-components/DefaultHandles.js +0 -28
  143. package/dist-cjs/lib/components/default-components/DefaultHandles.js.map +0 -7
  144. package/dist-cjs/lib/components/default-components/DefaultScribble.js +0 -51
  145. package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +0 -7
  146. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js +0 -69
  147. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js.map +0 -7
  148. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +0 -107
  149. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +0 -7
  150. package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js +0 -28
  151. package/dist-cjs/lib/components/default-components/DefaultShapeIndicatorErrorFallback.js.map +0 -7
  152. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js +0 -102
  153. package/dist-cjs/lib/components/default-components/DefaultShapeIndicators.js.map +0 -7
  154. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +0 -170
  155. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js.map +0 -7
  156. package/dist-cjs/lib/hooks/useHandleEvents.js +0 -100
  157. package/dist-cjs/lib/hooks/useHandleEvents.js.map +0 -7
  158. package/dist-cjs/lib/hooks/useSelectionEvents.js +0 -98
  159. package/dist-cjs/lib/hooks/useSelectionEvents.js.map +0 -7
  160. package/dist-esm/lib/components/GeometryDebuggingView.mjs +0 -95
  161. package/dist-esm/lib/components/GeometryDebuggingView.mjs.map +0 -7
  162. package/dist-esm/lib/components/LiveCollaborators.mjs +0 -135
  163. package/dist-esm/lib/components/LiveCollaborators.mjs.map +0 -7
  164. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs +0 -214
  165. package/dist-esm/lib/components/default-components/CanvasShapeIndicators.mjs.map +0 -7
  166. package/dist-esm/lib/components/default-components/DefaultBrush.mjs +0 -18
  167. package/dist-esm/lib/components/default-components/DefaultBrush.mjs.map +0 -7
  168. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +0 -41
  169. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +0 -7
  170. package/dist-esm/lib/components/default-components/DefaultCursor.mjs +0 -29
  171. package/dist-esm/lib/components/default-components/DefaultCursor.mjs.map +0 -7
  172. package/dist-esm/lib/components/default-components/DefaultHandle.mjs +0 -26
  173. package/dist-esm/lib/components/default-components/DefaultHandle.mjs.map +0 -7
  174. package/dist-esm/lib/components/default-components/DefaultHandles.mjs +0 -8
  175. package/dist-esm/lib/components/default-components/DefaultHandles.mjs.map +0 -7
  176. package/dist-esm/lib/components/default-components/DefaultScribble.mjs +0 -21
  177. package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +0 -7
  178. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs +0 -39
  179. package/dist-esm/lib/components/default-components/DefaultSelectionForeground.mjs.map +0 -7
  180. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +0 -77
  181. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +0 -7
  182. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs +0 -8
  183. package/dist-esm/lib/components/default-components/DefaultShapeIndicatorErrorFallback.mjs.map +0 -7
  184. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs +0 -82
  185. package/dist-esm/lib/components/default-components/DefaultShapeIndicators.mjs.map +0 -7
  186. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs +0 -142
  187. package/dist-esm/lib/components/default-components/DefaultSnapIndictor.mjs.map +0 -7
  188. package/dist-esm/lib/hooks/useHandleEvents.mjs +0 -70
  189. package/dist-esm/lib/hooks/useHandleEvents.mjs.map +0 -7
  190. package/dist-esm/lib/hooks/useSelectionEvents.mjs +0 -78
  191. package/dist-esm/lib/hooks/useSelectionEvents.mjs.map +0 -7
  192. package/src/lib/components/GeometryDebuggingView.tsx +0 -108
  193. package/src/lib/components/LiveCollaborators.tsx +0 -180
  194. package/src/lib/components/default-components/CanvasShapeIndicators.tsx +0 -300
  195. package/src/lib/components/default-components/DefaultBrush.tsx +0 -35
  196. package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +0 -52
  197. package/src/lib/components/default-components/DefaultCursor.tsx +0 -59
  198. package/src/lib/components/default-components/DefaultHandle.tsx +0 -42
  199. package/src/lib/components/default-components/DefaultHandles.tsx +0 -15
  200. package/src/lib/components/default-components/DefaultScribble.tsx +0 -31
  201. package/src/lib/components/default-components/DefaultSelectionForeground.tsx +0 -50
  202. package/src/lib/components/default-components/DefaultShapeIndicator.tsx +0 -104
  203. package/src/lib/components/default-components/DefaultShapeIndicatorErrorFallback.tsx +0 -9
  204. package/src/lib/components/default-components/DefaultShapeIndicators.tsx +0 -118
  205. package/src/lib/components/default-components/DefaultSnapIndictor.tsx +0 -174
  206. package/src/lib/hooks/useHandleEvents.ts +0 -88
  207. package/src/lib/hooks/useSelectionEvents.ts +0 -97
@@ -1,214 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useComputed, useQuickReactor } from "@tldraw/state-react";
3
- import { createComputedCache } from "@tldraw/store";
4
- import { dedupe } from "@tldraw/utils";
5
- import { memo, useEffect, useRef } from "react";
6
- import { getComputedStyle } from "../../exports/domUtils.mjs";
7
- import { useColorMode } from "../../hooks/useColorMode.mjs";
8
- import { useEditor } from "../../hooks/useEditor.mjs";
9
- import { useActivePeerIds$ } from "../../hooks/usePeerIds.mjs";
10
- function setsEqual(a, b) {
11
- if (a.size !== b.size) return false;
12
- for (const item of a) {
13
- if (!b.has(item)) return false;
14
- }
15
- return true;
16
- }
17
- function arraysEqual(a, b) {
18
- if (a.length !== b.length) return false;
19
- for (let i = 0; i < a.length; i++) {
20
- if (a[i] !== b[i]) return false;
21
- }
22
- return true;
23
- }
24
- function collaboratorIndicatorsEqual(a, b) {
25
- if (a.length !== b.length) return false;
26
- for (let i = 0; i < a.length; i++) {
27
- if (a[i].color !== b[i].color) return false;
28
- if (!arraysEqual(a[i].shapeIds, b[i].shapeIds)) return false;
29
- }
30
- return true;
31
- }
32
- function renderDataEqual(a, b) {
33
- return setsEqual(a.idsToDisplay, b.idsToDisplay) && setsEqual(a.renderingShapeIds, b.renderingShapeIds) && arraysEqual(a.hintingShapeIds, b.hintingShapeIds) && collaboratorIndicatorsEqual(a.collaboratorIndicators, b.collaboratorIndicators);
34
- }
35
- const indicatorPathCache = createComputedCache(
36
- "indicatorPath",
37
- (editor, shape) => {
38
- const util = editor.getShapeUtil(shape);
39
- return util.getIndicatorPath(shape);
40
- }
41
- );
42
- const getIndicatorPath = (editor, shape) => {
43
- return indicatorPathCache.get(editor, shape.id);
44
- };
45
- function renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds) {
46
- if (!renderingShapeIds.has(shapeId)) return false;
47
- const shape = editor.getShape(shapeId);
48
- if (!shape || shape.isLocked) return false;
49
- const pageTransform = editor.getShapePageTransform(shape);
50
- if (!pageTransform) return false;
51
- const indicatorPath = getIndicatorPath(editor, shape);
52
- if (!indicatorPath) return false;
53
- ctx.save();
54
- ctx.transform(
55
- pageTransform.a,
56
- pageTransform.b,
57
- pageTransform.c,
58
- pageTransform.d,
59
- pageTransform.e,
60
- pageTransform.f
61
- );
62
- renderIndicatorPath(ctx, indicatorPath);
63
- ctx.restore();
64
- return true;
65
- }
66
- function renderIndicatorPath(ctx, indicatorPath) {
67
- if (indicatorPath instanceof Path2D) {
68
- ctx.stroke(indicatorPath);
69
- } else {
70
- const { path, clipPath, additionalPaths } = indicatorPath;
71
- if (clipPath) {
72
- ctx.save();
73
- ctx.clip(clipPath, "evenodd");
74
- ctx.stroke(path);
75
- ctx.restore();
76
- } else {
77
- ctx.stroke(path);
78
- }
79
- if (additionalPaths) {
80
- for (const additionalPath of additionalPaths) {
81
- ctx.stroke(additionalPath);
82
- }
83
- }
84
- }
85
- }
86
- const CanvasShapeIndicators = memo(function CanvasShapeIndicators2() {
87
- const editor = useEditor();
88
- if (!editor.options.useCanvasIndicators) {
89
- return null;
90
- }
91
- return /* @__PURE__ */ jsx(CanvasShapeIndicatorsInner, {});
92
- });
93
- const CanvasShapeIndicatorsInner = memo(function CanvasShapeIndicatorsInner2() {
94
- const editor = useEditor();
95
- const canvasRef = useRef(null);
96
- const rSelectedColor = useRef(null);
97
- const colorMode = useColorMode();
98
- useEffect(() => {
99
- const timer = editor.timers.setTimeout(() => {
100
- rSelectedColor.current = null;
101
- }, 0);
102
- return () => clearTimeout(timer);
103
- }, [colorMode, editor]);
104
- const activePeerIds$ = useActivePeerIds$();
105
- const $renderData = useComputed(
106
- "indicator render data",
107
- () => {
108
- const renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id));
109
- const idsToDisplay = /* @__PURE__ */ new Set();
110
- const instanceState = editor.getInstanceState();
111
- const isChangingStyle = instanceState.isChangingStyle;
112
- const isIdleOrEditing = editor.isInAny("select.idle", "select.editing_shape");
113
- const isInSelectState = editor.isInAny(
114
- "select.brushing",
115
- "select.scribble_brushing",
116
- "select.pointing_shape",
117
- "select.pointing_selection",
118
- "select.pointing_handle"
119
- );
120
- if (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {
121
- for (const id of editor.getSelectedShapeIds()) {
122
- idsToDisplay.add(id);
123
- }
124
- if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
125
- const hovered = editor.getHoveredShapeId();
126
- if (hovered) idsToDisplay.add(hovered);
127
- }
128
- }
129
- const hintingShapeIds = dedupe(editor.getHintingShapeIds());
130
- const collaboratorIndicators = [];
131
- const currentPageId = editor.getCurrentPageId();
132
- const activePeerIds = activePeerIds$.get();
133
- const collaborators = editor.getCollaborators();
134
- for (const peerId of activePeerIds.values()) {
135
- const presence = collaborators.find((c) => c.userId === peerId);
136
- if (!presence || presence.currentPageId !== currentPageId) continue;
137
- const visibleShapeIds = presence.selectedShapeIds.filter(
138
- (id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)
139
- );
140
- if (visibleShapeIds.length > 0) {
141
- collaboratorIndicators.push({
142
- color: presence.color,
143
- shapeIds: visibleShapeIds
144
- });
145
- }
146
- }
147
- return {
148
- idsToDisplay,
149
- renderingShapeIds,
150
- hintingShapeIds,
151
- collaboratorIndicators
152
- };
153
- },
154
- { isEqual: renderDataEqual },
155
- [editor, activePeerIds$]
156
- );
157
- useQuickReactor(
158
- "canvas indicators render",
159
- () => {
160
- const canvas = canvasRef.current;
161
- if (!canvas) return;
162
- const ctx = canvas.getContext("2d");
163
- if (!ctx) return;
164
- const { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } = $renderData.get();
165
- const { w, h } = editor.getViewportScreenBounds();
166
- const dpr = editor.getInstanceState().devicePixelRatio;
167
- const { x: cx, y: cy, z: zoom } = editor.getCamera();
168
- const canvasWidth = Math.ceil(w * dpr);
169
- const canvasHeight = Math.ceil(h * dpr);
170
- if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
171
- canvas.width = canvasWidth;
172
- canvas.height = canvasHeight;
173
- canvas.style.width = `${w}px`;
174
- canvas.style.height = `${h}px`;
175
- }
176
- ctx.resetTransform();
177
- ctx.clearRect(0, 0, canvas.width, canvas.height);
178
- ctx.scale(dpr, dpr);
179
- ctx.scale(zoom, zoom);
180
- ctx.translate(cx, cy);
181
- ctx.lineCap = "round";
182
- ctx.lineJoin = "round";
183
- ctx.lineWidth = 1.5 / zoom;
184
- for (const collaborator of collaboratorIndicators) {
185
- ctx.strokeStyle = collaborator.color;
186
- ctx.globalAlpha = 0.7;
187
- for (const shapeId of collaborator.shapeIds) {
188
- renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds);
189
- }
190
- }
191
- ctx.globalAlpha = 1;
192
- if (!rSelectedColor.current) {
193
- rSelectedColor.current = getComputedStyle(canvas).getPropertyValue("--tl-color-selected");
194
- }
195
- ctx.strokeStyle = rSelectedColor.current;
196
- ctx.lineWidth = 1.5 / zoom;
197
- for (const shapeId of idsToDisplay) {
198
- renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds);
199
- }
200
- if (hintingShapeIds.length > 0) {
201
- ctx.lineWidth = 2.5 / zoom;
202
- for (const shapeId of hintingShapeIds) {
203
- renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds);
204
- }
205
- }
206
- },
207
- [editor, $renderData]
208
- );
209
- return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "tl-canvas-indicators" });
210
- });
211
- export {
212
- CanvasShapeIndicators
213
- };
214
- //# sourceMappingURL=CanvasShapeIndicators.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/components/default-components/CanvasShapeIndicators.tsx"],
4
- "sourcesContent": ["import { useComputed, useQuickReactor } from '@tldraw/state-react'\nimport { createComputedCache } from '@tldraw/store'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport { dedupe } from '@tldraw/utils'\nimport { memo, useEffect, useRef } from 'react'\nimport { Editor } from '../../editor/Editor'\nimport { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'\nimport { getComputedStyle } from '../../exports/domUtils'\nimport { useColorMode } from '../../hooks/useColorMode'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useActivePeerIds$ } from '../../hooks/usePeerIds'\n\ninterface CollaboratorIndicatorData {\n\tcolor: string\n\tshapeIds: TLShapeId[]\n}\n\ninterface RenderData {\n\tidsToDisplay: Set<TLShapeId>\n\trenderingShapeIds: Set<TLShapeId>\n\thintingShapeIds: TLShapeId[]\n\tcollaboratorIndicators: CollaboratorIndicatorData[]\n}\n\nfunction setsEqual<T>(a: Set<T>, b: Set<T>): boolean {\n\tif (a.size !== b.size) return false\n\tfor (const item of a) {\n\t\tif (!b.has(item)) return false\n\t}\n\treturn true\n}\n\nfunction arraysEqual<T>(a: readonly T[], b: readonly T[]): boolean {\n\tif (a.length !== b.length) return false\n\tfor (let i = 0; i < a.length; i++) {\n\t\tif (a[i] !== b[i]) return false\n\t}\n\treturn true\n}\n\nfunction collaboratorIndicatorsEqual(\n\ta: CollaboratorIndicatorData[],\n\tb: CollaboratorIndicatorData[]\n): boolean {\n\tif (a.length !== b.length) return false\n\tfor (let i = 0; i < a.length; i++) {\n\t\tif (a[i].color !== b[i].color) return false\n\t\tif (!arraysEqual(a[i].shapeIds, b[i].shapeIds)) return false\n\t}\n\treturn true\n}\n\nfunction renderDataEqual(a: RenderData, b: RenderData): boolean {\n\treturn (\n\t\tsetsEqual(a.idsToDisplay, b.idsToDisplay) &&\n\t\tsetsEqual(a.renderingShapeIds, b.renderingShapeIds) &&\n\t\tarraysEqual(a.hintingShapeIds, b.hintingShapeIds) &&\n\t\tcollaboratorIndicatorsEqual(a.collaboratorIndicators, b.collaboratorIndicators)\n\t)\n}\n\nconst indicatorPathCache = createComputedCache(\n\t'indicatorPath',\n\t(editor: Editor, shape: TLShape) => {\n\t\tconst util = editor.getShapeUtil(shape)\n\t\treturn util.getIndicatorPath(shape)\n\t}\n)\n\nconst getIndicatorPath = (editor: Editor, shape: TLShape) => {\n\treturn indicatorPathCache.get(editor, shape.id)\n}\n\nfunction renderShapeIndicator(\n\tctx: CanvasRenderingContext2D,\n\teditor: Editor,\n\tshapeId: TLShapeId,\n\trenderingShapeIds: Set<TLShapeId>\n): boolean {\n\tif (!renderingShapeIds.has(shapeId)) return false\n\n\tconst shape = editor.getShape(shapeId)\n\tif (!shape || shape.isLocked) return false\n\n\tconst pageTransform = editor.getShapePageTransform(shape)\n\tif (!pageTransform) return false\n\n\tconst indicatorPath = getIndicatorPath(editor, shape)\n\tif (!indicatorPath) return false\n\n\tctx.save()\n\tctx.transform(\n\t\tpageTransform.a,\n\t\tpageTransform.b,\n\t\tpageTransform.c,\n\t\tpageTransform.d,\n\t\tpageTransform.e,\n\t\tpageTransform.f\n\t)\n\trenderIndicatorPath(ctx, indicatorPath)\n\tctx.restore()\n\n\treturn true\n}\n\nfunction renderIndicatorPath(ctx: CanvasRenderingContext2D, indicatorPath: TLIndicatorPath) {\n\tif (indicatorPath instanceof Path2D) {\n\t\tctx.stroke(indicatorPath)\n\t} else {\n\t\tconst { path, clipPath, additionalPaths } = indicatorPath\n\n\t\tif (clipPath) {\n\t\t\tctx.save()\n\t\t\tctx.clip(clipPath, 'evenodd')\n\t\t\tctx.stroke(path)\n\t\t\tctx.restore()\n\t\t} else {\n\t\t\tctx.stroke(path)\n\t\t}\n\n\t\tif (additionalPaths) {\n\t\t\tfor (const additionalPath of additionalPaths) {\n\t\t\t\tctx.stroke(additionalPath)\n\t\t\t}\n\t\t}\n\t}\n}\n\n/** @internal @react */\nexport const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {\n\tconst editor = useEditor()\n\n\t// Skip canvas indicator rendering when the option is disabled (e.g. A/B test)\n\tif (!editor.options.useCanvasIndicators) {\n\t\treturn null\n\t}\n\n\treturn <CanvasShapeIndicatorsInner />\n})\n\nconst CanvasShapeIndicatorsInner = memo(function CanvasShapeIndicatorsInner() {\n\tconst editor = useEditor()\n\tconst canvasRef = useRef<HTMLCanvasElement>(null)\n\n\t// Cache the selected color to avoid getComputedStyle on every render\n\tconst rSelectedColor = useRef<string | null>(null)\n\tconst colorMode = useColorMode()\n\n\tuseEffect(() => {\n\t\tconst timer = editor.timers.setTimeout(() => {\n\t\t\trSelectedColor.current = null\n\t\t}, 0)\n\t\treturn () => clearTimeout(timer)\n\t}, [colorMode, editor])\n\n\t// Get active peer IDs (already handles time-based state transitions)\n\tconst activePeerIds$ = useActivePeerIds$()\n\n\tconst $renderData = useComputed(\n\t\t'indicator render data',\n\t\t() => {\n\t\t\tconst renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))\n\n\t\t\t// Compute ids to display for selected/hovered shapes\n\t\t\tconst idsToDisplay = new Set<TLShapeId>()\n\t\t\tconst instanceState = editor.getInstanceState()\n\t\t\tconst isChangingStyle = instanceState.isChangingStyle\n\t\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\t\t\tconst isInSelectState = editor.isInAny(\n\t\t\t\t'select.brushing',\n\t\t\t\t'select.scribble_brushing',\n\t\t\t\t'select.pointing_shape',\n\t\t\t\t'select.pointing_selection',\n\t\t\t\t'select.pointing_handle'\n\t\t\t)\n\n\t\t\tif (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {\n\t\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\t\tidsToDisplay.add(id)\n\t\t\t\t}\n\t\t\t\tif (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {\n\t\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\t\tif (hovered) idsToDisplay.add(hovered)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Compute hinting shape ids\n\t\t\tconst hintingShapeIds = dedupe(editor.getHintingShapeIds())\n\n\t\t\t// Compute collaborator indicators\n\t\t\tconst collaboratorIndicators: CollaboratorIndicatorData[] = []\n\t\t\tconst currentPageId = editor.getCurrentPageId()\n\t\t\tconst activePeerIds = activePeerIds$.get()\n\n\t\t\tconst collaborators = editor.getCollaborators()\n\t\t\tfor (const peerId of activePeerIds.values()) {\n\t\t\t\t// Skip collaborators on different pages\n\t\t\t\tconst presence = collaborators.find((c) => c.userId === peerId)\n\t\t\t\tif (!presence || presence.currentPageId !== currentPageId) continue\n\n\t\t\t\t// Filter to shapes that are visible and on the current rendering set\n\t\t\t\tconst visibleShapeIds = presence.selectedShapeIds.filter(\n\t\t\t\t\t(id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)\n\t\t\t\t)\n\n\t\t\t\tif (visibleShapeIds.length > 0) {\n\t\t\t\t\tcollaboratorIndicators.push({\n\t\t\t\t\t\tcolor: presence.color,\n\t\t\t\t\t\tshapeIds: visibleShapeIds,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tidsToDisplay,\n\t\t\t\trenderingShapeIds,\n\t\t\t\thintingShapeIds,\n\t\t\t\tcollaboratorIndicators,\n\t\t\t}\n\t\t},\n\t\t{ isEqual: renderDataEqual },\n\t\t[editor, activePeerIds$]\n\t)\n\n\tuseQuickReactor(\n\t\t'canvas indicators render',\n\t\t() => {\n\t\t\tconst canvas = canvasRef.current\n\t\t\tif (!canvas) return\n\n\t\t\tconst ctx = canvas.getContext('2d')\n\t\t\tif (!ctx) return\n\n\t\t\tconst { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } =\n\t\t\t\t$renderData.get()\n\n\t\t\tconst { w, h } = editor.getViewportScreenBounds()\n\t\t\tconst dpr = editor.getInstanceState().devicePixelRatio\n\t\t\tconst { x: cx, y: cy, z: zoom } = editor.getCamera()\n\n\t\t\tconst canvasWidth = Math.ceil(w * dpr)\n\t\t\tconst canvasHeight = Math.ceil(h * dpr)\n\n\t\t\tif (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {\n\t\t\t\tcanvas.width = canvasWidth\n\t\t\t\tcanvas.height = canvasHeight\n\t\t\t\tcanvas.style.width = `${w}px`\n\t\t\t\tcanvas.style.height = `${h}px`\n\t\t\t}\n\n\t\t\tctx.resetTransform()\n\t\t\tctx.clearRect(0, 0, canvas.width, canvas.height)\n\n\t\t\tctx.scale(dpr, dpr)\n\t\t\tctx.scale(zoom, zoom)\n\t\t\tctx.translate(cx, cy)\n\n\t\t\tctx.lineCap = 'round'\n\t\t\tctx.lineJoin = 'round'\n\n\t\t\t// Draw collaborator indicators first (underneath local indicators)\n\t\t\t// Use 0.5 opacity to match the original SVG-based collaborator indicators\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const collaborator of collaboratorIndicators) {\n\t\t\t\tctx.strokeStyle = collaborator.color\n\t\t\t\tctx.globalAlpha = 0.7\n\t\t\t\tfor (const shapeId of collaborator.shapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Reset alpha for local indicators\n\t\t\tctx.globalAlpha = 1.0\n\n\t\t\t// Use cached color, only call getComputedStyle when cache is empty\n\t\t\tif (!rSelectedColor.current) {\n\t\t\t\trSelectedColor.current = getComputedStyle(canvas).getPropertyValue('--tl-color-selected')\n\t\t\t}\n\n\t\t\tctx.strokeStyle = rSelectedColor.current\n\n\t\t\t// Draw selected/hovered indicators (1.5px stroke)\n\t\t\tctx.lineWidth = 1.5 / zoom\n\t\t\tfor (const shapeId of idsToDisplay) {\n\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t}\n\n\t\t\t// Draw hinted indicators with a thicker stroke (2.5px)\n\t\t\tif (hintingShapeIds.length > 0) {\n\t\t\t\tctx.lineWidth = 2.5 / zoom\n\t\t\t\tfor (const shapeId of hintingShapeIds) {\n\t\t\t\t\trenderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[editor, $renderData]\n\t)\n\n\treturn <canvas ref={canvasRef} className=\"tl-canvas-indicators\" />\n})\n"],
5
- "mappings": "AAyIQ;AAzIR,SAAS,aAAa,uBAAuB;AAC7C,SAAS,2BAA2B;AAEpC,SAAS,cAAc;AACvB,SAAS,MAAM,WAAW,cAAc;AAGxC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAclC,SAAS,UAAa,GAAW,GAAoB;AACpD,MAAI,EAAE,SAAS,EAAE,KAAM,QAAO;AAC9B,aAAW,QAAQ,GAAG;AACrB,QAAI,CAAC,EAAE,IAAI,IAAI,EAAG,QAAO;AAAA,EAC1B;AACA,SAAO;AACR;AAEA,SAAS,YAAe,GAAiB,GAA0B;AAClE,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,WAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK;AAClC,QAAI,EAAE,CAAC,MAAM,EAAE,CAAC,EAAG,QAAO;AAAA,EAC3B;AACA,SAAO;AACR;AAEA,SAAS,4BACR,GACA,GACU;AACV,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,WAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK;AAClC,QAAI,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,MAAO,QAAO;AACtC,QAAI,CAAC,YAAY,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAG,QAAO;AAAA,EACxD;AACA,SAAO;AACR;AAEA,SAAS,gBAAgB,GAAe,GAAwB;AAC/D,SACC,UAAU,EAAE,cAAc,EAAE,YAAY,KACxC,UAAU,EAAE,mBAAmB,EAAE,iBAAiB,KAClD,YAAY,EAAE,iBAAiB,EAAE,eAAe,KAChD,4BAA4B,EAAE,wBAAwB,EAAE,sBAAsB;AAEhF;AAEA,MAAM,qBAAqB;AAAA,EAC1B;AAAA,EACA,CAAC,QAAgB,UAAmB;AACnC,UAAM,OAAO,OAAO,aAAa,KAAK;AACtC,WAAO,KAAK,iBAAiB,KAAK;AAAA,EACnC;AACD;AAEA,MAAM,mBAAmB,CAAC,QAAgB,UAAmB;AAC5D,SAAO,mBAAmB,IAAI,QAAQ,MAAM,EAAE;AAC/C;AAEA,SAAS,qBACR,KACA,QACA,SACA,mBACU;AACV,MAAI,CAAC,kBAAkB,IAAI,OAAO,EAAG,QAAO;AAE5C,QAAM,QAAQ,OAAO,SAAS,OAAO;AACrC,MAAI,CAAC,SAAS,MAAM,SAAU,QAAO;AAErC,QAAM,gBAAgB,OAAO,sBAAsB,KAAK;AACxD,MAAI,CAAC,cAAe,QAAO;AAE3B,QAAM,gBAAgB,iBAAiB,QAAQ,KAAK;AACpD,MAAI,CAAC,cAAe,QAAO;AAE3B,MAAI,KAAK;AACT,MAAI;AAAA,IACH,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,EACf;AACA,sBAAoB,KAAK,aAAa;AACtC,MAAI,QAAQ;AAEZ,SAAO;AACR;AAEA,SAAS,oBAAoB,KAA+B,eAAgC;AAC3F,MAAI,yBAAyB,QAAQ;AACpC,QAAI,OAAO,aAAa;AAAA,EACzB,OAAO;AACN,UAAM,EAAE,MAAM,UAAU,gBAAgB,IAAI;AAE5C,QAAI,UAAU;AACb,UAAI,KAAK;AACT,UAAI,KAAK,UAAU,SAAS;AAC5B,UAAI,OAAO,IAAI;AACf,UAAI,QAAQ;AAAA,IACb,OAAO;AACN,UAAI,OAAO,IAAI;AAAA,IAChB;AAEA,QAAI,iBAAiB;AACpB,iBAAW,kBAAkB,iBAAiB;AAC7C,YAAI,OAAO,cAAc;AAAA,MAC1B;AAAA,IACD;AAAA,EACD;AACD;AAGO,MAAM,wBAAwB,KAAK,SAASA,yBAAwB;AAC1E,QAAM,SAAS,UAAU;AAGzB,MAAI,CAAC,OAAO,QAAQ,qBAAqB;AACxC,WAAO;AAAA,EACR;AAEA,SAAO,oBAAC,8BAA2B;AACpC,CAAC;AAED,MAAM,6BAA6B,KAAK,SAASC,8BAA6B;AAC7E,QAAM,SAAS,UAAU;AACzB,QAAM,YAAY,OAA0B,IAAI;AAGhD,QAAM,iBAAiB,OAAsB,IAAI;AACjD,QAAM,YAAY,aAAa;AAE/B,YAAU,MAAM;AACf,UAAM,QAAQ,OAAO,OAAO,WAAW,MAAM;AAC5C,qBAAe,UAAU;AAAA,IAC1B,GAAG,CAAC;AACJ,WAAO,MAAM,aAAa,KAAK;AAAA,EAChC,GAAG,CAAC,WAAW,MAAM,CAAC;AAGtB,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,cAAc;AAAA,IACnB;AAAA,IACA,MAAM;AACL,YAAM,oBAAoB,IAAI,IAAI,OAAO,mBAAmB,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAG9E,YAAM,eAAe,oBAAI,IAAe;AACxC,YAAM,gBAAgB,OAAO,iBAAiB;AAC9C,YAAM,kBAAkB,cAAc;AACtC,YAAM,kBAAkB,OAAO,QAAQ,eAAe,sBAAsB;AAC5E,YAAM,kBAAkB,OAAO;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAEA,UAAI,CAAC,oBAAoB,mBAAmB,kBAAkB;AAC7D,mBAAW,MAAM,OAAO,oBAAoB,GAAG;AAC9C,uBAAa,IAAI,EAAE;AAAA,QACpB;AACA,YAAI,mBAAmB,cAAc,oBAAoB,CAAC,cAAc,iBAAiB;AACxF,gBAAM,UAAU,OAAO,kBAAkB;AACzC,cAAI,QAAS,cAAa,IAAI,OAAO;AAAA,QACtC;AAAA,MACD;AAGA,YAAM,kBAAkB,OAAO,OAAO,mBAAmB,CAAC;AAG1D,YAAM,yBAAsD,CAAC;AAC7D,YAAM,gBAAgB,OAAO,iBAAiB;AAC9C,YAAM,gBAAgB,eAAe,IAAI;AAEzC,YAAM,gBAAgB,OAAO,iBAAiB;AAC9C,iBAAW,UAAU,cAAc,OAAO,GAAG;AAE5C,cAAM,WAAW,cAAc,KAAK,CAAC,MAAM,EAAE,WAAW,MAAM;AAC9D,YAAI,CAAC,YAAY,SAAS,kBAAkB,cAAe;AAG3D,cAAM,kBAAkB,SAAS,iBAAiB;AAAA,UACjD,CAAC,OAAO,kBAAkB,IAAI,EAAE,KAAK,CAAC,OAAO,cAAc,EAAE;AAAA,QAC9D;AAEA,YAAI,gBAAgB,SAAS,GAAG;AAC/B,iCAAuB,KAAK;AAAA,YAC3B,OAAO,SAAS;AAAA,YAChB,UAAU;AAAA,UACX,CAAC;AAAA,QACF;AAAA,MACD;AAEA,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,IACA,EAAE,SAAS,gBAAgB;AAAA,IAC3B,CAAC,QAAQ,cAAc;AAAA,EACxB;AAEA;AAAA,IACC;AAAA,IACA,MAAM;AACL,YAAM,SAAS,UAAU;AACzB,UAAI,CAAC,OAAQ;AAEb,YAAM,MAAM,OAAO,WAAW,IAAI;AAClC,UAAI,CAAC,IAAK;AAEV,YAAM,EAAE,cAAc,mBAAmB,iBAAiB,uBAAuB,IAChF,YAAY,IAAI;AAEjB,YAAM,EAAE,GAAG,EAAE,IAAI,OAAO,wBAAwB;AAChD,YAAM,MAAM,OAAO,iBAAiB,EAAE;AACtC,YAAM,EAAE,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,IAAI,OAAO,UAAU;AAEnD,YAAM,cAAc,KAAK,KAAK,IAAI,GAAG;AACrC,YAAM,eAAe,KAAK,KAAK,IAAI,GAAG;AAEtC,UAAI,OAAO,UAAU,eAAe,OAAO,WAAW,cAAc;AACnE,eAAO,QAAQ;AACf,eAAO,SAAS;AAChB,eAAO,MAAM,QAAQ,GAAG,CAAC;AACzB,eAAO,MAAM,SAAS,GAAG,CAAC;AAAA,MAC3B;AAEA,UAAI,eAAe;AACnB,UAAI,UAAU,GAAG,GAAG,OAAO,OAAO,OAAO,MAAM;AAE/C,UAAI,MAAM,KAAK,GAAG;AAClB,UAAI,MAAM,MAAM,IAAI;AACpB,UAAI,UAAU,IAAI,EAAE;AAEpB,UAAI,UAAU;AACd,UAAI,WAAW;AAIf,UAAI,YAAY,MAAM;AACtB,iBAAW,gBAAgB,wBAAwB;AAClD,YAAI,cAAc,aAAa;AAC/B,YAAI,cAAc;AAClB,mBAAW,WAAW,aAAa,UAAU;AAC5C,+BAAqB,KAAK,QAAQ,SAAS,iBAAiB;AAAA,QAC7D;AAAA,MACD;AAGA,UAAI,cAAc;AAGlB,UAAI,CAAC,eAAe,SAAS;AAC5B,uBAAe,UAAU,iBAAiB,MAAM,EAAE,iBAAiB,qBAAqB;AAAA,MACzF;AAEA,UAAI,cAAc,eAAe;AAGjC,UAAI,YAAY,MAAM;AACtB,iBAAW,WAAW,cAAc;AACnC,6BAAqB,KAAK,QAAQ,SAAS,iBAAiB;AAAA,MAC7D;AAGA,UAAI,gBAAgB,SAAS,GAAG;AAC/B,YAAI,YAAY,MAAM;AACtB,mBAAW,WAAW,iBAAiB;AACtC,+BAAqB,KAAK,QAAQ,SAAS,iBAAiB;AAAA,QAC7D;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAC,QAAQ,WAAW;AAAA,EACrB;AAEA,SAAO,oBAAC,YAAO,KAAK,WAAW,WAAU,wBAAuB;AACjE,CAAC;",
6
- "names": ["CanvasShapeIndicators", "CanvasShapeIndicatorsInner"]
7
- }
@@ -1,18 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useRef } from "react";
3
- import { useTransform } from "../../hooks/useTransform.mjs";
4
- import { toDomPrecision } from "../../primitives/utils.mjs";
5
- const DefaultBrush = ({ brush, color, opacity, className }) => {
6
- const rSvg = useRef(null);
7
- useTransform(rSvg, brush.x, brush.y);
8
- const w = toDomPrecision(Math.max(1, brush.w));
9
- const h = toDomPrecision(Math.max(1, brush.h));
10
- return /* @__PURE__ */ jsx("svg", { className: "tl-overlays__item", ref: rSvg, "aria-hidden": "true", children: color ? /* @__PURE__ */ jsxs("g", { className: "tl-brush", opacity, children: [
11
- /* @__PURE__ */ jsx("rect", { width: w, height: h, fill: color, opacity: 0.75 }),
12
- /* @__PURE__ */ jsx("rect", { width: w, height: h, fill: "none", stroke: color, opacity: 0.1 })
13
- ] }) : /* @__PURE__ */ jsx("rect", { className: `tl-brush tl-brush__default ${className}`, width: w, height: h }) });
14
- };
15
- export {
16
- DefaultBrush
17
- };
18
- //# sourceMappingURL=DefaultBrush.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/components/default-components/DefaultBrush.tsx"],
4
- "sourcesContent": ["import { BoxModel } from '@tldraw/tlschema'\nimport { useRef } from 'react'\nimport { useTransform } from '../../hooks/useTransform'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLBrushProps {\n\tuserId?: string\n\tbrush: BoxModel\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps) => {\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\tuseTransform(rSvg, brush.x, brush.y)\n\n\tconst w = toDomPrecision(Math.max(1, brush.w))\n\tconst h = toDomPrecision(Math.max(1, brush.h))\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\" ref={rSvg} aria-hidden=\"true\">\n\t\t\t{color ? (\n\t\t\t\t<g className=\"tl-brush\" opacity={opacity}>\n\t\t\t\t\t<rect width={w} height={h} fill={color} opacity={0.75} />\n\t\t\t\t\t<rect width={w} height={h} fill=\"none\" stroke={color} opacity={0.1} />\n\t\t\t\t</g>\n\t\t\t) : (\n\t\t\t\t<rect className={`tl-brush tl-brush__default ${className}`} width={w} height={h} />\n\t\t\t)}\n\t\t</svg>\n\t)\n}\n"],
5
- "mappings": "AAyBI,SACC,KADD;AAxBJ,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAYxB,MAAM,eAAe,CAAC,EAAE,OAAO,OAAO,SAAS,UAAU,MAAoB;AACnF,QAAM,OAAO,OAAsB,IAAI;AACvC,eAAa,MAAM,MAAM,GAAG,MAAM,CAAC;AAEnC,QAAM,IAAI,eAAe,KAAK,IAAI,GAAG,MAAM,CAAC,CAAC;AAC7C,QAAM,IAAI,eAAe,KAAK,IAAI,GAAG,MAAM,CAAC,CAAC;AAE7C,SACC,oBAAC,SAAI,WAAU,qBAAoB,KAAK,MAAM,eAAY,QACxD,kBACA,qBAAC,OAAE,WAAU,YAAW,SACvB;AAAA,wBAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAM,OAAO,SAAS,MAAM;AAAA,IACvD,oBAAC,UAAK,OAAO,GAAG,QAAQ,GAAG,MAAK,QAAO,QAAQ,OAAO,SAAS,KAAK;AAAA,KACrE,IAEA,oBAAC,UAAK,WAAW,8BAA8B,SAAS,IAAI,OAAO,GAAG,QAAQ,GAAG,GAEnF;AAEF;",
6
- "names": []
7
- }
@@ -1,41 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import classNames from "classnames";
3
- import { useRef } from "react";
4
- import { useSharedSafeId } from "../../hooks/useSafeId.mjs";
5
- import { useTransform } from "../../hooks/useTransform.mjs";
6
- import { clamp } from "../../primitives/utils.mjs";
7
- import { Vec } from "../../primitives/Vec.mjs";
8
- function DefaultCollaboratorHint({
9
- className,
10
- zoom,
11
- point,
12
- color,
13
- viewport,
14
- opacity = 1
15
- }) {
16
- const rSvg = useRef(null);
17
- useTransform(
18
- rSvg,
19
- clamp(point.x, viewport.minX + 5 / zoom, viewport.maxX - 5 / zoom),
20
- clamp(point.y, viewport.minY + 5 / zoom, viewport.maxY - 5 / zoom),
21
- 1 / zoom,
22
- Vec.Angle(viewport.center, point)
23
- );
24
- const cursorHintId = useSharedSafeId("cursor_hint");
25
- return /* @__PURE__ */ jsxs("svg", { ref: rSvg, className: classNames("tl-overlays__item", className), "aria-hidden": "true", children: [
26
- /* @__PURE__ */ jsx(
27
- "use",
28
- {
29
- href: `#${cursorHintId}`,
30
- color,
31
- strokeWidth: 3,
32
- stroke: "var(--tl-color-background)"
33
- }
34
- ),
35
- /* @__PURE__ */ jsx("use", { href: `#${cursorHintId}`, color, opacity })
36
- ] });
37
- }
38
- export {
39
- DefaultCollaboratorHint
40
- };
41
- //# sourceMappingURL=DefaultCollaboratorHint.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/components/default-components/DefaultCollaboratorHint.tsx"],
4
- "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { clamp } from '../../primitives/utils'\nimport { Vec } from '../../primitives/Vec'\n\n/** @public */\nexport interface TLCollaboratorHintProps {\n\tuserId: string\n\tclassName?: string\n\tpoint: VecModel\n\tviewport: Box\n\tzoom: number\n\topacity?: number\n\tcolor: string\n}\n\n/** @public @react */\nexport function DefaultCollaboratorHint({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tviewport,\n\topacity = 1,\n}: TLCollaboratorHintProps) {\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tuseTransform(\n\t\trSvg,\n\t\tclamp(point.x, viewport.minX + 5 / zoom, viewport.maxX - 5 / zoom),\n\t\tclamp(point.y, viewport.minY + 5 / zoom, viewport.maxY - 5 / zoom),\n\t\t1 / zoom,\n\t\tVec.Angle(viewport.center, point)\n\t)\n\tconst cursorHintId = useSharedSafeId('cursor_hint')\n\n\treturn (\n\t\t<svg ref={rSvg} className={classNames('tl-overlays__item', className)} aria-hidden=\"true\">\n\t\t\t<use\n\t\t\t\thref={`#${cursorHintId}`}\n\t\t\t\tcolor={color}\n\t\t\t\tstrokeWidth={3}\n\t\t\t\tstroke=\"var(--tl-color-background)\"\n\t\t\t/>\n\t\t\t<use href={`#${cursorHintId}`} color={color} opacity={opacity} />\n\t\t</svg>\n\t)\n}\n"],
5
- "mappings": "AAyCE,SACC,KADD;AAxCF,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAE7B,SAAS,aAAa;AACtB,SAAS,WAAW;AAcb,SAAS,wBAAwB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACX,GAA4B;AAC3B,QAAM,OAAO,OAAsB,IAAI;AAEvC;AAAA,IACC;AAAA,IACA,MAAM,MAAM,GAAG,SAAS,OAAO,IAAI,MAAM,SAAS,OAAO,IAAI,IAAI;AAAA,IACjE,MAAM,MAAM,GAAG,SAAS,OAAO,IAAI,MAAM,SAAS,OAAO,IAAI,IAAI;AAAA,IACjE,IAAI;AAAA,IACJ,IAAI,MAAM,SAAS,QAAQ,KAAK;AAAA,EACjC;AACA,QAAM,eAAe,gBAAgB,aAAa;AAElD,SACC,qBAAC,SAAI,KAAK,MAAM,WAAW,WAAW,qBAAqB,SAAS,GAAG,eAAY,QAClF;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,MAAM,IAAI,YAAY;AAAA,QACtB;AAAA,QACA,aAAa;AAAA,QACb,QAAO;AAAA;AAAA,IACR;AAAA,IACA,oBAAC,SAAI,MAAM,IAAI,YAAY,IAAI,OAAc,SAAkB;AAAA,KAChE;AAEF;",
6
- "names": []
7
- }
@@ -1,29 +0,0 @@
1
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import classNames from "classnames";
3
- import { memo, useRef } from "react";
4
- import { useSharedSafeId } from "../../hooks/useSafeId.mjs";
5
- import { useTransform } from "../../hooks/useTransform.mjs";
6
- const DefaultCursor = memo(function DefaultCursor2({
7
- className,
8
- zoom,
9
- point,
10
- color,
11
- name,
12
- chatMessage
13
- }) {
14
- const rCursor = useRef(null);
15
- useTransform(rCursor, point?.x, point?.y, 1 / zoom);
16
- const cursorId = useSharedSafeId("cursor");
17
- if (!point) return null;
18
- return /* @__PURE__ */ jsxs("div", { ref: rCursor, className: classNames("tl-overlays__item", className), children: [
19
- /* @__PURE__ */ jsx("svg", { className: "tl-cursor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { href: `#${cursorId}`, color }) }),
20
- chatMessage ? /* @__PURE__ */ jsxs(Fragment, { children: [
21
- name && /* @__PURE__ */ jsx("div", { className: "tl-nametag-title", style: { color }, children: name }),
22
- /* @__PURE__ */ jsx("div", { className: "tl-nametag-chat", style: { backgroundColor: color }, children: chatMessage })
23
- ] }) : name && /* @__PURE__ */ jsx("div", { className: "tl-nametag", style: { backgroundColor: color }, children: name })
24
- ] });
25
- });
26
- export {
27
- DefaultCursor
28
- };
29
- //# sourceMappingURL=DefaultCursor.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/components/default-components/DefaultCursor.tsx"],
4
- "sourcesContent": ["import { VecModel } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useRef } from 'react'\nimport { useSharedSafeId } from '../../hooks/useSafeId'\nimport { useTransform } from '../../hooks/useTransform'\n\n/** @public */\nexport interface TLCursorProps {\n\tuserId: string\n\tclassName?: string\n\tpoint: VecModel | null\n\tzoom: number\n\tcolor?: string\n\tname: string | null\n\tchatMessage: string\n}\n\n/** @public @react */\nexport const DefaultCursor = memo(function DefaultCursor({\n\tclassName,\n\tzoom,\n\tpoint,\n\tcolor,\n\tname,\n\tchatMessage,\n}: TLCursorProps) {\n\tconst rCursor = useRef<HTMLDivElement>(null)\n\tuseTransform(rCursor, point?.x, point?.y, 1 / zoom)\n\n\tconst cursorId = useSharedSafeId('cursor')\n\n\tif (!point) return null\n\n\treturn (\n\t\t<div ref={rCursor} className={classNames('tl-overlays__item', className)}>\n\t\t\t<svg className=\"tl-cursor\" aria-hidden=\"true\">\n\t\t\t\t<use href={`#${cursorId}`} color={color} />\n\t\t\t</svg>\n\t\t\t{chatMessage ? (\n\t\t\t\t<>\n\t\t\t\t\t{name && (\n\t\t\t\t\t\t<div className=\"tl-nametag-title\" style={{ color }}>\n\t\t\t\t\t\t\t{name}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className=\"tl-nametag-chat\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{chatMessage}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\tname && (\n\t\t\t\t\t<div className=\"tl-nametag\" style={{ backgroundColor: color }}>\n\t\t\t\t\t\t{name}\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t)}\n\t\t</div>\n\t)\n})\n"],
5
- "mappings": "AAoCI,SAGA,UAHA,KAGA,YAHA;AAnCJ,OAAO,gBAAgB;AACvB,SAAS,MAAM,cAAc;AAC7B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AActB,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkB;AACjB,QAAM,UAAU,OAAuB,IAAI;AAC3C,eAAa,SAAS,OAAO,GAAG,OAAO,GAAG,IAAI,IAAI;AAElD,QAAM,WAAW,gBAAgB,QAAQ;AAEzC,MAAI,CAAC,MAAO,QAAO;AAEnB,SACC,qBAAC,SAAI,KAAK,SAAS,WAAW,WAAW,qBAAqB,SAAS,GACtE;AAAA,wBAAC,SAAI,WAAU,aAAY,eAAY,QACtC,8BAAC,SAAI,MAAM,IAAI,QAAQ,IAAI,OAAc,GAC1C;AAAA,IACC,cACA,iCACE;AAAA,cACA,oBAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,MAAM,GAC/C,gBACF;AAAA,MAED,oBAAC,SAAI,WAAU,mBAAkB,OAAO,EAAE,iBAAiB,MAAM,GAC/D,uBACF;AAAA,OACD,IAEA,QACC,oBAAC,SAAI,WAAU,cAAa,OAAO,EAAE,iBAAiB,MAAM,GAC1D,gBACF;AAAA,KAGH;AAEF,CAAC;",
6
- "names": ["DefaultCursor"]
7
- }
@@ -1,26 +0,0 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import classNames from "classnames";
3
- import { SIDES } from "../../constants.mjs";
4
- import { useEditor } from "../../hooks/useEditor.mjs";
5
- function DefaultHandle({ handle, isCoarse, className, zoom }) {
6
- const editor = useEditor();
7
- const br = (isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoom;
8
- if (handle.type === "clone") {
9
- const fr2 = 3 / zoom;
10
- const path = `M0,${-fr2} A${fr2},${fr2} 0 0,1 0,${fr2}`;
11
- const index = SIDES.indexOf(handle.id);
12
- return /* @__PURE__ */ jsxs("g", { className: classNames(`tl-handle tl-handle__${handle.type}`, className), children: [
13
- /* @__PURE__ */ jsx("circle", { className: "tl-handle__bg", r: br }),
14
- /* @__PURE__ */ jsx("path", { className: "tl-handle__fg", d: path, transform: `rotate(${-90 + 90 * index})` })
15
- ] });
16
- }
17
- const fr = (handle.type === "create" && isCoarse ? 3 : 4) / Math.max(zoom, 0.25);
18
- return /* @__PURE__ */ jsxs("g", { className: classNames(`tl-handle tl-handle__${handle.type}`, className), children: [
19
- /* @__PURE__ */ jsx("circle", { className: "tl-handle__bg", r: br }),
20
- /* @__PURE__ */ jsx("circle", { className: "tl-handle__fg", r: fr })
21
- ] });
22
- }
23
- export {
24
- DefaultHandle
25
- };
26
- //# sourceMappingURL=DefaultHandle.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/components/default-components/DefaultHandle.tsx"],
4
- "sourcesContent": ["import { TLHandle, TLShapeId } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { SIDES } from '../../constants'\nimport { useEditor } from '../../hooks/useEditor'\n\n/** @public */\nexport interface TLHandleProps {\n\tshapeId: TLShapeId\n\thandle: TLHandle\n\tzoom: number\n\tisCoarse: boolean\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps) {\n\tconst editor = useEditor()\n\tconst br = (isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoom\n\n\tif (handle.type === 'clone') {\n\t\t// bouba\n\t\tconst fr = 3 / zoom\n\t\tconst path = `M0,${-fr} A${fr},${fr} 0 0,1 0,${fr}`\n\n\t\tconst index = SIDES.indexOf(handle.id as (typeof SIDES)[number])\n\t\treturn (\n\t\t\t<g className={classNames(`tl-handle tl-handle__${handle.type}`, className)}>\n\t\t\t\t<circle className=\"tl-handle__bg\" r={br} />\n\t\t\t\t{/* Half circle */}\n\t\t\t\t<path className=\"tl-handle__fg\" d={path} transform={`rotate(${-90 + 90 * index})`} />\n\t\t\t</g>\n\t\t)\n\t}\n\n\tconst fr = (handle.type === 'create' && isCoarse ? 3 : 4) / Math.max(zoom, 0.25)\n\treturn (\n\t\t<g className={classNames(`tl-handle tl-handle__${handle.type}`, className)}>\n\t\t\t<circle className=\"tl-handle__bg\" r={br} />\n\t\t\t<circle className=\"tl-handle__fg\" r={fr} />\n\t\t</g>\n\t)\n}\n"],
5
- "mappings": "AA0BG,SACC,KADD;AAzBH,OAAO,gBAAgB;AACvB,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAYnB,SAAS,cAAc,EAAE,QAAQ,UAAU,WAAW,KAAK,GAAkB;AACnF,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,WAAW,OAAO,QAAQ,qBAAqB,OAAO,QAAQ,gBAAgB;AAE1F,MAAI,OAAO,SAAS,SAAS;AAE5B,UAAMA,MAAK,IAAI;AACf,UAAM,OAAO,MAAM,CAACA,GAAE,KAAKA,GAAE,IAAIA,GAAE,YAAYA,GAAE;AAEjD,UAAM,QAAQ,MAAM,QAAQ,OAAO,EAA4B;AAC/D,WACC,qBAAC,OAAE,WAAW,WAAW,wBAAwB,OAAO,IAAI,IAAI,SAAS,GACxE;AAAA,0BAAC,YAAO,WAAU,iBAAgB,GAAG,IAAI;AAAA,MAEzC,oBAAC,UAAK,WAAU,iBAAgB,GAAG,MAAM,WAAW,UAAU,MAAM,KAAK,KAAK,KAAK;AAAA,OACpF;AAAA,EAEF;AAEA,QAAM,MAAM,OAAO,SAAS,YAAY,WAAW,IAAI,KAAK,KAAK,IAAI,MAAM,IAAI;AAC/E,SACC,qBAAC,OAAE,WAAW,WAAW,wBAAwB,OAAO,IAAI,IAAI,SAAS,GACxE;AAAA,wBAAC,YAAO,WAAU,iBAAgB,GAAG,IAAI;AAAA,IACzC,oBAAC,YAAO,WAAU,iBAAgB,GAAG,IAAI;AAAA,KAC1C;AAEF;",
6
- "names": ["fr"]
7
- }
@@ -1,8 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- const DefaultHandles = ({ children }) => {
3
- return /* @__PURE__ */ jsx("svg", { className: "tl-user-handles tl-overlays__item", "aria-hidden": "true", children });
4
- };
5
- export {
6
- DefaultHandles
7
- };
8
- //# sourceMappingURL=DefaultHandles.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/components/default-components/DefaultHandles.tsx"],
4
- "sourcesContent": ["import { ReactNode } from 'react'\n\n/** @public */\nexport interface TLHandlesProps {\n\tchildren: ReactNode\n}\n\n/** @public @react */\nexport const DefaultHandles = ({ children }: TLHandlesProps) => {\n\treturn (\n\t\t<svg className=\"tl-user-handles tl-overlays__item\" aria-hidden=\"true\">\n\t\t\t{children}\n\t\t</svg>\n\t)\n}\n"],
5
- "mappings": "AAUE;AAFK,MAAM,iBAAiB,CAAC,EAAE,SAAS,MAAsB;AAC/D,SACC,oBAAC,SAAI,WAAU,qCAAoC,eAAY,QAC7D,UACF;AAEF;",
6
- "names": []
7
- }
@@ -1,21 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import classNames from "classnames";
3
- import { getSvgPathFromPoints } from "../../utils/getSvgPathFromPoints.mjs";
4
- function DefaultScribble({ scribble, zoom, color, opacity, className }) {
5
- if (!scribble.points.length) return null;
6
- return /* @__PURE__ */ jsx("svg", { className: className ? classNames("tl-overlays__item", className) : className, children: /* @__PURE__ */ jsx(
7
- "path",
8
- {
9
- className: "tl-scribble",
10
- d: getSvgPathFromPoints(scribble.points, false),
11
- stroke: color ?? `var(--tl-color-${scribble.color})`,
12
- fill: "none",
13
- strokeWidth: 8 / zoom,
14
- opacity: opacity ?? scribble.opacity
15
- }
16
- ) });
17
- }
18
- export {
19
- DefaultScribble
20
- };
21
- //# sourceMappingURL=DefaultScribble.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/components/default-components/DefaultScribble.tsx"],
4
- "sourcesContent": ["import { TLScribble } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'\n\n/** @public */\nexport interface TLScribbleProps {\n\tuserId?: string\n\tscribble: TLScribble\n\tzoom: number\n\tcolor?: string\n\topacity?: number\n\tclassName?: string\n}\n\n/** @public @react */\nexport function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {\n\tif (!scribble.points.length) return null\n\n\treturn (\n\t\t<svg className={className ? classNames('tl-overlays__item', className) : className}>\n\t\t\t<path\n\t\t\t\tclassName=\"tl-scribble\"\n\t\t\t\td={getSvgPathFromPoints(scribble.points, false)}\n\t\t\t\tstroke={color ?? `var(--tl-color-${scribble.color})`}\n\t\t\t\tfill=\"none\"\n\t\t\t\tstrokeWidth={8 / zoom}\n\t\t\t\topacity={opacity ?? scribble.opacity}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
5
- "mappings": "AAoBG;AAnBH,OAAO,gBAAgB;AACvB,SAAS,4BAA4B;AAa9B,SAAS,gBAAgB,EAAE,UAAU,MAAM,OAAO,SAAS,UAAU,GAAoB;AAC/F,MAAI,CAAC,SAAS,OAAO,OAAQ,QAAO;AAEpC,SACC,oBAAC,SAAI,WAAW,YAAY,WAAW,qBAAqB,SAAS,IAAI,WACxE;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,GAAG,qBAAqB,SAAS,QAAQ,KAAK;AAAA,MAC9C,QAAQ,SAAS,kBAAkB,SAAS,KAAK;AAAA,MACjD,MAAK;AAAA,MACL,aAAa,IAAI;AAAA,MACjB,SAAS,WAAW,SAAS;AAAA;AAAA,EAC9B,GACD;AAEF;",
6
- "names": []
7
- }
@@ -1,39 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useValue } from "@tldraw/state-react";
3
- import classNames from "classnames";
4
- import { useRef } from "react";
5
- import { useEditor } from "../../hooks/useEditor.mjs";
6
- import { useTransform } from "../../hooks/useTransform.mjs";
7
- import { Box } from "../../primitives/Box.mjs";
8
- import { toDomPrecision } from "../../primitives/utils.mjs";
9
- function DefaultSelectionForeground({ bounds, rotation }) {
10
- const editor = useEditor();
11
- const rSvg = useRef(null);
12
- const onlyShape = useValue("only selected shape", () => editor.getOnlySelectedShape(), [editor]);
13
- const expandOutlineBy = onlyShape ? editor.getShapeUtil(onlyShape).expandSelectionOutlinePx(onlyShape) : 0;
14
- useTransform(rSvg, bounds?.x, bounds?.y, 1, rotation, {
15
- x: -expandOutlineBy,
16
- y: -expandOutlineBy
17
- });
18
- bounds = expandOutlineBy instanceof Box ? bounds.clone().expand(expandOutlineBy).zeroFix() : bounds.clone().expandBy(expandOutlineBy).zeroFix();
19
- return /* @__PURE__ */ jsx(
20
- "svg",
21
- {
22
- ref: rSvg,
23
- className: "tl-overlays__item tl-selection__fg",
24
- "data-testid": "selection-foreground",
25
- children: /* @__PURE__ */ jsx(
26
- "rect",
27
- {
28
- className: classNames("tl-selection__fg__outline"),
29
- width: toDomPrecision(bounds.width),
30
- height: toDomPrecision(bounds.height)
31
- }
32
- )
33
- }
34
- );
35
- }
36
- export {
37
- DefaultSelectionForeground
38
- };
39
- //# sourceMappingURL=DefaultSelectionForeground.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/components/default-components/DefaultSelectionForeground.tsx"],
4
- "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLSelectionForegroundProps {\n\tbounds: Box\n\trotation: number\n}\n\n/** @public @react */\nexport function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps) {\n\tconst editor = useEditor()\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tconst onlyShape = useValue('only selected shape', () => editor.getOnlySelectedShape(), [editor])\n\n\t// if all shapes have an expandBy for the selection outline, we can expand by the l\n\tconst expandOutlineBy = onlyShape\n\t\t? editor.getShapeUtil(onlyShape).expandSelectionOutlinePx(onlyShape)\n\t\t: 0\n\n\tuseTransform(rSvg, bounds?.x, bounds?.y, 1, rotation, {\n\t\tx: -expandOutlineBy,\n\t\ty: -expandOutlineBy,\n\t})\n\n\tbounds =\n\t\texpandOutlineBy instanceof Box\n\t\t\t? bounds.clone().expand(expandOutlineBy).zeroFix()\n\t\t\t: bounds.clone().expandBy(expandOutlineBy).zeroFix()\n\n\treturn (\n\t\t<svg\n\t\t\tref={rSvg}\n\t\t\tclassName=\"tl-overlays__item tl-selection__fg\"\n\t\t\tdata-testid=\"selection-foreground\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tclassName={classNames('tl-selection__fg__outline')}\n\t\t\t\twidth={toDomPrecision(bounds.width)}\n\t\t\t\theight={toDomPrecision(bounds.height)}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
5
- "mappings": "AA0CG;AA1CH,SAAS,gBAAgB;AACzB,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,WAAW;AACpB,SAAS,sBAAsB;AASxB,SAAS,2BAA2B,EAAE,QAAQ,SAAS,GAA+B;AAC5F,QAAM,SAAS,UAAU;AACzB,QAAM,OAAO,OAAsB,IAAI;AAEvC,QAAM,YAAY,SAAS,uBAAuB,MAAM,OAAO,qBAAqB,GAAG,CAAC,MAAM,CAAC;AAG/F,QAAM,kBAAkB,YACrB,OAAO,aAAa,SAAS,EAAE,yBAAyB,SAAS,IACjE;AAEH,eAAa,MAAM,QAAQ,GAAG,QAAQ,GAAG,GAAG,UAAU;AAAA,IACrD,GAAG,CAAC;AAAA,IACJ,GAAG,CAAC;AAAA,EACL,CAAC;AAED,WACC,2BAA2B,MACxB,OAAO,MAAM,EAAE,OAAO,eAAe,EAAE,QAAQ,IAC/C,OAAO,MAAM,EAAE,SAAS,eAAe,EAAE,QAAQ;AAErD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,WAAW,2BAA2B;AAAA,UACjD,OAAO,eAAe,OAAO,KAAK;AAAA,UAClC,QAAQ,eAAe,OAAO,MAAM;AAAA;AAAA,MACrC;AAAA;AAAA,EACD;AAEF;",
6
- "names": []
7
- }
@@ -1,77 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useQuickReactor, useStateTracking, useValue } from "@tldraw/state-react";
3
- import classNames from "classnames";
4
- import { memo, useLayoutEffect, useRef } from "react";
5
- import { useEditorComponents } from "../../hooks/EditorComponentsContext.mjs";
6
- import { useEditor } from "../../hooks/useEditor.mjs";
7
- import { OptionalErrorBoundary } from "../ErrorBoundary.mjs";
8
- const EvenInnererIndicator = memo(
9
- ({ shape, util }) => {
10
- return useStateTracking(
11
- "Indicator: " + shape.type,
12
- () => (
13
- // always fetch the latest shape from the store even if the props/meta have not changed, to avoid
14
- // calling the render method with stale data.
15
- (util.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id)))
16
- )
17
- );
18
- },
19
- (prevProps, nextProps) => {
20
- return prevProps.shape.props === nextProps.shape.props && prevProps.shape.meta === nextProps.shape.meta;
21
- }
22
- );
23
- const InnerIndicator = memo(({ editor, id }) => {
24
- const shape = useValue("shape for indicator", () => editor.store.get(id), [editor, id]);
25
- const { ShapeIndicatorErrorFallback } = useEditorComponents();
26
- if (!shape || shape.isLocked) return null;
27
- const util = editor.getShapeUtil(shape);
28
- if (editor.options.useCanvasIndicators && !util.useLegacyIndicator()) return null;
29
- return /* @__PURE__ */ jsx(
30
- OptionalErrorBoundary,
31
- {
32
- fallback: ShapeIndicatorErrorFallback,
33
- onError: (error) => editor.annotateError(error, { origin: "react.shapeIndicator", willCrashApp: false }),
34
- children: /* @__PURE__ */ jsx(EvenInnererIndicator, { shape, util }, shape.id)
35
- }
36
- );
37
- });
38
- const DefaultShapeIndicator = memo(function DefaultShapeIndicator2({
39
- shapeId,
40
- className,
41
- color,
42
- hidden,
43
- opacity
44
- }) {
45
- const editor = useEditor();
46
- const rIndicator = useRef(null);
47
- useQuickReactor(
48
- "indicator transform",
49
- () => {
50
- if (hidden) return;
51
- const elm = rIndicator.current;
52
- if (!elm) return;
53
- const pageTransform = editor.getShapePageTransform(shapeId);
54
- if (!pageTransform) return;
55
- elm.style.setProperty("transform", pageTransform.toCssString());
56
- },
57
- [editor, shapeId, hidden]
58
- );
59
- useLayoutEffect(() => {
60
- const elm = rIndicator.current;
61
- if (!elm) return;
62
- elm.style.setProperty("display", hidden ? "none" : "block");
63
- }, [hidden]);
64
- return /* @__PURE__ */ jsx("svg", { ref: rIndicator, className: classNames("tl-overlays__item", className), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
65
- "g",
66
- {
67
- className: "tl-shape-indicator",
68
- stroke: color ?? "var(--tl-color-selected)",
69
- opacity,
70
- children: /* @__PURE__ */ jsx(InnerIndicator, { editor, id: shapeId })
71
- }
72
- ) });
73
- });
74
- export {
75
- DefaultShapeIndicator
76
- };
77
- //# sourceMappingURL=DefaultShapeIndicator.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../src/lib/components/default-components/DefaultShapeIndicator.tsx"],
4
- "sourcesContent": ["import { useQuickReactor, useStateTracking, useValue } from '@tldraw/state-react'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport type { Editor } from '../../editor/Editor'\nimport { ShapeUtil } from '../../editor/shapes/ShapeUtil'\nimport { useEditorComponents } from '../../hooks/EditorComponentsContext'\nimport { useEditor } from '../../hooks/useEditor'\nimport { OptionalErrorBoundary } from '../ErrorBoundary'\n\n// need an extra layer of indirection here to allow hooks to be used inside the indicator render\nconst EvenInnererIndicator = memo(\n\t({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {\n\t\treturn useStateTracking('Indicator: ' + shape.type, () =>\n\t\t\t// always fetch the latest shape from the store even if the props/meta have not changed, to avoid\n\t\t\t// calling the render method with stale data.\n\t\t\tutil.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)\n\t\t)\n\t},\n\t(prevProps, nextProps) => {\n\t\treturn (\n\t\t\tprevProps.shape.props === nextProps.shape.props &&\n\t\t\tprevProps.shape.meta === nextProps.shape.meta\n\t\t)\n\t}\n)\n\nconst InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId }) => {\n\tconst shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])\n\n\tconst { ShapeIndicatorErrorFallback } = useEditorComponents()\n\n\tif (!shape || shape.isLocked) return null\n\n\tconst util = editor.getShapeUtil(shape)\n\n\t// If canvas indicators are enabled and the shape uses them, it will be rendered by CanvasShapeIndicators\n\tif (editor.options.useCanvasIndicators && !util.useLegacyIndicator()) return null\n\n\treturn (\n\t\t<OptionalErrorBoundary\n\t\t\tfallback={ShapeIndicatorErrorFallback}\n\t\t\tonError={(error) =>\n\t\t\t\teditor.annotateError(error, { origin: 'react.shapeIndicator', willCrashApp: false })\n\t\t\t}\n\t\t>\n\t\t\t<EvenInnererIndicator key={shape.id} shape={shape} util={util} />\n\t\t</OptionalErrorBoundary>\n\t)\n})\n\n/** @public */\nexport interface TLShapeIndicatorProps {\n\tuserId?: string\n\tshapeId: TLShapeId\n\tcolor?: string | undefined\n\topacity?: number\n\tclassName?: string\n\thidden?: boolean\n}\n\n/** @public @react */\nexport const DefaultShapeIndicator = memo(function DefaultShapeIndicator({\n\tshapeId,\n\tclassName,\n\tcolor,\n\thidden,\n\topacity,\n}: TLShapeIndicatorProps) {\n\tconst editor = useEditor()\n\n\tconst rIndicator = useRef<SVGSVGElement>(null)\n\n\tuseQuickReactor(\n\t\t'indicator transform',\n\t\t() => {\n\t\t\tif (hidden) return\n\t\t\tconst elm = rIndicator.current\n\t\t\tif (!elm) return\n\t\t\tconst pageTransform = editor.getShapePageTransform(shapeId)\n\t\t\tif (!pageTransform) return\n\t\t\telm.style.setProperty('transform', pageTransform.toCssString())\n\t\t},\n\t\t[editor, shapeId, hidden]\n\t)\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = rIndicator.current\n\t\tif (!elm) return\n\t\telm.style.setProperty('display', hidden ? 'none' : 'block')\n\t}, [hidden])\n\n\treturn (\n\t\t<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden=\"true\">\n\t\t\t<g\n\t\t\t\tclassName=\"tl-shape-indicator\"\n\t\t\t\tstroke={color ?? 'var(--tl-color-selected)'}\n\t\t\t\topacity={opacity}\n\t\t\t>\n\t\t\t\t<InnerIndicator editor={editor} id={shapeId} />\n\t\t\t</g>\n\t\t</svg>\n\t)\n})\n"],
5
- "mappings": "AA8CG;AA9CH,SAAS,iBAAiB,kBAAkB,gBAAgB;AAE5D,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB,cAAc;AAG9C,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AAGtC,MAAM,uBAAuB;AAAA,EAC5B,CAAC,EAAE,OAAO,KAAK,MAAgD;AAC9D,WAAO;AAAA,MAAiB,gBAAgB,MAAM;AAAA,MAAM;AAAA;AAAA;AAAA,QAGnD,KAAK,UAAU,KAAK,OAAO,MAAM,wBAAwB,MAAM,EAAE,CAAY;AAAA;AAAA,IAC9E;AAAA,EACD;AAAA,EACA,CAAC,WAAW,cAAc;AACzB,WACC,UAAU,MAAM,UAAU,UAAU,MAAM,SAC1C,UAAU,MAAM,SAAS,UAAU,MAAM;AAAA,EAE3C;AACD;AAEA,MAAM,iBAAiB,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAyC;AAClF,QAAM,QAAQ,SAAS,uBAAuB,MAAM,OAAO,MAAM,IAAI,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEtF,QAAM,EAAE,4BAA4B,IAAI,oBAAoB;AAE5D,MAAI,CAAC,SAAS,MAAM,SAAU,QAAO;AAErC,QAAM,OAAO,OAAO,aAAa,KAAK;AAGtC,MAAI,OAAO,QAAQ,uBAAuB,CAAC,KAAK,mBAAmB,EAAG,QAAO;AAE7E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAU;AAAA,MACV,SAAS,CAAC,UACT,OAAO,cAAc,OAAO,EAAE,QAAQ,wBAAwB,cAAc,MAAM,CAAC;AAAA,MAGpF,8BAAC,wBAAoC,OAAc,QAAxB,MAAM,EAA8B;AAAA;AAAA,EAChE;AAEF,CAAC;AAaM,MAAM,wBAAwB,KAAK,SAASA,uBAAsB;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA0B;AACzB,QAAM,SAAS,UAAU;AAEzB,QAAM,aAAa,OAAsB,IAAI;AAE7C;AAAA,IACC;AAAA,IACA,MAAM;AACL,UAAI,OAAQ;AACZ,YAAM,MAAM,WAAW;AACvB,UAAI,CAAC,IAAK;AACV,YAAM,gBAAgB,OAAO,sBAAsB,OAAO;AAC1D,UAAI,CAAC,cAAe;AACpB,UAAI,MAAM,YAAY,aAAa,cAAc,YAAY,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,QAAQ,SAAS,MAAM;AAAA,EACzB;AAEA,kBAAgB,MAAM;AACrB,UAAM,MAAM,WAAW;AACvB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,YAAY,WAAW,SAAS,SAAS,OAAO;AAAA,EAC3D,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,oBAAC,SAAI,KAAK,YAAY,WAAW,WAAW,qBAAqB,SAAS,GAAG,eAAY,QACxF;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,QAAQ,SAAS;AAAA,MACjB;AAAA,MAEA,8BAAC,kBAAe,QAAgB,IAAI,SAAS;AAAA;AAAA,EAC9C,GACD;AAEF,CAAC;",
6
- "names": ["DefaultShapeIndicator"]
7
- }
@@ -1,8 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- const DefaultShapeIndicatorErrorFallback = () => {
3
- return /* @__PURE__ */ jsx("circle", { cx: 4, cy: 4, r: 8, strokeWidth: "1", stroke: "red" });
4
- };
5
- export {
6
- DefaultShapeIndicatorErrorFallback
7
- };
8
- //# sourceMappingURL=DefaultShapeIndicatorErrorFallback.mjs.map