@tldraw/editor 3.8.0-canary.8e5b2874c698 → 3.8.0-canary.908f0040f7b0
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.
- package/dist-cjs/index.d.ts +108 -12
- package/dist-cjs/index.js +5 -1
- package/dist-cjs/index.js.map +2 -2
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js +1 -4
- package/dist-cjs/lib/components/default-components/DefaultCanvas.js.map +2 -2
- package/dist-cjs/lib/config/createTLStore.js +4 -2
- package/dist-cjs/lib/config/createTLStore.js.map +2 -2
- package/dist-cjs/lib/editor/Editor.js +70 -6
- package/dist-cjs/lib/editor/Editor.js.map +2 -2
- package/dist-cjs/lib/editor/types/SvgExportContext.js.map +2 -2
- package/dist-cjs/lib/editor/types/misc-types.js.map +1 -1
- package/dist-cjs/lib/exports/exportToSvg.js.map +2 -2
- package/dist-cjs/lib/exports/getSvgAsImage.js +83 -0
- package/dist-cjs/lib/exports/getSvgAsImage.js.map +7 -0
- package/dist-cjs/lib/exports/getSvgJsx.js +16 -3
- package/dist-cjs/lib/exports/getSvgJsx.js.map +2 -2
- package/dist-cjs/lib/hooks/useLocalStore.js +1 -1
- package/dist-cjs/lib/hooks/useLocalStore.js.map +2 -2
- package/dist-cjs/lib/utils/browserCanvasMaxSize.js +75 -0
- package/dist-cjs/lib/utils/browserCanvasMaxSize.js.map +7 -0
- package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js +3 -1
- package/dist-cjs/lib/utils/sync/TLLocalSyncClient.js.map +2 -2
- package/dist-cjs/version.js +3 -3
- package/dist-cjs/version.js.map +1 -1
- package/dist-esm/index.d.mts +108 -12
- package/dist-esm/index.mjs +5 -1
- package/dist-esm/index.mjs.map +2 -2
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs +1 -4
- package/dist-esm/lib/components/default-components/DefaultCanvas.mjs.map +2 -2
- package/dist-esm/lib/config/createTLStore.mjs +4 -2
- package/dist-esm/lib/config/createTLStore.mjs.map +2 -2
- package/dist-esm/lib/editor/Editor.mjs +70 -6
- package/dist-esm/lib/editor/Editor.mjs.map +2 -2
- package/dist-esm/lib/editor/types/SvgExportContext.mjs.map +2 -2
- package/dist-esm/lib/exports/exportToSvg.mjs.map +2 -2
- package/dist-esm/lib/exports/getSvgAsImage.mjs +63 -0
- package/dist-esm/lib/exports/getSvgAsImage.mjs.map +7 -0
- package/dist-esm/lib/exports/getSvgJsx.mjs +16 -3
- package/dist-esm/lib/exports/getSvgJsx.mjs.map +2 -2
- package/dist-esm/lib/hooks/useLocalStore.mjs +1 -1
- package/dist-esm/lib/hooks/useLocalStore.mjs.map +2 -2
- package/dist-esm/lib/utils/browserCanvasMaxSize.mjs +45 -0
- package/dist-esm/lib/utils/browserCanvasMaxSize.mjs.map +7 -0
- package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs +3 -1
- package/dist-esm/lib/utils/sync/TLLocalSyncClient.mjs.map +2 -2
- package/dist-esm/version.mjs +3 -3
- package/dist-esm/version.mjs.map +1 -1
- package/package.json +9 -7
- package/src/index.ts +4 -0
- package/src/lib/components/default-components/DefaultCanvas.tsx +1 -4
- package/src/lib/config/createTLStore.ts +4 -2
- package/src/lib/editor/Editor.ts +86 -23
- package/src/lib/editor/types/SvgExportContext.tsx +21 -0
- package/src/lib/editor/types/misc-types.ts +55 -2
- package/src/lib/exports/exportToSvg.tsx +2 -2
- package/src/lib/exports/getSvgAsImage.ts +92 -0
- package/src/lib/exports/getSvgJsx.tsx +17 -2
- package/src/lib/hooks/useLocalStore.ts +1 -1
- package/src/lib/utils/browserCanvasMaxSize.ts +65 -0
- package/src/lib/utils/sync/TLLocalSyncClient.ts +3 -1
- package/src/version.ts +3 -3
|
@@ -87,6 +87,7 @@ var import_defaultBindings = require("../config/defaultBindings");
|
|
|
87
87
|
var import_defaultShapes = require("../config/defaultShapes");
|
|
88
88
|
var import_constants = require("../constants");
|
|
89
89
|
var import_exportToSvg = require("../exports/exportToSvg");
|
|
90
|
+
var import_getSvgAsImage = require("../exports/getSvgAsImage");
|
|
90
91
|
var import_environment = require("../globals/environment");
|
|
91
92
|
var import_menus = require("../globals/menus");
|
|
92
93
|
var import_time = require("../globals/time");
|
|
@@ -1038,9 +1039,20 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
1038
1039
|
},
|
|
1039
1040
|
extras: {
|
|
1040
1041
|
activeStateNode: this.root.getPath(),
|
|
1041
|
-
selectedShapes: this.getSelectedShapes()
|
|
1042
|
+
selectedShapes: this.getSelectedShapes().map((s) => {
|
|
1043
|
+
const { props, ...rest } = s;
|
|
1044
|
+
const { text: _text, richText: _richText, ...restProps } = props;
|
|
1045
|
+
return {
|
|
1046
|
+
...rest,
|
|
1047
|
+
props: restProps
|
|
1048
|
+
};
|
|
1049
|
+
}),
|
|
1050
|
+
selectionCount: this.getSelectedShapes().length,
|
|
1042
1051
|
editingShape: editingShapeId ? this.getShape(editingShapeId) : void 0,
|
|
1043
|
-
inputs: this.inputs
|
|
1052
|
+
inputs: this.inputs,
|
|
1053
|
+
pageState: this.getCurrentPageState(),
|
|
1054
|
+
instanceState: this.getInstanceState(),
|
|
1055
|
+
collaboratorCount: this.getCollaboratorsOnCurrentPage().length
|
|
1044
1056
|
}
|
|
1045
1057
|
};
|
|
1046
1058
|
} catch {
|
|
@@ -3154,11 +3166,14 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
3154
3166
|
if (!assetId) return null;
|
|
3155
3167
|
const asset = this.getAsset(assetId);
|
|
3156
3168
|
if (!asset) return null;
|
|
3157
|
-
const {
|
|
3169
|
+
const {
|
|
3170
|
+
screenScale = 1,
|
|
3171
|
+
shouldResolveToOriginal = false,
|
|
3172
|
+
dpr = this.getInstanceState().devicePixelRatio
|
|
3173
|
+
} = context;
|
|
3158
3174
|
const zoomStepFunction = (zoom) => Math.pow(2, Math.ceil(Math.log2(zoom)));
|
|
3159
|
-
const steppedScreenScale =
|
|
3175
|
+
const steppedScreenScale = zoomStepFunction(screenScale);
|
|
3160
3176
|
const networkEffectiveType = "connection" in navigator ? navigator.connection.effectiveType : null;
|
|
3161
|
-
const dpr = this.getInstanceState().devicePixelRatio;
|
|
3162
3177
|
return await this.store.props.assets.resolve(asset, {
|
|
3163
3178
|
screenScale: screenScale || 1,
|
|
3164
3179
|
steppedScreenScale,
|
|
@@ -6276,7 +6291,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
6276
6291
|
* @public
|
|
6277
6292
|
*/
|
|
6278
6293
|
async getSvgElement(shapes, opts = {}) {
|
|
6279
|
-
const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
|
|
6294
|
+
const ids = shapes.length === 0 ? this.getCurrentPageShapeIdsSorted() : typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
|
|
6280
6295
|
if (ids.length === 0) return void 0;
|
|
6281
6296
|
return (0, import_exportToSvg.exportToSvg)(this, ids, opts);
|
|
6282
6297
|
}
|
|
@@ -6306,6 +6321,55 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
|
|
|
6306
6321
|
if (!result) return void 0;
|
|
6307
6322
|
return result.svg;
|
|
6308
6323
|
}
|
|
6324
|
+
/**
|
|
6325
|
+
* Get an exported image of the given shapes.
|
|
6326
|
+
*
|
|
6327
|
+
* @param shapes - The shapes (or shape ids) to export.
|
|
6328
|
+
* @param opts - Options for the export.
|
|
6329
|
+
*
|
|
6330
|
+
* @returns A blob of the image.
|
|
6331
|
+
* @public
|
|
6332
|
+
*/
|
|
6333
|
+
async toImage(shapes, opts = {}) {
|
|
6334
|
+
const withDefaults = {
|
|
6335
|
+
format: "png",
|
|
6336
|
+
scale: 1,
|
|
6337
|
+
pixelRatio: opts.format === "svg" ? void 0 : 2,
|
|
6338
|
+
...opts
|
|
6339
|
+
};
|
|
6340
|
+
const result = await this.getSvgString(shapes, withDefaults);
|
|
6341
|
+
if (!result) throw new Error("Could not create SVG");
|
|
6342
|
+
switch (withDefaults.format) {
|
|
6343
|
+
case "svg":
|
|
6344
|
+
return {
|
|
6345
|
+
blob: new Blob([result.svg], { type: "text/plain" }),
|
|
6346
|
+
width: result.width,
|
|
6347
|
+
height: result.height
|
|
6348
|
+
};
|
|
6349
|
+
case "jpeg":
|
|
6350
|
+
case "png":
|
|
6351
|
+
case "webp": {
|
|
6352
|
+
const blob = await (0, import_getSvgAsImage.getSvgAsImage)(result.svg, {
|
|
6353
|
+
type: withDefaults.format,
|
|
6354
|
+
quality: withDefaults.quality,
|
|
6355
|
+
pixelRatio: withDefaults.pixelRatio,
|
|
6356
|
+
width: result.width,
|
|
6357
|
+
height: result.height
|
|
6358
|
+
});
|
|
6359
|
+
if (!blob) {
|
|
6360
|
+
throw new Error("Could not construct image.");
|
|
6361
|
+
}
|
|
6362
|
+
return {
|
|
6363
|
+
blob,
|
|
6364
|
+
width: result.width,
|
|
6365
|
+
height: result.height
|
|
6366
|
+
};
|
|
6367
|
+
}
|
|
6368
|
+
default: {
|
|
6369
|
+
(0, import_utils.exhaustiveSwitchError)(withDefaults.format);
|
|
6370
|
+
}
|
|
6371
|
+
}
|
|
6372
|
+
}
|
|
6309
6373
|
/**
|
|
6310
6374
|
* Update the input points from a pointer, pinch, or wheel event.
|
|
6311
6375
|
*
|