@tldraw/editor 3.15.0-canary.ee0606e7631e → 3.15.0-canary.f6f94b895c02

package/dist-cjs/index.d.ts

@@ -821,7 +821,7 @@ export declare const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicat
 export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX_2.Element;
 
 /** @public @react */
-export declare function DefaultSpinner(): JSX_2.Element;
+export declare function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX_2.Element;
 
 /** @public @react */
 export declare const DefaultSvgDefs: () => null;
@@ -1591,7 +1591,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      *
      * @public
      */
-    getNearestAdjacentShape(currentShapeId: TLShapeId, direction: 'down' | 'left' | 'right' | 'up'): TLShapeId;
+    getNearestAdjacentShape(shapes: TLShape[], currentShapeId: TLShapeId, direction: 'down' | 'left' | 'right' | 'up'): TLShapeId;
     selectParentShape(): void;
     selectFirstChildShape(): void;
     private _selectShapesAndZoom;
@@ -5418,6 +5418,14 @@ export declare abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknown
      * @public
      */
     onResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void;
+    /**
+     * A callback called when a shape resize is cancelled.
+     *
+     * @param initial - The shape at the start of the resize.
+     * @param current - The current shape.
+     * @public
+     */
+    onResizeCancel?(initial: Shape, current: Shape): void;
     /**
      * A callback called when a shape starts being translated.
      *
@@ -5444,6 +5452,23 @@ export declare abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknown
      * @public
      */
     onTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void;
+    /**
+     * A callback called when a shape translation is cancelled.
+     *
+     * @param initial - The shape at the start of the translation.
+     * @param current - The current shape.
+     * @public
+     */
+    onTranslateCancel?(initial: Shape, current: Shape): void;
+    /**
+     * A callback called when a shape's handle starts being dragged.
+     *
+     * @param shape - The shape.
+     * @param info - An object containing the handle and whether the handle is 'precise' or not.
+     * @returns A change to apply to the shape, or void.
+     * @public
+     */
+    onHandleDragStart?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void;
     /**
      * A callback called when a shape's handle changes.
      *
@@ -5453,6 +5478,23 @@ export declare abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknown
      * @public
      */
     onHandleDrag?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void;
+    /**
+     * A callback called when a shape's handle finishes being dragged.
+     *
+     * @param current - The current shape.
+     * @param info - An object containing the handle and whether the handle is 'precise' or not.
+     * @returns A change to apply to the shape, or void.
+     * @public
+     */
+    onHandleDragEnd?(current: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void;
+    /**
+     * A callback called when a shape's handle drag is cancelled.
+     *
+     * @param current - The current shape.
+     * @param info - An object containing the handle and whether the handle is 'precise' or not.
+     * @public
+     */
+    onHandleDragCancel?(current: Shape, info: TLHandleDragInfo<Shape>): void;
     /**
      * A callback called when a shape starts being rotated.
      *
@@ -5479,6 +5521,14 @@ export declare abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknown
      * @public
      */
     onRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void;
+    /**
+     * A callback called when a shape rotation is cancelled.
+     *
+     * @param initial - The shape at the start of the rotation.
+     * @param current - The current shape.
+     * @public
+     */
+    onRotateCancel?(initial: Shape, current: Shape): void;
     /* Excluded from this release type: onBindingChange */
     /**
      * A callback called when a shape's children change.
@@ -5707,6 +5757,12 @@ export declare abstract class StateNode implements Partial<TLEventHandlers> {
     _currentToolIdMask: Atom<string | undefined, unknown>;
     getCurrentToolIdMask(): string | undefined;
     setCurrentToolIdMask(id: string | undefined): void;
+    /**
+     * Add a child node to this state node.
+     *
+     * @public
+     */
+    addChild(childConstructor: TLStateNodeConstructor): this;
     onWheel?(info: TLWheelEventInfo): void;
     onPointerDown?(info: TLPointerEventInfo): void;
     onPointerMove?(info: TLPointerEventInfo): void;
@@ -6424,7 +6480,7 @@ export declare interface TLEditorComponents {
     ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
     ShapeIndicators?: ComponentType | null;
     SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null;
-    Spinner?: ComponentType | null;
+    Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null;
     SvgDefs?: ComponentType | null;
     ZoomBrush?: ComponentType<TLBrushProps> | null;
     ErrorFallback?: TLErrorFallbackComponent;
@@ -6770,6 +6826,7 @@ export declare interface TLGridProps {
 export declare interface TLHandleDragInfo<T extends TLShape> {
     handle: TLHandle;
     isPrecise: boolean;
+    isCreatingShape: boolean;
     initial?: T | undefined;
 }
 

package/dist-cjs/index.js

@@ -367,7 +367,7 @@ function debugEnableLicensing() {
 }
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/editor",
-  "3.15.0-canary.ee0606e7631e",
+  "3.15.0-canary.f6f94b895c02",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/lib/components/default-components/DefaultSpinner.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DefaultSpinner_exports = {};
 __export(DefaultSpinner_exports, {
@@ -22,20 +32,22 @@ __export(DefaultSpinner_exports, {
 });
 module.exports = __toCommonJS(DefaultSpinner_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function DefaultSpinner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", "aria-hidden": "false", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "animateTransform",
-      {
-        attributeName: "transform",
-        type: "rotate",
-        from: "0 8 8",
-        to: "360 8 8",
-        dur: "1s",
-        repeatCount: "indefinite"
-      }
-    ) })
-  ] }) });
+var import_classnames = __toESM(require("classnames"));
+function DefaultSpinner(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      "aria-hidden": "false",
+      ...props,
+      className: (0, import_classnames.default)("tl-spinner", props.className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor" })
+      ] })
+    }
+  );
 }
 //# sourceMappingURL=DefaultSpinner.js.map

package/dist-cjs/lib/components/default-components/DefaultSpinner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultSpinner.tsx"],
-  "sourcesContent": ["/** @public @react */\nexport function DefaultSpinner() {\n\treturn (\n\t\t<svg width={16} height={16} viewBox=\"0 0 16 16\" aria-hidden=\"false\">\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\">\n\t\t\t\t\t<animateTransform\n\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\tfrom=\"0 8 8\"\n\t\t\t\t\t\tto=\"360 8 8\"\n\t\t\t\t\t\tdur=\"1s\"\n\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t/>\n\t\t\t\t</path>\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIG;AAHI,SAAS,iBAAiB;AAChC,SACC,4CAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,SAAQ,aAAY,eAAY,SAC3D,uDAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,gDAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,IACvE,4CAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAC5D;AAAA,MAAC;AAAA;AAAA,QACA,eAAc;AAAA,QACd,MAAK;AAAA,QACL,MAAK;AAAA,QACL,IAAG;AAAA,QACH,KAAI;AAAA,QACJ,aAAY;AAAA;AAAA,IACb,GACD;AAAA,KACD,GACD;AAEF;",
-  "names": []
+  "sourcesContent": ["import classNames from 'classnames'\n\n/** @public @react */\nexport function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg\n\t\t\twidth={16}\n\t\t\theight={16}\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"false\"\n\t\t\t{...props}\n\t\t\tclassName={classNames('tl-spinner', props.className)}\n\t\t>\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\" />\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaG;AAbH,wBAAuB;AAGhB,SAAS,eAAe,OAAsC;AACpE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,eAAY;AAAA,MACX,GAAG;AAAA,MACJ,eAAW,kBAAAA,SAAW,cAAc,MAAM,SAAS;AAAA,MAEnD,uDAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,oDAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,QACvE,4CAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAAe;AAAA,SAC7E;AAAA;AAAA,EACD;AAEF;",
+  "names": ["classNames"]
 }

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

@@ -1479,9 +1479,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     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 filteredShapes = isSelectedWithinContainer ? this.getCurrentPageShapes().filter((shape2) => shape2.parentId === firstParentId) : this.getCurrentPageShapes().filter((shape2) => (0, import_tlschema.isPageId)(shape2.parentId));
+    const readingOrderShapes = isSelectedWithinContainer ? this._getShapesInReadingOrder(filteredShapes) : this.getCurrentPageShapesInReadingOrder();
     const currentShapeId = selectedShapeIds.length === 1 ? selectedShapeIds[0] : readingOrderShapes.find((shape2) => selectedShapeIds.includes(shape2.id))?.id;
     let adjacentShapeId;
     if (direction === "next" || direction === "prev") {
@@ -1491,7 +1490,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
       adjacentShapeId = shapeIds[adjacentIndex];
     } else {
       if (!currentShapeId) return;
-      adjacentShapeId = this.getNearestAdjacentShape(currentShapeId, direction);
+      adjacentShapeId = this.getNearestAdjacentShape(filteredShapes, currentShapeId, direction);
     }
     const shape = this.getShape(adjacentShapeId);
     if (!shape) return;
@@ -1557,11 +1556,10 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
    *
    * @public
    */
-  getNearestAdjacentShape(currentShapeId, direction) {
+  getNearestAdjacentShape(shapes, 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
     );