@tldraw/editor 3.15.0 → 3.16.0-canary.0e0fb8bde89d

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 (59) hide show
  1. package/dist-cjs/index.d.ts +101 -0
  2. package/dist-cjs/index.js +3 -1
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/TldrawEditor.js +3 -1
  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 +4 -26
  9. package/dist-cjs/lib/components/Shape.js.map +2 -2
  10. package/dist-cjs/lib/components/default-components/DefaultShapeWrapper.js +53 -0
  11. package/dist-cjs/lib/components/default-components/DefaultShapeWrapper.js.map +7 -0
  12. package/dist-cjs/lib/editor/Editor.js +64 -35
  13. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  14. package/dist-cjs/lib/editor/shapes/ShapeUtil.js.map +2 -2
  15. package/dist-cjs/lib/editor/types/misc-types.js.map +1 -1
  16. package/dist-cjs/lib/hooks/useCanvasEvents.js +24 -20
  17. package/dist-cjs/lib/hooks/useCanvasEvents.js.map +2 -2
  18. package/dist-cjs/lib/hooks/useEditorComponents.js +2 -0
  19. package/dist-cjs/lib/hooks/useEditorComponents.js.map +2 -2
  20. package/dist-cjs/lib/hooks/useStateAttribute.js +35 -0
  21. package/dist-cjs/lib/hooks/useStateAttribute.js.map +7 -0
  22. package/dist-cjs/version.js +3 -3
  23. package/dist-cjs/version.js.map +1 -1
  24. package/dist-esm/index.d.mts +101 -0
  25. package/dist-esm/index.mjs +5 -1
  26. package/dist-esm/index.mjs.map +2 -2
  27. package/dist-esm/lib/TldrawEditor.mjs +3 -1
  28. package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
  29. package/dist-esm/lib/components/MenuClickCapture.mjs +0 -5
  30. package/dist-esm/lib/components/MenuClickCapture.mjs.map +2 -2
  31. package/dist-esm/lib/components/Shape.mjs +4 -26
  32. package/dist-esm/lib/components/Shape.mjs.map +2 -2
  33. package/dist-esm/lib/components/default-components/DefaultShapeWrapper.mjs +23 -0
  34. package/dist-esm/lib/components/default-components/DefaultShapeWrapper.mjs.map +7 -0
  35. package/dist-esm/lib/editor/Editor.mjs +64 -35
  36. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  37. package/dist-esm/lib/editor/shapes/ShapeUtil.mjs.map +2 -2
  38. package/dist-esm/lib/hooks/useCanvasEvents.mjs +25 -21
  39. package/dist-esm/lib/hooks/useCanvasEvents.mjs.map +2 -2
  40. package/dist-esm/lib/hooks/useEditorComponents.mjs +4 -0
  41. package/dist-esm/lib/hooks/useEditorComponents.mjs.map +2 -2
  42. package/dist-esm/lib/hooks/useStateAttribute.mjs +15 -0
  43. package/dist-esm/lib/hooks/useStateAttribute.mjs.map +7 -0
  44. package/dist-esm/version.mjs +3 -3
  45. package/dist-esm/version.mjs.map +1 -1
  46. package/editor.css +4 -23
  47. package/package.json +7 -7
  48. package/src/index.ts +5 -0
  49. package/src/lib/TldrawEditor.tsx +7 -5
  50. package/src/lib/components/MenuClickCapture.tsx +0 -8
  51. package/src/lib/components/Shape.tsx +6 -21
  52. package/src/lib/components/default-components/DefaultShapeWrapper.tsx +35 -0
  53. package/src/lib/editor/Editor.ts +71 -35
  54. package/src/lib/editor/shapes/ShapeUtil.ts +57 -0
  55. package/src/lib/editor/types/misc-types.ts +19 -0
  56. package/src/lib/hooks/useCanvasEvents.ts +39 -32
  57. package/src/lib/hooks/useEditorComponents.tsx +7 -1
  58. package/src/lib/hooks/useStateAttribute.ts +15 -0
  59. package/src/version.ts +3 -3
@@ -2357,28 +2357,11 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
2357
2357
  { history: "ignore" }
2358
2358
  );
2359
2359
  const { currentScreenPoint, currentPagePoint } = this.inputs;
2360
- const { screenBounds } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID);
2361
2360
  if (currentScreenPoint.x / z - x !== currentPagePoint.x || currentScreenPoint.y / z - y !== currentPagePoint.y) {
2362
- const event = {
2363
- type: "pointer",
2364
- target: "canvas",
2365
- name: "pointer_move",
2366
- // weird but true: we need to put the screen point back into client space
2367
- point: Vec.AddXY(currentScreenPoint, screenBounds.x, screenBounds.y),
2368
- pointerId: INTERNAL_POINTER_IDS.CAMERA_MOVE,
2369
- ctrlKey: this.inputs.ctrlKey,
2370
- altKey: this.inputs.altKey,
2371
- shiftKey: this.inputs.shiftKey,
2372
- metaKey: this.inputs.metaKey,
2373
- accelKey: isAccelKey(this.inputs),
2374
- button: 0,
2375
- isPen: this.getInstanceState().isPenMode ?? false
2376
- };
2377
- if (opts?.immediate) {
2378
- this._flushEventForTick(event);
2379
- } else {
2380
- this.dispatch(event);
2381
- }
2361
+ this.updatePointer({
2362
+ immediate: opts?.immediate,
2363
+ pointerId: INTERNAL_POINTER_IDS.CAMERA_MOVE
2364
+ });
2382
2365
  }
2383
2366
  this._tickCameraState();
2384
2367
  });
@@ -3347,19 +3330,24 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
3347
3330
  */
3348
3331
  deletePage(page) {
3349
3332
  const id = typeof page === "string" ? page : page.id;
3350
- this.run(() => {
3351
- if (this.getIsReadonly()) return;
3352
- const pages = this.getPages();
3353
- if (pages.length === 1) return;
3354
- const deletedPage = this.getPage(id);
3355
- if (!deletedPage) return;
3356
- if (id === this.getCurrentPageId()) {
3357
- const index = pages.findIndex((page2) => page2.id === id);
3358
- const next = pages[index - 1] ?? pages[index + 1];
3359
- this.setCurrentPage(next.id);
3360
- }
3361
- this.store.remove([deletedPage.id]);
3362
- });
3333
+ this.run(
3334
+ () => {
3335
+ if (this.getIsReadonly()) return;
3336
+ const pages = this.getPages();
3337
+ if (pages.length === 1) return;
3338
+ const deletedPage = this.getPage(id);
3339
+ if (!deletedPage) return;
3340
+ if (id === this.getCurrentPageId()) {
3341
+ const index = pages.findIndex((page2) => page2.id === id);
3342
+ const next = pages[index - 1] ?? pages[index + 1];
3343
+ this.setCurrentPage(next.id);
3344
+ }
3345
+ const shapes = this.getSortedChildIdsForParent(deletedPage.id);
3346
+ this.deleteShapes(shapes);
3347
+ this.store.remove([deletedPage.id]);
3348
+ },
3349
+ { ignoreShapeLock: true }
3350
+ );
3363
3351
  return this;
3364
3352
  }
3365
3353
  /**
@@ -3973,7 +3961,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
3973
3961
  const geometry = this.getShapeGeometry(shape);
3974
3962
  const isGroup = geometry instanceof Group2d;
3975
3963
  const pointInShapeSpace = this.getPointInShapeSpace(shape, point);
3976
- if (this.isShapeOfType(shape, "frame") || this.isShapeOfType(shape, "arrow") && shape.props.text.trim() || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && this.getShapeUtil(shape).getText(shape)?.trim()) {
3964
+ if (this.isShapeOfType(shape, "frame") || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && this.getShapeUtil(shape).getText(shape)?.trim()) {
3977
3965
  for (const childGeometry of geometry.children) {
3978
3966
  if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
3979
3967
  return shape;
@@ -7062,6 +7050,47 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
7062
7050
  this.dispatch({ type: "misc", name: "complete" });
7063
7051
  return this;
7064
7052
  }
7053
+ /**
7054
+ * Dispatch a pointer move event in the current position of the pointer. This is useful when
7055
+ * external circumstances have changed (e.g. the camera moved or a shape was moved) and you want
7056
+ * the current interaction to respond to that change.
7057
+ *
7058
+ * @example
7059
+ * ```ts
7060
+ * editor.updatePointer()
7061
+ * ```
7062
+ *
7063
+ * @param options - The options for updating the pointer.
7064
+ * @returns The editor instance.
7065
+ * @public
7066
+ */
7067
+ updatePointer(options) {
7068
+ const event = {
7069
+ type: "pointer",
7070
+ target: "canvas",
7071
+ name: "pointer_move",
7072
+ point: options?.point ?? // weird but true: what `inputs` calls screen-space is actually viewport space. so
7073
+ // we need to convert back into true screen space first. we should fix this...
7074
+ Vec.Add(
7075
+ this.inputs.currentScreenPoint,
7076
+ this.store.unsafeGetWithoutCapture(TLINSTANCE_ID).screenBounds
7077
+ ),
7078
+ pointerId: options?.pointerId ?? 0,
7079
+ button: options?.button ?? 0,
7080
+ isPen: options?.isPen ?? this.inputs.isPen,
7081
+ shiftKey: options?.shiftKey ?? this.inputs.shiftKey,
7082
+ altKey: options?.altKey ?? this.inputs.altKey,
7083
+ ctrlKey: options?.ctrlKey ?? this.inputs.ctrlKey,
7084
+ metaKey: options?.metaKey ?? this.inputs.metaKey,
7085
+ accelKey: options?.accelKey ?? isAccelKey(this.inputs)
7086
+ };
7087
+ if (options?.immediate) {
7088
+ this._flushEventForTick(event);
7089
+ } else {
7090
+ this.dispatch(event);
7091
+ }
7092
+ return this;
7093
+ }
7065
7094
  /**
7066
7095
  * Puts the editor into focused mode.
7067
7096
  *