@tldraw/editor 3.15.0-canary.e3f6387b7e04 → 3.15.0-canary.ef2f8fce47e3

package/dist-esm/lib/components/default-components/DefaultSpinner.mjs

@@ -1,19 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-function DefaultSpinner() {
-  return /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", "aria-hidden": "false", children: /* @__PURE__ */ jsxs("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
-    /* @__PURE__ */ jsx("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
-    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor", children: /* @__PURE__ */ jsx(
-      "animateTransform",
-      {
-        attributeName: "transform",
-        type: "rotate",
-        from: "0 8 8",
-        to: "360 8 8",
-        dur: "1s",
-        repeatCount: "indefinite"
-      }
-    ) })
-  ] }) });
+import classNames from "classnames";
+function DefaultSpinner(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      "aria-hidden": "false",
+      ...props,
+      className: classNames("tl-spinner", props.className),
+      children: /* @__PURE__ */ jsxs("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
+        /* @__PURE__ */ jsx("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor" })
+      ] })
+    }
+  );
 }
 export {
   DefaultSpinner

package/dist-esm/lib/components/default-components/DefaultSpinner.mjs.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": "AAIG,SACC,KADD;AAHI,SAAS,iBAAiB;AAChC,SACC,oBAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,SAAQ,aAAY,eAAY,SAC3D,+BAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,wBAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,IACvE,oBAAC,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;",
+  "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": "AAaG,SACC,KADD;AAbH,OAAO,gBAAgB;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,WAAW,WAAW,cAAc,MAAM,SAAS;AAAA,MAEnD,+BAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,4BAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,QACvE,oBAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAAe;AAAA,SAC7E;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

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

@@ -1513,9 +1513,8 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     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) && !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) => 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") {
@@ -1525,7 +1524,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
       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;
@@ -1591,11 +1590,10 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    *
    * @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
     );
@@ -2359,28 +2357,11 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
         { history: "ignore" }
       );
       const { currentScreenPoint, currentPagePoint } = this.inputs;
-      const { screenBounds } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID);
       if (currentScreenPoint.x / z - x !== currentPagePoint.x || currentScreenPoint.y / z - y !== currentPagePoint.y) {
-        const event = {
-          type: "pointer",
-          target: "canvas",
-          name: "pointer_move",
-          // weird but true: we need to put the screen point back into client space
-          point: Vec.AddXY(currentScreenPoint, screenBounds.x, screenBounds.y),
-          pointerId: INTERNAL_POINTER_IDS.CAMERA_MOVE,
-          ctrlKey: this.inputs.ctrlKey,
-          altKey: this.inputs.altKey,
-          shiftKey: this.inputs.shiftKey,
-          metaKey: this.inputs.metaKey,
-          accelKey: isAccelKey(this.inputs),
-          button: 0,
-          isPen: this.getInstanceState().isPenMode ?? false
-        };
-        if (opts?.immediate) {
-          this._flushEventForTick(event);
-        } else {
-          this.dispatch(event);
-        }
+        this.updatePointer({
+          immediate: opts?.immediate,
+          pointerId: INTERNAL_POINTER_IDS.CAMERA_MOVE
+        });
       }
       this._tickCameraState();
     });
@@ -3349,19 +3330,24 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    */
   deletePage(page) {
     const id = typeof page === "string" ? page : page.id;
-    this.run(() => {
-      if (this.getIsReadonly()) return;
-      const pages = this.getPages();
-      if (pages.length === 1) return;
-      const deletedPage = this.getPage(id);
-      if (!deletedPage) return;
-      if (id === this.getCurrentPageId()) {
-        const index = pages.findIndex((page2) => page2.id === id);
-        const next = pages[index - 1] ?? pages[index + 1];
-        this.setCurrentPage(next.id);
-      }
-      this.store.remove([deletedPage.id]);
-    });
+    this.run(
+      () => {
+        if (this.getIsReadonly()) return;
+        const pages = this.getPages();
+        if (pages.length === 1) return;
+        const deletedPage = this.getPage(id);
+        if (!deletedPage) return;
+        if (id === this.getCurrentPageId()) {
+          const index = pages.findIndex((page2) => page2.id === id);
+          const next = pages[index - 1] ?? pages[index + 1];
+          this.setCurrentPage(next.id);
+        }
+        const shapes = this.getSortedChildIdsForParent(deletedPage.id);
+        this.deleteShapes(shapes);
+        this.store.remove([deletedPage.id]);
+      },
+      { ignoreShapeLock: true }
+    );
     return this;
   }
   /**
@@ -7064,6 +7050,47 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     this.dispatch({ type: "misc", name: "complete" });
     return this;
   }
+  /**
+   * Dispatch a pointer move event in the current position of the pointer. This is useful when
+   * external circumstances have changed (e.g. the camera moved or a shape was moved) and you want
+   * the current interaction to respond to that change.
+   *
+   * @example
+   * ```ts
+   * editor.updatePointer()
+   * ```
+   *
+   * @param options - The options for updating the pointer.
+   * @returns The editor instance.
+   * @public
+   */
+  updatePointer(options) {
+    const event = {
+      type: "pointer",
+      target: "canvas",
+      name: "pointer_move",
+      point: options?.point ?? // weird but true: what `inputs` calls screen-space is actually viewport space. so
+      // we need to convert back into true screen space first. we should fix this...
+      Vec.Add(
+        this.inputs.currentScreenPoint,
+        this.store.unsafeGetWithoutCapture(TLINSTANCE_ID).screenBounds
+      ),
+      pointerId: options?.pointerId ?? 0,
+      button: options?.button ?? 0,
+      isPen: options?.isPen ?? this.inputs.isPen,
+      shiftKey: options?.shiftKey ?? this.inputs.shiftKey,
+      altKey: options?.altKey ?? this.inputs.altKey,
+      ctrlKey: options?.ctrlKey ?? this.inputs.ctrlKey,
+      metaKey: options?.metaKey ?? this.inputs.metaKey,
+      accelKey: options?.accelKey ?? isAccelKey(this.inputs)
+    };
+    if (options?.immediate) {
+      this._flushEventForTick(event);
+    } else {
+      this.dispatch(event);
+    }
+    return this;
+  }
   /**
    * Puts the editor into focused mode.
    *