@tldraw/editor 5.1.1 → 5.2.0-canary.0878dbd31f0d

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

@@ -2152,7 +2152,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 +2340,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 +2364,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 +2436,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 +2862,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);
@@ -3188,7 +3200,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");
     }
@@ -7834,6 +7846,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 +7987,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 +8035,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,7 +8129,10 @@ 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);
@@ -8178,6 +8208,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);
@@ -8212,14 +8243,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) {
@@ -8228,6 +8266,7 @@ class Editor extends import_eventemitter3.default {
               }
             }
             this._selectedShapeIdsAtPointerDown = [];
+            this._didCaptureSelectionAtPointerDown = false;
             break;
           }
         }