@tldraw/editor 3.12.0-canary.e333011facbe → 3.12.0-canary.f5c40cbda19f

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

@@ -46,7 +46,7 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var __setMetaKeyTimeout_dec, __setCtrlKeyTimeout_dec, __setAltKeyTimeout_dec, __setShiftKeyTimeout_dec, _getIsReadonly_dec, _getIsFocused_dec, _getSharedOpacity_dec, _getSharedStyles_dec, __getSelectionSharedStyles_dec, __getBindingsIndexCache_dec, _getCurrentPageRenderingShapesSorted_dec, _getCurrentPageShapesSorted_dec, _getCurrentPageShapes_dec, _getCurrentPageBounds_dec, _getCulledShapes_dec, __notVisibleShapes_dec, __getShapeMaskedPageBoundsCache_dec, __getShapeMaskCache_dec, __getShapeClipPathCache_dec, __getShapePageBoundsCache_dec, __getShapePageTransformCache_dec, __getShapeHandlesCache_dec, __getAllAssetsQuery_dec, _getCurrentPageShapeIdsSorted_dec, _getCurrentPageId_dec, _getPages_dec, __getAllPagesQuery_dec, _getRenderingShapes_dec, _getCollaboratorsOnCurrentPage_dec, _getCollaborators_dec, __getCollaboratorsQuery_dec, _getViewportPageBounds_dec, _getViewportScreenCenter_dec, _getViewportScreenBounds_dec, _getZoomLevel_dec, _getCameraForFollowing_dec, _getViewportPageBoundsForFollowing_dec, _getCamera_dec, __unsafe_getCameraId_dec, _getErasingShapes_dec, _getErasingShapeIds_dec, _getHintingShape_dec, _getHintingShapeIds_dec, _getHoveredShape_dec, _getHoveredShapeId_dec, _getRichTextEditor_dec, _getEditingShape_dec, _getEditingShapeId_dec, _getFocusedGroup_dec, _getFocusedGroupId_dec, _getSelectionRotatedScreenBounds_dec, _getSelectionRotatedPageBounds_dec, _getSelectionRotation_dec, _getSelectionPageBounds_dec, _getOnlySelectedShape_dec, _getOnlySelectedShapeId_dec, _getSelectedShapes_dec, _getSelectedShapeIds_dec, __getCurrentPageStateId_dec, _getCurrentPageState_dec, __getPageStatesQuery_dec, _getPageStates_dec, _getIsMenuOpen_dec, _getOpenMenus_dec, _getInstanceState_dec, _getDocumentSettings_dec, _getCurrentToolId_dec, _getCurrentTool_dec, _getPath_dec, _getCanRedo_dec, _getCanUndo_dec, _getIsShapeHiddenCache_dec, _a, _init;
+var __setMetaKeyTimeout_dec, __setCtrlKeyTimeout_dec, __setAltKeyTimeout_dec, __setShiftKeyTimeout_dec, _getIsReadonly_dec, _getIsFocused_dec, _getSharedOpacity_dec, _getSharedStyles_dec, __getSelectionSharedStyles_dec, __getBindingsIndexCache_dec, _getCurrentPageRenderingShapesSorted_dec, _getCurrentPageShapesSorted_dec, _getCurrentPageShapes_dec, _getCurrentPageBounds_dec, _getCulledShapes_dec, __notVisibleShapes_dec, __getShapeMaskedPageBoundsCache_dec, __getShapeMaskCache_dec, __getShapeClipPathCache_dec, __getShapePageBoundsCache_dec, __getShapePageTransformCache_dec, __getShapeHandlesCache_dec, __getAllAssetsQuery_dec, _getCurrentPageShapeIdsSorted_dec, _getCurrentPageId_dec, _getPages_dec, __getAllPagesQuery_dec, _getRenderingShapes_dec, _getCollaboratorsOnCurrentPage_dec, _getCollaborators_dec, __getCollaboratorsQuery_dec, _getViewportPageBounds_dec, _getViewportScreenCenter_dec, _getViewportScreenBounds_dec, _getZoomLevel_dec, _getCameraForFollowing_dec, _getViewportPageBoundsForFollowing_dec, _getCamera_dec, __unsafe_getCameraId_dec, _getErasingShapes_dec, _getErasingShapeIds_dec, _getHintingShape_dec, _getHintingShapeIds_dec, _getHoveredShape_dec, _getHoveredShapeId_dec, _getRichTextEditor_dec, _getEditingShape_dec, _getEditingShapeId_dec, _getFocusedGroup_dec, _getFocusedGroupId_dec, _getSelectionRotatedScreenBounds_dec, _getSelectionRotatedPageBounds_dec, _getSelectionRotation_dec, _getSelectionPageBounds_dec, _getOnlySelectedShape_dec, _getOnlySelectedShapeId_dec, _getCurrentPageShapesInReadingOrder_dec, _getSelectedShapes_dec, _getSelectedShapeIds_dec, __getCurrentPageStateId_dec, _getCurrentPageState_dec, __getPageStatesQuery_dec, _getPageStates_dec, _getIsMenuOpen_dec, _getOpenMenus_dec, _getInstanceState_dec, _getDocumentSettings_dec, _getCurrentToolId_dec, _getCurrentTool_dec, _getPath_dec, _getCanRedo_dec, _getCanUndo_dec, _getIsShapeHiddenCache_dec, _a, _init;
 import {
   EMPTY_ARRAY,
   atom,
@@ -94,6 +94,7 @@ import {
   last,
   lerp,
   maxBy,
+  minBy,
   sortById,
   sortByIndex,
   structuredClone,
@@ -156,7 +157,7 @@ import { TextManager } from "./managers/TextManager.mjs";
 import { TickManager } from "./managers/TickManager.mjs";
 import { UserPreferencesManager } from "./managers/UserPreferencesManager.mjs";
 import { RootState } from "./tools/RootState.mjs";
-class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed], _getCanUndo_dec = [computed], _getCanRedo_dec = [computed], _getPath_dec = [computed], _getCurrentTool_dec = [computed], _getCurrentToolId_dec = [computed], _getDocumentSettings_dec = [computed], _getInstanceState_dec = [computed], _getOpenMenus_dec = [computed], _getIsMenuOpen_dec = [computed], _getPageStates_dec = [computed], __getPageStatesQuery_dec = [computed], _getCurrentPageState_dec = [computed], __getCurrentPageStateId_dec = [computed], _getSelectedShapeIds_dec = [computed], _getSelectedShapes_dec = [computed], _getOnlySelectedShapeId_dec = [computed], _getOnlySelectedShape_dec = [computed], _getSelectionPageBounds_dec = [computed], _getSelectionRotation_dec = [computed], _getSelectionRotatedPageBounds_dec = [computed], _getSelectionRotatedScreenBounds_dec = [computed], _getFocusedGroupId_dec = [computed], _getFocusedGroup_dec = [computed], _getEditingShapeId_dec = [computed], _getEditingShape_dec = [computed], _getRichTextEditor_dec = [computed], _getHoveredShapeId_dec = [computed], _getHoveredShape_dec = [computed], _getHintingShapeIds_dec = [computed], _getHintingShape_dec = [computed], _getErasingShapeIds_dec = [computed], _getErasingShapes_dec = [computed], __unsafe_getCameraId_dec = [computed], _getCamera_dec = [computed], _getViewportPageBoundsForFollowing_dec = [computed], _getCameraForFollowing_dec = [computed], _getZoomLevel_dec = [computed], _getViewportScreenBounds_dec = [computed], _getViewportScreenCenter_dec = [computed], _getViewportPageBounds_dec = [computed], __getCollaboratorsQuery_dec = [computed], _getCollaborators_dec = [computed], _getCollaboratorsOnCurrentPage_dec = [computed], _getRenderingShapes_dec = [computed], __getAllPagesQuery_dec = [computed], _getPages_dec = [computed], _getCurrentPageId_dec = [computed], _getCurrentPageShapeIdsSorted_dec = [computed], __getAllAssetsQuery_dec = [computed], __getShapeHandlesCache_dec = [computed], __getShapePageTransformCache_dec = [computed], __getShapePageBoundsCache_dec = [computed], __getShapeClipPathCache_dec = [computed], __getShapeMaskCache_dec = [computed], __getShapeMaskedPageBoundsCache_dec = [computed], __notVisibleShapes_dec = [computed], _getCulledShapes_dec = [computed], _getCurrentPageBounds_dec = [computed], _getCurrentPageShapes_dec = [computed], _getCurrentPageShapesSorted_dec = [computed], _getCurrentPageRenderingShapesSorted_dec = [computed], __getBindingsIndexCache_dec = [computed], __getSelectionSharedStyles_dec = [computed], _getSharedStyles_dec = [computed({ isEqual: (a, b) => a.equals(b) })], _getSharedOpacity_dec = [computed], _getIsFocused_dec = [computed], _getIsReadonly_dec = [computed], __setShiftKeyTimeout_dec = [bind], __setAltKeyTimeout_dec = [bind], __setCtrlKeyTimeout_dec = [bind], __setMetaKeyTimeout_dec = [bind], _a) {
+class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed], _getCanUndo_dec = [computed], _getCanRedo_dec = [computed], _getPath_dec = [computed], _getCurrentTool_dec = [computed], _getCurrentToolId_dec = [computed], _getDocumentSettings_dec = [computed], _getInstanceState_dec = [computed], _getOpenMenus_dec = [computed], _getIsMenuOpen_dec = [computed], _getPageStates_dec = [computed], __getPageStatesQuery_dec = [computed], _getCurrentPageState_dec = [computed], __getCurrentPageStateId_dec = [computed], _getSelectedShapeIds_dec = [computed], _getSelectedShapes_dec = [computed], _getCurrentPageShapesInReadingOrder_dec = [computed], _getOnlySelectedShapeId_dec = [computed], _getOnlySelectedShape_dec = [computed], _getSelectionPageBounds_dec = [computed], _getSelectionRotation_dec = [computed], _getSelectionRotatedPageBounds_dec = [computed], _getSelectionRotatedScreenBounds_dec = [computed], _getFocusedGroupId_dec = [computed], _getFocusedGroup_dec = [computed], _getEditingShapeId_dec = [computed], _getEditingShape_dec = [computed], _getRichTextEditor_dec = [computed], _getHoveredShapeId_dec = [computed], _getHoveredShape_dec = [computed], _getHintingShapeIds_dec = [computed], _getHintingShape_dec = [computed], _getErasingShapeIds_dec = [computed], _getErasingShapes_dec = [computed], __unsafe_getCameraId_dec = [computed], _getCamera_dec = [computed], _getViewportPageBoundsForFollowing_dec = [computed], _getCameraForFollowing_dec = [computed], _getZoomLevel_dec = [computed], _getViewportScreenBounds_dec = [computed], _getViewportScreenCenter_dec = [computed], _getViewportPageBounds_dec = [computed], __getCollaboratorsQuery_dec = [computed], _getCollaborators_dec = [computed], _getCollaboratorsOnCurrentPage_dec = [computed], _getRenderingShapes_dec = [computed], __getAllPagesQuery_dec = [computed], _getPages_dec = [computed], _getCurrentPageId_dec = [computed], _getCurrentPageShapeIdsSorted_dec = [computed], __getAllAssetsQuery_dec = [computed], __getShapeHandlesCache_dec = [computed], __getShapePageTransformCache_dec = [computed], __getShapePageBoundsCache_dec = [computed], __getShapeClipPathCache_dec = [computed], __getShapeMaskCache_dec = [computed], __getShapeMaskedPageBoundsCache_dec = [computed], __notVisibleShapes_dec = [computed], _getCulledShapes_dec = [computed], _getCurrentPageBounds_dec = [computed], _getCurrentPageShapes_dec = [computed], _getCurrentPageShapesSorted_dec = [computed], _getCurrentPageRenderingShapesSorted_dec = [computed], __getBindingsIndexCache_dec = [computed], __getSelectionSharedStyles_dec = [computed], _getSharedStyles_dec = [computed({ isEqual: (a, b) => a.equals(b) })], _getSharedOpacity_dec = [computed], _getIsFocused_dec = [computed], _getIsReadonly_dec = [computed], __setShiftKeyTimeout_dec = [bind], __setAltKeyTimeout_dec = [bind], __setCtrlKeyTimeout_dec = [bind], __setMetaKeyTimeout_dec = [bind], _a) {
   constructor({
     store,
     user,
@@ -334,6 +335,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     __publicField(this, "_currentPageShapeIds");
     /* --------------------- Shapes --------------------- */
     __publicField(this, "_shapeGeometryCaches", {});
+    __publicField(this, "_shapePageGeometryCaches", {});
     // Parents and children
     /**
      * A cache of parents to children.
@@ -1473,6 +1475,131 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     this.setSelectedShapes(this._getUnlockedShapeIds(ids));
     return this;
   }
+  selectAdjacentShape(direction) {
+    const readingOrderShapes = this.getCurrentPageShapesInReadingOrder();
+    const selectedShapeIds = this.getSelectedShapeIds();
+    const currentShapeId = selectedShapeIds.length === 1 ? selectedShapeIds[0] : readingOrderShapes.find((shape2) => selectedShapeIds.includes(shape2.id))?.id;
+    let adjacentShapeId;
+    if (direction === "next" || direction === "prev") {
+      const shapeIds = readingOrderShapes.map((shape2) => shape2.id);
+      const currentIndex = currentShapeId ? shapeIds.indexOf(currentShapeId) : -1;
+      const adjacentIndex = (currentIndex + (direction === "next" ? 1 : -1) + shapeIds.length) % shapeIds.length;
+      adjacentShapeId = shapeIds[adjacentIndex];
+    } else {
+      if (!currentShapeId) return;
+      adjacentShapeId = this.getNearestAdjacentShape(currentShapeId, direction);
+    }
+    const shape = this.getShape(adjacentShapeId);
+    if (!shape) return;
+    this.setSelectedShapes([shape.id]);
+    this.zoomToSelectionIfOffscreen(256, {
+      animation: {
+        duration: this.options.animationMediumMs
+      },
+      inset: 0
+    });
+  }
+  getCurrentPageShapesInReadingOrder() {
+    const SHALLOW_ANGLE = 20;
+    const ROW_THRESHOLD = 100;
+    const shapes = this.getCurrentPageShapes();
+    const tabbableShapes = shapes.filter((shape) => this.getShapeUtil(shape).canTabTo(shape));
+    if (tabbableShapes.length <= 1) return tabbableShapes;
+    const shapesWithCenters = tabbableShapes.map((shape) => ({
+      shape,
+      center: this.getShapePageBounds(shape).center
+    }));
+    shapesWithCenters.sort((a, b) => a.center.y - b.center.y);
+    const rows = [];
+    for (const shapeWithCenter of shapesWithCenters) {
+      let rowIndex = -1;
+      for (let i = rows.length - 1; i >= 0; i--) {
+        const row = rows[i];
+        const lastShapeInRow = row[row.length - 1];
+        if (Math.abs(shapeWithCenter.center.y - lastShapeInRow.center.y) < ROW_THRESHOLD) {
+          rowIndex = i;
+          break;
+        }
+      }
+      if (rowIndex === -1) {
+        rows.push([shapeWithCenter]);
+      } else {
+        rows[rowIndex].push(shapeWithCenter);
+      }
+    }
+    for (const row of rows) {
+      row.sort((a, b) => a.center.x - b.center.x);
+    }
+    for (const row of rows) {
+      if (row.length <= 2) continue;
+      for (let i = 0; i < row.length - 2; i++) {
+        const currentShape = row[i];
+        const nextShape = row[i + 1];
+        const nextNextShape = row[i + 2];
+        const dist1 = Vec.Dist2(currentShape.center, nextShape.center);
+        const dist2 = Vec.Dist2(currentShape.center, nextNextShape.center);
+        if (dist2 < dist1 * 0.9) {
+          const angle = Math.abs(
+            Vec.Angle(currentShape.center, nextNextShape.center) * (180 / Math.PI)
+          );
+          if (angle <= SHALLOW_ANGLE) {
+            ;
+            [row[i + 1], row[i + 2]] = [row[i + 2], row[i + 1]];
+          }
+        }
+      }
+    }
+    return rows.flat().map((item) => item.shape);
+  }
+  /**
+   * Find the nearest adjacent shape in a specific direction.
+   *
+   * @public
+   */
+  getNearestAdjacentShape(currentShapeId, direction) {
+    const directionToAngle = { right: 0, left: 180, down: 90, up: 270 };
+    const currentShape = this.getShape(currentShapeId);
+    if (!currentShape) return currentShapeId;
+    const shapes = this.getCurrentPageShapes();
+    const tabbableShapes = shapes.filter(
+      (shape) => this.getShapeUtil(shape).canTabTo(shape) && shape.id !== currentShapeId
+    );
+    if (!tabbableShapes.length) return currentShapeId;
+    const currentCenter = this.getShapePageBounds(currentShape).center;
+    const shapesWithCenters = tabbableShapes.map((shape) => ({
+      shape,
+      center: this.getShapePageBounds(shape).center
+    }));
+    const shapesInDirection = shapesWithCenters.filter(({ center }) => {
+      const isRight = center.x > currentCenter.x;
+      const isDown = center.y > currentCenter.y;
+      const xDist = center.x - currentCenter.x;
+      const yDist = center.y - currentCenter.y;
+      const isInXDirection = Math.abs(yDist) < Math.abs(xDist) * 2;
+      const isInYDirection = Math.abs(xDist) < Math.abs(yDist) * 2;
+      if (direction === "left" || direction === "right") {
+        return isInXDirection && (direction === "right" ? isRight : !isRight);
+      }
+      if (direction === "up" || direction === "down") {
+        return isInYDirection && (direction === "down" ? isDown : !isDown);
+      }
+    });
+    if (shapesInDirection.length === 0) return currentShapeId;
+    const lowestScoringShape = minBy(shapesInDirection, ({ center }) => {
+      const distance = Vec.Dist2(currentCenter, center);
+      const dirProp = ["left", "right"].includes(direction) ? "x" : "y";
+      const directionalDistance = Math.abs(center[dirProp] - currentCenter[dirProp]);
+      const offProp = ["left", "right"].includes(direction) ? "y" : "x";
+      const offAxisDeviation = Math.abs(center[offProp] - currentCenter[offProp]);
+      const angle = Math.abs(Vec.Angle(currentCenter, center) * (180 / Math.PI));
+      const angleDeviation = Math.abs(angle - directionToAngle[direction]);
+      return distance * 1 + // Base distance
+      offAxisDeviation * 2 + // Heavy penalty for off-axis deviation
+      (distance - directionalDistance) * 1.5 + // Penalty for diagonal distance
+      angleDeviation * 0.5;
+    });
+    return lowestScoringShape.shape.id;
+  }
   /**
    * Clear the selection.
    *
@@ -2386,6 +2513,23 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     }
     return this;
   }
+  /**
+   * Zoom the camera to the current selection if offscreen.
+   *
+   * @public
+   */
+  zoomToSelectionIfOffscreen(padding = 16, opts) {
+    const selectionPageBounds = this.getSelectionPageBounds();
+    const viewportPageBounds = this.getViewportPageBounds();
+    if (selectionPageBounds && !viewportPageBounds.contains(selectionPageBounds)) {
+      const eb = selectionPageBounds.clone().expandBy(padding / this.getZoomLevel()).expand(viewportPageBounds);
+      const nextBounds = viewportPageBounds.clone().translate({
+        x: (eb.center.x - viewportPageBounds.center.x) * 2,
+        y: (eb.center.y - viewportPageBounds.center.y) * 2
+      });
+      this.zoomToBounds(nextBounds, opts);
+    }
+  }
   /**
    * Zoom the camera to fit a bounding box (in the current page space).
    *
@@ -3301,7 +3445,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     return await this.store.props.assets.upload(asset, file, abortSignal);
   }
   /**
-   * Get the geometry of a shape.
+   * Get the geometry of a shape in shape-space.
    *
    * @example
    * ```ts
@@ -3331,6 +3475,41 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
       typeof shape === "string" ? shape : shape.id
     );
   }
+  /**
+   * Get the geometry of a shape in page-space.
+   *
+   * @example
+   * ```ts
+   * editor.getShapePageGeometry(myShape)
+   * editor.getShapePageGeometry(myShapeId)
+   * editor.getShapePageGeometry(myShapeId, { context: "arrow" })
+   * ```
+   *
+   * @param shape - The shape (or shape id) to get the geometry for.
+   * @param opts - Additional options about the request for geometry. Passed to {@link ShapeUtil.getGeometry}.
+   *
+   * @public
+   */
+  getShapePageGeometry(shape, opts) {
+    const context = opts?.context ?? "none";
+    if (!this._shapePageGeometryCaches[context]) {
+      this._shapePageGeometryCaches[context] = this.store.createComputedCache(
+        "bounds",
+        (shape2) => {
+          const geometry = this.getShapeGeometry(shape2.id, opts);
+          const pageTransform = this.getShapePageTransform(shape2.id);
+          return geometry.transform(pageTransform);
+        },
+        {
+          // we only depend directly on the shape id, and changing geometry/transform will update us anyway
+          areRecordsEqual: () => true
+        }
+      );
+    }
+    return this._shapePageGeometryCaches[context].get(
+      typeof shape === "string" ? shape : shape.id
+    );
+  }
   _getShapeHandlesCache() {
     return this.store.createComputedCache("handles", (shape) => {
       return this.getShapeUtil(shape).getHandles?.(shape);
@@ -3418,12 +3597,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
   }
   _getShapePageBoundsCache() {
     return this.store.createComputedCache("pageBoundsCache", (shape) => {
-      const pageTransform = this._getShapePageTransformCache().get(shape.id);
-      if (!pageTransform) return new Box();
-      const result = Box.FromPoints(
-        Mat.applyToPoints(pageTransform, this.getShapeGeometry(shape).vertices)
-      );
-      return result;
+      return this.getShapePageGeometry(shape).bounds;
     });
   }
   /**
@@ -3483,7 +3657,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
       const pageMask = frameAncestors.map(
         (s) => (
           // Apply the frame transform to the frame outline to get the frame outline in the current page space
-          (this._getShapePageTransformCache().get(s.id).applyToPoints(this.getShapeGeometry(s).vertices))
+          (this.getShapePageGeometry(s.id).vertices)
         )
       ).reduce((acc, b) => {
         if (!(b && acc)) return void 0;
@@ -7560,6 +7734,7 @@ __decorateElement(_init, 1, "getCurrentPageState", _getCurrentPageState_dec, Edi
 __decorateElement(_init, 1, "_getCurrentPageStateId", __getCurrentPageStateId_dec, Editor);
 __decorateElement(_init, 1, "getSelectedShapeIds", _getSelectedShapeIds_dec, Editor);
 __decorateElement(_init, 1, "getSelectedShapes", _getSelectedShapes_dec, Editor);
+__decorateElement(_init, 1, "getCurrentPageShapesInReadingOrder", _getCurrentPageShapesInReadingOrder_dec, Editor);
 __decorateElement(_init, 1, "getOnlySelectedShapeId", _getOnlySelectedShapeId_dec, Editor);
 __decorateElement(_init, 1, "getOnlySelectedShape", _getOnlySelectedShape_dec, Editor);
 __decorateElement(_init, 1, "getSelectionPageBounds", _getSelectionPageBounds_dec, Editor);