@tldraw/editor 3.8.0-canary.962422478a23 → 3.8.0-canary.99db1910391e

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 +108 -12
  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 +3 -1
  7. package/dist-cjs/lib/config/createTLStore.js.map +2 -2
  8. package/dist-cjs/lib/editor/Editor.js +58 -5
  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/hooks/useLocalStore.js +1 -1
  18. package/dist-cjs/lib/hooks/useLocalStore.js.map +2 -2
  19. package/dist-cjs/lib/utils/browserCanvasMaxSize.js +75 -0
  20. package/dist-cjs/lib/utils/browserCanvasMaxSize.js.map +7 -0
  21. package/dist-cjs/version.js +3 -3
  22. package/dist-cjs/version.js.map +1 -1
  23. package/dist-esm/index.d.mts +108 -12
  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 +3 -1
  29. package/dist-esm/lib/config/createTLStore.mjs.map +2 -2
  30. package/dist-esm/lib/editor/Editor.mjs +58 -5
  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/hooks/useLocalStore.mjs +1 -1
  39. package/dist-esm/lib/hooks/useLocalStore.mjs.map +2 -2
  40. package/dist-esm/lib/utils/browserCanvasMaxSize.mjs +45 -0
  41. package/dist-esm/lib/utils/browserCanvasMaxSize.mjs.map +7 -0
  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 +3 -1
  48. package/src/lib/editor/Editor.ts +75 -12
  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/hooks/useLocalStore.ts +1 -1
  55. package/src/lib/utils/browserCanvasMaxSize.ts +65 -0
  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";
@@ -1240,7 +1241,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
1240
1241
  if (partial.isChangingStyle === true) {
1241
1242
  this._isChangingStyleTimeout = this.timers.setTimeout(() => {
1242
1243
  this._updateInstanceState({ isChangingStyle: false }, { history: "ignore" });
1243
- }, 2e3);
1244
+ }, 1e3);
1244
1245
  }
1245
1246
  }
1246
1247
  return this;
@@ -3191,11 +3192,14 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
3191
3192
  if (!assetId) return null;
3192
3193
  const asset = this.getAsset(assetId);
3193
3194
  if (!asset) return null;
3194
- const { screenScale = 1, shouldResolveToOriginal = false } = context;
3195
+ const {
3196
+ screenScale = 1,
3197
+ shouldResolveToOriginal = false,
3198
+ dpr = this.getInstanceState().devicePixelRatio
3199
+ } = context;
3195
3200
  const zoomStepFunction = (zoom) => Math.pow(2, Math.ceil(Math.log2(zoom)));
3196
- const steppedScreenScale = Math.max(0.125, zoomStepFunction(screenScale));
3201
+ const steppedScreenScale = zoomStepFunction(screenScale);
3197
3202
  const networkEffectiveType = "connection" in navigator ? navigator.connection.effectiveType : null;
3198
- const dpr = this.getInstanceState().devicePixelRatio;
3199
3203
  return await this.store.props.assets.resolve(asset, {
3200
3204
  screenScale: screenScale || 1,
3201
3205
  steppedScreenScale,
@@ -6313,7 +6317,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
6313
6317
  * @public
6314
6318
  */
6315
6319
  async getSvgElement(shapes, opts = {}) {
6316
- 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);
6317
6321
  if (ids.length === 0) return void 0;
6318
6322
  return exportToSvg(this, ids, opts);
6319
6323
  }
@@ -6343,6 +6347,55 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
6343
6347
  if (!result) return void 0;
6344
6348
  return result.svg;
6345
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
+ }
6346
6399
  /**
6347
6400
  * Update the input points from a pointer, pinch, or wheel event.
6348
6401
  *