fix: image insertion bugs (#7278)

* build: support preact

* add log

* Simplify the config and generate prod and dev builds for preact

* update changelog

* remove logs

* use env variable so its available during build time

* update cl

* fix

src/components/App.tsx

@@ -4740,9 +4740,13 @@ class App extends React.Component<AppProps, AppState> {
       });
 
       const { x, y } = viewportCoordsToSceneCoords(event, this.state);
+
+      const frame = this.getTopLayerFrameAtSceneCoords({ x, y });
+
       mutateElement(pendingImageElement, {
         x,
         y,
+        frameId: frame ? frame.id : null,
       });
     } else if (this.state.activeTool.type === "freedraw") {
       this.handleFreeDrawElementOnPointerDown(
@@ -5609,9 +5613,11 @@ class App extends React.Component<AppProps, AppState> {
   private createImageElement = ({
     sceneX,
     sceneY,
+    addToFrameUnderCursor = true,
   }: {
     sceneX: number;
     sceneY: number;
+    addToFrameUnderCursor?: boolean;
   }) => {
     const [gridX, gridY] = getGridPoint(
       sceneX,
@@ -5621,10 +5627,12 @@ class App extends React.Component<AppProps, AppState> {
         : this.state.gridSize,
     );
 
-    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+    const topLayerFrame = addToFrameUnderCursor
-      x: gridX,
+      ? this.getTopLayerFrameAtSceneCoords({
-      y: gridY,
+          x: gridX,
-    });
+          y: gridY,
+        })
+      : null;
 
     const element = newImageElement({
       type: "image",
@@ -6868,13 +6876,10 @@ class App extends React.Component<AppProps, AppState> {
               topLayerFrame &&
               !this.state.selectedElementIds[topLayerFrame.id]
             ) {
-              const processedGroupIds = new Map<string, boolean>();
               const elementsToAdd = selectedElements.filter(
                 (element) =>
                   element.frameId !== topLayerFrame.id &&
-                  isElementInFrame(element, nextElements, this.state, {
+                  isElementInFrame(element, nextElements, this.state),
-                    processedGroupIds,
-                  }),
               );
 
               if (this.state.editingGroupId) {
@@ -7557,6 +7562,7 @@ class App extends React.Component<AppProps, AppState> {
       const imageElement = this.createImageElement({
         sceneX: x,
         sceneY: y,
+        addToFrameUnderCursor: false,
       });
 
       if (insertOnCanvasDirectly) {

src/cursor.ts

@@ -99,7 +99,7 @@ export const setCursorForShape = (
     interactiveCanvas.style.cursor = `url(${url}), auto`;
   } else if (!["image", "custom"].includes(appState.activeTool.type)) {
     interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
-  } else {
+  } else if (appState.activeTool.type !== "image") {
     interactiveCanvas.style.cursor = CURSOR_TYPE.AUTO;
   }
 };

src/frame.ts

@@ -1,4 +1,8 @@
-import { getCommonBounds, getElementBounds, isTextElement } from "./element";
+import {
+  getCommonBounds,
+  getElementAbsoluteCoords,
+  isTextElement,
+} from "./element";
 import {
   ExcalidrawElement,
   ExcalidrawFrameElement,
@@ -52,7 +56,6 @@ export const bindElementsToFramesAfterDuplication = (
   }
 };
 
-// --------------------------- Frame Geometry ---------------------------------
 export function isElementIntersectingFrame(
   element: ExcalidrawElement,
   frame: ExcalidrawFrameElement,
@@ -82,27 +85,36 @@ export const getElementsCompletelyInFrame = (
       element.frameId === frame.id,
   );
 
+export const isElementContainingFrame = (
+  elements: readonly ExcalidrawElement[],
+  element: ExcalidrawElement,
+  frame: ExcalidrawFrameElement,
+) => {
+  return getElementsWithinSelection(elements, element).some(
+    (e) => e.id === frame.id,
+  );
+};
+
 export const getElementsIntersectingFrame = (
   elements: readonly ExcalidrawElement[],
   frame: ExcalidrawFrameElement,
 ) => elements.filter((element) => isElementIntersectingFrame(element, frame));
 
-export const elementsAreInBounds = (
+export const elementsAreInFrameBounds = (
   elements: readonly ExcalidrawElement[],
-  element: ExcalidrawElement,
+  frame: ExcalidrawFrameElement,
-  tolerance = 0,
 ) => {
-  const [elementX1, elementY1, elementX2, elementY2] =
+  const [selectionX1, selectionY1, selectionX2, selectionY2] =
-    getElementBounds(element);
+    getElementAbsoluteCoords(frame);
 
-  const [elementsX1, elementsY1, elementsX2, elementsY2] =
+  const [elementX1, elementY1, elementX2, elementY2] =
     getCommonBounds(elements);
 
   return (
-    elementX1 <= elementsX1 - tolerance &&
+    selectionX1 <= elementX1 &&
-    elementY1 <= elementsY1 - tolerance &&
+    selectionY1 <= elementY1 &&
-    elementX2 >= elementsX2 + tolerance &&
+    selectionX2 >= elementX2 &&
-    elementY2 >= elementsY2 + tolerance
+    selectionY2 >= elementY2
   );
 };
 
@@ -111,12 +123,9 @@ export const elementOverlapsWithFrame = (
   frame: ExcalidrawFrameElement,
 ) => {
   return (
-    // frame contains element
+    elementsAreInFrameBounds([element], frame) ||
-    elementsAreInBounds([element], frame) ||
+    isElementIntersectingFrame(element, frame) ||
-    // element contains frame
+    isElementContainingFrame([frame], element, frame)
-    (elementsAreInBounds([frame], element) && element.frameId === frame.id) ||
-    // element intersects with frame
-    isElementIntersectingFrame(element, frame)
   );
 };
 
@@ -127,7 +136,7 @@ export const isCursorInFrame = (
   },
   frame: NonDeleted<ExcalidrawFrameElement>,
 ) => {
-  const [fx1, fy1, fx2, fy2] = getElementBounds(frame);
+  const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
 
   return isPointWithinBounds(
     [fx1, fy1],
@@ -151,7 +160,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (
 
   return !!elementsInGroup.find(
     (element) =>
-      elementsAreInBounds([element], frame) ||
+      elementsAreInFrameBounds([element], frame) ||
       isElementIntersectingFrame(element, frame),
   );
 };
@@ -172,7 +181,7 @@ export const groupsAreCompletelyOutOfFrame = (
   return (
     elementsInGroup.find(
       (element) =>
-        elementsAreInBounds([element], frame) ||
+        elementsAreInFrameBounds([element], frame) ||
         isElementIntersectingFrame(element, frame),
     ) === undefined
   );
@@ -240,18 +249,12 @@ export const getElementsInResizingFrame = (
   const prevElementsInFrame = getFrameChildren(allElements, frame.id);
   const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);
 
-  const elementsCompletelyInFrame = new Set<ExcalidrawElement>(
+  const elementsCompletelyInFrame = new Set([
-    getElementsCompletelyInFrame(allElements, frame),
+    ...getElementsCompletelyInFrame(allElements, frame),
-  );
+    ...prevElementsInFrame.filter((element) =>
-
+      isElementContainingFrame(allElements, element, frame),
-  for (const element of prevElementsInFrame) {
+    ),
-    if (!elementsCompletelyInFrame.has(element)) {
+  ]);
-      // element contains the frame
-      if (elementsAreInBounds([frame], element)) {
-        elementsCompletelyInFrame.add(element);
-      }
-    }
-  }
 
   const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
     (element) => !elementsCompletelyInFrame.has(element),
@@ -318,7 +321,7 @@ export const getElementsInResizingFrame = (
     if (isSelected) {
       const elementsInGroup = getElementsInGroup(allElements, id);
 
-      if (elementsAreInBounds(elementsInGroup, frame)) {
+      if (elementsAreInFrameBounds(elementsInGroup, frame)) {
         for (const element of elementsInGroup) {
           nextElementsInFrame.add(element);
         }
@@ -367,7 +370,7 @@ export const getContainingFrame = (
 // --------------------------- Frame Operations -------------------------------
 
 /**
- * Retains (or repairs for target frame) the ordering invariant where children
+ * Retains (or repairs for target frame) the ordering invriant where children
  * elements come right before the parent frame:
  * [el, el, child, child, frame, el]
  */
@@ -434,14 +437,25 @@ export const removeElementsFromFrame = (
     ExcalidrawElement
   >();
 
+  const toRemoveElementsByFrame = new Map<
+    ExcalidrawFrameElement["id"],
+    ExcalidrawElement[]
+  >();
+
   for (const element of elementsToRemove) {
     if (element.frameId) {
       _elementsToRemove.set(element.id, element);
 
+      const arr = toRemoveElementsByFrame.get(element.frameId) || [];
+      arr.push(element);
+
       const boundTextElement = getBoundTextElement(element);
       if (boundTextElement) {
         _elementsToRemove.set(boundTextElement.id, boundTextElement);
+        arr.push(boundTextElement);
       }
+
+      toRemoveElementsByFrame.set(element.frameId, arr);
     }
   }
 
@@ -506,15 +520,12 @@ export const updateFrameMembershipOfSelectedElements = (
   }
 
   const elementsToRemove = new Set<ExcalidrawElement>();
-  const processedGroupIds = new Map<string, boolean>();
 
   elementsToFilter.forEach((element) => {
     if (
       element.frameId &&
       !isFrameElement(element) &&
-      !isElementInFrame(element, allElements, appState, {
+      !isElementInFrame(element, allElements, appState)
-        processedGroupIds,
-      })
     ) {
       elementsToRemove.add(element);
     }
@@ -576,36 +587,26 @@ export const getTargetFrame = (
     : getContainingFrame(_element);
 };
 
+// TODO: this a huge bottleneck for large scenes, optimise
 // given an element, return if the element is in some frame
 export const isElementInFrame = (
   element: ExcalidrawElement,
   allElements: ExcalidrawElementsIncludingDeleted,
   appState: StaticCanvasAppState,
-  opts?: {
-    targetFrame?: ExcalidrawFrameElement;
-    processedGroupIds?: Map<string, boolean>;
-  },
 ) => {
-  const frame = opts?.targetFrame ?? getTargetFrame(element, appState);
+  const frame = getTargetFrame(element, appState);
   const _element = isTextElement(element)
     ? getContainerElement(element) || element
     : element;
 
-  const groupsInFrame = (yes: boolean) => {
-    if (opts?.processedGroupIds) {
-      _element.groupIds.forEach((gid) => {
-        opts.processedGroupIds?.set(gid, yes);
-      });
-    }
-  };
-
   if (frame) {
     // Perf improvement:
-    // For an element that's already in a frame, if it's not being selected
+    // For an element that's already in a frame, if it's not being dragged
-    // and its frame is not being selected, it has to be in its containing frame.
+    // then there is no need to refer to geometry (which, yes, is slow) to check if it's in a frame.
+    // It has to be in its containing frame.
     if (
-      !appState.selectedElementIds[element.id] &&
+      !appState.selectedElementIds[element.id] ||
-      !appState.selectedElementIds[frame.id]
+      !appState.selectedElementsAreBeingDragged
     ) {
       return true;
     }
@@ -614,21 +615,8 @@ export const isElementInFrame = (
       return elementOverlapsWithFrame(_element, frame);
     }
 
-    for (const gid of _element.groupIds) {
-      if (opts?.processedGroupIds?.has(gid)) {
-        return opts.processedGroupIds.get(gid);
-      }
-    }
-
     const allElementsInGroup = new Set(
-      _element.groupIds
+      _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
-        .filter((gid) => {
-          if (opts?.processedGroupIds) {
-            return !opts.processedGroupIds.has(gid);
-          }
-          return true;
-        })
-        .flatMap((gid) => getElementsInGroup(allElements, gid)),
     );
 
     if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
@@ -649,22 +637,16 @@ export const isElementInFrame = (
 
     for (const elementInGroup of allElementsInGroup) {
       if (isFrameElement(elementInGroup)) {
-        groupsInFrame(false);
         return false;
       }
     }
 
     for (const elementInGroup of allElementsInGroup) {
       if (elementOverlapsWithFrame(elementInGroup, frame)) {
-        groupsInFrame(true);
         return true;
       }
     }
   }
 
-  if (_element.groupIds.length > 0) {
-    groupsInFrame(false);
-  }
-
   return false;
 };

src/groups.ts

@@ -232,8 +232,6 @@ export const selectGroupsFromGivenElements = (
     selectedGroupIds: {},
   };
 
-  const processedGroupIds = new Set<string>();
-
   for (const element of elements) {
     let groupIds = element.groupIds;
     if (appState.editingGroupId) {
@@ -244,13 +242,10 @@ export const selectGroupsFromGivenElements = (
     }
     if (groupIds.length > 0) {
       const groupId = groupIds[groupIds.length - 1];
-      if (!processedGroupIds.has(groupId)) {
+      nextAppState = {
-        nextAppState = {
+        ...nextAppState,
-          ...nextAppState,
+        ...selectGroup(groupId, nextAppState, elements),
-          ...selectGroup(groupId, nextAppState, elements),
+      };
-        };
-        processedGroupIds.add(groupId);
-      }
     }
   }
 

src/packages/excalidraw/CHANGELOG.md

@@ -37,6 +37,18 @@ Please add the latest change on the top under the correct section.
 
 - [`useDevice`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/utils#usedevice) hook's return value was changed to differentiate between `editor` and `viewport` breakpoints. [#7243](https://github.com/excalidraw/excalidraw/pull/7243)
 
+### Build
+
+- Support Preact [#7255](https://github.com/excalidraw/excalidraw/pull/7255). The host needs to set `process.env.IS_PREACT` to `true`
+
+When using vite, you will have to make sure the variable process.env.IS_PREACT is available at runtime since Vite removes it by default, so you can update the vite config to ensure its available
+
+```json
+define: {
+  "process.env.IS_PREACT": process.env.IS_PREACT,
+}
+```
+
 ## 0.16.1 (2023-09-21)
 
 ## Excalidraw Library

src/packages/excalidraw/main.js

@@ -1,4 +1,10 @@
-if (process.env.NODE_ENV === "production") {
+if (process.env.IS_PREACT === "true") {
+  if (process.env.NODE_ENV === "production") {
+    module.exports = require("./dist/excalidraw-with-preact.production.min.js");
+  } else {
+    module.exports = require("./dist/excalidraw-with-preact.development.js");
+  }
+} else if (process.env.NODE_ENV === "production") {
   module.exports = require("./dist/excalidraw.production.min.js");
 } else {
   module.exports = require("./dist/excalidraw.development.js");

src/packages/excalidraw/package.json

@@ -78,7 +78,7 @@
   "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw",
   "scripts": {
     "gen:types": "tsc --project ../../../tsconfig-types.json",
-    "build:umd": "rm -rf dist && cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && yarn gen:types",
+    "build:umd": "rm -rf dist && cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && NODE_ENV=development webpack --config webpack.preact.config.js && NODE_ENV=production webpack --config webpack.preact.config.js && yarn gen:types",
     "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
     "pack": "yarn build:umd && yarn pack",
     "start": "webpack serve --config webpack.dev-server.config.js",

src/packages/excalidraw/webpack.preact.config.js

@@ -0,0 +1,33 @@
+const { merge } = require("webpack-merge");
+
+const prodConfig = require("./webpack.prod.config");
+const devConfig = require("./webpack.dev.config");
+
+const isProd = process.env.NODE_ENV === "production";
+
+const config = isProd ? prodConfig : devConfig;
+const outputFile = isProd
+  ? "excalidraw-with-preact.production.min"
+  : "excalidraw-with-preact.development";
+
+const preactWebpackConfig = {
+  entry: {
+    [outputFile]: "./entry.js",
+  },
+  externals: {
+    ...config.externals,
+    "react-dom/client": {
+      root: "ReactDOMClient",
+      commonjs2: "react-dom/client",
+      commonjs: "react-dom/client",
+      amd: "react-dom/client",
+    },
+    "react/jsx-runtime": {
+      root: "ReactJSXRuntime",
+      commonjs2: "react/jsx-runtime",
+      commonjs: "react/jsx-runtime",
+      amd: "react/jsx-runtime",
+    },
+  },
+};
+module.exports = merge(config, preactWebpackConfig);

src/renderer/renderScene.ts

@@ -71,7 +71,6 @@ import { renderSnaps } from "./renderSnaps";
 import {
   isEmbeddableElement,
   isFrameElement,
-  isFreeDrawElement,
   isLinearElement,
 } from "../element/typeChecks";
 import {
@@ -79,7 +78,7 @@ import {
   createPlaceholderEmbeddableLabel,
 } from "../element/embeddable";
 import {
-  elementsAreInBounds,
+  elementOverlapsWithFrame,
   getTargetFrame,
   isElementInFrame,
 } from "../frame";
@@ -946,79 +945,102 @@ const _renderStaticScene = ({
     );
   }
 
-  // Paint visible elements with embeddables on top
+  const groupsToBeAddedToFrame = new Set<string>();
-  const visibleNonEmbeddableOrLabelElements = visibleElements.filter(
-    (el) => !isEmbeddableOrLabel(el),
-  );
-
-  const visibleEmbeddableOrLabelElements = visibleElements.filter((el) =>
-    isEmbeddableOrLabel(el),
-  );
-
-  const visibleElementsToRender = [
-    ...visibleNonEmbeddableOrLabelElements,
-    ...visibleEmbeddableOrLabelElements,
-  ];
-
-  const _renderElement = (element: ExcalidrawElement) => {
-    try {
-      renderElement(element, rc, context, renderConfig, appState);
-
-      if (
-        isEmbeddableElement(element) &&
-        (isExporting || !element.validated) &&
-        element.width &&
-        element.height
-      ) {
-        const label = createPlaceholderEmbeddableLabel(element);
-        renderElement(label, rc, context, renderConfig, appState);
-      }
-
-      if (!isExporting) {
-        renderLinkIcon(element, context, appState);
-      }
-    } catch (error: any) {
-      console.error(error);
-    }
-  };
-
-  const processedGroupIds = new Map<string, boolean>();
-  for (const element of visibleElementsToRender) {
-    const frameId = element.frameId || appState.frameToHighlight?.id;
 
+  visibleElements.forEach((element) => {
     if (
-      frameId &&
+      element.groupIds.length > 0 &&
-      appState.frameRendering.enabled &&
+      appState.frameToHighlight &&
-      appState.frameRendering.clip
+      appState.selectedElementIds[element.id] &&
+      (elementOverlapsWithFrame(element, appState.frameToHighlight) ||
+        element.groupIds.find((groupId) => groupsToBeAddedToFrame.has(groupId)))
     ) {
-      const targetFrame = getTargetFrame(element, appState);
+      element.groupIds.forEach((groupId) =>
-      // for perf:
+        groupsToBeAddedToFrame.add(groupId),
-      // only clip elements that are not completely in the target frame
+      );
-      if (
-        targetFrame &&
-        !elementsAreInBounds(
-          [element],
-          targetFrame,
-          isFreeDrawElement(element)
-            ? element.strokeWidth * 8
-            : element.roughness * (isLinearElement(element) ? 8 : 4),
-        ) &&
-        isElementInFrame(element, elements, appState, {
-          targetFrame,
-          processedGroupIds,
-        })
-      ) {
-        context.save();
-        frameClip(targetFrame, context, renderConfig, appState);
-        _renderElement(element);
-        context.restore();
-      } else {
-        _renderElement(element);
-      }
-    } else {
-      _renderElement(element);
     }
-  }
+  });
+
+  // Paint visible elements
+  visibleElements
+    .filter((el) => !isEmbeddableOrLabel(el))
+    .forEach((element) => {
+      try {
+        const frameId = element.frameId || appState.frameToHighlight?.id;
+
+        if (
+          frameId &&
+          appState.frameRendering.enabled &&
+          appState.frameRendering.clip
+        ) {
+          context.save();
+
+          const frame = getTargetFrame(element, appState);
+
+          // TODO do we need to check isElementInFrame here?
+          if (frame && isElementInFrame(element, elements, appState)) {
+            frameClip(frame, context, renderConfig, appState);
+          }
+          renderElement(element, rc, context, renderConfig, appState);
+          context.restore();
+        } else {
+          renderElement(element, rc, context, renderConfig, appState);
+        }
+        if (!isExporting) {
+          renderLinkIcon(element, context, appState);
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    });
+
+  // render embeddables on top
+  visibleElements
+    .filter((el) => isEmbeddableOrLabel(el))
+    .forEach((element) => {
+      try {
+        const render = () => {
+          renderElement(element, rc, context, renderConfig, appState);
+
+          if (
+            isEmbeddableElement(element) &&
+            (isExporting || !element.validated) &&
+            element.width &&
+            element.height
+          ) {
+            const label = createPlaceholderEmbeddableLabel(element);
+            renderElement(label, rc, context, renderConfig, appState);
+          }
+          if (!isExporting) {
+            renderLinkIcon(element, context, appState);
+          }
+        };
+        // - when exporting the whole canvas, we DO NOT apply clipping
+        // - when we are exporting a particular frame, apply clipping
+        //   if the containing frame is not selected, apply clipping
+        const frameId = element.frameId || appState.frameToHighlight?.id;
+
+        if (
+          frameId &&
+          appState.frameRendering.enabled &&
+          appState.frameRendering.clip
+        ) {
+          context.save();
+
+          const frame = getTargetFrame(element, appState);
+
+          if (frame && isElementInFrame(element, elements, appState)) {
+            frameClip(frame, context, renderConfig, appState);
+          }
+          render();
+          context.restore();
+        } else {
+          render();
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    });
 };
 
 /** throttled to animation framerate */
@@ -1123,7 +1145,7 @@ const renderTransformHandles = (
 
 const renderSelectionBorder = (
   context: CanvasRenderingContext2D,
-  appState: InteractiveCanvasAppState | StaticCanvasAppState,
+  appState: InteractiveCanvasAppState,
   elementProperties: {
     angle: number;
     elementX1: number;
@@ -1288,23 +1310,6 @@ const renderFrameHighlight = (
   context.restore();
 };
 
-const getSelectionFromElements = (elements: ExcalidrawElement[]) => {
-  const [elementX1, elementY1, elementX2, elementY2] =
-    getCommonBounds(elements);
-  return {
-    angle: 0,
-    elementX1,
-    elementX2,
-    elementY1,
-    elementY2,
-    selectionColors: ["rgb(0,118,255)"],
-    dashed: false,
-    cx: elementX1 + (elementX2 - elementX1) / 2,
-    cy: elementY1 + (elementY2 - elementY1) / 2,
-    activeEmbeddable: false,
-  };
-};
-
 const renderElementsBoxHighlight = (
   context: CanvasRenderingContext2D,
   appState: InteractiveCanvasAppState,
@@ -1318,28 +1323,37 @@ const renderElementsBoxHighlight = (
     (element) => element.groupIds.length > 0,
   );
 
-  const processedGroupIds = new Set<string>();
+  const getSelectionFromElements = (elements: ExcalidrawElement[]) => {
+    const [elementX1, elementY1, elementX2, elementY2] =
+      getCommonBounds(elements);
+    return {
+      angle: 0,
+      elementX1,
+      elementX2,
+      elementY1,
+      elementY2,
+      selectionColors: ["rgb(0,118,255)"],
+      dashed: false,
+      cx: elementX1 + (elementX2 - elementX1) / 2,
+      cy: elementY1 + (elementY2 - elementY1) / 2,
+      activeEmbeddable: false,
+    };
+  };
 
   const getSelectionForGroupId = (groupId: GroupId) => {
-    if (!processedGroupIds.has(groupId)) {
+    const groupElements = getElementsInGroup(elements, groupId);
-      const groupElements = getElementsInGroup(elements, groupId);
+    return getSelectionFromElements(groupElements);
-      processedGroupIds.add(groupId);
-      return getSelectionFromElements(groupElements);
-    }
-
-    return null;
   };
 
   Object.entries(selectGroupsFromGivenElements(elementsInGroups, appState))
     .filter(([id, isSelected]) => isSelected)
     .map(([id, isSelected]) => id)
     .map((groupId) => getSelectionForGroupId(groupId))
-    .filter((selection) => selection)
     .concat(
       individualElements.map((element) => getSelectionFromElements([element])),
     )
     .forEach((selection) =>
-      renderSelectionBorder(context, appState, selection!),
+      renderSelectionBorder(context, appState, selection),
     );
 };