mirror of
https://github.com/penpot/penpot.git
synced 2025-06-16 05:41:40 +02:00
315 lines
No EOL
9.1 KiB
JavaScript
315 lines
No EOL
9.1 KiB
JavaScript
let Module = null;
|
|
|
|
let scale = 1;
|
|
let offsetX = 0;
|
|
let offsetY = 0;
|
|
|
|
let isPanning = false;
|
|
let lastX = 0;
|
|
let lastY = 0;
|
|
|
|
export function init(moduleInstance) {
|
|
Module = moduleInstance;
|
|
}
|
|
|
|
export function assignCanvas(canvas) {
|
|
const glModule = Module.GL;
|
|
const context = canvas.getContext("webgl2", {
|
|
antialias: true,
|
|
depth: true,
|
|
alpha: false,
|
|
stencil: true,
|
|
preserveDrawingBuffer: true,
|
|
});
|
|
|
|
const handle = glModule.registerContext(context, { majorVersion: 2 });
|
|
glModule.makeContextCurrent(handle);
|
|
context.getExtension("WEBGL_debug_renderer_info");
|
|
|
|
Module._init(canvas.width, canvas.height);
|
|
Module._set_render_options(0, 1);
|
|
}
|
|
|
|
export function hexToU32ARGB(hex, opacity = 1) {
|
|
const rgb = parseInt(hex.slice(1), 16);
|
|
const a = Math.floor(opacity * 0xFF);
|
|
const argb = (a << 24) | rgb;
|
|
return argb >>> 0;
|
|
}
|
|
|
|
export function getRandomInt(min, max) {
|
|
return Math.floor(Math.random() * (max - min)) + min;
|
|
}
|
|
|
|
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');
|
|
return `#${r}${g}${b}`;
|
|
}
|
|
|
|
export function getRandomFloat(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
}
|
|
|
|
function getU32(id) {
|
|
const hex = id.replace(/-/g, "");
|
|
const buffer = new Uint32Array(4);
|
|
for (let i = 0; i < 4; i++) {
|
|
buffer[i] = parseInt(hex.slice(i * 8, (i + 1) * 8), 16);
|
|
}
|
|
return buffer;
|
|
}
|
|
|
|
function heapU32SetUUID(id, heap, offset) {
|
|
const buffer = getU32(id);
|
|
heap.set(buffer, offset);
|
|
return buffer;
|
|
}
|
|
|
|
function ptr8ToPtr32(ptr8) {
|
|
return ptr8 >>> 2;
|
|
}
|
|
|
|
export function allocBytes(size) {
|
|
return Module._alloc_bytes(size);
|
|
}
|
|
|
|
export function getHeapU32() {
|
|
return Module.HEAPU32;
|
|
}
|
|
|
|
export function clearShapeFills() {
|
|
Module._clear_shape_fills();
|
|
}
|
|
|
|
export function addShapeSolidFill(argb) {
|
|
const ptr = allocBytes(160);
|
|
const heap = getHeapU32();
|
|
const dv = new DataView(heap.buffer);
|
|
dv.setUint8(ptr, 0x00, true);
|
|
dv.setUint32(ptr + 4, argb, true);
|
|
Module._add_shape_fill();
|
|
}
|
|
|
|
export function addShapeSolidStrokeFill(argb) {
|
|
const ptr = allocBytes(160);
|
|
const heap = getHeapU32();
|
|
const dv = new DataView(heap.buffer);
|
|
dv.setUint8(ptr, 0x00, true);
|
|
dv.setUint32(ptr + 4, argb, true);
|
|
Module._add_shape_stroke_fill();
|
|
}
|
|
|
|
function serializePathAttrs(svgAttrs) {
|
|
return Object.entries(svgAttrs).reduce((acc, [key, value]) => {
|
|
return acc + key + '\0' + value + '\0';
|
|
}, '');
|
|
}
|
|
|
|
export function draw_star(x, y, width, height) {
|
|
const len = 11; // 1 MOVE + 9 LINE + 1 CLOSE
|
|
const ptr = allocBytes(len * 28);
|
|
const heap = getHeapU32();
|
|
const dv = new DataView(heap.buffer);
|
|
|
|
const cx = x + width / 2;
|
|
const cy = y + height / 2;
|
|
const outerRadius = Math.min(width, height) / 2;
|
|
const innerRadius = outerRadius * 0.4;
|
|
|
|
const star = [];
|
|
for (let i = 0; i < 10; i++) {
|
|
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);
|
|
star.push([px, py]);
|
|
}
|
|
|
|
let offset = 0;
|
|
|
|
// MOVE to first point
|
|
dv.setUint16(ptr + offset + 0, 1, true); // MOVE
|
|
dv.setFloat32(ptr + offset + 20, star[0][0], true);
|
|
dv.setFloat32(ptr + offset + 24, star[0][1], true);
|
|
offset += 28;
|
|
|
|
// LINE to remaining points
|
|
for (let i = 1; i < star.length; i++) {
|
|
dv.setUint16(ptr + offset + 0, 2, true); // LINE
|
|
dv.setFloat32(ptr + offset + 20, star[i][0], true);
|
|
dv.setFloat32(ptr + offset + 24, star[i][1], true);
|
|
offset += 28;
|
|
}
|
|
|
|
// CLOSE the path
|
|
dv.setUint16(ptr + offset + 0, 4, true); // CLOSE
|
|
|
|
Module._set_shape_path_content();
|
|
|
|
const str = serializePathAttrs({
|
|
"fill": "none",
|
|
"stroke-linecap": "round",
|
|
"stroke-linejoin": "round",
|
|
});
|
|
const size = str.length;
|
|
offset = allocBytes(size);
|
|
Module.stringToUTF8(str, offset, size);
|
|
Module._set_shape_path_attrs(3);
|
|
}
|
|
|
|
|
|
export function setShapeChildren(shapeIds) {
|
|
const offset = allocBytes(shapeIds.length * 16);
|
|
const heap = getHeapU32();
|
|
let currentOffset = offset;
|
|
for (const id of shapeIds) {
|
|
heapU32SetUUID(id, heap, ptr8ToPtr32(currentOffset));
|
|
currentOffset += 16;
|
|
}
|
|
return Module._set_children();
|
|
}
|
|
|
|
export function useShape(id) {
|
|
const buffer = getU32(id);
|
|
Module._use_shape(...buffer);
|
|
}
|
|
|
|
export function set_parent(id) {
|
|
const buffer = getU32(id);
|
|
Module._set_parent(...buffer);
|
|
}
|
|
|
|
function debounce(fn, delay) {
|
|
let timeout;
|
|
return (...args) => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => fn(...args), delay);
|
|
};
|
|
}
|
|
|
|
const debouncedRender = debounce(() => {
|
|
Module._render(Date.now());
|
|
}, 100);
|
|
|
|
export function setupInteraction(canvas) {
|
|
canvas.addEventListener("wheel", (e) => {
|
|
e.preventDefault();
|
|
const zoomFactor = e.deltaY < 0 ? 1.1 : 0.9;
|
|
scale *= zoomFactor;
|
|
const mouseX = e.offsetX;
|
|
const mouseY = e.offsetY;
|
|
offsetX -= (mouseX - offsetX) * (zoomFactor - 1);
|
|
offsetY -= (mouseY - offsetY) * (zoomFactor - 1);
|
|
Module._set_view(scale, offsetX, offsetY);
|
|
Module._render_from_cache();
|
|
debouncedRender();
|
|
});
|
|
|
|
canvas.addEventListener("mousedown", (e) => {
|
|
isPanning = true;
|
|
lastX = e.offsetX;
|
|
lastY = e.offsetY;
|
|
});
|
|
|
|
canvas.addEventListener("mousemove", (e) => {
|
|
if (isPanning) {
|
|
const dx = e.offsetX - lastX;
|
|
const dy = e.offsetY - lastY;
|
|
offsetX += dx;
|
|
offsetY += dy;
|
|
lastX = e.offsetX;
|
|
lastY = e.offsetY;
|
|
Module._set_view(scale, offsetX, offsetY);
|
|
Module._render_from_cache();
|
|
debouncedRender();
|
|
}
|
|
});
|
|
|
|
canvas.addEventListener("mouseup", () => { isPanning = false; });
|
|
canvas.addEventListener("mouseout", () => { isPanning = false; });
|
|
}
|
|
|
|
export function addTextShape(x, y, fontSize, text) {
|
|
const numLeaves = 1; // Single text leaf for simplicity
|
|
const paragraphAttrSize = 48;
|
|
const leafAttrSize = 56;
|
|
const fillSize = 160;
|
|
const textBuffer = new TextEncoder().encode(text);
|
|
const textSize = textBuffer.byteLength;
|
|
|
|
// Calculate fills
|
|
const fills = [
|
|
{
|
|
type: "solid",
|
|
color: getRandomColor(),
|
|
opacity: getRandomFloat(0.5, 1.0),
|
|
},
|
|
];
|
|
const totalFills = fills.length;
|
|
const totalFillsSize = totalFills * fillSize;
|
|
|
|
// Calculate metadata and total buffer size
|
|
const metadataSize = paragraphAttrSize + leafAttrSize + totalFillsSize;
|
|
const totalSize = metadataSize + textSize;
|
|
|
|
// Allocate buffer
|
|
const bufferPtr = allocBytes(totalSize);
|
|
const heap = new Uint8Array(Module.HEAPU8.buffer, bufferPtr, totalSize);
|
|
const dview = new DataView(heap.buffer, bufferPtr, totalSize);
|
|
|
|
// Set number of leaves
|
|
dview.setUint32(0, numLeaves, true);
|
|
|
|
// Serialize paragraph attributes
|
|
dview.setUint8(4, 1); // text-align: left
|
|
dview.setUint8(5, 0); // text-direction: LTR
|
|
dview.setUint8(6, 0); // text-decoration: none
|
|
dview.setUint8(7, 0); // text-transform: none
|
|
dview.setFloat32(8, 1.2, true); // line-height
|
|
dview.setFloat32(12, 0, true); // letter-spacing
|
|
dview.setUint32(16, 0, true); // typography-ref-file (UUID part 1)
|
|
dview.setUint32(20, 0, true); // typography-ref-file (UUID part 2)
|
|
dview.setUint32(24, 0, true); // typography-ref-file (UUID part 3)
|
|
dview.setInt32(28, 0, true); // typography-ref-file (UUID part 4)
|
|
dview.setUint32(32, 0, true); // typography-ref-id (UUID part 1)
|
|
dview.setUint32(36, 0, true); // typography-ref-id (UUID part 2)
|
|
dview.setUint32(40, 0, true); // typography-ref-id (UUID part 3)
|
|
dview.setInt32(44, 0, true); // typography-ref-id (UUID part 4)
|
|
|
|
// Serialize leaf attributes
|
|
const leafOffset = paragraphAttrSize;
|
|
dview.setUint8(leafOffset, 0); // font-style: normal
|
|
dview.setFloat32(leafOffset + 4, fontSize, true); // font-size
|
|
dview.setUint32(leafOffset + 8, 400, true); // font-weight: normal
|
|
dview.setUint32(leafOffset + 12, 0, true); // font-id (UUID part 1)
|
|
dview.setUint32(leafOffset + 16, 0, true); // font-id (UUID part 2)
|
|
dview.setUint32(leafOffset + 20, 0, true); // font-id (UUID part 3)
|
|
dview.setInt32(leafOffset + 24, 0, true); // font-id (UUID part 4)
|
|
dview.setInt32(leafOffset + 28, 0, true); // font-family hash
|
|
dview.setUint32(leafOffset + 32, 0, true); // font-variant-id (UUID part 1)
|
|
dview.setUint32(leafOffset + 36, 0, true); // font-variant-id (UUID part 2)
|
|
dview.setUint32(leafOffset + 40, 0, true); // font-variant-id (UUID part 3)
|
|
dview.setInt32(leafOffset + 44, 0, true); // font-variant-id (UUID part 4)
|
|
dview.setInt32(leafOffset + 48, textSize, true); // text-length
|
|
dview.setInt32(leafOffset + 52, totalFills, true); // total fills count
|
|
|
|
// Serialize fills
|
|
let fillOffset = leafOffset + leafAttrSize;
|
|
fills.forEach((fill) => {
|
|
if (fill.type === "solid") {
|
|
const argb = hexToU32ARGB(fill.color, fill.opacity);
|
|
dview.setUint8(fillOffset, 0x00, true); // Fill type: solid
|
|
dview.setUint32(fillOffset + 4, argb, true);
|
|
fillOffset += fillSize; // Move to the next fill
|
|
}
|
|
});
|
|
|
|
// Add text content
|
|
const textOffset = metadataSize;
|
|
heap.set(textBuffer, textOffset);
|
|
|
|
// Call the WebAssembly function
|
|
Module._set_shape_text_content();
|
|
} |