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.
99 lines
3.8 KiB
TypeScript
99 lines
3.8 KiB
TypeScript
import { expect, test } from 'bun:test'
|
|
|
|
import { SceneGraph, copyStyleRuns } from '@open-pencil/scene-graph'
|
|
import type { SceneNode } from '@open-pencil/scene-graph'
|
|
import { scaledGeometryChanges } from '@open-pencil/scene-graph/resize'
|
|
|
|
const shapingEdits: Partial<SceneNode>[] = [
|
|
{ fontVariations: [{ axis: 'wght', value: 600 }] },
|
|
{ fontFeatures: [{ tag: 'liga', enabled: false }] },
|
|
{ textAlignHorizontal: 'RIGHT' },
|
|
{ textAlignVertical: 'BOTTOM' },
|
|
{ height: 80 }
|
|
]
|
|
for (const change of shapingEdits) {
|
|
test(`invalidates saved glyph placement for ${Object.keys(change)[0]}`, () => {
|
|
const graph = new SceneGraph()
|
|
const node = graph.createNode('TEXT', graph.getPages()[0].id, {
|
|
text: 'Text',
|
|
derivedTextGlyphs: [{ commandsBlob: new Uint8Array([0]), x: 0, y: 10, fontSize: 12 }]
|
|
})
|
|
graph.updateNode(node.id, change)
|
|
expect(node.derivedTextGlyphs).toBeNull()
|
|
})
|
|
}
|
|
|
|
for (const field of ['width', 'textAutoResize', 'maxLines'] as const) {
|
|
test(`changing ${field} invalidates saved glyphs but supplying new glyphs preserves them`, () => {
|
|
const graph = new SceneGraph()
|
|
const glyphs = [{ commandsBlob: new Uint8Array([0]), x: 0, y: 10, fontSize: 12 }]
|
|
const node = graph.createNode('TEXT', graph.getPages()[0].id, {
|
|
text: 'Text',
|
|
derivedTextGlyphs: glyphs
|
|
})
|
|
const changes = { width: 120, textAutoResize: 'HEIGHT' as const, maxLines: 2 }
|
|
graph.updateNode(node.id, { [field]: changes[field] })
|
|
expect(node.derivedTextGlyphs).toBeNull()
|
|
graph.updateNode(node.id, { [field]: changes[field], derivedTextGlyphs: glyphs })
|
|
expect(node.derivedTextGlyphs).toEqual(glyphs)
|
|
})
|
|
}
|
|
|
|
for (const preview of [false, true]) {
|
|
test(`equal layout updates preserve saved glyphs (preview=${preview})`, () => {
|
|
const graph = new SceneGraph()
|
|
const glyphs = [{ commandsBlob: new Uint8Array([0]), x: 0, y: 10, fontSize: 12 }]
|
|
const node = graph.createNode('TEXT', graph.getPages()[0].id, {
|
|
text: 'Text',
|
|
derivedTextGlyphs: glyphs
|
|
})
|
|
const update = preview ? graph.updateNodePreview.bind(graph) : graph.updateNode.bind(graph)
|
|
update(node.id, {
|
|
width: node.width,
|
|
height: node.height,
|
|
styleRuns: copyStyleRuns(node.styleRuns)
|
|
})
|
|
expect(node.derivedTextGlyphs).toEqual(glyphs)
|
|
})
|
|
test(`text layout cache invalidation preserves supplied replacements (preview=${preview})`, () => {
|
|
const graph = new SceneGraph()
|
|
const node = graph.createNode('TEXT', graph.getPages()[0].id, {
|
|
text: 'Initial',
|
|
derivedLayout: { width: 67, height: 24 }
|
|
})
|
|
const update = preview ? graph.updateNodePreview.bind(graph) : graph.updateNode.bind(graph)
|
|
update(node.id, { opacity: 0.5 })
|
|
expect(node.derivedLayout).toEqual({ width: 67, height: 24 })
|
|
update(node.id, { text: 'Replacement', derivedLayout: { width: 120, height: 24 } })
|
|
expect(node.derivedLayout).toEqual({ width: 120, height: 24 })
|
|
update(node.id, { fontSize: 20 })
|
|
expect(node.derivedLayout).toBeNull()
|
|
})
|
|
}
|
|
|
|
test('resizing flat text drops its glyphs so it reflows, while path text scales them', () => {
|
|
const graph = new SceneGraph()
|
|
const glyphs = [{ commandsBlob: new Uint8Array([0]), x: 0, y: 10, fontSize: 12, rotation: 0 }]
|
|
const flat = graph.createNode('TEXT', graph.getPages()[0].id, {
|
|
text: 'Text',
|
|
width: 100,
|
|
height: 20,
|
|
derivedTextGlyphs: glyphs
|
|
})
|
|
const path = graph.createNode('TEXT', graph.getPages()[0].id, {
|
|
text: 'Text',
|
|
width: 100,
|
|
height: 20,
|
|
derivedTextGlyphs: glyphs.map((glyph) => ({ ...glyph, rotation: -0.5 }))
|
|
})
|
|
for (const node of [flat, path]) {
|
|
graph.updateNode(node.id, {
|
|
width: 200,
|
|
...scaledGeometryChanges(node, node.width, node.height, 200, node.height)
|
|
})
|
|
}
|
|
|
|
expect(flat.derivedTextGlyphs).toBeNull()
|
|
expect(path.derivedTextGlyphs?.[0].scaleX).toBe(2)
|
|
})
|