📚 Add wasm playground internal docs

2025-12-11 22:14:05 +01:00 · 2025-08-28 14:36:53 +02:00
parent 2106028350
commit b78e3159d1
3 changed files with 122 additions and 0 deletions
--- a/frontend/resources/wasm-playground/index.html
+++ b/frontend/resources/wasm-playground/index.html
@@ -0,0 +1,27 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WASM Playground Home</title>
+    <style>
+        body { font-family: sans-serif; margin: 2em; }
+        h1 { margin-bottom: 1em; }
+        ul { list-style: none; padding: 0; }
+        li { margin: 0.5em 0; }
+        a { text-decoration: none; color: #3366cc; font-size: 1.1em; }
+        a:hover { text-decoration: underline; }
+    </style>
+</head>
+<body>
+    <h1>WASM Playground Home</h1>
+    <ul>
+        <li><a href="comparison.html">comparison.html</a></li>
+        <li><a href="clips.html">clips.html</a></li>
+        <li><a href="masks.html">masks.html</a></li>
+        <li><a href="paths.html">paths.html</a></li>
+        <li><a href="plus.html">plus.html</a></li>
+        <li><a href="rects.html">rects.html</a></li>
+        <li><a href="texts.html">texts.html</a></li>
+    </ul>
+</body>
+</html>
--- a/render-wasm/docs/images/wasm_playground_renderer.png
+++ b/render-wasm/docs/images/wasm_playground_renderer.png
--- a/render-wasm/docs/test_playground.md
+++ b/render-wasm/docs/test_playground.md
@@ -0,0 +1,95 @@
+# WASM Playground
+
+We've created an isolated playground environment for rapid rendering testing. There are two types of playgrounds:
+
+- Shapes Playground
+- Text Editor Playground
+
+## File Structure
+
+The playground files are located in:
+
+```
+frontend/resources/wasm-playground/
+├── clips.html
+├── comparison.html
+├── index.html
+├── masks.html
+├── paths.html
+├── plus.html
+├── rects.html
+├── texts.html
+└── js/
+```
+
+Each HTML file is a separate playground demo. The `js/` directory contains shared JavaScript modules and utilities.
+
+## Shapes Playground
+
+- Run penpot locally
+- Go to http://localhost:3449/wasm-playground/
+- The `index.html` page lists all available playgrounds for easy navigation.
+
+For the different kinds of shape playgrounds, you can set the amount of shapes you want to render each time by passing a query parameter. For example:
+
+    http://localhost:3449/wasm-playground/texts.html?texts=300
+
+This will render 300 text shapes. You can adjust the parameter for other playgrounds as well to control the number of shapes rendered.
+
+![WASM Playground Renderer](images/wasm_playground_renderer.png)
+
+### How to Add a New Playground Test
+
+1. **Create a new HTML file** in `frontend/resources/wasm-playground/` (e.g., `mytest.html`).
+2. Use one of the existing playground HTML files as a template (such as `clips.html` or `comparison.html`).
+3. Import the necessary modules from `js/lib.js` or other shared scripts.
+4. Add your test logic in a `<script type="module">` block.
+5. Add the file to the home page (`index.html`)
+
+
+
+### How It Works
+
+- Each playground HTML file loads the required JavaScript modules and sets up a canvas or test environment.
+- You can use utility functions from `js/lib.js` for rendering shapes, assigning canvases, and running performance comparisons.
+- The playground is isolated, so you can rapidly prototype and test rendering features without affecting the main application.
+
+## Text Editor Playground
+
+The Text Editor Playground provides an isolated environment to test the new renderer integrated with the text editor.
+
+### How to Run
+
+1. Open a terminal and navigate to the playground directory:
+
+   ```sh
+   cd frontend/text-editor
+   ```
+
+2. Start the development server:
+   ```sh
+   yarn dev
+   ```
+
+3. Open your browser and go to:  
+   [http://localhost:5173/wasm.html](http://localhost:5173/wasm.html)
+
+This will launch the playground interface where you can interactively test text editing features with the latest renderer.
+
+### Updating the WASM Renderer
+
+To update the `render_wasm.wasm` and `render_wasm.js` files used by the playground:
+
+1. Make sure you have the latest compiled WASM files in `frontend/resources/public/js/`.
+
+2. From the `frontend/text-editor` directory, run:
+
+   ```sh
+   yarn wasm:update
+   ```
+
+   This script will copy the latest `render_wasm.wasm` and `render_wasm.js` into the playground’s `src/wasm/` directory, ensuring the playground uses the most recent build.
+
+### How It Works
+
+- The playground integrates the new renderer via the WASM and JS files, allowing you to test text editing, rendering, and styling in isolation from the main Penpot application.