openpencil/tests/engine/figma/api/layout/plugin-compat.test.ts

import { describe, expect, test } from 'bun:test'

import { FigmaAPI } from '@open-pencil/core/figma-api'
import { SceneGraph } from '@open-pencil/scene-graph'

function setup() {
  const graph = new SceneGraph()
  return { graph, api: new FigmaAPI(graph) }
}

describe('Figma Plugin API layout compatibility', () => {
  test('rescale scales geometry, visual properties, and descendants from the root top-left', () => {
    const { api, graph } = setup()
    const frame = api.createFrame()
    frame.x = 30
    frame.y = 40
    frame.resize(100, 80)
    frame.paddingLeft = 10
    frame.paddingRight = 12
    frame.paddingTop = 6
    frame.paddingBottom = 8
    frame.itemSpacing = 5
    frame.cornerRadius = 7
    frame.strokes = [
      {
        color: { r: 0, g: 0, b: 0, a: 1 },
        weight: 3,
        opacity: 1,
        visible: true,
        align: 'CENTER'
      }
    ]
    frame.effects = [
      {
        type: 'DROP_SHADOW',
        color: { r: 0, g: 0, b: 0, a: 1 },
        offset: { x: 5, y: -3 },
        radius: 2,
        spread: 1,
        visible: true,
        blendMode: 'NORMAL'
      }
    ]

    const text = api.createText()
    text.characters = 'Hi'
    text.fontSize = 10
    text.letterSpacing = 2
    text.lineHeight = 14
    frame.appendChild(text)
    text.x = 11
    text.y = 13

    frame.rescale(2)

    expect(frame.x).toBe(30)
    expect(frame.y).toBe(40)
    expect(frame.width).toBe(200)
    expect(frame.height).toBe(160)
    expect(frame.paddingLeft).toBe(20)
    expect(frame.paddingRight).toBe(24)
    expect(frame.paddingTop).toBe(12)
    expect(frame.paddingBottom).toBe(16)
    expect(frame.itemSpacing).toBe(10)
    expect(frame.cornerRadius).toBe(14)
    expect(frame.strokeWeight).toBe(6)
    expect(frame.effects[0]?.offset).toEqual({ x: 10, y: -6 })
    expect(frame.effects[0]?.radius).toBe(4)
    expect(frame.effects[0]?.spread).toBe(2)
    expect(text.x).toBe(22)
    expect(text.y).toBe(26)
    expect(text.fontSize).toBe(20)
    expect(text.letterSpacing).toBe(4)
    expect(text.lineHeight).toBe(28)
    expect(graph.getNode(text.id)?.width).toBe(200)
  })

  test('rescale rejects non-Figma scale factors and pages', () => {
    const { api } = setup()
    const rect = api.createRectangle()
    expect(() => rect.rescale(0.009)).toThrow('Scale must be at least 0.01')
    expect(() => rect.rescale(Number.POSITIVE_INFINITY)).toThrow('Scale must be a finite number')
    expect(() => api.currentPage.rescale(2)).toThrow('rescale() is not supported on this node')
    const section = api.createSection()
    expect(() => section.rescale(2)).toThrow('rescale() is not supported on this node')
  })

  test('page backgrounds expose imported canvas paints and support assignment', () => {
    const { api, graph } = setup()
    const page = graph.getNode(api.currentPage.id)
    expect(page).toBeDefined()
    if (!page) return
    page.source.fig.rawNodeFields.backgroundPaints = [
      {
        type: 'SOLID',
        color: { r: 0.5, g: 0.75, b: 1, a: 1 },
        opacity: 1,
        visible: true,
        blendMode: 'NORMAL'
      }
    ]

    expect(api.currentPage.backgrounds).toEqual([
      {
        type: 'SOLID',
        color: { r: 0.5, g: 0.75, b: 1, a: 1 },
        opacity: 1,
        visible: true,
        blendMode: 'NORMAL'
      }
    ])

    api.currentPage.backgrounds = [
      {
        type: 'SOLID',
        color: { r: 1, g: 0, b: 0, a: 1 },
        opacity: 0.5,
        visible: true,
        blendMode: 'NORMAL'
      }
    ]
    expect(api.currentPage.backgrounds[0]?.color).toEqual({ r: 1, g: 0, b: 0, a: 1 })
    expect(page.source.fig.rawNodeFields.backgroundColor).toEqual({ r: 1, g: 0, b: 0, a: 1 })
  })

  test('absoluteRenderBounds includes strokes and effects and returns null for invisible pixels', () => {
    const { api } = setup()
    const rect = api.createRectangle()
    rect.x = 3
    rect.y = 4
    rect.resize(10, 20)
    rect.strokes = [
      {
        color: { r: 1, g: 0, b: 0, a: 1 },
        weight: 4,
        opacity: 1,
        visible: true,
        align: 'OUTSIDE'
      }
    ]
    rect.effects = [
      {
        type: 'DROP_SHADOW',
        color: { r: 0, g: 0, b: 0, a: 1 },
        offset: { x: 5, y: -3 },
        radius: 2,
        spread: 1,
        visible: true,
        blendMode: 'NORMAL'
      }
    ]

    expect(rect.absoluteBoundingBox).toEqual({ x: 3, y: 4, width: 10, height: 20 })
    expect(rect.absoluteRenderBounds).toEqual({ x: -1, y: -6, width: 26, height: 34 })

    rect.visible = false
    expect(rect.absoluteBoundingBox).toEqual({ x: 3, y: 4, width: 10, height: 20 })
    expect(rect.absoluteRenderBounds).toBeNull()

    const emptyVector = api.createVector()
    expect(emptyVector.absoluteRenderBounds).toBeNull()
  })

  test('absoluteRenderBounds is clipped by ancestor frames', () => {
    const { api } = setup()
    const frame = api.createFrame()
    frame.resize(100, 100)
    frame.clipsContent = true
    const rect = api.createRectangle()
    rect.x = 150
    rect.resize(20, 20)
    frame.appendChild(rect)

    expect(rect.absoluteRenderBounds).toBeNull()
  })
})