frame bg: make legacy scenes opt-in

packages/element/src/newElement.ts

@@ -10,6 +10,7 @@ import {
   getFontString,
   getUpdatedTimestamp,
   getLineHeight,
+  isTransparent,
 } from "@excalidraw/common";
 
 import type { Radians } from "@excalidraw/math";
@@ -185,11 +186,13 @@ export const newFrameElement = (
     name?: string;
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawFrameElement> => {
+  const frameBase = _newElementBase<ExcalidrawFrameElement>("frame", opts);
   const frameElement = newElementWith(
     {
-      ..._newElementBase<ExcalidrawFrameElement>("frame", opts),
+      ...frameBase,
       type: "frame",
       name: opts?.name || null,
+      backgroundEnabled: !isTransparent(frameBase.backgroundColor),
     },
     {},
   );

packages/element/src/renderElement.ts

@@ -787,7 +787,7 @@ export const renderFrameBackground = (
     roundCorners?: boolean;
   },
 ) => {
-  if (isTransparent(frame.backgroundColor)) {
+  if (!frame.backgroundEnabled || isTransparent(frame.backgroundColor)) {
     return;
   }
 

packages/element/src/types.ts

@@ -163,6 +163,7 @@ export type InitializedExcalidrawImageElement = MarkNonNullable<
 export type ExcalidrawFrameElement = _ExcalidrawElementBase & {
   type: "frame";
   name: string | null;
+  backgroundEnabled: boolean;
 };
 
 export type ExcalidrawMagicFrameElement = _ExcalidrawElementBase & {