@tldraw/editor 3.13.0-canary.6307ec7baefb → 3.13.0-canary.66687519f459

package/dist-cjs/index.d.ts

@@ -1560,6 +1560,16 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     selectAll(): this;
+    /**
+     * Select the next shape in the reading order or in cardinal order.
+     *
+     * @example
+     * ```ts
+     * editor.selectAdjacentShape('next')
+     * ```
+     *
+     * @public
+     */
     selectAdjacentShape(direction: TLAdjacentDirection): void;
     /**
      * Generates a reading order for shapes based on rows grouping.
@@ -1568,12 +1578,16 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getCurrentPageShapesInReadingOrder(): TLShape[];
+    private _getShapesInReadingOrder;
     /**
      * Find the nearest adjacent shape in a specific direction.
      *
      * @public
      */
     getNearestAdjacentShape(currentShapeId: TLShapeId, direction: 'down' | 'left' | 'right' | 'up'): TLShapeId;
+    selectParentShape(): void;
+    selectFirstChildShape(): void;
+    private _selectShapesAndZoom;
     /**
      * Clear the selection.
      *
@@ -4285,7 +4299,6 @@ export declare class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
     static type: "group";
     static props: RecordProps<TLGroupShape>;
     static migrations: TLPropsMigrations;
-    canTabTo(): boolean;
     hideSelectionBoundsFg(): boolean;
     canBind(): boolean;
     getDefaultProps(): TLGroupShape['props'];

package/dist-cjs/index.js

@@ -361,7 +361,7 @@ function debugEnableLicensing() {
 }
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/editor",
-  "3.13.0-canary.6307ec7baefb",
+  "3.13.0-canary.66687519f459",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

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

@@ -1441,9 +1441,23 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     this.setSelectedShapes(this._getUnlockedShapeIds(ids));
     return this;
   }
+  /**
+   * Select the next shape in the reading order or in cardinal order.
+   *
+   * @example
+   * ```ts
+   * editor.selectAdjacentShape('next')
+   * ```
+   *
+   * @public
+   */
   selectAdjacentShape(direction) {
-    const readingOrderShapes = this.getCurrentPageShapesInReadingOrder();
     const selectedShapeIds = this.getSelectedShapeIds();
+    const firstParentId = selectedShapeIds[0] ? this.getShape(selectedShapeIds[0])?.parentId : null;
+    const isSelectedWithinContainer = firstParentId && selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) && !(0, import_tlschema.isPageId)(firstParentId);
+    const readingOrderShapes = isSelectedWithinContainer ? this._getShapesInReadingOrder(
+      this.getCurrentPageShapes().filter((shape2) => shape2.parentId === firstParentId)
+    ) : this.getCurrentPageShapesInReadingOrder();
     const currentShapeId = selectedShapeIds.length === 1 ? selectedShapeIds[0] : readingOrderShapes.find((shape2) => selectedShapeIds.includes(shape2.id))?.id;
     let adjacentShapeId;
     if (direction === "next" || direction === "prev") {
@@ -1457,18 +1471,15 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     }
     const shape = this.getShape(adjacentShapeId);
     if (!shape) return;
-    this.setSelectedShapes([shape.id]);
-    this.zoomToSelectionIfOffscreen(256, {
-      animation: {
-        duration: this.options.animationMediumMs
-      },
-      inset: 0
-    });
+    this._selectShapesAndZoom([shape.id]);
   }
   getCurrentPageShapesInReadingOrder() {
+    const shapes = this.getCurrentPageShapes().filter((shape) => (0, import_tlschema.isPageId)(shape.parentId));
+    return this._getShapesInReadingOrder(shapes);
+  }
+  _getShapesInReadingOrder(shapes) {
     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) => ({
@@ -1566,6 +1577,31 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     });
     return lowestScoringShape.shape.id;
   }
+  selectParentShape() {
+    const selectedShape = this.getOnlySelectedShape();
+    if (!selectedShape) return;
+    const parentShape = this.getShape(selectedShape.parentId);
+    if (!parentShape) return;
+    this._selectShapesAndZoom([parentShape.id]);
+  }
+  selectFirstChildShape() {
+    const selectedShapes = this.getSelectedShapes();
+    if (!selectedShapes.length) return;
+    const selectedShape = selectedShapes[0];
+    const children = this.getSortedChildIdsForParent(selectedShape.id).map((id) => this.getShape(id)).filter((i) => i);
+    const sortedChildren = this._getShapesInReadingOrder(children);
+    if (sortedChildren.length === 0) return;
+    this._selectShapesAndZoom([sortedChildren[0].id]);
+  }
+  _selectShapesAndZoom(ids) {
+    this.setSelectedShapes(ids);
+    this.zoomToSelectionIfOffscreen(256, {
+      animation: {
+        duration: this.options.animationMediumMs
+      },
+      inset: 0
+    });
+  }
   /**
    * Clear the selection.
    *