Merge pull request #123 from gridaco/staging

CSS: Flex align-items & gap fix, linear-gradient deg fix

Author: softmarshmallow

editor/scaffolds/preview/index.tsx

@@ -167,7 +167,7 @@ export function Preview({
         width: target.width,
         height: target.height,
         borderRadius: 1,
-        backgroundColor: bg_color_str,
+        backgroundColor: !preview && bg_color_str, // clear bg after preview is rendered.
         contain: "layout style paint",
       }}
     >

externals/design-sdk

@@ -5,17 +5,23 @@ import { color } from "../color";
 /**
  * https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()
  *
+ * TODO:
+ * - [ ] stops support (position)
+ *
  * @param g
  * @returns
  */
 export function linearGradient(g: LinearGradientManifest): CSSProperty.Color {
-  // throw "css gradient not ready";
-  // TODO:
-  // 1. stops support
-  // 2. angle support
-  var angleDeg =
+  const angle =
     (Math.atan2(g.begin.y - g.end.y, g.begin.x - g.end.x) * 180) / Math.PI;
 
+  const gradient_angle =
+    angle +
+    // when the rotation value is 0, it means the gradient direction is left to right, which in css, it is 90deg.
+    // so we have to subtract 90.
+    // TODO: consider: extract this outside of the styles module?
+    -90;
+
   const colors = g.colors.map(color).join(", ");
-  return `linear-gradient(${angleDeg}deg, ${colors})`;
+  return `linear-gradient(${gradient_angle}deg, ${colors})`;
 }

packages/builder-css-styles/linear-gradient/index.ts

@@ -123,10 +123,14 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
       overflow: this.overflow,
       ...css.justifyContent(this.mainAxisAlignment),
       "flex-direction": direction(this.direction),
-      "align-items": this.crossAxisAlignment,
+      "align-items": flex_align_items(this.crossAxisAlignment),
       flex: this.flex,
       "flex-wrap": this.flexWrap,
-      gap: this.itemSpacing && css.px(this.itemSpacing),
+      gap:
+        // if justify-content is set to space-between, do not set the gap.
+        this.mainAxisAlignment == MainAxisAlignment.spaceBetween
+          ? undefined
+          : this.itemSpacing && css.px(this.itemSpacing),
       "box-shadow": css.boxshadow(...(this.boxShadow ?? [])),
       ...css.border(this.border),
       ...css.borderRadius(this.borderRadius),
@@ -153,3 +157,24 @@ function direction(axis: Axis): CSSProperty.FlexDirection {
   }
   throw `axis value of "${axis}" is not a valid reflect Axis value.`;
 }
+
+/**
+ * explicit css value with `flex-` prefix for start, end
+ * why? - "start" and "end" also attributes to the box itself -> to be more flex-specific.
+ * @param alignment
+ * @returns
+ */
+function flex_align_items(alignment: CrossAxisAlignment) {
+  switch (alignment) {
+    case CrossAxisAlignment.start:
+      return "flex-start";
+    case CrossAxisAlignment.end:
+      return "flex-end";
+    case CrossAxisAlignment.center:
+      return "center";
+    case CrossAxisAlignment.stretch:
+      return "stretch";
+    case CrossAxisAlignment.baseline:
+      return "baseline";
+  }
+}