[skip ci] Switch to use sizing hints

daohoangson · daohoangson · commit 8d18bda0edb2 · 2025-04-20T22:35:39.000+07:00
diff --git a/packages/core/lib/src/internal/ops/tag_table.dart b/packages/core/lib/src/internal/ops/tag_table.dart
@@ -85,19 +85,12 @@ class TagTable {
 
     final layoutBuilder = LayoutBuilder(
       builder: (context, bc) {
-        // wrap the table in a builder to obtain the layout constraints early
-        // in order to calculate a conservative width
-        // the whole thing becomes scrollable when columns are too wide
-        final maxWidth = bc.maxWidth;
-
         final resolved = tableTree.inheritanceResolvers.resolve(context);
         Widget built = ValignBaselineContainer(
           child: HtmlTable(
             border: border.getBorder(resolved),
             borderCollapse: borderCollapse == kCssBorderCollapseCollapse,
             borderSpacing: borderSpacing?.getValue(resolved) ?? 0.0,
-            maxWidth: maxWidth,
-            minWidth: bc.minWidth,
             textDirection: resolved.directionOrLtr,
             children: List.from(
               data.builders
@@ -108,7 +101,14 @@ class TagTable {
           ),
         );
 
-        if (maxWidth.isFinite) {
+        // provide hints to size the columns properly
+        built = CssSizingHint(
+          maxWidth: bc.maxWidth,
+          minWidth: bc.minWidth,
+          child: built,
+        );
+
+        if (bc.maxWidth.isFinite) {
           built = wf.buildHorizontalScrollView(tableTree, built) ?? built;
         }
 
diff --git a/packages/core/lib/src/widgets/css_sizing.dart b/packages/core/lib/src/widgets/css_sizing.dart
@@ -73,8 +73,8 @@ class CssSizing extends SingleChildRenderObjectWidget {
     return _RenderCssSizing(
       maxHeight: maxHeight ?? hint?.maxHeight.cssSizingValue,
       maxWidth: maxWidth ?? hint?.maxWidth.cssSizingValue,
-      minHeight: minHeight,
-      minWidth: minWidth,
+      minHeight: minHeight ?? hint?.minHeight.cssSizingValue,
+      minWidth: minWidth ?? hint?.minWidth.cssSizingValue,
       preferredAxis: preferredAxis,
       preferredHeight: preferredHeight,
       preferredWidth: preferredWidth,
@@ -137,17 +137,24 @@ class CssSizing extends SingleChildRenderObjectWidget {
 class CssSizingHint extends InheritedWidget {
   final double? maxHeight;
   final double? maxWidth;
+  final double? minHeight;
+  final double? minWidth;
 
   const CssSizingHint({
     required super.child,
     super.key,
     this.maxHeight,
     this.maxWidth,
+    this.minHeight,
+    this.minWidth,
   });
 
   @override
   bool updateShouldNotify(CssSizingHint oldWidget) =>
-      maxHeight != oldWidget.maxHeight || maxWidth != oldWidget.maxWidth;
+      maxHeight != oldWidget.maxHeight ||
+      maxWidth != oldWidget.maxWidth ||
+      minHeight != oldWidget.minHeight ||
+      minWidth != oldWidget.minWidth;
 }
 
 class _RenderCssSizing extends RenderProxyBox {
@@ -273,13 +280,17 @@ class _RenderCssSizing extends RenderProxyBox {
           )
         : null;
 
-    final cc = BoxConstraints(
+    var cc = BoxConstraints(
       maxHeight: stableChildSize?.height ?? preferredHeight ?? maxHeight,
       maxWidth: stableChildSize?.width ?? preferredWidth ?? maxWidth,
       minHeight: stableChildSize?.height ?? preferredHeight ?? minHeight,
       minWidth: stableChildSize?.width ?? preferredWidth ?? minWidth,
     );
 
+    // after everything... if the incoming are tight then we must follow it
+    cc = c.hasTightWidth ? cc.tighten(width: c.maxWidth) : cc;
+    cc = c.hasTightHeight ? cc.tighten(height: c.maxHeight) : cc;
+
     return cc;
   }
 
diff --git a/packages/core/lib/src/widgets/html_table.dart b/packages/core/lib/src/widgets/html_table.dart
@@ -4,6 +4,8 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 import 'package:logging/logging.dart';
 
+import 'css_sizing.dart' show CssSizingHint;
+
 /// A TABLE widget.
 class HtmlTable extends MultiChildRenderObjectWidget {
   /// The table border sides.
@@ -19,12 +21,6 @@ class HtmlTable extends MultiChildRenderObjectWidget {
   /// Default: `0.0`.
   final double borderSpacing;
 
-  /// If non-null, overwrites the incoming [BoxConstraints.maxWidth].
-  final double? maxWidth;
-
-  /// If non-null, overwrites the incoming [BoxConstraints.minWidth].
-  final double? minWidth;
-
   /// Determines the order to lay children out horizontally.
   ///
   /// Default: [TextDirection.ltr].
@@ -36,21 +32,22 @@ class HtmlTable extends MultiChildRenderObjectWidget {
     this.borderCollapse = false,
     this.borderSpacing = 0.0,
     required super.children,
-    this.maxWidth,
-    this.minWidth,
     this.textDirection = TextDirection.ltr,
     super.key,
   });
 
   @override
-  RenderObject createRenderObject(BuildContext context) => _TableRenderObject(
-        border,
-        textDirection,
-        borderCollapse: borderCollapse,
-        borderSpacing: borderSpacing,
-        maxWidth: maxWidth,
-        minWidth: minWidth,
-      );
+  RenderObject createRenderObject(BuildContext context) {
+    final hint = context.dependOnInheritedWidgetOfExactType<CssSizingHint>();
+    return _TableRenderObject(
+      border,
+      textDirection,
+      borderCollapse: borderCollapse,
+      borderSpacing: borderSpacing,
+      maxWidth: hint?.maxWidth,
+      minWidth: hint?.minWidth,
+    );
+  }
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -66,8 +63,6 @@ class HtmlTable extends MultiChildRenderObjectWidget {
     );
     properties
         .add(DoubleProperty('borderSpacing', borderSpacing, defaultValue: 0.0));
-    properties.add(DoubleProperty('maxWidth', maxWidth, defaultValue: null));
-    properties.add(DoubleProperty('minWidth', minWidth, defaultValue: null));
     properties.add(
       DiagnosticsProperty(
         'textDirection',
@@ -79,12 +74,13 @@ class HtmlTable extends MultiChildRenderObjectWidget {
 
   @override
   void updateRenderObject(BuildContext context, RenderObject renderObject) {
+    final hint = context.dependOnInheritedWidgetOfExactType<CssSizingHint>();
     (renderObject as _TableRenderObject)
       ..setBorder(border)
       ..setBorderCollapse(borderCollapse)
       ..setBorderSpacing(borderSpacing)
-      ..setMaxWidth(maxWidth)
-      ..setMinWidth(minWidth)
+      ..setMaxWidth(hint?.maxWidth)
+      ..setMinWidth(hint?.minWidth)
       ..setTextDirection(textDirection);
   }
 }
@@ -333,36 +329,38 @@ class _TableRenderLayouter {
       child = data.nextSibling;
     }
 
+    final columnGapsSum = (columnCount + 1) * tro.columnGap;
+    final gapsAndPaddings = tro.paddingLeft + columnGapsSum + tro.paddingRight;
+
+    double? availableWidth;
     final maxWidth = tro._maxWidth ?? constraints.maxWidth;
+    if (maxWidth.isFinite && maxWidth > 0) {
+      availableWidth = maxWidth - gapsAndPaddings;
+    }
 
-    var wc = const BoxConstraints();
-    final troMinWidth = tro._minWidth;
-    if (troMinWidth != null && troMinWidth > 0) {
-      // only apply width constrains if a specific min value has been set
-      // this will be used mostly in percentage calculations
-      wc = BoxConstraints(maxWidth: maxWidth, minWidth: troMinWidth);
+    double? requiredWidth;
+    final minWidth = tro._minWidth ?? constraints.minWidth;
+    if (minWidth.isFinite && minWidth > 0) {
+      requiredWidth = minWidth - gapsAndPaddings;
     }
 
     return _TableDataStep1(
+      availableWidth: availableWidth,
       cells: cells,
       children: children,
       columnCount: columnCount,
-      remainingMaxWidth:
-          _TableDataStep1._calculateRemainingWidth(tro, columnCount, maxWidth),
-      remainingMinWidth: _TableDataStep1._calculateRemainingWidth(
-          tro, columnCount, wc.minWidth),
+      requiredWidth: requiredWidth,
       rowCount: rowCount,
-      widthConstraints: wc,
     );
   }
 
   _TableDataStep2 step2NaiveColumnWidths(_TableDataStep1 step1) {
     final cells = step1.cells;
     final naiveColumnWidths = List.filled(step1.columnCount, .0);
 
-    final remainingMinWidth = step1.remainingMinWidth;
-    if (remainingMinWidth != null && step1.columnCount > 0) {
-      final cellMinWidth = remainingMinWidth / step1.columnCount;
+    final requiredWidth = step1.requiredWidth;
+    if (requiredWidth != null && step1.columnCount > 0) {
+      final cellMinWidth = requiredWidth / step1.columnCount;
       for (var i = 0; i < cells.length; i++) {
         final data = cells[i];
         naiveColumnWidths.setMaxColumnWidths(tro, data, cellMinWidth);
@@ -379,9 +377,9 @@ class _TableRenderLayouter {
 
   _TableDataStep3 step3MinIntrinsicWidth(_TableDataStep2 step2) {
     final step1 = step2.step1;
+    final availableWidth = step1.availableWidth;
     final cells = step1.cells;
     final children = step1.children;
-    final remainingMaxWidth = step1.remainingMaxWidth;
 
     final cellSizes = List<Size?>.filled(children.length, null);
     final childMinWidths = List<double?>.filled(children.length, null);
@@ -393,7 +391,7 @@ class _TableRenderLayouter {
     // it only considers min value when the columns don't fit
     var columnWidths = maxColumnWidths;
     if (columnWidths.zeros.isEmpty &&
-        (remainingMaxWidth == null || columnWidths.sum <= remainingMaxWidth)) {
+        (availableWidth == null || columnWidths.sum <= availableWidth)) {
       return _TableDataStep3(
         step2,
         columnWidths: columnWidths,
@@ -411,10 +409,10 @@ class _TableRenderLayouter {
         if (cellSizes[i] == null) {
           // side effect
           // layout cells for the initial width
-          final layoutSize = layouter(child, step1.widthConstraints);
+          final layoutSize = layouter(child, constraints);
           cellSizes[i] = layoutSize;
           maxColumnWidths.setMaxColumnWidths(tro, data, layoutSize.width);
-          logger.fine('[3] Got child#$i $layoutSize@${step1.widthConstraints}');
+          logger.fine('[3] Got child#$i $layoutSize@$constraints');
           shouldLoop = true;
         }
 
@@ -446,9 +444,9 @@ class _TableRenderLayouter {
         }
       }
 
-      if (remainingMaxWidth != null) {
+      if (availableWidth != null) {
         columnWidths = redistributeValues(
-          available: remainingMaxWidth,
+          available: availableWidth,
           maxValues: maxColumnWidths,
           minValues: minColumnWidths,
         );
@@ -470,20 +468,20 @@ class _TableRenderLayouter {
     required List<double> minColumnWidths,
   }) {
     final step1 = step2.step1;
-    final remainingMaxWidth = step1.remainingMaxWidth;
+    final availableWidth = step1.availableWidth;
 
     final widthSum = columnWidths.sumRange(data);
     final maxWidthSum = maxColumnWidths.sumRange(data);
     if (widthSum >= maxWidthSum) {
       // cell has been allocated more than its requested value
       // skip measuring if not absolutely needed because it's expensive
 
-      if (remainingMaxWidth == null) {
-        // unbounded width constraints
+      if (availableWidth == null) {
+        // unlimited available space
         return null;
       }
 
-      if (columnWidths.sum <= remainingMaxWidth) {
+      if (columnWidths.sum <= availableWidth) {
         // current widths are good enough
         return null;
       }
@@ -658,34 +656,21 @@ class _TableRenderLayouter {
 
 @immutable
 class _TableDataStep1 {
+  final double? availableWidth;
   final List<_TableCellData> cells;
   final List<RenderBox> children;
   final int columnCount;
-  final double? remainingMaxWidth;
-  final double? remainingMinWidth;
+  final double? requiredWidth;
   final int rowCount;
-  final BoxConstraints widthConstraints;
 
   const _TableDataStep1({
+    required this.availableWidth,
     required this.cells,
     required this.children,
     required this.columnCount,
-    required this.remainingMaxWidth,
-    required this.remainingMinWidth,
+    required this.requiredWidth,
     required this.rowCount,
-    required this.widthConstraints,
   });
-
-  static double _calculateRemainingWidth(
-      _TableRenderObject tro, int columnCount, double width) {
-    if (width.isZero) {
-      return 0;
-    }
-
-    final columnGapsSum = (columnCount + 1) * tro.columnGap;
-    final gapsAndPaddings = tro.paddingLeft + columnGapsSum + tro.paddingRight;
-    return width - gapsAndPaddings;
-  }
 }
 
 @immutable
diff --git a/packages/core/test/tag_table_test.dart b/packages/core/test/tag_table_test.dart
@@ -686,22 +686,6 @@ Future<void> main() async {
         expect(after.borderSpacing, equals(20.0));
       });
 
-      testWidgets('updates maxWidths', (WidgetTester tester) async {
-        await explain(
-          tester,
-          '<div style="max-width: 100px"><table><tr><td>Foo</td></tr></table></div>',
-        );
-        final before = tester.table;
-        expect(before.maxWidth, equals(100.0));
-
-        await explain(
-          tester,
-          '<div style="max-width: 200px"><table><tr><td>Foo</td></tr></table></div>',
-        );
-        final after = tester.table;
-        expect(after.maxWidth, equals(200.0));
-      });
-
       testWidgets('updates textDirection', (WidgetTester tester) async {
         await explain(tester, '<table><tr><td>Foo</td></tr></table>');
         final before = tester.table;
@@ -994,7 +978,7 @@ Future<void> main() async {
 
     final goldenSkipEnvVar = Platform.environment['GOLDEN_SKIP'];
     final goldenSkip = goldenSkipEnvVar == null
-        ? Platform.isLinux
+        ? Platform.isMacOS
             ? null
             : 'Linux only'
         : 'GOLDEN_SKIP=$goldenSkipEnvVar';
