openpencil/tests/engine/render/canvas/variable-modes.test.ts
Danila Poyarkov e704343f13 fix(fig): honor node-scoped variable modes
- Import and round-trip per-node variable mode overrides

- Resolve fill and stroke aliases through the nearest mode scope

- Preserve mode maps across cloning and instance synchronization
2026-07-21 00:23:00 +03:00

52 lines
1.4 KiB
TypeScript

import { describe, expect, test } from 'bun:test'
import { SceneGraph, type Fill } from '@open-pencil/scene-graph'
import { resolveFillColor } from '#core/canvas/renderer/colors'
const LIGHT = { r: 1, g: 1, b: 1, a: 1 }
const DARK = { r: 0.04, g: 0.04, b: 0.05, a: 1 }
const BOUND_FILL: Fill = {
type: 'SOLID',
color: LIGHT,
opacity: 1,
visible: true,
blendMode: 'NORMAL'
}
describe('node-scoped variable modes', () => {
test('renderer resolves paint bindings through the nearest mode scope', () => {
const graph = new SceneGraph()
graph.addCollection({
id: 'theme',
name: 'Theme',
modes: [
{ modeId: 'light', name: 'Light' },
{ modeId: 'dark', name: 'Dark' }
],
defaultModeId: 'light',
variableIds: []
})
graph.addVariable({
id: 'background',
name: 'Background',
type: 'COLOR',
collectionId: 'theme',
valuesByMode: { light: LIGHT, dark: DARK },
description: '',
hiddenFromPublishing: false
})
const page = graph.addPage('Page')
const darkFrame = graph.createNode('FRAME', page.id, {
variableModes: { theme: 'dark' }
})
const child = graph.createNode('RECTANGLE', darkFrame.id, {
fills: [BOUND_FILL],
boundVariables: { 'fills/0/color': 'background' }
})
expect(resolveFillColor(child.fills[0], 0, child, graph)).toEqual(DARK)
})
})