Skip to content

Commit 0df68ab

Browse files
bernaferraribernaferrari
committed
Add flex-1 to Tailwind and HTML.
Fix maxWidth/maxHeight in SwiftUI.
1 parent 6682f90 commit 0df68ab

12 files changed

Lines changed: 118 additions & 34 deletions

File tree

‎__tests__/altNodes/convertNodesOnRectangle.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ describe("convert node if child is big rect", () => {
9898
expect(tailwindMain([invisibleConverted])).toEqual(
9999
`<div class="w-24 h-24">
100100
<div class="inline-flex items-start justify-start pr-12 pb-12 w-full h-full">
101-
<div class="w-full h-full bg-white"></div></div></div>`
101+
<div class="flex-1 h-full bg-white"></div></div></div>`
102102
);
103103
});
104104

@@ -154,7 +154,7 @@ describe("convert node if child is big rect", () => {
154154
expect(tailwindMain([converted])).toEqual(
155155
`<div class="w-5 h-5">
156156
<div class="inline-flex items-center justify-center p-1 w-full h-full bg-black">
157-
<div class="w-full h-full bg-white"></div></div></div>`
157+
<div class="flex-1 h-full bg-white"></div></div></div>`
158158
);
159159
});
160160

@@ -245,7 +245,7 @@ describe("convert node if child is big rect", () => {
245245

246246
expect(tailwindMain([conv])).toEqual(
247247
`<div class="inline-flex items-start justify-start pr-3 pb-3 w-5 h-5 bg-black">
248-
<div class="w-full h-full bg-white"></div></div>`
248+
<div class="flex-1 h-full bg-white"></div></div>`
249249
);
250250
});
251251

‎__tests__/altNodes/convertToAutoLayout.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ describe("Convert to AutoLayout", () => {
7070
frame.children = [node2, node1];
7171

7272
expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
73-
`<div class="inline-flex flex-col items-start justify-end pr-8 pb-2.5 w-12">
73+
`<div class="inline-flex flex-col items-start justify-end pr-8 pb-2.5 w-12 h-12">
7474
<div class="w-full h-1/2 bg-white"></div>
7575
<div class="w-full h-1/2 bg-black"></div></div>`
7676
);
@@ -84,7 +84,7 @@ describe("Convert to AutoLayout", () => {
8484
frame.children = [node2, node1];
8585

8686
expect(tailwindMain([convertToAutoLayout(frame)])).toEqual(
87-
`<div class="inline-flex flex-col space-y-1 items-end justify-end pb-1 w-12">
87+
`<div class="inline-flex flex-col space-y-1 items-end justify-end pb-1 w-12 h-12">
8888
<div class="w-full h-5 bg-white"></div>
8989
<div class="w-5 h-5 bg-black"></div></div>`
9090
);

‎__tests__/flutter/flutterMain.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ Container(width: 4, height: 4, ),),],),)`);
9292
child2.parent = node;
9393

9494
expect(flutterMain([convertToAutoLayout(node)]))
95-
.toEqual(`Container(width: 420, child: Stack(children:[Positioned(left: 9, top: 9, child:
95+
.toEqual(`Container(width: 420, height: 420, child: Stack(children:[Positioned(left: 9, top: 9, child:
9696
Container(width: 385, height: 8, color: Colors.white, ),),Positioned(left: 9, top: 9, child:
9797
Container(width: 8, height: 385, ),),],),)`);
9898
});

‎__tests__/html/htmlMain.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ describe("HTML Main", () => {
5353
child2.parent = node;
5454

5555
expect(htmlMain([convertToAutoLayout(node)]))
56-
.toEqual(`<div style="width: 320px; position: relative;">
56+
.toEqual(`<div style="width: 320px; height: 320px; position: relative;">
5757
<div style="width: 385px; height: 8px; left: 9px; top: 9px; position: absolute; background-color: white;"></div>
5858
<div style="width: 8px; height: 385px; left: 9px; top: 9px; position: absolute;"></div></div>`);
5959
});
@@ -337,6 +337,6 @@ describe("HTML Main", () => {
337337

338338
expect(htmlMain([node], "", false, true))
339339
.toEqual(`<div class="FRAME" style="width: 32px; height: 32px; background-image: linear-gradient(131deg, rgba(0, 0, 255, 1), rgba(255, 0, 0, 1)); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
340-
<p class="TEXT" style="width: 20px; background: linear-gradient(131deg, rgba(0, 0, 255, 1), rgba(255, 0, 0, 1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">gradient</p></div>`);
340+
<p class="TEXT" style="width: 20px; background: linear-gradient(131deg, rgba(0, 0, 255, 1), rgba(255, 0, 0, 1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">gradient</p></div>`);
341341
});
342342
});

‎__tests__/swiftui/builderImpl/swiftuiSize.test.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,17 @@ describe("swiftui Builder", () => {
4343
"\n.frame(maxWidth: .infinity, maxHeight: .infinity)"
4444
);
4545

46+
child.layoutGrow = 0;
47+
expect(swiftuiSize(child)).toEqual(
48+
"\n.frame(maxWidth: 100, maxHeight: .infinity)"
49+
);
50+
51+
child.layoutGrow = 1;
52+
child.layoutAlign = "INHERIT";
53+
expect(swiftuiSize(child)).toEqual(
54+
"\n.frame(maxWidth: .infinity, maxHeight: 100)"
55+
);
56+
4657
// fail
4758
node.layoutMode = "VERTICAL";
4859
child.layoutAlign = "INHERIT";
@@ -52,7 +63,7 @@ describe("swiftui Builder", () => {
5263
expect(swiftuiSize(child)).toEqual("\n.frame(width: 16, height: 16)");
5364

5465
// child is relative, therefore it must have a value
55-
expect(swiftuiSize(node)).toEqual("\n.frame(width: 100)");
66+
expect(swiftuiSize(node)).toEqual("\n.frame(width: 100, height: 100)");
5667
});
5768

5869
it("Vertical layout with FIXED counterAxis", () => {

‎__tests__/tailwind/builderImpl/tailwindSize.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ describe("Tailwind Builder", () => {
4646
child.parent = node;
4747
node.children = [child];
4848

49-
expect(tailwindSize(child)).toEqual("w-full h-full ");
49+
expect(tailwindSize(child)).toEqual("flex-1 h-full ");
5050

5151
// fail
5252
node.layoutMode = "VERTICAL";
@@ -55,7 +55,7 @@ describe("Tailwind Builder", () => {
5555
expect(tailwindSize(child)).toEqual("w-full h-1/6 ");
5656

5757
// child is relative, therefore it must have a value
58-
expect(tailwindSize(node)).toEqual("w-24 ");
58+
expect(tailwindSize(node)).toEqual("w-24 h-24 ");
5959
});
6060

6161
it("Vertical layout with FIXED counterAxis", () => {

‎__tests__/tailwind/size.test.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ describe("Tailwind Size", () => {
8989

9090
expect(tailwindMain([frameNodeToAlt(node)]))
9191
.toEqual(`<div class="inline-flex items-center justify-center p-60" style="width: 500px; height: 500px;">
92-
<div class="w-full h-full"></div></div>`);
92+
<div class="flex-1 h-full"></div></div>`);
9393

9494
expect(tailwindSize(frameNodeToAlt(subnode))).toEqual("w-2 h-2 ");
9595
});
@@ -177,12 +177,12 @@ describe("Tailwind Size", () => {
177177
child.parent = subnode;
178178

179179
expect(tailwindSize(node)).toEqual("w-full ");
180-
expect(tailwindSize(subnode)).toEqual("w-full ");
181-
expect(tailwindSize(child)).toEqual("w-4 h-full ");
180+
expect(tailwindSize(subnode)).toEqual("");
181+
expect(tailwindSize(child)).toEqual("w-4 flex-1 ");
182182

183183
// additional test for layoutGrow
184184
subnode.layoutMode = "HORIZONTAL";
185-
expect(tailwindSize(child)).toEqual("w-full h-64 ");
185+
expect(tailwindSize(child)).toEqual("flex-1 h-64 ");
186186
});
187187

188188
it("complex autolayout example", () => {
@@ -259,7 +259,7 @@ describe("Tailwind Size", () => {
259259
node.children = [child1, child2, child3, child4];
260260

261261
expect(tailwindMain([node]))
262-
.toEqual(`<div class="inline-flex flex-col space-y-2.5 items-center justify-center px-2.5 w-56 bg-red-600">
262+
.toEqual(`<div class="inline-flex flex-col space-y-2.5 items-center justify-center px-2.5 w-56 h-72 bg-red-600">
263263
<div class="w-full h-5 bg-white"></div>
264264
<div class="w-full h-5 bg-white"></div>
265265
<div class="w-24 h-5 bg-white"></div>

‎src/common/nodeWidthHeight.ts‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -104,18 +104,38 @@ export const nodeWidthHeight = (
104104
}
105105
}
106106

107-
if (
108-
("layoutMode" in node && node.layoutMode === "VERTICAL") ||
109-
("layoutMode" in node &&
110-
((node.layoutMode === "HORIZONTAL" &&
107+
if ("layoutMode" in node) {
108+
if (
109+
(node.layoutMode === "HORIZONTAL" &&
111110
node.counterAxisSizingMode === "AUTO") ||
112-
(node.layoutMode === "VERTICAL" &&
113-
node.primaryAxisSizingMode === "AUTO"))) ||
114-
(node.type !== "RECTANGLE" && nodeHeight > 384) ||
115-
childLargerThanMaxSize(node, "y")
116-
) {
117-
// propHeight = "h-full ";
118-
propHeight = null;
111+
(node.layoutMode === "VERTICAL" && node.primaryAxisSizingMode === "AUTO")
112+
) {
113+
propHeight = null;
114+
}
115+
116+
if (
117+
(node.layoutMode === "VERTICAL" &&
118+
node.counterAxisSizingMode === "AUTO") ||
119+
(node.layoutMode === "HORIZONTAL" &&
120+
node.primaryAxisSizingMode === "AUTO")
121+
) {
122+
propWidth = null;
123+
}
124+
}
125+
126+
// On Tailwind, do not let the size be larger than 384.
127+
if (allowRelative) {
128+
if (
129+
(node.type !== "RECTANGLE" && nodeHeight > 384) ||
130+
childLargerThanMaxSize(node, "y")
131+
) {
132+
propHeight = null;
133+
} else if (
134+
(node.type !== "RECTANGLE" && nodeWidth > 384) ||
135+
childLargerThanMaxSize(node, "x")
136+
) {
137+
propWidth = null;
138+
}
119139
}
120140

121141
if ("layoutMode" in node && node.layoutMode !== "NONE") {

‎src/html/builderImpl/htmlSize.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,30 @@ export const htmlSizePartial = (
1616
if (typeof size.width === "number") {
1717
w += formatWithJSX("width", isJsx, size.width);
1818
} else if (size.width === "full") {
19-
w += formatWithJSX("width", isJsx, "100%");
19+
if (
20+
node.parent &&
21+
"layoutMode" in node.parent &&
22+
node.parent.layoutMode === "HORIZONTAL"
23+
) {
24+
w += formatWithJSX("flex", isJsx, "1 1 0%");
25+
} else {
26+
w += formatWithJSX("width", isJsx, "100%");
27+
}
2028
}
2129

2230
let h = "";
2331
if (typeof size.height === "number") {
2432
h += formatWithJSX("height", isJsx, size.height);
2533
} else if (typeof size.height === "string") {
26-
h += formatWithJSX("height", isJsx, "100%");
34+
if (
35+
node.parent &&
36+
"layoutMode" in node.parent &&
37+
node.parent.layoutMode === "VERTICAL"
38+
) {
39+
h += formatWithJSX("flex", isJsx, "1 1 0%");
40+
} else {
41+
h += formatWithJSX("height", isJsx, "100%");
42+
}
2743
}
2844

2945
return [w, h];

‎src/html/htmlDefaultBuilder.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ import {
1212
htmlOpacity,
1313
} from "./builderImpl/htmlBlend";
1414
import { htmlPosition } from "./builderImpl/htmlPosition";
15-
import { htmlColorFromFills, htmlGradientFromFills } from "./builderImpl/htmlColor";
15+
import {
16+
htmlColorFromFills,
17+
htmlGradientFromFills,
18+
} from "./builderImpl/htmlColor";
1619
import { htmlPadding } from "./builderImpl/htmlPadding";
1720
import { formatWithJSX } from "../common/parseJSX";
1821
import { parentCoordinates } from "../common/parentCoordinates";

0 commit comments

Comments
 (0)