johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

🔧 Fix text-related playgrounds (wasm)

Browse Source
This commit is contained in:
Belén Albeza
2025-10-23 17:52:53 +02:00
parent 81f851cad4
commit b498056c01
3 changed files with 68 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,7 +32,7 @@ export function assignCanvas(canvas) {
export function hexToU32ARGB(hex, opacity = 1) { export function hexToU32ARGB(hex, opacity = 1) {
const rgb = parseInt(hex.slice(1), 16); const rgb = parseInt(hex.slice(1), 16);
const a = Math.floor(opacity * 0xFF); const a = Math.floor(opacity * 0xff);
const argb = (a << 24) | rgb; const argb = (a << 24) | rgb;
return argb >>> 0; return argb >>> 0;
} }
@@ -42,9 +42,9 @@ export function getRandomInt(min, max) {
} }
export function getRandomColor() { export function getRandomColor() {
const r = 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 g = getRandomInt(0, 256).toString(16).padStart(2, "0");
const b = getRandomInt(0, 256).toString(16).padStart(2, '0'); const b = getRandomInt(0, 256).toString(16).padStart(2, "0");
return `#${r}${g}${b}`; return `#${r}${g}${b}`;
} }
@@ -103,12 +103,12 @@ export function addShapeSolidStrokeFill(argb) {
function serializePathAttrs(svgAttrs) { function serializePathAttrs(svgAttrs) {
return Object.entries(svgAttrs).reduce((acc, [key, value]) => { 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) { 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 ptr = allocBytes(len * 28);
const heap = getHeapU32(); const heap = getHeapU32();
const dv = new DataView(heap.buffer); const dv = new DataView(heap.buffer);
@@ -120,7 +120,7 @@ export function draw_star(x, y, width, height) {
const star = []; const star = [];
for (let i = 0; i < 10; i++) { 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 r = i % 2 === 0 ? outerRadius : innerRadius;
const px = cx + r * Math.cos(angle); const px = cx + r * Math.cos(angle);
const py = cy + r * Math.sin(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(); Module._set_shape_path_content();
const str = serializePathAttrs({ const str = serializePathAttrs({
"fill": "none", fill: "none",
"stroke-linecap": "round", "stroke-linecap": "round",
"stroke-linejoin": "round", "stroke-linejoin": "round",
}); });
@@ -158,7 +158,6 @@ export function draw_star(x, y, width, height) {
Module.stringToUTF8(str, offset, size); Module.stringToUTF8(str, offset, size);
Module._set_shape_path_attrs(3); Module._set_shape_path_attrs(3);
} }
export function setShapeChildren(shapeIds) { export function setShapeChildren(shapeIds) {
const offset = allocBytes(shapeIds.length * 16); const offset = allocBytes(shapeIds.length * 16);
@@ -227,18 +226,24 @@ export function setupInteraction(canvas) {
} }
}); });
canvas.addEventListener("mouseup", () => { isPanning = false; }); canvas.addEventListener("mouseup", () => {
canvas.addEventListener("mouseout", () => { isPanning = false; }); isPanning = false;
});
canvas.addEventListener("mouseout", () => {
isPanning = false;
});
} }
export function addTextShape(x, y, fontSize, text) { export function addTextShape(x, y, fontSize, text) {
const numLeaves = 1; // Single text leaf for simplicity const numLeaves = 1; // Single text leaf for simplicity
const paragraphAttrSize = 48; const paragraphAttrSize = 48;
const leafAttrSize = 56; // const leafAttrSize = 56;
const fillSize = 160; const singleFillSize = 160;
const textBuffer = new TextEncoder().encode(text); const textBuffer = new TextEncoder().encode(text);
const textSize = textBuffer.byteLength; const textSize = textBuffer.byteLength;
const leafSize = 1340; // leaf attrs + 8 fills
// Calculate fills // Calculate fills
const fills = [ const fills = [
{ {
@@ -247,12 +252,7 @@ export function addTextShape(x, y, fontSize, text) {
opacity: getRandomFloat(0.5, 1.0), opacity: getRandomFloat(0.5, 1.0),
}, },
]; ];
const totalFills = fills.length; const totalSize = paragraphAttrSize + leafSize + textSize;
const totalFillsSize = totalFills * fillSize;
// Calculate metadata and total buffer size
const metadataSize = paragraphAttrSize + leafAttrSize + totalFillsSize;
const totalSize = metadataSize + textSize;
// Allocate buffer // Allocate buffer
const bufferPtr = allocBytes(totalSize); const bufferPtr = allocBytes(totalSize);
@@ -282,34 +282,35 @@ export function addTextShape(x, y, fontSize, text) {
const leafOffset = paragraphAttrSize; const leafOffset = paragraphAttrSize;
dview.setUint8(leafOffset, 0); // font-style: normal dview.setUint8(leafOffset, 0); // font-style: normal
dview.setFloat32(leafOffset + 4, fontSize, true); // font-size dview.setFloat32(leafOffset + 4, fontSize, true); // font-size
dview.setUint32(leafOffset + 8, 400, true); // font-weight: normal dview.setFloat32(leafOffset + 8, 0, true); // letter-spacing
dview.setUint32(leafOffset + 12, 0, true); // font-id (UUID part 1) dview.setUint32(leafOffset + 12, 400, true); // font-weight: normal
dview.setUint32(leafOffset + 16, 0, true); // font-id (UUID part 2) dview.setUint32(leafOffset + 16, 0, true); // font-id (UUID part 1)
dview.setUint32(leafOffset + 20, 0, true); // font-id (UUID part 3) dview.setUint32(leafOffset + 20, 0, true); // font-id (UUID part 2)
dview.setInt32(leafOffset + 24, 0, true); // font-id (UUID part 4) dview.setUint32(leafOffset + 24, 0, true); // font-id (UUID part 3)
dview.setInt32(leafOffset + 28, 0, true); // font-family hash dview.setInt32(leafOffset + 28, 0, true); // font-id (UUID part 4)
dview.setUint32(leafOffset + 32, 0, true); // font-variant-id (UUID part 1) dview.setInt32(leafOffset + 32, 0, true); // font-family hash
dview.setUint32(leafOffset + 36, 0, true); // font-variant-id (UUID part 2) dview.setUint32(leafOffset + 36, 0, true); // font-variant-id (UUID part 1)
dview.setUint32(leafOffset + 40, 0, true); // font-variant-id (UUID part 3) dview.setUint32(leafOffset + 40, 0, true); // font-variant-id (UUID part 2)
dview.setInt32(leafOffset + 44, 0, true); // font-variant-id (UUID part 4) dview.setUint32(leafOffset + 44, 0, true); // font-variant-id (UUID part 3)
dview.setInt32(leafOffset + 48, textSize, true); // text-length dview.setInt32(leafOffset + 48, 0, true); // font-variant-id (UUID part 4)
dview.setInt32(leafOffset + 52, totalFills, true); // total fills count dview.setInt32(leafOffset + 52, textSize, true); // text-length
dview.setInt32(leafOffset + 56, fills.length, true); // total fills count
// Serialize fills // Serialize fills
let fillOffset = leafOffset + leafAttrSize; let fillOffset = leafOffset + 60;
fills.forEach((fill) => { fills.forEach((fill) => {
if (fill.type === "solid") { if (fill.type === "solid") {
const argb = hexToU32ARGB(fill.color, fill.opacity); const argb = hexToU32ARGB(fill.color, fill.opacity);
dview.setUint8(fillOffset, 0x00, true); // Fill type: solid dview.setUint8(fillOffset, 0x00, true); // Fill type: solid
dview.setUint32(fillOffset + 4, argb, true); dview.setUint32(fillOffset + 4, argb, true);
fillOffset += fillSize; // Move to the next fill fillOffset += singleFillSize; // Move to the next fill
} }
}); });
// Add text content // Add text content
const textOffset = metadataSize; const textOffset = leafSize;
heap.set(textBuffer, textOffset); heap.set(textBuffer, textOffset);
// Call the WebAssembly function // Call the WebAssembly function
Module._set_shape_text_content(); Module._set_shape_text_content();
} }

42
frontend/text-editor/src/playground.js
View File

@@ -68,7 +68,7 @@ class TextEditorPlayground {
"font-style": "normal", "font-style": "normal",
"line-height": "1.2", "line-height": "1.2",
"letter-spacing": "0", "letter-spacing": "0",
"direction": "ltr", direction: "ltr",
"text-align": "left", "text-align": "left",
"text-transform": "none", "text-transform": "none",
"text-decoration": "none", "text-decoration": "none",
@@ -111,6 +111,7 @@ class TextEditorPlayground {
#onWheel = (e) => { #onWheel = (e) => {
e.preventDefault(); e.preventDefault();
const textShape = this.#shapes.get("text"); const textShape = this.#shapes.get("text");
if (!textShape) { if (!textShape) {
console.warn("Text shape not found"); console.warn("Text shape not found");
return; return;
@@ -154,6 +155,13 @@ class TextEditorPlayground {
#onClick = (e) => { #onClick = (e) => {
console.log("click", e.type, e); console.log("click", e.type, e);
const textShape = this.#shapes.get("text");
if (!textShape) {
console.warn("Text shape not found");
return;
}
this.#module.call("use_shape", ...textShape.id);
const caretPosition = this.#module.call( const caretPosition = this.#module.call(
"get_caret_position_at", "get_caret_position_at",
e.offsetX, e.offsetX,
@@ -317,7 +325,7 @@ class TextEditorPlayground {
#onShapePositionChange = (_e) => { #onShapePositionChange = (_e) => {
const textShape = this.#shapes.get("text"); const textShape = this.#shapes.get("text");
if (!textShape) { if (!textShape) {
console.warn("Text shape not found") console.warn("Text shape not found");
return; return;
} }
textShape.selrect.left = this.#ui.shapePositionXElement.valueAsNumber; textShape.selrect.left = this.#ui.shapePositionXElement.valueAsNumber;
@@ -329,7 +337,10 @@ class TextEditorPlayground {
textShape.selrect.right, textShape.selrect.right,
textShape.selrect.bottom, textShape.selrect.bottom,
); );
this.#textEditor.updatePositionWithViewportAndShape(this.#viewport, textShape); this.#textEditor.updatePositionWithViewportAndShape(
this.#viewport,
textShape,
);
this.render(); this.render();
}; };
@@ -346,7 +357,7 @@ class TextEditorPlayground {
textShape, textShape,
); );
this.render(); this.render();
} };
#setupUI() { #setupUI() {
const fontFamiliesFragment = document.createDocumentFragment(); const fontFamiliesFragment = document.createDocumentFragment();
@@ -360,15 +371,15 @@ class TextEditorPlayground {
this.#ui.shapePositionXElement.addEventListener( this.#ui.shapePositionXElement.addEventListener(
"change", "change",
this.#onShapePositionChange this.#onShapePositionChange,
); );
this.#ui.shapePositionYElement.addEventListener( this.#ui.shapePositionYElement.addEventListener(
"change", "change",
this.#onShapePositionChange this.#onShapePositionChange,
); );
this.#ui.shapeRotationElement.addEventListener( this.#ui.shapeRotationElement.addEventListener(
"change", "change",
this.#onShapeRotationChange this.#onShapeRotationChange,
); );
this.#ui.directionLTRElement.addEventListener( this.#ui.directionLTRElement.addEventListener(
@@ -405,10 +416,7 @@ class TextEditorPlayground {
"change", "change",
this.#onFontWeightChange, this.#onFontWeightChange,
); );
this.#ui.fontSizeElement.addEventListener( this.#ui.fontSizeElement.addEventListener("change", this.#onFontSizeChange);
"change",
this.#onFontSizeChange
);
this.#ui.fontStyleElement.addEventListener( this.#ui.fontStyleElement.addEventListener(
"change", "change",
this.#onFontStyleChange, this.#onFontStyleChange,
@@ -454,7 +462,7 @@ class TextEditorPlayground {
// Number of text leaves in the paragraph. // Number of text leaves in the paragraph.
view.setUint32(0, paragraph.leaves.length, true); view.setUint32(0, paragraph.leaves.length, true);
console.log('lineHeight', paragraph.lineHeight); console.log("lineHeight", paragraph.lineHeight);
// Serialize paragraph attributes // Serialize paragraph attributes
view.setUint8(4, paragraph.textAlign, true); // text-align: left view.setUint8(4, paragraph.textAlign, true); // text-align: left
@@ -495,8 +503,7 @@ class TextEditorPlayground {
view.setUint32(offset + 56, leaf.fills.length, true); // total fills count view.setUint32(offset + 56, leaf.fills.length, true); // total fills count
leaf.fills.forEach((fill, index) => { leaf.fills.forEach((fill, index) => {
const fillOffset = const fillOffset = offset + 60 + index * Fill.BYTE_LENGTH;
offset + TextSpan.BYTE_LENGTH + index * Fill.BYTE_LENGTH;
if (fill.type === Fill.Type.SOLID) { if (fill.type === Fill.Type.SOLID) {
view.setUint8(fillOffset + 0, fill.type, true); view.setUint8(fillOffset + 0, fill.type, true);
view.setUint32(fillOffset + 4, fill.solid.color.argb32, true); view.setUint32(fillOffset + 4, fill.solid.color.argb32, true);
@@ -530,10 +537,11 @@ class TextEditorPlayground {
id: UUID.ZERO, id: UUID.ZERO,
childrenIds: [textShape.id], childrenIds: [textShape.id],
}); });
this.#shapes.set("text", textShape);
this.#shapes.set("root", rootShape); this.#shapes.set("root", rootShape);
this.#setShape(textShape);
this.#setShape(rootShape); this.#setShape(rootShape);
this.#shapes.set("text", textShape);
this.#setShape(textShape);
} }
#setupTextEditor() { #setupTextEditor() {
@@ -572,7 +580,7 @@ const module = await initWasmModule();
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
const textEditorPlayground = new TextEditorPlayground(module, canvas, { const textEditorPlayground = new TextEditorPlayground(module, canvas, {
shouldUpdatePositionOnScroll: true shouldUpdatePositionOnScroll: true,
}); });
await textEditorPlayground.setup(); await textEditorPlayground.setup();
textEditorPlayground.render(); textEditorPlayground.render();

18
frontend/text-editor/src/playground/text.js
View File

@@ -38,27 +38,21 @@ export const TextTransform = {
}; };
export class TextSpan { export class TextSpan {
static BYTE_LENGTH = 60; static BYTE_LENGTH = 1340;
static fromDOM(spanElement, fontManager) { static fromDOM(spanElement, fontManager) {
const elementStyle = spanElement.style; //window.getComputedStyle(leafElement); const elementStyle = spanElement.style; //window.getComputedStyle(leafElement);
const fontSize = parseFloat( const fontSize = parseFloat(elementStyle.getPropertyValue("font-size"));
elementStyle.getPropertyValue("font-size"),
);
const fontStyle = const fontStyle =
FontStyle.fromStyle(elementStyle.getPropertyValue("font-style")) ?? FontStyle.fromStyle(elementStyle.getPropertyValue("font-style")) ??
FontStyle.NORMAL; FontStyle.NORMAL;
const fontWeight = parseInt( const fontWeight = parseInt(elementStyle.getPropertyValue("font-weight"));
elementStyle.getPropertyValue("font-weight"),
);
const letterSpacing = parseFloat( const letterSpacing = parseFloat(
elementStyle.getPropertyValue("letter-spacing"), elementStyle.getPropertyValue("letter-spacing"),
); );
const fontFamily = elementStyle.getPropertyValue("font-family"); const fontFamily = elementStyle.getPropertyValue("font-family");
console.log("fontFamily", fontFamily); console.log("fontFamily", fontFamily);
const fontStyles = fontManager.fonts.get( const fontStyles = fontManager.fonts.get(fontFamily);
fontFamily,
);
const textDecoration = TextDecoration.fromStyle( const textDecoration = TextDecoration.fromStyle(
elementStyle.getPropertyValue("text-decoration"), elementStyle.getPropertyValue("text-decoration"),
); );
@@ -75,7 +69,7 @@ export class TextSpan {
currentFontStyle.styleAsNumber === fontStyle, currentFontStyle.styleAsNumber === fontStyle,
); );
if (!font) { if (!font) {
throw new Error(`Invalid font "${fontFamily}"`) throw new Error(`Invalid font "${fontFamily}"`);
} }
return new TextSpan({ return new TextSpan({
fontId: font.id, // leafElement.style.getPropertyValue("--font-id"), fontId: font.id, // leafElement.style.getPropertyValue("--font-id"),
@@ -134,7 +128,7 @@ export class TextSpan {
} }
get leafByteLength() { get leafByteLength() {
return this.fills.length * Fill.BYTE_LENGTH + TextSpan.BYTE_LENGTH; return TextLeaf.BYTE_LENGTH;
} }
} }