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

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

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

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

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