3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-04 09:48:22 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix new render masks

Browse source
This commit is contained in:
Alejandro Alonso 2025-05-13 11:06:47 +02:00
parent 91fbe8f8ef
commit 1f44d53f6b
4 changed files with 109 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

86
frontend/resources/wasm-playground/masks.html Normal file
View file

@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>WASM + WebGL2 Canvas</title>
<style>
body {
margin: 0;
background: #111;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="module">
import initWasmModule from '/js/render_wasm.js';
import {
init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent
} from './js/lib.js';
const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const shapes = 10;
initWasmModule().then(Module => {
init(Module);
assignCanvas(canvas);
Module._set_canvas_background(hexToU32ARGB("#FABADA", 1));
Module._set_view(1, 0, 0);
Module._init_shapes_pool(shapes + 1);
setupInteraction(canvas);
useShape("00000000-0000-0000-0000-000000000000");
const group_id = "cbf2e110-ef85-8081-8006-2d4d7cb97d4a";
setShapeChildren([group_id, "cbf2e110-ef85-8081-8006-2d4d7cb97d4d"]);
useShape("cbf2e110-ef85-8081-8006-2d4d7cb97d4d");
set_parent("00000000-0000-0000-0000-000000000000");
Module._set_shape_type(3);
Module._set_shape_selrect(100, 100, 200, 200);
addShapeSolidFill(hexToU32ARGB("#aabbcc", 1));
const group_children = [];
let uuid = "a822d9e3-16c5-802c-8006-2d6d04f9c3e5";
group_children.push(uuid);
useShape(uuid);
set_parent(group_id);
Module._set_shape_type(3);
Module._set_shape_selrect(319, 144, 544, 332);
addShapeSolidFill(hexToU32ARGB("#0c44ea", 1));
uuid = "a822d9e3-16c5-802c-8006-2d6d06e88e19";
group_children.push(uuid);
useShape(uuid);
set_parent(group_id);
Module._set_shape_type(6);
Module._set_shape_selrect(98, 214, 426, 475);
addShapeSolidFill(hexToU32ARGB("#B1B2B5", 1));
useShape(group_id);
set_parent("00000000-0000-0000-0000-000000000000");
Module._set_shape_type(1);
Module._set_shape_selrect(319, 144, 544, 332);
Module._set_shape_masked_group(true);
setShapeChildren(group_children);
Module._render(Date.now());
});
</script>
</body>
</html>