@tldraw/editor 4.6.0-next.30b99cd52fc8 → 4.6.0-next.35cf541abcf9

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

@@ -45,6 +45,7 @@ var import_tlschema = require("@tldraw/tlschema");
 var import_utils = require("@tldraw/utils");
 var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
 var import_createTLCurrentUser = require("../config/createTLCurrentUser");
+var import_defaultAssets = require("../config/defaultAssets");
 var import_defaultBindings = require("../config/defaultBindings");
 var import_defaultShapes = require("../config/defaultShapes");
 var import_TLEditorSnapshot = require("../config/TLEditorSnapshot");
@@ -81,10 +82,12 @@ var import_FocusManager = require("./managers/FocusManager/FocusManager");
 var import_FontManager = require("./managers/FontManager/FontManager");
 var import_HistoryManager = require("./managers/HistoryManager/HistoryManager");
 var import_InputsManager = require("./managers/InputsManager/InputsManager");
+var import_PerformanceManager = require("./managers/PerformanceManager/PerformanceManager");
 var import_ScribbleManager = require("./managers/ScribbleManager/ScribbleManager");
 var import_SnapManager = require("./managers/SnapManager/SnapManager");
 var import_SpatialIndexManager = require("./managers/SpatialIndexManager/SpatialIndexManager");
 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_RootState = require("./tools/RootState");
@@ -95,6 +98,7 @@ class Editor extends import_eventemitter3.default {
     user,
     shapeUtils,
     bindingUtils,
+    assetUtils: assetUtilConstructors,
     tools,
     getContainer,
     // needs to be here for backwards compatibility with TldrawEditor
@@ -102,13 +106,15 @@ class Editor extends import_eventemitter3.default {
     cameraOptions,
     initialState,
     autoFocus,
-    inferDarkMode,
     options: _options,
     // needs to be here for backwards compatibility with TldrawEditor
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     textOptions: _textOptions,
     getShapeVisibility,
-    fontAssetUrls
+    colorScheme,
+    fontAssetUrls,
+    themes,
+    initialTheme
   }) {
     super();
     this._getShapeVisibility = getShapeVisibility;
@@ -131,19 +137,27 @@ class Editor extends import_eventemitter3.default {
       ...cameraOptions,
       ...options?.camera
     });
+    this.getContainer = getContainer;
     this._textOptions = (0, import_state.atom)("text options", options?.text ?? null);
-    this.user = new import_UserPreferencesManager.UserPreferencesManager(user ?? (0, import_createTLCurrentUser.createTLCurrentUser)(), inferDarkMode ?? false);
+    this.user = new import_UserPreferencesManager.UserPreferencesManager(user ?? (0, import_createTLCurrentUser.createTLCurrentUser)(), colorScheme ?? "light");
     this.disposables.add(() => this.user.dispose());
-    this.getContainer = getContainer;
     this.textMeasure = new import_TextManager.TextManager(this);
     this.disposables.add(() => this.textMeasure.dispose());
-    this.fonts = new import_FontManager.FontManager(this, fontAssetUrls);
+    this._themeManager = new import_ThemeManager.ThemeManager(this, {
+      themes: (0, import_ThemeManager.resolveThemes)(themes),
+      initial: initialTheme ?? "default"
+    });
+    this.disposables.add(() => this._themeManager.dispose());
     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.inputs = new import_InputsManager.InputsManager(this);
+    this.performance = new import_PerformanceManager.PerformanceManager(this);
+    this.disposables.add(() => this.performance.dispose());
     class NewRoot extends import_RootState.RootState {
       static initial = initialState ?? "";
     }
@@ -171,6 +185,16 @@ class Editor extends import_eventemitter3.default {
     }
     this.shapeUtils = _shapeUtils;
     this.styleProps = _styleProps;
+    const _shapeUtilsByAssetType = {};
+    for (const Util of allShapeUtils) {
+      const assetTypes = Util.handledAssetTypes;
+      if (assetTypes) {
+        for (const assetType of assetTypes) {
+          _shapeUtilsByAssetType[assetType] = _shapeUtils[Util.type];
+        }
+      }
+    }
+    this._shapeUtilsByAssetType = _shapeUtilsByAssetType;
     const allBindingUtils = (0, import_defaultBindings.checkBindings)(bindingUtils);
     const _bindingUtils = {};
     for (const Util of allBindingUtils) {
@@ -178,6 +202,15 @@ class Editor extends import_eventemitter3.default {
       _bindingUtils[Util.type] = util;
     }
     this.bindingUtils = _bindingUtils;
+    if (assetUtilConstructors) {
+      const allAssetUtils = (0, import_defaultAssets.checkAssets)(assetUtilConstructors);
+      const _assetUtils = {};
+      for (const Util of allAssetUtils) {
+        const util = new Util(this);
+        _assetUtils[Util.type] = util;
+      }
+      this.assetUtils = _assetUtils;
+    }
     for (const Tool of [...tools]) {
       if ((0, import_utils.hasOwnProperty)(this.root.children, Tool.id)) {
         throw Error(`Can't override tool with id "${Tool.id}"`);
@@ -618,6 +651,17 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   snaps;
+  /**
+   * A manager for performance measurement hooks.
+   *
+   * @public
+   */
+  performance;
+  /**
+   * A manager for the spatial index, tracking where shapes exist on the canvas.
+   *
+   * @internal
+   */
   _spatialIndex;
   /**
    * A manager for the any asynchronous events and making sure they're
@@ -632,6 +676,12 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   user;
+  /**
+   * A manager for the editor's themes.
+   *
+   * @internal
+   */
+  _themeManager;
   /**
    * A helper for measuring text.
    *
@@ -703,12 +753,117 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   dispose() {
+    this.stopCameraAnimation();
+    if (this.getInstanceState().followingUserId) {
+      this.stopFollowingUser();
+    }
     this.disposables.forEach((dispose) => dispose());
     this.disposables.clear();
+    this.menus.clearOpenMenus();
     this.store.dispose();
     this.isDisposed = true;
     this.emit("dispose");
   }
+  /* ------------------ Themes (shadowing the theme manager) ------------------ */
+  /**
+   * Get the current color mode (`'light'` or `'dark'`), based on the user's dark mode preference.
+   *
+   * @public
+   */
+  getColorMode() {
+    return this._themeManager.getColorMode();
+  }
+  /**
+   * Set the color mode. Note that this is a convenience method that passes the mode to
+   * `user.updateUserPreferences`, which is the source of truth for the user's color mode preference.
+   *
+   * @public
+   */
+  setColorMode(mode) {
+    this.user.updateUserPreferences({ colorScheme: mode });
+    return this;
+  }
+  /**
+   * Get the id of the current theme.
+   *
+   * @public
+   */
+  getCurrentThemeId() {
+    return this._themeManager.getCurrentThemeId();
+  }
+  /**
+   * Get the current theme definition.
+   *
+   * @public
+   */
+  getCurrentTheme() {
+    return this._themeManager.getCurrentTheme();
+  }
+  /**
+   * Set the current theme by id.
+   *
+   * @public
+   */
+  setCurrentTheme(id) {
+    this._themeManager.setCurrentTheme(id);
+    return this;
+  }
+  /**
+   * Get all registered theme definitions.
+   *
+   * @public
+   */
+  getThemes() {
+    return this._themeManager.getThemes();
+  }
+  /**
+   * Get a single theme definition by id.
+   *
+   * @public
+   */
+  getTheme(id) {
+    return this._themeManager.getTheme(id);
+  }
+  /**
+   * Replace all theme definitions, or update them via a callback that receives a deep copy.
+   * The `'default'` theme must always be present in the result.
+   *
+   * @example
+   * ```ts
+   * // Replace all themes
+   * editor.updateThemes({ default: myDefaultTheme, ocean: myOceanTheme })
+   *
+   * // Update via callback
+   * editor.updateThemes((themes) => {
+   *   delete themes.ocean
+   *   return themes
+   * })
+   * ```
+   *
+   * @public
+   */
+  updateThemes(themes) {
+    this._themeManager.updateThemes(themes);
+    return this;
+  }
+  /**
+   * Register or update a single theme definition. The theme is keyed by its `id` property.
+   *
+   * @example
+   * ```ts
+   * // Override a property on the default theme
+   * editor.updateTheme({ ...editor.getTheme('default')!, fontSize: 24 })
+   *
+   * // Register a new theme
+   * editor.updateTheme({ id: 'ocean', ...myOceanTheme })
+   * ```
+   *
+   * @public
+   */
+  updateTheme(theme) {
+    this._themeManager.updateTheme(theme);
+    return this;
+  }
   /* ------------------- Shape Utils ------------------ */
   /**
    * A map of shape utility classes (TLShapeUtils) by shape type.
@@ -716,6 +871,8 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   shapeUtils;
+  /** @internal */
+  _shapeUtilsByAssetType = {};
   styleProps;
   getShapeUtil(arg) {
     const type = typeof arg === "string" ? arg : arg.type;
@@ -727,6 +884,17 @@ class Editor extends import_eventemitter3.default {
     const type = typeof arg === "string" ? arg : arg.type;
     return (0, import_utils.hasOwnProperty)(this.shapeUtils, type);
   }
+  /**
+   * Get the shape util that handles the given asset type.
+   * Returns the shape util whose {@link ShapeUtil.handledAssetTypes} includes
+   * the given asset type, or undefined if none matches.
+   *
+   * @param assetType - The asset type string.
+   * @public
+   */
+  getShapeUtilForAssetType(assetType) {
+    return (0, import_utils.getOwnProperty)(this._shapeUtilsByAssetType, assetType);
+  }
   /* ------------------- Binding Utils ------------------ */
   /**
    * A map of shape utility classes (TLShapeUtils) by shape type.
@@ -740,6 +908,42 @@ class Editor extends import_eventemitter3.default {
     (0, import_utils.assert)(bindingUtil, `No binding util found for type "${type}"`);
     return bindingUtil;
   }
+  /* ------------------- Asset Utils ------------------ */
+  /**
+   * A map of asset utility classes by asset type.
+   *
+   * @public
+   */
+  assetUtils = {};
+  getAssetUtil(arg) {
+    const type = typeof arg === "string" ? arg : arg.type;
+    const assetUtil = (0, import_utils.getOwnProperty)(this.assetUtils, type);
+    (0, import_utils.assert)(assetUtil, `No asset util found for type "${type}"`);
+    return assetUtil;
+  }
+  /**
+   * Returns true if the editor has an asset util for the given asset type.
+   *
+   * @public
+   */
+  hasAssetUtil(arg) {
+    const type = typeof arg === "string" ? arg : arg.type;
+    return (0, import_utils.hasOwnProperty)(this.assetUtils, type);
+  }
+  /**
+   * Get the asset util that accepts the given MIME type.
+   * Returns null if no registered asset util accepts the MIME type.
+   *
+   * @public
+   */
+  getAssetUtilForMimeType(mimeType) {
+    for (const util of Object.values(this.assetUtils)) {
+      if (util && util.acceptsMimeType(mimeType)) {
+        return util;
+      }
+    }
+    return null;
+  }
   /* --------------------- History -------------------- */
   /**
    * A manager for the editor's history.
@@ -761,6 +965,7 @@ class Editor extends import_eventemitter3.default {
     this._flushEventsForTick(0);
     this.complete();
     this.history.undo();
+    this.performance._notifyUndoRedo("undo", this.history.getNumUndos(), this.history.getNumRedos());
     return this;
   }
   canUndo() {
@@ -783,6 +988,7 @@ class Editor extends import_eventemitter3.default {
     this._flushEventsForTick(0);
     this.complete();
     this.history.redo();
+    this.performance._notifyUndoRedo("redo", this.history.getNumUndos(), this.history.getNumRedos());
     return this;
   }
   canRedo() {
@@ -3937,7 +4143,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);
@@ -3950,14 +4156,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;
@@ -4051,7 +4259,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();
   }
@@ -4164,6 +4372,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.
    *
@@ -7689,6 +7915,7 @@ class Editor extends import_eventemitter3.default {
               ),
               { immediate: true }
             );
+            this.performance._notifyCameraOperation("zooming");
             this.emit("event", info);
             return;
           }
@@ -7750,6 +7977,7 @@ class Editor extends import_eventemitter3.default {
                 immediate: true
               });
               this.maybeTrackPerformance("Zooming");
+              this.performance._notifyCameraOperation("zooming");
               this.root.handleEvent(info);
               this.emit("event", info);
               return;
@@ -7759,6 +7987,7 @@ class Editor extends import_eventemitter3.default {
                 immediate: true
               });
               this.maybeTrackPerformance("Panning");
+              this.performance._notifyCameraOperation("panning");
               this.root.handleEvent(info);
               this.emit("event", info);
               return;
@@ -7805,6 +8034,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();
@@ -7816,6 +8049,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();
@@ -7824,6 +8073,7 @@ class Editor extends import_eventemitter3.default {
                 immediate: true
               });
               this.maybeTrackPerformance("Panning");
+              this.performance._notifyCameraOperation("panning");
               return;
             }
             if (inputs.getIsPointing() && !inputs.getIsDragging() && import_Vec.Vec.Dist2(inputs.getOriginPagePoint(), inputs.getCurrentPagePoint()) * this.getZoomLevel() > (instanceState.isCoarsePointer ? this.options.coarseDragDistanceSquared : this.options.dragDistanceSquared) / cz) {
@@ -7838,6 +8088,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;
@@ -7855,11 +8111,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) {