@tldraw/editor 5.2.0-next.ee0fa4d6244f → 5.2.0

package/dist-cjs/lib/editor/Editor.js

@@ -155,12 +155,12 @@ class Editor extends import_eventemitter3.default {
     this._tickManager = new import_TickManager.TickManager(this);
     this.disposables.add(() => this._tickManager.dispose());
     this.disposables.add(() => {
-      this.off("tick", this._decayCameraStateTimeout);
       this._setCameraState("idle");
     });
     this.fonts = new import_FontManager.FontManager(this, fontAssetUrls);
     this.disposables.add(() => this.fonts.dispose());
     this.inputs = new import_InputsManager.InputsManager(this);
+    this.disposables.add(() => this.inputs.dispose());
     this.performance = new import_PerformanceManager.PerformanceManager(this);
     this.disposables.add(() => this.performance.dispose());
     this.collaborators = new import_CollaboratorsManager.CollaboratorsManager(this);
@@ -789,6 +789,7 @@ class Editor extends import_eventemitter3.default {
     this.store.dispose();
     this.isDisposed = true;
     this.emit("dispose");
+    this.removeAllListeners();
   }
   /* ------------------ Themes (shadowing the theme manager) ------------------ */
   /**
@@ -1058,6 +1059,14 @@ class Editor extends import_eventemitter3.default {
   getMarkIdMatching(idSubstring) {
     return this.history.getMarkIdMatching(idSubstring);
   }
+  /**
+   * Whether the editor is currently replaying history (i.e. an undo or redo is being applied).
+   *
+   * @internal
+   */
+  isReplayingHistory() {
+    return this.history.isReplaying();
+  }
   /**
    * Coalesces all changes since the given mark into a single change, removing any intermediate marks.
    *
@@ -2152,7 +2161,7 @@ class Editor extends import_eventemitter3.default {
     return baseCamera;
   }
   _getFollowingPresence(targetUserId) {
-    const visited = [this.user.getId()];
+    const visited = [this.user.getRecordId()];
     const collaborators = this.getCollaborators();
     let leaderPresence = null;
     while (targetUserId && !visited.includes(targetUserId)) {
@@ -2340,6 +2349,11 @@ class Editor extends import_eventemitter3.default {
   getConstrainedCamera(point, opts) {
     const currentCamera = this.getCamera();
     let { x, y, z = currentCamera.z } = point;
+    const preserveFocalPoint = (current, requested, rz, z2) => {
+      const cz = currentCamera.z;
+      if (rz === cz) return current;
+      return current + (requested - current) * (1 / z2 - 1 / cz) / (1 / rz - 1 / cz);
+    };
     if (!opts?.force) {
       const cameraOptions = this.getCameraOptions();
       const zoomMin = cameraOptions.zoomSteps[0];
@@ -2359,14 +2373,10 @@ class Editor extends import_eventemitter3.default {
           z = this.getInitialZoom();
         }
         if (z < minZ || z > maxZ) {
-          const { x: cx, y: cy, z: cz } = currentCamera;
-          const cxA = -cx + vsb.w / cz / 2;
-          const cyA = -cy + vsb.h / cz / 2;
+          const rz = z;
           z = (0, import_utils2.clamp)(z, minZ, maxZ);
-          const cxB = -cx + vsb.w / z / 2;
-          const cyB = -cy + vsb.h / z / 2;
-          x = cx + cxB - cxA;
-          y = cy + cyB - cyA;
+          x = preserveFocalPoint(currentCamera.x, x, rz, z);
+          y = preserveFocalPoint(currentCamera.y, y, rz, z);
         }
         const minX = px / z - bounds.x;
         const minY = py / z - bounds.y;
@@ -2435,10 +2445,10 @@ class Editor extends import_eventemitter3.default {
         }
       } else {
         if (z > zoomMax || z < zoomMin) {
-          const { x: cx, y: cy, z: cz } = currentCamera;
+          const rz = z;
           z = (0, import_utils2.clamp)(z, zoomMin, zoomMax);
-          x = cx + (-cx + vsb.w / z / 2) - (-cx + vsb.w / cz / 2);
-          y = cy + (-cy + vsb.h / z / 2) - (-cy + vsb.h / cz / 2);
+          x = preserveFocalPoint(currentCamera.x, x, rz, z);
+          y = preserveFocalPoint(currentCamera.y, y, rz, z);
         }
       }
     }
@@ -2861,14 +2871,25 @@ class Editor extends import_eventemitter3.default {
       this.off("stop-camera-animation", cancel);
     };
     this.once("stop-camera-animation", cancel);
+    const dirZ = direction.z ?? 0;
     const moveCamera = (elapsed) => {
       const { x: cx, y: cy, z: cz } = this.getCamera();
-      const movementVec = import_Vec.Vec.Mul(direction, currentSpeed * elapsed / cz);
+      const dx = direction.x * (currentSpeed * elapsed) / cz;
+      const dy = direction.y * (currentSpeed * elapsed) / cz;
+      let newCx = cx + dx;
+      let newCy = cy + dy;
+      let newCz = cz;
+      if (dirZ !== 0) {
+        newCz = cz * (1 + dirZ * currentSpeed * elapsed);
+        const center = this.getViewportScreenCenter();
+        newCx += center.x / newCz - center.x / cz;
+        newCy += center.y / newCz - center.y / cz;
+      }
       currentSpeed *= 1 - friction;
       if (currentSpeed < speedThreshold) {
         cancel();
       } else {
-        this._setCamera(new import_Vec.Vec(cx + movementVec.x, cy + movementVec.y, cz));
+        this._setCamera(new import_Vec.Vec(newCx, newCy, newCz));
       }
     };
     this.on("tick", moveCamera);
@@ -2948,6 +2969,7 @@ class Editor extends import_eventemitter3.default {
       screenBounds.height = Math.max(screenBounds.height, 1);
     }
     const doc = this.getContainerDocument();
+    if (!doc.body) return this;
     const insets = [
       // top
       screenBounds.minY !== 0,
@@ -3157,7 +3179,7 @@ class Editor extends import_eventemitter3.default {
   }
   /**
    * Collect user IDs referenced by a set of shapes via shape-specific props
-   * (e.g. `textFirstEditedBy` on notes).
+   * (e.g. `textLastEditedBy` on notes).
    *
    * @internal
    */
@@ -3188,7 +3210,7 @@ class Editor extends import_eventemitter3.default {
    */
   startFollowingUser(userId) {
     this.stopFollowingUser();
-    const thisUserId = this.user.getId();
+    const thisUserId = this.user.getExternalId();
     if (!thisUserId) {
       console.warn("You should set the userId for the current instance before following a user");
     }
@@ -5892,24 +5914,40 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   resizeShape(shape, scale, opts = {}) {
+    const partial = this.getResizeShapePartial(shape, scale, opts);
+    if (partial) this.updateShapes([partial]);
+    return this;
+  }
+  /**
+   * Get the update for a resized shape without committing it to the store. Interactions that
+   * resize many shapes at once use this to collect all of the updates and commit them in a
+   * single batch. Returns null when there is nothing to update.
+   *
+   * Shapes that are rotated out of alignment with the scale axis cannot be resized with a
+   * single update; those shapes are resized immediately (as `resizeShape` would do) and null
+   * is returned.
+   *
+   * @internal
+   */
+  getResizeShapePartial(shape, scale, opts = {}) {
     const id = typeof shape === "string" ? shape : shape.id;
-    if (this.getIsReadonly()) return this;
+    if (this.getIsReadonly()) return null;
     if (!Number.isFinite(scale.x)) scale = new import_Vec.Vec(1, scale.y);
     if (!Number.isFinite(scale.y)) scale = new import_Vec.Vec(scale.x, 1);
     const initialShape = opts.initialShape ?? this.getShape(id);
-    if (!initialShape) return this;
+    if (!initialShape) return null;
     const scaleOrigin = opts.scaleOrigin ?? this.getShapePageBounds(id)?.center;
-    if (!scaleOrigin) return this;
+    if (!scaleOrigin) return null;
     const pageTransform = opts.initialPageTransform ? import_Mat.Mat.Cast(opts.initialPageTransform) : this.getShapePageTransform(id);
-    if (!pageTransform) return this;
+    if (!pageTransform) return null;
     const pageRotation = pageTransform.rotation();
-    if (pageRotation == null) return this;
+    if (pageRotation == null) return null;
     const scaleAxisRotation = opts.scaleAxisRotation ?? pageRotation;
     const initialBounds = opts.initialBounds ?? this.getShapeGeometry(id).bounds;
-    if (!initialBounds) return this;
+    if (!initialBounds) return null;
     const isAspectRatioLocked = opts.isAspectRatioLocked ?? this.getShapeUtil(initialShape).isAspectRatioLocked(initialShape);
     if (!(0, import_utils2.areAnglesCompatible)(pageRotation, scaleAxisRotation)) {
-      return this._resizeUnalignedShape(id, scale, {
+      this._resizeUnalignedShape(id, scale, {
         ...opts,
         initialBounds,
         scaleOrigin,
@@ -5918,6 +5956,7 @@ class Editor extends import_eventemitter3.default {
         isAspectRatioLocked,
         initialShape
       });
+      return null;
     }
     const util = this.getShapeUtil(initialShape);
     if (isAspectRatioLocked) {
@@ -5927,7 +5966,7 @@ class Editor extends import_eventemitter3.default {
         scale = new import_Vec.Vec(Math.sign(scale.x) * Math.abs(scale.y), scale.y);
       }
     }
-    let didResize = false;
+    let workingShape = null;
     if (util.onResize && util.canResize(initialShape)) {
       const newPagePoint = this._scalePagePoint(
         import_Mat.Mat.applyToPoint(pageTransform, new import_Vec.Vec(0, 0)),
@@ -5945,7 +5984,7 @@ class Editor extends import_eventemitter3.default {
       myScale.y = areWidthAndHeightAlignedWithCorrectAxis ? scale.y : scale.x;
       const initialPagePoint = import_Mat.Mat.applyToPoint(pageTransform, new import_Vec.Vec());
       const { x, y } = this.getPointInParentSpace(initialShape.id, initialPagePoint);
-      let workingShape = initialShape;
+      workingShape = initialShape;
       if (!opts.skipStartAndEndCallbacks) {
         workingShape = applyPartialToRecordWithProps(
           initialShape,
@@ -5965,9 +6004,6 @@ class Editor extends import_eventemitter3.default {
           initialShape
         }
       );
-      if (resizedShape) {
-        didResize = true;
-      }
       workingShape = applyPartialToRecordWithProps(workingShape, {
         id,
         type: initialShape.type,
@@ -5981,32 +6017,36 @@ class Editor extends import_eventemitter3.default {
           util.onResizeEnd?.(initialShape, workingShape) ?? void 0
         );
       }
-      this.updateShapes([workingShape]);
+      if (resizedShape) {
+        return workingShape;
+      }
     }
-    if (!didResize) {
-      const initialPageCenter = import_Mat.Mat.applyToPoint(pageTransform, initialBounds.center);
-      const newPageCenter = this._scalePagePoint(
-        initialPageCenter,
-        scaleOrigin,
-        scale,
-        scaleAxisRotation
-      );
-      const initialPageCenterInParentSpace = this.getPointInParentSpace(
-        initialShape.id,
-        initialPageCenter
-      );
-      const newPageCenterInParentSpace = this.getPointInParentSpace(initialShape.id, newPageCenter);
-      const delta = import_Vec.Vec.Sub(newPageCenterInParentSpace, initialPageCenterInParentSpace);
-      this.updateShapes([
-        {
-          id,
-          type: initialShape.type,
-          x: initialShape.x + delta.x,
-          y: initialShape.y + delta.y
-        }
-      ]);
+    const initialPageCenter = import_Mat.Mat.applyToPoint(pageTransform, initialBounds.center);
+    const newPageCenter = this._scalePagePoint(
+      initialPageCenter,
+      scaleOrigin,
+      scale,
+      scaleAxisRotation
+    );
+    const initialPageCenterInParentSpace = this.getPointInParentSpace(
+      initialShape.id,
+      initialPageCenter
+    );
+    const newPageCenterInParentSpace = this.getPointInParentSpace(initialShape.id, newPageCenter);
+    const delta = import_Vec.Vec.Sub(newPageCenterInParentSpace, initialPageCenterInParentSpace);
+    if (workingShape) {
+      return {
+        ...workingShape,
+        x: initialShape.x + delta.x,
+        y: initialShape.y + delta.y
+      };
     }
-    return this;
+    return {
+      id,
+      type: initialShape.type,
+      x: initialShape.x + delta.x,
+      y: initialShape.y + delta.y
+    };
   }
   /** @internal */
   _scalePagePoint(point, scaleOrigin, scale, scaleAxisRotation) {
@@ -7260,6 +7300,7 @@ class Editor extends import_eventemitter3.default {
   async getSvgElement(shapes, opts = {}) {
     const ids = shapes.length === 0 ? this.getCurrentPageShapeIdsSorted() : typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (ids.length === 0) return void 0;
+    await this.fonts.loadRequiredFontsForCurrentPage(this.options.maxFontsToLoadBeforeRender);
     return (0, import_exportToSvg.exportToSvg)(this, ids, opts);
   }
   /**
@@ -7834,6 +7875,15 @@ class Editor extends import_eventemitter3.default {
   _didPinch = false;
   /** @internal */
   _selectedShapeIdsAtPointerDown = [];
+  /**
+   * Whether `_selectedShapeIdsAtPointerDown` holds a pre-gesture selection
+   * captured by a `pointer_down` (the touch path) that a following pinch
+   * should restore. False when no pointer_down preceded the pinch (the
+   * Safari trackpad path uses gesture events), in which case `pinch_start`
+   * captures the live selection instead.
+   * @internal
+   */
+  _didCaptureSelectionAtPointerDown = false;
   /** @internal */
   _longPressTimeout = -1;
   /** @internal */
@@ -7966,10 +8016,15 @@ class Editor extends import_eventemitter3.default {
           case "pinch_start": {
             if (inputs.getIsPinching()) return;
             if (!inputs.getIsEditing()) {
-              this._selectedShapeIdsAtPointerDown = [...pageState.selectedShapeIds];
+              if (!this._didCaptureSelectionAtPointerDown) {
+                this._selectedShapeIdsAtPointerDown = [...pageState.selectedShapeIds];
+              }
               this._didPinch = true;
               inputs.setIsPinching(true);
               this.interrupt();
+              if (this._didCaptureSelectionAtPointerDown) {
+                this.setSelectedShapes(this._selectedShapeIdsAtPointerDown);
+              }
             }
             this.emit("event", info);
             return;
@@ -8009,6 +8064,7 @@ class Editor extends import_eventemitter3.default {
             const { _selectedShapeIdsAtPointerDown: shapesToReselect } = this;
             this.setSelectedShapes(this._selectedShapeIdsAtPointerDown);
             this._selectedShapeIdsAtPointerDown = [];
+            this._didCaptureSelectionAtPointerDown = false;
             if (this._didPinch) {
               this._didPinch = false;
               if (shapesToReselect.length > 0) {
@@ -8102,12 +8158,18 @@ class Editor extends import_eventemitter3.default {
                 });
               }, this.options.longPressDurationMs);
             }
-            this._selectedShapeIdsAtPointerDown = this.getSelectedShapeIds();
+            if (!this._didCaptureSelectionAtPointerDown) {
+              this._selectedShapeIdsAtPointerDown = this.getSelectedShapeIds();
+              this._didCaptureSelectionAtPointerDown = true;
+            }
             if (info.button === import_constants.LEFT_MOUSE_BUTTON) this.capturedPointerId = info.pointerId;
             inputs.buttons.add(info.button);
             inputs.setIsPointing(true);
             inputs.setIsDragging(false);
-            if (!isPenMode && isPen) this.updateInstanceState({ isPenMode: true });
+            if (!isPenMode && info.isPenDirect) {
+              this.updateInstanceState({ isPenMode: true });
+              this.interrupt();
+            }
             if (info.button === import_constants.STYLUS_ERASER_BUTTON) {
               this._restoreToolId = this.getCurrentToolId();
               this.complete();
@@ -8175,6 +8237,7 @@ class Editor extends import_eventemitter3.default {
             if (this.inputs.getIsRightPointing() && !this.inputs.getIsPanning()) {
               this.inputs.setIsRightPointing(false);
               this._selectedShapeIdsAtPointerDown = [];
+              this._didCaptureSelectionAtPointerDown = false;
               break;
             }
             this.inputs.setIsRightPointing(false);
@@ -8209,14 +8272,21 @@ class Editor extends import_eventemitter3.default {
                     this.setCursor({ type: this._prevCursor, rotation: 0 });
                   }
                   if (slideSpeed > 0) {
-                    this.slideCamera({ speed: slideSpeed, direction: slideDirection });
+                    this.slideCamera({
+                      speed: slideSpeed,
+                      direction: { x: slideDirection.x, y: slideDirection.y, z: 0 }
+                    });
                   }
                   this._selectedShapeIdsAtPointerDown = [];
+                  this._didCaptureSelectionAtPointerDown = false;
                   return this;
                 }
               }
               if (slideSpeed > 0) {
-                this.slideCamera({ speed: slideSpeed, direction: slideDirection });
+                this.slideCamera({
+                  speed: slideSpeed,
+                  direction: { x: slideDirection.x, y: slideDirection.y, z: 0 }
+                });
               }
             } else {
               if (info.button === import_constants.STYLUS_ERASER_BUTTON) {
@@ -8225,6 +8295,7 @@ class Editor extends import_eventemitter3.default {
               }
             }
             this._selectedShapeIdsAtPointerDown = [];
+            this._didCaptureSelectionAtPointerDown = false;
             break;
           }
         }
@@ -8307,6 +8378,9 @@ class Editor extends import_eventemitter3.default {
       } else if (info.button === import_constants.RIGHT_MOUSE_BUTTON) {
         info.name = "right_click";
       }
+      if (info.name === "right_click" && this.getCurrentToolId() !== "select" && this.getStateDescendant("select")) {
+        this.setCurrentTool("select");
+      }
       const { isPenMode } = this.store.unsafeGetWithoutCapture(import_tlschema.TLINSTANCE_ID);
       if (info.isPen === isPenMode) {
         const clickInfo = this._clickManager.handlePointerEvent(info);