Put back code gen support for anatomy definition (#270)

Author: bheston

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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)}`);
             }
         }

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 |

packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts

@@ -200,7 +200,7 @@ const footerTemplate = html<App>`
             <adaptive-button
                 appearance="stealth"
                 aria-label=${genStylesLabel}
-                style="display: ${/* HACK: Not using this currently (x) => (x.controller.code.supportsCodeGen ? "block" : */"none"/*)*/};"
+                style="display: ${(x) => (x.controller.code.supportsCodeGen ? "block" : "none")};"
                 @click=${(x) => {
                     const val = x.controller.code.generateForSelectedNodes();
                     clipboardCopy(val);

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;
     }
 }

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);
             });