@tldraw/editor 3.16.0-canary.e5e61b17cef3 → 3.16.0-canary.e618c2fbc95d

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

@@ -404,6 +404,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     __publicField(this, "performanceTracker");
     /** @internal */
     __publicField(this, "performanceTrackerTimeout", -1);
+    /** @internal */
+    __publicField(this, "handledEvents", /* @__PURE__ */ new WeakSet());
     __publicField(this, "_pendingEventsForNextTick", []);
     this._getShapeVisibility = getShapeVisibility;
     this.options = { ...import_options.defaultTldrawOptions, ...options };
@@ -431,6 +433,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     }
     this.root = new NewRoot(this);
     this.root.children = {};
+    this.markEventAsHandled = this.markEventAsHandled.bind(this);
     const allShapeUtils = (0, import_defaultShapes.checkShapesAndAddCore)(shapeUtils);
     const _shapeUtils = {};
     const _styleProps = {};
@@ -6438,16 +6441,20 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
    * Handle external content, such as files, urls, embeds, or plain text which has been put into the app, for example by pasting external text or dropping external images onto canvas.
    *
    * @param info - Info about the external content.
+   * @param opts - Options for handling external content, including force flag to bypass readonly checks.
    */
-  async putExternalContent(info) {
+  async putExternalContent(info, opts = {}) {
+    if (!opts.force && this.getIsReadonly()) return;
     return this.externalContentHandlers[info.type]?.(info);
   }
   /**
    * Handle replacing external content.
    *
    * @param info - Info about the external content.
+   * @param opts - Options for handling external content, including force flag to bypass readonly checks.
    */
-  async replaceExternalContent(info) {
+  async replaceExternalContent(info, opts = {}) {
+    if (!opts.force && this.getIsReadonly()) return;
     return this.externalContentHandlers[info.type]?.(info);
   }
   /**
@@ -7367,6 +7374,32 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
       code: "MetaLeft"
     });
   }
+  /**
+   * In tldraw, events are sometimes handled by multiple components. For example, the shapes might
+   * have events, but the canvas handles events too. The way that the canvas handles events can
+   * interfere with the with the shapes event handlers - for example, it calls `.preventDefault()`
+   * on `pointerDown`, which also prevents `click` events from firing on the shapes.
+   *
+   * You can use `.stopPropagation()` to prevent the event from propagating to the rest of the
+   * DOM, but that can impact non-tldraw event handlers set up elsewhere. By using
+   * `markEventAsHandled`, you'll stop other parts of tldraw from handling the event without
+   * impacting other, non-tldraw event handlers. See also {@link Editor.wasEventAlreadyHandled}.
+   *
+   * @public
+   */
+  markEventAsHandled(e) {
+    const nativeEvent = "nativeEvent" in e ? e.nativeEvent : e;
+    this.handledEvents.add(nativeEvent);
+  }
+  /**
+   * Checks if an event has already been handled. See {@link Editor.markEventAsHandled}.
+   *
+   * @public
+   */
+  wasEventAlreadyHandled(e) {
+    const nativeEvent = "nativeEvent" in e ? e.nativeEvent : e;
+    return this.handledEvents.has(nativeEvent);
+  }
   /**
    * Dispatch an event to the editor.
    *
@@ -7522,7 +7555,12 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
       case "wheel": {
         if (cameraOptions.isLocked) return;
         this._updateInputsFromEvent(info);
-        const { panSpeed, zoomSpeed, wheelBehavior } = cameraOptions;
+        const { panSpeed, zoomSpeed } = cameraOptions;
+        let wheelBehavior = cameraOptions.wheelBehavior;
+        const inputMode = this.user.getUserPreferences().inputMode;
+        if (inputMode !== null) {
+          wheelBehavior = inputMode === "trackpad" ? "pan" : "zoom";
+        }
         if (wheelBehavior !== "none") {
           this.stopCameraAnimation();
           if (instanceState.followingUserId) {