fix(2d): switch iframes to ShadowDOM (#90)

Fixes an issue in Firefox, where appending nodes to an iframe didn't work.

packages/2d/src/components/Image.ts

@@ -7,7 +7,6 @@ import {computed, initial, property} from '../decorators';
 import {Color, Rect as RectType, Vector2} from '@motion-canvas/core/lib/types';
 import {drawImage} from '../utils';
 import {Rect, RectProps} from './Rect';
-import {View2D} from '../scenes';
 
 export interface ImageProps extends RectProps {
   src?: SignalValue<string>;
@@ -40,7 +39,7 @@ export class Image extends Rect {
       return Image.pool[src];
     }
 
-    const image = View2D.document.createElement('img');
+    const image = document.createElement('img');
     image.src = src;
     if (!image.complete) {
       collectPromise(

packages/2d/src/components/Layout.ts

@@ -37,7 +37,6 @@ import {
 import {threadable} from '@motion-canvas/core/lib/decorators';
 import {ThreadGenerator} from '@motion-canvas/core/lib/threading';
 import {Node, NodeProps} from './Node';
-import {View2D} from '../scenes';
 import {drawLine, lineTo} from '../utils';
 import {spacingProperty, SpacingProperty} from '../decorators/spacingProperty';
 
@@ -356,7 +355,7 @@ export class Layout extends Node {
   public constructor({tagName = 'div', ...props}: LayoutProps) {
     super(props);
 
-    this.element = View2D.document.createElement(tagName);
+    this.element = document.createElement(tagName);
     this.element.style.display = 'flex';
     this.element.style.boxSizing = 'border-box';
 

packages/2d/src/components/Video.ts

@@ -8,7 +8,6 @@ import {
   useProject,
   useThread,
 } from '@motion-canvas/core/lib/utils';
-import {View2D} from '../scenes';
 import {PlaybackState} from '@motion-canvas/core';
 import {clamp} from '@motion-canvas/core/lib/tweening';
 import {Rect, RectProps} from './Rect';
@@ -62,7 +61,7 @@ export class Video extends Rect {
       return Video.pool[key];
     }
 
-    const video = View2D.document.createElement('video');
+    const video = document.createElement('video');
     video.src = src;
     if (video.readyState < 2) {
       collectPromise(

packages/2d/src/components/index.ts

@@ -1,5 +1,4 @@
 export * from './Circle';
-export * from './CodeBlock';
 export * from './Image';
 export * from './Layout';
 export * from './Line';

packages/2d/src/scenes/View2D.ts

@@ -2,23 +2,21 @@ import {Layout, Node} from '../components';
 
 export class View2D extends Layout {
   public static frameID = 'motion-canvas-2d-frame';
-  public static document: Document;
+  public static shadowRoot: ShadowRoot;
 
   static {
-    let frame = document.querySelector<HTMLIFrameElement>(`#${View2D.frameID}`);
+    let frame = document.querySelector<HTMLDivElement>(`#${View2D.frameID}`);
     if (!frame) {
-      frame = document.createElement('iframe');
+      frame = document.createElement('div');
       frame.id = View2D.frameID;
       frame.style.position = 'absolute';
       frame.style.pointerEvents = 'none';
       frame.style.top = '0';
       frame.style.left = '0';
       frame.style.opacity = '0';
-      frame.style.border = 'none';
-
       document.body.prepend(frame);
     }
-    this.document = frame.contentDocument ?? document;
+    View2D.shadowRoot = frame.shadowRoot ?? frame.attachShadow({mode: 'open'});
   }
 
   private registeredNodes: Record<string, Node> = {};
@@ -38,7 +36,7 @@ export class View2D extends Layout {
       fontStyle: 'normal',
     });
 
-    View2D.document.body.append(this.element);
+    View2D.shadowRoot.append(this.element);
     this.applyFlex();
   }