Wrap support with flag --as-wrap

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

@@ -23,6 +23,7 @@ import { IFlexManifest } from "@reflect-ui/core/lib/flex/flex.manifest";
 import * as css from "@web-builder/styles";
 import { CssMinHeightMixin } from "../_utility";
 
+type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
 export class Flex extends MultiChildWidget implements CssMinHeightMixin {
   readonly _type: "row" | "column";
 
@@ -45,6 +46,7 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
   borderRadius?: BorderRadiusManifest;
   border?: Border;
   minHeight?: DimensionLength;
+  flexWrap?: FlexWrap;
 
   constructor(
     p: IFlexManifest<WidgetTree> & {
@@ -64,6 +66,7 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
       overflow?: CSSProperty.Overflow;
       borderRadius?: BorderRadiusManifest;
       border?: Border;
+      flexWrap?: FlexWrap;
     }
   ) {
     super(p);
@@ -92,6 +95,7 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
     // css only
     this.overflow = p.overflow;
     this.minHeight = p.minHeight;
+    this.flexWrap = p.flexWrap;
   }
 
   jsxConfig(): StylableJSXElementConfig {
@@ -109,6 +113,7 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
       "align-items": this.crossAxisAlignment,
       overflow: this.overflow,
       flex: this.flex,
+      "flex-wrap": this.flexWrap,
       gap: this.itemSpacing && css.px(this.itemSpacing),
       "box-shadow": css.boxshadow(this.boxShadow),
       ...css.border(this.border),

packages/designto-code/package.json

@@ -10,7 +10,7 @@
         "@designto/web": "0.0.0",
         "@design-sdk/universal": "0.0.0",
         "@reflect-ui/detection": "0.1.1",
-        "@flutter-builder/flutter": "^2.5.0-f5"
+        "@flutter-builder/flutter": "^2.5.0-f7"
     },
     "files": [
         "README.md",

packages/designto-flutter/dart-ui/dart-ui-clip.ts

@@ -0,0 +1,16 @@
+import { Clip } from "@reflect-ui/core";
+import * as flutter from "@flutter-builder/flutter";
+export function clip(clip: Clip): flutter.Clip {
+  switch (clip) {
+    case Clip.none:
+      return flutter.Clip.none;
+    case Clip.hardEdge:
+      return flutter.Clip.hardEdge;
+    case Clip.antiAlias:
+      return flutter.Clip.antiAlias;
+    case Clip.antiAliasWithSaveLayer:
+      return flutter.Clip.antiAliasWithSaveLayer;
+    default:
+      throw new Error(`Unknown clip: ${clip}`);
+  }
+}

packages/designto-flutter/dart-ui/index.ts

@@ -1,4 +1,5 @@
+export * from "./dart-ui-clip";
+export * from "./dart-ui-color";
 export * from "./dart-ui-offset";
 export * from "./dart-ui-radius";
 export * from "./dart-ui-text-align";
-export * from "./dart-ui-color";

packages/designto-flutter/painting/index.ts

@@ -1,3 +1,4 @@
+export * from "./painting-axis";
 export * from "./painting-alignment";
 export * from "./painting-border-radius";
 export * from "./painting-edge-insets";

packages/designto-flutter/painting/painting-axis.ts

@@ -0,0 +1,11 @@
+import { Axis } from "@reflect-ui/core";
+import * as flutter from "@flutter-builder/flutter";
+
+export function axis(a: Axis): flutter.Axis {
+  switch (a) {
+    case Axis.horizontal:
+      return flutter.Axis.horizontal;
+    case Axis.vertical:
+      return flutter.Axis.vertical;
+  }
+}

packages/designto-flutter/rendering/index.ts

@@ -1,3 +1,5 @@
 export * from "./rendering-cross-axis-alignment";
 export * from "./rendering-main-axis-alignment";
 export * from "./rendering-main-axis-size";
+export * from "./rendering-wrap-alignment";
+export * from "./rendering-wrap-cross-alignment";

packages/designto-flutter/rendering/rendering-wrap-alignment.ts

@@ -0,0 +1,26 @@
+import { WrapAlignment } from "@flutter-builder/flutter";
+import { WrapAlignment as ReflectWrapAlignment } from "@reflect-ui/core/lib";
+import { do_explicitly_specify, FlutterPropConversionConfig } from "../_";
+
+export function wrapAlignment(
+  wrapAlignment: ReflectWrapAlignment,
+  config?: FlutterPropConversionConfig
+): WrapAlignment {
+  switch (wrapAlignment) {
+    case ReflectWrapAlignment.start:
+      // WrapAlignment.start is default value for Wrap
+      return do_explicitly_specify(config, WrapAlignment.start);
+    case ReflectWrapAlignment.start:
+      return WrapAlignment.center;
+    case ReflectWrapAlignment.center:
+      return WrapAlignment.end;
+    case ReflectWrapAlignment.spaceBetween:
+      return WrapAlignment.spaceBetween;
+    case ReflectWrapAlignment.spaceAround:
+      return WrapAlignment.spaceAround;
+    case ReflectWrapAlignment.spaceEvenly:
+      return WrapAlignment.spaceEvenly;
+    default:
+      throw new Error(`Unknown wrapAlignment: ${wrapAlignment}`);
+  }
+}

packages/designto-flutter/rendering/rendering-wrap-cross-alignment.ts

@@ -0,0 +1,24 @@
+import { WrapCrossAlignment } from "@flutter-builder/flutter";
+import * as core from "@reflect-ui/core/lib";
+import { do_explicitly_specify, FlutterPropConversionConfig } from "../_";
+/**
+ * @param wrapCrossAxisAlignment
+ */
+export function wrapCrossAxisAlignment(
+  wrapCrossAxisAlignment: core.WrapCrossAlignment,
+  config?: FlutterPropConversionConfig
+): WrapCrossAlignment {
+  switch (wrapCrossAxisAlignment) {
+    case core.WrapCrossAlignment.start:
+      // WrapCrossAlignment.start is default value
+      return do_explicitly_specify(config, WrapCrossAlignment.start);
+    case core.WrapCrossAlignment.end:
+      return WrapCrossAlignment.end;
+    case core.WrapCrossAlignment.center:
+      return WrapCrossAlignment.start;
+    default:
+      throw new Error(
+        `"${wrapCrossAxisAlignment}" is not a valid wrapCrossAxisAlignment value`
+      );
+  }
+}

packages/designto-flutter/tokens-to-flutter-widget/index.ts

@@ -82,6 +82,22 @@ function compose(widget: core.Widget, context: { is_root: boolean }) {
       children: children,
       //   key: _key,
     });
+  } else if (widget instanceof core.Wrap) {
+    thisFlutterWidget = new flutter.Wrap({
+      ...default_props_for_layout,
+      direction: painting.axis(widget.direction),
+      alignment: rendering.wrapAlignment(widget.alignment),
+      spacing: widget.spacing,
+      runAlignment: rendering.wrapAlignment(widget.runAlignment),
+      runSpacing: widget.runSpacing,
+      crossAxisAlignment: rendering.wrapCrossAxisAlignment(
+        widget.crossAxisAlignment
+      ),
+      verticalDirection: painting.verticalDirection(widget.verticalDirection),
+      clipBehavior: dartui.clip(widget.clipBehavior),
+      children: handleChildren(widget.children),
+      key: undefined,
+    });
   } else if (widget instanceof core.Flex) {
     // FIXME: FLEX not supported yet.
     // thisFlutterWidget = new flutter.Flex({
@@ -95,7 +111,7 @@ function compose(widget: core.Widget, context: { is_root: boolean }) {
     const _remove_overflow_if_root_overflow = {
       clipBehavior: context.is_root
         ? undefined
-        : (widget as core.Stack).clipBehavior,
+        : dartui.clip((widget as core.Stack).clipBehavior),
     };
 
     const children = handle_flutter_case_no_size_stack_children(

packages/designto-token/config/config.ts

@@ -1,3 +1,47 @@
+/**
+ * A tokenizer config interface for extending tokenizer's behavior.
+ *
+ * The default tokenizer config is: @see {default_tokenizer_config}
+ */
 export interface TokenizerConfig {
   sanitizer_ignore_masking_node: boolean;
+
+  /**
+   * @default false - flags support enabled by default.
+   */
+  disable_flags_support?: boolean;
+
+  /**
+   * stops the tokenizer when max depth is reached relative to starter (root) node.
+   * @default "infinite"
+   */
+  max_depth?: number | "infinite";
+
+  /**
+   * stops the current tokenizer (not the root tokenizing proc) when max depth is reached relative to current node.
+   * @default "infinite"
+   */
+  max_each_depth?: number | "infinite";
+
+  /**
+   * (a.k.a should_stop) a middleware function that will be called before the each tokenization. if returns `true`, the tokenization will stop and return the current value.
+   */
+  should_break?: (node: any) => boolean;
+
+  /**
+   * a middleware function that will be called before the each tokenization. if returns `true`, the tokenization will be skipped.
+   */
+  should_skip?: (node: any) => boolean;
+
+  /**
+   * ignore a flag feature with a explicit gate.
+   * if ignore_flag set to true, the flag will be ignored even if this function returns false.
+   * It only affects when `true` returned as a result.
+   */
+  should_ignore_flag?: (node: any) => boolean;
+
+  /**
+   * A function that is called in between every tokenization process. (on shot for on node)
+   */
+  process_listener?: (node: any) => void;
 }

packages/designto-token/config/default-config.ts

@@ -1,6 +1,12 @@
 import { TokenizerConfig } from "./config";
 
-export const default_tokenizer_config: TokenizerConfig = {
+export const default_tokenizer_config: TokenizerConfig = <TokenizerConfig>{
   // temporarily ignoring since masking is not supported yet.
   sanitizer_ignore_masking_node: true,
+  disable_flags_support: false,
+  max_depth: "infinite",
+  max_each_depth: "infinite",
+  should_break: () => false,
+  should_skip: () => false,
+  process_listener: () => {},
 };