fix: ecs test case

Author: xiaoiver

packages/ecs/src/systems/GridRenderer.ts

@@ -95,8 +95,9 @@ export class GridRenderer {
  ],
  });
  }
-
- this.#program.setUniformsLegacy(uniformLegacyObject);
+ if (uniformLegacyObject) {
+ this.#program.setUniformsLegacy(uniformLegacyObject);
+ }
  renderPass.setBindings(this.#bindings);
  renderPass.setPipeline(this.#pipeline);
  renderPass.setVertexInput(

packages/ecs/src/systems/MeshPipeline.ts

@@ -282,6 +282,9 @@ export class MeshPipeline extends System {
  return;
  }
 
+ let renderer: GPURenderer;
+ let gpuResource = canvas.read(GPUResource);
+
  const request = canvas.has(RasterScreenshotRequest)
  ? canvas.read(RasterScreenshotRequest)
  : null;
@@ -294,41 +297,34 @@ export class MeshPipeline extends System {
  const shouldRenderGrid = !request || grid;
  const shouldRenderPartially = nodes.length > 0;
 
- let renderer: GPURenderer;
- let gpuResource: GPUResource;
  if (shouldRenderPartially) {
  // Render to offscreen canvas.
  gpuResource = this.setupDevice.getOffscreenGPUResource();
  renderer = this.createRenderer(gpuResource);
  } else {
- gpuResource = canvas.read(GPUResource);
  if (!this.renderers.get(camera)) {
  this.renderers.set(camera, this.createRenderer(gpuResource));
  }
  renderer = this.renderers.get(camera);
- const { batchManager } = renderer;
- if (request) {
- batchManager.hideUIs();
- }
  }
 
  const { swapChain, device, renderTarget, depthRenderTarget } = gpuResource;
- const { uniformBuffer, uniformLegacyObject, gridRenderer, batchManager } =
- renderer;
+ const { uniformBuffer, gridRenderer, batchManager } = renderer;
 
  const { width, height } = swapChain.getCanvas();
  const onscreenTexture = swapChain.getOnscreenTexture();
 
+ if (request) {
+ batchManager.hideUIs();
+ }
+
  const [buffer, legacyObject] = this.updateUniform(
  canvas,
  camera,
  shouldRenderGrid,
  swapChain,
  );
- this.renderers.set(camera, {
- ...this.renderers.get(camera),
- uniformLegacyObject: legacyObject,
- });
+ renderer.uniformLegacyObject = legacyObject;
 
  uniformBuffer.setSubData(0, new Uint8Array(buffer.buffer));
 
@@ -343,7 +339,7 @@ export class MeshPipeline extends System {
  });
  renderPass.setViewport(0, 0, width, height);
 
- gridRenderer.render(device, renderPass, uniformBuffer, uniformLegacyObject);
+ gridRenderer.render(device, renderPass, uniformBuffer, legacyObject);
 
  if (shouldRenderPartially) {
  const { api } = canvas.read(Canvas);
@@ -367,7 +363,7 @@ export class MeshPipeline extends System {
  if (sort) {
  batchManager.sort();
  }
- batchManager.flush(renderPass, uniformBuffer, uniformLegacyObject);
+ batchManager.flush(renderPass, uniformBuffer, legacyObject);
 
  device.submitPass(renderPass);
  device.endFrame();

packages/ecs/src/systems/SetupDevice.ts

@@ -150,6 +150,16 @@ export class SetupDevice extends System {
  this.destroyCanvas(canvas);
  });
 
+ if (this.#offscreenElement) {
+ const { device, renderTarget, depthRenderTarget, renderCache } =
+ this.#offscreenGPUResource;
+ renderCache.destroy();
+ renderTarget.destroy();
+ depthRenderTarget.destroy();
+ device.destroy();
+ device.checkForLeaks();
+ }
+
  this.#texturePool.destroy();
  }
 

packages/ecs/src/utils/serialize/type.ts

@@ -296,6 +296,13 @@ export interface VectorNetworkSerializedNode
  extends BaseSerializeNode<'vector-network'>,
  Partial<VectorNetworkAttributes> {}
 
+export interface HtmlAttributes {
+ html: string;
+}
+export interface HtmlSerializedNode
+ extends BaseSerializeNode<'html'>,
+ Partial<HtmlAttributes> {}
+
 export type SerializedNode =
  | GSerializedNode
  | EllipseSerializedNode
@@ -307,7 +314,8 @@ export type SerializedNode =
  | BrushSerializedNode
  | RoughRectSerializedNode
  | RoughEllipseSerializedNode
- | VectorNetworkSerializedNode;
+ | VectorNetworkSerializedNode
+ | HtmlSerializedNode;
 
 export type SerializedNodeAttributes = GSerializedNode &
  EllipseSerializedNode &
@@ -319,4 +327,5 @@ export type SerializedNodeAttributes = GSerializedNode &
  BrushSerializedNode &
  RoughRectSerializedNode &
  RoughEllipseSerializedNode &
- VectorNetworkSerializedNode;
+ VectorNetworkSerializedNode &
+ HtmlSerializedNode;

packages/site/docs/.vitepress/config/en.ts

@@ -127,6 +127,10 @@ export const en = defineConfig({
  text: 'Lesson 028 - Integrating with AI',
  link: 'lesson-028',
  },
+ {
+ text: 'Lesson 029 - Embedding HTML content',
+ link: 'lesson-029',
+ },
  ],
  },
  ],

packages/site/docs/.vitepress/config/zh.ts

@@ -78,6 +78,7 @@ export const zh = defineConfig({
  { text: '课程26 - 选择工具', link: 'lesson-026' },
  { text: '课程27 - 吸附与对齐', link: 'lesson-027' },
  { text: '课程28 - 与 AI 结合', link: 'lesson-028' },
+ { text: '课程29 - 嵌入 HTML 内容', link: 'lesson-029' },
  ],
  },
  ],

packages/site/docs/guide/lesson-029.md

@@ -0,0 +1,6 @@
+---
+outline: deep
+description: ''
+---
+
+# Lesson 29 - Embedding HTML content

packages/site/docs/public/html-in-tldraw.png

@@ -117,6 +117,14 @@ console.log(result.data); // { image: [{ url: 'https://...' }]; description: 'Su
 
 目前 GPT 4o 仅支持三种固定尺寸，而 Nano banana 想实现任意图片尺寸输出需要借助一些 hack 手段，例如传入一张指定尺寸的空白图作为参考图并在 prompt 中强调。我们可以通过画布操作让它变的十分自然：用户只需要拖拽到合适的尺寸即可，应用通过 Canvas API 自动生成这个空白的参考图。
 
+## MCP
+
+来自 [MCP: What It Is and Why It Matters]：
+
+> Instead of only having a GUI or API that humans use, you get an AI interface “for free.” This idea has led to the concept of “MCP-first development”, where you build the MCP server for your app before or alongside the GUI.
+
+[Figma MCP Server] 可以操作 [Figma API]
+
 [课程 21 - Transformer]: /zh/guide/lesson-021
 [UI for AI]: https://medium.com/ui-for-ai
 [课程 1 - 硬件抽象层]: /zh/guide/lesson-001#hardware-abstraction-layers
@@ -129,3 +137,6 @@ console.log(result.data); // { image: [{ url: 'https://...' }]; description: 'Su
 [课程 26 - 选择工具]: /zh/guide/lesson-026#marquee-selection
 [课程 25 - 绘制模式与笔刷]: /zh/guide/lesson-025#brush-mode
 [Paper Shaders]: https://shaders.paper.design/
+[MCP: What It Is and Why It Matters]: https://addyo.substack.com/p/mcp-what-it-is-and-why-it-matters
+[Figma MCP Server]: https://github.com/GLips/Figma-Context-MCP
+[Figma API]: https://www.figma.com/developers/api

packages/site/docs/zh/guide/lesson-028.md

@@ -1,17 +1,45 @@
 ---
 outline: deep
-description: '探索MCP（模型上下文协议）在设计工具中的应用。学习如何为应用构建AI界面，实现MCP优先的开发模式。'
-publish: false
+description: ''
 ---
 
-# 课程 29 - MCP
+# 课程 29 - 嵌入 HTML 内容
 
-来自 [MCP: What It Is and Why It Matters]：
+有时候我们希望在画布中嵌入 HTML 内容，例如 YouTube 播放器、CodeSandbox 组件、ShaderToy 等等。
 
-> Instead of only having a GUI or API that humans use, you get an AI interface “for free.” This idea has led to the concept of “MCP-first development”, where you build the MCP server for your app before or alongside the GUI.
+## HTML
 
-[Figma MCP Server] 可以操作 [Figma API]
+Excalidraw 并不支持在画布中嵌入 HTML 内容，但 tldraw 支持 [TLEmbedShape]。它在网页中将一个 HTML 容器（含 iframe 或其他元素）和画布 `<svg>` 元素并排或叠加显示，而不是“完全”在单一画布内部。
 
-[MCP: What It Is and Why It Matters]: https://addyo.substack.com/p/mcp-what-it-is-and-why-it-matters
-[Figma MCP Server]: https://github.com/GLips/Figma-Context-MCP
-[Figma API]: https://www.figma.com/developers/api
+![HTML external content in tldraw](/html-in-tldraw.png)
+
+在 [External content sources] 例子中，我们可以看到 tldraw 是这样支持 HTML 内容的：
+
+```ts
+class DangerousHtmlExample extends BaseBoxShapeUtil<IDangerousHtmlShape> {
+ static override type = 'html' as const;
+
+ override getDefaultProps() {
+ return {
+ type: 'html',
+ w: 500,
+ h: 300,
+ html: '<div>hello</div>',
+ };
+ }
+}
+```
+
+我们也增加一种可序列化图形：
+
+```ts
+export interface HtmlAttributes {
+ html: string;
+}
+export interface HtmlSerializedNode
+ extends BaseSerializeNode<'html'>,
+ Partial<HtmlAttributes> {}
+```
+
+[External content sources]: https://tldraw.dev/examples/external-content-sources
+[TLEmbedShape]: https://tldraw.dev/reference/tlschema/TLEmbedShape