Basic flex support #1021

anttileppa · 2023-09-08T12:12:01Z

Added an initial support for very simple flex divs. This does not support all flex features, instead it allows some really basic flex features like alignments, justifications and directions.

Related to #877

daohoangson · 2023-09-08T13:47:29Z

Thank you for your contribution. Do you have screenshots of HTML with flex and their rendering?

anttileppa · 2023-09-08T16:57:30Z

Sure,

Using following HTML:

<h2>Horizontal Alignments</h2>
<!-- Flex Start (default horizontal alignment) -->

<div style="display: flex; width: 100%; height: 100px; background-color: lightgray; margin-bottom: 20px; align-items: flex-start;">
  <div>align-items: flex-start</div>
</div>

<!-- Flex Center -->
<div style="display: flex; width: 100%; height: 100px; background-color: lightgray; margin-bottom: 20px; align-items: center;">
  <div>align-items: center</div>
</div>

<!-- Flex End -->
<div style="display: flex; width: 100%; height: 100px; background-color: lightgray; margin-bottom: 20px; align-items: flex-end;">
  <div>align-items: flex-end</div>
</div>

<h2>Vertical Alignments</h2>

<!-- Flex Start (default vertical alignment) -->
<div style="display: flex; width: 300px; height: 100px; background-color: lightgray; margin-bottom: 20px; justify-content: flex-start;">
  <div>justify-content: flex-start</div>
</div>

<!-- Flex Center -->
<div style="display: flex; width: 300px; height: 100px; background-color: lightgray; margin-bottom: 20px; justify-content: center;">
  <div>justify-content: center</div>
</div>

<!-- Flex End -->
<div style="display: flex; width: 300px; height: 100px; background-color: lightgray; margin-bottom: 20px; justify-content: flex-end;">
  <div>justify-content: flex-end</div>
</div>

Browser renders following output:

And HtmlWidget:

daohoangson

Please have a look, I have some comments. We also need some unit tests to cover the basics.

daohoangson · 2023-09-27T16:48:36Z

packages/core/lib/src/core_widget_factory.dart

+      case 'div':
+        final displayExpressions = meta.element.styles.where((element) => element.property == 'display');
+        final displayExpression = displayExpressions.isNotEmpty ? displayExpressions.first : null;
+        final display = displayExpression?.term ?? 'block';
+        if (display == 'flex') {
+          meta.register(_flexOp(meta));
+        }

+        meta[kCssDisplay] = kCssDisplayBlock;
+        break;


Flex is supported for all kind of tags, not just DIV right? I think we should handle flex for all of them in parseStyleDisplay.

daohoangson · 2023-09-27T16:51:02Z

packages/core/lib/src/core_widget_factory.dart

@@ -1150,14 +1158,103 @@ class WidgetFactory {
    return baseUrl.resolveUri(uri).toString();
  }

+  /// Builds custom widget for div elements with display: flex from [meta]
+  BuildOp _flexOp(BuildMetadata meta) {
+    return BuildOp(


This op should be in its own file I think, probably packages/core/lib/src/internal/ops/flex.dart. Because of the complexity, flex implementation will grow to support all kind of use cases, the factory file is already too long.

daohoangson · 2023-09-27T16:52:15Z

packages/core/lib/src/core_widget_factory.dart

+
+          if (value != null) {
+            switch (element.property) {
+              case 'flex-direction':


This repo usually defines constants for inline style key & values. Like this:

const kCssBoxSizing = 'box-sizing'; const kCssBoxSizingContentBox = 'content-box'; const kCssBoxSizingBorderBox = 'border-box';

daohoangson · 2023-09-27T16:53:21Z

packages/core/lib/src/core_widget_factory.dart

-      onTree: (meta, tree) {
-        _anchorRegistry.register(id, anchor);
-        tree.registerAnchor(anchor);
-      },


Why are these lines being removed? I think the anchor logic won't work without them?

anttileppa · 2023-09-28T04:34:33Z

That you for the review @daohoangson, I mode the review changes and added tests for basic usage, horizontal alignments, vertical alignments and flex directions.

Let me know if there is anything else from preventing this to be merged into the project.

daohoangson

This PR also needs conflict resolve to merge into master.

anttileppa · 2023-10-27T05:11:41Z

Conflicts have been resolved and flex has been converted to use new syntax.

anttileppa added 2 commits September 8, 2023 10:42

Added initial support for Flex components

32b5312

Review issues

e33285a

Changed flex items to use width & height auto by defaults

b03cb3d

daohoangson requested changes Sep 27, 2023

View reviewed changes

anttileppa added 7 commits September 27, 2023 20:50

Merge remote-tracking branch 'origin/master' into flex

915110a

Review changes

4dafcf8

Review changes

8f65607

Review changes

637cabf

Review changes

cd3c4b2

Added basic tests for display: flex

73d2452

Renamed FlexOps -> StyleDisplayFlexOps

a6d7473

anttileppa added 3 commits September 28, 2023 08:26

Fixed tests

53687aa

Fixed formatting issues

876e5e7

Merge remote-tracking branch 'origin/master' into flex

9b783d3

anttileppa requested a review from daohoangson October 11, 2023 04:43

daohoangson mentioned this pull request Oct 16, 2023

Background images #1057

Merged

daohoangson requested changes Oct 27, 2023

View reviewed changes

anttileppa added 4 commits October 27, 2023 07:15

Merge remote-tracking branch 'origin/master' into flex

60bd2d7

After merge fixes

6d3942f

Fixed formatter issues

c745352

Formatter issues

7a27188

anttileppa requested a review from daohoangson October 27, 2023 05:11

daohoangson merged commit 2db7b6a into daohoangson:master Oct 27, 2023
14 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Basic flex support #1021

Basic flex support #1021

anttileppa commented Sep 8, 2023 •

edited by daohoangson

Loading

daohoangson commented Sep 8, 2023

anttileppa commented Sep 8, 2023

daohoangson left a comment

daohoangson Sep 27, 2023

daohoangson Sep 27, 2023

daohoangson Sep 27, 2023

daohoangson Sep 27, 2023

anttileppa commented Sep 28, 2023

daohoangson left a comment

anttileppa commented Oct 27, 2023

Basic flex support #1021

Basic flex support #1021

Conversation

anttileppa commented Sep 8, 2023 • edited by daohoangson Loading

daohoangson commented Sep 8, 2023

anttileppa commented Sep 8, 2023

daohoangson left a comment

Choose a reason for hiding this comment

daohoangson Sep 27, 2023

Choose a reason for hiding this comment

daohoangson Sep 27, 2023

Choose a reason for hiding this comment

daohoangson Sep 27, 2023

Choose a reason for hiding this comment

daohoangson Sep 27, 2023

Choose a reason for hiding this comment

anttileppa commented Sep 28, 2023

daohoangson left a comment

Choose a reason for hiding this comment

anttileppa commented Oct 27, 2023

anttileppa commented Sep 8, 2023 •

edited by daohoangson

Loading