@tldraw/editor 5.5.0-canary.6574aefc510c → 5.5.0-canary.66ce5ddff112

package/dist-cjs/index.d.ts

@@ -1274,6 +1274,9 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     readonly timers: {
+        cancelAnimationFrame: (id: number | undefined) => void;
+        clearInterval: (id: number | undefined) => void;
+        clearTimeout: (id: number | undefined) => void;
         dispose: () => void;
         requestAnimationFrame: (callback: FrameRequestCallback) => number;
         setInterval: (handler: TimerHandler, timeout?: number, ...args: any[]) => number;
@@ -4576,6 +4579,8 @@ export declare const EditorContext: React_3.Context<Editor | null>;
  * - Reaction (`react(...)` from `@tldraw/state`): `this.register(react(...))`
  * - DOM listener: `this.register(() => el.removeEventListener(...))`
  * - Other resource (cache, index, child manager): `this.register(() => x.dispose())`
+ * - Resource held only part of the time (a listener attached while subscribers exist):
+ *   `this.register(...)` on attach and `this.unregister(...)` on detach, see `PerformanceManager`
  *
  * For timeouts, intervals, and animation frames prefer `editor.timers` (context-grouped
  * and auto-disposed) over raw `setTimeout`. For cleanup on the editor itself rather than a
@@ -4595,11 +4600,18 @@ export declare abstract class EditorManager {
      * make a resource "see itself out". Returns the same function for convenience.
      */
     protected register(dispose: () => void): () => void;
+    /**
+     * Run a registered teardown now instead of at `dispose()`. A teardown that is no longer
+     * registered (already run by `dispose()`, or never registered) is skipped, so nothing is
+     * torn down twice.
+     */
+    protected unregister(dispose: () => void): void;
     /**
      * Subscribe to an editor bus event and register the matching unsubscribe, so the listener
-     * is removed automatically on `dispose()`.
+     * is removed automatically on `dispose()`. Returns that unsubscribe, for passing to
+     * {@link EditorManager.unregister} to detach it before `dispose()`.
      */
-    protected addEditorEvent<E extends keyof TLEventMap>(event: E, fn: (...args: TLEventMap[E]) => void): void;
+    protected addEditorEvent<E extends keyof TLEventMap>(event: E, fn: (...args: TLEventMap[E]) => void): () => void;
     /* Excluded from this release type: dispose */
 }
 
@@ -5987,17 +5999,11 @@ export declare class PerformanceApiAdapter {
  *
  * @public
  */
-export declare class PerformanceManager {
+export declare class PerformanceManager extends EditorManager {
     /* Excluded from this release type: emitter */
-    private editor;
     private activeInteraction;
     private activeCamera;
-    private frameCleanup;
-    private shapeCreatedCleanup;
-    private shapeEditedCleanup;
-    private shapeDeletedCleanup;
-    private loafObserver;
-    constructor(editor: Editor);
+    private readonly lazyCleanups;
     /**
      * Subscribe to a performance event. Returns an unsubscribe function.
      *
@@ -6031,11 +6037,11 @@ export declare class PerformanceManager {
     private _onShapesEdited;
     private _onShapesDeleted;
     private _startLoafObserver;
-    private _stopLoafObserver;
     private _needsFrameListener;
     private _needsLoafObserver;
     private _maybeAttachLazyListeners;
     private _maybeDetachLazyListeners;
+    private _detachLazy;
 }
 
 /**
@@ -9793,6 +9799,11 @@ export declare interface TLUrlExternalAsset {
 export declare interface TLUrlExternalContent extends TLBaseExternalContent {
     type: 'url';
     url: string;
+    /**
+     * A shape to set the url on, instead of creating a bookmark or an embed. The shape must have a
+     * `url` prop; the clipboard sets this when a link is pasted with one such shape selected.
+     */
+    shapeId?: TLShapeId;
 }
 
 /**

package/dist-cjs/index.js

@@ -392,7 +392,7 @@ var import_uniq = require("./lib/utils/uniq");
 var import_defaultThemes2 = require("./lib/editor/managers/ThemeManager/defaultThemes");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/editor",
-  "5.5.0-canary.6574aefc510c",
+  "5.5.0-canary.66ce5ddff112",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

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

@@ -1408,7 +1408,7 @@ class Editor extends import_eventemitter3.default {
   updateInstanceState(partial, historyOptions) {
     this._updateInstanceState(partial, { history: "ignore", ...historyOptions });
     if (partial.isChangingStyle !== void 0) {
-      clearTimeout(this._isChangingStyleTimeout);
+      this.timers.clearTimeout(this._isChangingStyleTimeout);
       if (partial.isChangingStyle === true) {
         this._isChangingStyleTimeout = this.timers.setTimeout(() => {
           this._updateInstanceState({ isChangingStyle: false }, { history: "ignore" });
@@ -3657,7 +3657,9 @@ class Editor extends import_eventemitter3.default {
     const id = typeof page === "string" ? page : page.id;
     const freshPage = this.getPage(id);
     if (!freshPage) return this;
-    const prevCamera = { ...this.getCamera() };
+    const prevCamera = {
+      ...this.store.get(import_tlschema.CameraRecordType.createId(freshPage.id)) ?? this.getCamera()
+    };
     const content = this.getContentFromCurrentPage(this.getSortedChildIdsForParent(freshPage.id));
     this.run(() => {
       const pages = this.getPages();
@@ -3666,7 +3668,7 @@ class Editor extends import_eventemitter3.default {
       this.setCurrentPage(createId);
       this.setCamera(prevCamera);
       if (content) {
-        return this.putContentOntoCurrentPage(content);
+        return this.putContentOntoCurrentPage(content, { preservePosition: true });
       }
     });
     return this;
@@ -6030,11 +6032,20 @@ class Editor extends import_eventemitter3.default {
       initialShape: options.initialShape,
       initialBounds: options.initialBounds,
       isAspectRatioLocked: options.isAspectRatioLocked,
-      initialPageTransform: options.initialPageTransform
+      initialPageTransform: options.initialPageTransform,
+      dragHandle: options.dragHandle,
+      mode: options.mode,
+      // this is one frame of the same resize, not a new one, so don't fire start/end again
+      skipStartAndEndCallbacks: options.skipStartAndEndCallbacks
     });
     if (Math.sign(scale.x) * Math.sign(scale.y) < 0) {
       const parentRotation = this.getShapeParentTransform(id).rotation();
-      const rotation = -options.initialShape.rotation - 2 * parentRotation;
+      const parentDelta = (0, import_utils2.shortAngleDist)(
+        import_Mat.Mat.Cast(options.initialPageTransform).rotation() - options.initialShape.rotation,
+        parentRotation
+      );
+      const initialParentRotation = parentRotation - parentDelta;
+      const rotation = 2 * options.scaleAxisRotation - options.initialShape.rotation - 2 * initialParentRotation - parentDelta;
       this.updateShapes([{ id, type, rotation }]);
     }
     const preScaleShapePageCenter = import_Mat.Mat.applyToPoint(
@@ -7822,22 +7833,22 @@ class Editor extends import_eventemitter3.default {
     const releaseCtrl = this._ctrlKeyTimeout !== -1;
     const releaseMeta = this._metaKeyTimeout !== -1;
     if (releaseShift) {
-      clearTimeout(this._shiftKeyTimeout);
+      this.timers.clearTimeout(this._shiftKeyTimeout);
       this._shiftKeyTimeout = -1;
       this.inputs.setShiftKey(false);
     }
     if (releaseAlt) {
-      clearTimeout(this._altKeyTimeout);
+      this.timers.clearTimeout(this._altKeyTimeout);
       this._altKeyTimeout = -1;
       this.inputs.setAltKey(false);
     }
     if (releaseCtrl) {
-      clearTimeout(this._ctrlKeyTimeout);
+      this.timers.clearTimeout(this._ctrlKeyTimeout);
       this._ctrlKeyTimeout = -1;
       this.inputs.setCtrlKey(false);
     }
     if (releaseMeta) {
-      clearTimeout(this._metaKeyTimeout);
+      this.timers.clearTimeout(this._metaKeyTimeout);
       this._metaKeyTimeout = -1;
       this.inputs.setMetaKey(false);
     }
@@ -7951,28 +7962,28 @@ class Editor extends import_eventemitter3.default {
       return;
     }
     if (info.shiftKey) {
-      clearTimeout(this._shiftKeyTimeout);
+      this.timers.clearTimeout(this._shiftKeyTimeout);
       this._shiftKeyTimeout = -1;
       inputs.setShiftKey(true);
     } else if (!info.shiftKey && inputs.getShiftKey() && this._shiftKeyTimeout === -1) {
       this._shiftKeyTimeout = this.timers.setTimeout(this._releaseShiftKey, 150);
     }
     if (info.altKey) {
-      clearTimeout(this._altKeyTimeout);
+      this.timers.clearTimeout(this._altKeyTimeout);
       this._altKeyTimeout = -1;
       inputs.setAltKey(true);
     } else if (!info.altKey && inputs.getAltKey() && this._altKeyTimeout === -1) {
       this._altKeyTimeout = this.timers.setTimeout(this._releaseAltKey, 150);
     }
     if (info.ctrlKey) {
-      clearTimeout(this._ctrlKeyTimeout);
+      this.timers.clearTimeout(this._ctrlKeyTimeout);
       this._ctrlKeyTimeout = -1;
       inputs.setCtrlKey(true);
     } else if (!info.ctrlKey && inputs.getCtrlKey() && this._ctrlKeyTimeout === -1) {
       this._ctrlKeyTimeout = this.timers.setTimeout(this._releaseCtrlKey, 150);
     }
     if (info.metaKey && info.name !== "key_up") {
-      clearTimeout(this._metaKeyTimeout);
+      this.timers.clearTimeout(this._metaKeyTimeout);
       this._metaKeyTimeout = -1;
       inputs.setMetaKey(true);
     } else if (!info.metaKey && inputs.getMetaKey() && this._metaKeyTimeout === -1) {
@@ -7986,8 +7997,7 @@ class Editor extends import_eventemitter3.default {
     const cameraOptions = this._cameraOptions.__unsafe__getWithoutCapture();
     switch (type) {
       case "pinch": {
-        if (cameraOptions.isLocked) return;
-        clearTimeout(this._longPressTimeout);
+        this.timers.clearTimeout(this._longPressTimeout);
         this.inputs.updateFromEvent(info);
         switch (info.name) {
           case "pinch_start": {
@@ -8008,6 +8018,7 @@ class Editor extends import_eventemitter3.default {
           }
           case "pinch": {
             if (!inputs.getIsPinching()) return;
+            if (cameraOptions.isLocked) return;
             const {
               point: { z = 1 },
               delta: { x: dx, y: dy }
@@ -8063,7 +8074,7 @@ class Editor extends import_eventemitter3.default {
         const { panSpeed, zoomSpeed } = cameraOptions;
         let wheelBehavior = cameraOptions.wheelBehavior;
         const inputMode = this.user.getUserPreferences().inputMode;
-        if (inputMode !== null) {
+        if (inputMode !== null && wheelBehavior !== "none") {
           wheelBehavior = inputMode === "trackpad" ? "pan" : "zoom";
         }
         if (wheelBehavior !== "none") {
@@ -8115,12 +8126,12 @@ class Editor extends import_eventemitter3.default {
       }
       case "pointer": {
         if (inputs.getIsPinching()) return;
-        this.inputs.updateFromEvent(info);
         const { isPen } = info;
         const { isPenMode } = instanceState;
+        if (isPenMode && !isPen) return;
+        this.inputs.updateFromEvent(info);
         switch (info.name) {
           case "pointer_down": {
-            if (isPenMode && !isPen) return;
             this._releaseDebouncedModifiers();
             if (!this.inputs.getIsPanning()) {
               this._longPressTimeout = this.timers.setTimeout(() => {
@@ -8149,7 +8160,7 @@ class Editor extends import_eventemitter3.default {
               this.updateInstanceState({ isPenMode: true });
               this.interrupt();
             }
-            if (info.button === import_constants.STYLUS_ERASER_BUTTON) {
+            if (info.button === import_constants.STYLUS_ERASER_BUTTON && this.getStateDescendant("eraser")) {
               this._restoreToolId = this.getCurrentToolId();
               this.complete();
               this.setCurrentTool("eraser");
@@ -8158,10 +8169,10 @@ class Editor extends import_eventemitter3.default {
                 this._prevCursor = this.getInstanceState().cursor.type;
               }
               this.inputs.setIsPanning(true);
-              clearTimeout(this._longPressTimeout);
+              this.timers.clearTimeout(this._longPressTimeout);
             } else if (info.button === import_constants.RIGHT_MOUSE_BUTTON && this.options.rightClickPanning) {
               this.inputs.setIsRightPointing(true);
-              clearTimeout(this._longPressTimeout);
+              this.timers.clearTimeout(this._longPressTimeout);
               return this;
             }
             if (this.inputs.getIsPanning()) {
@@ -8172,7 +8183,6 @@ class Editor extends import_eventemitter3.default {
             break;
           }
           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();
@@ -8203,16 +8213,15 @@ class Editor extends import_eventemitter3.default {
             }
             if (inputs.getIsPointing() && !inputs.getIsDragging() && import_Vec.Vec.Dist2(inputs.getOriginPagePoint(), inputs.getCurrentPagePoint()) * this.getZoomLevel() > (instanceState.isCoarsePointer ? this.options.coarseDragDistanceSquared : this.options.dragDistanceSquared) / cz) {
               inputs.setIsDragging(true);
-              clearTimeout(this._longPressTimeout);
+              this.timers.clearTimeout(this._longPressTimeout);
             }
             break;
           }
           case "pointer_up": {
             inputs.setIsDragging(false);
             inputs.setIsPointing(false);
-            clearTimeout(this._longPressTimeout);
+            this.timers.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 = [];
@@ -8268,7 +8277,7 @@ class Editor extends import_eventemitter3.default {
                 });
               }
             } else {
-              if (info.button === import_constants.STYLUS_ERASER_BUTTON) {
+              if (info.button === import_constants.STYLUS_ERASER_BUTTON && this.getStateDescendant("eraser")) {
                 this.complete();
                 this.setCurrentTool(this._restoreToolId);
               }
@@ -8295,7 +8304,7 @@ class Editor extends import_eventemitter3.default {
                 }
                 this.inputs.setIsPanning(true);
                 this.inputs.setIsSpacebarPanning(true);
-                clearTimeout(this._longPressTimeout);
+                this.timers.clearTimeout(this._longPressTimeout);
                 this.setCursor({
                   type: this.inputs.getIsPointing() ? "grabbing" : "grab",
                   rotation: 0
@@ -8321,7 +8330,7 @@ class Editor extends import_eventemitter3.default {
                     break;
                   }
                 }
-                if (offset) {
+                if (offset && !cameraOptions.isLocked) {
                   const bounds = this.getViewportPageBounds();
                   const next = bounds.clone().translate(offset.mulV({ x: bounds.w, y: bounds.h }));
                   this._animateToViewport(next, { animation: { duration: 320 } });
@@ -8361,7 +8370,7 @@ class Editor extends import_eventemitter3.default {
         this.setCurrentTool("select");
       }
       const { isPenMode } = this.store.unsafeGetWithoutCapture(import_tlschema.TLINSTANCE_ID);
-      if (info.isPen === isPenMode) {
+      if (!isPenMode || info.isPen) {
         const clickInfo = this._clickManager.handlePointerEvent(info);
         if (info.name !== clickInfo.name) {
           this.root.handleEvent(info);
@@ -8383,7 +8392,7 @@ class Editor extends import_eventemitter3.default {
   maybeTrackPerformance(name) {
     if (import_debug_flags.debugFlags.measurePerformance.get()) {
       if (this.performanceTracker.isStarted()) {
-        clearTimeout(this.performanceTrackerTimeout);
+        this.timers.clearTimeout(this.performanceTrackerTimeout);
       } else {
         this.performanceTracker.start(name);
       }