@tldraw/editor 5.2.0-next.e2b8d10bf10e → 5.2.0

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

@@ -188,12 +188,12 @@ class Editor extends EventEmitter {
     this._tickManager = new TickManager(this);
     this.disposables.add(() => this._tickManager.dispose());
     this.disposables.add(() => {
-      this.off("tick", this._decayCameraStateTimeout);
       this._setCameraState("idle");
     });
     this.fonts = new FontManager(this, fontAssetUrls);
     this.disposables.add(() => this.fonts.dispose());
     this.inputs = new InputsManager(this);
+    this.disposables.add(() => this.inputs.dispose());
     this.performance = new PerformanceManager(this);
     this.disposables.add(() => this.performance.dispose());
     this.collaborators = new CollaboratorsManager(this);
@@ -822,6 +822,7 @@ class Editor extends EventEmitter {
     this.store.dispose();
     this.isDisposed = true;
     this.emit("dispose");
+    this.removeAllListeners();
   }
   /* ------------------ Themes (shadowing the theme manager) ------------------ */
   /**
@@ -1091,6 +1092,14 @@ class Editor extends EventEmitter {
   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.
    *
@@ -2185,7 +2194,7 @@ class Editor extends EventEmitter {
     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)) {
@@ -2895,14 +2904,25 @@ class Editor extends EventEmitter {
       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 = 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 Vec(cx + movementVec.x, cy + movementVec.y, cz));
+        this._setCamera(new Vec(newCx, newCy, newCz));
       }
     };
     this.on("tick", moveCamera);
@@ -2982,6 +3002,7 @@ class Editor extends EventEmitter {
       screenBounds.height = Math.max(screenBounds.height, 1);
     }
     const doc = this.getContainerDocument();
+    if (!doc.body) return this;
     const insets = [
       // top
       screenBounds.minY !== 0,
@@ -3191,7 +3212,7 @@ class Editor extends EventEmitter {
   }
   /**
    * Collect user IDs referenced by a set of shapes via shape-specific props
-   * (e.g. `textFirstEditedBy` on notes).
+   * (e.g. `textLastEditedBy` on notes).
    *
    * @internal
    */
@@ -3222,7 +3243,7 @@ class Editor extends EventEmitter {
    */
   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");
     }
@@ -5926,24 +5947,40 @@ class Editor extends EventEmitter {
    * @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 Vec(1, scale.y);
     if (!Number.isFinite(scale.y)) scale = new 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 ? 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 (!areAnglesCompatible(pageRotation, scaleAxisRotation)) {
-      return this._resizeUnalignedShape(id, scale, {
+      this._resizeUnalignedShape(id, scale, {
         ...opts,
         initialBounds,
         scaleOrigin,
@@ -5952,6 +5989,7 @@ class Editor extends EventEmitter {
         isAspectRatioLocked,
         initialShape
       });
+      return null;
     }
     const util = this.getShapeUtil(initialShape);
     if (isAspectRatioLocked) {
@@ -5961,7 +5999,7 @@ class Editor extends EventEmitter {
         scale = new 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(
         Mat.applyToPoint(pageTransform, new Vec(0, 0)),
@@ -5979,7 +6017,7 @@ class Editor extends EventEmitter {
       myScale.y = areWidthAndHeightAlignedWithCorrectAxis ? scale.y : scale.x;
       const initialPagePoint = Mat.applyToPoint(pageTransform, new Vec());
       const { x, y } = this.getPointInParentSpace(initialShape.id, initialPagePoint);
-      let workingShape = initialShape;
+      workingShape = initialShape;
       if (!opts.skipStartAndEndCallbacks) {
         workingShape = applyPartialToRecordWithProps(
           initialShape,
@@ -5999,9 +6037,6 @@ class Editor extends EventEmitter {
           initialShape
         }
       );
-      if (resizedShape) {
-        didResize = true;
-      }
       workingShape = applyPartialToRecordWithProps(workingShape, {
         id,
         type: initialShape.type,
@@ -6015,32 +6050,36 @@ class Editor extends EventEmitter {
           util.onResizeEnd?.(initialShape, workingShape) ?? void 0
         );
       }
-      this.updateShapes([workingShape]);
+      if (resizedShape) {
+        return workingShape;
+      }
     }
-    if (!didResize) {
-      const initialPageCenter = 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 = Vec.Sub(newPageCenterInParentSpace, initialPageCenterInParentSpace);
-      this.updateShapes([
-        {
-          id,
-          type: initialShape.type,
-          x: initialShape.x + delta.x,
-          y: initialShape.y + delta.y
-        }
-      ]);
+    const initialPageCenter = 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 = 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) {
@@ -7294,6 +7333,7 @@ class Editor extends EventEmitter {
   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 exportToSvg(this, ids, opts);
   }
   /**
@@ -8159,7 +8199,10 @@ class Editor extends EventEmitter {
             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 === STYLUS_ERASER_BUTTON) {
               this._restoreToolId = this.getCurrentToolId();
               this.complete();
@@ -8262,7 +8305,10 @@ class Editor extends EventEmitter {
                     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;
@@ -8270,7 +8316,10 @@ class Editor extends EventEmitter {
                 }
               }
               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 === STYLUS_ERASER_BUTTON) {
@@ -8362,6 +8411,9 @@ class Editor extends EventEmitter {
       } else if (info.button === 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(TLINSTANCE_ID);
       if (info.isPen === isPenMode) {
         const clickInfo = this._clickManager.handlePointerEvent(info);