@tldraw/editor 3.8.0-canary.c5f3975feaab → 3.8.0-canary.c738f8c4d6db

package/dist-esm/lib/editor/Editor.mjs

@@ -111,6 +111,7 @@ import {
   ZOOM_TO_FIT_PADDING
 } from "../constants.mjs";
 import { exportToSvg } from "../exports/exportToSvg.mjs";
+import { getSvgAsImage } from "../exports/getSvgAsImage.mjs";
 import { tlenv } from "../globals/environment.mjs";
 import { tlmenus } from "../globals/menus.mjs";
 import { tltime } from "../globals/time.mjs";
@@ -331,7 +332,9 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
       files: null,
       embed: null,
       "svg-text": null,
-      url: null
+      url: null,
+      tldraw: null,
+      excalidraw: null
     });
     /* --------------------- Events --------------------- */
     /**
@@ -838,6 +841,10 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     assert(shapeUtil, `No shape util found for type "${type}"`);
     return shapeUtil;
   }
+  hasShapeUtil(arg) {
+    const type = typeof arg === "string" ? arg : arg.type;
+    return hasOwnProperty(this.shapeUtils, type);
+  }
   getBindingUtil(arg) {
     const type = typeof arg === "string" ? arg : arg.type;
     const bindingUtil = getOwnProperty(this.bindingUtils, type);
@@ -1064,9 +1071,20 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
         },
         extras: {
           activeStateNode: this.root.getPath(),
-          selectedShapes: this.getSelectedShapes(),
+          selectedShapes: this.getSelectedShapes().map((s) => {
+            const { props, ...rest } = s;
+            const { text: _text, richText: _richText, ...restProps } = props;
+            return {
+              ...rest,
+              props: restProps
+            };
+          }),
+          selectionCount: this.getSelectedShapes().length,
           editingShape: editingShapeId ? this.getShape(editingShapeId) : void 0,
-          inputs: this.inputs
+          inputs: this.inputs,
+          pageState: this.getCurrentPageState(),
+          instanceState: this.getInstanceState(),
+          collaboratorCount: this.getCollaboratorsOnCurrentPage().length
         }
       };
     } catch {
@@ -1174,8 +1192,8 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    *
    * @example
    * ```ts
-   * state.getStateDescendant('select')
-   * state.getStateDescendant('select.brushing')
+   * editor.getStateDescendant('select')
+   * editor.getStateDescendant('select.brushing')
    * ```
    *
    * @param path - The descendant's path of state ids, separated by periods.
@@ -1229,7 +1247,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
       if (partial.isChangingStyle === true) {
         this._isChangingStyleTimeout = this.timers.setTimeout(() => {
           this._updateInstanceState({ isChangingStyle: false }, { history: "ignore" });
-        }, 2e3);
+        }, 1e3);
       }
     }
     return this;
@@ -3180,11 +3198,14 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     if (!assetId) return null;
     const asset = this.getAsset(assetId);
     if (!asset) return null;
-    const { screenScale = 1, shouldResolveToOriginal = false } = context;
+    const {
+      screenScale = 1,
+      shouldResolveToOriginal = false,
+      dpr = this.getInstanceState().devicePixelRatio
+    } = context;
     const zoomStepFunction = (zoom) => Math.pow(2, Math.ceil(Math.log2(zoom)));
-    const steppedScreenScale = Math.max(0.125, zoomStepFunction(screenScale));
+    const steppedScreenScale = zoomStepFunction(screenScale);
     const networkEffectiveType = "connection" in navigator ? navigator.connection.effectiveType : null;
-    const dpr = this.getInstanceState().devicePixelRatio;
     return await this.store.props.assets.resolve(asset, {
       screenScale: screenScale || 1,
       steppedScreenScale,
@@ -5105,6 +5126,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
         scale = new Vec(Math.sign(scale.x) * Math.abs(scale.y), scale.y);
       }
     }
+    let didResize = false;
     if (util.onResize && util.canResize(initialShape)) {
       const newPagePoint = this._scalePagePoint(
         Mat.applyToPoint(pageTransform, new Vec(0, 0)),
@@ -5129,24 +5151,28 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
           util.onResizeStart?.(initialShape) ?? void 0
         );
       }
+      const resizedShape = util.onResize(
+        { ...initialShape, x, y },
+        {
+          newPoint: newLocalPoint,
+          handle: opts.dragHandle ?? "bottom_right",
+          // don't set isSingle to true for children
+          mode: opts.mode ?? "scale_shape",
+          scaleX: myScale.x,
+          scaleY: myScale.y,
+          initialBounds,
+          initialShape
+        }
+      );
+      if (resizedShape) {
+        didResize = true;
+      }
       workingShape = applyPartialToRecordWithProps(workingShape, {
         id,
         type: initialShape.type,
         x: newLocalPoint.x,
         y: newLocalPoint.y,
-        ...util.onResize(
-          { ...initialShape, x, y },
-          {
-            newPoint: newLocalPoint,
-            handle: opts.dragHandle ?? "bottom_right",
-            // don't set isSingle to true for children
-            mode: opts.mode ?? "scale_shape",
-            scaleX: myScale.x,
-            scaleY: myScale.y,
-            initialBounds,
-            initialShape
-          }
-        )
+        ...resizedShape
       });
       if (!opts.skipStartAndEndCallbacks) {
         workingShape = applyPartialToRecordWithProps(
@@ -5155,7 +5181,8 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
         );
       }
       this.updateShapes([workingShape]);
-    } else {
+    }
+    if (!didResize) {
       const initialPageCenter = Mat.applyToPoint(pageTransform, initialBounds.center);
       const newPageCenter = this._scalePagePoint(
         initialPageCenter,
@@ -6302,7 +6329,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * @public
    */
   async getSvgElement(shapes, opts = {}) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = shapes.length === 0 ? this.getCurrentPageShapeIdsSorted() : typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (ids.length === 0) return void 0;
     return exportToSvg(this, ids, opts);
   }
@@ -6332,6 +6359,55 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     if (!result) return void 0;
     return result.svg;
   }
+  /**
+   * Get an exported image of the given shapes.
+   *
+   * @param shapes - The shapes (or shape ids) to export.
+   * @param opts - Options for the export.
+   *
+   * @returns A blob of the image.
+   * @public
+   */
+  async toImage(shapes, opts = {}) {
+    const withDefaults = {
+      format: "png",
+      scale: 1,
+      pixelRatio: opts.format === "svg" ? void 0 : 2,
+      ...opts
+    };
+    const result = await this.getSvgString(shapes, withDefaults);
+    if (!result) throw new Error("Could not create SVG");
+    switch (withDefaults.format) {
+      case "svg":
+        return {
+          blob: new Blob([result.svg], { type: "text/plain" }),
+          width: result.width,
+          height: result.height
+        };
+      case "jpeg":
+      case "png":
+      case "webp": {
+        const blob = await getSvgAsImage(result.svg, {
+          type: withDefaults.format,
+          quality: withDefaults.quality,
+          pixelRatio: withDefaults.pixelRatio,
+          width: result.width,
+          height: result.height
+        });
+        if (!blob) {
+          throw new Error("Could not construct image.");
+        }
+        return {
+          blob,
+          width: result.width,
+          height: result.height
+        };
+      }
+      default: {
+        exhaustiveSwitchError(withDefaults.format);
+      }
+    }
+  }
   /**
    * Update the input points from a pointer, pinch, or wheel event.
    *
@@ -6825,6 +6901,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
   }
   _flushEventForTick(info) {
     if (this.getCrashingError()) return this;
+    this.emit("before-event", info);
     const { inputs } = this;
     const { type } = info;
     if (info.type === "misc") {