diff --git a/change/@adaptive-web-adaptive-ui-designer-figma-6e2d675e-50db-4ca3-8a9d-973dfcd17294.json b/change/@adaptive-web-adaptive-ui-designer-figma-6e2d675e-50db-4ca3-8a9d-973dfcd17294.json new file mode 100644 index 00000000..fe567d88 --- /dev/null +++ b/change/@adaptive-web-adaptive-ui-designer-figma-6e2d675e-50db-4ca3-8a9d-973dfcd17294.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Put back code gen support for anatomy definition", + "packageName": "@adaptive-web/adaptive-ui-designer-figma", + "email": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/adaptive-ui-designer-figma-plugin/src/figma/node.ts b/packages/adaptive-ui-designer-figma-plugin/src/figma/node.ts index 784e8c1c..ec8bec1d 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/figma/node.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/figma/node.ts @@ -1,7 +1,7 @@ import { type Color as CuloriColor, modeLrgb, type Rgb, useMode, wcagLuminance } from "culori/fn"; import { Color, Gradient, Shadow, StyleProperty } from "@adaptive-web/adaptive-ui"; import { AppliedStyleValues, Controller, focusIndicatorNodeName, PluginNode, State, StatesState, STYLE_REMOVE } from "@adaptive-web/adaptive-ui-designer-core"; -import { canHaveChildren, canHaveIndividualStrokes, colorToRgb, colorToRgba, isContainerNode, isInstanceNode, isLineNode, isRectangleNode, isShapeNode, isTextNode, isVectorNode, SOLID_BLACK, SOLID_TRANSPARENT, variantBooleanHelper } from "./utility.js"; +import { canHaveChildren, canHaveIndividualStrokes, colorToRgb, colorToRgba, isContainerNode, isInstanceNode, isLayoutNode, isLineNode, isRectangleNode, isShapeNode, isTextNode, isVectorNode, SOLID_BLACK, SOLID_TRANSPARENT, variantBooleanHelper } from "./utility.js"; import { gradientToGradientPaint } from "./gradient.js"; import { PluginDataResolver } from "./plugin-data-resolver.js"; @@ -79,6 +79,7 @@ export class FigmaPluginNode extends PluginNode { this._componentAppliedDesignTokens = this._refNode.appliedDesignTokens; } + this.config = JSON.parse(PluginNode.pluginDataAccessor.getPluginData(this, "config") || "{}"); this._localDesignTokens = await PluginNode.pluginDataAccessor.getLocalDesignTokens(this); this._appliedStyleModules = await PluginNode.pluginDataAccessor.getAppliedStyleModules(this); this._appliedDesignTokens = await PluginNode.pluginDataAccessor.getAppliedDesignTokens(this); @@ -447,6 +448,14 @@ export class FigmaPluginNode extends PluginNode { } } + private handleSize(values: AppliedStyleValues) { + if (isLayoutNode(this._node)) { + const width = this.safeNumber(values.get(StyleProperty.width)?.value) || this._node.width; + const height = this.safeNumber(values.get(StyleProperty.height)?.value) || this._node.height; + (this._node).resize(width, height); + } + } + protected safeNumber(value: string, defaultValue: number = 0) { return value === STYLE_REMOVE ? defaultValue : Number.parseFloat(value); } @@ -457,6 +466,8 @@ export class FigmaPluginNode extends PluginNode { this.handleStroke(values); + this.handleSize(values); + // Paint all applied design tokens on the node for (const [target, styleValue] of values) { // console.log("applied design token eval", target, applied); @@ -571,6 +582,10 @@ export class FigmaPluginNode extends PluginNode { (this._node as BaseFrameMixin).itemSpacing = this.safeNumber(value); // Removes unit, so assumes px } break; + case StyleProperty.height: + case StyleProperty.width: + // Ignore, handled in handleSize. + break; case StyleProperty.shadow: { const shadows: Shadow[] = Array.isArray(value) ? value : [value]; @@ -592,6 +607,7 @@ export class FigmaPluginNode extends PluginNode { } break; default: + console.error(`Applied design token could not be painted for ${target}:`, JSON.stringify(value), this.debugInfo); throw new Error(`Applied design token could not be painted for ${target}: ${JSON.stringify(value)}`); } } diff --git a/packages/adaptive-ui-designer-figma-plugin/src/figma/utility.ts b/packages/adaptive-ui-designer-figma-plugin/src/figma/utility.ts index cce8f774..bead4015 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/figma/utility.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/figma/utility.ts @@ -55,6 +55,32 @@ export function isContainerNode(node: BaseNode): node is ].some((test: (node: BaseNode) => boolean) => test(node)); } +export function isLayoutNode(node: BaseNode): node is + FrameNode | + GroupNode | + ComponentSetNode | + ComponentNode | + InstanceNode | + RectangleNode | + EllipseNode | + PolygonNode | + StarNode | + BooleanOperationNode | + VectorNode | + LineNode | + TextNode { + return [ + isFrameNode, + isGroupNode, + isComponentSetNode, + isComponentNode, + isInstanceNode, + isShapeNode, + isLineNode, + isTextNode, + ].some((test: (node: BaseNode) => boolean) => test(node)); +} + export function isShapeNode(node: BaseNode): node is RectangleNode | EllipseNode | diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts index 5493440b..b737634f 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts @@ -200,7 +200,7 @@ const footerTemplate = html` { const val = x.controller.code.generateForSelectedNodes(); clipboardCopy(val); diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-code.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-code.ts index c2e4c26d..c4066bd8 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-code.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-code.ts @@ -33,12 +33,19 @@ export class CodeController { public generateForSelectedNodes(): string { const selectedNode = this.controller.selectedNodes[0]; - const codeGen = new CodeGen(); + const name = selectedNode.additionalData.get(AdditionalDataKeys.codeGenName) || "unknown"; + + // const codeGen = new CodeGen(); + const anatomy = Anatomy.fromPluginUINodeData(selectedNode); - const genAnatomy = `${codeGen.generateAnatomyCode(anatomy)}\n`; - const genStyles = `${codeGen.generateStylesCode(anatomy)}\n`; + const anatomyJson = JSON.stringify(anatomy, null, 4); + // const genAnatomy = `${codeGen.generateAnatomyCode(anatomy)}\n`; + // const genStyles = `${codeGen.generateStylesCode(anatomy)}\n`; - const output = `${genAnatomy}${genStyles}`; + // const output = `${genAnatomy}${genStyles}`; + console.log("Anatomy generated", name); + + const output = anatomyJson; return output; } } diff --git a/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts b/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts index 89b8b4df..a5b026b3 100644 --- a/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts +++ b/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts @@ -9,7 +9,7 @@ import { SerializableStringCondition, SerializableStyleRule, } from "@adaptive-web/adaptive-ui"; -import { AdditionalDataKeys, type PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core"; +import { AdditionalDataKeys, AppliedDesignTokens, AppliedStyleModules, type PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core"; // A simple string for ignoring layers in the design tool const ignoreLayerName = "(Figma)"; @@ -252,18 +252,35 @@ function walkNode(node: PluginUINodeData, componentName: string, condition: Reco anatomy.parts.add(node.name); } - if (node.appliedStyleModules.length > 0 || node.appliedDesignTokens.size > 0) { + const appliedStyleModules = new AppliedStyleModules(); + if (node.componentAppliedStyleModules) { + appliedStyleModules.push(...node.componentAppliedStyleModules); + } + if (node.appliedStyleModules) { + appliedStyleModules.push(...node.appliedStyleModules); + } + + const appliedDesignTokens = new AppliedDesignTokens([ + ...(node.componentAppliedDesignTokens + ? node.componentAppliedDesignTokens + : []), + ...node.appliedDesignTokens + ? node.appliedDesignTokens + : [], + ]); + + if (appliedStyleModules.length > 0 || appliedDesignTokens.size > 0) { const styleRule = new StyleRule(); if (condition) { styleRule.contextCondition = condition; } - - node.appliedStyleModules.forEach(style => { + + appliedStyleModules.forEach(style => { styleRule.styles.add(style); }); - node.appliedDesignTokens.forEach((token, target) => { + appliedDesignTokens.forEach((token, target) => { const tokenRef = token.tokenID; styleRule.properties.set(target, tokenRef); });