Add stackedOnTop to make sure the custom element is always rendered on top of all when stackedOnTop is true

src/components/App.tsx

@@ -398,7 +398,7 @@ class App extends React.Component<AppProps, AppState> {
       id: this.id,
     };
 
-    this.scene = new Scene();
+    this.scene = new Scene(this);
     this.library = new Library(this);
     this.history = new History();
     this.actionManager = new ActionManager(

src/constants.ts

@@ -159,6 +159,7 @@ export const DEFAULT_CUSTOM_ELEMENT_CONFIG: Required<CustomElementConfig> = {
   svg: "",
   width: 40,
   height: 40,
+  stackedOnTop: false,
 };
 export const MQ_MAX_WIDTH_PORTRAIT = 730;
 export const MQ_MAX_WIDTH_LANDSCAPE = 1000;

src/packages/excalidraw/example/App.js

@@ -202,6 +202,7 @@ export default function App() {
         <path d="M256 32C114.6 32 .0272 125.1 .0272 240c0 47.63 19.91 91.25 52.91 126.2c-14.88 39.5-45.87 72.88-46.37 73.25c-6.625 7-8.375 17.25-4.625 26C5.818 474.2 14.38 480 24 480c61.5 0 109.1-25.75 139.1-46.25C191.1 442.8 223.3 448 256 448c141.4 0 255.1-93.13 255.1-208S397.4 32 256 32zM256.1 400c-26.75 0-53.12-4.125-78.38-12.12l-22.75-7.125l-19.5 13.75c-14.25 10.12-33.88 21.38-57.5 29c7.375-12.12 14.37-25.75 19.88-40.25l10.62-28l-20.62-21.87C69.82 314.1 48.07 282.2 48.07 240c0-88.25 93.25-160 208-160s208 71.75 208 160S370.8 400 256.1 400z" />
       </svg>`)}`,
         transformHandles: false,
+        stackedOnTop: true,
       },
     ];
   };

src/scene/Scene.ts

@@ -5,6 +5,9 @@ import {
 } from "../element/types";
 import { getNonDeletedElements, isNonDeletedElement } from "../element";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import App from "../components/App";
+import { isCustomElement } from "../element/typeChecks";
+import { getCustomElementConfig } from "../utils";
 
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
 type ElementKey = ExcalidrawElement | ElementIdKey;
@@ -26,7 +29,11 @@ class Scene {
 
   private static sceneMapByElement = new WeakMap<ExcalidrawElement, Scene>();
   private static sceneMapById = new Map<string, Scene>();
+  private app: App;
 
+  constructor(app: App) {
+    this.app = app;
+  }
   static mapElementToScene(elementKey: ElementKey, scene: Scene) {
     if (isIdKey(elementKey)) {
       this.sceneMapById.set(elementKey, scene);
@@ -91,12 +98,29 @@ class Scene {
   }
 
   replaceAllElements(nextElements: readonly ExcalidrawElement[]) {
-    this.elements = nextElements;
+    this.elements = [];
+    const elements: ExcalidrawElement[] = [];
     this.elementsMap.clear();
+    const elementsToBeStackedOnTop: ExcalidrawElement[] = [];
     nextElements.forEach((element) => {
+      if (isCustomElement(element)) {
+        const config = getCustomElementConfig(
+          this.app.props.customElementsConfig,
+          element.customType,
+        );
+        if (config?.stackedOnTop) {
+          elementsToBeStackedOnTop.push(element);
+        } else {
+          elements.push(element);
+        }
+      } else {
+        elements.push(element);
+      }
       this.elementsMap.set(element.id, element);
       Scene.mapElementToScene(element, this);
     });
+    elementsToBeStackedOnTop.forEach((ele) => elements.push(ele));
+    this.elements = elements;
     this.nonDeletedElements = getNonDeletedElements(this.elements);
     this.informMutation();
   }

src/types.ts

@@ -215,6 +215,7 @@ export type CustomElementConfig = {
   svg: string;
   width?: number;
   height?: number;
+  stackedOnTop: boolean;
 };
 export interface ExcalidrawProps {
   onChange?: (