mirror of
https://github.com/penpot/penpot.git
synced 2026-05-01 22:28:15 +00:00
595 lines
16 KiB
JavaScript
595 lines
16 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);
|
|
}
|
|
|
|
export function render() {
|
|
Module._set_view(1, 0, 0);
|
|
Module._render_from_cache();
|
|
debouncedRender();
|
|
}
|
|
|
|
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; });
|
|
}
|
|
|
|
const TextAlign = {
|
|
'left': 0,
|
|
'center': 1,
|
|
'right': 2,
|
|
'justify': 3,
|
|
}
|
|
|
|
function getTextAlign(textAlign) {
|
|
if (textAlign in TextAlign) {
|
|
return TextAlign[textAlign];
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function getTextDirection(textDirection) {
|
|
switch (textDirection) {
|
|
default:
|
|
case 'LTR': return 0;
|
|
case 'RTL': return 1;
|
|
}
|
|
}
|
|
|
|
function getTextDecoration(textDecoration) {
|
|
switch (textDecoration) {
|
|
default:
|
|
case 'none': return 0;
|
|
case 'underline': return 1;
|
|
case 'line-through': return 2;
|
|
case 'overline': return 3;
|
|
}
|
|
}
|
|
|
|
function getTextTransform(textTransform) {
|
|
switch (textTransform) {
|
|
default:
|
|
case 'none': return 0;
|
|
case 'uppercase': return 1;
|
|
case 'lowercase': return 2;
|
|
case 'capitalize': return 3;
|
|
}
|
|
}
|
|
|
|
function getFontStyle(fontStyle) {
|
|
switch (fontStyle) {
|
|
default:
|
|
case 'normal':
|
|
case 'regular':
|
|
return 0;
|
|
case 'oblique':
|
|
case 'italic':
|
|
return 1;
|
|
}
|
|
}
|
|
|
|
const PARAGRAPH_ATTR_SIZE = 48;
|
|
const LEAF_ATTR_SIZE = 60;
|
|
const FILL_SIZE = 160;
|
|
|
|
function setParagraphData(dview, { numLeaves, textAlign, textDirection, textDecoration, textTransform, lineHeight, letterSpacing }) {
|
|
// Set number of leaves
|
|
dview.setUint32(0, numLeaves, true);
|
|
|
|
// Serialize paragraph attributes
|
|
dview.setUint8(4, textAlign, true); // text-align: left
|
|
dview.setUint8(5, textDirection, true); // text-direction: LTR
|
|
dview.setUint8(6, textDecoration, true); // text-decoration: none
|
|
dview.setUint8(7, textTransform, true); // text-transform: none
|
|
dview.setFloat32(8, lineHeight, true); // line-height
|
|
dview.setFloat32(12, letterSpacing, 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.setUint32(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.setUint32(44, 0, true); // typography-ref-id (UUID part 4)
|
|
}
|
|
|
|
function setLeafData(dview, leafOffset, {
|
|
fontId,
|
|
fontStyle,
|
|
fontSize,
|
|
fontWeight,
|
|
letterSpacing,
|
|
textSize,
|
|
totalFills
|
|
}) {
|
|
// Serialize leaf attributes
|
|
dview.setUint8(leafOffset + 0, fontStyle, true); // font-style: normal
|
|
dview.setUint8(leafOffset + 1, 0, true); // text-decoration: none
|
|
dview.setUint8(leafOffset + 2, 0, true); // text-transform: none
|
|
dview.setUint8(leafOffset + 3, 0, true); // text-direction: ltr
|
|
dview.setFloat32(leafOffset + 4, fontSize, true); // font-size
|
|
dview.setFloat32(leafOffset + 8, letterSpacing, true); // letter-spacing
|
|
dview.setInt32(leafOffset + 12, fontWeight, true); // font-weight: normal
|
|
dview.setUint32(leafOffset + 16, fontId[0], true); // font-id (UUID part 1)
|
|
dview.setUint32(leafOffset + 20, fontId[1], true); // font-id (UUID part 2)
|
|
dview.setUint32(leafOffset + 24, fontId[2], true); // font-id (UUID part 3)
|
|
dview.setUint32(leafOffset + 28, fontId[3], true); // font-id (UUID part 4)
|
|
dview.setUint32(leafOffset + 32, 0, true); // font-family hash
|
|
dview.setUint32(leafOffset + 36, 0, true); // font-variant-id (UUID part 1)
|
|
dview.setUint32(leafOffset + 40, 0, true); // font-variant-id (UUID part 2)
|
|
dview.setUint32(leafOffset + 44, 0, true); // font-variant-id (UUID part 3)
|
|
dview.setUint32(leafOffset + 48, 0, true); // font-variant-id (UUID part 4)
|
|
dview.setUint32(leafOffset + 52, textSize, true); // text-length
|
|
dview.setUint32(leafOffset + 56, totalFills, true); // total fills count
|
|
}
|
|
|
|
function getFontFrom(fontFamily, fontWeight, fontStyle, fonts) {
|
|
const fontList = fonts.get(fontFamily)
|
|
if (!fontList) {
|
|
return null
|
|
}
|
|
return fontList.find(fontData => fontData.weight === fontWeight && fontStyle === fontData.style)
|
|
}
|
|
|
|
export function updateTextShape(root, fonts) {
|
|
// Calculate fills
|
|
const fills = [
|
|
{
|
|
type: "solid",
|
|
color: "#ff00ff",
|
|
opacity: 1.0,
|
|
},
|
|
];
|
|
|
|
const totalFills = fills.length;
|
|
const totalFillsSize = totalFills * FILL_SIZE;
|
|
|
|
const paragraphs = root.children;
|
|
|
|
Module._clear_shape_text();
|
|
for (const paragraph of paragraphs) {
|
|
let totalSize = PARAGRAPH_ATTR_SIZE;
|
|
|
|
const leaves = paragraph.children;
|
|
const numLeaves = leaves.length;
|
|
|
|
for (const leaf of leaves) {
|
|
const text = leaf.textContent;
|
|
const textBuffer = new TextEncoder().encode(text);
|
|
const textSize = textBuffer.byteLength;
|
|
totalSize += LEAF_ATTR_SIZE + totalFillsSize;
|
|
}
|
|
|
|
totalSize += paragraph.textContent.length;
|
|
|
|
// Allocate buffer
|
|
const bufferPtr = allocBytes(totalSize);
|
|
const heap = new Uint8Array(Module.HEAPU8.buffer, bufferPtr, totalSize);
|
|
const dview = new DataView(heap.buffer, bufferPtr, totalSize);
|
|
|
|
const textAlign = getTextAlign(
|
|
paragraph.style.getPropertyValue("text-align"),
|
|
);
|
|
const textDirection = getTextDirection(
|
|
paragraph.style.getPropertyValue("text-direction"),
|
|
);
|
|
const textDecoration = getTextDecoration(
|
|
paragraph.style.getPropertyValue("text-decoration"),
|
|
);
|
|
const textTransform = getTextTransform(
|
|
paragraph.style.getPropertyValue("text-transform"),
|
|
);
|
|
const lineHeight = parseFloat(
|
|
paragraph.style.getPropertyValue("line-height"),
|
|
);
|
|
const letterSpacing = parseFloat(
|
|
paragraph.style.getPropertyValue("letter-spacing"),
|
|
);
|
|
|
|
setParagraphData(dview, {
|
|
numLeaves,
|
|
textAlign,
|
|
textDecoration,
|
|
textTransform,
|
|
textDirection,
|
|
lineHeight,
|
|
letterSpacing
|
|
})
|
|
let leafOffset = PARAGRAPH_ATTR_SIZE;
|
|
for (const leaf of leaves) {
|
|
const fontStyle = leaf.style.getPropertyValue("font-style");
|
|
const fontStyleSerialized = getFontStyle(fontStyle);
|
|
const fontSize = parseFloat(leaf.style.getPropertyValue("font-size"));
|
|
const letterSpacing = parseFloat(leaf.style.getPropertyValue("letter-spacing"))
|
|
const fontWeight = parseInt(
|
|
leaf.style.getPropertyValue("font-weight"),
|
|
10,
|
|
);
|
|
|
|
const text = leaf.textContent;
|
|
const textBuffer = new TextEncoder().encode(text);
|
|
const textSize = textBuffer.byteLength;
|
|
const fontFamily = leaf.style.getPropertyValue('font-family');
|
|
const fontData = getFontFrom(fontFamily, fontWeight, fontStyle, fonts)
|
|
const defaultFontId = new Uint32Array([0, 0, 0, 0])
|
|
const fontId = fontData ? getU32(fontData.id) : defaultFontId
|
|
setLeafData(dview, leafOffset, {
|
|
fontId,
|
|
fontStyle: fontStyleSerialized,
|
|
textDecoration: 0,
|
|
textTransform: 0,
|
|
textDirection: 0,
|
|
fontSize,
|
|
fontWeight,
|
|
letterSpacing,
|
|
textSize,
|
|
totalFills,
|
|
});
|
|
|
|
// Serialize fills
|
|
let fillOffset = leafOffset + LEAF_ATTR_SIZE;
|
|
fills.forEach((fill) => {
|
|
if (fill.type === "solid") {
|
|
const argb = hexToU32ARGB(fill.color, fill.opacity);
|
|
dview.setUint8(fillOffset + 0, 0x00, true); // Fill type: solid
|
|
dview.setUint32(fillOffset + 4, argb, true);
|
|
fillOffset += FILL_SIZE; // Move to the next fill
|
|
}
|
|
});
|
|
leafOffset += LEAF_ATTR_SIZE + totalFillsSize;
|
|
}
|
|
|
|
const text = paragraph.textContent;
|
|
const textBuffer = new TextEncoder().encode(text);
|
|
|
|
// Add text content
|
|
const textOffset = leafOffset;
|
|
heap.set(textBuffer, textOffset);
|
|
|
|
Module._set_shape_text_content();
|
|
}
|
|
}
|
|
|
|
export function addTextShape(text, fonts) {
|
|
const numLeaves = 1; // Single text leaf for simplicity
|
|
const textBuffer = new TextEncoder().encode(text);
|
|
const textSize = textBuffer.byteLength;
|
|
|
|
// Calculate fills
|
|
const fills = [
|
|
{
|
|
type: "solid",
|
|
color: "#ff00ff",
|
|
opacity: 1.0,
|
|
},
|
|
];
|
|
const totalFills = fills.length;
|
|
const totalFillsSize = totalFills * FILL_SIZE;
|
|
|
|
// Calculate metadata and total buffer size
|
|
const metadataSize = PARAGRAPH_ATTR_SIZE + LEAF_ATTR_SIZE + 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);
|
|
|
|
setParagraphData(dview, {
|
|
numLeaves,
|
|
textAlign: 0,
|
|
textDecoration: 0,
|
|
textTransform: 0,
|
|
textDirection: 0,
|
|
lineHeight: 1.2,
|
|
letterSpacing: 0,
|
|
});
|
|
|
|
// Serialize leaf attributes
|
|
const leafOffset = PARAGRAPH_ATTR_SIZE;
|
|
const fontStyle = getFontStyle('normal');
|
|
const fontStyleSerialized = getFontStyle(fontStyle);
|
|
const fontSize = 14;
|
|
const letterSpacing = 0;
|
|
const fontWeight = 400;
|
|
const fontFamily = 'MontserratAlternates';
|
|
const fontData = getFontFrom(fontFamily, fontWeight, fontStyle, fonts);
|
|
const defaultFontId = new Uint32Array([0, 0, 0, 0]);
|
|
const fontId = fontData ? getU32(fontData.id) : defaultFontId;
|
|
|
|
setLeafData(dview, leafOffset, {
|
|
fontId,
|
|
fontSize,
|
|
fontStyle: fontStyleSerialized,
|
|
fontWeight,
|
|
textDecoration: 0,
|
|
textDirection: 0,
|
|
textTransform: 0,
|
|
letterSpacing,
|
|
textSize,
|
|
totalFills,
|
|
});
|
|
|
|
// Serialize fills
|
|
let fillOffset = leafOffset + LEAF_ATTR_SIZE;
|
|
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 += FILL_SIZE; // Move to the next fill
|
|
}
|
|
});
|
|
|
|
// Add text content
|
|
const textOffset = metadataSize;
|
|
heap.set(textBuffer, textOffset);
|
|
|
|
// Call the WebAssembly function
|
|
Module._set_shape_text_content();
|
|
}
|
|
|
|
export function storeFonts(fonts) {
|
|
for (const [fontName, fontStyles] of fonts) {
|
|
for (const font of fontStyles) {
|
|
const shapeId = getU32('00000000-0000-0000-0000-000000000000');
|
|
const fontId = getU32(font.id);
|
|
const weight = font.weight;
|
|
const style = getFontStyle(font.style);
|
|
const size = font.arrayBuffer.byteLength;
|
|
const ptr = Module._alloc_bytes(size);
|
|
const heap = Module.HEAPU8;
|
|
const mem = new Uint8Array(heap.buffer, ptr, size);
|
|
mem.set(new Uint8Array(font.arrayBuffer));
|
|
const emoji = false
|
|
const fallback = false
|
|
Module._store_font(
|
|
shapeId[0],
|
|
shapeId[1],
|
|
shapeId[2],
|
|
shapeId[3],
|
|
fontId[0],
|
|
fontId[1],
|
|
fontId[2],
|
|
fontId[3],
|
|
weight,
|
|
style,
|
|
emoji,
|
|
fallback,
|
|
);
|
|
Module._is_font_uploaded(
|
|
fontId[0],
|
|
fontId[1],
|
|
fontId[2],
|
|
fontId[3],
|
|
weight,
|
|
style,
|
|
emoji,
|
|
);
|
|
}
|
|
}
|
|
}
|