feat: redirect fonts to cdn (take 2)

dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx

@@ -23,7 +23,7 @@ All `props` are _optional_.
 | [`libraryReturnUrl`](#libraryreturnurl) | `string` | _ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
 | [`theme`](#theme) | `"light"` | `"dark"` | `"light"` | The theme of the Excalidraw component |
 | [`name`](#name) | `string` |  | Name of the drawing |
-| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](/docs/@excalidraw/excalidraw/api/props/ui-options#canvasactions) |
+| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](#canvasactions) |
 | [`detectScroll`](#detectscroll) | `boolean` | `true` | Indicates whether to update the offsets when nearest ancestor is scrolled. |
 | [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
 | [`autoFocus`](#autofocus) | `boolean` | `false` | indicates whether to focus the Excalidraw component on page load |

packages/excalidraw/actions/actionAlign.tsx

@@ -11,6 +11,7 @@ import { ToolButton } from "../components/ToolButton";
 import { getNonDeletedElements } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
@@ -44,8 +45,10 @@ const alignSelectedElements = (
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
+  return updateFrameMembershipOfSelectedElements(
+    elements.map((element) => updatedElementsMap.get(element.id) || element),
+    appState,
+    app,
   );
 };
 

packages/excalidraw/actions/actionDistribute.tsx

@@ -7,6 +7,7 @@ import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
@@ -35,8 +36,10 @@ const distributeSelectedElements = (
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
+  return updateFrameMembershipOfSelectedElements(
+    elements.map((element) => updatedElementsMap.get(element.id) || element),
+    appState,
+    app,
   );
 };
 

packages/excalidraw/actions/actionDuplicateSelection.tsx

@@ -104,8 +104,8 @@ const duplicateElements = (
 
   const idsOfElementsToDuplicate = arrayToMap(
     getSelectedElements(sortedElements, appState, {
-      includeBoundTextElement: false,
-      includeElementsInFrames: false,
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
     }),
   );
 

packages/excalidraw/actions/actionFlip.ts

@@ -19,7 +19,11 @@ export const actionFlipHorizontal = register({
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     return {
-      elements: flipSelectedElements(elements, appState, "horizontal"),
+      elements: updateFrameMembershipOfSelectedElements(
+        flipSelectedElements(elements, appState, "horizontal"),
+        appState,
+        app,
+      ),
       appState,
       commitToHistory: true,
     };

packages/excalidraw/components/App.tsx

@@ -267,7 +267,6 @@ import {
   isTransparent,
   easeToValuesRAF,
   muteFSAbortError,
-  arrayToMap,
   isTestEnv,
   easeOut,
   updateStable,
@@ -2178,13 +2177,6 @@ class App extends React.Component<AppProps, AppState> {
           },
         );
       }
-
-      // update frame membership if needed
-      updateFrameMembershipOfSelectedElements(
-        this.scene.getElementsIncludingDeleted(),
-        this.state,
-        this,
-      );
     },
   );
 
@@ -4348,13 +4340,11 @@ class App extends React.Component<AppProps, AppState> {
                   !(isTextElement(element) && element.containerId)),
             );
 
-    const elementsMap = arrayToMap(elements);
-
     return getElementsAtPosition(elements, (element) =>
       hitTest(element, this.state, this.frameNameBoundsCache, x, y),
     ).filter((element) => {
       // hitting a frame's element from outside the frame is not considered a hit
-      const containingFrame = getContainingFrame(element, elementsMap);
+      const containingFrame = getContainingFrame(element);
       return containingFrame &&
         this.state.frameRendering.enabled &&
         this.state.frameRendering.clip
@@ -7689,10 +7679,7 @@ class App extends React.Component<AppProps, AppState> {
             );
 
             if (linearElement?.frameId) {
-              const frame = getContainingFrame(
-                linearElement,
-                arrayToMap(this.scene.getElementsIncludingDeleted()),
-              );
+              const frame = getContainingFrame(linearElement);
 
               if (frame && linearElement) {
                 if (!elementOverlapsWithFrame(linearElement, frame)) {

packages/excalidraw/element/dragElements.ts

@@ -5,9 +5,14 @@ import { getPerfectElementSize } from "./sizeHelpers";
 import { NonDeletedExcalidrawElement } from "./types";
 import { AppState, PointerDownState } from "../types";
 import { getBoundTextElement } from "./textElement";
+import { isSelectedViaGroup } from "../groups";
 import { getGridPoint } from "../math";
 import Scene from "../scene/Scene";
-import { isArrowElement, isFrameLikeElement } from "./typeChecks";
+import {
+  isArrowElement,
+  isBoundToContainer,
+  isFrameLikeElement,
+} from "./typeChecks";
 
 export const dragSelectedElements = (
   pointerDownState: PointerDownState,
@@ -32,11 +37,13 @@ export const dragSelectedElements = (
     .map((f) => f.id);
 
   if (frames.length > 0) {
-    for (const element of scene.getNonDeletedElements()) {
-      if (element.frameId !== null && frames.includes(element.frameId)) {
-        elementsToUpdate.add(element);
-      }
-    }
+    const elementsInFrames = scene
+      .getNonDeletedElements()
+      .filter((e) => !isBoundToContainer(e))
+      .filter((e) => e.frameId !== null)
+      .filter((e) => frames.includes(e.frameId!));
+
+    elementsInFrames.forEach((element) => elementsToUpdate.add(element));
   }
 
   const commonBounds = getCommonBounds(
@@ -53,9 +60,16 @@ export const dragSelectedElements = (
 
   elementsToUpdate.forEach((element) => {
     updateElementCoords(pointerDownState, element, adjustedOffset);
+    // update coords of bound text only if we're dragging the container directly
+    // (we don't drag the group that it's part of)
     if (
-      // skip arrow labels since we calculate its position during render
-      !isArrowElement(element)
+      // Don't update coords of arrow label since we calculate its position during render
+      !isArrowElement(element) &&
+      // container isn't part of any group
+      // (perf optim so we don't check `isSelectedViaGroup()` in every case)
+      (!element.groupIds.length ||
+        // container is part of a group, but we're dragging the container directly
+        (appState.editingGroupId && !isSelectedViaGroup(appState, element)))
     ) {
       const textElement = getBoundTextElement(element);
       if (textElement) {

packages/excalidraw/package.json

@@ -7,8 +7,8 @@
   "exports": {
     ".": {
       "development": "./dist/dev/index.js",
-      "types": "./dist/excalidraw/index.d.ts",
-      "default": "./dist/prod/index.js"
+      "default": "./dist/prod/index.js",
+      "types": "./dist/excalidraw/index.d.ts"
     },
     "./index.css": {
       "development": "./dist/dev/index.css",

packages/excalidraw/scene/selection.ts

@@ -11,7 +11,6 @@ import {
   getFrameChildren,
 } from "../frame";
 import { isShallowEqual } from "../utils";
-import { arrayToMap } from "../utils";
 import { isElementInViewport } from "../element/sizeHelpers";
 
 /**
@@ -49,13 +48,11 @@ export const getElementsWithinSelection = (
   const [selectionX1, selectionY1, selectionX2, selectionY2] =
     getElementAbsoluteCoords(selection);
 
-  const elementsMap = arrayToMap(elements);
-
   let elementsInSelection = elements.filter((element) => {
     let [elementX1, elementY1, elementX2, elementY2] =
       getElementBounds(element);
 
-    const containingFrame = getContainingFrame(element, elementsMap);
+    const containingFrame = getContainingFrame(element);
     if (containingFrame) {
       const [fx1, fy1, fx2, fy2] = getElementBounds(containingFrame);
 
@@ -81,7 +78,7 @@ export const getElementsWithinSelection = (
     : elementsInSelection;
 
   elementsInSelection = elementsInSelection.filter((element) => {
-    const containingFrame = getContainingFrame(element, elementsMap);
+    const containingFrame = getContainingFrame(element);
 
     if (containingFrame) {
       return elementOverlapsWithFrame(element, containingFrame);

vercel.json

@@ -28,6 +28,18 @@
       "source": "/webex/:match*",
       "destination": "https://for-webex.excalidraw.com"
     },
+    {
+      "source": "/Virgil.woff2",
+      "destination": "https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/Virgil.woff2"
+    },
+    {
+      "source": "/Cascadia.woff2",
+      "destination": "https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/Cascadia.woff2"
+    },
+    {
+      "source": "/Assistant-Regular.woff2",
+      "destination": "https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/Assistant-Regular.woff2"
+    },
     {
       "source": "/:path*",
       "has": [