mirror of
https://github.com/penpot/penpot.git
synced 2026-08-07 21:38:48 +00:00
d1dd5d9016
* ✨ Remove guides from svg overlay * 🎉 Draw guides in wasm * 🎉 Serialize guides to wasm * ✨ Store separate and sorted horizontal and vertical guides * 🎉 Implement collision detection with guides * 🎉 Right click on guides to change color or remove * ✨ Implement dragging guides * 🎉 Edit wasm guides by double clicking them * 🎉 Implement changing mouse cursor on hovering a guide * ✨ Show guide pill on hover * 🎉 Implement removing guide on hovering + Del * 🔧 Fix lint + fmt errors * 🎉 Clip out outer board guide lines * ♻️ Extract common code into guide-pill* component * 🎉 Draw dotted lines on hovering board guides * 🐛 Fix board rotation when it has guides * 🎉 Make foreign guides not visible in focus mode
Penpot WASM render
This is the canvas-based WebAssembly render engine for Penpot.
Rust & Emscripten
This project is a Rust crate that targets Emscripten (wasm32-unknown-emscripten).
We use wasm32-unknown-emscripten compilation target:
- It compiles Rust code into WASM
- It generates the JavaScript code (“glue”) to load and run the WASM code
Skia
We use Skia, an Open Source 2D graphics library. In particular, the render engine uses Skia via custom binaries of the rust-skia crate.
How to build
With the Penpot Development Environment running, create a new tab in the tmux.
cd penpot/render-wasm
./build
You can also use ./watch to run the build on every change.
The build script will compile the project and copy the .js and .wasm files to their correct location within the frontend app.
Edit your local frontend/resources/public/js/config.js to add the following flags:
enable-feature-render-wasmto enable this render engine.enable-render-wasm-dpr(optional), to enable using the device pixel ratio.
How to test
We currently have two types of tests:
- Unit tests
cd penpot/render-wasm
./test