@tldraw/editor 5.4.0-canary.587f42e00c65 → 5.4.0-canary.5a084792df77

package/dist-cjs/index.js

@@ -392,7 +392,7 @@ var import_uniq = require("./lib/utils/uniq");
 var import_defaultThemes2 = require("./lib/editor/managers/ThemeManager/defaultThemes");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/editor",
-  "5.4.0-canary.587f42e00c65",
+  "5.4.0-canary.5a084792df77",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

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

@@ -257,6 +257,10 @@ class Editor extends import_eventemitter3.default {
         if (!nextPageState) nextPageState = { ...prevPageState };
         nextPageState.editingShapeId = null;
       }
+      if (prevPageState.croppingShapeId && shapesNoLongerInPage.has(prevPageState.croppingShapeId)) {
+        if (!nextPageState) nextPageState = { ...prevPageState };
+        nextPageState.croppingShapeId = null;
+      }
       const hintingShapeIds = prevPageState.hintingShapeIds.filter(
         (id) => !shapesNoLongerInPage.has(id)
       );
@@ -1959,42 +1963,28 @@ class Editor extends import_eventemitter3.default {
    */
   setEditingShape(shape) {
     const id = typeof shape === "string" ? shape : shape?.id ?? null;
-    if (!id) {
+    if (id && !this.canEditShape(id)) return this;
+    this.run(() => {
+      const prevEditingShapeId = this.getEditingShapeId();
+      if (prevEditingShapeId) {
+        const prevEditingShape = this.getShape(prevEditingShapeId);
+        if (prevEditingShape) {
+          this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape);
+        }
+      }
       this.run(
         () => {
-          const prevEditingShapeId = this.getEditingShapeId();
-          if (prevEditingShapeId) {
-            const prevEditingShape = this.getShape(prevEditingShapeId);
-            if (prevEditingShape) {
-              this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape);
-            }
-          }
           this._updateCurrentPageState({ editingShapeId: null });
           this._currentRichTextEditor.set(null);
+          if (!id) return;
+          this.select(id);
+          this._updateCurrentPageState({ editingShapeId: id });
+          const nextEditingShape = this.getShape(id);
+          this.getShapeUtil(nextEditingShape).onEditStart?.(nextEditingShape);
         },
         { history: "ignore" }
       );
-      return this;
-    }
-    if (!this.canEditShape(id)) return this;
-    this.run(
-      () => {
-        const prevEditingShapeId = this.getEditingShapeId();
-        if (prevEditingShapeId) {
-          const prevEditingShape = this.getShape(prevEditingShapeId);
-          if (prevEditingShape) {
-            this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape);
-          }
-        }
-        this._updateCurrentPageState({ editingShapeId: null });
-        this._currentRichTextEditor.set(null);
-        this.select(id);
-        this._updateCurrentPageState({ editingShapeId: id });
-        const nextEditingShape = this.getShape(id);
-        this.getShapeUtil(nextEditingShape).onEditStart?.(nextEditingShape);
-      },
-      { history: "ignore" }
-    );
+    });
     return this;
   }
   // Rich text editor
@@ -2100,19 +2090,12 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   setErasingShapes(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((shape) => shape.id);
+    const ids = typeof shapes[0] === "string" ? shapes.slice() : shapes.map((shape) => shape.id);
     ids.sort();
     const erasingShapeIds = this.getErasingShapeIds();
     this.run(
       () => {
-        if (ids.length === erasingShapeIds.length) {
-          for (let i = 0; i < ids.length; i++) {
-            if (ids[i] !== erasingShapeIds[i]) {
-              this._updateCurrentPageState({ erasingShapeIds: ids });
-              break;
-            }
-          }
-        } else {
+        if (!(0, import_utils.areArraysShallowEqual)(ids, erasingShapeIds)) {
           this._updateCurrentPageState({ erasingShapeIds: ids });
         }
       },
@@ -2145,6 +2128,7 @@ class Editor extends import_eventemitter3.default {
     if (!_shape) return false;
     const util = this.getShapeUtil(_shape);
     if (!util.canCrop(_shape)) return false;
+    if (this.getIsReadonly()) return false;
     if (this.isShapeOrAncestorLocked(_shape)) return false;
     return true;
   }
@@ -2354,7 +2338,7 @@ class Editor extends import_eventemitter3.default {
       ...this._cameraOptions.__unsafe__getWithoutCapture(),
       ...opts
     });
-    if (next.zoomSteps?.length < 1) next.zoomSteps = [1];
+    if (!next.zoomSteps || next.zoomSteps.length < 1) next.zoomSteps = [1];
     this._cameraOptions.set(next);
     this.setCamera(this.getCamera());
     return this;
@@ -2375,8 +2359,8 @@ class Editor extends import_eventemitter3.default {
       const vsb = this.getViewportScreenBounds();
       if (cameraOptions.constraints) {
         const { constraints } = cameraOptions;
-        const py = Math.min(constraints.padding.y, vsb.w / 2);
-        const px = Math.min(constraints.padding.x, vsb.h / 2);
+        const px = Math.min(constraints.padding.x, vsb.w / 2);
+        const py = Math.min(constraints.padding.y, vsb.h / 2);
         const bounds = import_Box.Box.From(cameraOptions.constraints.bounds);
         const zx = (vsb.w - px * 2) / bounds.w;
         const zy = (vsb.h - py * 2) / bounds.h;
@@ -2415,12 +2399,12 @@ class Editor extends import_eventemitter3.default {
               break;
             }
             case "inside": {
-              if (z < zx) x = (0, import_utils2.clamp)(x, minX, (vsb.w - px) / z - bounds.w);
+              if (z < zx) x = (0, import_utils2.clamp)(x, minX, (vsb.w - px) / z - bounds.w - bounds.x);
               else x = (0, import_utils2.clamp)(x, minX + freeW, minX);
               break;
             }
             case "outside": {
-              x = (0, import_utils2.clamp)(x, px / z - bounds.w, (vsb.w - px) / z);
+              x = (0, import_utils2.clamp)(x, px / z - bounds.w - bounds.x, (vsb.w - px) / z - bounds.x);
               break;
             }
             case "free": {
@@ -2441,12 +2425,12 @@ class Editor extends import_eventemitter3.default {
               break;
             }
             case "inside": {
-              if (z < zy) y = (0, import_utils2.clamp)(y, minY, (vsb.h - py) / z - bounds.h);
+              if (z < zy) y = (0, import_utils2.clamp)(y, minY, (vsb.h - py) / z - bounds.h - bounds.y);
               else y = (0, import_utils2.clamp)(y, minY + freeH, minY);
               break;
             }
             case "outside": {
-              y = (0, import_utils2.clamp)(y, py / z - bounds.h, (vsb.h - py) / z);
+              y = (0, import_utils2.clamp)(y, py / z - bounds.h - bounds.y, (vsb.h - py) / z - bounds.y);
               break;
             }
             case "free": {
@@ -4058,7 +4042,9 @@ class Editor extends import_eventemitter3.default {
       if (pageMask) {
         if (pageMask.length === 0) return void 0;
         const { corners } = pageBounds;
-        if (corners.every((p, i) => p && import_Vec.Vec.Equals(p, pageMask[i]))) return pageBounds.clone();
+        if (pageMask.length === corners.length && corners.every((p, i) => import_Vec.Vec.Equals(p, pageMask[i]))) {
+          return pageBounds.clone();
+        }
         const intersection = (0, import_intersect.intersectPolygonPolygon)(pageMask, corners);
         if (!intersection) return;
         return import_Box.Box.FromPoints(intersection);
@@ -4297,7 +4283,7 @@ class Editor extends import_eventemitter3.default {
       const pointInShapeSpace = this.getPointInShapeSpace(shape, point);
       const shapeUtil = this.getShapeUtil(shape);
       const isShapeFrameLike = this.isShapeFrameLike(shape);
-      if (isShapeFrameLike || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && shapeUtil.getText(shape)?.trim()) {
+      if (isGroup && (isShapeFrameLike || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && shapeUtil.getText(shape)?.trim())) {
         for (const childGeometry of geometry.children) {
           if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
             return shape;
@@ -5220,26 +5206,17 @@ class Editor extends import_eventemitter3.default {
   toggleLock(shapes) {
     const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (this.getIsReadonly() || ids.length === 0) return this;
-    let allLocked = true, allUnlocked = true;
+    let allLocked = true;
     const shapesToToggle = [];
     for (const id of ids) {
       const shape = this.getShape(id);
       if (shape) {
         shapesToToggle.push(shape);
-        if (shape.isLocked) {
-          allUnlocked = false;
-        } else {
-          allLocked = false;
-        }
+        if (!shape.isLocked) allLocked = false;
       }
     }
     this.run(() => {
-      if (allUnlocked) {
-        this.updateShapes(
-          shapesToToggle.map((shape) => ({ id: shape.id, type: shape.type, isLocked: true }))
-        );
-        this.setSelectedShapes([]);
-      } else if (allLocked) {
+      if (allLocked) {
         this.updateShapes(
           shapesToToggle.map((shape) => ({ id: shape.id, type: shape.type, isLocked: false }))
         );
@@ -5247,6 +5224,7 @@ class Editor extends import_eventemitter3.default {
         this.updateShapes(
           shapesToToggle.map((shape) => ({ id: shape.id, type: shape.type, isLocked: true }))
         );
+        this.setSelectedShapes([]);
       }
     });
     return this;
@@ -8728,10 +8706,9 @@ function withIsolatedShapes(editor, shapeIds, callback) {
 }
 function getCameraFitXFitY(editor, cameraOptions) {
   if (!cameraOptions.constraints) throw Error("Should have constraints here");
-  const {
-    padding: { x: px, y: py }
-  } = cameraOptions.constraints;
   const vsb = editor.getViewportScreenBounds();
+  const px = Math.min(cameraOptions.constraints.padding.x, vsb.w / 2);
+  const py = Math.min(cameraOptions.constraints.padding.y, vsb.h / 2);
   const bounds = import_Box.Box.From(cameraOptions.constraints.bounds);
   const zx = (vsb.w - px * 2) / bounds.w;
   const zy = (vsb.h - py * 2) / bounds.h;