@tldraw/editor 4.6.0-next.fecc64eee134 → 5.0.1

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

@@ -77,6 +77,7 @@ var import_notVisibleShapes = require("./derivations/notVisibleShapes");
 var import_parentsToChildren = require("./derivations/parentsToChildren");
 var import_shapeIdsInCurrentPage = require("./derivations/shapeIdsInCurrentPage");
 var import_ClickManager = require("./managers/ClickManager/ClickManager");
+var import_CollaboratorsManager = require("./managers/CollaboratorsManager/CollaboratorsManager");
 var import_EdgeScrollManager = require("./managers/EdgeScrollManager/EdgeScrollManager");
 var import_FocusManager = require("./managers/FocusManager/FocusManager");
 var import_FontManager = require("./managers/FontManager/FontManager");
@@ -90,6 +91,7 @@ var import_TextManager = require("./managers/TextManager/TextManager");
 var import_ThemeManager = require("./managers/ThemeManager/ThemeManager");
 var import_TickManager = require("./managers/TickManager/TickManager");
 var import_UserPreferencesManager = require("./managers/UserPreferencesManager/UserPreferencesManager");
+var import_OverlayManager = require("./overlays/OverlayManager");
 var import_RootState = require("./tools/RootState");
 class Editor extends import_eventemitter3.default {
   id = (0, import_utils.uniqueId)();
@@ -99,6 +101,7 @@ class Editor extends import_eventemitter3.default {
     shapeUtils,
     bindingUtils,
     assetUtils: assetUtilConstructors,
+    overlayUtils: overlayUtilConstructors,
     tools,
     getContainer,
     // needs to be here for backwards compatibility with TldrawEditor
@@ -158,6 +161,7 @@ class Editor extends import_eventemitter3.default {
     this.inputs = new import_InputsManager.InputsManager(this);
     this.performance = new import_PerformanceManager.PerformanceManager(this);
     this.disposables.add(() => this.performance.dispose());
+    this.collaborators = new import_CollaboratorsManager.CollaboratorsManager(this);
     class NewRoot extends import_RootState.RootState {
       static initial = initialState ?? "";
     }
@@ -218,6 +222,13 @@ class Editor extends import_eventemitter3.default {
       this.root.children[Tool.id] = new Tool(this, this.root);
     }
     this.scribbles = new import_ScribbleManager.ScribbleManager(this);
+    this.overlays = new import_OverlayManager.OverlayManager(this);
+    if (overlayUtilConstructors) {
+      for (const Util of overlayUtilConstructors) {
+        const util = new Util(this);
+        this.overlays.registerUtil(util);
+      }
+    }
     const cleanupInstancePageState = (prevPageState, shapesNoLongerInPage) => {
       let nextPageState = null;
       const selectedShapeIds = prevPageState.selectedShapeIds.filter(
@@ -670,6 +681,12 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   timers = import_time.tltime.forContext(this.contextId);
+  /**
+   * A manager for remote peer collaborators connected to this editor.
+   *
+   * @public
+   */
+  collaborators;
   /**
    * A manager for the user and their preferences.
    *
@@ -700,6 +717,12 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   scribbles;
+  /**
+   * A manager for canvas overlay UI elements (selection handles, shape handles, etc.).
+   *
+   * @public
+   */
+  overlays;
   /**
    * A manager for side effects and correct state enforcement. See {@link @tldraw/store#StoreSideEffects} for details.
    *
@@ -1348,11 +1371,20 @@ class Editor extends import_eventemitter3.default {
   /**
    * Set the cursor.
    *
+   * No-op when the partial wouldn't change the current cursor — `setCursor`
+   * is called from pointer-move hot paths (see `updateHoveredOverlayId`,
+   * various tool states) and skipping redundant writes avoids needlessly
+   * dirtying instance state.
+   *
    * @param cursor - The cursor to set.
    * @public
    */
   setCursor(cursor) {
-    this.updateInstanceState({ cursor: { ...this.getInstanceState().cursor, ...cursor } });
+    const current = this.getInstanceState().cursor;
+    if ((cursor.type === void 0 || cursor.type === current.type) && (cursor.rotation === void 0 || cursor.rotation === current.rotation)) {
+      return this;
+    }
+    this.updateInstanceState({ cursor: { ...current, ...cursor } });
     return this;
   }
   getPageStates() {
@@ -3018,26 +3050,53 @@ class Editor extends import_eventemitter3.default {
     const { x: cx, y: cy, z: cz = 1 } = this.getCamera();
     return new import_Vec.Vec((point.x + cx) * cz, (point.y + cy) * cz, point.z ?? 0.5);
   }
-  _getCollaboratorsQuery() {
-    return this.store.query.records("instance_presence", () => ({
-      userId: { neq: this.user.getId() }
-    }));
-  }
+  // Collaborators
+  /**
+   * Returns a list of presence records for all peer collaborators.
+   * This will return the latest presence record for each connected user.
+   *
+   * Convenience wrapper for {@link CollaboratorsManager.getCollaborators}.
+   *
+   * @public
+   */
   getCollaborators() {
-    const allPresenceRecords = this._getCollaboratorsQuery().get();
-    if (!allPresenceRecords.length) return import_state.EMPTY_ARRAY;
-    const userIds = [...new Set(allPresenceRecords.map((c) => c.userId))].sort();
-    return userIds.map((id) => {
-      const latestPresence = (0, import_utils.maxBy)(
-        allPresenceRecords.filter((c) => c.userId === id),
-        (p) => p.lastActivityTimestamp ?? 0
-      );
-      return latestPresence;
-    });
+    return this.collaborators.getCollaborators();
   }
+  /**
+   * Returns a list of presence records for all peer collaborators on the current page.
+   * This will return the latest presence record for each connected user.
+   *
+   * Convenience wrapper for {@link CollaboratorsManager.getCollaboratorsOnCurrentPage}.
+   *
+   * @public
+   */
   getCollaboratorsOnCurrentPage() {
-    const currentPageId = this.getCurrentPageId();
-    return this.getCollaborators().filter((c) => c.currentPageId === currentPageId);
+    return this.collaborators.getCollaboratorsOnCurrentPage();
+  }
+  /**
+   * Returns a list of presence records for peer collaborators who should currently be
+   * shown in the UI. Filters {@link Editor.getCollaborators} by activity state
+   * (active / idle / inactive) and visibility rules such as following and highlighted
+   * users. Re-evaluates on the collaborator visibility clock, so callers don't need to
+   * drive their own activity timer.
+   *
+   * Convenience wrapper for {@link CollaboratorsManager.getVisibleCollaborators}.
+   *
+   * @public
+   */
+  getVisibleCollaborators() {
+    return this.collaborators.getVisibleCollaborators();
+  }
+  /**
+   * Returns a list of presence records for peer collaborators who should currently be
+   * shown in the UI, filtered to those on the current page.
+   *
+   * Convenience wrapper for {@link CollaboratorsManager.getVisibleCollaboratorsOnCurrentPage}.
+   *
+   * @public
+   */
+  getVisibleCollaboratorsOnCurrentPage() {
+    return this.collaborators.getVisibleCollaboratorsOnCurrentPage();
   }
   // Attribution
   /**
@@ -3673,7 +3732,7 @@ class Editor extends import_eventemitter3.default {
     } = context;
     const zoomStepFunction = (zoom) => Math.pow(2, Math.ceil(Math.log2(zoom)));
     const steppedScreenScale = zoomStepFunction(screenScale);
-    const networkEffectiveType = "connection" in navigator ? navigator.connection.effectiveType : null;
+    const networkEffectiveType = "connection" in navigator ? navigator.connection?.effectiveType ?? null : null;
     return await this.store.props.assets.resolve(asset, {
       screenScale: screenScale || 1,
       steppedScreenScale,
@@ -4143,7 +4202,7 @@ class Editor extends import_eventemitter3.default {
     const searchMargin = Math.max(innerMargin, outerMargin, this.options.hitTestMargin / zoomLevel);
     const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, searchMargin);
     const shapesToCheck = (opts.renderingOnly ? this.getCurrentPageRenderingShapesSorted() : this.getCurrentPageShapesSorted()).filter((shape) => {
-      if (!candidateIds.has(shape.id) && !this.isShapeOfType(shape, "frame")) return false;
+      if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) return false;
       if (shape.isLocked && !hitLocked || this.isShapeHidden(shape) || this.isShapeOfType(shape, "group"))
         return false;
       const pageMask = this.getShapeMask(shape);
@@ -4156,14 +4215,16 @@ class Editor extends import_eventemitter3.default {
       const geometry = this.getShapeGeometry(shape);
       const isGroup = geometry instanceof import_Group2d.Group2d;
       const pointInShapeSpace = this.getPointInShapeSpace(shape, point);
-      if (this.isShapeOfType(shape, "frame") || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && this.getShapeUtil(shape).getText(shape)?.trim()) {
+      const shapeUtil = this.getShapeUtil(shape);
+      const isShapeFrameLike = this.isShapeFrameLike(shape);
+      if (isShapeFrameLike || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && shapeUtil.getText(shape)?.trim()) {
         for (const childGeometry of geometry.children) {
           if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
             return shape;
           }
         }
       }
-      if (this.isShapeOfType(shape, "frame")) {
+      if (isShapeFrameLike) {
         const distance2 = geometry.distanceToPoint(pointInShapeSpace, hitFrameInside);
         if (hitFrameInside ? distance2 > 0 && distance2 <= outerMargin || distance2 <= 0 && distance2 > -innerMargin : distance2 > 0 && distance2 <= outerMargin) {
           return inMarginClosestToEdgeHit || shape;
@@ -4257,7 +4318,7 @@ class Editor extends import_eventemitter3.default {
     const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, margin);
     return this.getCurrentPageShapesSorted().filter((shape) => {
       if (this.isShapeHidden(shape)) return false;
-      if (!candidateIds.has(shape.id) && !this.isShapeOfType(shape, "frame")) return false;
+      if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) return false;
       return this.isPointInShape(shape, point, opts);
     }).reverse();
   }
@@ -4370,6 +4431,24 @@ class Editor extends import_eventemitter3.default {
     if (!shape) return false;
     return shape.type === type;
   }
+  /**
+   * Get whether a shape behaves like a frame — a container that has child
+   * shapes, requires full-brush selection, blocks erasure from inside, etc.
+   *
+   * @example
+   * ```ts
+   * const isFrameLike = editor.isShapeFrameLike(someShape)
+   * ```
+   *
+   * @param shape - The shape (or shape id) to test.
+   *
+   * @public
+   */
+  isShapeFrameLike(shape) {
+    const _shape = typeof shape === "string" ? this.getShape(shape) : shape;
+    if (!_shape) return false;
+    return this.getShapeUtil(_shape).isFrameLike(_shape);
+  }
   /**
    * Get a shape by its id.
    *
@@ -8014,6 +8093,10 @@ class Editor extends import_eventemitter3.default {
               }
               this.inputs.setIsPanning(true);
               clearTimeout(this._longPressTimeout);
+            } else if (info.button === import_constants.RIGHT_MOUSE_BUTTON && this.options.rightClickPanning) {
+              this.inputs.setIsRightPointing(true);
+              clearTimeout(this._longPressTimeout);
+              return this;
             }
             if (this.inputs.getIsPanning()) {
               this.stopCameraAnimation();
@@ -8025,6 +8108,22 @@ class Editor extends import_eventemitter3.default {
           case "pointer_move": {
             if (!isPen && isPenMode) return;
             const { x: cx, y: cy, z: cz } = (0, import_state.unsafe__withoutCapture)(() => this.getCamera());
+            if (this.inputs.getIsRightPointing() && !this.inputs.getIsPanning()) {
+              const currentScreenPoint = this.inputs.getCurrentScreenPoint();
+              const originScreenPoint = this.inputs.getOriginScreenPoint();
+              if (import_Vec.Vec.Dist2(originScreenPoint, currentScreenPoint) > this.options.dragDistanceSquared) {
+                this._prevCursor = this.getInstanceState().cursor.type;
+                this.inputs.setIsPanning(true);
+                this.setCursor({ type: "grabbing", rotation: 0 });
+                this.stopCameraAnimation();
+                const offset = import_Vec.Vec.Sub(currentScreenPoint, originScreenPoint);
+                this.setCamera(new import_Vec.Vec(cx + offset.x / cz, cy + offset.y / cz, cz), {
+                  immediate: true
+                });
+                this.maybeTrackPerformance("Panning");
+              }
+              return;
+            }
             if (this.inputs.getIsPanning() && this.inputs.getIsPointing()) {
               const currentScreenPoint = this.inputs.getCurrentScreenPoint();
               const previousScreenPoint = this.inputs.getPreviousScreenPoint();
@@ -8048,6 +8147,12 @@ class Editor extends import_eventemitter3.default {
             clearTimeout(this._longPressTimeout);
             inputs.buttons.delete(info.button);
             if (instanceState.isPenMode && !isPen) return;
+            if (this.inputs.getIsRightPointing() && !this.inputs.getIsPanning()) {
+              this.inputs.setIsRightPointing(false);
+              this._selectedShapeIdsAtPointerDown = [];
+              break;
+            }
+            this.inputs.setIsRightPointing(false);
             if (this.capturedPointerId === info.pointerId) {
               this.capturedPointerId = null;
               info.button = 0;
@@ -8065,11 +8170,24 @@ class Editor extends import_eventemitter3.default {
                   break;
                 }
                 case import_constants.MIDDLE_MOUSE_BUTTON: {
-                  if (this.inputs.keys.has(" ")) {
+                  if (this.inputs.keys.has("Space")) {
                     this.setCursor({ type: "grab", rotation: 0 });
                   } else {
                     this.setCursor({ type: this._prevCursor, rotation: 0 });
                   }
+                  break;
+                }
+                case import_constants.RIGHT_MOUSE_BUTTON: {
+                  if (this.inputs.keys.has("Space")) {
+                    this.setCursor({ type: "grab", rotation: 0 });
+                  } else {
+                    this.setCursor({ type: this._prevCursor, rotation: 0 });
+                  }
+                  if (slideSpeed > 0) {
+                    this.slideCamera({ speed: slideSpeed, direction: slideDirection });
+                  }
+                  this._selectedShapeIdsAtPointerDown = [];
+                  return this;
                 }
               }
               if (slideSpeed > 0) {
@@ -8329,15 +8447,6 @@ __decorateClass([
 __decorateClass([
   import_state.computed
 ], Editor.prototype, "getViewportPageBounds", 1);
-__decorateClass([
-  import_state.computed
-], Editor.prototype, "_getCollaboratorsQuery", 1);
-__decorateClass([
-  import_state.computed
-], Editor.prototype, "getCollaborators", 1);
-__decorateClass([
-  import_state.computed
-], Editor.prototype, "getCollaboratorsOnCurrentPage", 1);
 __decorateClass([
   import_state.computed
 ], Editor.prototype, "getRenderingShapes", 1);