github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-30 21:59:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Aitor Moreno 2025-07-08 07:32:35 +02:00
parent 0704fa5df6
commit 84ad14183e
2 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/resources/wasm-playground/js/lib.js
View File

@ -32,7 +32,7 @@ export function assignCanvas(canvas) {
export function hexToU32ARGB(hex, opacity = 1) {
const rgb = parseInt(hex.slice(1), 16);
const a = Math.floor(opacity * 0xFF);
const a = Math.floor(opacity * 0xff);
const argb = (a << 24) | rgb;
return argb >>> 0;
}
@ -42,9 +42,9 @@ export function getRandomInt(min, max) {
}
export function getRandomColor() {
const r = getRandomInt(0, 256).toString(16).padStart(2, '0');
const g = getRandomInt(0, 256).toString(16).padStart(2, '0');
const b = getRandomInt(0, 256).toString(16).padStart(2, '0');
const r = getRandomInt(0, 256).toString(16).padStart(2, "0");
const g = getRandomInt(0, 256).toString(16).padStart(2, "0");
const b = getRandomInt(0, 256).toString(16).padStart(2, "0");
return `#${r}${g}${b}`;
}
@ -103,12 +103,12 @@ export function addShapeSolidStrokeFill(argb) {
function serializePathAttrs(svgAttrs) {
return Object.entries(svgAttrs).reduce((acc, [key, value]) => {
return acc + key + '\0' + value + '\0';
}, '');
return acc + key + "\0" + value + "\0";
}, "");
}
export function draw_star(x, y, width, height) {
const len = 11; // 1 MOVE + 9 LINE + 1 CLOSE
const len = 11; // 1 MOVE + 9 LINE + 1 CLOSE
const ptr = allocBytes(len * 28);
const heap = getHeapU32();
const dv = new DataView(heap.buffer);
@ -120,7 +120,7 @@ export function draw_star(x, y, width, height) {
const star = [];
for (let i = 0; i < 10; i++) {
const angle = Math.PI / 5 * i - Math.PI / 2;
const angle = (Math.PI / 5) * i - Math.PI / 2;
const r = i % 2 === 0 ? outerRadius : innerRadius;
const px = cx + r * Math.cos(angle);
const py = cy + r * Math.sin(angle);
@ -149,7 +149,7 @@ export function draw_star(x, y, width, height) {
Module._set_shape_path_content();
const str = serializePathAttrs({
"fill": "none",
fill: "none",
"stroke-linecap": "round",
"stroke-linejoin": "round",
});
@ -158,7 +158,6 @@ export function draw_star(x, y, width, height) {
Module.stringToUTF8(str, offset, size);
Module._set_shape_path_attrs(3);
}
export function setShapeChildren(shapeIds) {
const offset = allocBytes(shapeIds.length * 16);
@ -227,8 +226,12 @@ export function setupInteraction(canvas) {
}
});
canvas.addEventListener("mouseup", () => { isPanning = false; });
canvas.addEventListener("mouseout", () => { isPanning = false; });
canvas.addEventListener("mouseup", () => {
isPanning = false;
});
canvas.addEventListener("mouseout", () => {
isPanning = false;
});
}
export function addTextShape(x, y, fontSize, text) {
@ -312,4 +315,4 @@ export function addTextShape(x, y, fontSize, text) {
// Call the WebAssembly function
Module._set_shape_text_content();
}
}

59
frontend/resources/wasm-playground/rects.html
View File

@ -25,8 +25,8 @@
<script type="module">
import initWasmModule from '/js/render_wasm.js';
import {
init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill
addShapeSolidFill, hexToU32ARGB, getRandomInt, getRandomColor,
getRandomFloat, addShape, setShapeChildren, setup
} from './js/lib.js';
const canvas = document.getElementById("canvas");
@ -37,41 +37,38 @@
const shapes = params.get("shapes") || 1000;
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);
setup({
instance: Module,
canvas,
shapes
})
const children = [];
for (let i = 0; i < shapes; i++) {
const uuid = crypto.randomUUID();
children.push(uuid);
useShape(uuid);
Module._set_parent(0, 0, 0, 0);
Module._set_shape_type(3);
const x1 = getRandomInt(0, canvas.width);
const y1 = getRandomInt(0, canvas.height);
const width = getRandomInt(20, 100);
const height = getRandomInt(20, 100);
Module._set_shape_selrect(x1, y1, x1 + width, y1 + height);
const color = getRandomColor();
const argb = hexToU32ARGB(color, getRandomFloat(0.1, 1.0));
addShapeSolidFill(argb)
Module._add_shape_center_stroke(10, 0, 0, 0);
const argb2 = hexToU32ARGB(color, getRandomFloat(0.1, 1.0));
addShapeSolidStrokeFill(argb2);
for (let shape = 0; shape < shapes; shape++) {
const color = getRandomColor()
children.push(
addShape({
parent: "00000000-0000-0000-0000-000000000000",
type: "rect", // rect
selrect: {
x: getRandomInt(0, canvas.width),
y: getRandomInt(0, canvas.height),
width: getRandomInt(20, 100),
height: getRandomInt(20, 100),
},
fills: [{ type: "solid", color, opacity: getRandomFloat(0.1, 1.0) }],
strokes: [{ width: 10, type: "solid", color, opacity: getRandomFloat(0.1, 1.0) }]
})
);
}
useShape("00000000-0000-0000-0000-000000000000");
setShapeChildren(children);
addShape({
id: "00000000-0000-0000-0000-000000000000",
children: children
})
performance.mark('render:begin');
Module._render(Date.now(), false);
Module._render(performance.now(), true);
performance.mark('render:end');
const { duration } = performance.measure('render', 'render:begin', 'render:end');
// alert(`render time: ${duration.toFixed(2)}ms`);