@tldraw/editor 3.7.0-internal.acaf9fbbd3cc → 3.7.1

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

@@ -37,6 +37,7 @@ var import_classnames = __toESM(require("classnames"));
 var import_react = require("react");
 var import_useEditor = require("../../hooks/useEditor");
 var import_useTransform = require("../../hooks/useTransform");
+var import_Box = require("../../primitives/Box");
 var import_utils = require("../../primitives/utils");
 function DefaultSelectionForeground({ bounds, rotation }) {
   const editor = (0, import_useEditor.useEditor)();
@@ -47,7 +48,7 @@ function DefaultSelectionForeground({ bounds, rotation }) {
     x: -expandOutlineBy,
     y: -expandOutlineBy
   });
-  bounds = bounds.clone().expandBy(expandOutlineBy).zeroFix();
+  bounds = expandOutlineBy instanceof import_Box.Box ? bounds.clone().expand(expandOutlineBy).zeroFix() : bounds.clone().expandBy(expandOutlineBy).zeroFix();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/components/default-components/DefaultSelectionForeground.tsx"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLSelectionForegroundProps {\n\tbounds: Box\n\trotation: number\n}\n\n/** @public @react */\nexport function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps) {\n\tconst editor = useEditor()\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tconst onlyShape = useValue('only selected shape', () => editor.getOnlySelectedShape(), [editor])\n\n\t// if all shapes have an expandBy for the selection outline, we can expand by the l\n\tconst expandOutlineBy = onlyShape\n\t\t? editor.getShapeUtil(onlyShape).expandSelectionOutlinePx(onlyShape)\n\t\t: 0\n\n\tuseTransform(rSvg, bounds?.x, bounds?.y, 1, rotation, {\n\t\tx: -expandOutlineBy,\n\t\ty: -expandOutlineBy,\n\t})\n\n\tbounds = bounds.clone().expandBy(expandOutlineBy).zeroFix()\n\n\treturn (\n\t\t<svg\n\t\t\tref={rSvg}\n\t\t\tclassName=\"tl-overlays__item tl-selection__fg\"\n\t\t\tdata-testid=\"selection-foreground\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tclassName={classNames('tl-selection__fg__outline')}\n\t\t\t\twidth={toDomPrecision(bounds.width)}\n\t\t\t\theight={toDomPrecision(bounds.height)}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCG;AAvCH,yBAAyB;AACzB,wBAAuB;AACvB,mBAAuB;AACvB,uBAA0B;AAC1B,0BAA6B;AAE7B,mBAA+B;AASxB,SAAS,2BAA2B,EAAE,QAAQ,SAAS,GAA+B;AAC5F,QAAM,aAAS,4BAAU;AACzB,QAAM,WAAO,qBAAsB,IAAI;AAEvC,QAAM,gBAAY,6BAAS,uBAAuB,MAAM,OAAO,qBAAqB,GAAG,CAAC,MAAM,CAAC;AAG/F,QAAM,kBAAkB,YACrB,OAAO,aAAa,SAAS,EAAE,yBAAyB,SAAS,IACjE;AAEH,wCAAa,MAAM,QAAQ,GAAG,QAAQ,GAAG,GAAG,UAAU;AAAA,IACrD,GAAG,CAAC;AAAA,IACJ,GAAG,CAAC;AAAA,EACL,CAAC;AAED,WAAS,OAAO,MAAM,EAAE,SAAS,eAAe,EAAE,QAAQ;AAE1D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACA,eAAW,kBAAAA,SAAW,2BAA2B;AAAA,UACjD,WAAO,6BAAe,OAAO,KAAK;AAAA,UAClC,YAAQ,6BAAe,OAAO,MAAM;AAAA;AAAA,MACrC;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useEditor } from '../../hooks/useEditor'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLSelectionForegroundProps {\n\tbounds: Box\n\trotation: number\n}\n\n/** @public @react */\nexport function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps) {\n\tconst editor = useEditor()\n\tconst rSvg = useRef<SVGSVGElement>(null)\n\n\tconst onlyShape = useValue('only selected shape', () => editor.getOnlySelectedShape(), [editor])\n\n\t// if all shapes have an expandBy for the selection outline, we can expand by the l\n\tconst expandOutlineBy = onlyShape\n\t\t? editor.getShapeUtil(onlyShape).expandSelectionOutlinePx(onlyShape)\n\t\t: 0\n\n\tuseTransform(rSvg, bounds?.x, bounds?.y, 1, rotation, {\n\t\tx: -expandOutlineBy,\n\t\ty: -expandOutlineBy,\n\t})\n\n\tbounds =\n\t\texpandOutlineBy instanceof Box\n\t\t\t? bounds.clone().expand(expandOutlineBy).zeroFix()\n\t\t\t: bounds.clone().expandBy(expandOutlineBy).zeroFix()\n\n\treturn (\n\t\t<svg\n\t\t\tref={rSvg}\n\t\t\tclassName=\"tl-overlays__item tl-selection__fg\"\n\t\t\tdata-testid=\"selection-foreground\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tclassName={classNames('tl-selection__fg__outline')}\n\t\t\t\twidth={toDomPrecision(bounds.width)}\n\t\t\t\theight={toDomPrecision(bounds.height)}\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CG;AA1CH,yBAAyB;AACzB,wBAAuB;AACvB,mBAAuB;AACvB,uBAA0B;AAC1B,0BAA6B;AAC7B,iBAAoB;AACpB,mBAA+B;AASxB,SAAS,2BAA2B,EAAE,QAAQ,SAAS,GAA+B;AAC5F,QAAM,aAAS,4BAAU;AACzB,QAAM,WAAO,qBAAsB,IAAI;AAEvC,QAAM,gBAAY,6BAAS,uBAAuB,MAAM,OAAO,qBAAqB,GAAG,CAAC,MAAM,CAAC;AAG/F,QAAM,kBAAkB,YACrB,OAAO,aAAa,SAAS,EAAE,yBAAyB,SAAS,IACjE;AAEH,wCAAa,MAAM,QAAQ,GAAG,QAAQ,GAAG,GAAG,UAAU;AAAA,IACrD,GAAG,CAAC;AAAA,IACJ,GAAG,CAAC;AAAA,EACL,CAAC;AAED,WACC,2BAA2B,iBACxB,OAAO,MAAM,EAAE,OAAO,eAAe,EAAE,QAAQ,IAC/C,OAAO,MAAM,EAAE,SAAS,eAAe,EAAE,QAAQ;AAErD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACA,eAAW,kBAAAA,SAAW,2BAA2B;AAAA,UACjD,WAAO,6BAAe,OAAO,KAAK;AAAA,UAClC,YAAQ,6BAAe,OAAO,MAAM;AAAA;AAAA,MACrC;AAAA;AAAA,EACD;AAEF;",
   "names": ["classNames"]
 }

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

@@ -1751,6 +1751,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     if (!followingUserId) return null;
     const leaderPresence = this.getCollaborators().find((c) => c.userId === followingUserId);
     if (!leaderPresence) return null;
+    if (!leaderPresence.camera || !leaderPresence.screenBounds) return null;
     const { w: lw, h: lh } = leaderPresence.screenBounds;
     const { x: lx, y: ly, z: lz } = leaderPresence.camera;
     const theirViewport = new import_Box.Box(-lx, -ly, lw / lz, lh / lz);
@@ -2445,6 +2446,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
   zoomToUser(userId, opts = { animation: { duration: 500 } }) {
     const presence = this.getCollaborators().find((c) => c.userId === userId);
     if (!presence) return this;
+    const cursor = presence.cursor;
+    if (!cursor) return this;
     this.run(() => {
       if (this.getInstanceState().followingUserId !== null) {
         this.stopFollowingUser();
@@ -2456,7 +2459,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
       if (opts && opts.animation && !isOnSamePage) {
         opts.animation = void 0;
       }
-      this.centerOnPoint(presence.cursor, opts);
+      this.centerOnPoint(cursor, opts);
       const { highlightedUserIds } = this.getInstanceState();
       this.updateInstanceState({ highlightedUserIds: [...highlightedUserIds, userId] });
       this.timers.setTimeout(() => {
@@ -2613,7 +2616,10 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     if (!allPresenceRecords.length) return import_state.EMPTY_ARRAY;
     const userIds = [...new Set(allPresenceRecords.map((c) => c.userId))].sort();
     return userIds.map((id) => {
-      const latestPresence = allPresenceRecords.filter((c) => c.userId === id).sort((a, b) => b.lastActivityTimestamp - a.lastActivityTimestamp)[0];
+      const latestPresence = (0, import_utils.maxBy)(
+        allPresenceRecords.filter((c) => c.userId === id),
+        (p) => p.lastActivityTimestamp ?? 0
+      );
       return latestPresence;
     });
   }
@@ -3165,8 +3171,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
    * Upload an asset to the store's asset service, returning a URL that can be used to resolve the
    * asset.
    */
-  async uploadAsset(asset, file) {
-    return await this.store.props.assets.upload(asset, file);
+  async uploadAsset(asset, file, abortSignal) {
+    return await this.store.props.assets.upload(asset, file, abortSignal);
   }
   _getShapeGeometryCache() {
     return this.store.createComputedCache(