e77eeff11c
* fix(fig): write text glyphs from the layout the renderer draws Text without saved glyphs was written to .fig with outlines from a character-by-character fallback: one unwrapped line at y = lineHeight, no alignment, advances in pixels. Figma lays saved text out from that data, so every wrapped OpenPencil label opened in Figma on one line, and since saved glyphs now draw before the paragraph, OpenPencil did the same after a reopen (#914). The Figma clipboard had a second writer with its own shaping that matched outlines to characters by index. One builder in @open-pencil/fig now writes derivedTextData for both. It keeps glyphs a layer already has and otherwise asks the export runtime to shape the text. Core shapes with the paragraph the renderer draws, so lines, alignment, and baselines match, and takes each outline from the glyph ID CanvasKit chose, so ligatures and contextual forms keep their shapes. CanvasKit does not say which font drew a run, so outlines are written only when the run's own font covers it; otherwise the layout is written without outlines and readers lay the text out themselves. Advances are in em units and the character offset map has one entry per character, as in Figma's files. The reader drops glyphs the earlier fallback wrote, recognised by its offset map one entry longer than the text with every glyph on the one written baseline, and any glyph set with a missing outline. * fix(scene-graph): reflow resized text instead of stretching its glyphs Resizing scaled a text layer's saved glyphs into the new box. That suits path text, whose glyphs follow its path, but flat text reflows, and with saved glyphs drawn before the paragraph a resized Figma text layer was drawn stretched. Scale glyphs only for path text, including baked path text that kept only rotated glyphs, and let the width change drop the rest. * docs(fig): describe how derived text is written Figma draws saved text from derivedTextData even when it has the font, so the export docs record which glyphs the shared writer keeps, shapes, or leaves without outlines, and the units it writes. The README names the runtime service by what it now does. * fix(fig): write text without glyphs when shaping fails Glyphs are derived data, so a shaper error must not fail the .fig save or Figma clipboard copy that writes them. The builder now writes the layer without glyphs and logs a warning; the clipboard used to swallow the error silently, which hid a font-provider mismatch.
68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import { readFile } from 'node:fs/promises'
|
|
|
|
import { expect, test } from '#tests/e2e/fixtures'
|
|
import { CanvasHelper } from '#tests/helpers/canvas'
|
|
|
|
const MESSAGE = 'A sentence long enough that it has to wrap onto a second line.'
|
|
|
|
test('wrapped text keeps its lines after a .fig is saved and reopened (#914)', async ({ page }) => {
|
|
await page.goto('/?test&no-chrome&no-rulers')
|
|
const canvas = new CanvasHelper(page)
|
|
await canvas.waitForInit()
|
|
await page.evaluate((message) => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('Editor unavailable')
|
|
const card = store.graph.createNode('FRAME', store.state.currentPageId, {
|
|
name: 'Card',
|
|
width: 260,
|
|
height: 52,
|
|
fills: [{ type: 'SOLID', color: { r: 1, g: 1, b: 1, a: 1 }, visible: true, opacity: 1 }]
|
|
})
|
|
store.graph.createNode('TEXT', card.id, {
|
|
name: 'Message',
|
|
text: message,
|
|
x: 10,
|
|
y: 10,
|
|
width: 230,
|
|
height: 32,
|
|
fontFamily: 'Inter',
|
|
fontSize: 13,
|
|
lineHeight: 16,
|
|
textAutoResize: 'HEIGHT',
|
|
fills: [{ type: 'SOLID', color: { r: 0.1, g: 0.1, b: 0.1, a: 1 }, visible: true, opacity: 1 }]
|
|
})
|
|
}, MESSAGE)
|
|
|
|
const picker = await page.evaluateHandle(() => {
|
|
const original = window.showSaveFilePicker
|
|
window.showSaveFilePicker = undefined
|
|
return {
|
|
restore: () => {
|
|
window.showSaveFilePicker = original
|
|
}
|
|
}
|
|
})
|
|
let bytes: number[]
|
|
try {
|
|
page.once('dialog', (dialog) => dialog.accept('Card.fig'))
|
|
const download = page.waitForEvent('download')
|
|
await page.evaluate(() => window.openPencil?.getStore?.().saveFigFileAs())
|
|
bytes = [...(await readFile(await (await download).path()))]
|
|
} finally {
|
|
await picker.evaluate((handle) => handle.restore())
|
|
await picker.dispose()
|
|
}
|
|
|
|
const lines = await page.evaluate(async (saved) => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('Editor unavailable')
|
|
await store.openFigFile(new File([new Uint8Array(saved)], 'Card.fig'))
|
|
const message = [...store.graph.nodes.values()].find((node) => node.name === 'Message')
|
|
store.requestRender()
|
|
return new Set(message?.derivedTextGlyphs?.map((glyph) => glyph.y)).size
|
|
}, bytes)
|
|
expect(lines).toBe(2)
|
|
await canvas.waitForRender()
|
|
expect(await canvas.screenshotCanvasRegion()).toMatchSnapshot('reopened-wrapped-text.png')
|
|
})
|