d2e380ea9d
* fix(core): draw gradient and image strokes as the paint they are A stroke carried the paint vocabulary already, but nothing read it: the .fig reader sent every stroke paint through resolvedPaintColor, which returns black for a gradient or image, the renderer set a flat color on strokePaint, and the writer emitted a SOLID paint. Strokes now go through the same conversion fills do in both directions, and applyGradientFill and applyImageFill take the target Paint so a stroke reuses the fill shader path instead of growing a second one. forVisibleStrokes is the single place every stroke draw passes through, so the shader is set and cleared there rather than threaded through each draw helper. Closes #797 for rendering and .fig; authoring a gradient stroke from the stroke panel is still to come. * feat(app): author gradient and image strokes from the stroke panel StrokeSection opened a solid-only colour picker and synthesised a fake fill for the swatch, so a stroke could never be anything but one flat colour. It now opens FillPicker like the fill panel does, and applyStrokePaint keeps the stroke's weight, align, cap, join and dashes across a paint change. Completes #797. * fix(core): let a gradient stroke reach vector outlines and arrowheads A vector stroke draws its outline as a filled shape with fillPaint, a dashed one strokes the path, and arrowheads are filled shapes of their own; each cleared the shader first, so a gradient or image stroke on a vector drew black. The stroke pass now configures both paints and owns clearing them, and those helpers keep what it set. Resolve each gradient stop against the stroke's own colour binding rather than the stop's position, which looked up another stroke's. Reported in review of #868. * fix(core): release the shaders a paint no longer owns Every gradient and image shader was handed to a paint and then leaked: the paint takes its own reference, so the caller's handle has to go or WASM memory grows with each redraw. Only the diamond branch did this. A gradient stroke now configures two paints, which doubled the leak. Reported in review of #868. * test(render): model a shader handle the caller deletes The pattern shader double returned a plain string, so deleting the handle the paint no longer owns threw instead of passing.
295 lines
8.8 KiB
TypeScript
295 lines
8.8 KiB
TypeScript
import { describe, expect, test } from 'bun:test'
|
|
|
|
import {
|
|
applyStyleRefsToFields,
|
|
buildStyleOverrideTable,
|
|
convertEffects,
|
|
convertFills,
|
|
convertFontFeatures,
|
|
convertLetterSpacing,
|
|
convertLineHeight,
|
|
convertStrokes,
|
|
decodeVectorNetworkBlob,
|
|
encodePathCommandsBlob,
|
|
encodeVectorNetworkBlob,
|
|
mapTextDecoration,
|
|
nodeChangeToProps,
|
|
setVariableColorResolver
|
|
} from '#fig/node-change/index'
|
|
|
|
import type { NodeChange, Paint } from '@open-pencil/kiwi/fig/codec'
|
|
|
|
describe('@open-pencil/fig NodeChange policy', () => {
|
|
test('converts normalized text values', () => {
|
|
expect(convertLineHeight({ value: 120, units: 'PERCENT' }, 20)).toBe(24)
|
|
expect(convertLetterSpacing({ value: 10, units: 'PERCENT' }, 20)).toBe(2)
|
|
expect(mapTextDecoration('UNDERLINE')).toBe('UNDERLINE')
|
|
})
|
|
|
|
test('converts Figma OpenType feature toggles', () => {
|
|
expect(
|
|
convertFontFeatures({
|
|
toggledOnOTFeatures: ['DLIG'],
|
|
toggledOffOTFeatures: ['LIGA']
|
|
})
|
|
).toEqual([
|
|
{ tag: 'DLIG', enabled: true },
|
|
{ tag: 'LIGA', enabled: false }
|
|
])
|
|
})
|
|
|
|
test('normalizes imported paints and effects', () => {
|
|
expect(convertFills([{ type: 'SOLID' }])[0]).toMatchObject({
|
|
color: { r: 0, g: 0, b: 0, a: 1 },
|
|
opacity: 1,
|
|
visible: true
|
|
})
|
|
expect(convertEffects([{ type: 'DROP_SHADOW' }])[0]).toMatchObject({
|
|
type: 'DROP_SHADOW',
|
|
radius: 0,
|
|
visible: true
|
|
})
|
|
})
|
|
|
|
test('preserves the translation of rotated and mirrored Figma instances', () => {
|
|
const props = nodeChangeToProps(
|
|
{
|
|
type: 'INSTANCE',
|
|
size: { x: 955, y: 95.99996185302734 },
|
|
transform: {
|
|
m00: -4.371139183945161e-8,
|
|
m01: -1,
|
|
m02: 2326,
|
|
m10: -1,
|
|
m11: 4.371139183945161e-8,
|
|
m12: 2254
|
|
}
|
|
} as NodeChange,
|
|
[]
|
|
)
|
|
|
|
expect(props.rotation).toBeCloseTo(-90, 5)
|
|
expect(props.flipX).toBe(true)
|
|
expect(props.x).toBeCloseTo(1800.5, 4)
|
|
expect(props.y).toBeCloseTo(1728.5, 4)
|
|
})
|
|
|
|
const reflectedTransforms: Array<{
|
|
name: string
|
|
transform: NonNullable<NodeChange['transform']>
|
|
rotation: number
|
|
}> = [
|
|
{
|
|
name: 'horizontal reflection',
|
|
transform: { m00: -1, m01: 0, m02: 400, m10: 0, m11: 1, m12: 200 },
|
|
rotation: 0
|
|
},
|
|
{
|
|
name: 'vertical reflection represented as a rotated horizontal reflection',
|
|
transform: { m00: 1, m01: 0, m02: 400, m10: 0, m11: -1, m12: 200 },
|
|
rotation: 180
|
|
},
|
|
{
|
|
name: 'negative quarter-turn reflection',
|
|
transform: { m00: 0, m01: -1, m02: 400, m10: -1, m11: 0, m12: 200 },
|
|
rotation: -90
|
|
},
|
|
{
|
|
name: 'positive quarter-turn reflection',
|
|
transform: { m00: 0, m01: 1, m02: 400, m10: 1, m11: 0, m12: 200 },
|
|
rotation: 90
|
|
}
|
|
]
|
|
|
|
test.each(reflectedTransforms)('reconstructs $name matrices', ({ transform, rotation }) => {
|
|
const width = 120
|
|
const height = 80
|
|
const props = nodeChangeToProps(
|
|
{ type: 'INSTANCE', size: { x: width, y: height }, transform } as NodeChange,
|
|
[]
|
|
)
|
|
|
|
expect(props.rotation).toBeCloseTo(rotation, 5)
|
|
expect(props.flipX).toBe(true)
|
|
|
|
const actualRotation = props.rotation ?? 0
|
|
const x = props.x ?? 0
|
|
const y = props.y ?? 0
|
|
const radians = (actualRotation * Math.PI) / 180
|
|
const cos = Math.cos(radians)
|
|
const sin = Math.sin(radians)
|
|
const centerX = width / 2
|
|
const centerY = height / 2
|
|
expect(-cos).toBeCloseTo(transform.m00, 5)
|
|
expect(sin).toBeCloseTo(transform.m01, 5)
|
|
expect(sin).toBeCloseTo(transform.m10, 5)
|
|
expect(cos).toBeCloseTo(transform.m11, 5)
|
|
expect(x + centerX - (-cos * centerX + sin * centerY)).toBeCloseTo(transform.m02, 5)
|
|
expect(y + centerY - (sin * centerX + cos * centerY)).toBeCloseTo(transform.m12, 5)
|
|
})
|
|
|
|
test('keeps resolved variable alpha in paint opacity', () => {
|
|
setVariableColorResolver(() => ({ r: 1, g: 0, b: 0, a: 0.4 }))
|
|
try {
|
|
const paint: Paint = {
|
|
type: 'SOLID',
|
|
color: { r: 0, g: 0, b: 0, a: 1 },
|
|
colorVar: { value: { alias: { guid: { sessionID: 1, localID: 2 } } } }
|
|
}
|
|
expect(convertFills([paint])[0]).toMatchObject({
|
|
color: { r: 1, g: 0, b: 0, a: 1 },
|
|
opacity: 0.4
|
|
})
|
|
expect(convertStrokes([paint])[0]).toMatchObject({
|
|
color: { r: 1, g: 0, b: 0, a: 1 },
|
|
opacity: 0.4
|
|
})
|
|
} finally {
|
|
setVariableColorResolver(null)
|
|
}
|
|
})
|
|
|
|
test("carries a gradient stroke's stops and transform, not a black solid", () => {
|
|
const paint: Paint = {
|
|
type: 'GRADIENT_LINEAR',
|
|
stops: [
|
|
{ color: { r: 1, g: 0, b: 0, a: 1 }, position: 0 },
|
|
{ color: { r: 0, g: 0, b: 1, a: 1 }, position: 1 }
|
|
],
|
|
transform: { m00: 1, m01: 0, m02: 0, m10: 0, m11: 1, m12: 0 }
|
|
}
|
|
const [stroke] = convertStrokes([paint], 2, 'OUTSIDE')
|
|
|
|
expect(stroke.type).toBe('GRADIENT_LINEAR')
|
|
expect(stroke.gradientStops?.map((stop) => stop.position)).toEqual([0, 1])
|
|
expect(stroke.gradientStops?.[0].color).toMatchObject({ r: 1, g: 0, b: 0 })
|
|
expect(stroke.gradientTransform).toMatchObject({ m00: 1, m11: 1 })
|
|
expect(stroke).toMatchObject({ weight: 2, align: 'OUTSIDE' })
|
|
})
|
|
|
|
test("carries an image stroke's hash and scale mode", () => {
|
|
const paint: Paint = { type: 'IMAGE', image: { hash: 'abc123' }, imageScaleMode: 'FIT' }
|
|
const [stroke] = convertStrokes([paint], 1, 'INSIDE')
|
|
|
|
expect(stroke.type).toBe('IMAGE')
|
|
expect(stroke.imageHash).toBe('abc123')
|
|
expect(stroke.imageScaleMode).toBe('FIT')
|
|
})
|
|
|
|
test('uses vector-region winding rules for rendered geometry', () => {
|
|
const network = {
|
|
vertices: [
|
|
{ x: 0, y: 0, handleMirroring: 'NONE' as const },
|
|
{ x: 10, y: 0, handleMirroring: 'NONE' as const },
|
|
{ x: 0, y: 10, handleMirroring: 'NONE' as const }
|
|
],
|
|
segments: [
|
|
{
|
|
start: 0,
|
|
end: 1,
|
|
tangentStart: { x: 0, y: 0 },
|
|
tangentEnd: { x: 0, y: 0 }
|
|
},
|
|
{
|
|
start: 1,
|
|
end: 2,
|
|
tangentStart: { x: 0, y: 0 },
|
|
tangentEnd: { x: 0, y: 0 }
|
|
},
|
|
{
|
|
start: 2,
|
|
end: 0,
|
|
tangentStart: { x: 0, y: 0 },
|
|
tangentEnd: { x: 0, y: 0 }
|
|
}
|
|
],
|
|
regions: [{ windingRule: 'EVENODD' as const, loops: [[0, 1, 2]] }]
|
|
}
|
|
const props = nodeChangeToProps(
|
|
{
|
|
type: 'VECTOR',
|
|
fillGeometry: [{ windingRule: 'NONZERO', commandsBlob: 0 }],
|
|
vectorData: { vectorNetworkBlob: 1 }
|
|
} as NodeChange,
|
|
[
|
|
encodePathCommandsBlob([
|
|
{ type: 'M', x: 0, y: 0 },
|
|
{ type: 'L', x: 10, y: 0 },
|
|
{ type: 'L', x: 0, y: 10 },
|
|
{ type: 'Z' }
|
|
]),
|
|
encodeVectorNetworkBlob(network)
|
|
]
|
|
)
|
|
|
|
expect(props.fillGeometry?.[0]?.windingRule).toBe('EVENODD')
|
|
})
|
|
|
|
test('round-trips vector network blobs with handle mirroring', () => {
|
|
const network = {
|
|
vertices: [
|
|
{ x: 0, y: 0, handleMirroring: 'ANGLE' as const },
|
|
{ x: 10, y: 0, handleMirroring: 'NONE' as const }
|
|
],
|
|
segments: [
|
|
{
|
|
start: 0,
|
|
end: 1,
|
|
tangentStart: { x: 0, y: 0 },
|
|
tangentEnd: { x: 0, y: 0 }
|
|
}
|
|
],
|
|
regions: []
|
|
}
|
|
const { table, styleToId } = buildStyleOverrideTable(network)
|
|
expect(decodeVectorNetworkBlob(encodeVectorNetworkBlob(network, styleToId), table)).toEqual(
|
|
network
|
|
)
|
|
})
|
|
|
|
test('resolves imported style references before SceneGraph conversion', () => {
|
|
const fields: Record<string, unknown> = {
|
|
styleIdForFill: { guid: { sessionID: 2, localID: 3 } }
|
|
}
|
|
applyStyleRefsToFields(
|
|
new Map([
|
|
[
|
|
'2:3',
|
|
{
|
|
type: 'RECTANGLE',
|
|
styleType: 'FILL',
|
|
fillPaints: [{ type: 'SOLID', visible: true }]
|
|
}
|
|
]
|
|
]),
|
|
fields
|
|
)
|
|
expect(fields.fillPaints).toEqual([{ type: 'SOLID', visible: true }])
|
|
})
|
|
})
|
|
|
|
describe('one-ended arrow import', () => {
|
|
test('a per-vertex arrow cap does not become the node-wide cap', () => {
|
|
const network = {
|
|
vertices: [
|
|
{ x: 0, y: 0 },
|
|
{ x: 100, y: 0, strokeCap: 'ARROW_EQUILATERAL' }
|
|
],
|
|
segments: [{ start: 0, end: 1, tangentStart: { x: 0, y: 0 }, tangentEnd: { x: 0, y: 0 } }],
|
|
regions: []
|
|
}
|
|
const { table, styleToId } = buildStyleOverrideTable(network)
|
|
const props = nodeChangeToProps(
|
|
{
|
|
type: 'VECTOR',
|
|
vectorData: { vectorNetworkBlob: 0, styleOverrideTable: table }
|
|
} as NodeChange,
|
|
[encodeVectorNetworkBlob(network, styleToId)]
|
|
)
|
|
|
|
expect(props.strokeCap).toBe('NONE')
|
|
expect(props.vectorNetwork?.vertices[1].strokeCap).toBe('ARROW_EQUILATERAL')
|
|
expect(props.vectorNetwork?.vertices[0].strokeCap).toBeUndefined()
|
|
})
|
|
})
|