Merge pull request #121 from gridaco/support-flex

Fix flex layout building from figma autolayout with proper layoutGrow value handling

Author: softmarshmallow

editor/scaffolds/code/index.tsx

@@ -56,24 +56,35 @@ export function CodeSegment() {
   const targetted =
     designq.find_node_by_id_under_entry(targetId, root?.entry) ?? root?.entry;
 
-  const targetStateRef = useRef<ReflectSceneNode>();
-  targetStateRef.current = targetted;
+  const targetStateRef =
+    useRef<{
+      node: ReflectSceneNode;
+      config: config.FrameworkConfig;
+    }>();
+  targetStateRef.current = { node: targetted, config: framework_config };
 
   const on_result = (result: Result) => {
+    if (
+      result.framework.framework !==
+        targetStateRef?.current?.config.framework ||
+      result.id !== targetStateRef?.current?.node.id
+    ) {
+      return;
+    }
+
     if (framework_config.language == "dart") {
       // special formatter support for dartlang
       result.code.raw = utils_dart.format(result.code.raw);
       result.scaffold.raw = utils_dart.format(result.scaffold.raw);
     }
 
-    if (result.id == targetStateRef?.current?.id) {
-      setResult(result);
-    }
+    setResult(result);
   };
 
   useEffect(() => {
     const __target = targetted;
-    if (__target && framework_config) {
+    const __framework_config = framework_config;
+    if (__target && __framework_config) {
       const _input = {
         id: __target.id,
         name: __target.name,
@@ -88,7 +99,7 @@ export function CodeSegment() {
       // build code without assets fetch
       designToCode({
         input: _input,
-        framework: framework_config,
+        framework: __framework_config,
         asset_config: { skip_asset_replacement: true },
         build_config: build_config,
       })
@@ -99,7 +110,7 @@ export function CodeSegment() {
       if (!MainImageRepository.instance.empty) {
         designToCode({
           input: root,
-          framework: framework_config,
+          framework: __framework_config,
           asset_config: { asset_repository: MainImageRepository.instance },
           build_config: build_config,
         })

externals/design-sdk

@@ -54,14 +54,16 @@ export function borderRadius(r: BorderRadiusManifest): CSSProperties {
   if (!r) {
     return;
   }
-
   if (r.all) {
     if (isCircularRadius(r.all)) {
       return {
         "border-radius": px(r.all),
       };
     } else {
       console.warn("elliptical border radius not supported");
+      return {
+        "border-radius": px(r.all.x),
+      };
     }
   } else {
     return {

packages/builder-css-styles/border-radius/index.ts

@@ -30,7 +30,6 @@ export function flexsizing({
     case MainAxisSize.max: {
       return {
         "align-self": "stretch",
-        flex: 1, // This is a temporary solution, since stretch can be used on non-space-between parent, but still the item should stretch, we use flex 1 to do this.
       };
     }
     case MainAxisSize.min: {

packages/builder-css-styles/tricks/trick-flex-sizing/index.ts

@@ -30,7 +30,10 @@ export function border(p: Border, rad: BorderRadius): ViewStyle {
   };
 
   // if colors are all same
-  if (equals(p.top?.color, p.right?.color, p.bottom?.color, p.left?.color)) {
+  if (
+    p.top?.color && // not undefined
+    equals(p.top?.color, p.right?.color, p.bottom?.color, p.left?.color)
+  ) {
     o = {
       ...o,
       borderColor: css.color(p.top.color),

packages/builder-react-native/rn-styles/border.ts

@@ -95,6 +95,7 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
     this.mainAxisSize = p.mainAxisSize;
     this.crossAxisAlignment = p.crossAxisAlignment;
     this.verticalDirection = p.verticalDirection;
+    this.flexWrap = p.flexWrap; // cssonly
     //
 
     //
@@ -107,7 +108,6 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
 
     // css only
     this.overflow = p.overflow;
-    this.flexWrap = p.flexWrap;
   }
 
   jsxConfig(): StylableJSXElementConfig {
@@ -120,10 +120,10 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
   styleData(): CSSProperties {
     return {
       display: "flex",
+      overflow: this.overflow,
       ...css.justifyContent(this.mainAxisAlignment),
       "flex-direction": direction(this.direction),
       "align-items": this.crossAxisAlignment,
-      overflow: this.overflow,
       flex: this.flex,
       "flex-wrap": this.flexWrap,
       gap: this.itemSpacing && css.px(this.itemSpacing),

packages/builder-web-core/widgets-native/flex/index.ts

@@ -15,7 +15,7 @@ import {
   default_tokenizer_config,
   TokenizerConfig,
 } from "@designto/token/config";
-import { default_build_configuration } from "@designto/config";
+import { default_build_configuration, FrameworkConfig } from "@designto/config";
 import { reusable } from "@code-features/component";
 import assert from "assert";
 
@@ -28,7 +28,9 @@ interface AssetsConfig {
   custom_asset_replacement?: { type: "static"; resource: string };
 }
 
-export type Result = output.ICodeOutput & { widget: Widget };
+export type Result = output.ICodeOutput & { widget: Widget } & {
+  framework: FrameworkConfig;
+};
 
 export async function designToCode({
   input,
@@ -101,6 +103,11 @@ export async function designToCode({
     reusable_widget_tree: reusable_widget_tree,
   };
 
+  const _extend_result = {
+    ..._tokenized_widget_input,
+    framework: framework_config,
+  };
+
   switch (framework_config.framework) {
     case "vanilla":
       return {
@@ -110,7 +117,7 @@ export async function designToCode({
           vanilla_config: framework_config,
           asset_config: asset_config,
         })),
-        ..._tokenized_widget_input,
+        ..._extend_result,
       };
     case "react":
       return {
@@ -120,7 +127,7 @@ export async function designToCode({
           react_config: framework_config,
           asset_config: asset_config,
         })),
-        ..._tokenized_widget_input,
+        ..._extend_result,
       };
     case "react-native":
       return {
@@ -130,7 +137,7 @@ export async function designToCode({
           reactnative_config: framework_config,
           asset_config: asset_config,
         })),
-        ..._tokenized_widget_input,
+        ..._extend_result,
       };
     case "flutter":
       return {
@@ -140,7 +147,7 @@ export async function designToCode({
           flutter_config: framework_config,
           asset_config: asset_config,
         })),
-        ..._tokenized_widget_input,
+        ..._extend_result,
       };
   }
 

packages/designto-code/universal/design-to-code.ts

@@ -14,12 +14,12 @@ import { tokenize_flagged_wrap } from "./token-wrap";
 import { tokenize_flagged_wh_declaration } from "./token-wh";
 import { tokenize_flagged_fix_wh } from "./token-wh-fix";
 
-export default function (node: ReflectSceneNode) {
+export default function handleWithFlags(node: ReflectSceneNode) {
   const flags = parse(node.name);
-  return handle_with_flags(node, flags);
+  return _handle_with_flags(node, flags);
 }
 
-function handle_with_flags(node, flags: FlagsParseResult) {
+function _handle_with_flags(node, flags: FlagsParseResult) {
   // artwork
   const artwork_flag_alias =
     flags["artwork"] ||

packages/designto-token/support-flags/index.ts

@@ -25,7 +25,7 @@ function fromVector(vector: ReflectVectorNode) {
     // we are not sure when specifically this happens, but as reported, curvy lines does not contain a vector paths.
     // so we just return a image bake of it.
     process.env.NODE_ENV === "development" &&
-      console.warn(
+      console.info(
         `tried to get path data from vector, but none was provided. baking as a bitmap instead.`,
         vector
       );

packages/designto-token/token-graphics/vector.ts

@@ -127,6 +127,17 @@ function flex_or_stack_from_frame(
   };
 
   if (frame.isAutoLayout) {
+    // const __is_this_autolayout_frame_under_autolayout_parent =
+    //   frame.parent instanceof nodes.ReflectFrameNode &&
+    //   frame.parent.isAutoLayout;
+
+    /// > From the docs: https://www.figma.com/plugin-docs/api/properties/nodes-layoutalign
+    /// Changing this property will cause the x, y, size, and relativeTransform properties on this node to change, if applicable (inside an auto-layout frame).
+    /// - Setting "STRETCH" will make the node "stretch" to fill the width of the parent vertical auto - layout frame, or the height of the parent horizontal auto - layout frame excluding the frame's padding.
+    /// - If the current node is an auto layout frame(e.g.an auto layout frame inside a parent auto layout frame) if you set layoutAlign to “STRETCH” you should set the corresponding axis – either primaryAxisSizingMode or counterAxisSizingMode – to be“FIXED”. This is because an auto - layout frame cannot simultaneously stretch to fill its parent and shrink to hug its children.
+    /// - Setting "INHERIT" does not "stretch" the node.
+    ///
+
     // TODO: inspect me. We're not 100% sure this is the correct behaviour.
     switch (frame.layoutMode) {
       case Axis.horizontal: