From 178eca5828364f3e4ee48ef849d51d98cc13b0a3 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Thu, 31 Jul 2025 22:10:59 +1000
Subject: [PATCH] fix: add frame clipping to new element canvas (#9794)

* fix: add frame clipping to new element canvas

* cleanup save/restore

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 .../renderer/renderNewElementScene.ts         | 31 +++++++++++++++++--
 packages/excalidraw/renderer/staticScene.ts   |  2 +-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/excalidraw/renderer/renderNewElementScene.ts b/packages/excalidraw/renderer/renderNewElementScene.ts
index dea62bfc0..07215dfc0 100644
--- a/packages/excalidraw/renderer/renderNewElementScene.ts
+++ b/packages/excalidraw/renderer/renderNewElementScene.ts
@@ -1,9 +1,16 @@
 import { throttleRAF } from "@excalidraw/common";
 
-import { isInvisiblySmallElement, renderElement } from "@excalidraw/element";
+import {
+  getTargetFrame,
+  isInvisiblySmallElement,
+  renderElement,
+  shouldApplyFrameClip,
+} from "@excalidraw/element";
 
 import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
 
+import { frameClip } from "./staticScene";
+
 import type { NewElementSceneRenderConfig } from "../scene/types";
 
 const _renderNewElementScene = ({
@@ -29,8 +36,9 @@ const _renderNewElementScene = ({
       normalizedHeight,
     });
 
-    // Apply zoom
     context.save();
+
+    // Apply zoom
     context.scale(appState.zoom.value, appState.zoom.value);
 
     if (newElement && newElement.type !== "selection") {
@@ -42,6 +50,23 @@ const _renderNewElementScene = ({
         return;
       }
 
+      const frameId = newElement.frameId || appState.frameToHighlight?.id;
+
+      if (
+        frameId &&
+        appState.frameRendering.enabled &&
+        appState.frameRendering.clip
+      ) {
+        const frame = getTargetFrame(newElement, elementsMap, appState);
+
+        if (
+          frame &&
+          shouldApplyFrameClip(newElement, frame, appState, elementsMap)
+        ) {
+          frameClip(frame, context, renderConfig, appState);
+        }
+      }
+
       renderElement(
         newElement,
         elementsMap,
@@ -54,6 +79,8 @@ const _renderNewElementScene = ({
     } else {
       context.clearRect(0, 0, normalizedWidth, normalizedHeight);
     }
+
+    context.restore();
   }
 };
 
diff --git a/packages/excalidraw/renderer/staticScene.ts b/packages/excalidraw/renderer/staticScene.ts
index 18cf0092d..866eb3da1 100644
--- a/packages/excalidraw/renderer/staticScene.ts
+++ b/packages/excalidraw/renderer/staticScene.ts
@@ -113,7 +113,7 @@ const strokeGrid = (
   context.restore();
 };
 
-const frameClip = (
+export const frameClip = (
   frame: ExcalidrawFrameLikeElement,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,