@tldraw/editor 5.3.2 → 5.4.0-canary.042da660fa66

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

@@ -83,6 +83,7 @@ import {
 import { getOwnerWindow } from "../exports/domUtils.mjs";
 import { exportToSvg } from "../exports/exportToSvg.mjs";
 import { getSvgAsImageWithOptions, trimSvgToContent } from "../exports/getSvgAsImage.mjs";
+import { registerMountedEditor, unregisterMountedEditor } from "../globals/editors.mjs";
 import { tlmenus } from "../globals/menus.mjs";
 import { tltime } from "../globals/time.mjs";
 import { defaultTldrawOptions } from "../options.mjs";
@@ -604,9 +605,11 @@ class Editor extends EventEmitter {
     this.on("tick", this._flushEventsForTick);
     this.on("mount", () => {
       this._isMounted.set(true);
+      registerMountedEditor(this);
     });
     this.on("unmount", () => {
       this._isMounted.set(false);
+      unregisterMountedEditor(this);
     });
     this.timers.requestAnimationFrame(() => {
       this._tickManager.start();
@@ -848,6 +851,7 @@ class Editor extends EventEmitter {
     if (this._isMounted.get()) {
       this.emit("unmount");
     }
+    unregisterMountedEditor(this);
     this.stopCameraAnimation();
     if (this.getInstanceState().followingUserId) {
       this.stopFollowingUser();
@@ -4339,17 +4343,16 @@ class Editor extends EventEmitter {
     let inMarginClosestToEdgeHit = null;
     const searchMargin = Math.max(innerMargin, outerMargin, this.getHitTestMargin());
     const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, searchMargin);
-    const shapesToCheck = (opts.renderingOnly ? this.getCurrentPageRenderingShapesSorted() : this.getCurrentPageShapesSorted()).filter((shape) => {
-      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);
-      if (pageMask && !pointInPolygon(point, pageMask)) return false;
-      if (filter && !filter(shape)) return false;
-      return true;
-    });
+    const shapesToCheck = opts.renderingOnly ? this.getCurrentPageRenderingShapesSorted() : this.getCurrentPageShapesSorted();
     for (let i = shapesToCheck.length - 1; i >= 0; i--) {
       const shape = shapesToCheck[i];
+      if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) continue;
+      if (shape.isLocked && !hitLocked || this.isShapeHidden(shape) || this.isShapeOfType(shape, "group")) {
+        continue;
+      }
+      const pageMask = this.getShapeMask(shape);
+      if (pageMask && !pointInPolygon(point, pageMask)) continue;
+      if (filter && !filter(shape)) continue;
       const geometry = this.getShapeGeometry(shape);
       const isGroup = geometry instanceof Group2d;
       const pointInShapeSpace = this.getPointInShapeSpace(shape, point);
@@ -4454,11 +4457,15 @@ class Editor extends EventEmitter {
   getShapesAtPoint(point, opts = {}) {
     const margin = opts.margin ?? 0;
     const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, margin);
-    return this.getCurrentPageShapesSorted().filter((shape) => {
-      if (this.isShapeHidden(shape)) return false;
-      if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) return false;
-      return this.isPointInShape(shape, point, opts);
-    }).reverse();
+    const sorted = this.getCurrentPageShapesSorted();
+    const result = [];
+    for (let i = sorted.length - 1; i >= 0; i--) {
+      const shape = sorted[i];
+      if (this.isShapeHidden(shape)) continue;
+      if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) continue;
+      if (this.isPointInShape(shape, point, opts)) result.push(shape);
+    }
+    return result;
   }
   /**
    * Get shape IDs within the given bounds.
@@ -5754,6 +5761,9 @@ class Editor extends EventEmitter {
    */
   alignShapes(shapes, operation) {
     if (this.getIsReadonly()) return this;
+    if (operation === "center") {
+      return this.alignShapes(shapes, "center-horizontal").alignShapes(shapes, "center-vertical");
+    }
     const { clusters: shapeClustersToAlign, allBounds } = this.getShapeClusters(shapes, "align");
     if (shapeClustersToAlign.length < 2) return this;
     const commonBounds = Box.Common(allBounds);
@@ -7899,7 +7909,8 @@ class Editor extends EventEmitter {
   _prevCursor = "default";
   /** @internal */
   _shiftKeyTimeout = -1;
-  _setShiftKeyTimeout() {
+  _releaseShiftKey() {
+    this._shiftKeyTimeout = -1;
     this.inputs.setShiftKey(false);
     this.dispatch({
       type: "keyboard",
@@ -7915,7 +7926,8 @@ class Editor extends EventEmitter {
   }
   /** @internal */
   _altKeyTimeout = -1;
-  _setAltKeyTimeout() {
+  _releaseAltKey() {
+    this._altKeyTimeout = -1;
     this.inputs.setAltKey(false);
     this.dispatch({
       type: "keyboard",
@@ -7931,7 +7943,8 @@ class Editor extends EventEmitter {
   }
   /** @internal */
   _ctrlKeyTimeout = -1;
-  _setCtrlKeyTimeout() {
+  _releaseCtrlKey() {
+    this._ctrlKeyTimeout = -1;
     this.inputs.setCtrlKey(false);
     this.dispatch({
       type: "keyboard",
@@ -7947,7 +7960,8 @@ class Editor extends EventEmitter {
   }
   /** @internal */
   _metaKeyTimeout = -1;
-  _setMetaKeyTimeout() {
+  _releaseMetaKey() {
+    this._metaKeyTimeout = -1;
     this.inputs.setMetaKey(false);
     this.dispatch({
       type: "keyboard",
@@ -7961,6 +7975,51 @@ class Editor extends EventEmitter {
       code: "MetaLeft"
     });
   }
+  /**
+   * Flush any modifier still sitting in its 150ms release-debounce window, so a new
+   * interaction (a pointer down) starts with correct modifier state instead of a
+   * just-released key still being counted as held. A pending timer is exactly
+   * "released but still counted as held"; a genuinely-held modifier has no timer
+   * (-1) and is left alone.
+   *
+   * Each modifier is released through the same path its timer would have taken
+   * (`_releaseShiftKey` and friends), which dispatches the synthetic `key_up` so
+   * stale codes (e.g. `ShiftLeft`) leave `inputs.keys` and tool `onKeyUp` handlers run.
+   * We clear every pending modifier atom and timer *first*, then dispatch: a synthetic
+   * `key_up` reports all currently-held modifiers, so releasing them one at a time
+   * would make each event re-confirm the not-yet-released ones and cancel their flush.
+   * @internal
+   */
+  _releaseDebouncedModifiers() {
+    const releaseShift = this._shiftKeyTimeout !== -1;
+    const releaseAlt = this._altKeyTimeout !== -1;
+    const releaseCtrl = this._ctrlKeyTimeout !== -1;
+    const releaseMeta = this._metaKeyTimeout !== -1;
+    if (releaseShift) {
+      clearTimeout(this._shiftKeyTimeout);
+      this._shiftKeyTimeout = -1;
+      this.inputs.setShiftKey(false);
+    }
+    if (releaseAlt) {
+      clearTimeout(this._altKeyTimeout);
+      this._altKeyTimeout = -1;
+      this.inputs.setAltKey(false);
+    }
+    if (releaseCtrl) {
+      clearTimeout(this._ctrlKeyTimeout);
+      this._ctrlKeyTimeout = -1;
+      this.inputs.setCtrlKey(false);
+    }
+    if (releaseMeta) {
+      clearTimeout(this._metaKeyTimeout);
+      this._metaKeyTimeout = -1;
+      this.inputs.setMetaKey(false);
+    }
+    if (releaseShift) this._releaseShiftKey();
+    if (releaseAlt) this._releaseAltKey();
+    if (releaseCtrl) this._releaseCtrlKey();
+    if (releaseMeta) this._releaseMetaKey();
+  }
   /** @internal */
   _restoreToolId = "select";
   /** @internal */
@@ -8070,28 +8129,28 @@ class Editor extends EventEmitter {
       this._shiftKeyTimeout = -1;
       inputs.setShiftKey(true);
     } else if (!info.shiftKey && inputs.getShiftKey() && this._shiftKeyTimeout === -1) {
-      this._shiftKeyTimeout = this.timers.setTimeout(this._setShiftKeyTimeout, 150);
+      this._shiftKeyTimeout = this.timers.setTimeout(this._releaseShiftKey, 150);
     }
     if (info.altKey) {
       clearTimeout(this._altKeyTimeout);
       this._altKeyTimeout = -1;
       inputs.setAltKey(true);
     } else if (!info.altKey && inputs.getAltKey() && this._altKeyTimeout === -1) {
-      this._altKeyTimeout = this.timers.setTimeout(this._setAltKeyTimeout, 150);
+      this._altKeyTimeout = this.timers.setTimeout(this._releaseAltKey, 150);
     }
     if (info.ctrlKey) {
       clearTimeout(this._ctrlKeyTimeout);
       this._ctrlKeyTimeout = -1;
       inputs.setCtrlKey(true);
     } else if (!info.ctrlKey && inputs.getCtrlKey() && this._ctrlKeyTimeout === -1) {
-      this._ctrlKeyTimeout = this.timers.setTimeout(this._setCtrlKeyTimeout, 150);
+      this._ctrlKeyTimeout = this.timers.setTimeout(this._releaseCtrlKey, 150);
     }
     if (info.metaKey && info.name !== "key_up") {
       clearTimeout(this._metaKeyTimeout);
       this._metaKeyTimeout = -1;
       inputs.setMetaKey(true);
     } else if (!info.metaKey && inputs.getMetaKey() && this._metaKeyTimeout === -1) {
-      this._metaKeyTimeout = this.timers.setTimeout(this._setMetaKeyTimeout, 150);
+      this._metaKeyTimeout = this.timers.setTimeout(this._releaseMetaKey, 150);
     }
     if (!inputs.getIsPointing()) {
       inputs.setIsDragging(false);
@@ -8236,6 +8295,7 @@ class Editor extends EventEmitter {
         switch (info.name) {
           case "pointer_down": {
             if (isPenMode && !isPen) return;
+            this._releaseDebouncedModifiers();
             if (!this.inputs.getIsPanning()) {
               this._longPressTimeout = this.timers.setTimeout(() => {
                 const vsb = this.getViewportScreenBounds();
@@ -8718,16 +8778,16 @@ __decorateClass([
 ], Editor.prototype, "getIsReadonly", 1);
 __decorateClass([
   bind
-], Editor.prototype, "_setShiftKeyTimeout", 1);
+], Editor.prototype, "_releaseShiftKey", 1);
 __decorateClass([
   bind
-], Editor.prototype, "_setAltKeyTimeout", 1);
+], Editor.prototype, "_releaseAltKey", 1);
 __decorateClass([
   bind
-], Editor.prototype, "_setCtrlKeyTimeout", 1);
+], Editor.prototype, "_releaseCtrlKey", 1);
 __decorateClass([
   bind
-], Editor.prototype, "_setMetaKeyTimeout", 1);
+], Editor.prototype, "_releaseMetaKey", 1);
 function alertMaxShapes(editor, pageId = editor.getCurrentPageId()) {
   const name = editor.getPage(pageId).name;
   editor.emit("max-shapes", { name, pageId, count: editor.options.maxShapesPerPage });