@tldraw/editor 3.16.0-next.f9f54ec051f3 → 3.16.0-next.fe14f1b4181f

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 (137) hide show
  1. package/dist-cjs/index.d.ts +110 -9
  2. package/dist-cjs/index.js +3 -1
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/TldrawEditor.js +8 -2
  5. package/dist-cjs/lib/TldrawEditor.js.map +2 -2
  6. package/dist-cjs/lib/components/MenuClickCapture.js +0 -5
  7. package/dist-cjs/lib/components/MenuClickCapture.js.map +2 -2
  8. package/dist-cjs/lib/components/Shape.js +7 -10
  9. package/dist-cjs/lib/components/Shape.js.map +2 -2
  10. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +4 -23
  11. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +2 -2
  12. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js +1 -1
  13. package/dist-cjs/lib/components/default-components/DefaultCollaboratorHint.js.map +1 -1
  14. package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js +1 -1
  15. package/dist-cjs/lib/components/default-components/DefaultErrorFallback.js.map +2 -2
  16. package/dist-cjs/lib/components/default-components/DefaultScribble.js +1 -1
  17. package/dist-cjs/lib/components/default-components/DefaultScribble.js.map +2 -2
  18. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js +9 -1
  19. package/dist-cjs/lib/components/default-components/DefaultShapeIndicator.js.map +2 -2
  20. package/dist-cjs/lib/config/TLUserPreferences.js +9 -3
  21. package/dist-cjs/lib/config/TLUserPreferences.js.map +2 -2
  22. package/dist-cjs/lib/editor/Editor.js +63 -24
  23. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  24. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js +9 -4
  25. package/dist-cjs/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.js.map +2 -2
  26. package/dist-cjs/lib/editor/shapes/ShapeUtil.js +13 -0
  27. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  28. package/dist-cjs/lib/editor/types/misc-types.js.map +1 -1
  29. package/dist-cjs/lib/exports/getSvgJsx.js +35 -16
  30. package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
  31. package/dist-cjs/lib/hooks/useCanvasEvents.js +31 -25
  32. package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
  33. package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js +4 -1
  34. package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js.map +2 -2
  35. package/dist-cjs/lib/{utils/nearestMultiple.js → hooks/useStateAttribute.js} +15 -14
  36. package/dist-cjs/lib/hooks/useStateAttribute.js.map +7 -0
  37. package/dist-cjs/lib/license/Watermark.js +6 -6
  38. package/dist-cjs/lib/license/Watermark.js.map +1 -1
  39. package/dist-cjs/lib/options.js +7 -0
  40. package/dist-cjs/lib/options.js.map +2 -2
  41. package/dist-cjs/lib/primitives/Box.js +3 -0
  42. package/dist-cjs/lib/primitives/Box.js.map +2 -2
  43. package/dist-cjs/lib/utils/EditorAtom.js +45 -0
  44. package/dist-cjs/lib/utils/EditorAtom.js.map +7 -0
  45. package/dist-cjs/version.js +3 -3
  46. package/dist-cjs/version.js.map +1 -1
  47. package/dist-esm/index.d.mts +110 -9
  48. package/dist-esm/index.mjs +3 -1
  49. package/dist-esm/index.mjs.map +2 -2
  50. package/dist-esm/lib/TldrawEditor.mjs +8 -2
  51. package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
  52. package/dist-esm/lib/components/MenuClickCapture.mjs +0 -5
  53. package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
  54. package/dist-esm/lib/components/Shape.mjs +7 -10
  55. package/dist-esm/lib/components/Shape.mjs.map +2 -2
  56. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +4 -23
  57. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
  58. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs +1 -1
  59. package/dist-esm/lib/components/default-components/DefaultCollaboratorHint.mjs.map +1 -1
  60. package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs +1 -1
  61. package/dist-esm/lib/components/default-components/DefaultErrorFallback.mjs.map +2 -2
  62. package/dist-esm/lib/components/default-components/DefaultScribble.mjs +1 -1
  63. package/dist-esm/lib/components/default-components/DefaultScribble.mjs.map +2 -2
  64. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs +9 -1
  65. package/dist-esm/lib/components/default-components/DefaultShapeIndicator.mjs.map +2 -2
  66. package/dist-esm/lib/config/TLUserPreferences.mjs +9 -3
  67. package/dist-esm/lib/config/TLUserPreferences.mjs.map +2 -2
  68. package/dist-esm/lib/editor/Editor.mjs +63 -24
  69. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  70. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs +9 -4
  71. package/dist-esm/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.mjs.map +2 -2
  72. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs +13 -0
  73. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  74. package/dist-esm/lib/exports/getSvgJsx.mjs +36 -16
  75. package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
  76. package/dist-esm/lib/hooks/useCanvasEvents.mjs +32 -26
  77. package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
  78. package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs +4 -1
  79. package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs.map +2 -2
  80. package/dist-esm/lib/hooks/useStateAttribute.mjs +15 -0
  81. package/dist-esm/lib/hooks/useStateAttribute.mjs.map +7 -0
  82. package/dist-esm/lib/license/Watermark.mjs +6 -6
  83. package/dist-esm/lib/license/Watermark.mjs.map +1 -1
  84. package/dist-esm/lib/options.mjs +7 -0
  85. package/dist-esm/lib/options.mjs.map +2 -2
  86. package/dist-esm/lib/primitives/Box.mjs +4 -1
  87. package/dist-esm/lib/primitives/Box.mjs.map +2 -2
  88. package/dist-esm/lib/utils/EditorAtom.mjs +25 -0
  89. package/dist-esm/lib/utils/EditorAtom.mjs.map +7 -0
  90. package/dist-esm/version.mjs +3 -3
  91. package/dist-esm/version.mjs.map +1 -1
  92. package/editor.css +301 -288
  93. package/package.json +14 -37
  94. package/src/index.ts +2 -0
  95. package/src/lib/TldrawEditor.tsx +13 -6
  96. package/src/lib/components/MenuClickCapture.tsx +0 -8
  97. package/src/lib/components/Shape.tsx +6 -12
  98. package/src/lib/components/default-components/DefaultCanvas.tsx +5 -22
  99. package/src/lib/components/default-components/DefaultCollaboratorHint.tsx +1 -1
  100. package/src/lib/components/default-components/DefaultErrorFallback.tsx +1 -1
  101. package/src/lib/components/default-components/DefaultScribble.tsx +1 -1
  102. package/src/lib/components/default-components/DefaultShapeIndicator.tsx +5 -1
  103. package/src/lib/config/TLUserPreferences.ts +8 -1
  104. package/src/lib/editor/Editor.test.ts +12 -11
  105. package/src/lib/editor/Editor.ts +88 -47
  106. package/src/lib/editor/managers/ClickManager/ClickManager.test.ts +15 -14
  107. package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.test.ts +16 -15
  108. package/src/lib/editor/managers/FocusManager/FocusManager.test.ts +49 -48
  109. package/src/lib/editor/managers/FontManager/FontManager.test.ts +24 -23
  110. package/src/lib/editor/managers/HistoryManager/HistoryManager.test.ts +7 -6
  111. package/src/lib/editor/managers/ScribbleManager/ScribbleManager.test.ts +12 -11
  112. package/src/lib/editor/managers/SnapManager/SnapManager.test.ts +57 -50
  113. package/src/lib/editor/managers/TextManager/TextManager.test.ts +51 -26
  114. package/src/lib/editor/managers/TickManager/TickManager.test.ts +14 -13
  115. package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts +34 -26
  116. package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts +6 -1
  117. package/src/lib/editor/shapes/ShapeUtil.ts +14 -0
  118. package/src/lib/editor/types/misc-types.ts +54 -1
  119. package/src/lib/exports/getSvgJsx.test.ts +868 -0
  120. package/src/lib/exports/getSvgJsx.tsx +78 -21
  121. package/src/lib/hooks/useCanvasEvents.ts +45 -38
  122. package/src/lib/hooks/usePassThroughWheelEvents.ts +6 -1
  123. package/src/lib/hooks/useStateAttribute.ts +15 -0
  124. package/src/lib/license/LicenseManager.test.ts +3 -1
  125. package/src/lib/license/Watermark.test.tsx +2 -1
  126. package/src/lib/license/Watermark.tsx +6 -6
  127. package/src/lib/options.ts +8 -0
  128. package/src/lib/primitives/Box.test.ts +126 -0
  129. package/src/lib/primitives/Box.ts +10 -1
  130. package/src/lib/utils/EditorAtom.ts +37 -0
  131. package/src/lib/utils/sync/LocalIndexedDb.test.ts +2 -1
  132. package/src/lib/utils/sync/TLLocalSyncClient.test.ts +15 -15
  133. package/src/version.ts +3 -3
  134. package/dist-cjs/lib/utils/nearestMultiple.js.map +0 -7
  135. package/dist-esm/lib/utils/nearestMultiple.mjs +0 -14
  136. package/dist-esm/lib/utils/nearestMultiple.mjs.map +0 -7
  137. package/src/lib/utils/nearestMultiple.ts +0 -13
@@ -3944,6 +3944,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
3944
3944
  hitInside = false,
3945
3945
  hitFrameInside = false
3946
3946
  } = opts;
3947
+ const [innerMargin, outerMargin] = Array.isArray(margin) ? margin : [margin, margin];
3947
3948
  let inHollowSmallestArea = Infinity;
3948
3949
  let inHollowSmallestAreaHit = null;
3949
3950
  let inMarginClosestToEdgeDistance = Infinity;
@@ -3953,7 +3954,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
3953
3954
  return false;
3954
3955
  const pageMask = this.getShapeMask(shape);
3955
3956
  if (pageMask && !pointInPolygon(point, pageMask)) return false;
3956
- if (filter) return filter(shape);
3957
+ if (filter && !filter(shape)) return false;
3957
3958
  return true;
3958
3959
  });
3959
3960
  for (let i = shapesToCheck.length - 1; i >= 0; i--) {
@@ -3969,8 +3970,8 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
3969
3970
  }
3970
3971
  }
3971
3972
  if (this.isShapeOfType(shape, "frame")) {
3972
- const distance2 = geometry.distanceToPoint(pointInShapeSpace, hitInside);
3973
- if (Math.abs(distance2) <= margin) {
3973
+ const distance2 = geometry.distanceToPoint(pointInShapeSpace, hitFrameInside);
3974
+ if (hitFrameInside ? distance2 > 0 && distance2 <= outerMargin || distance2 <= 0 && distance2 > -innerMargin : distance2 > 0 && distance2 <= outerMargin) {
3974
3975
  return inMarginClosestToEdgeHit || shape;
3975
3976
  }
3976
3977
  if (geometry.hitTestPoint(pointInShapeSpace, 0, true)) {
@@ -3990,10 +3991,10 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
3990
3991
  }
3991
3992
  distance = minDistance;
3992
3993
  } else {
3993
- if (margin === 0 && (geometry.bounds.w < 1 || geometry.bounds.h < 1)) {
3994
+ if (outerMargin === 0 && (geometry.bounds.w < 1 || geometry.bounds.h < 1)) {
3994
3995
  distance = geometry.distanceToPoint(pointInShapeSpace, hitInside);
3995
3996
  } else {
3996
- if (geometry.bounds.containsPoint(pointInShapeSpace, margin)) {
3997
+ if (geometry.bounds.containsPoint(pointInShapeSpace, outerMargin)) {
3997
3998
  distance = geometry.distanceToPoint(pointInShapeSpace, hitInside);
3998
3999
  } else {
3999
4000
  distance = Infinity;
@@ -4001,12 +4002,22 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
4001
4002
  }
4002
4003
  }
4003
4004
  if (geometry.isClosed) {
4004
- if (distance <= margin) {
4005
+ if (distance <= outerMargin || hitInside && distance <= 0 && distance > -innerMargin) {
4005
4006
  if (geometry.isFilled || isGroup && geometry.children[0].isFilled) {
4006
4007
  return inMarginClosestToEdgeHit || shape;
4007
4008
  } else {
4008
4009
  if (this.getShapePageBounds(shape).contains(viewportPageBounds)) continue;
4009
- if (Math.abs(distance) < margin) {
4010
+ if (hitInside ? (
4011
+ // On hitInside, the distance will be negative for hits inside
4012
+ // If the distance is positive, check against the outer margin
4013
+ (// If the distance is negative, check against the inner margin
4014
+ distance > 0 && distance <= outerMargin || distance <= 0 && distance > -innerMargin)
4015
+ ) : (
4016
+ // If hitInside is false, then sadly _we do not know_ whether the
4017
+ // point is inside or outside of the shape, so we check against
4018
+ // the max of the two margins
4019
+ (Math.abs(distance) <= Math.max(innerMargin, outerMargin))
4020
+ )) {
4010
4021
  if (Math.abs(distance) < inMarginClosestToEdgeDistance) {
4011
4022
  inMarginClosestToEdgeDistance = Math.abs(distance);
4012
4023
  inMarginClosestToEdgeHit = shape;
@@ -4771,7 +4782,16 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
4771
4782
  }
4772
4783
  this.createShapes(shapesToCreate);
4773
4784
  this.createBindings(bindingsToCreate);
4774
- this.setSelectedShapes(compact(ids.map((id) => shapeIds.get(id))));
4785
+ this.setSelectedShapes(
4786
+ compact(
4787
+ ids.map((oldId) => {
4788
+ const newId = shapeIds.get(oldId);
4789
+ if (!newId) return null;
4790
+ if (!this.getShape(newId)) return null;
4791
+ return newId;
4792
+ })
4793
+ )
4794
+ );
4775
4795
  if (offset !== void 0) {
4776
4796
  const selectionPageBounds = this.getSelectionPageBounds();
4777
4797
  const viewportPageBounds = this.getViewportPageBounds();
@@ -5525,8 +5545,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
5525
5545
  const shapesMovingTogether = [shape];
5526
5546
  const boundsOfShapesMovingTogether = [shapePageBounds];
5527
5547
  if (!this.getShapeUtil(shape).canBeLaidOut?.(shape, {
5528
- type: "stretch",
5529
- shapes: shapesToStretchFirstPass
5548
+ type: "stretch"
5530
5549
  })) {
5531
5550
  continue;
5532
5551
  }
@@ -5851,21 +5870,24 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
5851
5870
  }
5852
5871
  if (!partial.parentId || !(this.store.has(partial.parentId) || shapes.some((p) => p.id === partial.parentId))) {
5853
5872
  let parentId = this.getFocusedGroupId();
5854
- for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
5855
- const parent = currentPageShapesSorted[i];
5856
- const util = this.getShapeUtil(parent);
5857
- if (util.canReceiveNewChildrenOfType(parent, partial.type) && !this.isShapeHidden(parent) && this.isPointInShape(
5858
- parent,
5859
- // If no parent is provided, then we can treat the
5860
- // shape's provided x/y as being in the page's space.
5861
- { x: partial.x ?? 0, y: partial.y ?? 0 },
5862
- {
5863
- margin: 0,
5864
- hitInside: true
5873
+ const isPositioned = partial.x !== void 0 && partial.y !== void 0;
5874
+ if (isPositioned) {
5875
+ for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
5876
+ const parent = currentPageShapesSorted[i];
5877
+ const util = this.getShapeUtil(parent);
5878
+ if (util.canReceiveNewChildrenOfType(parent, partial.type) && !this.isShapeHidden(parent) && this.isPointInShape(
5879
+ parent,
5880
+ // If no parent is provided, then we can treat the
5881
+ // shape's provided x/y as being in the page's space.
5882
+ { x: partial.x ?? 0, y: partial.y ?? 0 },
5883
+ {
5884
+ margin: 0,
5885
+ hitInside: true
5886
+ }
5887
+ )) {
5888
+ parentId = parent.id;
5889
+ break;
5865
5890
  }
5866
- )) {
5867
- parentId = parent.id;
5868
- break;
5869
5891
  }
5870
5892
  }
5871
5893
  const prevParentId = partial.parentId;
@@ -6954,6 +6976,23 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
6954
6976
  }
6955
6977
  }
6956
6978
  }
6979
+ /**
6980
+ * Get an exported image of the given shapes as a data URL.
6981
+ *
6982
+ * @param shapes - The shapes (or shape ids) to export.
6983
+ * @param opts - Options for the export.
6984
+ *
6985
+ * @returns A data URL of the image.
6986
+ * @public
6987
+ */
6988
+ async toImageDataUrl(shapes, opts = {}) {
6989
+ const { blob, width, height } = await this.toImage(shapes, opts);
6990
+ return {
6991
+ url: await FileHelpers.blobToDataUrl(blob),
6992
+ width,
6993
+ height
6994
+ };
6995
+ }
6957
6996
  /**
6958
6997
  * Update the input points from a pointer, pinch, or wheel event.
6959
6998
  *