diff --git a/CHANGELOG.md b/CHANGELOG.md index 32a612a28..3ab1f11df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -49,6 +49,7 @@ ### Fixed +- Scale proportion-constrained `.fig` instance geometry through fixed wrapper layers so imported logos and icons retain their intended size. - Match Figma auto-layout spacing, padding, min/max constraints, scalar variable bindings, CanvasKit-shaped generated text, imported text bounds, and nested instance geometry more closely. - Match Figma Plugin API vector path and network editing, including bounds, transforms, winding rules, region fills, validation, and handle mirroring. (#444) - Let AI and MCP tools create arbitrary vectors from SVG path data, validating input without leaving blank layers behind. (#440) diff --git a/packages/fig/src/instance-overrides/constraints.ts b/packages/fig/src/instance-overrides/constraints.ts index 7f1b87613..d14a06c1e 100644 --- a/packages/fig/src/instance-overrides/constraints.ts +++ b/packages/fig/src/instance-overrides/constraints.ts @@ -2,6 +2,7 @@ import type { SceneGraph, SceneNode, VectorNetwork } from '@open-pencil/scene-gr import { copyGeometryPaths, scaleGeometryPaths } from '@open-pencil/scene-graph/copy' import { constrainedChildRect } from '@open-pencil/scene-graph/resize' +import { readEffectiveFigmaRawField } from '../source-metadata' import { isFieldProtected } from './patches' import { buildClonesMap } from './sync' import type { OverrideContext } from './types' @@ -9,6 +10,19 @@ import { overrideCandidates } from './utils' const MAX_CLONE_CHAIN_DEPTH = 10 +interface ScaleDescendantAxes { + horizontal: boolean + vertical: boolean +} + +interface InstanceScale { + basis: SceneNode + scaleThroughFixedWrappers: boolean + sx: number + sy: number + useCurrentChildAsSource: boolean +} + /** * Apply SCALE constraint resizing to children of instances whose size * differs from their component's original size, then propagate the @@ -22,14 +36,13 @@ export function applyConstraintScaling(ctx: OverrideContext): void { if (node.type !== 'INSTANCE' || !node.componentId) continue const comp = graph.getNode(node.componentId) if (!comp || comp.width <= 0 || comp.height <= 0) continue - const basis = resolveScaleBasis(graph, node, comp) - if (!basis) continue + const scale = resolveInstanceScale(graph, node, comp) + if (!scale) continue - positionPinnedAbsoluteChildren(ctx, node, basis) + positionPinnedAbsoluteChildren(ctx, node, scale.basis) if (node.layoutMode !== 'NONE') continue - const sx = node.width / basis.width - const sy = node.height / basis.height + const { sx, sy } = scale if (Math.abs(sx - 1) < 0.001 && Math.abs(sy - 1) < 0.001) continue const figmaId = ctx.nodeIdToGuid.get(node.id) @@ -42,14 +55,53 @@ export function applyConstraintScaling(ctx: OverrideContext): void { sy, scaled, ctx.geometryOverrideNodes, - basis !== comp, - strokeScale + scale.useCurrentChildAsSource, + strokeScale, + scale.scaleThroughFixedWrappers ) } if (scaled.size > 0) propagateScaling(ctx, scaled) } +function resolveInstanceScale( + graph: SceneGraph, + instance: SceneNode, + component: SceneNode +): InstanceScale | null { + const targetAspectRatio = resolveTargetAspectRatio(instance) + const resolvedBasis = resolveScaleBasis(graph, instance, component) + if (!targetAspectRatio && !resolvedBasis) return null + const basis = resolvedBasis ?? component + const scaleThroughFixedWrappers = targetAspectRatio !== null + return { + basis, + scaleThroughFixedWrappers, + sx: instance.width / basis.width, + sy: instance.height / basis.height, + useCurrentChildAsSource: basis !== component + } +} + +function resolveTargetAspectRatio(instance: SceneNode): { width: number; height: number } | null { + const rawTarget = readEffectiveFigmaRawField(instance, 'targetAspectRatio') + if (!rawTarget || typeof rawTarget !== 'object' || !('value' in rawTarget)) return null + const value = rawTarget.value + if (!value || typeof value !== 'object' || !('x' in value) || !('y' in value)) return null + const { x, y } = value + if ( + typeof x !== 'number' || + typeof y !== 'number' || + !Number.isFinite(x) || + !Number.isFinite(y) || + x <= 0 || + y <= 0 + ) { + return null + } + return { width: x, height: y } +} + function isCloneOfSource(graph: SceneGraph, child: SceneNode, sourceId: string): boolean { let current: SceneNode | undefined = child for (let depth = 0; depth < MAX_CLONE_CHAIN_DEPTH && current?.componentId; depth++) { @@ -221,6 +273,40 @@ function scaledGeometryUpdates( return updates } +function scaleDescendantAxes( + graph: SceneGraph, + node: SceneNode, + cache: Map +): ScaleDescendantAxes { + const cached = cache.get(node.id) + if (cached) return cached + const result: ScaleDescendantAxes = { horizontal: false, vertical: false } + for (const child of graph.getChildren(node.id)) { + const nested = scaleDescendantAxes(graph, child, cache) + result.horizontal ||= child.horizontalConstraint === 'SCALE' || nested.horizontal + result.vertical ||= child.verticalConstraint === 'SCALE' || nested.vertical + if (result.horizontal && result.vertical) break + } + cache.set(node.id, result) + return result +} + +function childScaleAxes( + graph: SceneGraph, + child: SceneNode, + scaleThroughFixedWrappers: boolean, + cache: Map +): ScaleDescendantAxes { + const descendantAxes = scaleDescendantAxes(graph, child, cache) + return { + horizontal: + child.horizontalConstraint === 'SCALE' || + (scaleThroughFixedWrappers && descendantAxes.horizontal), + vertical: + child.verticalConstraint === 'SCALE' || (scaleThroughFixedWrappers && descendantAxes.vertical) + } +} + function scaleChildren( graph: SceneGraph, instance: SceneNode, @@ -230,7 +316,9 @@ function scaleChildren( scaled: Set, geometryOverrideNodes: Set, useCurrentChildAsSource = false, - strokeScale?: number + strokeScale?: number, + scaleThroughFixedWrappers = false, + descendantScaleCache = new Map() ): void { const len = Math.min(instance.childIds.length, comp.childIds.length) for (let i = 0; i < len; i++) { @@ -238,8 +326,9 @@ function scaleChildren( const compChild = graph.getNode(comp.childIds[i]) if (!child || !compChild) continue - const hScale = child.horizontalConstraint === 'SCALE' - const vScale = child.verticalConstraint === 'SCALE' + const scaleAxes = childScaleAxes(graph, child, scaleThroughFixedWrappers, descendantScaleCache) + const hScale = scaleAxes.horizontal + const vScale = scaleAxes.vertical if (!hScale && !vScale) continue const updates: Partial = {} @@ -272,7 +361,9 @@ function scaleChildren( scaled, geometryOverrideNodes, useCurrentChildAsSource, - strokeScale + strokeScale, + scaleThroughFixedWrappers, + descendantScaleCache ) } } diff --git a/packages/fig/tests/instance-overrides.test.ts b/packages/fig/tests/instance-overrides.test.ts index c034ab972..d00ed6616 100644 --- a/packages/fig/tests/instance-overrides.test.ts +++ b/packages/fig/tests/instance-overrides.test.ts @@ -156,6 +156,79 @@ describe('@open-pencil/fig instance interpretation', () => { expect(placeholder).toMatchObject({ x: 16, y: 10, text: 'Placeholder' }) }) + test('scales target-aspect instance geometry through fixed wrappers', () => { + const graph = new SceneGraph() + const pageId = graph.getPages()[0].id + const component = graph.createNode('COMPONENT', pageId, { width: 310, height: 62 }) + const wrapper = graph.createNode('FRAME', component.id, { width: 310, height: 61.214 }) + const inset = graph.createNode('RECTANGLE', wrapper.id, { + x: 250, + y: 10, + width: 20, + height: 20, + horizontalConstraint: 'MAX', + verticalConstraint: 'MIN' + }) + const vector = graph.createNode('VECTOR', wrapper.id, { + width: 56.392, + height: 61.214, + horizontalConstraint: 'SCALE', + verticalConstraint: 'SCALE' + }) + const instance = graph.createNode('INSTANCE', pageId, { + width: 100, + height: 20, + componentId: component.id + }) + instance.source.fig.rawNodeFields.targetAspectRatio = { value: { x: 310, y: 62 } } + + populateAndApplyOverrides(graph, new Map(), new Map()) + + const scaledWrapper = graph.getChildren(instance.id)[0] + const scaledShape = graph.getChildren(scaledWrapper.id)[1] + const preservedInset = graph.getChildren(scaledWrapper.id)[0] + expect(scaledWrapper.width).toBeCloseTo(100) + expect(scaledWrapper.height).toBeCloseTo((61.214 * 20) / 62) + expect(preservedInset).toMatchObject({ + x: inset.x, + y: inset.y, + width: inset.width, + height: inset.height + }) + expect(scaledShape.width).toBeCloseTo((vector.width * 100) / 310) + expect(scaledShape.height).toBeCloseTo((vector.height * 20) / 62) + }) + + test('uses target-aspect metadata only to reach scale-constrained descendants', () => { + const graph = new SceneGraph() + const pageId = graph.getPages()[0].id + const component = graph.createNode('COMPONENT', pageId, { width: 24, height: 24 }) + const vector = graph.createNode('VECTOR', component.id, { + x: 9, + y: 3, + width: 6, + height: 6, + horizontalConstraint: 'SCALE', + verticalConstraint: 'SCALE' + }) + const instance = graph.createNode('INSTANCE', pageId, { + width: 14, + height: 14, + componentId: component.id + }) + instance.source.fig.rawNodeFields.targetAspectRatio = { value: { x: 32, y: 32 } } + + populateAndApplyOverrides(graph, new Map(), new Map()) + + const scaledVector = graph.getChildren(instance.id)[0] + expect(scaledVector).toMatchObject({ + x: (vector.x * 14) / 24, + y: (vector.y * 14) / 24, + width: (vector.width * 14) / 24, + height: (vector.height * 14) / 24 + }) + }) + test('limits lazy population to required global propagation scans', () => { const graph = new SceneGraph() const activePage = graph.getPages()[0]