@tldraw/editor 4.6.0-next.fe1474dc57d8 → 5.0.0

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

@@ -56,7 +56,6 @@ import {
   hasOwnProperty,
   last,
   lerp,
-  maxBy,
   minBy,
   sortById,
   sortByIndex,
@@ -111,6 +110,7 @@ import { notVisibleShapes } from "./derivations/notVisibleShapes.mjs";
 import { parentsToChildren } from "./derivations/parentsToChildren.mjs";
 import { deriveShapeIdsInCurrentPage } from "./derivations/shapeIdsInCurrentPage.mjs";
 import { ClickManager } from "./managers/ClickManager/ClickManager.mjs";
+import { CollaboratorsManager } from "./managers/CollaboratorsManager/CollaboratorsManager.mjs";
 import { EdgeScrollManager } from "./managers/EdgeScrollManager/EdgeScrollManager.mjs";
 import { FocusManager } from "./managers/FocusManager/FocusManager.mjs";
 import { FontManager } from "./managers/FontManager/FontManager.mjs";
@@ -124,6 +124,7 @@ import { TextManager } from "./managers/TextManager/TextManager.mjs";
 import { ThemeManager, resolveThemes } from "./managers/ThemeManager/ThemeManager.mjs";
 import { TickManager } from "./managers/TickManager/TickManager.mjs";
 import { UserPreferencesManager } from "./managers/UserPreferencesManager/UserPreferencesManager.mjs";
+import { OverlayManager } from "./overlays/OverlayManager.mjs";
 import { RootState } from "./tools/RootState.mjs";
 class Editor extends EventEmitter {
   id = uniqueId();
@@ -133,6 +134,7 @@ class Editor extends EventEmitter {
     shapeUtils,
     bindingUtils,
     assetUtils: assetUtilConstructors,
+    overlayUtils: overlayUtilConstructors,
     tools,
     getContainer,
     // needs to be here for backwards compatibility with TldrawEditor
@@ -192,6 +194,7 @@ class Editor extends EventEmitter {
     this.inputs = new InputsManager(this);
     this.performance = new PerformanceManager(this);
     this.disposables.add(() => this.performance.dispose());
+    this.collaborators = new CollaboratorsManager(this);
     class NewRoot extends RootState {
       static initial = initialState ?? "";
     }
@@ -252,6 +255,13 @@ class Editor extends EventEmitter {
       this.root.children[Tool.id] = new Tool(this, this.root);
     }
     this.scribbles = new ScribbleManager(this);
+    this.overlays = new 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(
@@ -704,6 +714,12 @@ class Editor extends EventEmitter {
    * @public
    */
   timers = tltime.forContext(this.contextId);
+  /**
+   * A manager for remote peer collaborators connected to this editor.
+   *
+   * @public
+   */
+  collaborators;
   /**
    * A manager for the user and their preferences.
    *
@@ -734,6 +750,12 @@ class Editor extends EventEmitter {
    * @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.
    *
@@ -1382,11 +1404,20 @@ class Editor extends EventEmitter {
   /**
    * 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() {
@@ -3052,26 +3083,53 @@ class Editor extends EventEmitter {
     const { x: cx, y: cy, z: cz = 1 } = this.getCamera();
     return new 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 EMPTY_ARRAY;
-    const userIds = [...new Set(allPresenceRecords.map((c) => c.userId))].sort();
-    return userIds.map((id) => {
-      const latestPresence = 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
   /**
@@ -3707,7 +3765,7 @@ class Editor extends EventEmitter {
     } = 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,
@@ -8422,15 +8480,6 @@ __decorateClass([
 __decorateClass([
   computed
 ], Editor.prototype, "getViewportPageBounds", 1);
-__decorateClass([
-  computed
-], Editor.prototype, "_getCollaboratorsQuery", 1);
-__decorateClass([
-  computed
-], Editor.prototype, "getCollaborators", 1);
-__decorateClass([
-  computed
-], Editor.prototype, "getCollaboratorsOnCurrentPage", 1);
 __decorateClass([
   computed
 ], Editor.prototype, "getRenderingShapes", 1);