feat: add embed shape

Author: xiaoiver

packages/ecs/src/components/html/Embed.ts

@@ -0,0 +1,50 @@
+import { field, Type } from '@lastolivegames/becsy';
+import { AABB } from '../math';
+
+export class Embed {
+ static getGeometryBounds(embed: Partial<Embed>) {
+ const { x = 0, y = 0, width = 0, height = 0 } = embed;
+ return new AABB(
+ Math.min(x, x + width),
+ Math.min(y, y + height),
+ Math.max(x, x + width),
+ Math.max(y, y + height),
+ );
+ }
+
+ @field({ type: Type.object, default: null }) declare url: string;
+
+ /**
+ * The x attribute defines an x-axis coordinate in the user coordinate system.
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x
+ */
+ @field({ type: Type.float32, default: 0 }) declare x: number;
+
+ /**
+ * The y attribute defines an x-axis coordinate in the user coordinate system.
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y
+ */
+ @field({ type: Type.float32, default: 0 }) declare y: number;
+
+ /**
+ * The width attribute defines the horizontal length of an element in the user coordinate system.
+ * Negative values are allowed.
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width
+ *
+ */
+ @field({ type: Type.float32, default: 0 }) declare width: number;
+
+ /**
+ * The height attribute defines the vertical length of an element in the user coordinate system.
+ * Negative values are allowed.
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height
+ *
+ */
+ @field({ type: Type.float32, default: 0 }) declare height: number;
+
+ constructor(props?: Partial<Embed>) {
+ if (props) {
+ Object.assign(this, props);
+ }
+ }
+}

packages/ecs/src/components/html/index.ts

@@ -1,2 +1,3 @@
 export * from './HTML';
 export * from './HTMLContainer';
+export * from './Embed';

packages/ecs/src/history/ElementsChange.ts

@@ -41,6 +41,7 @@ import {
  Line,
  LockAspectRatio,
  HTML,
+ Embed,
 } from '../components';
 
 export type SceneElementsMap = Map<SerializedNode['id'], SerializedNode>;
@@ -859,6 +860,8 @@ export const mutateElement = <TElement extends Mutable<SerializedNode>>(
  });
  } else if (entity.has(HTML)) {
  entity.write(HTML).width = width;
+ } else if (entity.has(Embed)) {
+ entity.write(Embed).width = width;
  }
  }
  if (!isNil(height)) {
@@ -871,6 +874,8 @@ export const mutateElement = <TElement extends Mutable<SerializedNode>>(
  });
  } else if (entity.has(HTML)) {
  entity.write(HTML).height = height;
+ } else if (entity.has(Embed)) {
+ entity.write(Embed).height = height;
  }
  }
  if (!isNil(points)) {

packages/ecs/src/plugins/HTML.ts

@@ -1,10 +1,11 @@
 import { component, system } from '@lastolivegames/becsy';
 import { Plugin } from './types';
-import { HTML, HTMLContainer } from '../components';
+import { HTML, HTMLContainer, Embed } from '../components';
 import { Deleter, Last, RenderHTML } from '../systems';
 
 export const HTMLPlugin: Plugin = () => {
  component(HTML);
+ component(Embed);
  component(HTMLContainer);
 
  system(Last)(RenderHTML);

packages/ecs/src/systems/ComputeBounds.ts

@@ -8,6 +8,7 @@ import {
  ComputedTextMetrics,
  DropShadow,
  Ellipse,
+ Embed,
  GlobalTransform,
  HTML,
  Line,
@@ -63,6 +64,7 @@ export class ComputeBounds extends System {
  Stroke,
  DropShadow,
  HTML,
+ Embed,
  ).read,
  );
  }
@@ -138,6 +140,9 @@ export class ComputeBounds extends System {
  } else if (entity.has(HTML)) {
  geometryBounds = HTML.getGeometryBounds(entity.read(HTML));
  renderBounds = geometryBounds;
+ } else if (entity.has(Embed)) {
+ geometryBounds = Embed.getGeometryBounds(entity.read(Embed));
+ renderBounds = geometryBounds;
  }
 
  const hitArea = entity.has(Renderable)

packages/ecs/src/systems/RenderHTML.ts

@@ -7,22 +7,27 @@ import {
  HTMLContainer,
  GlobalTransform,
  Mat3,
+ Embed,
 } from '../components';
 import { getSceneRoot } from '../systems';
-import { isBrowser, toDomPrecision } from '../utils';
+import { isBrowser, safeParseUrl, toDomPrecision } from '../utils';
 
 export class RenderHTML extends System {
  private readonly htmls = this.query(
  (q) => q.added.and.changed.with(HTML, GlobalTransform).trackWrites,
  );
 
+ private readonly embeds = this.query(
+ (q) => q.added.and.changed.with(Embed, GlobalTransform).trackWrites,
+ );
+
  constructor() {
  super();
  this.query(
  (q) =>
  q
  .using(Camera, Canvas, Children, GlobalTransform)
- .read.and.using(HTMLContainer).write,
+ .read.and.using(HTMLContainer, Embed).write,
  );
  }
 
@@ -51,7 +56,7 @@ export class RenderHTML extends System {
  $child.innerHTML = html;
  $child.style.position = 'absolute';
  $child.style.pointerEvents = 'none';
- $child.style.overflow = 'visible';
+ $child.style.overflow = 'hidden';
  $child.style.transformOrigin = 'top left';
  $child.style.contain = 'size layout';
 
@@ -66,13 +71,102 @@ export class RenderHTML extends System {
  const { width, height } = entity.read(HTML);
  this.updateCSSTransform($child, matrix, width, height);
  });
+
+ this.embeds.added.forEach((entity) => {
+ const { url, width, height } = entity.read(Embed);
+ const { element } = entity.read(HTMLContainer);
+
+ // Create HTML container if not exists.
+ if (!element) {
+ entity.write(HTMLContainer).element = document.createElement('div');
+ }
+
+ const { matrix } = entity.read(GlobalTransform);
+
+ const camera = getSceneRoot(entity);
+ const { canvas } = camera.read(Camera);
+ const { api } = canvas.read(Canvas);
+ const htmlLayer = api.getHtmlLayer();
+
+ const $child = entity.read(HTMLContainer).element;
+ $child.style.position = 'absolute';
+ $child.style.pointerEvents = 'none';
+ $child.style.overflow = 'hidden';
+ $child.style.transformOrigin = 'top left';
+ $child.style.contain = 'size layout';
+
+ let embedUrl = url;
+ const urlObj = safeParseUrl(url);
+ if (urlObj) {
+ const hostname = urlObj.hostname.replace(/^www./, '');
+ if (hostname === 'youtu.be') {
+ const videoId = urlObj.pathname.split('/').filter(Boolean)[0];
+ const searchParams = new URLSearchParams(urlObj.search);
+ const timeStart = searchParams.get('t');
+ if (timeStart) {
+ searchParams.set('start', timeStart);
+ searchParams.delete('t');
+ }
+ const search = searchParams.toString()
+ ? '?' + searchParams.toString()
+ : '';
+ embedUrl = `https://www.youtube.com/embed/${videoId}${search}`;
+ } else if (
+ (hostname === 'youtube.com' || hostname === 'm.youtube.com') &&
+ urlObj.pathname.match(/^\/watch/)
+ ) {
+ const videoId = urlObj.searchParams.get('v');
+ const searchParams = new URLSearchParams(urlObj.search);
+ searchParams.delete('v');
+ const timeStart = searchParams.get('t');
+ if (timeStart) {
+ searchParams.set('start', timeStart);
+ searchParams.delete('t');
+ }
+ const search = searchParams.toString()
+ ? '?' + searchParams.toString()
+ : '';
+ embedUrl = `https://www.youtube.com/embed/${videoId}${search}`;
+ }
+ }
+
+ const $iframe = document.createElement('iframe');
+ $iframe.src = embedUrl;
+ $iframe.draggable = false;
+ $iframe.frameBorder = '0';
+ $iframe.referrerPolicy = 'no-referrer-when-downgrade';
+ $iframe.tabIndex = -1;
+ $iframe.style.border = '0';
+ $iframe.style.pointerEvents = 'none';
+ $iframe.sandbox = getSandboxPermissions({
+ ...embedShapePermissionDefaults,
+ ...{
+ 'allow-presentation': true,
+ 'allow-popups-to-escape-sandbox': true,
+ },
+ });
+
+ $child.appendChild($iframe);
+ htmlLayer.appendChild($child);
+
+ this.updateCSSTransform($child, matrix, width, height, $iframe);
+ });
+
+ this.embeds.changed.forEach((entity) => {
+ const $child = entity.read(HTMLContainer).element;
+ const $iframe = $child.querySelector('iframe');
+ const { matrix } = entity.read(GlobalTransform);
+ const { width, height } = entity.read(Embed);
+ this.updateCSSTransform($child, matrix, width, height, $iframe);
+ });
  }
 
  private updateCSSTransform(
  $child: HTMLElement,
  matrix: Mat3,
  width: number,
  height: number,
+ $iframe?: HTMLIFrameElement,
  ) {
  $child.style.transform = `matrix(${toDomPrecision(
  matrix.m00,
@@ -83,5 +177,74 @@ export class RenderHTML extends System {
  )}, ${toDomPrecision(matrix.m21)})`;
  $child.style.width = `${toDomPrecision(width)}px`;
  $child.style.height = `${toDomPrecision(height)}px`;
+
+ if ($iframe) {
+ $iframe.width = `${toDomPrecision(width)}px`;
+ $iframe.height = `${toDomPrecision(height)}px`;
+ }
  }
 }
+
+const getSandboxPermissions = (permissions: TLEmbedShapePermissions) => {
+ return Object.entries(permissions)
+ .filter(([_perm, isEnabled]) => isEnabled)
+ .map(([perm]) => perm)
+ .join(' ');
+};
+
+export type TLEmbedShapePermissions = {
+ [K in keyof typeof embedShapePermissionDefaults]?: boolean;
+};
+/**
+ * Permissions with note inline from
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
+ *
+ * @see https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/defaultEmbedDefinitions.ts#L606
+ */
+export const embedShapePermissionDefaults = {
+ // ========================================================================================
+ // Disabled permissions
+ // ========================================================================================
+ // [MDN] Experimental: Allows for downloads to occur without a gesture from the user.
+ // [REASON] Disabled because otherwise the <iframe/> can trick the user on behalf of us to perform an action.
+ 'allow-downloads-without-user-activation': false,
+ // [MDN] Allows for downloads to occur with a gesture from the user.
+ // [REASON] Disabled because otherwise the <iframe/> can trick the user on behalf of us to perform an action.
+ 'allow-downloads': false,
+ // [MDN] Lets the resource open modal windows.
+ // [REASON] The <iframe/> could 'window.prompt("Enter your tldraw password")'.
+ 'allow-modals': false,
+ // [MDN] Lets the resource lock the screen orientation.
+ // [REASON] Would interfere with the tldraw interface.
+ 'allow-orientation-lock': false,
+ // [MDN] Lets the resource use the Pointer Lock API.
+ // [REASON] Maybe we should allow this for games embeds (scratch/codepen/codesandbox).
+ 'allow-pointer-lock': false,
+ // [MDN] Allows popups (such as window.open(), target="_blank", or showModalDialog()). If this keyword is not used, the popup will silently fail to open.
+ // [REASON] We want to allow embeds to link back to their original sites (e.g. YouTube).
+ 'allow-popups': true,
+ // [MDN] Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.
+ // [REASON] We shouldn't allow popups as a embed could pretend to be us by opening a mocked version of tldraw. This is very unobvious when it is performed as an action within our app.
+ 'allow-popups-to-escape-sandbox': false,
+ // [MDN] Lets the resource start a presentation session.
+ // [REASON] Prevents embed from navigating away from tldraw and pretending to be us.
+ 'allow-presentation': false,
+ // [MDN] Experimental: Lets the resource request access to the parent's storage capabilities with the Storage Access API.
+ // [REASON] We don't want anyone else to access our storage.
+ 'allow-storage-access-by-user-activation': false,
+ // [MDN] Lets the resource navigate the top-level browsing context (the one named _top).
+ // [REASON] Prevents embed from navigating away from tldraw and pretending to be us.
+ 'allow-top-navigation': false,
+ // [MDN] Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.
+ // [REASON] Prevents embed from navigating away from tldraw and pretending to be us.
+ 'allow-top-navigation-by-user-activation': false,
+ // ========================================================================================
+ // Enabled permissions
+ // ========================================================================================
+ // [MDN] Lets the resource run scripts (but not create popup windows).
+ 'allow-scripts': true,
+ // [MDN] If this token is not used, the resource is treated as being from a special origin that always fails the same-origin policy (potentially preventing access to data storage/cookies and some JavaScript APIs).
+ 'allow-same-origin': true,
+ // [MDN] Allows the resource to submit forms. If this keyword is not used, form submission is blocked.
+ 'allow-forms': true,
+} as const;

packages/ecs/src/systems/Select.ts

@@ -46,6 +46,7 @@ import {
  ToBeDeleted,
  Brush,
  HTML,
+ Embed,
 } from '../components';
 import { Commands } from '../commands/Commands';
 import {
@@ -145,6 +146,7 @@ export class Select extends System {
  Opacity,
  Stroke,
  HTML,
+ Embed,
  Rect,
  Circle,
  Ellipse,