@tldraw/editor 4.1.0-canary.e4499a57ef5b → 4.1.0-canary.e87046ba1a0c

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 (65) hide show
  1. package/dist-cjs/index.d.ts +16 -1
  2. package/dist-cjs/index.js +1 -1
  3. package/dist-cjs/lib/TldrawEditor.js +2 -2
  4. package/dist-cjs/lib/components/ErrorBoundary.js +1 -1
  5. package/dist-cjs/lib/components/HTMLContainer.js +1 -1
  6. package/dist-cjs/lib/components/SVGContainer.js +1 -1
  7. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +1 -1
  8. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +1 -1
  9. package/dist-cjs/lib/components/default-components/DefaultCursor.js +1 -1
  10. package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js +1 -1
  11. package/dist-cjs/lib/components/default-components/DefaultHandle.js +1 -1
  12. package/dist-cjs/lib/components/default-components/DefaultScribble.js +1 -1
  13. package/dist-cjs/lib/components/default-components/DefaultSelectionBackground.js +1 -1
  14. package/dist-cjs/lib/components/default-components/DefaultSelectionForeground.js +1 -1
  15. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +1 -1
  16. package/dist-cjs/lib/components/default-components/DefaultShapeWrapper.js +1 -1
  17. package/dist-cjs/lib/components/default-components/DefaultSnapIndictor.js +2 -2
  18. package/dist-cjs/lib/components/default-components/DefaultSpinner.js +1 -1
  19. package/dist-cjs/lib/editor/Editor.js +5 -3
  20. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  21. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js +67 -2
  22. package/dist-cjs/lib/editor/managers/SnapManager/HandleSnaps.js.map +2 -2
  23. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  24. package/dist-cjs/lib/hooks/useCanvasEvents.js +2 -1
  25. package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
  26. package/dist-cjs/lib/hooks/useDarkMode.js +1 -1
  27. package/dist-cjs/lib/hooks/useEditor.js +1 -1
  28. package/dist-cjs/lib/hooks/useGestureEvents.js +1 -1
  29. package/dist-cjs/lib/hooks/useHandleEvents.js +1 -1
  30. package/dist-cjs/lib/hooks/useZoomCss.js +1 -1
  31. package/dist-cjs/lib/license/LicenseManager.js +16 -6
  32. package/dist-cjs/lib/license/LicenseManager.js.map +2 -2
  33. package/dist-cjs/lib/license/Watermark.js +4 -4
  34. package/dist-cjs/lib/license/Watermark.js.map +1 -1
  35. package/dist-cjs/lib/primitives/geometry/Geometry2d.js +5 -0
  36. package/dist-cjs/lib/primitives/geometry/Geometry2d.js.map +2 -2
  37. package/dist-cjs/version.js +3 -3
  38. package/dist-cjs/version.js.map +1 -1
  39. package/dist-esm/index.d.mts +16 -1
  40. package/dist-esm/index.mjs +1 -1
  41. package/dist-esm/lib/editor/Editor.mjs +5 -2
  42. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  43. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs +67 -2
  44. package/dist-esm/lib/editor/managers/SnapManager/HandleSnaps.mjs.map +2 -2
  45. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  46. package/dist-esm/lib/hooks/useCanvasEvents.mjs +2 -1
  47. package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
  48. package/dist-esm/lib/license/LicenseManager.mjs +16 -6
  49. package/dist-esm/lib/license/LicenseManager.mjs.map +2 -2
  50. package/dist-esm/lib/license/Watermark.mjs +4 -4
  51. package/dist-esm/lib/license/Watermark.mjs.map +1 -1
  52. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs +5 -0
  53. package/dist-esm/lib/primitives/geometry/Geometry2d.mjs.map +2 -2
  54. package/dist-esm/version.mjs +3 -3
  55. package/dist-esm/version.mjs.map +1 -1
  56. package/editor.css +7 -2
  57. package/package.json +7 -7
  58. package/src/lib/editor/Editor.ts +5 -2
  59. package/src/lib/editor/managers/SnapManager/HandleSnaps.ts +91 -4
  60. package/src/lib/editor/shapes/ShapeUtil.ts +10 -0
  61. package/src/lib/hooks/useCanvasEvents.ts +8 -1
  62. package/src/lib/license/LicenseManager.ts +22 -6
  63. package/src/lib/license/Watermark.tsx +4 -4
  64. package/src/lib/primitives/geometry/Geometry2d.ts +6 -0
  65. package/src/version.ts +3 -3
@@ -155,14 +155,68 @@ class HandleSnaps {
155
155
  if (nearestPointOnOutline) return nearestPointOnOutline;
156
156
  return null;
157
157
  }
158
+ getHandleSnapData({
159
+ handle,
160
+ currentShapeId
161
+ }) {
162
+ const snapThreshold = this.manager.getSnapThreshold();
163
+ const currentShapeTransform = (0, import_utils.assertExists)(this.editor.getShapePageTransform(currentShapeId));
164
+ const handleInPageSpace = currentShapeTransform.applyToPoint(handle);
165
+ let nearestXSnap = null;
166
+ let nearestYSnap = null;
167
+ let minOffsetX = snapThreshold;
168
+ let minOffsetY = snapThreshold;
169
+ for (const snapPoint of this.iterateSnapPointsInPageSpace(currentShapeId, handle)) {
170
+ const offsetX = Math.abs(handleInPageSpace.x - snapPoint.x);
171
+ const offsetY = Math.abs(handleInPageSpace.y - snapPoint.y);
172
+ if (offsetX < minOffsetX) {
173
+ minOffsetX = offsetX;
174
+ nearestXSnap = snapPoint;
175
+ }
176
+ if (offsetY < minOffsetY) {
177
+ minOffsetY = offsetY;
178
+ nearestYSnap = snapPoint;
179
+ }
180
+ }
181
+ if (!nearestXSnap && !nearestYSnap) {
182
+ return null;
183
+ }
184
+ const nudge = new import_Vec.Vec(
185
+ nearestXSnap ? nearestXSnap.x - handleInPageSpace.x : 0,
186
+ nearestYSnap ? nearestYSnap.y - handleInPageSpace.y : 0
187
+ );
188
+ const snappedHandle = import_Vec.Vec.Add(handleInPageSpace, nudge);
189
+ const snaps = [];
190
+ if (nearestXSnap) {
191
+ const snappedHandleOnX = new import_Vec.Vec(nearestXSnap.x, snappedHandle.y);
192
+ snaps.push({
193
+ id: (0, import_utils.uniqueId)(),
194
+ type: "points",
195
+ points: [nearestXSnap, snappedHandleOnX]
196
+ });
197
+ }
198
+ if (nearestYSnap) {
199
+ const snappedHandleOnY = new import_Vec.Vec(snappedHandle.x, nearestYSnap.y);
200
+ snaps.push({
201
+ id: (0, import_utils.uniqueId)(),
202
+ type: "points",
203
+ points: [nearestYSnap, snappedHandleOnY]
204
+ });
205
+ }
206
+ return { snaps, nudge };
207
+ }
158
208
  snapHandle({
159
209
  currentShapeId,
160
210
  handle
161
211
  }) {
162
212
  const currentShapeTransform = (0, import_utils.assertExists)(this.editor.getShapePageTransform(currentShapeId));
163
213
  const handleInPageSpace = currentShapeTransform.applyToPoint(handle);
164
- const snapPosition = this.getHandleSnapPosition({ currentShapeId, handle, handleInPageSpace });
165
- if (snapPosition) {
214
+ const snapType = handle.canSnap ? "point" : handle.snapType;
215
+ if (snapType === "point") {
216
+ const snapPosition = this.getHandleSnapPosition({ currentShapeId, handle, handleInPageSpace });
217
+ if (!snapPosition) {
218
+ return null;
219
+ }
166
220
  this.manager.setIndicators([
167
221
  {
168
222
  id: (0, import_utils.uniqueId)(),
@@ -172,6 +226,17 @@ class HandleSnaps {
172
226
  ]);
173
227
  return { nudge: import_Vec.Vec.Sub(snapPosition, handleInPageSpace) };
174
228
  }
229
+ if (snapType === "align") {
230
+ const snapData = this.getHandleSnapData({
231
+ handle,
232
+ currentShapeId
233
+ });
234
+ if (!snapData) {
235
+ return null;
236
+ }
237
+ this.manager.setIndicators(snapData.snaps);
238
+ return { nudge: snapData.nudge };
239
+ }
175
240
  return null;
176
241
  }
177
242
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/lib/editor/managers/SnapManager/HandleSnaps.ts"],
4
- "sourcesContent": ["import { computed } from '@tldraw/state'\nimport { TLHandle, TLShape, TLShapeId, VecModel } from '@tldraw/tlschema'\nimport { assertExists, uniqueId } from '@tldraw/utils'\nimport { Vec } from '../../../primitives/Vec'\nimport { Geometry2d } from '../../../primitives/geometry/Geometry2d'\nimport { Editor } from '../../Editor'\nimport { SnapData, SnapManager } from './SnapManager'\n\n/**\n * When dragging a handle, users can snap the handle to key geometry on other nearby shapes.\n * Customize how handles snap to a shape by returning this from\n * {@link ShapeUtil.getHandleSnapGeometry}.\n *\n * Any co-ordinates here should be in the shape's local space.\n *\n * @public\n */\nexport interface HandleSnapGeometry {\n\t/**\n\t * A `Geometry2d` that describe the outline of the shape that the handle will snap to - fills\n\t * are ignored. By default, this is the same geometry returned by {@link ShapeUtil.getGeometry}.\n\t * Set this to `null` to disable handle snapping to this shape's outline.\n\t */\n\toutline?: Geometry2d | null\n\t/**\n\t * Key points on the shape that the handle will snap to. For example, the corners of a\n\t * rectangle, or the centroid of a triangle. By default, no points are used.\n\t */\n\tpoints?: VecModel[]\n\t/**\n\t * By default, handles can't snap to their own shape because moving the handle might change the\n\t * snapping location which can cause feedback loops. You can override this by returning a\n\t * version of `outline` that won't be affected by the current handle's position to use for\n\t * self-snapping.\n\t */\n\tgetSelfSnapOutline?(handle: TLHandle): Geometry2d | null\n\t/**\n\t * By default, handles can't snap to their own shape because moving the handle might change the\n\t * snapping location which can cause feedback loops. You can override this by returning a\n\t * version of `points` that won't be affected by the current handle's position to use for\n\t * self-snapping.\n\t */\n\tgetSelfSnapPoints?(handle: TLHandle): VecModel[]\n}\n\nconst defaultGetSelfSnapOutline = () => null\nconst defaultGetSelfSnapPoints = () => []\n/** @public */\nexport class HandleSnaps {\n\treadonly editor: Editor\n\tconstructor(readonly manager: SnapManager) {\n\t\tthis.editor = manager.editor\n\t}\n\n\t@computed private getSnapGeometryCache() {\n\t\tconst { editor } = this\n\t\treturn editor.store.createComputedCache('handle snap geometry', (shape: TLShape) => {\n\t\t\tconst snapGeometry = editor.getShapeUtil(shape).getHandleSnapGeometry(shape)\n\t\t\tconst getSelfSnapOutline = snapGeometry.getSelfSnapOutline\n\t\t\t\t? snapGeometry.getSelfSnapOutline.bind(snapGeometry)\n\t\t\t\t: defaultGetSelfSnapOutline\n\t\t\tconst getSelfSnapPoints = snapGeometry.getSelfSnapPoints\n\t\t\t\t? snapGeometry.getSelfSnapPoints.bind(snapGeometry)\n\t\t\t\t: defaultGetSelfSnapPoints\n\n\t\t\treturn {\n\t\t\t\toutline:\n\t\t\t\t\tsnapGeometry.outline === undefined\n\t\t\t\t\t\t? editor.getShapeGeometry(shape)\n\t\t\t\t\t\t: snapGeometry.outline,\n\n\t\t\t\tpoints: snapGeometry.points ?? [],\n\t\t\t\tgetSelfSnapOutline,\n\t\t\t\tgetSelfSnapPoints,\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate *iterateSnapPointsInPageSpace(currentShapeId: TLShapeId, currentHandle: TLHandle) {\n\t\tconst selfSnapPoints = this.getSnapGeometryCache()\n\t\t\t.get(currentShapeId)\n\t\t\t?.getSelfSnapPoints(currentHandle)\n\t\tif (selfSnapPoints && selfSnapPoints.length) {\n\t\t\tconst shapePageTransform = assertExists(this.editor.getShapePageTransform(currentShapeId))\n\t\t\tfor (const point of selfSnapPoints) {\n\t\t\t\tyield shapePageTransform.applyToPoint(point)\n\t\t\t}\n\t\t}\n\n\t\tfor (const shapeId of this.manager.getSnappableShapes()) {\n\t\t\tif (shapeId === currentShapeId) continue\n\t\t\tconst snapPoints = this.getSnapGeometryCache().get(shapeId)?.points\n\t\t\tif (!snapPoints || !snapPoints.length) continue\n\n\t\t\tconst shapePageTransform = assertExists(this.editor.getShapePageTransform(shapeId))\n\t\t\tfor (const point of snapPoints) {\n\t\t\t\tyield shapePageTransform.applyToPoint(point)\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate *iterateSnapOutlines(currentShapeId: TLShapeId, currentHandle: TLHandle) {\n\t\tconst selfSnapOutline = this.getSnapGeometryCache()\n\t\t\t.get(currentShapeId)\n\t\t\t?.getSelfSnapOutline(currentHandle)\n\t\tif (selfSnapOutline) {\n\t\t\tyield { shapeId: currentShapeId, outline: selfSnapOutline }\n\t\t}\n\n\t\tfor (const shapeId of this.manager.getSnappableShapes()) {\n\t\t\tif (shapeId === currentShapeId) continue\n\n\t\t\tconst snapOutline = this.getSnapGeometryCache().get(shapeId)?.outline\n\t\t\tif (!snapOutline) continue\n\n\t\t\tyield { shapeId, outline: snapOutline }\n\t\t}\n\t}\n\n\tprivate getHandleSnapPosition({\n\t\tcurrentShapeId,\n\t\thandle,\n\t\thandleInPageSpace,\n\t}: {\n\t\tcurrentShapeId: TLShapeId\n\t\thandle: TLHandle\n\t\thandleInPageSpace: Vec\n\t}): Vec | null {\n\t\tconst snapThreshold = this.manager.getSnapThreshold()\n\n\t\t// We snap to two different parts of the shape's handle snap geometry:\n\t\t// 1. The `points`. These are handles or other key points that we want to snap to with a\n\t\t// higher priority than the normal outline snapping.\n\t\t// 2. The `outline`. This describes the outline of the shape, and we just snap to the\n\t\t// nearest point on that outline.\n\n\t\t// Start with the points:\n\t\tlet minDistanceForSnapPoint = snapThreshold\n\t\tlet nearestSnapPoint: Vec | null = null\n\t\tfor (const snapPoint of this.iterateSnapPointsInPageSpace(currentShapeId, handle)) {\n\t\t\tif (Vec.DistMin(handleInPageSpace, snapPoint, minDistanceForSnapPoint)) {\n\t\t\t\tminDistanceForSnapPoint = Vec.Dist(handleInPageSpace, snapPoint)\n\t\t\t\tnearestSnapPoint = snapPoint\n\t\t\t}\n\t\t}\n\n\t\t// if we found a snap point, return it - we don't need to check the outlines because points\n\t\t// have a higher priority\n\t\tif (nearestSnapPoint) return nearestSnapPoint\n\n\t\tlet minDistanceForOutline = snapThreshold\n\t\tlet nearestPointOnOutline: Vec | null = null\n\n\t\tfor (const { shapeId, outline } of this.iterateSnapOutlines(currentShapeId, handle)) {\n\t\t\tconst shapePageTransform = assertExists(this.editor.getShapePageTransform(shapeId))\n\t\t\tconst pointInShapeSpace = this.editor.getPointInShapeSpace(shapeId, handleInPageSpace)\n\n\t\t\tconst nearestShapePointInShapeSpace = outline.nearestPoint(pointInShapeSpace)\n\t\t\tconst nearestInPageSpace = shapePageTransform.applyToPoint(nearestShapePointInShapeSpace)\n\n\t\t\tif (Vec.DistMin(handleInPageSpace, nearestInPageSpace, minDistanceForOutline)) {\n\t\t\t\tminDistanceForOutline = Vec.Dist(handleInPageSpace, nearestInPageSpace)\n\t\t\t\tnearestPointOnOutline = nearestInPageSpace\n\t\t\t}\n\t\t}\n\n\t\t// if we found a point on the outline, return it\n\t\tif (nearestPointOnOutline) return nearestPointOnOutline\n\n\t\t// if not, there's no nearby snap point\n\t\treturn null\n\t}\n\n\tsnapHandle({\n\t\tcurrentShapeId,\n\t\thandle,\n\t}: {\n\t\tcurrentShapeId: TLShapeId\n\t\thandle: TLHandle\n\t}): SnapData | null {\n\t\tconst currentShapeTransform = assertExists(this.editor.getShapePageTransform(currentShapeId))\n\t\tconst handleInPageSpace = currentShapeTransform.applyToPoint(handle)\n\t\tconst snapPosition = this.getHandleSnapPosition({ currentShapeId, handle, handleInPageSpace })\n\n\t\t// If we found a point, display snap lines, and return the nudge\n\t\tif (snapPosition) {\n\t\t\tthis.manager.setIndicators([\n\t\t\t\t{\n\t\t\t\t\tid: uniqueId(),\n\t\t\t\t\ttype: 'points',\n\t\t\t\t\tpoints: [snapPosition],\n\t\t\t\t},\n\t\t\t])\n\n\t\t\treturn { nudge: Vec.Sub(snapPosition, handleInPageSpace) }\n\t\t}\n\n\t\treturn null\n\t}\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,mBAAuC;AACvC,iBAAoB;AAHpB;AA6CA,MAAM,4BAA4B,MAAM;AACxC,MAAM,2BAA2B,MAAM,CAAC;AAQvC,6BAAC;AANK,MAAM,YAAY;AAAA,EAExB,YAAqB,SAAsB;AAAtB;AAFf;AACN,wBAAS;AAER,SAAK,SAAS,QAAQ;AAAA,EACvB;AAAA,EAEkB,uBAAuB;AACxC,UAAM,EAAE,OAAO,IAAI;AACnB,WAAO,OAAO,MAAM,oBAAoB,wBAAwB,CAAC,UAAmB;AACnF,YAAM,eAAe,OAAO,aAAa,KAAK,EAAE,sBAAsB,KAAK;AAC3E,YAAM,qBAAqB,aAAa,qBACrC,aAAa,mBAAmB,KAAK,YAAY,IACjD;AACH,YAAM,oBAAoB,aAAa,oBACpC,aAAa,kBAAkB,KAAK,YAAY,IAChD;AAEH,aAAO;AAAA,QACN,SACC,aAAa,YAAY,SACtB,OAAO,iBAAiB,KAAK,IAC7B,aAAa;AAAA,QAEjB,QAAQ,aAAa,UAAU,CAAC;AAAA,QAChC;AAAA,QACA;AAAA,MACD;AAAA,IACD,CAAC;AAAA,EACF;AAAA,EAEA,CAAS,6BAA6B,gBAA2B,eAAyB;AACzF,UAAM,iBAAiB,KAAK,qBAAqB,EAC/C,IAAI,cAAc,GACjB,kBAAkB,aAAa;AAClC,QAAI,kBAAkB,eAAe,QAAQ;AAC5C,YAAM,yBAAqB,2BAAa,KAAK,OAAO,sBAAsB,cAAc,CAAC;AACzF,iBAAW,SAAS,gBAAgB;AACnC,cAAM,mBAAmB,aAAa,KAAK;AAAA,MAC5C;AAAA,IACD;AAEA,eAAW,WAAW,KAAK,QAAQ,mBAAmB,GAAG;AACxD,UAAI,YAAY,eAAgB;AAChC,YAAM,aAAa,KAAK,qBAAqB,EAAE,IAAI,OAAO,GAAG;AAC7D,UAAI,CAAC,cAAc,CAAC,WAAW,OAAQ;AAEvC,YAAM,yBAAqB,2BAAa,KAAK,OAAO,sBAAsB,OAAO,CAAC;AAClF,iBAAW,SAAS,YAAY;AAC/B,cAAM,mBAAmB,aAAa,KAAK;AAAA,MAC5C;AAAA,IACD;AAAA,EACD;AAAA,EAEA,CAAS,oBAAoB,gBAA2B,eAAyB;AAChF,UAAM,kBAAkB,KAAK,qBAAqB,EAChD,IAAI,cAAc,GACjB,mBAAmB,aAAa;AACnC,QAAI,iBAAiB;AACpB,YAAM,EAAE,SAAS,gBAAgB,SAAS,gBAAgB;AAAA,IAC3D;AAEA,eAAW,WAAW,KAAK,QAAQ,mBAAmB,GAAG;AACxD,UAAI,YAAY,eAAgB;AAEhC,YAAM,cAAc,KAAK,qBAAqB,EAAE,IAAI,OAAO,GAAG;AAC9D,UAAI,CAAC,YAAa;AAElB,YAAM,EAAE,SAAS,SAAS,YAAY;AAAA,IACvC;AAAA,EACD;AAAA,EAEQ,sBAAsB;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,EACD,GAIe;AACd,UAAM,gBAAgB,KAAK,QAAQ,iBAAiB;AASpD,QAAI,0BAA0B;AAC9B,QAAI,mBAA+B;AACnC,eAAW,aAAa,KAAK,6BAA6B,gBAAgB,MAAM,GAAG;AAClF,UAAI,eAAI,QAAQ,mBAAmB,WAAW,uBAAuB,GAAG;AACvE,kCAA0B,eAAI,KAAK,mBAAmB,SAAS;AAC/D,2BAAmB;AAAA,MACpB;AAAA,IACD;AAIA,QAAI,iBAAkB,QAAO;AAE7B,QAAI,wBAAwB;AAC5B,QAAI,wBAAoC;AAExC,eAAW,EAAE,SAAS,QAAQ,KAAK,KAAK,oBAAoB,gBAAgB,MAAM,GAAG;AACpF,YAAM,yBAAqB,2BAAa,KAAK,OAAO,sBAAsB,OAAO,CAAC;AAClF,YAAM,oBAAoB,KAAK,OAAO,qBAAqB,SAAS,iBAAiB;AAErF,YAAM,gCAAgC,QAAQ,aAAa,iBAAiB;AAC5E,YAAM,qBAAqB,mBAAmB,aAAa,6BAA6B;AAExF,UAAI,eAAI,QAAQ,mBAAmB,oBAAoB,qBAAqB,GAAG;AAC9E,gCAAwB,eAAI,KAAK,mBAAmB,kBAAkB;AACtE,gCAAwB;AAAA,MACzB;AAAA,IACD;AAGA,QAAI,sBAAuB,QAAO;AAGlC,WAAO;AAAA,EACR;AAAA,EAEA,WAAW;AAAA,IACV;AAAA,IACA;AAAA,EACD,GAGoB;AACnB,UAAM,4BAAwB,2BAAa,KAAK,OAAO,sBAAsB,cAAc,CAAC;AAC5F,UAAM,oBAAoB,sBAAsB,aAAa,MAAM;AACnE,UAAM,eAAe,KAAK,sBAAsB,EAAE,gBAAgB,QAAQ,kBAAkB,CAAC;AAG7F,QAAI,cAAc;AACjB,WAAK,QAAQ,cAAc;AAAA,QAC1B;AAAA,UACC,QAAI,uBAAS;AAAA,UACb,MAAM;AAAA,UACN,QAAQ,CAAC,YAAY;AAAA,QACtB;AAAA,MACD,CAAC;AAED,aAAO,EAAE,OAAO,eAAI,IAAI,cAAc,iBAAiB,EAAE;AAAA,IAC1D;AAEA,WAAO;AAAA,EACR;AACD;AAvJO;AAMI,4BAAQ,wBAAlB,2BANY;AAAN,2BAAM;",
4
+ "sourcesContent": ["import { computed } from '@tldraw/state'\nimport { TLHandle, TLShape, TLShapeId, VecModel } from '@tldraw/tlschema'\nimport { assertExists, uniqueId } from '@tldraw/utils'\nimport { Vec } from '../../../primitives/Vec'\nimport { Geometry2d } from '../../../primitives/geometry/Geometry2d'\nimport { Editor } from '../../Editor'\nimport { PointsSnapIndicator, SnapData, SnapManager } from './SnapManager'\n\n/**\n * When dragging a handle, users can snap the handle to key geometry on other nearby shapes.\n * Customize how handles snap to a shape by returning this from\n * {@link ShapeUtil.getHandleSnapGeometry}.\n *\n * Any co-ordinates here should be in the shape's local space.\n *\n * @public\n */\nexport interface HandleSnapGeometry {\n\t/**\n\t * A `Geometry2d` that describe the outline of the shape that the handle will snap to - fills\n\t * are ignored. By default, this is the same geometry returned by {@link ShapeUtil.getGeometry}.\n\t * Set this to `null` to disable handle snapping to this shape's outline.\n\t */\n\toutline?: Geometry2d | null\n\t/**\n\t * Key points on the shape that the handle will snap to. For example, the corners of a\n\t * rectangle, or the centroid of a triangle. By default, no points are used.\n\t */\n\tpoints?: VecModel[]\n\t/**\n\t * By default, handles can't snap to their own shape because moving the handle might change the\n\t * snapping location which can cause feedback loops. You can override this by returning a\n\t * version of `outline` that won't be affected by the current handle's position to use for\n\t * self-snapping.\n\t */\n\tgetSelfSnapOutline?(handle: TLHandle): Geometry2d | null\n\t/**\n\t * By default, handles can't snap to their own shape because moving the handle might change the\n\t * snapping location which can cause feedback loops. You can override this by returning a\n\t * version of `points` that won't be affected by the current handle's position to use for\n\t * self-snapping.\n\t */\n\tgetSelfSnapPoints?(handle: TLHandle): VecModel[]\n}\n\ninterface AlignPointsSnap {\n\tsnaps: PointsSnapIndicator[]\n\tnudge: Vec\n}\n\nconst defaultGetSelfSnapOutline = () => null\nconst defaultGetSelfSnapPoints = () => []\n/** @public */\nexport class HandleSnaps {\n\treadonly editor: Editor\n\tconstructor(readonly manager: SnapManager) {\n\t\tthis.editor = manager.editor\n\t}\n\n\t@computed private getSnapGeometryCache() {\n\t\tconst { editor } = this\n\t\treturn editor.store.createComputedCache('handle snap geometry', (shape: TLShape) => {\n\t\t\tconst snapGeometry = editor.getShapeUtil(shape).getHandleSnapGeometry(shape)\n\t\t\tconst getSelfSnapOutline = snapGeometry.getSelfSnapOutline\n\t\t\t\t? snapGeometry.getSelfSnapOutline.bind(snapGeometry)\n\t\t\t\t: defaultGetSelfSnapOutline\n\t\t\tconst getSelfSnapPoints = snapGeometry.getSelfSnapPoints\n\t\t\t\t? snapGeometry.getSelfSnapPoints.bind(snapGeometry)\n\t\t\t\t: defaultGetSelfSnapPoints\n\n\t\t\treturn {\n\t\t\t\toutline:\n\t\t\t\t\tsnapGeometry.outline === undefined\n\t\t\t\t\t\t? editor.getShapeGeometry(shape)\n\t\t\t\t\t\t: snapGeometry.outline,\n\n\t\t\t\tpoints: snapGeometry.points ?? [],\n\t\t\t\tgetSelfSnapOutline,\n\t\t\t\tgetSelfSnapPoints,\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate *iterateSnapPointsInPageSpace(currentShapeId: TLShapeId, currentHandle: TLHandle) {\n\t\tconst selfSnapPoints = this.getSnapGeometryCache()\n\t\t\t.get(currentShapeId)\n\t\t\t?.getSelfSnapPoints(currentHandle)\n\t\tif (selfSnapPoints && selfSnapPoints.length) {\n\t\t\tconst shapePageTransform = assertExists(this.editor.getShapePageTransform(currentShapeId))\n\t\t\tfor (const point of selfSnapPoints) {\n\t\t\t\tyield shapePageTransform.applyToPoint(point)\n\t\t\t}\n\t\t}\n\n\t\tfor (const shapeId of this.manager.getSnappableShapes()) {\n\t\t\tif (shapeId === currentShapeId) continue\n\t\t\tconst snapPoints = this.getSnapGeometryCache().get(shapeId)?.points\n\t\t\tif (!snapPoints || !snapPoints.length) continue\n\n\t\t\tconst shapePageTransform = assertExists(this.editor.getShapePageTransform(shapeId))\n\t\t\tfor (const point of snapPoints) {\n\t\t\t\tyield shapePageTransform.applyToPoint(point)\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate *iterateSnapOutlines(currentShapeId: TLShapeId, currentHandle: TLHandle) {\n\t\tconst selfSnapOutline = this.getSnapGeometryCache()\n\t\t\t.get(currentShapeId)\n\t\t\t?.getSelfSnapOutline(currentHandle)\n\t\tif (selfSnapOutline) {\n\t\t\tyield { shapeId: currentShapeId, outline: selfSnapOutline }\n\t\t}\n\n\t\tfor (const shapeId of this.manager.getSnappableShapes()) {\n\t\t\tif (shapeId === currentShapeId) continue\n\n\t\t\tconst snapOutline = this.getSnapGeometryCache().get(shapeId)?.outline\n\t\t\tif (!snapOutline) continue\n\n\t\t\tyield { shapeId, outline: snapOutline }\n\t\t}\n\t}\n\n\tprivate getHandleSnapPosition({\n\t\tcurrentShapeId,\n\t\thandle,\n\t\thandleInPageSpace,\n\t}: {\n\t\tcurrentShapeId: TLShapeId\n\t\thandle: TLHandle\n\t\thandleInPageSpace: Vec\n\t}): Vec | null {\n\t\tconst snapThreshold = this.manager.getSnapThreshold()\n\n\t\t// We snap to two different parts of the shape's handle snap geometry:\n\t\t// 1. The `points`. These are handles or other key points that we want to snap to with a\n\t\t// higher priority than the normal outline snapping.\n\t\t// 2. The `outline`. This describes the outline of the shape, and we just snap to the\n\t\t// nearest point on that outline.\n\n\t\t// Start with the points:\n\t\tlet minDistanceForSnapPoint = snapThreshold\n\t\tlet nearestSnapPoint: Vec | null = null\n\t\tfor (const snapPoint of this.iterateSnapPointsInPageSpace(currentShapeId, handle)) {\n\t\t\tif (Vec.DistMin(handleInPageSpace, snapPoint, minDistanceForSnapPoint)) {\n\t\t\t\tminDistanceForSnapPoint = Vec.Dist(handleInPageSpace, snapPoint)\n\t\t\t\tnearestSnapPoint = snapPoint\n\t\t\t}\n\t\t}\n\n\t\t// if we found a snap point, return it - we don't need to check the outlines because points\n\t\t// have a higher priority\n\t\tif (nearestSnapPoint) return nearestSnapPoint\n\n\t\tlet minDistanceForOutline = snapThreshold\n\t\tlet nearestPointOnOutline: Vec | null = null\n\n\t\tfor (const { shapeId, outline } of this.iterateSnapOutlines(currentShapeId, handle)) {\n\t\t\tconst shapePageTransform = assertExists(this.editor.getShapePageTransform(shapeId))\n\t\t\tconst pointInShapeSpace = this.editor.getPointInShapeSpace(shapeId, handleInPageSpace)\n\n\t\t\tconst nearestShapePointInShapeSpace = outline.nearestPoint(pointInShapeSpace)\n\t\t\tconst nearestInPageSpace = shapePageTransform.applyToPoint(nearestShapePointInShapeSpace)\n\n\t\t\tif (Vec.DistMin(handleInPageSpace, nearestInPageSpace, minDistanceForOutline)) {\n\t\t\t\tminDistanceForOutline = Vec.Dist(handleInPageSpace, nearestInPageSpace)\n\t\t\t\tnearestPointOnOutline = nearestInPageSpace\n\t\t\t}\n\t\t}\n\n\t\t// if we found a point on the outline, return it\n\t\tif (nearestPointOnOutline) return nearestPointOnOutline\n\n\t\t// if not, there's no nearby snap point\n\t\treturn null\n\t}\n\n\tprivate getHandleSnapData({\n\t\thandle,\n\t\tcurrentShapeId,\n\t}: {\n\t\thandle: TLHandle\n\t\tcurrentShapeId: TLShapeId\n\t}): AlignPointsSnap | null {\n\t\tconst snapThreshold = this.manager.getSnapThreshold()\n\t\tconst currentShapeTransform = assertExists(this.editor.getShapePageTransform(currentShapeId))\n\t\tconst handleInPageSpace = currentShapeTransform.applyToPoint(handle)\n\n\t\tlet nearestXSnap: Vec | null = null\n\t\tlet nearestYSnap: Vec | null = null\n\t\tlet minOffsetX = snapThreshold\n\t\tlet minOffsetY = snapThreshold\n\n\t\tfor (const snapPoint of this.iterateSnapPointsInPageSpace(currentShapeId, handle)) {\n\t\t\tconst offsetX = Math.abs(handleInPageSpace.x - snapPoint.x)\n\t\t\tconst offsetY = Math.abs(handleInPageSpace.y - snapPoint.y)\n\t\t\tif (offsetX < minOffsetX) {\n\t\t\t\tminOffsetX = offsetX\n\t\t\t\tnearestXSnap = snapPoint\n\t\t\t}\n\t\t\tif (offsetY < minOffsetY) {\n\t\t\t\tminOffsetY = offsetY\n\t\t\t\tnearestYSnap = snapPoint\n\t\t\t}\n\t\t}\n\n\t\tif (!nearestXSnap && !nearestYSnap) {\n\t\t\treturn null\n\t\t}\n\n\t\tconst nudge = new Vec(\n\t\t\tnearestXSnap ? nearestXSnap.x - handleInPageSpace.x : 0,\n\t\t\tnearestYSnap ? nearestYSnap.y - handleInPageSpace.y : 0\n\t\t)\n\n\t\tconst snappedHandle = Vec.Add(handleInPageSpace, nudge)\n\t\tconst snaps: PointsSnapIndicator[] = []\n\n\t\tif (nearestXSnap) {\n\t\t\tconst snappedHandleOnX = new Vec(nearestXSnap.x, snappedHandle.y)\n\t\t\tsnaps.push({\n\t\t\t\tid: uniqueId(),\n\t\t\t\ttype: 'points',\n\t\t\t\tpoints: [nearestXSnap, snappedHandleOnX],\n\t\t\t})\n\t\t}\n\t\tif (nearestYSnap) {\n\t\t\tconst snappedHandleOnY = new Vec(snappedHandle.x, nearestYSnap.y)\n\t\t\tsnaps.push({\n\t\t\t\tid: uniqueId(),\n\t\t\t\ttype: 'points',\n\t\t\t\tpoints: [nearestYSnap, snappedHandleOnY],\n\t\t\t})\n\t\t}\n\n\t\treturn { snaps, nudge }\n\t}\n\n\tsnapHandle({\n\t\tcurrentShapeId,\n\t\thandle,\n\t}: {\n\t\tcurrentShapeId: TLShapeId\n\t\thandle: TLHandle\n\t}): SnapData | null {\n\t\tconst currentShapeTransform = assertExists(this.editor.getShapePageTransform(currentShapeId))\n\t\tconst handleInPageSpace = currentShapeTransform.applyToPoint(handle)\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\tconst snapType = handle.canSnap ? 'point' : handle.snapType\n\n\t\tif (snapType === 'point') {\n\t\t\tconst snapPosition = this.getHandleSnapPosition({ currentShapeId, handle, handleInPageSpace })\n\n\t\t\tif (!snapPosition) {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tthis.manager.setIndicators([\n\t\t\t\t{\n\t\t\t\t\tid: uniqueId(),\n\t\t\t\t\ttype: 'points',\n\t\t\t\t\tpoints: [snapPosition],\n\t\t\t\t},\n\t\t\t])\n\n\t\t\treturn { nudge: Vec.Sub(snapPosition, handleInPageSpace) }\n\t\t}\n\n\t\tif (snapType === 'align') {\n\t\t\tconst snapData = this.getHandleSnapData({\n\t\t\t\thandle,\n\t\t\t\tcurrentShapeId,\n\t\t\t})\n\n\t\t\tif (!snapData) {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tthis.manager.setIndicators(snapData.snaps)\n\n\t\t\treturn { nudge: snapData.nudge }\n\t\t}\n\n\t\treturn null\n\t}\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/lib/editor/shapes/ShapeUtil.ts"],
4
- "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { EMPTY_ARRAY } from '@tldraw/state'\nimport { LegacyMigrations, MigrationSequence } from '@tldraw/store'\nimport {\n\tRecordProps,\n\tTLHandle,\n\tTLParentId,\n\tTLPropsMigrations,\n\tTLShape,\n\tTLShapeCrop,\n\tTLShapeId,\n\tTLShapePartial,\n\tTLUnknownShape,\n} from '@tldraw/tlschema'\nimport { IndexKey } from '@tldraw/utils'\nimport { ReactElement } from 'react'\nimport { Box, SelectionHandle } from '../../primitives/Box'\nimport { Vec } from '../../primitives/Vec'\nimport { Geometry2d } from '../../primitives/geometry/Geometry2d'\nimport type { Editor } from '../Editor'\nimport { TLFontFace } from '../managers/FontManager/FontManager'\nimport { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'\nimport { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'\nimport { SvgExportContext } from '../types/SvgExportContext'\nimport { TLClickEventInfo } from '../types/event-types'\nimport { TLResizeHandle } from '../types/selection-types'\n\n/** @public */\nexport interface TLShapeUtilConstructor<\n\tT extends TLUnknownShape,\n\tU extends ShapeUtil<T> = ShapeUtil<T>,\n> {\n\tnew (editor: Editor): U\n\ttype: T['type']\n\tprops?: RecordProps<T>\n\tmigrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence\n}\n\n/**\n * Options passed to {@link ShapeUtil.canBind}. A binding that could be made. At least one of\n * `fromShapeType` or `toShapeType` will belong to this shape util.\n *\n * @public\n */\nexport interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLUnknownShape> {\n\t/** The type of shape referenced by the `fromId` of the binding. */\n\tfromShapeType: string\n\t/** The type of shape referenced by the `toId` of the binding. */\n\ttoShapeType: string\n\t/** The type of binding. */\n\tbindingType: string\n}\n\n/**\n * Options passed to {@link ShapeUtil.canBeLaidOut}.\n *\n * @public\n */\nexport interface TLShapeUtilCanBeLaidOutOpts {\n\t/** The type of action causing the layout. */\n\ttype?: 'align' | 'distribute' | 'pack' | 'stack' | 'flip' | 'stretch'\n\t/** The other shapes being laid out */\n\tshapes?: TLShape[]\n}\n\n/** Additional options for the {@link ShapeUtil.getGeometry} method.\n *\n * @public\n */\nexport interface TLGeometryOpts {\n\t/** The context in which the geometry is being requested. */\n\tcontext?: string\n}\n\n/** @public */\nexport interface TLShapeUtilCanvasSvgDef {\n\tkey: string\n\tcomponent: React.ComponentType\n}\n\n/** @public */\nexport abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {\n\t/** Configure this shape utils {@link ShapeUtil.options | `options`}. */\n\tstatic configure<T extends TLShapeUtilConstructor<any, any>>(\n\t\tthis: T,\n\t\toptions: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never\n\t): T {\n\t\t// @ts-expect-error -- typescript has no idea what's going on here but it's fine\n\t\treturn class extends this {\n\t\t\t// @ts-expect-error\n\t\t\toptions = { ...this.options, ...options }\n\t\t}\n\t}\n\n\tconstructor(public editor: Editor) {}\n\n\t/**\n\t * Options for this shape util. If you're implementing a custom shape util, you can override\n\t * this to provide customization options for your shape. If using an existing shape util, you\n\t * can customizing this by calling {@link ShapeUtil.configure}.\n\t */\n\toptions = {}\n\n\t/**\n\t * Props allow you to define the shape's properties in a way that the editor can understand.\n\t * This has two main uses:\n\t *\n\t * 1. Validation. Shapes will be validated using these props to stop bad data from being saved.\n\t * 2. Styles. Each {@link @tldraw/tlschema#StyleProp} in the props can be set on many shapes at\n\t * once, and will be remembered from one shape to the next.\n\t *\n\t * @example\n\t * ```tsx\n\t * import {T, TLBaseShape, TLDefaultColorStyle, DefaultColorStyle, ShapeUtil} from 'tldraw'\n\t *\n\t * type MyShape = TLBaseShape<'mine', {\n\t * color: TLDefaultColorStyle,\n\t * text: string,\n\t * }>\n\t *\n\t * class MyShapeUtil extends ShapeUtil<MyShape> {\n\t * static props = {\n\t * // we use tldraw's built-in color style:\n\t * color: DefaultColorStyle,\n\t * // validate that the text prop is a string:\n\t * text: T.string,\n\t * }\n\t * }\n\t * ```\n\t */\n\tstatic props?: RecordProps<TLUnknownShape>\n\n\t/**\n\t * Migrations allow you to make changes to a shape's props over time. Read the\n\t * {@link https://www.tldraw.dev/docs/persistence#Shape-props-migrations | shape prop migrations}\n\t * guide for more information.\n\t */\n\tstatic migrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence\n\n\t/**\n\t * The type of the shape util, which should match the shape's type.\n\t *\n\t * @public\n\t */\n\tstatic type: string\n\n\t/**\n\t * Get the default props for a shape.\n\t *\n\t * @public\n\t */\n\tabstract getDefaultProps(): Shape['props']\n\n\t/**\n\t * Get the shape's geometry.\n\t *\n\t * @param shape - The shape.\n\t * @param opts - Additional options for the request.\n\t * @public\n\t */\n\tabstract getGeometry(shape: Shape, opts?: TLGeometryOpts): Geometry2d\n\n\t/**\n\t * Get a JSX element for the shape (as an HTML element).\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tabstract component(shape: Shape): any\n\n\t/**\n\t * Get JSX describing the shape's indicator (as an SVG element).\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tabstract indicator(shape: Shape): any\n\n\t/**\n\t * Get the font faces that should be rendered in the document in order for this shape to render\n\t * correctly.\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tgetFontFaces(shape: Shape): TLFontFace[] {\n\t\treturn EMPTY_ARRAY\n\t}\n\n\t/**\n\t * Whether the shape can be snapped to by another shape.\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tcanSnap(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Whether the shape can be tabbed to.\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tcanTabTo(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Whether the shape can be scrolled while editing.\n\t *\n\t * @public\n\t */\n\tcanScroll(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape can be bound to. See {@link TLShapeUtilCanBindOpts} for details.\n\t *\n\t * @public\n\t */\n\tcanBind(_opts: TLShapeUtilCanBindOpts): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Whether the shape can be double clicked to edit.\n\t *\n\t * @public\n\t */\n\tcanEdit(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape can be resized.\n\t *\n\t * @public\n\t */\n\tcanResize(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * When the shape is resized, whether the shape's children should also be resized.\n\t *\n\t * @public\n\t */\n\tcanResizeChildren(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Whether the shape can be edited in read-only mode.\n\t *\n\t * @public\n\t */\n\tcanEditInReadonly(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape can be cropped.\n\t *\n\t * @public\n\t */\n\tcanCrop(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape can participate in layout functions such as alignment or distribution.\n\t *\n\t * @param shape - The shape.\n\t * @param info - Additional context information: the type of action causing the layout and the\n\t * @public\n\t *\n\t * @public\n\t */\n\tcanBeLaidOut(_shape: Shape, _info: TLShapeUtilCanBeLaidOutOpts): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Whether this shape can be culled. By default, shapes are culled for\n\t * performance reasons when they are outside of the viewport. Culled shapes are still rendered\n\t * to the DOM, but have their `display` property set to `none`.\n\t *\n\t * @param shape - The shape.\n\t */\n\tcanCull(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Does this shape provide a background for its children? If this is true,\n\t * then any children with a `renderBackground` method will have their\n\t * backgrounds rendered _above_ this shape. Otherwise, the children's\n\t * backgrounds will be rendered above either the next ancestor that provides\n\t * a background, or the canvas background.\n\t *\n\t * @internal\n\t */\n\tprovidesBackgroundForChildren(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Get the clip path to apply to this shape's children.\n\t *\n\t * @param shape - The shape to get the clip path for\n\t * @returns Array of points defining the clipping polygon in local coordinates, or undefined if no clipping\n\t * @public\n\t */\n\tgetClipPath?(shape: Shape): Vec[] | undefined\n\n\t/**\n\t * Whether a specific child shape should be clipped by this shape.\n\t * Only called if getClipPath returns a valid polygon.\n\t *\n\t * If not defined, the default behavior is to clip all children.\n\t *\n\t * @param child - The child shape to check\n\t * @returns boolean indicating if this child should be clipped\n\t * @public\n\t */\n\tshouldClipChild?(child: TLShape): boolean\n\n\t/**\n\t * Whether the shape should hide its resize handles when selected.\n\t *\n\t * @public\n\t */\n\thideResizeHandles(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape should hide its rotation handles when selected.\n\t *\n\t * @public\n\t */\n\thideRotateHandle(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape should hide its selection bounds background when selected.\n\t *\n\t * @public\n\t */\n\thideSelectionBoundsBg(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape should hide its selection bounds foreground when selected.\n\t *\n\t * @public\n\t */\n\thideSelectionBoundsFg(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape's aspect ratio is locked.\n\t *\n\t * @public\n\t */\n\tisAspectRatioLocked(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * By default, the bounds of an image export are the bounds of all the shapes it contains, plus\n\t * some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the\n\t * padding is skipped _if the bounds of that shape contains all the other shapes_. This is\n\t * useful in cases like annotating on top of an image, where you usually want to avoid extra\n\t * padding around the image if you don't need it.\n\t *\n\t * @param _shape - The shape to check\n\t * @returns True if this shape should be treated as an export bounds container\n\t */\n\tisExportBoundsContainer(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Get a JSX element for the shape (as an HTML element) to be rendered as part of the canvas background - behind any other shape content.\n\t *\n\t * @param shape - The shape.\n\t * @internal\n\t */\n\tbackgroundComponent?(shape: Shape): any\n\n\t/**\n\t * Get the interpolated props for an animating shape. This is an optional method.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * util.getInterpolatedProps?.(startShape, endShape, t)\n\t * ```\n\t *\n\t * @param startShape - The initial shape.\n\t * @param endShape - The initial shape.\n\t * @param progress - The normalized progress between zero (start) and 1 (end).\n\t * @public\n\t */\n\tgetInterpolatedProps?(startShape: Shape, endShape: Shape, progress: number): Shape['props']\n\n\t/**\n\t * Get an array of handle models for the shape. This is an optional method.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * util.getHandles?.(myShape)\n\t * ```\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tgetHandles?(shape: Shape): TLHandle[]\n\n\t/**\n\t * Get whether the shape can receive children of a given type.\n\t *\n\t * @param shape - The shape.\n\t * @param type - The shape type.\n\t * @public\n\t */\n\tcanReceiveNewChildrenOfType(_shape: Shape, _type: TLShape['type']) {\n\t\treturn false\n\t}\n\n\t/**\n\t * Get the shape as an SVG object.\n\t *\n\t * @param shape - The shape.\n\t * @param ctx - The export context for the SVG - used for adding e.g. \\<def\\>s\n\t * @returns An SVG element.\n\t * @public\n\t */\n\ttoSvg?(shape: Shape, ctx: SvgExportContext): ReactElement | null | Promise<ReactElement | null>\n\n\t/**\n\t * Get the shape's background layer as an SVG object.\n\t *\n\t * @param shape - The shape.\n\t * @param ctx - ctx - The export context for the SVG - used for adding e.g. \\<def\\>s\n\t * @returns An SVG element.\n\t * @public\n\t */\n\ttoBackgroundSvg?(\n\t\tshape: Shape,\n\t\tctx: SvgExportContext\n\t): ReactElement | null | Promise<ReactElement | null>\n\n\t/** @internal */\n\texpandSelectionOutlinePx(shape: Shape): number | Box {\n\t\treturn 0\n\t}\n\n\t/**\n\t * Return elements to be added to the \\<defs\\> section of the canvases SVG context. This can be\n\t * used to define SVG content (e.g. patterns & masks) that can be referred to by ID from svg\n\t * elements returned by `component`.\n\t *\n\t * Each def should have a unique `key`. If multiple defs from different shapes all have the same\n\t * key, only one will be used.\n\t */\n\tgetCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[] {\n\t\treturn []\n\t}\n\n\t/**\n\t * Get the geometry to use when snapping to this this shape in translate/resize operations. See\n\t * {@link BoundsSnapGeometry} for details.\n\t */\n\tgetBoundsSnapGeometry(_shape: Shape): BoundsSnapGeometry {\n\t\treturn {}\n\t}\n\n\t/**\n\t * Get the geometry to use when snapping handles to this shape. See {@link HandleSnapGeometry}\n\t * for details.\n\t */\n\tgetHandleSnapGeometry(_shape: Shape): HandleSnapGeometry {\n\t\treturn {}\n\t}\n\n\tgetText(_shape: Shape): string | undefined {\n\t\treturn undefined\n\t}\n\n\tgetAriaDescriptor(_shape: Shape): string | undefined {\n\t\treturn undefined\n\t}\n\n\t// Events\n\n\t/**\n\t * A callback called just before a shape is created. This method provides a last chance to modify\n\t * the created shape.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * onBeforeCreate = (next) => {\n\t * \treturn { ...next, x: next.x + 1 }\n\t * }\n\t * ```\n\t *\n\t * @param next - The next shape.\n\t * @returns The next shape or void.\n\t * @public\n\t */\n\tonBeforeCreate?(next: Shape): Shape | void\n\n\t/**\n\t * A callback called just before a shape is updated. This method provides a last chance to modify\n\t * the updated shape.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * onBeforeUpdate = (prev, next) => {\n\t * \tif (prev.x === next.x) {\n\t * \t\treturn { ...next, x: next.x + 1 }\n\t * \t}\n\t * }\n\t * ```\n\t *\n\t * @param prev - The previous shape.\n\t * @param next - The next shape.\n\t * @returns The next shape or void.\n\t * @public\n\t */\n\tonBeforeUpdate?(prev: Shape, next: Shape): Shape | void\n\n\t/**\n\t * A callback called when a shape changes from a crop.\n\t *\n\t * @param shape - The shape at the start of the crop.\n\t * @param info - Info about the crop.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonCrop?(\n\t\tshape: Shape,\n\t\tinfo: TLCropInfo<Shape>\n\t): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void\n\n\t/**\n\t * A callback called when some other shapes are dragged into this one. This fires when the shapes are dragged over the shape for the first time.\n\t *\n\t * @param shape - The shape.\n\t * @param shapes - The shapes that are being dragged in.\n\t * @public\n\t */\n\tonDragShapesIn?(shape: Shape, shapes: TLShape[], info: TLDragShapesInInfo): void\n\n\t/**\n\t * A callback called when some other shapes are dragged over this one. This fires when the shapes are dragged over the shape for the first time (after the onDragShapesIn callback), and again on every update while the shapes are being dragged.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * onDragShapesOver = (shape, shapes) => {\n\t * \tthis.editor.reparentShapes(shapes, shape.id)\n\t * }\n\t * ```\n\t *\n\t * @param shape - The shape.\n\t * @param shapes - The shapes that are being dragged over this one.\n\t * @public\n\t */\n\tonDragShapesOver?(shape: Shape, shapes: TLShape[], info: TLDragShapesOverInfo): void\n\n\t/**\n\t * A callback called when some other shapes are dragged out of this one.\n\t *\n\t * @param shape - The shape.\n\t * @param shapes - The shapes that are being dragged out.\n\t * @public\n\t */\n\tonDragShapesOut?(shape: Shape, shapes: TLShape[], info: TLDragShapesOutInfo): void\n\n\t/**\n\t * A callback called when some other shapes are dropped over this one.\n\t *\n\t * @param shape - The shape.\n\t * @param shapes - The shapes that are being dropped over this one.\n\t * @public\n\t */\n\tonDropShapesOver?(shape: Shape, shapes: TLShape[], info: TLDropShapesOverInfo): void\n\n\t/**\n\t * A callback called when a shape starts being resized.\n\t *\n\t * @param shape - The shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonResizeStart?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape changes from a resize.\n\t *\n\t * @param shape - The shape at the start of the resize.\n\t * @param info - Info about the resize.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonResize?(\n\t\tshape: Shape,\n\t\tinfo: TLResizeInfo<Shape>\n\t): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void\n\n\t/**\n\t * A callback called when a shape finishes resizing.\n\t *\n\t * @param initial - The shape at the start of the resize.\n\t * @param current - The current shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape resize is cancelled.\n\t *\n\t * @param initial - The shape at the start of the resize.\n\t * @param current - The current shape.\n\t * @public\n\t */\n\tonResizeCancel?(initial: Shape, current: Shape): void\n\n\t/**\n\t * A callback called when a shape starts being translated.\n\t *\n\t * @param shape - The shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonTranslateStart?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape changes from a translation.\n\t *\n\t * @param initial - The shape at the start of the translation.\n\t * @param current - The current shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonTranslate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape finishes translating.\n\t *\n\t * @param initial - The shape at the start of the translation.\n\t * @param current - The current shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape translation is cancelled.\n\t *\n\t * @param initial - The shape at the start of the translation.\n\t * @param current - The current shape.\n\t * @public\n\t */\n\tonTranslateCancel?(initial: Shape, current: Shape): void\n\n\t/**\n\t * A callback called when a shape's handle starts being dragged.\n\t *\n\t * @param shape - The shape.\n\t * @param info - An object containing the handle and whether the handle is 'precise' or not.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonHandleDragStart?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's handle changes.\n\t *\n\t * @param shape - The current shape.\n\t * @param info - An object containing the handle and whether the handle is 'precise' or not.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonHandleDrag?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's handle finishes being dragged.\n\t *\n\t * @param current - The current shape.\n\t * @param info - An object containing the handle and whether the handle is 'precise' or not.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonHandleDragEnd?(current: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's handle drag is cancelled.\n\t *\n\t * @param current - The current shape.\n\t * @param info - An object containing the handle and whether the handle is 'precise' or not.\n\t * @public\n\t */\n\tonHandleDragCancel?(current: Shape, info: TLHandleDragInfo<Shape>): void\n\n\t/**\n\t * A callback called when a shape starts being rotated.\n\t *\n\t * @param shape - The shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonRotateStart?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape changes from a rotation.\n\t *\n\t * @param initial - The shape at the start of the rotation.\n\t * @param current - The current shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonRotate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape finishes rotating.\n\t *\n\t * @param initial - The shape at the start of the rotation.\n\t * @param current - The current shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape rotation is cancelled.\n\t *\n\t * @param initial - The shape at the start of the rotation.\n\t * @param current - The current shape.\n\t * @public\n\t */\n\tonRotateCancel?(initial: Shape, current: Shape): void\n\n\t/**\n\t * Not currently used.\n\t *\n\t * @internal\n\t */\n\tonBindingChange?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's children change.\n\t *\n\t * @param shape - The shape.\n\t * @returns An array of shape updates, or void.\n\t * @public\n\t */\n\tonChildrenChange?(shape: Shape): TLShapePartial[] | void\n\n\t/**\n\t * A callback called when a shape's handle is double clicked.\n\t *\n\t * @param shape - The shape.\n\t * @param handle - The handle that is double-clicked.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonDoubleClickHandle?(shape: Shape, handle: TLHandle): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's edge is double clicked.\n\t *\n\t * @param shape - The shape.\n\t * @param info - Info about the edge.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonDoubleClickEdge?(shape: Shape, info: TLClickEventInfo): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's corner is double clicked.\n\t *\n\t * @param shape - The shape.\n\t * @param info - Info about the corner.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonDoubleClickCorner?(shape: Shape, info: TLClickEventInfo): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape is double clicked.\n\t *\n\t * @param shape - The shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonDoubleClick?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape is clicked.\n\t *\n\t * @param shape - The shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonClick?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape starts being edited.\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tonEditStart?(shape: Shape): void\n\n\t/**\n\t * A callback called when a shape finishes being edited.\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tonEditEnd?(shape: Shape): void\n}\n\n/**\n * Info about a crop.\n * @param handle - The handle being dragged.\n * @param change - The distance the handle is moved.\n * @param initialShape - The shape at the start of the resize.\n * @public\n */\nexport interface TLCropInfo<T extends TLShape> {\n\thandle: SelectionHandle\n\tchange: Vec\n\tcrop: TLShapeCrop\n\tuncroppedSize: { w: number; h: number }\n\tinitialShape: T\n\taspectRatioLocked?: boolean\n}\n\n/** @public */\nexport interface TLDragShapesInInfo {\n\tinitialDraggingOverShapeId: TLShapeId | null\n\tprevDraggingOverShapeId: TLShapeId | null\n\tinitialParentIds: Map<TLShapeId, TLParentId>\n\tinitialIndices: Map<TLShapeId, IndexKey>\n}\n\n/** @public */\nexport interface TLDragShapesOverInfo {\n\tinitialDraggingOverShapeId: TLShapeId | null\n\tinitialParentIds: Map<TLShapeId, TLParentId>\n\tinitialIndices: Map<TLShapeId, IndexKey>\n}\n\n/** @public */\nexport interface TLDragShapesOutInfo {\n\tnextDraggingOverShapeId: TLShapeId | null\n\tinitialDraggingOverShapeId: TLShapeId | null\n\tinitialParentIds: Map<TLShapeId, TLParentId>\n\tinitialIndices: Map<TLShapeId, IndexKey>\n}\n\n/** @public */\nexport interface TLDropShapesOverInfo {\n\tinitialDraggingOverShapeId: TLShapeId | null\n\tinitialParentIds: Map<TLShapeId, TLParentId>\n\tinitialIndices: Map<TLShapeId, IndexKey>\n}\n\n/**\n * The type of resize.\n *\n * 'scale_shape' - The shape is being scaled, usually as part of a larger selection.\n *\n * 'resize_bounds' - The user is directly manipulating an individual shape's bounds using a resize\n * handle. It is up to shape util implementers to decide how they want to handle the two\n * situations.\n *\n * @public\n */\nexport type TLResizeMode = 'scale_shape' | 'resize_bounds'\n\n/**\n * Info about a resize.\n * @param newPoint - The new local position of the shape.\n * @param handle - The handle being dragged.\n * @param mode - The type of resize.\n * @param scaleX - The scale in the x-axis.\n * @param scaleY - The scale in the y-axis.\n * @param initialBounds - The bounds of the shape at the start of the resize.\n * @param initialShape - The shape at the start of the resize.\n * @public\n */\nexport interface TLResizeInfo<T extends TLShape> {\n\tnewPoint: Vec\n\thandle: TLResizeHandle\n\tmode: TLResizeMode\n\tscaleX: number\n\tscaleY: number\n\tinitialBounds: Box\n\tinitialShape: T\n}\n\n/* -------------------- Dragging -------------------- */\n\n/** @public */\nexport interface TLHandleDragInfo<T extends TLShape> {\n\thandle: TLHandle\n\tisPrecise: boolean\n\tisCreatingShape: boolean\n\tinitial?: T | undefined\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { EMPTY_ARRAY } from '@tldraw/state'\nimport { LegacyMigrations, MigrationSequence } from '@tldraw/store'\nimport {\n\tRecordProps,\n\tTLHandle,\n\tTLParentId,\n\tTLPropsMigrations,\n\tTLShape,\n\tTLShapeCrop,\n\tTLShapeId,\n\tTLShapePartial,\n\tTLUnknownShape,\n} from '@tldraw/tlschema'\nimport { IndexKey } from '@tldraw/utils'\nimport { ReactElement } from 'react'\nimport { Box, SelectionHandle } from '../../primitives/Box'\nimport { Vec } from '../../primitives/Vec'\nimport { Geometry2d } from '../../primitives/geometry/Geometry2d'\nimport type { Editor } from '../Editor'\nimport { TLFontFace } from '../managers/FontManager/FontManager'\nimport { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'\nimport { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'\nimport { SvgExportContext } from '../types/SvgExportContext'\nimport { TLClickEventInfo } from '../types/event-types'\nimport { TLResizeHandle } from '../types/selection-types'\n\n/** @public */\nexport interface TLShapeUtilConstructor<\n\tT extends TLUnknownShape,\n\tU extends ShapeUtil<T> = ShapeUtil<T>,\n> {\n\tnew (editor: Editor): U\n\ttype: T['type']\n\tprops?: RecordProps<T>\n\tmigrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence\n}\n\n/**\n * Options passed to {@link ShapeUtil.canBind}. A binding that could be made. At least one of\n * `fromShapeType` or `toShapeType` will belong to this shape util.\n *\n * @public\n */\nexport interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLUnknownShape> {\n\t/** The type of shape referenced by the `fromId` of the binding. */\n\tfromShapeType: string\n\t/** The type of shape referenced by the `toId` of the binding. */\n\ttoShapeType: string\n\t/** The type of binding. */\n\tbindingType: string\n}\n\n/**\n * Options passed to {@link ShapeUtil.canBeLaidOut}.\n *\n * @public\n */\nexport interface TLShapeUtilCanBeLaidOutOpts {\n\t/** The type of action causing the layout. */\n\ttype?: 'align' | 'distribute' | 'pack' | 'stack' | 'flip' | 'stretch'\n\t/** The other shapes being laid out */\n\tshapes?: TLShape[]\n}\n\n/** Additional options for the {@link ShapeUtil.getGeometry} method.\n *\n * @public\n */\nexport interface TLGeometryOpts {\n\t/** The context in which the geometry is being requested. */\n\tcontext?: string\n}\n\n/** @public */\nexport interface TLShapeUtilCanvasSvgDef {\n\tkey: string\n\tcomponent: React.ComponentType\n}\n\n/** @public */\nexport abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {\n\t/** Configure this shape utils {@link ShapeUtil.options | `options`}. */\n\tstatic configure<T extends TLShapeUtilConstructor<any, any>>(\n\t\tthis: T,\n\t\toptions: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never\n\t): T {\n\t\t// @ts-expect-error -- typescript has no idea what's going on here but it's fine\n\t\treturn class extends this {\n\t\t\t// @ts-expect-error\n\t\t\toptions = { ...this.options, ...options }\n\t\t}\n\t}\n\n\tconstructor(public editor: Editor) {}\n\n\t/**\n\t * Options for this shape util. If you're implementing a custom shape util, you can override\n\t * this to provide customization options for your shape. If using an existing shape util, you\n\t * can customizing this by calling {@link ShapeUtil.configure}.\n\t */\n\toptions = {}\n\n\t/**\n\t * Props allow you to define the shape's properties in a way that the editor can understand.\n\t * This has two main uses:\n\t *\n\t * 1. Validation. Shapes will be validated using these props to stop bad data from being saved.\n\t * 2. Styles. Each {@link @tldraw/tlschema#StyleProp} in the props can be set on many shapes at\n\t * once, and will be remembered from one shape to the next.\n\t *\n\t * @example\n\t * ```tsx\n\t * import {T, TLBaseShape, TLDefaultColorStyle, DefaultColorStyle, ShapeUtil} from 'tldraw'\n\t *\n\t * type MyShape = TLBaseShape<'mine', {\n\t * color: TLDefaultColorStyle,\n\t * text: string,\n\t * }>\n\t *\n\t * class MyShapeUtil extends ShapeUtil<MyShape> {\n\t * static props = {\n\t * // we use tldraw's built-in color style:\n\t * color: DefaultColorStyle,\n\t * // validate that the text prop is a string:\n\t * text: T.string,\n\t * }\n\t * }\n\t * ```\n\t */\n\tstatic props?: RecordProps<TLUnknownShape>\n\n\t/**\n\t * Migrations allow you to make changes to a shape's props over time. Read the\n\t * {@link https://www.tldraw.dev/docs/persistence#Shape-props-migrations | shape prop migrations}\n\t * guide for more information.\n\t */\n\tstatic migrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence\n\n\t/**\n\t * The type of the shape util, which should match the shape's type.\n\t *\n\t * @public\n\t */\n\tstatic type: string\n\n\t/**\n\t * Get the default props for a shape.\n\t *\n\t * @public\n\t */\n\tabstract getDefaultProps(): Shape['props']\n\n\t/**\n\t * Get the shape's geometry.\n\t *\n\t * @param shape - The shape.\n\t * @param opts - Additional options for the request.\n\t * @public\n\t */\n\tabstract getGeometry(shape: Shape, opts?: TLGeometryOpts): Geometry2d\n\n\t/**\n\t * Get a JSX element for the shape (as an HTML element).\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tabstract component(shape: Shape): any\n\n\t/**\n\t * Get JSX describing the shape's indicator (as an SVG element).\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tabstract indicator(shape: Shape): any\n\n\t/**\n\t * Get the font faces that should be rendered in the document in order for this shape to render\n\t * correctly.\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tgetFontFaces(shape: Shape): TLFontFace[] {\n\t\treturn EMPTY_ARRAY\n\t}\n\n\t/**\n\t * Whether the shape can be snapped to by another shape.\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tcanSnap(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Whether the shape can be tabbed to.\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tcanTabTo(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Whether the shape can be scrolled while editing.\n\t *\n\t * @public\n\t */\n\tcanScroll(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape can be bound to. See {@link TLShapeUtilCanBindOpts} for details.\n\t *\n\t * @public\n\t */\n\tcanBind(_opts: TLShapeUtilCanBindOpts): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Whether the shape can be double clicked to edit.\n\t *\n\t * @public\n\t */\n\tcanEdit(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape can be resized.\n\t *\n\t * @public\n\t */\n\tcanResize(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * When the shape is resized, whether the shape's children should also be resized.\n\t *\n\t * @public\n\t */\n\tcanResizeChildren(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Whether the shape can be edited in read-only mode.\n\t *\n\t * @public\n\t */\n\tcanEditInReadonly(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape can be cropped.\n\t *\n\t * @public\n\t */\n\tcanCrop(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape can participate in layout functions such as alignment or distribution.\n\t *\n\t * @param shape - The shape.\n\t * @param info - Additional context information: the type of action causing the layout and the\n\t * @public\n\t *\n\t * @public\n\t */\n\tcanBeLaidOut(_shape: Shape, _info: TLShapeUtilCanBeLaidOutOpts): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Whether this shape can be culled. By default, shapes are culled for\n\t * performance reasons when they are outside of the viewport. Culled shapes are still rendered\n\t * to the DOM, but have their `display` property set to `none`.\n\t *\n\t * @param shape - The shape.\n\t */\n\tcanCull(_shape: Shape): boolean {\n\t\treturn true\n\t}\n\n\t/**\n\t * Does this shape provide a background for its children? If this is true,\n\t * then any children with a `renderBackground` method will have their\n\t * backgrounds rendered _above_ this shape. Otherwise, the children's\n\t * backgrounds will be rendered above either the next ancestor that provides\n\t * a background, or the canvas background.\n\t *\n\t * @internal\n\t */\n\tprovidesBackgroundForChildren(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Get the clip path to apply to this shape's children.\n\t *\n\t * @param shape - The shape to get the clip path for\n\t * @returns Array of points defining the clipping polygon in local coordinates, or undefined if no clipping\n\t * @public\n\t */\n\tgetClipPath?(shape: Shape): Vec[] | undefined\n\n\t/**\n\t * Whether a specific child shape should be clipped by this shape.\n\t * Only called if getClipPath returns a valid polygon.\n\t *\n\t * If not defined, the default behavior is to clip all children.\n\t *\n\t * @param child - The child shape to check\n\t * @returns boolean indicating if this child should be clipped\n\t * @public\n\t */\n\tshouldClipChild?(child: TLShape): boolean\n\n\t/**\n\t * Whether a specific shape should hide in the minimap.\n\t *\n\t * If not defined, the default behavior is to show all shapes in the minimap.\n\t *\n\t * @returns boolean indicating if this shape should hide in the minimap\n\t * @public\n\t */\n\thideInMinimap?(_shape: Shape): boolean\n\n\t/**\n\t * Whether the shape should hide its resize handles when selected.\n\t *\n\t * @public\n\t */\n\thideResizeHandles(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape should hide its rotation handles when selected.\n\t *\n\t * @public\n\t */\n\thideRotateHandle(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape should hide its selection bounds background when selected.\n\t *\n\t * @public\n\t */\n\thideSelectionBoundsBg(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape should hide its selection bounds foreground when selected.\n\t *\n\t * @public\n\t */\n\thideSelectionBoundsFg(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Whether the shape's aspect ratio is locked.\n\t *\n\t * @public\n\t */\n\tisAspectRatioLocked(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * By default, the bounds of an image export are the bounds of all the shapes it contains, plus\n\t * some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the\n\t * padding is skipped _if the bounds of that shape contains all the other shapes_. This is\n\t * useful in cases like annotating on top of an image, where you usually want to avoid extra\n\t * padding around the image if you don't need it.\n\t *\n\t * @param _shape - The shape to check\n\t * @returns True if this shape should be treated as an export bounds container\n\t */\n\tisExportBoundsContainer(_shape: Shape): boolean {\n\t\treturn false\n\t}\n\n\t/**\n\t * Get a JSX element for the shape (as an HTML element) to be rendered as part of the canvas background - behind any other shape content.\n\t *\n\t * @param shape - The shape.\n\t * @internal\n\t */\n\tbackgroundComponent?(shape: Shape): any\n\n\t/**\n\t * Get the interpolated props for an animating shape. This is an optional method.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * util.getInterpolatedProps?.(startShape, endShape, t)\n\t * ```\n\t *\n\t * @param startShape - The initial shape.\n\t * @param endShape - The initial shape.\n\t * @param progress - The normalized progress between zero (start) and 1 (end).\n\t * @public\n\t */\n\tgetInterpolatedProps?(startShape: Shape, endShape: Shape, progress: number): Shape['props']\n\n\t/**\n\t * Get an array of handle models for the shape. This is an optional method.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * util.getHandles?.(myShape)\n\t * ```\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tgetHandles?(shape: Shape): TLHandle[]\n\n\t/**\n\t * Get whether the shape can receive children of a given type.\n\t *\n\t * @param shape - The shape.\n\t * @param type - The shape type.\n\t * @public\n\t */\n\tcanReceiveNewChildrenOfType(_shape: Shape, _type: TLShape['type']) {\n\t\treturn false\n\t}\n\n\t/**\n\t * Get the shape as an SVG object.\n\t *\n\t * @param shape - The shape.\n\t * @param ctx - The export context for the SVG - used for adding e.g. \\<def\\>s\n\t * @returns An SVG element.\n\t * @public\n\t */\n\ttoSvg?(shape: Shape, ctx: SvgExportContext): ReactElement | null | Promise<ReactElement | null>\n\n\t/**\n\t * Get the shape's background layer as an SVG object.\n\t *\n\t * @param shape - The shape.\n\t * @param ctx - ctx - The export context for the SVG - used for adding e.g. \\<def\\>s\n\t * @returns An SVG element.\n\t * @public\n\t */\n\ttoBackgroundSvg?(\n\t\tshape: Shape,\n\t\tctx: SvgExportContext\n\t): ReactElement | null | Promise<ReactElement | null>\n\n\t/** @internal */\n\texpandSelectionOutlinePx(shape: Shape): number | Box {\n\t\treturn 0\n\t}\n\n\t/**\n\t * Return elements to be added to the \\<defs\\> section of the canvases SVG context. This can be\n\t * used to define SVG content (e.g. patterns & masks) that can be referred to by ID from svg\n\t * elements returned by `component`.\n\t *\n\t * Each def should have a unique `key`. If multiple defs from different shapes all have the same\n\t * key, only one will be used.\n\t */\n\tgetCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[] {\n\t\treturn []\n\t}\n\n\t/**\n\t * Get the geometry to use when snapping to this this shape in translate/resize operations. See\n\t * {@link BoundsSnapGeometry} for details.\n\t */\n\tgetBoundsSnapGeometry(_shape: Shape): BoundsSnapGeometry {\n\t\treturn {}\n\t}\n\n\t/**\n\t * Get the geometry to use when snapping handles to this shape. See {@link HandleSnapGeometry}\n\t * for details.\n\t */\n\tgetHandleSnapGeometry(_shape: Shape): HandleSnapGeometry {\n\t\treturn {}\n\t}\n\n\tgetText(_shape: Shape): string | undefined {\n\t\treturn undefined\n\t}\n\n\tgetAriaDescriptor(_shape: Shape): string | undefined {\n\t\treturn undefined\n\t}\n\n\t// Events\n\n\t/**\n\t * A callback called just before a shape is created. This method provides a last chance to modify\n\t * the created shape.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * onBeforeCreate = (next) => {\n\t * \treturn { ...next, x: next.x + 1 }\n\t * }\n\t * ```\n\t *\n\t * @param next - The next shape.\n\t * @returns The next shape or void.\n\t * @public\n\t */\n\tonBeforeCreate?(next: Shape): Shape | void\n\n\t/**\n\t * A callback called just before a shape is updated. This method provides a last chance to modify\n\t * the updated shape.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * onBeforeUpdate = (prev, next) => {\n\t * \tif (prev.x === next.x) {\n\t * \t\treturn { ...next, x: next.x + 1 }\n\t * \t}\n\t * }\n\t * ```\n\t *\n\t * @param prev - The previous shape.\n\t * @param next - The next shape.\n\t * @returns The next shape or void.\n\t * @public\n\t */\n\tonBeforeUpdate?(prev: Shape, next: Shape): Shape | void\n\n\t/**\n\t * A callback called when a shape changes from a crop.\n\t *\n\t * @param shape - The shape at the start of the crop.\n\t * @param info - Info about the crop.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonCrop?(\n\t\tshape: Shape,\n\t\tinfo: TLCropInfo<Shape>\n\t): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void\n\n\t/**\n\t * A callback called when some other shapes are dragged into this one. This fires when the shapes are dragged over the shape for the first time.\n\t *\n\t * @param shape - The shape.\n\t * @param shapes - The shapes that are being dragged in.\n\t * @public\n\t */\n\tonDragShapesIn?(shape: Shape, shapes: TLShape[], info: TLDragShapesInInfo): void\n\n\t/**\n\t * A callback called when some other shapes are dragged over this one. This fires when the shapes are dragged over the shape for the first time (after the onDragShapesIn callback), and again on every update while the shapes are being dragged.\n\t *\n\t * @example\n\t *\n\t * ```ts\n\t * onDragShapesOver = (shape, shapes) => {\n\t * \tthis.editor.reparentShapes(shapes, shape.id)\n\t * }\n\t * ```\n\t *\n\t * @param shape - The shape.\n\t * @param shapes - The shapes that are being dragged over this one.\n\t * @public\n\t */\n\tonDragShapesOver?(shape: Shape, shapes: TLShape[], info: TLDragShapesOverInfo): void\n\n\t/**\n\t * A callback called when some other shapes are dragged out of this one.\n\t *\n\t * @param shape - The shape.\n\t * @param shapes - The shapes that are being dragged out.\n\t * @public\n\t */\n\tonDragShapesOut?(shape: Shape, shapes: TLShape[], info: TLDragShapesOutInfo): void\n\n\t/**\n\t * A callback called when some other shapes are dropped over this one.\n\t *\n\t * @param shape - The shape.\n\t * @param shapes - The shapes that are being dropped over this one.\n\t * @public\n\t */\n\tonDropShapesOver?(shape: Shape, shapes: TLShape[], info: TLDropShapesOverInfo): void\n\n\t/**\n\t * A callback called when a shape starts being resized.\n\t *\n\t * @param shape - The shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonResizeStart?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape changes from a resize.\n\t *\n\t * @param shape - The shape at the start of the resize.\n\t * @param info - Info about the resize.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonResize?(\n\t\tshape: Shape,\n\t\tinfo: TLResizeInfo<Shape>\n\t): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void\n\n\t/**\n\t * A callback called when a shape finishes resizing.\n\t *\n\t * @param initial - The shape at the start of the resize.\n\t * @param current - The current shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape resize is cancelled.\n\t *\n\t * @param initial - The shape at the start of the resize.\n\t * @param current - The current shape.\n\t * @public\n\t */\n\tonResizeCancel?(initial: Shape, current: Shape): void\n\n\t/**\n\t * A callback called when a shape starts being translated.\n\t *\n\t * @param shape - The shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonTranslateStart?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape changes from a translation.\n\t *\n\t * @param initial - The shape at the start of the translation.\n\t * @param current - The current shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonTranslate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape finishes translating.\n\t *\n\t * @param initial - The shape at the start of the translation.\n\t * @param current - The current shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape translation is cancelled.\n\t *\n\t * @param initial - The shape at the start of the translation.\n\t * @param current - The current shape.\n\t * @public\n\t */\n\tonTranslateCancel?(initial: Shape, current: Shape): void\n\n\t/**\n\t * A callback called when a shape's handle starts being dragged.\n\t *\n\t * @param shape - The shape.\n\t * @param info - An object containing the handle and whether the handle is 'precise' or not.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonHandleDragStart?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's handle changes.\n\t *\n\t * @param shape - The current shape.\n\t * @param info - An object containing the handle and whether the handle is 'precise' or not.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonHandleDrag?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's handle finishes being dragged.\n\t *\n\t * @param current - The current shape.\n\t * @param info - An object containing the handle and whether the handle is 'precise' or not.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonHandleDragEnd?(current: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's handle drag is cancelled.\n\t *\n\t * @param current - The current shape.\n\t * @param info - An object containing the handle and whether the handle is 'precise' or not.\n\t * @public\n\t */\n\tonHandleDragCancel?(current: Shape, info: TLHandleDragInfo<Shape>): void\n\n\t/**\n\t * A callback called when a shape starts being rotated.\n\t *\n\t * @param shape - The shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonRotateStart?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape changes from a rotation.\n\t *\n\t * @param initial - The shape at the start of the rotation.\n\t * @param current - The current shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonRotate?(initial: Shape, current: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape finishes rotating.\n\t *\n\t * @param initial - The shape at the start of the rotation.\n\t * @param current - The current shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape rotation is cancelled.\n\t *\n\t * @param initial - The shape at the start of the rotation.\n\t * @param current - The current shape.\n\t * @public\n\t */\n\tonRotateCancel?(initial: Shape, current: Shape): void\n\n\t/**\n\t * Not currently used.\n\t *\n\t * @internal\n\t */\n\tonBindingChange?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's children change.\n\t *\n\t * @param shape - The shape.\n\t * @returns An array of shape updates, or void.\n\t * @public\n\t */\n\tonChildrenChange?(shape: Shape): TLShapePartial[] | void\n\n\t/**\n\t * A callback called when a shape's handle is double clicked.\n\t *\n\t * @param shape - The shape.\n\t * @param handle - The handle that is double-clicked.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonDoubleClickHandle?(shape: Shape, handle: TLHandle): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's edge is double clicked.\n\t *\n\t * @param shape - The shape.\n\t * @param info - Info about the edge.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonDoubleClickEdge?(shape: Shape, info: TLClickEventInfo): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape's corner is double clicked.\n\t *\n\t * @param shape - The shape.\n\t * @param info - Info about the corner.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonDoubleClickCorner?(shape: Shape, info: TLClickEventInfo): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape is double clicked.\n\t *\n\t * @param shape - The shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonDoubleClick?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape is clicked.\n\t *\n\t * @param shape - The shape.\n\t * @returns A change to apply to the shape, or void.\n\t * @public\n\t */\n\tonClick?(shape: Shape): TLShapePartial<Shape> | void\n\n\t/**\n\t * A callback called when a shape starts being edited.\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tonEditStart?(shape: Shape): void\n\n\t/**\n\t * A callback called when a shape finishes being edited.\n\t *\n\t * @param shape - The shape.\n\t * @public\n\t */\n\tonEditEnd?(shape: Shape): void\n}\n\n/**\n * Info about a crop.\n * @param handle - The handle being dragged.\n * @param change - The distance the handle is moved.\n * @param initialShape - The shape at the start of the resize.\n * @public\n */\nexport interface TLCropInfo<T extends TLShape> {\n\thandle: SelectionHandle\n\tchange: Vec\n\tcrop: TLShapeCrop\n\tuncroppedSize: { w: number; h: number }\n\tinitialShape: T\n\taspectRatioLocked?: boolean\n}\n\n/** @public */\nexport interface TLDragShapesInInfo {\n\tinitialDraggingOverShapeId: TLShapeId | null\n\tprevDraggingOverShapeId: TLShapeId | null\n\tinitialParentIds: Map<TLShapeId, TLParentId>\n\tinitialIndices: Map<TLShapeId, IndexKey>\n}\n\n/** @public */\nexport interface TLDragShapesOverInfo {\n\tinitialDraggingOverShapeId: TLShapeId | null\n\tinitialParentIds: Map<TLShapeId, TLParentId>\n\tinitialIndices: Map<TLShapeId, IndexKey>\n}\n\n/** @public */\nexport interface TLDragShapesOutInfo {\n\tnextDraggingOverShapeId: TLShapeId | null\n\tinitialDraggingOverShapeId: TLShapeId | null\n\tinitialParentIds: Map<TLShapeId, TLParentId>\n\tinitialIndices: Map<TLShapeId, IndexKey>\n}\n\n/** @public */\nexport interface TLDropShapesOverInfo {\n\tinitialDraggingOverShapeId: TLShapeId | null\n\tinitialParentIds: Map<TLShapeId, TLParentId>\n\tinitialIndices: Map<TLShapeId, IndexKey>\n}\n\n/**\n * The type of resize.\n *\n * 'scale_shape' - The shape is being scaled, usually as part of a larger selection.\n *\n * 'resize_bounds' - The user is directly manipulating an individual shape's bounds using a resize\n * handle. It is up to shape util implementers to decide how they want to handle the two\n * situations.\n *\n * @public\n */\nexport type TLResizeMode = 'scale_shape' | 'resize_bounds'\n\n/**\n * Info about a resize.\n * @param newPoint - The new local position of the shape.\n * @param handle - The handle being dragged.\n * @param mode - The type of resize.\n * @param scaleX - The scale in the x-axis.\n * @param scaleY - The scale in the y-axis.\n * @param initialBounds - The bounds of the shape at the start of the resize.\n * @param initialShape - The shape at the start of the resize.\n * @public\n */\nexport interface TLResizeInfo<T extends TLShape> {\n\tnewPoint: Vec\n\thandle: TLResizeHandle\n\tmode: TLResizeMode\n\tscaleX: number\n\tscaleY: number\n\tinitialBounds: Box\n\tinitialShape: T\n}\n\n/* -------------------- Dragging -------------------- */\n\n/** @public */\nexport interface TLHandleDragInfo<T extends TLShape> {\n\thandle: TLHandle\n\tisPrecise: boolean\n\tisCreatingShape: boolean\n\tinitial?: T | undefined\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -24,6 +24,7 @@ module.exports = __toCommonJS(useCanvasEvents_exports);
24
24
  var import_state_react = require("@tldraw/state-react");
25
25
  var import_react = require("react");
26
26
  var import_constants = require("../constants");
27
+ var import_environment = require("../globals/environment");
27
28
  var import_dom = require("../utils/dom");
28
29
  var import_getPointerInfo = require("../utils/getPointerInfo");
29
30
  var import_useEditor = require("./useEditor");
@@ -147,7 +148,7 @@ function useCanvasEvents() {
147
148
  if (e.clientX === lastX && e.clientY === lastY) return;
148
149
  lastX = e.clientX;
149
150
  lastY = e.clientY;
150
- const events2 = currentTool.useCoalescedEvents && e.getCoalescedEvents ? e.getCoalescedEvents() : [e];
151
+ const events2 = !import_environment.tlenv.isIos && currentTool.useCoalescedEvents && e.getCoalescedEvents ? e.getCoalescedEvents() : [e];
151
152
  for (const singleEvent of events2) {
152
153
  editor.dispatch({
153
154
  type: "pointer",
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/lib/hooks/useCanvasEvents.ts"],
4
- "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport React, { useEffect, useMemo } from 'react'\nimport { RIGHT_MOUSE_BUTTON } from '../constants'\nimport { preventDefault, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\nexport function useCanvasEvents() {\n\tconst editor = useEditor()\n\tconst currentTool = useValue('current tool', () => editor.getCurrentTool(), [editor])\n\n\tconst events = useMemo(\n\t\tfunction canvasEvents() {\n\t\t\tfunction onPointerDown(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\t\tif (e.button === RIGHT_MOUSE_BUTTON) {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\t\tname: 'right_click',\n\t\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (e.button !== 0 && e.button !== 1 && e.button !== 5) return\n\n\t\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tfunction onPointerUp(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return\n\n\t\t\t\treleasePointerCapture(e.currentTarget, e)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tfunction onPointerEnter(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return\n\t\t\t\tconst canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'\n\t\t\t\teditor.updateInstanceState({ isHoveringCanvas: canHover ? true : null })\n\t\t\t}\n\n\t\t\tfunction onPointerLeave(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return\n\t\t\t\tconst canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'\n\t\t\t\teditor.updateInstanceState({ isHoveringCanvas: canHover ? false : null })\n\t\t\t}\n\n\t\t\tfunction onTouchStart(e: React.TouchEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\tfunction onTouchEnd(e: React.TouchEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\t// check that e.target is an HTMLElement\n\t\t\t\tif (!(e.target instanceof HTMLElement)) return\n\n\t\t\t\tconst editingShapeId = editor.getEditingShape()?.id\n\t\t\t\tif (\n\t\t\t\t\t// if the target is not inside the editing shape\n\t\t\t\t\t!(editingShapeId && e.target.closest(`[data-shape-id=\"${editingShapeId}\"]`)) &&\n\t\t\t\t\t// and the target is not an clickable element\n\t\t\t\t\te.target.tagName !== 'A' &&\n\t\t\t\t\t// or a TextArea.tsx ?\n\t\t\t\t\te.target.tagName !== 'TEXTAREA' &&\n\t\t\t\t\t!e.target.isContentEditable\n\t\t\t\t) {\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver(e: React.DragEvent<Element>) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\tasync function onDrop(e: React.DragEvent<Element>) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tpreventDefault(e)\n\t\t\t\te.stopPropagation()\n\n\t\t\t\tif (e.dataTransfer?.files?.length) {\n\t\t\t\t\tconst files = Array.from(e.dataTransfer.files)\n\n\t\t\t\t\tawait editor.putExternalContent({\n\t\t\t\t\t\ttype: 'files',\n\t\t\t\t\t\tfiles,\n\t\t\t\t\t\tpoint: editor.screenToPage({ x: e.clientX, y: e.clientY }),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tconst url = e.dataTransfer.getData('url')\n\t\t\t\tif (url) {\n\t\t\t\t\tawait editor.putExternalContent({\n\t\t\t\t\t\ttype: 'url',\n\t\t\t\t\t\turl,\n\t\t\t\t\t\tpoint: editor.screenToPage({ x: e.clientX, y: e.clientY }),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onClick(e: React.MouseEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\te.stopPropagation()\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonPointerDown,\n\t\t\t\tonPointerUp,\n\t\t\t\tonPointerEnter,\n\t\t\t\tonPointerLeave,\n\t\t\t\tonDragOver,\n\t\t\t\tonDrop,\n\t\t\t\tonTouchStart,\n\t\t\t\tonTouchEnd,\n\t\t\t\tonClick,\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t// onPointerMove is special: where we're only interested in the other events when they're\n\t// happening _on_ the canvas (as opposed to outside of it, or on UI floating over it), we want\n\t// the pointer position to be up to date regardless of whether it's over the tldraw canvas or\n\t// not. So instead of returning a listener to be attached to the canvas, we directly attach a\n\t// listener to the whole document instead.\n\tuseEffect(() => {\n\t\tlet lastX: number, lastY: number\n\n\t\tfunction onPointerMove(e: PointerEvent) {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\teditor.markEventAsHandled(e)\n\n\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\tlastX = e.clientX\n\t\t\tlastY = e.clientY\n\n\t\t\t// For tools that benefit from a higher fidelity of events,\n\t\t\t// we dispatch the coalesced events.\n\t\t\t// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.\n\t\t\tconst events =\n\t\t\t\tcurrentTool.useCoalescedEvents && e.getCoalescedEvents ? e.getCoalescedEvents() : [e]\n\t\t\tfor (const singleEvent of events) {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\t...getPointerInfo(editor, singleEvent),\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tdocument.body.addEventListener('pointermove', onPointerMove)\n\t\treturn () => {\n\t\t\tdocument.body.removeEventListener('pointermove', onPointerMove)\n\t\t}\n\t}, [editor, currentTool])\n\n\treturn events\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport React, { useEffect, useMemo } from 'react'\nimport { RIGHT_MOUSE_BUTTON } from '../constants'\nimport { tlenv } from '../globals/environment'\nimport { preventDefault, releasePointerCapture, setPointerCapture } from '../utils/dom'\nimport { getPointerInfo } from '../utils/getPointerInfo'\nimport { useEditor } from './useEditor'\n\nexport function useCanvasEvents() {\n\tconst editor = useEditor()\n\tconst currentTool = useValue('current tool', () => editor.getCurrentTool(), [editor])\n\n\tconst events = useMemo(\n\t\tfunction canvasEvents() {\n\t\t\tfunction onPointerDown(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\n\t\t\t\tif (e.button === RIGHT_MOUSE_BUTTON) {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\t\tname: 'right_click',\n\t\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (e.button !== 0 && e.button !== 1 && e.button !== 5) return\n\n\t\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tfunction onPointerUp(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return\n\n\t\t\t\treleasePointerCapture(e.currentTarget, e)\n\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_up',\n\t\t\t\t\t...getPointerInfo(editor, e),\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tfunction onPointerEnter(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return\n\t\t\t\tconst canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'\n\t\t\t\teditor.updateInstanceState({ isHoveringCanvas: canHover ? true : null })\n\t\t\t}\n\n\t\t\tfunction onPointerLeave(e: React.PointerEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tif (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return\n\t\t\t\tconst canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'\n\t\t\t\teditor.updateInstanceState({ isHoveringCanvas: canHover ? false : null })\n\t\t\t}\n\n\t\t\tfunction onTouchStart(e: React.TouchEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\tfunction onTouchEnd(e: React.TouchEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\t// check that e.target is an HTMLElement\n\t\t\t\tif (!(e.target instanceof HTMLElement)) return\n\n\t\t\t\tconst editingShapeId = editor.getEditingShape()?.id\n\t\t\t\tif (\n\t\t\t\t\t// if the target is not inside the editing shape\n\t\t\t\t\t!(editingShapeId && e.target.closest(`[data-shape-id=\"${editingShapeId}\"]`)) &&\n\t\t\t\t\t// and the target is not an clickable element\n\t\t\t\t\te.target.tagName !== 'A' &&\n\t\t\t\t\t// or a TextArea.tsx ?\n\t\t\t\t\te.target.tagName !== 'TEXTAREA' &&\n\t\t\t\t\t!e.target.isContentEditable\n\t\t\t\t) {\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver(e: React.DragEvent<Element>) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tpreventDefault(e)\n\t\t\t}\n\n\t\t\tasync function onDrop(e: React.DragEvent<Element>) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\tpreventDefault(e)\n\t\t\t\te.stopPropagation()\n\n\t\t\t\tif (e.dataTransfer?.files?.length) {\n\t\t\t\t\tconst files = Array.from(e.dataTransfer.files)\n\n\t\t\t\t\tawait editor.putExternalContent({\n\t\t\t\t\t\ttype: 'files',\n\t\t\t\t\t\tfiles,\n\t\t\t\t\t\tpoint: editor.screenToPage({ x: e.clientX, y: e.clientY }),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tconst url = e.dataTransfer.getData('url')\n\t\t\t\tif (url) {\n\t\t\t\t\tawait editor.putExternalContent({\n\t\t\t\t\t\ttype: 'url',\n\t\t\t\t\t\turl,\n\t\t\t\t\t\tpoint: editor.screenToPage({ x: e.clientX, y: e.clientY }),\n\t\t\t\t\t})\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onClick(e: React.MouseEvent) {\n\t\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\t\te.stopPropagation()\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tonPointerDown,\n\t\t\t\tonPointerUp,\n\t\t\t\tonPointerEnter,\n\t\t\t\tonPointerLeave,\n\t\t\t\tonDragOver,\n\t\t\t\tonDrop,\n\t\t\t\tonTouchStart,\n\t\t\t\tonTouchEnd,\n\t\t\t\tonClick,\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\t// onPointerMove is special: where we're only interested in the other events when they're\n\t// happening _on_ the canvas (as opposed to outside of it, or on UI floating over it), we want\n\t// the pointer position to be up to date regardless of whether it's over the tldraw canvas or\n\t// not. So instead of returning a listener to be attached to the canvas, we directly attach a\n\t// listener to the whole document instead.\n\tuseEffect(() => {\n\t\tlet lastX: number, lastY: number\n\n\t\tfunction onPointerMove(e: PointerEvent) {\n\t\t\tif (editor.wasEventAlreadyHandled(e)) return\n\t\t\teditor.markEventAsHandled(e)\n\n\t\t\tif (e.clientX === lastX && e.clientY === lastY) return\n\t\t\tlastX = e.clientX\n\t\t\tlastY = e.clientY\n\n\t\t\t// For tools that benefit from a higher fidelity of events,\n\t\t\t// we dispatch the coalesced events.\n\t\t\t// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.\n\t\t\t// Specifically, in local mode (non-https) mode, iOS does not `useCoalescedEvents`\n\t\t\t// so it appears like the ink is working locally, when really it's just that `useCoalescedEvents`\n\t\t\t// is disabled. The intent here is to have `useCoalescedEvents` disabled for iOS.\n\t\t\tconst events =\n\t\t\t\t!tlenv.isIos && currentTool.useCoalescedEvents && e.getCoalescedEvents\n\t\t\t\t\t? e.getCoalescedEvents()\n\t\t\t\t\t: [e]\n\n\t\t\tfor (const singleEvent of events) {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\t...getPointerInfo(editor, singleEvent),\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\tdocument.body.addEventListener('pointermove', onPointerMove)\n\t\treturn () => {\n\t\t\tdocument.body.removeEventListener('pointermove', onPointerMove)\n\t\t}\n\t}, [editor, currentTool])\n\n\treturn events\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["events"]
7
7
  }
@@ -32,7 +32,7 @@ __export(useDarkMode_exports, {
32
32
  });
33
33
  module.exports = __toCommonJS(useDarkMode_exports);
34
34
  var import_state_react = require("@tldraw/state-react");
35
- var import_react = __toESM(require("react"));
35
+ var import_react = __toESM(require("react"), 1);
36
36
  var import_debug_flags = require("../utils/debug-flags");
37
37
  var import_useContainer = require("./useContainer");
38
38
  var import_useEditor = require("./useEditor");
@@ -35,7 +35,7 @@ __export(useEditor_exports, {
35
35
  });
36
36
  module.exports = __toCommonJS(useEditor_exports);
37
37
  var import_jsx_runtime = require("react/jsx-runtime");
38
- var import_react = __toESM(require("react"));
38
+ var import_react = __toESM(require("react"), 1);
39
39
  var import_useSafeId = require("./useSafeId");
40
40
  const EditorContext = (0, import_react.createContext)(null);
41
41
  function useEditor() {
@@ -32,7 +32,7 @@ __export(useGestureEvents_exports, {
32
32
  });
33
33
  module.exports = __toCommonJS(useGestureEvents_exports);
34
34
  var import_react = require("@use-gesture/react");
35
- var React = __toESM(require("react"));
35
+ var React = __toESM(require("react"), 1);
36
36
  var import_Vec = require("../primitives/Vec");
37
37
  var import_dom = require("../utils/dom");
38
38
  var import_keyboard = require("../utils/keyboard");
@@ -31,7 +31,7 @@ __export(useHandleEvents_exports, {
31
31
  useHandleEvents: () => useHandleEvents
32
32
  });
33
33
  module.exports = __toCommonJS(useHandleEvents_exports);
34
- var React = __toESM(require("react"));
34
+ var React = __toESM(require("react"), 1);
35
35
  var import_dom = require("../utils/dom");
36
36
  var import_getPointerInfo = require("../utils/getPointerInfo");
37
37
  var import_useEditor = require("./useEditor");
@@ -33,7 +33,7 @@ __export(useZoomCss_exports, {
33
33
  module.exports = __toCommonJS(useZoomCss_exports);
34
34
  var import_state = require("@tldraw/state");
35
35
  var import_utils = require("@tldraw/utils");
36
- var React = __toESM(require("react"));
36
+ var React = __toESM(require("react"), 1);
37
37
  var import_useContainer = require("./useContainer");
38
38
  var import_useEditor = require("./useEditor");
39
39
  function useZoomCss() {
@@ -112,6 +112,11 @@ class LicenseManager {
112
112
  url.searchParams.set("license_type", trackType);
113
113
  if ("license" in result) {
114
114
  url.searchParams.set("license_id", result.license.id);
115
+ const sku = this.isFlagEnabled(result.license.flags, FLAGS.EVALUATION_LICENSE) ? "evaluation" : this.isFlagEnabled(result.license.flags, FLAGS.ANNUAL_LICENSE) ? "annual" : this.isFlagEnabled(result.license.flags, FLAGS.PERPETUAL_LICENSE) ? "perpetual" : "unknown";
116
+ url.searchParams.set("sku", sku);
117
+ }
118
+ if (process.env.NODE_ENV) {
119
+ url.searchParams.set("environment", process.env.NODE_ENV);
115
120
  }
116
121
  fetch(url.toString());
117
122
  }
@@ -283,20 +288,25 @@ class LicenseManager {
283
288
  }
284
289
  outputLicenseInfoIfNeeded(result) {
285
290
  if (result.license.flags >= HIGHEST_FLAG * 2) {
286
- this.outputMessages([
287
- "This tldraw license contains some unknown flags.",
288
- "You may want to update tldraw packages to a newer version to get access to new functionality."
289
- ]);
291
+ this.outputMessages(
292
+ [
293
+ "Warning: This tldraw license contains some unknown flags.",
294
+ "This will still work, however, you may want to update tldraw packages to a newer version to get access to new functionality."
295
+ ],
296
+ "warning"
297
+ );
290
298
  }
291
299
  }
292
- outputMessages(messages) {
300
+ outputMessages(messages, type = "error") {
293
301
  if (this.isTest) return;
294
302
  if (this.verbose) {
295
303
  this.outputDelimiter();
296
304
  for (const message of messages) {
305
+ const color = type === "warning" ? "orange" : "crimson";
306
+ const bgColor = type === "warning" ? "orange" : "crimson";
297
307
  console.log(
298
308
  `%c${message}`,
299
- `color: white; background: crimson; padding: 2px; border-radius: 3px;`
309
+ `color: ${color}; background: ${bgColor}; padding: 2px; border-radius: 3px;`
300
310
  );
301
311
  }
302
312
  this.outputDelimiter();