@tldraw/editor 3.8.0-canary.f9152dfde809 → 3.8.0-canary.fa7c40c0a965

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 (56) hide show
  1. package/dist-cjs/index.d.ts +104 -11
  2. package/dist-cjs/index.js +5 -1
  3. package/dist-cjs/index.js.map +2 -2
  4. package/dist-cjs/lib/components/default-components/DefaultCanvas.js +1 -4
  5. package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +2 -2
  6. package/dist-cjs/lib/config/createTLStore.js +1 -1
  7. package/dist-cjs/lib/config/createTLStore.js.map +2 -2
  8. package/dist-cjs/lib/editor/Editor.js +70 -6
  9. package/dist-cjs/lib/editor/Editor.js.map +2 -2
  10. package/dist-cjs/lib/editor/types/SvgExportContext.js.map +2 -2
  11. package/dist-cjs/lib/editor/types/misc-types.js.map +1 -1
  12. package/dist-cjs/lib/exports/exportToSvg.js.map +2 -2
  13. package/dist-cjs/lib/exports/getSvgAsImage.js +83 -0
  14. package/dist-cjs/lib/exports/getSvgAsImage.js.map +7 -0
  15. package/dist-cjs/lib/exports/getSvgJsx.js +16 -3
  16. package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
  17. package/dist-cjs/lib/utils/browserCanvasMaxSize.js +75 -0
  18. package/dist-cjs/lib/utils/browserCanvasMaxSize.js.map +7 -0
  19. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +3 -1
  20. package/dist-cjs/lib/utils/sync/TLLocalSyncClient.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 +104 -11
  24. package/dist-esm/index.mjs +5 -1
  25. package/dist-esm/index.mjs.map +2 -2
  26. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +1 -4
  27. package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
  28. package/dist-esm/lib/config/createTLStore.mjs +1 -1
  29. package/dist-esm/lib/config/createTLStore.mjs.map +2 -2
  30. package/dist-esm/lib/editor/Editor.mjs +70 -6
  31. package/dist-esm/lib/editor/Editor.mjs.map +2 -2
  32. package/dist-esm/lib/editor/types/SvgExportContext.mjs.map +2 -2
  33. package/dist-esm/lib/exports/exportToSvg.mjs.map +2 -2
  34. package/dist-esm/lib/exports/getSvgAsImage.mjs +63 -0
  35. package/dist-esm/lib/exports/getSvgAsImage.mjs.map +7 -0
  36. package/dist-esm/lib/exports/getSvgJsx.mjs +16 -3
  37. package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
  38. package/dist-esm/lib/utils/browserCanvasMaxSize.mjs +45 -0
  39. package/dist-esm/lib/utils/browserCanvasMaxSize.mjs.map +7 -0
  40. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +3 -1
  41. package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
  42. package/dist-esm/version.mjs +3 -3
  43. package/dist-esm/version.mjs.map +1 -1
  44. package/package.json +9 -7
  45. package/src/index.ts +4 -0
  46. package/src/lib/components/default-components/DefaultCanvas.tsx +1 -4
  47. package/src/lib/config/createTLStore.ts +1 -1
  48. package/src/lib/editor/Editor.ts +81 -22
  49. package/src/lib/editor/types/SvgExportContext.tsx +21 -0
  50. package/src/lib/editor/types/misc-types.ts +55 -2
  51. package/src/lib/exports/exportToSvg.tsx +2 -2
  52. package/src/lib/exports/getSvgAsImage.ts +92 -0
  53. package/src/lib/exports/getSvgJsx.tsx +17 -2
  54. package/src/lib/utils/browserCanvasMaxSize.ts +65 -0
  55. package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -1
  56. package/src/version.ts +3 -3
@@ -111,6 +111,7 @@ import {
111
111
  ZOOM_TO_FIT_PADDING
112
112
  } from "../constants.mjs";
113
113
  import { exportToSvg } from "../exports/exportToSvg.mjs";
114
+ import { getSvgAsImage } from "../exports/getSvgAsImage.mjs";
114
115
  import { tlenv } from "../globals/environment.mjs";
115
116
  import { tlmenus } from "../globals/menus.mjs";
116
117
  import { tltime } from "../globals/time.mjs";
@@ -1064,9 +1065,20 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
1064
1065
  },
1065
1066
  extras: {
1066
1067
  activeStateNode: this.root.getPath(),
1067
- selectedShapes: this.getSelectedShapes(),
1068
+ selectedShapes: this.getSelectedShapes().map((s) => {
1069
+ const { props, ...rest } = s;
1070
+ const { text: _text, richText: _richText, ...restProps } = props;
1071
+ return {
1072
+ ...rest,
1073
+ props: restProps
1074
+ };
1075
+ }),
1076
+ selectionCount: this.getSelectedShapes().length,
1068
1077
  editingShape: editingShapeId ? this.getShape(editingShapeId) : void 0,
1069
- inputs: this.inputs
1078
+ inputs: this.inputs,
1079
+ pageState: this.getCurrentPageState(),
1080
+ instanceState: this.getInstanceState(),
1081
+ collaboratorCount: this.getCollaboratorsOnCurrentPage().length
1070
1082
  }
1071
1083
  };
1072
1084
  } catch {
@@ -3180,11 +3192,14 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
3180
3192
  if (!assetId) return null;
3181
3193
  const asset = this.getAsset(assetId);
3182
3194
  if (!asset) return null;
3183
- const { screenScale = 1, shouldResolveToOriginal = false } = context;
3195
+ const {
3196
+ screenScale = 1,
3197
+ shouldResolveToOriginal = false,
3198
+ dpr = this.getInstanceState().devicePixelRatio
3199
+ } = context;
3184
3200
  const zoomStepFunction = (zoom) => Math.pow(2, Math.ceil(Math.log2(zoom)));
3185
- const steppedScreenScale = Math.max(0.125, zoomStepFunction(screenScale));
3201
+ const steppedScreenScale = zoomStepFunction(screenScale);
3186
3202
  const networkEffectiveType = "connection" in navigator ? navigator.connection.effectiveType : null;
3187
- const dpr = this.getInstanceState().devicePixelRatio;
3188
3203
  return await this.store.props.assets.resolve(asset, {
3189
3204
  screenScale: screenScale || 1,
3190
3205
  steppedScreenScale,
@@ -6302,7 +6317,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
6302
6317
  * @public
6303
6318
  */
6304
6319
  async getSvgElement(shapes, opts = {}) {
6305
- const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
6320
+ const ids = shapes.length === 0 ? this.getCurrentPageShapeIdsSorted() : typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
6306
6321
  if (ids.length === 0) return void 0;
6307
6322
  return exportToSvg(this, ids, opts);
6308
6323
  }
@@ -6332,6 +6347,55 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
6332
6347
  if (!result) return void 0;
6333
6348
  return result.svg;
6334
6349
  }
6350
+ /**
6351
+ * Get an exported image of the given shapes.
6352
+ *
6353
+ * @param shapes - The shapes (or shape ids) to export.
6354
+ * @param opts - Options for the export.
6355
+ *
6356
+ * @returns A blob of the image.
6357
+ * @public
6358
+ */
6359
+ async toImage(shapes, opts = {}) {
6360
+ const withDefaults = {
6361
+ format: "png",
6362
+ scale: 1,
6363
+ pixelRatio: opts.format === "svg" ? void 0 : 2,
6364
+ ...opts
6365
+ };
6366
+ const result = await this.getSvgString(shapes, withDefaults);
6367
+ if (!result) throw new Error("Could not create SVG");
6368
+ switch (withDefaults.format) {
6369
+ case "svg":
6370
+ return {
6371
+ blob: new Blob([result.svg], { type: "text/plain" }),
6372
+ width: result.width,
6373
+ height: result.height
6374
+ };
6375
+ case "jpeg":
6376
+ case "png":
6377
+ case "webp": {
6378
+ const blob = await getSvgAsImage(result.svg, {
6379
+ type: withDefaults.format,
6380
+ quality: withDefaults.quality,
6381
+ pixelRatio: withDefaults.pixelRatio,
6382
+ width: result.width,
6383
+ height: result.height
6384
+ });
6385
+ if (!blob) {
6386
+ throw new Error("Could not construct image.");
6387
+ }
6388
+ return {
6389
+ blob,
6390
+ width: result.width,
6391
+ height: result.height
6392
+ };
6393
+ }
6394
+ default: {
6395
+ exhaustiveSwitchError(withDefaults.format);
6396
+ }
6397
+ }
6398
+ }
6335
6399
  /**
6336
6400
  * Update the input points from a pointer, pinch, or wheel event.
6337
6401
  *