@tldraw/editor 5.3.0-canary.fceaae5e9feb → 5.3.0-internal.fba91ed55f6c

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 (58) hide show
  1. package/dist-cjs/index.d.ts +37 -2
  2. package/dist-cjs/index.js +4 -1
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/TldrawEditor.js +6 -1
  5. package/dist-cjs/lib/TldrawEditor.js.map +2 -2
  6. package/dist-cjs/lib/editor/Editor.js +65 -13
  7. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  8. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js +9 -0
  9. package/dist-cjs/lib/editor/managers/FontManager/FontManager.js.map +2 -2
  10. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js +3 -0
  11. package/dist-cjs/lib/editor/managers/TextManager/TextManager.js.map +2 -2
  12. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js +3 -0
  13. package/dist-cjs/lib/editor/shapes/BaseFrameLikeShapeUtil.js.map +2 -2
  14. package/dist-cjs/lib/editor/types/emit-types.js.map +1 -1
  15. package/dist-cjs/lib/license/LicenseManager.js +62 -7
  16. package/dist-cjs/lib/license/LicenseManager.js.map +2 -2
  17. package/dist-cjs/lib/license/useLicenseManagerState.js +7 -0
  18. package/dist-cjs/lib/license/useLicenseManagerState.js.map +2 -2
  19. package/dist-cjs/lib/options.js +2 -1
  20. package/dist-cjs/lib/options.js.map +2 -2
  21. package/dist-cjs/version.js +3 -3
  22. package/dist-cjs/version.js.map +1 -1
  23. package/dist-esm/index.d.mts +37 -2
  24. package/dist-esm/index.mjs +5 -2
  25. package/dist-esm/index.mjs.map +2 -2
  26. package/dist-esm/lib/TldrawEditor.mjs +6 -1
  27. package/dist-esm/lib/TldrawEditor.mjs.map +2 -2
  28. package/dist-esm/lib/editor/Editor.mjs +65 -13
  29. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  30. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs +9 -0
  31. package/dist-esm/lib/editor/managers/FontManager/FontManager.mjs.map +2 -2
  32. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs +3 -0
  33. package/dist-esm/lib/editor/managers/TextManager/TextManager.mjs.map +2 -2
  34. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs +3 -0
  35. package/dist-esm/lib/editor/shapes/BaseFrameLikeShapeUtil.mjs.map +2 -2
  36. package/dist-esm/lib/license/LicenseManager.mjs +63 -8
  37. package/dist-esm/lib/license/LicenseManager.mjs.map +2 -2
  38. package/dist-esm/lib/license/useLicenseManagerState.mjs +7 -0
  39. package/dist-esm/lib/license/useLicenseManagerState.mjs.map +2 -2
  40. package/dist-esm/lib/options.mjs +2 -1
  41. package/dist-esm/lib/options.mjs.map +2 -2
  42. package/dist-esm/version.mjs +3 -3
  43. package/dist-esm/version.mjs.map +1 -1
  44. package/editor.css +10 -0
  45. package/package.json +7 -7
  46. package/src/index.ts +3 -1
  47. package/src/lib/TldrawEditor.tsx +10 -1
  48. package/src/lib/editor/Editor.ts +97 -18
  49. package/src/lib/editor/managers/FontManager/FontManager.test.ts +66 -0
  50. package/src/lib/editor/managers/FontManager/FontManager.ts +14 -0
  51. package/src/lib/editor/managers/TextManager/TextManager.ts +3 -0
  52. package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx +6 -1
  53. package/src/lib/editor/types/emit-types.ts +1 -0
  54. package/src/lib/license/LicenseManager.test.ts +220 -29
  55. package/src/lib/license/LicenseManager.ts +107 -6
  56. package/src/lib/license/useLicenseManagerState.ts +17 -1
  57. package/src/lib/options.ts +3 -1
  58. package/src/version.ts +3 -3
@@ -306,12 +306,27 @@ class Editor extends EventEmitter {
306
306
  let deletedBindings = /* @__PURE__ */ new Map();
307
307
  const deletedShapeIds = /* @__PURE__ */ new Set();
308
308
  const invalidParents = /* @__PURE__ */ new Set();
309
+ const createdShapes = /* @__PURE__ */ new Set();
309
310
  let invalidBindingTypes = /* @__PURE__ */ new Set();
310
311
  this.disposables.add(
311
312
  this.sideEffects.registerOperationCompleteHandler(() => {
313
+ const deletedIds = deletedShapeIds.size ? new Set(deletedShapeIds) : null;
312
314
  deletedShapeIds.clear();
315
+ if (deletedIds) {
316
+ const updates = compact(
317
+ this.getPageStates().map((pageState) => {
318
+ return cleanupInstancePageState(pageState, deletedIds);
319
+ })
320
+ );
321
+ if (updates.length) {
322
+ this.store.put(updates);
323
+ }
324
+ }
325
+ const justCreatedShapeIds = new Set(createdShapes);
326
+ createdShapes.clear();
313
327
  for (const parentId of invalidParents) {
314
328
  invalidParents.delete(parentId);
329
+ if (justCreatedShapeIds.has(parentId)) continue;
315
330
  const parent = this.getShape(parentId);
316
331
  if (!parent) continue;
317
332
  const util = this.getShapeUtil(parent);
@@ -341,6 +356,12 @@ class Editor extends EventEmitter {
341
356
  this.disposables.add(
342
357
  this.sideEffects.register({
343
358
  shape: {
359
+ afterCreate: (shape) => {
360
+ createdShapes.add(shape.id);
361
+ if (shape.parentId && isShapeId(shape.parentId)) {
362
+ invalidParents.add(shape.parentId);
363
+ }
364
+ },
344
365
  afterChange: (shapeBefore, shapeAfter) => {
345
366
  for (const binding of this.getBindingsInvolvingShape(shapeAfter)) {
346
367
  invalidBindingTypes.add(binding.type);
@@ -430,15 +451,6 @@ class Editor extends EventEmitter {
430
451
  if (deleteBindingIds.length) {
431
452
  this.deleteBindings(deleteBindingIds);
432
453
  }
433
- const deletedIds = /* @__PURE__ */ new Set([shape.id]);
434
- const updates = compact(
435
- this.getPageStates().map((pageState) => {
436
- return cleanupInstancePageState(pageState, deletedIds);
437
- })
438
- );
439
- if (updates.length) {
440
- this.store.put(updates);
441
- }
442
454
  }
443
455
  },
444
456
  binding: {
@@ -515,6 +527,9 @@ class Editor extends EventEmitter {
515
527
  },
516
528
  instance_page_state: {
517
529
  afterChange: (prev, next) => {
530
+ if (prev?.focusedGroupId !== next?.focusedGroupId) {
531
+ this.cancelDoubleClick();
532
+ }
518
533
  if (prev?.selectedShapeIds !== next?.selectedShapeIds) {
519
534
  const filtered = next.selectedShapeIds.filter((id) => {
520
535
  let parentId = this.getShape(id)?.parentId;
@@ -587,6 +602,12 @@ class Editor extends EventEmitter {
587
602
  this.stopFollowingUser();
588
603
  }
589
604
  this.on("tick", this._flushEventsForTick);
605
+ this.on("mount", () => {
606
+ this._isMounted.set(true);
607
+ });
608
+ this.on("unmount", () => {
609
+ this._isMounted.set(false);
610
+ });
590
611
  this.timers.requestAnimationFrame(() => {
591
612
  this._tickManager.start();
592
613
  });
@@ -681,6 +702,10 @@ class Editor extends EventEmitter {
681
702
  * @public
682
703
  */
683
704
  isDisposed = false;
705
+ _isMounted = atom("isMounted", false);
706
+ getIsMounted() {
707
+ return this._isMounted.get();
708
+ }
684
709
  /**
685
710
  * A manager for the editor's tick events.
686
711
  *
@@ -812,6 +837,9 @@ class Editor extends EventEmitter {
812
837
  * @public
813
838
  */
814
839
  dispose() {
840
+ if (this._isMounted.get()) {
841
+ this.emit("unmount");
842
+ }
815
843
  this.stopCameraAnimation();
816
844
  if (this.getInstanceState().followingUserId) {
817
845
  this.stopFollowingUser();
@@ -4248,6 +4276,11 @@ class Editor extends EventEmitter {
4248
4276
  });
4249
4277
  return commonBounds;
4250
4278
  }
4279
+ getHitTestMargin() {
4280
+ const { hitTestMargin, coarseHitTestMargin } = this.options;
4281
+ const margin = this.getInstanceState().isCoarsePointer ? coarseHitTestMargin : hitTestMargin;
4282
+ return margin / this.getZoomLevel();
4283
+ }
4251
4284
  /**
4252
4285
  * Get the top-most selected shape at the given point, ignoring groups.
4253
4286
  *
@@ -4257,7 +4290,21 @@ class Editor extends EventEmitter {
4257
4290
  */
4258
4291
  getSelectedShapeAtPoint(point) {
4259
4292
  const selectedShapeIds = this.getSelectedShapeIds();
4260
- return this.getCurrentPageShapesSorted().filter((shape) => shape.type !== "group" && selectedShapeIds.includes(shape.id)).reverse().find((shape) => this.isPointInShape(shape, point, { hitInside: true, margin: 0 }));
4293
+ const margin = this.options.hitTestMargin / this.getZoomLevel();
4294
+ const sortedShapes = this.getCurrentPageShapesSorted();
4295
+ for (let i = sortedShapes.length - 1; i >= 0; i--) {
4296
+ const shape = sortedShapes[i];
4297
+ if (shape.type === "group") continue;
4298
+ if (!selectedShapeIds.includes(shape.id)) continue;
4299
+ if (this.getShapeGeometry(shape).hitTestPoint(
4300
+ this.getPointInShapeSpace(shape, point),
4301
+ margin,
4302
+ true
4303
+ )) {
4304
+ return shape;
4305
+ }
4306
+ }
4307
+ return void 0;
4261
4308
  }
4262
4309
  /**
4263
4310
  * Get the shape at the current point.
@@ -4268,7 +4315,6 @@ class Editor extends EventEmitter {
4268
4315
  * @returns The shape at the given point, or undefined if there is no shape at the point.
4269
4316
  */
4270
4317
  getShapeAtPoint(point, opts = {}) {
4271
- const zoomLevel = this.getZoomLevel();
4272
4318
  const viewportPageBounds = this.getViewportPageBounds();
4273
4319
  const {
4274
4320
  filter,
@@ -4283,7 +4329,7 @@ class Editor extends EventEmitter {
4283
4329
  let inHollowSmallestAreaHit = null;
4284
4330
  let inMarginClosestToEdgeDistance = Infinity;
4285
4331
  let inMarginClosestToEdgeHit = null;
4286
- const searchMargin = Math.max(innerMargin, outerMargin, this.options.hitTestMargin / zoomLevel);
4332
+ const searchMargin = Math.max(innerMargin, outerMargin, this.getHitTestMargin());
4287
4333
  const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, searchMargin);
4288
4334
  const shapesToCheck = (opts.renderingOnly ? this.getCurrentPageRenderingShapesSorted() : this.getCurrentPageShapesSorted()).filter((shape) => {
4289
4335
  if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) return false;
@@ -4374,7 +4420,7 @@ class Editor extends EventEmitter {
4374
4420
  }
4375
4421
  }
4376
4422
  } else {
4377
- if (distance < this.options.hitTestMargin / zoomLevel) {
4423
+ if (distance < this.getHitTestMargin()) {
4378
4424
  return shape;
4379
4425
  }
4380
4426
  }
@@ -8450,6 +8496,9 @@ class Editor extends EventEmitter {
8450
8496
  __decorateClass([
8451
8497
  computed
8452
8498
  ], Editor.prototype, "getIsShapeHiddenCache", 1);
8499
+ __decorateClass([
8500
+ computed
8501
+ ], Editor.prototype, "getIsMounted", 1);
8453
8502
  __decorateClass([
8454
8503
  computed
8455
8504
  ], Editor.prototype, "canUndo", 1);
@@ -8624,6 +8673,9 @@ __decorateClass([
8624
8673
  __decorateClass([
8625
8674
  computed
8626
8675
  ], Editor.prototype, "getCurrentPageBounds", 1);
8676
+ __decorateClass([
8677
+ computed
8678
+ ], Editor.prototype, "getHitTestMargin", 1);
8627
8679
  __decorateClass([
8628
8680
  computed
8629
8681
  ], Editor.prototype, "getCurrentPageShapes", 1);